:root{--xwc_style_chatbox_width:450;--xwc_style_chatbox_height:700;--xwc_style_chat_icon_size:64;--xwc_style_font_size:16;--xwc_style_color_1:#8d00c9;--xwc_style_color_2:#4d64ff;--xwc_style_chat_icon_position_right:0;--xwc_style_chat_icon_position_padding_x:24;--xwc_style_chat_icon_position_padding_y:24;--xwc_style_padding_main_sides:2em;--xwc_style_box_shadow_main:0 5px 40px #00000029;--xwc_style_input_border:1px solid #dcdcdc;--xwc_style_input_container_bg_colour:#f2f4f7;--xwc_style_input_container_padding:var(--xwc_style_padding_main_sides);--xwc_style_input_padding_tb:0.8em;--xwc_style_input_padding_lr:1em;--xwc_style_input_padding:var(--xwc_style_input_padding_tb) var(--xwc_style_input_padding_lr);--xwc_style_button_size:1.28em;--xwc_style_border_radius:16px;--xwc_style_border_radius_medium:12px;--xwc_style_bubble_client_colour:var(--xwc_style_color_1)20;--xwc_style_bubble_server_colour:#f8fafd;--xwc_style_font_size_secondary:calc(var(--xwc_style_font_size)*0.93px);--xwc_style_font_color_primary:#1c1d1f;--xwc_style_font_color_secondary:#6b6d73;--xwc_style_z_index:99999;--xwc_style_chat_icon_position_left:"auto";--xwc_style_chat_icon_position_padding_top:24px;--xwc_style_gradient:135deg,#8b00c7 0%,#871bd0 11%,#8229d6 22%,#7f36dd 33%,#763fe4 44%,#7148ea 56%,#684def 67%,#6156f5 78%,#575cfa 89%,#4d64ff 100%}#xwc button{background:none;border:none;cursor:pointer;font-size:16px;font-size:calc(var(--xwc_style_font_size)*1px);margin:0;padding:0;transition:background-color .2s}#xwc .xwc-uicomponents-button-filled{align-items:center;background-color:#4d64ff;background-color:var(--xwc_style_color_2);border:none;border-radius:2em;color:#fff;display:flex;gap:.7em;height:-moz-fit-content;height:fit-content;justify-content:center;padding:.7em 1.2em;width:auto}#xwc .xwc-uicomponents-button-filled:hover{background-color:#8d00c9;background-color:var(--xwc_style_color_1)}#xwc .xwc-uicomponents-button-icon{align-items:center;display:flex;height:-moz-fit-content;height:fit-content;justify-content:center;width:1.28em;width:var(--xwc_style_button_size)}#xwc .xwc-uicomponents-button-icon svg{height:auto}#xwc .xwc-uicomponents-button-icon:hover path{fill:#8d00c9;fill:var(--xwc_style_color_1)}#xwc .xwc-uicomponents-input-outlined-bottom-container{align-items:center;background-color:#0000;border:none;border-bottom:1px solid #dcdcdc;border-bottom:var(--xwc_style_input_border);border-radius:12px;border-radius:var(--xwc_style_border_radius_medium);display:flex;font-size:14.88px;font-size:var(--xwc_style_font_size_secondary);gap:10px;justify-content:space-between;outline:none;padding:.8em 1em;padding:var(--xwc_style_input_padding);width:100%}#xwc .xwc-uicomponents-input-outlined-bottom{border:none;flex-grow:1;font-size:inherit;margin:0;outline:none;padding:0}#xwc .xwc-uicomponents-input-textarea{background:none;border:none;color:#1c1d1f;color:var(--xwc_style_font_color_primary);font-family:inherit;font-size:16px;font-size:calc(var(--xwc_style_font_size)*1px);outline:none;resize:none;width:100%}#xwc .xwc-uicomponents-icon-large{font-size:51.2px;font-size:calc(var(--xwc_style_font_size)*3.2px)}#xwc #xwc-init{grid-area:1/1;margin-left:"auto";margin-left:var(--xwc_style_chat_icon_position_left);margin-right:0;margin-right:var(--xwc_style_chat_icon_position_right);margin-top:auto}#xwc #xwc-init button{align-items:center;background-color:#8d00c9;background-color:var(--xwc_style_color_1);border-radius:50%;box-shadow:0 5px 40px #00000029;box-shadow:var(--xwc_style_box_shadow_main);display:flex;flex-shrink:0;height:64px;height:calc(var(--xwc_style_chat_icon_size)*1px);justify-content:center;position:relative;width:64px;width:calc(var(--xwc_style_chat_icon_size)*1px)}#xwc #xwc-init [class^=xwc-init-icon-container]{position:absolute}#xwc #xwc-init .xwc-init-icon-container-chat{align-items:center;display:flex;justify-content:center;padding:25%}#xwc #xwc-app-nav{align-items:center;color:#fff;display:flex;flex-shrink:0;font-size:16px;font-size:calc(var(--xwc_style_font_size)*1px);gap:1em;height:4em;justify-content:space-between;padding:.65em 2em;padding:.65em var(--xwc_style_padding_main_sides)}#xwc #xwc-app-nav *{max-height:100%;max-width:100%}#xwc #xwc-app-nav .xwc-app-nav__main-icon{align-items:center;display:flex;flex-shrink:0;height:100%;justify-content:center;margin-top:.2em;width:1.28em}#xwc #xwc-app-nav .xwc-app-nav__title{margin-right:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#xwc #xwc-app-nav .xwc-app-nav__window-controller-group{align-items:center;display:flex;gap:.57em;justify-content:center}#xwc #xwc-app-nav .xwc-app-nav__window-controller-group .xwc-uicomponents-button-icon:hover path{fill:#fff}#xwc .xwc-app-chat-messages-message{border-radius:12px;border-radius:var(--xwc_style_border_radius_medium);display:flex;flex-direction:column;font-size:16px;font-size:calc(var(--xwc_style_font_size)*1px);gap:.5em;max-width:80%;padding:.7em 1em}#xwc .xwc-app-chat-messages-message .xwc-app-chat-messages-message-time{align-self:flex-end;color:#6b6d73;color:var(--xwc_style_font_color_secondary);font-size:12px;font-size:calc(var(--xwc_style_font_size)*.75px)}#xwc .xwc-app-chat-messages-message-client{align-self:flex-end;background-color:#8d00c920;background-color:var(--xwc_style_bubble_client_colour)}#xwc .xwc-app-chat-messages-message-server{align-self:flex-start;background-color:#f8fafd;background-color:var(--xwc_style_bubble_server_colour)}#xwc .xwc-app-chat-messages-message-margin-top{margin-top:.8em}#xwc #xwc-app-chat-messages-closed-container{align-items:center;align-self:center;display:flex;flex-direction:column;justify-content:center}#xwc .xwc-app-chat-messages-alert{align-self:center;color:#6b6d73;color:var(--xwc_style_font_color_secondary)}#xwc #xwc-app-chat-messages{display:flex;flex-direction:column;flex-grow:1;overflow:auto;padding:2em;padding:var(--xwc_style_padding_main_sides);padding-bottom:0;row-gap:.8em}#xwc #xwc-app-chat-messages #xwc-app-chat-end-of-message{margin-top:2em;margin-top:var(--xwc_style_padding_main_sides)}#xwc #xwc-app-chat-bottom{background-color:#f2f4f7;background-color:var(--xwc_style_input_container_bg_colour);border-radius:16px 16px 0 0;border-radius:var(--xwc_style_border_radius) var(--xwc_style_border_radius) 0 0;border-radius:0;display:flex;flex-direction:column;gap:1em;padding:2em;padding:var(--xwc_style_input_container_padding);padding-bottom:0;padding-top:2.5em}#xwc #xwc-app-chat-bottom .xwc-app-chat-bottom__input-container{align-items:center;background-color:#fff;border-radius:12px;border-radius:var(--xwc_style_border_radius_medium);display:flex;justify-content:center;overflow:hidden;padding:.8em 1em;padding:var(--xwc_style_input_padding)}#xwc #xwc-app-chat-bottom .xwc-app-chat-bottom__input-container textarea{padding:0}#xwc #xwc-app-chat-bottom .xwc-app-chat-bottom__button-group{align-items:center;display:flex;justify-content:space-between;margin-top:.5em}#xwc .xwc-app-chat{background-color:#fff;display:flex;flex-direction:column;flex-grow:1;justify-content:space-between;overflow:hidden}#xwc #xwc-app-welcome-banner{flex-grow:1;flex-shrink:0;overflow:hidden;padding:2em;padding:var(--xwc_style_padding_main_sides)}#xwc #xwc-app-welcome-banner .xwc-app-welcome-banner__text-1{color:#fff;font-size:36.576px;font-size:calc(var(--xwc_style_font_size)*2.286px);margin-bottom:16px;margin-bottom:calc(var(--xwc_style_font_size)*1px);white-space:pre-wrap}#xwc #xwc-app-welcome-banner .xwc-app-welcome-banner__text-2{color:#fff;font-size:27.424px;font-size:calc(var(--xwc_style_font_size)*1.714px);white-space:pre-wrap}#xwc #xwc-app-welcome-chatstart{background-color:#f2f4f7;background-color:var(--xwc_style_input_container_bg_colour);background-color:#fff;border-radius:16px 16px 0 0;border-radius:var(--xwc_style_border_radius) var(--xwc_style_border_radius) 0 0;border-radius:16px;border-radius:var(--xwc_style_border_radius);display:flex;flex-direction:column;gap:1em;gap:.2em;margin:1.5em 1.5em 0;padding:2em;padding:var(--xwc_style_input_container_padding);padding-top:2.5em}#xwc #xwc-app-welcome-chatstart input,#xwc #xwc-app-welcome-chatstart select{color:#1c1d1f;color:var(--xwc_style_font_color_primary);font-size:16px;font-size:calc(var(--xwc_style_font_size)*1px)}#xwc #xwc-app-welcome-chatstart select{background:none;border:none;outline:none;padding:0;text-overflow:ellipsis;width:100%}#xwc #xwc-app-welcome-chatstart option{padding:0;text-overflow:ellipsis}#xwc #xwc-app-welcome-chatstart button{font-size:16px;font-size:calc(var(--xwc_style_font_size)*1px)}#xwc #xwc-app-welcome-chatstart .xwc-app-welcome-chatstart__button-standalone{align-self:flex-end;margin-top:1.7em}#xwc #xwc-app-welcome-chatstart .xwc-app-welcome-chatstart__button-group-container{align-items:center;display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;margin-top:1.7em}#xwc #xwc-app-welcome{display:flex;flex-direction:column;flex-grow:1;justify-content:space-between;overflow:hidden;overflow-y:auto}#xwc #xwc-app-ended-exit-button{align-self:center;margin-top:20px;width:-moz-fit-content;width:fit-content}#xwc #xwc-app-ended .xwc-app-ended-component-container{align-items:center;background-color:#f8fafd;background-color:var(--xwc_style_bubble_server_colour);border-radius:16px;border-radius:var(--xwc_style_border_radius);display:flex;flex-direction:column;gap:1em;justify-content:space-between;padding:1.5em}#xwc #xwc-app-ended .xwc-app-ended-component-container .xwc-app-ended-input{background-color:#fff;border:1px solid #dcdcdc;border:var(--xwc_style_input_border)}#xwc #xwc-app-ended .xwc-app-ended-component-container button{margin-top:.9em}#xwc #xwc-app-error{align-items:center;display:flex;flex-direction:column;gap:1.3em;margin:auto}#xwc #xwc-app-error .xwc-app-error-message{color:#fff}#xwc #xwc-app-error .xwc-app-error-button{background-color:#f2f4f7;background-color:var(--xwc_style_input_container_bg_colour);color:#212121}#xwc #xwc-app-dialog-container{align-items:center;background-color:#6d6d6d4d;display:flex;flex-direction:column;height:100%;justify-content:center;position:absolute;top:0;width:100%}#xwc #xwc-app-dialog-container #xwc-app-dialog{background-color:#fff;border-radius:16px;border-radius:var(--xwc_style_border_radius);display:flex;flex-direction:column;gap:10px;padding:2em;width:80%}#xwc #xwc-app-dialog-container #xwc-app-dialog .xwc-app-dialog-header{font-weight:600}#xwc #xwc-app-dialog-container #xwc-app-dialog .xwc-app-dialog-buttons-group{align-items:center;display:flex;gap:12px;justify-content:center;margin-top:7px}#xwc #xwc-app-dialog-container #xwc-app-dialog .xwc-app-dialog-buttons-group button{background-color:#a4a4a4;border-radius:12px;border-radius:var(--xwc_style_border_radius_medium);color:#fff;padding:.7em 1.2em}#xwc #xwc-app-dialog-container #xwc-app-dialog .xwc-app-dialog-buttons-group button:hover{background-color:#8d00c9;background-color:var(--xwc_style_color_1)}#xwc #xwc-app-dialog-container #xwc-app-dialog .xwc-app-dialog-buttons-group .xwc-app-dialog-button-yes{background-color:#4d64ff;background-color:var(--xwc_style_color_2)}#xwc .xwc-app-powered-by-xelion{align-items:center;display:flex;justify-content:center;padding:.9em}#xwc .xwc-app-powered-by-xelion .xwc-app-powered-by-xelion-text-wrapper{align-items:center;display:flex;justify-content:center;width:100%}#xwc .xwc-app-powered-by-xelion .xwc-app-powered-by-xelion-text-wrapper .xwc-app-powered-by-xelion-logo-wrapper{align-items:center;display:flex;text-decoration:none}#xwc .xwc-app-powered-by-xelion .xwc-app-powered-by-xelion-text-wrapper .xwc-app-powered-by-xelion-logo-wrapper svg{height:1em;margin-top:.1em;max-height:1em;width:auto}#xwc .xwc-app-powered-by-xelion-grey-bg{background-color:#f2f4f7;background-color:var(--xwc_style_input_container_bg_colour)}#xwc .xwc-app-powered-by-xelion-grey-text{color:#6b6d73cc}#xwc .xwc-app-powered-by-xelion-grey-logo{opacity:.8}#xwc .xwc-app-powered-by-xelion-grey-logo:hover{opacity:1}#xwc .xwc-app-powered-by-xelion-transparent-bg{background-color:none}#xwc .xwc-app-powered-by-xelion-transparent-text{color:#ffffffe6}#xwc .xwc-app-powered-by-xelion-transparent-logo{opacity:.9}#xwc .xwc-app-powered-by-xelion-transparent-logo:hover{opacity:1}#xwc #xwc-app{background-image:linear-gradient(135deg,#8b00c7,#871bd0 11%,#8229d6 22%,#7f36dd 33%,#763fe4 44%,#7148ea 56%,#684def 67%,#6156f5 78%,#575cfa 89%,#4d64ff);background-image:linear-gradient(var(--xwc_style_gradient));border-radius:16px;border-radius:var(--xwc_style_border_radius);box-shadow:0 5px 40px #00000029;box-shadow:var(--xwc_style_box_shadow_main);grid-area:1/1;height:700px;height:calc(var(--xwc_style_chatbox_height)*1px);max-height:calc(100vh - 48px);max-height:calc(100vh - var(--xwc_style_chat_icon_position_padding_y)*1px - var(--xwc_style_chat_icon_position_padding_top));max-width:calc(100vw - 48px);max-width:calc(100vw - var(--xwc_style_chat_icon_position_padding_x)*2px);overflow:hidden;position:relative;width:450px;width:calc(var(--xwc_style_chatbox_width)*1px)}#xwc #xwc-app #xwc-app-main{display:flex;flex-direction:column;height:100%;justify-content:space-between;max-height:100%}#xwc{bottom:0;color:#1c1d1f;color:var(--xwc_style_font_color_primary);display:grid;font-size:16px;font-size:calc(var(--xwc_style_font_size)*1px);margin:24px;margin:var(--xwc_style_chat_icon_position_padding_top) calc(var(--xwc_style_chat_icon_position_padding_x)*1px) calc(var(--xwc_style_chat_icon_position_padding_y)*1px);max-height:100%;max-width:100%;position:fixed;right:0;right:var(--xwc_style_chat_icon_position_right);z-index:99999;z-index:var(--xwc_style_z_index)}#xwc,#xwc *{box-sizing:border-box}#xwc option{background-color:#fff}#xwc p{padding:0;white-space:pre-wrap}#xwc form,#xwc p{margin:0}#xwc ::-webkit-scrollbar{width:.5em}#xwc ::-webkit-scrollbar-track{background:#0000}#xwc ::-webkit-scrollbar-thumb{background:#ced0d1;border-radius:10px}#xwc ::-webkit-scrollbar-thumb:hover{background:#888}#xwc .xwc-text-show-white-space{white-space:pre-wrap}*, ::before, ::after{ --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; } ::backdrop{ --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; } /* ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com */ /* 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) */ *, ::before, ::after { box-sizing: border-box; /* 1 */ border-width: 0; /* 2 */ border-style: solid; /* 2 */ border-color: #e5e7eb; /* 2 */ } ::before, ::after { --tw-content: ''; } /* 1. Use a consistent sensible line-height in all browsers. 2. Prevent adjustments of font size after orientation changes in iOS. 3. Use a more readable tab size. 4. Use the user's configured `sans` font-family by default. 5. Use the user's configured `sans` font-feature-settings by default. 6. Use the user's configured `sans` font-variation-settings by default. 7. Disable tap highlights on iOS */ html, :host { line-height: 1.5; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ -moz-tab-size: 4; /* 3 */ -o-tab-size: 4; tab-size: 4; /* 3 */ font-family: DM Sans, ui-sans-serif, system-ui; /* 4 */ font-feature-settings: normal; /* 5 */ font-variation-settings: normal; /* 6 */ -webkit-tap-highlight-color: transparent; /* 7 */ } /* 1. Remove the margin in all browsers. 2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. */ body { margin: 0; /* 1 */ line-height: inherit; /* 2 */ } /* 1. Add the correct height in Firefox. 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) 3. Ensure horizontal rules are visible by default. */ hr { height: 0; /* 1 */ color: inherit; /* 2 */ border-top-width: 1px; /* 3 */ } /* Add the correct text decoration in Chrome, Edge, and Safari. */ abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } /* Remove the default font size and weight for headings. */ h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } /* Reset links to optimize for opt-in styling instead of opt-out. */ a { color: inherit; text-decoration: inherit; } /* Add the correct font weight in Edge and Safari. */ b, strong { font-weight: bolder; } /* 1. Use the user's configured `mono` font-family by default. 2. Use the user's configured `mono` font-feature-settings by default. 3. Use the user's configured `mono` font-variation-settings by default. 4. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */ font-feature-settings: normal; /* 2 */ font-variation-settings: normal; /* 3 */ font-size: 1em; /* 4 */ } /* Add the correct font size in all browsers. */ small { font-size: 80%; } /* Prevent `sub` and `sup` elements from affecting the line height in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) 3. Remove gaps between table borders by default. */ table { text-indent: 0; /* 1 */ border-color: inherit; /* 2 */ border-collapse: collapse; /* 3 */ } /* 1. Change the font styles in all browsers. 2. Remove the margin in Firefox and Safari. 3. Remove default padding in all browsers. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-feature-settings: inherit; /* 1 */ font-variation-settings: inherit; /* 1 */ font-size: 100%; /* 1 */ font-weight: inherit; /* 1 */ line-height: inherit; /* 1 */ letter-spacing: inherit; /* 1 */ color: inherit; /* 1 */ margin: 0; /* 2 */ padding: 0; /* 3 */ } /* Remove the inheritance of text transform in Edge and Firefox. */ button, select { text-transform: none; } /* 1. Correct the inability to style clickable types in iOS and Safari. 2. Remove default button styles. */ button, input:where([type='button']), input:where([type='reset']), input:where([type='submit']) { -webkit-appearance: button; /* 1 */ background-color: transparent; /* 2 */ background-image: none; /* 2 */ } /* Use the modern Firefox focus style for all focusable elements. */ :-moz-focusring { outline: auto; } /* Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) */ :-moz-ui-invalid { box-shadow: none; } /* Add the correct vertical alignment in Chrome and Firefox. */ progress { vertical-align: baseline; } /* Correct the cursor style of increment and decrement buttons in Safari. */ ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } /* 1. Correct the odd appearance in Chrome and Safari. 2. Correct the outline style in Safari. */ [type='search'] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /* Remove the inner padding in Chrome and Safari on macOS. */ ::-webkit-search-decoration { -webkit-appearance: none; } /* 1. Correct the inability to style clickable types in iOS and Safari. 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Add the correct display in Chrome and Safari. */ summary { display: list-item; } /* Removes the default spacing and border for appropriate elements. */ blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { margin: 0; } fieldset { margin: 0; padding: 0; } legend { padding: 0; } ol, ul, menu { list-style: none; margin: 0; padding: 0; } /* Reset default styling for dialogs. */ dialog { padding: 0; } /* Prevent resizing textareas horizontally by default. */ textarea { resize: vertical; } /* 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) 2. Set the default placeholder color to the user's configured gray 400 color. */ input::-moz-placeholder, textarea::-moz-placeholder { opacity: 1; /* 1 */ color: #9ca3af; /* 2 */ } input::placeholder, textarea::placeholder { opacity: 1; /* 1 */ color: #9ca3af; /* 2 */ } /* Set the default cursor for buttons. */ button, [role="button"] { cursor: pointer; } /* Make sure disabled buttons don't get the pointer cursor. */ :disabled { cursor: default; } /* 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) This can trigger a poorly considered lint error in some tools but is included by design. */ img, svg, video, canvas, audio, iframe, embed, object { display: block; /* 1 */ vertical-align: middle; /* 2 */ } /* Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) */ img, video { max-width: 100%; height: auto; } /* Make elements with the HTML hidden attribute stay hidden by default */ [hidden]:where(:not([hidden="until-found"])) { display: none; } :root, [data-theme]{ background-color: var(--fallback-b1,oklch(var(--b1)/1)); color: var(--fallback-bc,oklch(var(--bc)/1)); } @supports not (color: oklch(0% 0 0)){ :root{ color-scheme: light; --fallback-p: #491eff; --fallback-pc: #d4dbff; --fallback-s: #ff41c7; --fallback-sc: #fff9fc; --fallback-a: #00cfbd; --fallback-ac: #00100d; --fallback-n: #2b3440; --fallback-nc: #d7dde4; --fallback-b1: #ffffff; --fallback-b2: #e5e6e6; --fallback-b3: #e5e6e6; --fallback-bc: #1f2937; --fallback-in: #00b3f0; --fallback-inc: #000000; --fallback-su: #00ca92; --fallback-suc: #000000; --fallback-wa: #ffc22d; --fallback-wac: #000000; --fallback-er: #ff6f70; --fallback-erc: #000000; } @media (prefers-color-scheme: dark){ :root{ color-scheme: dark; --fallback-p: #7582ff; --fallback-pc: #050617; --fallback-s: #ff71cf; --fallback-sc: #190211; --fallback-a: #00c7b5; --fallback-ac: #000e0c; --fallback-n: #2a323c; --fallback-nc: #a6adbb; --fallback-b1: #1d232a; --fallback-b2: #191e24; --fallback-b3: #15191e; --fallback-bc: #a6adbb; --fallback-in: #00b3f0; --fallback-inc: #000000; --fallback-su: #00ca92; --fallback-suc: #000000; --fallback-wa: #ffc22d; --fallback-wac: #000000; --fallback-er: #ff6f70; --fallback-erc: #000000; } } } html{ -webkit-tap-highlight-color: transparent; } *{ scrollbar-color: color-mix(in oklch, currentColor 35%, transparent) transparent; } *:hover{ scrollbar-color: color-mix(in oklch, currentColor 60%, transparent) transparent; } .container{ width: 100%; margin-right: auto; margin-left: auto; padding-right: 1.25rem; padding-left: 1.25rem; } @media (min-width: 640px){ .container{ max-width: 640px; padding-right: 2rem; padding-left: 2rem; } } @media (min-width: 768px){ .container{ max-width: 768px; padding-right: 2rem; padding-left: 2rem; } } @media (min-width: 1024px){ .container{ max-width: 1024px; padding-right: 2rem; padding-left: 2rem; } } @media (min-width: 1280px){ .container{ max-width: 1280px; padding-right: 1rem; padding-left: 1rem; } } @media (min-width: 1536px){ .container{ max-width: 1536px; padding-right: 0; padding-left: 0; } } .avatar.placeholder > div{ display: flex; align-items: center; justify-content: center; } .badge{ display: inline-flex; align-items: center; justify-content: center; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0, 0, 0.2, 1); transition-duration: 200ms; height: 1.25rem; font-size: 0.875rem; line-height: 1.25rem; width: -moz-fit-content; width: fit-content; padding-left: 0.563rem; padding-right: 0.563rem; border-radius: var(--rounded-badge, 1.9rem); border-width: 1px; --tw-border-opacity: 1; border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity))); --tw-bg-opacity: 1; background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity))); --tw-text-opacity: 1; color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))); } .breadcrumbs{ max-width: 100%; overflow-x: auto; padding-top: 0.5rem; padding-bottom: 0.5rem; } .breadcrumbs > ul, .breadcrumbs > ol{ display: flex; align-items: center; white-space: nowrap; min-height: -moz-min-content; min-height: min-content; } .breadcrumbs > ul > li, .breadcrumbs > ol > li{ display: flex; align-items: center; } .breadcrumbs > ul > li > a, .breadcrumbs > ol > li > a{ display: flex; cursor: pointer; align-items: center; } @media (hover:hover){ .breadcrumbs > ul > li > a:hover, .breadcrumbs > ol > li > a:hover{ text-decoration-line: underline; } .link-hover:hover{ text-decoration-line: underline; } .label a:hover{ --tw-text-opacity: 1; color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))); } .menu li > *:not(ul, .menu-title, details, .btn):active, .menu li > *:not(ul, .menu-title, details, .btn).active, .menu li > details > summary:active{ --tw-bg-opacity: 1; background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity))); --tw-text-opacity: 1; color: var(--fallback-nc,oklch(var(--nc)/var(--tw-text-opacity))); } .tab:hover{ --tw-text-opacity: 1; } .table tr.hover:hover, .table tr.hover:nth-child(even):hover{ --tw-bg-opacity: 1; background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity))); } } .btn{ display: inline-flex; height: 3rem; min-height: 3rem; flex-shrink: 0; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; flex-wrap: wrap; align-items: center; justify-content: center; border-radius: var(--rounded-btn, 0.5rem); border-color: transparent; border-color: oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity)); padding-left: 1rem; padding-right: 1rem; text-align: center; font-size: 0.875rem; line-height: 1em; gap: 0.5rem; font-weight: 600; text-decoration-line: none; transition-duration: 200ms; transition-timing-function: cubic-bezier(0, 0, 0.2, 1); border-width: var(--border-btn, 1px); transition-property: color, background-color, border-color, opacity, box-shadow, transform; --tw-text-opacity: 1; color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))); --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); outline-color: var(--fallback-bc,oklch(var(--bc)/1)); background-color: oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity)); --tw-bg-opacity: 1; --tw-border-opacity: 1; } .btn-disabled, .btn[disabled], .btn:disabled{ pointer-events: none; } :where(.btn:is(input[type="checkbox"])), :where(.btn:is(input[type="radio"])){ width: auto; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .btn:is(input[type="checkbox"]):after, .btn:is(input[type="radio"]):after{ --tw-content: attr(aria-label); content: var(--tw-content); } .card{ position: relative; display: flex; flex-direction: column; border-radius: var(--rounded-box, 1rem); } .card:focus{ outline: 2px solid transparent; outline-offset: 2px; } .card-body{ display: flex; flex: 1 1 auto; flex-direction: column; padding: var(--padding-card, 2rem); gap: 0.5rem; } .card-body :where(p){ flex-grow: 1; } .card figure{ display: flex; align-items: center; justify-content: center; } .card.image-full{ display: grid; } .card.image-full:before{ position: relative; content: ""; z-index: 10; border-radius: var(--rounded-box, 1rem); --tw-bg-opacity: 1; background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity))); opacity: 0.75; } .card.image-full:before, .card.image-full > *{ grid-column-start: 1; grid-row-start: 1; } .card.image-full > figure img{ height: 100%; -o-object-fit: cover; object-fit: cover; } .card.image-full > .card-body{ position: relative; z-index: 20; --tw-text-opacity: 1; color: var(--fallback-nc,oklch(var(--nc)/var(--tw-text-opacity))); } .checkbox{ flex-shrink: 0; --chkbg: var(--fallback-bc,oklch(var(--bc)/1)); --chkfg: var(--fallback-b1,oklch(var(--b1)/1)); height: 1.5rem; width: 1.5rem; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: var(--rounded-btn, 0.5rem); border-width: 1px; border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity))); --tw-border-opacity: 0.2; } .dropdown{ position: relative; display: inline-block; } .dropdown > *:not(summary):focus{ outline: 2px solid transparent; outline-offset: 2px; } .dropdown .dropdown-content{ position: absolute; } .dropdown:is(:not(details)) .dropdown-content{ visibility: hidden; opacity: 0; transform-origin: top; --tw-scale-x: .95; --tw-scale-y: .95; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0, 0, 0.2, 1); transition-duration: 200ms; } .dropdown-end .dropdown-content{ inset-inline-end: 0px; } .dropdown-left .dropdown-content{ bottom: auto; inset-inline-end: 100%; top: 0px; transform-origin: right; } .dropdown-right .dropdown-content{ bottom: auto; inset-inline-start: 100%; top: 0px; transform-origin: left; } .dropdown-bottom .dropdown-content{ bottom: auto; top: 100%; transform-origin: top; } .dropdown-top .dropdown-content{ bottom: 100%; top: auto; transform-origin: bottom; } .dropdown-end.dropdown-right .dropdown-content{ bottom: 0px; top: auto; } .dropdown-end.dropdown-left .dropdown-content{ bottom: 0px; top: auto; } .dropdown.dropdown-open .dropdown-content, .dropdown:not(.dropdown-hover):focus .dropdown-content, .dropdown:focus-within .dropdown-content{ visibility: visible; opacity: 1; } @media (hover: hover){ .dropdown.dropdown-hover:hover .dropdown-content{ visibility: visible; opacity: 1; } .btm-nav > *.disabled:hover, .btm-nav > *[disabled]:hover{ pointer-events: none; --tw-border-opacity: 0; background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity))); --tw-bg-opacity: 0.1; color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))); --tw-text-opacity: 0.2; } .btn:hover{ --tw-border-opacity: 1; border-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-border-opacity))); --tw-bg-opacity: 1; background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity))); } @supports (color: color-mix(in oklab, black, black)){ .btn:hover{ background-color: color-mix( in oklab, oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity, 1)) 90%, black ); border-color: color-mix( in oklab, oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity, 1)) 90%, black ); } } @supports not (color: oklch(0% 0 0)){ .btn:hover{ background-color: var(--btn-color, var(--fallback-b2)); border-color: var(--btn-color, var(--fallback-b2)); } } .btn.glass:hover{ --glass-opacity: 25%; --glass-border-opacity: 15%; } .btn-outline.btn-primary:hover{ --tw-text-opacity: 1; color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity))); } @supports (color: color-mix(in oklab, black, black)){ .btn-outline.btn-primary:hover{ background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black); border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black); } } .btn-outline.btn-secondary:hover{ --tw-text-opacity: 1; color: var(--fallback-sc,oklch(var(--sc)/var(--tw-text-opacity))); } @supports (color: color-mix(in oklab, black, black)){ .btn-outline.btn-secondary:hover{ background-color: color-mix(in oklab, var(--fallback-s,oklch(var(--s)/1)) 90%, black); border-color: color-mix(in oklab, var(--fallback-s,oklch(var(--s)/1)) 90%, black); } } .btn-disabled:hover, .btn[disabled]:hover, .btn:disabled:hover{ --tw-border-opacity: 0; background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity))); --tw-bg-opacity: 0.2; color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))); --tw-text-opacity: 0.2; } @supports (color: color-mix(in oklab, black, black)){ .btn:is(input[type="checkbox"]:checked):hover, .btn:is(input[type="radio"]:checked):hover{ background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black); border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black); } } .dropdown.dropdown-hover:hover .dropdown-content{ --tw-scale-x: 1; --tw-scale-y: 1; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } :where(.menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):not(.active, .btn):hover, :where(.menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(.active, .btn):hover{ cursor: pointer; outline: 2px solid transparent; outline-offset: 2px; } @supports (color: oklch(0% 0 0)){ :where(.menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):not(.active, .btn):hover, :where(.menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(.active, .btn):hover{ background-color: var(--fallback-bc,oklch(var(--bc)/0.1)); } } .tab[disabled], .tab[disabled]:hover{ cursor: not-allowed; color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))); --tw-text-opacity: 0.2; } } .dropdown:is(details) summary::-webkit-details-marker{ display: none; } .footer{ display: grid; width: 100%; grid-auto-flow: row; place-items: start; -moz-column-gap: 1rem; column-gap: 1rem; row-gap: 2.5rem; font-size: 0.875rem; line-height: 1.25rem; } .footer > *{ display: grid; place-items: start; gap: 0.5rem; } @media (min-width: 48rem){ .footer{ grid-auto-flow: column; } .footer-center{ grid-auto-flow: row dense; } } .label{ display: flex; -webkit-user-select: none; -moz-user-select: none; user-select: none; align-items: center; justify-content: space-between; padding-left: 0.25rem; padding-right: 0.25rem; padding-top: 0.5rem; padding-bottom: 0.5rem; } .hero{ display: grid; width: 100%; place-items: center; background-size: cover; background-position: center; } .hero > *{ grid-column-start: 1; grid-row-start: 1; } .indicator{ position: relative; display: inline-flex; width: -moz-max-content; width: max-content; } .indicator :where(.indicator-item){ z-index: 1; position: absolute; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); white-space: nowrap; } .input{ flex-shrink: 1; -webkit-appearance: none; -moz-appearance: none; appearance: none; height: 3rem; padding-left: 1rem; padding-right: 1rem; font-size: 1rem; line-height: 2; line-height: 1.5rem; border-radius: var(--rounded-btn, 0.5rem); border-width: 1px; border-color: transparent; --tw-bg-opacity: 1; background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity))); } .input[type="number"]::-webkit-inner-spin-button, .input-md[type="number"]::-webkit-inner-spin-button{ margin-top: -1rem; margin-bottom: -1rem; margin-inline-end: -1rem; } .join{ display: inline-flex; align-items: stretch; border-radius: var(--rounded-btn, 0.5rem); } .join :where(.join-item){ border-start-end-radius: 0; border-end-end-radius: 0; border-end-start-radius: 0; border-start-start-radius: 0; } .join .join-item:not(:first-child):not(:last-child), .join *:not(:first-child):not(:last-child) .join-item{ border-start-end-radius: 0; border-end-end-radius: 0; border-end-start-radius: 0; border-start-start-radius: 0; } .join .join-item:first-child:not(:last-child), .join *:first-child:not(:last-child) .join-item{ border-start-end-radius: 0; border-end-end-radius: 0; } .join .dropdown .join-item:first-child:not(:last-child), .join *:first-child:not(:last-child) .dropdown .join-item{ border-start-end-radius: inherit; border-end-end-radius: inherit; } .join :where(.join-item:first-child:not(:last-child)), .join :where(*:first-child:not(:last-child) .join-item){ border-end-start-radius: inherit; border-start-start-radius: inherit; } .join .join-item:last-child:not(:first-child), .join *:last-child:not(:first-child) .join-item{ border-end-start-radius: 0; border-start-start-radius: 0; } .join :where(.join-item:last-child:not(:first-child)), .join :where(*:last-child:not(:first-child) .join-item){ border-start-end-radius: inherit; border-end-end-radius: inherit; } @supports not selector(:has(*)){ :where(.join *){ border-radius: inherit; } } @supports selector(:has(*)){ :where(.join *:has(.join-item)){ border-radius: inherit; } } .link{ cursor: pointer; text-decoration-line: underline; } .link-hover{ text-decoration-line: none; } .menu{ display: flex; flex-direction: column; flex-wrap: wrap; font-size: 0.875rem; line-height: 1.25rem; padding: 0.5rem; } .menu :where(li ul){ position: relative; white-space: nowrap; margin-inline-start: 1rem; padding-inline-start: 0.5rem; } .menu :where(li:not(.menu-title) > *:not(ul, details, .menu-title, .btn)), .menu :where(li:not(.menu-title) > details > summary:not(.menu-title)){ display: grid; grid-auto-flow: column; align-content: flex-start; align-items: center; gap: 0.5rem; grid-auto-columns: minmax(auto, max-content) auto max-content; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .menu li.disabled{ cursor: not-allowed; -webkit-user-select: none; -moz-user-select: none; user-select: none; color: var(--fallback-bc,oklch(var(--bc)/0.3)); } .menu :where(li > .menu-dropdown:not(.menu-dropdown-show)){ display: none; } :where(.menu li){ position: relative; display: flex; flex-shrink: 0; flex-direction: column; flex-wrap: wrap; align-items: stretch; } :where(.menu li) .badge{ justify-self: end; } .modal{ pointer-events: none; position: fixed; inset: 0px; margin: 0px; display: grid; height: 100%; max-height: none; width: 100%; max-width: none; justify-items: center; padding: 0px; opacity: 0; overscroll-behavior: contain; z-index: 999; background-color: transparent; color: inherit; transition-duration: 200ms; transition-timing-function: cubic-bezier(0, 0, 0.2, 1); transition-property: transform, opacity, visibility; overflow-y: hidden; } :where(.modal){ align-items: center; } .modal-open, .modal:target, .modal-toggle:checked + .modal, .modal[open]{ pointer-events: auto; visibility: visible; opacity: 1; } :root:has(:is(.modal-open, .modal:target, .modal-toggle:checked + .modal, .modal[open])){ overflow: hidden; scrollbar-gutter: stable; } .radio{ flex-shrink: 0; --chkbg: var(--bc); height: 1.5rem; width: 1.5rem; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 9999px; border-width: 1px; border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity))); --tw-border-opacity: 0.2; } .range{ height: 1.5rem; width: 100%; cursor: pointer; -moz-appearance: none; appearance: none; -webkit-appearance: none; --range-shdw: var(--fallback-bc,oklch(var(--bc)/1)); overflow: hidden; border-radius: var(--rounded-box, 1rem); background-color: transparent; } .range:focus{ outline: none; } .rating{ position: relative; display: inline-flex; } .rating :where(input){ cursor: pointer; border-radius: 0px; animation: rating-pop var(--animation-input, 0.25s) ease-out; height: 1.5rem; width: 1.5rem; background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity))); --tw-bg-opacity: 1; } .select{ display: inline-flex; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; height: 3rem; min-height: 3rem; padding-inline-start: 1rem; padding-inline-end: 2.5rem; font-size: 0.875rem; line-height: 1.25rem; line-height: 2; border-radius: var(--rounded-btn, 0.5rem); border-width: 1px; border-color: transparent; --tw-bg-opacity: 1; background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity))); background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 20px) calc(1px + 50%), calc(100% - 16.1px) calc(1px + 50%); background-size: 4px 4px, 4px 4px; background-repeat: no-repeat; } .select[multiple]{ height: auto; } .stats{ display: inline-grid; border-radius: var(--rounded-box, 1rem); --tw-bg-opacity: 1; background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity))); --tw-text-opacity: 1; color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))); } :where(.stats){ grid-auto-flow: column; overflow-x: auto; } .tabs-lifted:has(.tab-content[class^="rounded-"]) .tab:first-child:not(:is(.tab-active, [aria-selected="true"])), .tabs-lifted:has(.tab-content[class*=" rounded-"]) .tab:first-child:not(:is(.tab-active, [aria-selected="true"])){ border-bottom-color: transparent; } .tab{ position: relative; grid-row-start: 1; display: inline-flex; height: 2rem; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; flex-wrap: wrap; align-items: center; justify-content: center; text-align: center; font-size: 0.875rem; line-height: 1.25rem; line-height: 2; --tab-padding: 1rem; --tw-text-opacity: 0.5; --tab-color: var(--fallback-bc,oklch(var(--bc)/1)); --tab-bg: var(--fallback-b1,oklch(var(--b1)/1)); --tab-border-color: var(--fallback-b3,oklch(var(--b3)/1)); color: var(--tab-color); padding-inline-start: var(--tab-padding, 1rem); padding-inline-end: var(--tab-padding, 1rem); } .tab:is(input[type="radio"]){ width: auto; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; } .tab:is(input[type="radio"]):after{ --tw-content: attr(aria-label); content: var(--tw-content); } .tab:not(input):empty{ cursor: default; grid-column-start: span 9999; } input.tab:checked + .tab-content, :is(.tab-active, [aria-selected="true"]) + .tab-content{ display: block; } .table{ position: relative; width: 100%; border-radius: var(--rounded-box, 1rem); text-align: left; font-size: 0.875rem; line-height: 1.25rem; } .table :where(.table-pin-rows thead tr){ position: sticky; top: 0px; z-index: 1; --tw-bg-opacity: 1; background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity))); } .table :where(.table-pin-rows tfoot tr){ position: sticky; bottom: 0px; z-index: 1; --tw-bg-opacity: 1; background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity))); } .table :where(.table-pin-cols tr th){ position: sticky; left: 0px; right: 0px; --tw-bg-opacity: 1; background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity))); } .timeline{ position: relative; display: flex; } :where(.timeline > li){ position: relative; display: grid; flex-shrink: 0; align-items: center; grid-template-rows: var(--timeline-row-start, minmax(0, 1fr)) auto var( --timeline-row-end, minmax(0, 1fr) ); grid-template-columns: var(--timeline-col-start, minmax(0, 1fr)) auto var( --timeline-col-end, minmax(0, 1fr) ); } .timeline > li > hr{ width: 100%; border-width: 0px; } :where(.timeline > li > hr):first-child{ grid-column-start: 1; grid-row-start: 2; } :where(.timeline > li > hr):last-child{ grid-column-start: 3; grid-column-end: none; grid-row-start: 2; grid-row-end: auto; } .btm-nav > *:where(.active){ border-top-width: 2px; --tw-bg-opacity: 1; background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity))); } .btm-nav > *.disabled, .btm-nav > *[disabled]{ pointer-events: none; --tw-border-opacity: 0; background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity))); --tw-bg-opacity: 0.1; color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))); --tw-text-opacity: 0.2; } .btm-nav > * .label{ font-size: 1rem; line-height: 1.5rem; } .breadcrumbs > ul > li > a:focus, .breadcrumbs > ol > li > a:focus{ outline: 2px solid transparent; outline-offset: 2px; } .breadcrumbs > ul > li > a:focus-visible, .breadcrumbs > ol > li > a:focus-visible{ outline: 2px solid currentColor; outline-offset: 2px; } .breadcrumbs > ul > li + *:before, .breadcrumbs > ol > li + *:before{ content: ""; margin-left: 0.5rem; margin-right: 0.75rem; display: block; height: 0.375rem; width: 0.375rem; --tw-rotate: 45deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); opacity: 0.4; border-top: 1px solid; border-right: 1px solid; background-color: transparent; } [dir="rtl"] .breadcrumbs > ul > li + *:before, [dir="rtl"] .breadcrumbs > ol > li + *:before{ --tw-rotate: -135deg; } @media (prefers-reduced-motion: no-preference){ .btn{ animation: button-pop var(--animation-btn, 0.25s) ease-out; } } .btn:active:hover, .btn:active:focus{ animation: button-pop 0s ease-out; transform: scale(var(--btn-focus-scale, 0.97)); } @supports not (color: oklch(0% 0 0)){ .btn{ background-color: var(--btn-color, var(--fallback-b2)); border-color: var(--btn-color, var(--fallback-b2)); } .btn-primary{ --btn-color: var(--fallback-p); } .btn-secondary{ --btn-color: var(--fallback-s); } } @supports (color: color-mix(in oklab, black, black)){ .btn-outline.btn-primary.btn-active{ background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black); border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black); } .btn-outline.btn-secondary.btn-active{ background-color: color-mix(in oklab, var(--fallback-s,oklch(var(--s)/1)) 90%, black); border-color: color-mix(in oklab, var(--fallback-s,oklch(var(--s)/1)) 90%, black); } } .btn:focus-visible{ outline-style: solid; outline-width: 2px; outline-offset: 2px; } .btn-primary{ --tw-text-opacity: 1; color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity))); outline-color: var(--fallback-p,oklch(var(--p)/1)); } @supports (color: oklch(0% 0 0)){ .btn-primary{ --btn-color: var(--p); } .btn-secondary{ --btn-color: var(--s); } } .btn-secondary{ --tw-text-opacity: 1; color: var(--fallback-sc,oklch(var(--sc)/var(--tw-text-opacity))); outline-color: var(--fallback-s,oklch(var(--s)/1)); } .btn.glass{ --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); outline-color: currentColor; } .btn.glass.btn-active{ --glass-opacity: 25%; --glass-border-opacity: 15%; } .btn-outline.btn-primary{ --tw-text-opacity: 1; color: var(--fallback-p,oklch(var(--p)/var(--tw-text-opacity))); } .btn-outline.btn-primary.btn-active{ --tw-text-opacity: 1; color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity))); } .btn-outline.btn-secondary{ --tw-text-opacity: 1; color: var(--fallback-s,oklch(var(--s)/var(--tw-text-opacity))); } .btn-outline.btn-secondary.btn-active{ --tw-text-opacity: 1; color: var(--fallback-sc,oklch(var(--sc)/var(--tw-text-opacity))); } .btn.btn-disabled, .btn[disabled], .btn:disabled{ --tw-border-opacity: 0; background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity))); --tw-bg-opacity: 0.2; color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))); --tw-text-opacity: 0.2; } .btn:is(input[type="checkbox"]:checked), .btn:is(input[type="radio"]:checked){ --tw-border-opacity: 1; border-color: var(--fallback-p,oklch(var(--p)/var(--tw-border-opacity))); --tw-bg-opacity: 1; background-color: var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity))); --tw-text-opacity: 1; color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity))); } .btn:is(input[type="checkbox"]:checked):focus-visible, .btn:is(input[type="radio"]:checked):focus-visible{ outline-color: var(--fallback-p,oklch(var(--p)/1)); } @keyframes button-pop{ 0%{ transform: scale(var(--btn-focus-scale, 0.98)); } 40%{ transform: scale(1.02); } 100%{ transform: scale(1); } } .card :where(figure:first-child){ overflow: hidden; border-start-start-radius: inherit; border-start-end-radius: inherit; border-end-start-radius: unset; border-end-end-radius: unset; } .card :where(figure:last-child){ overflow: hidden; border-start-start-radius: unset; border-start-end-radius: unset; border-end-start-radius: inherit; border-end-end-radius: inherit; } .card:focus-visible{ outline: 2px solid currentColor; outline-offset: 2px; } .card.bordered{ border-width: 1px; --tw-border-opacity: 1; border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity))); } .card.compact .card-body{ padding: 1rem; font-size: 0.875rem; line-height: 1.25rem; } .card.image-full :where(figure){ overflow: hidden; border-radius: inherit; } .checkbox:focus{ box-shadow: none; } .checkbox:focus-visible{ outline-style: solid; outline-width: 2px; outline-offset: 2px; outline-color: var(--fallback-bc,oklch(var(--bc)/1)); } .checkbox:disabled{ border-width: 0px; cursor: not-allowed; border-color: transparent; --tw-bg-opacity: 1; background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity))); opacity: 0.2; } .checkbox:checked, .checkbox[aria-checked="true"]{ background-repeat: no-repeat; animation: checkmark var(--animation-input, 0.2s) ease-out; background-color: var(--chkbg); background-image: linear-gradient(-45deg, transparent 65%, var(--chkbg) 65.99%), linear-gradient(45deg, transparent 75%, var(--chkbg) 75.99%), linear-gradient(-45deg, var(--chkbg) 40%, transparent 40.99%), linear-gradient( 45deg, var(--chkbg) 30%, var(--chkfg) 30.99%, var(--chkfg) 40%, transparent 40.99% ), linear-gradient(-45deg, var(--chkfg) 50%, var(--chkbg) 50.99%); } .checkbox:indeterminate{ --tw-bg-opacity: 1; background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity))); background-repeat: no-repeat; animation: checkmark var(--animation-input, 0.2s) ease-out; background-image: linear-gradient(90deg, transparent 80%, var(--chkbg) 80%), linear-gradient(-90deg, transparent 80%, var(--chkbg) 80%), linear-gradient(0deg, var(--chkbg) 43%, var(--chkfg) 43%, var(--chkfg) 57%, var(--chkbg) 57%); } @keyframes checkmark{ 0%{ background-position-y: 5px; } 50%{ background-position-y: -2px; } 100%{ background-position-y: 0; } } .dropdown.dropdown-open .dropdown-content, .dropdown:focus .dropdown-content, .dropdown:focus-within .dropdown-content{ --tw-scale-x: 1; --tw-scale-y: 1; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .input input{ --tw-bg-opacity: 1; background-color: var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity))); background-color: transparent; } .input input:focus{ outline: 2px solid transparent; outline-offset: 2px; } .input[list]::-webkit-calendar-picker-indicator{ line-height: 1em; } .input:focus, .input:focus-within{ box-shadow: none; border-color: var(--fallback-bc,oklch(var(--bc)/0.2)); outline-style: solid; outline-width: 2px; outline-offset: 2px; outline-color: var(--fallback-bc,oklch(var(--bc)/0.2)); } .input:has(> input[disabled]), .input-disabled, .input:disabled, .input[disabled]{ cursor: not-allowed; --tw-border-opacity: 1; border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity))); --tw-bg-opacity: 1; background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity))); color: var(--fallback-bc,oklch(var(--bc)/0.4)); } .input:has(> input[disabled])::-moz-placeholder, .input-disabled::-moz-placeholder, .input:disabled::-moz-placeholder, .input[disabled]::-moz-placeholder{ color: var(--fallback-bc,oklch(var(--bc)/var(--tw-placeholder-opacity))); --tw-placeholder-opacity: 0.2; } .input:has(> input[disabled])::placeholder, .input-disabled::placeholder, .input:disabled::placeholder, .input[disabled]::placeholder{ color: var(--fallback-bc,oklch(var(--bc)/var(--tw-placeholder-opacity))); --tw-placeholder-opacity: 0.2; } .input:has(> input[disabled]) > input[disabled]{ cursor: not-allowed; } .input::-webkit-date-and-time-value{ text-align: inherit; } .join > :where(*:not(:first-child)){ margin-top: 0px; margin-bottom: 0px; margin-inline-start: -1px; } .join > :where(*:not(:first-child)):is(.btn){ margin-inline-start: calc(var(--border-btn) * -1); } .link:focus{ outline: 2px solid transparent; outline-offset: 2px; } .link:focus-visible{ outline: 2px solid currentColor; outline-offset: 2px; } .loading{ pointer-events: none; display: inline-block; aspect-ratio: 1 / 1; width: 1.5rem; background-color: currentColor; -webkit-mask-size: 100%; mask-size: 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E"); } .loading-spinner{ -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E"); } .loading-xs{ width: 1rem; } .loading-lg{ width: 2.5rem; } :where(.menu li:empty){ --tw-bg-opacity: 1; background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity))); opacity: 0.1; margin: 0.5rem 1rem; height: 1px; } .menu :where(li ul):before{ position: absolute; bottom: 0.75rem; inset-inline-start: 0px; top: 0.75rem; width: 1px; --tw-bg-opacity: 1; background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity))); opacity: 0.1; content: ""; } .menu :where(li:not(.menu-title) > *:not(ul, details, .menu-title, .btn)), .menu :where(li:not(.menu-title) > details > summary:not(.menu-title)){ border-radius: var(--rounded-btn, 0.5rem); padding-left: 1rem; padding-right: 1rem; padding-top: 0.5rem; padding-bottom: 0.5rem; text-align: start; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0, 0, 0.2, 1); transition-duration: 200ms; text-wrap: balance; } :where(.menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):not(summary, .active, .btn).focus, :where(.menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):not(summary, .active, .btn):focus, :where(.menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):is(summary):not(.active, .btn):focus-visible, :where(.menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(summary, .active, .btn).focus, :where(.menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(summary, .active, .btn):focus, :where(.menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):is(summary):not(.active, .btn):focus-visible{ cursor: pointer; background-color: var(--fallback-bc,oklch(var(--bc)/0.1)); --tw-text-opacity: 1; color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))); outline: 2px solid transparent; outline-offset: 2px; } .menu li > *:not(ul, .menu-title, details, .btn):active, .menu li > *:not(ul, .menu-title, details, .btn).active, .menu li > details > summary:active{ --tw-bg-opacity: 1; background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity))); --tw-text-opacity: 1; color: var(--fallback-nc,oklch(var(--nc)/var(--tw-text-opacity))); } .menu :where(li > details > summary)::-webkit-details-marker{ display: none; } .menu :where(li > details > summary):after, .menu :where(li > .menu-dropdown-toggle):after{ justify-self: end; display: block; margin-top: -0.5rem; height: 0.5rem; width: 0.5rem; transform: rotate(45deg); transition-property: transform, margin-top; transition-duration: 0.3s; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); content: ""; transform-origin: 75% 75%; box-shadow: 2px 2px; pointer-events: none; } .menu :where(li > details[open] > summary):after, .menu :where(li > .menu-dropdown-toggle.menu-dropdown-show):after{ transform: rotate(225deg); margin-top: 0; } .mockup-phone .display{ overflow: hidden; border-radius: 40px; margin-top: -25px; } .mockup-browser .mockup-browser-toolbar .input{ position: relative; margin-left: auto; margin-right: auto; display: block; height: 1.75rem; width: 24rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; --tw-bg-opacity: 1; background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity))); padding-left: 2rem; direction: ltr; } .mockup-browser .mockup-browser-toolbar .input:before{ content: ""; position: absolute; left: 0.5rem; top: 50%; aspect-ratio: 1 / 1; height: 0.75rem; --tw-translate-y: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); border-radius: 9999px; border-width: 2px; border-color: currentColor; opacity: 0.6; } .mockup-browser .mockup-browser-toolbar .input:after{ content: ""; position: absolute; left: 1.25rem; top: 50%; height: 0.5rem; --tw-translate-y: 25%; --tw-rotate: -45deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); border-radius: 9999px; border-width: 1px; border-color: currentColor; opacity: 0.6; } .modal:not(dialog:not(.modal-open)), .modal::backdrop{ background-color: #0006; animation: modal-pop 0.2s ease-out; } .modal-open .modal-box, .modal-toggle:checked + .modal .modal-box, .modal:target .modal-box, .modal[open] .modal-box{ --tw-translate-y: 0px; --tw-scale-x: 1; --tw-scale-y: 1; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } @keyframes modal-pop{ 0%{ opacity: 0; } } @keyframes progress-loading{ 50%{ background-position-x: -115%; } } .radio:focus{ box-shadow: none; } .radio:focus-visible{ outline-style: solid; outline-width: 2px; outline-offset: 2px; outline-color: var(--fallback-bc,oklch(var(--bc)/1)); } .radio:checked, .radio[aria-checked="true"]{ --tw-bg-opacity: 1; background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity))); background-image: none; animation: radiomark var(--animation-input, 0.2s) ease-out; box-shadow: 0 0 0 4px var(--fallback-b1,oklch(var(--b1)/1)) inset, 0 0 0 4px var(--fallback-b1,oklch(var(--b1)/1)) inset; } .radio:disabled{ cursor: not-allowed; opacity: 0.2; } @keyframes radiomark{ 0%{ box-shadow: 0 0 0 12px var(--fallback-b1,oklch(var(--b1)/1)) inset, 0 0 0 12px var(--fallback-b1,oklch(var(--b1)/1)) inset; } 50%{ box-shadow: 0 0 0 3px var(--fallback-b1,oklch(var(--b1)/1)) inset, 0 0 0 3px var(--fallback-b1,oklch(var(--b1)/1)) inset; } 100%{ box-shadow: 0 0 0 4px var(--fallback-b1,oklch(var(--b1)/1)) inset, 0 0 0 4px var(--fallback-b1,oklch(var(--b1)/1)) inset; } } .range:focus-visible::-webkit-slider-thumb{ --focus-shadow: 0 0 0 6px var(--fallback-b1,oklch(var(--b1)/1)) inset, 0 0 0 2rem var(--range-shdw) inset; } .range:focus-visible::-moz-range-thumb{ --focus-shadow: 0 0 0 6px var(--fallback-b1,oklch(var(--b1)/1)) inset, 0 0 0 2rem var(--range-shdw) inset; } .range::-webkit-slider-runnable-track{ height: 0.5rem; width: 100%; border-radius: var(--rounded-box, 1rem); background-color: var(--fallback-bc,oklch(var(--bc)/0.1)); } .range::-moz-range-track{ height: 0.5rem; width: 100%; border-radius: var(--rounded-box, 1rem); background-color: var(--fallback-bc,oklch(var(--bc)/0.1)); } .range::-webkit-slider-thumb{ position: relative; height: 1.5rem; width: 1.5rem; border-radius: var(--rounded-box, 1rem); border-style: none; --tw-bg-opacity: 1; background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity))); appearance: none; -webkit-appearance: none; top: 50%; color: var(--range-shdw); transform: translateY(-50%); --filler-size: 100rem; --filler-offset: 0.6rem; box-shadow: 0 0 0 3px var(--range-shdw) inset, var(--focus-shadow, 0 0), calc(var(--filler-size) * -1 - var(--filler-offset)) 0 0 var(--filler-size); } .range::-moz-range-thumb{ position: relative; height: 1.5rem; width: 1.5rem; border-radius: var(--rounded-box, 1rem); border-style: none; --tw-bg-opacity: 1; background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity))); top: 50%; color: var(--range-shdw); --filler-size: 100rem; --filler-offset: 0.5rem; box-shadow: 0 0 0 3px var(--range-shdw) inset, var(--focus-shadow, 0 0), calc(var(--filler-size) * -1 - var(--filler-offset)) 0 0 var(--filler-size); } .rating input{ -moz-appearance: none; appearance: none; -webkit-appearance: none; } .rating .rating-hidden{ width: 0.5rem; background-color: transparent; } .rating input[type="radio"]:checked{ background-image: none; } .rating input:checked ~ input, .rating input[aria-checked="true"] ~ input{ --tw-bg-opacity: 0.2; } .rating input:focus-visible{ transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0, 0, 0.2, 1); transition-duration: 300ms; transform: translateY(-0.125em); } .rating input:active:focus{ animation: none; transform: translateY(-0.125em); } @keyframes rating-pop{ 0%{ transform: translateY(-0.125em); } 40%{ transform: translateY(-0.125em); } 100%{ transform: translateY(0); } } .select:focus{ box-shadow: none; border-color: var(--fallback-bc,oklch(var(--bc)/0.2)); outline-style: solid; outline-width: 2px; outline-offset: 2px; outline-color: var(--fallback-bc,oklch(var(--bc)/0.2)); } .select-disabled, .select:disabled, .select[disabled]{ cursor: not-allowed; --tw-border-opacity: 1; border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity))); --tw-bg-opacity: 1; background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity))); color: var(--fallback-bc,oklch(var(--bc)/0.4)); } .select-disabled::-moz-placeholder, .select:disabled::-moz-placeholder, .select[disabled]::-moz-placeholder{ color: var(--fallback-bc,oklch(var(--bc)/var(--tw-placeholder-opacity))); --tw-placeholder-opacity: 0.2; } .select-disabled::placeholder, .select:disabled::placeholder, .select[disabled]::placeholder{ color: var(--fallback-bc,oklch(var(--bc)/var(--tw-placeholder-opacity))); --tw-placeholder-opacity: 0.2; } .select-multiple, .select[multiple], .select[size].select:not([size="1"]){ background-image: none; padding-right: 1rem; } [dir="rtl"] .select{ background-position: calc(0% + 12px) calc(1px + 50%), calc(0% + 16px) calc(1px + 50%); } @keyframes skeleton{ from{ background-position: 150%; } to{ background-position: -50%; } } :where(.stats) > :not([hidden]) ~ :not([hidden]){ --tw-divide-x-reverse: 0; border-right-width: calc(1px * var(--tw-divide-x-reverse)); border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); --tw-divide-y-reverse: 0; border-top-width: calc(0px * calc(1 - var(--tw-divide-y-reverse))); border-bottom-width: calc(0px * var(--tw-divide-y-reverse)); } [dir="rtl"] .stats > *:not([hidden]) ~ *:not([hidden]){ --tw-divide-x-reverse: 1; } .tabs-lifted > .tab:focus-visible{ border-end-end-radius: 0; border-end-start-radius: 0; } .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]), .tab:is(input:checked){ border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity))); --tw-border-opacity: 1; --tw-text-opacity: 1; } .tab:focus{ outline: 2px solid transparent; outline-offset: 2px; } .tab:focus-visible{ outline: 2px solid currentColor; outline-offset: -5px; } .tab-disabled, .tab[disabled]{ cursor: not-allowed; color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))); --tw-text-opacity: 0.2; } .tabs-bordered > .tab{ border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity))); --tw-border-opacity: 0.2; border-style: solid; border-bottom-width: calc(var(--tab-border, 1px) + 1px); } .tabs-lifted > .tab{ border: var(--tab-border, 1px) solid transparent; border-width: 0 0 var(--tab-border, 1px) 0; border-start-start-radius: var(--tab-radius, 0.5rem); border-start-end-radius: var(--tab-radius, 0.5rem); border-bottom-color: var(--tab-border-color); padding-inline-start: var(--tab-padding, 1rem); padding-inline-end: var(--tab-padding, 1rem); padding-top: var(--tab-border, 1px); } .tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]), .tabs-lifted > .tab:is(input:checked){ background-color: var(--tab-bg); border-width: var(--tab-border, 1px) var(--tab-border, 1px) 0 var(--tab-border, 1px); border-inline-start-color: var(--tab-border-color); border-inline-end-color: var(--tab-border-color); border-top-color: var(--tab-border-color); padding-inline-start: calc(var(--tab-padding, 1rem) - var(--tab-border, 1px)); padding-inline-end: calc(var(--tab-padding, 1rem) - var(--tab-border, 1px)); padding-bottom: var(--tab-border, 1px); padding-top: 0; } .tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):before, .tabs-lifted > .tab:is(input:checked):before{ z-index: 1; content: ""; display: block; position: absolute; width: calc(100% + var(--tab-radius, 0.5rem) * 2); height: var(--tab-radius, 0.5rem); bottom: 0; background-size: var(--tab-radius, 0.5rem); background-position: top left, top right; background-repeat: no-repeat; --tab-grad: calc(69% - var(--tab-border, 1px)); --radius-start: radial-gradient( circle at top left, transparent var(--tab-grad), var(--tab-border-color) calc(var(--tab-grad) + 0.25px), var(--tab-border-color) calc(var(--tab-grad) + var(--tab-border, 1px)), var(--tab-bg) calc(var(--tab-grad) + var(--tab-border, 1px) + 0.25px) ); --radius-end: radial-gradient( circle at top right, transparent var(--tab-grad), var(--tab-border-color) calc(var(--tab-grad) + 0.25px), var(--tab-border-color) calc(var(--tab-grad) + var(--tab-border, 1px)), var(--tab-bg) calc(var(--tab-grad) + var(--tab-border, 1px) + 0.25px) ); background-image: var(--radius-start), var(--radius-end); } .tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):first-child:before, .tabs-lifted > .tab:is(input:checked):first-child:before{ background-image: var(--radius-end); background-position: top right; } [dir="rtl"] .tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):first-child:before, [dir="rtl"] .tabs-lifted > .tab:is(input:checked):first-child:before{ background-image: var(--radius-start); background-position: top left; } .tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):last-child:before, .tabs-lifted > .tab:is(input:checked):last-child:before{ background-image: var(--radius-start); background-position: top left; } [dir="rtl"] .tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):last-child:before, [dir="rtl"] .tabs-lifted > .tab:is(input:checked):last-child:before{ background-image: var(--radius-end); background-position: top right; } .tabs-lifted > :is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]) + .tabs-lifted :is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):before, .tabs-lifted > .tab:is(input:checked) + .tabs-lifted .tab:is(input:checked):before{ background-image: var(--radius-end); background-position: top right; } .tabs-boxed .tab{ border-radius: var(--rounded-btn, 0.5rem); } .table:where([dir="rtl"], [dir="rtl"] *){ text-align: right; } .table :where(th, td){ padding-left: 1rem; padding-right: 1rem; padding-top: 0.75rem; padding-bottom: 0.75rem; vertical-align: middle; } .table tr.active, .table tr.active:nth-child(even), .table-zebra tbody tr:nth-child(even){ --tw-bg-opacity: 1; background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity))); } .table-zebra tr.active, .table-zebra tr.active:nth-child(even), .table-zebra-zebra tbody tr:nth-child(even){ --tw-bg-opacity: 1; background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity))); } .table :where(thead tr, tbody tr:not(:last-child), tbody tr:first-child:last-child){ border-bottom-width: 1px; --tw-border-opacity: 1; border-bottom-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity))); } .table :where(thead, tfoot){ white-space: nowrap; font-size: 0.75rem; line-height: 1rem; font-weight: 700; color: var(--fallback-bc,oklch(var(--bc)/0.6)); } .table :where(tfoot){ border-top-width: 1px; --tw-border-opacity: 1; border-top-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity))); } .timeline hr{ height: 0.25rem; } :where(.timeline hr){ --tw-bg-opacity: 1; background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity))); } :where(.timeline:has(.timeline-middle) hr):first-child{ border-start-end-radius: var(--rounded-badge, 1.9rem); border-end-end-radius: var(--rounded-badge, 1.9rem); border-start-start-radius: 0px; border-end-start-radius: 0px; } :where(.timeline:has(.timeline-middle) hr):last-child{ border-start-start-radius: var(--rounded-badge, 1.9rem); border-end-start-radius: var(--rounded-badge, 1.9rem); border-start-end-radius: 0px; border-end-end-radius: 0px; } :where(.timeline:not(:has(.timeline-middle)) :first-child hr:last-child){ border-start-start-radius: var(--rounded-badge, 1.9rem); border-end-start-radius: var(--rounded-badge, 1.9rem); border-start-end-radius: 0px; border-end-end-radius: 0px; } :where(.timeline:not(:has(.timeline-middle)) :last-child hr:first-child){ border-start-end-radius: var(--rounded-badge, 1.9rem); border-end-end-radius: var(--rounded-badge, 1.9rem); border-start-start-radius: 0px; border-end-start-radius: 0px; } @keyframes toast-pop{ 0%{ transform: scale(0.9); opacity: 0; } 100%{ transform: scale(1); opacity: 1; } } .no-animation{ --btn-focus-scale: 1; --animation-btn: 0; --animation-input: 0; } .artboard.phone{ width: 320px; } .artboard.phone-1.horizontal, .artboard.phone-1.artboard-horizontal{ width: 568px; height: 320px; } .artboard.phone-2.horizontal, .artboard.phone-2.artboard-horizontal{ width: 667px; height: 375px; } .artboard.phone-3.horizontal, .artboard.phone-3.artboard-horizontal{ width: 736px; height: 414px; } .artboard.phone-4.horizontal, .artboard.phone-4.artboard-horizontal{ width: 812px; height: 375px; } .artboard.phone-5.horizontal, .artboard.phone-5.artboard-horizontal{ width: 896px; height: 414px; } .artboard.phone-6.horizontal, .artboard.phone-6.artboard-horizontal{ width: 1024px; height: 320px; } .btm-nav-xs > *:where(.active){ border-top-width: 1px; } .btm-nav-sm > *:where(.active){ border-top-width: 2px; } .btm-nav-md > *:where(.active){ border-top-width: 2px; } .btm-nav-lg > *:where(.active){ border-top-width: 4px; } .btn-sm{ height: 2rem; min-height: 2rem; padding-left: 0.75rem; padding-right: 0.75rem; font-size: 0.875rem; } .btn-square:where(.btn-sm){ height: 2rem; width: 2rem; padding: 0px; } .btn-circle:where(.btn-sm){ height: 2rem; width: 2rem; border-radius: 9999px; padding: 0px; } .indicator :where(.indicator-item){ bottom: auto; inset-inline-end: 0px; inset-inline-start: auto; top: 0px; --tw-translate-y: -50%; --tw-translate-x: 50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .indicator :where(.indicator-item):where([dir="rtl"], [dir="rtl"] *){ --tw-translate-x: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .indicator :where(.indicator-item.indicator-start){ inset-inline-end: auto; inset-inline-start: 0px; --tw-translate-x: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .indicator :where(.indicator-item.indicator-start):where([dir="rtl"], [dir="rtl"] *){ --tw-translate-x: 50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .indicator :where(.indicator-item.indicator-center){ inset-inline-end: 50%; inset-inline-start: 50%; --tw-translate-x: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .indicator :where(.indicator-item.indicator-center):where([dir="rtl"], [dir="rtl"] *){ --tw-translate-x: 50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .indicator :where(.indicator-item.indicator-end){ inset-inline-end: 0px; inset-inline-start: auto; --tw-translate-x: 50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .indicator :where(.indicator-item.indicator-end):where([dir="rtl"], [dir="rtl"] *){ --tw-translate-x: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .indicator :where(.indicator-item.indicator-bottom){ bottom: 0px; top: auto; --tw-translate-y: 50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .indicator :where(.indicator-item.indicator-middle){ bottom: 50%; top: 50%; --tw-translate-y: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .indicator :where(.indicator-item.indicator-top){ bottom: auto; top: 0px; --tw-translate-y: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .join.join-vertical{ flex-direction: column; } .join.join-vertical .join-item:first-child:not(:last-child), .join.join-vertical *:first-child:not(:last-child) .join-item{ border-end-start-radius: 0; border-end-end-radius: 0; border-start-start-radius: inherit; border-start-end-radius: inherit; } .join.join-vertical .join-item:last-child:not(:first-child), .join.join-vertical *:last-child:not(:first-child) .join-item{ border-start-start-radius: 0; border-start-end-radius: 0; border-end-start-radius: inherit; border-end-end-radius: inherit; } .join.join-horizontal{ flex-direction: row; } .join.join-horizontal .join-item:first-child:not(:last-child), .join.join-horizontal *:first-child:not(:last-child) .join-item{ border-end-end-radius: 0; border-start-end-radius: 0; border-end-start-radius: inherit; border-start-start-radius: inherit; } .join.join-horizontal .join-item:last-child:not(:first-child), .join.join-horizontal *:last-child:not(:first-child) .join-item{ border-end-start-radius: 0; border-start-start-radius: 0; border-end-end-radius: inherit; border-start-end-radius: inherit; } .tabs-md :where(.tab){ height: 2rem; font-size: 0.875rem; line-height: 1.25rem; line-height: 2; --tab-padding: 1rem; } .tabs-lg :where(.tab){ height: 3rem; font-size: 1.125rem; line-height: 1.75rem; line-height: 2; --tab-padding: 1.25rem; } .tabs-sm :where(.tab){ height: 1.5rem; font-size: 0.875rem; line-height: .75rem; --tab-padding: 0.75rem; } .tabs-xs :where(.tab){ height: 1.25rem; font-size: 0.75rem; line-height: .75rem; --tab-padding: 0.5rem; } .card-compact .card-body{ padding: 1rem; font-size: 0.875rem; line-height: 1.25rem; } .card-normal .card-body{ padding: var(--padding-card, 2rem); font-size: 1rem; line-height: 1.5rem; } .join.join-vertical > :where(*:not(:first-child)){ margin-left: 0px; margin-right: 0px; margin-top: -1px; } .join.join-vertical > :where(*:not(:first-child)):is(.btn){ margin-top: calc(var(--border-btn) * -1); } .join.join-horizontal > :where(*:not(:first-child)){ margin-top: 0px; margin-bottom: 0px; margin-inline-start: -1px; } .join.join-horizontal > :where(*:not(:first-child)):is(.btn){ margin-inline-start: calc(var(--border-btn) * -1); margin-top: 0px; } .container{ max-width: 100%; } @media (min-width: 640px){ .container{ max-width: 100%; } } @media (min-width: 768px){ .container{ max-width: 100%; } } @media (min-width: 1024px){ .container{ max-width: 1080px; } } @media (min-width: 1280px){ .container{ max-width: 1320px; } } @media (min-width: 1536px){ .container{ max-width: 1320px; } } .pointer-events-none{ pointer-events: none; } .static{ position: static; } .fixed{ position: fixed; } .absolute{ position: absolute; } .\!relative{ position: relative !important; } .relative{ position: relative; } .sticky{ position: sticky; } .\!-left-5{ left: -1.25rem !important; } .\!left-5{ left: 1.25rem !important; } .\!left-\[-1rem\]{ left: -1rem !important; } .\!left-\[-20px\]{ left: -20px !important; } .\!left-\[0rem\]{ left: 0rem !important; } .\!right-5{ right: 1.25rem !important; } .\!right-\[-1rem\]{ right: -1rem !important; } .\!right-\[-20px\]{ right: -20px !important; } .\!right-\[0rem\]{ right: 0rem !important; } .\!top-\[50\%\]{ top: 50% !important; } .-right-0{ right: -0px; } .-right-4{ right: -1rem; } .-top-\[2px\]{ top: -2px; } .bottom-0{ bottom: 0px; } .bottom-4{ bottom: 1rem; } .end-0{ inset-inline-end: 0px; } .left-0{ left: 0px; } .left-1\/2{ left: 50%; } .left-6{ left: 1.5rem; } .left-\[200\%\]{ left: 200%; } .right-0{ right: 0px; } .right-1{ right: 0.25rem; } .right-4{ right: 1rem; } .start-0{ inset-inline-start: 0px; } .top-0{ top: 0px; } .top-1{ top: 0.25rem; } .top-1\/2{ top: 50%; } .top-14{ top: 3.5rem; } .top-2{ top: 0.5rem; } .top-4{ top: 1rem; } .top-6{ top: 1.5rem; } .z-10{ z-index: 10; } .z-20{ z-index: 20; } .z-30{ z-index: 30; } .z-50{ z-index: 50; } .z-\[1\]{ z-index: 1; } .z-\[2\]{ z-index: 2; } .order-first{ order: -9999; } .order-last{ order: 9999; } .col-span-2{ grid-column: span 2 / span 2; } .mx-5{ margin-left: 1.25rem; margin-right: 1.25rem; } .mx-auto{ margin-left: auto; margin-right: auto; } .my-2{ margin-top: 0.5rem; margin-bottom: 0.5rem; } .my-4{ margin-top: 1rem; margin-bottom: 1rem; } .my-6{ margin-top: 1.5rem; margin-bottom: 1.5rem; } .my-8{ margin-top: 2rem; margin-bottom: 2rem; } .-mt-8{ margin-top: -2rem; } .-mt-\[13px\]{ margin-top: -13px; } .mb-0{ margin-bottom: 0px; } .mb-1{ margin-bottom: 0.25rem; } .mb-14{ margin-bottom: 3.5rem; } .mb-2{ margin-bottom: 0.5rem; } .mb-20{ margin-bottom: 5rem; } .mb-3{ margin-bottom: 0.75rem; } .mb-4{ margin-bottom: 1rem; } .mb-5{ margin-bottom: 1.25rem; } .mb-6{ margin-bottom: 1.5rem; } .mb-8{ margin-bottom: 2rem; } .ml-2{ margin-left: 0.5rem; } .ml-auto{ margin-left: auto; } .mr-2{ margin-right: 0.5rem; } .ms-2{ margin-inline-start: 0.5rem; } .ms-5{ margin-inline-start: 1.25rem; } .ms-auto{ margin-inline-start: auto; } .mt-1{ margin-top: 0.25rem; } .mt-11{ margin-top: 2.75rem; } .mt-2{ margin-top: 0.5rem; } .mt-4{ margin-top: 1rem; } .mt-6{ margin-top: 1.5rem; } .mt-8{ margin-top: 2rem; } .mt-\[-100px\]{ margin-top: -100px; } .mt-\[25px\]{ margin-top: 25px; } .mt-\[60px\]{ margin-top: 60px; } .mt-auto{ margin-top: auto; } .line-clamp-3{ overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .block{ display: block; } .inline-block{ display: inline-block; } .inline{ display: inline; } .\!flex{ display: flex !important; } .flex{ display: flex; } .table{ display: table; } .grid{ display: grid; } .hidden{ display: none; } .aspect-\[2\/1\]{ aspect-ratio: 2/1; } .aspect-\[3\/2\]{ aspect-ratio: 3/2; } .aspect-square{ aspect-ratio: 1 / 1; } .aspect-video{ aspect-ratio: 16 / 9; } .size-10{ width: 2.5rem; height: 2.5rem; } .size-10\/12{ width: 83.333333%; height: 83.333333%; } .size-2{ width: 0.5rem; height: 0.5rem; } .size-2\.5{ width: 0.625rem; height: 0.625rem; } .size-2\/12{ width: 16.666667%; height: 16.666667%; } .size-2\/3{ width: 66.666667%; height: 66.666667%; } .size-2\/4{ width: 50%; height: 50%; } .size-2\/5{ width: 40%; height: 40%; } .size-2\/6{ width: 33.333333%; height: 33.333333%; } .size-20{ width: 5rem; height: 5rem; } .size-24{ width: 6rem; height: 6rem; } .size-28{ width: 7rem; height: 7rem; } .size-3{ width: 0.75rem; height: 0.75rem; } .size-3\.5{ width: 0.875rem; height: 0.875rem; } .size-3\/12{ width: 25%; height: 25%; } .size-3\/4{ width: 75%; height: 75%; } .size-3\/5{ width: 60%; height: 60%; } .size-3\/6{ width: 50%; height: 50%; } .size-32{ width: 8rem; height: 8rem; } .size-36{ width: 9rem; height: 9rem; } .size-4{ width: 1rem; height: 1rem; } .size-4\/12{ width: 33.333333%; height: 33.333333%; } .size-4\/5{ width: 80%; height: 80%; } .size-4\/6{ width: 66.666667%; height: 66.666667%; } .size-40{ width: 10rem; height: 10rem; } .size-44{ width: 11rem; height: 11rem; } .size-48{ width: 12rem; height: 12rem; } .size-5{ width: 1.25rem; height: 1.25rem; } .size-5\/12{ width: 41.666667%; height: 41.666667%; } .size-5\/6{ width: 83.333333%; height: 83.333333%; } .size-52{ width: 13rem; height: 13rem; } .size-56{ width: 14rem; height: 14rem; } .size-6{ width: 1.5rem; height: 1.5rem; } .size-6\/12{ width: 50%; height: 50%; } .size-60{ width: 15rem; height: 15rem; } .size-64{ width: 16rem; height: 16rem; } .size-7{ width: 1.75rem; height: 1.75rem; } .size-7\/12{ width: 58.333333%; height: 58.333333%; } .size-72{ width: 18rem; height: 18rem; } .size-8{ width: 2rem; height: 2rem; } .size-8\/12{ width: 66.666667%; height: 66.666667%; } .size-80{ width: 20rem; height: 20rem; } .size-9{ width: 2.25rem; height: 2.25rem; } .size-9\/12{ width: 75%; height: 75%; } .size-96{ width: 24rem; height: 24rem; } .size-\[130px\]{ width: 130px; height: 130px; } .\!h-auto{ height: auto !important; } .h-0\.5{ height: 0.125rem; } .h-1\/2{ height: 50%; } .h-1\/3{ height: 33.333333%; } .h-10{ height: 2.5rem; } .h-16{ height: 4rem; } .h-2\/3{ height: 66.666667%; } .h-3\/4{ height: 75%; } .h-\[200px\]{ height: 200px; } .h-\[250px\]{ height: 250px; } .h-\[275px\]{ height: 275px; } .h-\[35px\]{ height: 35px; } .h-\[3px\]{ height: 3px; } .h-\[500px\]{ height: 500px; } .h-\[65vh\]{ height: 65vh; } .h-\[75px\]{ height: 75px; } .h-\[80vh\]{ height: 80vh; } .h-full{ height: 100%; } .\!max-h-\[800px\]{ max-height: 800px !important; } .max-h-\[325px\]{ max-height: 325px; } .max-h-\[570px\]{ max-height: 570px; } .max-h-\[800px\]{ max-height: 800px; } .\!min-h-\[35px\]{ min-height: 35px !important; } .min-h-10{ min-height: 2.5rem; } .min-h-\[50px\]{ min-height: 50px; } .min-h-\[625px\]{ min-height: 625px; } .min-h-\[80vh\]{ min-height: 80vh; } .w-10{ width: 2.5rem; } .w-16{ width: 4rem; } .w-5{ width: 1.25rem; } .w-\[160px\]{ width: 160px; } .w-\[176px\]{ width: 176px; } .w-\[200px\]{ width: 200px; } .w-full{ width: 100%; } .min-w-\[130px\]{ min-width: 130px; } .min-w-\[160px\]{ min-width: 160px; } .min-w-\[200px\]{ min-width: 200px; } .\!max-w-\[1092px\]{ max-width: 1092px !important; } .max-w-\[300px\]{ max-width: 300px; } .max-w-\[380px\]{ max-width: 380px; } .max-w-\[530px\]{ max-width: 530px; } .max-w-\[60\%\]{ max-width: 60%; } .max-w-\[644px\]{ max-width: 644px; } .max-w-\[650px\]{ max-width: 650px; } .max-w-\[75\%\]{ max-width: 75%; } .max-w-\[800px\]{ max-width: 800px; } .max-w-\[90\%\]{ max-width: 90%; } .max-w-\[900px\]{ max-width: 900px; } .max-w-\[calc\(100\%-160px\)\]{ max-width: calc(100% - 160px); } .shrink-0{ flex-shrink: 0; } .-translate-x-1\/2{ --tw-translate-x: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .-translate-y-1\/2{ --tw-translate-y: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .-translate-y-\[50\%\]{ --tw-translate-y: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .translate-y-0\.5{ --tw-translate-y: 0.125rem; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .cursor-pointer{ cursor: pointer; } .list-inside{ list-style-position: inside; } .grid-cols-1{ grid-template-columns: repeat(1, minmax(0, 1fr)); } .grid-cols-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-cols-\[1fr_100px\]{ grid-template-columns: 1fr 100px; } .grid-cols-\[1fr_120px\]{ grid-template-columns: 1fr 120px; } .grid-cols-\[1fr_65px\]{ grid-template-columns: 1fr 65px; } .grid-cols-\[1fr_auto\]{ grid-template-columns: 1fr auto; } .flex-row{ flex-direction: row; } .flex-col{ flex-direction: column; } .flex-wrap{ flex-wrap: wrap; } .place-content-center{ place-content: center; } .items-start{ align-items: flex-start; } .items-end{ align-items: flex-end; } .items-center{ align-items: center; } .justify-start{ justify-content: flex-start; } .justify-end{ justify-content: flex-end; } .justify-center{ justify-content: center; } .justify-between{ justify-content: space-between; } .gap-1{ gap: 0.25rem; } .gap-10{ gap: 2.5rem; } .gap-2{ gap: 0.5rem; } .gap-3{ gap: 0.75rem; } .gap-4{ gap: 1rem; } .gap-5{ gap: 1.25rem; } .gap-6{ gap: 1.5rem; } .gap-8{ gap: 2rem; } .gap-x-0\.5{ -moz-column-gap: 0.125rem; column-gap: 0.125rem; } .gap-x-1{ -moz-column-gap: 0.25rem; column-gap: 0.25rem; } .gap-x-1\.5{ -moz-column-gap: 0.375rem; column-gap: 0.375rem; } .gap-x-10{ -moz-column-gap: 2.5rem; column-gap: 2.5rem; } .gap-x-2{ -moz-column-gap: 0.5rem; column-gap: 0.5rem; } .gap-x-2\.5{ -moz-column-gap: 0.625rem; column-gap: 0.625rem; } .gap-x-3{ -moz-column-gap: 0.75rem; column-gap: 0.75rem; } .gap-x-4{ -moz-column-gap: 1rem; column-gap: 1rem; } .gap-x-5{ -moz-column-gap: 1.25rem; column-gap: 1.25rem; } .gap-y-2{ row-gap: 0.5rem; } .gap-y-4{ row-gap: 1rem; } .gap-y-5{ row-gap: 1.25rem; } .gap-y-6{ row-gap: 1.5rem; } .gap-y-8{ row-gap: 2rem; } .self-center{ align-self: center; } .overflow-hidden{ overflow: hidden; } .overflow-x-auto{ overflow-x: auto; } .overflow-x-scroll{ overflow-x: scroll; } .text-balance{ text-wrap: balance; } .rounded{ border-radius: 0.25rem; } .rounded-\[3px\]{ border-radius: 3px; } .rounded-full{ border-radius: 9999px; } .rounded-none{ border-radius: 0px; } .rounded-sm{ border-radius: 0.125rem; } .rounded-l-sm{ border-top-left-radius: 0.125rem; border-bottom-left-radius: 0.125rem; } .rounded-r-none{ border-top-right-radius: 0px; border-bottom-right-radius: 0px; } .rounded-r-sm{ border-top-right-radius: 0.125rem; border-bottom-right-radius: 0.125rem; } .rounded-t-sm{ border-top-left-radius: 0.125rem; border-top-right-radius: 0.125rem; } .border{ border-width: 1px; } .border-2{ border-width: 2px; } .border-\[1\.5px\]{ border-width: 1.5px; } .border-\[3px\]{ border-width: 3px; } .border-y{ border-top-width: 1px; border-bottom-width: 1px; } .border-b{ border-bottom-width: 1px; } .border-t{ border-top-width: 1px; } .border-t-\[3px\]{ border-top-width: 3px; } .border-none{ border-style: none; } .border-lightgray{ --tw-border-opacity: 1; border-color: rgb(244 245 246 / var(--tw-border-opacity, 1)); } .border-primary{ --tw-border-opacity: 1; border-color: rgb(135 183 37 / var(--tw-border-opacity, 1)); } .border-transparent{ border-color: transparent; } .border-white{ --tw-border-opacity: 1; border-color: rgb(255 255 255 / var(--tw-border-opacity, 1)); } .border-b-primary{ --tw-border-opacity: 1; border-bottom-color: rgb(135 183 37 / var(--tw-border-opacity, 1)); } .border-b-secondary{ --tw-border-opacity: 1; border-bottom-color: rgb(50 50 101 / var(--tw-border-opacity, 1)); } .border-b-transparent{ border-bottom-color: transparent; } .border-t-primary{ --tw-border-opacity: 1; border-top-color: rgb(135 183 37 / var(--tw-border-opacity, 1)); } .border-t-white{ --tw-border-opacity: 1; border-top-color: rgb(255 255 255 / var(--tw-border-opacity, 1)); } .\!bg-primary{ --tw-bg-opacity: 1 !important; background-color: rgb(135 183 37 / var(--tw-bg-opacity, 1)) !important; } .\!bg-primarylight{ --tw-bg-opacity: 1 !important; background-color: rgb(241 243 235 / var(--tw-bg-opacity, 1)) !important; } .\!bg-tertiary{ --tw-bg-opacity: 1 !important; background-color: rgb(255 126 0 / var(--tw-bg-opacity, 1)) !important; } .bg-black\/50{ background-color: rgb(0 0 0 / 0.5); } .bg-lightgray{ --tw-bg-opacity: 1; background-color: rgb(244 245 246 / var(--tw-bg-opacity, 1)); } .bg-primary{ --tw-bg-opacity: 1; background-color: rgb(135 183 37 / var(--tw-bg-opacity, 1)); } .bg-primarylight{ --tw-bg-opacity: 1; background-color: rgb(241 243 235 / var(--tw-bg-opacity, 1)); } .bg-secondary{ --tw-bg-opacity: 1; background-color: rgb(50 50 101 / var(--tw-bg-opacity, 1)); } .bg-white{ --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); } .bg-white\/50{ background-color: rgb(255 255 255 / 0.5); } .bg-gradient-to-b{ background-image: linear-gradient(to bottom, var(--tw-gradient-stops)); } .bg-gray-transparent{ background-image: linear-gradient(0, #F4F5F6 35%, rgba(244, 245, 246, 0) 97%); } .bg-hero-shadow{ background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 41%, rgba(0, 0, 0, 0.5) 100%); } .bg-hero-shadow-small{ background-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 41%, rgba(0, 0, 0, 0.72) 100%); } .bg-image-overlay{ background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)); } .bg-white-transparent{ background-image: linear-gradient(0, #FFFFFF 60%, rgba(255, 255, 255, 0) 97%); } .from-black\/40{ --tw-gradient-from: rgb(0 0 0 / 0.4) var(--tw-gradient-from-position); --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .via-black\/20{ --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgb(0 0 0 / 0.2) var(--tw-gradient-via-position), var(--tw-gradient-to); } .to-transparent{ --tw-gradient-to: transparent var(--tw-gradient-to-position); } .\!bg-contain{ background-size: contain !important; } .\!bg-right{ background-position: right !important; } .object-contain{ -o-object-fit: contain; object-fit: contain; } .object-cover{ -o-object-fit: cover; object-fit: cover; } .\!p-0{ padding: 0px !important; } .\!p-2{ padding: 0.5rem !important; } .p-0{ padding: 0px; } .p-3{ padding: 0.75rem; } .p-4{ padding: 1rem; } .p-5{ padding: 1.25rem; } .p-6{ padding: 1.5rem; } .\!px-4{ padding-left: 1rem !important; padding-right: 1rem !important; } .\!py-0{ padding-top: 0px !important; padding-bottom: 0px !important; } .px-2{ padding-left: 0.5rem; padding-right: 0.5rem; } .px-4{ padding-left: 1rem; padding-right: 1rem; } .px-5{ padding-left: 1.25rem; padding-right: 1.25rem; } .px-6{ padding-left: 1.5rem; padding-right: 1.5rem; } .px-8{ padding-left: 2rem; padding-right: 2rem; } .py-0{ padding-top: 0px; padding-bottom: 0px; } .py-1{ padding-top: 0.25rem; padding-bottom: 0.25rem; } .py-16{ padding-top: 4rem; padding-bottom: 4rem; } .py-2{ padding-top: 0.5rem; padding-bottom: 0.5rem; } .py-2\.5{ padding-top: 0.625rem; padding-bottom: 0.625rem; } .py-3{ padding-top: 0.75rem; padding-bottom: 0.75rem; } .py-4{ padding-top: 1rem; padding-bottom: 1rem; } .py-5{ padding-top: 1.25rem; padding-bottom: 1.25rem; } .py-6{ padding-top: 1.5rem; padding-bottom: 1.5rem; } .py-8{ padding-top: 2rem; padding-bottom: 2rem; } .py-9{ padding-top: 2.25rem; padding-bottom: 2.25rem; } .\!pb-0{ padding-bottom: 0px !important; } .\!pb-10{ padding-bottom: 2.5rem !important; } .\!pb-12{ padding-bottom: 3rem !important; } .pb-0{ padding-bottom: 0px; } .pb-12{ padding-bottom: 3rem; } .pb-2{ padding-bottom: 0.5rem; } .pb-5{ padding-bottom: 1.25rem; } .pb-6{ padding-bottom: 1.5rem; } .pb-8{ padding-bottom: 2rem; } .pb-\[100px\]{ padding-bottom: 100px; } .pb-\[56\.25\%\]{ padding-bottom: 56.25%; } .pe-0{ padding-inline-end: 0px; } .pe-4{ padding-inline-end: 1rem; } .pl-0{ padding-left: 0px; } .pl-3{ padding-left: 0.75rem; } .pr-1{ padding-right: 0.25rem; } .pr-4{ padding-right: 1rem; } .pr-8{ padding-right: 2rem; } .ps-4{ padding-inline-start: 1rem; } .pt-0{ padding-top: 0px; } .pt-12{ padding-top: 3rem; } .pt-2{ padding-top: 0.5rem; } .pt-3{ padding-top: 0.75rem; } .pt-4{ padding-top: 1rem; } .pt-5{ padding-top: 1.25rem; } .text-center{ text-align: center; } .align-middle{ vertical-align: middle; } .font-\[arial\]{ font-family: arial; } .font-body{ font-family: Roboto, ui-sans-serif, system-ui; } .font-heading{ font-family: DM Sans, Arial, system-ui; } .font-sans{ font-family: DM Sans, ui-sans-serif, system-ui; } .text-2xl{ font-size: 1.5rem; line-height: 2rem; } .text-4xl{ font-size: 2.25rem; line-height: 2.5rem; } .text-6xl{ font-size: 3.75rem; line-height: 1; } .text-\[1\.125rem\]{ font-size: 1.125rem; } .text-\[10px\]{ font-size: 10px; } .text-\[22px\]{ font-size: 22px; } .text-\[24px\]{ font-size: 24px; } .text-\[25px\]{ font-size: 25px; } .text-\[28px\]{ font-size: 28px; } .text-\[30px\]{ font-size: 30px; } .text-\[58px\]{ font-size: 58px; } .text-\[80px\]{ font-size: 80px; } .text-base{ font-size: 1rem; line-height: 1.5rem; } .text-lg{ font-size: 1.125rem; line-height: 1.75rem; } .text-sm{ font-size: 0.875rem; line-height: 1.25rem; } .text-xl{ font-size: 1.25rem; line-height: 1.75rem; } .text-xs{ font-size: 0.75rem; line-height: 1rem; } .font-black{ font-weight: 900; } .font-bold{ font-weight: 700; } .font-medium{ font-weight: 500; } .font-normal{ font-weight: 400; } .font-semibold{ font-weight: 600; } .uppercase{ text-transform: uppercase; } .not-italic{ font-style: normal; } .\!leading-\[1\]{ line-height: 1 !important; } .leading-4{ line-height: 1rem; } .leading-7{ line-height: 1.75rem; } .leading-\[14px\]{ line-height: 14px; } .leading-\[1\]{ line-height: 1; } .leading-\[22px\]{ line-height: 22px; } .leading-\[25px\]{ line-height: 25px; } .leading-\[30px\]{ line-height: 30px; } .leading-\[32px\]{ line-height: 32px; } .leading-tight{ line-height: 1.25; } .tracking-tighter{ letter-spacing: -0.05em; } .tracking-wider{ letter-spacing: 0.05em; } .\!text-white{ --tw-text-opacity: 1 !important; color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important; } .text-primary{ --tw-text-opacity: 1; color: rgb(135 183 37 / var(--tw-text-opacity, 1)); } .text-secondary{ --tw-text-opacity: 1; color: rgb(50 50 101 / var(--tw-text-opacity, 1)); } .text-secondary\/60{ color: rgb(50 50 101 / 0.6); } .text-white{ --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .underline{ text-decoration-line: underline; } .line-through{ text-decoration-line: line-through; } .antialiased{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .shadow{ --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .outline-none{ outline: 2px solid transparent; outline-offset: 2px; } .drop-shadow-lg{ --tw-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1)); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .filter{ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .transition-all{ transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .duration-150{ transition-duration: 150ms; } .duration-300{ transition-duration: 300ms; } .bg-lazy{ background-image: var(--bg-xs); } @media (min-width: 640px){ .bg-lazy{ background-image: var(--bg-xs); } } @media (min-width: 768px){ .bg-lazy{ background-image: var(--bg-sm, var(--bg-xs)); } } @media (min-width: 1024px){ .bg-lazy{ background-image: var(--bg-md, var(--bg-sm, var(--bg-xs))); } } @media (min-width: 1280px){ .bg-lazy{ background-image: var(--bg-lg, var(--bg-md, var(--bg-sm, var(--bg-xs)))); } } /* Layout */ html{ scroll-padding-top: 80px; } @media (min-width: 1024px){ html{ scroll-padding-top: 160px; } } body{ --tw-text-opacity: 1; color: rgb(50 50 101 / var(--tw-text-opacity, 1)); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body.mm-ocd-opened{ overflow: hidden; } section{ padding-top: 2rem; padding-bottom: 2rem; } @media (min-width: 768px){ section{ padding-top: 3rem; padding-bottom: 3rem; } } @media (min-width: 1024px){ section{ padding-top: 4rem; padding-bottom: 4rem; } } [data-href]{ cursor: pointer; } section.bg-white + section.bg-white{ padding-top: 0px; } section.bg-primarylight + section.bg-primarylight:not(.fc-news):not(.fc-kb){ padding-top: 0px; } .bg-secondary i.zmdi{ --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } iframe{ aspect-ratio: 16 / 9; height: 100%; width: 100%; } a:has(.is-icon){ background-color: transparent !important; } @font-face { font-family: 'DM Sans'; src: url(https://www.mensonides.nl/custom/build/css/../fonts/dmsans/DMSans-Regular.woff2) format('woff2'), url(https://www.mensonides.nl/custom/build/css/../fonts/dmsans/DMSans-Regular.woff) format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'DM Sans'; src: url(https://www.mensonides.nl/custom/build/css/../fonts/dmsans/DMSans-Bold.woff2) format('woff2'), url(https://www.mensonides.nl/custom/build/css/../fonts/dmsans/DMSans-Bold.woff) format('woff'); font-weight: bold; font-style: normal; font-display: swap; } @font-face { font-family: 'DM Sans'; src: url(https://www.mensonides.nl/custom/build/css/../fonts/dmsans/DMSans-SemiBold.woff2) format('woff2'), url(https://www.mensonides.nl/custom/build/css/../fonts/dmsans/DMSans-SemiBold.woff) format('woff'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'DM Sans'; src: url(https://www.mensonides.nl/custom/build/css/../fonts/dmsans/DMSans-Medium.woff2) format('woff2'), url(https://www.mensonides.nl/custom/build/css/../fonts/dmsans/DMSans-Medium.woff) format('woff'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Roboto'; src: url(https://www.mensonides.nl/custom/build/css/../fonts/roboto/Roboto-Medium.woff2) format('woff2'), url(https://www.mensonides.nl/custom/build/css/../fonts/roboto/Roboto-Medium.woff) format('woff'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Roboto'; src: url(https://www.mensonides.nl/custom/build/css/../fonts/roboto/Roboto-Regular.woff2) format('woff2'), url(https://www.mensonides.nl/custom/build/css/../fonts/roboto/Roboto-Regular.woff) format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Roboto'; src: url(https://www.mensonides.nl/custom/build/css/../fonts/roboto/Roboto-Black.woff2) format('woff2'), url(https://www.mensonides.nl/custom/build/css/../fonts/roboto/Roboto-Black.woff) format('woff'); font-weight: 900; font-style: normal; font-display: swap; } h1, h2, h3, h4, h5, h6{ margin-bottom: 0.75rem; font-family: DM Sans, Arial, system-ui; font-weight: 600; } @media (min-width: 1024px){ h1, h2, h3, h4, h5, h6{ margin-bottom: 1.25rem; } } h1, .is-h1{ font-size: 2.25rem; line-height: 2.5rem; font-weight: 700; } @media (min-width: 1024px){ h1, .is-h1{ font-size: 3rem; line-height: 1; } } @media (min-width: 1280px){ h1, .is-h1{ font-size: 3.75rem; line-height: 1; } } h2, .is-h2{ font-size: 27px; line-height: 1.25; } @media (min-width: 1024px){ h2, .is-h2{ font-size: 3rem; line-height: 1; } } h3, .is-h3{ font-size: 1.5rem; line-height: 2rem; } @media (min-width: 1024px){ h3, .is-h3{ font-size: 2.25rem; line-height: 2.5rem; } } h4, .is-h4{ font-size: 1.25rem; line-height: 1.75rem; } @media (min-width: 1024px){ h4, .is-h4{ font-size: 32px; } } h5, .is-h5{ font-size: 25px; line-height: 28px; } h6, .is-h6{ font-size: 1.125rem; line-height: 1.75rem; } p, .is-p{ font-family: Roboto, ui-sans-serif, system-ui; font-size: 1rem; line-height: 1.5rem; --tw-text-opacity: 1; color: rgb(50 50 101 / var(--tw-text-opacity, 1)); } ol{ margin-bottom: 1rem; list-style-type: decimal; padding-left: 1.5rem; font-family: Roboto, ui-sans-serif, system-ui; } ul{ margin-bottom: 1rem; list-style-type: disc; padding-left: 1.5rem; font-family: Roboto, ui-sans-serif, system-ui; } .single-producten{ margin-bottom: 5rem; } .product-header-content ul{ margin-top: 1rem; } :is(.product-header-content ul) li{ font-size: 1rem; line-height: 1.5rem; } .product-content h4{ margin-top: 1.75rem; line-height: 2rem; --tw-text-opacity: 1; color: rgb(135 183 37 / var(--tw-text-opacity, 1)); } @media (min-width: 1280px){ .product-content h4{ margin-top: 3.5rem; } } .product-content p{ line-height: 25px; } .product-content p + P{ margin-top: 1.25rem; } .product-content ul{ padding-left: 1.75rem; } .product-content li{ position: relative; font-size: 1rem; line-height: 1.5rem; } :is(:is(.product-content table) tr):nth-of-type(odd) td{ --tw-bg-opacity: 1; background-color: rgb(244 245 246 / var(--tw-bg-opacity, 1)); } :is(:is(.product-content table) tr) td{ display: block; --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); padding: 0.75rem; vertical-align: middle; } section:is(:is(.product-content table) tr) td + section.bg-white{ padding-top: 0px; } @media (min-width: 768px){ :is(:is(.product-content table) tr) td{ display: table-cell; } } :is(:is(:is(.product-content table) tr) td):first-of-type{ font-weight: 700; } @media not all and (min-width: 768px){ :is(:is(:is(.product-content table) tr) td):last-of-type{ padding-top: 0px; } } /* Components */ .accordion .ac{ border-radius: 0.125rem; border-style: none; --tw-bg-opacity: 1; background-color: rgb(244 245 246 / var(--tw-bg-opacity, 1)); } :is(.is-active:is(.accordion .ac) .ac-trigger):after{ --tw-content: ''; content: var(--tw-content); } :is(.is-active:is(.accordion .ac) .ac-trigger) .ac-plus{ display: none; } :is(.is-active:is(.accordion .ac) .ac-trigger) .ac-minus{ display: block; } :is(.accordion .ac) .ac-trigger{ display: flex; justify-content: space-between; padding-top: 1rem; padding-bottom: 1rem; padding-left: 2rem; padding-right: 2rem; font-family: DM Sans, Arial, system-ui; font-weight: 600; --tw-text-opacity: 1; color: rgb(50 50 101 / var(--tw-text-opacity, 1)); } :is(.accordion .ac) .ac-trigger::after{ --tw-content: ''; content: var(--tw-content); } :is(:is(.accordion .ac) .ac-trigger):after{ --tw-content: '' !important; content: var(--tw-content) !important; } :is(:is(.accordion .ac) .ac-trigger):focus{ color: inherit; } :is(:is(.accordion .ac) .ac-trigger) svg{ --tw-text-opacity: 1; color: rgb(135 183 37 / var(--tw-text-opacity, 1)); } :is(.accordion .ac) .ac-minus{ display: none; } :is(:is(.accordion .ac) .ac-panel) .ac-text{ padding-left: 2rem; padding-right: 2rem; padding-top: 0.5rem; padding-bottom: 1.5rem; --tw-text-opacity: 1; color: rgb(50 50 101 / var(--tw-text-opacity, 1)); } :is(:is(:is(.accordion .ac) .ac-panel) .ac-text) a{ text-decoration-line: underline; } .btn{ height: 2.5rem; min-height: 2.5rem; border-radius: 0.125rem; border-style: none; --tw-bg-opacity: 1; background-color: rgb(135 183 37 / var(--tw-bg-opacity, 1)); padding-left: 1rem; padding-right: 0.75rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } #main .btn a:not(.btn):not(.card-link):not(.link):not(.no-link-styling){ --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(50 50 101 / var(--tw-text-opacity, 1)); } section#main .btn a:not(.btn):not(.card-link):not(.link):not(.no-link-styling) + section.bg-white{ padding-top: 0px; } @media (min-width: 1024px){ .btn{ height: 2.5rem; min-height: 2.5rem; font-size: 1rem !important; line-height: 1.5rem !important; } } .btn svg{ pointer-events: none; --tw-text-opacity: 1; color: rgb(50 50 101 / var(--tw-text-opacity, 1)); transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 300ms; } .btn:hover{ background-color: rgb(135 183 37 / 0.8); } .btn:hover svg{ --tw-translate-x: 0.125rem; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .btn-animate-down:hover svg{ --tw-translate-y: 0.125rem; --tw-translate-x: 0px !important; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important; } .btn-secondary{ --tw-bg-opacity: 1; background-color: rgb(50 50 101 / var(--tw-bg-opacity, 1)); } .btn-secondary i.zmdi{ --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } #main .btn-secondary a:not(.btn):not(.card-link):not(.link):not(.no-link-styling){ --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); } section#main .btn-secondary a:not(.btn):not(.card-link):not(.link):not(.no-link-styling) + section.bg-white{ padding-top: 0px; } .btn-secondary:hover{ background-color: rgb(50 50 101 / 0.8); } .btn-secondary svg{ --tw-text-opacity: 1; color: rgb(135 183 37 / var(--tw-text-opacity, 1)); } .btn-tertiary{ --tw-bg-opacity: 1; background-color: rgb(255 126 0 / var(--tw-bg-opacity, 1)); } .btn-tertiary:hover{ background-color: rgb(255 126 0 / 0.8); } .btn-light-gray, .btn-lightgray{ --tw-bg-opacity: 1; background-color: rgb(244 245 246 / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(50 50 101 / var(--tw-text-opacity, 1)); } :is(.btn-light-gray,.btn-lightgray):hover{ background-color: rgb(244 245 246 / 0.8); } :is(.btn-light-gray,.btn-lightgray) svg{ --tw-text-opacity: 1; color: rgb(135 183 37 / var(--tw-text-opacity, 1)); } .btn-white{ border-color: transparent; --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(0 0 0 / var(--tw-text-opacity, 1)); } section.btn-white + section.bg-white{ padding-top: 0px; } .btn-white:hover{ border-color: transparent; background-color: rgb(255 255 255 / 0.8); } .load-more.no-animation:active{ animation: none; } @media (min-width: 1024px){ .load-more.no-animation{ --tw-translate-y: -140px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .load-more.no-animation:active{ --tw-translate-y: -140px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } } blockquote p{ font-family: DM Sans, Arial, system-ui; font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; line-height: 1; } @media (min-width: 1024px){ blockquote p{ font-size: 32px; } } .card{ overflow: hidden; border-radius: 0.125rem; } .card .card-body{ padding-left: 1.5rem; padding-right: 1.5rem; padding-top: 1.25rem; padding-bottom: 1.25rem; } .card .card-text{ font-size: 0.875rem; line-height: 1.25rem; } :is(.card .card-text) p{ font-size: 0.875rem; line-height: 1.25rem; } :is(:is(.card .card-text) p):not(:last-child){ margin-bottom: 0.5rem; } .card .card-excerpt { } .card .card-image-top{ position: absolute; top: 1rem; left: 1.5rem; display: flex; align-items: center; -moz-column-gap: 0.5rem; column-gap: 0.5rem; font-family: Roboto, ui-sans-serif, system-ui; font-size: 0.75rem; line-height: 1rem; font-weight: 500; text-transform: uppercase; } :is(.card .card-image-top) svg{ --tw-text-opacity: 1; color: rgb(135 183 37 / var(--tw-text-opacity, 1)); } .card .card-body-top{ display: flex; align-items: center; -moz-column-gap: 0.5rem; column-gap: 0.5rem; font-family: Roboto, ui-sans-serif, system-ui; font-size: 0.75rem; line-height: 1rem; font-weight: 500; text-transform: uppercase; } .card .card-image-overlay{ position: absolute; top: 0px; left: 0px; height: 100px; width: 100%; background-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 41%, rgba(0, 0, 0, 0.72) 100%); } .card .card-link{ border-bottom-width: 1px; font-weight: 500; font-weight: 15px; transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 300ms; } /* Branding on the banner */ a#CybotCookiebotDialogPoweredbyCybot, div#CybotCookiebotDialogPoweredByText { display: none; } /* Branding on the Privacy trigger */ #CookiebotWidget .CookiebotWidget-body .CookiebotWidget-main-logo { display: none; } .gform_wrapper, .gform_wrapper.gravity-theme{ accent-color: #87B725; } :is(.gform_wrapper,.gform_wrapper.gravity-theme) .gform_required_legend{ display: none; } :is(.gform_wrapper,.gform_wrapper.gravity-theme) .gform_body .gform_fields{ position: relative; } :is(:is(.gform_wrapper,.gform_wrapper.gravity-theme) .gform_body .gform_fields) a{ text-decoration-line: underline; } :is(:is(.gform_wrapper,.gform_wrapper.gravity-theme) .gform_body .gform_fields) .gfield input[type='checkbox']{ display: none; cursor: pointer; @extend .filter-input; } :is(:is(:is(.gform_wrapper,.gform_wrapper.gravity-theme) .gform_body .gform_fields) .gfield input[type='checkbox']) ~ label{ position: relative; margin-top: 0.5rem; margin-bottom: 0.5rem; display: inline-block; cursor: pointer; padding-left: 2rem; font-weight: 400; } :is(:is(:is(.gform_wrapper,.gform_wrapper.gravity-theme) .gform_body .gform_fields) .gfield input[type='checkbox']) ~ label::before{ position: absolute; top: -0.125rem; left: 0px; margin-right: 0.5rem; display: inline-block; height: 20px; width: 20px; min-width: 20px; border-width: 1px; --tw-border-opacity: 1; border-color: rgb(188 188 188 / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); content: var(--tw-content); transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } :is(:is(:is(.gform_wrapper,.gform_wrapper.gravity-theme) .gform_body .gform_fields) .gfield input[type='checkbox']):checked ~ label{ --tw-border-opacity: 1; border-color: rgb(135 183 37 / var(--tw-border-opacity, 1)); } :is(:is(:is(.gform_wrapper,.gform_wrapper.gravity-theme) .gform_body .gform_fields) .gfield input[type='checkbox']):checked ~ label::before{ content: var(--tw-content); --tw-bg-opacity: 1; background-color: rgb(135 183 37 / var(--tw-bg-opacity, 1)); } :is(:is(.gform_wrapper,.gform_wrapper.gravity-theme) .gform_body .gform_fields) .gfield input[type='radio']{ display: none; cursor: pointer; @extend .filter-input; } :is(:is(:is(.gform_wrapper,.gform_wrapper.gravity-theme) .gform_body .gform_fields) .gfield input[type='radio']) ~ label{ position: relative; margin-top: 0.5rem; margin-bottom: 0.5rem; display: inline-block; cursor: pointer; padding-left: 2rem; font-weight: 400; } :is(:is(:is(.gform_wrapper,.gform_wrapper.gravity-theme) .gform_body .gform_fields) .gfield input[type='radio']) ~ label::before{ position: absolute; top: -0.125rem; left: 0px; margin-right: 0.5rem; display: inline-block; height: 18px; width: 18px; min-width: 18px; border-radius: 9999px; border-width: 1px; --tw-border-opacity: 1; border-color: rgb(188 188 188 / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); content: var(--tw-content); transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } :is(:is(:is(.gform_wrapper,.gform_wrapper.gravity-theme) .gform_body .gform_fields) .gfield input[type='radio']):checked ~ label{ --tw-border-opacity: 1; border-color: rgb(135 183 37 / var(--tw-border-opacity, 1)); } :is(:is(:is(.gform_wrapper,.gform_wrapper.gravity-theme) .gform_body .gform_fields) .gfield input[type='radio']):checked ~ label::before{ content: var(--tw-content); --tw-bg-opacity: 1; background-color: rgb(135 183 37 / var(--tw-bg-opacity, 1)); } :is(:is(.gform_wrapper,.gform_wrapper.gravity-theme) .gform_body .gform_fields) .gform-field-label{ font-weight: 600; line-height: 1.25; } :is(:is(.gform_wrapper,.gform_wrapper.gravity-theme) .gform_body .gform_fields) .gform-field-label--type-sub{ margin-bottom: 0.5rem; } :is(:is(.gform_wrapper,.gform_wrapper.gravity-theme) .gform_body .gform_fields) .gfield_required{ --tw-text-opacity: 1; color: rgb(50 50 101 / var(--tw-text-opacity, 1)); } :is(:is(.gform_wrapper,.gform_wrapper.gravity-theme) .gform_body .gform_fields) .gsection{ border-style: none; padding: 0px; } :is(:is(:is(.gform_wrapper,.gform_wrapper.gravity-theme) .gform_body .gform_fields) .gsection) .gsection_title{ margin-bottom: 0px; font-size: 1.125rem; line-height: 1.75rem; --tw-text-opacity: 1; color: rgb(135 183 37 / var(--tw-text-opacity, 1)); } :is(:is(:is(.gform_wrapper,.gform_wrapper.gravity-theme) .gform_body .gform_fields) .ginput_container) input[type='text'],:is(:is(:is(.gform_wrapper,.gform_wrapper.gravity-theme) .gform_body .gform_fields) .ginput_container) input[type='tel'],:is(:is(:is(.gform_wrapper,.gform_wrapper.gravity-theme) .gform_body .gform_fields) .ginput_container) input[type='email'],:is(:is(:is(.gform_wrapper,.gform_wrapper.gravity-theme) .gform_body .gform_fields) .ginput_container) select,:is(:is(:is(.gform_wrapper,.gform_wrapper.gravity-theme) .gform_body .gform_fields) .ginput_container) textarea{ border-radius: 0px; border-width: 1px; --tw-border-opacity: 1; border-color: rgb(188 188 188 / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); accent-color: #87B725; outline-color: #87B725; } section:is(:is(:is(.gform_wrapper,.gform_wrapper.gravity-theme) .gform_body .gform_fields) .ginput_container) input[type='text'] + section.bg-white,section:is(:is(:is(.gform_wrapper,.gform_wrapper.gravity-theme) .gform_body .gform_fields) .ginput_container) input[type='tel'] + section.bg-white,section:is(:is(:is(.gform_wrapper,.gform_wrapper.gravity-theme) .gform_body .gform_fields) .ginput_container) input[type='email'] + section.bg-white,section:is(:is(:is(.gform_wrapper,.gform_wrapper.gravity-theme) .gform_body .gform_fields) .ginput_container) select + section.bg-white,section:is(:is(:is(.gform_wrapper,.gform_wrapper.gravity-theme) .gform_body .gform_fields) .ginput_container) textarea + section.bg-white{ padding-top: 0px; } :is(:is(.gform_wrapper,.gform_wrapper.gravity-theme) .gform_body .gform_fields) .gform-loader{ position: absolute; bottom: -2rem; right: 0px; } :is(.gform_wrapper,.gform_wrapper.gravity-theme) .gform-button,:is(.gform_wrapper,.gform_wrapper.gravity-theme) .gform_button{ margin-left: auto; height: 2.5rem; min-height: 2.5rem; cursor: pointer; border-radius: 0.125rem; --tw-bg-opacity: 1; background-color: rgb(255 126 0 / var(--tw-bg-opacity, 1)); background-image: url(https://www.mensonides.nl/custom/build/css/../svg/icons/chevron-right-blue.svg); background-position: center right 0.5rem; background-repeat: no-repeat; padding-inline-start: 1rem; padding-right: 1.5rem !important; font-weight: 600; --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } :is(.gform_wrapper,.gform_wrapper.gravity-theme) .gform_button_select_files{ border-radius: 0.125rem; --tw-bg-opacity: 1; background-color: rgb(50 50 101 / var(--tw-bg-opacity, 1)); padding: 0.75rem; font-weight: 600; --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } :is(.gform_wrapper,.gform_wrapper.gravity-theme) .gform_button_select_files i.zmdi{ --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } #main :is(.gform_wrapper,.gform_wrapper.gravity-theme) .gform_button_select_files a:not(.btn):not(.card-link):not(.link):not(.no-link-styling){ --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); } section#main :is(.gform_wrapper,.gform_wrapper.gravity-theme) .gform_button_select_files a:not(.btn):not(.card-link):not(.link):not(.no-link-styling) + section.bg-white{ padding-top: 0px; } @media (min-width: 768px){ .newsletter-form .gform_fields{ row-gap: 0.5rem !important; } } @media (min-width: 1280px){ .newsletter-form .gform_fields{ -moz-column-gap: 2.5rem !important; column-gap: 2.5rem !important; } } @media (min-width: 768px){ :is(.newsletter-form .gform_fields) .gfield{ grid-column: span 6 / span 6 !important; } } :is(:is(.newsletter-form .gform_fields) .gfield) input{ padding-left: 1rem !important; padding-right: 1rem !important; --tw-text-opacity: 1; color: rgb(50 50 101 / var(--tw-text-opacity, 1)); } :is(:is(.newsletter-form .gform_fields) .gfield) .gform-button{ margin-left: 0px; padding-right: 1.5rem !important; --tw-text-opacity: 1 !important; color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important; } :is(:is(.newsletter-form .gform_fields) .gfield) .gfield_required{ display: none; } :is(:is(.newsletter-form .gform_fields) .gfield) .gform-field-label{ font-size: 0.875rem; line-height: 1.25rem; line-height: 1.25; } @media (min-width: 1024px){ .gfield--type-email:is(:is(.newsletter-form .gform_fields) .gfield){ order: 1; } .gfield--type-submit:is(:is(.newsletter-form .gform_fields) .gfield){ order: 2; } } .newsletter-form .gform-footer{ margin: 0px !important; padding: 0px !important; } .link{ display: inline-block; font-weight: 500; text-decoration-color: #87B725; text-underline-offset: 4px; } .link-hover{ position: relative; border-bottom-width: 1px; border-bottom-color: transparent; padding-bottom: 0.125rem; transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 300ms; } .link-hover:hover{ --tw-border-opacity: 1; border-bottom-color: rgb(50 50 101 / var(--tw-border-opacity, 1)); text-decoration-line: none; } #main a:not(.btn):not(.card-link):not(.link):not(.no-link-styling){ --tw-bg-opacity: 1; background-color: rgb(135 183 37 / var(--tw-bg-opacity, 1)); } #main #main a:not(.btn):not(.card-link):not(.link):not(.no-link-styling) a:not(.btn):not(.card-link):not(.link):not(.no-link-styling){ --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(50 50 101 / var(--tw-text-opacity, 1)); } section#main #main a:not(.btn):not(.card-link):not(.link):not(.no-link-styling) a:not(.btn):not(.card-link):not(.link):not(.no-link-styling) + section.bg-white{ padding-top: 0px; } #main a:not(.btn):not(.card-link):not(.link):not(.no-link-styling):hover{ text-decoration-line: underline; } #main .bg-primary a:not(.btn):not(.card-link):not(.link):not(.no-link-styling){ --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(50 50 101 / var(--tw-text-opacity, 1)); } section#main .bg-primary a:not(.btn):not(.card-link):not(.link):not(.no-link-styling) + section.bg-white{ padding-top: 0px; } #main .bg-secondary a:not(.btn):not(.card-link):not(.link):not(.no-link-styling){ --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); } section#main .bg-secondary a:not(.btn):not(.card-link):not(.link):not(.no-link-styling) + section.bg-white{ padding-top: 0px; } .checkmark-list{ margin-bottom: 0.5rem; list-style-type: none; } @media (min-width: 1024px){ .checkmark-list{ font-size: 1.125rem; line-height: 1.75rem; } } .checkmark-list li + li{ margin-top: 0.5rem; } .checkmark-list li{ position: relative; } @media not all and (min-width: 1024px){ .checkmark-list li{ line-height: 18px; } } :is(.checkmark-list li):before{ position: absolute; top: 0px; left: -2rem; margin-right: 0.5rem; display: inline-block; width: 1.25rem; height: 1.25rem; min-width: 1.25rem; background-size: contain; background-position: center; background-repeat: no-repeat; --tw-content: ''; content: var(--tw-content); } @media (min-width: 1024px){ :is(.checkmark-list li):before{ --tw-translate-y: 0.25rem; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } } :is(.checkmark-list li):before { background-image: url("data:image/svg+xml,%3Csvg width='22' height='21' viewBox='0 0 22 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.1992 8.74977L10.0942 14.8713L20.2992 3.14977' stroke='%2387B725' stroke-width='2.1'/%3E%3C/svg%3E%0A"); } @media not all and (min-width: 1024px){ .pswp .pswp__button--zoom{ display: none !important; } } .pswp .pswp__icn{ left: 0px; width: 2.5rem; height: 2.5rem; } .scrollspy-container .btn{ position: relative; text-align: left; } @media not all and (min-width: 768px){ .scrollspy-container .btn{ width: 100%; } .scrollspy-container svg{ position: absolute; top: 50%; right: 0.5rem; --tw-translate-y: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } } .active:is(:is(.scrollspy-container #scrollspy-menu) .btn){ --tw-bg-opacity: 1; background-color: rgb(50 50 101 / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .active:is(:is(.scrollspy-container #scrollspy-menu) .btn) i.zmdi{ --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } #main .active:is(:is(.scrollspy-container #scrollspy-menu) .btn) a:not(.btn):not(.card-link):not(.link):not(.no-link-styling){ --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); } section#main .active:is(:is(.scrollspy-container #scrollspy-menu) .btn) a:not(.btn):not(.card-link):not(.link):not(.no-link-styling) + section.bg-white{ padding-top: 0px; } @media not all and (min-width: 1024px){ .active:is(:is(.scrollspy-container #scrollspy-menu) .btn){ display: none; } } .swiper { --swiper-theme-color: #323265; } .swiper .swiper-pagination-bullet { --swiper-pagination-bullet-size: 12px; --swiper-pagination-bullet-border-radius: 0; --swiper-pagination-bullet-inactive-opacity: 1; --swiper-pagination-bullet-inactive-color: #f4f5f6; } .swiper-button-next, .swiper-button-prev { --swiper-theme-color: #323265; --swiper-navigation-size: 20px; --swiper-navigation-sides-offset: 4px; aspect-ratio: 1 / 1; width: 2.5rem !important; height: 2.5rem !important; border-radius: 9999px; --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } section.swiper-button-next + section.bg-white,section .swiper-button-prev + section.bg-white{ padding-top: 0px; } .swiper-button-next:hover, .swiper-button-prev:hover{ --tw-text-opacity: 1; color: rgb(135 183 37 / var(--tw-text-opacity, 1)); } .swiper-button-lock:is(.swiper-button-next,.swiper-button-prev){ display: none !important; } .swiper-button-disabled:is(.swiper-button-next,.swiper-button-prev) { opacity: 0.15 !important; } .product-gallery-slider-thumbs .swiper-slide-thumb-active{ --tw-border-opacity: 1; border-color: rgb(135 183 37 / var(--tw-border-opacity, 1)); } .tag{ font-family: DM Sans, Arial, system-ui; font-size: 0.75rem; line-height: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.025em; --tw-text-opacity: 1; color: rgb(135 183 37 / var(--tw-text-opacity, 1)); } /* Navigation */ .footer-navigation-layout ul{ margin-bottom: 0px; list-style-type: none; padding-left: 0px; font-family: DM Sans, Arial, system-ui; } .footer-navigation-layout .footer-navigation{ display: flex; flex-direction: column; row-gap: 0.375rem; } @media (min-width: 1024px){ .footer-navigation-layout .footer-navigation{ row-gap: 0.75rem; } } :is(.footer-navigation-layout .footer-navigation) a{ position: relative; border-bottom-width: 1px; border-bottom-color: transparent; padding-bottom: 0.125rem; transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 300ms; } :is(.footer-navigation-layout .footer-navigation) a:hover{ --tw-border-opacity: 1; border-bottom-color: rgb(50 50 101 / var(--tw-border-opacity, 1)); } .mobile-navigation-container.mm-spn.mm-spn--light{ --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); } section.mobile-navigation-container.mm-spn.mm-spn--light + section.bg-white{ padding-top: 0px; } .mobile-navigation-container.mm-spn.mm-spn--light li{ margin-left: 1.25rem; margin-right: 1.25rem; border-radius: 3px; border-width: 1px; --tw-border-opacity: 1; border-color: rgb(244 245 246 / var(--tw-border-opacity, 1)); font-weight: 500; --tw-text-opacity: 1; color: rgb(50 50 101 / var(--tw-text-opacity, 1)); } :is(.mobile-navigation-container.mm-spn.mm-spn--light li):after{ margin-left: 0px; border-color: transparent; opacity: 1; } :is(.mobile-navigation-container.mm-spn.mm-spn--light li):before{ display: none; --tw-text-opacity: 1; color: rgb(135 183 37 / var(--tw-text-opacity, 1)); opacity: 1; } .menu-item-has-children:is(.mobile-navigation-container.mm-spn.mm-spn--light li)::before{ content: var(--tw-content); display: block; } .menu-item-has-children:is(.mobile-navigation-container.mm-spn.mm-spn--light li) > a{ pointer-events: none; } .indicator:is(.mobile-navigation-container.mm-spn.mm-spn--light li){ width: auto; } .indicator:is(.mobile-navigation-container.mm-spn.mm-spn--light li) .indicator-item{ display: inline-block; --tw-bg-opacity: 1; background-color: rgb(50 50 101 / var(--tw-bg-opacity, 1)); padding: 0px; text-align: center; } .indicator:is(.mobile-navigation-container.mm-spn.mm-spn--light li) .indicator-item i.zmdi{ --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } #main .indicator:is(.mobile-navigation-container.mm-spn.mm-spn--light li) .indicator-item a:not(.btn):not(.card-link):not(.link):not(.no-link-styling){ --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); } section#main .indicator:is(.mobile-navigation-container.mm-spn.mm-spn--light li) .indicator-item a:not(.btn):not(.card-link):not(.link):not(.no-link-styling) + section.bg-white{ padding-top: 0px; } .current-menu-item:is(.mobile-navigation-container.mm-spn.mm-spn--light li),.current-menu-ancestor:is(.mobile-navigation-container.mm-spn.mm-spn--light li){ --tw-bg-opacity: 1; background-color: rgb(244 245 246 / var(--tw-bg-opacity, 1)); } .current-menu-item:is(.mobile-navigation-container.mm-spn.mm-spn--light li)::after,.current-menu-ancestor:is(.mobile-navigation-container.mm-spn.mm-spn--light li)::after{ content: var(--tw-content); --tw-border-opacity: 1; border-color: rgb(135 183 37 / var(--tw-border-opacity, 1)); } :is(.mobile-navigation-container.mm-spn.mm-spn--light li) a{ padding-left: 1rem; padding-right: 1rem; padding-top: 0.75rem; padding-bottom: 0.75rem; font-size: 1.125rem; line-height: 1.75rem; } :is(:is(.mobile-navigation-container.mm-spn.mm-spn--light li) a):after{ display: none; } .mobile-navigation-container.mm-spn.mm-spn--light ul{ display: flex; flex-direction: column; gap: 0.5rem; } :is(.mobile-navigation-container.mm-spn.mm-spn--light .mobile-navigation):before{ border-top-width: 0px; } .mobile-navigation-container.mm-spn.mm-spn--light .sub-menu{ --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); } section.mobile-navigation-container.mm-spn.mm-spn--light .sub-menu + section.bg-white{ padding-top: 0px; } :is(.mobile-navigation-container.mm-spn.mm-spn--light .sub-menu):before{ border-top-width: 0px; } .mm-ocd{ margin-top: 115px; --mm-ocd-width: 100%; } .admin-bar .mm-ocd{ top: 46px; } .has-scrolled .mm-ocd{ margin-top: 56px; } :is(.mm-ocd .mm-spn) ul { bottom: 40px !important; } :is(.mm-ocd .mm-spn--main) .mobile-navigation{ margin-top: -32px; } :is(.mm-ocd .mm-spn.mm-spn--navbar):after{ text-align: left; font-size: 14px; opacity: 1; } :is(.mm-ocd .mm-spn.mm-spn--navbar):before{ --tw-text-opacity: 1; color: rgb(135 183 37 / var(--tw-text-opacity, 1)); } .main-navigation ul{ margin-bottom: 0px; list-style-type: none; font-family: DM Sans, Arial, system-ui; } .main-navigation .main-navigation-container{ visibility: hidden; opacity: 0; transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 300ms; } :is(.main-navigation .main-navigation-container):before{ position: fixed; inset: 0px; top: 0px; left: 0px; z-index: 40; height: 100%; width: 100%; background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1)); --tw-bg-opacity: 0.5; --tw-content: ''; content: var(--tw-content); } .main-navigation .menu-toggle-container.is-active .main-navigation-container{ visibility: visible; opacity: 1; } .main-navigation .menu-container{ position: absolute; top: 50px; left: 0px; z-index: 50; width: 100%; border-radius: 0.125rem; --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); padding-left: 1.25rem; padding-right: 1.25rem; padding-bottom: 1rem; --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } section.main-navigation .menu-container + section.bg-white{ padding-top: 0px; } .main-navigation .menu-close{ position: absolute; top: 1.25rem; right: 1.25rem; --tw-text-opacity: 1; color: rgb(135 183 37 / var(--tw-text-opacity, 1)); } .main-navigation .menu-close svg{ width: 1rem; height: 1rem; } :is(:is(.main-navigation .mega-menu) .menu-item:not(.menu-item-has-children)) svg{ display: none; } :is(:is(.main-navigation .mega-menu) .menu-item:not(.menu-item-has-children)) .cat-icon svg{ display: inline-block; } :is(.main-navigation .mega-menu) .menu-cta svg{ min-height: 150px; width: auto; } .main-navigation .mega-menu-heading{ margin-top: 1rem; -moz-column-gap: 0.75rem; column-gap: 0.75rem; font-size: 32px; } :is(.main-navigation .mega-menu-heading) svg{ width: 2.5rem; height: 2.5rem; } .main-navigation .menu-button{ --tw-text-opacity: 1; color: rgb(50 50 101 / var(--tw-text-opacity, 1)); } @media (min-width: 1280px){ .main-navigation .menu-button{ font-size: 1.125rem; line-height: 1.75rem; } } :is(.main-navigation .menu-button):hover svg{ --tw-translate-x: 0px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } :is(.main-navigation .menu-button) svg{ --tw-text-opacity: 1; color: rgb(135 183 37 / var(--tw-text-opacity, 1)); } .main-navigation .menu-heading{ border-style: none; } :is(.main-navigation .menu-heading) > a{ pointer-events: none; justify-content: flex-start !important; font-size: 32px; } :is(.main-navigation .menu-heading) > a:hover{ background-color: transparent !important; } :is(.main-navigation .menu-heading) svg{ width: 2.5rem; height: 2.5rem; --tw-text-opacity: 1 !important; color: rgb(50 50 101 / var(--tw-text-opacity, 1)) !important; } .main-navigation .menu-item{ margin-top: 0.25rem; margin-bottom: 0.25rem; border-radius: 3px; border-width: 1px; --tw-border-opacity: 1; border-color: rgb(244 245 246 / var(--tw-border-opacity, 1)); font-weight: 500; --tw-text-opacity: 1; color: rgb(50 50 101 / var(--tw-text-opacity, 1)); } .current-menu-item:is(.main-navigation .menu-item):not(.menu-heading) > a{ --tw-border-opacity: 1; border-bottom-color: rgb(135 183 37 / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(244 245 246 / var(--tw-bg-opacity, 1)); } :is(.main-navigation .menu-item) a{ display: flex; align-items: center; justify-content: space-between; border-bottom-width: 1px; border-bottom-color: transparent; padding-left: 1rem; padding-right: 1rem; padding-top: 0.75rem; padding-bottom: 0.75rem; } :is(.main-navigation .menu-item) a:hover{ --tw-border-opacity: 1; border-bottom-color: rgb(135 183 37 / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(244 245 246 / var(--tw-bg-opacity, 1)); } :is(:is(.main-navigation .menu-item) a) svg{ --tw-text-opacity: 1; color: rgb(135 183 37 / var(--tw-text-opacity, 1)); } :root { --menu-bg-height: 100%; } :is(.mega-menu .menu-container):before { height: var(--menu-bg-height); position: absolute; top: 76px; left: 0px; z-index: -1; width: 100%; --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); --tw-content: ''; content: var(--tw-content); } section:is(.mega-menu .menu-container) + section.bg-white:before{ padding-top: 0px; } :is(.mega-menu .menu-container) > li{ width: 25%; } .mega-menu .sub-menu { width: calc(25% - 16px); visibility: hidden; position: absolute; top: 72px; left: 25%; margin-inline-start: 1rem; } .is-active:is(.mega-menu .sub-menu){ visibility: visible; opacity: 1; } :is(.mega-menu .sub-menu) li{ width: 100%; --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); } section:is(.mega-menu .sub-menu) li + section.bg-white{ padding-top: 0px; } :is(.mega-menu .sub-menu) .sub-menu { width: calc(100% - 16px); left: 100%; top: 0px; } .main-navigation-container:not(.mega-menu) .menu-container{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } :is(.main-navigation-container:not(.mega-menu) .menu-container) .sub-menu{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 0.25rem; -moz-column-gap: 1rem; column-gap: 1rem; } .socket-navigation-container ul{ margin-bottom: 0px; list-style-type: none; font-family: DM Sans, Arial, system-ui; } .socket-navigation-container a{ border-bottom-width: 1px; border-bottom-color: transparent; transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 300ms; } .socket-navigation-container a:hover{ --tw-border-opacity: 1; border-bottom-color: rgb(50 50 101 / var(--tw-border-opacity, 1)); } .top-desktop-navigation{ margin-bottom: 0px; list-style-type: none; font-family: DM Sans, Arial, system-ui; } .top-desktop-navigation a{ border-bottom-width: 1px; border-bottom-color: transparent; transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 300ms; } .top-desktop-navigation a:hover{ --tw-border-opacity: 1; border-bottom-color: rgb(50 50 101 / var(--tw-border-opacity, 1)); } /* Utilities */ .mm-ocd-opened [id='hamburger']>div{ height: 0px; } .mm-ocd-opened [id='hamburger']>div::before{ --tw-translate-y: 0px; content: var(--tw-content); --tw-rotate: 45deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .mm-ocd-opened [id='hamburger']>div::after{ --tw-translate-y: 0px; content: var(--tw-content); --tw-rotate: -45deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .absolute-center{ position: absolute; top: 50%; left: 50%; --tw-translate-x: -50%; --tw-translate-y: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .img-fluid{ height: auto; max-width: 100%; } .transition-all{ transition-duration: 300ms; } .container-small{ max-width: 980px; } .text-stroke { -webkit-text-stroke: 2px currentColor; -webkit-text-fill-color: transparent; } .word-break { word-break: break-word; } .bg-lazy{ background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0; } .bg-lazy.entered{ opacity: 1; } body:not(.block-editor-page) .bg-lazy:not(.entered) { background-image: none !important; } img.lazy{ opacity: 0; -webkit-mask-image: none; mask-image: none; } img.loaded,img.entered{ opacity: 1; } /* Vendor */ /** * Accordion v3.3.4 * Lightweight and accessible accordion module created in pure Javascript * https://github.com/michu2k/Accordion * * Copyright (c) Michał Strumpf * Published under MIT License */ .ac{ margin-top:8px; border:1px solid #eee; background-color:#fff; box-sizing:border-box } .ac .ac-header{ margin:0; padding:0 } .ac .ac-trigger{ font:bold 16px Arial,sans-serif; color:#111; text-align:left; width:100%; padding:8px 32px 8px 8px; display:block; cursor:pointer; background-color:transparent; transition:color .25s ease; position:relative; text-decoration:none; margin:0; border:0 } .ac .ac-trigger::after{ content:"+"; text-align:center; width:15px; transform:translate(0,-50%); position:absolute; right:10px; top:50% } .ac .ac-trigger:focus{ color:#8a8a8a } .ac .ac-panel{ overflow:hidden; transition-property:height,visibility; transition-timing-function:ease } .ac .ac-panel .ac-text{ font:15px/24px Arial,sans-serif; color:#111; padding:8px; margin:0 } .ac.js-enabled .ac-panel{ visibility:hidden } .ac.is-active .ac-panel{ visibility:visible } .ac.is-active>.ac-header .ac-trigger::after{ content:"–" } /** * Swiper 11.1.9 * Most modern mobile touch slider and framework with hardware accelerated transitions * https://swiperjs.com * * Copyright 2014-2024 Vladimir Kharlampidi * * Released under the MIT License * * Released on: July 31, 2024 */ @font-face{ font-family:swiper-icons; src:url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA'); font-weight:400; font-style:normal } :root{ --swiper-theme-color:#007aff } :host{ position:relative; display:block; margin-left:auto; margin-right:auto; z-index:1 } .swiper{ margin-left:auto; margin-right:auto; position:relative; overflow:hidden; list-style:none; padding:0; z-index:1; display:block } .swiper-vertical>.swiper-wrapper{ flex-direction:column } .swiper-wrapper{ position:relative; width:100%; height:100%; z-index:1; display:flex; transition-property:transform; transition-timing-function:var(--swiper-wrapper-transition-timing-function,initial); box-sizing:content-box } .swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{ transform:translate3d(0px,0,0) } .swiper-horizontal{ touch-action:pan-y } .swiper-vertical{ touch-action:pan-x } .swiper-slide{ flex-shrink:0; width:100%; height:100%; position:relative; transition-property:transform; display:block } .swiper-slide-invisible-blank{ visibility:hidden } .swiper-autoheight,.swiper-autoheight .swiper-slide{ height:auto } .swiper-autoheight .swiper-wrapper{ align-items:flex-start; transition-property:transform,height } .swiper-backface-hidden .swiper-slide{ transform:translateZ(0); backface-visibility:hidden } .swiper-3d.swiper-css-mode .swiper-wrapper{ perspective:1200px } .swiper-3d .swiper-wrapper{ transform-style:preserve-3d } .swiper-3d{ perspective:1200px } .swiper-3d .swiper-cube-shadow,.swiper-3d .swiper-slide{ transform-style:preserve-3d } .swiper-css-mode>.swiper-wrapper{ overflow:auto; scrollbar-width:none; -ms-overflow-style:none } .swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{ display:none } .swiper-css-mode>.swiper-wrapper>.swiper-slide{ scroll-snap-align:start start } .swiper-css-mode.swiper-horizontal>.swiper-wrapper{ scroll-snap-type:x mandatory } .swiper-css-mode.swiper-vertical>.swiper-wrapper{ scroll-snap-type:y mandatory } .swiper-css-mode.swiper-free-mode>.swiper-wrapper{ scroll-snap-type:none } .swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide{ scroll-snap-align:none } .swiper-css-mode.swiper-centered>.swiper-wrapper::before{ content:''; flex-shrink:0; order:9999 } .swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide{ scroll-snap-align:center center; scroll-snap-stop:always } .swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{ margin-inline-start:var(--swiper-centered-offset-before) } .swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper::before{ height:100%; min-height:1px; width:var(--swiper-centered-offset-after) } .swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{ margin-block-start:var(--swiper-centered-offset-before) } .swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper::before{ width:100%; min-width:1px; height:var(--swiper-centered-offset-after) } .swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{ position:absolute; left:0; top:0; width:100%; height:100%; pointer-events:none; z-index:10 } .swiper-3d .swiper-slide-shadow{ background:rgba(0,0,0,.15) } .swiper-3d .swiper-slide-shadow-left{ background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0)) } .swiper-3d .swiper-slide-shadow-right{ background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0)) } .swiper-3d .swiper-slide-shadow-top{ background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0)) } .swiper-3d .swiper-slide-shadow-bottom{ background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0)) } .swiper-lazy-preloader{ width:42px; height:42px; position:absolute; left:50%; top:50%; margin-left:-21px; margin-top:-21px; z-index:10; transform-origin:50%; box-sizing:border-box; border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color)); border-radius:50%; border-top-color:transparent } .swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader{ animation:swiper-preloader-spin 1s infinite linear } .swiper-lazy-preloader-white{ --swiper-preloader-color:#fff } .swiper-lazy-preloader-black{ --swiper-preloader-color:#000 } @keyframes swiper-preloader-spin{ 0%{ transform:rotate(0deg) } 100%{ transform:rotate(360deg) } } .swiper-virtual .swiper-slide{ -webkit-backface-visibility:hidden; transform:translateZ(0) } .swiper-virtual.swiper-css-mode .swiper-wrapper::after{ content:''; position:absolute; left:0; top:0; pointer-events:none } .swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after{ height:1px; width:var(--swiper-virtual-size) } .swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after{ width:1px; height:var(--swiper-virtual-size) } :root{ --swiper-navigation-size:44px } .swiper-button-next,.swiper-button-prev{ position:absolute; top:var(--swiper-navigation-top-offset,50%); width:calc(var(--swiper-navigation-size)/ 44 * 27); height:var(--swiper-navigation-size); margin-top:calc(0px - (var(--swiper-navigation-size)/ 2)); z-index:10; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--swiper-navigation-color,var(--swiper-theme-color)) } .swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{ opacity:.35; cursor:auto; pointer-events:none } .swiper-button-next.swiper-button-hidden,.swiper-button-prev.swiper-button-hidden{ opacity:0; cursor:auto; pointer-events:none } .swiper-navigation-disabled .swiper-button-next,.swiper-navigation-disabled .swiper-button-prev{ display:none!important } .swiper-button-next svg,.swiper-button-prev svg{ width:100%; height:100%; -o-object-fit:contain; object-fit:contain; transform-origin:center } .swiper-rtl .swiper-button-next svg,.swiper-rtl .swiper-button-prev svg{ transform:rotate(180deg) } .swiper-button-prev,.swiper-rtl .swiper-button-next{ left:var(--swiper-navigation-sides-offset,10px); right:auto } .swiper-button-next,.swiper-rtl .swiper-button-prev{ right:var(--swiper-navigation-sides-offset,10px); left:auto } .swiper-button-lock{ display:none } .swiper-button-next:after,.swiper-button-prev:after{ font-family:swiper-icons; font-size:var(--swiper-navigation-size); text-transform:none!important; letter-spacing:0; font-variant:initial; line-height:1 } .swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{ content:'prev' } .swiper-button-next,.swiper-rtl .swiper-button-prev{ right:var(--swiper-navigation-sides-offset,10px); left:auto } .swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{ content:'next' } .swiper-pagination{ position:absolute; text-align:center; transition:.3s opacity; transform:translate3d(0,0,0); z-index:10 } .swiper-pagination.swiper-pagination-hidden{ opacity:0 } .swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{ display:none!important } .swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{ bottom:var(--swiper-pagination-bottom,8px); top:var(--swiper-pagination-top,auto); left:0; width:100% } .swiper-pagination-bullets-dynamic{ overflow:hidden; font-size:0 } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet{ transform:scale(.33); position:relative } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{ transform:scale(1) } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{ transform:scale(1) } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{ transform:scale(.66) } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{ transform:scale(.33) } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{ transform:scale(.66) } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{ transform:scale(.33) } .swiper-pagination-bullet{ width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px)); height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px)); display:inline-block; border-radius:var(--swiper-pagination-bullet-border-radius,50%); background:var(--swiper-pagination-bullet-inactive-color,#000); opacity:var(--swiper-pagination-bullet-inactive-opacity, .2) } button.swiper-pagination-bullet{ border:none; margin:0; padding:0; box-shadow:none; -webkit-appearance:none; -moz-appearance:none; appearance:none } .swiper-pagination-clickable .swiper-pagination-bullet{ cursor:pointer } .swiper-pagination-bullet:only-child{ display:none!important } .swiper-pagination-bullet-active{ opacity:var(--swiper-pagination-bullet-opacity, 1); background:var(--swiper-pagination-color,var(--swiper-theme-color)) } .swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{ right:var(--swiper-pagination-right,8px); left:var(--swiper-pagination-left,auto); top:50%; transform:translate3d(0px,-50%,0) } .swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{ margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0; display:block } .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{ top:50%; transform:translateY(-50%); width:8px } .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{ display:inline-block; transition:.2s transform,.2s top } .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{ margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px) } .swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{ left:50%; transform:translateX(-50%); white-space:nowrap } .swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{ transition:.2s transform,.2s left } .swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{ transition:.2s transform,.2s right } .swiper-pagination-fraction{ color:var(--swiper-pagination-fraction-color,inherit) } .swiper-pagination-progressbar{ background:var(--swiper-pagination-progressbar-bg-color,rgba(0,0,0,.25)); position:absolute } .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{ background:var(--swiper-pagination-color,var(--swiper-theme-color)); position:absolute; left:0; top:0; width:100%; height:100%; transform:scale(0); transform-origin:left top } .swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{ transform-origin:right top } .swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{ width:100%; height:var(--swiper-pagination-progressbar-size,4px); left:0; top:0 } .swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-vertical>.swiper-pagination-progressbar{ width:var(--swiper-pagination-progressbar-size,4px); height:100%; left:0; top:0 } .swiper-pagination-lock{ display:none } .swiper-scrollbar{ border-radius:var(--swiper-scrollbar-border-radius,10px); position:relative; touch-action:none; background:var(--swiper-scrollbar-bg-color,rgba(0,0,0,.1)) } .swiper-scrollbar-disabled>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-disabled{ display:none!important } .swiper-horizontal>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-horizontal{ position:absolute; left:var(--swiper-scrollbar-sides-offset,1%); bottom:var(--swiper-scrollbar-bottom,4px); top:var(--swiper-scrollbar-top,auto); z-index:50; height:var(--swiper-scrollbar-size,4px); width:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%)) } .swiper-scrollbar.swiper-scrollbar-vertical,.swiper-vertical>.swiper-scrollbar{ position:absolute; left:var(--swiper-scrollbar-left,auto); right:var(--swiper-scrollbar-right,4px); top:var(--swiper-scrollbar-sides-offset,1%); z-index:50; width:var(--swiper-scrollbar-size,4px); height:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%)) } .swiper-scrollbar-drag{ height:100%; width:100%; position:relative; background:var(--swiper-scrollbar-drag-bg-color,rgba(0,0,0,.5)); border-radius:var(--swiper-scrollbar-border-radius,10px); left:0; top:0 } .swiper-scrollbar-cursor-drag{ cursor:move } .swiper-scrollbar-lock{ display:none } .swiper-zoom-container{ width:100%; height:100%; display:flex; justify-content:center; align-items:center; text-align:center } .swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{ max-width:100%; max-height:100%; -o-object-fit:contain; object-fit:contain } .swiper-slide-zoomed{ cursor:move; touch-action:none } .swiper .swiper-notification{ position:absolute; left:0; top:0; pointer-events:none; opacity:0; z-index:-1000 } .swiper-free-mode>.swiper-wrapper{ transition-timing-function:ease-out; margin:0 auto } .swiper-grid>.swiper-wrapper{ flex-wrap:wrap } .swiper-grid-column>.swiper-wrapper{ flex-wrap:wrap; flex-direction:column } .swiper-fade.swiper-free-mode .swiper-slide{ transition-timing-function:ease-out } .swiper-fade .swiper-slide{ pointer-events:none; transition-property:opacity } .swiper-fade .swiper-slide .swiper-slide{ pointer-events:none } .swiper-fade .swiper-slide-active{ pointer-events:auto } .swiper-fade .swiper-slide-active .swiper-slide-active{ pointer-events:auto } .swiper-cube{ overflow:visible } .swiper-cube .swiper-slide{ pointer-events:none; backface-visibility:hidden; z-index:1; visibility:hidden; transform-origin:0 0; width:100%; height:100% } .swiper-cube .swiper-slide .swiper-slide{ pointer-events:none } .swiper-cube.swiper-rtl .swiper-slide{ transform-origin:100% 0 } .swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-active .swiper-slide-active{ pointer-events:auto } .swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-next,.swiper-cube .swiper-slide-prev{ pointer-events:auto; visibility:visible } .swiper-cube .swiper-cube-shadow{ position:absolute; left:0; bottom:0px; width:100%; height:100%; opacity:.6; z-index:0 } .swiper-cube .swiper-cube-shadow:before{ content:''; background:#000; position:absolute; left:0; top:0; bottom:0; right:0; filter:blur(50px) } .swiper-cube .swiper-slide-next+.swiper-slide{ pointer-events:auto; visibility:visible } .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top{ z-index:0; backface-visibility:hidden } .swiper-flip{ overflow:visible } .swiper-flip .swiper-slide{ pointer-events:none; backface-visibility:hidden; z-index:1 } .swiper-flip .swiper-slide .swiper-slide{ pointer-events:none } .swiper-flip .swiper-slide-active,.swiper-flip .swiper-slide-active .swiper-slide-active{ pointer-events:auto } .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top{ z-index:0; backface-visibility:hidden } .swiper-creative .swiper-slide{ backface-visibility:hidden; overflow:hidden; transition-property:transform,opacity,height } .swiper-cards{ overflow:visible } .swiper-cards .swiper-slide{ transform-origin:center bottom; backface-visibility:hidden; overflow:hidden } /** * Skipped minification because the original files appears to be already minified. * Original file: /npm/mmenu-light@3.2.2/dist/mmenu-light.css * * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files */ /*! * Mmenu Light * mmenujs.com/mmenu-light * * Copyright (c) Fred Heusschen * www.frebsite.nl * * License: CC-BY-4.0 * http://creativecommons.org/licenses/by/4.0/ */ :root{ --mm-ocd-width:80%; --mm-ocd-min-width:200px; --mm-ocd-max-width:440px } body.mm-ocd-opened{ overflow-y:hidden; overscroll-behavior:none } .mm-ocd{ position:fixed; top:0; right:0; bottom:100%; left:0; z-index:9999; overflow:hidden; overscroll-behavior:contain; background:rgba(0,0,0,0); transition-property:bottom,background-color; transition-duration:0s,.3s; transition-timing-function:ease; transition-delay:.45s,.15s } .mm-ocd--open{ bottom:0; background:rgba(0,0,0,.25); transition-delay:0s } .mm-ocd__content{ position:absolute; top:0; bottom:0; z-index:2; width:var(--mm-ocd-width); min-width:var(--mm-ocd-min-width); max-width:var(--mm-ocd-max-width); background:#fff; transition-property:transform; transition-duration:.3s; transition-timing-function:ease } .mm-ocd--left .mm-ocd__content{ left:0; transform:translate3d(-100%,0,0) } .mm-ocd--right .mm-ocd__content{ right:0; transform:translate3d(100%,0,0) } .mm-ocd--open .mm-ocd__content{ transform:translate3d(0,0,0) } .mm-ocd__backdrop{ position:absolute; top:0; bottom:0; z-index:3; width:clamp(calc(100% - var(--mm-ocd-max-width)),calc(100% - var(--mm-ocd-width)),calc(100% - var(--mm-ocd-min-width))); background:rgba(3,2,1,0) } .mm-ocd--left .mm-ocd__backdrop{ right:0 } .mm-ocd--right .mm-ocd__backdrop{ left:0 } .mm-spn,.mm-spn a,.mm-spn li,.mm-spn span,.mm-spn ul{ display:block; padding:0; margin:0; box-sizing:border-box } :root{ --mm-spn-item-height:50px; --mm-spn-item-indent:20px; --mm-spn-line-height:24px; --mm-spn-panel-offset:30% } .mm-spn{ width:100%; height:100%; -webkit-tap-highlight-color:transparent; -webkit-overflow-scrolling:touch; overflow:hidden; clip-path:inset(0 0 0 0); transform:translateX(0) } .mm-spn ul{ -webkit-overflow-scrolling:touch; position:fixed; top:0; left:100%; bottom:0; z-index:2; width:calc(100% + var(--mm-spn-panel-offset)); padding-right:var(--mm-spn-panel-offset); line-height:var(--mm-spn-line-height); overflow:visible; overflow-y:auto; background:inherit; transition:left .3s ease 0s; cursor:default } .mm-spn ul:after{ content:""; display:block; height:var(--mm-spn-item-height) } .mm-spn>ul{ left:0 } .mm-spn ul.mm-spn--open{ left:0 } .mm-spn ul.mm-spn--parent{ left:calc(-1 * var(--mm-spn-panel-offset)); overflow:visible } .mm-spn li{ position:relative; background:inherit; cursor:pointer } .mm-spn li:before{ content:""; display:block; position:absolute; top:calc(var(--mm-spn-item-height)/ 2); right:calc(var(--mm-spn-item-height)/ 2); z-index:0; width:10px; height:10px; border-top:2px solid; border-right:2px solid; transform:rotate(45deg) translate(0,-50%); opacity:.4 } .mm-spn li:after{ content:""; display:block; margin-left:var(--mm-spn-item-indent); border-top:1px solid; opacity:.15 } .mm-spn a,.mm-spn span{ position:relative; z-index:1; padding:calc((var(--mm-spn-item-height) - var(--mm-spn-line-height))/ 2) var(--mm-spn-item-indent) } .mm-spn a{ background:inherit; color:inherit; text-decoration:none } .mm-spn a:not(:last-child){ width:calc(100% - var(--mm-spn-item-height)) } .mm-spn a:not(:last-child):after{ content:""; display:block; position:absolute; top:0; right:0; bottom:0; border-right:1px solid; opacity:.15 } .mm-spn span{ background:0 0 } .mm-spn.mm-spn--navbar{ cursor:pointer } .mm-spn.mm-spn--navbar:before{ content:""; display:block; position:absolute; top:calc(var(--mm-spn-item-height)/ 2); left:var(--mm-spn-item-indent); width:10px; height:10px; margin-top:2px; border-top:2px solid; border-left:2px solid; transform:rotate(-45deg) translate(50%,-50%); opacity:.4 } .mm-spn.mm-spn--navbar.mm-spn--main{ cursor:default } .mm-spn.mm-spn--navbar.mm-spn--main:before{ content:none; display:none } .mm-spn.mm-spn--navbar:after{ content:attr(data-mm-spn-title); display:block; position:absolute; top:0; left:0; right:0; height:var(--mm-spn-item-height); padding:0 calc(var(--mm-spn-item-indent) * 2); line-height:var(--mm-spn-item-height); opacity:.4; text-align:center; overflow:hidden; white-space:nowrap; text-overflow:ellipsis } .mm-spn.mm-spn--navbar.mm-spn--main:after{ padding-left:var(--mm-spn-item-indent) } .mm-spn.mm-spn--navbar ul{ top:calc(var(--mm-spn-item-height) + 1px) } .mm-spn.mm-spn--navbar ul:before{ content:""; display:block; position:fixed; top:inherit; z-index:2; width:100%; border-top:1px solid currentColor; opacity:.15 } .mm-spn.mm-spn--light{ color:#444; background:#f3f3f3 } .mm-spn.mm-spn--dark{ color:#ddd; background:#333 } .mm-spn.mm-spn--vertical{ overflow-y:auto } .mm-spn.mm-spn--vertical ul{ width:100%; padding-right:0; position:static } .mm-spn.mm-spn--vertical ul ul{ display:none; padding-left:var(--mm-spn-item-indent) } .mm-spn.mm-spn--vertical ul ul:after{ height:calc(var(--mm-spn-item-height)/ 2) } .mm-spn.mm-spn--vertical ul.mm-spn--open{ display:block } .mm-spn.mm-spn--vertical li.mm-spn--open:before{ transform:rotate(135deg) translate(-50%,0) } .mm-spn.mm-spn--vertical ul ul li:last-child:after{ content:none; display:none } /*! PhotoSwipe main CSS by Dmytro Semenov | photoswipe.com */ .pswp { --pswp-bg: #000; --pswp-placeholder-bg: #222; --pswp-root-z-index: 100000; --pswp-preloader-color: rgba(79, 79, 79, 0.4); --pswp-preloader-color-secondary: rgba(255, 255, 255, 0.9); /* defined via js: --pswp-transition-duration: 333ms; */ --pswp-icon-color: #fff; --pswp-icon-color-secondary: #4f4f4f; --pswp-icon-stroke-color: #4f4f4f; --pswp-icon-stroke-width: 2px; --pswp-error-text-color: var(--pswp-icon-color); } /* Styles for basic PhotoSwipe (pswp) functionality (sliding area, open/close transitions) */ .pswp { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: var(--pswp-root-z-index); display: none; touch-action: none; outline: 0; opacity: 0.003; contain: layout style size; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } /* Prevents focus outline on the root element, (it may be focused initially) */ .pswp:focus { outline: 0; } .pswp * { box-sizing: border-box; } .pswp img { max-width: none; } .pswp--open { display: block; } .pswp, .pswp__bg { transform: translateZ(0); will-change: opacity; } .pswp__bg { opacity: 0.005; background: var(--pswp-bg); } .pswp, .pswp__scroll-wrap { overflow: hidden; } .pswp__scroll-wrap, .pswp__bg, .pswp__container, .pswp__item, .pswp__content, .pswp__img, .pswp__zoom-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .pswp__img, .pswp__zoom-wrap { width: auto; height: auto; } .pswp--click-to-zoom.pswp--zoom-allowed .pswp__img { cursor: zoom-in; } .pswp--click-to-zoom.pswp--zoomed-in .pswp__img { cursor: move; cursor: grab; } .pswp--click-to-zoom.pswp--zoomed-in .pswp__img:active { cursor: grabbing; } /* :active to override grabbing cursor */ .pswp--no-mouse-drag.pswp--zoomed-in .pswp__img, .pswp--no-mouse-drag.pswp--zoomed-in .pswp__img:active, .pswp__img { cursor: zoom-out; } /* Prevent selection and tap highlights */ .pswp__container, .pswp__img, .pswp__button, .pswp__counter { -webkit-user-select: none; -moz-user-select: none; user-select: none; } .pswp__item { /* z-index for fade transition */ z-index: 1; overflow: hidden; } .pswp__hidden { display: none !important; } /* Allow to click through pswp__content element, but not its children */ .pswp__content { pointer-events: none; } .pswp__content > * { pointer-events: auto; } /* PhotoSwipe UI */ /* Error message appears when image is not loaded (JS option errorMsg controls markup) */ .pswp__error-msg-container { display: grid; } .pswp__error-msg { margin: auto; font-size: 1em; line-height: 1; color: var(--pswp-error-text-color); } /* class pswp__hide-on-close is applied to elements that should hide (for example fade out) when PhotoSwipe is closed and show (for example fade in) when PhotoSwipe is opened */ .pswp .pswp__hide-on-close { opacity: 0.005; will-change: opacity; transition: opacity var(--pswp-transition-duration) cubic-bezier(0.4, 0, 0.22, 1); z-index: 10; /* always overlap slide content */ pointer-events: none; /* hidden elements should not be clickable */ } /* class pswp--ui-visible is added when opening or closing transition starts */ .pswp--ui-visible .pswp__hide-on-close { opacity: 1; pointer-events: auto; } /*