@charset "UTF-8"; /*** RTL websites ***/ html { direction: rtl; } /*! * Bootstrap v5.0.2 (https://getbootstrap.com/) * Copyright 2011-2021 The Bootstrap Authors * Copyright 2011-2021 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) */ :root { --bs-blue: #0d6efd; --bs-indigo: #6610f2; --bs-purple: #6f42c1; --bs-pink: #d63384; --bs-red: #dc3545; --bs-orange: #fd7e14; --bs-yellow: #ffc107; --bs-green: #198754; --bs-teal: #20c997; --bs-cyan: #0dcaf0; --bs-white: #fff; --bs-gray: #6c757d; --bs-gray-dark: #343a40; --bs-primary: #0d6efd; --bs-secondary: #6c757d; --bs-success: #198754; --bs-info: #0dcaf0; --bs-warning: #ffc107; --bs-danger: #dc3545; --bs-light: #f8f9fa; --bs-dark: #212529; --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)); } *, *::before, *::after { box-sizing: border-box; } @media (prefers-reduced-motion: no-preference) { :root { scroll-behavior: smooth; } } body { margin: 0; font-family: var(--bs-font-sans-serif); font-size: 1rem; font-weight: 400; line-height: 1.5; color: #212529; background-color: #fff; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } hr { margin: 1rem 0; color: inherit; background-color: currentColor; border: 0; opacity: 0.25; } hr:not([size]) { height: 1px; } h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 { margin-top: 0; margin-bottom: 0.5rem; font-weight: 500; line-height: 1.2; } h1, .h1 { font-size: calc(1.375rem + 1.5vw); } @media (min-width: 1200px) { h1, .h1 { font-size: 2.5rem; } } h2, .h2 { font-size: calc(1.325rem + 0.9vw); } @media (min-width: 1200px) { h2, .h2 { font-size: 2rem; } } h3, .h3 { font-size: calc(1.3rem + 0.6vw); } @media (min-width: 1200px) { h3, .h3 { font-size: 1.75rem; } } h4, .h4 { font-size: calc(1.275rem + 0.3vw); } @media (min-width: 1200px) { h4, .h4 { font-size: 1.5rem; } } h5, .h5 { font-size: 1.25rem; } h6, .h6 { font-size: 1rem; } p { margin-top: 0; margin-bottom: 1rem; } abbr[title], abbr[data-bs-original-title] { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; cursor: help; -webkit-text-decoration-skip-ink: none; text-decoration-skip-ink: none; } address { margin-bottom: 1rem; font-style: normal; line-height: inherit; } ol, ul { padding-left: 2rem; } ol, ul, dl { margin-top: 0; margin-bottom: 1rem; } ol ol, ul ul, ol ul, ul ol { margin-bottom: 0; } dt { font-weight: 700; } dd { margin-bottom: 0.5rem; margin-left: 0; } blockquote { margin: 0 0 1rem; } b, strong { font-weight: bolder; } small, .small { font-size: 0.875em; } mark, .mark { padding: 0.2em; background-color: #fcf8e3; } sub, sup { position: relative; font-size: 0.75em; line-height: 0; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } a { color: #0d6efd; text-decoration: underline; } a:hover { color: rgb(10.4, 88, 202.4); } a:not([href]):not([class]), a:not([href]):not([class]):hover { color: inherit; text-decoration: none; } pre, code, kbd, samp { font-family: var(--bs-font-monospace); font-size: 1em; direction: ltr /* rtl:ignore */; unicode-bidi: bidi-override; } pre { display: block; margin-top: 0; margin-bottom: 1rem; overflow: auto; font-size: 0.875em; } pre code { font-size: inherit; color: inherit; word-break: normal; } code { font-size: 0.875em; color: #d63384; word-wrap: break-word; } a > code { color: inherit; } kbd { padding: 0.2rem 0.4rem; font-size: 0.875em; color: #fff; background-color: #212529; border-radius: 0.2rem; } kbd kbd { padding: 0; font-size: 1em; font-weight: 700; } figure { margin: 0 0 1rem; } img, svg { vertical-align: middle; } table { caption-side: bottom; border-collapse: collapse; } caption { padding-top: 0.5rem; padding-bottom: 0.5rem; color: #6c757d; text-align: left; } th { text-align: inherit; text-align: -webkit-match-parent; } thead, tbody, tfoot, tr, td, th { border-color: inherit; border-style: solid; border-width: 0; } label { display: inline-block; } button { border-radius: 0; } button:focus:not(:focus-visible) { outline: 0; } input, .custom-select, button, select, optgroup, textarea { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; } button, select { text-transform: none; } [role=button] { cursor: pointer; } select { word-wrap: normal; } select:disabled { opacity: 1; } [list]::-webkit-calendar-picker-indicator { display: none; } button, [type=button], [type=reset], [type=submit] { -webkit-appearance: button; } button:not(:disabled), [type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled) { cursor: pointer; } ::-moz-focus-inner { padding: 0; border-style: none; } textarea { resize: vertical; } fieldset { min-width: 0; padding: 0; margin: 0; border: 0; } legend { float: left; width: 100%; padding: 0; margin-bottom: 0.5rem; font-size: calc(1.275rem + 0.3vw); } @media (min-width: 1200px) { legend { font-size: 1.5rem; } } legend { line-height: inherit; } legend + * { clear: left; } ::-webkit-datetime-edit-fields-wrapper, ::-webkit-datetime-edit-text, ::-webkit-datetime-edit-minute, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-year-field { padding: 0; } ::-webkit-inner-spin-button { height: auto; } [type=search] { outline-offset: -2px; -webkit-appearance: textfield; } /* rtl:raw: [type="tel"], [type="url"], [type="email"], [type="number"] { direction: ltr; } */ ::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-color-swatch-wrapper { padding: 0; } ::file-selector-button { font: inherit; } ::-webkit-file-upload-button { font: inherit; -webkit-appearance: button; } output { display: inline-block; } iframe, .blog-detail-left .posted-media .post__pic .media-wrapper img { border: 0; } summary { display: list-item; cursor: pointer; } progress { vertical-align: baseline; } [hidden] { display: none !important; } .lead { font-size: 1.25rem; font-weight: 300; } .display-1 { font-size: calc(1.625rem + 4.5vw); } @media (min-width: 1200px) { .display-1 { font-size: 5rem; } } .display-1 { font-weight: 300; line-height: 1.2; } .display-2 { font-size: calc(1.575rem + 3.9vw); } @media (min-width: 1200px) { .display-2 { font-size: 4.5rem; } } .display-2 { font-weight: 300; line-height: 1.2; } .display-3 { font-size: calc(1.525rem + 3.3vw); } @media (min-width: 1200px) { .display-3 { font-size: 4rem; } } .display-3 { font-weight: 300; line-height: 1.2; } .display-4 { font-size: calc(1.475rem + 2.7vw); } @media (min-width: 1200px) { .display-4 { font-size: 3.5rem; } } .display-4 { font-weight: 300; line-height: 1.2; } .display-5 { font-size: calc(1.425rem + 2.1vw); } @media (min-width: 1200px) { .display-5 { font-size: 3rem; } } .display-5 { font-weight: 300; line-height: 1.2; } .display-6 { font-size: calc(1.375rem + 1.5vw); } @media (min-width: 1200px) { .display-6 { font-size: 2.5rem; } } .display-6 { font-weight: 300; line-height: 1.2; } .list-unstyled { padding-left: 0; list-style: none; } .list-inline { padding-left: 0; list-style: none; } .list-inline-item { display: inline-block; } .list-inline-item:not(:last-child) { margin-right: 0.5rem; } .initialism { font-size: 0.875em; text-transform: uppercase; } .blockquote { margin-bottom: 1rem; font-size: 1.25rem; } .blockquote > :last-child { margin-bottom: 0; } .blockquote-footer { margin-top: -1rem; margin-bottom: 1rem; font-size: 0.875em; color: #6c757d; } .blockquote-footer::before { content: "— "; } .img-fluid { max-width: 100%; height: auto; } .img-thumbnail { padding: 0.25rem; background-color: #fff; border: 1px solid #dee2e6; border-radius: 0.25rem; max-width: 100%; height: auto; } .figure { display: inline-block; } .figure-img { margin-bottom: 0.5rem; line-height: 1; } .figure-caption { font-size: 0.875em; color: #6c757d; } .container, .container-fluid, .container-xxl, .container-xl, .container-lg, .container-md, .container-sm { width: 100%; padding-right: var(--bs-gutter-x, 0.75rem); padding-left: var(--bs-gutter-x, 0.75rem); margin-right: auto; margin-left: auto; } @media (min-width: 576px) { .container-sm, .container { max-width: 540px; } } @media (min-width: 768px) { .container-md, .container-sm, .container { max-width: 720px; } } @media (min-width: 992px) { .container-lg, .container-md, .container-sm, .container { max-width: 960px; } } @media (min-width: 1200px) { .container-xl, .container-lg, .container-md, .container-sm, .container { max-width: 1140px; } } @media (min-width: 1400px) { .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container { max-width: 1320px; } } .row { --bs-gutter-x: 1.5rem; --bs-gutter-y: 0; display: flex; flex-wrap: wrap; margin-top: calc(var(--bs-gutter-y) * -1); margin-right: calc(var(--bs-gutter-x) * -0.5); margin-left: calc(var(--bs-gutter-x) * -0.5); } .row > * { flex-shrink: 0; width: 100%; max-width: 100%; padding-right: calc(var(--bs-gutter-x) * 0.5); padding-left: calc(var(--bs-gutter-x) * 0.5); margin-top: var(--bs-gutter-y); } .col { flex: 1 0 0%; } .row-cols-auto > * { flex: 0 0 auto; width: auto; } .row-cols-1 > * { flex: 0 0 auto; width: 100%; } .row-cols-2 > * { flex: 0 0 auto; width: 50%; } .row-cols-3 > * { flex: 0 0 auto; width: 33.3333333333%; } .row-cols-4 > * { flex: 0 0 auto; width: 25%; } .row-cols-5 > * { flex: 0 0 auto; width: 20%; } .row-cols-6 > * { flex: 0 0 auto; width: 16.6666666667%; } @media (min-width: 576px) { .col-sm { flex: 1 0 0%; } .row-cols-sm-auto > * { flex: 0 0 auto; width: auto; } .row-cols-sm-1 > * { flex: 0 0 auto; width: 100%; } .row-cols-sm-2 > * { flex: 0 0 auto; width: 50%; } .row-cols-sm-3 > * { flex: 0 0 auto; width: 33.3333333333%; } .row-cols-sm-4 > * { flex: 0 0 auto; width: 25%; } .row-cols-sm-5 > * { flex: 0 0 auto; width: 20%; } .row-cols-sm-6 > * { flex: 0 0 auto; width: 16.6666666667%; } } @media (min-width: 768px) { .col-md { flex: 1 0 0%; } .row-cols-md-auto > * { flex: 0 0 auto; width: auto; } .row-cols-md-1 > * { flex: 0 0 auto; width: 100%; } .row-cols-md-2 > * { flex: 0 0 auto; width: 50%; } .row-cols-md-3 > * { flex: 0 0 auto; width: 33.3333333333%; } .row-cols-md-4 > * { flex: 0 0 auto; width: 25%; } .row-cols-md-5 > * { flex: 0 0 auto; width: 20%; } .row-cols-md-6 > * { flex: 0 0 auto; width: 16.6666666667%; } } @media (min-width: 992px) { .col-lg { flex: 1 0 0%; } .row-cols-lg-auto > * { flex: 0 0 auto; width: auto; } .row-cols-lg-1 > * { flex: 0 0 auto; width: 100%; } .row-cols-lg-2 > * { flex: 0 0 auto; width: 50%; } .row-cols-lg-3 > * { flex: 0 0 auto; width: 33.3333333333%; } .row-cols-lg-4 > * { flex: 0 0 auto; width: 25%; } .row-cols-lg-5 > * { flex: 0 0 auto; width: 20%; } .row-cols-lg-6 > * { flex: 0 0 auto; width: 16.6666666667%; } } @media (min-width: 1200px) { .col-xl { flex: 1 0 0%; } .row-cols-xl-auto > * { flex: 0 0 auto; width: auto; } .row-cols-xl-1 > * { flex: 0 0 auto; width: 100%; } .row-cols-xl-2 > * { flex: 0 0 auto; width: 50%; } .row-cols-xl-3 > * { flex: 0 0 auto; width: 33.3333333333%; } .row-cols-xl-4 > * { flex: 0 0 auto; width: 25%; } .row-cols-xl-5 > * { flex: 0 0 auto; width: 20%; } .row-cols-xl-6 > * { flex: 0 0 auto; width: 16.6666666667%; } } @media (min-width: 1400px) { .col-xxl { flex: 1 0 0%; } .row-cols-xxl-auto > * { flex: 0 0 auto; width: auto; } .row-cols-xxl-1 > * { flex: 0 0 auto; width: 100%; } .row-cols-xxl-2 > * { flex: 0 0 auto; width: 50%; } .row-cols-xxl-3 > * { flex: 0 0 auto; width: 33.3333333333%; } .row-cols-xxl-4 > * { flex: 0 0 auto; width: 25%; } .row-cols-xxl-5 > * { flex: 0 0 auto; width: 20%; } .row-cols-xxl-6 > * { flex: 0 0 auto; width: 16.6666666667%; } } .col-auto { flex: 0 0 auto; width: auto; } .col-1 { flex: 0 0 auto; width: 8.33333333%; } .col-2 { flex: 0 0 auto; width: 16.66666667%; } .col-3 { flex: 0 0 auto; width: 25%; } .col-4 { flex: 0 0 auto; width: 33.33333333%; } .col-5 { flex: 0 0 auto; width: 41.66666667%; } .col-6 { flex: 0 0 auto; width: 50%; } .col-7 { flex: 0 0 auto; width: 58.33333333%; } .col-8 { flex: 0 0 auto; width: 66.66666667%; } .col-9 { flex: 0 0 auto; width: 75%; } .col-10 { flex: 0 0 auto; width: 83.33333333%; } .col-11 { flex: 0 0 auto; width: 91.66666667%; } .col-12 { flex: 0 0 auto; width: 100%; } .offset-1 { margin-left: 8.33333333%; } .offset-2 { margin-left: 16.66666667%; } .offset-3 { margin-left: 25%; } .offset-4 { margin-left: 33.33333333%; } .offset-5 { margin-left: 41.66666667%; } .offset-6 { margin-left: 50%; } .offset-7 { margin-left: 58.33333333%; } .offset-8 { margin-left: 66.66666667%; } .offset-9 { margin-left: 75%; } .offset-10 { margin-left: 83.33333333%; } .offset-11 { margin-left: 91.66666667%; } .g-0, .gx-0 { --bs-gutter-x: 0; } .g-0, .gy-0 { --bs-gutter-y: 0; } .g-1, .gx-1 { --bs-gutter-x: 0.25rem; } .g-1, .gy-1 { --bs-gutter-y: 0.25rem; } .g-2, .gx-2 { --bs-gutter-x: 0.5rem; } .g-2, .gy-2 { --bs-gutter-y: 0.5rem; } .g-3, .gx-3 { --bs-gutter-x: 1rem; } .g-3, .gy-3 { --bs-gutter-y: 1rem; } .g-4, .gx-4 { --bs-gutter-x: 1.5rem; } .g-4, .gy-4 { --bs-gutter-y: 1.5rem; } .g-5, .gx-5 { --bs-gutter-x: 3rem; } .g-5, .gy-5 { --bs-gutter-y: 3rem; } @media (min-width: 576px) { .col-sm-auto { flex: 0 0 auto; width: auto; } .col-sm-1 { flex: 0 0 auto; width: 8.33333333%; } .col-sm-2 { flex: 0 0 auto; width: 16.66666667%; } .col-sm-3 { flex: 0 0 auto; width: 25%; } .col-sm-4 { flex: 0 0 auto; width: 33.33333333%; } .col-sm-5 { flex: 0 0 auto; width: 41.66666667%; } .col-sm-6 { flex: 0 0 auto; width: 50%; } .col-sm-7 { flex: 0 0 auto; width: 58.33333333%; } .col-sm-8 { flex: 0 0 auto; width: 66.66666667%; } .col-sm-9 { flex: 0 0 auto; width: 75%; } .col-sm-10 { flex: 0 0 auto; width: 83.33333333%; } .col-sm-11 { flex: 0 0 auto; width: 91.66666667%; } .col-sm-12 { flex: 0 0 auto; width: 100%; } .offset-sm-0 { margin-left: 0; } .offset-sm-1 { margin-left: 8.33333333%; } .offset-sm-2 { margin-left: 16.66666667%; } .offset-sm-3 { margin-left: 25%; } .offset-sm-4 { margin-left: 33.33333333%; } .offset-sm-5 { margin-left: 41.66666667%; } .offset-sm-6 { margin-left: 50%; } .offset-sm-7 { margin-left: 58.33333333%; } .offset-sm-8 { margin-left: 66.66666667%; } .offset-sm-9 { margin-left: 75%; } .offset-sm-10 { margin-left: 83.33333333%; } .offset-sm-11 { margin-left: 91.66666667%; } .g-sm-0, .gx-sm-0 { --bs-gutter-x: 0; } .g-sm-0, .gy-sm-0 { --bs-gutter-y: 0; } .g-sm-1, .gx-sm-1 { --bs-gutter-x: 0.25rem; } .g-sm-1, .gy-sm-1 { --bs-gutter-y: 0.25rem; } .g-sm-2, .gx-sm-2 { --bs-gutter-x: 0.5rem; } .g-sm-2, .gy-sm-2 { --bs-gutter-y: 0.5rem; } .g-sm-3, .gx-sm-3 { --bs-gutter-x: 1rem; } .g-sm-3, .gy-sm-3 { --bs-gutter-y: 1rem; } .g-sm-4, .gx-sm-4 { --bs-gutter-x: 1.5rem; } .g-sm-4, .gy-sm-4 { --bs-gutter-y: 1.5rem; } .g-sm-5, .gx-sm-5 { --bs-gutter-x: 3rem; } .g-sm-5, .gy-sm-5 { --bs-gutter-y: 3rem; } } @media (min-width: 768px) { .col-md-auto { flex: 0 0 auto; width: auto; } .col-md-1 { flex: 0 0 auto; width: 8.33333333%; } .col-md-2 { flex: 0 0 auto; width: 16.66666667%; } .col-md-3 { flex: 0 0 auto; width: 25%; } .col-md-4 { flex: 0 0 auto; width: 33.33333333%; } .col-md-5 { flex: 0 0 auto; width: 41.66666667%; } .col-md-6 { flex: 0 0 auto; width: 50%; } .col-md-7 { flex: 0 0 auto; width: 58.33333333%; } .col-md-8 { flex: 0 0 auto; width: 66.66666667%; } .col-md-9 { flex: 0 0 auto; width: 75%; } .col-md-10 { flex: 0 0 auto; width: 83.33333333%; } .col-md-11 { flex: 0 0 auto; width: 91.66666667%; } .col-md-12 { flex: 0 0 auto; width: 100%; } .offset-md-0 { margin-left: 0; } .offset-md-1 { margin-left: 8.33333333%; } .offset-md-2 { margin-left: 16.66666667%; } .offset-md-3 { margin-left: 25%; } .offset-md-4 { margin-left: 33.33333333%; } .offset-md-5 { margin-left: 41.66666667%; } .offset-md-6 { margin-left: 50%; } .offset-md-7 { margin-left: 58.33333333%; } .offset-md-8 { margin-left: 66.66666667%; } .offset-md-9 { margin-left: 75%; } .offset-md-10 { margin-left: 83.33333333%; } .offset-md-11 { margin-left: 91.66666667%; } .g-md-0, .gx-md-0 { --bs-gutter-x: 0; } .g-md-0, .gy-md-0 { --bs-gutter-y: 0; } .g-md-1, .gx-md-1 { --bs-gutter-x: 0.25rem; } .g-md-1, .gy-md-1 { --bs-gutter-y: 0.25rem; } .g-md-2, .gx-md-2 { --bs-gutter-x: 0.5rem; } .g-md-2, .gy-md-2 { --bs-gutter-y: 0.5rem; } .g-md-3, .gx-md-3 { --bs-gutter-x: 1rem; } .g-md-3, .gy-md-3 { --bs-gutter-y: 1rem; } .g-md-4, .gx-md-4 { --bs-gutter-x: 1.5rem; } .g-md-4, .gy-md-4 { --bs-gutter-y: 1.5rem; } .g-md-5, .gx-md-5 { --bs-gutter-x: 3rem; } .g-md-5, .gy-md-5 { --bs-gutter-y: 3rem; } } @media (min-width: 992px) { .col-lg-auto { flex: 0 0 auto; width: auto; } .col-lg-1 { flex: 0 0 auto; width: 8.33333333%; } .col-lg-2 { flex: 0 0 auto; width: 16.66666667%; } .col-lg-3 { flex: 0 0 auto; width: 25%; } .col-lg-4 { flex: 0 0 auto; width: 33.33333333%; } .col-lg-5 { flex: 0 0 auto; width: 41.66666667%; } .col-lg-6 { flex: 0 0 auto; width: 50%; } .col-lg-7 { flex: 0 0 auto; width: 58.33333333%; } .col-lg-8 { flex: 0 0 auto; width: 66.66666667%; } .col-lg-9 { flex: 0 0 auto; width: 75%; } .col-lg-10 { flex: 0 0 auto; width: 83.33333333%; } .col-lg-11 { flex: 0 0 auto; width: 91.66666667%; } .col-lg-12 { flex: 0 0 auto; width: 100%; } .offset-lg-0 { margin-left: 0; } .offset-lg-1 { margin-left: 8.33333333%; } .offset-lg-2 { margin-left: 16.66666667%; } .offset-lg-3 { margin-left: 25%; } .offset-lg-4 { margin-left: 33.33333333%; } .offset-lg-5 { margin-left: 41.66666667%; } .offset-lg-6 { margin-left: 50%; } .offset-lg-7 { margin-left: 58.33333333%; } .offset-lg-8 { margin-left: 66.66666667%; } .offset-lg-9 { margin-left: 75%; } .offset-lg-10 { margin-left: 83.33333333%; } .offset-lg-11 { margin-left: 91.66666667%; } .g-lg-0, .gx-lg-0 { --bs-gutter-x: 0; } .g-lg-0, .gy-lg-0 { --bs-gutter-y: 0; } .g-lg-1, .gx-lg-1 { --bs-gutter-x: 0.25rem; } .g-lg-1, .gy-lg-1 { --bs-gutter-y: 0.25rem; } .g-lg-2, .gx-lg-2 { --bs-gutter-x: 0.5rem; } .g-lg-2, .gy-lg-2 { --bs-gutter-y: 0.5rem; } .g-lg-3, .gx-lg-3 { --bs-gutter-x: 1rem; } .g-lg-3, .gy-lg-3 { --bs-gutter-y: 1rem; } .g-lg-4, .gx-lg-4 { --bs-gutter-x: 1.5rem; } .g-lg-4, .gy-lg-4 { --bs-gutter-y: 1.5rem; } .g-lg-5, .gx-lg-5 { --bs-gutter-x: 3rem; } .g-lg-5, .gy-lg-5 { --bs-gutter-y: 3rem; } } @media (min-width: 1200px) { .col-xl-auto { flex: 0 0 auto; width: auto; } .col-xl-1 { flex: 0 0 auto; width: 8.33333333%; } .col-xl-2 { flex: 0 0 auto; width: 16.66666667%; } .col-xl-3 { flex: 0 0 auto; width: 25%; } .col-xl-4 { flex: 0 0 auto; width: 33.33333333%; } .col-xl-5 { flex: 0 0 auto; width: 41.66666667%; } .col-xl-6 { flex: 0 0 auto; width: 50%; } .col-xl-7 { flex: 0 0 auto; width: 58.33333333%; } .col-xl-8 { flex: 0 0 auto; width: 66.66666667%; } .col-xl-9 { flex: 0 0 auto; width: 75%; } .col-xl-10 { flex: 0 0 auto; width: 83.33333333%; } .col-xl-11 { flex: 0 0 auto; width: 91.66666667%; } .col-xl-12 { flex: 0 0 auto; width: 100%; } .offset-xl-0 { margin-left: 0; } .offset-xl-1 { margin-left: 8.33333333%; } .offset-xl-2 { margin-left: 16.66666667%; } .offset-xl-3 { margin-left: 25%; } .offset-xl-4 { margin-left: 33.33333333%; } .offset-xl-5 { margin-left: 41.66666667%; } .offset-xl-6 { margin-left: 50%; } .offset-xl-7 { margin-left: 58.33333333%; } .offset-xl-8 { margin-left: 66.66666667%; } .offset-xl-9 { margin-left: 75%; } .offset-xl-10 { margin-left: 83.33333333%; } .offset-xl-11 { margin-left: 91.66666667%; } .g-xl-0, .gx-xl-0 { --bs-gutter-x: 0; } .g-xl-0, .gy-xl-0 { --bs-gutter-y: 0; } .g-xl-1, .gx-xl-1 { --bs-gutter-x: 0.25rem; } .g-xl-1, .gy-xl-1 { --bs-gutter-y: 0.25rem; } .g-xl-2, .gx-xl-2 { --bs-gutter-x: 0.5rem; } .g-xl-2, .gy-xl-2 { --bs-gutter-y: 0.5rem; } .g-xl-3, .gx-xl-3 { --bs-gutter-x: 1rem; } .g-xl-3, .gy-xl-3 { --bs-gutter-y: 1rem; } .g-xl-4, .gx-xl-4 { --bs-gutter-x: 1.5rem; } .g-xl-4, .gy-xl-4 { --bs-gutter-y: 1.5rem; } .g-xl-5, .gx-xl-5 { --bs-gutter-x: 3rem; } .g-xl-5, .gy-xl-5 { --bs-gutter-y: 3rem; } } @media (min-width: 1400px) { .col-xxl-auto { flex: 0 0 auto; width: auto; } .col-xxl-1 { flex: 0 0 auto; width: 8.33333333%; } .col-xxl-2 { flex: 0 0 auto; width: 16.66666667%; } .col-xxl-3 { flex: 0 0 auto; width: 25%; } .col-xxl-4 { flex: 0 0 auto; width: 33.33333333%; } .col-xxl-5 { flex: 0 0 auto; width: 41.66666667%; } .col-xxl-6 { flex: 0 0 auto; width: 50%; } .col-xxl-7 { flex: 0 0 auto; width: 58.33333333%; } .col-xxl-8 { flex: 0 0 auto; width: 66.66666667%; } .col-xxl-9 { flex: 0 0 auto; width: 75%; } .col-xxl-10 { flex: 0 0 auto; width: 83.33333333%; } .col-xxl-11 { flex: 0 0 auto; width: 91.66666667%; } .col-xxl-12 { flex: 0 0 auto; width: 100%; } .offset-xxl-0 { margin-left: 0; } .offset-xxl-1 { margin-left: 8.33333333%; } .offset-xxl-2 { margin-left: 16.66666667%; } .offset-xxl-3 { margin-left: 25%; } .offset-xxl-4 { margin-left: 33.33333333%; } .offset-xxl-5 { margin-left: 41.66666667%; } .offset-xxl-6 { margin-left: 50%; } .offset-xxl-7 { margin-left: 58.33333333%; } .offset-xxl-8 { margin-left: 66.66666667%; } .offset-xxl-9 { margin-left: 75%; } .offset-xxl-10 { margin-left: 83.33333333%; } .offset-xxl-11 { margin-left: 91.66666667%; } .g-xxl-0, .gx-xxl-0 { --bs-gutter-x: 0; } .g-xxl-0, .gy-xxl-0 { --bs-gutter-y: 0; } .g-xxl-1, .gx-xxl-1 { --bs-gutter-x: 0.25rem; } .g-xxl-1, .gy-xxl-1 { --bs-gutter-y: 0.25rem; } .g-xxl-2, .gx-xxl-2 { --bs-gutter-x: 0.5rem; } .g-xxl-2, .gy-xxl-2 { --bs-gutter-y: 0.5rem; } .g-xxl-3, .gx-xxl-3 { --bs-gutter-x: 1rem; } .g-xxl-3, .gy-xxl-3 { --bs-gutter-y: 1rem; } .g-xxl-4, .gx-xxl-4 { --bs-gutter-x: 1.5rem; } .g-xxl-4, .gy-xxl-4 { --bs-gutter-y: 1.5rem; } .g-xxl-5, .gx-xxl-5 { --bs-gutter-x: 3rem; } .g-xxl-5, .gy-xxl-5 { --bs-gutter-y: 3rem; } } .table { --bs-table-bg: transparent; --bs-table-accent-bg: transparent; --bs-table-striped-color: #212529; --bs-table-striped-bg: rgba(0, 0, 0, 0.05); --bs-table-active-color: #212529; --bs-table-active-bg: rgba(0, 0, 0, 0.1); --bs-table-hover-color: #212529; --bs-table-hover-bg: rgba(0, 0, 0, 0.075); width: 100%; margin-bottom: 1rem; color: #212529; vertical-align: top; border-color: #dee2e6; } .table > :not(caption) > * > * { padding: 0.5rem 0.5rem; background-color: var(--bs-table-bg); border-bottom-width: 1px; box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg); } .table > tbody { vertical-align: inherit; } .table > thead { vertical-align: bottom; } .table > :not(:last-child) > :last-child > * { border-bottom-color: currentColor; } .caption-top { caption-side: top; } .table-sm > :not(caption) > * > * { padding: 0.25rem 0.25rem; } .table-bordered > :not(caption) > * { border-width: 1px 0; } .table-bordered > :not(caption) > * > * { border-width: 0 1px; } .table-borderless > :not(caption) > * > * { border-bottom-width: 0; } .table-striped > tbody > tr:nth-of-type(odd) { --bs-table-accent-bg: var(--bs-table-striped-bg); color: var(--bs-table-striped-color); } .table-active { --bs-table-accent-bg: var(--bs-table-active-bg); color: var(--bs-table-active-color); } .table-hover > tbody > tr:hover { --bs-table-accent-bg: var(--bs-table-hover-bg); color: var(--bs-table-hover-color); } .table-primary { --bs-table-bg: rgb(206.6, 226, 254.6); --bs-table-striped-bg: rgb(196.27, 214.7, 241.87); --bs-table-striped-color: #000; --bs-table-active-bg: rgb(185.94, 203.4, 229.14); --bs-table-active-color: #000; --bs-table-hover-bg: rgb(191.105, 209.05, 235.505); --bs-table-hover-color: #000; color: #000; border-color: rgb(185.94, 203.4, 229.14); } .table-secondary { --bs-table-bg: rgb(225.6, 227.4, 229); --bs-table-striped-bg: rgb(214.32, 216.03, 217.55); --bs-table-striped-color: #000; --bs-table-active-bg: rgb(203.04, 204.66, 206.1); --bs-table-active-color: #000; --bs-table-hover-bg: rgb(208.68, 210.345, 211.825); --bs-table-hover-color: #000; color: #000; border-color: rgb(203.04, 204.66, 206.1); } .table-success { --bs-table-bg: rgb(209, 231, 220.8); --bs-table-striped-bg: rgb(198.55, 219.45, 209.76); --bs-table-striped-color: #000; --bs-table-active-bg: rgb(188.1, 207.9, 198.72); --bs-table-active-color: #000; --bs-table-hover-bg: rgb(193.325, 213.675, 204.24); --bs-table-hover-color: #000; color: #000; border-color: rgb(188.1, 207.9, 198.72); } .table-info { --bs-table-bg: rgb(206.6, 244.4, 252); --bs-table-striped-bg: rgb(196.27, 232.18, 239.4); --bs-table-striped-color: #000; --bs-table-active-bg: rgb(185.94, 219.96, 226.8); --bs-table-active-color: #000; --bs-table-hover-bg: rgb(191.105, 226.07, 233.1); --bs-table-hover-color: #000; color: #000; border-color: rgb(185.94, 219.96, 226.8); } .table-warning { --bs-table-bg: rgb(255, 242.6, 205.4); --bs-table-striped-bg: rgb(242.25, 230.47, 195.13); --bs-table-striped-color: #000; --bs-table-active-bg: rgb(229.5, 218.34, 184.86); --bs-table-active-color: #000; --bs-table-hover-bg: rgb(235.875, 224.405, 189.995); --bs-table-hover-color: #000; color: #000; border-color: rgb(229.5, 218.34, 184.86); } .table-danger { --bs-table-bg: rgb(248, 214.6, 217.8); --bs-table-striped-bg: rgb(235.6, 203.87, 206.91); --bs-table-striped-color: #000; --bs-table-active-bg: rgb(223.2, 193.14, 196.02); --bs-table-active-color: #000; --bs-table-hover-bg: rgb(229.4, 198.505, 201.465); --bs-table-hover-color: #000; color: #000; border-color: rgb(223.2, 193.14, 196.02); } .table-light { --bs-table-bg: #f8f9fa; --bs-table-striped-bg: rgb(235.6, 236.55, 237.5); --bs-table-striped-color: #000; --bs-table-active-bg: rgb(223.2, 224.1, 225); --bs-table-active-color: #000; --bs-table-hover-bg: rgb(229.4, 230.325, 231.25); --bs-table-hover-color: #000; color: #000; border-color: rgb(223.2, 224.1, 225); } .table-dark { --bs-table-bg: #212529; --bs-table-striped-bg: rgb(44.1, 47.9, 51.7); --bs-table-striped-color: #fff; --bs-table-active-bg: rgb(55.2, 58.8, 62.4); --bs-table-active-color: #fff; --bs-table-hover-bg: rgb(49.65, 53.35, 57.05); --bs-table-hover-color: #fff; color: #fff; border-color: rgb(55.2, 58.8, 62.4); } .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; } @media (max-width: 575.98px) { .table-responsive-sm { overflow-x: auto; -webkit-overflow-scrolling: touch; } } @media (max-width: 767.98px) { .table-responsive-md { overflow-x: auto; -webkit-overflow-scrolling: touch; } } @media (max-width: 991.98px) { .table-responsive-lg { overflow-x: auto; -webkit-overflow-scrolling: touch; } } @media (max-width: 1199.98px) { .table-responsive-xl { overflow-x: auto; -webkit-overflow-scrolling: touch; } } @media (max-width: 1399.98px) { .table-responsive-xxl { overflow-x: auto; -webkit-overflow-scrolling: touch; } } .form-label { margin-bottom: 0.5rem; } .col-form-label { padding-top: calc(0.375rem + 1px); padding-bottom: calc(0.375rem + 1px); margin-bottom: 0; font-size: inherit; line-height: 1.5; } .col-form-label-lg { padding-top: calc(0.5rem + 1px); padding-bottom: calc(0.5rem + 1px); font-size: 1.25rem; } .col-form-label-sm { padding-top: calc(0.25rem + 1px); padding-bottom: calc(0.25rem + 1px); font-size: 0.875rem; } .form-text { margin-top: 0.25rem; font-size: 0.875em; color: #6c757d; } .form-control { display: block; width: 100%; padding: 0.375rem 0.75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #212529; background-color: #fff; background-clip: padding-box; border: 1px solid #ced4da; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0.25rem; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } @media (prefers-reduced-motion: reduce) { .form-control { transition: none; } } .form-control[type=file] { overflow: hidden; } .form-control[type=file]:not(:disabled):not([readonly]) { cursor: pointer; } .form-control:focus { color: #212529; background-color: #fff; border-color: rgb(134, 182.5, 254); outline: 0; box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); } .form-control::-webkit-date-and-time-value { height: 1.5em; } .form-control::-moz-placeholder { color: #6c757d; opacity: 1; } .form-control::placeholder { color: #6c757d; opacity: 1; } .form-control:disabled, .form-control[readonly] { background-color: #e9ecef; opacity: 1; } .form-control::file-selector-button { padding: 0.375rem 0.75rem; margin: -0.375rem -0.75rem; margin-inline-end: 0.75rem; color: #212529; background-color: #e9ecef; pointer-events: none; border-color: inherit; border-style: solid; border-width: 0; border-inline-end-width: 1px; border-radius: 0; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } @media (prefers-reduced-motion: reduce) { .form-control::file-selector-button { transition: none; } } .form-control:hover:not(:disabled):not([readonly])::file-selector-button { background-color: rgb(221.35, 224.2, 227.05); } .form-control::-webkit-file-upload-button { padding: 0.375rem 0.75rem; margin: -0.375rem -0.75rem; margin-inline-end: 0.75rem; color: #212529; background-color: #e9ecef; pointer-events: none; border-color: inherit; border-style: solid; border-width: 0; border-inline-end-width: 1px; border-radius: 0; -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } @media (prefers-reduced-motion: reduce) { .form-control::-webkit-file-upload-button { -webkit-transition: none; transition: none; } } .form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button { background-color: rgb(221.35, 224.2, 227.05); } .form-control-plaintext { display: block; width: 100%; padding: 0.375rem 0; margin-bottom: 0; line-height: 1.5; color: #212529; background-color: transparent; border: solid transparent; border-width: 1px 0; } .form-control-plaintext.form-control-sm, .form-control-plaintext.form-control-lg { padding-right: 0; padding-left: 0; } .form-control-sm { min-height: calc(1.5em + (0.5rem + 2px)); padding: 0.25rem 0.5rem; font-size: 0.875rem; border-radius: 0.2rem; } .form-control-sm::file-selector-button { padding: 0.25rem 0.5rem; margin: -0.25rem -0.5rem; margin-inline-end: 0.5rem; } .form-control-sm::-webkit-file-upload-button { padding: 0.25rem 0.5rem; margin: -0.25rem -0.5rem; margin-inline-end: 0.5rem; } .form-control-lg { min-height: calc(1.5em + (1rem + 2px)); padding: 0.5rem 1rem; font-size: 1.25rem; border-radius: 0.3rem; } .form-control-lg::file-selector-button { padding: 0.5rem 1rem; margin: -0.5rem -1rem; margin-inline-end: 1rem; } .form-control-lg::-webkit-file-upload-button { padding: 0.5rem 1rem; margin: -0.5rem -1rem; margin-inline-end: 1rem; } textarea.form-control { min-height: calc(1.5em + (0.75rem + 2px)); } textarea.form-control-sm { min-height: calc(1.5em + (0.5rem + 2px)); } textarea.form-control-lg { min-height: calc(1.5em + (1rem + 2px)); } .form-control-color { max-width: 3rem; height: auto; padding: 0.375rem; } .form-control-color:not(:disabled):not([readonly]) { cursor: pointer; } .form-control-color::-moz-color-swatch { height: 1.5em; border-radius: 0.25rem; } .form-control-color::-webkit-color-swatch { height: 1.5em; border-radius: 0.25rem; } .form-select { display: block; width: 100%; padding: 0.375rem 2.25rem 0.375rem 0.75rem; -moz-padding-start: calc(0.75rem - 3px); font-size: 1rem; font-weight: 400; line-height: 1.5; color: #212529; background-color: #fff; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 16px 12px; border: 1px solid #ced4da; border-radius: 0.25rem; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } @media (prefers-reduced-motion: reduce) { .form-select { transition: none; } } .form-select { -webkit-appearance: none; -moz-appearance: none; appearance: none; } .form-select:focus { border-color: rgb(134, 182.5, 254); outline: 0; box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); } .form-select[multiple], .form-select[size]:not([size="1"]) { padding-right: 0.75rem; background-image: none; } .form-select:disabled { background-color: #e9ecef; } .form-select:-moz-focusring { color: transparent; text-shadow: 0 0 0 #212529; } .form-select-sm { padding-top: 0.25rem; padding-bottom: 0.25rem; padding-left: 0.5rem; font-size: 0.875rem; } .form-select-lg { padding-top: 0.5rem; padding-bottom: 0.5rem; padding-left: 1rem; font-size: 1.25rem; } .form-check { display: block; min-height: 1.5rem; padding-left: 1.5em; margin-bottom: 0.125rem; } .form-check .form-check-input { float: left; margin-left: -1.5em; } .form-check-input { width: 1em; height: 1em; margin-top: 0.25em; vertical-align: top; background-color: #fff; background-repeat: no-repeat; background-position: center; background-size: contain; border: 1px solid rgba(0, 0, 0, 0.25); -webkit-appearance: none; -moz-appearance: none; appearance: none; print-color-adjust: exact; -webkit-print-color-adjust: exact; /* for Chrome/Safari */ } .form-check-input[type=checkbox] { border-radius: 0.25em; } .form-check-input[type=radio] { border-radius: 50%; } .form-check-input:active { filter: brightness(90%); } .form-check-input:focus { border-color: rgb(134, 182.5, 254); outline: 0; box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); } .form-check-input:checked { background-color: #0d6efd; border-color: #0d6efd; } .form-check-input:checked[type=checkbox] { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e"); } .form-check-input:checked[type=radio] { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e"); } .form-check-input[type=checkbox]:indeterminate { background-color: #0d6efd; border-color: #0d6efd; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e"); } .form-check-input:disabled { pointer-events: none; filter: none; opacity: 0.5; } .form-check-input[disabled] ~ .form-check-label, .form-check-input:disabled ~ .form-check-label { opacity: 0.5; } .form-switch { padding-left: 2.5em; } .form-switch .form-check-input { width: 2em; margin-left: -2.5em; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e"); background-position: left center; border-radius: 2em; transition: background-position 0.15s ease-in-out; } @media (prefers-reduced-motion: reduce) { .form-switch .form-check-input { transition: none; } } .form-switch .form-check-input:focus { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgb%28134, 182.5, 254%29'/%3e%3c/svg%3e"); } .form-switch .form-check-input:checked { background-position: right center; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"); } .form-check-inline { display: inline-block; margin-right: 1rem; } .btn-check { position: absolute; clip: rect(0, 0, 0, 0); pointer-events: none; } .btn-check[disabled] + .btn, .btn-check:disabled + .btn { pointer-events: none; filter: none; opacity: 0.65; } .form-range { width: 100%; height: 1.5rem; padding: 0; background-color: transparent; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .form-range:focus { outline: 0; } .form-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(13, 110, 253, 0.25); } .form-range:focus::-moz-range-thumb { box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(13, 110, 253, 0.25); } .form-range::-moz-focus-outer { border: 0; } .form-range::-webkit-slider-thumb { width: 1rem; height: 1rem; margin-top: -0.25rem; background-color: #0d6efd; border: 0; border-radius: 1rem; -webkit-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } @media (prefers-reduced-motion: reduce) { .form-range::-webkit-slider-thumb { -webkit-transition: none; transition: none; } } .form-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; } .form-range::-webkit-slider-thumb:active { background-color: rgb(182.4, 211.5, 254.4); } .form-range::-webkit-slider-runnable-track { width: 100%; height: 0.5rem; color: transparent; cursor: pointer; background-color: #dee2e6; border-color: transparent; border-radius: 1rem; } .form-range::-moz-range-thumb { width: 1rem; height: 1rem; background-color: #0d6efd; border: 0; border-radius: 1rem; -moz-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } @media (prefers-reduced-motion: reduce) { .form-range::-moz-range-thumb { -moz-transition: none; transition: none; } } .form-range::-moz-range-thumb { -moz-appearance: none; appearance: none; } .form-range::-moz-range-thumb:active { background-color: rgb(182.4, 211.5, 254.4); } .form-range::-moz-range-track { width: 100%; height: 0.5rem; color: transparent; cursor: pointer; background-color: #dee2e6; border-color: transparent; border-radius: 1rem; } .form-range:disabled { pointer-events: none; } .form-range:disabled::-webkit-slider-thumb { background-color: #adb5bd; } .form-range:disabled::-moz-range-thumb { background-color: #adb5bd; } .form-floating { position: relative; } .form-floating > .form-control, .form-floating > .form-select { height: calc(3.5rem + 2px); line-height: 1.25; } .form-floating > label { position: absolute; top: 0; left: 0; height: 100%; padding: 1rem 0.75rem; pointer-events: none; border: 1px solid transparent; transform-origin: 0 0; transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out; } @media (prefers-reduced-motion: reduce) { .form-floating > label { transition: none; } } .form-floating > .form-control { padding: 1rem 0.75rem; } .form-floating > .form-control::-moz-placeholder { color: transparent; } .form-floating > .form-control::placeholder { color: transparent; } .form-floating > .form-control:not(:-moz-placeholder) { padding-top: 1.625rem; padding-bottom: 0.625rem; } .form-floating > .form-control:focus, .form-floating > .form-control:not(:placeholder-shown) { padding-top: 1.625rem; padding-bottom: 0.625rem; } .form-floating > .form-control:-webkit-autofill { padding-top: 1.625rem; padding-bottom: 0.625rem; } .form-floating > .form-select { padding-top: 1.625rem; padding-bottom: 0.625rem; } .form-floating > .form-control:not(:-moz-placeholder) ~ label { opacity: 0.65; transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem); } .form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label, .form-floating > .form-select ~ label { opacity: 0.65; transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem); } .form-floating > .form-control:-webkit-autofill ~ label { opacity: 0.65; transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem); } .input-group { position: relative; display: flex; flex-wrap: wrap; align-items: stretch; width: 100%; } .input-group > .form-control, .input-group > .form-select { position: relative; flex: 1 1 auto; width: 1%; min-width: 0; } .input-group > .form-control:focus, .input-group > .form-select:focus { z-index: 3; } .input-group .btn { position: relative; z-index: 2; } .input-group .btn:focus { z-index: 3; } .input-group-text { display: flex; align-items: center; padding: 0.375rem 0.75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #212529; text-align: center; white-space: nowrap; background-color: #e9ecef; border: 1px solid #ced4da; border-radius: 0.25rem; } .input-group-lg > .form-control, .input-group-lg > .form-select, .input-group-lg > .input-group-text, .input-group-lg > .btn { padding: 0.5rem 1rem; font-size: 1.25rem; border-radius: 0.3rem; } .input-group-sm > .form-control, .input-group-sm > .form-select, .input-group-sm > .input-group-text, .input-group-sm > .btn { padding: 0.25rem 0.5rem; font-size: 0.875rem; border-radius: 0.2rem; } .input-group-lg > .form-select, .input-group-sm > .form-select { padding-right: 3rem; } .input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu), .input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n+3) { border-top-right-radius: 0; border-bottom-right-radius: 0; } .input-group.has-validation > :nth-last-child(n+3):not(.dropdown-toggle):not(.dropdown-menu), .input-group.has-validation > .dropdown-toggle:nth-last-child(n+4) { border-top-right-radius: 0; border-bottom-right-radius: 0; } .input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) { margin-left: -1px; border-top-left-radius: 0; border-bottom-left-radius: 0; } .valid-feedback { display: none; width: 100%; margin-top: 0.25rem; font-size: 0.875em; color: #198754; } .valid-tooltip { position: absolute; top: 100%; z-index: 5; display: none; max-width: 100%; padding: 0.25rem 0.5rem; margin-top: 0.1rem; font-size: 0.875rem; color: #fff; background-color: rgba(25, 135, 84, 0.9); border-radius: 0.25rem; } .was-validated :valid ~ .valid-feedback, .was-validated :valid ~ .valid-tooltip, .is-valid ~ .valid-feedback, .is-valid ~ .valid-tooltip { display: block; } .was-validated .form-control:valid, .form-control.is-valid { border-color: #198754; padding-right: calc(1.5em + 0.75rem); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right calc(0.375em + 0.1875rem) center; background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); } .was-validated .form-control:valid:focus, .form-control.is-valid:focus { border-color: #198754; box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25); } .was-validated textarea.form-control:valid, textarea.form-control.is-valid { padding-right: calc(1.5em + 0.75rem); background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem); } .was-validated .form-select:valid, .form-select.is-valid { border-color: #198754; } .was-validated .form-select:valid:not([multiple]):not([size]), .was-validated .form-select:valid:not([multiple])[size="1"], .form-select.is-valid:not([multiple]):not([size]), .form-select.is-valid:not([multiple])[size="1"] { padding-right: 4.125rem; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"); background-position: right 0.75rem center, center right 2.25rem; background-size: 16px 12px, calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); } .was-validated .form-select:valid:focus, .form-select.is-valid:focus { border-color: #198754; box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25); } .was-validated .form-check-input:valid, .form-check-input.is-valid { border-color: #198754; } .was-validated .form-check-input:valid:checked, .form-check-input.is-valid:checked { background-color: #198754; } .was-validated .form-check-input:valid:focus, .form-check-input.is-valid:focus { box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25); } .was-validated .form-check-input:valid ~ .form-check-label, .form-check-input.is-valid ~ .form-check-label { color: #198754; } .form-check-inline .form-check-input ~ .valid-feedback { margin-left: 0.5em; } .was-validated .input-group .form-control:valid, .input-group .form-control.is-valid, .was-validated .input-group .form-select:valid, .input-group .form-select.is-valid { z-index: 1; } .was-validated .input-group .form-control:valid:focus, .input-group .form-control.is-valid:focus, .was-validated .input-group .form-select:valid:focus, .input-group .form-select.is-valid:focus { z-index: 3; } .invalid-feedback { display: none; width: 100%; margin-top: 0.25rem; font-size: 0.875em; color: #dc3545; } .invalid-tooltip { position: absolute; top: 100%; z-index: 5; display: none; max-width: 100%; padding: 0.25rem 0.5rem; margin-top: 0.1rem; font-size: 0.875rem; color: #fff; background-color: rgba(220, 53, 69, 0.9); border-radius: 0.25rem; } .was-validated :invalid ~ .invalid-feedback, .was-validated :invalid ~ .invalid-tooltip, .is-invalid ~ .invalid-feedback, .is-invalid ~ .invalid-tooltip { display: block; } .was-validated .form-control:invalid, .form-control.is-invalid { border-color: #dc3545; padding-right: calc(1.5em + 0.75rem); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right calc(0.375em + 0.1875rem) center; background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); } .was-validated .form-control:invalid:focus, .form-control.is-invalid:focus { border-color: #dc3545; box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25); } .was-validated textarea.form-control:invalid, textarea.form-control.is-invalid { padding-right: calc(1.5em + 0.75rem); background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem); } .was-validated .form-select:invalid, .form-select.is-invalid { border-color: #dc3545; } .was-validated .form-select:invalid:not([multiple]):not([size]), .was-validated .form-select:invalid:not([multiple])[size="1"], .form-select.is-invalid:not([multiple]):not([size]), .form-select.is-invalid:not([multiple])[size="1"] { padding-right: 4.125rem; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e"); background-position: right 0.75rem center, center right 2.25rem; background-size: 16px 12px, calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); } .was-validated .form-select:invalid:focus, .form-select.is-invalid:focus { border-color: #dc3545; box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25); } .was-validated .form-check-input:invalid, .form-check-input.is-invalid { border-color: #dc3545; } .was-validated .form-check-input:invalid:checked, .form-check-input.is-invalid:checked { background-color: #dc3545; } .was-validated .form-check-input:invalid:focus, .form-check-input.is-invalid:focus { box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25); } .was-validated .form-check-input:invalid ~ .form-check-label, .form-check-input.is-invalid ~ .form-check-label { color: #dc3545; } .form-check-inline .form-check-input ~ .invalid-feedback { margin-left: 0.5em; } .was-validated .input-group .form-control:invalid, .input-group .form-control.is-invalid, .was-validated .input-group .form-select:invalid, .input-group .form-select.is-invalid { z-index: 2; } .was-validated .input-group .form-control:invalid:focus, .input-group .form-control.is-invalid:focus, .was-validated .input-group .form-select:invalid:focus, .input-group .form-select.is-invalid:focus { z-index: 3; } .btn { display: inline-block; font-weight: 400; line-height: 1.5; color: #212529; text-align: center; text-decoration: none; vertical-align: middle; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; background-color: transparent; border: 1px solid transparent; padding: 0.375rem 0.75rem; font-size: 1rem; border-radius: 0.25rem; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } @media (prefers-reduced-motion: reduce) { .btn { transition: none; } } .btn:hover { color: #212529; } .btn-check:focus + .btn, .btn:focus { outline: 0; box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); } .btn:disabled, .btn.disabled, fieldset:disabled .btn { pointer-events: none; opacity: 0.65; } .btn-primary { color: #fff; background-color: #0d6efd; border-color: #0d6efd; } .btn-primary:hover { color: #fff; background-color: rgb(11.05, 93.5, 215.05); border-color: rgb(10.4, 88, 202.4); } .btn-check:focus + .btn-primary, .btn-primary:focus { color: #fff; background-color: rgb(11.05, 93.5, 215.05); border-color: rgb(10.4, 88, 202.4); box-shadow: 0 0 0 0.25rem rgba(49.3, 131.75, 253.3, 0.5); } .btn-check:checked + .btn-primary, .btn-check:active + .btn-primary, .btn-primary:active, .btn-primary.active, .show > .btn-primary.dropdown-toggle { color: #fff; background-color: rgb(10.4, 88, 202.4); border-color: rgb(9.75, 82.5, 189.75); } .btn-check:checked + .btn-primary:focus, .btn-check:active + .btn-primary:focus, .btn-primary:active:focus, .btn-primary.active:focus, .show > .btn-primary.dropdown-toggle:focus { box-shadow: 0 0 0 0.25rem rgba(49.3, 131.75, 253.3, 0.5); } .btn-primary:disabled, .btn-primary.disabled { color: #fff; background-color: #0d6efd; border-color: #0d6efd; } .btn-secondary { color: #fff; background-color: #6c757d; border-color: #6c757d; } .btn-secondary:hover { color: #fff; background-color: rgb(91.8, 99.45, 106.25); border-color: rgb(86.4, 93.6, 100); } .btn-check:focus + .btn-secondary, .btn-secondary:focus { color: #fff; background-color: rgb(91.8, 99.45, 106.25); border-color: rgb(86.4, 93.6, 100); box-shadow: 0 0 0 0.25rem rgba(130.05, 137.7, 144.5, 0.5); } .btn-check:checked + .btn-secondary, .btn-check:active + .btn-secondary, .btn-secondary:active, .btn-secondary.active, .show > .btn-secondary.dropdown-toggle { color: #fff; background-color: rgb(86.4, 93.6, 100); border-color: rgb(81, 87.75, 93.75); } .btn-check:checked + .btn-secondary:focus, .btn-check:active + .btn-secondary:focus, .btn-secondary:active:focus, .btn-secondary.active:focus, .show > .btn-secondary.dropdown-toggle:focus { box-shadow: 0 0 0 0.25rem rgba(130.05, 137.7, 144.5, 0.5); } .btn-secondary:disabled, .btn-secondary.disabled { color: #fff; background-color: #6c757d; border-color: #6c757d; } .btn-success { color: #fff; background-color: #198754; border-color: #198754; } .btn-success:hover { color: #fff; background-color: rgb(21.25, 114.75, 71.4); border-color: rgb(20, 108, 67.2); } .btn-check:focus + .btn-success, .btn-success:focus { color: #fff; background-color: rgb(21.25, 114.75, 71.4); border-color: rgb(20, 108, 67.2); box-shadow: 0 0 0 0.25rem rgba(59.5, 153, 109.65, 0.5); } .btn-check:checked + .btn-success, .btn-check:active + .btn-success, .btn-success:active, .btn-success.active, .show > .btn-success.dropdown-toggle { color: #fff; background-color: rgb(20, 108, 67.2); border-color: rgb(18.75, 101.25, 63); } .btn-check:checked + .btn-success:focus, .btn-check:active + .btn-success:focus, .btn-success:active:focus, .btn-success.active:focus, .show > .btn-success.dropdown-toggle:focus { box-shadow: 0 0 0 0.25rem rgba(59.5, 153, 109.65, 0.5); } .btn-success:disabled, .btn-success.disabled { color: #fff; background-color: #198754; border-color: #198754; } .btn-info { color: #000; background-color: #0dcaf0; border-color: #0dcaf0; } .btn-info:hover { color: #000; background-color: rgb(49.3, 209.95, 242.25); border-color: rgb(37.2, 207.3, 241.5); } .btn-check:focus + .btn-info, .btn-info:focus { color: #000; background-color: rgb(49.3, 209.95, 242.25); border-color: rgb(37.2, 207.3, 241.5); box-shadow: 0 0 0 0.25rem rgba(11.05, 171.7, 204, 0.5); } .btn-check:checked + .btn-info, .btn-check:active + .btn-info, .btn-info:active, .btn-info.active, .show > .btn-info.dropdown-toggle { color: #000; background-color: rgb(61.4, 212.6, 243); border-color: rgb(37.2, 207.3, 241.5); } .btn-check:checked + .btn-info:focus, .btn-check:active + .btn-info:focus, .btn-info:active:focus, .btn-info.active:focus, .show > .btn-info.dropdown-toggle:focus { box-shadow: 0 0 0 0.25rem rgba(11.05, 171.7, 204, 0.5); } .btn-info:disabled, .btn-info.disabled { color: #000; background-color: #0dcaf0; border-color: #0dcaf0; } .btn-warning { color: #000; background-color: #ffc107; border-color: #ffc107; } .btn-warning:hover { color: #000; background-color: rgb(255, 202.3, 44.2); border-color: rgb(255, 199.2, 31.8); } .btn-check:focus + .btn-warning, .btn-warning:focus { color: #000; background-color: rgb(255, 202.3, 44.2); border-color: rgb(255, 199.2, 31.8); box-shadow: 0 0 0 0.25rem rgba(216.75, 164.05, 5.95, 0.5); } .btn-check:checked + .btn-warning, .btn-check:active + .btn-warning, .btn-warning:active, .btn-warning.active, .show > .btn-warning.dropdown-toggle { color: #000; background-color: rgb(255, 205.4, 56.6); border-color: rgb(255, 199.2, 31.8); } .btn-check:checked + .btn-warning:focus, .btn-check:active + .btn-warning:focus, .btn-warning:active:focus, .btn-warning.active:focus, .show > .btn-warning.dropdown-toggle:focus { box-shadow: 0 0 0 0.25rem rgba(216.75, 164.05, 5.95, 0.5); } .btn-warning:disabled, .btn-warning.disabled { color: #000; background-color: #ffc107; border-color: #ffc107; } .btn-danger { color: #fff; background-color: #dc3545; border-color: #dc3545; } .btn-danger:hover { color: #fff; background-color: rgb(187, 45.05, 58.65); border-color: rgb(176, 42.4, 55.2); } .btn-check:focus + .btn-danger, .btn-danger:focus { color: #fff; background-color: rgb(187, 45.05, 58.65); border-color: rgb(176, 42.4, 55.2); box-shadow: 0 0 0 0.25rem rgba(225.25, 83.3, 96.9, 0.5); } .btn-check:checked + .btn-danger, .btn-check:active + .btn-danger, .btn-danger:active, .btn-danger.active, .show > .btn-danger.dropdown-toggle { color: #fff; background-color: rgb(176, 42.4, 55.2); border-color: rgb(165, 39.75, 51.75); } .btn-check:checked + .btn-danger:focus, .btn-check:active + .btn-danger:focus, .btn-danger:active:focus, .btn-danger.active:focus, .show > .btn-danger.dropdown-toggle:focus { box-shadow: 0 0 0 0.25rem rgba(225.25, 83.3, 96.9, 0.5); } .btn-danger:disabled, .btn-danger.disabled { color: #fff; background-color: #dc3545; border-color: #dc3545; } .btn-light { color: #000; background-color: #f8f9fa; border-color: #f8f9fa; } .btn-light:hover { color: #000; background-color: rgb(249.05, 249.9, 250.75); border-color: rgb(248.7, 249.6, 250.5); } .btn-check:focus + .btn-light, .btn-light:focus { color: #000; background-color: rgb(249.05, 249.9, 250.75); border-color: rgb(248.7, 249.6, 250.5); box-shadow: 0 0 0 0.25rem rgba(210.8, 211.65, 212.5, 0.5); } .btn-check:checked + .btn-light, .btn-check:active + .btn-light, .btn-light:active, .btn-light.active, .show > .btn-light.dropdown-toggle { color: #000; background-color: rgb(249.4, 250.2, 251); border-color: rgb(248.7, 249.6, 250.5); } .btn-check:checked + .btn-light:focus, .btn-check:active + .btn-light:focus, .btn-light:active:focus, .btn-light.active:focus, .show > .btn-light.dropdown-toggle:focus { box-shadow: 0 0 0 0.25rem rgba(210.8, 211.65, 212.5, 0.5); } .btn-light:disabled, .btn-light.disabled { color: #000; background-color: #f8f9fa; border-color: #f8f9fa; } .btn-dark { color: #fff; background-color: #212529; border-color: #212529; } .btn-dark:hover { color: #fff; background-color: rgb(28.05, 31.45, 34.85); border-color: rgb(26.4, 29.6, 32.8); } .btn-check:focus + .btn-dark, .btn-dark:focus { color: #fff; background-color: rgb(28.05, 31.45, 34.85); border-color: rgb(26.4, 29.6, 32.8); box-shadow: 0 0 0 0.25rem rgba(66.3, 69.7, 73.1, 0.5); } .btn-check:checked + .btn-dark, .btn-check:active + .btn-dark, .btn-dark:active, .btn-dark.active, .show > .btn-dark.dropdown-toggle { color: #fff; background-color: rgb(26.4, 29.6, 32.8); border-color: rgb(24.75, 27.75, 30.75); } .btn-check:checked + .btn-dark:focus, .btn-check:active + .btn-dark:focus, .btn-dark:active:focus, .btn-dark.active:focus, .show > .btn-dark.dropdown-toggle:focus { box-shadow: 0 0 0 0.25rem rgba(66.3, 69.7, 73.1, 0.5); } .btn-dark:disabled, .btn-dark.disabled { color: #fff; background-color: #212529; border-color: #212529; } .btn-outline-primary { color: #0d6efd; border-color: #0d6efd; } .btn-outline-primary:hover { color: #fff; background-color: #0d6efd; border-color: #0d6efd; } .btn-check:focus + .btn-outline-primary, .btn-outline-primary:focus { box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.5); } .btn-check:checked + .btn-outline-primary, .btn-check:active + .btn-outline-primary, .btn-outline-primary:active, .btn-outline-primary.active, .btn-outline-primary.dropdown-toggle.show { color: #fff; background-color: #0d6efd; border-color: #0d6efd; } .btn-check:checked + .btn-outline-primary:focus, .btn-check:active + .btn-outline-primary:focus, .btn-outline-primary:active:focus, .btn-outline-primary.active:focus, .btn-outline-primary.dropdown-toggle.show:focus { box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.5); } .btn-outline-primary:disabled, .btn-outline-primary.disabled { color: #0d6efd; background-color: transparent; } .btn-outline-secondary { color: #6c757d; border-color: #6c757d; } .btn-outline-secondary:hover { color: #fff; background-color: #6c757d; border-color: #6c757d; } .btn-check:focus + .btn-outline-secondary, .btn-outline-secondary:focus { box-shadow: 0 0 0 0.25rem rgba(108, 117, 125, 0.5); } .btn-check:checked + .btn-outline-secondary, .btn-check:active + .btn-outline-secondary, .btn-outline-secondary:active, .btn-outline-secondary.active, .btn-outline-secondary.dropdown-toggle.show { color: #fff; background-color: #6c757d; border-color: #6c757d; } .btn-check:checked + .btn-outline-secondary:focus, .btn-check:active + .btn-outline-secondary:focus, .btn-outline-secondary:active:focus, .btn-outline-secondary.active:focus, .btn-outline-secondary.dropdown-toggle.show:focus { box-shadow: 0 0 0 0.25rem rgba(108, 117, 125, 0.5); } .btn-outline-secondary:disabled, .btn-outline-secondary.disabled { color: #6c757d; background-color: transparent; } .btn-outline-success { color: #198754; border-color: #198754; } .btn-outline-success:hover { color: #fff; background-color: #198754; border-color: #198754; } .btn-check:focus + .btn-outline-success, .btn-outline-success:focus { box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.5); } .btn-check:checked + .btn-outline-success, .btn-check:active + .btn-outline-success, .btn-outline-success:active, .btn-outline-success.active, .btn-outline-success.dropdown-toggle.show { color: #fff; background-color: #198754; border-color: #198754; } .btn-check:checked + .btn-outline-success:focus, .btn-check:active + .btn-outline-success:focus, .btn-outline-success:active:focus, .btn-outline-success.active:focus, .btn-outline-success.dropdown-toggle.show:focus { box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.5); } .btn-outline-success:disabled, .btn-outline-success.disabled { color: #198754; background-color: transparent; } .btn-outline-info { color: #0dcaf0; border-color: #0dcaf0; } .btn-outline-info:hover { color: #000; background-color: #0dcaf0; border-color: #0dcaf0; } .btn-check:focus + .btn-outline-info, .btn-outline-info:focus { box-shadow: 0 0 0 0.25rem rgba(13, 202, 240, 0.5); } .btn-check:checked + .btn-outline-info, .btn-check:active + .btn-outline-info, .btn-outline-info:active, .btn-outline-info.active, .btn-outline-info.dropdown-toggle.show { color: #000; background-color: #0dcaf0; border-color: #0dcaf0; } .btn-check:checked + .btn-outline-info:focus, .btn-check:active + .btn-outline-info:focus, .btn-outline-info:active:focus, .btn-outline-info.active:focus, .btn-outline-info.dropdown-toggle.show:focus { box-shadow: 0 0 0 0.25rem rgba(13, 202, 240, 0.5); } .btn-outline-info:disabled, .btn-outline-info.disabled { color: #0dcaf0; background-color: transparent; } .btn-outline-warning { color: #ffc107; border-color: #ffc107; } .btn-outline-warning:hover { color: #000; background-color: #ffc107; border-color: #ffc107; } .btn-check:focus + .btn-outline-warning, .btn-outline-warning:focus { box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.5); } .btn-check:checked + .btn-outline-warning, .btn-check:active + .btn-outline-warning, .btn-outline-warning:active, .btn-outline-warning.active, .btn-outline-warning.dropdown-toggle.show { color: #000; background-color: #ffc107; border-color: #ffc107; } .btn-check:checked + .btn-outline-warning:focus, .btn-check:active + .btn-outline-warning:focus, .btn-outline-warning:active:focus, .btn-outline-warning.active:focus, .btn-outline-warning.dropdown-toggle.show:focus { box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.5); } .btn-outline-warning:disabled, .btn-outline-warning.disabled { color: #ffc107; background-color: transparent; } .btn-outline-danger { color: #dc3545; border-color: #dc3545; } .btn-outline-danger:hover { color: #fff; background-color: #dc3545; border-color: #dc3545; } .btn-check:focus + .btn-outline-danger, .btn-outline-danger:focus { box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.5); } .btn-check:checked + .btn-outline-danger, .btn-check:active + .btn-outline-danger, .btn-outline-danger:active, .btn-outline-danger.active, .btn-outline-danger.dropdown-toggle.show { color: #fff; background-color: #dc3545; border-color: #dc3545; } .btn-check:checked + .btn-outline-danger:focus, .btn-check:active + .btn-outline-danger:focus, .btn-outline-danger:active:focus, .btn-outline-danger.active:focus, .btn-outline-danger.dropdown-toggle.show:focus { box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.5); } .btn-outline-danger:disabled, .btn-outline-danger.disabled { color: #dc3545; background-color: transparent; } .btn-outline-light { color: #f8f9fa; border-color: #f8f9fa; } .btn-outline-light:hover { color: #000; background-color: #f8f9fa; border-color: #f8f9fa; } .btn-check:focus + .btn-outline-light, .btn-outline-light:focus { box-shadow: 0 0 0 0.25rem rgba(248, 249, 250, 0.5); } .btn-check:checked + .btn-outline-light, .btn-check:active + .btn-outline-light, .btn-outline-light:active, .btn-outline-light.active, .btn-outline-light.dropdown-toggle.show { color: #000; background-color: #f8f9fa; border-color: #f8f9fa; } .btn-check:checked + .btn-outline-light:focus, .btn-check:active + .btn-outline-light:focus, .btn-outline-light:active:focus, .btn-outline-light.active:focus, .btn-outline-light.dropdown-toggle.show:focus { box-shadow: 0 0 0 0.25rem rgba(248, 249, 250, 0.5); } .btn-outline-light:disabled, .btn-outline-light.disabled { color: #f8f9fa; background-color: transparent; } .btn-outline-dark { color: #212529; border-color: #212529; } .btn-outline-dark:hover { color: #fff; background-color: #212529; border-color: #212529; } .btn-check:focus + .btn-outline-dark, .btn-outline-dark:focus { box-shadow: 0 0 0 0.25rem rgba(33, 37, 41, 0.5); } .btn-check:checked + .btn-outline-dark, .btn-check:active + .btn-outline-dark, .btn-outline-dark:active, .btn-outline-dark.active, .btn-outline-dark.dropdown-toggle.show { color: #fff; background-color: #212529; border-color: #212529; } .btn-check:checked + .btn-outline-dark:focus, .btn-check:active + .btn-outline-dark:focus, .btn-outline-dark:active:focus, .btn-outline-dark.active:focus, .btn-outline-dark.dropdown-toggle.show:focus { box-shadow: 0 0 0 0.25rem rgba(33, 37, 41, 0.5); } .btn-outline-dark:disabled, .btn-outline-dark.disabled { color: #212529; background-color: transparent; } .btn-link { font-weight: 400; color: #0d6efd; text-decoration: underline; } .btn-link:hover { color: rgb(10.4, 88, 202.4); } .btn-link:disabled, .btn-link.disabled { color: #6c757d; } .btn-lg, .btn-group-lg > .btn { padding: 0.5rem 1rem; font-size: 1.25rem; border-radius: 0.3rem; } .btn-sm, .btn-group-sm > .btn { padding: 0.25rem 0.5rem; font-size: 0.875rem; border-radius: 0.2rem; } .fade { transition: opacity 0.15s linear; } @media (prefers-reduced-motion: reduce) { .fade { transition: none; } } .fade:not(.show) { opacity: 0; } .collapse:not(.show) { display: none; } .collapsing { height: 0; overflow: hidden; transition: height 0.35s ease; } @media (prefers-reduced-motion: reduce) { .collapsing { transition: none; } } .dropup, .dropend, .dropdown, .dropstart { position: relative; } .dropdown-toggle { white-space: nowrap; } .dropdown-toggle::after { display: inline-block; margin-left: 0.255em; vertical-align: 0.255em; content: ""; border-top: 0.3em solid; border-right: 0.3em solid transparent; border-bottom: 0; border-left: 0.3em solid transparent; } .dropdown-toggle:empty::after { margin-left: 0; } .dropdown-menu { position: absolute; z-index: 1000; display: none; min-width: 10rem; padding: 0.5rem 0; margin: 0; font-size: 1rem; color: #212529; text-align: left; list-style: none; background-color: #fff; background-clip: padding-box; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 0.25rem; } .dropdown-menu[data-bs-popper] { top: 100%; left: 0; margin-top: 0.125rem; } .dropdown-menu-start { --bs-position: start; } .dropdown-menu-start[data-bs-popper] { right: auto; left: 0; } .dropdown-menu-end { --bs-position: end; } .dropdown-menu-end[data-bs-popper] { right: 0; left: auto; } @media (min-width: 576px) { .dropdown-menu-sm-start { --bs-position: start; } .dropdown-menu-sm-start[data-bs-popper] { right: auto; left: 0; } .dropdown-menu-sm-end { --bs-position: end; } .dropdown-menu-sm-end[data-bs-popper] { right: 0; left: auto; } } @media (min-width: 768px) { .dropdown-menu-md-start { --bs-position: start; } .dropdown-menu-md-start[data-bs-popper] { right: auto; left: 0; } .dropdown-menu-md-end { --bs-position: end; } .dropdown-menu-md-end[data-bs-popper] { right: 0; left: auto; } } @media (min-width: 992px) { .dropdown-menu-lg-start { --bs-position: start; } .dropdown-menu-lg-start[data-bs-popper] { right: auto; left: 0; } .dropdown-menu-lg-end { --bs-position: end; } .dropdown-menu-lg-end[data-bs-popper] { right: 0; left: auto; } } @media (min-width: 1200px) { .dropdown-menu-xl-start { --bs-position: start; } .dropdown-menu-xl-start[data-bs-popper] { right: auto; left: 0; } .dropdown-menu-xl-end { --bs-position: end; } .dropdown-menu-xl-end[data-bs-popper] { right: 0; left: auto; } } @media (min-width: 1400px) { .dropdown-menu-xxl-start { --bs-position: start; } .dropdown-menu-xxl-start[data-bs-popper] { right: auto; left: 0; } .dropdown-menu-xxl-end { --bs-position: end; } .dropdown-menu-xxl-end[data-bs-popper] { right: 0; left: auto; } } .dropup .dropdown-menu[data-bs-popper] { top: auto; bottom: 100%; margin-top: 0; margin-bottom: 0.125rem; } .dropup .dropdown-toggle::after { display: inline-block; margin-left: 0.255em; vertical-align: 0.255em; content: ""; border-top: 0; border-right: 0.3em solid transparent; border-bottom: 0.3em solid; border-left: 0.3em solid transparent; } .dropup .dropdown-toggle:empty::after { margin-left: 0; } .dropend .dropdown-menu[data-bs-popper] { top: 0; right: auto; left: 100%; margin-top: 0; margin-left: 0.125rem; } .dropend .dropdown-toggle::after { display: inline-block; margin-left: 0.255em; vertical-align: 0.255em; content: ""; border-top: 0.3em solid transparent; border-right: 0; border-bottom: 0.3em solid transparent; border-left: 0.3em solid; } .dropend .dropdown-toggle:empty::after { margin-left: 0; } .dropend .dropdown-toggle::after { vertical-align: 0; } .dropstart .dropdown-menu[data-bs-popper] { top: 0; right: 100%; left: auto; margin-top: 0; margin-right: 0.125rem; } .dropstart .dropdown-toggle::after { display: inline-block; margin-left: 0.255em; vertical-align: 0.255em; content: ""; } .dropstart .dropdown-toggle::after { display: none; } .dropstart .dropdown-toggle::before { display: inline-block; margin-right: 0.255em; vertical-align: 0.255em; content: ""; border-top: 0.3em solid transparent; border-right: 0.3em solid; border-bottom: 0.3em solid transparent; } .dropstart .dropdown-toggle:empty::after { margin-left: 0; } .dropstart .dropdown-toggle::before { vertical-align: 0; } .dropdown-divider { height: 0; margin: 0.5rem 0; overflow: hidden; border-top: 1px solid rgba(0, 0, 0, 0.15); } .dropdown-item { display: block; width: 100%; padding: 0.25rem 1rem; clear: both; font-weight: 400; color: #212529; text-align: inherit; text-decoration: none; white-space: nowrap; background-color: transparent; border: 0; } .dropdown-item:hover, .dropdown-item:focus { color: rgb(29.7, 33.3, 36.9); background-color: #e9ecef; } .dropdown-item.active, .dropdown-item:active { color: #fff; text-decoration: none; background-color: #0d6efd; } .dropdown-item.disabled, .dropdown-item:disabled { color: #adb5bd; pointer-events: none; background-color: transparent; } .dropdown-menu.show { display: block; } .dropdown-header { display: block; padding: 0.5rem 1rem; margin-bottom: 0; font-size: 0.875rem; color: #6c757d; white-space: nowrap; } .dropdown-item-text { display: block; padding: 0.25rem 1rem; color: #212529; } .dropdown-menu-dark { color: #dee2e6; background-color: #343a40; border-color: rgba(0, 0, 0, 0.15); } .dropdown-menu-dark .dropdown-item { color: #dee2e6; } .dropdown-menu-dark .dropdown-item:hover, .dropdown-menu-dark .dropdown-item:focus { color: #fff; background-color: rgba(255, 255, 255, 0.15); } .dropdown-menu-dark .dropdown-item.active, .dropdown-menu-dark .dropdown-item:active { color: #fff; background-color: #0d6efd; } .dropdown-menu-dark .dropdown-item.disabled, .dropdown-menu-dark .dropdown-item:disabled { color: #adb5bd; } .dropdown-menu-dark .dropdown-divider { border-color: rgba(0, 0, 0, 0.15); } .dropdown-menu-dark .dropdown-item-text { color: #dee2e6; } .dropdown-menu-dark .dropdown-header { color: #adb5bd; } .btn-group, .btn-group-vertical { position: relative; display: inline-flex; vertical-align: middle; } .btn-group > .btn, .btn-group-vertical > .btn { position: relative; flex: 1 1 auto; } .btn-group > .btn-check:checked + .btn, .btn-group > .btn-check:focus + .btn, .btn-group > .btn:hover, .btn-group > .btn:focus, .btn-group > .btn:active, .btn-group > .btn.active, .btn-group-vertical > .btn-check:checked + .btn, .btn-group-vertical > .btn-check:focus + .btn, .btn-group-vertical > .btn:hover, .btn-group-vertical > .btn:focus, .btn-group-vertical > .btn:active, .btn-group-vertical > .btn.active { z-index: 1; } .btn-toolbar { display: flex; flex-wrap: wrap; justify-content: flex-start; } .btn-toolbar .input-group { width: auto; } .btn-group > .btn:not(:first-child), .btn-group > .btn-group:not(:first-child) { margin-left: -1px; } .btn-group > .btn:not(:last-child):not(.dropdown-toggle), .btn-group > .btn-group:not(:last-child) > .btn { border-top-right-radius: 0; border-bottom-right-radius: 0; } .btn-group > .btn:nth-child(n+3), .btn-group > :not(.btn-check) + .btn, .btn-group > .btn-group:not(:first-child) > .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; } .dropdown-toggle-split { padding-right: 0.5625rem; padding-left: 0.5625rem; } .dropdown-toggle-split::after, .dropup .dropdown-toggle-split::after, .dropend .dropdown-toggle-split::after { margin-left: 0; } .dropstart .dropdown-toggle-split::before { margin-right: 0; } .btn-sm + .dropdown-toggle-split, .btn-group-sm > .btn + .dropdown-toggle-split { padding-right: 0.375rem; padding-left: 0.375rem; } .btn-lg + .dropdown-toggle-split, .btn-group-lg > .btn + .dropdown-toggle-split { padding-right: 0.75rem; padding-left: 0.75rem; } .btn-group-vertical { flex-direction: column; align-items: flex-start; justify-content: center; } .btn-group-vertical > .btn, .btn-group-vertical > .btn-group { width: 100%; } .btn-group-vertical > .btn:not(:first-child), .btn-group-vertical > .btn-group:not(:first-child) { margin-top: -1px; } .btn-group-vertical > .btn:not(:last-child):not(.dropdown-toggle), .btn-group-vertical > .btn-group:not(:last-child) > .btn { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .btn-group-vertical > .btn ~ .btn, .btn-group-vertical > .btn-group:not(:first-child) > .btn { border-top-left-radius: 0; border-top-right-radius: 0; } .nav { display: flex; flex-wrap: wrap; padding-left: 0; margin-bottom: 0; list-style: none; } .nav-link { display: block; padding: 0.5rem 1rem; color: #0d6efd; text-decoration: none; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out; } @media (prefers-reduced-motion: reduce) { .nav-link { transition: none; } } .nav-link:hover, .nav-link:focus { color: rgb(10.4, 88, 202.4); } .nav-link.disabled { color: #6c757d; pointer-events: none; cursor: default; } .nav-tabs { border-bottom: 1px solid #dee2e6; } .nav-tabs .nav-link { margin-bottom: -1px; background: none; border: 1px solid transparent; border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; } .nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus { border-color: #e9ecef #e9ecef #dee2e6; isolation: isolate; } .nav-tabs .nav-link.disabled { color: #6c757d; background-color: transparent; border-color: transparent; } .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: #495057; background-color: #fff; border-color: #dee2e6 #dee2e6 #fff; } .nav-tabs .dropdown-menu { margin-top: -1px; border-top-left-radius: 0; border-top-right-radius: 0; } .nav-pills .nav-link { background: none; border: 0; border-radius: 0.25rem; } .nav-pills .nav-link.active, .nav-pills .show > .nav-link { color: #fff; background-color: #0d6efd; } .nav-fill > .nav-link, .nav-fill .nav-item { flex: 1 1 auto; text-align: center; } .nav-justified > .nav-link, .nav-justified .nav-item { flex-basis: 0; flex-grow: 1; text-align: center; } .nav-fill .nav-item .nav-link, .nav-justified .nav-item .nav-link { width: 100%; } .tab-content > .tab-pane { display: none; } .tab-content > .active { display: block; } .navbar { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding-top: 0.5rem; padding-bottom: 0.5rem; } .navbar > .container, .navbar > .container-fluid, .navbar > .container-sm, .navbar > .container-md, .navbar > .container-lg, .navbar > .container-xl, .navbar > .container-xxl { display: flex; flex-wrap: inherit; align-items: center; justify-content: space-between; } .navbar-brand { padding-top: 0.3125rem; padding-bottom: 0.3125rem; margin-right: 1rem; font-size: 1.25rem; text-decoration: none; white-space: nowrap; } .navbar-nav { display: flex; flex-direction: column; padding-left: 0; margin-bottom: 0; list-style: none; } .navbar-nav .nav-link { padding-right: 0; padding-left: 0; } .navbar-nav .dropdown-menu { position: static; } .navbar-text { padding-top: 0.5rem; padding-bottom: 0.5rem; } .navbar-collapse { flex-basis: 100%; flex-grow: 1; align-items: center; } .navbar-toggler { padding: 0.25rem 0.75rem; font-size: 1.25rem; line-height: 1; background-color: transparent; border: 1px solid transparent; border-radius: 0.25rem; transition: box-shadow 0.15s ease-in-out; } @media (prefers-reduced-motion: reduce) { .navbar-toggler { transition: none; } } .navbar-toggler:hover { text-decoration: none; } .navbar-toggler:focus { text-decoration: none; outline: 0; box-shadow: 0 0 0 0.25rem; } .navbar-toggler-icon { display: inline-block; width: 1.5em; height: 1.5em; vertical-align: middle; background-repeat: no-repeat; background-position: center; background-size: 100%; } .navbar-nav-scroll { max-height: var(--bs-scroll-height, 75vh); overflow-y: auto; } @media (min-width: 576px) { .navbar-expand-sm { flex-wrap: nowrap; justify-content: flex-start; } .navbar-expand-sm .navbar-nav { flex-direction: row; } .navbar-expand-sm .navbar-nav .dropdown-menu { position: absolute; } .navbar-expand-sm .navbar-nav .nav-link { padding-right: 0.5rem; padding-left: 0.5rem; } .navbar-expand-sm .navbar-nav-scroll { overflow: visible; } .navbar-expand-sm .navbar-collapse { display: flex !important; flex-basis: auto; } .navbar-expand-sm .navbar-toggler { display: none; } } @media (min-width: 768px) { .navbar-expand-md { flex-wrap: nowrap; justify-content: flex-start; } .navbar-expand-md .navbar-nav { flex-direction: row; } .navbar-expand-md .navbar-nav .dropdown-menu { position: absolute; } .navbar-expand-md .navbar-nav .nav-link { padding-right: 0.5rem; padding-left: 0.5rem; } .navbar-expand-md .navbar-nav-scroll { overflow: visible; } .navbar-expand-md .navbar-collapse { display: flex !important; flex-basis: auto; } .navbar-expand-md .navbar-toggler { display: none; } } @media (min-width: 992px) { .navbar-expand-lg { flex-wrap: nowrap; justify-content: flex-start; } .navbar-expand-lg .navbar-nav { flex-direction: row; } .navbar-expand-lg .navbar-nav .dropdown-menu { position: absolute; } .navbar-expand-lg .navbar-nav .nav-link { padding-right: 0.5rem; padding-left: 0.5rem; } .navbar-expand-lg .navbar-nav-scroll { overflow: visible; } .navbar-expand-lg .navbar-collapse { display: flex !important; flex-basis: auto; } .navbar-expand-lg .navbar-toggler { display: none; } } @media (min-width: 1200px) { .navbar-expand-xl { flex-wrap: nowrap; justify-content: flex-start; } .navbar-expand-xl .navbar-nav { flex-direction: row; } .navbar-expand-xl .navbar-nav .dropdown-menu { position: absolute; } .navbar-expand-xl .navbar-nav .nav-link { padding-right: 0.5rem; padding-left: 0.5rem; } .navbar-expand-xl .navbar-nav-scroll { overflow: visible; } .navbar-expand-xl .navbar-collapse { display: flex !important; flex-basis: auto; } .navbar-expand-xl .navbar-toggler { display: none; } } @media (min-width: 1400px) { .navbar-expand-xxl { flex-wrap: nowrap; justify-content: flex-start; } .navbar-expand-xxl .navbar-nav { flex-direction: row; } .navbar-expand-xxl .navbar-nav .dropdown-menu { position: absolute; } .navbar-expand-xxl .navbar-nav .nav-link { padding-right: 0.5rem; padding-left: 0.5rem; } .navbar-expand-xxl .navbar-nav-scroll { overflow: visible; } .navbar-expand-xxl .navbar-collapse { display: flex !important; flex-basis: auto; } .navbar-expand-xxl .navbar-toggler { display: none; } } .navbar-expand { flex-wrap: nowrap; justify-content: flex-start; } .navbar-expand .navbar-nav { flex-direction: row; } .navbar-expand .navbar-nav .dropdown-menu { position: absolute; } .navbar-expand .navbar-nav .nav-link { padding-right: 0.5rem; padding-left: 0.5rem; } .navbar-expand .navbar-nav-scroll { overflow: visible; } .navbar-expand .navbar-collapse { display: flex !important; flex-basis: auto; } .navbar-expand .navbar-toggler { display: none; } .navbar-light .navbar-brand { color: rgba(0, 0, 0, 0.9); } .navbar-light .navbar-brand:hover, .navbar-light .navbar-brand:focus { color: rgba(0, 0, 0, 0.9); } .navbar-light .navbar-nav .nav-link { color: rgba(0, 0, 0, 0.55); } .navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus { color: rgba(0, 0, 0, 0.7); } .navbar-light .navbar-nav .nav-link.disabled { color: rgba(0, 0, 0, 0.3); } .navbar-light .navbar-nav .show > .nav-link, .navbar-light .navbar-nav .nav-link.active { color: rgba(0, 0, 0, 0.9); } .navbar-light .navbar-toggler { color: rgba(0, 0, 0, 0.55); border-color: rgba(0, 0, 0, 0.1); } .navbar-light .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } .navbar-light .navbar-text { color: rgba(0, 0, 0, 0.55); } .navbar-light .navbar-text a, .navbar-light .navbar-text a:hover, .navbar-light .navbar-text a:focus { color: rgba(0, 0, 0, 0.9); } .navbar-dark .navbar-brand { color: #fff; } .navbar-dark .navbar-brand:hover, .navbar-dark .navbar-brand:focus { color: #fff; } .navbar-dark .navbar-nav .nav-link { color: rgba(255, 255, 255, 0.55); } .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus { color: rgba(255, 255, 255, 0.75); } .navbar-dark .navbar-nav .nav-link.disabled { color: rgba(255, 255, 255, 0.25); } .navbar-dark .navbar-nav .show > .nav-link, .navbar-dark .navbar-nav .nav-link.active { color: #fff; } .navbar-dark .navbar-toggler { color: rgba(255, 255, 255, 0.55); border-color: rgba(255, 255, 255, 0.1); } .navbar-dark .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } .navbar-dark .navbar-text { color: rgba(255, 255, 255, 0.55); } .navbar-dark .navbar-text a, .navbar-dark .navbar-text a:hover, .navbar-dark .navbar-text a:focus { color: #fff; } .card { position: relative; display: flex; flex-direction: column; min-width: 0; word-wrap: break-word; background-color: #fff; background-clip: border-box; border: 1px solid rgba(0, 0, 0, 0.125); border-radius: 0.25rem; } .card > hr { margin-right: 0; margin-left: 0; } .card > .list-group { border-top: inherit; border-bottom: inherit; } .card > .list-group:first-child { border-top-width: 0; border-top-left-radius: calc(0.25rem - 1px); border-top-right-radius: calc(0.25rem - 1px); } .card > .list-group:last-child { border-bottom-width: 0; border-bottom-right-radius: calc(0.25rem - 1px); border-bottom-left-radius: calc(0.25rem - 1px); } .card > .card-header + .list-group, .card > .list-group + .card-footer { border-top: 0; } .card-body { flex: 1 1 auto; padding: 1rem 1rem; } .card-title { margin-bottom: 0.5rem; } .card-subtitle { margin-top: -0.25rem; margin-bottom: 0; } .card-text:last-child { margin-bottom: 0; } .card-link:hover { text-decoration: none; } .card-link + .card-link { margin-left: 1rem; } .card-header { padding: 0.5rem 1rem; margin-bottom: 0; background-color: rgba(0, 0, 0, 0.03); border-bottom: 1px solid rgba(0, 0, 0, 0.125); } .card-header:first-child { border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0; } .card-footer { padding: 0.5rem 1rem; background-color: rgba(0, 0, 0, 0.03); border-top: 1px solid rgba(0, 0, 0, 0.125); } .card-footer:last-child { border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px); } .card-header-tabs { margin-right: -0.5rem; margin-bottom: -0.5rem; margin-left: -0.5rem; border-bottom: 0; } .card-header-pills { margin-right: -0.5rem; margin-left: -0.5rem; } .card-img-overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding: 1rem; border-radius: calc(0.25rem - 1px); } .card-img, .card-img-top, .card-img-bottom { width: 100%; } .card-img, .card-img-top { border-top-left-radius: calc(0.25rem - 1px); border-top-right-radius: calc(0.25rem - 1px); } .card-img, .card-img-bottom { border-bottom-right-radius: calc(0.25rem - 1px); border-bottom-left-radius: calc(0.25rem - 1px); } .card-group > .card { margin-bottom: 0.75rem; } @media (min-width: 576px) { .card-group { display: flex; flex-flow: row wrap; } .card-group > .card { flex: 1 0 0%; margin-bottom: 0; } .card-group > .card + .card { margin-left: 0; border-left: 0; } .card-group > .card:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } .card-group > .card:not(:last-child) .card-img-top, .card-group > .card:not(:last-child) .card-header { border-top-right-radius: 0; } .card-group > .card:not(:last-child) .card-img-bottom, .card-group > .card:not(:last-child) .card-footer { border-bottom-right-radius: 0; } .card-group > .card:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } .card-group > .card:not(:first-child) .card-img-top, .card-group > .card:not(:first-child) .card-header { border-top-left-radius: 0; } .card-group > .card:not(:first-child) .card-img-bottom, .card-group > .card:not(:first-child) .card-footer { border-bottom-left-radius: 0; } } .accordion-button { position: relative; display: flex; align-items: center; width: 100%; padding: 1rem 1.25rem; font-size: 1rem; color: #212529; text-align: left; background-color: #fff; border: 0; border-radius: 0; overflow-anchor: none; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease; } @media (prefers-reduced-motion: reduce) { .accordion-button { transition: none; } } .accordion-button:not(.collapsed) { color: rgb(11.7, 99, 227.7); background-color: rgb(230.8, 240.5, 254.8); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.125); } .accordion-button:not(.collapsed)::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgb%2811.7, 99, 227.7%29'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); transform: rotate(-180deg); } .accordion-button::after { flex-shrink: 0; width: 1.25rem; height: 1.25rem; margin-left: auto; content: ""; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-size: 1.25rem; transition: transform 0.2s ease-in-out; } @media (prefers-reduced-motion: reduce) { .accordion-button::after { transition: none; } } .accordion-button:hover { z-index: 2; } .accordion-button:focus { z-index: 3; border-color: rgb(134, 182.5, 254); outline: 0; box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); } .accordion-header { margin-bottom: 0; } .accordion-item { background-color: #fff; border: 1px solid rgba(0, 0, 0, 0.125); } .accordion-item:first-of-type { border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; } .accordion-item:first-of-type .accordion-button { border-top-left-radius: calc(0.25rem - 1px); border-top-right-radius: calc(0.25rem - 1px); } .accordion-item:not(:first-of-type) { border-top: 0; } .accordion-item:last-of-type { border-bottom-right-radius: 0.25rem; border-bottom-left-radius: 0.25rem; } .accordion-item:last-of-type .accordion-button.collapsed { border-bottom-right-radius: calc(0.25rem - 1px); border-bottom-left-radius: calc(0.25rem - 1px); } .accordion-item:last-of-type .accordion-collapse { border-bottom-right-radius: 0.25rem; border-bottom-left-radius: 0.25rem; } .accordion-body { padding: 1rem 1.25rem; } .accordion-flush .accordion-collapse { border-width: 0; } .accordion-flush .accordion-item { border-right: 0; border-left: 0; border-radius: 0; } .accordion-flush .accordion-item:first-child { border-top: 0; } .accordion-flush .accordion-item:last-child { border-bottom: 0; } .accordion-flush .accordion-item .accordion-button { border-radius: 0; } .breadcrumb { display: flex; flex-wrap: wrap; padding: 0 0; margin-bottom: 1rem; list-style: none; } .breadcrumb-item + .breadcrumb-item { padding-left: 0.5rem; } .breadcrumb-item + .breadcrumb-item::before { float: left; padding-right: 0.5rem; color: #6c757d; content: var(--bs-breadcrumb-divider, "/") /* rtl: var(--bs-breadcrumb-divider, "/") */; } .breadcrumb-item.active { color: #6c757d; } .pagination { display: flex; padding-left: 0; list-style: none; } .page-link { position: relative; display: block; color: #0d6efd; text-decoration: none; background-color: #fff; border: 1px solid #dee2e6; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } @media (prefers-reduced-motion: reduce) { .page-link { transition: none; } } .page-link:hover { z-index: 2; color: rgb(10.4, 88, 202.4); background-color: #e9ecef; border-color: #dee2e6; } .page-link:focus { z-index: 3; color: rgb(10.4, 88, 202.4); background-color: #e9ecef; outline: 0; box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); } .page-item:not(:first-child) .page-link { margin-left: -1px; } .page-item.active .page-link { z-index: 3; color: #fff; background-color: #0d6efd; border-color: #0d6efd; } .page-item.disabled .page-link { color: #6c757d; pointer-events: none; background-color: #fff; border-color: #dee2e6; } .page-link { padding: 0.375rem 0.75rem; } .page-item:first-child .page-link { border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem; } .page-item:last-child .page-link { border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem; } .pagination-lg .page-link { padding: 0.75rem 1.5rem; font-size: 1.25rem; } .pagination-lg .page-item:first-child .page-link { border-top-left-radius: 0.3rem; border-bottom-left-radius: 0.3rem; } .pagination-lg .page-item:last-child .page-link { border-top-right-radius: 0.3rem; border-bottom-right-radius: 0.3rem; } .pagination-sm .page-link { padding: 0.25rem 0.5rem; font-size: 0.875rem; } .pagination-sm .page-item:first-child .page-link { border-top-left-radius: 0.2rem; border-bottom-left-radius: 0.2rem; } .pagination-sm .page-item:last-child .page-link { border-top-right-radius: 0.2rem; border-bottom-right-radius: 0.2rem; } .badge { display: inline-block; padding: 0.35em 0.65em; font-size: 0.75em; font-weight: 700; line-height: 1; color: #fff; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: 0.25rem; } .badge:empty { display: none; } .btn .badge { position: relative; top: -1px; } .alert { position: relative; padding: 1rem 1rem; margin-bottom: 1rem; border: 1px solid transparent; border-radius: 0.25rem; } .alert-heading { color: inherit; } .alert-link { font-weight: 700; } .alert-dismissible { padding-right: 3rem; } .alert-dismissible .btn-close { position: absolute; top: 0; right: 0; z-index: 2; padding: 1.25rem 1rem; } .alert-primary { color: rgb(7.8, 66, 151.8); background-color: rgb(206.6, 226, 254.6); border-color: rgb(182.4, 211.5, 254.4); } .alert-primary .alert-link { color: rgb(6.24, 52.8, 121.44); } .alert-secondary { color: rgb(64.8, 70.2, 75); background-color: rgb(225.6, 227.4, 229); border-color: rgb(210.9, 213.6, 216); } .alert-secondary .alert-link { color: rgb(51.84, 56.16, 60); } .alert-success { color: rgb(15, 81, 50.4); background-color: rgb(209, 231, 220.8); border-color: rgb(186, 219, 203.7); } .alert-success .alert-link { color: rgb(12, 64.8, 40.32); } .alert-info { color: rgb(5.2, 80.8, 96); background-color: rgb(206.6, 244.4, 252); border-color: rgb(182.4, 239.1, 250.5); } .alert-info .alert-link { color: rgb(4.16, 64.64, 76.8); } .alert-warning { color: rgb(102, 77.2, 2.8); background-color: rgb(255, 242.6, 205.4); border-color: rgb(255, 236.4, 180.6); } .alert-warning .alert-link { color: rgb(81.6, 61.76, 2.24); } .alert-danger { color: rgb(132, 31.8, 41.4); background-color: rgb(248, 214.6, 217.8); border-color: rgb(244.5, 194.4, 199.2); } .alert-danger .alert-link { color: rgb(105.6, 25.44, 33.12); } .alert-light { color: rgb(99.2, 99.6, 100); background-color: rgb(253.6, 253.8, 254); border-color: rgb(252.9, 253.2, 253.5); } .alert-light .alert-link { color: rgb(79.36, 79.68, 80); } .alert-dark { color: rgb(19.8, 22.2, 24.6); background-color: rgb(210.6, 211.4, 212.2); border-color: rgb(188.4, 189.6, 190.8); } .alert-dark .alert-link { color: rgb(15.84, 17.76, 19.68); } @keyframes progress-bar-stripes { 0% { background-position-x: 1rem; } } .progress { display: flex; height: 1rem; overflow: hidden; font-size: 0.75rem; background-color: #e9ecef; border-radius: 0.25rem; } .progress-bar { display: flex; flex-direction: column; justify-content: center; overflow: hidden; color: #fff; text-align: center; white-space: nowrap; background-color: #0d6efd; transition: width 0.6s ease; } @media (prefers-reduced-motion: reduce) { .progress-bar { transition: none; } } .progress-bar-striped { background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-size: 1rem 1rem; } .progress-bar-animated { animation: 1s linear infinite progress-bar-stripes; } @media (prefers-reduced-motion: reduce) { .progress-bar-animated { animation: none; } } .list-group { display: flex; flex-direction: column; padding-left: 0; margin-bottom: 0; border-radius: 0.25rem; } .list-group-numbered { list-style-type: none; counter-reset: section; } .list-group-numbered > li::before { content: counters(section, ".") ". "; counter-increment: section; } .list-group-item-action { width: 100%; color: #495057; text-align: inherit; } .list-group-item-action:hover, .list-group-item-action:focus { z-index: 1; color: #495057; text-decoration: none; background-color: #f8f9fa; } .list-group-item-action:active { color: #212529; background-color: #e9ecef; } .list-group-item { position: relative; display: block; padding: 0.5rem 1rem; color: #212529; text-decoration: none; background-color: #fff; border: 1px solid rgba(0, 0, 0, 0.125); } .list-group-item:first-child { border-top-left-radius: inherit; border-top-right-radius: inherit; } .list-group-item:last-child { border-bottom-right-radius: inherit; border-bottom-left-radius: inherit; } .list-group-item.disabled, .list-group-item:disabled { color: #6c757d; pointer-events: none; background-color: #fff; } .list-group-item.active { z-index: 2; color: #fff; background-color: #0d6efd; border-color: #0d6efd; } .list-group-item + .list-group-item { border-top-width: 0; } .list-group-item + .list-group-item.active { margin-top: -1px; border-top-width: 1px; } .list-group-horizontal { flex-direction: row; } .list-group-horizontal > .list-group-item:first-child { border-bottom-left-radius: 0.25rem; border-top-right-radius: 0; } .list-group-horizontal > .list-group-item:last-child { border-top-right-radius: 0.25rem; border-bottom-left-radius: 0; } .list-group-horizontal > .list-group-item.active { margin-top: 0; } .list-group-horizontal > .list-group-item + .list-group-item { border-top-width: 1px; border-left-width: 0; } .list-group-horizontal > .list-group-item + .list-group-item.active { margin-left: -1px; border-left-width: 1px; } @media (min-width: 576px) { .list-group-horizontal-sm { flex-direction: row; } .list-group-horizontal-sm > .list-group-item:first-child { border-bottom-left-radius: 0.25rem; border-top-right-radius: 0; } .list-group-horizontal-sm > .list-group-item:last-child { border-top-right-radius: 0.25rem; border-bottom-left-radius: 0; } .list-group-horizontal-sm > .list-group-item.active { margin-top: 0; } .list-group-horizontal-sm > .list-group-item + .list-group-item { border-top-width: 1px; border-left-width: 0; } .list-group-horizontal-sm > .list-group-item + .list-group-item.active { margin-left: -1px; border-left-width: 1px; } } @media (min-width: 768px) { .list-group-horizontal-md { flex-direction: row; } .list-group-horizontal-md > .list-group-item:first-child { border-bottom-left-radius: 0.25rem; border-top-right-radius: 0; } .list-group-horizontal-md > .list-group-item:last-child { border-top-right-radius: 0.25rem; border-bottom-left-radius: 0; } .list-group-horizontal-md > .list-group-item.active { margin-top: 0; } .list-group-horizontal-md > .list-group-item + .list-group-item { border-top-width: 1px; border-left-width: 0; } .list-group-horizontal-md > .list-group-item + .list-group-item.active { margin-left: -1px; border-left-width: 1px; } } @media (min-width: 992px) { .list-group-horizontal-lg { flex-direction: row; } .list-group-horizontal-lg > .list-group-item:first-child { border-bottom-left-radius: 0.25rem; border-top-right-radius: 0; } .list-group-horizontal-lg > .list-group-item:last-child { border-top-right-radius: 0.25rem; border-bottom-left-radius: 0; } .list-group-horizontal-lg > .list-group-item.active { margin-top: 0; } .list-group-horizontal-lg > .list-group-item + .list-group-item { border-top-width: 1px; border-left-width: 0; } .list-group-horizontal-lg > .list-group-item + .list-group-item.active { margin-left: -1px; border-left-width: 1px; } } @media (min-width: 1200px) { .list-group-horizontal-xl { flex-direction: row; } .list-group-horizontal-xl > .list-group-item:first-child { border-bottom-left-radius: 0.25rem; border-top-right-radius: 0; } .list-group-horizontal-xl > .list-group-item:last-child { border-top-right-radius: 0.25rem; border-bottom-left-radius: 0; } .list-group-horizontal-xl > .list-group-item.active { margin-top: 0; } .list-group-horizontal-xl > .list-group-item + .list-group-item { border-top-width: 1px; border-left-width: 0; } .list-group-horizontal-xl > .list-group-item + .list-group-item.active { margin-left: -1px; border-left-width: 1px; } } @media (min-width: 1400px) { .list-group-horizontal-xxl { flex-direction: row; } .list-group-horizontal-xxl > .list-group-item:first-child { border-bottom-left-radius: 0.25rem; border-top-right-radius: 0; } .list-group-horizontal-xxl > .list-group-item:last-child { border-top-right-radius: 0.25rem; border-bottom-left-radius: 0; } .list-group-horizontal-xxl > .list-group-item.active { margin-top: 0; } .list-group-horizontal-xxl > .list-group-item + .list-group-item { border-top-width: 1px; border-left-width: 0; } .list-group-horizontal-xxl > .list-group-item + .list-group-item.active { margin-left: -1px; border-left-width: 1px; } } .list-group-flush { border-radius: 0; } .list-group-flush > .list-group-item { border-width: 0 0 1px; } .list-group-flush > .list-group-item:last-child { border-bottom-width: 0; } .list-group-item-primary { color: rgb(7.8, 66, 151.8); background-color: rgb(206.6, 226, 254.6); } .list-group-item-primary.list-group-item-action:hover, .list-group-item-primary.list-group-item-action:focus { color: rgb(7.8, 66, 151.8); background-color: rgb(185.94, 203.4, 229.14); } .list-group-item-primary.list-group-item-action.active { color: #fff; background-color: rgb(7.8, 66, 151.8); border-color: rgb(7.8, 66, 151.8); } .list-group-item-secondary { color: rgb(64.8, 70.2, 75); background-color: rgb(225.6, 227.4, 229); } .list-group-item-secondary.list-group-item-action:hover, .list-group-item-secondary.list-group-item-action:focus { color: rgb(64.8, 70.2, 75); background-color: rgb(203.04, 204.66, 206.1); } .list-group-item-secondary.list-group-item-action.active { color: #fff; background-color: rgb(64.8, 70.2, 75); border-color: rgb(64.8, 70.2, 75); } .list-group-item-success { color: rgb(15, 81, 50.4); background-color: rgb(209, 231, 220.8); } .list-group-item-success.list-group-item-action:hover, .list-group-item-success.list-group-item-action:focus { color: rgb(15, 81, 50.4); background-color: rgb(188.1, 207.9, 198.72); } .list-group-item-success.list-group-item-action.active { color: #fff; background-color: rgb(15, 81, 50.4); border-color: rgb(15, 81, 50.4); } .list-group-item-info { color: rgb(5.2, 80.8, 96); background-color: rgb(206.6, 244.4, 252); } .list-group-item-info.list-group-item-action:hover, .list-group-item-info.list-group-item-action:focus { color: rgb(5.2, 80.8, 96); background-color: rgb(185.94, 219.96, 226.8); } .list-group-item-info.list-group-item-action.active { color: #fff; background-color: rgb(5.2, 80.8, 96); border-color: rgb(5.2, 80.8, 96); } .list-group-item-warning { color: rgb(102, 77.2, 2.8); background-color: rgb(255, 242.6, 205.4); } .list-group-item-warning.list-group-item-action:hover, .list-group-item-warning.list-group-item-action:focus { color: rgb(102, 77.2, 2.8); background-color: rgb(229.5, 218.34, 184.86); } .list-group-item-warning.list-group-item-action.active { color: #fff; background-color: rgb(102, 77.2, 2.8); border-color: rgb(102, 77.2, 2.8); } .list-group-item-danger { color: rgb(132, 31.8, 41.4); background-color: rgb(248, 214.6, 217.8); } .list-group-item-danger.list-group-item-action:hover, .list-group-item-danger.list-group-item-action:focus { color: rgb(132, 31.8, 41.4); background-color: rgb(223.2, 193.14, 196.02); } .list-group-item-danger.list-group-item-action.active { color: #fff; background-color: rgb(132, 31.8, 41.4); border-color: rgb(132, 31.8, 41.4); } .list-group-item-light { color: rgb(99.2, 99.6, 100); background-color: rgb(253.6, 253.8, 254); } .list-group-item-light.list-group-item-action:hover, .list-group-item-light.list-group-item-action:focus { color: rgb(99.2, 99.6, 100); background-color: rgb(228.24, 228.42, 228.6); } .list-group-item-light.list-group-item-action.active { color: #fff; background-color: rgb(99.2, 99.6, 100); border-color: rgb(99.2, 99.6, 100); } .list-group-item-dark { color: rgb(19.8, 22.2, 24.6); background-color: rgb(210.6, 211.4, 212.2); } .list-group-item-dark.list-group-item-action:hover, .list-group-item-dark.list-group-item-action:focus { color: rgb(19.8, 22.2, 24.6); background-color: rgb(189.54, 190.26, 190.98); } .list-group-item-dark.list-group-item-action.active { color: #fff; background-color: rgb(19.8, 22.2, 24.6); border-color: rgb(19.8, 22.2, 24.6); } .btn-close { box-sizing: content-box; width: 1em; height: 1em; padding: 0.25em 0.25em; color: #000; background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat; border: 0; border-radius: 0.25rem; opacity: 0.5; } .btn-close:hover { color: #000; text-decoration: none; opacity: 0.75; } .btn-close:focus { outline: 0; box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); opacity: 1; } .btn-close:disabled, .btn-close.disabled { pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; opacity: 0.25; } .btn-close-white { filter: invert(1) grayscale(100%) brightness(200%); } .toast { width: 350px; max-width: 100%; font-size: 0.875rem; pointer-events: auto; background-color: rgba(255, 255, 255, 0.85); background-clip: padding-box; border: 1px solid rgba(0, 0, 0, 0.1); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); border-radius: 0.25rem; } .toast:not(.showing):not(.show) { opacity: 0; } .toast.hide { display: none; } .toast-container { width: -moz-max-content; width: max-content; max-width: 100%; pointer-events: none; } .toast-container > :not(:last-child) { margin-bottom: 0.75rem; } .toast-header { display: flex; align-items: center; padding: 0.5rem 0.75rem; color: #6c757d; background-color: rgba(255, 255, 255, 0.85); background-clip: padding-box; border-bottom: 1px solid rgba(0, 0, 0, 0.05); border-top-left-radius: calc(0.25rem - 1px); border-top-right-radius: calc(0.25rem - 1px); } .toast-header .btn-close { margin-right: -0.375rem; margin-left: 0.75rem; } .toast-body { padding: 0.75rem; word-wrap: break-word; } .modal { position: fixed; top: 0; left: 0; z-index: 1060; display: none; width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; outline: 0; } .modal-dialog { position: relative; width: auto; margin: 0.5rem; pointer-events: none; } .modal.fade .modal-dialog { transition: transform 0.3s ease-out; } @media (prefers-reduced-motion: reduce) { .modal.fade .modal-dialog { transition: none; } } .modal.fade .modal-dialog { transform: translate(0, -50px); } .modal.show .modal-dialog { transform: none; } .modal.modal-static .modal-dialog { transform: scale(1.02); } .modal-dialog-scrollable { height: calc(100% - 1rem); } .modal-dialog-scrollable .modal-content { max-height: 100%; overflow: hidden; } .modal-dialog-scrollable .modal-body { overflow-y: auto; } .modal-dialog-centered { display: flex; align-items: center; min-height: calc(100% - 1rem); } .modal-content { position: relative; display: flex; flex-direction: column; width: 100%; pointer-events: auto; background-color: #fff; background-clip: padding-box; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 0.3rem; outline: 0; } .modal-backdrop { position: fixed; top: 0; left: 0; z-index: 1040; width: 100vw; height: 100vh; background-color: #000; } .modal-backdrop.fade { opacity: 0; } .modal-backdrop.show { opacity: 0.5; } .modal-header { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; padding: 1rem 1rem; border-bottom: 1px solid #dee2e6; border-top-left-radius: calc(0.3rem - 1px); border-top-right-radius: calc(0.3rem - 1px); } .modal-header .btn-close { padding: 0.5rem 0.5rem; margin: -0.5rem -0.5rem -0.5rem auto; } .modal-title { margin-bottom: 0; line-height: 1.5; } .modal-body { position: relative; flex: 1 1 auto; padding: 1rem; } .modal-footer { display: flex; flex-wrap: wrap; flex-shrink: 0; align-items: center; justify-content: flex-end; padding: 0.75rem; border-top: 1px solid #dee2e6; border-bottom-right-radius: calc(0.3rem - 1px); border-bottom-left-radius: calc(0.3rem - 1px); } .modal-footer > * { margin: 0.25rem; } @media (min-width: 576px) { .modal-dialog { max-width: 500px; margin: 1.75rem auto; } .modal-dialog-scrollable { height: calc(100% - 3.5rem); } .modal-dialog-centered { min-height: calc(100% - 3.5rem); } .modal-sm { max-width: 300px; } } @media (min-width: 992px) { .modal-lg, .modal-xl { max-width: 800px; } } @media (min-width: 1200px) { .modal-xl { max-width: 1140px; } } .modal-fullscreen { width: 100vw; max-width: none; height: 100%; margin: 0; } .modal-fullscreen .modal-content { height: 100%; border: 0; border-radius: 0; } .modal-fullscreen .modal-header { border-radius: 0; } .modal-fullscreen .modal-body { overflow-y: auto; } .modal-fullscreen .modal-footer { border-radius: 0; } @media (max-width: 575.98px) { .modal-fullscreen-sm-down { width: 100vw; max-width: none; height: 100%; margin: 0; } .modal-fullscreen-sm-down .modal-content { height: 100%; border: 0; border-radius: 0; } .modal-fullscreen-sm-down .modal-header { border-radius: 0; } .modal-fullscreen-sm-down .modal-body { overflow-y: auto; } .modal-fullscreen-sm-down .modal-footer { border-radius: 0; } } @media (max-width: 767.98px) { .modal-fullscreen-md-down { width: 100vw; max-width: none; height: 100%; margin: 0; } .modal-fullscreen-md-down .modal-content { height: 100%; border: 0; border-radius: 0; } .modal-fullscreen-md-down .modal-header { border-radius: 0; } .modal-fullscreen-md-down .modal-body { overflow-y: auto; } .modal-fullscreen-md-down .modal-footer { border-radius: 0; } } @media (max-width: 991.98px) { .modal-fullscreen-lg-down { width: 100vw; max-width: none; height: 100%; margin: 0; } .modal-fullscreen-lg-down .modal-content { height: 100%; border: 0; border-radius: 0; } .modal-fullscreen-lg-down .modal-header { border-radius: 0; } .modal-fullscreen-lg-down .modal-body { overflow-y: auto; } .modal-fullscreen-lg-down .modal-footer { border-radius: 0; } } @media (max-width: 1199.98px) { .modal-fullscreen-xl-down { width: 100vw; max-width: none; height: 100%; margin: 0; } .modal-fullscreen-xl-down .modal-content { height: 100%; border: 0; border-radius: 0; } .modal-fullscreen-xl-down .modal-header { border-radius: 0; } .modal-fullscreen-xl-down .modal-body { overflow-y: auto; } .modal-fullscreen-xl-down .modal-footer { border-radius: 0; } } @media (max-width: 1399.98px) { .modal-fullscreen-xxl-down { width: 100vw; max-width: none; height: 100%; margin: 0; } .modal-fullscreen-xxl-down .modal-content { height: 100%; border: 0; border-radius: 0; } .modal-fullscreen-xxl-down .modal-header { border-radius: 0; } .modal-fullscreen-xxl-down .modal-body { overflow-y: auto; } .modal-fullscreen-xxl-down .modal-footer { border-radius: 0; } } .modal-fullscreen { width: 100vw; max-width: none; height: 100%; margin: 0; } .modal-fullscreen .modal-content { height: 100%; border: 0; border-radius: 0; } .modal-fullscreen .modal-header { border-radius: 0; } .modal-fullscreen .modal-body { overflow-y: auto; } .modal-fullscreen .modal-footer { border-radius: 0; } @media (max-width: 575.98px) { .modal-fullscreen-sm-down { width: 100vw; max-width: none; height: 100%; margin: 0; } .modal-fullscreen-sm-down .modal-content { height: 100%; border: 0; border-radius: 0; } .modal-fullscreen-sm-down .modal-header { border-radius: 0; } .modal-fullscreen-sm-down .modal-body { overflow-y: auto; } .modal-fullscreen-sm-down .modal-footer { border-radius: 0; } } @media (max-width: 767.98px) { .modal-fullscreen-md-down { width: 100vw; max-width: none; height: 100%; margin: 0; } .modal-fullscreen-md-down .modal-content { height: 100%; border: 0; border-radius: 0; } .modal-fullscreen-md-down .modal-header { border-radius: 0; } .modal-fullscreen-md-down .modal-body { overflow-y: auto; } .modal-fullscreen-md-down .modal-footer { border-radius: 0; } } @media (max-width: 991.98px) { .modal-fullscreen-lg-down { width: 100vw; max-width: none; height: 100%; margin: 0; } .modal-fullscreen-lg-down .modal-content { height: 100%; border: 0; border-radius: 0; } .modal-fullscreen-lg-down .modal-header { border-radius: 0; } .modal-fullscreen-lg-down .modal-body { overflow-y: auto; } .modal-fullscreen-lg-down .modal-footer { border-radius: 0; } } @media (max-width: 1199.98px) { .modal-fullscreen-xl-down { width: 100vw; max-width: none; height: 100%; margin: 0; } .modal-fullscreen-xl-down .modal-content { height: 100%; border: 0; border-radius: 0; } .modal-fullscreen-xl-down .modal-header { border-radius: 0; } .modal-fullscreen-xl-down .modal-body { overflow-y: auto; } .modal-fullscreen-xl-down .modal-footer { border-radius: 0; } } @media (max-width: 1399.98px) { .modal-fullscreen-xxl-down { width: 100vw; max-width: none; height: 100%; margin: 0; } .modal-fullscreen-xxl-down .modal-content { height: 100%; border: 0; border-radius: 0; } .modal-fullscreen-xxl-down .modal-header { border-radius: 0; } .modal-fullscreen-xxl-down .modal-body { overflow-y: auto; } .modal-fullscreen-xxl-down .modal-footer { border-radius: 0; } } .tooltip { position: absolute; z-index: 1080; display: block; margin: 0; font-family: var(--bs-font-sans-serif); font-style: normal; font-weight: 400; line-height: 1.5; text-align: left; text-align: start; text-decoration: none; text-shadow: none; text-transform: none; letter-spacing: normal; word-break: normal; word-spacing: normal; white-space: normal; line-break: auto; font-size: 0.875rem; word-wrap: break-word; opacity: 0; } .tooltip.show { opacity: 0.9; } .tooltip .tooltip-arrow { position: absolute; display: block; width: 0.8rem; height: 0.4rem; } .tooltip .tooltip-arrow::before { position: absolute; content: ""; border-color: transparent; border-style: solid; } .bs-tooltip-top, .bs-tooltip-auto[data-popper-placement^=top] { padding: 0.4rem 0; } .bs-tooltip-top .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow { bottom: 0; } .bs-tooltip-top .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before { top: -1px; border-width: 0.4rem 0.4rem 0; border-top-color: #000; } .bs-tooltip-end, .bs-tooltip-auto[data-popper-placement^=right] { padding: 0 0.4rem; } .bs-tooltip-end .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow { left: 0; width: 0.4rem; height: 0.8rem; } .bs-tooltip-end .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before { right: -1px; border-width: 0.4rem 0.4rem 0.4rem 0; border-right-color: #000; } .bs-tooltip-bottom, .bs-tooltip-auto[data-popper-placement^=bottom] { padding: 0.4rem 0; } .bs-tooltip-bottom .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow { top: 0; } .bs-tooltip-bottom .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before { bottom: -1px; border-width: 0 0.4rem 0.4rem; border-bottom-color: #000; } .bs-tooltip-start, .bs-tooltip-auto[data-popper-placement^=left] { padding: 0 0.4rem; } .bs-tooltip-start .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow { right: 0; width: 0.4rem; height: 0.8rem; } .bs-tooltip-start .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before { left: -1px; border-width: 0.4rem 0 0.4rem 0.4rem; border-left-color: #000; } .tooltip-inner { max-width: 200px; padding: 0.25rem 0.5rem; color: #fff; text-align: center; background-color: #000; border-radius: 0.25rem; } .popover { position: absolute; top: 0; left: 0 /* rtl:ignore */; z-index: 1070; display: block; max-width: 276px; font-family: var(--bs-font-sans-serif); font-style: normal; font-weight: 400; line-height: 1.5; text-align: left; text-align: start; text-decoration: none; text-shadow: none; text-transform: none; letter-spacing: normal; word-break: normal; word-spacing: normal; white-space: normal; line-break: auto; font-size: 0.875rem; word-wrap: break-word; background-color: #fff; background-clip: padding-box; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 0.3rem; } .popover .popover-arrow { position: absolute; display: block; width: 1rem; height: 0.5rem; } .popover .popover-arrow::before, .popover .popover-arrow::after { position: absolute; display: block; content: ""; border-color: transparent; border-style: solid; } .bs-popover-top > .popover-arrow, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow { bottom: calc(-0.5rem - 1px); } .bs-popover-top > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before { bottom: 0; border-width: 0.5rem 0.5rem 0; border-top-color: rgba(0, 0, 0, 0.25); } .bs-popover-top > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow::after { bottom: 1px; border-width: 0.5rem 0.5rem 0; border-top-color: #fff; } .bs-popover-end > .popover-arrow, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow { left: calc(-0.5rem - 1px); width: 0.5rem; height: 1rem; } .bs-popover-end > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before { left: 0; border-width: 0.5rem 0.5rem 0.5rem 0; border-right-color: rgba(0, 0, 0, 0.25); } .bs-popover-end > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow::after { left: 1px; border-width: 0.5rem 0.5rem 0.5rem 0; border-right-color: #fff; } .bs-popover-bottom > .popover-arrow, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow { top: calc(-0.5rem - 1px); } .bs-popover-bottom > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before { top: 0; border-width: 0 0.5rem 0.5rem 0.5rem; border-bottom-color: rgba(0, 0, 0, 0.25); } .bs-popover-bottom > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after { top: 1px; border-width: 0 0.5rem 0.5rem 0.5rem; border-bottom-color: #fff; } .bs-popover-bottom .popover-header::before, .bs-popover-auto[data-popper-placement^=bottom] .popover-header::before { position: absolute; top: 0; left: 50%; display: block; width: 1rem; margin-left: -0.5rem; content: ""; border-bottom: 1px solid rgb(239.7, 239.7, 239.7); } .bs-popover-start > .popover-arrow, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow { right: calc(-0.5rem - 1px); width: 0.5rem; height: 1rem; } .bs-popover-start > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before { right: 0; border-width: 0.5rem 0 0.5rem 0.5rem; border-left-color: rgba(0, 0, 0, 0.25); } .bs-popover-start > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow::after { right: 1px; border-width: 0.5rem 0 0.5rem 0.5rem; border-left-color: #fff; } .popover-header { padding: 0.5rem 1rem; margin-bottom: 0; font-size: 1rem; background-color: rgb(239.7, 239.7, 239.7); border-bottom: 1px solid rgba(0, 0, 0, 0.2); border-top-left-radius: calc(0.3rem - 1px); border-top-right-radius: calc(0.3rem - 1px); } .popover-header:empty { display: none; } .popover-body { padding: 1rem 1rem; color: #212529; } .carousel { position: relative; } .carousel.pointer-event { touch-action: pan-y; } .carousel-inner { position: relative; width: 100%; overflow: hidden; } .carousel-inner::after { display: block; clear: both; content: ""; } .carousel-item { position: relative; display: none; float: left; width: 100%; margin-right: -100%; backface-visibility: hidden; transition: transform 0.6s ease-in-out; } @media (prefers-reduced-motion: reduce) { .carousel-item { transition: none; } } .carousel-item.active, .carousel-item-next, .carousel-item-prev { display: block; } /* rtl:begin:ignore */ .carousel-item-next:not(.carousel-item-start), .active.carousel-item-end { transform: translateX(100%); } .carousel-item-prev:not(.carousel-item-end), .active.carousel-item-start { transform: translateX(-100%); } /* rtl:end:ignore */ .carousel-fade .carousel-item { opacity: 0; transition-property: opacity; transform: none; } .carousel-fade .carousel-item.active, .carousel-fade .carousel-item-next.carousel-item-start, .carousel-fade .carousel-item-prev.carousel-item-end { z-index: 1; opacity: 1; } .carousel-fade .active.carousel-item-start, .carousel-fade .active.carousel-item-end { z-index: 0; opacity: 0; transition: opacity 0s 0.6s; } @media (prefers-reduced-motion: reduce) { .carousel-fade .active.carousel-item-start, .carousel-fade .active.carousel-item-end { transition: none; } } .carousel-control-prev, .carousel-control-next { position: absolute; top: 0; bottom: 0; z-index: 1; display: flex; align-items: center; justify-content: center; width: 15%; padding: 0; color: #fff; text-align: center; background: none; border: 0; opacity: 0.5; transition: opacity 0.15s ease; } @media (prefers-reduced-motion: reduce) { .carousel-control-prev, .carousel-control-next { transition: none; } } .carousel-control-prev:hover, .carousel-control-prev:focus, .carousel-control-next:hover, .carousel-control-next:focus { color: #fff; text-decoration: none; outline: 0; opacity: 0.9; } .carousel-control-prev { left: 0; } .carousel-control-next { right: 0; } .carousel-control-prev-icon, .carousel-control-next-icon { display: inline-block; width: 2rem; height: 2rem; background-repeat: no-repeat; background-position: 50%; background-size: 100% 100%; } /* rtl:options: { "autoRename": true, "stringMap":[ { "name"    : "prev-next", "search"  : "prev", "replace" : "next" } ] } */ .carousel-control-prev-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e"); } .carousel-control-next-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); } .carousel-indicators { position: absolute; right: 0; bottom: 0; left: 0; z-index: 2; display: flex; justify-content: center; padding: 0; margin-right: 15%; margin-bottom: 1rem; margin-left: 15%; list-style: none; } .carousel-indicators [data-bs-target] { box-sizing: content-box; flex: 0 1 auto; width: 30px; height: 3px; padding: 0; margin-right: 3px; margin-left: 3px; text-indent: -999px; cursor: pointer; background-color: #fff; background-clip: padding-box; border: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; opacity: 0.5; transition: opacity 0.6s ease; } @media (prefers-reduced-motion: reduce) { .carousel-indicators [data-bs-target] { transition: none; } } .carousel-indicators .active { opacity: 1; } .carousel-caption { position: absolute; right: 15%; bottom: 1.25rem; left: 15%; padding-top: 1.25rem; padding-bottom: 1.25rem; color: #fff; text-align: center; } .carousel-dark .carousel-control-prev-icon, .carousel-dark .carousel-control-next-icon { filter: invert(1) grayscale(100); } .carousel-dark .carousel-indicators [data-bs-target] { background-color: #000; } .carousel-dark .carousel-caption { color: #000; } @keyframes spinner-border { to { transform: rotate(360deg) /* rtl:ignore */; } } .spinner-border { display: inline-block; width: 2rem; height: 2rem; vertical-align: -0.125em; border: 0.25em solid currentColor; border-right-color: transparent; border-radius: 50%; animation: 0.75s linear infinite spinner-border; } .spinner-border-sm { width: 1rem; height: 1rem; border-width: 0.2em; } @keyframes spinner-grow { 0% { transform: scale(0); } 50% { opacity: 1; transform: none; } } .spinner-grow { display: inline-block; width: 2rem; height: 2rem; vertical-align: -0.125em; background-color: currentColor; border-radius: 50%; opacity: 0; animation: 0.75s linear infinite spinner-grow; } .spinner-grow-sm { width: 1rem; height: 1rem; } @media (prefers-reduced-motion: reduce) { .spinner-border, .spinner-grow { animation-duration: 1.5s; } } .offcanvas { position: fixed; bottom: 0; z-index: 1050; display: flex; flex-direction: column; max-width: 100%; visibility: hidden; background-color: #fff; background-clip: padding-box; outline: 0; transition: transform 0.3s ease-in-out; } @media (prefers-reduced-motion: reduce) { .offcanvas { transition: none; } } .offcanvas-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1rem; } .offcanvas-header .btn-close { padding: 0.5rem 0.5rem; margin-top: -0.5rem; margin-right: -0.5rem; margin-bottom: -0.5rem; } .offcanvas-title { margin-bottom: 0; line-height: 1.5; } .offcanvas-body { flex-grow: 1; padding: 1rem 1rem; overflow-y: auto; } .offcanvas-start { top: 0; left: 0; width: 400px; border-right: 1px solid rgba(0, 0, 0, 0.2); transform: translateX(-100%); } .offcanvas-end { top: 0; right: 0; width: 400px; border-left: 1px solid rgba(0, 0, 0, 0.2); transform: translateX(100%); } .offcanvas-top { top: 0; right: 0; left: 0; height: 30vh; max-height: 100%; border-bottom: 1px solid rgba(0, 0, 0, 0.2); transform: translateY(-100%); } .offcanvas-bottom { right: 0; left: 0; height: 30vh; max-height: 100%; border-top: 1px solid rgba(0, 0, 0, 0.2); transform: translateY(100%); } .clearfix::after { display: block; clear: both; content: ""; } .link-primary { color: #0d6efd; } .link-primary:hover, .link-primary:focus { color: rgb(10.4, 88, 202.4); } .link-secondary { color: #6c757d; } .link-secondary:hover, .link-secondary:focus { color: rgb(86.4, 93.6, 100); } .link-success { color: #198754; } .link-success:hover, .link-success:focus { color: rgb(20, 108, 67.2); } .link-info { color: #0dcaf0; } .link-info:hover, .link-info:focus { color: rgb(61.4, 212.6, 243); } .link-warning { color: #ffc107; } .link-warning:hover, .link-warning:focus { color: rgb(255, 205.4, 56.6); } .link-danger { color: #dc3545; } .link-danger:hover, .link-danger:focus { color: rgb(176, 42.4, 55.2); } .link-light { color: #f8f9fa; } .link-light:hover, .link-light:focus { color: rgb(249.4, 250.2, 251); } .link-dark { color: #212529; } .link-dark:hover, .link-dark:focus { color: rgb(26.4, 29.6, 32.8); } .ratio { position: relative; width: 100%; } .ratio::before { display: block; padding-top: var(--bs-aspect-ratio); content: ""; } .ratio > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .ratio-1x1 { --bs-aspect-ratio: 100%; } .ratio-4x3 { --bs-aspect-ratio: 75%; } .ratio-16x9 { --bs-aspect-ratio: 56.25%; } .ratio-21x9 { --bs-aspect-ratio: 42.8571428571%; } .fixed-top { position: fixed; top: 0; right: 0; left: 0; z-index: 1030; } .fixed-bottom { position: fixed; right: 0; bottom: 0; left: 0; z-index: 1030; } .sticky-top { position: sticky; top: 0; z-index: 1020; } @media (min-width: 576px) { .sticky-sm-top { position: sticky; top: 0; z-index: 1020; } } @media (min-width: 768px) { .sticky-md-top { position: sticky; top: 0; z-index: 1020; } } @media (min-width: 992px) { .sticky-lg-top { position: sticky; top: 0; z-index: 1020; } } @media (min-width: 1200px) { .sticky-xl-top { position: sticky; top: 0; z-index: 1020; } } @media (min-width: 1400px) { .sticky-xxl-top { position: sticky; top: 0; z-index: 1020; } } .visually-hidden, .visually-hidden-focusable:not(:focus):not(:focus-within) { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .stretched-link::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; content: ""; } .text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .align-baseline { vertical-align: baseline !important; } .align-top { vertical-align: top !important; } .align-middle { vertical-align: middle !important; } .align-bottom { vertical-align: bottom !important; } .align-text-bottom { vertical-align: text-bottom !important; } .align-text-top { vertical-align: text-top !important; } .float-start { float: left !important; } .float-end { float: right !important; } .float-none { float: none !important; } .overflow-auto { overflow: auto !important; } .overflow-hidden { overflow: hidden !important; } .overflow-visible { overflow: visible !important; } .overflow-scroll { overflow: scroll !important; } .d-inline { display: inline !important; } .d-inline-block { display: inline-block !important; } .d-block { display: block !important; } .d-grid { display: grid !important; } .d-table { display: table !important; } .d-table-row { display: table-row !important; } .d-table-cell { display: table-cell !important; } .d-flex { display: flex !important; } .d-inline-flex { display: inline-flex !important; } .d-none { display: none !important; } .shadow { box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; } .shadow-sm { box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; } .shadow-lg { box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important; } .shadow-none { box-shadow: none !important; } .position-static { position: static !important; } .position-relative { position: relative !important; } .position-absolute { position: absolute !important; } .position-fixed { position: fixed !important; } .position-sticky { position: sticky !important; } .top-0 { top: 0 !important; } .top-50 { top: 50% !important; } .top-100 { top: 100% !important; } .bottom-0 { bottom: 0 !important; } .bottom-50 { bottom: 50% !important; } .bottom-100 { bottom: 100% !important; } .start-0 { left: 0 !important; } .start-50 { left: 50% !important; } .start-100 { left: 100% !important; } .end-0 { right: 0 !important; } .end-50 { right: 50% !important; } .end-100 { right: 100% !important; } .translate-middle { transform: translate(-50%, -50%) !important; } .translate-middle-x { transform: translateX(-50%) !important; } .translate-middle-y { transform: translateY(-50%) !important; } .border { border: 1px solid #dee2e6 !important; } .border-0 { border: 0 !important; } .border-top { border-top: 1px solid #dee2e6 !important; } .border-top-0 { border-top: 0 !important; } .border-end { border-right: 1px solid #dee2e6 !important; } .border-end-0 { border-right: 0 !important; } .border-bottom { border-bottom: 1px solid #dee2e6 !important; } .border-bottom-0 { border-bottom: 0 !important; } .border-start { border-left: 1px solid #dee2e6 !important; } .border-start-0 { border-left: 0 !important; } .border-primary { border-color: #0d6efd !important; } .border-secondary { border-color: #6c757d !important; } .border-success { border-color: #198754 !important; } .border-info { border-color: #0dcaf0 !important; } .border-warning { border-color: #ffc107 !important; } .border-danger { border-color: #dc3545 !important; } .border-light { border-color: #f8f9fa !important; } .border-dark { border-color: #212529 !important; } .border-white { border-color: #fff !important; } .border-1 { border-width: 1px !important; } .border-2 { border-width: 2px !important; } .border-3 { border-width: 3px !important; } .border-4 { border-width: 4px !important; } .border-5 { border-width: 5px !important; } .w-25 { width: 25% !important; } .w-50 { width: 50% !important; } .w-75 { width: 75% !important; } .w-100 { width: 100% !important; } .w-auto { width: auto !important; } .mw-100 { max-width: 100% !important; } .vw-100 { width: 100vw !important; } .min-vw-100 { min-width: 100vw !important; } .h-25 { height: 25% !important; } .h-50 { height: 50% !important; } .h-75 { height: 75% !important; } .h-100 { height: 100% !important; } .h-auto { height: auto !important; } .mh-100 { max-height: 100% !important; } .vh-100 { height: 100vh !important; } .min-vh-100 { min-height: 100vh !important; } .flex-fill { flex: 1 1 auto !important; } .flex-row { flex-direction: row !important; } .flex-column { flex-direction: column !important; } .flex-row-reverse { flex-direction: row-reverse !important; } .flex-column-reverse { flex-direction: column-reverse !important; } .flex-grow-0 { flex-grow: 0 !important; } .flex-grow-1 { flex-grow: 1 !important; } .flex-shrink-0 { flex-shrink: 0 !important; } .flex-shrink-1 { flex-shrink: 1 !important; } .flex-wrap { flex-wrap: wrap !important; } .flex-nowrap { flex-wrap: nowrap !important; } .flex-wrap-reverse { flex-wrap: wrap-reverse !important; } .gap-0 { gap: 0 !important; } .gap-1 { gap: 0.25rem !important; } .gap-2 { gap: 0.5rem !important; } .gap-3 { gap: 1rem !important; } .gap-4 { gap: 1.5rem !important; } .gap-5 { gap: 3rem !important; } .justify-content-start { justify-content: flex-start !important; } .justify-content-end { justify-content: flex-end !important; } .justify-content-center { justify-content: center !important; } .justify-content-between { justify-content: space-between !important; } .justify-content-around { justify-content: space-around !important; } .justify-content-evenly { justify-content: space-evenly !important; } .align-items-start { align-items: flex-start !important; } .align-items-end { align-items: flex-end !important; } .align-items-center { align-items: center !important; } .align-items-baseline { align-items: baseline !important; } .align-items-stretch { align-items: stretch !important; } .align-content-start { align-content: flex-start !important; } .align-content-end { align-content: flex-end !important; } .align-content-center { align-content: center !important; } .align-content-between { align-content: space-between !important; } .align-content-around { align-content: space-around !important; } .align-content-stretch { align-content: stretch !important; } .align-self-auto { align-self: auto !important; } .align-self-start { align-self: flex-start !important; } .align-self-end { align-self: flex-end !important; } .align-self-center { align-self: center !important; } .align-self-baseline { align-self: baseline !important; } .align-self-stretch { align-self: stretch !important; } .order-first { order: -1 !important; } .order-0 { order: 0 !important; } .order-1 { order: 1 !important; } .order-2 { order: 2 !important; } .order-3 { order: 3 !important; } .order-4 { order: 4 !important; } .order-5 { order: 5 !important; } .order-last { order: 6 !important; } .m-0 { margin: 0 !important; } .m-1 { margin: 0.25rem !important; } .m-2 { margin: 0.5rem !important; } .m-3 { margin: 1rem !important; } .m-4 { margin: 1.5rem !important; } .m-5 { margin: 3rem !important; } .m-auto { margin: auto !important; } .mx-0 { margin-right: 0 !important; margin-left: 0 !important; } .mx-1 { margin-right: 0.25rem !important; margin-left: 0.25rem !important; } .mx-2 { margin-right: 0.5rem !important; margin-left: 0.5rem !important; } .mx-3 { margin-right: 1rem !important; margin-left: 1rem !important; } .mx-4 { margin-right: 1.5rem !important; margin-left: 1.5rem !important; } .mx-5 { margin-right: 3rem !important; margin-left: 3rem !important; } .mx-auto { margin-right: auto !important; margin-left: auto !important; } .my-0 { margin-top: 0 !important; margin-bottom: 0 !important; } .my-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; } .my-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; } .my-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; } .my-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; } .my-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; } .my-auto { margin-top: auto !important; margin-bottom: auto !important; } .mt-0 { margin-top: 0 !important; } .mt-1 { margin-top: 0.25rem !important; } .mt-2 { margin-top: 0.5rem !important; } .mt-3 { margin-top: 1rem !important; } .mt-4 { margin-top: 1.5rem !important; } .mt-5 { margin-top: 3rem !important; } .mt-auto { margin-top: auto !important; } .me-0 { margin-right: 0 !important; } .me-1 { margin-right: 0.25rem !important; } .me-2 { margin-right: 0.5rem !important; } .me-3 { margin-right: 1rem !important; } .me-4 { margin-right: 1.5rem !important; } .me-5 { margin-right: 3rem !important; } .me-auto { margin-right: auto !important; } .mb-0 { margin-bottom: 0 !important; } .mb-1 { margin-bottom: 0.25rem !important; } .mb-2 { margin-bottom: 0.5rem !important; } .mb-3 { margin-bottom: 1rem !important; } .mb-4 { margin-bottom: 1.5rem !important; } .mb-5 { margin-bottom: 3rem !important; } .mb-auto { margin-bottom: auto !important; } .ms-0 { margin-left: 0 !important; } .ms-1 { margin-left: 0.25rem !important; } .ms-2 { margin-left: 0.5rem !important; } .ms-3 { margin-left: 1rem !important; } .ms-4 { margin-left: 1.5rem !important; } .ms-5 { margin-left: 3rem !important; } .ms-auto { margin-left: auto !important; } .p-0 { padding: 0 !important; } .p-1 { padding: 0.25rem !important; } .p-2 { padding: 0.5rem !important; } .p-3 { padding: 1rem !important; } .p-4 { padding: 1.5rem !important; } .p-5 { padding: 3rem !important; } .px-0 { padding-right: 0 !important; padding-left: 0 !important; } .px-1 { padding-right: 0.25rem !important; padding-left: 0.25rem !important; } .px-2 { padding-right: 0.5rem !important; padding-left: 0.5rem !important; } .px-3 { padding-right: 1rem !important; padding-left: 1rem !important; } .px-4 { padding-right: 1.5rem !important; padding-left: 1.5rem !important; } .px-5 { padding-right: 3rem !important; padding-left: 3rem !important; } .py-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; } .py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } .py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; } .py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } .py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; } .pt-0 { padding-top: 0 !important; } .pt-1 { padding-top: 0.25rem !important; } .pt-2 { padding-top: 0.5rem !important; } .pt-3 { padding-top: 1rem !important; } .pt-4 { padding-top: 1.5rem !important; } .pt-5 { padding-top: 3rem !important; } .pe-0 { padding-right: 0 !important; } .pe-1 { padding-right: 0.25rem !important; } .pe-2 { padding-right: 0.5rem !important; } .pe-3 { padding-right: 1rem !important; } .pe-4 { padding-right: 1.5rem !important; } .pe-5 { padding-right: 3rem !important; } .pb-0 { padding-bottom: 0 !important; } .pb-1 { padding-bottom: 0.25rem !important; } .pb-2 { padding-bottom: 0.5rem !important; } .pb-3 { padding-bottom: 1rem !important; } .pb-4 { padding-bottom: 1.5rem !important; } .pb-5 { padding-bottom: 3rem !important; } .ps-0 { padding-left: 0 !important; } .ps-1 { padding-left: 0.25rem !important; } .ps-2 { padding-left: 0.5rem !important; } .ps-3 { padding-left: 1rem !important; } .ps-4 { padding-left: 1.5rem !important; } .ps-5 { padding-left: 3rem !important; } .font-monospace { font-family: var(--bs-font-monospace) !important; } .fs-1 { font-size: calc(1.375rem + 1.5vw) !important; } .fs-2 { font-size: calc(1.325rem + 0.9vw) !important; } .fs-3 { font-size: calc(1.3rem + 0.6vw) !important; } .fs-4 { font-size: calc(1.275rem + 0.3vw) !important; } .fs-5 { font-size: 1.25rem !important; } .fs-6 { font-size: 1rem !important; } .fst-italic { font-style: italic !important; } .fst-normal { font-style: normal !important; } .fw-light { font-weight: 300 !important; } .fw-lighter { font-weight: lighter !important; } .fw-normal { font-weight: 400 !important; } .fw-bold { font-weight: 700 !important; } .fw-bolder { font-weight: bolder !important; } .lh-1 { line-height: 1 !important; } .lh-sm { line-height: 1.25 !important; } .lh-base { line-height: 1.5 !important; } .lh-lg { line-height: 2 !important; } .text-start { text-align: left !important; } .text-end { text-align: right !important; } .text-center { text-align: center !important; } .text-decoration-none { text-decoration: none !important; } .text-decoration-underline { text-decoration: underline !important; } .text-decoration-line-through { text-decoration: line-through !important; } .text-lowercase { text-transform: lowercase !important; } .text-uppercase { text-transform: uppercase !important; } .text-capitalize { text-transform: capitalize !important; } .text-wrap { white-space: normal !important; } .text-nowrap { white-space: nowrap !important; } /* rtl:begin:remove */ .text-break { word-wrap: break-word !important; word-break: break-word !important; } /* rtl:end:remove */ .text-primary { color: #0d6efd !important; } .text-secondary { color: #6c757d !important; } .text-success { color: #198754 !important; } .text-info { color: #0dcaf0 !important; } .text-warning { color: #ffc107 !important; } .text-danger { color: #dc3545 !important; } .text-light { color: #f8f9fa !important; } .text-dark { color: #212529 !important; } .text-white { color: #fff !important; } .text-body { color: #212529 !important; } .text-muted { color: #6c757d !important; } .text-black-50 { color: rgba(0, 0, 0, 0.5) !important; } .text-white-50 { color: rgba(255, 255, 255, 0.5) !important; } .text-reset { color: inherit !important; } .bg-primary { background-color: #0d6efd !important; } .bg-secondary { background-color: #6c757d !important; } .bg-success { background-color: #198754 !important; } .bg-info { background-color: #0dcaf0 !important; } .bg-warning { background-color: #ffc107 !important; } .bg-danger { background-color: #dc3545 !important; } .bg-light { background-color: #f8f9fa !important; } .bg-dark { background-color: #212529 !important; } .bg-body { background-color: #fff !important; } .bg-white { background-color: #fff !important; } .bg-transparent { background-color: transparent !important; } .bg-gradient { background-image: var(--bs-gradient) !important; } .user-select-all { -webkit-user-select: all !important; -moz-user-select: all !important; user-select: all !important; } .user-select-auto { -webkit-user-select: auto !important; -moz-user-select: auto !important; user-select: auto !important; } .user-select-none { -webkit-user-select: none !important; -moz-user-select: none !important; user-select: none !important; } .pe-none { pointer-events: none !important; } .pe-auto { pointer-events: auto !important; } .rounded { border-radius: 0.25rem !important; } .rounded-0 { border-radius: 0 !important; } .rounded-1 { border-radius: 0.2rem !important; } .rounded-2 { border-radius: 0.25rem !important; } .rounded-3 { border-radius: 0.3rem !important; } .rounded-circle { border-radius: 50% !important; } .rounded-pill { border-radius: 50rem !important; } .rounded-top { border-top-left-radius: 0.25rem !important; border-top-right-radius: 0.25rem !important; } .rounded-end { border-top-right-radius: 0.25rem !important; border-bottom-right-radius: 0.25rem !important; } .rounded-bottom { border-bottom-right-radius: 0.25rem !important; border-bottom-left-radius: 0.25rem !important; } .rounded-start { border-bottom-left-radius: 0.25rem !important; border-top-left-radius: 0.25rem !important; } .visible { visibility: visible !important; } .invisible { visibility: hidden !important; } @media (min-width: 576px) { .float-sm-start { float: left !important; } .float-sm-end { float: right !important; } .float-sm-none { float: none !important; } .d-sm-inline { display: inline !important; } .d-sm-inline-block { display: inline-block !important; } .d-sm-block { display: block !important; } .d-sm-grid { display: grid !important; } .d-sm-table { display: table !important; } .d-sm-table-row { display: table-row !important; } .d-sm-table-cell { display: table-cell !important; } .d-sm-flex { display: flex !important; } .d-sm-inline-flex { display: inline-flex !important; } .d-sm-none { display: none !important; } .flex-sm-fill { flex: 1 1 auto !important; } .flex-sm-row { flex-direction: row !important; } .flex-sm-column { flex-direction: column !important; } .flex-sm-row-reverse { flex-direction: row-reverse !important; } .flex-sm-column-reverse { flex-direction: column-reverse !important; } .flex-sm-grow-0 { flex-grow: 0 !important; } .flex-sm-grow-1 { flex-grow: 1 !important; } .flex-sm-shrink-0 { flex-shrink: 0 !important; } .flex-sm-shrink-1 { flex-shrink: 1 !important; } .flex-sm-wrap { flex-wrap: wrap !important; } .flex-sm-nowrap { flex-wrap: nowrap !important; } .flex-sm-wrap-reverse { flex-wrap: wrap-reverse !important; } .gap-sm-0 { gap: 0 !important; } .gap-sm-1 { gap: 0.25rem !important; } .gap-sm-2 { gap: 0.5rem !important; } .gap-sm-3 { gap: 1rem !important; } .gap-sm-4 { gap: 1.5rem !important; } .gap-sm-5 { gap: 3rem !important; } .justify-content-sm-start { justify-content: flex-start !important; } .justify-content-sm-end { justify-content: flex-end !important; } .justify-content-sm-center { justify-content: center !important; } .justify-content-sm-between { justify-content: space-between !important; } .justify-content-sm-around { justify-content: space-around !important; } .justify-content-sm-evenly { justify-content: space-evenly !important; } .align-items-sm-start { align-items: flex-start !important; } .align-items-sm-end { align-items: flex-end !important; } .align-items-sm-center { align-items: center !important; } .align-items-sm-baseline { align-items: baseline !important; } .align-items-sm-stretch { align-items: stretch !important; } .align-content-sm-start { align-content: flex-start !important; } .align-content-sm-end { align-content: flex-end !important; } .align-content-sm-center { align-content: center !important; } .align-content-sm-between { align-content: space-between !important; } .align-content-sm-around { align-content: space-around !important; } .align-content-sm-stretch { align-content: stretch !important; } .align-self-sm-auto { align-self: auto !important; } .align-self-sm-start { align-self: flex-start !important; } .align-self-sm-end { align-self: flex-end !important; } .align-self-sm-center { align-self: center !important; } .align-self-sm-baseline { align-self: baseline !important; } .align-self-sm-stretch { align-self: stretch !important; } .order-sm-first { order: -1 !important; } .order-sm-0 { order: 0 !important; } .order-sm-1 { order: 1 !important; } .order-sm-2 { order: 2 !important; } .order-sm-3 { order: 3 !important; } .order-sm-4 { order: 4 !important; } .order-sm-5 { order: 5 !important; } .order-sm-last { order: 6 !important; } .m-sm-0 { margin: 0 !important; } .m-sm-1 { margin: 0.25rem !important; } .m-sm-2 { margin: 0.5rem !important; } .m-sm-3 { margin: 1rem !important; } .m-sm-4 { margin: 1.5rem !important; } .m-sm-5 { margin: 3rem !important; } .m-sm-auto { margin: auto !important; } .mx-sm-0 { margin-right: 0 !important; margin-left: 0 !important; } .mx-sm-1 { margin-right: 0.25rem !important; margin-left: 0.25rem !important; } .mx-sm-2 { margin-right: 0.5rem !important; margin-left: 0.5rem !important; } .mx-sm-3 { margin-right: 1rem !important; margin-left: 1rem !important; } .mx-sm-4 { margin-right: 1.5rem !important; margin-left: 1.5rem !important; } .mx-sm-5 { margin-right: 3rem !important; margin-left: 3rem !important; } .mx-sm-auto { margin-right: auto !important; margin-left: auto !important; } .my-sm-0 { margin-top: 0 !important; margin-bottom: 0 !important; } .my-sm-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; } .my-sm-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; } .my-sm-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; } .my-sm-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; } .my-sm-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; } .my-sm-auto { margin-top: auto !important; margin-bottom: auto !important; } .mt-sm-0 { margin-top: 0 !important; } .mt-sm-1 { margin-top: 0.25rem !important; } .mt-sm-2 { margin-top: 0.5rem !important; } .mt-sm-3 { margin-top: 1rem !important; } .mt-sm-4 { margin-top: 1.5rem !important; } .mt-sm-5 { margin-top: 3rem !important; } .mt-sm-auto { margin-top: auto !important; } .me-sm-0 { margin-right: 0 !important; } .me-sm-1 { margin-right: 0.25rem !important; } .me-sm-2 { margin-right: 0.5rem !important; } .me-sm-3 { margin-right: 1rem !important; } .me-sm-4 { margin-right: 1.5rem !important; } .me-sm-5 { margin-right: 3rem !important; } .me-sm-auto { margin-right: auto !important; } .mb-sm-0 { margin-bottom: 0 !important; } .mb-sm-1 { margin-bottom: 0.25rem !important; } .mb-sm-2 { margin-bottom: 0.5rem !important; } .mb-sm-3 { margin-bottom: 1rem !important; } .mb-sm-4 { margin-bottom: 1.5rem !important; } .mb-sm-5 { margin-bottom: 3rem !important; } .mb-sm-auto { margin-bottom: auto !important; } .ms-sm-0 { margin-left: 0 !important; } .ms-sm-1 { margin-left: 0.25rem !important; } .ms-sm-2 { margin-left: 0.5rem !important; } .ms-sm-3 { margin-left: 1rem !important; } .ms-sm-4 { margin-left: 1.5rem !important; } .ms-sm-5 { margin-left: 3rem !important; } .ms-sm-auto { margin-left: auto !important; } .p-sm-0 { padding: 0 !important; } .p-sm-1 { padding: 0.25rem !important; } .p-sm-2 { padding: 0.5rem !important; } .p-sm-3 { padding: 1rem !important; } .p-sm-4 { padding: 1.5rem !important; } .p-sm-5 { padding: 3rem !important; } .px-sm-0 { padding-right: 0 !important; padding-left: 0 !important; } .px-sm-1 { padding-right: 0.25rem !important; padding-left: 0.25rem !important; } .px-sm-2 { padding-right: 0.5rem !important; padding-left: 0.5rem !important; } .px-sm-3 { padding-right: 1rem !important; padding-left: 1rem !important; } .px-sm-4 { padding-right: 1.5rem !important; padding-left: 1.5rem !important; } .px-sm-5 { padding-right: 3rem !important; padding-left: 3rem !important; } .py-sm-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .py-sm-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; } .py-sm-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } .py-sm-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; } .py-sm-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } .py-sm-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; } .pt-sm-0 { padding-top: 0 !important; } .pt-sm-1 { padding-top: 0.25rem !important; } .pt-sm-2 { padding-top: 0.5rem !important; } .pt-sm-3 { padding-top: 1rem !important; } .pt-sm-4 { padding-top: 1.5rem !important; } .pt-sm-5 { padding-top: 3rem !important; } .pe-sm-0 { padding-right: 0 !important; } .pe-sm-1 { padding-right: 0.25rem !important; } .pe-sm-2 { padding-right: 0.5rem !important; } .pe-sm-3 { padding-right: 1rem !important; } .pe-sm-4 { padding-right: 1.5rem !important; } .pe-sm-5 { padding-right: 3rem !important; } .pb-sm-0 { padding-bottom: 0 !important; } .pb-sm-1 { padding-bottom: 0.25rem !important; } .pb-sm-2 { padding-bottom: 0.5rem !important; } .pb-sm-3 { padding-bottom: 1rem !important; } .pb-sm-4 { padding-bottom: 1.5rem !important; } .pb-sm-5 { padding-bottom: 3rem !important; } .ps-sm-0 { padding-left: 0 !important; } .ps-sm-1 { padding-left: 0.25rem !important; } .ps-sm-2 { padding-left: 0.5rem !important; } .ps-sm-3 { padding-left: 1rem !important; } .ps-sm-4 { padding-left: 1.5rem !important; } .ps-sm-5 { padding-left: 3rem !important; } .text-sm-start { text-align: left !important; } .text-sm-end { text-align: right !important; } .text-sm-center { text-align: center !important; } } @media (min-width: 768px) { .float-md-start { float: left !important; } .float-md-end { float: right !important; } .float-md-none { float: none !important; } .d-md-inline { display: inline !important; } .d-md-inline-block { display: inline-block !important; } .d-md-block { display: block !important; } .d-md-grid { display: grid !important; } .d-md-table { display: table !important; } .d-md-table-row { display: table-row !important; } .d-md-table-cell { display: table-cell !important; } .d-md-flex { display: flex !important; } .d-md-inline-flex { display: inline-flex !important; } .d-md-none { display: none !important; } .flex-md-fill { flex: 1 1 auto !important; } .flex-md-row { flex-direction: row !important; } .flex-md-column { flex-direction: column !important; } .flex-md-row-reverse { flex-direction: row-reverse !important; } .flex-md-column-reverse { flex-direction: column-reverse !important; } .flex-md-grow-0 { flex-grow: 0 !important; } .flex-md-grow-1 { flex-grow: 1 !important; } .flex-md-shrink-0 { flex-shrink: 0 !important; } .flex-md-shrink-1 { flex-shrink: 1 !important; } .flex-md-wrap { flex-wrap: wrap !important; } .flex-md-nowrap { flex-wrap: nowrap !important; } .flex-md-wrap-reverse { flex-wrap: wrap-reverse !important; } .gap-md-0 { gap: 0 !important; } .gap-md-1 { gap: 0.25rem !important; } .gap-md-2 { gap: 0.5rem !important; } .gap-md-3 { gap: 1rem !important; } .gap-md-4 { gap: 1.5rem !important; } .gap-md-5 { gap: 3rem !important; } .justify-content-md-start { justify-content: flex-start !important; } .justify-content-md-end { justify-content: flex-end !important; } .justify-content-md-center { justify-content: center !important; } .justify-content-md-between { justify-content: space-between !important; } .justify-content-md-around { justify-content: space-around !important; } .justify-content-md-evenly { justify-content: space-evenly !important; } .align-items-md-start { align-items: flex-start !important; } .align-items-md-end { align-items: flex-end !important; } .align-items-md-center { align-items: center !important; } .align-items-md-baseline { align-items: baseline !important; } .align-items-md-stretch { align-items: stretch !important; } .align-content-md-start { align-content: flex-start !important; } .align-content-md-end { align-content: flex-end !important; } .align-content-md-center { align-content: center !important; } .align-content-md-between { align-content: space-between !important; } .align-content-md-around { align-content: space-around !important; } .align-content-md-stretch { align-content: stretch !important; } .align-self-md-auto { align-self: auto !important; } .align-self-md-start { align-self: flex-start !important; } .align-self-md-end { align-self: flex-end !important; } .align-self-md-center { align-self: center !important; } .align-self-md-baseline { align-self: baseline !important; } .align-self-md-stretch { align-self: stretch !important; } .order-md-first { order: -1 !important; } .order-md-0 { order: 0 !important; } .order-md-1 { order: 1 !important; } .order-md-2 { order: 2 !important; } .order-md-3 { order: 3 !important; } .order-md-4 { order: 4 !important; } .order-md-5 { order: 5 !important; } .order-md-last { order: 6 !important; } .m-md-0 { margin: 0 !important; } .m-md-1 { margin: 0.25rem !important; } .m-md-2 { margin: 0.5rem !important; } .m-md-3 { margin: 1rem !important; } .m-md-4 { margin: 1.5rem !important; } .m-md-5 { margin: 3rem !important; } .m-md-auto { margin: auto !important; } .mx-md-0 { margin-right: 0 !important; margin-left: 0 !important; } .mx-md-1 { margin-right: 0.25rem !important; margin-left: 0.25rem !important; } .mx-md-2 { margin-right: 0.5rem !important; margin-left: 0.5rem !important; } .mx-md-3 { margin-right: 1rem !important; margin-left: 1rem !important; } .mx-md-4 { margin-right: 1.5rem !important; margin-left: 1.5rem !important; } .mx-md-5 { margin-right: 3rem !important; margin-left: 3rem !important; } .mx-md-auto { margin-right: auto !important; margin-left: auto !important; } .my-md-0 { margin-top: 0 !important; margin-bottom: 0 !important; } .my-md-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; } .my-md-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; } .my-md-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; } .my-md-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; } .my-md-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; } .my-md-auto { margin-top: auto !important; margin-bottom: auto !important; } .mt-md-0 { margin-top: 0 !important; } .mt-md-1 { margin-top: 0.25rem !important; } .mt-md-2 { margin-top: 0.5rem !important; } .mt-md-3 { margin-top: 1rem !important; } .mt-md-4 { margin-top: 1.5rem !important; } .mt-md-5 { margin-top: 3rem !important; } .mt-md-auto { margin-top: auto !important; } .me-md-0 { margin-right: 0 !important; } .me-md-1 { margin-right: 0.25rem !important; } .me-md-2 { margin-right: 0.5rem !important; } .me-md-3 { margin-right: 1rem !important; } .me-md-4 { margin-right: 1.5rem !important; } .me-md-5 { margin-right: 3rem !important; } .me-md-auto { margin-right: auto !important; } .mb-md-0 { margin-bottom: 0 !important; } .mb-md-1 { margin-bottom: 0.25rem !important; } .mb-md-2 { margin-bottom: 0.5rem !important; } .mb-md-3 { margin-bottom: 1rem !important; } .mb-md-4 { margin-bottom: 1.5rem !important; } .mb-md-5 { margin-bottom: 3rem !important; } .mb-md-auto { margin-bottom: auto !important; } .ms-md-0 { margin-left: 0 !important; } .ms-md-1 { margin-left: 0.25rem !important; } .ms-md-2 { margin-left: 0.5rem !important; } .ms-md-3 { margin-left: 1rem !important; } .ms-md-4 { margin-left: 1.5rem !important; } .ms-md-5 { margin-left: 3rem !important; } .ms-md-auto { margin-left: auto !important; } .p-md-0 { padding: 0 !important; } .p-md-1 { padding: 0.25rem !important; } .p-md-2 { padding: 0.5rem !important; } .p-md-3 { padding: 1rem !important; } .p-md-4 { padding: 1.5rem !important; } .p-md-5 { padding: 3rem !important; } .px-md-0 { padding-right: 0 !important; padding-left: 0 !important; } .px-md-1 { padding-right: 0.25rem !important; padding-left: 0.25rem !important; } .px-md-2 { padding-right: 0.5rem !important; padding-left: 0.5rem !important; } .px-md-3 { padding-right: 1rem !important; padding-left: 1rem !important; } .px-md-4 { padding-right: 1.5rem !important; padding-left: 1.5rem !important; } .px-md-5 { padding-right: 3rem !important; padding-left: 3rem !important; } .py-md-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .py-md-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; } .py-md-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } .py-md-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; } .py-md-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } .py-md-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; } .pt-md-0 { padding-top: 0 !important; } .pt-md-1 { padding-top: 0.25rem !important; } .pt-md-2 { padding-top: 0.5rem !important; } .pt-md-3 { padding-top: 1rem !important; } .pt-md-4 { padding-top: 1.5rem !important; } .pt-md-5 { padding-top: 3rem !important; } .pe-md-0 { padding-right: 0 !important; } .pe-md-1 { padding-right: 0.25rem !important; } .pe-md-2 { padding-right: 0.5rem !important; } .pe-md-3 { padding-right: 1rem !important; } .pe-md-4 { padding-right: 1.5rem !important; } .pe-md-5 { padding-right: 3rem !important; } .pb-md-0 { padding-bottom: 0 !important; } .pb-md-1 { padding-bottom: 0.25rem !important; } .pb-md-2 { padding-bottom: 0.5rem !important; } .pb-md-3 { padding-bottom: 1rem !important; } .pb-md-4 { padding-bottom: 1.5rem !important; } .pb-md-5 { padding-bottom: 3rem !important; } .ps-md-0 { padding-left: 0 !important; } .ps-md-1 { padding-left: 0.25rem !important; } .ps-md-2 { padding-left: 0.5rem !important; } .ps-md-3 { padding-left: 1rem !important; } .ps-md-4 { padding-left: 1.5rem !important; } .ps-md-5 { padding-left: 3rem !important; } .text-md-start { text-align: left !important; } .text-md-end { text-align: right !important; } .text-md-center { text-align: center !important; } } @media (min-width: 992px) { .float-lg-start { float: left !important; } .float-lg-end { float: right !important; } .float-lg-none { float: none !important; } .d-lg-inline { display: inline !important; } .d-lg-inline-block { display: inline-block !important; } .d-lg-block { display: block !important; } .d-lg-grid { display: grid !important; } .d-lg-table { display: table !important; } .d-lg-table-row { display: table-row !important; } .d-lg-table-cell { display: table-cell !important; } .d-lg-flex { display: flex !important; } .d-lg-inline-flex { display: inline-flex !important; } .d-lg-none { display: none !important; } .flex-lg-fill { flex: 1 1 auto !important; } .flex-lg-row { flex-direction: row !important; } .flex-lg-column { flex-direction: column !important; } .flex-lg-row-reverse { flex-direction: row-reverse !important; } .flex-lg-column-reverse { flex-direction: column-reverse !important; } .flex-lg-grow-0 { flex-grow: 0 !important; } .flex-lg-grow-1 { flex-grow: 1 !important; } .flex-lg-shrink-0 { flex-shrink: 0 !important; } .flex-lg-shrink-1 { flex-shrink: 1 !important; } .flex-lg-wrap { flex-wrap: wrap !important; } .flex-lg-nowrap { flex-wrap: nowrap !important; } .flex-lg-wrap-reverse { flex-wrap: wrap-reverse !important; } .gap-lg-0 { gap: 0 !important; } .gap-lg-1 { gap: 0.25rem !important; } .gap-lg-2 { gap: 0.5rem !important; } .gap-lg-3 { gap: 1rem !important; } .gap-lg-4 { gap: 1.5rem !important; } .gap-lg-5 { gap: 3rem !important; } .justify-content-lg-start { justify-content: flex-start !important; } .justify-content-lg-end { justify-content: flex-end !important; } .justify-content-lg-center { justify-content: center !important; } .justify-content-lg-between { justify-content: space-between !important; } .justify-content-lg-around { justify-content: space-around !important; } .justify-content-lg-evenly { justify-content: space-evenly !important; } .align-items-lg-start { align-items: flex-start !important; } .align-items-lg-end { align-items: flex-end !important; } .align-items-lg-center { align-items: center !important; } .align-items-lg-baseline { align-items: baseline !important; } .align-items-lg-stretch { align-items: stretch !important; } .align-content-lg-start { align-content: flex-start !important; } .align-content-lg-end { align-content: flex-end !important; } .align-content-lg-center { align-content: center !important; } .align-content-lg-between { align-content: space-between !important; } .align-content-lg-around { align-content: space-around !important; } .align-content-lg-stretch { align-content: stretch !important; } .align-self-lg-auto { align-self: auto !important; } .align-self-lg-start { align-self: flex-start !important; } .align-self-lg-end { align-self: flex-end !important; } .align-self-lg-center { align-self: center !important; } .align-self-lg-baseline { align-self: baseline !important; } .align-self-lg-stretch { align-self: stretch !important; } .order-lg-first { order: -1 !important; } .order-lg-0 { order: 0 !important; } .order-lg-1 { order: 1 !important; } .order-lg-2 { order: 2 !important; } .order-lg-3 { order: 3 !important; } .order-lg-4 { order: 4 !important; } .order-lg-5 { order: 5 !important; } .order-lg-last { order: 6 !important; } .m-lg-0 { margin: 0 !important; } .m-lg-1 { margin: 0.25rem !important; } .m-lg-2 { margin: 0.5rem !important; } .m-lg-3 { margin: 1rem !important; } .m-lg-4 { margin: 1.5rem !important; } .m-lg-5 { margin: 3rem !important; } .m-lg-auto { margin: auto !important; } .mx-lg-0 { margin-right: 0 !important; margin-left: 0 !important; } .mx-lg-1 { margin-right: 0.25rem !important; margin-left: 0.25rem !important; } .mx-lg-2 { margin-right: 0.5rem !important; margin-left: 0.5rem !important; } .mx-lg-3 { margin-right: 1rem !important; margin-left: 1rem !important; } .mx-lg-4 { margin-right: 1.5rem !important; margin-left: 1.5rem !important; } .mx-lg-5 { margin-right: 3rem !important; margin-left: 3rem !important; } .mx-lg-auto { margin-right: auto !important; margin-left: auto !important; } .my-lg-0 { margin-top: 0 !important; margin-bottom: 0 !important; } .my-lg-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; } .my-lg-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; } .my-lg-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; } .my-lg-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; } .my-lg-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; } .my-lg-auto { margin-top: auto !important; margin-bottom: auto !important; } .mt-lg-0 { margin-top: 0 !important; } .mt-lg-1 { margin-top: 0.25rem !important; } .mt-lg-2 { margin-top: 0.5rem !important; } .mt-lg-3 { margin-top: 1rem !important; } .mt-lg-4 { margin-top: 1.5rem !important; } .mt-lg-5 { margin-top: 3rem !important; } .mt-lg-auto { margin-top: auto !important; } .me-lg-0 { margin-right: 0 !important; } .me-lg-1 { margin-right: 0.25rem !important; } .me-lg-2 { margin-right: 0.5rem !important; } .me-lg-3 { margin-right: 1rem !important; } .me-lg-4 { margin-right: 1.5rem !important; } .me-lg-5 { margin-right: 3rem !important; } .me-lg-auto { margin-right: auto !important; } .mb-lg-0 { margin-bottom: 0 !important; } .mb-lg-1 { margin-bottom: 0.25rem !important; } .mb-lg-2 { margin-bottom: 0.5rem !important; } .mb-lg-3 { margin-bottom: 1rem !important; } .mb-lg-4 { margin-bottom: 1.5rem !important; } .mb-lg-5 { margin-bottom: 3rem !important; } .mb-lg-auto { margin-bottom: auto !important; } .ms-lg-0 { margin-left: 0 !important; } .ms-lg-1 { margin-left: 0.25rem !important; } .ms-lg-2 { margin-left: 0.5rem !important; } .ms-lg-3 { margin-left: 1rem !important; } .ms-lg-4 { margin-left: 1.5rem !important; } .ms-lg-5 { margin-left: 3rem !important; } .ms-lg-auto { margin-left: auto !important; } .p-lg-0 { padding: 0 !important; } .p-lg-1 { padding: 0.25rem !important; } .p-lg-2 { padding: 0.5rem !important; } .p-lg-3 { padding: 1rem !important; } .p-lg-4 { padding: 1.5rem !important; } .p-lg-5 { padding: 3rem !important; } .px-lg-0 { padding-right: 0 !important; padding-left: 0 !important; } .px-lg-1 { padding-right: 0.25rem !important; padding-left: 0.25rem !important; } .px-lg-2 { padding-right: 0.5rem !important; padding-left: 0.5rem !important; } .px-lg-3 { padding-right: 1rem !important; padding-left: 1rem !important; } .px-lg-4 { padding-right: 1.5rem !important; padding-left: 1.5rem !important; } .px-lg-5 { padding-right: 3rem !important; padding-left: 3rem !important; } .py-lg-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .py-lg-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; } .py-lg-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } .py-lg-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; } .py-lg-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } .py-lg-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; } .pt-lg-0 { padding-top: 0 !important; } .pt-lg-1 { padding-top: 0.25rem !important; } .pt-lg-2 { padding-top: 0.5rem !important; } .pt-lg-3 { padding-top: 1rem !important; } .pt-lg-4 { padding-top: 1.5rem !important; } .pt-lg-5 { padding-top: 3rem !important; } .pe-lg-0 { padding-right: 0 !important; } .pe-lg-1 { padding-right: 0.25rem !important; } .pe-lg-2 { padding-right: 0.5rem !important; } .pe-lg-3 { padding-right: 1rem !important; } .pe-lg-4 { padding-right: 1.5rem !important; } .pe-lg-5 { padding-right: 3rem !important; } .pb-lg-0 { padding-bottom: 0 !important; } .pb-lg-1 { padding-bottom: 0.25rem !important; } .pb-lg-2 { padding-bottom: 0.5rem !important; } .pb-lg-3 { padding-bottom: 1rem !important; } .pb-lg-4 { padding-bottom: 1.5rem !important; } .pb-lg-5 { padding-bottom: 3rem !important; } .ps-lg-0 { padding-left: 0 !important; } .ps-lg-1 { padding-left: 0.25rem !important; } .ps-lg-2 { padding-left: 0.5rem !important; } .ps-lg-3 { padding-left: 1rem !important; } .ps-lg-4 { padding-left: 1.5rem !important; } .ps-lg-5 { padding-left: 3rem !important; } .text-lg-start { text-align: left !important; } .text-lg-end { text-align: right !important; } .text-lg-center { text-align: center !important; } } @media (min-width: 1200px) { .float-xl-start { float: left !important; } .float-xl-end { float: right !important; } .float-xl-none { float: none !important; } .d-xl-inline { display: inline !important; } .d-xl-inline-block { display: inline-block !important; } .d-xl-block { display: block !important; } .d-xl-grid { display: grid !important; } .d-xl-table { display: table !important; } .d-xl-table-row { display: table-row !important; } .d-xl-table-cell { display: table-cell !important; } .d-xl-flex { display: flex !important; } .d-xl-inline-flex { display: inline-flex !important; } .d-xl-none { display: none !important; } .flex-xl-fill { flex: 1 1 auto !important; } .flex-xl-row { flex-direction: row !important; } .flex-xl-column { flex-direction: column !important; } .flex-xl-row-reverse { flex-direction: row-reverse !important; } .flex-xl-column-reverse { flex-direction: column-reverse !important; } .flex-xl-grow-0 { flex-grow: 0 !important; } .flex-xl-grow-1 { flex-grow: 1 !important; } .flex-xl-shrink-0 { flex-shrink: 0 !important; } .flex-xl-shrink-1 { flex-shrink: 1 !important; } .flex-xl-wrap { flex-wrap: wrap !important; } .flex-xl-nowrap { flex-wrap: nowrap !important; } .flex-xl-wrap-reverse { flex-wrap: wrap-reverse !important; } .gap-xl-0 { gap: 0 !important; } .gap-xl-1 { gap: 0.25rem !important; } .gap-xl-2 { gap: 0.5rem !important; } .gap-xl-3 { gap: 1rem !important; } .gap-xl-4 { gap: 1.5rem !important; } .gap-xl-5 { gap: 3rem !important; } .justify-content-xl-start { justify-content: flex-start !important; } .justify-content-xl-end { justify-content: flex-end !important; } .justify-content-xl-center { justify-content: center !important; } .justify-content-xl-between { justify-content: space-between !important; } .justify-content-xl-around { justify-content: space-around !important; } .justify-content-xl-evenly { justify-content: space-evenly !important; } .align-items-xl-start { align-items: flex-start !important; } .align-items-xl-end { align-items: flex-end !important; } .align-items-xl-center { align-items: center !important; } .align-items-xl-baseline { align-items: baseline !important; } .align-items-xl-stretch { align-items: stretch !important; } .align-content-xl-start { align-content: flex-start !important; } .align-content-xl-end { align-content: flex-end !important; } .align-content-xl-center { align-content: center !important; } .align-content-xl-between { align-content: space-between !important; } .align-content-xl-around { align-content: space-around !important; } .align-content-xl-stretch { align-content: stretch !important; } .align-self-xl-auto { align-self: auto !important; } .align-self-xl-start { align-self: flex-start !important; } .align-self-xl-end { align-self: flex-end !important; } .align-self-xl-center { align-self: center !important; } .align-self-xl-baseline { align-self: baseline !important; } .align-self-xl-stretch { align-self: stretch !important; } .order-xl-first { order: -1 !important; } .order-xl-0 { order: 0 !important; } .order-xl-1 { order: 1 !important; } .order-xl-2 { order: 2 !important; } .order-xl-3 { order: 3 !important; } .order-xl-4 { order: 4 !important; } .order-xl-5 { order: 5 !important; } .order-xl-last { order: 6 !important; } .m-xl-0 { margin: 0 !important; } .m-xl-1 { margin: 0.25rem !important; } .m-xl-2 { margin: 0.5rem !important; } .m-xl-3 { margin: 1rem !important; } .m-xl-4 { margin: 1.5rem !important; } .m-xl-5 { margin: 3rem !important; } .m-xl-auto { margin: auto !important; } .mx-xl-0 { margin-right: 0 !important; margin-left: 0 !important; } .mx-xl-1 { margin-right: 0.25rem !important; margin-left: 0.25rem !important; } .mx-xl-2 { margin-right: 0.5rem !important; margin-left: 0.5rem !important; } .mx-xl-3 { margin-right: 1rem !important; margin-left: 1rem !important; } .mx-xl-4 { margin-right: 1.5rem !important; margin-left: 1.5rem !important; } .mx-xl-5 { margin-right: 3rem !important; margin-left: 3rem !important; } .mx-xl-auto { margin-right: auto !important; margin-left: auto !important; } .my-xl-0 { margin-top: 0 !important; margin-bottom: 0 !important; } .my-xl-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; } .my-xl-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; } .my-xl-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; } .my-xl-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; } .my-xl-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; } .my-xl-auto { margin-top: auto !important; margin-bottom: auto !important; } .mt-xl-0 { margin-top: 0 !important; } .mt-xl-1 { margin-top: 0.25rem !important; } .mt-xl-2 { margin-top: 0.5rem !important; } .mt-xl-3 { margin-top: 1rem !important; } .mt-xl-4 { margin-top: 1.5rem !important; } .mt-xl-5 { margin-top: 3rem !important; } .mt-xl-auto { margin-top: auto !important; } .me-xl-0 { margin-right: 0 !important; } .me-xl-1 { margin-right: 0.25rem !important; } .me-xl-2 { margin-right: 0.5rem !important; } .me-xl-3 { margin-right: 1rem !important; } .me-xl-4 { margin-right: 1.5rem !important; } .me-xl-5 { margin-right: 3rem !important; } .me-xl-auto { margin-right: auto !important; } .mb-xl-0 { margin-bottom: 0 !important; } .mb-xl-1 { margin-bottom: 0.25rem !important; } .mb-xl-2 { margin-bottom: 0.5rem !important; } .mb-xl-3 { margin-bottom: 1rem !important; } .mb-xl-4 { margin-bottom: 1.5rem !important; } .mb-xl-5 { margin-bottom: 3rem !important; } .mb-xl-auto { margin-bottom: auto !important; } .ms-xl-0 { margin-left: 0 !important; } .ms-xl-1 { margin-left: 0.25rem !important; } .ms-xl-2 { margin-left: 0.5rem !important; } .ms-xl-3 { margin-left: 1rem !important; } .ms-xl-4 { margin-left: 1.5rem !important; } .ms-xl-5 { margin-left: 3rem !important; } .ms-xl-auto { margin-left: auto !important; } .p-xl-0 { padding: 0 !important; } .p-xl-1 { padding: 0.25rem !important; } .p-xl-2 { padding: 0.5rem !important; } .p-xl-3 { padding: 1rem !important; } .p-xl-4 { padding: 1.5rem !important; } .p-xl-5 { padding: 3rem !important; } .px-xl-0 { padding-right: 0 !important; padding-left: 0 !important; } .px-xl-1 { padding-right: 0.25rem !important; padding-left: 0.25rem !important; } .px-xl-2 { padding-right: 0.5rem !important; padding-left: 0.5rem !important; } .px-xl-3 { padding-right: 1rem !important; padding-left: 1rem !important; } .px-xl-4 { padding-right: 1.5rem !important; padding-left: 1.5rem !important; } .px-xl-5 { padding-right: 3rem !important; padding-left: 3rem !important; } .py-xl-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .py-xl-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; } .py-xl-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } .py-xl-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; } .py-xl-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } .py-xl-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; } .pt-xl-0 { padding-top: 0 !important; } .pt-xl-1 { padding-top: 0.25rem !important; } .pt-xl-2 { padding-top: 0.5rem !important; } .pt-xl-3 { padding-top: 1rem !important; } .pt-xl-4 { padding-top: 1.5rem !important; } .pt-xl-5 { padding-top: 3rem !important; } .pe-xl-0 { padding-right: 0 !important; } .pe-xl-1 { padding-right: 0.25rem !important; } .pe-xl-2 { padding-right: 0.5rem !important; } .pe-xl-3 { padding-right: 1rem !important; } .pe-xl-4 { padding-right: 1.5rem !important; } .pe-xl-5 { padding-right: 3rem !important; } .pb-xl-0 { padding-bottom: 0 !important; } .pb-xl-1 { padding-bottom: 0.25rem !important; } .pb-xl-2 { padding-bottom: 0.5rem !important; } .pb-xl-3 { padding-bottom: 1rem !important; } .pb-xl-4 { padding-bottom: 1.5rem !important; } .pb-xl-5 { padding-bottom: 3rem !important; } .ps-xl-0 { padding-left: 0 !important; } .ps-xl-1 { padding-left: 0.25rem !important; } .ps-xl-2 { padding-left: 0.5rem !important; } .ps-xl-3 { padding-left: 1rem !important; } .ps-xl-4 { padding-left: 1.5rem !important; } .ps-xl-5 { padding-left: 3rem !important; } .text-xl-start { text-align: left !important; } .text-xl-end { text-align: right !important; } .text-xl-center { text-align: center !important; } } @media (min-width: 1400px) { .float-xxl-start { float: left !important; } .float-xxl-end { float: right !important; } .float-xxl-none { float: none !important; } .d-xxl-inline { display: inline !important; } .d-xxl-inline-block { display: inline-block !important; } .d-xxl-block { display: block !important; } .d-xxl-grid { display: grid !important; } .d-xxl-table { display: table !important; } .d-xxl-table-row { display: table-row !important; } .d-xxl-table-cell { display: table-cell !important; } .d-xxl-flex { display: flex !important; } .d-xxl-inline-flex { display: inline-flex !important; } .d-xxl-none { display: none !important; } .flex-xxl-fill { flex: 1 1 auto !important; } .flex-xxl-row { flex-direction: row !important; } .flex-xxl-column { flex-direction: column !important; } .flex-xxl-row-reverse { flex-direction: row-reverse !important; } .flex-xxl-column-reverse { flex-direction: column-reverse !important; } .flex-xxl-grow-0 { flex-grow: 0 !important; } .flex-xxl-grow-1 { flex-grow: 1 !important; } .flex-xxl-shrink-0 { flex-shrink: 0 !important; } .flex-xxl-shrink-1 { flex-shrink: 1 !important; } .flex-xxl-wrap { flex-wrap: wrap !important; } .flex-xxl-nowrap { flex-wrap: nowrap !important; } .flex-xxl-wrap-reverse { flex-wrap: wrap-reverse !important; } .gap-xxl-0 { gap: 0 !important; } .gap-xxl-1 { gap: 0.25rem !important; } .gap-xxl-2 { gap: 0.5rem !important; } .gap-xxl-3 { gap: 1rem !important; } .gap-xxl-4 { gap: 1.5rem !important; } .gap-xxl-5 { gap: 3rem !important; } .justify-content-xxl-start { justify-content: flex-start !important; } .justify-content-xxl-end { justify-content: flex-end !important; } .justify-content-xxl-center { justify-content: center !important; } .justify-content-xxl-between { justify-content: space-between !important; } .justify-content-xxl-around { justify-content: space-around !important; } .justify-content-xxl-evenly { justify-content: space-evenly !important; } .align-items-xxl-start { align-items: flex-start !important; } .align-items-xxl-end { align-items: flex-end !important; } .align-items-xxl-center { align-items: center !important; } .align-items-xxl-baseline { align-items: baseline !important; } .align-items-xxl-stretch { align-items: stretch !important; } .align-content-xxl-start { align-content: flex-start !important; } .align-content-xxl-end { align-content: flex-end !important; } .align-content-xxl-center { align-content: center !important; } .align-content-xxl-between { align-content: space-between !important; } .align-content-xxl-around { align-content: space-around !important; } .align-content-xxl-stretch { align-content: stretch !important; } .align-self-xxl-auto { align-self: auto !important; } .align-self-xxl-start { align-self: flex-start !important; } .align-self-xxl-end { align-self: flex-end !important; } .align-self-xxl-center { align-self: center !important; } .align-self-xxl-baseline { align-self: baseline !important; } .align-self-xxl-stretch { align-self: stretch !important; } .order-xxl-first { order: -1 !important; } .order-xxl-0 { order: 0 !important; } .order-xxl-1 { order: 1 !important; } .order-xxl-2 { order: 2 !important; } .order-xxl-3 { order: 3 !important; } .order-xxl-4 { order: 4 !important; } .order-xxl-5 { order: 5 !important; } .order-xxl-last { order: 6 !important; } .m-xxl-0 { margin: 0 !important; } .m-xxl-1 { margin: 0.25rem !important; } .m-xxl-2 { margin: 0.5rem !important; } .m-xxl-3 { margin: 1rem !important; } .m-xxl-4 { margin: 1.5rem !important; } .m-xxl-5 { margin: 3rem !important; } .m-xxl-auto { margin: auto !important; } .mx-xxl-0 { margin-right: 0 !important; margin-left: 0 !important; } .mx-xxl-1 { margin-right: 0.25rem !important; margin-left: 0.25rem !important; } .mx-xxl-2 { margin-right: 0.5rem !important; margin-left: 0.5rem !important; } .mx-xxl-3 { margin-right: 1rem !important; margin-left: 1rem !important; } .mx-xxl-4 { margin-right: 1.5rem !important; margin-left: 1.5rem !important; } .mx-xxl-5 { margin-right: 3rem !important; margin-left: 3rem !important; } .mx-xxl-auto { margin-right: auto !important; margin-left: auto !important; } .my-xxl-0 { margin-top: 0 !important; margin-bottom: 0 !important; } .my-xxl-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; } .my-xxl-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; } .my-xxl-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; } .my-xxl-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; } .my-xxl-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; } .my-xxl-auto { margin-top: auto !important; margin-bottom: auto !important; } .mt-xxl-0 { margin-top: 0 !important; } .mt-xxl-1 { margin-top: 0.25rem !important; } .mt-xxl-2 { margin-top: 0.5rem !important; } .mt-xxl-3 { margin-top: 1rem !important; } .mt-xxl-4 { margin-top: 1.5rem !important; } .mt-xxl-5 { margin-top: 3rem !important; } .mt-xxl-auto { margin-top: auto !important; } .me-xxl-0 { margin-right: 0 !important; } .me-xxl-1 { margin-right: 0.25rem !important; } .me-xxl-2 { margin-right: 0.5rem !important; } .me-xxl-3 { margin-right: 1rem !important; } .me-xxl-4 { margin-right: 1.5rem !important; } .me-xxl-5 { margin-right: 3rem !important; } .me-xxl-auto { margin-right: auto !important; } .mb-xxl-0 { margin-bottom: 0 !important; } .mb-xxl-1 { margin-bottom: 0.25rem !important; } .mb-xxl-2 { margin-bottom: 0.5rem !important; } .mb-xxl-3 { margin-bottom: 1rem !important; } .mb-xxl-4 { margin-bottom: 1.5rem !important; } .mb-xxl-5 { margin-bottom: 3rem !important; } .mb-xxl-auto { margin-bottom: auto !important; } .ms-xxl-0 { margin-left: 0 !important; } .ms-xxl-1 { margin-left: 0.25rem !important; } .ms-xxl-2 { margin-left: 0.5rem !important; } .ms-xxl-3 { margin-left: 1rem !important; } .ms-xxl-4 { margin-left: 1.5rem !important; } .ms-xxl-5 { margin-left: 3rem !important; } .ms-xxl-auto { margin-left: auto !important; } .p-xxl-0 { padding: 0 !important; } .p-xxl-1 { padding: 0.25rem !important; } .p-xxl-2 { padding: 0.5rem !important; } .p-xxl-3 { padding: 1rem !important; } .p-xxl-4 { padding: 1.5rem !important; } .p-xxl-5 { padding: 3rem !important; } .px-xxl-0 { padding-right: 0 !important; padding-left: 0 !important; } .px-xxl-1 { padding-right: 0.25rem !important; padding-left: 0.25rem !important; } .px-xxl-2 { padding-right: 0.5rem !important; padding-left: 0.5rem !important; } .px-xxl-3 { padding-right: 1rem !important; padding-left: 1rem !important; } .px-xxl-4 { padding-right: 1.5rem !important; padding-left: 1.5rem !important; } .px-xxl-5 { padding-right: 3rem !important; padding-left: 3rem !important; } .py-xxl-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .py-xxl-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; } .py-xxl-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } .py-xxl-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; } .py-xxl-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } .py-xxl-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; } .pt-xxl-0 { padding-top: 0 !important; } .pt-xxl-1 { padding-top: 0.25rem !important; } .pt-xxl-2 { padding-top: 0.5rem !important; } .pt-xxl-3 { padding-top: 1rem !important; } .pt-xxl-4 { padding-top: 1.5rem !important; } .pt-xxl-5 { padding-top: 3rem !important; } .pe-xxl-0 { padding-right: 0 !important; } .pe-xxl-1 { padding-right: 0.25rem !important; } .pe-xxl-2 { padding-right: 0.5rem !important; } .pe-xxl-3 { padding-right: 1rem !important; } .pe-xxl-4 { padding-right: 1.5rem !important; } .pe-xxl-5 { padding-right: 3rem !important; } .pb-xxl-0 { padding-bottom: 0 !important; } .pb-xxl-1 { padding-bottom: 0.25rem !important; } .pb-xxl-2 { padding-bottom: 0.5rem !important; } .pb-xxl-3 { padding-bottom: 1rem !important; } .pb-xxl-4 { padding-bottom: 1.5rem !important; } .pb-xxl-5 { padding-bottom: 3rem !important; } .ps-xxl-0 { padding-left: 0 !important; } .ps-xxl-1 { padding-left: 0.25rem !important; } .ps-xxl-2 { padding-left: 0.5rem !important; } .ps-xxl-3 { padding-left: 1rem !important; } .ps-xxl-4 { padding-left: 1.5rem !important; } .ps-xxl-5 { padding-left: 3rem !important; } .text-xxl-start { text-align: left !important; } .text-xxl-end { text-align: right !important; } .text-xxl-center { text-align: center !important; } } @media (min-width: 1200px) { .fs-1 { font-size: 2.5rem !important; } .fs-2 { font-size: 2rem !important; } .fs-3 { font-size: 1.75rem !important; } .fs-4 { font-size: 1.5rem !important; } } @media print { .d-print-inline { display: inline !important; } .d-print-inline-block { display: inline-block !important; } .d-print-block { display: block !important; } .d-print-grid { display: grid !important; } .d-print-table { display: table !important; } .d-print-table-row { display: table-row !important; } .d-print-table-cell { display: table-cell !important; } .d-print-flex { display: flex !important; } .d-print-inline-flex { display: inline-flex !important; } .d-print-none { display: none !important; } } :root { --bg-white: hsl(0, 0%, 100%); --bg-white-text: hsl(0, 0%, 10%); --bg-blur-white: rgba(255, 255, 255, 0.75); --bg-blur-white2: rgba(255, 255, 255, 0.5); --bg-black: hsl(0, 17%, 5%); --bg-black-text: hsl(0, 0%, 86%); --bg-blur-black: rgba(0, 0, 0, 0.75); --bg-card: #fff; --bg-input: #fff; --txt-black: rgba(0, 0, 0, 1); --txt-body: rgba(0, 0, 0, 0.9); --txt-gray: rgba(0, 0, 0, 0.8); --txt-gray-light: rgba(0, 0, 0, 0.7); --txt-gray-lightest: rgba(0, 0, 0, 0.6); --text-muted: #888888; --text-secondary: #696969; --txt-white: #fff; --border-color: #e5e7eb; /* gray-300 */ --border-light: #f3f4f6; /* gray-100 */ --border-lightest: #f9fafb; /* gray-50 */ --border-dark: #9ca3af; /* gray-400 */ --border-darkest: #6b7280; /* gray-500 */ --border-white: #ffffff; /* white */ --border-black: #000000; /* black */ --bg-gray: #f3f4f5; /* gray-200 */ --bg-gray-light: #f3f4f6; /* gray-100 */ --bg-gray-lightest: #f9fafb; /* gray-50 */ --bg-gray-dark: #d1d5db; /* gray-300 */ --bg-gray-darkest: #9ca3af; /* gray-400 */ --bg-beige: #F6F5F4; --bg-form: #1770ca; --bg-form-inverse: #fff; --black: rgba(0, 0, 0, 1); --white: rgba(255, 255, 255, 1); --bg-placeholder: rgba(0, 0, 0, 0.03); --checkbox-bg: #000; --checkbox-bg-light: #000; --checkbox-bg-inverse: #fff; --switch-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.1) inset; --transition: all 0.3s cubic-bezier(0.76, 0, 0.24, 1); } :root body { background-color: var(--bg-white); color: var(--bg-white-text); } [data-theme=dark] { --bg-white: hsl(0, 0%, 8%); --bg-white-text: hsl(0, 0%, 90%); --bg-blur-white: rgba(30, 30, 30, 0.75); --bg-blur-white2: rgba(30, 30, 30, 0.5); --bg-black: hsl(0, 0%, 100%); --bg-black-text: hsl(0, 0%, 15%); --bg-blur-black: rgba(255, 255, 255, 0.75); --bg-card: #15171a; --bg-input: #1e252d; --txt-black: rgba(255, 255, 255, 1); --txt-body: rgba(255, 255, 255, 0.9); --txt-gray: rgba(255, 255, 255, 0.8); --txt-gray-light: rgba(255, 255, 255, 0.7); --txt-gray-lightest: rgba(255, 255, 255, 0.6); --text-muted: #aaaaaa; --text-secondary: #b8b8b8; --txt-white: #000; --border-color: #4b5563; /* gray-600 */ --border-light: #374151; /* gray-700 */ --border-lightest: #1f2937; /* gray-800 */ --border-dark: #6b7280; /* gray-500 */ --border-darkest: #9ca3af; /* gray-400 */ --border-white: #f9fafb; /* gray-50 (white in dark mode) */ --border-black: #fff; /* black */ --bg-gray: #2d2d2d; /* gray-800 */ --bg-gray-light: #2c2c2c; /* gray-900 */ --bg-gray-lightest: #7d7d7d; /* slate-950 (deepest background) */ --bg-gray-dark: #374151; /* gray-700 */ --bg-gray-darkest: #4b5563; /* gray-600 */ --bg-beige: #323232; --bg-form: #1770ca; --bg-form-inverse: #fff; --black: rgba(255, 255, 255, 1); --white: rgba(0, 0, 0, 1); --bg-placeholder: rgba(255, 255, 255, 0.06); --checkbox-bg: #fff; --checkbox-bg-light: #fff; --checkbox-bg-inverse: #000; --switch-shadow: 0px 0px 10px 3px rgba(255, 255, 255, 0.1) inset; --transition: all 0.3s cubic-bezier(0.76, 0, 0.24, 1); } :root { --bs-gutter-x: 1rem; --bs-gutter-y: 1rem; } @keyframes fadeInUp { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0px); } } @keyframes placeholderShimmer { 0% { background-position: -1200px 0; } 100% { background-position: 1200px 0; } } @keyframes move { 0% { right: 0; opacity: 0; } 5% { opacity: 0; } 48% { opacity: 0.2; } 80% { opacity: 0; } 100% { right: 82%; } } @keyframes fadeFromTransparent { from { opacity: 0; } } .header { position: sticky; z-index: 1030; top: 0; width: 100%; font-weight: 400; font-size: 0.875rem; background-color: var(--bg-white); color: var(--bg-white-text); border-bottom: solid 1px var(--border-color); } @media (min-width: 992px) { .header { min-height: 122px; } } .header.fluid .container { max-width: none; } @media (min-width: 992px) { .header.fluid .container { padding: 0 3rem; } } .header .black-bar { display: none; } @media (min-width: 992px) { .header .black-bar { background-color: var(--bg-black); color: var(--bg-black-text); display: block; } } .header .black-bar-inner { padding: 0.3rem 0; display: grid; align-items: center; grid-template-columns: 1fr 1fr; } .header .black-bar-end { margin-right: auto; display: flex; align-items: center; flex-direction: row; gap: 1rem; } .header .black-bar .btn-language { border: none; padding: 0; color: currentColor; height: auto; line-height: normal; } .header .top-bar { fill: currentColor; transition: all 300ms linear 0s; padding-block: 0.5rem; } .header .top-bar__inner { display: grid; align-items: center; grid-template-columns: 1fr auto; gap: 1.5rem; } .header .top-bar__left { display: flex; align-items: center; gap: 1.5rem; } .header .top-bar .slogan { line-height: 1; color: inherit; padding: 8px 0; } .header .main-bar { display: none; } @media (min-width: 992px) { .header .main-bar { display: block; } } .header .main-bar__inner { display: flex; justify-content: space-between; align-items: center; flex: 1; padding: 0; } .header .middle-bar { padding-block: 0.5rem; } @media (min-width: 768px) { .header .middle-bar { display: none; } } .header .logo { width: 120px; margin: 0; display: flex; justify-content: center; } @media (min-width: 768px) { .header .logo { margin: 10px 0; } } @media (max-width: 991.98px) { .header .logo { max-width: 100px; } } .header .logo img { height: auto; } @media (max-width: 575.98px) { .header .logo img { max-width: 90px; } } @media (min-width: 992px) { .header .logo img[data-ratio="16:9"] { max-width: 120px; } } @media (min-width: 992px) { .header .logo img[data-ratio="1:1"] { max-width: 60px; } } .header-location { display: flex; align-items: center; } .header-location input, .header-location .custom-select { border: none; background-color: transparent; border-radius: 0; color: var(--txt-white); font-size: 0.875rem; background-image: url("images/icon__map.svg"); background-repeat: no-repeat; background-position: left center; padding-right: 30px; } .header-location input::-webkit-input-placeholder, .header-location .custom-select::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: var(--txt-white); } .header-location input::-moz-placeholder, .header-location .custom-select::-moz-placeholder { /* Firefox 19+ */ color: var(--txt-white); } .header-location input:-ms-input-placeholder, .header-location .custom-select:-ms-input-placeholder { /* IE 10+ */ color: var(--txt-white); } .header-location input:-moz-placeholder, .header-location .custom-select:-moz-placeholder { /* Firefox 18- */ color: var(--txt-white); } .header-location input:focus, .header-location .custom-select:focus { background-color: transparent; color: var(--txt-white); } .header-location__icon { margin-right: 1rem; width: 40px; cursor: pointer; } .header .btn-mbl-menu { background: none; border: none; margin-left: 10px; } @media (min-width: 1200px) { .header .btn-mbl-menu { display: none; } } .header .btn-cta-outline, .header .btn-rfq { padding: 5px 10px; border-radius: 30px; height: auto; line-height: 1; } .header .btn-rfq-sm { height: auto; padding: 5px 10px; border-radius: 30px; line-height: 1; } .prompt-nav { display: flex; align-items: center; gap: 1.5rem; } .prompt-nav-item { display: flex; flex-direction: row; } .prompt-nav-link { font-size: 0.8rem; color: currentColor; } .prompt-nav-link:hover { color: currentColor; } .quick-nav { display: flex; align-items: center; justify-content: flex-end; grid-gap: 1rem; } @media (min-width: 992px) { .quick-nav { grid-gap: 1.5rem; } } .quick-nav-item { display: block; padding: 0; } .quick-nav-item.item-desktop { display: none; } @media (min-width: 992px) { .quick-nav-item.item-desktop { display: block; } } .quick-nav-item.item-mobile { display: block; } @media (min-width: 992px) { .quick-nav-item.item-mobile { display: none; } } .quick-nav-link { margin: 0; padding: 6px 0; background-color: transparent; border: none; font-weight: 500; color: currentColor; line-height: 1; display: flex; align-items: center; gap: 0.35rem; } .quick-nav-link:hover { text-decoration: none; color: var(--secondary-color); } .quick-nav-more::after { content: " ↓"; } .quick-nav-pipe { margin-right: 1rem; position: relative; } .quick-nav-pipe:before { content: ""; position: absolute; right: -21px; top: 0; bottom: 0; border-right: solid 1px var(--border-color); } .quick-nav .txt { display: none; } @media (min-width: 992px) { .quick-nav .txt { display: inherit; } } .quick-nav .btn-cta { background-color: var(--secondary-color); color: var(--secondary-color-inverse); border: solid 1px var(--secondary-color); border-radius: 40px; padding: 0.5rem 1rem; } .quick-nav .btn-cta:hover, .quick-nav .btn-cta:focus { text-decoration: none; background-color: var(--brand-color); color: var(--brand-color-inverse); border-color: var(--brand-color); } .nav-more { position: absolute; right: 0; left: 0; top: 58px; background-color: var(--bg-white); color: var(--bg-white-text); border-bottom: solid 1px var(--border-color); padding: 3rem 2rem; } .nav-more ul { max-width: 1000px; margin: 0 auto; display: grid; grid-gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); } .button-cart { position: relative; } .button-cart .cart-qty { position: absolute; right: 10px; top: 6px; background-color: var(--brand-color); color: var(--brand-color-inverse); font-size: 8px; border-radius: 50%; width: 12px; height: 12px; line-height: 12px; display: flex; align-items: center; justify-content: center; } .dropdown.is-active .dropdown__target { pointer-events: auto; } .btn-engagespot .sc-jOrMOR { border-radius: 50% !important; } .btn-engagespot .sc-jOrMOR > svg { fill: var(--secondary-color); stroke: var(--secondary-color) !important; } .main .section-banner:first-child[data-section=poster] { padding-top: 1rem; } .main .section-banner + .section-banner { padding-top: 1rem; } .profile { background-color: transparent; padding: 0 1rem; display: flex; gap: 1rem; align-items: center; } .profile-img { background-color: var(--bg-placeholder); background-image: url(images/retina/image.svg); background-position: center; background-repeat: no-repeat; background-size: 50% 50%; width: 50px; height: 50px; flex: 0 0 50px; max-width: 50px; border-radius: 4px; overflow: hidden; display: flex; align-items: center; justify-content: center; aspect-ratio: 1/1; } .profile-detail .text-muted { font-size: 0.75rem; } .profile-name { font-size: 0.9rem; margin: 0; } .profile-email { font-size: 0.8rem; } .profile-phone { color: var(--txt-gray); font-size: 0.8rem; } .navigation { width: 100%; margin: 0; display: flex; padding: 0; align-items: center; justify-content: space-between; color: var(--txt-body); } .navigation.less { justify-content: flex-start; } .navigation-item { display: block; font-weight: 400; position: static; margin: 0 1.2rem; } .navigation-item:first-child { margin-right: 0; padding-right: 0; } .navigation-item .link__mobilenav { display: none; } .navigation-item .subnav { display: block; } .navigation-item .subnav-inner { background-color: var(--bg-white); color: var(--bg-white-text); border-top: solid 1px var(--bg-gray-lightest); position: absolute; top: 100%; right: 0; left: 0; width: 100%; opacity: 0; pointer-events: none; transform: translate(0, -1%); visibility: hidden; padding: 0; z-index: 998; transition: all 0.3s ease-in-out 0s; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); overflow: auto; } .navigation-item.is-focus > a { color: var(--brand-color); } .navigation-item.is-focus .arrow { opacity: 1; visibility: visible; } .navigation-item.is-focus .subnav-inner { pointer-events: all; opacity: 1; visibility: visible; transform: translate(0, 0); } .navigation-item.is-focus .subnav-inner .categories-cols { transform: translateY(0); opacity: 1; visibility: visible; } .navigation-link { color: var(--txt-body); display: block; overflow: hidden; padding: 1.625rem 0; position: relative; text-align: center; text-overflow: ellipsis; white-space: nowrap; line-height: 1; font-size: 0.9rem; font-weight: 600; border: none; background-color: transparent; background-image: linear-gradient(currentColor, currentColor); background-position: 50% 100%; background-repeat: no-repeat; background-size: 0% 2px; transition: background-size 0.3s; } .navigation-link:hover, .navigation-link.active, .navigation-link:focus { color: var(--brand-color); text-decoration: none; background-size: 100% 2px; } .navigation-link:hover a, .navigation-link.active a, .navigation-link:focus a { background-size: 100% 2px; color: var(--brand-color); } .navigation .navchild .navigation-link { padding-left: 1.2rem; } .navigation .navchild .navigation-link::after { content: ""; position: absolute; top: calc(50% - 4px); left: 4px; display: inline-block; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; width: 8px; height: 8px; transform: rotate(45deg); transform-origin: center; transition: all 0.5s ease; transform-style: preserve-3d; } .navigation .navchild .navigation-link:hover::after { top: calc(50% - 1px); transform: rotate(-134deg); transition: all 0.5s ease; } .navigation .more .svg { width: 24px; height: 17px; } .navigation .categories-container { margin: 0 auto; padding-top: 1.5rem; padding-bottom: 1.5rem; display: flex; } /*Nav mobile toggle*/ .navs_toggle { cursor: pointer; display: none; height: 22px; line-height: 1; width: 30px; z-index: 1; } .navs_toggle span { background-color: #000; border-radius: 3px; display: block; margin-bottom: 5px; transition: 0.3s all ease; height: 3px; width: 30px; } .navs_toggle span:nth-child(1) { width: 25px; } .navs_toggle:hover span:nth-child(3) { width: 25px; } .navs_toggle:hover span:nth-child(2) { width: 30px; } .navs_toggle:hover span:nth-child(1) { width: 20px; } .categories-block { flex: 1; margin: 0 auto; -moz-columns: 4 auto; columns: 4 auto; } @media (max-width: 991.98px) { .categories-block { padding: 0.5rem 0; } } .categories-block .categories-cols { display: inline-block; vertical-align: top; padding-top: 1.5rem; padding-left: 1rem; margin-bottom: 1rem; min-width: 250px; transition-delay: 0.4s; transform: translateY(30px); opacity: 0; visibility: hidden; transition: all 0.4s ease-in-out 0s; } .categories-block .categories-cols .categories-list { list-style: none; margin: 0; } .categories-block .categories-cols .categories-list-item { display: flex; } .categories-block .categories-cols .categories-list-link { font-weight: 400; color: var(--txt-gray); text-transform: none; padding: 4px 0; position: relative; } .categories-block .categories-cols .categories-list-link:after { transition: all 0.5s ease; position: absolute; left: -0.5rem; opacity: 0; content: "→"; } .categories-block .categories-cols .categories-list-link:hover { color: var(--brand-color); text-decoration: none; } .categories-block .categories-cols .categories-list-link:hover:after { transition: all 0.5s ease; left: -1rem; width: auto; opacity: 1; } .categories-block .categories-cols .categories-list-head { font-weight: 600; color: var(--txt-body); } @media (max-width: 991.98px) { .navs_toggle { display: inline-block; } .navs_toggle:after { position: fixed; top: 0; right: 0; left: 0; bottom: 0; z-index: 10; background-color: rgba(13, 17, 55, 0.8); opacity: 0; visibility: hidden; pointer-events: none; content: ""; transition: 0.3s ease-in-out all; } .navs_toggle.is-focus:after { opacity: 1; visibility: visible; pointer-events: auto; } body.toggled_right .common_overlay { opacity: 1; visibility: visible; transform: translateY(0%); transition: opacity 0.5s, transform 0.5s; } body.toggled_right .navigation-wrapper { opacity: 1; transform: translate(0px, 0px); } .navigation-wrapper { background-color: var(--bg-white); color: var(--bg-white-text); bottom: 0; box-shadow: 0 0 15px rgba(0, 0, 0, 0.3); right: 0; opacity: 0; overflow: auto; padding: 0; position: fixed; top: 0; transform: translate(-100%, 0px); transition: all 300ms ease 0s; width: 260px; z-index: 110; } .navigation { margin: 0; width: 100%; padding: 0; flex-direction: column; justify-content: flex-start; display: block; } .navigation-item { display: block; float: none; width: auto; margin: 0; padding: 0; position: relative; border-bottom: solid 1px var(var(--border-color)); } .navigation-item .link__mobilenav { bottom: 0; cursor: pointer; display: block; opacity: 1; position: absolute; left: 0; top: 0; visibility: visible; width: 40px; z-index: 1; } .navigation-item .link__mobilenav:before, .navigation-item .link__mobilenav:after { background-color: #000; content: ""; height: 2px; right: 14px; position: absolute; top: 15px; width: 12px; } .navigation-item .link__mobilenav:after { transform: rotate(90deg); } .navigation-item .link__mobilenav.is-focus:after { content: normal; } .navigation-item .subnav { display: none; position: relative; width: 100%; } .navigation-item .subnav-inner { background-color: var(--bg-white); color: var(--bg-white-text); border-top: none; box-shadow: none; display: inline-block; opacity: 1; position: relative; top: 0; visibility: visible; width: 100%; transform: none; padding: 0; } .navigation-link { text-align: right; color: inherit; display: block; padding: 20px 15px; position: relative; overflow: visible; height: auto; } .navigation-link:after, .navigation-link:before { content: normal; } .categories-block { flex-direction: column; } .categories-block .categories-cols { min-width: auto; opacity: 1; padding: 0 0 10px 0; } } .category-media { text-align: center; color: var(--brand-color); font-weight: 600; margin-right: auto; max-width: 300px; padding: 0; } .category-media figcaption { padding: 0.5rem 0; text-decoration: underline; display: inline-block; } @media (min-width: 992px) { .is-mobile { display: none; } } @media (max-width: 1199.98px) { body:has(.mobile-actions) .footer { padding-bottom: 62px; } } .mobile-actions { font-size: 0.8rem; display: none; } @media (max-width: 991.98px) { .mobile-actions { background-color: var(--bg-blur-white); color: var(--txt-body); backdrop-filter: blur(10px); box-shadow: 0 -10px 30px 0 rgba(111, 111, 111, 0.1); display: flex; align-items: center; flex-flow: row nowrap; justify-content: space-between; position: fixed; bottom: 0; right: 0; left: 0; z-index: 1030; } .mobile-actions-item { flex: 1 1 0%; } .mobile-actions-link { margin: 0 auto; border: none; background-color: transparent; padding: 1rem 10px; display: flex; align-items: center; flex-direction: column; color: var(--txt-body); } .mobile-actions-link .svg { width: 20px; height: 20px; } .mobile-actions-link:hover, .mobile-actions-link.active { color: var(--brand-color); } } .mobile-actions .txt { font-weight: 600; margin-top: 5px; } .offcanvas-mbl { max-width: 320px; } .offcanvas-mbl .offcanvas-body { position: relative; padding: 0; } .offcanvas-mbl .offcanvas-foot { padding: 1rem; } .offcanvas-mbl .btn-close { position: absolute; left: 0; top: 0; margin: 1rem; } .offcanvas-account .profile { background-color: var(--bg-gray); padding: 1rem 2rem; } .account-nav { display: flex; flex-direction: column; font-size: 1rem; } .account-nav-item { border-bottom: solid 1px var(--border-color); } .account-nav-link { display: flex; align-items: center; justify-content: space-between; padding: 1rem 2rem; gap: 0.5rem; } .account-nav .icon { display: inline-block; font-size: inherit; font-style: normal; height: 1em; position: relative; text-indent: -9999px; vertical-align: middle; width: 1em; font-size: 0.8rem; transform: scale(1); margin-right: auto; } .account-nav .icon::before { content: ""; display: block; right: 50%; position: absolute; top: 50%; border: 0.1rem solid currentColor; border-bottom: 0; border-right: 0; height: 0.65em; width: 0.65em; transform: translate(-75%, -50%) rotate(135deg); } .btn-logout { display: block; width: 100%; background-color: var(--brand-color); color: var(--brand-color-inverse); border-radius: 4px; } .zeynep { bottom: 0; overflow: hidden; -webkit-overflow-scrolling: touch; overflow-y: auto; pointer-events: none; position: fixed; top: 0; transform: translateX(100%) translateZ(0px); z-index: 1050; } .zeynep:not(.no-transition), .zeynep .submenu:not(.no-transition) { transition: all 250ms; } .zeynep-overlay { background-color: rgba(0, 0, 0, 0.42); bottom: 0; display: none; right: 0; position: fixed; left: 0; top: 0; z-index: 1049; } .zeynep-opened .zeynep-overlay { display: block; } .zeynep.opened { pointer-events: auto; transform: translateX(0px) translateZ(0px); } .zeynep.submenu-opened { overflow: hidden; } .zeynep .submenu { bottom: 0; min-height: 100%; overflow: hidden; -webkit-overflow-scrolling: touch; overflow-y: auto; pointer-events: none; position: fixed; top: 0; width: 100%; } .zeynep .submenu.opened { right: 0; pointer-events: auto; } .zeynep .submenu.opened:not(.current) { overflow: hidden; } .lead { font-size: 16px; line-height: 1.44; max-width: 260px; margin: 0 auto; margin-bottom: 25px; } /* zeynepjs menu styles */ .zeynep { background-color: var(--bg-white); color: var(--bg-white-text); color: #404143; width: 295px; } .zeynep ul { list-style-type: none; padding: 0; padding-right: 0; -webkit-overflow-scrolling: touch; } .zeynep ul > li { display: block; } .zeynep ul > li > a { color: inherit; display: block; font-size: 14px; font-weight: 500; padding: 18px 20px; text-decoration: none; transition: all 150ms; } .zeynep ul > li > a:hover { background-color: var(--bg-gray); border-radius: 3px; } .zeynep ul > li:not(:last-child) > a { border-bottom: 1px solid #efefef; } .zeynep ul > li.has-submenu > a { background-image: url("images/retina/submenu-arrow.svg"); background-position: right 20px center; background-repeat: no-repeat; background-size: 8px 14px; } .zeynep ul > li.has-submenu > a:hover { background-image: url("images/retina/submenu-arrow-active.svg"); } /* zeynepjs submenu styles */ .zeynep .submenu { background-color: var(--bg-white); color: var(--bg-white-text); right: 295px; } .zeynep .submenu-header { background-image: url("images/retina/menu-back.svg"); background-position: left 20px center; background-repeat: no-repeat; background-size: 8px 14px; border-bottom: solid 1px #efefef; cursor: pointer; position: relative; } .zeynep .submenu-header > a { color: inherit; display: block; font-size: 14px; font-weight: bold; padding: 18px 20px; padding-right: 40px; text-decoration: none; } .zeynep .submenu-header > a:before { background-image: url("images/retina/submenu-arrow.svg"); background-position: right 20px center; background-repeat: no-repeat; background-size: 8px 14px; content: ""; height: 100%; right: 26px; position: absolute; top: 0; transform: rotate(-180deg); width: 20px; } .zeynep .submenu > label { color: var(--brand-color); display: block; font-size: 13px; font-weight: 500; margin-bottom: 8px; margin-top: 19px; padding-right: 20px; width: 100%; } /* left side menu specific styles */ body { right: 0; } .zeynep-opened body { overflow: hidden; } .zeynep { left: auto; right: 0; } @media (min-width: 992px) { .zeynep .is-mobile { display: none; } } .hamburger-categories { border: none; border-radius: 20px; background-color: var(--bg-gray-light); color: var(--txt-body); font-size: 1rem; font-weight: 600; color: var(--txt-body); display: flex; align-items: center; gap: 0.5rem; margin: 0; padding: 0.25rem 0.75rem; padding-left: 4rem; } .hamburger-categories .dropdown-toggle-custom-arrow { left: 12px; } .seemore > a { font-weight: 600 !important; border: none; cursor: pointer; } .footer { background-color: var(--bg-white); color: var(--bg-white-text); padding-bottom: 5rem !important; } @media (min-width: 992px) { .footer { padding-bottom: 0 !important; } } .footer-logo { max-width: 120px; margin-bottom: 1.5rem; } .footer .contact-info { display: flex; flex-direction: column; margin-bottom: 1.5rem; } .footer .contact-info-item { display: flex; align-items: center; margin: 0; font-size: 0.875rem; font-weight: 600; color: currentColor; } .footer .contact-info-item .icn { margin-left: 8px; } .footer .contact-info-item .icn img { max-width: 15px; max-height: 15px; } .footer .contact-info-link { color: currentColor; text-decoration: underline; } @media (max-width: 575.98px) { .footer .dropdown-lang { flex: 1; } } .footer .btn-language .dropdown-toggle-custom-arrow { transform: none; } @media (max-width: 575.98px) { .footer .btn-language { display: block; width: 100%; } } .footer .btn-language .svg { width: 14px; height: 14px; } .footer-top { padding-bottom: 2rem; } .footer-bottom { border-top: solid 1px var(--border-color); padding-top: 2rem; } .footer-bottom-inner { display: flex; align-items: center; justify-content: space-between; padding: 0; flex-direction: column; } @media (min-width: 992px) { .footer-bottom-inner { flex-direction: row; } } .footer-bottom-inner .copyright, .footer-bottom-inner .tech-partner { color: currentColor; font-size: 0.75rem; padding: 10px 0; } .footer-bottom-inner .copyright a, .footer-bottom-inner .tech-partner a { color: currentColor; font-weight: 600; /* text-decoration: underline; */ } .footer-bottom-inner .copyright a:hover, .footer-bottom-inner .tech-partner a:hover { text-decoration: underline; } .footer-bottom-inner .payment { display: flex; } .footer-bottom-inner .payment img { width: 36px; margin-left: 5px; display: inline-block; } .footer-bottom-inner .payment img:last-child { margin-left: 0; } .footer .footer-layout { display: grid; grid-gap: 2rem; grid-template-columns: auto; } @media (min-width: 992px) { .footer .footer-layout { grid-gap: 4rem; grid-template-columns: 25% 1fr 12%; } } @media (max-width: 991.98px) { .footer .footer-layout .footer-logo-wrap { display: flex; flex-flow: row wrap; gap: 2rem; align-items: flex-start; justify-content: space-between; } } .footer .footer-group-head { color: currentColor; font-size: 1rem; font-weight: 500; padding: 5px 0; margin-bottom: 10px; border-radius: 4px; } @media (min-width: 992px) { .footer .footer-group-head { pointer-events: none; } } @media (max-width: 575.98px) { .footer .footer-group-head { background-color: var(--bg-gray); padding: 1rem; } .footer .footer-group-head.is-active { background-color: var(--bg-gray-dark); } } .footer .footer-group-head .dropdown-toggle-custom-arrow { left: 2rem; display: none; } @media (max-width: 575.98px) { .footer .footer-group-head .dropdown-toggle-custom-arrow { display: block; } } .footer .footer-group .footer-nav { display: block; } @media (max-width: 575.98px) { .footer .footer-group .footer-nav { display: none; } .footer .footer-group .footer-nav.show { display: block; } } .footer .footer-group .footer-nav-item { color: currentColor; font-size: 0.875em; font-weight: 400; padding: 5px 0; display: block; } .footer .footer-group .footer-nav-link { color: var(--txt-gray-light); font-size: inherit; position: relative; text-rendering: optimizeLegibility; transition: color 0.3s ease-in-out; background-image: linear-gradient(currentColor, currentColor); background-position: 50% 100%; background-repeat: no-repeat; background-size: 0% 1px; transition: background-size 0.3s; } .footer .footer-group .footer-nav-link:hover, .footer .footer-group .footer-nav-link:focus { color: currentColor; text-decoration: none; background-size: 100% 1px; } .select-lang-currency { min-width: 330px; font-size: 0.85rem; padding: 2rem; color: currentColor; } .select-lang-currency .h6 { display: block; padding: 0; margin-bottom: 10px; font-size: 0.8rem; white-space: nowrap; color: currentColor; } .select-lang-currency .list-options { overflow: auto; max-height: 200px; display: flex; flex-flow: row wrap; flex-wrap: wrap; gap: 0.5rem; } .select-lang-currency .list-options-item { border: none; } .select-lang-currency .list-options-item.is-active .list-options-link { border-color: solid 1px var(--border-dark); color: currentColor; } .select-lang-currency .list-options-item:last-child { margin: 0; } .select-lang-currency .list-options-link { color: currentColor; background-color: transparent; border: solid 1px var(--border-color); border-radius: 2px; display: flex; align-items: center; padding: 0.4rem 0.8rem; } .select-lang-currency .list-options .icon { margin-left: 5px; width: 14px; height: 14px; } .select-lang-currency .space { display: table; margin: 1rem 0; } .footer-social { margin: 0; padding: 0; display: flex; flex-direction: row; flex-wrap: wrap; font-size: 0.8rem; } @media (min-width: 992px) { .footer-social { flex-direction: column; } } .footer-social-item { flex: 1 0 40%; margin: 0.5rem 0; } .footer-social-link { display: inline-flex; color: currentColor; font-weight: 600; } .footer-social-link:hover, .footer-social-link:focus { color: currentColor; } .footer-social-icon { width: 20px; height: 20px; margin-left: 8px; border-radius: 50%; } .footer-cta { border-top: solid 1px var(--border-color); padding: 1rem 0 !important; } .footer-cta-inner { display: flex; gap: 2rem; justify-content: center; align-items: center; } .footer-cta-title { font-size: 1rem; font-weight: 600; } .captcha .wrapper { padding-bottom: 80px; } .about-platform { margin-bottom: 2rem; } .about-platform:last-child { margin: 0; } .about-platform h1, .about-platform .h1, .about-platform h2, .about-platform .h2, .about-platform h3, .about-platform .h3 { font-weight: 500; color: currentColor; font-size: 18px; margin-bottom: 0.5rem; } .about-platform p { color: var(--txt-gray-light); font-size: 14px; margin-bottom: 1rem; } html, body { padding: 0; margin: 0; height: 100%; background-color: var(--bg-white); color: var(--bg-white-text); } .sticky-demo-header .main { height: calc(100% - 60px); } .flyer-txt { display: none; } @media (min-width: 992px) { .flyer-txt { display: block; position: absolute; right: -240px; top: 0; font-size: 1.2rem; font-weight: 600; } .flyer-txt-arrow { width: 60px; position: absolute; left: -20px; top: 30px; } } .device-preview { padding: 2rem; border-radius: 10px; position: relative; width: 100%; max-width: 950px; margin: 0 auto; } @media (min-width: 768px) { .device-preview { display: flex; gap: 3rem; } } .device-preview { /*overflow-y: auto;*/ } .device-preview-container { transform: scale(1); transform-origin: center top; } @media (max-height: 801px) { .device-preview-container { transform: scale(0.9); } } @media (max-height: 700px) { .device-preview-container { transform: scale(0.8); } } @media (max-height: 600px) { .device-preview-container { transform: scale(0.7); } } .device-preview-iframe { position: absolute; top: 0; right: 0; bottom: 0; left: 0; border: none; width: 100%; height: 100%; } .device-preview-content { padding-top: 85px; } .device-preview-cms { display: flex; flex-direction: column; gap: 1rem; } .device-preview-cms h3, .device-preview-cms .h3 { font-weight: 600; font-size: 1.2rem; } .device-preview-cms p { font-size: 0.9rem; } .device-preview-cms ul li { list-style-type: disc; margin-bottom: 2rem; } .device-preview-cta { background-color: rgba(var(--brand-color-alpha), 0.08); border-radius: 4px; padding: 1.5rem; text-align: center; display: flex; flex-direction: column; gap: 1rem; } .device-preview-cta p { font-size: 1rem; font-weight: 600; } .app-actions { display: flex; gap: 1rem; flex-direction: row; justify-content: center; margin-bottom: 0.5rem; } .app-actions-item { display: flex; flex-direction: column; max-width: 110px; gap: 0.5rem; } .app-actions-qr { background-color: var(--bg-white); color: var(--bg-white-text); border: solid 2px #000; border-radius: 10px; padding: 0.5rem; margin: 0 auto; } .app-actions-btn { background-color: transparent; border: none; } .smartphone { position: relative; width: 390px; min-width: 390px; height: 710px; margin: 20px 0; border: 16px black solid; border-top-width: 60px; border-bottom-width: 60px; border-radius: 36px; } .smartphone:before, .smartphone:after { content: ""; display: block; position: absolute; background-color: #333; border-radius: 10px; transform: translate(-50%, -50%); } .smartphone:before { width: 60px; height: 5px; top: -30px; right: 50%; } .smartphone:after { width: 35px; height: 35px; right: 50%; bottom: -65px; border-radius: 50%; } .smartphone .device-preview-content { width: 360px; height: 640px; background: white; } .tablet { position: relative; width: 800px; min-width: 800px; height: 1144px; margin: 20px 0; border: 16px black solid; border-top-width: 60px; border-bottom-width: 60px; border-radius: 36px; } .tablet:before { content: ""; display: block; width: 60px; height: 5px; position: absolute; top: -30px; right: 50%; transform: translate(-50%, -50%); background: #333; border-radius: 10px; } .tablet:after { content: ""; display: block; width: 35px; height: 35px; position: absolute; right: 50%; bottom: -65px; transform: translate(-50%, -50%); background: #333; border-radius: 50%; } .tablet .device-preview__content { width: 768px; height: 1024px; background: white; } .search-wrap { display: none; flex: 1; gap: 0.5rem; width: 100%; margin: 0 auto; max-width: 800px; padding: 0; position: relative; flex-flow: row wrap; } @media (min-width: 768px) { .search-wrap { display: flex; } } .open-search { position: relative; flex: 1; width: 100%; margin: 0 2rem; display: none; } @media (min-width: 768px) { .open-search { display: block; } } .open-search-form { background-color: var(--bg-gray-light); border: solid 1px transparent; border-radius: 40px; display: flex; align-items: center; position: relative; margin: 0; padding: 0; flex: 1; transition: all 0.1s ease; } .open-search-form:focus, .open-search-form:focus-within { border-radius: 40px; border-color: #dddddd; outline: none; transition: all 0.1s ease; } .open-search-form-select, .open-search-form .btn-select { background-color: transparent; color: currentColor; border: none; border-radius: 0; border-left: solid 1px #c4c4c4; min-width: 100px; padding: 0.5rem 1rem; text-align: start; margin: 0; height: 1.5rem; line-height: 1.4; font-weight: 500; } .open-search-form-select:focus, .open-search-form-select:hover, .open-search-form .btn-select:focus, .open-search-form .btn-select:hover { box-shadow: none; transition: 0.3s all ease-in-out; outline: none; transition: all 0.2s ease; } .open-search-form-select:focus-visible, .open-search-form .btn-select:focus-visible { outline-offset: 0px; outline: none; transition: all 0.2s ease; } .open-search-input { flex: 1; background-color: transparent !important; color: currentColor; border: none; border-radius: 0; box-shadow: none; padding: 0 1rem; padding-left: 3.5rem; font-size: 0.85rem; background-repeat: no-repeat; background-size: 16px; height: 2.5rem; width: 100%; margin: 0; transition: all 0.2s ease; -webkit-appearance: search-cancel-button; } .open-search-input::-webkit-search-cancel-button { -webkit-appearance: none; height: 1.25em; width: 1.25em; border-radius: 50em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z'/%3E%3C/svg%3E") no-repeat 50% 50%; background-size: contain; } .open-search-input::-webkit-search-cancel-button:hover { cursor: pointer; border-color: #000; } .open-search-input:hover { border-color: #000; box-shadow: none; } .open-search-input:focus { box-shadow: none; transition: 0.3s all ease-in-out; outline: none; transition: all 0.2s ease; } .open-search-input:focus-visible { outline-offset: 0px; outline: none; transition: all 0.2s ease; } .open-search-btn { background-color: var(--bg-black); color: var(--bg-black-text); position: absolute; top: 5px; bottom: 5px; left: 5px; border: none; border-radius: 30px; padding: 0 0.6rem; width: 3rem; height: auto; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease-in-out; } .open-search-btn:hover { background: linear-gradient(to right, #E61E4D 0%, #E31C5F 50%, #D70466 100%); color: #fff; } .open-search .dropdown-menu-browse { padding: 1rem; } .open-search .search-suggestions { background-color: var(--bg-white); color: var(--bg-white-text); box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15); border-radius: 12px; position: absolute; z-index: 1000; width: 100%; max-height: 350px; overflow-y: auto; font-size: 0.8rem; display: flex; flex-direction: row; align-items: stretch; gap: 1rem; padding: 0; text-align: right; } .main-search { padding: 10px 0; margin-right: auto; } .offcanvas-mega-search { height: 100%; } @media (min-width: 992px) { .offcanvas-mega-search { height: 70vh; } } .mega-search { display: flex; gap: 2rem; width: 100%; height: 100%; margin: 0 auto; padding: 3rem 2rem; position: relative; flex-flow: row wrap; } @media (max-width: 575.98px) { .mega-search { text-align: center; justify-content: center; flex-direction: column; } } .mega-search-inner { flex: 1; width: 100%; max-width: 600px; margin: 0 auto; height: 100%; display: flex; flex-direction: column; } .mega-search-form { flex: 1; } .mega-search-fieldset { background-color: var(--bg-gray) !important; border-radius: 20px; margin-bottom: 0; display: flex; flex-flow: row; align-items: center; position: relative; } .mega-search .btn-select { background-color: transparent; border: none; border-radius: 0; border-left: solid 1px rgb(214, 214, 214); min-width: 112px; padding: 0 1rem; margin: 0; height: auto; line-height: 1.4; font-weight: 600; } .mega-search .btn-select:focus { box-shadow: none; transition: 0.3s all ease-in-out; box-shadow: 0 4px 12px rgba(99, 102, 241, 0.1); outline: none; transition: all 0.2s ease; } .mega-search .btn-select:focus-visible { outline-offset: 0px; outline: none; transition: all 0.2s ease; } .mega-search-input { background-color: transparent; padding: 10px 1rem; font-size: 0.85rem; background-repeat: no-repeat; background-position: 15px center; background-size: 14px; border: none; border-radius: 0; height: 40px; width: 100%; transition: all 0.2s ease; -webkit-appearance: search-cancel-button; } [dir=rtl] .mega-search-input { background-position: calc(100% - 15px) center; } .mega-search-input::-webkit-search-cancel-button { -webkit-appearance: none; height: 1.25em; width: 1.25em; border-radius: 50em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z'/%3E%3C/svg%3E") no-repeat 50% 50%; background-size: contain; } .mega-search-input::-webkit-search-cancel-button:hover { cursor: pointer; } .mega-search-input:hover { border-color: #000; box-shadow: none; } .mega-search-input:focus { border-color: #000; box-shadow: none; transition: 0.3s all ease-in-out; box-shadow: 0 4px 12px rgba(99, 102, 241, 0.1); outline: 1px solid #000; transition: all 0.2s ease; } .mega-search-input:focus-visible { outline-offset: 0px; outline: 1px solid #000; transition: all 0.2s ease; } .mega-search-btn { background-color: var(--brand-color); color: var(--brand-color-inverse); display: flex; align-items: center; justify-content: center; border: none; border-radius: 50%; padding: 0; margin: 0; position: absolute; top: 5px; left: 5px; aspect-ratio: 1/1; width: 30px; } .mega-search .btn-search-close { background-color: var(--bg-gray) !important; display: block; margin: 0; width: 40px; height: 40px; line-height: 40px; min-height: 40px; padding: 0; border-radius: 50%; } @media (max-width: 991.98px) { .mega-search .btn-search-close { margin: 0 auto; } } .btn-mega-search { background-color: transparent; border-radius: 50%; width: 2.625rem; height: 2.625rem; border: none; display: flex; align-items: center; justify-content: center; } .search-suggestions { max-height: 280px; overflow: auto; font-size: 0.8rem; padding: 0; display: flex; flex-direction: row; gap: 1.5rem; border-radius: 4px; text-align: right; } .search-suggestions .suggestions-title { text-transform: uppercase; color: var(--txt-body); font-size: 0.8rem; margin-bottom: 0.5rem; padding: 0; } .search-suggestions .text-suggestions { flex: 1; display: flex; flex-direction: column; font-size: 0.75rem; padding: 1.5rem; } .search-suggestions .text-suggestions-item { padding-bottom: 8px; transition: all 0.2s ease-in-out; } .search-suggestions .text-suggestions-link { display: inline-block; transition: all 0.2s linear; position: relative; } .search-suggestions .text-suggestions-link:hover { color: var(--brand-color); text-decoration: none; } .search-suggestions .text-suggestions-link:hover:after { transition: all 0.5s ease; left: -1rem; width: auto; opacity: 1; } .search-suggestions .history-suggestions { width: 100%; } .search-suggestions .history-suggestions li { display: flex; justify-content: space-between; align-items: center; } .search-suggestions .history-suggestions .clear-all { font-size: inherit; } .search-suggestions .history-suggestions .recent-search { margin: 0.5rem 0; } .search-suggestions .history-suggestions .recent-search:last-child { margin: 0; } .search-suggestions .history-suggestions .recent-search__cross { position: relative; flex: 0 0 20px; max-width: 20px; height: 20px; margin-left: 10px; } .search-suggestions .history-suggestions .recent-search__cross .close-layer { top: 0; right: 0; left: auto; } .search-suggestions .history-suggestions .recent-search__link { flex: 1; } .search-suggestions .history-suggestions .recent-search__arrow { transform: rotate(-45deg); cursor: pointer; } .search-suggestions .history-suggestions .recent-search__arrow .svg { width: 16px; height: 16px; fill: currentColor; } .search-suggestions .matched { background-color: var(--bg-gray); color: var(--txt-body); padding: 1.5rem; display: block; } .search-suggestions .matched .text-suggestions { padding: 0; } .search-suggestions .matched .matched-brands { margin-bottom: 2rem; } .js-carousel { grid-auto-flow: column; margin-bottom: 0 !important; margin-inline: -0.75rem; } @media (min-width: 992px) { .js-carousel { display: flex; } } .js-carousel:not(.slick-initialized) { visibility: hidden; } .js-carousel-item { min-width: 0; padding-inline: 0.75rem; } .js-carousel .slick-track { margin: 0; } .acc-triger { position: relative; } .acc-triger:before { background-color: #000; content: ""; height: 2px; position: absolute; left: 0; top: 50%; font-weight: 800; transform: rotate(90deg); transition: all 0.2s ease-in-out; width: 10px; } .acc-triger:after { font-weight: 800; background-color: #000; content: ""; height: 2px; position: absolute; left: 0; top: 50%; width: 10px; } .acc-triger.active:before { transform: rotate(0deg); } .acc-data { padding: 0; display: none; } .grouplisting { margin: 20px 0 0; } .grouplisting .group { border-radius: 5px; margin: 5px 0 0; } .groups .group__head { width: 100%; position: relative; padding: 1rem; margin: 0.5rem 0; cursor: pointer; border: solid 1px var(--border-color); border-radius: 4px; } .groups .group__head:after { width: 20px; height: 20px; position: absolute; left: 15px; top: 6px; content: "+"; pointer-events: none; font-size: 1.6rem; padding: 0 0 0 1px; } .groups .group__head h5, .groups .group__head .h5 { padding: 0; font-size: 0.95rem; margin: 0; } .groups .group__body { padding: 1rem; display: none; } .groups.is-active .group__head:after { content: "-"; font-size: 2.2em; top: 0; } .editor-container, .groups .group__body h5, .groups .group__body .h5 { font-size: 0.95em; } .editor-container, .groups .group__body p { font-size: 0.9rem; line-height: 1.6; color: #666; margin-bottom: 30px; } .categories-menu { overflow: hidden; overflow-y: auto; height: 100%; max-width: 330px; } .categories-menu .offcanvas-header { padding: 1rem 1rem; } .categories-menu .offcanvas-body { padding: 1rem 0; } .categories-menu .offcanvas-footer { padding: 1rem 1rem; } .grouping { display: flex; flex-direction: column; justify-content: center; font-size: 0.9rem; } .grouping .skeleton { padding: 1rem; border-radius: 5px; margin: 1rem 0; } .grouping-item { transition: all 0.3s ease; margin: 0; padding: 0; } .grouping-section { background-color: transparent; color: currentColor; border: none; border-bottom: solid 1px var(--border-light); position: relative; width: 100%; text-align: right; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; margin: 0; padding: 0.75rem 1rem; background-color: transparent; position: relative; overflow: hidden; } .grouping-section::before { content: ""; background: var(--bg-gray-light); position: absolute; z-index: -1; top: 0; width: 100%; height: 100%; right: 0; left: 0; opacity: 0; transition: all 0.2s cubic-bezier(0.2, 0.91, 0.85, 0.96) 0s; transform: scale(0.75); backface-visibility: hidden; pointer-events: none; } .grouping-section:is(:hover, :focus, :active, .active)::before { opacity: 1; transform: scale(1); } .grouping-section:focus { border: none; outline: none; } .grouping-section::before { background: var(--bg-gray-lightest); } .grouping .cat-sidebar-icn { background-color: var(--bg-placeholder); background-image: url(images/retina/image.svg); background-position: center; background-repeat: no-repeat; background-size: 50% 50%; border-radius: 50%; display: grid; place-content: center; width: 2rem; height: 2rem; aspect-ratio: 1/1; flex-shrink: 0; padding: 5px; margin-left: 0.5rem; } .grouping .cat-sidebar-img { background-color: #fff; border-radius: 50%; } .grouping-arrow { width: 20px; height: 20px; padding: 0; margin-top: 0; margin-left: 0; border: none; background-color: transparent; color: currentColor; } .grouping-link { background-color: transparent; color: currentColor; border: none; flex: 1; border-radius: 4px; margin: 0; padding: 1rem 1rem; padding-left: 0; position: relative; text-align: right; width: 100%; } .grouping-icon { display: flex; align-items: center; width: 16px; height: 16px; color: currentColor; margin-left: 0.5rem; } .grouping-icon .svg { width: 100%; height: 100%; display: block; } .grouping-title { flex: 1; display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .grouping-title:is(:hover, :focus, :active) { text-decoration: none; color: var(--txt-body); } .grouping-level ul li { position: relative; padding-right: 20px; margin: 1px 0; } .grouping-level ul li::after { content: ""; width: 5px; height: 5px; aspect-ratio: 1/1; flex-shrink: 0; background: currentColor; display: block; position: absolute; right: 1.125rem; top: 1.125rem; border-radius: 50%; } .level-1 { font-weight: 600; } .category-accordion .cat-filter-noicn { padding-block: 0.5rem; } .category-accordion .grouping-section { padding: 0; padding-block: 0.5rem; border-bottom: none; } .category-accordion ul li::after { right: 0.5rem; top: 1rem; } .autocomplete-suggestions.search-dropdown-menu { right: 0; top: 100%; padding: 10px; background-color: var(--bg-white); color: var(--bg-white-text); box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.1); border-radius: 0 0 4px 4px; width: 100% !important; border-top: 1px solid #ddd; font-size: 0.8em; overflow-y: auto; } .autocomplete-suggestions.search-dropdown-menu li { padding: 5px 0; } .autocomplete-suggestions.search-dropdown-menu li strong { font-weight: 800; } .auto-suggestion { min-width: 220px; z-index: 10; top: 100%; background-color: var(--bg-white); color: var(--bg-white-text); box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.1); position: absolute; transform: scale(0); opacity: 0; filter: alpha(opacity=0); transition: all 300ms; transform-origin: top right; /*active*/ transform: scale(1); opacity: 1; filter: alpha(opacity=100); } .auto-suggestion li { padding: 5px 10px; border-bottom: solid 1px var(--border-color); } .auto-suggestion li a { display: block; } .avtar { height: 60px; position: relative; width: 60px; overflow: hidden; width: 60px; height: 60px; border: solid 1px var(--border-color); border-radius: 100%; position: relative; } .avtar .avtar--rounded { border-radius: 50% !important; } .avtar .avtar--rounded img { border-radius: 100% !important; } .avtar.avtar--large { width: 130px; height: 130px; } .avtar img { position: absolute; right: 0; left: 0; bottom: 0; top: 0; margin: auto; } .avtar--info { padding-top: 5px; } .avtar--info .avtar { float: left; margin: 0 15px 0 0; } .avtar--info h5, .avtar--info .h5 { padding: 5px 0 0; } .avtar--rounded { border-radius: 100% !important; } .avtar--rounded img { border-radius: 100% !important; } .profile-avatar { display: inline-flex; align-items: center; /*justify-content: center;*/ } .profile-avatar .profile-dp { overflow: hidden; border-radius: 50%; width: 50px; height: 50px; max-width: 50px; flex: 0 0 50px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0px 2px rgba(0, 0, 0, 0.33); margin: 0; margin-left: 1rem; } .profile-avatar .title { margin: 0; font-size: 0.875rem; color: var(--txt-body); } .profile-avatar .dated { display: block; font-size: 12px; color: var(--txt-gray); } .back-to-top { background-color: var(--bg-white); color: var(--bg-white-text); border-radius: 0; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-radius: 4px; border: none; cursor: pointer; width: 44px; height: 50px; padding: 10px 0; position: fixed; z-index: 1030; left: 0; bottom: 150px; text-align: center; text-decoration: none; display: flex; justify-content: center; align-items: center; flex-direction: column; color: var(--txt-body); font-size: 0.8rem; font-weight: 600; box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.1); } .back-to-top .svg { margin: 0 auto; width: 1rem; height: 1rem; } .breadcrumb { list-style: none; margin: 0; padding: 0; } .breadcrumb ul { display: flex; margin: 0; align-items: center; flex-wrap: wrap; } .breadcrumb ul li { position: relative; padding: 0; margin: 5px 0; margin-left: 1rem; color: currentColor; font-size: 0.8125rem; display: block; font-weight: 400; line-height: 1.5; } .breadcrumb ul li:before { line-height: inherit; padding: 0 !important; position: absolute; left: -1rem; content: "/" !important; } .breadcrumb ul li:last-child { padding-left: 0; } .breadcrumb ul li:last-child:before { display: none; } .breadcrumb ul li a { color: currentColor; font-size: inherit; display: block; line-height: inherit; } .breadcrumb-center { justify-content: center; } .breadcrumb-center ul { justify-content: center; } .breadcrumb-right { color: var(--txt-white); } .breadcrumb-right ul { justify-content: flex-end; } .breadcrumb-white { color: var(--txt-white); } .breadcrumb-white ul li:before { border-color: #fff; } .form .form-group, .form .field-set { margin-bottom: 1.3rem; } .form .form-group.form-group, .form .field-set.form-group { position: relative; } .form-label, .form .label, .form .field_label { font-size: 0.8rem; color: var(--txt-body); margin: 0; margin-bottom: 8px; /*for alignment issue where no content in form lebal - form button and input alignment */ display: inline-block; cursor: default; /*opacity: 0.6;*/ font-weight: 500; } .form-label:empty, .form .label:empty, .form .field_label:empty { min-height: 21px; display: block; } .form input[type=text], .form [type=text].custom-select { border: solid 1px var(--border-color); background-color: var(--bg-input); color: var(--txt-body); height: 2.5rem; width: 100%; padding: 0 1rem; font-size: 0.85rem; line-height: 2.5rem; border-radius: 4px; font-family: inherit; transition: 0.3s all ease-in-out; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .form input[type=text]:focus, .form [type=text].custom-select:focus, .form input[type=text]:hover, .form [type=text].custom-select:hover { border-color: var(--border-color); box-shadow: none; transition: 0.3s all ease-in-out; box-shadow: 0 4px 12px rgba(99, 102, 241, 0.1); outline: 1px solid var(--border-color); transition: all 0.2s ease; background-color: var(--bg-input); color: currentColor; } .form input[type=text]:focus-visible, .form [type=text].custom-select:focus-visible { outline-offset: 0px; outline: 1px solid var(--border-color); transition: all 0.2s ease; } .form input[type=text]:required:not(:-moz-placeholder):invalid, .form [type=text].custom-select:required:not(:-moz-placeholder):invalid { border-color: #fd397a; } .form input[type=text]:required:not(:placeholder-shown):invalid, .form [type=text].custom-select:required:not(:placeholder-shown):invalid { border-color: #fd397a; } .form input[type=text]:required:not(:-moz-placeholder):invalid:focus, .form [type=text].custom-select:required:not(:-moz-placeholder):invalid:focus { border-color: none; outline: none; } .form input[type=text]:required:not(:placeholder-shown):invalid:focus, .form [type=text].custom-select:required:not(:placeholder-shown):invalid:focus { border-color: none; outline: none; } .form input[type=text]:required:not(:-moz-placeholder):valid, .form [type=text].custom-select:required:not(:-moz-placeholder):valid { border-color: #1dc9b7; } .form input[type=text]:required:not(:placeholder-shown):valid, .form [type=text].custom-select:required:not(:placeholder-shown):valid { border-color: #1dc9b7; } .form input[type=text]:required:not(:-moz-placeholder):valid:focus, .form [type=text].custom-select:required:not(:-moz-placeholder):valid:focus { border-color: none; outline: none; } .form input[type=text]:required:not(:placeholder-shown):valid:focus, .form [type=text].custom-select:required:not(:placeholder-shown):valid:focus { border-color: none; outline: none; } .form input[type=text]:disabled, .form [type=text].custom-select:disabled { cursor: not-allowed; opacity: 0.5; } .form input[type=text]:disabled:hover, .form [type=text].custom-select:disabled:hover { cursor: not-allowed; } .form input[type=text].error, .form [type=text].error.custom-select { outline-color: #fd397a; border-color: #fd397a; } .form input[type=email], .form [type=email].custom-select { border: solid 1px var(--border-color); background-color: var(--bg-input); color: var(--txt-body); height: 2.5rem; width: 100%; padding: 0 1rem; font-size: 0.85rem; line-height: 2.5rem; border-radius: 4px; font-family: inherit; transition: 0.3s all ease-in-out; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .form input[type=email]:focus, .form [type=email].custom-select:focus, .form input[type=email]:hover, .form [type=email].custom-select:hover { border-color: var(--border-color); box-shadow: none; transition: 0.3s all ease-in-out; box-shadow: 0 4px 12px rgba(99, 102, 241, 0.1); outline: 1px solid var(--border-color); transition: all 0.2s ease; background-color: var(--bg-input); color: currentColor; } .form input[type=email]:focus-visible, .form [type=email].custom-select:focus-visible { outline-offset: 0px; outline: 1px solid var(--border-color); transition: all 0.2s ease; } .form input[type=email]:required:not(:-moz-placeholder):invalid, .form [type=email].custom-select:required:not(:-moz-placeholder):invalid { border-color: #fd397a; } .form input[type=email]:required:not(:placeholder-shown):invalid, .form [type=email].custom-select:required:not(:placeholder-shown):invalid { border-color: #fd397a; } .form input[type=email]:required:not(:-moz-placeholder):invalid:focus, .form [type=email].custom-select:required:not(:-moz-placeholder):invalid:focus { border-color: none; outline: none; } .form input[type=email]:required:not(:placeholder-shown):invalid:focus, .form [type=email].custom-select:required:not(:placeholder-shown):invalid:focus { border-color: none; outline: none; } .form input[type=email]:required:not(:-moz-placeholder):valid, .form [type=email].custom-select:required:not(:-moz-placeholder):valid { border-color: #1dc9b7; } .form input[type=email]:required:not(:placeholder-shown):valid, .form [type=email].custom-select:required:not(:placeholder-shown):valid { border-color: #1dc9b7; } .form input[type=email]:required:not(:-moz-placeholder):valid:focus, .form [type=email].custom-select:required:not(:-moz-placeholder):valid:focus { border-color: none; outline: none; } .form input[type=email]:required:not(:placeholder-shown):valid:focus, .form [type=email].custom-select:required:not(:placeholder-shown):valid:focus { border-color: none; outline: none; } .form input[type=email]:disabled, .form [type=email].custom-select:disabled { cursor: not-allowed; opacity: 0.5; } .form input[type=email]:disabled:hover, .form [type=email].custom-select:disabled:hover { cursor: not-allowed; } .form input[type=email].error, .form [type=email].error.custom-select { outline-color: #fd397a; border-color: #fd397a; } .form input[type=phone], .form [type=phone].custom-select { border: solid 1px var(--border-color); background-color: var(--bg-input); color: var(--txt-body); height: 2.5rem; width: 100%; padding: 0 1rem; font-size: 0.85rem; line-height: 2.5rem; border-radius: 4px; font-family: inherit; transition: 0.3s all ease-in-out; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .form input[type=phone]:focus, .form [type=phone].custom-select:focus, .form input[type=phone]:hover, .form [type=phone].custom-select:hover { border-color: var(--border-color); box-shadow: none; transition: 0.3s all ease-in-out; box-shadow: 0 4px 12px rgba(99, 102, 241, 0.1); outline: 1px solid var(--border-color); transition: all 0.2s ease; background-color: var(--bg-input); color: currentColor; } .form input[type=phone]:focus-visible, .form [type=phone].custom-select:focus-visible { outline-offset: 0px; outline: 1px solid var(--border-color); transition: all 0.2s ease; } .form input[type=phone]:required:not(:-moz-placeholder):invalid, .form [type=phone].custom-select:required:not(:-moz-placeholder):invalid { border-color: #fd397a; } .form input[type=phone]:required:not(:placeholder-shown):invalid, .form [type=phone].custom-select:required:not(:placeholder-shown):invalid { border-color: #fd397a; } .form input[type=phone]:required:not(:-moz-placeholder):invalid:focus, .form [type=phone].custom-select:required:not(:-moz-placeholder):invalid:focus { border-color: none; outline: none; } .form input[type=phone]:required:not(:placeholder-shown):invalid:focus, .form [type=phone].custom-select:required:not(:placeholder-shown):invalid:focus { border-color: none; outline: none; } .form input[type=phone]:required:not(:-moz-placeholder):valid, .form [type=phone].custom-select:required:not(:-moz-placeholder):valid { border-color: #1dc9b7; } .form input[type=phone]:required:not(:placeholder-shown):valid, .form [type=phone].custom-select:required:not(:placeholder-shown):valid { border-color: #1dc9b7; } .form input[type=phone]:required:not(:-moz-placeholder):valid:focus, .form [type=phone].custom-select:required:not(:-moz-placeholder):valid:focus { border-color: none; outline: none; } .form input[type=phone]:required:not(:placeholder-shown):valid:focus, .form [type=phone].custom-select:required:not(:placeholder-shown):valid:focus { border-color: none; outline: none; } .form input[type=phone]:disabled, .form [type=phone].custom-select:disabled { cursor: not-allowed; opacity: 0.5; } .form input[type=phone]:disabled:hover, .form [type=phone].custom-select:disabled:hover { cursor: not-allowed; } .form input[type=phone].error, .form [type=phone].error.custom-select { outline-color: #fd397a; border-color: #fd397a; } .form input[type=search], .form [type=search].custom-select { border: solid 1px var(--border-color); background-color: var(--bg-input); color: var(--txt-body); height: 2.5rem; width: 100%; padding: 0 1rem; font-size: 0.85rem; line-height: 2.5rem; border-radius: 4px; font-family: inherit; transition: 0.3s all ease-in-out; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .form input[type=search]:focus, .form [type=search].custom-select:focus, .form input[type=search]:hover, .form [type=search].custom-select:hover { border-color: var(--border-color); box-shadow: none; transition: 0.3s all ease-in-out; box-shadow: 0 4px 12px rgba(99, 102, 241, 0.1); outline: 1px solid var(--border-color); transition: all 0.2s ease; background-color: var(--bg-input); color: currentColor; } .form input[type=search]:focus-visible, .form [type=search].custom-select:focus-visible { outline-offset: 0px; outline: 1px solid var(--border-color); transition: all 0.2s ease; } .form input[type=search]:required:not(:-moz-placeholder):invalid, .form [type=search].custom-select:required:not(:-moz-placeholder):invalid { border-color: #fd397a; } .form input[type=search]:required:not(:placeholder-shown):invalid, .form [type=search].custom-select:required:not(:placeholder-shown):invalid { border-color: #fd397a; } .form input[type=search]:required:not(:-moz-placeholder):invalid:focus, .form [type=search].custom-select:required:not(:-moz-placeholder):invalid:focus { border-color: none; outline: none; } .form input[type=search]:required:not(:placeholder-shown):invalid:focus, .form [type=search].custom-select:required:not(:placeholder-shown):invalid:focus { border-color: none; outline: none; } .form input[type=search]:required:not(:-moz-placeholder):valid, .form [type=search].custom-select:required:not(:-moz-placeholder):valid { border-color: #1dc9b7; } .form input[type=search]:required:not(:placeholder-shown):valid, .form [type=search].custom-select:required:not(:placeholder-shown):valid { border-color: #1dc9b7; } .form input[type=search]:required:not(:-moz-placeholder):valid:focus, .form [type=search].custom-select:required:not(:-moz-placeholder):valid:focus { border-color: none; outline: none; } .form input[type=search]:required:not(:placeholder-shown):valid:focus, .form [type=search].custom-select:required:not(:placeholder-shown):valid:focus { border-color: none; outline: none; } .form input[type=search]:disabled, .form [type=search].custom-select:disabled { cursor: not-allowed; opacity: 0.5; } .form input[type=search]:disabled:hover, .form [type=search].custom-select:disabled:hover { cursor: not-allowed; } .form input[type=search].error, .form [type=search].error.custom-select { outline-color: #fd397a; border-color: #fd397a; } .form input[type=search], .form [type=search].custom-select { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTEyIDUxMjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPGc+DQoJCTxwYXRoIGZpbGw9IiM4ODgiIGQ9Ik0yMjUuNDc0LDBDMTAxLjE1MSwwLDAsMTAxLjE1MSwwLDIyNS40NzRjMCwxMjQuMzMsMTAxLjE1MSwyMjUuNDc0LDIyNS40NzQsMjI1LjQ3NA0KCQkJYzEyNC4zMywwLDIyNS40NzQtMTAxLjE0NCwyMjUuNDc0LTIyNS40NzRDNDUwLjk0OCwxMDEuMTUxLDM0OS44MDQsMCwyMjUuNDc0LDB6IE0yMjUuNDc0LDQwOS4zMjMNCgkJCWMtMTAxLjM3MywwLTE4My44NDgtODIuNDc1LTE4My44NDgtMTgzLjg0OFMxMjQuMTAxLDQxLjYyNiwyMjUuNDc0LDQxLjYyNnMxODMuODQ4LDgyLjQ3NSwxODMuODQ4LDE4My44NDgNCgkJCVMzMjYuODQ3LDQwOS4zMjMsMjI1LjQ3NCw0MDkuMzIzeiIvPg0KCTwvZz4NCjwvZz4gDQo8Zz4NCgk8Zz4NCgkJPHBhdGggZmlsbD0iIzg4OCIgZD0iTTUwNS45MDIsNDc2LjQ3MkwzODYuNTc0LDM1Ny4xNDRjLTguMTMxLTguMTMxLTIxLjI5OS04LjEzMS0yOS40MywwYy04LjEzMSw4LjEyNC04LjEzMSwyMS4zMDYsMCwyOS40M2wxMTkuMzI4LDExOS4zMjgNCgkJCWM0LjA2NSw0LjA2NSw5LjM4Nyw2LjA5OCwxNC43MTUsNi4wOThjNS4zMjEsMCwxMC42NDktMi4wMzMsMTQuNzE1LTYuMDk4QzUxNC4wMzMsNDk3Ljc3OCw1MTQuMDMzLDQ4NC41OTYsNTA1LjkwMiw0NzYuNDcyeiIvPg0KCTwvZz4NCjwvZz4NCiANCjwvc3ZnPg0K"); background-size: 14px; background-repeat: no-repeat; background-position: 13px center; -webkit-appearance: search-cancel-button; } .form input[type=search]::-webkit-search-cancel-button, .form [type=search].custom-select::-webkit-search-cancel-button { -webkit-appearance: none; height: 1.25em; width: 1.25em; border-radius: 50em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z'/%3E%3C/svg%3E") no-repeat 50% 50%; background-size: contain; } .form input[type=search]::-webkit-search-cancel-button:hover, .form [type=search].custom-select::-webkit-search-cancel-button:hover { cursor: pointer; } [dir=rtl] .form input[type=search], [dir=rtl] .form [type=search].custom-select { background-position: calc(100% - 13px) center; } .form input[type=password], .form [type=password].custom-select { border: solid 1px var(--border-color); background-color: var(--bg-input); color: var(--txt-body); height: 2.5rem; width: 100%; padding: 0 1rem; font-size: 0.85rem; line-height: 2.5rem; border-radius: 4px; font-family: inherit; transition: 0.3s all ease-in-out; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .form input[type=password]:focus, .form [type=password].custom-select:focus, .form input[type=password]:hover, .form [type=password].custom-select:hover { border-color: var(--border-color); box-shadow: none; transition: 0.3s all ease-in-out; box-shadow: 0 4px 12px rgba(99, 102, 241, 0.1); outline: 1px solid var(--border-color); transition: all 0.2s ease; background-color: var(--bg-input); color: currentColor; } .form input[type=password]:focus-visible, .form [type=password].custom-select:focus-visible { outline-offset: 0px; outline: 1px solid var(--border-color); transition: all 0.2s ease; } .form input[type=password]:required:not(:-moz-placeholder):invalid, .form [type=password].custom-select:required:not(:-moz-placeholder):invalid { border-color: #fd397a; } .form input[type=password]:required:not(:placeholder-shown):invalid, .form [type=password].custom-select:required:not(:placeholder-shown):invalid { border-color: #fd397a; } .form input[type=password]:required:not(:-moz-placeholder):invalid:focus, .form [type=password].custom-select:required:not(:-moz-placeholder):invalid:focus { border-color: none; outline: none; } .form input[type=password]:required:not(:placeholder-shown):invalid:focus, .form [type=password].custom-select:required:not(:placeholder-shown):invalid:focus { border-color: none; outline: none; } .form input[type=password]:required:not(:-moz-placeholder):valid, .form [type=password].custom-select:required:not(:-moz-placeholder):valid { border-color: #1dc9b7; } .form input[type=password]:required:not(:placeholder-shown):valid, .form [type=password].custom-select:required:not(:placeholder-shown):valid { border-color: #1dc9b7; } .form input[type=password]:required:not(:-moz-placeholder):valid:focus, .form [type=password].custom-select:required:not(:-moz-placeholder):valid:focus { border-color: none; outline: none; } .form input[type=password]:required:not(:placeholder-shown):valid:focus, .form [type=password].custom-select:required:not(:placeholder-shown):valid:focus { border-color: none; outline: none; } .form input[type=password]:disabled, .form [type=password].custom-select:disabled { cursor: not-allowed; opacity: 0.5; } .form input[type=password]:disabled:hover, .form [type=password].custom-select:disabled:hover { cursor: not-allowed; } .form input[type=password].error, .form [type=password].error.custom-select { outline-color: #fd397a; border-color: #fd397a; } .form input[type=date], .form [type=date].custom-select { border: solid 1px var(--border-color); background-color: var(--bg-input); color: var(--txt-body); height: 2.5rem; width: 100%; padding: 0 1rem; font-size: 0.85rem; line-height: 2.5rem; border-radius: 4px; font-family: inherit; transition: 0.3s all ease-in-out; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .form input[type=date]:focus, .form [type=date].custom-select:focus, .form input[type=date]:hover, .form [type=date].custom-select:hover { border-color: var(--border-color); box-shadow: none; transition: 0.3s all ease-in-out; box-shadow: 0 4px 12px rgba(99, 102, 241, 0.1); outline: 1px solid var(--border-color); transition: all 0.2s ease; background-color: var(--bg-input); color: currentColor; } .form input[type=date]:focus-visible, .form [type=date].custom-select:focus-visible { outline-offset: 0px; outline: 1px solid var(--border-color); transition: all 0.2s ease; } .form input[type=date]:required:not(:-moz-placeholder):invalid, .form [type=date].custom-select:required:not(:-moz-placeholder):invalid { border-color: #fd397a; } .form input[type=date]:required:not(:placeholder-shown):invalid, .form [type=date].custom-select:required:not(:placeholder-shown):invalid { border-color: #fd397a; } .form input[type=date]:required:not(:-moz-placeholder):invalid:focus, .form [type=date].custom-select:required:not(:-moz-placeholder):invalid:focus { border-color: none; outline: none; } .form input[type=date]:required:not(:placeholder-shown):invalid:focus, .form [type=date].custom-select:required:not(:placeholder-shown):invalid:focus { border-color: none; outline: none; } .form input[type=date]:required:not(:-moz-placeholder):valid, .form [type=date].custom-select:required:not(:-moz-placeholder):valid { border-color: #1dc9b7; } .form input[type=date]:required:not(:placeholder-shown):valid, .form [type=date].custom-select:required:not(:placeholder-shown):valid { border-color: #1dc9b7; } .form input[type=date]:required:not(:-moz-placeholder):valid:focus, .form [type=date].custom-select:required:not(:-moz-placeholder):valid:focus { border-color: none; outline: none; } .form input[type=date]:required:not(:placeholder-shown):valid:focus, .form [type=date].custom-select:required:not(:placeholder-shown):valid:focus { border-color: none; outline: none; } .form input[type=date]:disabled, .form [type=date].custom-select:disabled { cursor: not-allowed; opacity: 0.5; } .form input[type=date]:disabled:hover, .form [type=date].custom-select:disabled:hover { cursor: not-allowed; } .form input[type=date].error, .form [type=date].error.custom-select { outline-color: #fd397a; border-color: #fd397a; } .form input[type=url], .form [type=url].custom-select { border: solid 1px var(--border-color); background-color: var(--bg-input); color: var(--txt-body); height: 2.5rem; width: 100%; padding: 0 1rem; font-size: 0.85rem; line-height: 2.5rem; border-radius: 4px; font-family: inherit; transition: 0.3s all ease-in-out; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .form input[type=url]:focus, .form [type=url].custom-select:focus, .form input[type=url]:hover, .form [type=url].custom-select:hover { border-color: var(--border-color); box-shadow: none; transition: 0.3s all ease-in-out; box-shadow: 0 4px 12px rgba(99, 102, 241, 0.1); outline: 1px solid var(--border-color); transition: all 0.2s ease; background-color: var(--bg-input); color: currentColor; } .form input[type=url]:focus-visible, .form [type=url].custom-select:focus-visible { outline-offset: 0px; outline: 1px solid var(--border-color); transition: all 0.2s ease; } .form input[type=url]:required:not(:-moz-placeholder):invalid, .form [type=url].custom-select:required:not(:-moz-placeholder):invalid { border-color: #fd397a; } .form input[type=url]:required:not(:placeholder-shown):invalid, .form [type=url].custom-select:required:not(:placeholder-shown):invalid { border-color: #fd397a; } .form input[type=url]:required:not(:-moz-placeholder):invalid:focus, .form [type=url].custom-select:required:not(:-moz-placeholder):invalid:focus { border-color: none; outline: none; } .form input[type=url]:required:not(:placeholder-shown):invalid:focus, .form [type=url].custom-select:required:not(:placeholder-shown):invalid:focus { border-color: none; outline: none; } .form input[type=url]:required:not(:-moz-placeholder):valid, .form [type=url].custom-select:required:not(:-moz-placeholder):valid { border-color: #1dc9b7; } .form input[type=url]:required:not(:placeholder-shown):valid, .form [type=url].custom-select:required:not(:placeholder-shown):valid { border-color: #1dc9b7; } .form input[type=url]:required:not(:-moz-placeholder):valid:focus, .form [type=url].custom-select:required:not(:-moz-placeholder):valid:focus { border-color: none; outline: none; } .form input[type=url]:required:not(:placeholder-shown):valid:focus, .form [type=url].custom-select:required:not(:placeholder-shown):valid:focus { border-color: none; outline: none; } .form input[type=url]:disabled, .form [type=url].custom-select:disabled { cursor: not-allowed; opacity: 0.5; } .form input[type=url]:disabled:hover, .form [type=url].custom-select:disabled:hover { cursor: not-allowed; } .form input[type=url].error, .form [type=url].error.custom-select { outline-color: #fd397a; border-color: #fd397a; } .form input[type=tel], .form [type=tel].custom-select { border: solid 1px var(--border-color); background-color: var(--bg-input); color: var(--txt-body); height: 2.5rem; width: 100%; padding: 0 1rem; font-size: 0.85rem; line-height: 2.5rem; border-radius: 4px; font-family: inherit; transition: 0.3s all ease-in-out; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .form input[type=tel]:focus, .form [type=tel].custom-select:focus, .form input[type=tel]:hover, .form [type=tel].custom-select:hover { border-color: var(--border-color); box-shadow: none; transition: 0.3s all ease-in-out; box-shadow: 0 4px 12px rgba(99, 102, 241, 0.1); outline: 1px solid var(--border-color); transition: all 0.2s ease; background-color: var(--bg-input); color: currentColor; } .form input[type=tel]:focus-visible, .form [type=tel].custom-select:focus-visible { outline-offset: 0px; outline: 1px solid var(--border-color); transition: all 0.2s ease; } .form input[type=tel]:required:not(:-moz-placeholder):invalid, .form [type=tel].custom-select:required:not(:-moz-placeholder):invalid { border-color: #fd397a; } .form input[type=tel]:required:not(:placeholder-shown):invalid, .form [type=tel].custom-select:required:not(:placeholder-shown):invalid { border-color: #fd397a; } .form input[type=tel]:required:not(:-moz-placeholder):invalid:focus, .form [type=tel].custom-select:required:not(:-moz-placeholder):invalid:focus { border-color: none; outline: none; } .form input[type=tel]:required:not(:placeholder-shown):invalid:focus, .form [type=tel].custom-select:required:not(:placeholder-shown):invalid:focus { border-color: none; outline: none; } .form input[type=tel]:required:not(:-moz-placeholder):valid, .form [type=tel].custom-select:required:not(:-moz-placeholder):valid { border-color: #1dc9b7; } .form input[type=tel]:required:not(:placeholder-shown):valid, .form [type=tel].custom-select:required:not(:placeholder-shown):valid { border-color: #1dc9b7; } .form input[type=tel]:required:not(:-moz-placeholder):valid:focus, .form [type=tel].custom-select:required:not(:-moz-placeholder):valid:focus { border-color: none; outline: none; } .form input[type=tel]:required:not(:placeholder-shown):valid:focus, .form [type=tel].custom-select:required:not(:placeholder-shown):valid:focus { border-color: none; outline: none; } .form input[type=tel]:disabled, .form [type=tel].custom-select:disabled { cursor: not-allowed; opacity: 0.5; } .form input[type=tel]:disabled:hover, .form [type=tel].custom-select:disabled:hover { cursor: not-allowed; } .form input[type=tel].error, .form [type=tel].error.custom-select { outline-color: #fd397a; border-color: #fd397a; } .form input[type=number], .form [type=number].custom-select { border: solid 1px var(--border-color); background-color: var(--bg-input); color: var(--txt-body); height: 2.5rem; width: 100%; padding: 0 1rem; font-size: 0.85rem; line-height: 2.5rem; border-radius: 4px; font-family: inherit; transition: 0.3s all ease-in-out; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .form input[type=number]:focus, .form [type=number].custom-select:focus, .form input[type=number]:hover, .form [type=number].custom-select:hover { border-color: var(--border-color); box-shadow: none; transition: 0.3s all ease-in-out; box-shadow: 0 4px 12px rgba(99, 102, 241, 0.1); outline: 1px solid var(--border-color); transition: all 0.2s ease; background-color: var(--bg-input); color: currentColor; } .form input[type=number]:focus-visible, .form [type=number].custom-select:focus-visible { outline-offset: 0px; outline: 1px solid var(--border-color); transition: all 0.2s ease; } .form input[type=number]:required:not(:-moz-placeholder):invalid, .form [type=number].custom-select:required:not(:-moz-placeholder):invalid { border-color: #fd397a; } .form input[type=number]:required:not(:placeholder-shown):invalid, .form [type=number].custom-select:required:not(:placeholder-shown):invalid { border-color: #fd397a; } .form input[type=number]:required:not(:-moz-placeholder):invalid:focus, .form [type=number].custom-select:required:not(:-moz-placeholder):invalid:focus { border-color: none; outline: none; } .form input[type=number]:required:not(:placeholder-shown):invalid:focus, .form [type=number].custom-select:required:not(:placeholder-shown):invalid:focus { border-color: none; outline: none; } .form input[type=number]:required:not(:-moz-placeholder):valid, .form [type=number].custom-select:required:not(:-moz-placeholder):valid { border-color: #1dc9b7; } .form input[type=number]:required:not(:placeholder-shown):valid, .form [type=number].custom-select:required:not(:placeholder-shown):valid { border-color: #1dc9b7; } .form input[type=number]:required:not(:-moz-placeholder):valid:focus, .form [type=number].custom-select:required:not(:-moz-placeholder):valid:focus { border-color: none; outline: none; } .form input[type=number]:required:not(:placeholder-shown):valid:focus, .form [type=number].custom-select:required:not(:placeholder-shown):valid:focus { border-color: none; outline: none; } .form input[type=number]:disabled, .form [type=number].custom-select:disabled { cursor: not-allowed; opacity: 0.5; } .form input[type=number]:disabled:hover, .form [type=number].custom-select:disabled:hover { cursor: not-allowed; } .form input[type=number].error, .form [type=number].error.custom-select { outline-color: #fd397a; border-color: #fd397a; } .form input[type=file], .form [type=file].custom-select { border: solid 1px var(--border-color); background-color: var(--bg-input); color: var(--txt-body); height: 2.5rem; width: 100%; padding: 0 1rem; font-size: 0.85rem; line-height: 2.5rem; border-radius: 4px; font-family: inherit; transition: 0.3s all ease-in-out; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .form input[type=file]:focus, .form [type=file].custom-select:focus, .form input[type=file]:hover, .form [type=file].custom-select:hover { border-color: var(--border-color); box-shadow: none; transition: 0.3s all ease-in-out; box-shadow: 0 4px 12px rgba(99, 102, 241, 0.1); outline: 1px solid var(--border-color); transition: all 0.2s ease; background-color: var(--bg-input); color: currentColor; } .form input[type=file]:focus-visible, .form [type=file].custom-select:focus-visible { outline-offset: 0px; outline: 1px solid var(--border-color); transition: all 0.2s ease; } .form input[type=file]:required:not(:-moz-placeholder):invalid, .form [type=file].custom-select:required:not(:-moz-placeholder):invalid { border-color: #fd397a; } .form input[type=file]:required:not(:placeholder-shown):invalid, .form [type=file].custom-select:required:not(:placeholder-shown):invalid { border-color: #fd397a; } .form input[type=file]:required:not(:-moz-placeholder):invalid:focus, .form [type=file].custom-select:required:not(:-moz-placeholder):invalid:focus { border-color: none; outline: none; } .form input[type=file]:required:not(:placeholder-shown):invalid:focus, .form [type=file].custom-select:required:not(:placeholder-shown):invalid:focus { border-color: none; outline: none; } .form input[type=file]:required:not(:-moz-placeholder):valid, .form [type=file].custom-select:required:not(:-moz-placeholder):valid { border-color: #1dc9b7; } .form input[type=file]:required:not(:placeholder-shown):valid, .form [type=file].custom-select:required:not(:placeholder-shown):valid { border-color: #1dc9b7; } .form input[type=file]:required:not(:-moz-placeholder):valid:focus, .form [type=file].custom-select:required:not(:-moz-placeholder):valid:focus { border-color: none; outline: none; } .form input[type=file]:required:not(:placeholder-shown):valid:focus, .form [type=file].custom-select:required:not(:placeholder-shown):valid:focus { border-color: none; outline: none; } .form input[type=file]:disabled, .form [type=file].custom-select:disabled { cursor: not-allowed; opacity: 0.5; } .form input[type=file]:disabled:hover, .form [type=file].custom-select:disabled:hover { cursor: not-allowed; } .form input[type=file].error, .form [type=file].error.custom-select { outline-color: #fd397a; border-color: #fd397a; } .form input[type=file], .form [type=file].custom-select { line-height: inherit; padding-top: 10px; width: auto; overflow: hidden; } .form input[type=file], .form [type=file].custom-select { height: auto; width: 100%; } .form input.field--calender, .form .field--calender.custom-select, .form input[type=date], .form [type=date].custom-select { padding-left: 38px !important; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMjRweCIgZmlsbD0iIzAwMDAwMCI+PHBhdGggZD0iTTAgMGgyNHYyNEgwVjB6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTIwIDNoLTFWMWgtMnYySDdWMUg1djJINGMtMS4xIDAtMiAuOS0yIDJ2MTZjMCAxLjEuOSAyIDIgMmgxNmMxLjEgMCAyLS45IDItMlY1YzAtMS4xLS45LTItMi0yem0wIDE4SDRWMTBoMTZ2MTF6bTAtMTNINFY1aDE2djN6Ii8+PC9zdmc+"); background-size: 16px; background-repeat: no-repeat; background-position: calc(100% - 11px) center; } [dir=rtl] .form input.field--calender, [dir=rtl] .form .field--calender.custom-select, [dir=rtl] .form input[type=date], [dir=rtl] .form [type=date].custom-select { background-position: calc(0% + 11px) center; } [data-theme=dark] .form input.field--calender, [data-theme=dark] .form .field--calender.custom-select, [data-theme=dark] .form input[type=date], [data-theme=dark] .form [type=date].custom-select { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMjRweCIgZmlsbD0iI2ZmZiI+DQogICAgPHBhdGggZD0iTTAgMGgyNHYyNEgwVjB6IiBmaWxsPSJub25lIi8+DQogICAgPHBhdGggZD0iTTIwIDNoLTFWMWgtMnYySDdWMUg1djJINGMtMS4xIDAtMiAuOS0yIDJ2MTZjMCAxLjEuOSAyIDIgMmgxNmMxLjEgMCAyLS45IDItMlY1YzAtMS4xLS45LTItMi0yem0wIDE4SDRWMTBoMTZ2MTF6bTAtMTNINFY1aDE2djN6Ii8+DQo8L3N2Zz4="); } .form select { border: solid 1px var(--border-color); background-color: var(--bg-input); color: var(--txt-body); height: 2.5rem; width: 100%; padding: 0 1rem; font-size: 0.85rem; line-height: 2.5rem; border-radius: 4px; font-family: inherit; transition: 0.3s all ease-in-out; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .form select:focus, .form select:hover { border-color: var(--border-color); box-shadow: none; transition: 0.3s all ease-in-out; box-shadow: 0 4px 12px rgba(99, 102, 241, 0.1); outline: 1px solid var(--border-color); transition: all 0.2s ease; background-color: var(--bg-input); color: currentColor; } .form select:focus-visible { outline-offset: 0px; outline: 1px solid var(--border-color); transition: all 0.2s ease; } .form select:required:not(:-moz-placeholder):invalid { border-color: #fd397a; } .form select:required:not(:placeholder-shown):invalid { border-color: #fd397a; } .form select:required:not(:-moz-placeholder):invalid:focus { border-color: none; outline: none; } .form select:required:not(:placeholder-shown):invalid:focus { border-color: none; outline: none; } .form select:required:not(:-moz-placeholder):valid { border-color: #1dc9b7; } .form select:required:not(:placeholder-shown):valid { border-color: #1dc9b7; } .form select:required:not(:-moz-placeholder):valid:focus { border-color: none; outline: none; } .form select:required:not(:placeholder-shown):valid:focus { border-color: none; outline: none; } .form select:disabled { cursor: not-allowed; opacity: 0.5; } .form select:disabled:hover { cursor: not-allowed; } .form select.error { outline-color: #fd397a; border-color: #fd397a; } .form select { border-radius: 4px; padding-left: 35px; background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMzA2cHgiIGhlaWdodD0iMzA2cHgiIHZpZXdCb3g9IjAgMCAzMDYgMzA2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAzMDYgMzA2OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQoJPGc+DQoJCTxnIGlkPSJleHBhbmQtbW9yZSI+DQoJCQk8cG9seWdvbiBwb2ludHM9IjI3MC4zLDU4LjY1IDE1MywxNzUuOTUgMzUuNyw1OC42NSAwLDk0LjM1IDE1MywyNDcuMzUgMzA2LDk0LjM1IiAvPg0KCQk8L2c+DQoJPC9nPg0KDQo8L3N2Zz4NCg=="); background-size: 10px; background-repeat: no-repeat; background-position: calc(100% - 12px) center; } [data-theme=dark] .form select { background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMzA2cHgiIGhlaWdodD0iMzA2cHgiIHZpZXdCb3g9IjAgMCAzMDYgMzA2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAzMDYgMzA2OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQogICAgPGc+DQogICAgICAgIDxnIGZpbGw9IiNmZmYiIGlkPSJleHBhbmQtbW9yZSI+DQogICAgICAgICAgICA8cG9seWdvbiBwb2ludHM9IjI3MC4zLDU4LjY1IDE1MywxNzUuOTUgMzUuNyw1OC42NSAwLDk0LjM1IDE1MywyNDcuMzUgMzA2LDk0LjM1IiAvPg0KICAgICAgICA8L2c+DQogICAgPC9nPg0KPC9zdmc+); } .form select option { background-color: inherit; color: currentColor; } .form select:hover { cursor: pointer; } .form select:disabled { opacity: 0.5; } .form select:disabled:hover { cursor: not-allowed; } .main[dir=rtl] .form select { padding-right: 30px; padding-left: 1rem; } .main[dir=ltr] .form select { background-position: calc(100% - 12px) center; padding-right: 30px; padding-left: 1rem; } [dir=rtl] .form select { background-position: calc(0% + 12px) center; } .form textarea { border: solid 1px var(--border-color); background-color: var(--bg-input); color: var(--txt-body); height: 2.5rem; width: 100%; padding: 0 1rem; font-size: 0.85rem; line-height: 2.5rem; border-radius: 4px; font-family: inherit; transition: 0.3s all ease-in-out; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .form textarea:focus, .form textarea:hover { border-color: var(--border-color); box-shadow: none; transition: 0.3s all ease-in-out; box-shadow: 0 4px 12px rgba(99, 102, 241, 0.1); outline: 1px solid var(--border-color); transition: all 0.2s ease; background-color: var(--bg-input); color: currentColor; } .form textarea:focus-visible { outline-offset: 0px; outline: 1px solid var(--border-color); transition: all 0.2s ease; } .form textarea:required:not(:-moz-placeholder):invalid { border-color: #fd397a; } .form textarea:required:not(:placeholder-shown):invalid { border-color: #fd397a; } .form textarea:required:not(:-moz-placeholder):invalid:focus { border-color: none; outline: none; } .form textarea:required:not(:placeholder-shown):invalid:focus { border-color: none; outline: none; } .form textarea:required:not(:-moz-placeholder):valid { border-color: #1dc9b7; } .form textarea:required:not(:placeholder-shown):valid { border-color: #1dc9b7; } .form textarea:required:not(:-moz-placeholder):valid:focus { border-color: none; outline: none; } .form textarea:required:not(:placeholder-shown):valid:focus { border-color: none; outline: none; } .form textarea:disabled { cursor: not-allowed; opacity: 0.5; } .form textarea:disabled:hover { cursor: not-allowed; } .form textarea.error { outline-color: #fd397a; border-color: #fd397a; } .form textarea { resize: vertical; resize: vertical; height: 120px; line-height: 1.5; padding-top: 10px; } .form textarea.txtarea-height { height: 85px; } .form:disabled { color: rgba(0, 0, 0, 0.38); background-color: rgba(0, 0, 0, 0.12); box-shadow: none; cursor: initial; border-color: transparent; } .form.is-invalid { border-color: #dc3545; } .form input[type=submit], .form [type=submit].custom-select { position: relative; display: inline-block; margin: 0; padding: 0 1rem; min-width: 64px; text-align: center; border: solid 1px transparent; height: 2.5rem; font-size: 0.85rem; line-height: 2.5rem; border-radius: 4px; overflow: hidden; cursor: pointer; width: auto; } .form input button, .form .custom-select button { position: relative; display: inline-block; margin: 0; padding: 0 1rem; min-width: 64px; text-align: center; border: solid 1px transparent; height: 2.5rem; font-size: 0.85rem; line-height: 2.5rem; border-radius: 4px; overflow: hidden; cursor: pointer; width: auto; } .form button i:before { opacity: 1 !important; } .form button:focus > :before { opacity: 0.2; } .form button:active > :before { opacity: 0.32; } .form button:active :after { opacity: 0.4; transform: translate(-50%, -50%) scale(0); transition: transform 0s; } .form button:disabled :after { opacity: 0; } .form .no-focus:focus { outline: none !important; border-color: inherit !important; } .custom-select { border: solid 1px var(--border-color); background-color: var(--bg-input); color: var(--txt-body); height: 2.5rem; width: 100%; padding: 0 1rem; font-size: 0.85rem; line-height: 2.5rem; border-radius: 4px; -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 1rem; padding-left: 35px; background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMzA2cHgiIGhlaWdodD0iMzA2cHgiIHZpZXdCb3g9IjAgMCAzMDYgMzA2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAzMDYgMzA2OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQoJPGc+DQoJCTxnIGlkPSJleHBhbmQtbW9yZSI+DQoJCQk8cG9seWdvbiBwb2ludHM9IjI3MC4zLDU4LjY1IDE1MywxNzUuOTUgMzUuNyw1OC42NSAwLDk0LjM1IDE1MywyNDcuMzUgMzA2LDk0LjM1IiAvPg0KCQk8L2c+DQoJPC9nPg0KDQo8L3N2Zz4NCg=="); background-size: 10px; background-color: var(--bg-white); color: var(--bg-white-text); background-repeat: no-repeat; background-position: calc(100% - 11px) center; } [data-theme=dark] .custom-select { background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMzA2cHgiIGhlaWdodD0iMzA2cHgiIHZpZXdCb3g9IjAgMCAzMDYgMzA2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAzMDYgMzA2OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQogICAgPGc+DQogICAgICAgIDxnIGZpbGw9IiNmZmYiIGlkPSJleHBhbmQtbW9yZSI+DQogICAgICAgICAgICA8cG9seWdvbiBwb2ludHM9IjI3MC4zLDU4LjY1IDE1MywxNzUuOTUgMzUuNyw1OC42NSAwLDk0LjM1IDE1MywyNDcuMzUgMzA2LDk0LjM1IiAvPg0KICAgICAgICA8L2c+DQogICAgPC9nPg0KPC9zdmc+); } .custom-select option { line-height: 1.5; } [dir=rtl] .custom-select { background-position: calc(0% + 11px) center; } .custom-select-sm { font-size: 0.8rem; } .omni-search { border: solid 1px var(--border-color); background-color: var(--bg-input); color: var(--txt-body); height: 2.5rem; width: 100%; padding: 0 1rem; font-size: 0.85rem; line-height: 2.5rem; border-radius: 4px; font-family: inherit; transition: 0.3s all ease-in-out; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .omni-search:focus, .omni-search:hover { border-color: var(--border-color); box-shadow: none; transition: 0.3s all ease-in-out; box-shadow: 0 4px 12px rgba(99, 102, 241, 0.1); outline: 1px solid var(--border-color); transition: all 0.2s ease; background-color: var(--bg-input); color: currentColor; } .omni-search:focus-visible { outline-offset: 0px; outline: 1px solid var(--border-color); transition: all 0.2s ease; } .omni-search:required:not(:-moz-placeholder):invalid { border-color: #fd397a; } .omni-search:required:not(:placeholder-shown):invalid { border-color: #fd397a; } .omni-search:required:not(:-moz-placeholder):invalid:focus { border-color: none; outline: none; } .omni-search:required:not(:placeholder-shown):invalid:focus { border-color: none; outline: none; } .omni-search:required:not(:-moz-placeholder):valid { border-color: #1dc9b7; } .omni-search:required:not(:placeholder-shown):valid { border-color: #1dc9b7; } .omni-search:required:not(:-moz-placeholder):valid:focus { border-color: none; outline: none; } .omni-search:required:not(:placeholder-shown):valid:focus { border-color: none; outline: none; } .omni-search:disabled { cursor: not-allowed; opacity: 0.5; } .omni-search:disabled:hover { cursor: not-allowed; } .omni-search.error { outline-color: #fd397a; border-color: #fd397a; } .omni-search { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTEyIDUxMjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPGc+DQoJCTxwYXRoIGZpbGw9IiM4ODgiIGQ9Ik0yMjUuNDc0LDBDMTAxLjE1MSwwLDAsMTAxLjE1MSwwLDIyNS40NzRjMCwxMjQuMzMsMTAxLjE1MSwyMjUuNDc0LDIyNS40NzQsMjI1LjQ3NA0KCQkJYzEyNC4zMywwLDIyNS40NzQtMTAxLjE0NCwyMjUuNDc0LTIyNS40NzRDNDUwLjk0OCwxMDEuMTUxLDM0OS44MDQsMCwyMjUuNDc0LDB6IE0yMjUuNDc0LDQwOS4zMjMNCgkJCWMtMTAxLjM3MywwLTE4My44NDgtODIuNDc1LTE4My44NDgtMTgzLjg0OFMxMjQuMTAxLDQxLjYyNiwyMjUuNDc0LDQxLjYyNnMxODMuODQ4LDgyLjQ3NSwxODMuODQ4LDE4My44NDgNCgkJCVMzMjYuODQ3LDQwOS4zMjMsMjI1LjQ3NCw0MDkuMzIzeiIvPg0KCTwvZz4NCjwvZz4gDQo8Zz4NCgk8Zz4NCgkJPHBhdGggZmlsbD0iIzg4OCIgZD0iTTUwNS45MDIsNDc2LjQ3MkwzODYuNTc0LDM1Ny4xNDRjLTguMTMxLTguMTMxLTIxLjI5OS04LjEzMS0yOS40MywwYy04LjEzMSw4LjEyNC04LjEzMSwyMS4zMDYsMCwyOS40M2wxMTkuMzI4LDExOS4zMjgNCgkJCWM0LjA2NSw0LjA2NSw5LjM4Nyw2LjA5OCwxNC43MTUsNi4wOThjNS4zMjEsMCwxMC42NDktMi4wMzMsMTQuNzE1LTYuMDk4QzUxNC4wMzMsNDk3Ljc3OCw1MTQuMDMzLDQ4NC41OTYsNTA1LjkwMiw0NzYuNDcyeiIvPg0KCTwvZz4NCjwvZz4NCiANCjwvc3ZnPg0K"); background-size: 14px; background-repeat: no-repeat; background-position: 13px center; } [dir=rtl] .omni-search { background-position: calc(100% - 13px) center; } [data-theme=dark] .omni-search { background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMzA2cHgiIGhlaWdodD0iMzA2cHgiIHZpZXdCb3g9IjAgMCAzMDYgMzA2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAzMDYgMzA2OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQogICAgPGc+DQogICAgICAgIDxnIGZpbGw9IiNmZmYiIGlkPSJleHBhbmQtbW9yZSI+DQogICAgICAgICAgICA8cG9seWdvbiBwb2ludHM9IjI3MC4zLDU4LjY1IDE1MywxNzUuOTUgMzUuNyw1OC42NSAwLDk0LjM1IDE1MywyNDcuMzUgMzA2LDk0LjM1IiAvPg0KICAgICAgICA8L2c+DQogICAgPC9nPg0KPC9zdmc+); } .note-messages { font-size: 13px; color: #cea14b; padding: 5px 0; display: inline-block; font-style: italic; } .thanks-msg { display: block; font-style: italic; margin: 10px auto; text-align: center; } .form-apply { margin-bottom: 1rem; position: relative; } .form-apply .btn-apply { background-color: var(--bg-white); color: var(--bg-white-text); color: var(--txt-body); position: absolute; left: 2px; top: 1px; bottom: 1px; border: 1px; font-weight: 600; width: auto; padding: 0 1rem; } .form-otp .otp-row { display: flex; align-items: center; } .form-otp .otp-col { display: flex; align-items: center; flex: 1; } .form-otp .otp-col input, .form-otp .otp-col .custom-select { text-align: center; } .input-group input, .input-group .custom-select, .input-group .form-control, .input-group .form-select, .input-group .form-input { position: relative; flex: 1 1 auto; width: 1% !important; margin-bottom: 0; } .input-group input:not(:first-child), .input-group .custom-select:not(:first-child), .input-group .form-control:not(:first-child), .input-group .form-select:not(:first-child), .input-group .form-input:not(:first-child) { border-top-left-radius: 4px !important; border-bottom-left-radius: 4px !important; border-top-right-radius: 0; border-bottom-right-radius: 0; } .input-group input:not(:last-child), .input-group .custom-select:not(:last-child), .input-group .form-control:not(:last-child), .input-group .form-select:not(:last-child), .input-group .form-input:not(:last-child) { border-top-right-radius: 4px !important; border-bottom-right-radius: 4px !important; border-top-left-radius: 0; border-bottom-left-radius: 0; } @media (min-width: 992px) { .input-group .custom-w { max-width: 18%; } } @media (max-width: 767.98px) { .input-group .custom-w { max-width: 30%; } } .icon-group { display: flex; align-items: center; } .icon-group .btn { margin-right: 5px; } .form-text { font-size: 0.7rem; } .magni-search { background: url(images/retina/magni-gray.svg) no-repeat 9px center; background-size: 20px; padding-right: 36px; font-size: 0.8rem; } .field-password { position: absolute; left: 5px; top: 0; height: 100%; height: 2.5rem; width: 3rem; cursor: pointer; font-weight: 500; font-size: 0.8rem; text-align: center; background-repeat: no-repeat; background-position: center; background-color: transparent; border: none; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktdGhyZWUtZG90cyIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8cGF0aCBkPSJNMyA5LjVhMS41IDEuNSAwIDEgMSAwLTMgMS41IDEuNSAwIDAgMSAwIDN6bTUgMGExLjUgMS41IDAgMSAxIDAtMyAxLjUgMS41IDAgMCAxIDAgM3ptNSAwYTEuNSAxLjUgMCAxIDEgMC0zIDEuNSAxLjUgMCAwIDEgMCAzeiIvPgo8L3N2Zz4=); } [data-theme=dark] .field-password { filter: invert(1) grayscale(100%) brightness(200%); } .field-password-show { background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktZXllIiB2aWV3Qm94PSIwIDAgMTYgMTYiPgogIDxwYXRoIGQ9Ik0xNiA4cy0zLTUuNS04LTUuNVMwIDggMCA4czMgNS41IDggNS41UzE2IDggMTYgOHpNMS4xNzMgOGExMy4xMzMgMTMuMTMzIDAgMCAxIDEuNjYtMi4wNDNDNC4xMiA0LjY2OCA1Ljg4IDMuNSA4IDMuNWMyLjEyIDAgMy44NzkgMS4xNjggNS4xNjggMi40NTdBMTMuMTMzIDEzLjEzMyAwIDAgMSAxNC44MjggOGMtLjA1OC4wODctLjEyMi4xODMtLjE5NS4yODgtLjMzNS40OC0uODMgMS4xMi0xLjQ2NSAxLjc1NUMxMS44NzkgMTEuMzMyIDEwLjExOSAxMi41IDggMTIuNWMtMi4xMiAwLTMuODc5LTEuMTY4LTUuMTY4LTIuNDU3QTEzLjEzNCAxMy4xMzQgMCAwIDEgMS4xNzIgOHoiLz4KICA8cGF0aCBkPSJNOCA1LjVhMi41IDIuNSAwIDEgMCAwIDUgMi41IDIuNSAwIDAgMCAwLTV6TTQuNSA4YTMuNSAzLjUgMCAxIDEgNyAwIDMuNSAzLjUgMCAwIDEtNyAweiIvPgo8L3N2Zz4=); } /* Dev */ .required, .spn_must_field { color: #fd397a; } .required:after, .spn_must_field:after { position: relative; font-size: inherit; padding-right: 0.25rem; font-weight: 700; } .list-radio-group { background-color: var(--bg-gray); background-color: #f3f3f4; box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px; padding: 0.75rem; border-radius: 100px; display: flex; flex-flow: row; gap: 0.5rem; position: relative; } @media (min-width: 768px) { .list-radio-group { margin: 0; margin-right: auto; } } .list-radio-group-item { line-height: 1; position: relative; } .list-radio-group-link { background-color: transparent; border: none; border-radius: 50px; box-shadow: none; cursor: pointer; padding: 0.5rem 1rem; margin: 0; font-size: 0.85rem; font-weight: 600; color: var(--txt-gray); display: inline-flex; text-align: center; align-items: center; position: relative; } @media (min-width: 992px) { .list-radio-group-link { white-space: nowrap; } } .list-radio-group .control-label:hover { background-color: var(--bg-gray); color: var(--txt-body); } .list-radio-group .control-label.is-active { background-color: var(--brand-color); color: var(--brand-color-inverse); } .list-radio-group .control-input[type=radio] { position: absolute; opacity: 0; z-index: -1; } .list-radio-group .svg { display: none; margin-left: 10px; } .list-radio-group .disabled { cursor: not-allowed; opacity: 0.5; } .clipboard { position: relative; gap: 0.5rem; flex: 1; width: 100%; background-color: var(--bg-gray); border-color: transparent; border-radius: 5px; padding: 0 10px; display: flex; align-items: center; font-size: 0.8rem; line-height: 1; } .clipboard:hover, .clipboard:focus, .clipboard:active { cursor: pointer; background: var(--bg-gray-dark); } .clipboard:hover .copy-btn, .clipboard:focus .copy-btn, .clipboard:active .copy-btn { opacity: 1; } .clipboard .copy-input { width: 100%; cursor: pointer; background-color: transparent; font-size: 0.8rem; border: none; border-radius: 4px; padding: 0; color: var(--txt-gray); font-weight: 600; text-align: initial; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .clipboard .copy-input:focus { outline: none; } .clipboard .copy-btn { opacity: 1; display: flex; align-items: center; justify-content: center; height: 40px; width: 40px; background-color: transparent; border: none; border-radius: 4px; font-size: 1.2rem; transition: all 0.5s ease; } @media (max-width: 767.98px) { .clipboard .copy-btn { opacity: 1; } } .clipboard .copy-btn:active, .clipboard .copy-btn:focus { box-shadow: none; } .checkbox, .radio { margin: 0; font-size: 0.8rem; font-weight: 400; line-height: 1.5; cursor: pointer; display: flex; gap: 0.5rem; } .checkbox a, .radio a { color: var(--brand-color); text-decoration: underline; } .checkbox input, .radio input, .checkbox .custom-select, .radio .custom-select { background-color: rgba(255, 255, 255, 0.8); -webkit-appearance: none; -moz-appearance: none; appearance: none; position: relative; top: 0; left: 0; bottom: 0; right: 0; height: 14px; width: 14px; flex: 0 0 14px; max-width: 14px; transition: all 0.15s ease-out 0s; border: solid 1px var(--border-color); border-radius: 3px; cursor: pointer; display: inline-block; padding: 0 !important; outline: none; position: relative; z-index: 1; vertical-align: middle; --size: 20px; max-width: var(--size); flex: 0 0 var(--size); width: var(--size); height: var(--size); margin-top: 0; } .checkbox input[type=checkbox], .radio input[type=checkbox], .checkbox [type=checkbox].custom-select, .radio [type=checkbox].custom-select { border-radius: 3px; } .checkbox input[disabled], .radio input[disabled], .checkbox [disabled].custom-select, .radio [disabled].custom-select { opacity: 0.6; cursor: not-allowed; } .checkbox input:hover, .radio input:hover, .checkbox .custom-select:hover, .radio .custom-select:hover { border-width: 2px; border-color: var(--checkbox-bg); text-decoration: none !important; box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.04), 0px 4px 5px 0px rgba(0, 0, 0, 0.04), 0px 1px 10px 0px rgba(0, 0, 0, 0.04); } .checkbox input:active, .radio input:active, .checkbox .custom-select:active, .radio .custom-select:active { box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.04), 0px 4px 5px 0px rgba(0, 0, 0, 0.04), 0px 1px 10px 0px rgba(0, 0, 0, 0.04); } .checkbox input:checked, .radio input:checked, .checkbox .custom-select:checked, .radio .custom-select:checked { background-color: var(--checkbox-bg); color: var(--checkbox-bg-inverse); border-color: var(--checkbox-bg); } .checkbox input:checked:before, .radio input:checked:before, .checkbox .custom-select:checked:before, .radio .custom-select:checked:before { height: 10px; width: 6px; position: absolute; content: ""; display: inline-block; font-size: 1rem; text-align: center; line-height: 1rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); right: 50%; top: 50%; margin-right: -3px; margin-top: -7px; } .checkbox input:checked:after, .radio input:checked:after, .checkbox .custom-select:checked:after, .radio .custom-select:checked:after { background-color: var(--bg-black); color: var(--bg-black-text); content: ""; display: block; position: relative; z-index: 100; } .checkbox .label-txt, .radio .label-txt { line-height: 1.5; } .checkbox .link, .radio .link { font-size: inherit; } .radio input, .radio .custom-select { border-radius: 50% !important; } .radio input:after, .radio .custom-select:after { border-radius: 50%; } .switch { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; cursor: pointer; } .switch input:empty, .switch .custom-select:empty { overflow: hidden; position: absolute; display: inline-block; position: relative; text-indent: 0; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; line-height: 30px; margin: 2px 0; height: 30px; width: 54px; border-radius: 1rem; } .switch input:empty:before, .switch .custom-select:empty:before { position: absolute; display: block; top: 0; bottom: 0; right: 0; content: " "; transition: all 100ms ease-in; width: 54px; border-radius: 1rem; background-color: #ddd; } .switch input:empty:after, .switch .custom-select:empty:after { position: absolute; display: block; top: 0; bottom: 0; right: 0; content: " "; transition: all 100ms ease-in; width: 54px; border-radius: 1rem; height: 24px; width: 24px; line-height: 26px; top: 3px; bottom: 3px; margin-right: 3px; font-size: 0.9em; text-align: center; color: #f8f9fb; background-color: var(--bg-white); color: var(--bg-white-text); } .switch input:checked:after, .switch .custom-select:checked:after { margin-right: 26px; } .switch input:checked:before, .switch .custom-select:checked:before { background-color: var(--checkbox-bg); } .switch input[disabled], .switch [disabled].custom-select { cursor: not-allowed; opacity: 0.5; } .switch.switch-lg input:empty, .switch.switch-lg .custom-select:empty { line-height: 40px; margin: 2px 0; height: 40px; width: 75px; border-radius: 20px; } .switch.switch-lg input:empty:before, .switch.switch-lg .custom-select:empty:before { width: 72px; border-radius: 20px; } .switch.switch-lg input:empty:after, .switch.switch-lg .custom-select:empty:after { width: 72px; border-radius: 20px; height: 34px; width: 34px; line-height: 34px; top: 3px; bottom: 3px; margin-right: 3px; font-size: 1em; text-align: center; vertical-align: middle; } .switch.switch-lg input:checked:after, .switch.switch-lg .custom-select:checked:after { margin-right: 34px; } .switch.switch-sm input:empty, .switch.switch-sm .custom-select:empty { line-height: 20px; margin: 2px 0; height: 20px; width: 40px; border-radius: 30px; } .switch.switch-sm input:empty:before, .switch.switch-sm .custom-select:empty:before { width: 38px; border-radius: 30px; } .switch.switch-sm input:empty:after, .switch.switch-sm .custom-select:empty:after { border-radius: 30px; height: 16px; width: 16px; line-height: 16px; top: 2px; bottom: 2px; margin-right: 2px; font-size: 0.7rem; text-align: center; vertical-align: middle; } .switch.switch-sm input:checked:after, .switch.switch-sm .custom-select:checked:after { margin-right: 20px; } .radio-list, .checkbox-list { display: flex; flex-flow: row wrap; gap: 1rem; } .radio-list:hover, .checkbox-list:hover { background-color: var(--checkbox-bg-light); color: var(--txt-white); border-color: currentColor; } .checkbox-group { border: solid 1px var(--border-color); border-width: 2px; border-radius: 4px; padding: 1.5rem; display: flex; align-items: flex-start; gap: 10px; } .checkbox-group:hover { cursor: pointer; } .checkbox-group-text { font-size: 0.8rem; font-weight: 600; position: relative; padding-right: 1.6rem; } .checkbox-group-text::after { position: absolute; content: ""; right: 0; width: 1rem; height: 1rem; border: solid 1px var(--border-color); border-width: 2px; border-radius: 50%; top: 0; transition: border 0.2s ease; } .checkbox-group-element { margin-bottom: 0.5rem; display: block; } .checkbox-group-element .img-fluid { border-radius: 8px; } .btn-check { position: absolute; clip: rect(0, 0, 0, 0); pointer-events: none; } .btn-check:checked + .checkbox-group { border-color: var(--bg-form); } .btn-check:checked + .checkbox-group .checkbox-group-text:after { border-width: 4px; border-color: var(--bg-form); } .checkbox-group-list { display: flex; flex-flow: row wrap; gap: 1rem; } .checkbox-group-list .checkbox-group-item { width: 100%; } button:focus, .btn:focus, .btn:active { box-shadow: none; } .btn { display: inline-flex; align-items: center; justify-content: center; border: solid 1px transparent; padding: 0 1.25rem; height: 2.5rem; border-radius: 4px; font-size: 0.85rem; font-weight: 500; line-height: 2.5rem; white-space: nowrap; transition: transform 0.1s ease, box-shadow 0.1s ease; } .btn:hover { text-decoration: none !important; box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); } .btn:focus { outline: rgb(19, 110, 248) solid 2px; outline-offset: 3px; box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); } .btn:focus-visible { outline: rgb(19, 110, 248) solid 2px; outline-offset: 3px; } .btn:active { box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); transform: scale(0.96); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); } .btn-brand { background-color: var(--brand-color); color: var(--brand-color-inverse); border-color: var(--brand-color); } .btn-brand:hover { color: var(--brand-color-inverse); } .btn-outline-brand { background-color: transparent; border-color: var(--brand-color); color: var(--brand-color); } .btn-outline-brand:hover { color: currentColor; background-color: var(--brand-color); color: var(--brand-color-inverse); } .btn-white { background-color: var(--bg-white); color: var(--bg-white-text); } .btn-white:hover { color: currentColor; } .btn-outline-white { background-color: transparent; border-color: var(--border-white); color: var(--txt-white); } .btn-outline-white:hover { color: currentColor; } .btn-secondary { background-color: var(--secondary-color); border-color: var(--secondary-color); color: var(--secondary-color-inverse); } .btn-secondary:hover { color: var(--secondary-color-inverse) !important; } .btn-outline-secondary { background-color: transparent; border-color: var(--secondary-color); color: var(--secondary-color); } .btn-outline-secondary:hover { color: currentColor; } .btn-black { background-color: var(--bg-black); color: var(--bg-black-text); border-color: var(--border-black); } .btn-black:hover { color: var(--txt-white); } .btn-outline-black { background-color: transparent; border-color: var(--border-black); color: var(--txt-body); } .btn-outline-black:hover { background-color: var(--bg-black); color: var(--bg-black-text); } .btn-gray { background-color: var(--bg-gray); border-color: var(--bg-gray); color: var(--txt-body); } .btn-outline-gray { background-color: transparent; border-color: var(--border-color); color: var(--txt-body); } .btn-outline-gray:hover { color: currentColor; } .btn-block { display: block; width: 100% !important; } .btn-wide { padding-right: 2rem !important; padding-left: 2rem !important; } .btn-dropdown { padding-left: 3rem; } .btn-dropdown .dropdown-toggle-custom-arrow { left: 1rem; } .btn-sm, .btn-group-sm > .btn { height: auto; padding: 0.25rem 0.5rem; font-size: 0.875rem; line-height: 1.5; } .btn-arrow { gap: 6px; } .btn-arrow .svg { width: 12px; height: 12px; margin-top: -4px; } .btn-icon { gap: 6px; } .btn-link { background-color: transparent; border: none; border-radius: 0; padding: 0; text-decoration: none; color: var(--txt-body); padding: 0; height: auto; line-height: 1; } .btn-link .arrow { display: inline-block; transition: all 0.2s ease-in-out; } .btn-link .arrow .svg { width: 12px; height: 12px; margin-left: 5px; fill: currentcolor; } .btn-link:hover { box-shadow: none; } .btn-link:hover .arrow { transform: translateX(0.25rem); } .btn-link:focus { box-shadow: none; } .btn-underline { text-decoration: underline; } .btn .icn svg { width: 16px; height: 16px; fill: currentColor; } .btn-back { color: var(--txt-body); padding: 0; width: 2rem; flex-shrink: 0; height: 2rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; } .btn-back:hover, .btn-back:focus { background-color: var(--bg-gray-light); } [dir=rtl] .btn-back .svg { transform: scaleX(-1); } .link { background-color: transparent; border: none; border-radius: 0; padding: 0; display: inline-flex; gap: 5px; align-items: center; } .link-underline { background-color: transparent; border: none; padding: 0; color: var(--txt-body); position: relative; font-size: 0.875rem; font-weight: 600; white-space: nowrap; text-rendering: optimizeLegibility; transition: color 0.3s ease-in-out; text-decoration: underline; text-decoration-color: currentColor !important; } .link-underline:is(:hover, :focus, :active) { color: var(--txt-body); text-decoration: underline; } .link-black { background-color: transparent; border: none; color: rgb(0, 0, 0); font-weight: 600; } .link-brand { background-color: transparent; border: none; color: var(--brand-color); font-weight: 600; } .link-arrow { color: var(--txt-body); position: relative; font-size: 0.8rem; font-weight: 600; white-space: nowrap; text-rendering: optimizeLegibility; transition: color 0.3s ease-in-out; display: flex; align-items: center; } .link-arrow:after { transition: all 0.5s ease; position: absolute; left: -0.5rem; opacity: 0; content: "→"; } .link-arrow:hover { color: var(--txt-body); text-decoration: none; } .link-arrow:hover:after { transition: all 0.5s ease; left: -1rem; width: auto; opacity: 1; } .link-inline { display: inline-flex; } .link-text { display: inline-flex; align-items: center; color: var(--txt-body); font-weight: 500; } .link-dotted { -webkit-text-decoration: dotted underline; text-decoration: dotted underline; text-underline-offset: 4px; } .link-dotted:hover { color: var(--txt-body); } .link-add { background-color: transparent; border: none; color: var(--txt-body); font-weight: 600; padding: 0; margin: 0; display: flex; align-items: center; gap: 10px; } .cart-footer { position: sticky !important; top: 185px; } .catalog-bg { /* background-image: url(./images/catalog-bg.png);*/ background-color: var(--bg-white); color: var(--bg-white-text); background-repeat: no-repeat; background-position: 130% top; } .delivery-term-data-inner { margin: 20px; color: #4c4c4c; max-width: 500px; } .delivery-term-data-inner .heading { font-size: calc(112.5% + 1vw); font-weight: 600; text-transform: uppercase; position: relative; line-height: 1.2; margin-bottom: 40px; color: inherit; } .delivery-term-data-inner .heading:after { background: var(--secondary-color); color: var(--secondary-color-inverse); width: 60px; height: 3px; position: absolute; bottom: -10px; content: ""; display: block; } .delivery-term-data-inner .heading span { display: block; font-size: 0.8rem; text-transform: none; } .delivery-term-data-inner ul li { position: relative; margin: 10px 0; padding: 0 15px; display: block; font-size: 0.9rem; } .delivery-term-data-inner ul li:before { width: 5px; height: 5px; content: ""; display: block; position: absolute; right: 0; top: 8px; transform: rotate(45deg); background: #4c4c4c; } .delivery-term-data-inner ul ul { margin-right: 15px; margin-bottom: 20px; } .section { padding: calc(1rem + 1.5vw) 0; } @media (min-width: 1200px) { .section { padding: calc(1rem + 2vw) 0; } } @media (min-width: 1400px) { .section { padding: calc(1rem + 2.5vw) 0; } } @media (min-width: 2000px) { .section { padding: calc(1rem + 4vw) 0; } } .section-sm { padding: calc(1rem + 1vw) 0; } .section-head { width: 100%; margin-bottom: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } @media (min-width: 992px) { .section-head { flex-direction: row; margin-bottom: 1rem; gap: 2rem; } } @media (max-width: 575.98px) { .section-head-space { flex-flow: row wrap; } } @media (min-width: 992px) { .section-head-space { align-items: normal; flex-wrap: inherit; gap: 4rem; } } .section-head-center { justify-content: center; text-align: center; } .section-heading { color: currentColor; display: inline-block; } .section-heading h1, .section-heading .h1, .section-heading h2, .section-heading .h2, .section-heading h3, .section-heading .h3, .section-heading h4, .section-heading .h4 { font-weight: 500; } .section-heading h1, .section-heading .h1, .section-heading h2, .section-heading .h2 { max-inline-size: 50ch; text-wrap: balance; font-size: clamp(1.7rem, 1.5vw, 3rem); margin: 0; } @media (max-width: 575.98px) { .section-heading h1, .section-heading .h1, .section-heading h2, .section-heading .h2 { font-size: clamp(1.2rem, 1.5vw, 3rem); } } .section-heading h1 > span, .section-heading .h1 > span, .section-heading h2 > span, .section-heading .h2 > span { display: block; font-size: 0.875rem; text-align: center; } .section-heading h1 .search-results, .section-heading .h1 .search-results, .section-heading h2 .search-results, .section-heading .h2 .search-results { font-size: 2rem; display: inline-block; } .section-heading h1 ~ p, .section-heading .h1 ~ p, .section-heading h2 ~ p, .section-heading .h2 ~ p { margin-top: 1rem; } .section-heading p { font-size: 0.9rem; line-height: 1.5; font-weight: 400; } .section-action { display: flex; align-items: center; gap: 1rem; max-width: 100%; } .section-foot { text-align: center; margin-top: 1.5rem; } .page-banner { min-height: 320px; padding: 2rem 0; display: flex; align-items: center; justify-content: center; position: relative; color: var(--txt-white); } .page-banner:after { background: transparent linear-gradient(80deg, var(--brand-color) 0%, var(--brand-color) 38%, rgba(1, 34, 69, 0) 100%) 0% 0% no-repeat; height: 100%; width: 100%; content: ""; position: absolute; top: 0; bottom: 0; right: 0; left: 0; z-index: 0; } .page-banner-txt { max-width: 475px; } .page-banner .container { z-index: 1; position: relative; } .cms { font-size: 0.875rem; line-height: 1.8; color: var(--txt-gray); } .cms-center { text-align: center; } .cms h1, .cms .h1 { font-weight: 400; max-inline-size: 50ch; text-wrap: balance; font-size: clamp(1.7rem, 1.5vw, 3rem); margin: 0; } .cms h2, .cms .h2 { font-size: 1.7rem; font-weight: 400; } .cms h3, .cms .h3 { font-size: 1.5rem; color: currentColor; font-weight: 400; } .cms h4, .cms .h4 { font-size: 1.25rem; font-weight: 400; } .cms h5, .cms .h5 { font-size: 1rem; font-weight: 400; } .cms h6, .cms .h6 { font-size: 0.875rem; font-weight: 400; } .cms p { font-size: 0.875rem; line-height: 1.8; margin-bottom: 1rem; word-break: break-word; font-weight: 400; color: var(--txt-gray); } .cms.space { padding: 50px 0; } .cms ul { margin: 10px 0; color: var(--txt-body); } .cms ul li { position: relative; padding: 5px 0; margin: 0 15px; color: inherit; list-style: disc; display: list-item; } .cms ul li ul li { font-size: 0.875rem; } .cms ol { list-style: decimal; } .cms ol li { position: relative; padding: 0 0 15px 0; color: #666; margin: 0; font-size: 1.1em; } .cms ol a { color: inherit; } .cms table th { font-weight: 600; } .cms table th, .cms table td { padding: 10px; font-size: 0.875rem; vertical-align: top; } .bg-stats { background-color: var(--bg-gray); border-radius: 20px; padding: calc(1rem + 4vw) 1rem; } .section:has(.bg-stats) { padding-block: 0; } .stats { display: flex; align-items: center; justify-content: space-between; flex-flow: row wrap; margin: 0 auto; gap: 1rem; } @media (min-width: 992px) { .stats { max-width: 900px; } } .stats-block { text-align: center; } @media (max-width: 767.98px) { .stats-block { flex: 0 0 45%; max-width: 45%; } } .stats-block h4, .stats-block .h4 { font-size: 3.125rem; color: var(--brand-color); font-weight: 800; } .stats-block p { color: var(--txt-body); font-size: 1.12rem; font-weight: 600; } .content-wrap .content-block { padding: calc(1rem + 1vw) 0; display: flex; align-items: center; flex-flow: row wrap; gap: 2rem; } @media (min-width: 1200px) { .content-wrap .content-block { flex-direction: row-reverse; gap: 5rem; } } .content-wrap .content-block:first-child { padding-top: 0; } .content-wrap .content-block:last-child { padding-bottom: 0; } .content-wrap .content-block-img { background-color: var(--bg-placeholder); background-color: var(--bg-placeholder); background-image: url(images/retina/image.svg); background-position: center; background-repeat: no-repeat; background-size: 50% 50%; border-radius: 10px; overflow: hidden; } @media (min-width: 768px) { .content-wrap .content-block-img { flex: 0 1 45%; } } .content-wrap .content-block-img img { border-radius: 10px; } .content-wrap .content-block-cms { flex: 1; } @media (min-width: 768px) { .content-wrap .content-block:nth-child(even) { flex-direction: row; } } @media (min-width: 768px) { .content-wrap .content-block-even { flex-direction: row; } } .list-vertical { margin: 0; padding: 0; } .list-vertical li { padding: 8px 0; display: block; position: relative; border: none !important; } .list-vertical li .divider { margin: 0; } .list-vertical li span { color: var(--txt-body); } .list-vertical li.logout a { color: #000; font-weight: 600; } .list-vertical li:last-child { border-bottom: none; } .list-vertical li.is-active a { color: #555555; font-weight: 800; } .list-vertical li .parents--link { position: relative; display: block; cursor: pointer; } .list-vertical li .parents--link:after { position: absolute; content: "+"; font-weight: 600; font-size: 1.25em; color: #888; left: 10px; top: -4px; } .list-vertical li.seprator { border-top: solid 1px var(--border-color); padding-top: 10px; margin-top: 10px; } .list-vertical .remove_buyTogether { margin-left: 10px; cursor: pointer; } .list-vertical .remove_buyTogether:hover { color: var(--brand-color); } .list-vertical a { color: var(--txt-body); display: block; overflow: hidden; position: relative; font-size: 0.9em; font-weight: 400; display: flex; align-items: center; text-decoration: none; transition: all 0.2s linear; padding: 5px 0; } .list-vertical img { display: inline-block; vertical-align: middle; margin-left: 5px; } .list-vertical .childs { display: none; } .list-vertical .childs.opened { display: block; } .list-vertical .childs li { font-size: 0.95em; margin: 4px 0; padding-right: 0; } .listing-check li { overflow: hidden; padding: 0; position: relative; text-overflow: ellipsis; white-space: nowrap; margin: 0.5rem 0; } .listing-check li a { font-size: 14px; padding: 0; padding-right: 30px; position: relative; min-height: 22px; display: block; } .listing-check li a:before { height: 20px; width: 20px; border: solid 1px var(--border-color); position: absolute; right: 0; top: 0; content: ""; border-radius: 2px; } .listing-check li.is-active a:before { background-color: var(--brand-color); color: var(--brand-color-inverse); border-color: var(--brand-color); } .listing-check li.is-active a:after { height: 12px; width: 7px; position: absolute; content: ""; display: inline-block; font-size: 16px; text-align: center; line-height: 16px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; color: var(--brand-color-inverse); transform: rotate(45deg); right: 6px; top: 2px; } .listing-bullet li { position: relative; line-height: 30px; padding: 0 0 8px 18px; font-size: 0.875em; color: var(--txt-body); } .listing-bullet li:before { position: absolute; right: 0; top: 11px; width: 8px; height: 8px; content: ""; display: inline-block; background-color: #888; } .promotion-area ul { display: flex; justify-content: center; flex-wrap: wrap; } @media (max-width: 767.98px) { .promotion-area ul { justify-content: flex-start; } } .listing-icons li { padding: 10px 1rem; display: flex; } .listing-icons li .fa { font-size: 2.5em; opacity: 0.6; margin: 0 20px 0 0; width: 2.5rem; } .listing-icons li p { font-size: 0.875rem; } .listing-icons li p strong { display: block; opacity: 1; font-weight: 500; } .links-inline { color: var(--txt-body); display: flex; gap: 0.5rem; width: 100%; } .links-inline-center { justify-content: center; } .links-inline li { font-size: 0.875rem; padding-bottom: 5px; padding-left: 1rem; } .links-inline li a { color: inherit; text-decoration: underline; } .links-inline li a:hover { color: var(--brand-color); text-decoration: underline; } .links-inline li .fa { margin: 0 5px 0 0; } .heading1 { color: var(--txt-body); font-size: 2em; } .heading2 { color: var(--txt-body); font-size: 1.8em; } .heading3 { color: var(--txt-body); font-size: 1.3em; } .heading4 { font-size: 1.2em; } .heading4 span { color: var(--brand-color); } span.subheading { color: #555555; display: block; font-weight: 400; font-size: 1.2rem; } .txt-sm { font-size: 0.8rem; } .bg-page-head { background-color: var(--bg-black); color: var(--bg-black-text); padding: 2.125rem 0; } .bg-page-head .section-head { margin: 0; } .cookies-notice { position: fixed; bottom: 0; z-index: 1030; margin-bottom: 10px; } @media (min-width: 992px) { .cookies-notice { width: 60%; right: 50%; transform: translateX(-50%); } } .cookies-notice-content { width: 100%; height: 100%; display: flex; flex-flow: row wrap; gap: 0.5rem; align-items: center; justify-content: center; background-color: var(--bg-blur-black); color: var(--txt-white); backdrop-filter: blur(10px); padding: 1rem; } @media (min-width: 992px) { .cookies-notice-content { flex-flow: row nowrap; justify-content: space-between; border-radius: 50px; } } .cookies-notice-content a { color: currentColor; text-decoration: underline; } .cookies-notice-message { font-size: 13px; font-weight: 400; color: var(--txt-white); width: 100%; padding: 0 1rem; } .cookies-notice-buttons { display: flex; flex-flow: row nowrap; align-items: center; gap: 0.5rem; margin-right: 0; } .cookies-notice-buttons .btn-decline { background-color: transparent; border-color: var(--txt-white); color: var(--txt-white); border-radius: 40px; padding: 10px 14px; } .cookies-notice-buttons .btn-decline:hover, .cookies-notice-buttons .btn-decline:focus, .cookies-notice-buttons .btn-decline:active { text-decoration: underline; box-shadow: none; } .cookies-notice-buttons .btn-accept { background-color: var(--bg-white); color: var(--bg-white-text); border-radius: 40px; padding: 10px 14px; } .cookie-alert { font-size: 0.85rem; } .cookie-alert h5, .cookie-alert .h5 { font-weight: 500; font-size: 1rem; } .cookies-group { background-color: transparent; border: solid 1px var(--border-color); border-radius: 4px; padding: 1rem; display: flex; flex-direction: column; gap: 1rem; } .cookies-group-head { cursor: pointer; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .cookies-group-head h6, .cookies-group-head .h6 { padding: 0; margin: 0; } .cookies-group-head:hover { cursor: pointer; } .cookies-group-body p { padding: 1rem 0; padding-top: 0; font-size: 0.8rem; } .cookies-group + .cookies-group { margin-top: 1rem; } .no-data-found { margin: 2rem auto; text-align: center; display: flex; flex-direction: column; } .no-data-found .img { max-width: 100%; margin: 1rem auto; } .no-data-found .img img, .no-data-found .img .svg { width: 100%; max-width: 400px; } .no-data-found .data { margin-top: 1rem; } .no-data-found .data h2, .no-data-found .data .h2 { font-size: 1.8rem; margin: 0; font-weight: 400; } .no-data-found .data p { margin-bottom: 1rem; color: var(--txt-gray); font-size: 0.85rem; } .no-data-found.no-data-found--md .img { max-width: 150px; } .no-data-found.no-data-found--md .data h2, .no-data-found.no-data-found--md .data .h2 { font-size: 1.5rem; } .no-data-found.no-data-found--sm .img { max-width: 100px; } .no-data-found.no-data-found--sm .data h2, .no-data-found.no-data-found--sm .data .h2 { font-size: 1.2rem; } .block-empty { padding: 2rem 20px; margin: auto; } .block-empty .block__img { display: block; margin: 20px auto 30px !important; /* opacity: 0.4;*/ } .block-empty .error__img { width: 449px; display: block; margin: 20px auto 0; } .block-empty h3, .block-empty .h3 { font-size: 1.2rem; } .block-empty h6, .block-empty .h6 { font-size: 0.9rem; font-weight: 400; color: var(--txt-gray); } .no-product { text-align: center; } .no-product ul { justify-content: center; } .not-found { text-align: center; max-width: 600px; margin: 0 auto; height: 100vh; display: flex; flex-direction: column; justify-content: center; } .not-found img { margin-bottom: 2rem; } .not-found h3, .not-found .h3 { margin-bottom: 1rem; } .not-found p { margin-bottom: 1rem; } .dropdown-item.active, .dropdown-item:active { background-color: var(--brand-color); color: var(--brand-color-inverse); } .dropdown-menu { background-color: var(--bg-white); color: var(--bg-white-text); padding: 0; box-shadow: 0 0 50px 0 rgba(82, 63, 105, 0.15); font-size: 0.85rem; border: solid 1px var(--border-color); border-radius: 4px; margin: 0; padding: 1rem 0; min-width: 14rem; right: 0; text-align: right; } .dropdown-menu-anim { animation: dropdown-menu-fade-in 0.3s ease 1, dropdown-menu-move-up 0.3s ease-out 1; } .dropdown-menu-right { left: 0; right: auto; } .dropdown-menu-item { border: none; } .dropdown-menu-item.logout { border-top: solid 1px var(--border-color); } .dropdown-menu-link { background-color: transparent; border: none; border-radius: 0; padding: 0; width: 100%; text-align: start; display: block; padding: 10px 1rem; color: inherit; display: flex; align-items: center; gap: 0.8rem; background-color: transparent; position: relative; overflow: hidden; } .dropdown-menu-link::before { content: ""; background: var(--bg-gray-light); position: absolute; z-index: -1; top: 0; width: 100%; height: 100%; right: 0; left: 0; opacity: 0; transition: all 0.2s cubic-bezier(0.2, 0.91, 0.85, 0.96) 0s; transform: scale(0.75); backface-visibility: hidden; pointer-events: none; } .dropdown-menu-link:is(:hover, :focus, :active, .active)::before { opacity: 1; transform: scale(1); } .dropdown-menu-link { border-radius: 4px; } .dropdown-menu-link:hover { text-decoration: none; color: currentColor; } .dropdown-menu-link .svg { width: 18px; min-width: 18px; height: 18px; } @keyframes dropdown-menu-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes dropdown-menu-move-down { from { margin-top: -10px; } to { margin-top: 0; } } @keyframes dropdown-menu-move-up { from { margin-top: 10px; } to { margin-top: 0; } } .dropdown-toggle:after { margin-right: 0.25rem; } .dropdown-toggle[data-toggle=collapse]:after { transition: all 0.1s ease-in-out; transform-origin: center center; transform: rotate(-90deg); } .dropdown-toggle[data-toggle=collapse][aria-expanded=true]:after { transform: rotate(0deg); } .dropdown-toggle:hover { box-shadow: none; } .dropdown-toggle:focus { box-shadow: none; } .nav-block { display: flex; flex-direction: column; padding: 1rem 0; } .nav-block .expand-heading { font-size: 0.8rem; text-transform: uppercase; } .nav-block .nav__item { display: block; border: none; } .nav-block .nav__item.is-active { color: var(--brand-color); } .nav-block .nav__item .nav__link { display: flex; flex-grow: 1; align-items: center; padding: 0.55rem 1.75rem; cursor: pointer; transition: all 0.3s; font-size: 0.85rem; } .box--scroller { overflow-y: auto; max-height: 250px; } .btn-dropdown-content { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; display: block; } .dropdown-static { position: static !important; } .loader-positon { position: absolute; right: 50%; top: 50%; transform: translate(-50%, -50%); } .loader-yk { display: block; width: 30px; height: 30px; position: relative; /*border: 3px solid $brand-color; animation: loader 2s infinite ease;*/ margin: 15px auto; text-align: center; background: url(images/retina/oval.svg) no-repeat center; background-size: 20px; } .loader-yk-inner { /*vertical-align: top; display: inline-block; width: 100%; background-color: $brand-color; animation: loader-inner 2s infinite ease-in;*/ } @keyframes loader { 0% { transform: rotate(0deg); } 25% { transform: rotate(180deg); } 50% { transform: rotate(180deg); } 75% { transform: rotate(360deg); } 100% { transform: rotate(360deg); } } @keyframes loader-inner { 0% { height: 0%; } 25% { height: 0%; } 50% { height: 100%; } 75% { height: 100%; } 100% { height: 0%; } } .loader-wrapper { position: relative; } .loader-wrapper .circle { width: 10px; height: 10px; border-radius: 14px; border: 2px solid var(--brand-color); margin: 10px; animation: rotate 2s infinite linear; animation-fill-mode: both; display: inline-block; } .loader-wrapper .circle:nth-of-type(2) { animation: rotate2 2s infinite linear; animation-fill-mode: both; } .loader-wrapper .circle:nth-of-type(3) { animation: rotate3 2s infinite linear; animation-fill-mode: both; } @keyframes rotate { 0% { transform: scale(0); opacity: 0; } 25% { transform: scale(1); opacity: 1; } 75% { transform: scale(1); opacity: 1; } 85% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } } @keyframes rotate2 { 0% { transform: scale(0); opacity: 0; } 25% { transform: scale(0); opacity: 0; } 50% { transform: scale(1); opacity: 1; } 75% { transform: scale(1); opacity: 1; } 85% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } } @keyframes rotate3 { 0% { transform: scale(0); opacity: 0; } 50% { transform: scale(0); opacity: 0; } 75% { transform: scale(1); opacity: 1; } 85% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } } .svg-loader { width: 20px; height: auto; margin: 5px auto; } #loadMoreBtnDiv { text-align: center; } #loader-wrapper { position: fixed; top: 0; right: 0; width: 100%; height: 100%; z-index: 1081; } #loader { display: block; position: relative; right: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; border: 3px solid transparent; border-top-color: #3498db; /* Chrome, Opera 15+, Safari 5+ */ animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */ z-index: 1001; } #loader:before { content: ""; position: absolute; top: 5px; right: 5px; left: 5px; bottom: 5px; border-radius: 50%; border: 3px solid transparent; border-top-color: #e74c3c; /* Chrome, Opera 15+, Safari 5+ */ animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */ } #loader:after { content: ""; position: absolute; top: 15px; right: 15px; left: 15px; bottom: 15px; border-radius: 50%; border: 3px solid transparent; border-top-color: #f9c922; /* Chrome, Opera 15+, Safari 5+ */ animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */ } @keyframes spin { 0% { /* Chrome, Opera 15+, Safari 3.1+ */ /* IE 9 */ transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */ } 100% { /* Chrome, Opera 15+, Safari 3.1+ */ /* IE 9 */ transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */ } } #loader-wrapper .loader-section { position: fixed; top: 0; width: 51%; height: 100%; background-color: var(--bg-white); color: var(--bg-white-text); z-index: 1000; /* Chrome, Opera 15+, Safari 3.1+ */ /* IE 9 */ transform: translateX(0); /* Firefox 16+, IE 10+, Opera */ } #loader-wrapper .loader-section.section-left { right: 0; } #loader-wrapper .loader-section.section-right { left: 0; } /* Loaded */ .loaded #loader-wrapper .loader-section.section-left { /* Chrome, Opera 15+, Safari 3.1+ */ /* IE 9 */ transform: translateX(100%); /* Firefox 16+, IE 10+, Opera */ transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } .loaded #loader-wrapper .loader-section.section-right { /* Chrome, Opera 15+, Safari 3.1+ */ /* IE 9 */ transform: translateX(-100%); /* Firefox 16+, IE 10+, Opera */ transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } .loaded #loader { opacity: 0; transition: all 0.3s ease-out; } .loaded #loader-wrapper { visibility: hidden; /* Chrome, Opera 15+, Safari 3.1+ */ /* IE 9 */ transform: translateY(-100%); /* Firefox 16+, IE 10+, Opera */ transition: all 0.3s 0s ease-out; } /* JavaScript Turned Off */ .no-js #loader-wrapper { display: none; } .no-js h1, .no-js .h1 { color: #222222; } .yokart-loader { margin: 0 auto; position: relative; z-index: 1001; text-align: center; display: flex; align-items: center; justify-content: center; height: 100%; } .yokart-loader img { max-width: 80px; } .pong-loader { position: absolute; margin: 0 auto; right: 0; left: 0; top: 50%; height: 2.5rem; width: 6px; background-color: transparent; animation: paddles 0.75s ease-out infinite; transform: translate3d(0, 0, 0); z-index: 1001; } .pong-loader:before { content: ""; position: absolute; margin: 0 auto; right: 0; left: 0; top: 15px; width: 10px; height: 10px; background-color: var(--bg-white); color: var(--bg-white-text); border-radius: 50%; animation: ballbounce 0.6s ease-out infinite; } @keyframes paddles { 0% { box-shadow: -25px -10px 0px #fff, 25px 10px 0px #fff; } 50% { box-shadow: -25px 8px 0px #fff, 25px -10px 0px #fff; } 100% { box-shadow: -25px -10px 0px #fff, 25px 10px 0px #fff; } } @keyframes ballbounce { 0% { transform: translateX(-20px) scale(1, 1.2); } 25% { transform: scale(1.2, 1); } 50% { transform: translateX(15px) scale(1, 1.2); } 75% { transform: scale(1.2, 1); } 100% { transform: translateX(-20px); } } .page-loader { background-color: var(--bg-blur-white); color: var(--txt-body); backdrop-filter: blur(10px); display: grid; place-items: center; transition: opacity 0.4s ease; position: fixed; right: 0; left: 0; bottom: 0; top: 0; z-index: 99999; width: 100%; } .page-loader .loader-line { --color: white; --size-mid: 6vmin; --size-dot: 1.5vmin; --size-bar: 0.4vmin; --size-square: 3vmin; position: relative; margin-top: 5px; width: 100%; display: grid; place-items: center; } .page-loader .loader-line:before { content: ""; box-sizing: border-box; position: absolute; height: var(--size-bar); width: 6vmin; background-color: var(--brand-color); animation: loader-4 0.8s cubic-bezier(0, 0, 0.03, 0.9) infinite; } .page-loader .loader-line:after { content: ""; box-sizing: border-box; position: absolute; } .loaded .page-loader { display: none; } @keyframes loader-4 { 0%, 44%, 88.1%, 100% { transform-origin: left; } 0%, 100%, 88% { transform: scaleX(0); } 44.1%, 88% { transform-origin: right; } 33%, 44% { transform: scaleX(1); } } .spinner { position: relative; } .spinner:before { content: ""; box-sizing: border-box; position: absolute; top: 50%; right: 0; border-radius: 50%; width: 20px; height: 20px; margin-top: -10px; animation: spinner 0.5s linear infinite; } .spinner.spinner--sm:before { width: 16px; height: 16px; margin-top: -8px; } .spinner.spinner--sm.spinner--center:before { right: 50%; margin-right: -8px; } .spinner.spinner--sm.spinner--left:before { right: 0; left: auto; } .spinner.spinner--sm .spinner--right:before { right: auto; left: 0; } .spinner.spinner--center:before { right: 50%; margin-right: -10px; } .spinner.spinner--left:before { right: 0; left: auto; } .spinner.spinner--right:before { right: auto; left: 0; } .spinner.spinner--lg:before { width: 24px; height: 24px; margin-top: -12px; } .spinner.spinner--lg.spinner--center:before { right: 50%; margin-right: -12px; } .spinner.spinner--lg.spinner--left:before { right: 0; left: auto; } .spinner.spinner--lg.spinner--right:before { right: auto; left: 0; } .spinner.spinner--brand:before { border: 2px solid var(--brand-color); border-left: 2px solid transparent; } .spinner.spinner--light:before { border: 2px solid #ffffff; border-left: 2px solid transparent; } .spinner.spinner--dark:before { border: 2px solid #888; border-left: 2px solid transparent; } .spinner.spinner--primary:before { border: 2px solid var(--primary-color); border-left: 2px solid transparent; } .spinner.spinner--success:before { border: 2px solid #1dc9b7; border-left: 2px solid transparent; } .spinner.spinner--info:before { border: 2px solid #5578eb; border-left: 2px solid transparent; } .spinner.spinner--warning:before { border: 2px solid #ffb822; border-left: 2px solid transparent; } .spinner.spinner--danger:before { border: 2px solid #fd397a; border-left: 2px solid transparent; } .spinner.spinner--input.spinner--right:before { right: auto; left: 1rem; } .spinner.spinner--input.spinner--left:before { left: auto; right: 1rem; } .spinner.spinner--v2:before { animation: spinner 0.5s linear infinite; } .spinner.spinner--v2.spinner--brand:before { border: 2px solid #c6d6fc; border-top-color: #2861f2; } .spinner.spinner--v2.spinner--light:before { border: 2px solid white; border-top-color: #f7f7f7; } .spinner.spinner--v2.spinner--dark:before { border: 2px solid #656a98; border-top-color: #222433; } .spinner.spinner--v2.spinner--primary:before { border: 2px solid #d7dbf7; border-top-color: #4b5bda; } .spinner.spinner--v2.spinner--success:before { border: 2px solid #90efe5; border-top-color: #1bbcab; } .spinner.spinner--v2.spinner--info:before { border: 2px solid #dee5fb; border-top-color: #476de9; } .spinner.spinner--v2.spinner--warning:before { border: 2px solid #ffe9bb; border-top-color: #ffb313; } .spinner.spinner--v2.spinner--danger:before { border: 2px solid #ffd0e0; border-top-color: #fd2a70; } @keyframes spinner { to { transform: rotate(360deg); } } .loader { display: inline-block; width: 1.4rem; height: 1.4rem; margin: 0 auto; border-radius: 100%; background-color: #f7f8fa; opacity: 0; animation: loader-scaleout 0.9s infinite ease-in-out; } .loader.loader--lg { width: 2rem; height: 2rem; } .loader.loader--sm { width: 1rem; height: 1rem; } .loader.loader--brand { background-color: var(--brand-color); color: var(--brand-color-inverse); } .loader.loader--light { background-color: var(--bg-white); color: var(--bg-white-text); } .loader.loader--dark { background-color: #888; } .loader.loader--primary { background-color: var(--primary-color); } .loader.loader--success { background-color: #1dc9b7; } .loader.loader--info { background-color: #5578eb; } .loader.loader--warning { background-color: #ffb822; } .loader.loader--danger { background-color: #fd397a; } .btn .loader { position: relative; line-height: 0; } @keyframes loader-scaleout { 0% { opacity: 0.3; transform: scale(0); } 100% { opacity: 1; transform: scale(1); } } .pulse { position: relative; } .pulse .pulse__ring { display: block; border-radius: 40px; height: 40px; width: 40px; position: absolute; animation: pulse 3.5s ease-out; animation-iteration-count: infinite; opacity: 0; border-width: 3px; border-style: solid; border-color: #d8dce6; } .pulse.pulse--brand .pulse__ring { border-color: rgba(54, 108, 243, 0.8); } .pulse.pulse--light .pulse__ring { border-color: rgba(255, 255, 255, 0.8); } .pulse.pulse--dark .pulse__ring { border-color: rgba(40, 42, 60, 0.8); } .pulse.pulse--primary .pulse__ring { border-color: rgba(88, 103, 221, 0.8); } .pulse.pulse--success .pulse__ring { border-color: rgba(29, 201, 183, 0.8); } .pulse.pulse--info .pulse__ring { border-color: rgba(85, 120, 235, 0.8); } .pulse.pulse--warning .pulse__ring { border-color: rgba(255, 184, 34, 0.8); } .pulse.pulse--danger .pulse__ring { border-color: rgba(253, 57, 122, 0.8); } @media screen\0  { .pulse .pulse__ring { top: 2px; right: 2px; } } @keyframes pulse { 0% { -webkit-transform: scale(0.1, 0.1); opacity: 0; } 60% { -webkit-transform: scale(0.1, 0.1); opacity: 0; } 65% { opacity: 1; } 100% { -webkit-transform: scale(1.2, 1.2); opacity: 0; } } .modal-backdrop { position: fixed; top: 0; right: 0; z-index: 1040; width: 100vw; height: 100vh; opacity: 1 !important; background-color: oklab(70.9792% -0.00417995 -0.0269528 / 0.5); backdrop-filter: blur(32px); } .modal-content { background-color: var(--bg-white); color: var(--bg-white-text); border: none; border-radius: 4px; box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06); } .modal-content .close { font-weight: 400; } .modal-header { border-color: var(--border-color); padding: 2rem 2rem; } .modal-header .close { margin: -1rem; margin-right: auto !important; } .modal-header .btn-close { padding: 0.25rem; margin-right: auto !important; margin-left: 0 !important; } .modal-body { padding: 1rem 2rem; } .modal-title { font-size: 1.2rem; color: var(--txt-body); display: flex; gap: 0.5rem; align-items: center; } .modal-title small, .modal-title .small { font-size: 0.8rem; } .modal-footer { border-color: var(--border-color); padding: 1rem 2rem; } .modal.fixed-right { padding-left: 0 !important; } .modal.fixed-right.fade .modal-dialog-vertical { transform: translateX(-100%); } .modal.fixed-right.show .modal-dialog-vertical { transform: translateX(0); } .modal.fixed-right .modal-content { border-radius: 0 !important; } .modal-dialog-vertical { height: 100%; max-width: 500px; margin: 0; margin-right: auto; } .modal-dialog-vertical .modal-content { border-radius: 4px; height: inherit; overflow-y: auto; } .modal-dialog-vertical-sm { max-width: 250px; } .modal-dialog-vertical-md { max-width: 750px; } .modal-dialog-vertical-lg { max-width: 1000px; } .modal-dialog-vertical-full { max-width: 100%; } button.close { font-weight: 400; font-size: 1.5rem; } .dialogue .icn { font-size: 5rem; margin-bottom: 2rem; } .dialogue .icn-warning { color: #ffb822; } .dialogue .icn-success { color: #1dc9b7; } .dialogue .icn-danger { color: #fd397a; } .btn-close { background-color: oklab(92% 0 -0.03 / 0.57); background-size: 40%; border-radius: 50%; } .btn-close:active { transform: scale(0.96); transition: transform 0.1s ease, box-shadow 0.1s ease; } .btn-close-start { position: absolute; top: 1rem; right: 1rem; } .btn-close-end { position: absolute; top: 1rem; left: 1rem; } .custom-modal-body { padding: 2rem; } .custom-modal .title { font-size: 1.25rem; font-weight: 600; } .custom-modal .desc { font-size: 0.85rem; font-weight: 500; padding-bottom: 1.5rem; } .form-edit { display: flex; flex-direction: column; padding: 0; } .form-edit-head { padding: 0 2rem; border-bottom: solid 1px var(--border-color); } .form-edit-body { flex: 1 1 auto; padding: 1.5rem 2rem; } .form-edit-body .h3 { font-size: 1rem; color: var(--txt-body); } .form-edit-foot { border-top: solid 1px var(--border-color); position: sticky; bottom: 0; z-index: 1020; background-color: var(--bg-white); color: var(--bg-white-text); padding: 1.5rem 2rem; } .offcanvas { background-color: var(--bg-white); color: var(--bg-white-text); } .offcanvas-backdrop { position: fixed; top: 0; right: 0; z-index: 1040; width: 100vw; height: 100vh; opacity: 1 !important; background-color: oklab(70.9792% -0.00417995 -0.0269528 / 0.5); backdrop-filter: blur(32px); } .offcanvas-header { padding: 1rem 2rem; } .offcanvas-header .btn-close { padding: 0.25rem; } .offcanvas-body { padding: 1rem 2rem; } .offcanvas-foot { padding: 1rem 2rem; } .offcanvas-start { border: none; left: auto; right: 0; transform: translateX(100%); } .offcanvas-end { border: none; right: auto; left: 0; transform: translateX(-100%); } .offcanvas-gps-location { height: 50vh; } .offcanvas-side-cart { width: 500px; } .offcanvas-side-cart .cart-summary { margin-bottom: 2rem; } .offcanvas-filters { background-color: var(--bg-gray-light); color: var(--txt-body); } .offcanvas-filters .sidebar-widget { border: solid 1px var(--border-color); border-radius: 4px; box-shadow: rgba(0, 0, 0, 0.12) 0px 6px 16px; background-color: var(--bg-white); color: var(--bg-white-text); border-radius: 10px; padding: 1.5rem; } .offcanvas.show { transform: none; visibility: visible; } .demo-restore-clone { position: fixed; z-index: 9999; left: 3rem; top: 30%; } .restore-btn { background-color: var(--brand-color); color: var(--brand-color-inverse); border: none; border-radius: 50px; border-top-left-radius: 0; border-bottom-left-radius: 0; position: fixed; z-index: 9999; left: 0; top: 30%; width: 40px; height: 40px; padding: 10px; display: flex; justify-content: flex-start; align-items: center; font-size: 0.9rem; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .restore-btn:hover, .restore-btn:focus, .restore-btn:active { color: var(--txt-white); width: 50px; } .restore-btn .svg { min-width: 1.5rem; min-height: 1.5rem; } [dir=rtl] .restore-btn .svg { transform: rotate(-180deg); } .restore-btn-icon { animation: rotate 1.5s linear infinite; border-color: transparent white; border-radius: 50%; border-style: solid; border-width: 0.125em; height: 1.2rem; margin: 0.25em; width: 1.2rem; } .restore-btn-icon:before, .restore-btn-icon:after { border-style: solid; content: ""; display: block; position: absolute; width: 0; transform: rotate(-45deg); } .restore-btn-icon:after { border-color: transparent transparent transparent white; border-width: 0.3125em 0 0.3125em 0.5em; top: -0.3125em; right: 0.0625em; } .restore-btn-icon:before { border-color: transparent white transparent transparent; border-width: 0.3125em 0.5em 0.3125em 0; bottom: -0.3125em; left: 0.0625em; } .modal-restore .modal-dialog-vertical { max-width: 280px !important; } .offcanvas-restore { max-width: 250px; top: 30%; left: 3rem; bottom: auto; background-color: transparent; } .offcanvas-restore .offcanvas-body { padding: 0; } .demo { color: var(--txt-body); height: 100%; display: flex; flex-direction: column; } .demo-restore { display: flex; justify-content: flex-end; margin-bottom: 1rem; margin-left: 0; } .demo-restore-btn { font-weight: 600; background-color: var(--bg-white); color: var(--bg-white-text); background-color: var(--bg-white); color: var(--bg-white-text); box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px; border-radius: 30px; border: 0; gap: 0.5rem; padding: 0.6rem 1rem; display: flex; min-width: 130px; } .demo-restore-title { font-size: 1rem; font-weight: 500; margin-bottom: 0.25rem; } .demo-restore-counter { font-size: 1rem; font-weight: 600; } .demo-switch { flex: 1; } .demo-action { display: flex; flex-direction: column; justify-content: center; gap: 1rem; margin-top: 1rem; } .demo .views { display: flex; flex-direction: column; } .demo .views-item { border-bottom: solid 1px var(--border-color); display: flex; } .demo .views-item.is-active { color: var(--brand-color); } .demo .views-item:first-child a { padding-top: 0; } .demo .views-item:last-child { border-bottom: none; } .demo .views-links { padding: 0.8rem 0; text-decoration: none; color: var(--txt-gray); font-size: 0.85rem; display: flex; flex-direction: row; align-items: center; font-weight: 600; gap: 0.5rem; } .demo .views-links:hover, .demo .views-links:focus, .demo .views-links:active { color: var(--brand-color); } .demo .views-links .svg { width: 24px; height: 24px; } .demo-bg-wrap { background-color: var(--bg-white); color: var(--bg-white-text); border-radius: 10px; padding: 1.5rem; } .contacts { padding: 1rem 0; display: flex; gap: 4rem; margin: 0 auto; flex-flow: row wrap; } .contacts li { text-align: right; position: relative; margin: 10px 0; padding: 0; display: block; } .cta { text-align: center; padding: 2rem; } .cta p { font-weight: 600; } .get-started { max-width: 80%; margin: 0 auto; width: 100%; } .fixed-right-btn { background-color: var(--bg-black); color: var(--bg-black-text); position: fixed; z-index: 999; left: 0; top: calc(60% - 44px); transform-origin: bottom right; transform: rotate(-90deg) translateX(100%); border-right: none; border-radius: 5px 5px 0 0; border-bottom: none; } @media (max-width: 992px) and (min-width: 768px) and (orientation: landscape) { .fixed-right-btn { top: 65%; } } @media only screen and (max-width: 767px) { .fixed-right-btn { box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); display: block; bottom: 0px; top: auto; right: 0; left: 0; text-align: center; transform: none; margin: 0 auto; padding: 0px; } .fixed-right-btn a { width: 100%; padding: 18px 15px; } } .fixed-right-btn .sticker-Btn { background-color: transparent; border: none; color: var(--txt-white); font-size: 14px; display: inline-block; padding: 11px 15px; line-height: 1; font-weight: 600; white-space: pre; } @media (max-width: 767px) { .fixed-right-btn .sticker-Btn { padding: 20px 15px; } } /* Main ul container */ .ml-container { margin: 0px; } /* List */ .ml-ul { overflow: auto; list-style-type: none; padding: 0; margin: 15px 0px; max-height: 340px; overflow-y: auto; } .ml-ul label { width: 100%; font-size: 13px; font-family: sans-serif; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; } /* List input item */ /* .ml-input-container .ml-input-filter { width: 100%; height: 34px; padding: 6px 12px; font-size: 14px; line-height: 1.42857143; color: #555555; @include bg-white; background-image: none; border: 1px solid #CCCCCC; border-radius: $common-radius; } */ /* List item */ .ml-li { /* border-bottom: 1px solid #D0DBE0; */ padding: 0px 0px 6px 0px; margin-left: 10px; } .ml-li input, .ml-li .custom-select { /* margin-left: 10px; */ } .ml-disabled-element-li { background-color: #e4e8ea; } .ml-disabled-element-li label { padding-right: 23px; } .ml-hide { display: none !important; } .pagination { display: flex; background: transparent; border-radius: 4px; overflow: hidden; margin: 1rem 0; } .pagination.pagination-center { justify-content: center; width: 100%; } .pagination.pagination-right { justify-content: flex-end; } .pagination .selected .pagination-link { background-color: var(--bg-black); color: var(--bg-black-text); border-color: #000; } .pagination .disabled { opacity: 0.4; } .pagination .disabled .pagination-link { cursor: not-allowed; } .pagination .prev .pagination-link:before { width: 12px; height: 12px; border-right: 2px solid #333; border-bottom: 2px solid #333; position: absolute; right: calc(50% - 3px); top: calc(50% - 6px); transform: rotate(45deg); } .pagination .next .pagination-link:before { width: 12px; height: 12px; border-left: 2px solid currentColor; border-top: 2px solid currentColor; position: absolute; right: calc(50% - 8px); top: calc(50% - 6px); transform: rotate(45deg); } .pagination-link { background-color: var(--bg-white); color: var(--bg-white-text); border: none; border: solid 1px var(--border-color); border-radius: 4px; width: 2.5rem; aspect-ratio: 1/1; height: 2.5rem; line-height: 2.5rem; text-align: center; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; position: relative; overflow: hidden; margin: 0 3px; padding: 12px; } .pagination-link:hover, .pagination-link:focus, .pagination-link:active { text-decoration: none; background-color: var(--bg-black); color: var(--bg-black-text); border-color: #000; } [dir=rtl] .pagination .svg { transform: rotate(180deg); } .products { background-color: transparent; position: relative; text-align: center; transition: all 0.2s linear; animation: slideRight 600ms ease both; min-width: 0; display: flex; flex-direction: column; gap: 1rem; } .products-effect-zoom { line-height: 1; position: relative; overflow: hidden; will-change: transform; } .products-effect-zoom img { transition: all 0.4s; transform: scale(1); } .products-effect-zoom:hover img { transition: all 0.4s; transform: scale(1.1); } .products:hover, .products:focus, .products:active { border-color: var(--brand-color); } .products-head { height: 80px; } .products-head-date { color: inherit; font-size: 0.875em; } .products-head-lable { display: inline; line-height: 1; vertical-align: baseline; white-space: nowrap; background-color: var(--brand-color); border-radius: 0; font-weight: normal; border-color: #fee188; color: var(--txt-white); padding: 3px 8px 4px; position: absolute; left: 15px; top: 15px; font-size: 0.8em; text-align: left; border-radius: 2px; z-index: 1; } .products-head-lable:before { border-color: rgba(0, 0, 0, 0) var(--brand-color) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); -o-border-image: none; border-image: none; border-style: solid; content: normal; display: inline-block; right: -14px; position: absolute; top: 0; border-width: 10px 7px; } .products-body { position: relative; flex-shrink: 0; } .products-foot { min-width: 0; font-size: 0.85rem; padding: 0; text-align: right; color: var(--txt-body); } .products-img { display: block; margin: 0; aspect-ratio: 1; position: relative; width: 100%; overflow: hidden; background-color: var(--bg-gray); border-radius: 6px; background-color: var(--bg-placeholder); background-image: url(images/retina/image.svg); background-position: center; background-repeat: no-repeat; background-size: 50% 50%; } .products-img img { transition: all 0.4s; -o-object-fit: cover; object-fit: cover; max-width: 100%; } .products-img > a { width: 100%; height: 100%; display: block; } .products-title { color: inherit; margin: 0; padding: 0; margin-bottom: 0.5rem; font-size: 0.85rem; font-weight: 600; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; } .products-title a { color: inherit; font-size: inherit; font-weight: inherit; } .products-category { display: inline-block; color: var(--txt-gray); font-size: 0.85rem; font-weight: 400; margin-bottom: 6px; } .products-brand { color: var(--txt-gray); font-size: 0.85rem; font-weight: 400; } .products .products-head-specification { color: var(--txt-gray); font-size: 1em; font-weight: 400; } .shops .products { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) inset; padding: 15px; } .not-available { background-color: var(--bg-black); color: var(--bg-black-text); position: absolute; bottom: 0; z-index: 1; border-radius: 0; border: none; padding: 5px; font-size: 12px; font-weight: 600; margin: auto; display: flex; align-items: center; justify-content: center; width: 100%; } .not-available .svg { display: none; } .out-of-stock-txt { position: absolute; bottom: 0; right: 0; left: 0; z-index: 1; background-color: rgba(112, 112, 112, 0.8); color: var(--txt-white); border-radius: 0; border: none; padding: 5px; font-size: 12px; font-weight: 600; margin: auto; display: flex; align-items: center; justify-content: center; } .product-listing { display: grid; grid-gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } .product-listing-item { min-width: 0; } @media (min-width: 1200px) { .product-listing[data-view="2"] { grid-template-columns: repeat(2, 1fr); } .product-listing[data-view="3"] { grid-template-columns: repeat(3, 1fr); } .product-listing[data-view="4"] { grid-template-columns: repeat(4, 1fr); } .product-listing[data-view="5"] { grid-template-columns: repeat(5, 1fr); } .product-listing[data-view="6"] { grid-template-columns: repeat(6, 1fr); } .product-listing[data-view="7"] { grid-template-columns: repeat(7, 1fr); } .product-listing[data-view="8"] { grid-template-columns: repeat(8, 1fr); } .product-listing[data-view="9"] { grid-template-columns: repeat(9, 1fr); } } @media (max-width: 575.98px) { .product-listing { grid-gap: 5px; } .product-listing .products { border-radius: 0px; } } .product-listing .products { height: 100%; } .products-price { display: inline-flex; align-items: center; flex-flow: row wrap; font-size: 0.85rem; color: inherit; padding: 0; gap: 5px; } .products-price-new { font-weight: 600; } .products-price-old { text-decoration: line-through; color: var(--txt-gray); } .products-price-off { font-weight: 400; color: var(--txt-body); white-space: nowrap; } .seller-lists { display: grid; grid-gap: 2rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } .seller-card { text-align: center; display: flex; flex-direction: column; gap: 0.5rem; align-items: center; } .seller-card-map { flex-direction: row; } .seller-card-thumbnail { background-color: transparent; box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15); border-radius: 50%; overflow: hidden; flex: 0 0 40px; max-width: 40px; } .seller-card-img { width: 100%; max-width: 100%; } .seller-card-data { font-weight: 0.85rem; font-weight: 600; } .seller-card-head { padding: 2rem; } .seller-card-body { flex: 1; display: flex; flex-direction: column; } .seller-card-body .title { font-weight: 600; font-size: 1rem; color: var(--txt-body); } .seller-card-body .location { font-size: 0.8rem; font-weight: 400; color: var(--txt-gray); margin-bottom: 1.5rem; } .seller-card-body .price { font-weight: 600; color: var(--brand-color); } .seller-card-body .payment-mode { font-size: 0.8rem; color: var(--txt-gray); } .seller-card-foot { padding: 1.5rem; display: flex; gap: 1rem; align-items: center; } .seller-card .seller-logo { background-color: var(--bg-white); color: var(--bg-white-text); border-radius: 50%; overflow: hidden; width: 150px; height: 150px; margin: 0 auto; position: relative; border: solid 1px #dee2e6; display: flex; align-items: center; justify-content: center; padding: 1rem; } .seller-card .seller_detail { flex: 1; } .seller-card .seller_title { font-weight: 500; margin: 0.5rem; font-size: 0.95rem; } .product-card { display: flex; flex-direction: column; gap: 2rem; } .product-card-img { background-color: var(--bg-placeholder); background-image: url(images/retina/image.svg); background-position: center; background-repeat: no-repeat; background-size: 50% 50%; border: solid 1px var(--border-color); aspect-ratio: 1/1; } .product-card-img img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .product-card-data .title { font-weight: 600; font-size: clamp(1rem, 1.5vw, 3rem); } .slick-dots { padding: 0; position: absolute; bottom: 0; right: 0; left: 0; margin: 0 auto; text-align: center; } .slick-dots li { vertical-align: middle; display: inline-block; margin: 0 1px; width: 13px; height: 13px; border-radius: 50%; cursor: pointer; background-color: rgba(0, 0, 0, 0.2); box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; transition: all 0.5s ease-in-out; } .slick-dots li button { background-color: transparent; border: none; text-indent: -9999999px; } .slick-dots li.slick-active { background-color: rgb(0, 0, 0); } .social-profiles { margin-top: 1rem; } .social-icons { display: flex; justify-content: center; align-items: center; } .social-icons li { margin: 0 5px; } .share-wrap { padding: 2.5rem; text-align: center; } .social-sharing { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; display: grid; grid-gap: 1rem; padding: 1.5rem; grid-template-columns: 1fr 1fr; } .social-sharing li { font-size: 0.8rem; display: block; position: relative; transition: all 0.3s ease; margin: 0; border-radius: 40px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); } .social-sharing li .social-link { background-color: transparent; border: none; border-radius: 0; padding: 0; width: 100%; color: var(--txt-white); cursor: pointer; display: block; padding: 0.5rem 1rem; } .social-sharing li .social-link .svg { width: 1.5rem; height: 1.5rem; } .social-sharing li.social-facebook { background: #3b5998; } .social-sharing li.social-twitter { background: #1da1f2; } .social-sharing li.social-pintrest { background: #c8232c; } .social-sharing li.social-email { background: #9b9a9a; } .rating-a .br-widget { height: 52px; } .rating-a .br-widget a { display: block; width: 15px; padding: 5px 0 5px 0; height: 30px; float: right; background-color: #e3e3e3; margin: 1px; text-align: center; } .rating-a .br-widget a.br-active, .rating-a .br-widget a.br-selected { background-color: #59a6d6; } .rating-a .br-widget .br-current-rating { font-size: 20px; line-height: 2; float: right; padding: 0 20px 0 20px; color: #646464; } /******* EXAMPLE B *******/ .rating-b .br-widget { height: 25px; } .rating-b .br-widget a { display: block; width: 70px; height: 16px; float: right; background-color: #e3e3e3; margin: 1px; } .rating-b .br-widget a.br-active, .rating-b .br-widget a.br-selected { background-color: #59a6d6; } .rating-b .br-widget .br-current-rating { line-height: 1.1; float: right; padding: 0 20px 0 20px; color: #646464; } .rating-b .br-readonly a.br-active, .rating-b .br-readonly a.br-selected { background-color: #cbcbcb; } /******* EXAMPLE C *******/ .rating-c .br-widget { height: 52px; } .rating-c .br-widget a { display: block; width: 35px; height: 35px; float: right; background-color: #e3e3e3; margin: 2px; text-decoration: none; font-size: 16px; font-weight: 400; line-height: 2.2; text-align: center; color: #b6b6b6; } .rating-c .br-widget a.br-active, .rating-c .br-widget a.br-selected { background-color: #59a6d6; color: white; } /******* EXAMPLED *******/ .rating-d .br-widget { height: 52px; } .rating-d .br-widget a { display: block; width: 40px; padding: 5px 0 5px 0; height: 30px; float: right; background-color: var(--bg-white); color: var(--bg-white-text); border-bottom: 2px solid #e3e3e3; color: #646464; margin: 1px; text-decoration: none; line-height: 2.1; text-align: center; } .rating-d .br-widget a span { color: white; } .rating-d .br-widget a.br-active, .rating-d .br-widget a.br-selected { border-bottom: 2px solid #646464; } .rating-d .br-widget a:hover span, .rating-d .br-widget a.br-current span { color: #646464; } /******* EXAMPLE E *******/ .rating-e .br-widget a { padding: 5px; color: #646464; text-decoration: none; font-size: 11px; font-weight: 400; line-height: 3; text-align: center; } .rating-e .br-widget a.br-active { background-color: #e3e3e3; color: #646464; } .rating-e .br-widget a.br-selected { background-color: #59a6d6; color: white; } /******* EXAMPLE F *******/ .rating-f .br-widget { height: 24px; } .rating-f .br-widget a { background: url("images/star.png"); width: 24px; height: 24px; display: block; float: right; } .rating-f .br-widget a:hover, .rating-f .br-widget a.br-active, .rating-f .br-widget a.br-selected { background-position: 0 24px; } /******* EXAMPLE G *******/ .rating-g .br-widget { height: 25px; } .rating-g .br-widget a { display: block; width: 50px; height: 16px; float: right; background-color: #e3e3e3; margin: 1px; } .rating-g .br-widget a.br-active, .rating-g .br-widget a.br-selected { background-color: #59a6d6; } .rating-g .br-widget .br-current-rating { line-height: 1.1; float: right; padding: 0 20px 0 20px; color: #646464; } @media only screen and (min-device-pixel-ratio: 1.5), (min-resolution: 192dpi) { .rating-f .br-widget a { /* background: url('images/star@2x.png'); background-size: 24px 48px; */ } } .rating { --rating-fg: #f5861f; --size: 0.875rem; --space: 0.15em; position: relative; display: flex; margin-right: -0.15em; } .rating-action, .rating-view { display: inline-flex; } .rating-action .icon, .rating-view .icon { width: var(--size); height: var(--size); min-width: var(--size); min-height: var(--size); padding: var(--space); box-sizing: content-box; margin: 0; } .rating-action, .rating-view { flex-direction: row-reverse; } .rating-action .icon, .rating-view .icon { fill: #ddd; stroke: #ddd; } .rating-action[data-rating="1"] .icon:nth-last-child(1), .rating-action[data-rating="1"] .icon:nth-last-child(1) ~ .icon, .rating-view[data-rating="1"] .icon:nth-last-child(1), .rating-view[data-rating="1"] .icon:nth-last-child(1) ~ .icon { fill: var(--rating-fg); stroke: var(--rating-fg); } .rating-action[data-rating="2"] .icon:nth-last-child(2), .rating-action[data-rating="2"] .icon:nth-last-child(2) ~ .icon, .rating-view[data-rating="2"] .icon:nth-last-child(2), .rating-view[data-rating="2"] .icon:nth-last-child(2) ~ .icon { fill: var(--rating-fg); stroke: var(--rating-fg); } .rating-action[data-rating="3"] .icon:nth-last-child(3), .rating-action[data-rating="3"] .icon:nth-last-child(3) ~ .icon, .rating-view[data-rating="3"] .icon:nth-last-child(3), .rating-view[data-rating="3"] .icon:nth-last-child(3) ~ .icon { fill: var(--rating-fg); stroke: var(--rating-fg); } .rating-action[data-rating="4"] .icon:nth-last-child(4), .rating-action[data-rating="4"] .icon:nth-last-child(4) ~ .icon, .rating-view[data-rating="4"] .icon:nth-last-child(4), .rating-view[data-rating="4"] .icon:nth-last-child(4) ~ .icon { fill: var(--rating-fg); stroke: var(--rating-fg); } .rating-action[data-rating="5"] .icon:nth-last-child(5), .rating-action[data-rating="5"] .icon:nth-last-child(5) ~ .icon, .rating-view[data-rating="5"] .icon:nth-last-child(5), .rating-view[data-rating="5"] .icon:nth-last-child(5) ~ .icon { fill: var(--rating-fg); stroke: var(--rating-fg); } .rating-action .icon:hover, .rating-action .icon:hover ~ .icon { fill: var(--rating-fg); stroke: var(--rating-fg); } .rating:not([data-readonly]) .rating-action .icon { cursor: pointer; } .rating:not([data-readonly]) .rating-action .icon:hover, .rating:not([data-readonly]) .rating-action .icon:hover ~ .icon { fill: var(--rating-fg); stroke: var(--rating-fg); } .rating__count { font-size: 0.875rem; color: var(--txt-gray); padding-right: 0.5rem; } .rating__text { font-size: 12px; color: var(--txt-gray); border: solid 1px var(--border-color); border-radius: 50px; display: inline-block; padding: 0.15rem 1rem; margin-bottom: 0.5rem; } .product-ratings { padding: 0; margin: 5px 0; display: inline-flex; align-items: center; justify-content: flex-start; font-size: 0.85rem; line-height: 1.5; gap: 5px; } .product-ratings a { color: inherit; font-size: inherit; } .product-ratings .rate { margin: 0; padding: 0; line-height: inherit; font-weight: 500; white-space: nowrap; } .product-ratings .be-first { line-height: 1; font-size: 0.9em; font-weight: 400; display: inline-block; vertical-align: top; color: var(--secondary-color); } .product-ratings .totals-review { color: currentColor; background-color: transparent; border: none; text-decoration: underline; margin-right: 10px; } .rating { display: flex; align-items: center; } .products-reviews { display: inline-block; vertical-align: middle; } .products-reviews .totals-review { color: var(--brand-color); display: block; } .products-reviews .totals-review .link:after { background-color: var(--brand-color); color: var(--brand-color-inverse); } .steps { width: 100%; background: #f5f5f5; padding: 10px; text-align: center; } .steps ul { margin: auto; display: block; width: 80%; } .steps li { display: inline-block; /*padding: 0 150px 0 25px;*/ width: 33.3%; margin: 0 -2px; text-align: center; position: relative; color: rgba(0, 0, 0, 0.2); font-weight: 500; font-size: 1.1em; } .steps li:after { width: 80px; right: 100%; margin: 0 0 0 -45px; top: 50%; height: 1px; background: #e6e6e6; position: absolute; content: ""; } .steps li:last-child:after { display: none; } .steps li:before { content: "\f05e"; font-family: "Font Awesome 5 Free"; font-size: 1.2em; margin: 0 5px 0 0; } .steps li.is-process { color: #000; } .steps li.is-process:before { content: "\f021"; } .steps li.is-success { color: #24b26b; } .steps li.is-success:before { content: "\f00c"; } .steps li:last-child { padding-left: 0; } .actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 5px; white-space: nowrap; margin: 0; color: var(--txt-gray); } .actions-item { position: relative; } .actions-link { background-color: transparent; border: none; border-radius: 0; padding: 0.5rem; margin: 0; line-height: 1.4; text-align: center; font-size: 0.7rem !important; color: var(--brand-color); display: flex; align-items: center; justify-content: center; text-decoration: none; position: relative; background-color: transparent; position: relative; overflow: hidden; } .actions-link::before { content: ""; background: var(--bg-gray-light); position: absolute; z-index: -1; top: 0; width: 100%; height: 100%; right: 0; left: 0; opacity: 0; transition: all 0.2s cubic-bezier(0.2, 0.91, 0.85, 0.96) 0s; transform: scale(0.75); backface-visibility: hidden; pointer-events: none; } .actions-link:is(:hover, :focus, :active, .active)::before { opacity: 1; transform: scale(1); } .actions-link .svg { fill: var(--brand-color); width: 1.2rem; height: 1.2rem; display: block; position: relative; } .actions-link:is(:hover, :focus, :active, .active, .is-active) { text-decoration: none; } .nav-tabs { border-bottom: solid 2px var(--border-black); display: inline-grid; grid-auto-flow: column; grid-gap: 1rem; white-space: nowrap; margin-bottom: 2rem; } @media (min-width: 992px) { .nav-tabs { grid-gap: 2rem; margin: 0; } } @media (max-width: 575.98px) { .nav-tabs { overflow: hidden; overflow-x: auto; width: 100%; } } .nav-tabs-center { margin: 0 auto; } @media (min-width: 992px) { .nav-tabs-center { justify-content: center; } } .nav-tabs .nav-item:last-child .nav-link { margin-left: 0; } .nav-tabs .nav-item:first-child .nav-link { margin-right: 0; } .nav-tabs .nav-link { color: var(--txt-body); border: none; font-weight: 500; font-size: 1rem; padding: 0.7rem 0; } .nav-tabs .nav-link:hover { color: var(--brand-color); } .nav-tabs .nav-link.active { background: none; border: none; color: var(--brand-color); position: relative; } .nav-tabs .nav-link.active:after { content: ""; background-color: var(--brand-color); width: 100%; height: 4px; position: absolute; bottom: -1px; right: 0; } .wrap-drop { position: relative; border: solid 1px var(--border-color); height: 38px; line-height: 38px; width: 100%; color: var(--txt-body); font-family: inherit; font-size: 0.9em; font-weight: normal; border-radius: 4px; cursor: pointer; padding-right: 10px; padding-left: 35px; background-color: var(--bg-white); color: var(--bg-white-text); } .wrap-drop span { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .wrap-drop:before, .wrap-drop:after { top: 50%; position: absolute; width: 9px; height: 2px; background-color: #545454; display: inline-block; transition: all 0.2s ease; content: ""; } .wrap-drop:after { left: 10px; transform: rotate(-45deg); } .wrap-drop:before { left: 16px; transform: rotate(45deg); } .wrap-drop.wrap-drop--first { border-color: var(--brand-color); color: var(--brand-color); } .wrap-drop.wrap-drop--first:after, .wrap-drop.wrap-drop--first:before { background-color: var(--brand-color); } .wrap-drop .drop { background-color: var(--bg-white); color: var(--bg-white-text); border: solid 1px var(--border-color); position: absolute; transition: all 300ms; right: 0; left: 0; pointer-events: none; position: absolute; opacity: 0; top: 100%; z-index: 2; border-radius: 4px; } .wrap-drop .drop li:hover a { color: var(--brand-color); } .wrap-drop .drop li a { cursor: pointer; color: var(--txt-body); display: block; overflow: hidden; position: relative; text-align: right; font-size: 0.875em; font-weight: 400; padding: 10px; line-height: 1.2; display: flex; align-items: center; text-decoration: none; transition: all 0.2s linear; } .wrap-drop.active:after { transform: rotate(45deg); border-width: 0 10px 10px; } .wrap-drop.active:before { transform: rotate(-45deg); } .wrap-drop.active .drop { display: block; opacity: 1; pointer-events: auto; } .wrap-drop .colors { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-left: 5px; box-shadow: 0 0px 1px 0 rgba(0, 0, 0, 0.3); } .card { box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1); background-color: var(--bg-white); color: var(--bg-white-text); position: relative; border-radius: 4px; margin-bottom: 0rem !important; height: 100%; animation: dropdown-menu-fade-in 0.3s ease 1, dropdown-menu-move-up 0.3s ease-out 1; display: flex; flex-direction: column; } @media (max-width: 767.98px) { .card { word-break: normal; } } .card-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem; color: var(--txt-body); background: none; border: none; } .card-header ~ .card-body { padding-top: 0; } .card-body { flex: 1 1 0; padding: 1rem; } .card-footer { padding: 1rem; background: none; border-top: solid 1px var(--border-color); } .card-title { margin-bottom: 0; font-weight: 400; font-size: 1.1rem; } .card-title a { color: var(--txt-body); } .toggle-switch { display: inline-block; height: 20px; position: relative; width: 42px; min-width: 42px; flex: 0 0 42px; } .toggle-switch input, .toggle-switch .custom-select { display: none; } .toggle-switch input:checked + .slider, .toggle-switch .custom-select:checked + .slider { background-color: #66bb6a; } .toggle-switch input:checked + .slider:before, .toggle-switch .custom-select:checked + .slider:before { transform: translateX(22px); } .toggle-switch .slider { background-color: #ccc; bottom: 0; cursor: pointer; right: 0; position: absolute; left: 0; top: 0; transition: 0.4s; } .toggle-switch .slider:before { background-color: var(--bg-white); color: var(--bg-white-text); background-color: var(--bg-white); color: var(--bg-white-text); bottom: 4px; right: 4px; content: ""; height: 12px; position: absolute; transition: 0.4s; width: 12px; } .toggle-switch .slider.round { border-radius: 20px; } .toggle-switch .slider.round:before { border-radius: 50%; } .switch-toggle { background-color: var(--bg-gray); color: var(--txt-body); display: inline-flex; justify-content: space-between; align-items: center; gap: 0; padding: 0.4rem; border-radius: 40px; } .switch-toggle .btn-check { clip: rect(0, 0, 0, 0); height: 1px; width: 1px; border: 0; overflow: hidden; } .switch-toggle .btn-check:checked + label { transition: all 0.4s; background-color: var(--bg-white); color: var(--bg-white-text); color: var(--txt-black); box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; } .switch-toggle-label { min-width: 100px; border-radius: 40px; color: var(--txt-gray); display: flex; text-align: center; justify-content: center; align-items: center; gap: 5px; font-size: 0.8rem; padding: 0.5rem 1rem; transition: all 0.1s ease-in-out; transition: all 0.4s; } .switch-toggle-label:hover { cursor: pointer; } .list-radio { display: flex; gap: 0.75rem; padding: 0; margin: 0; list-style: none; flex-wrap: wrap; } .list-radio li { margin: 0; } .list-radio { /* Hide native radio */ } .list-radio input[type=radio], .list-radio [type=radio].custom-select { position: absolute; opacity: 0; pointer-events: none; } .list-radio label.radio { background-color: var(--bg-white); color: var(--bg-white-text); border: solid 1px var(--border-color); position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px 10px 14px; border-radius: 999px; font-size: 0.8rem; font-weight: 500; cursor: pointer; white-space: nowrap; -webkit-user-select: none; -moz-user-select: none; user-select: none; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04); /* Check icon */ } .list-radio label.radio::before { background-color: var(--bg-form); color: var(--bg-form-inverse); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(255,255,255,1)'%3E%3Cpath fill='none' d='M0 0h24v24H0z'%3E%3C/path%3E%3Cpath d='M9.9997 15.1709L19.1921 5.97852L20.6063 7.39273L9.9997 17.9993L3.63574 11.6354L5.04996 10.2212L9.9997 15.1709Z'%3E%3C/path%3E%3C/svg%3E"); background-size: 13px; background-position: center; background-repeat: no-repeat; content: ""; display: inline-flex; align-items: center; justify-content: center; width: 0; height: 0; border-radius: 50%; font-size: 12px; font-weight: 700; transform: scale(0); opacity: 0; transition: all 0.25s ease; } .list-radio label.radio { /* Hover */ } .list-radio label.radio:hover { background-color: transparent; border-color: var(--bg-form); color: var(--bg-form); } .list-radio label.radio { /* Active press */ } .list-radio label.radio:active { transform: scale(0.96); } .list-radio label.radio { /* Selected state */ } .list-radio label.radio:has(input:checked, .custom-select:checked) { border-color: var(--bg-form); color: var(--bg-form); } .list-radio label.radio:has(input:checked, .custom-select:checked)::before { width: 1.125rem; height: 1.125rem; transform: scale(1); opacity: 1; } @media print { body { margin: 0; padding: 0; color: #000; background-color: #000; overflow: visible !important; } body table { overflow: visible !important; table-layout: fixed !important; } body .content-space { padding: 0 !important; margin: 0; } [dir=rtl] body { direction: rtl !important; text-align: right !important; } .noprint, .no-print { display: none !important; } } .checkout-progress { display: none; } @media (min-width: 992px) { .checkout-progress { display: flex; align-items: center; grid-gap: 1.5rem; margin-right: auto; width: -moz-fit-content; width: fit-content; } } .checkout-progress-link { background-color: transparent; border: none; border-radius: 0; padding: 0; text-align: center; flex: 1; color: var(--txt-body); font-weight: 600; list-style: none; cursor: pointer; display: block; padding: 20px 0; color: currentColor; text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-position: 50% 100%; background-repeat: no-repeat; background-size: 0% 2px; background-color: transparent; transition: background-size 0.3s; } .checkout-progress-link:hover { color: currentColor; text-decoration: none; background-size: 100% 2px; } .checkout-progress-link.is-complete { color: var(--txt-gray); text-decoration: none; background-size: 100% 0; } .checkout-progress-link.is-active { color: var(--secondary-color); background-image: linear-gradient(currentColor, currentColor); background-size: 100% 2px; } .checkout-progress-link.pending { cursor: none; pointer-events: none; opacity: 0.55; } .list-group-item { background: transparent; border: solid 1px var(--border-color); animation: dropdown-menu-fade-in 0.3s ease 1, dropdown-menu-move-up 0.3s ease-out 1; } .list-group-xl .list-group-item { padding: 2.25rem 225rem; } .list-group-lg .list-group-item { padding: 2rem 2rem; } .list-group-md .list-group-item { padding: 1.5rem 1.5rem; } .list-group-sm .list-group-item { padding: 1.25rem 1.25rem; } .list-group-xs .list-group-item { padding: 1rem 1rem; } .list-group-flush-x .list-group-item { padding-right: 0; padding-left: 0; border-left: none; border-right: none; border-radius: 0; } .list-group-flush-y .list-group-item:first-child { padding-top: 0; border-top: none; border-radius: 0; } .list-group-flush-y .list-group-item:last-child { padding-bottom: 0; border-bottom: 0; border-radius: 0; } .list-actions { display: flex; align-items: center; flex-wrap: wrap; } .list-actions li { border: none; transition-delay: 250ms; margin-left: 15px; } .list-actions li a { color: var(--txt-body); } .list-actions li a .svg { fill: currentColor; opacity: 0.6; width: 1rem; height: 1rem; margin: 0; } .list-actions li a:hover .svg { fill: var(--brand-color); opacity: 1; } .list-actions li:last-child { margin-left: 0; } .list-actions li:nth-child(2) { transition-delay: 500ms; } .media-more { transition: all 0.5s ease-out; display: flex; align-items: center; padding: 5px; } .media-more li { padding: 0; opacity: 0; transition: all 0.1s ease-in-out; margin-right: -10px; } .media-more li:first-child { margin-right: 0; } .media-more li:nth-child(1) { transition-delay: 75ms; } .media-more li:nth-child(2) { transition-delay: 0.15s; } .media-more li:nth-child(3) { transition-delay: 0.3s; } .media-more li:nth-child(4) { transition-delay: 0.45s; } .media-more li:nth-child(5) { transition-delay: 0.6s; } .media-more li:nth-child(6) { transition-delay: 0.75s; } .media-more li:nth-child(7) { transition-delay: 0.9s; } .media-more li:nth-child(8) { transition-delay: 0.105s; } .media-more li:nth-child(9) { transition-delay: 0.13s; } .media-more li .circle { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border: solid 1px var(--bg-white); overflow: hidden; border-radius: 50%; padding: 0; box-shadow: 0 0 6px rgba(154, 154, 154, 0.3); background: var(--gray-color); } .media-more li .circle img { display: block; } .media-more li .circle svg { max-width: 16px; height: 16px; width: 100%; fill: var(--txt-body); } .media-more li .circle.plus-more { text-align: center; font-size: 0.75rem; font-weight: 500; display: flex; align-items: center; justify-content: center; line-height: 1; cursor: pointer; } .media-more li:hover { position: relative; z-index: 1; } .media-more.show li { opacity: 1; } /*Backgrounds*/ .bg-brand { background-color: var(--brand-color); color: var(--brand-color-inverse); } .bg-brand-light { background-color: rgba(var(--brand-color-alpha), 0.1); color: #000; } .bg-secondary { background-color: var(--secondary-color); color: var(--secondary-color-inverse); } .bg-third { background-color: var(--third-color); color: var(--third-color-inverse); } .bg-white { background-color: var(--bg-white); color: var(--bg-white-text); } .bg-black { background-color: var(--bg-black); color: var(--bg-black-text); } .bg-gray { background-color: var(--bg-gray); color: var(--txt-body); } .bg-gray-light { background-color: var(--bg-gray-light); color: var(--txt-body); } .bg-gray-lightest { background-color: var(--bg-gray-lightest); color: var(--txt-body); } .bg-gray-dark { background-color: var(--bg-gray-dark); color: var(--txt-body); } .bg-gray-darkest { background-color: var(--bg-gray-darkest); color: var(--txt-body); } .bg-beige { background-color: var(--bg-beige); color: var(--txt-black); } .bg-full { background-color: #000; background-image: radial-gradient(circle at 66% 34%, rgba(78, 198, 177, 0.3019607843) 0, rgba(78, 198, 177, 0.3019607843) 4%, rgba(78, 198, 177, 0.2509803922) 12%, rgba(78, 198, 177, 0.1607843137) 28%, rgba(78, 198, 177, 0) 55%), radial-gradient(circle at 30% 36%, rgba(43, 152, 205, 0.5019607843) 0, rgba(43, 152, 205, 0.4705882353) 9%, rgba(43, 152, 205, 0.4117647059) 16%, rgba(43, 152, 205, 0.1411764706), rgba(43, 152, 205, 0) 60%); } .bg-dots { --black: #0b1012; --accent-transparent: #8ac0ff44; --dot-size: 1px; --offset: 20px; --gap-size: 20px; background-image: linear-gradient(var(--black) 60%, transparent 100%), radial-gradient(var(--accent-transparent) var(--dot-size), transparent var(--dot-size)), radial-gradient(var(--accent-transparent) var(--dot-size), transparent var(--dot-size)); background-position: 0 0, 0 0, var(--offset) var(--offset); background-size: 100% 100%, var(--gap-size) var(--gap-size), var(--gap-size) var(--gap-size); background-color: var(--black); } .gradient-bg { background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); background-size: 400% 400%; animation: gradient 15s ease infinite; } @keyframes gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .aurora { background: radial-gradient(circle at 20% 20%, #ff00cc, transparent 40%), radial-gradient(circle at 80% 30%, #00f0ff, transparent 40%), radial-gradient(circle at 50% 80%, #ffea00, transparent 40%); background-color: #05010f; animation: aurora 12s linear infinite; background-size: 200% 200%; } @keyframes aurora { 0% { background-position: 0% 0%; } 50% { background-position: 100% 100%; } 100% { background-position: 0% 0%; } } .shimmer-text { font-size: 3rem; font-weight: 800; background: linear-gradient(90deg, #ff8a00, #e52e71, #9c1aff, #00c3ff, #ff8a00); background-size: 300%; -webkit-background-clip: text; color: transparent; animation: shimmer 6s linear infinite; } @keyframes shimmer { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } } .loader { width: 200px; height: 20px; background: repeating-linear-gradient(45deg, #23a6d5, #23a6d5 10px, #23d5ab 10px, #23d5ab 20px); background-size: 200% 200%; animation: stripes 2s linear infinite; } @keyframes stripes { 0% { background-position: 0 0; } 100% { background-position: 40px 40px; } } .wave { background: linear-gradient(270deg, #ff6ec4, #7873f5); background-size: 200% 200%; animation: wave 8s ease infinite; } @keyframes wave { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .glow { border: 5px solid; border-image-slice: 1; border-image-source: linear-gradient(90deg, #ff3ea5, #23a6d5, #ffea00, #ff3ea5); animation: borderglow 6s linear infinite; } @keyframes borderglow { 0% { border-image-source: linear-gradient(90deg, #ff3ea5, #23a6d5); } 50% { border-image-source: linear-gradient(90deg, #23a6d5, #ffea00); } 100% { border-image-source: linear-gradient(90deg, #ffea00, #ff3ea5); } } .pulse { position: relative; z-index: 1; } .pulse::before { content: ""; position: absolute; inset: -10px; background: radial-gradient(circle, #23a6d5, transparent 70%); border-radius: 50%; animation: pulse 2.5s infinite; z-index: -1; } @keyframes pulse { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } } /* SCSS Gradient */ .geo-location { display: none; } @media (min-width: 992px) { .geo-location { display: block; position: relative; padding-right: 1.5rem; } } .geo-location::before { content: ""; background: var(--border-color); width: 1px; height: 20px; position: absolute; right: 0; } .geo-location_inner { display: block; align-items: center; } .geo-location_trigger { text-align: inherit; background: none; border: none; display: flex; align-items: center; color: currentColor; padding: 0; width: 100%; } .geo-location_trigger .svg { margin-left: 6px; fill: var(--secondary-color); } .geo-location-selected { white-space: nowrap; max-width: 212px; overflow: hidden; text-overflow: ellipsis; display: block; font-weight: 400; } .geo-location_body { padding: 2rem; } .geo-location .btn-detect { display: flex; align-items: center; text-align: right; font-weight: 600; white-space: nowrap; } .geo-location .btn-detect .svg { fill: var(--secondary-color); margin-left: 8px; } .geo-location .or { margin: 1.5rem 0; } .geo-location_input { border: solid 1px var(--border-color); background-repeat: no-repeat; background-position: 13px center; background-color: var(--bg-input); color: var(--txt-body); height: 2.5rem; width: 100%; padding: 0 1rem; font-size: 0.85rem; line-height: 2.5rem; border-radius: 4px; outline: none; font-family: inherit; transition: 0.3s all ease-in-out; -webkit-appearance: none; -moz-appearance: none; appearance: none; margin-bottom: 0; background-size: 16px; } .geo-location_input:hover, .geo-location_input:focus { border-color: #000; } .geo-location-modal .btn-close { float: left; margin: 1.5rem; } .geo-location-mobile .button-geo-location { margin-bottom: 1.5rem; } .geo-location-mobile .geo-location_body { padding: 0; } .location-popup-width { max-width: 630px; padding: 0 !important; } .location-permission { text-align: center; background-image: url(images/retina/city-location.svg); background-repeat: no-repeat; background-position: bottom center; background-size: contain; padding-top: 30px; padding-bottom: 100px; } .location-permission_head { max-width: 450px; margin: 0 auto; padding: 0 3rem; } .location-permission_head h5, .location-permission_head .h5 { font-weight: 500; margin-bottom: 1rem; line-height: 1.5; } .location-permission_head p { font-size: 0.89rem; margin-bottom: 2rem; color: var(--txt-gray); } .location-permission_body .default { border: solid 1px var(--border-color); border-radius: 4px; padding: 1rem; padding-left: 3rem; display: inline-flex; align-items: center; color: var(--txt-gray); margin: 0 1rem; position: relative; min-width: 300px; font-weight: 400; } .location-permission_body .default:after { position: absolute; left: 1.2rem; top: calc(50% - 5px); content: ""; display: block; margin: 0; width: 10px; height: 10px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); } [dir=rtl] .location-permission_body .default:after { right: 1.2rem; transform: rotate(-135deg); } .location-permission_body .default .icn { max-width: 30px; margin-left: 1rem; } .location-permission_body .default .location-name { font-size: 0.85rem; } .location-permission_body .default .location-name strong { font-weight: 600; color: var(--txt-body); } .location-permission_body .default:hover { border-color: var(--brand-color); } .location-permission_body .or { max-width: none; margin: 1.5rem auto; font-weight: 400; } .location-permission_body .or:after, .location-permission_body .or:before { width: 45%; background: var(--border-color); } .location-permission_body .location-search { max-width: 300px; margin: 0 auto; } .location-permission_body .location-search input, .location-permission_body .location-search .custom-select { font-size: 0.8rem; background-image: url(images/retina/magni-gray.svg); background-repeat: no-repeat; background-position: 15px center; background-size: 20px; padding: 1.5rem; padding-right: 45px; } [dir=rtl] .location-permission_body .location-search input, [dir=rtl] .location-permission_body .location-search .custom-select { background-position: calc(100% - 10px) center; } .cat-accordion { width: 100%; font-weight: 400; font-size: 0.8rem; margin: 0; } .cat-accordion li { position: relative; list-style-type: none; border: none; } .cat-accordion .is-active { font-weight: 500; } .cat-accordion ul li a { position: relative; margin: 5px 0; padding: 0; display: inline-block; line-height: 1.7; } .cat-accordion ul li a:hover, .cat-accordion ul li a:focus, .cat-accordion ul li a:active { color: var(--brand-color); } .cat-accordion ul ul li a { display: block; position: relative; } .cat-accordion ul ul { display: none; } .cat-accordion li.active > ul { display: block; } .cat-accordion ul ul { margin-right: 10px; } .cat-accordion .acc-trigger { position: absolute; top: 9px; z-index: 1; left: 0; cursor: pointer; width: 10px; height: 10px; border-radius: 50%; text-align: center; } .cat-accordion .acc-trigger:before { background: #44596b; content: ""; height: 2px; position: absolute; left: calc(50% - 5px); top: calc(50% - 2px); transform: rotate(90deg); transition: all 0.2s ease-in-out; width: 10px; } .cat-accordion .acc-trigger:after { background: #44596b; content: ""; height: 2px; position: absolute; left: calc(50% - 5px); top: calc(50% - 2px); width: 10px; } .cat-accordion .acc-trigger.is-active:before { transform: rotate(0deg); } .cat-accordion .badge { float: right; color: #b2b2b2; font-size: 0.8em; } .quantity { display: flex; align-items: center; padding: 0; font-size: 0.7rem; } .quantity .decrease, .quantity .increase { background-color: var(--bg-white); color: var(--bg-white-text); color: var(--txt-gray); border: solid 1px var(--border-dark); border-radius: 50%; padding: 0; margin: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; width: 26px; height: 26px; min-width: 26px; aspect-ratio: 1/1; } .quantity .decrease:hover, .quantity .decrease:focus, .quantity .decrease:active, .quantity .increase:hover, .quantity .increase:focus, .quantity .increase:active { background-color: var(--bg-form); color: var(--bg-form-inverse); border-color: currentColor; } .quantity .decrease:focus, .quantity .increase:focus { color: var(--txt-white); box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); } .quantity .decrease:active, .quantity .increase:active { box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); } .quantity .decrease.disabled, .quantity .increase.disabled { color: var(--txt-gray); pointer-events: none; background-color: transparent; opacity: 0.5; } .quantity .decrease .svg, .quantity .increase .svg { width: 10px; height: 10px; } .quantity .qty-input { background-color: transparent; color: currentColor; border: none; text-align: center; padding: 0 8px; width: 100%; height: 100%; max-width: 50px; font-size: 0.85rem; } .quantity-sm { max-width: 100px; height: 30px; } .quantity-sm .svg { width: 10px; height: 10px; } .quantity-2 { max-width: 90px; padding: 0; border: none; } .quantity-2 span { width: 24px; height: 24px; flex: 0 0 24px; max-width: 24px; background-color: var(--bg-gray); border-radius: 4px; } .filter-directory a { color: inherit; } .filter-directory .filter-directory_bar { display: flex; flex-flow: row wrap; gap: 0.5rem; align-items: center; border-bottom: solid 1px var(--border-color); padding: 0 0 1rem 0; margin-bottom: 1rem; } .filter-directory .filter-directory_bar .filter-directory_search_input { margin-left: 1rem; flex: 0 0 200px; max-width: 200px; } @media (max-width: 767.98px) { .filter-directory .filter-directory_bar .filter-directory_search_input { margin: 0; margin-bottom: 1rem; flex: auto; max-width: none; } } .filter-directory .filter-directory_bar .filter-directory_indices { display: flex; gap: 5px; flex: 1; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; } @media (max-width: 767.98px) { .filter-directory .filter-directory_bar .filter-directory_indices { justify-content: flex-start; width: 100%; } } .filter-directory .filter-directory_bar .filter-directory_indices li { font-size: 0.8rem; padding: 0.4rem; text-transform: uppercase; font-weight: 600; cursor: pointer; } .filter-directory .filter-directory_disabled { opacity: 0.2; } .filter-directory_list { padding: 0; height: 465px; display: flex; flex-direction: column; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; white-space: nowrap; overflow-y: auto; gap: 20px; } .filter-directory_list li { font-size: 0.8rem; } .filter-directory_list .filter-directory_list_title { text-transform: uppercase; font-weight: 600; font-size: 1rem; margin-bottom: 0.8rem; } .filter-directory_list .filter-directory_count { opacity: 0.66; font-size: 0.7rem; } .filter-left { display: grid; grid-template-columns: 280px 1fr; grid-gap: 6rem; } @media (max-width: 991.98px) { .filter-left { display: block; } } .filter-left .collection-sidebar { background-color: var(--bg-white); color: var(--bg-white-text); flex-grow: 0; flex-basis: 0; display: block; } @media (max-width: 991.98px) { .filter-left .collection-sidebar { border-radius: 0; position: fixed; top: 0; right: -280px; bottom: 0; overflow-y: auto; backface-visibility: hidden; width: 280px; transition: left 0.3s ease, right 0.3s ease; } .collection-sidebar--on .filter-left .collection-sidebar { padding: 1rem; right: 0; visibility: visible; box-shadow: 0px 0px 0 1500px rgba(0, 0, 0, 0.2); z-index: 1030; } } .filter-left .sidebar-widget-body { transition: none !important; } .aside-head { display: flex; justify-content: space-between; } .aside-head .title { font-size: 1.2rem; text-transform: uppercase; } .sidebar-widget { margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: solid 1px var(--border-color); position: relative; } .sidebar-widget:after { background-color: var(--brand-color); width: 30px; height: 2px; position: absolute; bottom: -1px; right: 0; } .sidebar-widget-head { font-size: 1rem; /*text-transform: uppercase;*/ margin: 0; color: var(--txt-body); font-weight: 600; display: flex; justify-content: space-between; align-items: center; padding-right: 20px; position: relative; cursor: pointer; } .sidebar-widget-head:before { content: ""; position: absolute; top: calc(50% - 6px); right: 0; display: inline-block; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; width: 8px; height: 8px; transform: rotate(45deg); transform-origin: center; transition: all 0.5s ease; } .sidebar-widget-head[aria-expanded=true]:before { top: calc(50% - 1px); transform: rotate(-134deg); } .sidebar-widget-body { padding: 1rem 0; } .sidebar-widget-foot { padding: 1rem 0; } .sidebar-widget .color-dot { box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px; border-radius: 50%; width: 10px; height: 10px; line-height: 10px; display: inline-flex; align-items: center; justify-content: center; margin-left: 5px; } .selected-filters { display: flex; flex-wrap: wrap; align-items: center; margin: 0; grid-gap: 0.5rem; } .selected-filters-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } .selected-filters .chip { white-space: nowrap; display: flex; align-items: center; border-radius: 2px; border: solid 1px var(--border-dark); padding: 0.5rem; margin: 0; font-size: 0.75rem; color: var(--txt-body); font-weight: 400; } .selected-filters .chip.more { font-weight: 600; padding-left: 14px; } .selected-filters .chip .remove { display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; padding: 0; margin: 0; border-radius: 50%; margin-right: 5px; font-size: 10px; color: inherit; } .selected-filters .chip .remove:hover, .selected-filters .chip .remove:focus, .selected-filters .chip .remove:active { background-color: none; } .selected-filters .btn-clear-all { background-color: #000; color: var(--txt-white); padding: 4px 8px; border: none; font-size: inherit; } .list-options { display: flex; flex-direction: column; gap: 0.5rem; } .list-options-item { padding: 0.25rem 0; } .list-options-color-checkbox { position: relative; } .list-options-color-checkbox .color-checkbox { opacity: 0; position: absolute; } .list-options-color-checkbox .color-dot { box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px; border-radius: 50%; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; line-height: 20px; margin-right: 2px; } #facebox .content.faceboxWidth.gallery-media-popup { width: 960px; padding: 0; overflow: hidden; border-radius: 8px; } @media (max-width: 575.98px) { #facebox .content.faceboxWidth.gallery-media-popup { width: 100%; } } .posted-reviews { display: flex; } @media (max-width: 575.98px) { .posted-reviews { display: block; } } .posted-reviews__media { max-width: 60%; flex: 0 0 60%; position: relative; background-color: #f0f0f0; padding: 2rem; } .posted-reviews__media img { margin: 0 auto; } @media (max-width: 575.98px) { .posted-reviews__media { max-width: 100%; } } .posted-reviews__from { display: block; font-size: 0.875rem; padding-bottom: 15px; color: var(--txt-gray); } .posted-reviews__content { max-width: 40%; flex: 0 0 40%; padding: 2rem; } @media (max-width: 575.98px) { .posted-reviews__content { max-width: 100%; } } .posted-reviews__content .yes-no ul { justify-content: flex-start; } .posted-reviews__content p { font-size: 0.875rem; font-weight: 400; line-height: 1.7; } .posted-reviews .review-media-thumb { padding-top: 1rem; } .posted-reviews .thumb-wrap { margin: 5px; border: solid 1px var(--border-color); } .posted-reviews .thumb-wrap img { cursor: pointer; } .posted-reviews .slick-current .thumb-wrap { border-color: var(--brand-color); } .media-arrows { position: absolute; right: 15px; top: 40%; left: 15px; transform: translateY(-50%); -webkit-transform: translateY(-50%); display: flex; justify-content: space-between; align-items: center; } .media-arrows a { width: 42px; height: 42px; border-radius: 50%; display: block; background-color: var(--bg-white); color: var(--bg-white-text); position: relative; border: 1px solid currentColor; text-indent: -9999px; font-size: 0px; } .media-arrows a:after { content: ""; position: absolute; right: 50%; top: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; } .media-arrows__left { transform: rotate(45deg); } .media-arrows__right { transform: rotate(-135deg); } .badges { position: absolute; top: 10px; z-index: 9; font-size: 0.8rem; } .badges .svg { position: absolute; top: 0; right: 0; left: 0; fill: var(--brand-color); width: 100%; height: 100%; } .badges .text { position: absolute; top: auto; text-transform: uppercase; font-weight: 600; text-align: center; color: var(--brand-color-inverse); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .badges-1 { background-color: var(--brand-color); color: var(--brand-color-inverse); border-radius: 1px; padding: 4px 8px; } .badges-1 .text { position: static; } .badges-2 { top: 3px; left: 3px; width: 70px; height: 70px; } .badges-2 .text { font-weight: 600; transform: rotate(45deg); position: absolute; right: 20px; left: 0; top: 10px; line-height: 30px; text-transform: uppercase; width: 50px; } .badges-2.badges-left { transform: rotate(-90deg); } .badges-3 { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; } .badges-4 { width: 60px; height: 60px; } .badges-4 .text { transform: rotate(45deg); right: 10px; left: 0; line-height: 30px; width: 55px; top: 8px; margin-right: 0; } .badges-4.badges-left { transform: rotate(-90deg); } .badges-5 { top: 1rem; left: 1rem; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; } .badges-5 .text { line-height: 1; font-weight: 600; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 45px; } .badges-left { right: 10px; top: 10px; } [direction=rtl] .badges-4 .text { right: -10px; top: 6px; } [direction=rtl] .badges-4.badges-left { transform: none; } [direction=rtl] .badges-2 .text { right: 0px; top: 10px; } .badge { text-align: center; white-space: nowrap; display: inline-block; vertical-align: top; border-radius: 2px; padding: 1px 3px; font-size: 11px; line-height: 1.5; font-weight: 600; } .badge-default { background-color: var(--bg-white); color: var(--bg-white-text); border: solid 1px var(--border-color); } .badge-brand { background-color: var(--brand-color); color: var(--brand-color-inverse); } .badge-primary { background-color: var(--brand-color); color: var(--brand-color-inverse); } .badge-success { background-color: rgba(29, 201, 183, 0.1); color: #1dc9b7; } .badge-info { background-color: rgba(85, 120, 235, 0.1); color: #5578eb; } .badge-danger { background-color: rgba(253, 57, 122, 0.1); color: #fd397a; } .badge-warning { background-color: rgba(255, 184, 34, 0.1); color: #ffb822; } * { scrollbar-color: #9aa0a6 transparent; scrollbar-width: thin; /* width */ } *::-webkit-scrollbar { width: 6px; height: 6px; } * { /* Track */ } *::-webkit-scrollbar-track { background: 0 0; } * { /* Handle */ } *::-webkit-scrollbar-thumb { background: rgb(180, 180, 180); background-clip: padding-box; border-radius: 10px; border: 1.5px solid transparent; border-radius: 3px; } *::-webkit-scrollbar-thumb:active { background-color: #61686e; } * { /* Handle on hover */ } *::-webkit-scrollbar-thumb:hover { background-color: #798189; } .scroll-y { overflow-y: auto; } .scroll-x { overflow-x: auto; } .file__upload { position: relative; display: inline-flex; align-items: center; color: var(--txt-gray); border: solid 1px var(--border-color); border-radius: 4px; padding: 0.45rem 1rem; font-size: 0.8rem; } .file__upload:hover, .file__upload:focus, .file__upload:active { cursor: pointer; color: var(--primary-color); } .file__upload input[type=file], .file__upload [type=file].custom-select { position: absolute; border: none; opacity: 0; padding: 0; cursor: pointer; } .file__upload span { font-size: 0.875rem; color: currentColor; } .file__upload span svg { fill: currentColor; } .file__upload span.upload-icon { width: 1.5rem; height: 1.5rem; display: flex; justify-content: center; align-items: center; margin-left: 0.25rem; } .uploaded-media { margin-top: 1rem; } .uploaded-media ul { display: flex; flex-wrap: wrap; gap: 1rem; } .uploaded-media ul li { position: relative; } .uploaded-media .uploaded-file { background-color: var(--bg-white); color: var(--bg-white-text); display: flex; align-items: center; border: solid 1px var(--border-color); border-radius: 4px; padding: 5px; position: relative; } .uploaded-media .uploaded-file__thumb { aspect-ratio: 1/1; } .uploaded-media .uploaded-file__thumb img { width: 50px; height: 50px; max-width: none; -o-object-fit: cover; object-fit: cover; } .uploaded-media .file-remove { position: absolute; top: 0; left: 0; } .uploaded-media .close-layer { box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; background-color: var(--bg-white); color: var(--bg-white-text); border-radius: 50%; left: -10px; top: -10px; } .all-review-media { padding-top: 0; margin-top: 2rem; } .all-review-media .review-media-list { display: flex; flex-wrap: wrap; margin: 0 -0.35rem; } .all-review-media .review-media-list li { margin: 0 0.35rem 1rem 0.35rem; flex: 0 0 60px; max-width: 60px; position: relative; z-index: 0; border: none; } .all-review-media .review-media-list li .review-media { display: block; position: relative; border: solid 1px var(--border-color); width: 60px; height: 60px; } .all-review-media .review-media-list li .review-media:after { content: ""; display: block; padding-bottom: 100%; background-color: #f0f0f0; } .all-review-media .review-media-list li .review-media img, .all-review-media .review-media-list li .review-media video, .all-review-media .review-media-list li .review-media iframe, .all-review-media .review-media-list li .review-media .blog-detail-left .posted-media .post__pic .media-wrapper img, .blog-detail-left .posted-media .post__pic .media-wrapper .all-review-media .review-media-list li .review-media img { position: absolute; right: 0; top: 0; bottom: 0; left: 0; margin: auto; } .all-review-media .review-media-list li .review-media iframe, .all-review-media .review-media-list li .review-media .blog-detail-left .posted-media .post__pic .media-wrapper img, .blog-detail-left .posted-media .post__pic .media-wrapper .all-review-media .review-media-list li .review-media img { width: 100%; height: 100%; } .all-review-media .review-media-list li.more-media .review-media:before { content: attr(data-count); position: absolute; z-index: 2; right: 0; top: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.5); color: var(--txt-white); display: flex; justify-content: center; align-items: center; font-weight: 800; font-size: 1.125rem; } .more-sellers { display: flex; flex-direction: column; padding: 0 1.5rem; padding-bottom: 1.5rem; gap: 1rem; } .more-sellers-item { background-color: transparent; padding: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; } .more-sellers-item + .more-sellers-item { border-top: solid 1px var(--border-color); padding-top: 1rem; margin-top: 1rem; } .more-sellers-item.is-active { background-color: var(--bg-gray); padding: 1rem; } .more-sellers-head { font-size: 0.95rem; font-weight: 600; } .more-sellers .sold-price { font-weight: 500; font-size: 1.125rem; } .more-sellers .sold-by { font-size: 0.8rem; display: flex; margin-bottom: 0; color: var(--txt-gray); } .more-sellers .sold-by-txt { padding-left: 10px; color: var(--txt-gray); } .more-sellers .sold-by-name { text-decoration: underline; } .more-sellers .shop-wrap { margin-bottom: 0.6rem; } .more-sellers .product-ratings { color: var(--brand-color); } .more-sellers .more-link { border: none; margin: 0 auto; } .customer-reviews { display: flex; flex-direction: column; } .customer-reviews-head { padding: 1rem 0; margin-bottom: 3rem; border-bottom: solid 1px var(--border-color); display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-flow: row wrap; } .customer-reviews .title { font-size: 2rem; } @media (min-width: 992px) { .rating-layout { display: grid; grid-gap: 8rem; grid-template-columns: minmax(auto, 24%) 1fr; } } .rating-layout-start .sticky-md-top { top: 180px; } .rating-layout-end { position: relative; } .average-rating { display: flex; flex-direction: column; } .average-rating .rate { font-size: 2.6125rem; line-height: 1; font-weight: 500; } .average-rating .totals { font-weight: 400; } .rating-block { margin: 2rem 0; } .rating-block:first-child { margin-top: 0; } .rating-block .title { font-size: 1.5rem; font-weight: 600; } .rating-block .title-sub { font-size: 1rem; } .rating-block p { color: var(--txt-gray); font-size: 0.8rem; } .rating-block .product-ratings .icn { width: 2.5rem; height: 2.5rem; } .rating-block .product-ratings .rate { font-size: 1rem; } .rating-block .text-info { font-size: 12px; } .progress-block { margin-top: 1rem; } .progress-block-item { display: flex; align-items: center; font-size: 12px; color: var(--txt-body); margin: 0.5rem 0; } .progress-block .star { display: flex; align-items: center; justify-content: space-between; width: 20px; text-align: right; white-space: nowrap; height: 10px; color: var(--txt-body); } .progress-block .star .txt { width: 10px; display: inline-block; } .progress-block .star .svg { fill: var(--txt-gray); } .progress-block .progress { border-radius: 0; border: none; height: 6px; width: 100%; background-color: var(--bg-gray); color: #000; margin: 0 10px; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .progress-block .progress::-moz-progress-bar { background: lightcolor; border: none; } .progress-block .progress::-webkit-progress-value { background-color: var(--secondary-color); border: none; } .progress-block .progress::-webkit-progress-bar { border: none; background-color: var(--bg-gray); } .progress-block .count { min-width: 30px; text-align: left; white-space: nowrap; } .rating-by-category { font-size: 12px; color: var(--txt-body); } .rating-by-category-item { display: flex; align-items: center; font-size: 12px; color: var(--txt-body); margin: 1rem 0; } .rating-by-category .label { font-weight: 600; margin: 0; padding: 0; color: var(--txt-body); } .rating-by-category .value { display: flex; margin-right: auto; } .rating-by-category .out-of { line-height: 1; margin-right: 5px; white-space: nowrap; min-width: 40px; text-align: left; font-size: 0.8rem; } .star-inline { display: inline-flex; align-items: center; } .star-inline-item { margin: 0 2px; } .review-cta p { margin-bottom: 1.5rem; } .user-reviews-item { padding: 1rem 0; margin-bottom: 2rem; border-bottom: solid 1px var(--border-color); } .user-reviews-item:last-child { border-bottom: none; } .user-reviews-foot { padding-top: 1rem; display: flex; justify-content: space-between; flex-direction: column; } @media (min-width: 992px) { .user-reviews-foot { flex-direction: row; } } .user-reviews .reviews-by { display: flex; align-items: center; font-size: 0.8rem; grid-gap: 6px; } .user-reviews .more-reviews { background-color: var(--bg-gray); color: var(--txt-body); border-radius: 4px; font-size: 0.9rem; padding: 1rem 2rem; display: block; text-align: center; } .user-reviews .more-reviews:hover { background-color: var(--bg-black); color: var(--bg-black-text); text-decoration: none; } .sort-by { display: flex; align-items: center; } .sort-by-btn { width: 100%; max-width: 200px; } .all-reviews-images .review-images { display: flex; flex-flow: row wrap; gap: 0.5rem; } .all-reviews-images .review-images .image { background: var(--bg-placeholder); background-color: var(--bg-placeholder); background-image: url(images/retina/image.svg); background-position: center; background-repeat: no-repeat; background-size: 50% 50%; border-radius: 4px; position: relative; max-width: 56px; flex: 0 0 56px; width: 100%; aspect-ratio: 1; overflow: hidden; } .all-reviews-images .review-images .image img { aspect-ratio: 1; } .all-reviews-images .review-images .image.txt-over { background: rgba(0, 0, 0, 0.5); color: var(--txt-white); width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-weight: 600; } .rated-by { margin-bottom: 2rem; display: flex; gap: 1.8rem; flex-flow: row wrap; } .rated-by-item { display: flex; align-items: center; gap: 0.5rem; padding: 0; font-size: 0.8rem; color: var(--txt-gray); border-left: solid 1px var(--border-color); } .rated-by-item:last-child { border: 0; } .rated-by .product-ratings { margin: 0; } .rated-by .rated-by-label { padding-left: 1rem; } .rated-by .rate { font-weight: 600; } .yes-no { display: flex; align-items: center; font-size: 0.8rem; } .yes-no-item:first-child { margin-right: 0; } .yes-no-item .btn { font-weight: 600; font-size: 0.8rem; } .yes-no .btn-thumb { background-color: transparent; color: var(--txt-gray); box-shadow: none; height: auto; line-height: 1; } .yes-no .btn-thumb .counts { color: var(--txt-gray); font-weight: 400; } .yes-no .btn-thumb:hover, .yes-no .btn-thumb:focus, .yes-no .btn-thumb:active { color: var(--brand-color); } .stores { display: flex; flex-direction: column; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .stores-link { align-items: center; display: flex; flex-direction: row; flex-wrap: wrap; gap: 1rem; padding: 1rem; background-color: transparent; position: relative; overflow: hidden; } .stores-link::before { content: ""; background: var(--bg-gray-light); position: absolute; z-index: -1; top: 0; width: 100%; height: 100%; right: 0; left: 0; opacity: 0; transition: all 0.2s cubic-bezier(0.2, 0.91, 0.85, 0.96) 0s; transform: scale(0.75); backface-visibility: hidden; pointer-events: none; } .stores-link:is(:hover, :focus, :active, .active)::before { opacity: 1; transform: scale(1); } .stores-link:before { z-index: -1; } .stores-photo { background-color: var(--bg-placeholder); background-image: url(images/retina/image.svg); background-position: center; background-repeat: no-repeat; background-size: 50% 50%; aspect-ratio: 1; border: solid 1px var(--border-color); border-radius: 4px; display: block; min-width: 100px; } .stores-photo img { max-width: 100px; } .stores-detail { font-weight: 500; } .stores-location { font-size: 0.85rem; color: var(--txt-gray-light); } @media (min-width: 992px) { .modal-map { padding: 0; } } .modal-map .modal-header { display: none !important; } .modal-map .modal-body { padding: 0; } @media (min-width: 992px) { .modal-map .modal-content { border-radius: 10px; } } .btn-list { background-color: #000; border: none; box-shadow: none; outline: solid 8px rgba(0, 0, 0, 0.2); color: #fff; border-radius: 60px; padding: 10px 20px; font-size: 0.85rem; display: flex; gap: 8px; align-items: center; position: absolute; z-index: 1; bottom: 2rem; right: 50%; transform: translateX(-50%); margin: 0 auto; } .interactive-stores { height: 100%; position: relative; padding: 0; } .interactive-stores-map { order: 2; position: relative; height: 100%; overflow: hidden; } @media (max-width: 767.98px) { .interactive-stores-map { height: 50%; } } @media (min-width: 992px) { .interactive-stores-map { border-radius: 10px; } } .interactive-stores-map .canvas-map { position: absolute; inset: 0; } .interactive-stores-map .canvas-map iframe, .interactive-stores-map .canvas-map .blog-detail-left .posted-media .post__pic .media-wrapper img, .blog-detail-left .posted-media .post__pic .media-wrapper .interactive-stores-map .canvas-map img { width: 100%; height: 100%; } .interactive-stores-map .map-loader { position: absolute; left: 0; top: 0; bottom: 0; right: 0; z-index: 1; background-color: rgba(0, 0, 0, 0.65); display: none; justify-content: center; align-items: center; } .interactive-stores-map .map-loader.is-loading { display: flex; } .interactive-stores-list { background-color: var(--bg-gray-lightest); color: var(--txt-body); box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px; } @media (max-width: 767.98px) { .interactive-stores-list { max-height: 50%; overflow-y: auto; transform: translateY(-20px); padding-top: 1.5rem; border-radius: 10px 10px 0 0; } } @media (min-width: 992px) { .interactive-stores-list { border-radius: 0; position: absolute; top: 0; right: 0; bottom: 0; width: 100%; max-width: 400px; overflow: hidden; overflow-y: auto; display: block; } } .interactive-stores-list .product-listing { display: flex; flex-direction: column; gap: 10px; padding: 1rem; } .interactive-stores-list .product-listing-item { padding: 1rem; transition: all 0.3s ease; background-color: transparent; position: relative; overflow: hidden; } .interactive-stores-list .product-listing-item::before { content: ""; background: var(--bg-gray-light); position: absolute; z-index: -1; top: 0; width: 100%; height: 100%; right: 0; left: 0; opacity: 0; transition: all 0.2s cubic-bezier(0.2, 0.91, 0.85, 0.96) 0s; transform: scale(0.75); backface-visibility: hidden; pointer-events: none; } .interactive-stores-list .product-listing-item:is(:hover, :focus, :active, .active)::before { opacity: 1; transform: scale(1); } .interactive-stores-list .product-listing-item { border-radius: 4px; border: solid 1px var(--border-color); border-radius: 4px; box-shadow: rgba(0, 0, 0, 0.12) 0px 6px 16px; background-color: var(--bg-white); color: var(--bg-white-text); border-radius: 10px; padding: 1.5rem; } .interactive-stores-list .products { flex-direction: row; } .interactive-stores-list .products-img { max-width: 80px; width: 80px; min-width: 0; } .interactive-stores-list .collection-pager { position: sticky; bottom: 0; background-color: var(--bg-white); color: var(--bg-white-text); padding: 1rem; margin-top: 0; } .interactive-stores-list .pagination li a { width: 2rem; height: 2rem; line-height: 2rem; } .interactive-stores-list .pagination li a .svg { width: 14px; height: 14px; } .interactive-stores-list .sorting-select { line-height: 2rem; height: 2rem; } @media (min-width: 768px) { .map-filters { display: flex; } } .map-filters { padding: 0.5rem 0; margin-bottom: 1.125rem; border-top: solid 1px var(--border-color); border-bottom: solid 1px var(--border-color); } .map-filters__label { padding: 0.875rem 0.5rem 0 0; color: #2e384d; font-size: 15px; white-space: nowrap; } @media (max-width: 575.98px) { .map-filters__label { padding: 0 0 0.75rem 0; display: block; } } .map-filters__col { padding-right: 1rem; } @media (max-width: 575.98px) { .map-filters__col { padding: 0 0.5rem 0.875rem 0.5rem; flex: 0 0 50%; max-width: 50%; } } .map-tag-label { padding: 0.5rem 1.25rem 0 0; color: #2e384d; font-size: 15px; white-space: nowrap; } @media (max-width: 991.98px) { .map-tag-label { padding: 0 0 1rem 0; display: block; } } .filter-tag { position: relative; border: solid 1px var(--border-color); border-radius: 50px; font-size: 0.8rem; color: #2e384d; padding: 0.5rem 1.5rem; display: inline-flex; align-items: center; } @media (max-width: 575.98px) { .filter-tag { font-size: 12px; padding: 0.35rem 0.5rem 0.35rem 1rem; } } .filter-tag-close { position: relative; width: 20px; height: 20px; flex: 0 0 20px; transform: rotate(-45deg); margin-right: 0.5rem; } .filter-tag-close:hover, .filter-tag-close:focus, .filter-tag-close:active { color: #ef4546; } .filter-tag-close:after, .filter-tag-close:before { content: ""; width: 12px; height: 2px; background-color: currentColor; position: absolute; right: 50%; top: 50%; transform: translate(-50%, -50%); } .filter-tag-close:before { width: 2px; height: 12px; } .dropdown--mapfilter .dropdown-toggle { font-size: 0.875rem; text-transform: uppercase; font-weight: 800; background-color: var(--bg-white); color: var(--bg-white-text); padding: 1rem 1.875rem; position: relative; color: #161616; display: inline-flex; align-items: center; } @media (max-width: 575.98px) { .dropdown--mapfilter .dropdown-toggle { border: solid 1px var(--border-color); padding: 0.75rem 1.25rem; display: flex; justify-content: space-between; } } .dropdown--mapfilter .dropdown-toggle:hover { background-color: #f6f6f6; } .dropdown--mapfilter .dropdown-toggle:after { content: ""; display: block; width: 8px; height: 8px; border: none; border-right: 2px solid #333; border-bottom: 2px solid #333; transform: rotate(45deg); margin-right: 0.5rem; margin-top: -4px; } .dropdown--mapfilter.show .dropdown-toggle { background-color: #f6f6f6; } .dropdown--mapfilter.show .dropdown-toggle:after { border: none; border-left: 2px solid currentColor; border-top: 2px solid currentColor; margin-top: 1px; } .dropdown--mapfilter .dropdown-menu { border-radius: 0; } .dropdown--mapfilter .dropdown-menu .nav-block { overflow: auto; max-height: 200px; overflow-y: auto; display: block; } .map-drag-input-wrapper label { background: rgba(255, 255, 255, 0.9); padding: 10px; border-radius: 4px; box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px; } .float-price { padding: 0.5rem 1rem; background-color: var(--bg-white); color: var(--bg-white-text); color: var(--txt-body); font-size: 0.8rem; box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; border-radius: 30px; font-weight: 600; } .float-price:hover { background-color: var(--brand-color); color: var(--brand-color-inverse); } .seller-map { display: flex; flex-direction: column; gap: 0.5rem; position: relative; padding: 1rem; min-width: 280px; } .seller-map:after { content: ""; background-image: linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12); position: absolute; top: 0; left: 0; right: 0; z-index: 0; height: 80px; pointer-events: none; border-radius: 6px 6px 0 0; } .seller-map-thumbnail { position: relative; z-index: 1; background-color: transparent; box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15); border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; max-width: 100px; aspect-ratio: 1/1; background-color: var(--bg-placeholder); background-image: url(images/retina/image.svg); background-position: center; background-repeat: no-repeat; background-size: 50% 50%; background-color: #636363; } .seller-map-data { position: relative; z-index: 1; } .seller-map-title { font-size: 1rem; font-weight: 600; } .gmap-list { background-color: var(--bg-gray-lightest); color: var(--txt-body); padding: 0.5rem 1rem; max-width: 300px; display: flex; flex-direction: column; gap: 0; } .gmap-list-item { padding: 0.5rem 0; } .gmap-list-item + .gmap-list-item { border-top: solid 1px var(--border-color); } .gmap-list .title { font-weight: 400 !important; } .gmap-list .price { padding-top: 10px; font-weight: 600; color: var(--txt-body); } /*Share*/ .share-this { position: relative; display: flex; align-items: center; justify-content: space-evenly; width: 100%; max-width: 150px; height: 35px; margin: 10px 0; background-color: var(--bg-white); color: var(--bg-white-text); border: solid 1px var(--border-color); border-radius: 50px; /*-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);*/ transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); overflow: hidden; } .share-this:before, .share-this:after { position: absolute; top: 0; display: flex; align-items: center; width: 50%; height: 100%; transition: 0.25s linear; z-index: 1; } .share-this:before { content: ""; right: 0; justify-content: flex-end; background-color: var(--bg-white); color: var(--bg-white-text); } .share-this:after { content: ""; left: 0; justify-content: flex-start; background-color: var(--bg-white); color: var(--bg-white-text); } .share-this:hover { border-color: var(--secondary-color); background-color: var(--secondary-color); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); } .share-this:hover span { opacity: 0; z-index: -3; } .share-this:hover:before { opacity: 0.5; transform: translateY(-100%); } .share-this:hover:after { opacity: 0.5; transform: translateY(100%); } .share-this span { position: absolute; top: 0; right: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--txt-body); font-size: 1em; font-weight: 600; opacity: 1; transition: opacity 0.25s; z-index: 2; line-height: 1; } .share-this .social-link { position: relative; display: flex; align-items: center; justify-content: center; width: auto; height: 100%; text-decoration: none; transition: 0.25s; padding: 0; flex: 1; cursor: pointer; } .share-this .social-link i { text-shadow: 1px 1px rgba(70, 98, 127, 0.7); transform: scale(1); } .share-this .social-link:hover { background-color: rgba(245, 245, 245, 0.1); } .share-this .social-link:hover i { animation: bounce 0.4s linear; } .share-this .svg { width: 16px; height: 16px; fill: #fff; } .share-this .share .svg { width: 18px; height: 18px; margin-left: 8px; fill: var(--txt-body); } @keyframes bounce { 40% { transform: scale(1.4); } 60% { transform: scale(0.8); } 80% { transform: scale(1.2); } 100% { transform: scale(1); } } .cart-summary { font-size: 0.85rem; } .cart-summary-item { padding: 0.5rem 0; display: flex; align-items: center; justify-content: space-between; } .cart-summary-item .label { color: currentColor; padding: 0; } .cart-summary-item .value { font-weight: 600; text-align: left; margin-right: auto; } .cart-summary-item.highlighted { font-size: 1rem; color: var(--txt-body); border-top: solid 1px var(--border-color); padding-top: 1rem; margin-top: 1rem; } .cart-summary-item.text-success { color: #1dc9b7; } .list-cart { font-size: 0.8rem; background-color: var(--bg-white); color: var(--bg-white-text); } .list-cart-item { background-color: var(--bg-white); color: var(--bg-white-text); border-radius: 0; display: flex; flex-direction: column; justify-content: space-between; } .list-cart-item + .list-cart-item { padding-top: 1.5rem; padding-bottom: 1.5rem; /* border-top: $border;*/ } .list-cart-item:first-child { padding-bottom: 1.5rem; } @media (max-width: 767.98px) { .list-cart-item.list-saved-later { flex-direction: row; } } .list-cart-item.minus-space { padding: 0; border: none; } .list-cart-double { flex-direction: row; flex-wrap: wrap; } .list-cart-double li { flex: 0 0 50%; max-width: 50%; padding: 1rem; border: none; border-top: solid 1px var(--border-color); } .list-cart-double li:nth-child(1), .list-cart-double li:nth-child(2) { border-top: none; } .list-cart-double li:last-child { flex: 1; max-width: none; } .list-cart-triple { display: flex; flex-flow: row wrap; gap: 1rem; } .list-cart-triple > li { padding: 0 !important; margin: 0 !important; } @media (min-width: 992px) { .list-cart-triple > li { flex: 0 0 calc(33.3333% - 1rem); max-width: calc(33.3333% - 1rem); } } .list-cart-return li { flex-direction: column; } .list-cart-return li:last-child { border-bottom: none; } .list-cart-return li .product-profile-thumbnail img { max-width: 70px; } .list-cart-return li .product-quantity { margin: 0; margin-top: 1rem; } .list-cart-return li .product-price { flex: none; max-width: none; margin: 0; margin-bottom: 2rem; } .list-cart-order .product-thumbnail { max-width: 48px; flex: 0 0 48px; } .list-cart-checkout { border: solid 1px var(--border-color); border-radius: 4px; padding: 0; } .list-cart-checkout .list-cart-item { border-bottom: solid 1px var(--border-color); border-radius: 4px; padding: 1rem; margin-bottom: 0; } .list-cart-checkout .list-cart-item:last-child { border-bottom: none; } .list-cart-grouping { background-color: var(--bg-gray); color: var(--txt-body); border: none; border-radius: 4px; padding: 1rem; } .cell_qty { padding: 0 10px; flex: 0 0 100px; max-width: 100px; margin-right: auto; } @media (max-width: 575.98px) { .cell_qty { padding: 10px 0; flex: 1; max-width: inherit; margin-right: 0; } } .cell_price { padding: 0 10px; flex: 0 0 100px; max-width: 100px; margin-right: auto; } @media (max-width: 575.98px) { .cell_price { padding: 10px 0; flex: 1; max-width: inherit; margin-right: 0; } } .cell_action { text-align: left; margin-right: auto; } @media (max-width: 575.98px) { .cell_action { margin-right: 0; flex: 1; max-width: inherit; text-align: inherit; } } .cell:last-child { padding-left: 0; } .product-quantity { margin: 0 0; } .product-quantity .remove { margin: 0.5rem 0; display: inline-block; } .product-quantity .side-price { font-weight: 500; font-size: 0.8rem; margin-right: 10px; } .product-quantity-price { display: flex; align-items: center; } .product-price { text-align: left; } @media (max-width: 575.98px) { .product-price { text-align: inherit; } } @media (max-width: 767.98px) { .product-action { position: absolute; top: 1rem; left: 1rem; } } .product-action .list-actions { /* padding-top: 8px;*/ justify-content: flex-end; } .btn-saveforlater { border: none; background: none; } .btn-saveforlater .svg { width: 26px; height: 26px; fill: var(--brand-color); } .list-add { padding-top: 8px; display: flex; align-items: center; color: var(--txt-gray); } .list-add li { margin-left: 10px; } .list-add li:last-child { margin: 0; } .list-add .svg { width: 1rem; height: 1rem; fill: currentColor; } .list-add .active .svg { width: 1rem; height: 1rem; fill: var(--brand-color); } .count-items { color: var(--txt-gray); font-size: 0.8rem; } .list-save-later { display: flex; flex-flow: row wrap; gap: 2rem; } .list-save-later-item { padding: 0 !important; margin: 0 !important; } @media (min-width: 992px) { .list-save-later-item { flex: 0 0 calc(50% - 2rem); max-width: calc(50% - 2rem); } } .block-cart { display: flex; flex-direction: row; gap: 1rem; } @media (min-width: 992px) { .block-cart { gap: 2rem; } } .block-cart-img { margin: 0 auto; text-align: center; position: relative; flex: 0 0 80px; max-width: 80px; } @media (min-width: 992px) { .block-cart-img { flex: 0 0 130px; max-width: 130px; } } .block-cart-img .products-img { margin-bottom: 0; } .block-cart-detail { padding: 0; flex: 1; display: flex; flex-direction: column; } .block-cart-detail-top { display: flex; flex-direction: column; margin-bottom: 1rem; flex: 1; grid-gap: 2rem; } @media (min-width: 992px) { .block-cart-detail-top { flex-direction: row; } } .block-cart-detail-bottom { display: flex; gap: 0.5rem; flex-flow: row wrap; } @media (min-width: 992px) { .block-cart-detail-bottom .not-available-txt { margin-right: auto; } } .block-cart-detail .products-price { font-weight: 600; font-size: 1rem; } .block-cart .cart-action { display: flex; align-items: center; white-space: nowrap; margin: 0; color: var(--txt-body); grid-gap: 1rem; flex-wrap: wrap; } .block-cart .cart-action-item { line-height: 1; position: relative; } .block-cart .cart-action-item::after { background-color: var(--border-color); width: 1px; height: 16px; position: absolute; top: 0; bottom: 0; left: -8px; display: block; content: ""; } .block-cart .cart-action-item:last-child::after { content: normal; } .block-cart .cart-action .btn-link { padding: 0; margin: 0; font-size: 0.875rem; text-decoration: underline; color: var(--txt-body); } .block-cart-sm .block-cart-img { flex: 0 0 100px; max-width: 100px; } .list-shipping .list-group-item { padding: 1rem; } .list-shipping .shipping-states { display: flex; } .list-shipping .shipping-states .box-icon { border-radius: 3px; background-color: var(--bg-gray); padding: 5px 7px; margin-left: 8px; } .list-shipping .shipping-states .detail h6, .list-shipping .shipping-states .detail .h6 { margin: 0; font-size: 0.85rem; } .list-shipping .shipping-states .detail p { font-size: 0.75rem; } .list-shipping .table-rates th, .list-shipping .table-rates td { padding: 0.6rem 0; } .list-country-zone li { margin: 5px 0; padding: 5px 0; border-bottom: solid 1px var(--border-light); font-size: 0.8rem; } .list-country-zone li:last-child { padding-bottom: 0; border-bottom: 0; margin-bottom: 0; } .list-country-zone li ul { font-size: 0.75rem; margin-right: 1rem; color: var(--txt-gray); } .list-country-zone .checkbox, .list-country-zone .radio { font-size: inherit; } .product-profile { display: flex; flex: 1; gap: 0.8rem; width: auto; align-items: flex-start; position: relative; margin: 0; } .product-profile-sm .product-profile-thumbnail { flex: 0 0 40px; max-width: 40px; width: 40px; height: 40px; } .product-profile-md .product-profile-thumbnail { flex: 0 0 60px; max-width: 60px; width: 60px; height: 60px; } .product-profile-lg .product-profile-thumbnail { flex: 0 0 80px; max-width: 80px; width: 80px; height: 80px; } .product-profile-xl .product-profile-thumbnail { flex: 0 0 100px; max-width: 100px; width: 100px; height: 100px; } .product-profile-thumbnail { margin: 0; position: relative; background-color: var(--bg-placeholder); background-image: url(images/retina/image.svg); background-position: center; background-repeat: no-repeat; background-size: 50% 50%; aspect-ratio: 1/1; flex: 0 0 50px; max-width: 50px; flex-shrink: 0; width: 50px; border: solid 1px var(--border-color); border-radius: 4px; margin: 0; display: flex; justify-content: center; align-items: center; overflow: hidden; position: relative; } .product-profile-thumbnail img { border: none; } @media (max-width: 575.98px) { .product-profile-thumbnail img { max-width: 50px; } } .product-profile-thumbnail-seller { flex: 0 0 100px; max-width: 100px; padding: 16px; } .product-profile-classification { background-color: var(--bg-blur-white); color: var(--txt-body); backdrop-filter: blur(10px); border-radius: 0px 0px 0px 32px; padding: 0; width: 20px; height: 20px; z-index: 1; position: absolute; left: 0; top: 0; display: flex; flex-flow: row wrap; } .product-profile-classification .txt { opacity: 0; visibility: hidden; } .product-profile-data { display: flex; flex: 1; min-width: 0px; flex-direction: column; font-size: 0.85rem; gap: 0.2rem; width: auto; align-items: flex-start; position: relative; } .product-profile-data .shop-name { color: var(--txt-gray); font-size: 0.8rem; } .product-profile-data .title { color: var(--txt-body); font-weight: 500; font-size: inherit; margin-bottom: 10px; } .product-profile-data .options { font-size: 0.75rem; color: var(--txt-gray); } .product-profile .mw-350 { min-width: 350px; } .product-profile-btn { margin-top: 5px; font-size: 0.8rem; } .product-profile-free-size { flex: auto; max-width: none; } .product-profile__description { font-size: 0.8rem; min-width: 150px; } .product-profile__description p { margin: 3px 0; } .product-profile__title { color: var(--txt-body); margin: 0 0 4px 0; font-weight: 600; overflow-wrap: break-word; word-wrap: break-word; word-break: break-all; word-break: break-word; hyphens: auto; } .product-profile__title a { opacity: 1; color: inherit; font-weight: inherit; } .product-profile__title a:hover { text-decoration: underline; } .product-profile__sub_title { display: block; opacity: 0.8; } .product-profile__location { margin-bottom: 5px; } .product-profile__location .svg { width: 14px; height: 14px; } .product-profile__category { opacity: 0.8; } .product-profile__specification { color: var(--txt-gray); } .product-profile__date { display: block; opacity: 0.6; } .product-profile__price { font-weight: 600; } .product-profile__price_old { color: var(--txt-gray); font-weight: 400; } .product-profile__price_off { font-weight: 400; } .product-profile__price_off { color: var(--primary-color); } .product-profile .btn-close { position: absolute; left: 0; } .shop-profile { display: flex; flex: 1; gap: 0.8rem; width: auto; align-items: flex-start; position: relative; } .shop-profile-thumbnail { background-color: var(--bg-placeholder); background-image: url(images/retina/image.svg); background-position: center; background-repeat: no-repeat; background-size: 50% 50%; aspect-ratio: 1/1; position: relative; min-width: 30px; max-width: 80px; width: 100%; border-radius: 4px; border: none; } @media (max-width: 575.98px) { .shop-profile-thumbnail { max-width: 50px; } } .shop-profile-data { display: flex; flex: 1; min-width: 0px; flex-direction: column; font-size: 0.85rem; } .shop-profile-data .title { font-size: 0.9rem; color: var(--txt-body); font-weight: 500; margin-bottom: 10px; } .shop-profile-data .shop-address { font-size: 0.75rem; color: var(--txt-gray); } .shop-profile .btn-close { position: absolute; left: 0; } .collection-shops-item { background-color: var(--bg-white); color: var(--bg-white-text); display: flex; flex-flow: row wrap; justify-content: space-between; gap: 3rem; padding: 2rem 0; } @media (min-width: 1200px) { .collection-shops-item:nth-child(even) { flex-direction: row-reverse; } .collection-shops-item:nth-child(even) .row { flex-direction: row-reverse; } } @media (max-width: 575.98px) { .collection-shops-item:nth-child(even) { flex-direction: column; } } .collection-shops-item .shop { width: 100%; } @media (min-width: 992px) { .collection-shops-item .shop { flex: 0 0 300px; max-width: 300px; } } .collection-shops .product-wrapper { flex: 1; } .collection-shops .product-wrapper .products { height: 100%; } @media (max-width: 575.98px) { .category-product { flex-direction: column; } } .category-product-layout-1 .products { height: 100%; border-radius: 0; border: none; } .category-product-layout-1 .products .content-overlay { background: rgba(0, 0, 0, 0.7); position: absolute; height: 100%; width: 100%; right: 0; top: 0; bottom: 0; left: 0; opacity: 0; transition: all 0.4s ease-in-out 0s; z-index: 1; pointer-events: none; } .category-product-layout-1 .products:hover .content-overlay, .category-product-layout-1 .products:focus .content-overlay, .category-product-layout-1 .products:active .content-overlay { opacity: 1; } .category-product-layout-1 .products:hover .content-details, .category-product-layout-1 .products:focus .content-details, .category-product-layout-1 .products:active .content-details { top: 50%; right: 50%; opacity: 1; } .category-product-layout-1 .ft-pro { position: relative; background-color: var(--bg-white); color: var(--bg-white-text); } .category-product-layout-1 .ft-pro .tag--soldout { top: auto; bottom: 20px; } .category-product-layout-1 .ft-pro.ft-pro-1 { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 3; } @media (max-width: 575.98px) { .category-product-layout-1 .ft-pro.ft-pro-1 { grid-column-end: 3; grid-row-end: 2; } } .category-product-layout-1 .ft-pro.ft-pro-1 .products { padding: 0; } .product-layout-2 { display: grid; grid-gap: 4px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } @media (min-width: 992px) { .product-layout-2 { grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); grid-gap: 1.5rem; } } .product-layout-2 .product-item { display: flex; align-items: normal; justify-content: space-between; height: 100%; flex-direction: column; } @media (min-width: 992px) { .product-layout-2 .product-item { flex-direction: row; } } .product-layout-2 .product-item .products-body { position: relative; width: 100%; } @media (min-width: 992px) { .product-layout-2 .product-item .products-body { width: 150px; } } .product-layout-2 .product-item .products-img { margin: 0; } @media (min-width: 992px) { .product-layout-2 .product-item .products-foot { padding: 0; width: calc(100% - 150px); text-align: right; } } @media (min-width: 992px) { .product-layout-2 .product-item .products-foot .products-title { padding-right: 0; } } .product-layout-3 { margin: auto; } @media (min-width: 992px) { .product-layout-3 { display: grid; -moz-column-gap: 1.5rem; column-gap: 1.5rem; } .product-layout-3[data-view="3"] { grid-template-columns: repeat(4, 1fr); } .product-layout-3[data-view="5"] { grid-template-columns: repeat(4, 1fr); } } .product-layout-3 .products { height: 100%; display: flex; flex-direction: row; align-content: center; gap: 0; } .product-layout-3 .products-body { flex: 0 0 50%; } .product-layout-3 .products-foot { background-color: var(--bg-white); color: var(--bg-white-text); flex: 1; display: flex; justify-content: center; align-items: flex-start; align-items: center; flex-direction: column; min-height: 50%; min-width: 0; padding: 1rem; } @media (min-width: 992px) { .product-layout-3 .products-foot { align-items: center; min-height: 234px; } } .product-layout-3 .products .products-img { margin: 0; } .product-layout-3 .products .products-img img { border: none; } .product-layout-3 .grid { overflow: hidden; } .product-layout-3 .grid-1 { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 3; } @media (min-width: 992px) { .product-layout-3 .grid-1 .products-body { flex: 1; } } @media (min-width: 992px) { .product-layout-3 .grid-1 .products-foot { max-width: 234px; width: 100%; background-color: var(--bg-white); color: var(--bg-white-text); background-color: var(--bg-white); color: var(--bg-white-text); position: absolute; bottom: 0; left: 0; } } .product-layout-3 .grid-2 { grid-column-start: 3; grid-column-end: 5; grid-row-start: 1; grid-row-end: 2; } .product-layout-3 .grid-2 .products { flex-direction: row-reverse; } .product-layout-3 .grid-3 { grid-column-start: 3; grid-column-end: 5; grid-row-start: 2; grid-row-end: 3; } .product-layout-3 .grid-4 { grid-column-start: 4; grid-column-end: 6; grid-row-start: 2; grid-row-end: 3; } .product-layout-3 .grid-4 { grid-column-start: 4; grid-column-end: 6; grid-row-start: 2; grid-row-end: 3; } .product-layout-3 .products-title { width: 100%; text-align: center; } .product-layout-4 { display: grid; gap: 2px; grid-template-columns: repeat(2, 1fr); } @media (min-width: 992px) { .product-layout-4 { gap: 1.5rem; } .product-layout-4[data-view="6"] { grid-template-columns: repeat(6, 1fr); } .product-layout-4[data-view="8"] { grid-template-columns: repeat(7, 1fr); } } .product-layout-4 .products-img { background-color: var(--bg-placeholder); background-image: url(images/retina/image.svg); background-position: center; background-repeat: no-repeat; background-size: 50% 50%; display: block; margin: 0; padding: 0; position: relative; width: 100%; overflow: hidden; aspect-ratio: 1/1; } .product-layout-4 .products-img img { border: none; margin: auto; -o-object-fit: cover; object-fit: cover; } .product-layout-4 .products-foot { display: flex; align-items: flex-end; padding: 1rem; position: absolute; right: 0; left: 0; bottom: 0; z-index: 0; } .product-layout-4 .products-price { background-color: var(--bg-blur-white); color: var(--txt-body); backdrop-filter: blur(10px); display: inline-block; padding: 0.2rem 0.8rem; box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px; font-weight: 600; border-radius: 30px; } .product-layout-4 .product-item { position: relative; background: var(--bg-placeholder); background-color: var(--bg-placeholder); background-image: url(images/retina/image.svg); background-position: center; background-repeat: no-repeat; background-size: 50% 50%; overflow: hidden; transition: all 0.2s linear; } @media (min-width: 992px) { .product-layout-4 .products-1 { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 3; } .product-layout-4 .products-2 { grid-column-start: 3; grid-column-end: 3; grid-row-start: 1; grid-row-end: 2; } .product-layout-4 .products-3 { grid-column-start: 3; grid-column-end: 3; grid-row-start: 2; grid-row-end: 3; } .product-layout-4 .products-4 { grid-column-start: 4; grid-column-end: 6; grid-row-start: 1; grid-row-end: 3; } .product-layout-4 .products-5 { grid-column-start: 6; grid-column-end: 7; grid-row-start: 1; grid-row-end: 2; } .product-layout-4 .products-6 { grid-column-start: 6; grid-column-end: 7; grid-row-start: 2; grid-row-end: 3; } } .content-details { color: var(--txt-white); position: absolute; z-index: 1; text-align: center; padding-right: 1em; padding-left: 1em; width: 100%; top: 80%; right: 50%; opacity: 0; transform: translate(-50%, -50%); transition: all 0.3s ease-in-out 0s; } .product-layout-5 { background-color: transparent; border: solid 1px var(--border-color); border-radius: 6px; display: flex; flex-direction: row; margin: 0; padding: 0; overflow: hidden; } .product-layout-5 .js-carousel-item { padding: 0; } .product-layout-5 .products { padding: 1rem; border-left: solid 1px var(--border-color); } .product-layout-5 .price-off { background-color: #fbd33f; color: #000; border-bottom-right-radius: 9px; padding: 4px 7px; font-size: 0.75rem; font-weight: 600; line-height: 1; position: absolute; z-index: 1; top: 0; left: 0; } .shop { min-width: 200px; text-align: center; background-color: var(--bg-gray-light); position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; border-radius: 0; position: relative; overflow: hidden; border: solid 1px transparent; padding: 2rem 0; } @media (min-width: 992px) { .shop { min-width: 0; } } .shop:hover, .shop:focus, .shop:active { background: none; border-color: var(--border-color); } .shop-body { flex: 1; } .shop-foot { padding-top: 1.5rem; text-align: center; display: flex; gap: 0.5rem; flex-direction: column; align-items: center; justify-content: center; } .shop-foot .products__rating { justify-content: center; } .shop-logo { background-color: var(--bg-white); color: var(--bg-white-text); background-color: var(--bg-placeholder); background-image: url(images/retina/image.svg); background-position: center; background-repeat: no-repeat; background-size: 50% 50%; border-radius: 50%; overflow: hidden; width: 142px; height: 142px; aspect-ratio: 1/1; margin: 0 auto; margin-bottom: 1rem; position: relative; border: solid 1px var(--border-color); display: flex; align-items: center; justify-content: center; } @media (max-width: 575.98px) { .shop-logo { width: 100px; height: 100px; } } .shop-logo img { -o-object-fit: cover; object-fit: cover; } .shop-title { font-weight: 500; font-size: 1rem; color: var(--txt-body); } .shop-location { font-size: 0.875rem; color: var(--txt-gray); } .shop-layout-1 { display: grid; gap: 1rem; } @media (max-width: 991.98px) { .shop-layout-1 { grid-auto-flow: column; overflow-x: auto; padding-bottom: 6px; scrollbar-gutter: stable both-edges; } } @media (min-width: 992px) { .shop-layout-1 { gap: 1.5rem; } .shop-layout-1[data-view="4"] { grid-template-columns: repeat(4, 1fr); } .shop-layout-1[data-view="5"] { grid-template-columns: repeat(5, 1fr); } .shop-layout-1[data-view="6"] { grid-template-columns: repeat(6, 1fr); } } .shop-layout-1 .shop { border-radius: 6px; transition: all 0.2s linear; animation: slideRight 600ms ease both; } .shop-layout-2 { display: flex; gap: 1rem; } @media (max-width: 991.98px) { .shop-layout-2 { overflow-x: auto; flex-flow: row; } } @media (min-width: 992px) { .shop-layout-2 { display: grid; grid-gap: 4rem; grid-template-columns: repeat(3, 1fr); } } .shop-layout-2 .shop { background-color: transparent; border: 0; border-radius: 6px; display: flex; flex-direction: column; text-align: center; max-width: 488px; flex: 1 0 200px; min-width: 0; padding: 0; overflow: unset; } @media (min-width: 992px) { .shop-layout-2 .shop:nth-child(odd) { flex-direction: column-reverse; } } .shop-layout-2 .shop-body { background-color: var(--bg-gray); border-radius: 6px; background-color: var(--bg-placeholder); background-image: url(images/retina/image.svg); background-position: center; background-repeat: no-repeat; background-size: 50% 50%; aspect-ratio: 1/1; width: 100%; flex: 1; box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px; } .shop-layout-2 .shop-body img { border-radius: 6px; -o-object-fit: cover; object-fit: cover; } .shop-layout-2 .shop-body > a { width: 100%; height: 100%; display: block; } .shop-layout-2 .shop-foot { display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; padding: 2.5rem 1rem; } .shop-layout-2 .shop-title { font-weight: 500; font-size: 1rem; color: var(--txt-body); } .shop-layout-2 .shop-location { font-size: 0.8rem; font-weight: 400; color: var(--txt-gray); margin-bottom: 1.5rem; } .recommended-layout { display: grid; gap: 1.5rem; grid-template-columns: auto; } @media (min-width: 1200px) { .recommended-layout { grid-template-columns: repeat(3, 1fr); } } .recommended-layout-item { background-color: var(--bg-beige); border-radius: 6px; padding: 0; overflow: hidden; display: flex; flex-direction: column; } .recommended-layout-head { padding: 1.5rem; background-color: var(--bg-white); color: var(--bg-white-text); border-radius: 7px; display: flex; align-items: center; border: solid 1px var(--bg-beige); border-bottom: none; } .recommended-layout-body { padding: 1rem; display: flex; justify-content: space-between; gap: 1rem; flex-direction: row; } .category-layout { display: flex; flex-direction: column; gap: 1.5rem; } @media (min-width: 1200px) { .category-layout { flex-direction: row; } } .category-layout-banner { background-color: var(--bg-placeholder); background-image: url(images/retina/image.svg); background-position: center; background-repeat: no-repeat; background-size: 50% 50%; border-radius: 4px; overflow: hidden; aspect-ratio: 375/200; } @media (min-width: 768px) { .category-layout-banner { aspect-ratio: 1200/400; } } @media (min-width: 1200px) { .category-layout-banner { max-width: 278px; flex: 0 0 278px; aspect-ratio: 278/417; } } .category-layout-grid { flex: 1; grid-column-gap: 1px; grid-row-gap: 1px; background-color: var(--border-color); display: grid; border: solid 1px var(--border-color); border-radius: 6px; overflow: hidden; } @media (min-width: 1200px) { .category-layout-grid { grid-template-rows: auto auto; grid-template-columns: 1fr 1fr 1fr; grid-auto-columns: 1fr; } } .category-layout-item { background-color: var(--bg-white); color: var(--bg-white-text); padding: 1rem 1.5rem; min-width: 0; } .category-layout-head { font-size: 1rem; color: var(--txt-body); margin-bottom: 1rem; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } .category-layout-body { display: flex; justify-content: space-between; gap: 1rem; flex-direction: row; } .category-layout-links { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; display: flex; flex-direction: column; gap: 0.5rem; } .category-layout-links a { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.8rem; color: var(--txt-gray); display: block; } .category-layout-links a:hover { color: var(--txt-body); } .category-layout-product { background-color: var(--bg-placeholder); background-image: url(images/retina/image.svg); background-position: center; background-repeat: no-repeat; background-size: 50% 50%; aspect-ratio: 1; border-radius: 4px; width: 100%; max-width: 128px; display: block; } .category-layout-1 { display: grid; gap: 1.5rem; grid-template-columns: auto; } @media (min-width: 768px) { .category-layout-1 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1200px) { .category-layout-1 { grid-template-columns: repeat(4, 1fr); } } .category-layout-1-item { border: solid 1px var(--border-color); border-radius: 6px; min-width: 0; } .category-layout-1 .section-head { padding: 1rem; margin: 0; border-bottom: solid 1px var(--border-color); } .category-layout-1 .section-head h2, .category-layout-1 .section-head .h2 { font-size: 1.2rem; } .category-layout-1 .product-item { padding: 1rem; border-bottom: solid 1px var(--border-color); display: flex; min-width: 0; flex-direction: row; gap: 1.5rem; } .category-layout-1 .product-item:last-child { border-bottom: none; } .category-layout-1 .product-item .products-body { width: 100%; max-width: 102px; } .category-layout-1 .product-item .products-foot { padding: 0; } .category-layout-2 { display: grid; grid-gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } @media (max-width: 767.98px) { .category-layout-2 { grid-auto-flow: column; overflow-x: scroll; } } @media (min-width: 1200px) { .category-layout-2 { grid-gap: 1.5rem; } .category-layout-2[data-view="4"] { grid-template-columns: repeat(4, 1fr); } .category-layout-2[data-view="5"] { grid-template-columns: repeat(5, 1fr); } } .category-layout-2 .category { background-color: var(--bg-white); color: var(--bg-white-text); border-radius: 4px; font-size: 0.8rem; display: flex; flex-direction: column; min-width: 200px; } .category-layout-2 .category-head { background-color: var(--bg-placeholder); background-image: url(images/retina/image.svg); background-position: center; background-repeat: no-repeat; background-size: 50% 50%; aspect-ratio: 4/1; width: 100%; } .category-layout-2 .category-head img { -o-object-fit: cover; object-fit: cover; } .category-layout-2 .category-body { background-color: var(--bg-gray); flex: 1; padding: 2rem; } .category-layout-2 .category-list-item { margin: 0.2rem 0; } .category-layout-2 .category-list-item a { color: var(--txt-gray); text-decoration: underline; padding: 0.8rem 0; } .category-layout-2 .category-list-head { font-weight: 500; font-size: 1.2rem; margin-bottom: 1rem; } .category-layout-2 .category .cat-img { display: block; margin: 0 0 1rem; padding: 0 0 25%; position: relative; width: 100%; } .category-layout-2 .category .cat-img img { max-width: 100%; bottom: 0; right: 0; margin: auto; position: absolute; left: 0; top: 0; transition: all 0.5s linear; transform: scale3d(1, 1, 1); } .category-layout-2 .category .cat-tittle { color: var(--txt-body); font-weight: 600; font-size: 1em; padding: 0 1.5rem; text-decoration: none; } .category-layout-2 .category .cat-list { padding: 0 1.5rem; } .category-layout-2 .category .cat-list li { display: block; margin: 10px 0; color: var(--txt-gray); font-size: 0.9em; } .category-layout-2 .category a:hover { color: var(--brand-color); } .category-layout-3 { display: grid; grid-gap: 1px; grid-template-columns: repeat(auto-fill, minmax(292px, 1fr)); } @media (min-width: 1200px) { .category-layout-3 { grid-gap: 3rem; grid-template-columns: repeat(auto-fill, minmax(490px, 1fr)); } } .category-layout-3 .category { display: flex; background-color: var(--bg-gray); border-radius: 6px; } @media (min-width: 1200px) { .category-layout-3 .category { flex-flow: row wrap; } } .category-layout-3 .category:nth-child(even) { flex-direction: row-reverse; } .category-layout-3 .category-head { flex: 0 0 50%; max-width: 50%; aspect-ratio: 1/1; display: flex; background-color: var(--bg-placeholder); background-image: url(images/retina/image.svg); background-position: center; background-repeat: no-repeat; background-size: 50% 50%; } @media (max-width: 575.98px) { .category-layout-3 .category-head { gap: 1px; } } .category-layout-3 .category-head img { -o-object-fit: cover; object-fit: cover; } .category-layout-3 .category-head > a { width: 100%; height: 100%; display: block; } .category-layout-3 .category-body { flex: 1; padding: 2rem; } @media (min-width: 992px) { .category-layout-3 .category-body { padding: 3rem 4rem; } } .category-layout-3 .category-list { font-size: 0.8rem; } .category-layout-3 .category-list-item { margin: 0.2rem 0; } .category-layout-3 .category-list-item a { text-decoration: underline; padding: 0.8rem 0; } .category-layout-3 .category-list-head { font-weight: 500; font-size: 1rem; margin-bottom: 1rem; } .category-layout-4 { display: grid; gap: 1.5rem; grid-template-columns: auto; } @media (min-width: 1200px) { .category-layout-4 { grid-template-columns: repeat(2, 1fr); } } .category-layout-4-item { background-color: var(--bg-white); color: var(--bg-white-text); border-radius: 6px; border: 1px solid oklch(94.01% 0 0deg); padding: 1.5rem; } .category-layout-4-head { font-size: 1rem; color: var(--txt-body); margin-bottom: 1rem; } .category-layout-4-body { display: grid; gap: 1.5rem; grid-template-columns: repeat(4, 1fr); } @media (min-width: 1200px) { .category-layout-4-body { grid-template-columns: repeat(4, 1fr); } } .category-layout-page { grid-template-columns: repeat(1, 1fr); overflow: visible; grid-auto-flow: row; } @media (min-width: 768px) { .category-layout-page { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 992px) { .category-layout-page { grid-template-columns: repeat(4, 1fr); } } .page-category { padding: 0; position: relative; z-index: 1; background: var(--bg-gray-light); } .page-category__content { padding: 15px; border: 1px solid #ddd; color: #333; border-top: none; background-color: var(--bg-white); color: var(--bg-white-text); } .page-category__content p { font-size: 0.9em; } .cg-main { color: var(--txt-body); } .cg-main ul { display: flex; flex-wrap: wrap; } @media (max-width: 767.98px) { .cg-main ul { flex-direction: column; } } .cg-main ul li { flex: 0 0 25%; max-width: 25%; } @media (max-width: 767.98px) { .cg-main ul li { flex: auto; max-width: none; } } .cg-main ul li a { padding: 0.5rem 0; font-size: 0.8rem; } .cg-main-item { background-color: var(--bg-gray); color: var(--txt-body); border-radius: 4px; margin-bottom: 2rem; padding: 1.5rem; display: block; } .cg-main-item:last-child { margin: 0; border-bottom: none; } .cg-main-item h5, .cg-main-item .h5 { font-size: 0.85rem; margin-bottom: 1rem; } .cg-main .big-title-main { font-size: 1rem; margin-bottom: 1rem; text-transform: uppercase; font-weight: 600; } .cg-main .big-title { font-size: 0.9rem; margin-bottom: 1rem; font-weight: 600; } .categories-thumb { overflow: hidden; } .categories-thumb a { display: block; padding: 0; margin: 0; } .categories-thumb .aspect-ratio { aspect-ratio: 4/1; position: relative; margin-right: auto; margin-left: auto; } .categories-thumb .aspect-ratio .categories-thumb-bg { position: absolute; top: 0px; right: 0px; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.2); background-size: cover; background-position: center center; transition: all 1s ease-out 0s; } .categories-thumb .aspect-ratio .categories-thumb-bg:after { content: ""; position: absolute; top: 0px; right: 0px; width: 100%; height: 100%; opacity: 0.5; background-color: rgba(0, 0, 0, 0.4); transition: all 1s ease-out 0s; } .categories-thumb-heading { padding: 1rem; padding-bottom: 0; margin: 0; } .industry-carousal { display: flex; gap: 1rem; align-items: center; margin-bottom: 0 !important; } @media (min-width: 768px) { .industry-carousal { padding: 0 4rem; } } .industry-carousal .slick-list { /*  overflow: hidden; mask: linear-gradient( 90deg, transparent, white 20%, white 80%, transparent ); */ } .industry-carousal .slick-dots { bottom: -10px; display: none !important; } @media (min-width: 992px) { .industry-carousal .slick-dots { display: none !important; } } .industry-carousal .slick-arrow { background-color: var(--bg-white); color: var(--bg-white-text); box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1607843137); border: 1px solid #e4e4e4; border-radius: 50%; width: 3rem; min-width: 3rem; height: 3rem; aspect-ratio: 1/1; transition: all 0.2s ease-in-out; position: absolute; z-index: 1; text-indent: -999999px; font-size: 0; align-items: center; justify-content: center; } @media (max-width: 767.98px) { .industry-carousal .slick-arrow { display: none !important; } } @media (min-width: 768px) { .industry-carousal .slick-arrow { display: flex; } } .industry-carousal .slick-arrow:before { content: ""; display: inline-block; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; width: 12px; height: 12px; } .industry-carousal .slick-arrow.slick-prev { right: 0; } .industry-carousal .slick-arrow.slick-prev:before { transform: rotate(-136deg); margin-left: -6px; } .industry-carousal .slick-arrow.slick-next { left: 0; } .industry-carousal .slick-arrow.slick-next:before { margin-right: -6px; transform: rotate(45deg); } .industry-carousal .slick-arrow:hover { background-color: var(--bg-black); color: var(--bg-black-text); } .industry-carousal-item { display: block; padding: 0 0.5rem; } .industry-carousal-link { background-color: var(--bg-white); color: var(--bg-white-text); border: solid 1px var(--border-color); overflow: hidden; padding: 2rem; margin: 1rem auto; width: 100%; height: 100%; aspect-ratio: 1/1; border-radius: 50%; box-shadow: none; position: relative; display: flex; align-items: center; justify-content: center; } .industry-carousal-link::before, .industry-carousal-link::after { content: ""; position: absolute; width: 100%; height: 100%; top: 0; right: 0; border-radius: 100%; } .industry-carousal-link:before { border: 2px solid transparent; } .industry-carousal-link::after { border: 0 solid transparent; } .industry-carousal-link:hover { color: currentColor; text-decoration: none; } .industry-carousal-link:hover::before { border-top-color: var(--brand-color); border-right-color: var(--brand-color); border-bottom-color: var(--brand-color); transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.1s, border-bottom-color 0.15s linear 0.2s; } .industry-carousal-link:hover::after { border-top: 2px solid var(--brand-color); border-left-width: 2px; border-right-width: 2px; transform: rotate(270deg); transition: transform 0.4s linear 0s, border-left-width 0s linear 0.35s; } .industry-carousal-icon { background-color: var(--bg-placeholder); background-image: url(images/retina/image.svg); background-position: center; background-repeat: no-repeat; background-size: 50% 50%; border-radius: 50%; aspect-ratio: 1/1; min-width: 50px; max-width: 50px; width: 100%; } .industry-carousal-icon img { background-color: #fff; border-radius: 50%; } .industry-carousal-block { display: flex; gap: 0.5rem; align-items: center; justify-content: center; flex-direction: column; text-align: center; max-width: 100%; } .industry-carousal-name { text-decoration: none; font-size: 0.85rem; display: none; } @media (min-width: 1200px) { .industry-carousal-name { display: block; max-width: 100%; } } .industry-carousal-name > span { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .catalog-carousal { display: flex; flex-flow: row nowrap; gap: 1rem; align-items: center; margin-bottom: 0 !important; overflow-x: auto; } .catalog-carousal-item { display: block; width: 100%; } @media (min-width: 992px) { .catalog-carousal-item { min-width: 0; } } .catalog-carousal-link { padding: 0; margin: 1rem auto; position: relative; display: flex; align-items: center; justify-content: center; } .catalog-carousal-icon { background-color: var(--bg-white); color: var(--bg-white-text); background-color: var(--bg-placeholder); background-image: url(images/retina/image.svg); background-position: center; background-repeat: no-repeat; background-size: 50% 50%; border: solid 1px rgba(0, 0, 0, 0.1); box-shadow: none; aspect-ratio: 1/1; border-radius: 50%; max-width: 150px; min-width: 80px; width: 100%; height: 100%; } .catalog-carousal-icon img { border-radius: 50%; } .catalog-carousal-block { display: flex; gap: 0.5rem; align-items: center; justify-content: center; flex-direction: column; text-align: center; min-width: 0; max-width: 134px; width: 100%; } .catalog-carousal-name { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; font-size: 0.85rem; font-weight: 600; display: none; } @media (min-width: 1200px) { .catalog-carousal-name { display: block; } } .catalog-carousal .slick-list { /* overflow: hidden; mask: linear-gradient( 90deg, transparent, white 20%, white 80%, transparent ); */ } .catalog-carousal .slick-arrow { background-color: var(--bg-white); color: var(--bg-white-text); box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1607843137); border: 1px solid #e4e4e4; border-radius: 50%; width: 3rem; min-width: 3rem; height: 3rem; aspect-ratio: 1/1; transition: all 0.2s ease-in-out; position: absolute; z-index: 1; text-indent: -999999px; font-size: 0; display: flex; align-items: center; justify-content: center; } .catalog-carousal .slick-arrow:before { content: ""; display: inline-block; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; width: 12px; height: 12px; } .catalog-carousal .slick-arrow.slick-prev { right: 0; } .catalog-carousal .slick-arrow.slick-prev:before { transform: rotate(-136deg); margin-left: -7px; } .catalog-carousal .slick-arrow.slick-next { left: 0; } .catalog-carousal .slick-arrow.slick-next:before { margin-right: -7px; transform: rotate(45deg); } .section-banner { padding: 0; } .banner-wrappers .banner-ppc { border-radius: 4px; overflow: hidden; } .banner-wrappers .banner-ppc .advertise__block { margin-bottom: 2rem; display: block; } .banner-wrappers .banner-ppc img { margin: 0 auto; display: inline-block; } .poster-layout { display: grid; grid-gap: 1.5rem; } @media (max-width: 575.98px) { .poster-layout { grid-gap: 1rem; } } .poster-layout[data-view="2"] { grid-template-columns: repeat(2, 1fr); } .poster-layout[data-view="3"] { grid-template-columns: repeat(3, 1fr); } .poster-layout .poster { background: var(--bg-placeholder); background-color: var(--bg-placeholder); background-image: url(images/retina/image.svg); background-position: center; background-repeat: no-repeat; background-size: 50% 50%; border-radius: 6px; text-align: center; aspect-ratio: 16/9; position: relative; overflow: hidden; } @media (min-width: 992px) { .poster-layout .poster { aspect-ratio: 4/3; } } .poster-layout .poster img { border-radius: inherit; } .poster-layout-1 { padding: 0; } .poster-layout-1 .poster { background-color: var(--bg-placeholder); background-image: url(images/retina/image.svg); background-position: center; background-repeat: no-repeat; background-size: 50% 50%; border-radius: 6px; text-align: center; aspect-ratio: 3/1; overflow: hidden; } @media (max-width: 575.98px) { .poster-layout-1 .poster { aspect-ratio: 16/9; } } @media (max-width: 991.98px) { .poster-layout-1 .poster { aspect-ratio: 16/9; } } .poster-layout-1 .poster img { border-radius: 6px; } .poster-layout-2 { display: grid; grid-gap: 1.5rem; padding: 0; } .poster-layout-2[data-view="3"] { grid-template-columns: repeat(3, 1fr); } .poster-layout-2 .poster { background-color: var(--bg-placeholder); background-image: url(images/retina/image.svg); background-position: center; background-repeat: no-repeat; background-size: 50% 50%; border-radius: 6px; text-align: center; aspect-ratio: 2/1; position: relative; overflow: hidden; } .poster-layout-2 .poster:before { position: absolute; top: 0; right: -75%; z-index: 2; display: block; content: ""; width: 50%; height: 100%; background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%); transform: skewX(-25deg); } .poster-layout-2 .poster img { border-radius: 6px; -o-object-fit: cover; object-fit: cover; } .poster-layout-3 { display: grid; gap: 1.5rem; gap: 1rem; grid-auto-flow: column; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; } @media (min-width: 768px) { .poster-layout-3 { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 575.98px) { .poster-layout-3 { grid-auto-columns: 40%; } } .poster-layout-3 .poster { background: var(--bg-placeholder); background-color: var(--bg-placeholder); background-image: url(images/retina/image.svg); background-position: center; background-repeat: no-repeat; background-size: 50% 50%; border-radius: 6px; text-align: center; position: relative; overflow: hidden; position: relative; } .poster-layout-3 .poster:before { pointer-events: none; position: absolute; top: 0; right: -75%; z-index: 2; display: block; content: ""; width: 50%; height: 100%; background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%); transform: skewX(-25deg); } .poster-layout-3 .poster:hover::before { animation: shine 0.75s; } @keyframes shine { 100% { right: 125%; } } @media (max-width: 575.98px) { .poster-layout-3 .poster { aspect-ratio: 2/3; } } .poster-layout-3 .poster img { border-radius: 6px; width: 100%; } .poster-layout-4 { display: flex; gap: 1rem; width: 100%; -webkit-overflow-scrolling: touch; overflow-x: auto; white-space: nowrap; scroll-snap-type: x mandatory; } .poster-layout-4 .poster { background: var(--bg-placeholder); background-color: var(--bg-placeholder); background-image: url(images/retina/image.svg); background-position: center; background-repeat: no-repeat; background-size: 50% 50%; border-radius: 6px; scroll-snap-align: start; aspect-ratio: 10/17; max-width: 236px; width: 100%; } @media (max-width: 991.98px) { .poster-layout-4 .poster { flex: 0 0 40%; max-width: 40%; } } .poster-layout-4 .poster img { border-radius: 6px; height: auto; } .poster-layout-5 { display: flex; gap: 1rem; width: 100%; -webkit-overflow-scrolling: touch; overflow-x: auto; white-space: nowrap; scroll-snap-type: x mandatory; } .poster-layout-5 .poster { background: var(--bg-placeholder); background-color: var(--bg-placeholder); background-image: url(images/retina/image.svg); background-position: center; background-repeat: no-repeat; background-size: 50% 50%; border-radius: 6px; scroll-snap-align: start; aspect-ratio: 128/189; max-width: 236px; } @media (max-width: 991.98px) { .poster-layout-5 .poster { flex: 0 0 55%; max-width: 55%; } } .poster-layout-5 .poster img { border-radius: 6px; width: 100%; height: auto; } .poster-layout-6 { display: flex; flex-direction: column; gap: 1rem; width: 100%; -webkit-overflow-scrolling: touch; overflow-x: auto; white-space: nowrap; scroll-snap-type: x mandatory; } .poster-layout-6 .poster-row { display: flex; gap: 1rem; flex-direction: row; } .poster-layout-6 .poster { background: var(--bg-placeholder); background-color: var(--bg-placeholder); background-image: url(images/retina/image.svg); background-position: center; background-repeat: no-repeat; background-size: 50% 50%; border-radius: 6px; scroll-snap-align: start; aspect-ratio: 70/101; display: flex; flex-direction: column; gap: 10px; max-width: 200px; } @media (max-width: 991.98px) { .poster-layout-6 .poster { flex: 0 0 26%; max-width: 26%; } } .poster-layout-6 .poster img { border-radius: 6px; width: 100%; height: auto; } .bg-newsletter { background-color: var(--bg-black); color: var(--bg-black-text); background-image: none !important; background-repeat: no-repeat; background-position: center; background-size: cover; border-bottom: solid 1px rgba(255, 255, 255, 0.1); } .newsletter { display: flex; justify-content: center; flex-direction: column; align-items: center; margin: 0 auto; gap: 2rem; } @media (min-width: 992px) { .newsletter { flex-direction: row; } } .newsletter-head h3, .newsletter-head .h3 { font-size: 1.3rem; margin-bottom: 0; padding: 0; font-weight: 600; } .newsletter-head h6, .newsletter-head .h6 { font-size: 0.8rem; font-weight: 400; max-width: 337px; } .newsletter-form { background-color: var(--bg-white); color: var(--bg-white-text); border-radius: 50px; flex: 1; display: flex; align-items: center; width: 100%; max-width: 600px; padding: 0.5rem; } .newsletter-form-input { flex: 1; background: none; border: none; height: auto; width: 100%; line-height: 1.2; font-size: 0.8em; padding: 5px 10px; margin: 0; color: var(--txt-body); vertical-align: top; } .newsletter-form-submit { background-color: var(--brand-color); color: var(--brand-color-inverse); border-radius: 20px; padding: 4px 10px; font-size: 0.85rem; border: none; } .newsletter-form-submit:hover { background-color: var(--bg-black); color: var(--bg-black-text); } /* Ion.RangeSlider // css version 2.0.3 // © 2013-2014 Denis Ineshin | IonDen.com // ===================================================================================================================*/ /* ===================================================================================================================== // RangeSlider */ .irs { position: relative; display: block; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .irs-line { position: relative; display: block; overflow: hidden; outline: none !important; } .irs-line-left, .irs-line-mid, .irs-line-right { position: absolute; display: block; top: 0; } .irs-line-left { right: 0; width: 11%; } .irs-line-mid { right: 9%; width: 82%; } .irs-line-right { left: 0; width: 11%; } .irs-bar { position: absolute; display: block; right: 0; width: 0; } .irs-bar-edge { position: absolute; display: block; top: 0; right: 0; } .irs-shadow { position: absolute; display: none; right: 0; width: 0; } .irs-slider { position: absolute; display: block; cursor: default; z-index: 1; } .irs-slider.type_last { z-index: 2; } .irs-min { position: absolute; display: block; right: 0; cursor: default; } .irs-max { position: absolute; display: block; left: 0; cursor: default; } .irs-from, .irs-to, .irs-single { position: absolute; display: block; top: 0; right: 0; cursor: default; white-space: nowrap; } .irs-grid { position: absolute; display: none; bottom: 0; right: 0; width: 100%; height: 20px; } .irs-with-grid .irs-grid { display: block; } .irs-grid-pol { position: absolute; top: 0; right: 0; width: 1px; height: 8px; background-color: #000; } .irs-grid-pol.small { height: 4px; } .irs-grid-text { position: absolute; bottom: 0; right: 0; white-space: nowrap; text-align: center; font-size: 9px; line-height: 9px; padding: 0 0px; color: #000; } .irs-disable-mask { position: absolute; display: block; top: 0; right: -1%; width: 102%; height: 100%; cursor: default; background: rgba(0, 0, 0, 0); z-index: 2; } .irs-disabled { opacity: 0.4; } .lt-ie9 .irs-disabled { filter: alpha(opacity=40); } .irs-hidden-input { position: absolute !important; display: block !important; top: 0 !important; right: 0 !important; width: 0 !important; height: 0 !important; font-size: 0 !important; line-height: 0 !important; padding: 0 !important; margin: 0 !important; outline: none !important; z-index: -9999 !important; background: none !important; border-style: solid !important; border-color: transparent !important; } /* Ion.RangeSlider, Simple Skin // css version 2.0.3 // © Denis Ineshin, 2014    https://github.com/IonDen // © guybowden, 2014        https://github.com/guybowden // ===================================================================================================================*/ /* ===================================================================================================================== // Skin details */ .irs { height: 55px; margin: -30px 0 0; } .irs-with-grid { height: 75px; } .irs-line { height: 6px; top: 35px; background: #e1e1e1; /* background: linear-gradient(to bottom, #DDD -50%, #FFF 150%);  W3C */ /*   border: 1px solid #CCC;*/ border-radius: 16px; } .irs-line-left { height: 8px; } .irs-line-mid { height: 8px; } .irs-line-right { height: 8px; } .irs-bar { height: 6px; top: 35px; background-color: var(--brand-color); color: var(--brand-color-inverse); /*  background: linear-gradient(to top, rgba(66,139,202,1) 0%,rgba(127,195,232,1) 100%);  W3C */ } .irs-bar-edge { height: 10px; top: 33px; width: 14px; border: 1px solid #428bca; border-left: 0; background: #428bca; background: linear-gradient(to top, rgb(66, 139, 202) 0%, rgb(127, 195, 232) 100%); /* W3C */ border-radius: 16px 0 0 16px; } .irs-shadow { height: 2px; top: 38px; background-color: #000; opacity: 0.3; border-radius: 5px; } .lt-ie9 .irs-shadow { filter: alpha(opacity=30); } .irs-slider { top: 30px; width: 18px; height: 18px; /* border: 1px solid #AAA;*/ background: #DDD; /*background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(220,220,220,1) 20%,rgba(255,255,255,1) 100%);  W3C */ border-radius: 27px; /*  box-shadow: 1px 1px 3px rgba(0,0,0,0.3);*/ cursor: pointer; } /* .irs-slider.state_hover, .irs-slider:hover { @include bg-white; @include bg-white; } */ .irs-min, .irs-max { color: #333; font-size: 12px; line-height: 1.333; text-shadow: none; top: 0; padding: 1px 5px; background: rgba(0, 0, 0, 0.1); border-radius: 3px; } .lt-ie9 .irs-min, .lt-ie9 .irs-max { background: #ccc; } .irs-from, .irs-to, .irs-single { color: var(--txt-white); font-size: 12px; line-height: 1.333; text-shadow: none; padding: 1px 5px; background: #0064ca; border-radius: 3px; } .lt-ie9 .irs-from, .lt-ie9 .irs-to, .lt-ie9 .irs-single { background: #999; } .irs-grid { height: 27px; } .irs-grid-pol { opacity: 0.5; background: #428bca; } .irs-grid-pol.small { background: #999; } .irs-grid-text { bottom: 5px; color: #99a4ac; } .xdsoft_datetimepicker { box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.506); background-color: var(--bg-white); color: var(--bg-white-text); border-bottom: 1px solid #bbbbbb; border-right: 1px solid #cccccc; border-left: 1px solid #cccccc; border-top: 1px solid #cccccc; color: #333333; font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif; padding: 8px; padding-right: 0; padding-top: 2px; position: absolute; z-index: 9999; box-sizing: border-box; display: none; } .xdsoft_datetimepicker iframe, .xdsoft_datetimepicker .blog-detail-left .posted-media .post__pic .media-wrapper img, .blog-detail-left .posted-media .post__pic .media-wrapper .xdsoft_datetimepicker img { position: absolute; right: 0; top: 0; width: 75px; height: 210px; background: transparent; border: none; } /*For IE8 or lower*/ .xdsoft_datetimepicker button { border: none !important; } .xdsoft_noselect { -webkit-user-select: none; -moz-user-select: none; user-select: none; } .xdsoft_noselect::-moz-selection { background: transparent; } .xdsoft_noselect::selection { background: transparent; } .xdsoft_noselect::-moz-selection { background: transparent; } .xdsoft_datetimepicker.xdsoft_inline { display: inline-block; position: static; box-shadow: none; } .xdsoft_datetimepicker * { box-sizing: border-box; padding: 0; margin: 0; } .xdsoft_datetimepicker .xdsoft_datepicker, .xdsoft_datetimepicker .xdsoft_timepicker { display: none; } .xdsoft_datetimepicker .xdsoft_datepicker.active, .xdsoft_datetimepicker .xdsoft_timepicker.active { display: block; } .xdsoft_datetimepicker .xdsoft_datepicker { width: 224px; float: left; margin-right: 8px; } .xdsoft_datetimepicker.xdsoft_showweeks .xdsoft_datepicker { width: 256px; } .xdsoft_datetimepicker .xdsoft_timepicker { width: 58px; float: left; text-align: center; margin-right: 8px; margin-top: 0; } .xdsoft_datetimepicker .xdsoft_datepicker.active + .xdsoft_timepicker { margin-top: 8px; margin-bottom: 3px; } .xdsoft_datetimepicker .xdsoft_mounthpicker { position: relative; text-align: center; } .xdsoft_datetimepicker .xdsoft_label i, .xdsoft_datetimepicker .xdsoft_prev, .xdsoft_datetimepicker .xdsoft_next, .xdsoft_datetimepicker .xdsoft_today_button { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAeCAYAAADaW7vzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Q0NBRjI1NjM0M0UwMTFFNDk4NkFGMzJFQkQzQjEwRUIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6Q0NBRjI1NjQ0M0UwMTFFNDk4NkFGMzJFQkQzQjEwRUIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDQ0FGMjU2MTQzRTAxMUU0OTg2QUYzMkVCRDNCMTBFQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDQ0FGMjU2MjQzRTAxMUU0OTg2QUYzMkVCRDNCMTBFQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PoNEP54AAAIOSURBVHja7Jq9TsMwEMcxrZD4WpBYeKUCe+kTMCACHZh4BFfHO/AAIHZGFhYkBBsSEqxsLCAgXKhbXYOTxh9pfJVP+qutnZ5s/5Lz2Y5I03QhWji2GIcgAokWgfCxNvcOCCGKqiSqhUp0laHOne05vdEyGMfkdxJDVjgwDlEQgYQBgx+ULJaWSXXS6r/ER5FBVR8VfGftTKcITNs+a1XpcFoExREIDF14AVIFxgQUS+h520cdud6wNkC0UBw6BCO/HoCYwBhD8QCkQ/x1mwDyD4plh4D6DDV0TAGyo4HcawLIBBSLDkHeH0Mg2yVP3l4TQMZQDDsEOl/MgHQqhMNuE0D+oBh0CIr8MAKyazBH9WyBuKxDWgbXfjNf32TZ1KWm/Ap1oSk/R53UtQ5xTh3LUlMmT8gt6g51Q9p+SobxgJQ/qmsfZhWywGFSl0yBjCLJCMgXail3b7+rumdVJ2YRss4cN+r6qAHDkPWjPjdJCF4n9RmAD/V9A/Wp4NQassDjwlB6XBiCxcJQWmZZb8THFilfy/lfrTvLghq2TqTHrRMTKNJ0sIhdo15RT+RpyWwFdY96UZ/LdQKBGjcXpcc1AlSFEfLmouD+1knuxBDUVrvOBmoOC/rEcN7OQxKVeJTCiAdUzUJhA2Oez9QTkp72OTVcxDcXY8iKNkxGAJXmJCOQwOa6dhyXsOa6XwEGAKdeb5ET3rQdAAAAAElFTkSuQmCC); } .xdsoft_datetimepicker .xdsoft_label i { opacity: 0.5; background-position: -92px -19px; display: inline-block; width: 9px; height: 20px; vertical-align: middle; } .xdsoft_datetimepicker .xdsoft_prev { float: left; background-position: -20px 0; } .xdsoft_datetimepicker .xdsoft_today_button { float: left; background-position: -70px 0; margin-right: 5px; } .xdsoft_datetimepicker .xdsoft_next { float: right; background-position: 0 0; } .xdsoft_datetimepicker .xdsoft_next, .xdsoft_datetimepicker .xdsoft_prev, .xdsoft_datetimepicker .xdsoft_today_button { background-color: transparent; background-repeat: no-repeat; border: 0 none currentColor; cursor: pointer; display: block; height: 30px; opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; outline: medium none currentColor; overflow: hidden; padding: 0; position: relative; text-indent: 100%; white-space: nowrap; width: 20px; } .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_prev, .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_next { float: none; background-position: -40px -15px; height: 15px; width: 30px; display: block; margin-right: 14px; margin-top: 7px; } .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_prev { background-position: -40px 0; margin-bottom: 7px; margin-top: 0; } .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box { height: 151px; overflow: hidden; border-bottom: 1px solid #dddddd; } .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div { background: #f5f5f5; border-top: 1px solid #dddddd; color: #666666; font-size: 12px; text-align: center; border-collapse: collapse; cursor: pointer; border-bottom-width: 0; height: 25px; line-height: 25px; } .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div:first-child { border-top-width: 0; } .xdsoft_datetimepicker .xdsoft_today_button:hover, .xdsoft_datetimepicker .xdsoft_next:hover, .xdsoft_datetimepicker .xdsoft_prev:hover { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } .xdsoft_datetimepicker .xdsoft_label { display: inline; position: relative; z-index: 9999; margin: 0; padding: 5px 3px; font-size: 14px; line-height: 20px; font-weight: bold; background-color: var(--bg-white); color: var(--bg-white-text); background-color: var(--bg-white); color: var(--bg-white-text); float: left; width: 182px; text-align: center; cursor: pointer; } .xdsoft_datetimepicker .xdsoft_label:hover > span { text-decoration: underline; } .xdsoft_datetimepicker .xdsoft_label:hover i { opacity: 1; } .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select { border: 1px solid #ccc; position: absolute; left: 0; top: 30px; z-index: 101; display: none; background-color: var(--bg-white); color: var(--bg-white-text); background-color: var(--bg-white); color: var(--bg-white-text); max-height: 160px; overflow-y: hidden; } .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select.xdsoft_monthselect { left: -7px; } .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select.xdsoft_yearselect { left: 2px; } .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option:hover { color: var(--txt-white); background: #ff8000; } .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option { padding: 2px 10px 2px 5px; text-decoration: none !important; } .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option.xdsoft_current { background: #33aaff; box-shadow: #178fe5 0 1px 3px 0 inset; color: var(--txt-white); font-weight: 800; } .xdsoft_datetimepicker .xdsoft_month { width: 100px; text-align: right; } .xdsoft_datetimepicker .xdsoft_calendar { clear: both; } .xdsoft_datetimepicker .xdsoft_year { width: 48px; margin-right: 5px; } .xdsoft_datetimepicker .xdsoft_calendar table { border-collapse: collapse; width: 100%; } .xdsoft_datetimepicker .xdsoft_calendar td > div { padding-left: 5px; } .xdsoft_datetimepicker .xdsoft_calendar th { height: 25px; } .xdsoft_datetimepicker .xdsoft_calendar td, .xdsoft_datetimepicker .xdsoft_calendar th { width: 14.2857142%; background: #f5f5f5; border: 1px solid #dddddd; color: #666666; font-size: 12px; text-align: right; vertical-align: middle; padding: 0; border-collapse: collapse; cursor: pointer; height: 25px; } .xdsoft_datetimepicker.xdsoft_showweeks .xdsoft_calendar td, .xdsoft_datetimepicker.xdsoft_showweeks .xdsoft_calendar th { width: 12.5%; } .xdsoft_datetimepicker .xdsoft_calendar th { background: #f1f1f1; } .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_today { color: #33aaff; } .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_default, .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current, .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_current { background: #33aaff; box-shadow: #178fe5 0 1px 3px 0 inset; color: var(--txt-white); font-weight: 800; } .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_other_month, .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_disabled, .xdsoft_datetimepicker .xdsoft_time_box > div > div.xdsoft_disabled { opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; } .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_other_month.xdsoft_disabled { opacity: 0.2; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"; } .xdsoft_datetimepicker .xdsoft_calendar td:hover, .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div:hover { color: var(--txt-white); background: #ff8000 !important; box-shadow: none !important; } .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_disabled:hover, .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_disabled:hover { color: inherit !important; background: inherit !important; box-shadow: inherit !important; } .xdsoft_datetimepicker .xdsoft_calendar th { font-weight: 800; text-align: center; color: #999; cursor: default; } .xdsoft_datetimepicker .xdsoft_copyright { color: #ccc !important; font-size: 10px; clear: both; float: none; margin-right: 8px; } .xdsoft_datetimepicker .xdsoft_copyright a { color: #eee !important; } .xdsoft_datetimepicker .xdsoft_copyright a:hover { color: #aaa !important; } .xdsoft_time_box { position: relative; border: 1px solid #ccc; } .xdsoft_scrollbar > .xdsoft_scroller { background: #ccc !important; height: 20px; border-radius: 3px; } .xdsoft_scrollbar { position: absolute; width: 7px; left: 0; top: 0; bottom: 0; cursor: pointer; } .xdsoft_scroller_box { position: relative; } .xdsoft_datetimepicker.xdsoft_dark { box-shadow: 0 5px 15px -5px rgba(255, 255, 255, 0.506); background: #000000; border-bottom: 1px solid #444444; border-right: 1px solid #333333; border-left: 1px solid #333333; border-top: 1px solid #333333; color: #cccccc; } .xdsoft_datetimepicker.xdsoft_dark .xdsoft_timepicker .xdsoft_time_box { border-bottom: 1px solid #222222; } .xdsoft_datetimepicker.xdsoft_dark .xdsoft_timepicker .xdsoft_time_box > div > div { background: #0a0a0a; border-top: 1px solid #222222; color: #999999; } .xdsoft_datetimepicker.xdsoft_dark .xdsoft_label { background-color: #000; } .xdsoft_datetimepicker.xdsoft_dark .xdsoft_label > .xdsoft_select { border: 1px solid #333; background-color: #000; } .xdsoft_datetimepicker.xdsoft_dark .xdsoft_label > .xdsoft_select > div > .xdsoft_option:hover { color: #000; background: #007fff; } .xdsoft_datetimepicker.xdsoft_dark .xdsoft_label > .xdsoft_select > div > .xdsoft_option.xdsoft_current { background: #cc5500; box-shadow: #b03e00 0 1px 3px 0 inset; color: #000; } .xdsoft_datetimepicker.xdsoft_dark .xdsoft_label i, .xdsoft_datetimepicker.xdsoft_dark .xdsoft_prev, .xdsoft_datetimepicker.xdsoft_dark .xdsoft_next, .xdsoft_datetimepicker.xdsoft_dark .xdsoft_today_button { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAeCAYAAADaW7vzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QUExQUUzOTA0M0UyMTFFNDlBM0FFQTJENTExRDVBODYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QUExQUUzOTE0M0UyMTFFNDlBM0FFQTJENTExRDVBODYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpBQTFBRTM4RTQzRTIxMUU0OUEzQUVBMkQ1MTFENUE4NiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpBQTFBRTM4RjQzRTIxMUU0OUEzQUVBMkQ1MTFENUE4NiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pp0VxGEAAAIASURBVHja7JrNSgMxEMebtgh+3MSLr1T1Xn2CHoSKB08+QmR8Bx9A8e7RixdB9CKCoNdexIugxFlJa7rNZneTbLIpM/CnNLsdMvNjM8l0mRCiQ9Ye61IKCAgZAUnH+mU3MMZaHYChBnJUDzWOFZdVfc5+ZFLbrWDeXPwbxIqrLLfaeS0hEBVGIRQCEiZoHQwtlGSByCCdYBl8g8egTTAWoKQMRBRBcZxYlhzhKegqMOageErsCHVkk3hXIFooDgHB1KkHIHVgzKB4ADJQ/A1jAFmAYhkQqA5TOBtocrKrgXwQA8gcFIuAIO8sQSA7hidvPwaQGZSaAYHOUWJABhWWw2EMIH9QagQERU4SArJXo0ZZL18uvaxejXt/Em8xjVBXmvFr1KVm/AJ10tRe2XnraNqaJvKE3KHuUbfK1E+VHB0q40/y3sdQSxY4FHWeKJCunP8UyDdqJZenT3ntVV5jIYCAh20vT7ioP8tpf6E2lfEMwERe+whV1MHjwZB7PBiCxcGQWwKZKD62lfGNnP/1poFAA60T7rF1UgcKd2id3KDeUS+oLWV8DfWAepOfq00CgQabi9zjcgJVYVD7PVzQUAUGAQkbNJTBICDhgwYTjDYD6XeW08ZKh+A4pYkzenOxXUbvZcWz7E8ykRMnIHGX1XPl+1m2vPYpL+2qdb8CDAARlKFEz/ZVkAAAAABJRU5ErkJggg==); } .xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td, .xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar th { background: #0a0a0a; border: 1px solid #222222; color: #999999; } .xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar th { background: #0e0e0e; } .xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td.xdsoft_today { color: #cc5500; } .xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td.xdsoft_default, .xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td.xdsoft_current, .xdsoft_datetimepicker.xdsoft_dark .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_current { background: #cc5500; box-shadow: #b03e00 0 1px 3px 0 inset; color: #000; } .xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td:hover, .xdsoft_datetimepicker.xdsoft_dark .xdsoft_timepicker .xdsoft_time_box > div > div:hover { color: #000 !important; background: #007fff !important; } .xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar th { color: #666; } .xdsoft_datetimepicker.xdsoft_dark .xdsoft_copyright { color: #333 !important; } .xdsoft_datetimepicker.xdsoft_dark .xdsoft_copyright a { color: #111 !important; } .xdsoft_datetimepicker.xdsoft_dark .xdsoft_copyright a:hover { color: #555 !important; } .xdsoft_dark .xdsoft_time_box { border: 1px solid #333; } .xdsoft_dark .xdsoft_scrollbar > .xdsoft_scroller { background: #333 !important; } .ui-timepicker-div .ui-widget-header { margin-bottom: 8px; } .ui-timepicker-div dl { text-align: left; } .ui-timepicker-div dl dt { float: left; clear: left; padding: 0 0 0 5px; } .ui-timepicker-div dl dd { margin: 0 10px 10px 40%; } .ui-timepicker-div td { font-size: 90%; } .ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; } .ui-timepicker-div .ui_tpicker_unit_hide { display: none; } .ui-timepicker-div .ui_tpicker_time .ui_tpicker_time_input { background: none; color: inherit; border: none; outline: none; border-bottom: solid 1px #555; width: 95%; } .ui-timepicker-div .ui_tpicker_time .ui_tpicker_time_input:focus { border-bottom-color: #aaa; } .ui-timepicker-rtl { direction: rtl; } .ui-timepicker-rtl dl { text-align: right; padding: 0 5px 0 0; } .ui-timepicker-rtl dl dt { float: right; clear: right; } .ui-timepicker-rtl dl dd { margin: 0 40% 10px 10px; } /* Shortened version style */ .ui-timepicker-div.ui-timepicker-oneLine { padding-left: 2px; } .ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time, .ui-timepicker-div.ui-timepicker-oneLine dt { display: none; } .ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time_label { display: block; padding-top: 2px; } .ui-timepicker-div.ui-timepicker-oneLine dl { text-align: right; } .ui-timepicker-div.ui-timepicker-oneLine dl dd, .ui-timepicker-div.ui-timepicker-oneLine dl dd > div { display: inline-block; margin: 0; } .ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_minute:before, .ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_second:before { content: ":"; display: inline-block; } .ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_millisec:before, .ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_microsec:before { content: "."; display: inline-block; } .ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide, .ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide:before { display: none; } .faq-layout-1 { text-align: center; } .faq-layout-1 .faq { border-bottom: solid 1px var(--border-color); display: flex; flex-direction: row; justify-content: center; max-width: 75%; margin: auto; } @media (max-width: 991.98px) { .faq-layout-1 .faq { max-width: none; } } .faq-layout-1 .faq-item.is-active { color: var(--brand-color); } .faq-layout-1 .faq-links { border: none; background: none; display: block; padding: 0.8rem 1rem; } .faq-layout-1 .faq_data { margin-top: 2rem; line-height: 1.7; } @media (min-width: 992px) { .faq-layout-1 .faq-list { max-width: 75%; } } .faq-list { margin: 0 auto; margin-top: 2rem; display: flex; flex-wrap: wrap; flex-direction: column; text-align: right; } @media (max-width: 991.98px) { .faq-list { max-width: none; } } .faq-list-item { padding: 2rem; } @media (min-width: 992px) { .faq-list-item { padding: 2rem 3rem; } } .faq-list-item { margin-bottom: 1rem; background-color: var(--bg-gray); border-radius: 4px; } .faq-list-item h5, .faq-list-item .h5 { font-size: 1.1rem; margin: 0; } .faq-list-item p { line-height: 1.7; font-size: 0.9rem; font-weight: 400; color: var(--txt-gray); margin-top: 1rem; } .faq-list-link { background-color: transparent; border: none; position: relative; width: 100%; font-size: 1.125rem; font-weight: 500; color: var(--txt-body); margin: 0; padding: 0; padding-left: 2rem; text-align: right; } .faq-list-link:after, .faq-list-link:before { background: var(--txt-body); content: ""; height: 2px; position: absolute; left: 0; top: 14px; width: 12px; } .faq-list-link:before { transform: rotate(90deg); transition: all 0.2s ease-in-out; } .faq-list-link[aria-expanded=true]:before { transform: rotate(0deg); } .product-images { width: 100%; margin: 0 auto; display: flex; flex-direction: column; } @media (min-width: 992px) { .product-images { flex-direction: row; } } .product-images { grid-gap: 4rem; } .product-images figure, .product-images a, .product-images img { display: block; outline: none; border: none; } .product-images .main-img-slider { aspect-ratio: 1/1; overflow: hidden; width: 100%; height: 100%; border: none; min-width: 0; background-color: var(--bg-placeholder); background-image: url(images/retina/image.svg); background-position: center; background-repeat: no-repeat; background-size: 50% 50%; margin-bottom: 0 !important; } @media (min-width: 992px) { .product-images .main-img-slider { order: 2; outline: solid 1px var(--border-color); } } .product-images .main-img-slider .gallery-thumb { aspect-ratio: 1/1; height: 100%; position: relative; } .product-images .main-img-slider .gallery-thumb iframe, .product-images .main-img-slider .gallery-thumb .blog-detail-left .posted-media .post__pic .media-wrapper img, .blog-detail-left .posted-media .post__pic .media-wrapper .product-images .main-img-slider .gallery-thumb img { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .product-images .main-img-slider .slick-dots { background-color: rgba(0, 0, 0, 0.77); bottom: 10px; display: flex; width: auto; right: 50%; left: auto; margin: 0 auto; transform: translateX(-50%); border-radius: 20px; padding: 5px; } .product-images .main-img-slider .slick-dots li { transition: all 0.4s; background-color: var(--bg-blur-white); color: var(--txt-body); backdrop-filter: blur(10px); border-radius: 20px; width: 6px; height: 6px; margin: 0 3px; } .product-images .main-img-slider .slick-dots li.slick-active { width: 10px; background-color: var(--bg-blur-white); color: var(--txt-body); backdrop-filter: blur(10px); } .product-images .thumb-nav { margin: auto; padding: 0; min-width: 0; display: none; } @media (min-width: 1400px) { .product-images .thumb-nav { max-width: 80px; flex: 0 0 80px; display: block; } } .product-images .thumb-nav-item { display: block; margin: 10px auto; cursor: pointer; aspect-ratio: 1/1; background-color: var(--bg-placeholder); background-image: url(images/retina/image.svg); background-position: center; background-repeat: no-repeat; background-size: 50% 50%; } .product-images .thumb-nav-item img { padding: 0; display: block; width: 100%; max-width: 100px; height: auto; margin: 0 auto; border: none; outline: solid 1px var(--border-color); } .product-images .thumb-nav-item.slick-current img { outline: solid 1px var(--border-dark); } .product-images .thumb-nav-item:hover, .product-images .thumb-nav-item:focus { opacity: 0.8; } .product-images .thumb-nav .btn-prev { top: 0; right: 0; left: 0; margin: 0 auto; transform: rotate(90deg); } .product-images .thumb-nav .btn-next { bottom: 0; right: 0; left: 0; top: auto; margin: 0 auto; transform: rotate(90deg); } .slick-slider .btn { padding: 0; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: 0; z-index: 100; font-size: 2.5em; margin-top: -20px; position: absolute; top: 50%; text-align: center; color: #000; opacity: 0.6; transition: opacity 0.25s; cursor: pointer; background-color: var(--bg-white); color: var(--bg-white-text); } .slick-slider .btn-prev { right: 0; } .slick-slider .btn-prev span { display: inline-block; border-left: 1px solid currentColor; border-bottom: 1px solid currentColor; width: 10px; height: 10px; transform: rotate(225deg); margin-left: -7px; } .slick-slider .btn-next { left: 0; } .slick-slider .btn-next span { display: inline-block; border-left: 1px solid currentColor; border-bottom: 1px solid currentColor; width: 10px; height: 10px; transform: rotate(45deg); margin-right: -7px; } .slick-slider .btn:hover { opacity: 1; } .slick-slider .slick-disabled { opacity: 0.1; cursor: not-allowed; pointer-events: none; } .photo-gallery { position: relative; height: 100%; display: grid; grid-gap: 0.5rem; align-items: start; overflow: hidden; border-radius: 16px; } @media (min-width: 992px) { .photo-gallery { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; } } .photo-gallery-main { grid-row: 1; grid-column: 1; } .photo-gallery-sub { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 0.5rem; } @media (min-width: 992px) { .photo-gallery-sub { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; } } .photo-gallery-link { background-color: var(--bg-placeholder); background-color: var(--bg-placeholder); background-image: url(images/retina/image.svg); background-position: center; background-repeat: no-repeat; background-size: 50% 50%; aspect-ratio: 1; display: block; width: 100%; overflow: hidden; position: relative; } .photo-gallery-link img { transition: all 0.4s; -o-object-fit: cover; object-fit: cover; } .photo-gallery-link iframe, .photo-gallery-link .blog-detail-left .posted-media .post__pic .media-wrapper img, .blog-detail-left .posted-media .post__pic .media-wrapper .photo-gallery-link img { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .photo-gallery-link:hover img { transition: all 0.4s; } .photo-gallery-link:hover::after { opacity: 0.15; transition: all 0.4s; } .photo-gallery-link:after { pointer-events: none; position: absolute; inset: 0; z-index: 1; content: ""; background-color: black; opacity: 0; transition: all 0.4s; } .photo-gallery .btn-show-all { background-color: var(--bg-white); color: var(--bg-white-text); color: var(--txt-black); border: none; box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px; border-radius: 10px; display: inline-flex; align-items: center; gap: 5px; position: absolute; bottom: 10px; left: 10px; padding: 10px 15px; font-size: 0.8rem; font-weight: 600; } .alert { display: flex; align-items: stretch; padding: 1rem 2rem; margin: 0 0 20px 0; font-size: 0.85rem; border-radius: 4px; } .alert-icon { display: flex; align-items: center; padding-left: 1rem; } .alert-icon-icon-top { align-items: flex-start; align-content: stretch; } .alert-icon i { font-size: 2rem; } .alert-text { align-self: center; flex-grow: 1; } .alert-close { padding: 0 0 0 1rem; display: flex; align-items: center; justify-content: flex-end; } .alert-close .close { text-shadow: none !important; } .alert-close i { opacity: 0.8; transition: all 0.3s ease; cursor: pointer; } .alert-close i:hover { opacity: 1; } .alert-elevate { box-shadow: 0 0 13px 0 rgba(82, 63, 105, 0.1); } .alert-brand { background: #366cf3; border: 1px solid #366cf3; color: var(--txt-white); } .alert-brand-icon i { color: var(--txt-white); } .alert-brand-text { color: var(--txt-white); } .alert-brand-text hr { border-top-color: #fff; opacity: 0.4; } .alert-brand-close i { color: var(--txt-white); } .alert-outline-brand { border: 1px solid #366cf3; color: #366cf3; } .alert-outline-brand-icon i { color: #366cf3; } .alert-outline-brand-text { color: #366cf3; } .alert-outline-brand-close i { color: #366cf3; } .alert-solid-brand { background: rgba(54, 108, 243, 0.1); border-color: transparent; color: #366cf3; } .alert-solid-brand-icon i { color: #366cf3; } .alert-solid-brand-text { color: #366cf3; } .alert-solid-brand-close i { color: #366cf3; } .alert-light { background-color: var(--bg-white); color: var(--bg-white-text); border: 1px solid #fff; color: #282a3c; } .alert-light-icon i { color: #282a3c; } .alert-light-text { color: #282a3c; } .alert-light-text hr { border-top-color: #282a3c; opacity: 0.4; } .alert-light-close i { color: #282a3c; } .alert-outline-light { border: 1px solid #fff; color: var(--txt-white); } .alert-outline-light-icon i { color: var(--txt-white); } .alert-outline-light-text { color: var(--txt-white); } .alert-outline-light-close i { color: var(--txt-white); } .alert-solid-light { background: rgba(255, 255, 255, 0.1); border-color: transparent; color: var(--txt-white); } .alert-solid-light-icon i { color: var(--txt-white); } .alert-solid-light-text { color: var(--txt-white); } .alert-solid-light-close i { color: var(--txt-white); } .alert-dark { background: #282a3c; border: 1px solid #282a3c; color: var(--txt-white); } .alert-dark-icon i { color: var(--txt-white); } .alert-dark-text { color: var(--txt-white); } .alert-dark-text hr { border-top-color: #fff; opacity: 0.4; } .alert-dark-close i { color: var(--txt-white); } .alert-outline-dark { border: 1px solid #282a3c; color: #282a3c; } .alert-outline-dark-icon i { color: #282a3c; } .alert-outline-dark-text { color: #282a3c; } .alert-outline-dark-close i { color: #282a3c; } .alert-solid-dark { background: rgba(40, 42, 60, 0.1); border-color: transparent; color: #282a3c; } .alert-solid-dark-icon i { color: #282a3c; } .alert-solid-dark-text { color: #282a3c; } .alert-solid-dark-close i { color: #282a3c; } .alert-primary { background: #5867dd; border: 1px solid #5867dd; color: var(--txt-white); } .alert-primary-icon i { color: var(--txt-white); } .alert-primary-text { color: var(--txt-white); } .alert-primary-text hr { border-top-color: #fff; opacity: 0.4; } .alert-primary-close i { color: var(--txt-white); } .alert-outline-primary { border: 1px solid #5867dd; color: #5867dd; } .alert-outline-primary-icon i { color: #5867dd; } .alert-outline-primary-text { color: #5867dd; } .alert-outline-primary-close i { color: #5867dd; } .alert-solid-primary { background: rgba(88, 103, 221, 0.1); border-color: transparent; color: #5867dd; } .alert-solid-primary-icon i { color: #5867dd; } .alert-solid-primary-text { color: #5867dd; } .alert-solid-primary-close i { color: #5867dd; } .alert-success { background: #1dc9b7; border: 1px solid #1dc9b7; color: var(--txt-white); } .alert-success-icon i { color: var(--txt-white); } .alert-success-text { color: var(--txt-white); } .alert-success-text hr { border-top-color: #fff; opacity: 0.4; } .alert-success-close i { color: var(--txt-white); } .alert-outline-success { border: 1px solid #1dc9b7; color: #1dc9b7; } .alert-outline-success-icon i { color: #1dc9b7; } .alert-outline-success-text { color: #1dc9b7; } .alert-outline-success-close i { color: #1dc9b7; } .alert-solid-success { background: rgba(29, 201, 183, 0.1); border-color: transparent; color: #1dc9b7; } .alert-solid-success-icon i { color: #1dc9b7; } .alert-solid-success-text { color: #1dc9b7; } .alert-solid-success-close i { color: #1dc9b7; } .alert-info { background: #5578eb; border: 1px solid #5578eb; color: var(--txt-white); } .alert-info-icon i { color: var(--txt-white); } .alert-info-text { color: var(--txt-white); } .alert-info-text hr { border-top-color: #fff; opacity: 0.4; } .alert-info-close i { color: var(--txt-white); } .alert-outline-info { border: 1px solid #5578eb; color: #5578eb; } .alert-outline-info-icon i { color: #5578eb; } .alert-outline-info-text { color: #5578eb; } .alert-outline-info-close i { color: #5578eb; } .alert-solid-info { background: rgba(85, 120, 235, 0.1); border-color: transparent; color: #5578eb; } .alert-solid-info-icon i { color: #5578eb; } .alert-solid-info-text { color: #5578eb; } .alert-solid-info-close i { color: #5578eb; } .alert-warning { background: #ffb822; border: 1px solid #ffb822; color: #111; } .alert-warning-icon i { color: #111; } .alert-warning-text { color: #111; } .alert-warning-text hr { border-top-color: #111; opacity: 0.4; } .alert-warning-close i { color: #111; } .alert-outline-warning { border: 1px solid #ffb822; color: #ffb822; } .alert-outline-warning-icon i { color: #ffb822; } .alert-outline-warning-text { color: #ffb822; } .alert-outline-warning-close i { color: #ffb822; } .alert-solid-warning { background: rgba(255, 184, 34, 0.1); border-color: transparent; color: #ffb822; } .alert-solid-warning-icon i { color: #ffb822; } .alert-solid-warning-text { color: #ffb822; } .alert-solid-warning-close i { color: #ffb822; } .alert-danger { color: var(--txt-white); background: #fd397a; border: 1px solid #fd397a; } .alert-danger-icon i { color: var(--txt-white); } .alert-danger-text { color: var(--txt-white); } .alert-danger-text hr { border-top-color: #fff; opacity: 0.4; } .alert-danger-close i { color: var(--txt-white); } .alert-outline-danger { border: 1px solid #fd397a; color: #fd397a; } .alert-outline-danger-icon i { color: #fd397a; } .alert-outline-danger-text { color: #fd397a; } .alert-outline-danger-close i { color: #fd397a; } .alert-solid-danger { background: rgba(253, 57, 122, 0.1); border-color: transparent; color: #fd397a; } .alert-solid-danger-icon i { color: #fd397a; } .alert-solid-danger-text { color: #fd397a; } .alert-solid-danger-close i { color: #fd397a; } .alert-solid-danger-icon i { color: #74788d; } .alert-secondary-text { color: #595d6e; } .alert-bold-text { font-weight: 500; } .alert-marginless { margin: 0; } #mbsmessage, .system_message { position: fixed; width: auto; max-width: 450px; top: 5%; right: 0; left: 0; margin: 0 auto; border-radius: 5px; box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.07); z-index: 1052; } #mbsmessage .content, .system_message .content { margin: 0 auto; text-align: center; position: relative; display: inline-block; vertical-align: top; word-break: break-word; } #mbsmessage .content:before, .system_message .content:before { background-size: 18px !important; content: ""; right: -26px; position: absolute; top: 2px; z-index: 2; width: 18px; height: 18px; display: block; } .div_error { text-align: right; padding: 20px 60px 20px 60px; position: relative; color: var(--txt-white); /*font-size: 0;*/ line-height: normal; background: url(images/icon--attention.svg) no-repeat 15px 15px #fd397a; background-size: 30px; } #mbsmessage .content .div_error, #mbsmessage .content .div_info { padding: 0px; } .div_error li { color: inherit; position: relative; padding: 0 0 5px 0; } .div_error li a { color: var(--txt-white); text-decoration: underline; } .div_info { font-weight: normal; position: relative; color: var(--txt-white); background: url(images/icon--info.svg) no-repeat 15px 15px #02b4d1; background-size: 30px; } .div_info li { font-weight: 400; font-size: 1em; position: relative; padding: 0 0 5px 0; color: inherit; } .div_info li a { font-weight: normal; text-decoration: none; color: var(--txt-white); cursor: default; } .div_msg { font-weight: normal; padding: 20px 40px 20px 60px; position: relative; color: var(--txt-white); background: url(images/icon--success.svg) no-repeat 15px 15px #00b6ad; background-size: 30px; } #mbsmessage .div_msg, .system_message .div_msg { padding: 0; } .div_msg li { font-weight: 400; font-size: 1em; position: relative; padding: 0 0 10px 0; color: inherit; } .div_msg li:last-child { padding-bottom: 0; } .div_msg li a { font-weight: normal; font-size: 13px; text-decoration: none; color: var(--txt-white); cursor: default; } .div_info li:last-child, .div_error li:last-child, .div_msg li:last-child { padding-bottom: 0; } /* validation error messages */ .error { border-color: #f00 !important; } .errorlist { margin: 3px 0; list-style: none; padding: 2px 10px 4px; position: relative; background: #fdf7f6; clear: both; } .errorlist li a { color: #f44336; font-size: 11px; text-decoration: none; } .errorlist li:last-child { padding-bottom: 0; } .errorlist li { font-size: 12px; position: relative; } .system_message .closeMsg:hover { transform: rotate(135deg); opacity: 1; } .system_message .closeMsg:before { width: 3px; height: 15px; right: 50%; margin: 0 0 0 -2px; position: absolute; top: 2px; content: ""; background-color: var(--bg-white); color: var(--bg-white-text); background-color: var(--bg-white); color: var(--bg-white-text); } .system_message .closeMsg:after { width: 15px; height: 3px; right: 2px; top: 50%; margin: -2px 0 0 0; position: absolute; content: ""; background-color: var(--bg-white); color: var(--bg-white-text); background-color: var(--bg-white); color: var(--bg-white-text); } .alert--process:before { content: ""; border-radius: 50%; width: 16px; height: 16px; display: inline-block; position: absolute; right: 15px; top: 20px; border-top: 3px solid rgba(255, 255, 255, 0.2); border-left: 3px solid rgba(255, 255, 255, 0.2); border-bottom: 3px solid rgba(255, 255, 255, 0.2); border-right: 3px solid #ffffff; transform: translateZ(0); animation: load8 1.1s infinite linear; } @keyframes load8 { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @media (max-width: 767px) { #mbsmessage, .system_message { right: 10px; left: 10px; width: auto; } #mbsmessage .content, .system_message .content { min-width: inherit; } } .request-quote { background-color: var(--bg-white); color: var(--bg-white-text); font-size: 1rem; } .request-quote-foot { box-shadow: 0px 8px 32px 0px rgba(17, 17, 26, 0.05), 0px 4px 16px 0px rgba(17, 17, 26, 0.1); } .request-quote-title { font-weight: 500; margin-bottom: 1.5rem; } .quote-to { display: flex; align-items: center; flex-flow: row nowrap; margin-bottom: 2rem; gap: 1rem; } @media (max-width: 1199.98px) { .quote-to { flex-wrap: wrap; } } .quote-to .label { font-size: 1rem; color: var(--text-secondary); } .quote-to .avatar { display: flex; align-items: center; gap: 1rem; } .quote-to .avatar-media { --size: 2rem; width: var(--size); height: var(--size); flex: 0 0 var(--size); max-width: var(--size); border-radius: 50%; background-color: #d4afbd; overflow: hidden; display: flex; border: 1px solid #ddd; } .quote-to .avatar-media img { margin: auto; } .quote-to .avatar-detail .title { font-weight: 700; } .quote-shop { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; } @media (min-width: 1200px) { .quote-shop { padding-right: 1.25rem; margin-right: 0.25rem; border-right: 2px solid #b3b3b3; } } @media (max-width: 1199.98px) { .quote-shop { flex: 0 0 100%; } } .quote-shop .shop-name { font-size: 1rem; font-weight: 600; } .quote-shop .reviews { display: flex; gap: 0.5rem; } .quote-shop .reviews-count { color: var(--brand-color); font-size: 14px; font-weight: 500; line-height: 1.7; } .quote-shop .rating { display: flex; align-items: center; gap: 0.5rem; } .quote-shop .rating-count { color: var(--brand-color); font-size: 14px; font-weight: 500; } .quote-for { padding-top: 1.5rem; display: flex; flex-flow: row wrap; gap: 2rem; justify-content: space-between; } @media (max-width: 767.98px) { .quote-for { display: block; } } @media (max-width: 767.98px) { .quote-for-qty { padding-top: 1.25rem; } } .quote-for-qty .label { font-size: 0.875rem; white-space: nowrap; } .quote-for-qty .qty-wrap { display: flex; gap: 6px; } .quote-for-qty .qty-wrap input, .quote-for-qty .qty-wrap .custom-select, .quote-for-qty .qty-wrap select { width: auto; line-height: 1.2; border-radius: 0.5rem; padding: 0 0.75rem; } .quote-for-qty .qty-wrap .form-control { max-width: 80px; } .quote-for-qty .qty-wrap .form-select { max-width: inherit; line-height: 1.5; padding-left: 2.125rem; } .quote-for-qty .qty-wrap .label { margin: 0; } .quote-for-qty .qty-wrap .errorlist { order: 5; padding: 0; } .quote-for-qty .qty-wrap .errorlist li { font-size: 0.875rem; } .rating-stars { display: flex; align-items: center; } .form-inputfile { position: relative; display: inline-block; vertical-align: middle; position: absolute; left: 1rem; bottom: 0.75rem; } .form-inputfile input[type=file], .form-inputfile [type=file].custom-select { opacity: 0; height: auto; line-height: normal; position: absolute; left: 0; right: 0; top: 0; bottom: 0; cursor: pointer; } .form-inputfile .attachfile { font-size: 0.875rem; display: inline-flex; align-items: center; color: var(--brand-color); font-weight: 600; gap: 0.25rem; } .btn.btn-attachment { position: relative; gap: 5px; padding: 0; border-radius: 0; height: auto; line-height: 1.5; cursor: pointer; color: var(--brand-color); } .btn.btn-attachment .attachment-file { cursor: pointer; opacity: 0; position: absolute; z-index: 1; width: 100%; } .btn.btn-attachment:hover { box-shadow: none; } .sticky-date { background-color: var(--bg-blur-white); color: var(--txt-body); backdrop-filter: blur(10px); padding: 1.5rem; border-top: solid 1px var(--border-color); box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; position: sticky; bottom: 0; z-index: 1; } .dropdown-toggle-custom { text-align: right; cursor: pointer; position: relative; padding-left: 2rem; } .dropdown-toggle-custom-arrow { position: absolute; transform: translate(6px, 0); top: calc(50% - 4px); left: 2px; } .dropdown-toggle-custom-arrow:after, .dropdown-toggle-custom-arrow:before { content: ""; position: absolute; background-color: currentColor; width: 1px; height: 9px; transition: all 0.25s ease-in-out; } .dropdown-toggle-custom-arrow:before { transform: translate(-3px, 0) rotate(-45deg); } .dropdown-toggle-custom-arrow:after { transform: translate(3px, 0) rotate(45deg); } [aria-expanded=true] .dropdown-toggle-custom-arrow:before { transform: translate(-3px, 0) rotate(45deg); } [aria-expanded=true] .dropdown-toggle-custom-arrow:after { transform: translate(3px, 0) rotate(-45deg); } .popover { background-color: var(--bg-white); color: var(--bg-white-text); } .popover-arrow:after { border-left-color: var(--bg-white) !important; } .popover-body { color: currentColor; } .pop-card { display: flex; flex-direction: column; gap: 1rem; padding: 0; background-color: var(--bg-white); color: var(--bg-white-text); min-width: 300px; } .pop-card-header { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 10px; border-radius: 6px; overflow: hidden; position: relative; padding: 0 1rem; padding-top: 40px; } .pop-card-header > * { position: relative; z-index: 1; } .pop-card-header:after { content: ""; background-image: linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12); position: absolute; top: 0; right: 0; left: 0; z-index: 0; height: 80px; pointer-events: none; } .pop-card-header-btn { background-color: var(--bg-white); color: var(--bg-white-text); background-color: var(--bg-white); color: var(--bg-white-text); border: solid 1px var(--border-color); border-radius: 50%; width: 30px; height: 30px; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; } .pop-card-header-start { display: flex; flex-direction: column; } .pop-card-header-end { display: flex; flex-direction: row; gap: 5px; } .pop-card .name { font-size: 1rem; font-weight: 600; margin: 0; } .pop-card-thumbnail { background-color: var(--bg-white); color: var(--bg-white-text); border: solid 2px #fff; border-radius: 50%; box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; aspect-ratio: 1/1; max-width: 80px; margin-bottom: 5px; } .pop-card-body { padding: 0; } .pop-card-body .h6 { font-size: 0.9rem; font-weight: 600; margin-bottom: 1rem; } .user-stats { word-break: break-word; font-size: 0.85rem; list-style: none; } .user-stats-item { list-style: none; padding: 0.5rem 0; display: flex; flex-direction: row; gap: 10px; } .user-stats-item .label { color: var(--txt-black); font-weight: 600; padding: 0; margin-bottom: 0; flex: 0 0 50%; max-width: 50%; } .user-stats-item .value { font-weight: 400; color: var(--txt-body); } .user-stats-item:first-child { padding-top: 0; } .user-stats-item:last-child { padding-bottom: 0; } .user-stats-item-full { flex: 100% !important; max-width: 100% !important; } .user-stats .svg { width: 16px; height: 16px; } .user-stats-inline { flex-flow: row wrap; } .user-stats-inline li { flex-direction: row; justify-content: space-between; border-bottom: solid 1px var(--border-color); } .user-stats-inline li:last-child { border-bottom: none; } .user-stats-inline .label { display: flex; align-items: center; } .user-stats-double { display: flex; flex-flow: row wrap; gap: 1rem; justify-content: space-between; } .user-stats-double li { padding: 0; flex: 0 0 45%; max-width: 45%; } .user-stats-triple { display: flex; flex-wrap: wrap; justify-content: space-between; } @media (max-width: 767.98px) { .user-stats-triple { flex-flow: column; } } .user-stats-triple li { padding: 0; padding-bottom: 1.5rem; } @media (min-width: 992px) { .user-stats-triple li { flex: 0 0 30%; max-width: 30%; } } .user-stats-fourfold { display: flex; flex-wrap: wrap; flex-flow: row wrap; } .user-stats-fourfold li { padding: 0; padding-bottom: 1.5rem; flex: 0 0 24%; max-width: 24%; } .slots-block { display: flex; flex-direction: column; gap: 10px; } .slots-block-head { font-size: 1rem; font-weight: 600; display: flex; gap: 10px; justify-content: space-between; } .slots { border: solid 1px var(--border-color); border-radius: 4px; box-shadow: rgba(0, 0, 0, 0.12) 0px 6px 16px; box-shadow: none; border-radius: 4px; display: flex; flex-direction: column; gap: 10px; margin: 0 0; padding: 1rem; } .slots-item { border-radius: 12px; padding: 0; font-weight: 500; position: relative; font-size: 0.8rem; display: flex; align-items: flex-start; flex-direction: column; gap: 5px; } .slots-item + .slots-item { margin-top: 1rem; } .slots .date { padding: 0; white-space: nowrap; line-height: 1; display: flex; align-items: center; gap: 5px; font-size: 0.85rem; font-weight: 600; margin-bottom: 6px; } .slots .time-wrap { width: 100%; flex-flow: row wrap; gap: 5px; align-items: baseline; display: grid; grid-template-columns: 1fr 1fr; } @media (min-width: 992px) { .slots .time-wrap { grid-template-columns: 1fr 1fr 1fr; } } .slots .time { background-color: var(--bg-gray); color: var(--txt-body); position: relative; border-radius: 2px; line-height: 1; font-size: 0.65rem; padding: 8px 0.575rem; display: flex; align-items: center; gap: 4px; } .slots-remove { margin-right: auto; position: static !important; } .dropdown-slotes { padding: 1.5rem; } .booked-slotes { display: flex; flex-direction: column; padding: 0; } .booked-slotes-head { display: flex; gap: 1rem; justify-content: space-between; } .booked-slotes-body { max-height: 360px; overflow: auto; } .booked-slotes-popover { word-break: break-word; font-size: 0.85rem; list-style: none; display: flex; gap: 0.8rem; flex-direction: column; } .booked-slotes-popover-item { list-style: none; padding: 0; display: flex; gap: 1rem; align-items: flex-start; } .booked-slotes-popover-item .key { background-color: var(--bg-gray); color: var(--txt-body); border-radius: 4px; text-align: center; flex: 0 0 20%; max-width: 20%; min-width: 140px; color: var(--txt-gray); font-size: 0.8rem; font-weight: 500; padding: 4px 6px; } .booked-slotes-popover-item .value { flex: 1; background-color: transparent; text-align: end; font-weight: 500; font-size: 0.75rem; display: flex; gap: 10px; flex-flow: row wrap; padding: 0; } .booked-slotes-popover-item .value .time { line-height: 1; color: var(--txt-gray); border: solid 1px var(--border-color); border-radius: 50px; padding: 3px 6px; white-space: nowrap; } .booked-slotes-popover-item:first-child { padding-top: 0; } .booked-slotes-popover-item:last-child { padding-bottom: 0; } .booked-slotes-popover-item-full { flex: 100% !important; max-width: 100% !important; } .booked-slotes-popover .slots-remove { margin-right: 7px; min-width: 0; flex-shrink: 0; width: 10px; height: 10px; } .booked-slotes-popover .icn { font-size: 11px; } .booked-slotes-popover .dot { background-color: var(--bg-gray); display: block; min-width: 8px; width: 8px; height: 8px; border-radius: 2px; margin-left: 8px; } .theme-switch { display: flex; justify-content: center; align-items: center; position: fixed; z-index: 1030; bottom: 6.5rem; right: 1rem; } .theme-switch .checkbox, .theme-switch .radio { opacity: 0; position: absolute; } .theme-switch .label { background-color: var(--bg-blur-white); display: flex; align-items: center; justify-content: space-between; padding: 10px; border-radius: 50px; position: relative; height: 40px; width: 80px; cursor: pointer; box-shadow: var(--switch-shadow); transition: var(--transition); } .theme-switch .label:hover .moon, .theme-switch .label:hover .sun { transform: rotate(360deg); } .theme-switch .ball { transition: var(--transition); background-color: var(--bg-black); position: absolute; border-radius: 50%; top: 5px; left: 5px; height: 30px; width: 30px; } .theme-switch .moon { color: #f1c40f; transform-origin: center center; transition: all 0.5s cubic-bezier(0.76, 0, 0.24, 1); transform: rotate(0); } .theme-switch .sun { color: #ff6b00; transform-origin: center center; transition: all 0.5s cubic-bezier(0.76, 0, 0.24, 1); transform: rotate(0); } .theme-switch .ball { transform: translatex(0); } [data-theme=dark] .theme-switch .ball { transform: translatex(40px); } @media (prefers-color-scheme: dark) { .theme-switch .ball { transform: translatex(40px); } [data-theme=light] .theme-switch .ball { transform: translatex(0); } } .pac-container { background-color: var(--bg-white); color: var(--bg-white-text); font-family: inherit; box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; z-index: 1070; border: solid 1px var(--border-color) !important; border-radius: 4px; padding: 1rem; } .pac-container .pac-item { color: currentColor; text-align: start !important; cursor: pointer; padding: 8px 10px; border-top: none !important; border-radius: 4px; background-color: transparent; position: relative; overflow: hidden; } .pac-container .pac-item::before { content: ""; background: var(--bg-gray-light); position: absolute; z-index: -1; top: 0; width: 100%; height: 100%; right: 0; left: 0; opacity: 0; transition: all 0.2s cubic-bezier(0.2, 0.91, 0.85, 0.96) 0s; transform: scale(0.75); backface-visibility: hidden; pointer-events: none; } .pac-container .pac-item:is(:hover, :focus, :active, .active)::before { opacity: 1; transform: scale(1); } .pac-container .pac-item:hover, .pac-container .pac-item-selected { background-color: var(--bg-gray); color: var(--txt-body); } .pac-container .pac-item-query { color: currentColor; } .pac-container .pac-icon { background-image: url(images/retina/geo-alt.svg) !important; background-size: 14px !important; background-repeat: no-repeat; background-color: transparent; background-position: center; } [data-theme=dark] .pac-container .pac-icon { filter: invert(1) grayscale(100%) brightness(200%); } .pac-container.pac-logo:after { content: normal !important; } /* Used in blog search autocomplete. */ .text-suggestions { flex: 1; display: flex; flex-direction: column; font-size: 0.75rem; } .text-suggestions li { padding-bottom: 8px; transition: all 0.2s ease-in-out; } .text-suggestions li a { display: block; position: relative; transition: all 0.2s linear; } .text-suggestions li a:before { visibility: hidden; opacity: 0; position: absolute; right: 10px; top: calc(50% - 3px); content: ""; display: block; margin: 0; width: 6px; height: 6px; border-top: 1px solid currentColor; border-left: 1px solid currentColor; transform: rotate(45deg); transition: all 0.2s linear; } .text-suggestions li a:hover { margin-right: 10px; color: var(--brand-color); } .text-suggestions li a:hover:before { right: -12px; visibility: visible; opacity: 1; } [dir=rtl] .default-ltr { direction: ltr; display: inline-flex; } .custom-ui-autocomplete { max-height: 200px; max-width: 500px; overflow: hidden; overflow-y: auto; box-shadow: 0 0 35px 10px rgba(0, 0, 0, 0.1); border-radius: 4px; font-weight: 400; font-size: 0.8rem !important; border: solid 1px var(--border-color); animation: dropdown-menu-fade-in 0.3s ease 1, dropdown-menu-move-up 0.3s ease-out 1; } .custom-ui-autocomplete .ui-menu-item { border-bottom: solid 1px var(--border-color); } .custom-ui-autocomplete .ui-menu-item .ui-menu-item-wrapper { padding: 0.8rem; border-color: transparent !important; } .custom-ui-autocomplete .ui-menu-item:last-child { border-bottom: none; } .custom-ui-autocomplete strong { font-weight: 600; } [data-theme=light] gmp-place-autocomplete { color-scheme: light; font-family: inherit; } [data-theme=dark] gmp-place-autocomplete { color-scheme: dark; font-family: inherit; } gmp-place-autocomplete { font-family: inherit; width: 100%; min-width: 0; display: block; } .toast-title { font-weight: bold; } .toast-message { word-wrap: break-word; } .toast-message a, .toast-message label { color: currentColor; text-decoration: underline; } .toast-message a:hover { color: currentColor; text-decoration: none; } .toast-close-button { width: 20px; height: 20px; position: relative; left: -0.3em; float: right; font-size: 20px; font-weight: bold; color: var(--txt-white); opacity: 0.8; filter: alpha(opacity=80); line-height: 1; text-indent: -99999px; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmkteCIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8cGF0aCBkPSJNNC42NDYgNC42NDZhLjUuNSAwIDAgMSAuNzA4IDBMOCA3LjI5M2wyLjY0Ni0yLjY0N2EuNS41IDAgMCAxIC43MDguNzA4TDguNzA3IDhsMi42NDcgMi42NDZhLjUuNSAwIDAgMS0uNzA4LjcwOEw4IDguNzA3bC0yLjY0NiAyLjY0N2EuNS41IDAgMCAxLS43MDgtLjcwOEw3LjI5MyA4IDQuNjQ2IDUuMzU0YS41LjUgMCAwIDEgMC0uNzA4eiIvPgo8L3N2Zz4="); } .toast-close-button:hover, .toast-close-button:focus { text-decoration: none; cursor: pointer; opacity: 0.4; filter: alpha(opacity=40); } .rtl .toast-close-button { right: -0.3em; float: left; left: 0.3em; } /*Additional properties for button version iOS requires the button element instead of an anchor tag. If you want the anchor version, it requires `href="#"`.*/ button.toast-close-button { padding: 0; cursor: pointer; background-color: transparent; border: 0; -webkit-appearance: none; } .toast-top-center { top: 0; left: 0; width: 100%; } .toast-bottom-center { bottom: 0; left: 0; width: 100%; } .toast-top-full-width { top: 0; left: 0; width: 100%; } .toast-bottom-full-width { bottom: 0; left: 0; width: 100%; } .toast-top-left { top: 12px; right: 12px; } .toast-top-right { top: 12px; left: 12px; } .toast-bottom-right { left: 12px; bottom: 12px; } .toast-bottom-left { bottom: 12px; right: 12px; } #toast-container { position: fixed; z-index: 999999; pointer-events: none; /*overrides*/ } #toast-container * { box-sizing: border-box; } #toast-container > div { position: relative; pointer-events: auto; overflow: hidden; margin: 0 0 10px; padding: 1rem; padding-right: 50px; width: 300px; border-radius: 6px; background-position: 15px center; background-repeat: no-repeat; background-size: 20px; opacity: 0.99; filter: alpha(opacity=99); font-weight: 600 !important; box-shadow: rgba(67, 90, 111, 0.3) 0px 0px 1px, rgba(67, 90, 111, 0.47) 0px 8px 10px -4px; } #toast-container > div.rtl { direction: rtl; padding: 15px 50px 15px 15px; background-position: right 15px center; } #toast-container > div:hover { opacity: 1; filter: alpha(opacity=100); cursor: pointer; } #toast-container > .toast-info { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktaW5mby1jaXJjbGUtZmlsbCIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICAgIDxwYXRoICBmaWxsPSIjMTIzMDk1IiAgZD0iTTggMTZBOCA4IDAgMSAwIDggMGE4IDggMCAwIDAgMCAxNnptLjkzLTkuNDEyLTEgNC43MDVjLS4wNy4zNC4wMjkuNTMzLjMwNC41MzMuMTk0IDAgLjQ4Ny0uMDcuNjg2LS4yNDZsLS4wODguNDE2Yy0uMjg3LjM0Ni0uOTIuNTk4LTEuNDY1LjU5OC0uNzAzIDAtMS4wMDItLjQyMi0uODA4LTEuMzE5bC43MzgtMy40NjhjLjA2NC0uMjkzLjAwNi0uMzk5LS4yODctLjQ3bC0uNDUxLS4wODEuMDgyLS4zODEgMi4yOS0uMjg3ek04IDUuNWExIDEgMCAxIDEgMC0yIDEgMSAwIDAgMSAwIDJ6Ii8+Cjwvc3ZnPg=="); } #toast-container > .toast-error { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktZXhjbGFtYXRpb24tY2lyY2xlLWZpbGwiIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgICA8cGF0aCBmaWxsPSIjOWIwMjM1IiBkPSJNMTYgOEE4IDggMCAxIDEgMCA4YTggOCAwIDAgMSAxNiAwek04IDRhLjkwNS45MDUgMCAwIDAtLjkuOTk1bC4zNSAzLjUwN2EuNTUyLjU1MiAwIDAgMCAxLjEgMGwuMzUtMy41MDdBLjkwNS45MDUgMCAwIDAgOCA0em0uMDAyIDZhMSAxIDAgMSAwIDAgMiAxIDEgMCAwIDAgMC0yeiIvPgo8L3N2Zz4="); } #toast-container > .toast-success { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktY2hlY2stY2lyY2xlLWZpbGwiIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgICA8cGF0aCAgZmlsbD0iIzEwNzA2NiIgZD0iTTE2IDhBOCA4IDAgMSAxIDAgOGE4IDggMCAwIDEgMTYgMHptLTMuOTctMy4wM2EuNzUuNzUgMCAwIDAtMS4wOC4wMjJMNy40NzcgOS40MTcgNS4zODQgNy4zMjNhLjc1Ljc1IDAgMCAwLTEuMDYgMS4wNkw2Ljk3IDExLjAzYS43NS43NSAwIDAgMCAxLjA3OS0uMDJsMy45OTItNC45OWEuNzUuNzUgMCAwIDAtLjAxLTEuMDV6Ii8+Cjwvc3ZnPg=="); } #toast-container > .toast-warning { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktc2hpZWxkLWV4Y2xhbWF0aW9uIiB2aWV3Qm94PSIwIDAgMTYgMTYiPgogICAgPHBhdGggZmlsbD0iIzg4NWMwMCIgIGQ9Ik01LjMzOCAxLjU5YTYxLjQ0IDYxLjQ0IDAgMCAwLTIuODM3Ljg1Ni40ODEuNDgxIDAgMCAwLS4zMjguMzljLS41NTQgNC4xNTcuNzI2IDcuMTkgMi4yNTMgOS4xODhhMTAuNzI1IDEwLjcyNSAwIDAgMCAyLjI4NyAyLjIzM2MuMzQ2LjI0NC42NTIuNDIuODkzLjUzMy4xMi4wNTcuMjE4LjA5NS4yOTMuMTE4YS41NS41NSAwIDAgMCAuMTAxLjAyNS42MTUuNjE1IDAgMCAwIC4xLS4wMjVjLjA3Ni0uMDIzLjE3NC0uMDYxLjI5NC0uMTE4LjI0LS4xMTMuNTQ3LS4yOS44OTMtLjUzM2ExMC43MjYgMTAuNzI2IDAgMCAwIDIuMjg3LTIuMjMzYzEuNTI3LTEuOTk3IDIuODA3LTUuMDMxIDIuMjUzLTkuMTg4YS40OC40OCAwIDAgMC0uMzI4LS4zOWMtLjY1MS0uMjEzLTEuNzUtLjU2LTIuODM3LS44NTVDOS41NTIgMS4yOSA4LjUzMSAxLjA2NyA4IDEuMDY3Yy0uNTMgMC0xLjU1Mi4yMjMtMi42NjIuNTI0ek01LjA3Mi41NkM2LjE1Ny4yNjUgNy4zMSAwIDggMHMxLjg0My4yNjUgMi45MjguNTZjMS4xMS4zIDIuMjI5LjY1NSAyLjg4Ny44N2ExLjU0IDEuNTQgMCAwIDEgMS4wNDQgMS4yNjJjLjU5NiA0LjQ3Ny0uNzg3IDcuNzk1LTIuNDY1IDkuOTlhMTEuNzc1IDExLjc3NSAwIDAgMS0yLjUxNyAyLjQ1MyA3LjE1OSA3LjE1OSAwIDAgMS0xLjA0OC42MjVjLS4yOC4xMzItLjU4MS4yNC0uODI5LjI0cy0uNTQ4LS4xMDgtLjgyOS0uMjRhNy4xNTggNy4xNTggMCAwIDEtMS4wNDgtLjYyNSAxMS43NzcgMTEuNzc3IDAgMCAxLTIuNTE3LTIuNDUzQzEuOTI4IDEwLjQ4Ny41NDUgNy4xNjkgMS4xNDEgMi42OTJBMS41NCAxLjU0IDAgMCAxIDIuMTg1IDEuNDMgNjIuNDU2IDYyLjQ1NiAwIDAgMSA1LjA3Mi41NnoiLz4KICAgIDxwYXRoIGZpbGw9IiM4ODVjMDAiICBkPSJNNy4wMDEgMTFhMSAxIDAgMSAxIDIgMCAxIDEgMCAwIDEtMiAwek03LjEgNC45OTVhLjkwNS45MDUgMCAxIDEgMS44IDBsLS4zNSAzLjUwN2EuNTUzLjU1MyAwIDAgMS0xLjEgMEw3LjEgNC45OTV6Ii8+Cjwvc3ZnPg=="); } #toast-container.toast-top-center > div, #toast-container.toast-bottom-center > div { width: 300px; margin-right: auto; margin-left: auto; } #toast-container.toast-top-full-width > div, #toast-container.toast-bottom-full-width > div { width: 96%; margin-right: auto; margin-left: auto; } .toast-success { background-color: rgb(233.152173913, 251.847826087, 249.8913043478); border: solid 1px #1dc9b7; color: rgb(16.1391304348, 111.8608695652, 101.8434782609); } .toast-error { background-color: rgb(254.785, 233.715, 240.7025); border: solid 1px #fd397a; color: rgb(155.43, 1.57, 52.595); } .toast-info { background-color: rgb(244.7105263158, 246.8289473684, 253.7894736842); border: solid 1px #5578eb; color: rgb(17.5789473684, 48.3421052632, 149.4210526316); } .toast-warning { background-color: rgb(255, 249.5384615385, 238); border: solid 1px #ffb822; color: rgb(136, 92.3076923077, 0); } .toast-progress { position: absolute; right: 0; bottom: 0; height: 4px; background-color: #000000; opacity: 0.4; filter: alpha(opacity=40); } /*Responsive Design*/ @media all and (max-width: 240px) { #toast-container > div { padding: 8px 8px 8px 50px; width: 11em; } #toast-container > div.rtl { padding: 8px 50px 8px 8px; } #toast-container .toast-close-button { left: -0.2em; top: -0.2em; } #toast-container .rtl .toast-close-button { right: -0.2em; left: 0.2em; } } @media all and (min-width: 241px) and (max-width: 480px) { #toast-container > div { padding: 8px 8px 8px 50px; width: 18em; } #toast-container > div.rtl { padding: 8px 50px 8px 8px; } #toast-container .toast-close-button { left: -0.2em; top: -0.2em; } #toast-container .rtl .toast-close-button { right: -0.2em; left: 0.2em; } } @media all and (min-width: 481px) and (max-width: 768px) { #toast-container > div { padding: 15px 15px 15px 50px; width: 25em; } #toast-container > div.rtl { padding: 15px 50px 15px 15px; } } /*! jQuery UI - v1.12.0 - 2016-07-08 * http://jqueryui.com * Includes: core.css, accordion.css, autocomplete.css, menu.css, button.css, controlgroup.css, checkboxradio.css, datepicker.css, dialog.css, draggable.css, resizable.css, progressbar.css, selectable.css, selectmenu.css, slider.css, sortable.css, spinner.css, tabs.css, tooltip.css, theme.css * To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Arial%2CHelvetica%2Csans-serif&fsDefault=1em&fwDefault=normal&cornerRadius=3px&bgColorHeader=e9e9e9&bgTextureHeader=flat&borderColorHeader=dddddd&fcHeader=333333&iconColorHeader=444444&bgColorContent=ffffff&bgTextureContent=flat&borderColorContent=dddddd&fcContent=333333&iconColorContent=444444&bgColorDefault=f6f6f6&bgTextureDefault=flat&borderColorDefault=c5c5c5&fcDefault=454545&iconColorDefault=777777&bgColorHover=ededed&bgTextureHover=flat&borderColorHover=cccccc&fcHover=2b2b2b&iconColorHover=555555&bgColorActive=007fff&bgTextureActive=flat&borderColorActive=003eff&fcActive=ffffff&iconColorActive=ffffff&bgColorHighlight=fffa90&bgTextureHighlight=flat&borderColorHighlight=dad55e&fcHighlight=777620&iconColorHighlight=777620&bgColorError=fddfdf&bgTextureError=flat&borderColorError=f1a899&fcError=5f3f3f&iconColorError=cc0000&bgColorOverlay=aaaaaa&bgTextureOverlay=flat&bgImgOpacityOverlay=0&opacityOverlay=30&bgColorShadow=666666&bgTextureShadow=flat&bgImgOpacityShadow=0&opacityShadow=30&thicknessShadow=5px&offsetTopShadow=0px&offsetLeftShadow=0px&cornerRadiusShadow=8px * Copyright jQuery Foundation and other contributors; Licensed MIT */ /* Layout helpers*/ .ui-helper-hidden { display: none; } .ui-helper-hidden-accessible { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; } .ui-helper-clearfix:before, .ui-helper-clearfix:after { content: ""; display: table; border-collapse: collapse; } .ui-helper-clearfix:after { clear: both; } .ui-helper-zfix { width: 100%; height: 100%; top: 0; right: 0; position: absolute; opacity: 0; filter: Alpha(Opacity=0); /* support: IE8 */ } .ui-front { z-index: 100; } /* Interaction Cues ----------------------------------*/ .ui-state-disabled { cursor: default !important; pointer-events: none; } /* Icons ----------------------------------*/ .ui-icon { display: inline-block; vertical-align: middle; margin-top: -0.25em; position: relative; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; } .ui-widget-icon-block { right: 50%; margin-right: -8px; display: block; } /* Misc visuals ----------------------------------*/ /* Overlays */ .ui-widget-overlay { position: fixed; top: 0; right: 0; width: 100%; height: 100%; } .ui-accordion .ui-accordion-header { display: block; cursor: pointer; position: relative; margin: 2px 0 0 0; padding: 0.5em 0.5em 0.5em 0.7em; font-size: 100%; } .ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; overflow: auto; } .ui-autocomplete { position: absolute; top: 0; right: 0; cursor: default; } .ui-menu { list-style: none; padding: 0; margin: 0; display: block; outline: 0; } .ui-menu .ui-menu { position: absolute; } .ui-menu .ui-menu-item { margin: 0; cursor: pointer; /* support: IE10, see #8844 */ list-style-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"); } .ui-menu .ui-menu-item-wrapper { position: relative; padding: 3px 1em 3px 0.4em; } .ui-menu .ui-menu-divider { margin: 5px 0; height: 0; font-size: 0; line-height: 0; border-width: 1px 0 0 0; } .ui-menu .ui-state-focus, .ui-menu .ui-state-active { margin: -1px; } /* icon support */ .ui-menu-icons { position: relative; } .ui-menu-icons .ui-menu-item-wrapper { padding-right: 2em; } /* left-aligned */ .ui-menu .ui-icon { position: absolute; top: 0; bottom: 0; right: 0.2em; margin: auto 0; } /* right-aligned */ .ui-menu .ui-menu-icon { right: auto; left: 0; } .ui-button { padding: 0.4em 1em; display: inline-block; position: relative; line-height: normal; margin-left: 0.1em; cursor: pointer; vertical-align: middle; text-align: center; -webkit-user-select: none; -moz-user-select: none; user-select: none; /* Support: IE <= 11 */ overflow: visible; } .ui-button, .ui-button:link, .ui-button:visited, .ui-button:hover, .ui-button:active { text-decoration: none; } /* to make room for the icon, a width needs to be set here */ .ui-button-icon-only { width: 2em; box-sizing: border-box; text-indent: -9999px; white-space: nowrap; } /* no icon support for input elements */ input.ui-button.ui-button-icon-only, .ui-button.ui-button-icon-only.custom-select { text-indent: 0; } /* button icon element(s) */ .ui-button-icon-only .ui-icon { position: absolute; top: 50%; right: 50%; margin-top: -8px; margin-right: -8px; } .ui-button.ui-icon-notext .ui-icon { padding: 0; width: 2.1em; height: 2.1em; text-indent: -9999px; white-space: nowrap; } input.ui-button.ui-icon-notext .ui-icon, .ui-button.ui-icon-notext.custom-select .ui-icon { width: auto; height: auto; text-indent: 0; white-space: normal; padding: 0.4em 1em; } /* workarounds */ /* Support: Firefox 5 - 40 */ input.ui-button::-moz-focus-inner, .ui-button.custom-select::-moz-focus-inner, button.ui-button::-moz-focus-inner { border: 0; padding: 0; } .ui-controlgroup { vertical-align: middle; display: inline-block; } .ui-controlgroup > .ui-controlgroup-item { float: left; margin-right: 0; margin-left: 0; } .ui-controlgroup > .ui-controlgroup-item:focus, .ui-controlgroup > .ui-controlgroup-item.ui-visual-focus { z-index: 9999; } .ui-controlgroup-vertical > .ui-controlgroup-item { display: block; float: none; width: 100%; margin-top: 0; margin-bottom: 0; text-align: left; } .ui-controlgroup-vertical .ui-controlgroup-item { box-sizing: border-box; } .ui-controlgroup .ui-controlgroup-label { padding: 0.4em 1em; } .ui-controlgroup .ui-controlgroup-label span { font-size: 80%; } .ui-controlgroup-horizontal .ui-controlgroup-label + .ui-controlgroup-item { border-left: none; } .ui-controlgroup-vertical .ui-controlgroup-label + .ui-controlgroup-item { border-top: none; } .ui-controlgroup-horizontal .ui-controlgroup-label.ui-widget-content { border-right: none; } .ui-controlgroup-vertical .ui-controlgroup-label.ui-widget-content { border-bottom: none; } /* Spinner specific style fixes */ .ui-controlgroup-vertical .ui-spinner-input { /* Support: IE8 only, Android < 4.4 only */ width: 75%; width: calc(100% - 2.4em); } .ui-controlgroup-vertical .ui-spinner .ui-spinner-up { border-top-style: solid; } .ui-checkboxradio-label .ui-icon-background { box-shadow: inset 1px 1px 1px #ccc; border-radius: 0.12em; border: none; } .ui-checkboxradio-radio-label .ui-icon-background { width: 16px; height: 16px; border-radius: 1em; overflow: visible; border: none; } .ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon, .ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon { background-image: none; width: 8px; height: 8px; border-width: 4px; border-style: solid; } .ui-checkboxradio-disabled { pointer-events: none; } .ui-datepicker { width: 17em; padding: 0.2em 0.2em 0; display: none; } .ui-datepicker .ui-datepicker-header { position: relative; padding: 0.2em 0; } .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { cursor: pointer; position: absolute; top: 3px; width: 1.8em; height: 1.8em; } .ui-datepicker .ui-datepicker-prev.ui-state-hover, .ui-datepicker .ui-datepicker-next.ui-state-hover { border: none !important; } /*.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { top: 1px; }*/ .ui-datepicker .ui-datepicker-prev { right: 5px; } .ui-datepicker .ui-datepicker-next { left: 5px; } /* .ui-datepicker .ui-datepicker-prev-hover { left: 1px; } .ui-datepicker .ui-datepicker-next-hover { right: 1px; } */ .ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: block; position: absolute; right: 50%; margin-right: -8px; top: 50%; margin-top: -8px; } .ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; } .ui-datepicker .ui-datepicker-title select { font-size: 1em; margin: 1px 0; } .ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year { width: 48%; height: 30px; padding-right: 5px; } .ui-datepicker table { width: 100%; font-size: 0.9em; border-collapse: collapse; margin: 0 0 0.4em; } .ui-datepicker th { padding: 0.7em 0.3em; text-align: center; font-weight: bold; border: 0; } .ui-datepicker td { border: 0; padding: 1px; border: 1px solid #eee; } .ui-datepicker td span, .ui-datepicker td a { display: block; padding: 0.2em; text-align: right; text-decoration: none; } .ui-datepicker .ui-datepicker-buttonpane { background-image: none; margin: 0.5rem 0; padding: 0 0.2em; border-left: 0; border-right: 0; border-bottom: 0; } .ui-datepicker .ui-datepicker-buttonpane button { float: right; margin: 0.5em 0.2em 0.4em; cursor: pointer; padding: 0.2em 0.6em 0.3em 0.6em; width: auto; overflow: visible; } .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float: left; } /* with multiple calendars */ .ui-datepicker.ui-datepicker-multi { width: auto; } .ui-datepicker-multi .ui-datepicker-group { float: left; } .ui-datepicker-multi .ui-datepicker-group table { width: 95%; margin: 0 auto 0.4em; } .ui-datepicker-multi-2 .ui-datepicker-group { width: 50%; } .ui-datepicker-multi-3 .ui-datepicker-group { width: 33.3%; } .ui-datepicker-multi-4 .ui-datepicker-group { width: 25%; } .ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header, .ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header { border-left-width: 0; } .ui-datepicker-multi .ui-datepicker-buttonpane { clear: left; } .ui-datepicker-row-break { clear: both; width: 100%; font-size: 0; } /* RTL support */ .ui-datepicker-rtl { direction: rtl; } .ui-datepicker-rtl .ui-datepicker-prev { left: 2px; right: auto; } .ui-datepicker-rtl .ui-datepicker-next { right: 2px; left: auto; } .ui-datepicker-rtl .ui-datepicker-prev:hover { left: 1px; right: auto; } .ui-datepicker-rtl .ui-datepicker-next:hover { right: 1px; left: auto; } .ui-datepicker-rtl .ui-datepicker-buttonpane { clear: right; } .ui-datepicker-rtl .ui-datepicker-buttonpane button { float: left; } .ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current, .ui-datepicker-rtl .ui-datepicker-group { float: right; } .ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header, .ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header { border-right-width: 0; border-left-width: 1px; } /* Icons */ .ui-datepicker .ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; right: 0.5em; top: 0.3em; } .ui-dialog { position: absolute; top: 0; right: 0; padding: 0.2em; outline: 0; } .ui-dialog .ui-dialog-titlebar { padding: 0.4em 1em; position: relative; } .ui-dialog .ui-dialog-title { float: left; margin: 0.1em 0; white-space: nowrap; width: 90%; overflow: hidden; text-overflow: ellipsis; } .ui-dialog .ui-dialog-titlebar-close { position: absolute; left: 0.3em; top: 50%; width: 20px; margin: -10px 0 0 0; padding: 1px; height: 20px; } .ui-dialog .ui-dialog-content { position: relative; border: 0; padding: 0.5em 1em; background: none; overflow: auto; } .ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin-top: 0.5em; padding: 0.3em 1em 0.5em 0.4em; } .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: right; } .ui-dialog .ui-dialog-buttonpane button { margin: 0.5em 0.4em 0.5em 0; cursor: pointer; } .ui-dialog .ui-resizable-n { height: 2px; top: 0; } .ui-dialog .ui-resizable-e { width: 2px; left: 0; } .ui-dialog .ui-resizable-s { height: 2px; bottom: 0; } .ui-dialog .ui-resizable-w { width: 2px; right: 0; } .ui-dialog .ui-resizable-se, .ui-dialog .ui-resizable-sw, .ui-dialog .ui-resizable-ne, .ui-dialog .ui-resizable-nw { width: 7px; height: 7px; } .ui-dialog .ui-resizable-se { left: 0; bottom: 0; } .ui-dialog .ui-resizable-sw { right: 0; bottom: 0; } .ui-dialog .ui-resizable-ne { left: 0; top: 0; } .ui-dialog .ui-resizable-nw { right: 0; top: 0; } .ui-draggable .ui-dialog-titlebar { cursor: move; } .ui-draggable-handle { touch-action: none; } .ui-resizable { position: relative; } .ui-resizable-handle { position: absolute; font-size: 0.1px; display: block; touch-action: none; } .ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; } .ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; right: 0; } .ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; right: 0; } .ui-resizable-e { cursor: e-resize; width: 7px; left: -5px; top: 0; height: 100%; } .ui-resizable-w { cursor: w-resize; width: 7px; right: -5px; top: 0; height: 100%; } .ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; left: 1px; bottom: 1px; } .ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; right: -5px; bottom: -5px; } .ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; right: -5px; top: -5px; } .ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; left: -5px; top: -5px; } .ui-progressbar { height: 2em; text-align: left; overflow: hidden; } .ui-progressbar .ui-progressbar-value { margin: -1px; height: 100%; } .ui-progressbar .ui-progressbar-overlay { background: url("data:image/gif;base64,R0lGODlhKAAoAIABAAAAAP///yH/C05FVFNDQVBFMi4wAwEAAAAh+QQJAQABACwAAAAAKAAoAAACkYwNqXrdC52DS06a7MFZI+4FHBCKoDeWKXqymPqGqxvJrXZbMx7Ttc+w9XgU2FB3lOyQRWET2IFGiU9m1frDVpxZZc6bfHwv4c1YXP6k1Vdy292Fb6UkuvFtXpvWSzA+HycXJHUXiGYIiMg2R6W459gnWGfHNdjIqDWVqemH2ekpObkpOlppWUqZiqr6edqqWQAAIfkECQEAAQAsAAAAACgAKAAAApSMgZnGfaqcg1E2uuzDmmHUBR8Qil95hiPKqWn3aqtLsS18y7G1SzNeowWBENtQd+T1JktP05nzPTdJZlR6vUxNWWjV+vUWhWNkWFwxl9VpZRedYcflIOLafaa28XdsH/ynlcc1uPVDZxQIR0K25+cICCmoqCe5mGhZOfeYSUh5yJcJyrkZWWpaR8doJ2o4NYq62lAAACH5BAkBAAEALAAAAAAoACgAAAKVDI4Yy22ZnINRNqosw0Bv7i1gyHUkFj7oSaWlu3ovC8GxNso5fluz3qLVhBVeT/Lz7ZTHyxL5dDalQWPVOsQWtRnuwXaFTj9jVVh8pma9JjZ4zYSj5ZOyma7uuolffh+IR5aW97cHuBUXKGKXlKjn+DiHWMcYJah4N0lYCMlJOXipGRr5qdgoSTrqWSq6WFl2ypoaUAAAIfkECQEAAQAsAAAAACgAKAAAApaEb6HLgd/iO7FNWtcFWe+ufODGjRfoiJ2akShbueb0wtI50zm02pbvwfWEMWBQ1zKGlLIhskiEPm9R6vRXxV4ZzWT2yHOGpWMyorblKlNp8HmHEb/lCXjcW7bmtXP8Xt229OVWR1fod2eWqNfHuMjXCPkIGNileOiImVmCOEmoSfn3yXlJWmoHGhqp6ilYuWYpmTqKUgAAIfkECQEAAQAsAAAAACgAKAAAApiEH6kb58biQ3FNWtMFWW3eNVcojuFGfqnZqSebuS06w5V80/X02pKe8zFwP6EFWOT1lDFk8rGERh1TTNOocQ61Hm4Xm2VexUHpzjymViHrFbiELsefVrn6XKfnt2Q9G/+Xdie499XHd2g4h7ioOGhXGJboGAnXSBnoBwKYyfioubZJ2Hn0RuRZaflZOil56Zp6iioKSXpUAAAh+QQJAQABACwAAAAAKAAoAAACkoQRqRvnxuI7kU1a1UU5bd5tnSeOZXhmn5lWK3qNTWvRdQxP8qvaC+/yaYQzXO7BMvaUEmJRd3TsiMAgswmNYrSgZdYrTX6tSHGZO73ezuAw2uxuQ+BbeZfMxsexY35+/Qe4J1inV0g4x3WHuMhIl2jXOKT2Q+VU5fgoSUI52VfZyfkJGkha6jmY+aaYdirq+lQAACH5BAkBAAEALAAAAAAoACgAAAKWBIKpYe0L3YNKToqswUlvznigd4wiR4KhZrKt9Upqip61i9E3vMvxRdHlbEFiEXfk9YARYxOZZD6VQ2pUunBmtRXo1Lf8hMVVcNl8JafV38aM2/Fu5V16Bn63r6xt97j09+MXSFi4BniGFae3hzbH9+hYBzkpuUh5aZmHuanZOZgIuvbGiNeomCnaxxap2upaCZsq+1kAACH5BAkBAAEALAAAAAAoACgAAAKXjI8By5zf4kOxTVrXNVlv1X0d8IGZGKLnNpYtm8Lr9cqVeuOSvfOW79D9aDHizNhDJidFZhNydEahOaDH6nomtJjp1tutKoNWkvA6JqfRVLHU/QUfau9l2x7G54d1fl995xcIGAdXqMfBNadoYrhH+Mg2KBlpVpbluCiXmMnZ2Sh4GBqJ+ckIOqqJ6LmKSllZmsoq6wpQAAAh+QQJAQABACwAAAAAKAAoAAAClYx/oLvoxuJDkU1a1YUZbJ59nSd2ZXhWqbRa2/gF8Gu2DY3iqs7yrq+xBYEkYvFSM8aSSObE+ZgRl1BHFZNr7pRCavZ5BW2142hY3AN/zWtsmf12p9XxxFl2lpLn1rseztfXZjdIWIf2s5dItwjYKBgo9yg5pHgzJXTEeGlZuenpyPmpGQoKOWkYmSpaSnqKileI2FAAACH5BAkBAAEALAAAAAAoACgAAAKVjB+gu+jG4kORTVrVhRlsnn2dJ3ZleFaptFrb+CXmO9OozeL5VfP99HvAWhpiUdcwkpBH3825AwYdU8xTqlLGhtCosArKMpvfa1mMRae9VvWZfeB2XfPkeLmm18lUcBj+p5dnN8jXZ3YIGEhYuOUn45aoCDkp16hl5IjYJvjWKcnoGQpqyPlpOhr3aElaqrq56Bq7VAAAOw=="); height: 100%; filter: alpha(opacity=25); /* support: IE8 */ opacity: 0.25; } .ui-progressbar-indeterminate .ui-progressbar-value { background-image: none; } .ui-selectable { touch-action: none; } .ui-selectable-helper { position: absolute; z-index: 100; border: 1px dotted black; } .ui-selectmenu-menu { padding: 0; margin: 0; position: absolute; top: 0; right: 0; display: none; } .ui-selectmenu-menu .ui-menu { overflow: auto; overflow-x: hidden; padding-bottom: 1px; } .ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup { font-size: 1em; font-weight: bold; line-height: 1.5; padding: 2px 0.4em; margin: 0.5em 0 0 0; height: auto; border: 0; } .ui-selectmenu-open { display: block; } .ui-selectmenu-text { display: block; margin-left: 20px; overflow: hidden; text-overflow: ellipsis; } .ui-selectmenu-button.ui-button { text-align: left; white-space: nowrap; width: 14em; } .ui-selectmenu-icon.ui-icon { float: right; margin-top: 0; } .ui-slider { border: none !important; position: relative; text-align: left; } .ui-slider .ui-slider-handle { border-radius: 100%; border: none !important; background: #c4c8cc !important; position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; touch-action: none; } .ui-slider .ui-slider-range { border: none !important; background: #0064ca !important; position: absolute; z-index: 1; font-size: 0.7em; display: block; border: 0; background-position: 0 0; } /* support: IE8 - See #6727 */ .ui-slider.ui-state-disabled .ui-slider-handle, .ui-slider.ui-state-disabled .ui-slider-range { filter: inherit; } .ui-slider-horizontal { background: #e9e9e9 !important; height: 6px; } .ui-slider-horizontal .ui-slider-handle { top: -0.4em; margin-right: -0.6em; } .ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; } .ui-slider-horizontal .ui-slider-range-min { right: 0; } .ui-slider-horizontal .ui-slider-range-max { left: 0; } .ui-slider-vertical { width: 0.8em; height: 100px; } .ui-slider-vertical .ui-slider-handle { right: -0.3em; margin-right: 0; margin-bottom: -0.6em; } .ui-slider-vertical .ui-slider-range { right: 0; width: 100%; } .ui-slider-vertical .ui-slider-range-min { bottom: 0; } .ui-slider-vertical .ui-slider-range-max { top: 0; } .ui-sortable-handle { touch-action: none; } .ui-spinner { position: relative; display: inline-block; overflow: hidden; padding: 0; vertical-align: middle; } .ui-spinner-input { border: none; background: none; color: inherit; padding: 0.222em 0; margin: 0.2em 0; vertical-align: middle; margin-right: 0.4em; margin-left: 2em; } .ui-spinner-button { width: 1.6em; height: 50%; font-size: 0.5em; padding: 0; margin: 0; text-align: center; position: absolute; cursor: default; display: block; overflow: hidden; left: 0; } /* more specificity required here to override default borders */ .ui-spinner a.ui-spinner-button { border-top-style: none; border-bottom-style: none; border-right-style: none; } .ui-spinner-up { top: 0; } .ui-spinner-down { bottom: 0; } .ui-tabs { position: relative; /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */ padding: 0.2em; } .ui-tabs .ui-tabs-nav { margin: 0; padding: 0.2em 0.2em 0; } .ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 0; margin: 1px 0.2em 0 0; border-bottom-width: 0; padding: 0; white-space: nowrap; } .ui-tabs .ui-tabs-nav .ui-tabs-anchor { float: left; padding: 0.5em 1em; text-decoration: none; } .ui-tabs .ui-tabs-nav li.ui-tabs-active { margin-bottom: -1px; padding-bottom: 1px; } .ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor, .ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor, .ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor { cursor: text; } .ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor { cursor: pointer; } .ui-tabs .ui-tabs-panel { display: block; border-width: 0; padding: 1em 1.4em; background: none; } .ui-tooltip { padding: 8px; position: absolute; z-index: 9999; max-width: 300px; } body .ui-tooltip { border-width: 2px; } /* Component containers ----------------------------------*/ .ui-widget { font-family: Arial, Helvetica, sans-serif; font-size: 1em; } .ui-widget .ui-widget { font-size: 1em; } .ui-widget input, .ui-widget .custom-select, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Arial, Helvetica, sans-serif; font-size: 1em; } .ui-widget.ui-widget-content { border: 1px solid #c5c5c5; } .ui-widget-content { border: 1px solid #dddddd; background-color: #fff; color: #333333; } .ui-widget-content a { color: #333333; } .ui-widget-header { border: 1px solid #dddddd; background: #e9e9e9; color: #333333; font-weight: bold; } .ui-widget-header a { color: #333333; } /* Interaction states ----------------------------------*/ .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active { border: 1px solid #c5c5c5; background: #f6f6f6; font-weight: normal; color: #454545; } .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited, a.ui-button, a:link.ui-button, a:visited.ui-button, .ui-button { color: #454545; text-decoration: none; } .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus, .ui-button:hover, .ui-button:focus { border: 1px solid #cccccc; background: #ededed; font-weight: normal; color: #2b2b2b; } .ui-state-hover a, .ui-state-hover a:hover, .ui-state-hover a:link, .ui-state-hover a:visited, .ui-state-focus a, .ui-state-focus a:hover, .ui-state-focus a:link, .ui-state-focus a:visited, a.ui-button:hover, a.ui-button:focus { color: #2b2b2b; text-decoration: none; } .ui-visual-focus { box-shadow: 0 0 3px 1px rgb(94, 158, 214); } .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover { border: 1px solid #003eff; background: #007fff; font-weight: normal; color: var(--txt-white); } .ui-icon-background, .ui-state-active .ui-icon-background { border: #003eff; background-color: #ffffff; } .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: var(--txt-white); text-decoration: none; } /* Interaction Cues ----------------------------------*/ .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight { border: 1px solid #dad55e; background: #fffa90; color: #777620; } .ui-state-checked { border: 1px solid #dad55e; background: #fffa90; } .ui-state-highlight a, .ui-widget-content .ui-state-highlight a, .ui-widget-header .ui-state-highlight a { color: #777620; } .ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error { border: 1px solid #f1a899; background: #fddfdf; color: #5f3f3f; } .ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a { color: #5f3f3f; } .ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text { color: #5f3f3f; } .ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary { font-weight: bold; } .ui-priority-secondary, .ui-widget-content .ui-priority-secondary, .ui-widget-header .ui-priority-secondary { opacity: 0.7; filter: Alpha(Opacity=70); /* support: IE8 */ font-weight: normal; } .ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled { opacity: 0.35; filter: Alpha(Opacity=35); /* support: IE8 */ background-image: none; } .ui-state-disabled .ui-icon { filter: Alpha(Opacity=35); /* support: IE8 - See #6059 */ } /* Icons ----------------------------------*/ /* states and images */ .ui-icon { width: 16px; height: 16px; } .ui-icon, .ui-widget-content .ui-icon { background-image: url("images/ui-icons_222222_256x240.png"); } .ui-widget-header .ui-icon { background-image: url("images/ui-icons_222222_256x240.png"); } .ui-button .ui-icon { background-image: url("images/ui-icons_777777_256x240.png"); } .ui-state-hover .ui-icon, .ui-state-focus .ui-icon, .ui-button:hover .ui-icon, .ui-button:focus .ui-icon, .ui-state-default .ui-icon { background-image: url("images/ui-icons_222222_256x240.png"); } .ui-state-active .ui-icon, .ui-button:active .ui-icon { background-image: url("images/ui-icons_ffffff_256x240.png"); } .ui-state-highlight .ui-icon, .ui-button .ui-state-highlight.ui-icon { background-image: url("images/ui-icons_777620_256x240.png"); } .ui-state-error .ui-icon, .ui-state-error-text .ui-icon { background-image: url("images/ui-icons_cc0000_256x240.png"); } /* positioning */ .ui-icon-blank { background-position: 16px 16px; } .ui-icon-caret-1-n { background-position: 0 0; } .ui-icon-caret-1-ne { background-position: -16px 0; } .ui-icon-caret-1-e { background-position: -32px 0; } .ui-icon-caret-1-se { background-position: -48px 0; } .ui-icon-caret-1-s { background-position: -65px 0; } .ui-icon-caret-1-sw { background-position: -80px 0; } .ui-icon-caret-1-w { background-position: -96px 0; } .ui-icon-caret-1-nw { background-position: -112px 0; } .ui-icon-caret-2-n-s { background-position: -128px 0; } .ui-icon-caret-2-e-w { background-position: -144px 0; } .ui-icon-triangle-1-n { background-position: 0 -16px; } .ui-icon-triangle-1-ne { background-position: -16px -16px; } .ui-icon-triangle-1-e { background-position: -32px -16px; } .ui-icon-triangle-1-se { background-position: -48px -16px; } .ui-icon-triangle-1-s { background-position: -65px -16px; } .ui-icon-triangle-1-sw { background-position: -80px -16px; } .ui-icon-triangle-1-w { background-position: -96px -16px; } .ui-icon-triangle-1-nw { background-position: -112px -16px; } .ui-icon-triangle-2-n-s { background-position: -128px -16px; } .ui-icon-triangle-2-e-w { background-position: -144px -16px; } .ui-icon-arrow-1-n { background-position: 0 -32px; } .ui-icon-arrow-1-ne { background-position: -16px -32px; } .ui-icon-arrow-1-e { background-position: -32px -32px; } .ui-icon-arrow-1-se { background-position: -48px -32px; } .ui-icon-arrow-1-s { background-position: -65px -32px; } .ui-icon-arrow-1-sw { background-position: -80px -32px; } .ui-icon-arrow-1-w { background-position: -96px -32px; } .ui-icon-arrow-1-nw { background-position: -112px -32px; } .ui-icon-arrow-2-n-s { background-position: -128px -32px; } .ui-icon-arrow-2-ne-sw { background-position: -144px -32px; } .ui-icon-arrow-2-e-w { background-position: -160px -32px; } .ui-icon-arrow-2-se-nw { background-position: -176px -32px; } .ui-icon-arrowstop-1-n { background-position: -192px -32px; } .ui-icon-arrowstop-1-e { background-position: -208px -32px; } .ui-icon-arrowstop-1-s { background-position: -224px -32px; } .ui-icon-arrowstop-1-w { background-position: -240px -32px; } .ui-icon-arrowthick-1-n { background-position: 1px -48px; } .ui-icon-arrowthick-1-ne { background-position: -16px -48px; } .ui-icon-arrowthick-1-e { background-position: -32px -48px; } .ui-icon-arrowthick-1-se { background-position: -48px -48px; } .ui-icon-arrowthick-1-s { background-position: -64px -48px; } .ui-icon-arrowthick-1-sw { background-position: -80px -48px; } .ui-icon-arrowthick-1-w { background-position: -96px -48px; } .ui-icon-arrowthick-1-nw { background-position: -112px -48px; } .ui-icon-arrowthick-2-n-s { background-position: -128px -48px; } .ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; } .ui-icon-arrowthick-2-e-w { background-position: -160px -48px; } .ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; } .ui-icon-arrowthickstop-1-n { background-position: -192px -48px; } .ui-icon-arrowthickstop-1-e { background-position: -208px -48px; } .ui-icon-arrowthickstop-1-s { background-position: -224px -48px; } .ui-icon-arrowthickstop-1-w { background-position: -240px -48px; } .ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; } .ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; } .ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; } .ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; } .ui-icon-arrowreturn-1-w { background-position: -64px -64px; } .ui-icon-arrowreturn-1-n { background-position: -80px -64px; } .ui-icon-arrowreturn-1-e { background-position: -96px -64px; } .ui-icon-arrowreturn-1-s { background-position: -112px -64px; } .ui-icon-arrowrefresh-1-w { background-position: -128px -64px; } .ui-icon-arrowrefresh-1-n { background-position: -144px -64px; } .ui-icon-arrowrefresh-1-e { background-position: -160px -64px; } .ui-icon-arrowrefresh-1-s { background-position: -176px -64px; } .ui-icon-arrow-4 { background-position: 0 -80px; } .ui-icon-arrow-4-diag { background-position: -16px -80px; } .ui-icon-extlink { background-position: -32px -80px; } .ui-icon-newwin { background-position: -48px -80px; } .ui-icon-refresh { background-position: -64px -80px; } .ui-icon-shuffle { background-position: -80px -80px; } .ui-icon-transfer-e-w { background-position: -96px -80px; } .ui-icon-transferthick-e-w { background-position: -112px -80px; } .ui-icon-folder-collapsed { background-position: 0 -96px; } .ui-icon-folder-open { background-position: -16px -96px; } .ui-icon-document { background-position: -32px -96px; } .ui-icon-document-b { background-position: -48px -96px; } .ui-icon-note { background-position: -64px -96px; } .ui-icon-mail-closed { background-position: -80px -96px; } .ui-icon-mail-open { background-position: -96px -96px; } .ui-icon-suitcase { background-position: -112px -96px; } .ui-icon-comment { background-position: -128px -96px; } .ui-icon-person { background-position: -144px -96px; } .ui-icon-print { background-position: -160px -96px; } .ui-icon-trash { background-position: -176px -96px; } .ui-icon-locked { background-position: -192px -96px; } .ui-icon-unlocked { background-position: -208px -96px; } .ui-icon-bookmark { background-position: -224px -96px; } .ui-icon-tag { background-position: -240px -96px; } .ui-icon-home { background-position: 0 -112px; } .ui-icon-flag { background-position: -16px -112px; } .ui-icon-calendar { background-position: -32px -112px; } .ui-icon-cart { background-position: -48px -112px; } .ui-icon-pencil { background-position: -64px -112px; } .ui-icon-clock { background-position: -80px -112px; } .ui-icon-disk { background-position: -96px -112px; } .ui-icon-calculator { background-position: -112px -112px; } .ui-icon-zoomin { background-position: -128px -112px; } .ui-icon-zoomout { background-position: -144px -112px; } .ui-icon-search { background-position: -160px -112px; } .ui-icon-wrench { background-position: -176px -112px; } .ui-icon-gear { background-position: -192px -112px; } .ui-icon-heart { background-position: -208px -112px; } .ui-icon-star { background-position: -224px -112px; } .ui-icon-link { background-position: -240px -112px; } .ui-icon-cancel { background-position: 0 -128px; } .ui-icon-plus { background-position: -16px -128px; } .ui-icon-plusthick { background-position: -32px -128px; } .ui-icon-minus { background-position: -48px -128px; } .ui-icon-minusthick { background-position: -64px -128px; } .ui-icon-close { background-position: -80px -128px; } .ui-icon-closethick { background-position: -96px -128px; } .ui-icon-key { background-position: -112px -128px; } .ui-icon-lightbulb { background-position: -128px -128px; } .ui-icon-scissors { background-position: -144px -128px; } .ui-icon-clipboard { background-position: -160px -128px; } .ui-icon-copy { background-position: -176px -128px; } .ui-icon-contact { background-position: -192px -128px; } .ui-icon-image { background-position: -208px -128px; } .ui-icon-video { background-position: -224px -128px; } .ui-icon-script { background-position: -240px -128px; } .ui-icon-alert { background-position: 0 -144px; } .ui-icon-info { background-position: -16px -144px; } .ui-icon-notice { background-position: -32px -144px; } .ui-icon-help { background-position: -48px -144px; } .ui-icon-check { background-position: -64px -144px; } .ui-icon-bullet { background-position: -80px -144px; } .ui-icon-radio-on { background-position: -96px -144px; } .ui-icon-radio-off { background-position: -112px -144px; } .ui-icon-pin-w { background-position: -128px -144px; } .ui-icon-pin-s { background-position: -144px -144px; } .ui-icon-play { background-position: 0 -160px; } .ui-icon-pause { background-position: -16px -160px; } .ui-icon-seek-next { background-position: -32px -160px; } .ui-icon-seek-prev { background-position: -48px -160px; } .ui-icon-seek-end { background-position: -64px -160px; } .ui-icon-seek-start { background-position: -80px -160px; } /* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */ .ui-icon-seek-first { background-position: -80px -160px; } .ui-icon-stop { background-position: -96px -160px; } .ui-icon-eject { background-position: -112px -160px; } .ui-icon-volume-off { background-position: -128px -160px; } .ui-icon-volume-on { background-position: -144px -160px; } .ui-icon-power { background-position: 0 -176px; } .ui-icon-signal-diag { background-position: -16px -176px; } .ui-icon-signal { background-position: -32px -176px; } .ui-icon-battery-0 { background-position: -48px -176px; } .ui-icon-battery-1 { background-position: -64px -176px; } .ui-icon-battery-2 { background-position: -80px -176px; } .ui-icon-battery-3 { background-position: -96px -176px; } .ui-icon-circle-plus { background-position: 0 -192px; } .ui-icon-circle-minus { background-position: -16px -192px; } .ui-icon-circle-close { background-position: -32px -192px; } .ui-icon-circle-triangle-e { background-position: -48px -192px; } .ui-icon-circle-triangle-s { background-position: -64px -192px; } .ui-icon-circle-triangle-w { background-position: -80px -192px; } .ui-icon-circle-triangle-n { background-position: -96px -192px; } .ui-icon-circle-arrow-e { background-position: -112px -192px; } .ui-icon-circle-arrow-s { background-position: -128px -192px; } .ui-icon-circle-arrow-w { background-position: -144px -192px; } .ui-icon-circle-arrow-n { background-position: -160px -192px; } .ui-icon-circle-zoomin { background-position: -176px -192px; } .ui-icon-circle-zoomout { background-position: -192px -192px; } .ui-icon-circle-check { background-position: -208px -192px; } .ui-icon-circlesmall-plus { background-position: 0 -208px; } .ui-icon-circlesmall-minus { background-position: -16px -208px; } .ui-icon-circlesmall-close { background-position: -32px -208px; } .ui-icon-squaresmall-plus { background-position: -48px -208px; } .ui-icon-squaresmall-minus { background-position: -64px -208px; } .ui-icon-squaresmall-close { background-position: -80px -208px; } .ui-icon-grip-dotted-vertical { background-position: 0 -224px; } .ui-icon-grip-dotted-horizontal { background-position: -16px -224px; } .ui-icon-grip-solid-vertical { background-position: -32px -224px; } .ui-icon-grip-solid-horizontal { background-position: -48px -224px; } .ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; } .ui-icon-grip-diagonal-se { background-position: -80px -224px; } /* Misc visuals ----------------------------------*/ /* Corner radius */ .ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { border-top-left-radius: 3px; } .ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { border-top-right-radius: 3px; } .ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { border-bottom-left-radius: 3px; } .ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { border-bottom-right-radius: 3px; } /* Overlays */ .ui-widget-overlay { background: #aaaaaa; opacity: 0.3; filter: Alpha(Opacity=30); /* support: IE8 */ } .ui-widget-shadow { box-shadow: 0px 0px 5px #666666; } .ui-datepicker .ui-datepicker-prev span.ui-icon, .ui-datepicker .ui-datepicker-next span.ui-icon { background-image: none; } .ui-datepicker .ui-datepicker-prev:before, .ui-datepicker .ui-datepicker-next:before { position: absolute; right: 50%; top: 50%; content: ""; margin: -5px 0 0 -3px; border-bottom: 5px solid transparent; border-top: 5px solid transparent; } .ui-datepicker .ui-datepicker-prev:before { border-right: 5px solid #333; } .ui-datepicker .ui-datepicker-next:before { border-left: 5px solid #333; } .ui-datepicker .ui-datepicker-next.ui-state-hover, .ui-datepicker .ui-datepicker-prev.ui-state-hover { background: none; } .ui-datepicker { border: none !important; box-shadow: 0 0 35px 10px rgba(0, 0, 0, 0.1); padding: 10px; border-radius: 5px !important; width: auto; min-width: 310px; font-size: 0.8rem; } .ui-datepicker-header.ui-widget-header { background: none; border: none; margin-bottom: 1rem; } .ui-datepicker-month, .ui-datepicker-year { margin: 0 2px !important; } .ui-datepicker td .ui-state-default { background: none; border: none; text-align: center; padding: 8px 5px; } .ui-datepicker td.ui-datepicker-current-day { background-color: var(--bg-form); color: var(--bg-form-inverse); } .ui-datepicker td.ui-datepicker-current-day a { color: inherit; } .ui-datepicker td.ui-datepicker-today { background-color: var(--bg-form); color: var(--bg-form-inverse); font-weight: 600; } .ui-datepicker td.ui-datepicker-today a { color: currentColor; } /*.ui-datepicker td.ui-datepicker-current-day:before{position: absolute;left: -4px; top: -4px;left: -4px;bottom: -4px;content: "";background: #54d1f1;box-shadow:0 0 15px 5px rgba(0, 0, 0, 0.1);}*/ .ui-datepicker td { position: relative; } .ui-datepicker td > a { position: relative; } .ui-datepicker td.ui-datepicker-today .ui-state-active { /*@include bg-white;*/ } .ui-datepicker td.ui-datepicker-today .ui-state-active:before { display: none; } .ui-datepicker td.ui-datepicker-today .ui-state-active > a { color: #54d1f1; } .ui-datepicker td.ui-datepicker-current-day .ui-state-active > a { color: #54d1f1; } .ui-datepicker td.ui-datepicker-current-day.ui-datepicker-today { /*background: none;*/ } .ui-datepicker td.ui-datepicker-current-day.ui-datepicker-today:before { display: none; } /*.ui-datepicker td.ui-datepicker-today {background: #333;} .ui-datepicker td.ui-datepicker-today:before {position: absolute;left: -4px; top: -4px;left: -4px;bottom: -4px;content: "";background: #333;box-shadow:0 0 15px 5px rgba(0, 0, 0, 0.1);}*/ /*.ui-datepicker td.ui-datepicker-today a{color:$brand-color;font-weight: $font-weight-bold;background:#EEE;}*/ .ui-datepicker .ui-datepicker-buttonpane { border: none; padding: 0; } .ui-datepicker .ui-datepicker-buttonpane button { opacity: 1; padding: 5px 20px 6px; font-weight: normal !important; border: none; -webkit-transition: 0.5s all ease; margin: 0; font-size: 0.8em; transition: 0.5s all ease; background: none !important; color: var(--brand-color) !important; border: 1px solid var(--brand-color) !important; } /*.ui-datepicker-other-month{background-color: rgba(0, 0, 0, 0.05);}*/ .ui-datepicker-calendar .ui-state-disabled { background: rgba(0, 0, 0, 0.04); } @media (max-width: 767px) { .ui-datepicker { min-width: 300px; /* z-index: 11 !important; */ } .ui-datepicker td .ui-state-default { padding: 5px; } } .ui-timepicker-div .ui-widget-header { margin-bottom: 8px; } .ui-timepicker-div dl { text-align: left; } .ui-timepicker-div dl dt { float: left; clear: left; padding: 0 0 0 0; font-size: 1rem; font-weight: 400; } .ui-timepicker-div dl dd { margin: 20px 10px 20px 40%; } .ui-timepicker-div td { font-size: 90%; } .ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; } .ui-timepicker-div .ui_tpicker_unit_hide { display: none; } .ui-timepicker-div .ui_tpicker_time .ui_tpicker_time_input { background: none; color: inherit; border: none; outline: none; border-bottom: solid 1px #555; width: 95%; } .ui-timepicker-div .ui_tpicker_time .ui_tpicker_time_input:focus { border-bottom-color: #aaa; } .ui-timepicker-rtl { direction: rtl; } .ui-timepicker-rtl dl { text-align: right; padding: 0 5px 0 0; } .ui-timepicker-rtl dl dt { float: right; clear: right; } .ui-timepicker-rtl dl dd { margin: 0 40% 10px 10px; } /* Shortened version style */ .ui-timepicker-div.ui-timepicker-oneLine { padding-left: 2px; } .ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time, .ui-timepicker-div.ui-timepicker-oneLine dt { display: none; } .ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time_label { display: block; padding-top: 2px; } .ui-timepicker-div.ui-timepicker-oneLine dl { text-align: right; } .ui-timepicker-div.ui-timepicker-oneLine dl dd, .ui-timepicker-div.ui-timepicker-oneLine dl dd > div { display: inline-block; margin: 0; } .ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_minute:before, .ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_second:before { content: ":"; display: inline-block; } .ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_millisec:before, .ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_microsec:before { content: "."; display: inline-block; } .ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide, .ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide:before { display: none; } /* Slider */ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { transform: translate3d(0, 0, 0); } .slick-track { position: relative; right: 0; top: 0; display: block; margin-right: auto; margin-left: auto; } .slick-track:before, .slick-track:after { content: ""; display: table; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { float: left; height: 100%; min-height: 1px; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } /* Icons */ @font-face { font-family: "slick"; src: url("fonts/slick.eot"); src: url("fonts/slick.eot?#iefix") format("embedded-opentype"), url("fonts/slick.woff") format("woff"), url("fonts/slick.ttf") format("truetype"), url("fonts/slick.svg#slick") format("svg"); font-weight: normal; font-style: normal; } /** Slider */ .slick-loading .slick-list { background-color: var(--bg-white); color: var(--bg-white-text); background: url("./images/icons/ajax-loader.gif") center center no-repeat; } /*================================= Previous and Next icon buttons ==================================*/ .slick-prev, .slick-next { position: absolute; top: 50%; display: block; padding: 0; height: 20px; width: 20px; line-height: 0; font-size: 0; cursor: pointer; background: transparent; color: transparent; border: none; transform: translate(0, -50%); } .slick-prev:hover .slick-prev-icon, .slick-prev:hover .slick-next-icon, .slick-prev:focus .slick-prev-icon, .slick-prev:focus .slick-next-icon, .slick-next:hover .slick-prev-icon, .slick-next:hover .slick-next-icon, .slick-next:focus .slick-prev-icon, .slick-next:focus .slick-next-icon { opacity: 1; } .slick-prev:focus, .slick-next:focus { top: calc(50% - 1px); } .slick-prev:focus .slick-prev-icon, .slick-prev:focus .slick-next-icon, .slick-next:focus .slick-prev-icon, .slick-next:focus .slick-next-icon { color: orange; font-size: 28px; margin-right: -2px; } .slick-prev.slick-disabled, .slick-next.slick-disabled { cursor: default; } .slick-prev.slick-disabled .slick-prev-icon, .slick-prev.slick-disabled .slick-next-icon, .slick-next.slick-disabled .slick-prev-icon, .slick-next.slick-disabled .slick-next-icon { opacity: 0.25; } .slick-prev .slick-prev-icon, .slick-prev .slick-next-icon, .slick-next .slick-prev-icon, .slick-next .slick-next-icon { display: block; color: black; opacity: 0.75; font-family: "slick"; font-size: 24px; line-height: 1; } .slick-arrow.slick-disabled { opacity: 0.5; } .slick-prev { right: -25px; } .slick-prev .slick-prev-icon:before { content: "←"; } [dir=rtl] .slick-prev .slick-prev-icon:before { content: "→"; } .slick-next { left: -25px; } .slick-next .slick-next-icon:before { content: "→"; } [dir=rtl] .slick-next .slick-next-icon:before { content: "←"; } /*========================== Slide navigation dots ===========================*/ .slick-slider { margin-bottom: 30px; } .slick-slider.slick-dotted { margin-bottom: 60px; } .slick-dots { position: absolute; bottom: -30px; display: block; padding: 0; margin: 0; width: 100%; list-style: none; text-align: center; } .slick-dots li { position: relative; display: inline-block; margin: 0 5px; padding: 0; } .slick-dots li button { display: block; height: 20px; width: 20px; margin-top: -4px; margin-right: -4px; line-height: 0px; font-size: 0px; color: transparent; border: 0; background: transparent; cursor: pointer; } .slick-dots li button:hover .slick-dot-icon, .slick-dots li button:focus .slick-dot-icon { opacity: 1; } .slick-dots li button:focus .slick-dot-icon:before { color: orange; } .slick-dots li button .slick-dot-icon { color: black; opacity: 0.25; } .slick-dots li button .slick-dot-icon:before { position: absolute; top: 0; right: 0; content: "•"; font-family: "slick"; font-size: 12px; line-height: 1; text-align: center; transition: all 0.05s linear; } .slick-dots li.slick-active button:focus .slick-dot-icon { color: orange; opacity: 1; } .slick-dots li.slick-active button .slick-dot-icon { color: black; opacity: 1; } .slick-dots li.slick-active button .slick-dot-icon:before { margin-top: -3px; margin-right: -2px; font-size: 18px; } /** Improved .sr-only class by ffoodd: https://gist.github.com/ffoodd/000b59f431e3e64e4ce1a24d5bb36034 */ .slick-sr-only { border: 0 !important; clip: rect(1px, 1px, 1px, 1px) !important; clip-path: inset(50%) !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; width: 1px !important; white-space: nowrap !important; } /*=========================== Pause/play icon button ============================*/ .slick-autoplay-toggle-button { position: absolute; right: 5px; bottom: -32px; z-index: 10; opacity: 0.75; background: none; border: 0; cursor: pointer; color: black; } .slick-autoplay-toggle-button:hover, .slick-autoplay-toggle-button:focus { opacity: 1; } .slick-autoplay-toggle-button:focus { color: orange; } .slick-autoplay-toggle-button .slick-pause-icon:before { content: "⏸"; width: 20px; height: 20px; font-family: "slick"; font-size: 18px; font-weight: normal; line-height: 20px; text-align: center; } .slick-autoplay-toggle-button .slick-play-icon:before { content: "▶"; width: 20px; height: 20px; font-family: "slick"; font-size: 18px; font-weight: normal; line-height: 20px; text-align: center; } body.compensate-for-scrollbar { overflow: hidden; } .fancybox-active { height: auto; } .fancybox-is-hidden { left: -9999px; margin: 0; position: absolute !important; top: -9999px; visibility: hidden; } .fancybox-container { backface-visibility: hidden; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; height: 100%; left: 0; position: fixed; -webkit-tap-highlight-color: transparent; top: 0; transform: translateZ(0); width: 100%; z-index: 99992; } .fancybox-container * { box-sizing: border-box; } .fancybox-bg, .fancybox-inner, .fancybox-outer, .fancybox-stage { bottom: 0; left: 0; position: absolute; right: 0; top: 0; } .fancybox-outer { -webkit-overflow-scrolling: touch; overflow-y: auto; } .fancybox-bg { background: #1e1e1e; opacity: 0; transition-duration: inherit; transition-property: opacity; transition-timing-function: cubic-bezier(0.47, 0, 0.74, 0.71); } .fancybox-is-open .fancybox-bg { opacity: 0.87; transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); } .fancybox-caption, .fancybox-infobar, .fancybox-navigation .fancybox-button, .fancybox-toolbar { direction: ltr; opacity: 0; position: absolute; transition: opacity 0.25s, visibility 0s linear 0.25s; visibility: hidden; z-index: 99997; } .fancybox-show-caption .fancybox-caption, .fancybox-show-infobar .fancybox-infobar, .fancybox-show-nav .fancybox-navigation .fancybox-button, .fancybox-show-toolbar .fancybox-toolbar { opacity: 1; transition: opacity 0.25s, visibility 0s; visibility: visible; } .fancybox-infobar { color: #ccc; font-size: 13px; -webkit-font-smoothing: subpixel-antialiased; height: 44px; left: 0; line-height: 44px; min-width: 44px; mix-blend-mode: difference; padding: 0 10px; pointer-events: none; text-align: center; top: 0; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .fancybox-toolbar { right: 0; top: 0; } .fancybox-stage { direction: ltr; overflow: visible; -webkit-transform: translateZ(0); z-index: 99994; } .fancybox-is-open .fancybox-stage { overflow: hidden; } .fancybox-slide { backface-visibility: hidden; display: none; height: 100%; left: 0; outline: none; overflow: auto; -webkit-overflow-scrolling: touch; padding: 44px; position: absolute; text-align: center; top: 0; transition-property: transform, opacity; white-space: normal; width: 100%; z-index: 99994; } .fancybox-slide:before { content: ""; display: inline-block; height: 100%; margin-right: -0.25em; vertical-align: middle; width: 0; } .fancybox-is-sliding .fancybox-slide, .fancybox-slide--current, .fancybox-slide--next, .fancybox-slide--previous { display: block; } .fancybox-slide--next { z-index: 99995; } .fancybox-slide--image { overflow: visible; padding: 44px 0; } .fancybox-slide--image:before { display: none; } .fancybox-slide--html { padding: 6px 6px 0; } .fancybox-slide--iframe { padding: 44px 44px 0; } .fancybox-content { background-color: #fff; display: inline-block; margin: 0 0 6px; max-width: 100%; overflow: auto; padding: 0; padding: 24px; position: relative; text-align: left; vertical-align: middle; } .fancybox-slide--image .fancybox-content { animation-timing-function: cubic-bezier(0.5, 0, 0.14, 1); backface-visibility: hidden; background: transparent; background-repeat: no-repeat; background-size: 100% 100%; left: 0; margin: 0; max-width: none; overflow: visible; padding: 0; position: absolute; top: 0; transform-origin: top left; transition-property: transform, opacity; -webkit-user-select: none; -moz-user-select: none; user-select: none; z-index: 99995; } .fancybox-can-zoomOut .fancybox-content { cursor: zoom-out; } .fancybox-can-zoomIn .fancybox-content { cursor: zoom-in; } .fancybox-can-drag .fancybox-content { cursor: grab; } .fancybox-is-dragging .fancybox-content { cursor: grabbing; } .fancybox-container [data-selectable=true] { cursor: text; } .fancybox-image, .fancybox-spaceball { background: transparent; border: 0; height: 100%; left: 0; margin: 0; max-height: none; max-width: none; padding: 0; position: absolute; top: 0; -webkit-user-select: none; -moz-user-select: none; user-select: none; width: 100%; } .fancybox-spaceball { z-index: 1; } .fancybox-slide--html .fancybox-content { margin-bottom: 6px; } .fancybox-slide--iframe .fancybox-content, .fancybox-slide--map .fancybox-content, .fancybox-slide--video .fancybox-content { height: 100%; margin: 0; overflow: visible; padding: 0; width: 100%; } .fancybox-slide--video .fancybox-content { background-color: #000; } .fancybox-slide--map .fancybox-content { background: #e5e3df; } .fancybox-slide--iframe .fancybox-content { background-color: #fff; height: calc(100% - 44px); margin-bottom: 44px; } .fancybox-iframe, .fancybox-video { background: transparent; border: 0; height: 100%; margin: 0; overflow: hidden; padding: 0; width: 100%; } .fancybox-iframe { vertical-align: top; } .fancybox-error { background-color: #fff; cursor: default; max-width: 400px; padding: 40px; width: 100%; } .fancybox-error p { color: #444; font-size: 16px; line-height: 20px; margin: 0; padding: 0; } .fancybox-button { background: rgba(30, 30, 30, 0.6); border: 0; border-radius: 0; cursor: pointer; display: inline-block; height: 44px; margin: 0; outline: none; padding: 10px; transition: color 0.2s; vertical-align: top; width: 44px; } .fancybox-button, .fancybox-button:link, .fancybox-button:visited { color: #ccc; } .fancybox-button:focus, .fancybox-button:hover { color: #fff; } .fancybox-button.disabled, .fancybox-button.disabled:hover, .fancybox-button[disabled], .fancybox-button[disabled]:hover { color: #888; cursor: default; } .fancybox-button svg { display: block; overflow: visible; position: relative; shape-rendering: geometricPrecision; } .fancybox-button svg path { fill: transparent; stroke: currentColor; stroke-linejoin: round; stroke-width: 3; } .fancybox-button--pause svg path:nth-child(1), .fancybox-button--play svg path:nth-child(2) { display: none; } .fancybox-button--play svg path, .fancybox-button--share svg path, .fancybox-button--thumbs svg path { fill: currentColor; } .fancybox-button--share svg path { stroke-width: 1; } .fancybox-navigation .fancybox-button { height: 38px; opacity: 0; padding: 6px; position: absolute; top: 50%; width: 38px; } .fancybox-show-nav .fancybox-navigation .fancybox-button { transition: opacity 0.25s, visibility 0s, color 0.25s; } .fancybox-navigation .fancybox-button:after { content: ""; left: -25px; padding: 50px; position: absolute; top: -25px; } .fancybox-navigation .fancybox-button--arrow_left { left: 6px; } .fancybox-navigation .fancybox-button--arrow_right { right: 6px; } .fancybox-close-small { background: transparent; border: 0; border-radius: 0; color: #555; cursor: pointer; height: 44px; margin: 0; padding: 6px; position: absolute; right: 0; top: 0; width: 44px; z-index: 10; } .fancybox-close-small svg { fill: transparent; opacity: 0.8; stroke: currentColor; stroke-width: 1.5; transition: stroke 0.1s; } .fancybox-close-small:focus { outline: none; } .fancybox-close-small:hover svg { opacity: 1; } .fancybox-slide--iframe .fancybox-close-small, .fancybox-slide--image .fancybox-close-small, .fancybox-slide--video .fancybox-close-small { color: #ccc; padding: 5px; right: -12px; top: -44px; } .fancybox-slide--iframe .fancybox-close-small:hover svg, .fancybox-slide--image .fancybox-close-small:hover svg, .fancybox-slide--video .fancybox-close-small:hover svg { background: transparent; color: #fff; } .fancybox-is-scaling .fancybox-close-small, .fancybox-is-zoomable.fancybox-can-drag .fancybox-close-small { display: none; } .fancybox-caption { bottom: 0; color: #fff; font-size: 14px; font-weight: 400; left: 0; line-height: 1.5; padding: 25px 44px; right: 0; } .fancybox-caption:before { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAEtCAQAAABjBcL7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHRJREFUKM+Vk8EOgDAIQ0vj/3+xBw8qIZZueFnIKC90MCAI8DlrkHGeqqGIU6lVigrBtpCWqeRWoHDNqs0F7VNVBVxmHRlvoVqjaYkdnDIaivH2HqZ5+oZj3JUzWB+cOz4G48Bg+tsJ/tqu4dLC/4Xb+0GcF5BwBC0AA53qAAAAAElFTkSuQmCC); background-repeat: repeat-x; background-size: contain; bottom: 0; content: ""; display: block; left: 0; pointer-events: none; position: absolute; right: 0; top: -25px; z-index: -1; } .fancybox-caption:after { border-bottom: 1px solid hsla(0, 0%, 100%, 0.3); content: ""; display: block; left: 44px; position: absolute; right: 44px; top: 0; } .fancybox-caption a, .fancybox-caption a:link, .fancybox-caption a:visited { color: #ccc; text-decoration: none; } .fancybox-caption a:hover { color: #fff; text-decoration: underline; } .fancybox-loading { animation: a 0.8s infinite linear; background: transparent; border: 6px solid hsla(0, 0%, 39%, 0.5); border-radius: 100%; border-top-color: #fff; height: 60px; left: 50%; margin: -30px 0 0 -30px; opacity: 0.6; padding: 0; position: absolute; top: 50%; width: 60px; z-index: 99999; } @keyframes a { 0% { transform: rotate(0deg); } to { transform: rotate(359deg); } } .fancybox-animated { transition-timing-function: cubic-bezier(0, 0, 0.25, 1); } .fancybox-fx-slide.fancybox-slide--previous { opacity: 0; transform: translate3d(-100%, 0, 0); } .fancybox-fx-slide.fancybox-slide--next { opacity: 0; transform: translate3d(100%, 0, 0); } .fancybox-fx-slide.fancybox-slide--current { opacity: 1; transform: translateZ(0); } .fancybox-fx-fade.fancybox-slide--next, .fancybox-fx-fade.fancybox-slide--previous { opacity: 0; transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); } .fancybox-fx-fade.fancybox-slide--current { opacity: 1; } .fancybox-fx-zoom-in-out.fancybox-slide--previous { opacity: 0; transform: scale3d(1.5, 1.5, 1.5); } .fancybox-fx-zoom-in-out.fancybox-slide--next { opacity: 0; transform: scale3d(0.5, 0.5, 0.5); } .fancybox-fx-zoom-in-out.fancybox-slide--current { opacity: 1; transform: scaleX(1); } .fancybox-fx-rotate.fancybox-slide--previous { opacity: 0; transform: rotate(-1turn); } .fancybox-fx-rotate.fancybox-slide--next { opacity: 0; transform: rotate(1turn); } .fancybox-fx-rotate.fancybox-slide--current { opacity: 1; transform: rotate(0deg); } .fancybox-fx-circular.fancybox-slide--previous { opacity: 0; transform: scale3d(0, 0, 0) translate3d(-100%, 0, 0); } .fancybox-fx-circular.fancybox-slide--next { opacity: 0; transform: scale3d(0, 0, 0) translate3d(100%, 0, 0); } .fancybox-fx-circular.fancybox-slide--current { opacity: 1; transform: scaleX(1) translateZ(0); } .fancybox-fx-tube.fancybox-slide--previous { transform: translate3d(-100%, 0, 0) scale(0.1) skew(-10deg); } .fancybox-fx-tube.fancybox-slide--next { transform: translate3d(100%, 0, 0) scale(0.1) skew(10deg); } .fancybox-fx-tube.fancybox-slide--current { transform: translateZ(0) scale(1); } .fancybox-share { background: #f4f4f4; border-radius: 3px; max-width: 90%; padding: 30px; text-align: center; } .fancybox-share h1, .fancybox-share .h1 { color: #222; font-size: 35px; font-weight: 800; margin: 0 0 20px; } .fancybox-share p { margin: 0; padding: 0; } .fancybox-share__button { border: 0; border-radius: 3px; display: inline-block; font-size: 14px; font-weight: 800; line-height: 40px; margin: 0 5px 10px; min-width: 130px; padding: 0 15px; text-decoration: none; transition: all 0.2s; -webkit-user-select: none; -moz-user-select: none; user-select: none; white-space: nowrap; } .fancybox-share__button:link, .fancybox-share__button:visited { color: #fff; } .fancybox-share__button:hover { text-decoration: none; } .fancybox-share__button--fb { background: #3b5998; } .fancybox-share__button--fb:hover { background: #344e86; } .fancybox-share__button--pt { background: #bd081d; } .fancybox-share__button--pt:hover { background: #aa0719; } .fancybox-share__button--tw { background: #1da1f2; } .fancybox-share__button--tw:hover { background: #0d95e8; } .fancybox-share__button svg { height: 25px; margin-right: 7px; position: relative; top: -1px; vertical-align: middle; width: 25px; } .fancybox-share__button svg path { fill: #fff; } .fancybox-share__input { background: transparent; border: 0; border-bottom: 1px solid #d7d7d7; border-radius: 0; color: #5d5b5b; font-size: 14px; margin: 10px 0 0; outline: none; padding: 10px 15px; width: 100%; } .fancybox-thumbs { background-color: #fff; bottom: 0; display: none; margin: 0; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; padding: 2px 2px 4px; position: absolute; right: 0; -webkit-tap-highlight-color: transparent; top: 0; width: 212px; z-index: 99995; } .fancybox-thumbs-x { overflow-x: auto; overflow-y: hidden; } .fancybox-show-thumbs .fancybox-thumbs { display: block; } .fancybox-show-thumbs .fancybox-inner { right: 212px; } .fancybox-thumbs > ul { font-size: 0; height: 100%; list-style: none; margin: 0; overflow-x: hidden; overflow-y: auto; padding: 0; position: absolute; position: relative; white-space: nowrap; width: 100%; } .fancybox-thumbs-x > ul { overflow: hidden; } .fancybox-thumbs-y > ul::-webkit-scrollbar { width: 7px; } .fancybox-thumbs-y > ul::-webkit-scrollbar-track { background-color: #fff; border-radius: 10px; box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); } .fancybox-thumbs-y > ul::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 10px; } .fancybox-thumbs > ul > li { backface-visibility: hidden; cursor: pointer; float: left; height: 75px; margin: 2px; max-height: calc(100% - 8px); max-width: calc(50% - 4px); outline: none; overflow: hidden; padding: 0; position: relative; -webkit-tap-highlight-color: transparent; width: 100px; } .fancybox-thumbs-loading { background: rgba(0, 0, 0, 0.1); } .fancybox-thumbs > ul > li { background-position: 50%; background-repeat: no-repeat; background-size: cover; } .fancybox-thumbs > ul > li:before { border: 4px solid #4ea7f9; bottom: 0; content: ""; left: 0; opacity: 0; position: absolute; right: 0; top: 0; transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); z-index: 99991; } .fancybox-thumbs .fancybox-thumbs-active:before { opacity: 1; } @media (max-width: 800px) { .fancybox-thumbs { width: 110px; } .fancybox-show-thumbs .fancybox-inner { right: 110px; } .fancybox-thumbs > ul > li { max-width: calc(100% - 10px); } } .iti { position: relative; display: inline-block; } .iti * { box-sizing: border-box; -moz-box-sizing: border-box; } .iti__hide { display: none; } .iti__v-hide { visibility: hidden; } .iti input, .iti .custom-select, .iti input[type=text], .iti input[type=tel] { position: relative; z-index: 0; margin-top: 0 !important; margin-bottom: 0 !important; padding-left: 36px; margin-left: 0; } .iti__flag-container { position: absolute; top: 0; bottom: 0; left: 0; padding: 1px; } .iti__selected-flag { z-index: 1; position: relative; display: flex; align-items: center; height: 100%; padding: 0 6px 0 8px; } .iti__arrow { margin-right: 6px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 4px solid #555; } .iti__arrow--up { border-top: none; border-bottom: 4px solid #555; } .iti__country-list { position: absolute; z-index: 2; list-style: none; text-align: left; padding: 0; margin: 0 0 0 -1px; box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2); background-color: var(--bg-white); color: var(--bg-white-text); border: 1px solid #CCC; white-space: nowrap; max-height: 200px; overflow-y: scroll; -webkit-overflow-scrolling: touch; } .iti__country-list--dropup { bottom: 100%; margin-bottom: -1px; } @media (max-width: 500px) { .iti__country-list { white-space: normal; } } .iti__flag-box { display: inline-block; width: 20px; } .iti__divider { padding-bottom: 5px; margin-bottom: 5px; border-bottom: 1px solid #CCC; } .iti__country { padding: 5px 10px; outline: none; font-size: 0.85rem; } .iti__dial-code { color: #999; } .iti__country.iti__highlight { background-color: rgba(0, 0, 0, 0.05); } .iti__flag-box, .iti__country-name, .iti__dial-code { vertical-align: middle; } .iti__flag-box, .iti__country-name { margin-left: 6px; } .iti--allow-dropdown input, .iti--allow-dropdown .custom-select, .iti--allow-dropdown input[type=text], .iti--allow-dropdown input[type=tel], .iti--separate-dial-code input, .iti--separate-dial-code .custom-select, .iti--separate-dial-code input[type=text], .iti--separate-dial-code input[type=tel] { padding-left: 6px; padding-right: 52px; margin-right: 0; } .iti--allow-dropdown .iti__flag-container, .iti--separate-dial-code .iti__flag-container { left: auto; right: 0; } .iti--allow-dropdown .iti__flag-container:hover { cursor: pointer; } .iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag { background-color: rgba(0, 0, 0, 0.05); } .iti--allow-dropdown input[disabled] + .iti__flag-container:hover, .iti--allow-dropdown [disabled].custom-select + .iti__flag-container:hover, .iti--allow-dropdown input[readonly] + .iti__flag-container:hover, .iti--allow-dropdown [readonly].custom-select + .iti__flag-container:hover { cursor: default; } .iti--allow-dropdown input[disabled] + .iti__flag-container:hover .iti__selected-flag, .iti--allow-dropdown [disabled].custom-select + .iti__flag-container:hover .iti__selected-flag, .iti--allow-dropdown input[readonly] + .iti__flag-container:hover .iti__selected-flag, .iti--allow-dropdown [readonly].custom-select + .iti__flag-container:hover .iti__selected-flag { background-color: transparent; } .iti--separate-dial-code .iti__selected-flag { background-color: rgba(0, 0, 0, 0.05); } .iti--separate-dial-code .iti__selected-dial-code { margin-right: 6px; } .iti--container { position: absolute; top: -1000px; right: -1000px; z-index: 1060; padding: 1px; } .iti--container:hover { cursor: pointer; } .iti-mobile .iti--container { top: 30px; bottom: 30px; right: 30px; left: 30px; position: fixed; } .iti-mobile .iti__country-list { max-height: 100%; width: 100%; } .iti-mobile .iti__country { padding: 10px 10px; line-height: 1.5em; } .iti__flag { width: 20px; } .iti__flag.iti__be { width: 18px; } .iti__flag.iti__ch { width: 15px; } .iti__flag.iti__mc { width: 19px; } .iti__flag.iti__ne { width: 18px; } .iti__flag.iti__np { width: 13px; } .iti__flag.iti__va { width: 15px; } @media (min-resolution: 192dpi) { .iti__flag { background-size: 5652px 15px; } } .iti__flag.iti__ac { height: 10px; background-position: 0px 0px; } .iti__flag.iti__ad { height: 14px; background-position: -22px 0px; } .iti__flag.iti__ae { height: 10px; background-position: -44px 0px; } .iti__flag.iti__af { height: 14px; background-position: -66px 0px; } .iti__flag.iti__ag { height: 14px; background-position: -88px 0px; } .iti__flag.iti__ai { height: 10px; background-position: -110px 0px; } .iti__flag.iti__al { height: 15px; background-position: -132px 0px; } .iti__flag.iti__am { height: 10px; background-position: -154px 0px; } .iti__flag.iti__ao { height: 14px; background-position: -176px 0px; } .iti__flag.iti__aq { height: 14px; background-position: -198px 0px; } .iti__flag.iti__ar { height: 13px; background-position: -220px 0px; } .iti__flag.iti__as { height: 10px; background-position: -242px 0px; } .iti__flag.iti__at { height: 14px; background-position: -264px 0px; } .iti__flag.iti__au { height: 10px; background-position: -286px 0px; } .iti__flag.iti__aw { height: 14px; background-position: -308px 0px; } .iti__flag.iti__ax { height: 13px; background-position: -330px 0px; } .iti__flag.iti__az { height: 10px; background-position: -352px 0px; } .iti__flag.iti__ba { height: 10px; background-position: -374px 0px; } .iti__flag.iti__bb { height: 14px; background-position: -396px 0px; } .iti__flag.iti__bd { height: 12px; background-position: -418px 0px; } .iti__flag.iti__be { height: 15px; background-position: -440px 0px; } .iti__flag.iti__bf { height: 14px; background-position: -460px 0px; } .iti__flag.iti__bg { height: 12px; background-position: -482px 0px; } .iti__flag.iti__bh { height: 12px; background-position: -504px 0px; } .iti__flag.iti__bi { height: 12px; background-position: -526px 0px; } .iti__flag.iti__bj { height: 14px; background-position: -548px 0px; } .iti__flag.iti__bl { height: 14px; background-position: -570px 0px; } .iti__flag.iti__bm { height: 10px; background-position: -592px 0px; } .iti__flag.iti__bn { height: 10px; background-position: -614px 0px; } .iti__flag.iti__bo { height: 14px; background-position: -636px 0px; } .iti__flag.iti__bq { height: 14px; background-position: -658px 0px; } .iti__flag.iti__br { height: 14px; background-position: -680px 0px; } .iti__flag.iti__bs { height: 10px; background-position: -702px 0px; } .iti__flag.iti__bt { height: 14px; background-position: -724px 0px; } .iti__flag.iti__bv { height: 15px; background-position: -746px 0px; } .iti__flag.iti__bw { height: 14px; background-position: -768px 0px; } .iti__flag.iti__by { height: 10px; background-position: -790px 0px; } .iti__flag.iti__bz { height: 14px; background-position: -812px 0px; } .iti__flag.iti__ca { height: 10px; background-position: -834px 0px; } .iti__flag.iti__cc { height: 10px; background-position: -856px 0px; } .iti__flag.iti__cd { height: 15px; background-position: -878px 0px; } .iti__flag.iti__cf { height: 14px; background-position: -900px 0px; } .iti__flag.iti__cg { height: 14px; background-position: -922px 0px; } .iti__flag.iti__ch { height: 15px; background-position: -944px 0px; } .iti__flag.iti__ci { height: 14px; background-position: -961px 0px; } .iti__flag.iti__ck { height: 10px; background-position: -983px 0px; } .iti__flag.iti__cl { height: 14px; background-position: -1005px 0px; } .iti__flag.iti__cm { height: 14px; background-position: -1027px 0px; } .iti__flag.iti__cn { height: 14px; background-position: -1049px 0px; } .iti__flag.iti__co { height: 14px; background-position: -1071px 0px; } .iti__flag.iti__cp { height: 14px; background-position: -1093px 0px; } .iti__flag.iti__cr { height: 12px; background-position: -1115px 0px; } .iti__flag.iti__cu { height: 10px; background-position: -1137px 0px; } .iti__flag.iti__cv { height: 12px; background-position: -1159px 0px; } .iti__flag.iti__cw { height: 14px; background-position: -1181px 0px; } .iti__flag.iti__cx { height: 10px; background-position: -1203px 0px; } .iti__flag.iti__cy { height: 14px; background-position: -1225px 0px; } .iti__flag.iti__cz { height: 14px; background-position: -1247px 0px; } .iti__flag.iti__de { height: 12px; background-position: -1269px 0px; } .iti__flag.iti__dg { height: 10px; background-position: -1291px 0px; } .iti__flag.iti__dj { height: 14px; background-position: -1313px 0px; } .iti__flag.iti__dk { height: 15px; background-position: -1335px 0px; } .iti__flag.iti__dm { height: 10px; background-position: -1357px 0px; } .iti__flag.iti__do { height: 14px; background-position: -1379px 0px; } .iti__flag.iti__dz { height: 14px; background-position: -1401px 0px; } .iti__flag.iti__ea { height: 14px; background-position: -1423px 0px; } .iti__flag.iti__ec { height: 14px; background-position: -1445px 0px; } .iti__flag.iti__ee { height: 13px; background-position: -1467px 0px; } .iti__flag.iti__eg { height: 14px; background-position: -1489px 0px; } .iti__flag.iti__eh { height: 10px; background-position: -1511px 0px; } .iti__flag.iti__er { height: 10px; background-position: -1533px 0px; } .iti__flag.iti__es { height: 14px; background-position: -1555px 0px; } .iti__flag.iti__et { height: 10px; background-position: -1577px 0px; } .iti__flag.iti__eu { height: 14px; background-position: -1599px 0px; } .iti__flag.iti__fi { height: 12px; background-position: -1621px 0px; } .iti__flag.iti__fj { height: 10px; background-position: -1643px 0px; } .iti__flag.iti__fk { height: 10px; background-position: -1665px 0px; } .iti__flag.iti__fm { height: 11px; background-position: -1687px 0px; } .iti__flag.iti__fo { height: 15px; background-position: -1709px 0px; } .iti__flag.iti__fr { height: 14px; background-position: -1731px 0px; } .iti__flag.iti__ga { height: 15px; background-position: -1753px 0px; } .iti__flag.iti__gb { height: 10px; background-position: -1775px 0px; } .iti__flag.iti__gd { height: 12px; background-position: -1797px 0px; } .iti__flag.iti__ge { height: 14px; background-position: -1819px 0px; } .iti__flag.iti__gf { height: 14px; background-position: -1841px 0px; } .iti__flag.iti__gg { height: 14px; background-position: -1863px 0px; } .iti__flag.iti__gh { height: 14px; background-position: -1885px 0px; } .iti__flag.iti__gi { height: 10px; background-position: -1907px 0px; } .iti__flag.iti__gl { height: 14px; background-position: -1929px 0px; } .iti__flag.iti__gm { height: 14px; background-position: -1951px 0px; } .iti__flag.iti__gn { height: 14px; background-position: -1973px 0px; } .iti__flag.iti__gp { height: 14px; background-position: -1995px 0px; } .iti__flag.iti__gq { height: 14px; background-position: -2017px 0px; } .iti__flag.iti__gr { height: 14px; background-position: -2039px 0px; } .iti__flag.iti__gs { height: 10px; background-position: -2061px 0px; } .iti__flag.iti__gt { height: 13px; background-position: -2083px 0px; } .iti__flag.iti__gu { height: 11px; background-position: -2105px 0px; } .iti__flag.iti__gw { height: 10px; background-position: -2127px 0px; } .iti__flag.iti__gy { height: 12px; background-position: -2149px 0px; } .iti__flag.iti__hk { height: 14px; background-position: -2171px 0px; } .iti__flag.iti__hm { height: 10px; background-position: -2193px 0px; } .iti__flag.iti__hn { height: 10px; background-position: -2215px 0px; } .iti__flag.iti__hr { height: 10px; background-position: -2237px 0px; } .iti__flag.iti__ht { height: 12px; background-position: -2259px 0px; } .iti__flag.iti__hu { height: 10px; background-position: -2281px 0px; } .iti__flag.iti__ic { height: 14px; background-position: -2303px 0px; } .iti__flag.iti__id { height: 14px; background-position: -2325px 0px; } .iti__flag.iti__ie { height: 10px; background-position: -2347px 0px; } .iti__flag.iti__il { height: 15px; background-position: -2369px 0px; } .iti__flag.iti__im { height: 10px; background-position: -2391px 0px; } .iti__flag.iti__in { height: 14px; background-position: -2413px 0px; } .iti__flag.iti__io { height: 10px; background-position: -2435px 0px; } .iti__flag.iti__iq { height: 14px; background-position: -2457px 0px; } .iti__flag.iti__ir { height: 12px; background-position: -2479px 0px; } .iti__flag.iti__is { height: 15px; background-position: -2501px 0px; } .iti__flag.iti__it { height: 14px; background-position: -2523px 0px; } .iti__flag.iti__je { height: 12px; background-position: -2545px 0px; } .iti__flag.iti__jm { height: 10px; background-position: -2567px 0px; } .iti__flag.iti__jo { height: 10px; background-position: -2589px 0px; } .iti__flag.iti__jp { height: 14px; background-position: -2611px 0px; } .iti__flag.iti__ke { height: 14px; background-position: -2633px 0px; } .iti__flag.iti__kg { height: 12px; background-position: -2655px 0px; } .iti__flag.iti__kh { height: 13px; background-position: -2677px 0px; } .iti__flag.iti__ki { height: 10px; background-position: -2699px 0px; } .iti__flag.iti__km { height: 12px; background-position: -2721px 0px; } .iti__flag.iti__kn { height: 14px; background-position: -2743px 0px; } .iti__flag.iti__kp { height: 10px; background-position: -2765px 0px; } .iti__flag.iti__kr { height: 14px; background-position: -2787px 0px; } .iti__flag.iti__kw { height: 10px; background-position: -2809px 0px; } .iti__flag.iti__ky { height: 10px; background-position: -2831px 0px; } .iti__flag.iti__kz { height: 10px; background-position: -2853px 0px; } .iti__flag.iti__la { height: 14px; background-position: -2875px 0px; } .iti__flag.iti__lb { height: 14px; background-position: -2897px 0px; } .iti__flag.iti__lc { height: 10px; background-position: -2919px 0px; } .iti__flag.iti__li { height: 12px; background-position: -2941px 0px; } .iti__flag.iti__lk { height: 10px; background-position: -2963px 0px; } .iti__flag.iti__lr { height: 11px; background-position: -2985px 0px; } .iti__flag.iti__ls { height: 14px; background-position: -3007px 0px; } .iti__flag.iti__lt { height: 12px; background-position: -3029px 0px; } .iti__flag.iti__lu { height: 12px; background-position: -3051px 0px; } .iti__flag.iti__lv { height: 10px; background-position: -3073px 0px; } .iti__flag.iti__ly { height: 10px; background-position: -3095px 0px; } .iti__flag.iti__ma { height: 14px; background-position: -3117px 0px; } .iti__flag.iti__mc { height: 15px; background-position: -3139px 0px; } .iti__flag.iti__md { height: 10px; background-position: -3160px 0px; } .iti__flag.iti__me { height: 10px; background-position: -3182px 0px; } .iti__flag.iti__mf { height: 14px; background-position: -3204px 0px; } .iti__flag.iti__mg { height: 14px; background-position: -3226px 0px; } .iti__flag.iti__mh { height: 11px; background-position: -3248px 0px; } .iti__flag.iti__mk { height: 10px; background-position: -3270px 0px; } .iti__flag.iti__ml { height: 14px; background-position: -3292px 0px; } .iti__flag.iti__mm { height: 14px; background-position: -3314px 0px; } .iti__flag.iti__mn { height: 10px; background-position: -3336px 0px; } .iti__flag.iti__mo { height: 14px; background-position: -3358px 0px; } .iti__flag.iti__mp { height: 10px; background-position: -3380px 0px; } .iti__flag.iti__mq { height: 14px; background-position: -3402px 0px; } .iti__flag.iti__mr { height: 14px; background-position: -3424px 0px; } .iti__flag.iti__ms { height: 10px; background-position: -3446px 0px; } .iti__flag.iti__mt { height: 14px; background-position: -3468px 0px; } .iti__flag.iti__mu { height: 14px; background-position: -3490px 0px; } .iti__flag.iti__mv { height: 14px; background-position: -3512px 0px; } .iti__flag.iti__mw { height: 14px; background-position: -3534px 0px; } .iti__flag.iti__mx { height: 12px; background-position: -3556px 0px; } .iti__flag.iti__my { height: 10px; background-position: -3578px 0px; } .iti__flag.iti__mz { height: 14px; background-position: -3600px 0px; } .iti__flag.iti__na { height: 14px; background-position: -3622px 0px; } .iti__flag.iti__nc { height: 10px; background-position: -3644px 0px; } .iti__flag.iti__ne { height: 15px; background-position: -3666px 0px; } .iti__flag.iti__nf { height: 10px; background-position: -3686px 0px; } .iti__flag.iti__ng { height: 10px; background-position: -3708px 0px; } .iti__flag.iti__ni { height: 12px; background-position: -3730px 0px; } .iti__flag.iti__nl { height: 14px; background-position: -3752px 0px; } .iti__flag.iti__no { height: 15px; background-position: -3774px 0px; } .iti__flag.iti__np { height: 15px; background-position: -3796px 0px; } .iti__flag.iti__nr { height: 10px; background-position: -3811px 0px; } .iti__flag.iti__nu { height: 10px; background-position: -3833px 0px; } .iti__flag.iti__nz { height: 10px; background-position: -3855px 0px; } .iti__flag.iti__om { height: 10px; background-position: -3877px 0px; } .iti__flag.iti__pa { height: 14px; background-position: -3899px 0px; } .iti__flag.iti__pe { height: 14px; background-position: -3921px 0px; } .iti__flag.iti__pf { height: 14px; background-position: -3943px 0px; } .iti__flag.iti__pg { height: 15px; background-position: -3965px 0px; } .iti__flag.iti__ph { height: 10px; background-position: -3987px 0px; } .iti__flag.iti__pk { height: 14px; background-position: -4009px 0px; } .iti__flag.iti__pl { height: 13px; background-position: -4031px 0px; } .iti__flag.iti__pm { height: 14px; background-position: -4053px 0px; } .iti__flag.iti__pn { height: 10px; background-position: -4075px 0px; } .iti__flag.iti__pr { height: 14px; background-position: -4097px 0px; } .iti__flag.iti__ps { height: 10px; background-position: -4119px 0px; } .iti__flag.iti__pt { height: 14px; background-position: -4141px 0px; } .iti__flag.iti__pw { height: 13px; background-position: -4163px 0px; } .iti__flag.iti__py { height: 11px; background-position: -4185px 0px; } .iti__flag.iti__qa { height: 8px; background-position: -4207px 0px; } .iti__flag.iti__re { height: 14px; background-position: -4229px 0px; } .iti__flag.iti__ro { height: 14px; background-position: -4251px 0px; } .iti__flag.iti__rs { height: 14px; background-position: -4273px 0px; } .iti__flag.iti__ru { height: 14px; background-position: -4295px 0px; } .iti__flag.iti__rw { height: 14px; background-position: -4317px 0px; } .iti__flag.iti__sa { height: 14px; background-position: -4339px 0px; } .iti__flag.iti__sb { height: 10px; background-position: -4361px 0px; } .iti__flag.iti__sc { height: 10px; background-position: -4383px 0px; } .iti__flag.iti__sd { height: 10px; background-position: -4405px 0px; } .iti__flag.iti__se { height: 13px; background-position: -4427px 0px; } .iti__flag.iti__sg { height: 14px; background-position: -4449px 0px; } .iti__flag.iti__sh { height: 10px; background-position: -4471px 0px; } .iti__flag.iti__si { height: 10px; background-position: -4493px 0px; } .iti__flag.iti__sj { height: 15px; background-position: -4515px 0px; } .iti__flag.iti__sk { height: 14px; background-position: -4537px 0px; } .iti__flag.iti__sl { height: 14px; background-position: -4559px 0px; } .iti__flag.iti__sm { height: 15px; background-position: -4581px 0px; } .iti__flag.iti__sn { height: 14px; background-position: -4603px 0px; } .iti__flag.iti__so { height: 14px; background-position: -4625px 0px; } .iti__flag.iti__sr { height: 14px; background-position: -4647px 0px; } .iti__flag.iti__ss { height: 10px; background-position: -4669px 0px; } .iti__flag.iti__st { height: 10px; background-position: -4691px 0px; } .iti__flag.iti__sv { height: 12px; background-position: -4713px 0px; } .iti__flag.iti__sx { height: 14px; background-position: -4735px 0px; } .iti__flag.iti__sy { height: 14px; background-position: -4757px 0px; } .iti__flag.iti__sz { height: 14px; background-position: -4779px 0px; } .iti__flag.iti__ta { height: 10px; background-position: -4801px 0px; } .iti__flag.iti__tc { height: 10px; background-position: -4823px 0px; } .iti__flag.iti__td { height: 14px; background-position: -4845px 0px; } .iti__flag.iti__tf { height: 14px; background-position: -4867px 0px; } .iti__flag.iti__tg { height: 13px; background-position: -4889px 0px; } .iti__flag.iti__th { height: 14px; background-position: -4911px 0px; } .iti__flag.iti__tj { height: 10px; background-position: -4933px 0px; } .iti__flag.iti__tk { height: 10px; background-position: -4955px 0px; } .iti__flag.iti__tl { height: 10px; background-position: -4977px 0px; } .iti__flag.iti__tm { height: 14px; background-position: -4999px 0px; } .iti__flag.iti__tn { height: 14px; background-position: -5021px 0px; } .iti__flag.iti__to { height: 10px; background-position: -5043px 0px; } .iti__flag.iti__tr { height: 14px; background-position: -5065px 0px; } .iti__flag.iti__tt { height: 12px; background-position: -5087px 0px; } .iti__flag.iti__tv { height: 10px; background-position: -5109px 0px; } .iti__flag.iti__tw { height: 14px; background-position: -5131px 0px; } .iti__flag.iti__tz { height: 14px; background-position: -5153px 0px; } .iti__flag.iti__ua { height: 14px; background-position: -5175px 0px; } .iti__flag.iti__ug { height: 14px; background-position: -5197px 0px; } .iti__flag.iti__um { height: 11px; background-position: -5219px 0px; } .iti__flag.iti__un { height: 14px; background-position: -5241px 0px; } .iti__flag.iti__us { height: 11px; background-position: -5263px 0px; } .iti__flag.iti__uy { height: 14px; background-position: -5285px 0px; } .iti__flag.iti__uz { height: 10px; background-position: -5307px 0px; } .iti__flag.iti__va { height: 15px; background-position: -5329px 0px; } .iti__flag.iti__vc { height: 14px; background-position: -5346px 0px; } .iti__flag.iti__ve { height: 14px; background-position: -5368px 0px; } .iti__flag.iti__vg { height: 10px; background-position: -5390px 0px; } .iti__flag.iti__vi { height: 14px; background-position: -5412px 0px; } .iti__flag.iti__vn { height: 14px; background-position: -5434px 0px; } .iti__flag.iti__vu { height: 12px; background-position: -5456px 0px; } .iti__flag.iti__wf { height: 14px; background-position: -5478px 0px; } .iti__flag.iti__ws { height: 10px; background-position: -5500px 0px; } .iti__flag.iti__xk { height: 15px; background-position: -5522px 0px; } .iti__flag.iti__ye { height: 14px; background-position: -5544px 0px; } .iti__flag.iti__yt { height: 14px; background-position: -5566px 0px; } .iti__flag.iti__za { height: 14px; background-position: -5588px 0px; } .iti__flag.iti__zm { height: 14px; background-position: -5610px 0px; } .iti__flag.iti__zw { height: 10px; background-position: -5632px 0px; } .iti__flag { height: 15px; box-shadow: 0 0 1px 0 #888; background-image: url(images/intlTelInput/flags.png); background-repeat: no-repeat; background-color: #dbdbdb; background-position: 20px 0; } @media (min-resolution: 192dpi) { .iti__flag { background-image: url(images/intlTelInput/flags@2x.png); } } .iti__flag.iti__np { background-color: transparent; } /*! nouislider - 14.1.1 - 12/15/2019 */ .noUi-target, .noUi-target * { -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; touch-action: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; box-sizing: border-box; } .noUi-target { position: relative; } .noUi-base, .noUi-connects { width: 100%; height: 100%; position: relative; z-index: 1; } .noUi-connects { overflow: hidden; z-index: 0; } .noUi-connect, .noUi-origin { will-change: transform; position: absolute; z-index: 1; top: 0; left: 0; -ms-transform-origin: 0 0; -webkit-transform-origin: 0 0; -webkit-transform-style: preserve-3d; transform-origin: 0 0; transform-style: flat; } .noUi-connect { height: 100%; width: 100%; } .noUi-origin { height: 10%; width: 10%; } .noUi-txt-dir-rtl.noUi-horizontal .noUi-origin { right: 0; left: auto; } .noUi-vertical .noUi-origin { width: 0; } .noUi-horizontal .noUi-origin { height: 0; } .noUi-handle { backface-visibility: hidden; position: absolute; } .noUi-touch-area { height: 100%; width: 100%; } .noUi-state-tap .noUi-connect, .noUi-state-tap .noUi-origin { transition: transform 0.3s; } .noUi-state-drag * { cursor: inherit !important; } .noUi-horizontal { height: 10px; } .noUi-horizontal .noUi-handle { width: 20px; height: 20px; left: -10px; top: -6px; } .noUi-vertical { width: 18px; } .noUi-vertical .noUi-handle { width: 28px; height: 34px; left: -6px; top: -17px; } .noUi-txt-dir-rtl.noUi-horizontal .noUi-handle { right: -10px; left: auto; } .noUi-target { background: #fafafa; border-radius: 2px; border: none; box-shadow: inset 0 1px 1px #f0f0f0, 0 3px 6px -5px #bbb; } .noUi-connects { border-radius: 3px; } .noUi-connect { background-color: var(--brand-color); } .noUi-draggable { cursor: ew-resize; } .noUi-vertical .noUi-draggable { cursor: ns-resize; } .noUi-handle { border: 1px solid #d9d9d9; border-radius: 50%; background-color: var(--bg-white); color: var(--bg-white-text); cursor: default; box-shadow: inset 0 0 1px #fff, inset 0 1px 7px #ebebeb, 0 3px 6px -3px #bbb; } .noUi-active { box-shadow: inset 0 0 1px #fff, inset 0 1px 7px #ddd, 0 3px 6px -3px #bbb; } .noUi-handle:after, .noUi-handle:before { /*content: "";*/ display: block; position: absolute; height: 14px; width: 1px; background: #e8e7e6; right: 14px; top: 6px; } .noUi-handle:after { right: 17px; } .noUi-vertical .noUi-handle:after, .noUi-vertical .noUi-handle:before { width: 14px; height: 1px; right: 6px; top: 14px; } .noUi-vertical .noUi-handle:after { top: 17px; } [disabled] .noUi-connect { background: #b8b8b8; } [disabled] .noUi-handle, [disabled].noUi-handle, [disabled].noUi-target { cursor: not-allowed; } .noUi-pips, .noUi-pips * { box-sizing: border-box; } .noUi-pips { position: absolute; color: #999; } .noUi-value { position: absolute; white-space: nowrap; text-align: center; } .noUi-value-sub { color: #ccc; font-size: 10px; } .noUi-marker { position: absolute; background: #ccc; } .noUi-marker-sub { background: #aaa; } .noUi-marker-large { background: #aaa; } .noUi-pips-horizontal { padding: 10px 0; height: 80px; top: 100%; right: 0; width: 100%; } .noUi-value-horizontal { transform: translate(-50%, 50%); } .noUi-rtl .noUi-value-horizontal { transform: translate(50%, 50%); } .noUi-marker-horizontal.noUi-marker { margin-right: -1px; width: 1px; height: 5px; } .noUi-marker-horizontal.noUi-marker-sub { height: 5px; } .noUi-marker-horizontal.noUi-marker-large { height: 10px; } .noUi-pips-vertical { padding: 0 10px; height: 100%; top: 0; right: 100%; } .noUi-value-vertical { transform: translate(0, -50%); padding-right: 25px; } .noUi-rtl .noUi-value-vertical { transform: translate(0, 50%); } .noUi-marker-vertical.noUi-marker { width: 5px; height: 2px; margin-top: -1px; } .noUi-marker-vertical.noUi-marker-sub { width: 10px; } .noUi-marker-vertical.noUi-marker-large { width: 15px; } .noUi-tooltip { display: block; position: absolute; border: 1px solid #d9d9d9; border-radius: 3px; background-color: var(--bg-white); color: var(--bg-white-text); color: #000; padding: 5px; text-align: center; white-space: nowrap; } .noUi-horizontal .noUi-tooltip { transform: translate(-50%, 0); /*right: 50%;*/ bottom: 120%; } .noUi-vertical .noUi-tooltip { transform: translate(0, -50%); top: 50%; left: 120%; } .noUi-tooltip { display: none; } .noUi-active .noUi-tooltip { display: block; } .select2-container { box-sizing: border-box; display: inline-block; margin: 0; position: relative; vertical-align: middle; } .select2-container .select2-selection--single { box-sizing: border-box; cursor: pointer; display: block; height: 28px; -moz-user-select: none; user-select: none; -webkit-user-select: none; } .select2-container .select2-selection--single .select2-selection__rendered { display: block; padding-left: 8px; padding-right: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .select2-container .select2-selection--single .select2-selection__clear { background-color: rgba(0, 0, 0, 0); border: none; font-size: 1em; } .select2-container[dir=rtl] .select2-selection--single .select2-selection__rendered { padding-right: 8px; padding-left: 20px; } .select2-container .select2-selection--multiple { box-sizing: border-box; cursor: pointer; display: block; min-height: 32px; -moz-user-select: none; user-select: none; -webkit-user-select: none; } .select2-container .select2-selection--multiple .select2-selection__rendered { display: inline; list-style: none; padding: 0; } .select2-container .select2-selection--multiple .select2-selection__clear { background-color: rgba(0, 0, 0, 0); border: none; font-size: 1em; } .select2-container .select2-search--inline .select2-search__field { box-sizing: border-box; border: none; font-size: 100%; margin-top: 5px; margin-left: 5px; padding: 0; max-width: 100%; resize: none; height: 18px; vertical-align: bottom; font-family: sans-serif; overflow: hidden; word-break: keep-all; } .select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button { -webkit-appearance: none; } .select2-dropdown { background-color: #fff; border: 1px solid #aaa; border-radius: 4px; box-sizing: border-box; display: block; position: absolute; left: -100000px; width: 100%; z-index: 1051; } .select2-results { display: block; } .select2-results__options { list-style: none; margin: 0; padding: 0; } .select2-results__option { padding: 6px; -moz-user-select: none; user-select: none; -webkit-user-select: none; } .select2-results__option--selectable { cursor: pointer; } .select2-container--open .select2-dropdown { left: 0; } .select2-container--open .select2-dropdown--above { border-bottom: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .select2-container--open .select2-dropdown--below { border-top: none; border-top-left-radius: 0; border-top-right-radius: 0; } .select2-search--dropdown { display: block; padding: 4px; } .select2-search--dropdown .select2-search__field { padding: 4px; width: 100%; box-sizing: border-box; } .select2-search--dropdown .select2-search__field::-webkit-search-cancel-button { -webkit-appearance: none; } .select2-search--dropdown.select2-search--hide { display: none; } .select2-close-mask { border: 0; margin: 0; padding: 0; display: block; position: fixed; left: 0; top: 0; min-height: 100%; min-width: 100%; height: auto; width: auto; opacity: 0; z-index: 99; background-color: #fff; filter: alpha(opacity=0); } .select2-hidden-accessible { border: 0 !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; height: 1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; width: 1px !important; white-space: nowrap !important; } .select2-container--default .select2-selection--single { background-color: #fff; border: 1px solid #aaa; border-radius: 4px; } .select2-container--default .select2-selection--single .select2-selection__rendered { color: #444; line-height: 28px; } .select2-container--default .select2-selection--single .select2-selection__clear { cursor: pointer; float: right; font-weight: bold; height: 26px; margin-right: 20px; padding-right: 0px; } .select2-container--default .select2-selection--single .select2-selection__placeholder { color: #999; } .select2-container--default .select2-selection--single .select2-selection__arrow { height: 26px; position: absolute; top: 1px; right: 1px; width: 20px; } .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: #888 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); border-style: solid; border-width: 5px 4px 0 4px; height: 0; left: 50%; margin-left: -4px; margin-top: -2px; position: absolute; top: 50%; width: 0; } .select2-container--default[dir=rtl] .select2-selection--single .select2-selection__clear { float: left; } .select2-container--default[dir=rtl] .select2-selection--single .select2-selection__arrow { left: 1px; right: auto; } .select2-container--default.select2-container--disabled .select2-selection--single { background-color: #eee; cursor: default; } .select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear { display: none; } .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #888 rgba(0, 0, 0, 0); border-width: 0 4px 5px 4px; } .select2-container--default .select2-selection--multiple { background-color: #fff; border: 1px solid #aaa; border-radius: 4px; cursor: text; padding-bottom: 5px; padding-right: 5px; position: relative; } .select2-container--default .select2-selection--multiple.select2-selection--clearable { padding-right: 25px; } .select2-container--default .select2-selection--multiple .select2-selection__clear { cursor: pointer; font-weight: bold; height: 20px; margin-right: 10px; margin-top: 5px; position: absolute; right: 0; padding: 1px; } .select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: #e4e4e4; border: 1px solid #aaa; border-radius: 4px; box-sizing: border-box; display: inline-block; margin-left: 5px; margin-top: 5px; padding: 0; padding-left: 20px; position: relative; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; white-space: nowrap; } .select2-container--default .select2-selection--multiple .select2-selection__choice__display { cursor: default; padding-left: 2px; padding-right: 5px; } .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { background-color: rgba(0, 0, 0, 0); border: none; border-right: 1px solid #aaa; border-top-left-radius: 4px; border-bottom-left-radius: 4px; color: #999; cursor: pointer; font-size: 1em; font-weight: bold; padding: 0 4px; position: absolute; left: 0; top: 0; } .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover, .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus { background-color: #f1f1f1; color: #333; outline: none; } .select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice { margin-left: 5px; margin-right: auto; } .select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice__display { padding-left: 5px; padding-right: 2px; } .select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice__remove { border-left: 1px solid #aaa; border-right: none; border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: 4px; border-bottom-right-radius: 4px; } .select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__clear { float: left; margin-left: 10px; margin-right: auto; } .select2-container--default.select2-container--focus .select2-selection--multiple { border: solid #000 1px; outline: 0; } .select2-container--default.select2-container--disabled .select2-selection--multiple { background-color: #eee; cursor: default; } .select2-container--default.select2-container--disabled .select2-selection__choice__remove { display: none; } .select2-container--default.select2-container--open.select2-container--above .select2-selection--single, .select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple { border-top-left-radius: 0; border-top-right-radius: 0; } .select2-container--default.select2-container--open.select2-container--below .select2-selection--single, .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .select2-container--default .select2-search--dropdown .select2-search__field { border: 1px solid #aaa; } .select2-container--default .select2-search--inline .select2-search__field { background: rgba(0, 0, 0, 0); border: none; outline: 0; box-shadow: none; -webkit-appearance: textfield; } .select2-container--default .select2-results > .select2-results__options { max-height: 200px; overflow-y: auto; } .select2-container--default .select2-results__option .select2-results__option { padding-left: 1em; } .select2-container--default .select2-results__option .select2-results__option .select2-results__group { padding-left: 0; } .select2-container--default .select2-results__option .select2-results__option .select2-results__option { margin-left: -1em; padding-left: 2em; } .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option { margin-left: -2em; padding-left: 3em; } .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option { margin-left: -3em; padding-left: 4em; } .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option { margin-left: -4em; padding-left: 5em; } .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option { margin-left: -5em; padding-left: 6em; } .select2-container--default .select2-results__option--group { padding: 0; } .select2-container--default .select2-results__option--disabled { color: #999; } .select2-container--default .select2-results__option--selected { background-color: #ddd; } .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background-color: #5897fb; color: #fff; } .select2-container--default .select2-results__group { cursor: default; display: block; padding: 6px; } .select2-container--classic .select2-selection--single { background-color: #f7f7f7; border: 1px solid #aaa; border-radius: 4px; outline: 0; background-image: linear-gradient(to bottom, white 50%, #eeeeee 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FFFFFFFF", endColorstr="#FFEEEEEE", GradientType=0); } .select2-container--classic .select2-selection--single:focus { border: 1px solid #5897fb; } .select2-container--classic .select2-selection--single .select2-selection__rendered { color: #444; line-height: 28px; } .select2-container--classic .select2-selection--single .select2-selection__clear { cursor: pointer; float: right; font-weight: bold; height: 26px; margin-right: 20px; } .select2-container--classic .select2-selection--single .select2-selection__placeholder { color: #999; } .select2-container--classic .select2-selection--single .select2-selection__arrow { background-color: #ddd; border: none; border-left: 1px solid #aaa; border-top-right-radius: 4px; border-bottom-right-radius: 4px; height: 26px; position: absolute; top: 1px; right: 1px; width: 20px; background-image: linear-gradient(to bottom, #eeeeee 50%, #cccccc 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FFEEEEEE", endColorstr="#FFCCCCCC", GradientType=0); } .select2-container--classic .select2-selection--single .select2-selection__arrow b { border-color: #888 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); border-style: solid; border-width: 5px 4px 0 4px; height: 0; left: 50%; margin-left: -4px; margin-top: -2px; position: absolute; top: 50%; width: 0; } .select2-container--classic[dir=rtl] .select2-selection--single .select2-selection__clear { float: left; } .select2-container--classic[dir=rtl] .select2-selection--single .select2-selection__arrow { border: none; border-right: 1px solid #aaa; border-radius: 0; border-top-left-radius: 4px; border-bottom-left-radius: 4px; left: 1px; right: auto; } .select2-container--classic.select2-container--open .select2-selection--single { border: 1px solid #5897fb; } .select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow { background: rgba(0, 0, 0, 0); border: none; } .select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #888 rgba(0, 0, 0, 0); border-width: 0 4px 5px 4px; } .select2-container--classic.select2-container--open.select2-container--above .select2-selection--single { border-top: none; border-top-left-radius: 0; border-top-right-radius: 0; background-image: linear-gradient(to bottom, white 0%, #eeeeee 50%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FFFFFFFF", endColorstr="#FFEEEEEE", GradientType=0); } .select2-container--classic.select2-container--open.select2-container--below .select2-selection--single { border-bottom: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0; background-image: linear-gradient(to bottom, #eeeeee 50%, white 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FFEEEEEE", endColorstr="#FFFFFFFF", GradientType=0); } .select2-container--classic .select2-selection--multiple { background-color: #fff; border: 1px solid #aaa; border-radius: 4px; cursor: text; outline: 0; padding-bottom: 5px; padding-right: 5px; } .select2-container--classic .select2-selection--multiple:focus { border: 1px solid #5897fb; } .select2-container--classic .select2-selection--multiple .select2-selection__clear { display: none; } .select2-container--classic .select2-selection--multiple .select2-selection__choice { background-color: #e4e4e4; border: 1px solid #aaa; border-radius: 4px; display: inline-block; margin-left: 5px; margin-top: 5px; padding: 0; } .select2-container--classic .select2-selection--multiple .select2-selection__choice__display { cursor: default; padding-left: 2px; padding-right: 5px; } .select2-container--classic .select2-selection--multiple .select2-selection__choice__remove { background-color: rgba(0, 0, 0, 0); border: none; border-top-left-radius: 4px; border-bottom-left-radius: 4px; color: #888; cursor: pointer; font-size: 1em; font-weight: bold; padding: 0 4px; } .select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover { color: #555; outline: none; } .select2-container--classic[dir=rtl] .select2-selection--multiple .select2-selection__choice { margin-left: 5px; margin-right: auto; } .select2-container--classic[dir=rtl] .select2-selection--multiple .select2-selection__choice__display { padding-left: 5px; padding-right: 2px; } .select2-container--classic[dir=rtl] .select2-selection--multiple .select2-selection__choice__remove { border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: 4px; border-bottom-right-radius: 4px; } .select2-container--classic.select2-container--open .select2-selection--multiple { border: 1px solid #5897fb; } .select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple { border-top: none; border-top-left-radius: 0; border-top-right-radius: 0; } .select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple { border-bottom: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .select2-container--classic .select2-search--dropdown .select2-search__field { border: 1px solid #aaa; outline: 0; } .select2-container--classic .select2-search--inline .select2-search__field { outline: 0; box-shadow: none; } .select2-container--classic .select2-dropdown { background-color: #fff; border: 1px solid rgba(0, 0, 0, 0); } .select2-container--classic .select2-dropdown--above { border-bottom: none; } .select2-container--classic .select2-dropdown--below { border-top: none; } .select2-container--classic .select2-results > .select2-results__options { max-height: 200px; overflow-y: auto; } .select2-container--classic .select2-results__option--group { padding: 0; } .select2-container--classic .select2-results__option--disabled { color: gray; } .select2-container--classic .select2-results__option--highlighted.select2-results__option--selectable { background-color: #3875d7; color: #fff; } .select2-container--classic .select2-results__group { cursor: default; display: block; padding: 6px; } .select2-container--classic.select2-container--open .select2-dropdown { border-color: #5897fb; } .select2-container--default { flex: 1 1 auto; width: 1%; } .select2-container--default .select2-dropdown { background-color: var(--bg-white); color: var(--bg-white-text); border: solid 1px var(--border-color) !important; border-radius: 4px !important; box-shadow: 0px 0px 50px 0px var(--shadow-rgb); } .select2-container--default .select2-dropdown .select2-results__option { font-size: 0.875rem; } .select2-container--default:focus-visible, .select2-container--default *:focus-visible { outline: 1px solid #888 !important; } .select2-container--default .select2-selection--single { border: none; height: auto; } .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--txt-gray); } .select2-container--default .select2-selection--single .select2-selection__arrow { display: none; } .select2-container--default .select2-selection--single .select2-selection__rendered { background-color: var(--bg-input); color: var(--txt-body); border: solid 1px var(--border-color); border-radius: 4px; height: 2.5rem !important; width: 100%; padding: 0 1rem; font-size: 0.85rem; line-height: 2.5rem; padding-left: 35px; background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMzA2cHgiIGhlaWdodD0iMzA2cHgiIHZpZXdCb3g9IjAgMCAzMDYgMzA2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAzMDYgMzA2OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQoJPGc+DQoJCTxnIGlkPSJleHBhbmQtbW9yZSI+DQoJCQk8cG9seWdvbiBwb2ludHM9IjI3MC4zLDU4LjY1IDE1MywxNzUuOTUgMzUuNyw1OC42NSAwLDk0LjM1IDE1MywyNDcuMzUgMzA2LDk0LjM1IiAvPg0KCQk8L2c+DQoJPC9nPg0KDQo8L3N2Zz4NCg=="); background-size: 10px; background-repeat: no-repeat; background-position: calc(100% - 12px) center; } .select2-container--default .select2-selection--single .select2-selection__rendered:hover { cursor: pointer; } [data-theme=dark] .select2-container--default .select2-selection--single .select2-selection__rendered { background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMzA2cHgiIGhlaWdodD0iMzA2cHgiIHZpZXdCb3g9IjAgMCAzMDYgMzA2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAzMDYgMzA2OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQogICAgPGc+DQogICAgICAgIDxnIGZpbGw9IiNmZmYiIGlkPSJleHBhbmQtbW9yZSI+DQogICAgICAgICAgICA8cG9seWdvbiBwb2ludHM9IjI3MC4zLDU4LjY1IDE1MywxNzUuOTUgMzUuNyw1OC42NSAwLDk0LjM1IDE1MywyNDcuMzUgMzA2LDk0LjM1IiAvPg0KICAgICAgICA8L2c+DQogICAgPC9nPg0KPC9zdmc+); } .main[dir=rtl] .select2-container--default .select2-selection--single .select2-selection__rendered { padding-right: 35px; padding-left: 0.75rem; text-align: left; } .main[dir=ltr] .select2-container--default .select2-selection--single .select2-selection__rendered { padding-right: 35px; padding-left: 0.75rem; background-position: calc(100% - 12px) center; } [dir=rtl] .select2-container--default .select2-selection--single .select2-selection__rendered { background-position: calc(0% + 12px) center; } .select2-container--default .select2-selection--single .select2-results__options .select2-results__option { font-size: 0.85rem; } .select2-container--default .select2-selection--single .select2-results__options .select2-results__option:hover { cursor: pointer; background-color: var(--bg-gray); color: var(--txt-body); } .select2-container--default .select2-selection--multiple { background-color: var(--bg-white); color: var(--bg-white-text); padding-bottom: 17px; border: solid 1px var(--border-color) !important; } .select2-container--default .select2-selection--multiple:focus { outline: 0; } .select2-container--default .select2-selection--multiple.select2-selection--clearable { padding-left: 25px; } .select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: var(--bg-gray); color: var(--txt-body); border: 0; border-radius: 4px; margin-left: 5px; padding: 5px; font-size: 0.85rem; padding-right: 30px; } .select2-container--default .select2-selection--multiple .select2-selection__choice__display { font-size: 0.85rem; } .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { background-color: var(--bg-gray-lightest); color: var(--txt-gray); border: none !important; line-height: 1; right: 4px !important; top: 4px; aspect-ratio: 1/1; border-radius: 30px !important; font-size: 1rem; width: 1rem; height: 1rem; display: inline-flex; } .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover, .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus { background-color: #f1f1f1; color: var(--txt-body); outline: none; } .select2-container--default .select2-selection--multiple .select2-search { display: block; color: var(--txt-body); height: 2.5rem; width: 100%; padding: 0.25rem 0.35rem; font-size: 0.85rem; line-height: 1.5; } .select2-search--dropdown { margin: 1rem; padding: 0; } .custom-select2 .select2-selection__clear { height: 36px !important; aspect-ratio: 1/1; align-items: center; display: flex; justify-content: center; border-radius: 50%; background-color: var(--bg-gray-lightest); border: none; font-size: 1em; margin-left: 0 !important; } .main[dir=rtl] .custom-select2 .select2-selection__clear { float: right; } .custom-select2 input.select2-search__field, .custom-select2 .select2-search__field.custom-select { margin: 0; padding: 0; border: solid 1px var(--border-color) !important; height: 2.5rem !important; -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTEyIDUxMjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPGc+DQoJCTxwYXRoIGZpbGw9IiM4ODgiIGQ9Ik0yMjUuNDc0LDBDMTAxLjE1MSwwLDAsMTAxLjE1MSwwLDIyNS40NzRjMCwxMjQuMzMsMTAxLjE1MSwyMjUuNDc0LDIyNS40NzQsMjI1LjQ3NA0KCQkJYzEyNC4zMywwLDIyNS40NzQtMTAxLjE0NCwyMjUuNDc0LTIyNS40NzRDNDUwLjk0OCwxMDEuMTUxLDM0OS44MDQsMCwyMjUuNDc0LDB6IE0yMjUuNDc0LDQwOS4zMjMNCgkJCWMtMTAxLjM3MywwLTE4My44NDgtODIuNDc1LTE4My44NDgtMTgzLjg0OFMxMjQuMTAxLDQxLjYyNiwyMjUuNDc0LDQxLjYyNnMxODMuODQ4LDgyLjQ3NSwxODMuODQ4LDE4My44NDgNCgkJCVMzMjYuODQ3LDQwOS4zMjMsMjI1LjQ3NCw0MDkuMzIzeiIvPg0KCTwvZz4NCjwvZz4gDQo8Zz4NCgk8Zz4NCgkJPHBhdGggZmlsbD0iIzg4OCIgZD0iTTUwNS45MDIsNDc2LjQ3MkwzODYuNTc0LDM1Ny4xNDRjLTguMTMxLTguMTMxLTIxLjI5OS04LjEzMS0yOS40MywwYy04LjEzMSw4LjEyNC04LjEzMSwyMS4zMDYsMCwyOS40M2wxMTkuMzI4LDExOS4zMjgNCgkJCWM0LjA2NSw0LjA2NSw5LjM4Nyw2LjA5OCwxNC43MTUsNi4wOThjNS4zMjEsMCwxMC42NDktMi4wMzMsMTQuNzE1LTYuMDk4QzUxNC4wMzMsNDk3Ljc3OCw1MTQuMDMzLDQ4NC41OTYsNTA1LjkwMiw0NzYuNDcyeiIvPg0KCTwvZz4NCjwvZz4NCiANCjwvc3ZnPg0K"); background-size: 14px; background-repeat: no-repeat; background-position: 13px center; background-color: var(--bg-input) !important; color: currentColor; margin: 0; width: 100% !important; font-size: 0.85rem; font-family: inherit; } .custom-select2 input.select2-search__field:focus, .custom-select2 .select2-search__field.custom-select:focus, .custom-select2 input.select2-search__field:hover, .custom-select2 .select2-search__field.custom-select:hover, .custom-select2 input.select2-search__field:focus-visible, .custom-select2 .select2-search__field.custom-select:focus-visible { outline: 0; } .main[dir=rtl] .custom-select2 input.select2-search__field, .main[dir=rtl] .custom-select2 .select2-search__field.custom-select { padding-left: 40px; } [dir=rtl] .custom-select2 input.select2-search__field, [dir=rtl] .custom-select2 .select2-search__field.custom-select { background-position: calc(100% - 13px) center; } .custom-select2 .select2-results__option--highlighted { background-color: var(--bg-form); color: var(--bg-form-inverse); cursor: pointer !important; } .custom-select2 .select2-dropdown { background-color: var(--bg-white); color: var(--bg-white-text); } .custom-select2 .select2-selection--single { background-color: var(--bg-white); color: var(--bg-white-text); } .custom-select2.custom-select2-multiple li[aria-selected=true] { background-color: var(--bg-form); color: var(--bg-form-inverse); } .custom-select2.custom-select2-width { width: 100% !important; } .error { border: 1px solid #fd397a; background-color: transparent; } .offline-wrapper { max-width: 400px; margin: 100px auto; text-align: center; } .offline-wrapper .img-no-internet { max-width: 80%; margin-bottom: 1.5rem; } .offline-wrapper p { margin-bottom: 1rem; } .enter-page { height: 100%; position: relative; display: flex; flex-direction: column; flex-wrap: nowrap; } .enter-page .form-sign { flex: 1; padding: 0 2rem; padding-top: 2.5rem; margin: 0 auto; max-width: 500px; width: 100%; } .enter-page .form-sign-logo { margin: 0 auto; margin-bottom: 2.5rem; display: flex; justify-content: center; } .enter-page .card-sign_body { border: solid 1px var(--border-color); border-radius: 4px; box-shadow: rgba(0, 0, 0, 0.12) 0px 6px 16px; padding: 1.5rem; } .form-title { display: flex; align-items: center; justify-content: space-between; } .form-title h2, .form-title .h2 { color: #000; font-weight: 600; font-size: calc(112.5% + 0.9vw); } .or { position: relative; text-transform: uppercase; font-size: 11px; color: var(--txt-gray); margin: 30px 0; display: flex; text-align: center; } .or:after { content: ""; height: 1px; width: 100%; background: var(--border-color); position: absolute; top: 50%; right: 0; } .or span { position: relative; z-index: 1; background-color: var(--bg-white); color: var(--bg-white-text); padding: 0 5px; letter-spacing: 2px; margin: 0 auto; } .other-option { margin-top: 1.5rem; } .login-popup { padding: 1rem 2rem; } .login-popup .title { margin-bottom: 1.5rem; } .login-wrapper .form-side { padding: 2rem; } @media (max-width: 767.98px) { .login-wrapper .form-side { padding: 1rem; } } .login-wrapper .form-side input[type=submit], .login-wrapper .form-side [type=submit].custom-select { background: var(--secondary-color); color: var(--secondary-color-inverse); text-transform: uppercase; font-size: 1em; border: none; display: block; width: 100%; } .login-wrapper .forgot { text-align: left; color: var(--txt-white); font-size: 0.9em; line-height: 1; } .login-wrapper .last-button { background: none; color: var(--txt-white); text-transform: uppercase; font-size: 1em; border: solid 1px rgba(255, 255, 255, 0.2); display: block; padding: 10px 20px; text-align: center; line-height: 1.42857; width: 100%; } .login-wrapper .last-button:hover, .login-wrapper .last-button:focus, .login-wrapper .last-button:active { background-color: #424242; } .login-wrapper .add-side { padding: 2rem; display: table-cell; max-width: 40%; flex: 0 0 40%; background-color: var(--bg-white); color: var(--bg-white-text); background: url(images/login-with.png) no-repeat bottom center; } .connect a.link { display: block; color: var(--txt-white); text-transform: uppercase; font-size: 1em; border: none; display: block; padding: 10px 20px; text-align: center; line-height: 1.42857; width: 100%; margin-bottom: 15px; } .connect a.fb { background: #3856a0; } .connect a.gp { background: #dd4330; } .connect .svg { width: 18px; height: 18px; fill: #fff; display: inline-block; vertical-align: middle; } .forgot { text-align: left; font-size: 0.75em; } .otp-heading { display: flex !important; justify-content: space-between; align-items: center; flex: 1; } .card-sign { display: flex; flex-direction: column; flex-wrap: wrap; } .card-sign_head { margin-bottom: 2rem; text-align: center; } .card-sign_head .title { font-weight: 600; margin: 0; margin-bottom: 0.5rem; font-size: 1.125rem; } .card-sign_head p { color: var(--txt-gray); font-size: 0.8rem; } .card-sign_body { flex: 1; } .card-sign_foot { margin-top: 4rem; text-align: center; color: var(--txt-gray); } .card-sign_foot a { font-size: 0.8rem; color: var(--brand-color); text-align: center; } .card-sign .link-underline { font-size: 0.8rem; } .card-sign .link-underline:after { content: normal; } .more-links { display: flex; align-items: center; flex-direction: row; flex-wrap: wrap; justify-content: center; grid-gap: 1rem; padding-bottom: 1rem; } .other-links { display: flex; align-items: center; justify-content: center; font-size: 0.8rem; margin-top: 2rem; } .other-links li { margin: 0 0.5rem; font-weight: 600; color: var(--txt-gray); } .forgot { text-align: left; } .buttons-list { margin-bottom: 1.5rem; display: flex; flex-flow: column wrap; flex-direction: column; align-items: center; gap: 0.5rem; } .buttons-list-item { flex: 1; width: 100%; max-width: 310px; } .buttons-list-link { font-size: 14px; font-weight: 600; border-radius: 10px; border: none; padding: 0.4rem 1rem; display: flex; align-items: center; justify-content: center; background-color: transparent; position: relative; overflow: hidden; } .buttons-list-link::before { content: ""; background: var(--bg-gray-light); position: absolute; z-index: -1; top: 0; width: 100%; height: 100%; right: 0; left: 0; opacity: 0; transition: all 0.2s cubic-bezier(0.2, 0.91, 0.85, 0.96) 0s; transform: scale(0.75); backface-visibility: hidden; pointer-events: none; } .buttons-list-link:is(:hover, :focus, :active, .active)::before { opacity: 1; transform: scale(1); } .buttons-list-link { background-color: var(--bg-gray-light); color: var(--txt-body); } .buttons-list-link:before { z-index: 0; } .buttons-list-link:hover, .buttons-list-link:focus, .buttons-list-link:active { color: currentColor; border-color: var(--border-dark); text-decoration: none; cursor: pointer; } .buttons-list-link:focus { box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); } .buttons-list-wrap { display: flex; align-items: center; gap: 0; width: 220px; margin: 0 auto; position: relative; z-index: 0; } .buttons-list-icon { padding: 0; flex: 0 0 40px; max-width: 40px; margin: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; } .buttons-list img, .buttons-list .svg { margin: 0 auto; width: 30px; height: 30px; } .buttons-list .btn-fb, .buttons-list .btn-FacebookLogin { background: #3b5a99; } .buttons-list .btn-gp, .buttons-list .btn-GoogleLogin { background: #da4a42; } .buttons-list .btn-gm { background: #333333; } .buttons-list .btn-AppleLogin { background: #000000; } .buttons-list .btn-InstagramLogin { background: #3f729b; } .delivery-staff-registration-head { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1rem; margin-bottom: 2rem; } .delivery-staff-registration-head .h2 { font-size: 1.6rem; font-weight: 600; } .delivery-staff-registration .map-wrap:has(.map-start) { border: solid 1px var(--border-color); border-radius: 4px; display: grid; } @media (min-width: 992px) { .delivery-staff-registration .map-wrap:has(.map-start) { grid-template-columns: 2fr 1fr; } } .delivery-staff-registration .map-wrap:has(.map-start) .map-end { max-width: none; margin: 0; } @media (min-width: 992px) { .delivery-staff-registration .map-wrap:has(.map-start) .map-end { border-right: solid 1px var(--border-color); } } .delivery-staff-registration .map-wrap .title { font-size: 1rem; margin: 1rem 0; } .delivery-staff-registration .map-wrap .map-start { display: flex; flex-direction: column; } .delivery-staff-registration .map-wrap .map-start .title { padding-right: 1.5rem; } .delivery-staff-registration .map-wrap .map-start .address-map { background-color: var(--bg-gray); position: relative; flex: 1; min-height: 320px; } .delivery-staff-registration .map-wrap .map-start .address-map .delivery-map { position: absolute; inset: 0; } .delivery-staff-registration .map-wrap .map-end { max-width: 500px; margin: 0 auto; padding: 0 1.5rem; } .delivery-staff-registration .map-wrap .map-end-foot { text-align: center; } .form-on-map { background-color: transparent; border: none; border-radius: 0; display: flex; flex-direction: column; position: absolute; z-index: 1; top: 5rem; left: 1rem; right: 1rem; max-width: 500px; margin: 0 auto; } .form-on-map-group { display: flex; gap: 1rem; flex: 1 1 100%; position: relative; } .form-on-map-field { background-color: var(--bg-white); color: var(--bg-white-text); border-radius: 4px; display: flex; gap: 0.5rem; flex: 1; position: relative; padding: 0; width: 100%; max-width: 100%; } .form-on-map-field .gmp-place-autocomplete { flex: 1; border: none; } .form-on-map .icn-detect { background-color: var(--bg-white); color: var(--bg-white-text); color: var(--bg-form); aspect-ratio: 1/1; width: 40px; border: none; border-right: solid 1px var(--border-color); } .form-on-map .btn-locate { height: 52px; line-height: 52px; } .form-sign-copyright { position: sticky; bottom: 0; display: flex; justify-content: center; align-items: center; gap: 0.5rem; font-size: 0.8rem; padding: 1.5rem; } .collection-search-head { margin-bottom: 3rem; } .collection-search-top { display: flex; justify-content: space-between; } .collection-search-bottom { display: flex; flex-direction: column; flex-flow: row wrap; gap: 1.5rem; justify-content: space-between; } @media (min-width: 992px) { .collection-search-toolbar { margin-right: auto; } } .collection-search-title { display: flex; flex-direction: column; margin-bottom: 1rem; } @media (min-width: 992px) { .collection-search-title { margin-bottom: 0; } } .collection-search-title .h1 { font-size: 1.8rem; margin: 0; } .collection-search-title .h1 .search-results { font-weight: 600; } .collection-search-title .total-products { font-size: 0.85rem; color: var(--txt-gray); } .collection-search .sorting-select { border-color: var(--black); color: var(--txt-black); } @media (max-width: 991.98px) { .collection-search .sorting-select { width: 100%; } } .page-sort { display: flex; align-items: center; flex-flow: row wrap; grid-gap: 1rem; margin-right: auto; } @media (max-width: 767.98px) { .page-sort .btn { width: 100%; } } .page-sort-item { position: relative; padding: 0; line-height: 1; display: block; } @media (max-width: 767.98px) { .page-sort-item { flex: 1; } } .collection-content { position: relative; flex-basis: 0; flex-grow: 1; max-width: 100%; } .btn-filters .dot-count { width: 10px; height: 10px; background: var(--secondary-color); display: block; position: absolute; left: -3px; top: -3px; border-radius: 20px; } .collection-pager { background-color: var(--bg-gray); display: flex; gap: 1rem; flex-flow: row wrap; flex: 1; padding: 1rem; margin-top: 4rem; } .collection-pager .pagination { margin: 0; } @media (max-width: 575.98px) { .collection-pager .pagination .rewind, .collection-pager .pagination .dotted, .collection-pager .pagination .forward { display: none; } } .collection-pager .sorting-select { max-width: 120px; } @media (min-width: 992px) { .collection-pager .sorting-select { margin-right: auto; } } .btn-map-view { white-space: nowrap; display: flex; align-items: center; gap: 6px; } .btn-map-view .toggle-icon { display: inline-block; font-weight: 600; position: relative; cursor: pointer; outline: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; min-width: 40px; width: 40px; height: 20px; border-radius: 60px; transition: background 0.4s; } .btn-map-view .toggle-icon::before, .btn-map-view .toggle-icon::after { content: ""; display: block; position: absolute; } .btn-map-view .toggle-icon::after { top: 3px; right: 3px; width: 14px; height: 14px; background-color: var(--bg-white); color: var(--bg-white-text); background-color: var(--bg-white); color: var(--bg-white-text); border-radius: 100%; box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; transition: transform 0.4s; } .btn-map-view .toggle-icon::before { left: 0; right: 0; top: 0; bottom: 0; background-color: #888; border-radius: 60px; transition: background 0.4s; } .btn-map-view.active .toggle-icon::before { background-color: var(--secondary-color); } .btn-map-view.active .toggle-icon::after { right: auto; left: 3px; } .btn-float { width: auto; display: flex; gap: 6px; position: fixed; bottom: 85px; right: 50%; transform: translateX(-50%); z-index: 1020; border-radius: 40px; border: none; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); padding: 0 1rem; background-color: var(--secondary-color); color: var(--secondary-color-inverse); } @media (min-width: 992px) { .btn-float { display: none; } } .btn-float:hover, .btn-float:focus, .btn-float:active { background-color: var(--secondary-color); color: var(--secondary-color-inverse); } .btn-float { cursor: pointer; } .btn-float .svg { width: 1rem; height: 1rem; margin: 0; } .btn-float .dot-count { background-color: var(--brand-color); color: var(--brand-color-inverse); width: 10px; height: 10px; display: block; position: absolute; left: 0; top: 0; border-radius: 20px; } .fixed__panel.stick { top: 0; position: fixed; width: 370px; } .divider--filters { border-bottom: solid 1px #e8e8e8; padding: 0px 0; margin: 15px 0; position: relative; } .divider--filters:after { background-color: var(--brand-color); color: var(--brand-color-inverse); width: 30px; height: 2px; content: ""; position: absolute; top: -1px; right: 0; } .scrollbar-filters { overflow-y: auto; max-height: 300px; width: auto !important; max-width: none !important; } .filter-price-slider { background: #ccc; height: 2px; margin: 21px 2px 16px; position: relative; padding: 0 10px; width: 100%; } .price-slider-scroll { background: #333; border: medium none; border-radius: 50%; cursor: pointer; height: 13px; margin-right: 0; outline: medium none; position: absolute; top: -6px; transition: all 0.2s ease-out 0s; width: 13px; z-index: 2; } .price-slider-scroll:hover, .price-slider-scroll:focus, .price-slider-scroll:active { transform: scale3d(1.3, 1.3, 1); } .from-price-text, .to-price-text { font-weight: 500; font-size: 0.8em; vertical-align: top; } .to-price-text { float: right; text-align: left; } .brands-list li { margin: 10px 0; display: block; } .white--bg { background-color: var(--bg-white); color: var(--bg-white-text); } .right-panel { padding: 20px; } .right_panel_head_right { float: right; text-align: right; } .listing-products--list .product-listing[data-view="3"], .listing-products--list .product-listing[data-view="4"], .listing-products--list .product-listing[data-view="5"], .listing-products--list .product-listing[data-view="6"] { grid-template-columns: repeat(3, 1fr); } .listing-products--list .products { display: flex; } .listing-products--list .products .products-title { margin: 0; min-height: auto; padding: 5px 0; } .listing-products--list .products .products-body { position: static; width: 120px; } .listing-products--list .products .products-body .products-img { margin-bottom: 0; } .listing-products--list .products .products-foot { width: calc(100% - 120px); text-align: right; padding: 1rem; } .listing-products--list .products .products-price { padding: 0; justify-content: inherit; } /*grid list view*/ .list-grid-toggle { width: 40px; height: 38px; padding: 1px 2px; border-radius: 3px; border: solid 1px var(--border-color); color: var(--txt-white); cursor: pointer; font-size: 12px; font-weight: 200; letter-spacing: 3px; text-align: center; text-transform: uppercase; transition: all 0.15s ease; -webkit-user-select: none; -moz-user-select: none; user-select: none; background-color: var(--bg-white); color: var(--bg-white-text); display: flex; align-items: center; justify-content: center; } .list-grid-toggle .label { display: none; } .list-grid-toggle .icon { width: 30px; margin: 0; } .list-grid-toggle .icon .icon-bar { position: relative; width: 20px; height: 3px; margin: 0 auto 3px auto; background: var(--txt-body); transition: all 0.15s ease; } .list-grid-toggle .icon .icon-bar:before, .list-grid-toggle .icon .icon-bar:after { position: absolute; display: block; width: 4px; height: 4px; background: var(--txt-body); content: ""; opacity: 0; transition: all 0.15s ease; } .list-grid-toggle .icon .icon-bar:before { right: -15px; } .list-grid-toggle .icon .icon-bar:after { left: -8px; } .list-grid-toggle .icon .icon-bar:last-child { margin-bottom: 0; } .list-grid-toggle .icon.icon-grid .icon-bar { width: 4px; height: 4px; } .list-grid-toggle .icon.icon-grid .icon-bar:before, .list-grid-toggle .icon.icon-grid .icon-bar:after { opacity: 1; } .list-grid-toggle .icon.icon-grid .icon-bar:before { right: 7px; transform: translateX(15px); } .product-search { margin-bottom: 2rem; } .reset-all { cursor: pointer; } .reset-all .icn svg { width: 18px; height: 18px; fill: #44596b; } .shop-slider-item { position: relative; background-color: var(--bg-placeholder); background-image: url(images/retina/image.svg); background-position: center; background-repeat: no-repeat; background-size: 50% 50%; aspect-ratio: 2/1; border-radius: 4px; } .shop-slider-item img { -o-object-fit: cover; object-fit: cover; } .shop-slider .overlay-content { background-color: var(--bg-blur-white); color: var(--txt-body); backdrop-filter: blur(10px); border-radius: 2px; position: absolute; bottom: 10px; left: 10px; padding: 1rem; /*max-width: 210px;*/ font-weight: 400; } .shop-slider .overlay-content h4, .shop-slider .overlay-content .h4 { font-size: 1rem; margin: 0; } .selected-filter { display: flex; flex-wrap: wrap; } .selected-filter li { font-size: 0.8rem; list-style: none; margin-bottom: 5px; margin-left: 5px; border-radius: 3px; padding-right: 10px; background: #8c8c8c; border: solid 1px var(--border-color); display: flex; align-items: center; overflow: hidden; } .selected-filter li span { padding-left: 5px; } .selected-filter li .remove { color: var(--body-color); padding: 5px 10px; } .filter-content { margin: 0; transition: height 0.3s ease 0s; max-width: 250px; } .filter-content .price-input { padding: 0; text-align: center; } .filter-content .price-text-box { position: relative; } .filter-content .price-text-box .input-filter { margin: 0; padding-left: 5px; display: inline-block; font-size: 12px; vertical-align: top; height: 2rem; border-radius: 0; } .filter-content .price-text-box .input-group-text { font-size: 0.8rem; font-weight: 500; background-color: var(--bg-white); color: var(--bg-white-text); padding: 0 0.5rem; border-radius: 0; height: 100%; } .filter-content .rsText { color: #9e9e9e; font-size: 13px; right: 5px; margin-left: 3px; padding-right: 3px; position: absolute; top: 10px; } .filter-content .slide__fields { display: flex; align-items: center; } .filter-content .prices { padding: 0 1rem; padding-bottom: 60px; font-size: 0.8rem; } .filter-content .btn { padding: 9px 10px; float: right; } .filter-content .dash { display: inline-block; padding: 2px; position: relative; width: 35px; flex: 0 0 35px; text-align: center; } .filter-content .dash:after { content: ""; height: 2px; width: 14px; background-color: var(--txt-body); display: inline-block; vertical-align: middle; } .detail-page .breadcrumb { display: none; margin: 1rem 0; } @media (min-width: 992px) { .detail-page .breadcrumb { display: block; margin: 2rem 0; } } @media (min-width: 992px) { .detail-first-fold { display: grid; grid-gap: 5rem; grid-template-columns: 1fr 405px; } } .product-detail-gallery { position: relative; margin-bottom: 2rem; min-width: 0; padding-block: 0.75rem; } @media (min-width: 992px) { .product-detail-gallery { padding: 0; margin-bottom: 4rem; } } .product-detail-gallery .product-gallery { position: sticky; top: calc(122px + 30px); display: flex; flex-direction: column; } .product-detail-gallery .product-gallery .product-type { top: auto; bottom: 0.5rem; left: 0.5rem; right: auto; } .product-description { margin-bottom: 1.5rem; } .product-description .brand-title { font-size: 0.85rem; font-weight: 400; color: var(--txt-gray); } .product-description .product-title { font-size: 1.625rem; line-height: 1.5; font-weight: 400; color: currentColor; overflow-wrap: break-word; word-wrap: break-word; word-break: break-all; word-break: break-word; hyphens: auto; padding: 0; } .product-description .product-title_badge { margin-top: 4px; margin-left: 8px; } .product-description .products-price { color: var(--txt-body); display: flex; align-items: center; margin: 1rem 0; font-size: 1.125rem; } .product-description .products-price-new { font-weight: 600; font-size: 1.625rem; } .product-description .products-price-old { font-weight: 400; font-size: inherit; text-decoration: line-through; } .product-description .products-price-off { font-weight: 500; font-size: inherit; color: var(--secondary-color); white-space: nowrap; } .product-description .tax-inclusive { color: var(--txt-gray); font-size: 0.8rem; } .options-block { border-top: solid 1px var(--border-color); padding-top: 1rem; margin-top: 1rem; } .options-block-head { display: flex; align-items: center; margin-bottom: 1rem; } .options-block-head .h6 { margin: 0; font-size: 1rem; font-weight: 500; color: var(--txt-body); } .options-block-head .view-chart { background-color: transparent; border: none; color: var(--secondary-color); text-decoration: underline; padding-right: 1rem; margin-right: 1rem; position: relative; font-size: 12px; } .options-block-head .view-chart::before { content: ""; background-color: var(--border-color); width: 1px; height: 100%; position: absolute; right: 0; } .options-block-head .quantity { margin-right: auto; } .options-block-value { font-size: 0.8rem; } .buy-action { display: flex; flex-flow: row wrap; gap: 1rem; } .buy-action .btn-add-to-cart { flex: 1; flex-shrink: 0; position: relative; } .buy-action .btn-add-to-cart:after { position: absolute; content: ""; opacity: 0; top: 0; right: 0; z-index: 1; background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.031372549) 1%, rgba(255, 255, 255, 0.6) 30%, rgba(255, 255, 255, 0.8509803922) 50% 70%, rgba(255, 255, 255, 0.8509803922) 71%, rgba(255, 255, 255, 0)); width: 15%; height: 100%; transform: skew(-10deg); animation: move 1.5s; animation-iteration-count: infinite; animation-delay: 1s; } .buy-action .btn-add-to-cart:first-child { border: solid 1px var(--brand-color); color: var(--brand-color); } .buy-action .btn-add-to-cart:last-child { background-color: var(--brand-color); color: var(--brand-color-inverse); } .select-options { display: flex; flex-wrap: wrap; align-items: center; grid-gap: 0.5rem; margin: 0; padding: 0; } .select-options-item { margin: 0; padding: 0; } .select-options-size .btn-option { display: block; font-size: 0.8rem; color: var(--txt-body); white-space: nowrap; position: relative; background-color: transparent; border: solid 1px var(--border-dark); padding: 10px; border-radius: 4px; min-width: 50px; text-align: center; } .select-options-size .selected .btn-option { background-color: var(--bg-black); color: var(--bg-black-text); border-color: rgb(0, 0, 0); } .select-options-color { grid-gap: 1rem; } .select-options-color .btn-option { box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px; display: block; width: 23px; min-width: 23px; height: 23px; border-radius: 50%; border: solid 3px #fff; } .select-options-color .selected .btn-option { border-color: #000; } .product-sharing { margin-top: 1rem; display: flex; grid-gap: 15px; align-items: center; } .product-sharing .btn-favorite { min-width: 120px; height: 50px; border: solid 1px var(--border-color); border-radius: 4px; background-color: transparent; color: var(--brand-color); background-color: transparent; position: relative; overflow: hidden; } .product-sharing .btn-favorite::before { content: ""; background: var(--bg-gray-light); position: absolute; z-index: -1; top: 0; width: 100%; height: 100%; right: 0; left: 0; opacity: 0; transition: all 0.2s cubic-bezier(0.2, 0.91, 0.85, 0.96) 0s; transform: scale(0.75); backface-visibility: hidden; pointer-events: none; } .product-sharing .btn-favorite:is(:hover, :focus, :active, .active)::before { opacity: 1; transform: scale(1); } .product-sharing .btn-favorite .svg { fill: #888; } .product-sharing .btn-favorite.active .svg, .product-sharing .btn-favorite:hover .svg { fill: var(--brand-color); } .product-sharing .via-social-sharing { flex: 1; display: flex; justify-content: center; border: solid 1px var(--border-color); border-radius: 4px; background-color: transparent; height: 50px; } .product-sharing .via-social-sharing-item { margin: auto; } .product-sharing .via-social-sharing-link { background-color: transparent; border: none; border-radius: 0; padding: 0; color: currentColor; padding: 0.6rem 0.75rem; display: block; background-color: transparent; position: relative; overflow: hidden; } .product-sharing .via-social-sharing-link::before { content: ""; background: var(--bg-gray-light); position: absolute; z-index: -1; top: 0; width: 100%; height: 100%; right: 0; left: 0; opacity: 0; transition: all 0.2s cubic-bezier(0.2, 0.91, 0.85, 0.96) 0s; transform: scale(0.75); backface-visibility: hidden; pointer-events: none; } .product-sharing .via-social-sharing-link:is(:hover, :focus, :active, .active)::before { opacity: 1; transform: scale(1); } .side-blocks { border: solid 1px var(--border-color); border-radius: 4px; margin-top: 2rem; } .side-blocks .h5 { padding: 1.5rem 1.5rem; padding-bottom: 0; color: var(--txt-body); font-weight: 600; font-size: 1rem; } .delivery-options ul { padding: 1rem 1.5rem; padding-top: 0; } .delivery-options ul li { padding: 4px 0; color: var(--txt-gray); font-size: 0.8rem; position: relative; list-style: inside; } .wholesale-slider { display: flex; flex-direction: column; font-size: 0.8rem; } .wholesale-slider-item { padding: 1.5rem 1.5rem; display: flex; flex-direction: column; border-bottom: solid 1px var(--border-color); } .wholesale-slider-item:last-child { border-bottom: none; } .wholesale-slider-value { color: var(--txt-gray); font-size: 0.875rem; font-weight: 400; margin-bottom: 0; } .wholesale-slider .products-price { margin: 0; } .wholesale-slider .products-price .products-price-new { font-weight: 600; font-size: 1.125rem; } .wholesale-slider .products-price .products-price-old { font-size: 12px; } .list-addons { max-height: 350px; overflow-y: auto; } .list-addons-item { padding: 1rem 1.5rem; border-bottom: solid 1px var(--border-color); display: flex; gap: 0.5rem; justify-content: space-between; position: relative; } .list-addons-item:last-child { border-bottom: none; } .list-addons .product-profile { margin: 0; gap: 0.5rem; } .list-addons .title { font-size: 0.875rem; font-weight: 600; color: var(--txt-gray); margin: 0; } .list-addons .products-price { font-size: 1rem; color: var(--txt-body); font-weight: 500; } .list-addons .checkbox input, .list-addons .radio input, .list-addons .checkbox .custom-select, .list-addons .radio .custom-select { height: 1.5rem !important; width: 1.5rem !important; flex: 0 0 1.5rem; max-width: 1.5rem; border-radius: 50%; } .buyer-wishlist { max-height: 250px; overflow: auto; margin-bottom: 1.5rem; } .descriptions-item { border-bottom: solid 1px var(--border-color); padding-bottom: 1.5rem; margin-bottom: 1.5rem; } .descriptions-item:last-child { border-bottom: none; } .descriptions-head { font-size: 1.375rem; margin-bottom: 0; position: relative; display: flex; cursor: pointer; } .descriptions-head .plus { color: var(--txt-black); position: absolute; left: 0; top: 5px; transition: transform 0.2s ease-in-out; } .descriptions-head:not(.collapsed) .plus { transform: rotate(227deg); } .descriptions-data { padding: 2rem 0; overflow-x: auto; } .list-specification-head { border-bottom: solid 2px #000; display: inline-block; font-size: 0.9rem; color: var(--txt-body); font-weight: 600; margin: 0.5rem 0; margin-top: 1rem; flex: 0 0 100%; max-width: 100%; } .list-specification-item { list-style: none; margin: 0; padding: 1rem 0; display: flex; font-size: 0.85rem; color: var(--txt-gray); border-bottom: dashed 1px var(--border-color); } .list-specification-item:last-child { border-bottom: none; } .list-specification-item .label { white-space: normal; padding: 0; padding-left: 1rem; margin: 0; flex: 0 0 30%; max-width: 30%; font-size: inherit; color: var(--txt-body); font-weight: 600; text-align: right; } .favourite-wrapper .actions li a { width: 44px; height: 44px; border-radius: 50%; } .buy-group { display: flex; margin: 0; align-items: center; justify-content: space-between; flex: 1; } .buy-group .add-to-cart { min-height: 38px; } .product-content { margin: 0 auto; max-width: 550px; } .options-name { text-transform: uppercase; font-weight: 600; font-size: 0.875em; line-height: 1; margin-left: 10px; } .condition-txt { position: relative; font-size: 0.8rem; font-weight: 600; margin: 0.5rem 0; opacity: 0.5; padding-right: 20px; } .condition-txt:before { background: url(images/retina/tick-gray.svg) no-repeat center; content: ""; position: absolute; right: 0; top: 3px; background-size: 100%; width: 12px; height: 12px; } .shop-owner-detail { display: flex; align-items: center; } .shop-owner-detail .owner_logo { background-color: var(--bg-white); color: var(--bg-white-text); border-radius: 50%; overflow: hidden; width: 70px; height: 70px; margin-left: 20px; position: relative; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.11); display: flex; padding: 10px; align-items: center; justify-content: center; } .owener_info .owener_info_mame { color: var(--txt-body); } .owener_info .owener_info_mame a { color: inherit; } .owener_info .owener_info_location { color: #000; font-size: 0.875em; } .owener_info .products__rating { justify-content: flex-start; } .shop-reviews-wrapper { position: relative; } .shop-reviews-wrapper .shop-reviews { display: flex; align-items: center; justify-content: center; width: 130px; height: 130px; position: relative; margin: 0 auto; } .shop-reviews-wrapper .shop-reviews .svg { fill: var(--brand-color); width: 130px; height: 130px; position: absolute; } .shop-reviews-wrapper .shop-reviews-points { line-height: 1; font-size: 1.6rem; font-weight: 600; padding-top: 15px; } .total-reviews { font-size: 0.875rem; padding: 5px; text-align: center; } .have-you { margin: 0 auto; text-align: center; } .reviews-lisitng { border: solid 1px var(--border-color); border-radius: 4px; } .reviews-lisitng > ul > li { border-bottom: solid 1px var(--border-color); padding-bottom: 10px; margin-bottom: 10px; } .reviews-lisitng > ul > li:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: none; } .reviews-list { background-color: var(--bg-white); color: var(--bg-white-text); border-radius: 4px; border: solid 1px var(--border-color); } .reviews-list .profile-avatar { border: none; flex-direction: row; height: auto; padding: 0; align-items: center; } .reviews-list .profile-avatar .dated { font-size: 0.625rem; } .reviews-list .profile-avatar .profile-dp { margin: 0; } .reviews-list .profile-avatar .profile-bio { text-align: right; padding-right: 0.875rem; } .reviews-list > li { border-bottom: solid 1px var(--border-color); padding: 1rem 1.5rem; } .reviews-list > li:last-child { border-bottom: none; } .refresh { margin: 5px 10px; } .shop-avatar { display: flex; align-items: center; } .shoper__dp { width: 92px; height: 92px; display: flex; align-items: center; overflow: hidden; border-radius: 50%; margin-left: 10px; } .profile-bio .deg { font-weight: 400; color: var(--txt-gray); font-size: 0.875rem; } .nav-detail { background-color: var(--bg-gray); border: solid 1px var(--border-color); border-top: none; border-radius: 0 0 4px 4px; display: flex; justify-content: center; position: sticky; /*top: 146px;*/ z-index: 1; } .nav-detail ul { display: flex; flex-wrap: nowrap; overflow-x: auto; } .nav-detail ul li { padding: 0 20px; } .nav-detail ul li a { color: inherit; display: block; overflow: hidden; padding: 1.5rem 0px; position: relative; text-align: center; text-overflow: ellipsis; white-space: nowrap; line-height: 1; font-weight: 400; text-rendering: optimizeLegibility; transition: color 0.3s ease-in-out; background-image: linear-gradient(currentColor, currentColor); background-position: 50% 100%; background-repeat: no-repeat; background-size: 0% 2px; transition: background-size 0.3s; } .nav-detail ul li a:hover, .nav-detail ul li a.is-active { background-size: 100% 2px; color: var(--brand-color); } .product-detail-quickview .products__price { padding: 0; margin: 0 0 20px; } .product-detail-quickview .product-description-inner .products-title { margin-bottom: 0; } .products__quickview { position: absolute; z-index: 4; top: 70%; right: 50%; transform: translateX(50%); opacity: 0; visibility: hidden; cursor: pointer; } @media (max-width: 991.98px) { .products__quickview { display: none; } } .products__quickview > a { border-radius: 2px; padding: 5px 14px; font-weight: 600; font-size: 0.7rem; color: var(--txt-white) !important; text-transform: uppercase; white-space: nowrap; background-color: #000; display: flex; align-items: center; } .products__quickview > a .svg-icon { width: 18px; height: 18px; display: inline-block; vertical-align: top; position: relative; margin-left: 10px; } .products__quickview > a .svg-icon svg { fill: #fff; width: 100%; height: 100%; } .products:hover .products__quickview { top: 50%; visibility: visible; opacity: 1; transition: all 0.5s linear; } .icn-quickview { margin: 0 auto; background-color: var(--brand-color); color: var(--brand-color-inverse); border-radius: 50%; width: 2.5rem; height: 2.5rem; display: block; } .icn-quickview svg { width: 16px; height: 16px; margin: 12px; fill: #fff; } @media (max-width: 575.98px) { .listing-progress-wrapper { padding-top: 1rem; } } .listing-progress-wrapper li { padding: 5px 0; } .listing-progress-wrapper li .progress { align-items: center; background-color: transparent; font-size: 1rem; height: auto; } .listing-progress-wrapper li .progress__lbl { flex: 1; font-size: 0.875rem; text-align: left; } .listing-progress-wrapper li .progress__count { font-size: 0.875em; min-width: 60px; font-weight: 500; color: var(--txt-gray); } .listing-progress-wrapper li .progress__bar { background: #ddd; height: 6px; flex: 1; display: flex; overflow: hidden; margin: 0 1rem; } .listing-progress-wrapper li .progress__bar .progress__fill { background: #616161; } .certified-bar { background-color: var(--bg-gray); border-top: solid 1px var(--border-color); } .certified-bar ul { display: flex; flex-wrap: nowrap; justify-content: center; } @media (max-width: 991.98px) { .certified-bar ul { overflow-x: auto; justify-content: flex-start; } } @media (max-width: 767.98px) { .certified-bar ul li { margin: auto; max-width: 40%; flex: 0 0 40%; } } .certified-bar .certified-box { display: flex; align-items: center; flex-direction: column; margin: 0 1rem; } .certified-bar .certified-box .icn { margin: 0 auto; margin-bottom: 10px; } .certified-bar .certified-box .icn svg { width: 24px; height: 24px; fill: #575757; } .certified-bar .certified-box p { font-size: 0.875rem; color: #575757; font-weight: 400; text-align: center; text-transform: uppercase; } .certified-bar .certified-box p a { color: #575757; } .video-wrapper { background: var(--bg-placeholder); background-color: var(--bg-placeholder); background-image: url(images/retina/image.svg); background-position: center; background-repeat: no-repeat; background-size: 50% 50%; aspect-ratio: 16/9; padding-top: 56.25%; position: relative; } .video-wrapper iframe, .video-wrapper .blog-detail-left .posted-media .post__pic .media-wrapper img, .blog-detail-left .posted-media .post__pic .media-wrapper .video-wrapper img { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .rating-wrapper { padding: 1.5rem; background-color: #f3f4f5; border-radius: 0.25rem; } .overall-rating-count { display: flex; align-items: center; justify-content: center; width: 100px; height: 100px; position: relative; margin: 0 auto; text-align: center; } .overall-rating-count .svg { fill: var(--brand-color); position: relative; width: 100px; height: 100px; padding: 0px 0 8px 0; margin: 0; } .overall-rating-count .rate { font-size: 1.6rem; font-weight: 600; position: absolute; right: 50%; top: 50%; transform: translate(-50%, -50%); } .rating-based-on span { color: var(--txt-gray); } .rating-based-on strong { font-weight: 800; } .ratedby-list { display: flex; flex-wrap: wrap; padding-top: 1rem; margin: 0 -0.5rem; } .ratedby-list li { padding: 0.5rem; } .review-container { padding-top: 1.25rem; } .review-container p { color: var(--txt-gray); line-height: 1.6; } .review-container .readMore { margin-top: 10px; display: inline-block; } .list-services { margin-right: auto; display: flex; } .list-services-item { background-color: var(--bg-gray-light); padding: 10px; border-radius: 50%; margin-left: 0.4rem; margin-bottom: 0.4rem; width: 1.5rem; height: 1.5rem; display: flex; align-items: center; justify-content: center; } .list-services-item:last-child { margin-left: 0; } .list-services-item:hover { background-color: var(--bg-gray); } .share-via { margin-top: 2rem; display: flex; flex-direction: column; } .share-via-list { display: flex; align-items: center; } .share-via-list li { margin-left: 10px; margin-bottom: 5px; } .share-via-list li:last-child { margin-left: 0; } .share-via-list li a { text-align: center; border: solid 1px var(--border-color); border-radius: 50%; width: 48px; height: 48px; display: block; color: var(--txt-gray); padding: 10px; } .share-via-list li a .svg { width: 20px; height: 20px; } .list-files li { list-style: none; margin: 0.5rem 0; padding: 0; list-style: none; margin: 0.5rem 0; display: flex; align-items: flex-start; justify-content: space-between; font-size: 0.8rem; color: var(--txt-gray); border-radius: 3px; background-color: var(--bg-white); color: var(--bg-white-text); } .jwplayer--content { /* (16:9 ratio) */ width: 100%; max-width: 500px; } @media (max-width: 767.98px) { .jwplayer--content { width: 100%; height: auto; } } .no-reviews { display: flex; align-items: center; flex-direction: column; gap: 2rem; padding: 2rem 0; } .contact-seller { padding: 2.5rem; } .service-map { position: relative; } .service-map-body { border-radius: 10px; overflow: hidden; } .btn-whatsaap { background-color: #25D366; color: #fff; } .btn-whatsaap:hover { color: #fff; } .gallery-classified { margin-bottom: 2rem; position: relative; } @media (min-width: 992px) { .gallery-classified { margin-bottom: 3rem; } } .product-sharing-with { position: absolute; top: 10px; right: 10px; z-index: 1; display: flex; gap: 8px; align-items: flex-start; flex-direction: row; } .product-sharing-with .btn { position: static; background-color: var(--bg-white); color: var(--bg-white-text); color: var(--txt-black); border: none; box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px; border-radius: 10px; color: var(--txt-gray); display: flex; align-items: center; justify-content: center; gap: 8px; width: auto; height: 2rem; padding: 10px 15px; font-size: 0.8rem; font-weight: 600; } .product-sharing-with .btn:is(:hover, :focus, :active, .is-active) { box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px; background-color: var(--bg-white); color: var(--bg-white-text); } .product-sharing-with .btn .svg { width: 16px; height: 16px; } .product-sharing-with .btn-favourite.active { background-color: var(--secondary-color); color: var(--secondary-color-inverse); } .product-sharing-with .via-social-sharing { flex: 1; display: flex; justify-content: center; border: solid 1px var(--border-color); border-radius: 4px; background-color: transparent; height: 2rem; } .product-sharing-with .via-social-sharing-item { margin: auto; } .product-sharing-with .via-social-sharing-link { color: currentColor; padding: 0.6rem 0.75rem; display: block; } .product-sidebar { border: solid 1px var(--border-color); border-radius: 4px; box-shadow: rgba(0, 0, 0, 0.12) 0px 6px 16px; } @media (min-width: 992px) { .product-sidebar { box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; position: sticky; top: 180px; } } .product-sidebar-head { padding: 1rem 1.5rem; } @media (min-width: 992px) { .product-sidebar-head { padding: 1rem 1.5rem; } } .product-sidebar-body { padding: 0 1.5rem; } @media (min-width: 992px) { .product-sidebar-body { padding: 0 1.5rem; } } .product-sidebar-foot { padding: 0 1.5rem; } @media (min-width: 992px) { .product-sidebar-foot { padding: 0 1.5rem; } } .product-sidebar .brand-title { font-size: 0.85rem; font-weight: 400; color: var(--txt-gray); } .product-sidebar .product-title { font-size: 1.625rem; line-height: 1.4; font-weight: 600; color: var(--txt-black); overflow-wrap: break-word; word-wrap: break-word; word-break: break-all; word-break: break-word; hyphens: auto; margin-bottom: 5px; padding: 0; } .product-sidebar .buy-action { padding: 1rem 0; } .price-from { font-weight: 600; font-size: 1.5rem; } .price-from-old { color: var(--txt-gray); font-weight: 400; font-size: inherit; text-decoration: line-through; } .price-from-off { font-weight: 500; font-size: 0.85rem; color: var(--secondary-color); white-space: nowrap; } .classified-content { display: flex; gap: 4rem; } @media (max-width: 991.98px) { .classified-content { flex-direction: column; } } .classified-content-start { flex: 1 1; max-width: 100%; min-width: 0; } @media (max-width: 991.98px) { .classified-content-start { order: 2; } } .classified-content-end { flex: 0 1 380px; max-width: 380px; } @media (max-width: 991.98px) { .classified-content-end { order: 1; flex: none; max-width: none; } } .classified-detail-item { border-bottom: solid 1px var(--border-color); padding-bottom: 1.5rem; margin-bottom: 1.5rem; } .classified-detail-item:last-child { border-bottom: none; } .classified-detail-head { font-size: 1.375rem; font-weight: 600; margin-bottom: 1rem; position: relative; display: flex; } .classified-detail-data { overflow-x: auto; } .entry-meta { display: flex; flex-flow: row wrap; gap: 10px; -moz-column-gap: 1rem; column-gap: 1rem; margin: 1rem 0; } .entry-meta-item { flex-shrink: 0; display: flex; gap: 5px; font-size: 0.85rem; color: var(--txt-gray); } .entry-meta-item .svg { flex-shrink: 0; } .list-classified { display: flex; flex-flow: row wrap; gap: 1rem; -moz-column-gap: 2rem; column-gap: 2rem; } .list-classified-head { border-bottom: solid 1px var(--border-color); display: inline-block; font-size: 0.9rem; color: var(--txt-body); font-weight: 600; text-transform: uppercase; padding-bottom: 10px; margin: 0; margin-top: 1rem; flex: 0 0 100%; max-width: 100%; } .list-classified-item { flex-shrink: 0; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; font-size: 0.85rem; color: var(--txt-gray); flex: 0 0 45%; max-width: 45%; } @media (min-width: 992px) { .list-classified-item { flex: 0 0 30%; max-width: 30%; } } .list-classified-item:last-child { border-bottom: none; } .list-classified-item .label { white-space: normal; padding: 0; padding-left: 1rem; margin: 0; font-size: inherit; color: var(--txt-body); font-weight: 500; text-align: right; } .map-responsive { background: var(--bg-placeholder); background-color: var(--bg-placeholder); background-image: url(images/retina/image.svg); background-position: center; background-repeat: no-repeat; background-size: 50% 50%; aspect-ratio: 16/9; padding-top: 56.25%; position: relative; } .map-responsive iframe, .map-responsive .blog-detail-left .posted-media .post__pic .media-wrapper img, .blog-detail-left .posted-media .post__pic .media-wrapper .map-responsive img { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .list-amenities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-gap: 1rem; } .list-amenities-item { display: flex; gap: 6px; font-size: 0.85rem; color: var(--txt-body); font-weight: 400; } .list-amenities-tick { display: flex; align-items: center; justify-content: center; width: 1.125rem; height: 1.125rem; flex-shrink: 0; border-radius: 50%; background-color: #ff9540; } .seller-profile { background-color: transparent; padding: 0; margin: 0; display: flex; gap: 0.875rem; align-items: center; } .seller-profile-img { background: var(--bg-placeholder); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1rem; background-color: var(--bg-placeholder); background-image: url(images/retina/image.svg); background-position: center; background-repeat: no-repeat; background-size: 50% 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; height: auto; border: solid 1px var(--border-color); padding: 5px; max-width: 80px; width: 100%; aspect-ratio: 1/1; } .seller-profile-img img { border-radius: inherit; } .seller-profile-data { flex: 1; } .seller-profile-data .title { font-weight: 600; font-size: 0.85rem; margin: 0; } .seller-profile-data .text-muted { font-size: 0.75rem; } .seller-profile-data .phone-number { display: flex; gap: 10px; align-items: center; font-size: 0.8rem; color: var(--txt-body); padding: 5px 0; } .cart-page { display: grid; grid-gap: 2rem; padding: 1rem 0; } @media (min-width: 1200px) { .cart-page { grid-template-columns: 2fr 1fr; grid-gap: 6rem; padding: 3rem 0; } } .cart-page-head { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; padding-bottom: 1rem; margin-top: 1rem; border-bottom: solid 1px var(--border-dark); } @media (min-width: 768px) { .cart-page-head { margin-top: 0; flex-direction: row; align-items: center; } } .cart-page-head .h2 { font-size: 1.2rem; } .cart-page-head .shiporpickup { border-radius: 100px; display: flex; flex-flow: row; gap: 0.5rem; position: relative; } @media (min-width: 768px) { .cart-page-head .shiporpickup { margin: 0; margin-right: auto; } } .cart-page-head .shiporpickup-item { line-height: 1; position: relative; } .cart-page-head .shiporpickup-link { background-color: transparent; border: none; border-radius: 50px; box-shadow: none; cursor: pointer; padding: 0.5rem 1rem; margin: 0; font-size: 0.85rem; font-weight: 600; color: var(--txt-gray); display: inline-flex; text-align: center; align-items: center; position: relative; } @media (min-width: 992px) { .cart-page-head .shiporpickup-link { white-space: nowrap; } } .cart-page-head .shiporpickup .control-label:hover { background-color: var(--bg-gray); color: var(--txt-body); } .cart-page-head .shiporpickup .control-label.is-active { background-color: var(--brand-color); color: var(--brand-color-inverse); } .cart-page-head .shiporpickup .control-input[type=radio] { position: absolute; opacity: 0; z-index: -1; } .cart-page-head .shiporpickup .svg { display: none; margin-left: 10px; } .cart-page-head .shiporpickup .disabled { cursor: not-allowed; opacity: 0.5; } .cart-page_main { padding: 0; } @media (min-width: 992px) { .cart-page_main { margin-bottom: 0; } } .cart-page_aside { flex: 1; } @media (min-width: 992px) { .cart-page_aside { margin-bottom: 0; } } .cart-page_aside:after { background-color: var(--bg-gray); position: fixed; z-index: -1; width: 100%; height: 100%; display: block; top: 0; bottom: 0; } .cart-page .cart-title { font-weight: 600; font-size: 1rem; } .cart-page .list-cart { margin-bottom: 3rem; } .cart-page .list-cart:last-child { margin-bottom: 0; } .cart-page .cart-title { text-transform: uppercase; font-size: 1rem; margin-bottom: 1rem; font-weight: 600; color: var(--txt-body); } .cart-total { padding: 2rem; border: solid 1px var(--border-dark); border-radius: 4px; position: relative; } .cart-total-head { padding-bottom: 1rem; margin-bottom: 2rem; border-bottom: solid 1px var(--border-color); } .cart-total-title { margin: 0; font-weight: 600; font-size: 1.2rem; } .cart-total .cart-action { display: none; } @media (min-width: 992px) { .cart-total .cart-action { margin-top: 1.5rem; text-align: center; display: flex; flex-direction: column; grid-gap: 1rem; } } .cart-total .cart-action .link-underline { display: inline-block; width: -moz-fit-content; width: fit-content; margin: auto; } .promotional-code { margin-bottom: 2.5rem; } .promotional-code-head { display: flex; flex-direction: row; justify-content: space-between; margin-bottom: 1rem; } .promotional-code-title { font-size: 1rem; margin: 0; } .coupons { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3rem; } .coupons h6, .coupons .h6 { font-size: 0.8rem; margin: 0; padding: 0; } .coupons .btn-coupons { color: var(--secondary-color); border: dashed 2px var(--secondary-color); font-weight: 500; } .coupons .svg { margin-left: 5px; } .coupons-applied { display: flex; flex-direction: column; margin: 2rem 0; position: relative; color: var(--txt-gray); border: dashed 2px var(--secondary-color); background-color: rgba(var(--secondary-color-alpha), 0.1); border-radius: 4px; padding: 1.5rem; color: var(--txt-black); } .coupons-applied-title { margin: 0; padding: 0; font-size: 1rem; } .coupons-applied-desc { margin-top: 10px; font-size: 0.8rem; } .coupons-applied .btn-close { position: absolute; top: 10px; left: 10px; width: 10px; height: 10px; } .included { text-align: center; font-weight: 400; font-size: 0.8rem; padding: 1rem 0; color: var(--txt-gray); } .promo-code { max-width: 400px; display: flex; align-items: center; } .promo-code .form { display: flex; flex: 1; } .promo-code .form .promo-input { width: auto; height: 40px; line-height: 1; } .sticky-summary { position: sticky; top: 159px; z-index: 1; } .buttons-group { display: flex; align-items: center; justify-content: space-around; grid-gap: 1rem; } .buttons-group .btn { flex: 1; } .gift-wrap { margin-top: 1.5rem; background-color: var(--bg-white); color: var(--bg-white-text); } .gift-wrap .list-group-item { display: flex; justify-content: space-between; } .gift-wrap__left { display: flex; align-items: center; } .gift-wrap__icon { margin-left: 1rem; } .gift-wrap__icon svg { width: 24px; height: 24px; fill: currentColor; } .gift-wrap__text span:first-child { padding-left: 1rem; } .secure { margin-top: 1.5rem; padding: 0; display: flex; flex-direction: row; align-items: center; color: var(--txt-gray); font-size: 0.85rem; } .secure .svg { margin-left: 12px; } .row-coupon .row-coupon__left { max-width: 10%; flex: 0 0 10%; padding-top: 10px; } .list-promo__name { color: var(--brand-color); border: dashed 2px var(--brand-color); border-radius: 4px; padding: 0.5rem 1rem; font-weight: 500; display: inline-block; font-size: 0.85rem; } .list-promo__code { font-weight: 500; padding-bottom: 0.5rem; display: block; } .list-promo__text { font-size: 0.75rem; } .row-coupon { display: flex; } .info { flex: 1; display: flex; justify-content: space-between; align-items: center; padding: 1rem; background-color: var(--bg-gray); border-radius: 4px; font-size: 0.85rem; } .info .svg { width: 20px; height: 20px; margin-left: 10px; } .save-later { margin-top: 1.5rem; line-height: 1; font-weight: 500; font-size: 0.75rem; color: var(--txt-gray); } .save-later a:hover { color: var(--brand-color); } .coupon-offers { border: solid 1px var(--border-color); border-radius: 4px; } .coupon-offers-item { border-bottom: solid 1px var(--border-color); display: flex; flex-flow: row wrap; gap: 1rem; align-items: flex-start; padding: 1rem; font-size: 0.8rem; color: var(--txt-gray); } .coupon-offers-item:last-child { border-bottom: none; } .coupon-offers .coupon-code { padding: 0.3rem 1.2rem; border-radius: 2rem; color: var(--txt-gray); border: dashed 1px var(--border-color); display: inline-block; font-weight: 500; margin-left: 1rem; cursor: pointer; } .coupon-offers .coupon-code:hover { border-color: var(--brand-color); color: var(--brand-color); } .delivery-info { background-color: var(--bg-gray); color: var(--txt-gray); flex: 1; display: flex; justify-content: space-between; align-items: center; padding: 1.4rem; font-size: 0.85rem; font-weight: 500; border: solid 1px var(--border-color); border-radius: 4px; flex-flow: row wrap; gap: 10px; } .delivery-info .svg { margin-left: 10px; } .delivery-info .not-pickup { flex: 1; } .delivery-info .not-availables { display: flex; gap: 10px; align-items: center; } .delivery-info .not-availables-items { background-color: var(--bg-white); color: var(--bg-white-text); border: solid 1px var(--border-color); border-radius: 40px; padding: 0.5rem; display: flex; align-items: center; gap: 10px; } .checkout-bottom { background-color: var(--bg-blur-white); color: var(--txt-body); backdrop-filter: blur(10px); box-shadow: 0 -10px 30px 0 rgba(111, 111, 111, 0.1); display: flex; align-items: center; flex-flow: row nowrap; justify-content: space-between; position: fixed; bottom: 0; right: 0; left: 0; z-index: calc(1030 + 10); padding: 1rem; } @media (min-width: 992px) { .checkout-bottom { display: none; } } .checkout-bottom .amount { font-size: 1.1rem; display: flex; flex-direction: column; color: var(--txt-body); } .checkout { --header-height: 65px; --btn-height: 50px; } .header-checkout { min-height: var(--header-height); background-color: var(--bg-white); color: var(--bg-white-text); background-size: cover; border-bottom: solid 1px var(--border-color); display: flex; flex-direction: column; justify-content: center; position: sticky; top: 0; z-index: 2; } .header-checkout .container { max-width: none; } @media (min-width: 992px) { .header-checkout .container { padding: 0 3rem; } } .header-checkout_inner { display: flex; justify-content: space-between; align-items: center; } @media (max-width: 767.98px) { .header-checkout_inner { flex-direction: column; } } .header-checkout .logo-checkout-main { max-width: 150px; display: block; padding: 0.5rem 0; } @media (max-width: 767.98px) { .header-checkout .logo-checkout-main { max-width: 100px; } } @media (max-width: 991.98px) { .header-checkout .logo-checkout-main { max-width: 100px; } } .header-checkout .logo-checkout-main img[data-ratio="16:9"] { max-width: 120px; } .header-checkout .logo-checkout-main img[data-ratio="1:1"] { max-width: 60px; } .checkout-page { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: auto; grid-gap: 1rem; } @media (min-width: 992px) { .checkout-page { grid-template-columns: 2fr 1fr; grid-gap: 5rem; } } .checkout-page-single { grid-template-columns: auto; max-width: 500px; margin: auto; } .checkout-page-main { position: relative; padding: 0; } .checkout-page-aside { flex: 1; } .checkout-page-aside .sticky-summary { top: 80px; } .step { display: flex; flex-direction: column; width: 100%; } .step-section ~ .step-section { margin-top: 3rem; } .step-head { color: var(--txt-gray); display: flex; justify-content: space-between; } .step-head-section ~ .step-head-section { margin-top: 3rem; } .step-head { gap: 1.5rem; margin-bottom: 1rem; } .step-title { font-size: 1.2rem; margin: 0; font-weight: 600; color: var(--txt-body); } .step-body { flex: 1; } .step-foot { gap: 1rem; margin-top: 2rem; padding: 2rem 0; display: flex; align-items: inherit; flex-direction: column; } @media (min-width: 992px) { .step-foot { flex-direction: row-reverse; align-items: center; justify-content: space-between; } } .step-foot .btn { flex: 1; } @media (min-width: 992px) { .step-foot .btn { flex: inherit; } } .checkout-actions { display: flex; justify-content: space-between; align-items: center; width: 100%; } .review-block { margin-bottom: 2rem; font-size: 1rem; border-radius: 4px; border: solid 1px var(--border-color); color: var(--txt-gray); } .review-block-item { position: relative; padding: 2rem; display: flex; border-bottom: solid 1px var(--border-color); flex-direction: column; justify-content: space-between; } .review-block-item:last-child { border-bottom: none; } .review-block-head { color: var(--txt-body); font-size: 1.2rem; font-weight: 500; display: flex; flex-direction: row; justify-content: space-between; margin-bottom: 1rem; } .review-block-head .h5 { font-size: inherit; } .review-block-body { flex: 1; overflow: hidden; } .review-block-body .selected-slot { font-weight: 600; padding-top: 0.5rem; display: block; } .review-block-action { position: absolute; top: 2rem; left: 2rem; } .review-block-action .svg { width: 1rem; height: 1rem; margin-left: 8px; } .shipping-methods { width: 100%; display: flex; flex-direction: column; } .shipping-methods-item { margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: solid 1px var(--border-color); } .shipping-methods-item:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; } .shipping-methods-head { margin-bottom: 1rem; display: flex; align-items: center; flex-direction: row; justify-content: space-between; } .shipping-methods-head .h6 { margin: 0; font-weight: 600; } .shipping-methods-body { font-size: 0.85rem; } .shipping-methods-type { font-weight: 600; } .v-divider:after { content: ""; position: absolute; top: 0; bottom: 0; right: 50%; background: #efefef; width: 1px; } .shipping-section { border: solid 1px var(--border-color); border-radius: 4px; margin-bottom: 1rem; } .shipping-section .shipping-option { padding: 1rem; display: flex; justify-content: space-between; align-items: center; } .shipping-section .custom-select { max-width: 200px; font-size: 0.8rem; } .pickup-modal { border: solid 1px var(--border-color); border-radius: 6px; display: flex; gap: 0; flex-direction: column; margin: 1.5rem 0; } @media (min-width: 992px) { .pickup-modal { flex-direction: row; } } .pickup-modal .h6 { font-size: 0.85rem; } .pickup-modal-address { flex: 1; padding: 1.5rem; border-bottom: solid 1px var(--border-light); } @media (min-width: 992px) { .pickup-modal-address { border: none; border-left: solid 1px var(--border-light); } } .pickup-modal-address-list { display: flex; flex-direction: column; gap: 0.5rem; max-height: 350px; overflow-y: auto; } .pickup-modal-address-list-item { background-color: var(--bg-gray-lightest); color: var(--txt-body); border-radius: 4px; flex: 1; } .pickup-modal-address-list-item:hover, .pickup-modal-address-list-item.is-active { background-color: var(--bg-form); color: var(--bg-form-inverse); } .pickup-modal-address-radio { padding: 1rem; cursor: pointer; } .pickup-modal-calendar { flex: 1; padding: 1.5rem; border-bottom: solid 1px var(--border-light); } @media (min-width: 992px) { .pickup-modal-calendar { border: none; border-left: solid 1px var(--border-light); } } .pickup-modal-slots { flex: 1; padding: 1.5rem; max-width: 220px; } .pickup-modal-slots .time-slot { display: grid; grid-template-columns: 1fr; flex-wrap: wrap; grid-gap: 0.5rem; max-height: 300px; padding: 0 3px; overflow-y: auto; } .pickup-modal-slots .time-slot-item { position: relative; } .pickup-modal-slots .time-slot-item:last-child { padding-left: 0; } .pickup-modal-slots .time-slot-item .control-input { position: absolute; } .pickup-modal-slots .time-slot-item .control-input:focus + .control-label { outline: rgb(19, 110, 248) solid 2px; outline-offset: 3px; } .pickup-modal-slots .time-slot-item .control-input:checked + .control-label { background-color: var(--bg-form); color: var(--bg-form-inverse); } .pickup-modal-slots .time-slot-item .control-label { background-color: var(--bg-gray-lightest); color: var(--txt-body); border: none; border-radius: 4px; cursor: pointer; display: block; position: relative; font-size: 12px; text-align: center; transition: all 0.2s ease; } .pickup-modal-slots .time-slot-item .control-label .time { padding: 0.5rem 0.7rem; display: block; text-align: center; white-space: nowrap; } .pickup-modal .ui-datepicker { min-width: auto; border: solid 1px var(--border-color) !important; border-radius: 4px !important; box-shadow: none; font-size: 0.8rem; } .pickup-modal .ui-datepicker td .ui-state-default { padding: 0.5rem; color: currentColor; } .pickup-modal .ui-datepicker .ui-datepicker-today { background-color: var(--bg-black); color: var(--bg-black-text); opacity: 1; } .pickup-modal .ui-datepicker .ui-datepicker-current-day { background-color: var(--bg-form); color: var(--bg-form-inverse); } .payment-area { border: solid 1px var(--border-color); border-radius: 4px; } .payment-area .payments-nav { display: flex; flex-direction: column; position: relative; } .payment-area .payments-nav-item { border-bottom: solid 1px var(--border-color); } .payment-area .payments-nav-item:last-child { border-bottom: 0; } .payment-area .payments-nav-link { white-space: nowrap; padding: 1.6rem 2rem; padding-right: 4.1rem; display: block; position: relative; font-weight: 600; } .payment-area .payments-nav-link:before { position: absolute; right: 2rem; top: calc(50% - 9px); content: ""; width: 18px; height: 18px; border-radius: 50%; border: solid 4px #fff; background-color: transparent; outline: solid 1px var(--border-color); } .payment-area .payments-nav-link:hover, .payment-area .payments-nav-link.active { color: var(--secondary-color); } .payment-area .payments-nav-link:hover:before, .payment-area .payments-nav-link.active:before { background-color: var(--secondary-color); outline: solid 1px var(--secondary-color); } .payment-area .paypal-data { text-align: center; } .payment-area .paypal-data p { padding: 1rem; font-size: 0.8rem; } .payment-area .payment-block { padding: 2rem; padding-top: 0; } .place-order { text-align: center; font-size: 0.8rem; padding: 2rem 0; } .place-order p { padding-bottom: 1rem; } .place-order p a { color: var(--brand-color); } .rewards { background-color: var(--bg-gray); border-radius: 4px; border: solid 1px var(--border-color); padding: 1.5rem; margin: 0; } .rewards__points { margin-bottom: 1.5rem; } .rewards__points ul { display: grid; grid-gap: 1rem; grid-template-columns: 50% 1fr; align-items: center; } .rewards__points ul li { height: 100%; text-align: center; border-radius: 4px; padding: 1rem; border: solid 1px var(--border-color); background-color: var(--bg-white); color: var(--bg-white-text); } .rewards__points ul li p { font-size: 0.8rem; } .rewards__points ul li .count { font-weight: 600; font-size: 1.3rem; } .rewards .info { margin-bottom: 1.5rem; padding: 0; background: none; line-height: 1; } .earn-points { background-color: var(--bg-gray); border-radius: 4px; padding: 0.7rem; text-align: center; } .earn-points .svg { margin-left: 10px; } .list-addresses { display: grid; grid-gap: 3rem; grid-template-columns: auto; } @media (max-width: 575.98px) { .list-addresses { grid-template-columns: auto; } } .list-addresses-item { position: relative; border: solid 1px var(--border-color); border-radius: 4px; } .list-addresses .label-block { padding: 2rem; cursor: pointer; display: flex; align-items: flex-start; margin: 0; } .list-addresses .tag { margin: 0 5px; border: solid 1px #1dc9b7; border-radius: 40px; color: #1dc9b7; padding: 2px 0.6rem; line-height: 1; font-size: 0.75rem; font-weight: 400; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100px; } .list-addresses .btn-add-address { display: flex; border: dashed 2px var(--border-color); border-radius: 3px; margin: auto; align-items: center; justify-content: center; padding: 2.5rem 2rem; width: 100%; color: currentColor; } .list-addresses .btn-add-address:hover, .list-addresses .btn-add-address:focus, .list-addresses .btn-add-address:active { background-color: var(--bg-form); color: var(--bg-form-inverse); border-color: var(--bg-form); } .list-addresses .btn-add-address .svg { margin-left: 10px; } .addresses { display: block; } .addresses-checkbox { position: absolute; right: 1.5rem; top: 2rem; } .addresses-actions { border-top: solid 1px var(--border-color); display: flex; flex-direction: row; justify-content: space-evenly; } .addresses-actions .btn-addresses { color: currentColor; border: none; height: auto; width: 100%; display: block; text-decoration: underline; } .addresses-detail { flex: 1; font-size: 0.9rem; color: var(--txt-gray); line-height: 1.5; margin-bottom: 0; padding: 2rem; padding-right: 4rem; } .addresses-detail .h5 { margin-bottom: 10px; font-weight: 500; font-size: 0.95rem; line-height: 1.5; color: var(--txt-body); display: flex; align-items: center; } .addresses-detail span { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: inline-block; max-width: 50%; } .tags-addresses { position: static; } .tags-addresses .tags__inner { justify-content: flex-start; } .tags-addresses .tags__inner .tag { font-size: 1rem; color: var(--brand-color); border-color: var(--brand-color); } .tags { margin: 0 0; position: absolute; top: 1rem; left: 1rem; text-align: left; } .tags__inner { display: flex; justify-content: flex-end; } .tags__inner .tag { margin: 0 5px; border: solid 2px #1dc9b7; border-radius: 40px; color: #1dc9b7; padding: 6px 1rem; line-height: 1; font-weight: 500; font-size: 0.75rem; text-transform: uppercase; } .tags__inner .tag.address_lable { margin-right: auto; } .tags__inner .tag:last-child { margin-left: 0; } .tags__txt { display: block; font-size: 0.8rem; color: var(--txt-gray); margin-top: 4px; } .payment-card { font-size: 0.85rem; color: var(--txt-gray); } .payment-card strong { font-weight: 500; color: var(--txt-body); } .payment-card .list-group-item { padding: 1rem; } .payment-card__photo .svg { width: 38px; height: 24px; } .payment-card-double { flex-wrap: wrap; flex-direction: row; justify-content: space-between; } @media (max-width: 767.98px) { .payment-card-double { flex-direction: column; } } .payment-card-double li { max-width: 49%; flex: 49%; margin-bottom: 1rem; border-radius: 4px; } @media (max-width: 767.98px) { .payment-card-double li { max-width: auto; flex: auto; } } .payment-card-view .list-group-item { padding: 1rem; } .payment-card-view .list-group-item .row { align-items: center; } @media (max-width: 767.98px) { .payment-card-view .list-group-item .row { flex-wrap: nowrap; overflow-x: auto; align-items: inherit; } } .list-shippings { margin-bottom: 1.5rem; font-size: 0.8125rem; } .list-shippings + .list-shippings { margin-top: 2rem; } .list-shippings-body { background-color: var(--bg-white); color: var(--bg-white-text); } .list-shippings .shop-detail { display: flex; gap: 0.5rem; justify-content: space-between; width: 100%; } .list-shippings .shop-detail.shipping-select { flex-direction: column; } .list-shippings .shop-detail.pickup-select { flex-flow: row wrap; } .list-shippings .address-selected { border-radius: 4px; padding: 1.125rem; display: flex; gap: 1.5rem; flex-flow: row wrap; margin-top: 1rem; border: solid 1px transparent; background-color: var(--bg-form); color: var(--bg-form-inverse); border-radius: 4px; border-color: var(--bg-form); } .list-shippings .shop-address { font-size: 0.85rem; flex: 1; } .transfer-payment-detail { display: flex; gap: 0.5rem; flex-flow: row wrap; font-size: 0.8rem; color: var(--txt-gray); } .transfer-payment-detail li { max-width: 30%; flex: 0 0 30%; display: flex; margin-bottom: 1.5rem; } .transfer-payment-detail li.notes { max-width: none; flex: auto; } .transfer-payment-detail .svg { display: none; width: 1rem; height: 1rem; margin-left: 10px; fill: var(--txt-gray); } .transfer-payment-detail h6, .transfer-payment-detail .h6 { margin-bottom: 4px; font-size: 0.82rem; color: var(--txt-body); text-transform: uppercase; } .otp-block__head { margin-bottom: 1.5rem; text-align: center; } .otp-block__head h5, .otp-block__head .h5 { margin: 0; padding: 0; } .otp-block__footer { margin-top: 1.5rem; } .otp-block p { font-size: 0.8rem; color: var(--txt-gray); } .otp-block .otp-enter { margin: 0 auto; text-align: center; } .otp-block .otp-enter .otp-inputs { display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; } .otp-block .otp-enter .otp-inputs input.field-otp, .otp-block .otp-enter .otp-inputs .field-otp.custom-select { border: none; border-radius: 0; border-bottom: solid 1px var(--border-color); max-width: 30px; text-align: center; padding: 5px; margin: 0 3px; } .otp-block .otp-enter .otp-inputs input.field-otp:focus, .otp-block .otp-enter .otp-inputs .field-otp.custom-select:focus { border-color: #000; } .otp-block .otp-enter .otp-inputs input.field-otp.is-invalid, .otp-block .otp-enter .otp-inputs .field-otp.is-invalid.custom-select { border-color: red; } .otp-block .otp-success { text-align: center; } .otp-block .otp-success .img { max-width: 80px; margin: 2rem auto; } .otp-block .otp-success h5, .otp-block .otp-success .h5 { margin: 0; padding: 0; } .phone-list { margin-top: 0.4rem; display: flex; gap: 2rem; flex-flow: row wrap; } .phone-list-item { align-items: center; display: flex; gap: 5px; } .phone-list span { line-height: 1; max-width: none; } .payment-action { display: flex; justify-content: space-between; padding: 1rem; } .review-total { padding: 2rem; border: solid 1px var(--border-dark); } .review-total-head { padding-bottom: 1rem; margin-bottom: 2rem; border-bottom: solid 1px var(--border-color); } .review-total-title { font-weight: 600; font-size: 1.5rem; } .review-total .block-cart-detail-top { margin-bottom: 0; } .btn-summary { border: solid 1px var(--border-color); background-color: transparent; border: none; display: flex; justify-content: space-between; padding: 1rem 0; font-weight: 600; width: 100%; } @media (min-width: 992px) { .btn-summary { display: none; } } .btn-summary-text { text-decoration: underline; } .wallet-payment { display: flex; justify-content: space-between; flex-flow: row wrap; gap: 1.5rem; padding: 1.6rem 2rem; border-bottom: solid 1px var(--border-color); } .wallet-payment-txt { margin-top: 1rem; font-size: 0.85rem; } .wallet-payment .wallet-credits { font-size: 1rem; margin-bottom: 1rem; display: flex; margin: auto; align-items: center; padding: 0; width: 100%; background-color: transparent; color: var(--txt-black); } .wallet-payment .wallet-credits strong { font-weight: 600; } .wallet-options { color: var(--txt-body); display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } .wallet-options-list { border: solid 1px var(--border-color); padding: 2rem; } .wallet-options-value { font-weight: 600; font-size: 1.4rem; } .wallet-balance { border: solid 1px var(--border-color); border-radius: 4px; padding: 1.5rem; margin-top: 0; /*background-color: $bg-gray;*/ display: flex; align-items: center; justify-content: space-between; } .wallet-balance .wallet { display: flex; align-items: center; flex: 1; } .wallet-balance .wallet__txt { display: flex; align-items: center; } .wallet-balance .wallet__txt .svg { width: 40px; height: 40px; margin-left: 12px; margin-right: 5px; fill: var(--txt-gray); } .wallet-balance .wallet__txt p { font-size: 0.75rem; font-weight: 400; color: var(--txt-gray); margin-bottom: 5px; line-height: 1; text-transform: uppercase; } .wallet-balance .wallet__txt .currency-value { display: block; font-weight: 600; color: var(--txt-body); font-size: 1.2rem; } .wallet-balance_info { flex: 1; font-size: 0.8rem; color: var(--txt-gray); } .address { margin: 0; font-size: 0.8rem; } .shipping-comments { background-color: transparent; border-top: solid 1px var(--border-color); margin-top: 1rem; padding-top: 1rem; } .shipping-comments .btn-dropdown { background-color: transparent; color: currentColor; border: none; font-weight: 600; padding-right: 0; } .shipping-comments .form-textarea { background-color: var(--bg-white); color: var(--bg-white-text); background-color: var(--bg-gray-light); border: none; margin-top: 1rem; } .shippings-head { background-color: var(--bg-white); color: var(--bg-white-text); border-bottom: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-flow: row wrap; padding: 0; margin: 0; width: 100%; } .shippings-head .shop-title { flex: 1; padding: 0; margin: 0; color: var(--txt-black); font-weight: 600; line-height: 1.5; } .shippings-head .delivery-slot-time { cursor: pointer; white-space: nowrap; background-color: var(--bg-form); color: var(--bg-form-inverse); border-radius: 99px; padding: 0.6rem 1rem; line-height: 1.2; font-size: 0.8rem; font-weight: 500; display: inline-flex; gap: 5px; } .shippings-head .shipping-method { display: flex; justify-content: flex-end; gap: 10px; margin-right: auto; } .shippings-head .shipping-method .custom-select { background-color: var(--bg-gray); border: solid 1px var(--border-color); border-color: transparent !important; height: auto; line-height: 2; font-size: inherit; max-width: 200px; } .googlepay-container { display: block; margin: 1rem auto; } .googlepay-container button { width: 100%; display: flex; align-items: center; justify-content: center; padding-block: 8px; height: 55px; } /*AI classes*/ .apple-pay-button { display: inline-block; width: 100%; min-height: 55px; background-color: black; cursor: pointer; } .apple-pay-button-black { background-color: black; background-size: 100% 60%; background-repeat: no-repeat; background-position: 50% 50%; border-radius: 5px; min-height: 55px; background-image: -webkit-named-image(apple-pay-logo-white); } @supports not (-webkit-appearance: -apple-pay-button) { .apple-pay-button-black { background-image: -webkit-named-image(apple-pay-logo-white); background-color: black; background-size: 100% 60%; background-repeat: no-repeat; background-position: 50% 50%; border-radius: 5px; min-height: 55px; } } .header-blog { min-height: 58px; } .header-blog-inner { display: flex; align-items: center; justify-content: space-between; } .header-blog-right { display: flex; flex-direction: row; flex-wrap: nowrap; } .blog-overlay { position: fixed; top: 0; right: 0; width: 100%; height: 100%; z-index: 999; opacity: 0; visibility: hidden; background: rgba(0, 0, 0, 0.7); transition: all 0.35s ease-in-out; } .blog-overlay.open { display: block; opacity: 1; visibility: visible; } @media (max-width: 991.98px) { .menu-nav { position: fixed; top: 0; right: -19rem; width: 19rem; height: 100%; z-index: 999; opacity: 0; overflow-y: auto; visibility: hidden; background-color: var(--bg-white); color: var(--bg-white-text); box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; transition: all 0.5s ease; } .menu-nav.open { visibility: visible; right: 0; opacity: 1; } .menu-nav .nav-blog { flex-direction: column; align-items: inherit; } .menu-nav .nav-blog-item { margin: 0; } .menu-nav .nav-blog-link { padding: 18px 20px; display: block; border-bottom: solid 1px var(--border-color); font-size: 1rem; background-image: url(images/retina/submenu-arrow.svg); background-position: right 20px center; background-repeat: no-repeat; background-size: 8px 14px; } } .nav-blog { display: flex; align-items: center; font-size: 0.85rem; } .nav-blog-item { margin: 0 1rem; } .nav-blog-link { text-rendering: optimizeLegibility; transition: color 0.3s ease-in-out; background-image: linear-gradient(currentColor, currentColor); background-position: 50% 100%; background-repeat: no-repeat; background-size: 0% 2px; transition: background-size 0.3s; font-weight: 600; color: var(--txt-body); padding: 22px 0; } .nav-blog-link:hover { text-decoration: none; background-size: 100% 2px; } .nav-blog-more::after { content: " ↓"; } .btn-menu { background: transparent; border: none; margin: 0 0.5rem; } @media (min-width: 992px) { .btn-menu { display: none; } } .btn-blog-search { background: transparent; color: currentColor; border: none; margin: 0 0.5rem; } @media (min-width: 992px) { .btn-blog-search { padding-right: 1rem; border-right: solid 1px var(--border-color); } } .blog-more { position: absolute; right: 0; left: 0; top: calc(100% + 2px); background-color: var(--bg-white); color: var(--bg-white-text); border-bottom: solid 1px var(--border-color); transition: all 0.1s ease-out; } .blog-more ul { padding: 3rem 2rem; max-width: 1100px; margin: 0 auto; display: grid; grid-gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } .blog-more ul li a { text-rendering: optimizeLegibility; transition: color 0.3s ease-in-out; background-image: linear-gradient(currentColor, currentColor); background-position: 50% 100%; background-repeat: no-repeat; background-size: 0% 2px; transition: background-size 0.3s; font-weight: 600; color: var(--txt-body); padding: 22px 0; } .blog-more ul li a:hover { color: var(--brand-color); text-decoration: none; background-size: 100% 2px; } .offcanvas-blog-nav { display: flex; flex-direction: column; font-size: 1rem; } .offcanvas-blog-nav-item { border-bottom: solid 1px var(--border-color); } .offcanvas-blog-nav-link { display: flex; align-items: center; justify-content: space-between; padding: 1rem 2rem; } .offcanvas-blog-nav .icon { display: inline-block; font-size: inherit; font-style: normal; height: 1em; position: relative; text-indent: -9999px; vertical-align: middle; width: 1em; font-size: 0.8rem; transform: scale(1); margin-right: auto; } .offcanvas-blog-nav .icon::before { content: ""; display: block; right: 50%; position: absolute; top: 50%; border: 0.1rem solid currentColor; border-bottom: 0; border-right: 0; height: 0.65em; width: 0.65em; transform: translate(-75%, -50%) rotate(135deg); } .offcanvas-blog-search { height: 100%; } @media (min-width: 992px) { .offcanvas-blog-search { height: 70vh; } } .blog-search { display: flex; width: 100%; height: 100%; margin: 0 auto; padding: 3rem 2rem; position: relative; flex-flow: row wrap; } @media (max-width: 991.98px) { .blog-search { text-align: center; gap: 2rem; justify-content: center; flex-direction: column; } } .blog-search-inner { flex: 1; width: 100%; max-width: 600px; margin: 0 auto; height: 100%; display: flex; flex-direction: column; } .blog-search-form { flex: 1; } .blog-search-fieldset { position: relative; } .blog-search-btn { background-color: var(--brand-color); color: var(--brand-color-inverse); border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 0; margin: 0; position: absolute; top: 5px; left: 5px; aspect-ratio: 1/1; width: 30px; } .blog-search-input { padding: 10px 1rem; font-size: 0.85rem; background-color: var(--bg-gray) !important; background-repeat: no-repeat; background-position: 15px center; background-size: 14px; border: none; border-radius: 20px; height: 40px; width: 100%; margin-bottom: 2rem; } [data-theme=dark] .blog-search-input { filter: invert(1) grayscale(100%) brightness(200%); background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMzA2cHgiIGhlaWdodD0iMzA2cHgiIHZpZXdCb3g9IjAgMCAzMDYgMzA2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAzMDYgMzA2OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQogICAgPGc+DQogICAgICAgIDxnIGZpbGw9IiNmZmYiIGlkPSJleHBhbmQtbW9yZSI+DQogICAgICAgICAgICA8cG9seWdvbiBwb2ludHM9IjI3MC4zLDU4LjY1IDE1MywxNzUuOTUgMzUuNyw1OC42NSAwLDk0LjM1IDE1MywyNDcuMzUgMzA2LDk0LjM1IiAvPg0KICAgICAgICA8L2c+DQogICAgPC9nPg0KPC9zdmc+); } [dir=rtl] .blog-search-input { background-position: -15px center; } .blog-search .btn-search-close { background-color: var(--bg-gray) !important; display: block; margin: 0; width: 40px; height: 40px; line-height: 40px; min-height: 40px; padding: 0; border-radius: 50%; } @media (max-width: 991.98px) { .blog-search .btn-search-close { margin: 0 auto; } } .post { height: 100%; position: relative; padding: 0; margin: 0; display: flex; flex-direction: column; } .post-body { flex: 1; display: flex; flex-direction: column; padding-top: 1.5rem; } .post-foot { margin-top: 1rem; padding-bottom: 1.5rem; } .post-media { aspect-ratio: 1.7777777778; position: relative; margin: 0; background-color: var(--bg-placeholder); background-image: url(images/retina/image.svg); background-position: center; background-repeat: no-repeat; background-size: 50% 50%; /* 16:9, for an aspect ratio of 1:1 change to this value to 100% */ } .post-media iframe, .post-media .blog-detail-left .posted-media .post__pic .media-wrapper img, .blog-detail-left .posted-media .post__pic .media-wrapper .post-media img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; } .post-category { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .post-category-tag { font-size: 0.8rem; color: var(--txt-gray-light); } .post-category-link { background-color: var(--bg-gray); color: var(--txt-body); display: block; font-size: 0.7rem; font-weight: 500; line-height: 1.2; color: var(--txt-gray); /*text-transform: uppercase;*/ padding: 5px; } .post-title { line-height: 1.5; font-weight: 600; font-size: 1.3rem; color: var(--txt-body); flex: 1; } .post-title a { color: inherit; } .post-description { color: var(--txt-gray); line-height: 1.7; margin-bottom: 2rem; } .post-link { color: var(--brand-color); font-size: 1rem; } .post-link:after { transition: all 0.5s ease-out; padding-right: 4px; content: "→"; } .post-link:hover { text-decoration: none; } .post-link:hover:after { padding-right: 8px; } .collection-1 .post { margin-bottom: 2rem; flex-direction: column; } @media (min-width: 992px) { .collection-1 .post { flex-direction: row; } } .collection-1 .post:last-child { margin-bottom: 0; } @media (min-width: 992px) { .collection-1 .post-head { flex: 0 0 50%; max-width: 50%; } } .collection-1 .post-body { background-color: var(--bg-gray); padding: 3rem; } .collection-1 .post-title { flex: 0; } .collection-2 { display: grid; grid-gap: 2rem; grid-template-columns: repeat(auto-fill, minmax(315px, 1fr)); } .article-inner .blog_author { font-size: 0.8rem; margin-bottom: 0.8rem; } .article-inner .blog_author .article__author { color: var(--txt-body); margin-left: 10px; font-weight: 600; } .article-inner .blog_author .article__date { color: var(--txt-gray); } .article-inner .article-title { margin-bottom: 1rem; line-height: 1.5; font-weight: 600; font-size: 1.25rem; } .article-inner a { color: inherit; text-decoration: none; } .article-inner a:hover { text-decoration: underline; color: inherit; } .blog-detail { display: grid; grid-gap: 4rem; } @media (min-width: 992px) { .blog-detail { grid-template-columns: 2fr 1fr; } } .blog-detail-left { overflow: hidden; padding-top: 1rem; } @media (min-width: 992px) { .blog-detail-left { padding-top: 2rem; padding-bottom: 4rem; } } .blog-detail-left .posted-media { margin-bottom: 2rem; overflow: hidden; } .blog-detail-left .posted-media .post__pic .media-wrapper { position: relative; background-color: var(--bg-placeholder); background-image: url(images/retina/image.svg); background-position: center; background-repeat: no-repeat; background-size: 50% 50%; aspect-ratio: 1.7777777778; } .blog-detail-left .posted-media .post__pic .media-wrapper iframe, .blog-detail-left .posted-media .post__pic .media-wrapper img { position: absolute; inset: 0; width: 100%; height: 100%; } .blog-detail-right { padding-top: 4rem; } @media (min-width: 992px) { .blog-detail-right { padding-bottom: 4rem; padding-right: 4rem; border-right: solid 1px var(--border-color); } } @media (max-width: 991.98px) { .blog-detail-right { padding-bottom: 4rem; } } .blog-head .title { color: var(--txt-body); font-size: calc(112.5% + 1vw); font-weight: 600; line-height: 1.3; margin-bottom: 2rem; } .posted-by { display: flex; align-items: center; margin-bottom: 2rem; color: var(--txt-gray); font-size: 0.875rem; text-transform: uppercase; flex-flow: row wrap; gap: 0.5rem; } .posted-by span { flex: 1; border-left: solid 1px var(--border-color); padding-left: 1rem; margin-left: 1rem; } .posted-by .share-blog { margin-top: 10px; } @media (min-width: 992px) { .posted-by .share-blog { margin: 0; margin-right: auto; } } .user-profile { display: flex; align-items: center; } .user-profile_photo { margin: 0; margin-left: 1rem; display: inline-block; flex-shrink: 0; position: relative; border-radius: 0.475rem; position: relative; width: 40px; height: 40px; } .user-profile_photo > img { width: inherit; height: inherit; border-radius: 50%; flex-shrink: 0; display: inline-block; background: var(--bg-placeholder); background-color: var(--bg-placeholder); background-image: url(images/retina/image.svg); background-position: center; background-repeat: no-repeat; background-size: 50% 50%; } .user-profile_data { display: flex; flex-direction: column; } .user-profile_title { font-weight: 600; font-size: 0.875rem; margin: 0; color: var(--txt-body); } .arrows { cursor: pointer; } .arrows svg { width: 30px; height: auto; fill: #b8b8b7; } .arrows:hover svg { fill: var(--brand-color); } .arrows--left { margin-left: 1.5rem; } .form-subscribe { margin: 1rem auto; display: flex; align-items: center; justify-content: space-between; width: 100%; } .form-subscribe input[type=text], .form-subscribe [type=text].custom-select { flex: 1; background-color: var(--bg-white); color: var(--bg-white-text); background-color: var(--bg-white); color: var(--bg-white-text); height: 3.5rem; width: 100%; line-height: 1.2; font-size: 1em; padding: 5px 20px; margin: 0; margin-left: -3px; border: none; color: var(--txt-body); vertical-align: top; border-top-right-radius: 50px; border-bottom-right-radius: 50px; } .form-subscribe input[type=submit], .form-subscribe [type=submit].custom-select { font-size: 1em; background-color: #000; height: 3.5rem; width: 100%; max-width: 136px; line-height: 1.2; padding: 5px 15px; margin: 0; border: none; color: var(--txt-white); vertical-align: top; font-weight: 400; border-radius: 0; border-top-left-radius: 50px; border-bottom-left-radius: 50px; cursor: pointer; } .post-content { color: var(--txt-gray); font-size: 1rem; line-height: 1.6; font-weight: 400; } .post-content blockquote { margin-top: 10px; margin-bottom: 10px; margin-right: 32px; padding: 12px 0 0 45px; font-size: 25px; font-weight: 600; line-height: normal; font-style: italic; color: var(--brand-color); } .post-content blockquote p { font-size: 25px; font-weight: 600; line-height: normal; font-style: italic; color: var(--brand-color); } .post-content p { color: #666; font-weight: 400; line-height: 1.6; padding: 0 0 15px 0; } .post-content a { color: var(--brand-color); text-decoration: underline; } .post-content img { border-radius: 4px; } .post-content .roll { display: inline-block; overflow: hidden; vertical-align: top; perspective: 400px; perspective-origin: 50% 50%; } .post-content .roll:hover { background: none; text-shadow: none; } .post-content ul { margin: 10px 0 10px 0; padding: 0; } .post-content ul li { position: relative; line-height: 30px; padding: 0 0 8px 24px; letter-spacing: 0.02em; } .post-content ul li:before { position: absolute; right: 0; top: 11px; width: 8px; height: 8px; content: ""; display: inline-block; background-color: currentColor; } .post-content ul li a { color: var(--brand-color); text-decoration: none; } .post-content ol { margin: 10px 0 10px 20px; padding: 0; width: 100%; display: inline-block; } .post-content ol li { list-style: decimal outside; line-height: normal; padding: 0 0 10px 0; letter-spacing: 0.02em; font-weight: 400; } .post-content ol.list-spl { list-style-type: none; } .post-content ol.list-spl li { font-size: 15px; position: relative; margin: 0px 0 15px 0; list-style-type: none !important; } .post-content ol.list-spl li.highlighted-point .highlighted-info { margin: 0 0 0 56px; } .post-content ol.list-spl li.highlighted-point .highlighted-info .sub-info { display: block; margin: 5px 0 0 0; } .post-content ol.list-spl li.highlighted-point p { background: #fbf8da; color: #272727; position: relative; margin: 0 0 10px 13px; top: 13px; padding: 15px 15px 15px 40px; border-radius: 2px; box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.62); } .post-content table { border-collapse: collapse; width: auto; text-align: right; } .post-content table th { border: solid 1px var(--border-color); padding: 5px 10px; vertical-align: top; color: var(--secondary-color); } .post-content table td { border: solid 1px var(--border-color); padding: 5px 10px; vertical-align: top; } .post-content table td strong { font-weight: 600; } .post-content table p { padding: 0px; } .post__author { margin: 2rem 0; } .post__author .media { display: flex; align-items: flex-start; } .post__author .media__image { margin-left: 2rem; } .post__author .avatar { display: block; width: 100px; height: 100px; border-radius: 50%; overflow: hidden; } .post__author .name { font-size: 1.25em; font-weight: 600; } .post__misc { margin: 2rem 0; } .comments { border: solid 1px var(--border-color); border-radius: 4px; margin: 2rem 0; padding: 2rem; } .comments h2, .comments .h2 { font-weight: 600; font-size: 1.5rem; color: var(--txt-body); } .comments:last-child { border-bottom: none; } .comments.odd { padding-right: 110px; } .comment-meta { padding: 2rem; display: flex; border-top: solid 1px var(--border-color); } .comment-meta .avatar { border-radius: 50%; overflow: hidden; width: 78px; height: 78px; min-width: 78px; box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1); margin-left: 2rem; } .comment-by { flex: 1; } .comment-by cite { display: block; font-style: normal; } .comment-by time { display: block; font-style: normal; color: var(--txt-gray); font-weight: 400; font-size: 0.875rem; } .comment-content { margin: 1rem 0 0 0; } .comment-content p { margin: 0; } .comment-respond { margin-top: 4rem; } .comment-respond h4, .comment-respond .h4 { margin: 0; font-size: 1.2rem; } .blog-subscribers-inner { background-color: var(--brand-color); color: var(--brand-color-inverse); } .blog-subscribers-inner h3, .blog-subscribers-inner .h3 { color: inherit; font-weight: 600; } .blog-subscribers-inner p { color: inherit; font-size: 0.9em; } .blog-subscribers-inner .form-subscribe { margin-bottom: 0; flex-direction: column; } .blog-subscribers-inner .form-subscribe input[type=text], .blog-subscribers-inner .form-subscribe [type=text].custom-select { flex: none; border-radius: 50px; margin: 0.5rem 0; text-align: center; } .blog-subscribers-inner .form-subscribe input[type=submit], .blog-subscribers-inner .form-subscribe [type=submit].custom-select { flex: none; border-radius: 50px; margin: 0.5rem 0; max-width: none; } .tabs-blog { overflow: hidden; display: flex; align-items: center; justify-content: space-between; } .tabs-blog li { flex: 1; } .tabs-blog li a { background-color: var(--bg-gray); display: block; padding: 15px 10px; color: var(--txt-body); font-size: 1rem; font-weight: 400; text-align: center; } .tabs-blog li.is--active a { background: var(--secondary-color); color: var(--secondary-color-inverse); } .content-data { display: none; } .content-data > ul > li { border-bottom: solid 1px var(--border-color); margin-bottom: 1rem; padding-bottom: 1rem; } .content-data > ul > li:last-child { border-bottom: none; } .content-data .post-category { margin: 0; } .content-data .post-title { font-size: 1rem; } .pagination-blog { display: flex; align-items: center; margin: 3rem 0; } .pagination-blog li { margin-left: 1rem; } .pagination-blog li a { width: 42px; line-height: 42px; text-align: center; height: 42px; display: block; font-size: 1em; color: #333; border: none; border: solid 1px var(--border-color); border-radius: 50%; position: relative; overflow: hidden; margin: 0; } .pagination-blog li.prev a { border-color: transparent; background: #373737 url(images/retina/arrows-left-white.svg) no-repeat center; background-size: 18px; } .pagination-blog li.next a { border-color: transparent; background: #373737 url(images/retina/arrow-right-white.svg) no-repeat center; background-size: 18px; } .pagination-blog li.selected a { background: var(--secondary-color); color: var(--secondary-color-inverse); border-color: transparent; } .likes-count li { margin-left: 10px; display: inline-block; line-height: 1; vertical-align: top; font-weight: 400; color: #000; font-size: 0.875em; } .likes-count li .icn-like, .likes-count li .icn-msg { display: inline-block; vertical-align: middle; margin-left: 10px; } .likes-count li .icn-msg img { width: 20px; } .right-side-bar .post_title { font-size: 1.1rem; font-weight: 500; } [dir=rtl] .form-subscribe input[type=text], [dir=rtl] .form-subscribe [type=text].custom-select { border-radius: 0px 50px 50px 0px; } [dir=rtl] .form-subscribe input[type=submit], [dir=rtl] .form-subscribe [type=submit].custom-select { border-radius: 50px 0px 0px 50px; } .payment-section { max-width: 500px; padding: 2rem; margin: 0 auto; } .payment-section .payable-amount { display: flex; flex-direction: column; } .payment-section .payable-amount-head { display: flex; align-items: center; flex-flow: row wrap; gap: 2rem; margin-bottom: 1rem; } .payment-section .payable-amount-body { flex: 1; } .payment-section .payable-amount-total { font-size: 0.75rem; } .payment-section .payable-amount-total .value { font-weight: 600; font-size: 0.8rem; } .payable-form-footer { margin-top: 2rem; } .contact-address { background-color: var(--bg-gray); border-radius: 4px; padding: 3rem; } @media (min-width: 768px) { .contact-address { padding: 1.5rem; } } .contact-address { color: var(--txt-gray); font-size: 0.85rem; } .contact-address-item { padding-bottom: 2rem; margin-bottom: 2rem; border-bottom: solid 1px var(--border-color); } .contact-address-item:last-child { padding-bottom: 0; margin-bottom: 0; border: none; } .contact-address h6, .contact-address .h6 { font-size: 1.125rem; font-weight: 500; color: var(--txt-body); margin-bottom: 10px; } .contact-address .footer-social { display: grid; grid-gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); } .list-contact { display: flex; flex-direction: column; } .list-contact li { padding: 10px 0; display: flex; flex-direction: row; gap: 0.5rem; } .g-map { position: relative; height: 490px; /* z-index: 1;*/ } .g-map iframe, .g-map .blog-detail-left .posted-media .post__pic .media-wrapper img, .blog-detail-left .posted-media .post__pic .media-wrapper .g-map img { position: absolute; height: 100%; width: 100%; z-index: 0; } .tab-faq { border-bottom: solid 1px var(--border-color); text-align: center; margin: 0 auto; } .filterDiv { cursor: pointer; font-size: 1.1rem; font-weight: 400; margin: -1px 0; padding: 1.5rem 0; padding-left: 25px; position: relative; border-top: solid 1px var(--border-color); border-bottom: solid 1px var(--border-color); position: relative; white-space: normal; } .filterDiv:after { position: absolute; left: 0; top: 32px; transform: rotate(-90deg); } .filterDiv:hover { color: var(--brand-color); } .filterDiv.faqclose:after { transform: rotate(0deg); } div.faqanswer { margin: 0; line-height: 1.8em; border-radius: 4px; /*margin-right: 3rem; border: $border;*/ display: none; } div.faqanswer p { margin: 0; padding: 1rem 0; color: var(--txt-gray); font-size: 0.85rem; } .bg-faqs { padding: 6rem 0; background-repeat: no-repeat; background-position: center top; background-size: cover; background-attachment: fixed; position: relative; color: var(--txt-white); } .bg-faqs:after { position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: 0; content: ""; opacity: 0.6; background: #232526; /* fallback for old browsers */ /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to right, #414345, #232526); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } .bg-faqs .container { position: relative; z-index: 1; } .bg-faqs .section-heading { color: var(--txt-white); } .form-faqs-input { border-radius: 50px !important; height: 3rem !important; background-color: var(--bg-white); color: var(--bg-white-text); color: var(--bg-white-text) !important; box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px !important; border-color: transparent !important; } .faq-filters { display: flex; flex-direction: row; flex-wrap: wrap; grid-gap: 0.5rem; } .faq-filters a { border: solid 1px var(--border-color); border-radius: 40px; padding: 0.5rem 1rem; color: var(--txt-body); font-size: 0.85rem; display: inline-block; position: relative; overflow: hidden; } .faq-filters a:after { position: absolute; top: 0; left: 0; width: 0; height: 0; border-top: 10px solid var(--brand-color); border-right: 10px solid transparent; } .faq-filters a:hover { background-color: var(--bg-gray); color: var(--txt-body); text-decoration: none; } .faq-filters a.is--active { background-color: var(--brand-color); color: var(--brand-color-inverse); border-color: var(--brand-color); } .browsed-box { border: solid 1px var(--border-color); padding: 20px; margin-bottom: 20px; } .browsed-box:hover { background: #ededed; } .browsed-box .category-q { color: var(--txt-body); text-transform: uppercase; font-weight: 600; min-height: 43px; } .browsed-box a.btn--link { margin: 10px 0; display: inline-block; } .browsed-box a.btn--link .svg-icn svg path { fill: var(--brand-color); } .header-supplier, .header-affiliate, .header-advertiser { color: var(--txt-body); min-height: auto; } .header-supplier .logo-bar, .header-affiliate .logo-bar, .header-advertiser .logo-bar { display: grid; align-items: center; grid-template-columns: 1fr 2fr; } .short-links { margin-right: auto; } .short-links li { margin-right: 1rem; } .short-links li a:hover, .short-links li a:focus, .short-links li a:active { color: var(--brand-color-inverse); } @media (max-width: 767.98px) { .short-nav { background-color: var(--bg-white); color: var(--bg-white-text); box-shadow: 0px 0px 28px 0px rgba(0, 0, 0, 0.05); z-index: 1050; position: fixed; -webkit-overflow-scrolling: touch; top: 0; right: -280px; bottom: 0; overflow-y: auto; backface-visibility: hidden; -webkit-backface-visibility: hidden; width: 280px; transition: left 0.3s ease, right 0.3s ease; } .short-nav ul { display: flex; flex-direction: column; } .short-nav--on .short-nav { background: var(--bg-gray-light); padding: 0; right: 0; visibility: visible; } } .short-nav li { display: inline-block; vertical-align: top; } .short-nav li a { display: block; font-size: 0.8em; padding: 6px 10px; color: var(--txt-body); } .short-nav li:first-child { padding-right: 0; } .short-nav li:last-child { padding-left: 0; } .seller-nav { flex-direction: column; align-items: inherit; } .seller-nav-item { margin: 0; } .seller-nav-link { padding: 18px 20px; display: block; border-bottom: solid 1px var(--border-color); font-size: 1rem; background-image: url(images/retina/submenu-arrow.svg); background-position: right 20px center; background-repeat: no-repeat; background-size: 8px 14px; } .hero-banner { padding: 2rem 0; color: #fff; background-position: center; position: relative; background-attachment: fixed; } .hero-banner:after { background-color: oklab(70.9792% -0.00417995 -0.0269528 / 0.5); position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: 0; content: ""; opacity: 0.6; } .hero-banner .container { position: relative; z-index: 1; } .hero-banner-inner { display: flex; flex-flow: row wrap; gap: 2rem; } @media (min-width: 992px) { .hero-banner-inner { display: grid; grid-gap: 4rem; grid-template-columns: 1fr 1fr; align-items: flex-start; } } .seller-slogan { position: relative; height: 100%; display: flex; align-items: center; padding: 0; } .seller-slogan-txt h3, .seller-slogan-txt .h3 { font-size: clamp(2rem, 50%, 4rem); font-weight: 600; line-height: 1.5; margin-bottom: 1.5rem; color: currentColor; } .seller-slogan-txt h3 span, .seller-slogan-txt .h3 span { display: block; font-size: 1rem; color: inherit; } .seller-slogan-txt p { color: currentColor; } .seller-slogan ul li { display: inline-block; margin-left: 20px; } .seller-register-form { background-color: var(--bg-white); color: var(--bg-white-text); padding: 2rem; width: 100%; border-radius: 4px; position: relative; } .seller-register-form h2, .seller-register-form .h2 { font-size: 1.2rem; margin-bottom: 1rem; } .seller-register-form.affiliate-register-form { max-width: none; } .seller-register-form .message { padding: 0 20px; } .features { padding: 100px 0; } .growth { max-width: 520px; background-repeat: no-repeat; background-position: right top; background-image: none !important; display: block; color: #000; font-size: 1.5em; } .growth strong { font-size: 2em; } .growth .growth-txt { border-right: solid 1px var(--border-color); padding-right: 120px; } .growth .growth-txt li { margin-bottom: 50px; display: table; width: 100%; } .growth .growth-txt li:last-child { margin-bottom: 0; } .growth .growth-txt i.icn { float: left; margin-left: 30px; } .growth .growth-txt p { color: var(--txt-gray); } .simple-step { background: #f8f8f8 url(images/bg-step-slider.png) no-repeat center bottom; } .simple-step .heading1 { text-align: center; display: block; } .seller-steps-slider { position: relative; height: 410px; } .simple-price { background: var(--secondary-color); color: var(--secondary-color-inverse); text-align: center; } .pricing-structure { margin: 2rem auto; max-width: 1100px; } .pricing-structure ul { display: grid; grid-template-columns: auto; align-items: center; flex-wrap: wrap; gap: 1rem; margin: 2.5rem auto; } @media (min-width: 576px) { .pricing-structure ul { grid-template-columns: 25% 1fr 25% 1fr 25%; } } @media (min-width: 992px) { .pricing-structure ul { gap: 2rem; grid-template-columns: 15.6125rem 1fr 15.6125rem 1fr 15.6125rem; } } .pricing-structure ul li { text-align: center; } .pricing-structure .lg-hide { display: none; } @media (min-width: 768px) { .pricing-structure .lg-hide { display: none; } } .pricing-structure .box { max-width: 15.6125rem; width: 100%; padding: 2rem 1rem; margin: 0 auto; display: flex; justify-content: center; align-items: center; flex-direction: column; border-radius: 20px; box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1607843137); background-color: var(--bg-white); color: var(--bg-white-text); } .pricing-structure .box h4, .pricing-structure .box .h4 { font-size: 2rem; color: var(--brand-color); font-weight: 800; margin: 0; } .pricing-structure .box p { color: var(--txt-body); } .pricing-structure .sign { color: var(--brand-color); font-size: 3rem; font-weight: 800; } .registeration-process { margin: 1rem 0; } .registeration-process ul { display: flex; flex-wrap: nowrap; overflow-x: auto; } .registeration-process ul li { font-size: 0.85em; color: var(--txt-gray); margin-left: 1rem; } .registeration-process ul li:first-child { margin-right: 0; padding-right: 0; } .registeration-process ul li a { display: block; padding: 0.5rem 0; color: inherit; white-space: nowrap; position: relative; text-decoration: none; } .registeration-process ul li a:after { content: ""; bottom: 0; background-color: var(--brand-color); color: var(--brand-color-inverse); height: 2px; width: 0; position: absolute; z-index: 0; right: 0; } .registeration-process ul li.is--active a { color: var(--brand-color); font-weight: 600; } .registeration-process ul li.is--active a:after { width: 100%; } @media (max-width: 767.98px) { .yk-login--wrapper { background-color: var(--bg-white); color: var(--bg-white-text); background-color: var(--bg-white); color: var(--bg-white-text); box-shadow: 0px 0px 28px 0px rgba(0, 0, 0, 0.05); z-index: 1050; position: fixed; -webkit-overflow-scrolling: touch; top: 0; right: -280px; bottom: 0; overflow-y: auto; backface-visibility: hidden; -webkit-backface-visibility: hidden; width: 280px; transition: left 0.3s ease, right 0.3s ease; } .yk-login--wrapper--on .yk-login--wrapper { right: 0; visibility: visible; } } .seller-steps { text-align: center; margin: 0 auto; } .seller-steps ul { display: flex; margin: 50px auto 0 auto; } @media (max-width: 767.98px) { .seller-steps ul { flex-wrap: wrap; } } .seller-steps ul li { flex: 0 0 25%; max-width: 25%; padding: 0 1rem; vertical-align: top; } @media (max-width: 767.98px) { .seller-steps ul li { flex: auto; max-width: inherit; } } .seller-steps .icn { margin: 20px auto; display: block; text-align: center; width: 100px; height: 100px; position: relative; } .seller-steps .icn:before { position: relative; display: block; content: ""; padding-bottom: 100%; } .seller-steps .icn img { position: absolute; right: 0; left: 0; top: 0; bottom: 0; margin: auto; } .seller-steps h3, .seller-steps .h3 { color: #000; font-size: 1.25em; line-height: 1.3; font-weight: 400; } .seller-steps p { font-size: 0.9375em; line-height: 1.3; } .easy-methods { display: flex; flex-flow: row wrap; justify-content: center; gap: 3rem; } .easy-methods .method { max-width: 300px; display: flex; flex-direction: column; text-align: center; gap: 0.5rem; } .easy-methods .method .icon { padding: 10px; margin: 0 auto; margin-bottom: 1rem; aspect-ratio: 1/1; width: 100%; max-width: 11.25rem; display: flex; justify-content: center; align-items: center; border-radius: 50%; box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1607843137); } .easy-methods .method .icon img { opacity: 0.5; } .easy-methods .method h3, .easy-methods .method .h3 { color: var(--txt-body); font-size: 1.375rem; } .easy-methods .method p { color: var(--txt-gray); font-size: 1rem; } .cta { text-align: center; } .cta h3, .cta .h3 { font-size: 1.4rem; margin-bottom: 1.5rem; } .bullet-circle { display: flex; flex-direction: column; gap: 0.5rem; } .bullet-circle li { display: flex; gap: 0.5rem; margin: 1rem 0; } .bullet-circle li .icn { display: inline-flex; align-items: center; justify-content: center; padding: 4px; font-size: 9px; background-color: var(--brand-color); color: var(--brand-color-inverse); border-radius: 50%; width: 1rem; flex: 0 0 1rem; height: 1rem; margin-top: 4px; } .shop-fold { position: relative; } .shop-bar { background-color: var(--bg-gray-light); border-bottom: solid 1px var(--border-color); } .shop-banner { background-position: center top; background-repeat: no-repeat; position: relative; text-align: center; background: var(--bg-placeholder); background-color: var(--bg-placeholder); background-image: url(images/retina/image.svg); background-position: center; background-repeat: no-repeat; background-size: 50% 50%; aspect-ratio: 16/9; position: relative; } @media (min-width: 992px) { .shop-banner { aspect-ratio: 4/1; } } .bg-shop-info { background-image: linear-gradient(var(--brand-color), var(--brand-color)); background-position: 50% 100%; background-repeat: no-repeat; background-size: 100% 60px; } .bg-shop-info .container { position: relative; } .shop-info-wrap { display: flex; flex-direction: column; } .shop-information { padding: 1rem 0; display: flex; flex-direction: column; } @media (min-width: 992px) { .shop-information { flex-direction: row; align-items: center; padding: 3rem 0; } } .shop-information-start { display: flex; align-items: center; flex-direction: row; grid-gap: 1.5rem; } @media (min-width: 992px) { .shop-information-end { margin-right: auto; } } .shop-information-logo { border: solid 1px var(--border-dark); border-radius: 4px; width: 75px; margin: 0; background-color: var(--bg-white); color: var(--bg-white-text); background-color: var(--bg-placeholder); background-image: url(images/retina/image.svg); background-position: center; background-repeat: no-repeat; background-size: 50% 50%; display: flex; align-items: center; justify-content: center; overflow: hidden; aspect-ratio: 1/1; } @media (min-width: 992px) { .shop-information-logo { width: 155px; } } .shop-information-logo img { -o-object-fit: cover; object-fit: cover; } .shop-information-detail { display: flex; flex-direction: column; } .shop-information-detail .title { margin-bottom: 1rem; display: flex; gap: 0.5rem; align-items: center; } .shop-information-detail .blk-txt { display: block; font-size: 0.775rem; color: var(--txt-gray); } .shop-information .product-ratings { margin: 0; padding: 0; } .contact-social { margin-top: 1rem; display: block; color: var(--txt-body); display: flex; grid-gap: 0.5rem; position: relative; } .contact-social-item { display: inline-block; } .contact-social-link { background-color: var(--bg-white); color: var(--bg-white-text); border: solid 1px var(--border-color); border-radius: 2px; font-size: 1rem; position: relative; height: 2.5rem; width: 2.5rem; aspect-ratio: 1/1; text-align: center; display: flex; align-items: center; justify-content: center; transition: all 0.4s ease; overflow: hidden; cursor: pointer; } .contact-social-link:hover .icon-1, .contact-social-link:focus .icon-1, .contact-social-link:active .icon-1 { top: -15px; } .contact-social-link:hover .icon-2, .contact-social-link:focus .icon-2, .contact-social-link:active .icon-2 { top: 15px; } .contact-social-link .icon-2 { top: 50px; } .contact-social .active { background-color: var(--brand-color); color: var(--brand-color-inverse); } .shop-info { padding: 0; text-align: center; display: flex; flex-direction: column; } @media (max-width: 767.98px) { .shop-info { flex-direction: column; align-items: center; } } .shop-info .products__rating { justify-content: center; margin-bottom: 1rem; } .shop-nav { display: flex; flex-direction: row; grid-gap: 2rem; } @media (max-width: 767.98px) { .shop-nav { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; } } .shop-nav-link { color: var(--txt-body); font-size: 0.85rem; padding: 0.8rem 0; margin: 0; display: block; font-weight: 600; position: relative; white-space: nowrap; text-rendering: optimizeLegibility; transition: color 0.3s ease-in-out; background-image: linear-gradient(currentColor, currentColor); background-position: 50% 100%; background-repeat: no-repeat; background-size: 0% 2px; background-color: transparent; transition: background-size 0.3s; text-decoration: none; } .shop-nav-link:hover, .shop-nav-link:focus, .shop-nav-link:active, .shop-nav-link.active { color: var(--brand-color); text-decoration: none; background-size: 100% 2px; } .testimonials { -moz-column-count: 4; column-count: 4; -moz-column-gap: 2rem; column-gap: 2rem; } @media (max-width: 1199.98px) { .testimonials { -moz-column-count: 3; column-count: 3; } } @media (max-width: 991.98px) { .testimonials { -moz-column-count: 2; column-count: 2; } } @media (max-width: 575.98px) { .testimonials { -moz-column-count: 1; column-count: 1; } } .testimonials-item { background-color: var(--bg-white); color: var(--bg-white-text); border-radius: 8px; border: solid 1px var(--border-color); box-shadow: 0 12px 48px 0 rgba(109, 117, 141, 0.2); width: 100%; page-break-inside: avoid; -moz-column-break-inside: avoid; break-inside: avoid; page-break-inside: avoid; display: inline-block; padding: 1.5rem; margin-bottom: 2rem; margin-top: 0; animation: fadeFromTransparent 1000ms; } .testimonials-item .user { display: flex; justify-content: flex-end; align-items: center; gap: 0.5rem; transition: all 0.3s ease 0s; margin-top: 1rem; } .testimonials-item .user .user-img { background-color: var(--bg-placeholder); background-color: var(--bg-placeholder); background-image: url(images/retina/image.svg); background-position: center; background-repeat: no-repeat; background-size: 50% 50%; border-radius: 50%; overflow: hidden; width: 36px; height: 36px; max-width: 100%; } .testimonials-item .user .user-name { padding: 0; margin: 0; font-size: 0.8rem; font-weight: 500; } .testimonials-item .testimonials-content { flex: 1; position: relative; } .testimonials-item .testimonials-content:before { color: currentColor; content: "“"; display: block; line-height: 1; font-size: 8rem; height: 60px; opacity: 0.2; font-family: sans-serif; } .testimonials-item .testimonials-content p { font-weight: 400; font-size: 0.85rem; padding: 0; margin: 0; } .sitemapcontainer h2, .sitemapcontainer .h2 { font-size: 1.3em; margin: 1rem 0; padding-bottom: 1rem; border-bottom: solid 1px var(--border-color); } .success-animation { margin: 2rem auto; } .checkmark { width: 80px; height: 80px; border-radius: 50%; display: block; stroke-width: 2; stroke: #4bb71b; stroke-miterlimit: 10; box-shadow: inset 0px 0px 0px #4bb71b; animation: fill 0.4s ease-in-out 0.4s forwards, scale 0.3s ease-in-out 0.9s both; position: relative; top: 5px; left: 5px; margin: 0 auto; } .checkmark .checkmark__circle { stroke-dasharray: 166; stroke-dashoffset: 166; stroke-width: 2; stroke-miterlimit: 10; stroke: #4bb71b; fill: #fff; animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards; } .checkmark .checkmark__check { transform-origin: 50% 50%; stroke-dasharray: 48; stroke-dashoffset: 48; animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards; } @keyframes stroke { 100% { stroke-dashoffset: 0; } } @keyframes scale { 0%, 100% { transform: none; } 50% { transform: scale3d(1.1, 1.1, 1); } } @keyframes fill { 100% { box-shadow: inset 0px 0px 0px 30px #4bb71b; } } .thanks-screen { border: solid 1px var(--border-color); border-radius: 4px; box-shadow: rgba(0, 0, 0, 0.12) 0px 6px 16px; margin: 0 auto; max-width: 850px; padding: 2rem; padding-top: 0; } .thanks-screen > p { text-align: center; margin-right: auto; margin-left: auto; } @media (min-width: 1200px) { .thanks-screen > p { max-width: 80%; } } .order-completed { color: var(--txt-gray); } .order-completed h2, .order-completed .h2 { color: var(--txt-body); font-size: calc(1.75rem + (1vw - 0.1875rem) * 1.2346); font-weight: 400; margin-bottom: 1rem; } .order-completed h3, .order-completed .h3 { color: var(--txt-body); font-size: 1.2rem; font-weight: 400; margin-bottom: 1.5rem; } .order-completed h3 a, .order-completed .h3 a { color: var(--brand-color); } .order-completed p { font-weight: 400; font-size: 0.85rem; margin-bottom: 0.8rem; } .order-completed .svg { width: 1rem; height: 1rem; } .completed-detail { /*border-radius: 4px; border: $border;*/ display: flex; flex-wrap: wrap; margin-top: 3rem; gap: 1rem; text-align: start; } .completed-detail-item { background-color: var(--bg-gray); /*flex: 0 0 50%; max-width: 50%;*/ flex: 1; padding: 1.5rem; margin: 0; } @media (max-width: 991.98px) { .completed-detail-item { flex: 0 0 calc(50% - 2rem); max-width: calc(50% - 2rem); } } @media (max-width: 991.98px) { .completed-detail-item { flex: 0 0 100%; max-width: 100%; } } .completed-detail h4, .completed-detail .h4 { font-weight: 500; font-size: 0.9rem; margin-bottom: 8px; } .completed-detail h4 .svg, .completed-detail .h4 .svg { margin-left: 5px; width: 1rem; height: 1rem; } .completed-detail p { color: var(--txt-gray-light); font-size: 0.8rem; margin: 0; } .preferred-shipping-list { list-style-type: decimal; list-style-position: inside; } .preferred-shipping-list li { border-radius: 2px; padding: 0.4rem 0; margin-bottom: 5px; font-size: 0.75rem; font-weight: 600; } .completed-cart { margin-top: 1rem; } .any-question { font-size: 0.85rem; } html { font-size: 14px; } @media (min-width: 768px) { html { font-size: 13px; } } @media (min-width: 992px) { html { font-size: 14px; } } @media (min-width: 1200px) { html { font-size: 15px; } } @media (min-width: 1400px) { html { font-size: 16px; } } @media (min-width: 1600px) { html { font-size: 17px; } } @media (max-width: 767.98px) { body { overflow-x: hidden; } } html :focus-visible, body :focus-visible { outline: rgb(19, 110, 248) solid 2px; outline-offset: 3px; } @media (min-width: 1600px) { .container { max-width: 1440px; } } @media (min-width: 1800px) { .container { max-width: 1536px; } } @media print { .pagebreak { clear: both; page-break-after: always; } } .container-fluid, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl { max-width: none; } p { margin: 0; } b, strong { font-weight: 500; } .strong { font-weight: 500; } ol, ul { padding: 0; margin: 0; list-style-type: none; } img { max-width: 100%; } a { color: inherit; text-decoration: none; } a:hover { color: var(--brand-color); text-decoration: underline; } .svg { fill: currentColor; } mark, .mark { padding: 0; } .text-left { text-align: right !important; } .text-right { text-align: left !important; } .divider { height: 1px; background: var(--border-color); margin: 15px 0; } .note { font-weight: 400; margin-top: 10px; display: block; } .txt-white { color: var(--txt-white); } .txt-brand { color: var(--brand-color); } .txt-secondary { color: var(--secondary-color); } .txt-success { color: #1dc9b7; } .dragHandle { cursor: move; } #st_gdpr_iframe { display: none; } .not-allowed { background: #ededed; color: #888; cursor: not-allowed !important; } .formActions-css { display: none !important; } .gap { height: 1rem; clear: both; display: table; width: 100%; } .align-center { margin: 0 auto; text-align: center; } .hidden { display: none !important; } .no-after:after { content: normal !important; } .no-after:before { content: normal !important; } .list-inline { display: flex; align-items: center; gap: 0.5rem; } .focused-div { height: auto; cursor: text; font-size: 0.9em; } .cards-message { display: flex; justify-content: center; flex-direction: column; align-items: center; position: relative; padding: 0.75rem 1.25rem; margin: auto; color: var(--body-color); height: 100%; } .cards-message-icon { display: flex; align-items: center; padding: 1.25rem 0; font-size: 2.5rem; } .cards-message .alert-text { align-self: center; } .profile-image .avtar { margin: 0 auto; } .info-message { background: #f9edbe; border: 1px solid #f0c36d; color: #6c6c6c; font-size: 0.85em; line-height: 1.2; border-radius: 4px; padding: 0.8rem; } .docs-buttons { display: flex; justify-content: center; } .docs-buttons .btn-group { margin: 0 2px; } .strikethrough { text-decoration: line-through; } .cursor-pointer { cursor: pointer; } .alert-aligned { height: 100%; display: flex; align-items: center; } .text-link { font-weight: 500; color: var(--brand-color); } .close-layer { z-index: 2; position: absolute; left: 10px; top: 10px; width: 32px; height: 32px; opacity: 0.3; transition: all 300ms; display: flex; align-items: center; border: none; background: none; } .close-layer:hover, .close-layer:focus, .close-layer:active { transform: rotate(-90deg); opacity: 1; } .close-layer:before, .close-layer:after { position: absolute; right: 15px; content: " "; height: 18px; width: 2px; background-color: #000; } .close-layer:before { transform: rotate(45deg); } .close-layer:after { transform: rotate(-45deg); } .close-layer--white:before, .close-layer--white:after { background-color: var(--bg-white); color: var(--bg-white-text); background-color: var(--bg-white); color: var(--bg-white-text); } .close-layer-sm { width: 20px; height: 20px; } .close-layer-sm:before, .close-layer-sm:after { right: 10px; height: 12px; width: 1px; } .browse-more { margin-top: 1.5rem; display: flex; align-items: center; justify-content: center; flex-flow: row wrap; gap: 0.5rem; } .browse-more li a { background-color: var(--bg-gray); color: var(--txt-body); border-radius: 30px; padding: 0.5rem 1rem; font-size: 0.75rem; font-weight: 600; display: block; } .browse-more li a:hover, .browse-more li a:focus, .browse-more li a:active { background-color: var(--bg-black); color: var(--bg-black-text); border-color: currentColor; text-decoration: none; } .slider-controls { display: flex; align-items: center; justify-content: center; grid-gap: 0.5rem; flex-direction: row; flex-wrap: nowrap; } .slider-controls .btn { background-color: oklab(70.9792% -0.00417995 -0.0269528 / 0.5); backdrop-filter: blur(32px); border: solid 1px transparent; padding: 0; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .slider-controls .btn-prev span { display: inline-block; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; width: 8px; height: 8px; transform: rotate(-136deg); margin-left: -4px; } .slider-controls .btn-next span { display: inline-block; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; width: 8px; height: 8px; transform: rotate(45deg); margin-right: -4px; } .slider-controls .btn:is(:hover, :focus) { background-color: var(--brand-color); color: var(--brand-color-inverse); box-shadow: none; } .processing-wrap { position: relative; } .processing { background-color: var(--bg-blur-white); color: var(--txt-body); backdrop-filter: blur(10px); backdrop-filter: blur(0); position: absolute; z-index: 1024; top: 0; bottom: 0; right: 0; left: 0; text-align: center; display: flex; align-items: center; justify-content: center; } .skeleton { background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 80%), lightgray; border-radius: 2px; height: 10px; margin: 2px 0; position: relative; overflow: hidden; } .skeleton::before { content: ""; display: block; position: absolute; right: -150px; top: 0; height: 100%; width: 150px; background: linear-gradient(to right, transparent 0%, #e8e8e8 50%, transparent 100%); animation: load 1s cubic-bezier(0.4, 0, 0.2, 1) infinite; } @keyframes load { from { right: -150px; } to { right: 100%; } } .grid-layout { display: flex; flex-direction: column; gap: 3rem; } @media (min-width: 992px) { .grid-layout { display: grid; grid-gap: 5rem; grid-template-columns: minmax(auto, 24%) 1fr; } } .badges-list { display: inline-flex; align-items: center; gap: 3px; margin-bottom: 5px; } .badges-list-img { background-color: var(--bg-placeholder); background-image: url(images/retina/image.svg); background-position: center; background-repeat: no-repeat; background-size: 50% 50%; border-radius: 4px; border: solid 1px var(--border-color); padding: 6px; width: 30px; height: 30px; aspect-ratio: 1/1; -o-object-fit: cover; object-fit: cover; display: flex; align-items: center; justify-content: center; } .badges-wrap { z-index: 1; position: absolute; left: 8px; top: 8px; display: flex; gap: 0.5rem; flex-flow: row wrap; } .badges-wrap .badge { position: relative; } .badges-wrap .badge:after { position: absolute; content: ""; opacity: 0; top: 0; right: 0; z-index: 1; background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.031372549) 1%, rgba(255, 255, 255, 0.6) 30%, rgba(255, 255, 255, 0.8509803922) 50% 70%, rgba(255, 255, 255, 0.8509803922) 71%, rgba(255, 255, 255, 0)); width: 15%; height: 100%; transform: skew(-10deg); animation: move 1.5s; animation-iteration-count: infinite; animation-delay: 1s; } .dropdown-addresses .btn-dropdown { border-radius: 4px; width: 100%; gap: 0.5rem; padding-right: 1rem; } .dropdown-addresses .dropdown-menu-option { cursor: pointer; font-weight: 400; } .dropdown-menu-addresses { max-height: 250px; overflow-y: auto; } .dropdown-menu-addresses .dropdown-menu-link { font-size: 0.85rem; font-weight: 400; } /* Dev */ .z-index-9999 { z-index: 9999 !important; } .uploaded-list { display: flex; gap: 1rem; flex-direction: column; margin-top: 1rem; } .uploaded-list-inline { flex-flow: row wrap; } .uploaded-list-item { border: solid 1px var(--border-color); border-radius: 4px; display: flex !important; gap: 1rem; padding: 0.5rem; margin: 0; } .uploaded-list-item .media { width: 50px; height: 50px; position: relative; } .uploaded-list-item .media img { border-radius: 4px; position: absolute; top: 0; left: 0; bottom: 0; right: 0; -o-object-fit: cover; object-fit: cover; } .uploaded-list-item .title { flex: 1; font-size: 0.875rem; font-weight: 500; color: var(--txt-gray); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .uploaded-list-item .btn-close { margin-right: auto; } .product-type { background: linear-gradient(to right, #E61E4D 0%, #E31C5F 50%, #D70466 100%); color: #fff; z-index: 1; position: absolute; right: 0.5rem; top: 0.5rem; border-radius: 15px; border: none; aspect-ratio: 1/1; width: 1.5rem; height: 1.5rem; padding: 5px; line-height: 1.5; font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 5px; transition: all 0.4s; } .product-type .svg { flex-shrink: 0; } .product-type-txt { position: absolute; opacity: 0; } .product-type:hover { padding: 5px 8px; width: auto; } .product-type:hover .product-type-txt { position: static; opacity: 1; } .skip-link { background-color: var(--bg-white); color: var(--bg-white-text); min-width: 200px; position: fixed; top: 50px; right: 20px; text-align: center; padding: 13px 20px; border-radius: 50px; text-decoration: none; font-size: 16px; text-shadow: 0 0 #27272d; opacity: 0; pointer-events: none; z-index: 2147483647; direction: ltr; border: solid 3px rgb(19, 110, 248); transition: top 0.22s ease; } .skip-link .enter { background-color: var(--brand-color); color: var(--brand-color-inverse); display: inline-flex; margin-inline-start: 30px; font-size: 10px; text-transform: uppercase; justify-content: center; align-items: center; border-radius: inherit; padding: 5px 10px; } .skip-link .enter .icn { font-size: 0.85rem; margin-inline-end: 3px; line-height: 1; } .skip-link:focus { top: 20px; opacity: 1; pointer-events: auto; } #toast-container > div { border-radius: 60px !important; font-weight: 400 !important; font-size: 0.85rem !important; } .iti--separate-dial-code { display: grid !important; } .iti--separate-dial-code .iti__flag-container { grid-row: span 2/2; } .iti--separate-dial-code .errorlist { grid-column: span 2/2; } .mobile-only { display: block; } @media (min-width: 992px) { .mobile-only { display: none; } } .desktop-only { display: none; } @media (min-width: 992px) { .desktop-only { display: block; } }.page-404 { max-width: 1000px; margin: 0 auto; } .cls-1 { fill: #ffc541; } .cls-2 { fill: #d91433; } .cls-3 { fill: var(--primary-color); } .cls-4 { fill: #f78d5e; } .cls-5 { fill: #fa976c; } .cls-6, .cls-7, .cls-8 { fill: #b65c32; } .cls-10, .cls-6 { opacity: 0.6; } .cls-7 { opacity: 0.4; } .cls-9 { fill: #f4b73b; } .cls-11 { fill: #f9c358; } .cls-12 { fill: #9b462c; } .cls-13 { fill: #aa512e; } .cls-14 { fill: #7d6aa5; } /* animations */ .page-404 .wheel { animation: wheel-rotate 6s ease infinite; transform-origin: center; transform-box: fill-box; } @keyframes wheel-rotate { 50% { transform: rotate(360deg); animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); } 100% { transform: rotate(960deg) } } .page-404 .clock-hand-1 { animation: clock-rotate 3s linear infinite; transform-origin: bottom; transform-box: fill-box; } .page-404 .clock-hand-2 { animation: clock-rotate 6s linear infinite; transform-origin: bottom; transform-box: fill-box; } @keyframes clock-rotate { 100% { transform: rotate(360deg) } } #box-top { animation: box-top-anim 2s linear infinite; transform-origin: right top; transform-box: fill-box; } @keyframes box-top-anim { 50% { transform: rotate(-5deg) } } #umbrella { animation: umbrella-anim 6s linear infinite; transform-origin: center; transform-box: fill-box; } @keyframes umbrella-anim { 25% { transform: translateY(10px) rotate(5deg); } 75% { transform: rotate(-5deg); } } #cup { animation: cup-rotate 3s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite; transform-origin: top left; transform-box: fill-box; } @keyframes cup-rotate { 50% { transform: rotate(-5deg) } } #pillow { animation: pillow-anim 3s linear infinite; transform-origin: center; transform-box: fill-box; } @keyframes pillow-anim { 25% { transform: rotate(10deg) translateY(5px) } 75% { transform: rotate(-10deg) } } #stripe { animation: stripe-anim 3s linear infinite; transform-origin: center; transform-box: fill-box; } @keyframes stripe-anim { 25% { transform: translate(10px, 0) rotate(-10deg) } 75% { transform: translateX(10px) } } #bike { animation: bike-anim 6s ease infinite; } @keyframes bike-anim { 0% { transform: translateX(-1300px) } 50% { transform: translateX(0); animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); } 100% { transform: translateX(1300px) } } #rucksack { animation: ruck-anim 3s linear infinite; transform-origin: top; transform-box: fill-box; } @keyframes ruck-anim { 50% { transform: rotate(5deg) } } .page-404 .circle { animation: circle-anim ease infinite; transform-origin: center; transform-box: fill-box; perspective: 0px; } .circle.c1 { animation-duration: 2s } .circle.c2 { animation-duration: 3s } .circle.c3 { animation-duration: 1s } .circle.c4 { animation-duration: 1s } .circle.c5 { animation-duration: 2s } .circle.c6 { animation-duration: 3s } @keyframes circle-anim { 50% { transform: scale(.2) rotateX(360deg) rotateY(360deg) } } .four, #ou { animation: four-anim cubic-bezier(0.39, 0.575, 0.565, 1) infinite; } .four.a { transform-origin: bottom left; animation-duration: 3s; transform-box: fill-box; } .four.b { transform-origin: bottom right; animation-duration: 3s; transform-box: fill-box; } #ou { animation-duration: 6s; transform-origin: center; transform-box: fill-box; } @keyframes four-anim { 50% { transform: scale(.98) } }