/** Shopify CDN: Minification failed Line 778:8 All "@import" rules must come first **/ /* Extracted Inline Styles */ /* Typography (heading) */ /* Typography (body) */ :root { /** * --------------------------------------------------------------------- * SPACING VARIABLES * * We are using a spacing inspired from frameworks like Tailwind CSS. * --------------------------------------------------------------------- */ --spacing-0-5: 0.125rem; /* 2px */ --spacing-1: 0.25rem; /* 4px */ --spacing-1-5: 0.375rem; /* 6px */ --spacing-2: 0.5rem; /* 8px */ --spacing-2-5: 0.625rem; /* 10px */ --spacing-3: 0.75rem; /* 12px */ --spacing-3-5: 0.875rem; /* 14px */ --spacing-4: 1rem; /* 16px */ --spacing-4-5: 1.125rem; /* 18px */ --spacing-5: 1.25rem; /* 20px */ --spacing-5-5: 1.375rem; /* 22px */ --spacing-6: 1.5rem; /* 24px */ --spacing-6-5: 1.625rem; /* 26px */ --spacing-7: 1.75rem; /* 28px */ --spacing-7-5: 1.875rem; /* 30px */ --spacing-8: 2rem; /* 32px */ --spacing-8-5: 2.125rem; /* 34px */ --spacing-9: 2.25rem; /* 36px */ --spacing-9-5: 2.375rem; /* 38px */ --spacing-10: 2.5rem; /* 40px */ --spacing-11: 2.75rem; /* 44px */ --spacing-12: 3rem; /* 48px */ --spacing-14: 3.5rem; /* 56px */ --spacing-16: 4rem; /* 64px */ --spacing-18: 4.5rem; /* 72px */ --spacing-20: 5rem; /* 80px */ --spacing-24: 6rem; /* 96px */ --spacing-28: 7rem; /* 112px */ --spacing-32: 8rem; /* 128px */ --spacing-36: 9rem; /* 144px */ --spacing-40: 10rem; /* 160px */ --spacing-44: 11rem; /* 176px */ --spacing-48: 12rem; /* 192px */ --spacing-52: 13rem; /* 208px */ --spacing-56: 14rem; /* 224px */ --spacing-60: 15rem; /* 240px */ --spacing-64: 16rem; /* 256px */ --spacing-72: 18rem; /* 288px */ --spacing-80: 20rem; /* 320px */ --spacing-96: 24rem; /* 384px */ /* Container */ --container-max-width: 1600px; --container-narrow-max-width: 1350px; --container-gutter: var(--spacing-5); --section-outer-spacing-block: var(--spacing-10); --section-inner-max-spacing-block: var(--spacing-9); --section-inner-spacing-inline: var(--container-gutter); --section-stack-spacing-block: var(--spacing-8); /* Grid gutter */ --grid-gutter: var(--spacing-5); /* Product list settings */ --product-list-row-gap: var(--spacing-8); --product-list-column-gap: var(--grid-gutter); /* Form settings */ --input-gap: var(--spacing-2); --input-height: 2.625rem; --input-padding-inline: var(--spacing-4); /* Other sizes */ --sticky-area-height: calc(var(--sticky-announcement-bar-enabled, 0) * var(--announcement-bar-height, 0px) + var(--sticky-header-enabled, 0) * var(--header-height, 0px)); /* RTL support */ --transform-logical-flip: 1; --transform-origin-start: left; --transform-origin-end: right; /** * --------------------------------------------------------------------- * TYPOGRAPHY * --------------------------------------------------------------------- */ /* Font properties */ --heading-font-family: Helvetica, Arial, sans-serif; --heading-font-weight: 700; --heading-font-style: normal; --heading-text-transform: normal; --heading-letter-spacing: -0.02em; --text-font-family: Helvetica, Arial, sans-serif; --text-font-weight: 400; --text-font-style: normal; --text-letter-spacing: 0.0em; /* Font sizes */ --text-h0: 3rem; --text-h1: 2.5rem; --text-h2: 2rem; --text-h3: 1.5rem; --text-h4: 1.375rem; --text-h5: 1.125rem; --text-h6: 1rem; --text-xs: 0.6875rem; --text-sm: 0.75rem; --text-base: 0.875rem; --text-lg: 1.125rem; /** * --------------------------------------------------------------------- * COLORS * --------------------------------------------------------------------- */ /* Color settings */ --accent: 26 26 26; --text-primary: 26 26 26; --background-primary: 255 255 255; --dialog-background: 255 255 255; --border-color: var(--text-color, var(--text-primary)) / 0.12; /* Button colors */ --button-background-primary: 26 26 26; --button-text-primary: 255 255 255; --button-background-secondary: 240 196 23; --button-text-secondary: 26 26 26; /* Status colors */ --success-background: 224 244 232; --success-text: 0 163 65; --warning-background: 255 246 233; --warning-text: 255 183 74; --error-background: 254 231 231; --error-text: 248 58 58; /* Product colors */ --on-sale-text: 216 76 79; --on-sale-badge-background: 216 76 79; --on-sale-badge-text: 255 255 255; --sold-out-badge-background: 0 0 0; --sold-out-badge-text: 255 255 255; --primary-badge-background: 128 60 238; --primary-badge-text: 255 255 255; --star-color: 255 183 74; --product-card-background: 255 255 255; --product-card-text: 0 0 0; /* Header colors */ --header-background: 255 255 255; --header-text: 0 0 0; /* Footer colors */ --footer-background: 255 255 255; --footer-text: 26 26 26; /* Rounded variables (used for border radius) */ --rounded-xs: 0.25rem; --rounded-sm: 0.375rem; --rounded: 0.75rem; --rounded-lg: 1.5rem; --rounded-full: 9999px; --rounded-button: 0.0rem; --rounded-input: 0.5rem; /* Box shadow */ --shadow-sm: 0 2px 8px rgb(var(--text-primary) / 0.1); --shadow: 0 5px 15px rgb(var(--text-primary) / 0.1); --shadow-md: 0 5px 30px rgb(var(--text-primary) / 0.1); --shadow-block: 0px 18px 50px rgb(var(--text-primary) / 0.1); /** * --------------------------------------------------------------------- * OTHER * --------------------------------------------------------------------- */ --stagger-products-reveal-opacity: 0; --cursor-close-svg-url: url(//themodprojects.com/cdn/shop/t/10/assets/cursor-close.svg?v=147174565022153725511757742182); --cursor-zoom-in-svg-url: url(//themodprojects.com/cdn/shop/t/10/assets/cursor-zoom-in.svg?v=154953035094101115921757742182); --cursor-zoom-out-svg-url: url(//themodprojects.com/cdn/shop/t/10/assets/cursor-zoom-out.svg?v=16155520337305705181757742182); --checkmark-svg-url: url(//themodprojects.com/cdn/shop/t/10/assets/checkmark.svg?v=77552481021870063511757742182); } [dir="rtl"]:root { /* RTL support */ --transform-logical-flip: -1; --transform-origin-start: right; --transform-origin-end: left; } @media screen and (min-width: 700px) { :root { /* Typography (font size) */ --text-h0: 4rem; --text-h1: 3rem; --text-h2: 2.5rem; --text-h3: 2rem; --text-h4: 1.625rem; --text-h5: 1.25rem; --text-h6: 1.125rem; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1.0rem; --text-lg: 1.25rem; /* Spacing */ --container-gutter: 2rem; --section-outer-spacing-block: var(--spacing-14); --section-inner-max-spacing-block: var(--spacing-10); --section-inner-spacing-inline: var(--spacing-12); --section-stack-spacing-block: var(--spacing-12); /* Grid gutter */ --grid-gutter: var(--spacing-6); /* Product list settings */ --product-list-row-gap: var(--spacing-12); /* Form settings */ --input-gap: 1rem; --input-height: 3.125rem; --input-padding-inline: var(--spacing-5); } } @media screen and (min-width: 1000px) { :root { /* Spacing settings */ --container-gutter: var(--spacing-12); --section-outer-spacing-block: var(--spacing-16); --section-inner-max-spacing-block: var(--spacing-14); --section-inner-spacing-inline: var(--spacing-16); --section-stack-spacing-block: var(--spacing-12); } } @media screen and (min-width: 1150px) { :root { /* Spacing settings */ --container-gutter: var(--spacing-12); --section-outer-spacing-block: var(--spacing-16); --section-inner-max-spacing-block: var(--spacing-14); --section-inner-spacing-inline: var(--spacing-16); --section-stack-spacing-block: var(--spacing-12); } } @media screen and (min-width: 1400px) { :root { /* Typography (font size) */ --text-h0: 5rem; --text-h1: 3.75rem; --text-h2: 3rem; --text-h3: 2.25rem; --text-h4: 2rem; --text-h5: 1.5rem; --text-h6: 1.25rem; --section-outer-spacing-block: var(--spacing-20); --section-inner-max-spacing-block: var(--spacing-16); --section-inner-spacing-inline: var(--spacing-18); } } @media screen and (min-width: 1600px) { :root { --section-outer-spacing-block: var(--spacing-20); --section-inner-max-spacing-block: var(--spacing-18); --section-inner-spacing-inline: var(--spacing-20); } } /** * --------------------------------------------------------------------- * LIQUID DEPENDANT CSS * * Our main CSS is Liquid free, but some very specific features depend on * theme settings, so we have them here * --------------------------------------------------------------------- */ @media screen and (pointer: fine) { .button:not([disabled]):hover, .btn:not([disabled]):hover, .shopify-payment-button__button--unbranded:not([disabled]):hover { --button-background-opacity: 0.85; } .button--subdued:not([disabled]):hover { --button-background: var(--text-color) / .05 !important; } } #shopify-buyer-consent { margin-top: 1em; display: inline-block; width: 100%; } #shopify-buyer-consent.hidden { display: none; } #shopify-subscription-policy-button { background: none; border: none; padding: 0; text-decoration: underline; font-size: inherit; cursor: pointer; } #shopify-subscription-policy-button::before { box-shadow: none; } @font-face { font-family: "Helvetica Medium"; src: url('https://cdn.shopify.com/s/files/1/0744/9670/4779/files/Helvetica-Medium.woff2?v=1735339667') format("woff2"); } @font-face { font-family: "ModprojectBody"; src: url('https://cdn.shopify.com/s/files/1/0673/0137/6160/files/HelveticaNowDisplay-Regular_1.ttf?v=1757769445'); font-display: swap; } @font-face { font-family: "ModprojectTitle"; src: url('https://cdn.shopify.com/s/files/1/0673/0137/6160/files/HelveticaNowDisplay-Regular_1.ttf?v=1757769445'); font-display: swap; } @font-face { font-family: "ModprojectBold"; src: url('https://cdn.shopify.com/s/files/1/0673/0137/6160/files/HelveticaNowDisplay-Bold.ttf?v=1757769436'); font-display: swap; } body { font-family: ModprojectBody !important; } .heading, .h0, .h1, .h2, .h3, .h4, .h5, .h6, .prose :is(h1, h2, h3, h4, h5, h6) { font-family: ModprojectBold !important; line-height: 1.1 !important; } b, strong { font-family: ModprojectBold !important; font-weight: bold !important; } .h2, .prose h2:not(.h0, .h1, .h2, .h3, .h4, .h5, .h6) { font-family: ModprojectBold !important; line-height: 1.2 !important; } .jdgm-xx { left: 0 } :root { --jdgm-primary-color: #000; --jdgm-secondary-color: rgba(0, 0, 0, 0.1); --jdgm-star-color: #000; --jdgm-write-review-text-color: white; --jdgm-write-review-bg-color: #000000; --jdgm-paginate-color: #000; --jdgm-border-radius: 0; --jdgm-reviewer-name-color: #000000 } .jdgm-histogram__bar-content { background-color: #000 } .jdgm-rev[data-verified-buyer=true] .jdgm-rev__icon.jdgm-rev__icon:after, .jdgm-rev__buyer-badge.jdgm-rev__buyer-badge { color: white; background-color: #000 } .jdgm-review-widget--small .jdgm-gallery.jdgm-gallery .jdgm-gallery__thumbnail-link:nth-child(8) .jdgm-gallery__thumbnail-wrapper.jdgm-gallery__thumbnail-wrapper:before { content: "See more" } @media only screen and (min-width: 768px) { .jdgm-gallery.jdgm-gallery .jdgm-gallery__thumbnail-link:nth-child(8) .jdgm-gallery__thumbnail-wrapper.jdgm-gallery__thumbnail-wrapper:before { content: "See more" } } .jdgm-prev-badge[data-average-rating='0.00'] { display: none !important } .jdgm-author-all-initials { display: none !important } .jdgm-author-last-initial { display: none !important } .jdgm-rev-widg__title { visibility: hidden } .jdgm-rev-widg__summary-text { visibility: hidden } .jdgm-prev-badge__text { visibility: hidden } .jdgm-rev__prod-link-prefix:before { content: 'about' } .jdgm-rev__variant-label:before { content: 'Variant: ' } .jdgm-rev__out-of-store-text:before { content: '(out of store)' } @media only screen and (min-width: 768px) { .jdgm-rev__pics .jdgm-rev_all-rev-page-picture-separator, .jdgm-rev__pics .jdgm-rev__product-picture { display: none } } @media only screen and (max-width: 768px) { .jdgm-rev__pics .jdgm-rev_all-rev-page-picture-separator, .jdgm-rev__pics .jdgm-rev__product-picture { display: none } } .jdgm-preview-badge[data-template="product"] { display: none !important } .jdgm-preview-badge[data-template="collection"] { display: none !important } .jdgm-preview-badge[data-template="index"] { display: none !important } .jdgm-review-widget[data-from-snippet="true"] { display: none !important } .jdgm-verified-count-badget[data-from-snippet="true"] { display: none !important } .jdgm-carousel-wrapper[data-from-snippet="true"] { display: none !important } .jdgm-all-reviews-text[data-from-snippet="true"] { display: none !important } .jdgm-medals-section[data-from-snippet="true"] { display: none !important } .jdgm-ugc-media-wrapper[data-from-snippet="true"] { display: none !important } .jdgm-rev__transparency-badge[data-badge-type="review_collected_via_store_invitation"] { display: none !important } .jdgm-rev__transparency-badge[data-badge-type="review_collected_from_another_provider"] { display: none !important } .jdgm-rev__transparency-badge[data-badge-type="review_collected_from_store_visitor"] { display: none !important } .jdgm-rev__transparency-badge[data-badge-type="review_written_in_etsy"] { display: none !important } .jdgm-rev__transparency-badge[data-badge-type="review_written_in_google_business"] { display: none !important } .jdgm-rev__transparency-badge[data-badge-type="review_written_in_shop_app"] { display: none !important } .jdgm-rev__transparency-badge[data-badge-type="review_earned_for_future_purchase"] { display: none !important } .jdgm-review-snippet-widget .jdgm-rev-snippet-widget__cards-container .jdgm-rev-snippet-card { border-radius: 8px; background: #fff } .jdgm-review-snippet-widget .jdgm-rev-snippet-widget__cards-container .jdgm-rev-snippet-card__rev-rating .jdgm-star { color: #108474 } .jdgm-review-snippet-widget .jdgm-rev-snippet-widget__prev-btn, .jdgm-review-snippet-widget .jdgm-rev-snippet-widget__next-btn { border-radius: 50%; background: #fff } .jdgm-review-snippet-widget .jdgm-rev-snippet-widget__prev-btn>svg, .jdgm-review-snippet-widget .jdgm-rev-snippet-widget__next-btn>svg { fill: #000 } .jdgm-full-rev-modal.rev-snippet-widget .jm-mfp-container .jm-mfp-content, .jdgm-full-rev-modal.rev-snippet-widget .jm-mfp-container .jdgm-full-rev__icon, .jdgm-full-rev-modal.rev-snippet-widget .jm-mfp-container .jdgm-full-rev__pic-img, .jdgm-full-rev-modal.rev-snippet-widget .jm-mfp-container .jdgm-full-rev__reply { border-radius: 8px } .jdgm-full-rev-modal.rev-snippet-widget .jm-mfp-container .jdgm-full-rev[data-verified-buyer="true"] .jdgm-full-rev__icon::after { border-radius: 8px } .jdgm-full-rev-modal.rev-snippet-widget .jm-mfp-container .jdgm-full-rev .jdgm-rev__buyer-badge { border-radius: calc(8px / 2) } .jdgm-full-rev-modal.rev-snippet-widget .jm-mfp-container .jdgm-full-rev .jdgm-full-rev__replier::before { content: 'The Mod Projects' } .jdgm-full-rev-modal.rev-snippet-widget .jm-mfp-container .jdgm-full-rev .jdgm-full-rev__product-button { border-radius: calc(8px * 6) } @-webkit-keyframes jdgm-spin { 0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg) } 100% { -webkit-transform: rotate(359deg); -ms-transform: rotate(359deg); transform: rotate(359deg) } } @keyframes jdgm-spin { 0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg) } 100% { -webkit-transform: rotate(359deg); -ms-transform: rotate(359deg); transform: rotate(359deg) } } @font-face { font-family: 'JudgemeStar'; src: url("data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAScAA0AAAAABrAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAEgAAAABoAAAAcbyQ+3kdERUYAAARgAAAAHgAAACAAMwAGT1MvMgAAAZgAAABGAAAAVi+vS9xjbWFwAAAB8AAAAEAAAAFKwBMjvmdhc3AAAARYAAAACAAAAAj//wADZ2x5ZgAAAkAAAAEJAAABdH33LXtoZWFkAAABMAAAAC0AAAA2BroQKWhoZWEAAAFgAAAAHAAAACQD5QHQaG10eAAAAeAAAAAPAAAAFAYAAABsb2NhAAACMAAAAA4AAAAOAO4AeG1heHAAAAF8AAAAHAAAACAASgAvbmFtZQAAA0wAAADeAAABkorWfVZwb3N0AAAELAAAACkAAABEp3ubLXgBY2BkYADhPPP4OfH8Nl8ZuJkYQODS2fRrCPr/aSYGxq1ALgcDWBoAO60LkwAAAHgBY2BkYGDc+v80gx4TAwgASaAICmABAFB+Arl4AWNgZGBgYGPQYWBiAAIwyQgWc2AAAwAHVQB6eAFjYGRiYJzAwMrAwejDmMbAwOAOpb8ySDK0MDAwMbByMsCBAAMCBKS5pjA4PGB4wMR44P8BBj3GrQymQGFGkBwAjtgK/gAAeAFjYoAAEA1jAwAAZAAHAHgB3crBCcAwDEPRZydkih567CDdf4ZskmLwFBV8xBfCaC4BXkOUmx4sU0h2ngNb9V0vQCxaRKIAevT7fGWuBrEAAAAAAAAAAAA0AHgAugAAeAF9z79Kw1AUx/FzTm7un6QmJtwmQ5Bg1abgEGr/BAqlU6Gju+Cgg1MkQ/sA7Vj7BOnmO/gUvo2Lo14NqIO6/IazfD8HEODtmQCfoANwNsyp2/GJt3WKQrd1NLiYYWx2PBqOsmJMEOznPOTzfSCrhAtbbLdmeFLJV9eKd63WLrZcIcuaEVdssWCKM6pLCfTVOYbz/0pNSMSZKLIZpvh78sAUH6PlMrreTCabP9r+Z/puPZ2ur/RqpQHgh+MIegCnXeM4MRAPjYN//5tj4ZtTjkFqEdmeMShlEJ7tVAly2TAkx6R68Fl4E/aVvn8JqHFQ4JS1434gXKcuL31dDhzs3YbsEOAd/IU88gAAAHgBfY4xTgMxEEVfkk0AgRCioKFxQYd2ZRtpixxgRU2RfhU5q5VWseQ4JdfgAJyBlmNwAM7ABRhZQ0ORwp7nr+eZAa54YwYg9zm3ynPOeFRe8MCrciXOh/KSS76UV5L/iDmrLiS5AeU519wrL3jmSbkS5115yR2fyivJv9kx0ZMZ2RLZw27q87iNQi8EBo5FSPIMw3HqBboi5lKTGAGDp8FKXWP+t9TU01Lj5His1Ba6uM9dTEMwvrFmbf5GC/q2drW3ruXUhhsCiQOjznFlCzYhHUZp4xp76vsvQh89CQAAeAFjYGJABowM6IANLMrEyMTIzMjCXpyRWJBqZshWXJJYBKOMAFHFBucAAAAAAAAB//8AAngBY2BkYGDgA2IJBhBgAvKZGViBJAuYxwAABJsAOgAAeAFjYGBgZACCk535hiD60tn0azAaAEqpB6wAAA==") format("woff"); font-weight: normal; font-style: normal } .jdgm-star { font-family: 'JudgemeStar'; display: inline !important; text-decoration: none !important; padding: 0 4px 0 0 !important; margin: 0 !important; font-weight: bold; opacity: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale } .jdgm-star:hover { opacity: 1 } .jdgm-star:last-of-type { padding: 0 !important } .jdgm-star.jdgm--on:before { content: "\e000" } .jdgm-star.jdgm--off:before { content: "\e001" } .jdgm-star.jdgm--half:before { content: "\e002" } .jdgm-widget * { margin: 0; line-height: 1.4; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-overflow-scrolling: touch } .jdgm-hidden { display: none !important; visibility: hidden !important } .jdgm-temp-hidden { display: none } .jdgm-spinner { width: 40px; height: 40px; margin: auto; border-radius: 50%; border-top: 2px solid #eee; border-right: 2px solid #eee; border-bottom: 2px solid #eee; border-left: 2px solid #ccc; -webkit-animation: jdgm-spin 0.8s infinite linear; animation: jdgm-spin 0.8s infinite linear } .jdgm-spinner:empty { display: block } .jdgm-prev-badge { display: block !important } .kaching-bundles__block { display: none; } .kaching-bundles-sticky-atc { display: none; } @font-face { font-family: 'GTStandard-M'; src: url('https://cdn.shopify.com/shop-assets/static_uploads/shoplift/GTStandard-MRegular.woff2') format('woff2'); font-style: normal; font-weight: 450; font-display: swap; } @font-face { font-family: 'GTStandard-M'; src: url('https://cdn.shopify.com/shop-assets/static_uploads/shoplift/GTStandard-MMedium.woff2') format('woff2'); font-style: normal; font-weight: 500; font-display: swap; } @font-face { font-family: 'GTStandard-M'; src: url('https://cdn.shopify.com/shop-assets/static_uploads/shoplift/GTStandard-MSemibold.woff2') format('woff2'); font-style: normal; font-weight: 600; font-display: swap; } @import 'https://fonts.googleapis.com/css2?family=Caveat:ital,wght@0,400&family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900&display=swap'; [hidden] { display: none !important; } :root { --sticky-announcement-bar-enabled: 0; } .header__wrapper { background: linear-gradient(0deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1) 100%) !important; } :root { --sticky-header-enabled: 1; } #shopify-section-sections--18545312170144__header { --header-grid-template: "main-nav logo secondary-nav" / minmax(0, 1fr) auto minmax(0, 1fr); --header-padding-block: var(--spacing-4-5); --header-background-opacity: 1.0; --header-background-blur-radius: 0px; --header-transparent-text-color: 255 255 255; --header-logo-width: 110px; --header-logo-height: 42px; position: sticky; top: 0; z-index: 10; } .shopify-section--announcement-bar~#shopify-section-sections--18545312170144__header { top: calc(var(--sticky-announcement-bar-enabled, 0) * var(--announcement-bar-height, 0px)); } @media screen and (min-width: 700px) { #shopify-section-sections--18545312170144__header { --header-logo-width: 120px; --header-logo-height: 45px; --header-padding-block: var(--spacing-8-5); } } [hidden] { display: none !important; } [hidden] { display: none !important; } #shopify-section-template--18545316233376__image_with_text_overlay_gG89fd { --section-outer-spacing-block: 0; --content-over-media-overlay: 0 0 0 / 0.0; } #shopify-section-template--18545316233376__main { --section-background-hash: 0; } #shopify-section-template--18545316233376__main+* { --previous-section-background-hash: 0; } #shopify-section-template--18545316233376__main { --product-list-gap: var(--product-list-row-gap) var(--spacing-2); --product-list-items-per-row: 2; --product-list-grid: auto-flow dense / repeat(var(--product-list-items-per-row), minmax(0, 1fr)); --product-list-promo-grid-column: span 2; --content-over-media-gap: var(--spacing-8); } @media screen and (min-width: 700px) { #shopify-section-template--18545316233376__main { --product-list-gap: var(--product-list-row-gap) var(--product-list-column-gap); --product-list-items-per-row: 2; --product-list-promo-grid-column: span 1; } } @media screen and (min-width: 1000px) { #shopify-section-template--18545316233376__main { --product-list-items-per-row: 3; --product-list-promo-grid-column: span 2; } } @media screen and (min-width: 1200px) { #shopify-section-template--18545316233376__main { --product-list-items-per-row: 4; } } @media screen and (min-width: 1400px) { #shopify-section-template--18545316233376__main { --product-list-items-per-row: 4; } } [hidden] { display: none !important; } .m-divider-sections--18545311908000__m_divider_nzMLwx { border-bottom: 1px solid #f0f0f0; margin: 0px 0 0px 0; } @media screen and (min-width: 1000px) { #shopify-section-sections--18545311908000__footer { --footer-block-list-gap: var(--spacing-10); --footer-block-list-justify-content: space-between; } } #kins_root { display: block !important; } * { font-family: Rubik, sans-serif !important; } /* rubik-300normal */ @font-face { font-family: 'Rubik'; font-style: normal; font-display: swap; font-weight: 300; src: local('Rubik Light'), local('Rubik-Light'), url('chrome-extension://hjbfbllnfhppnhjdhhbmjabikmkfekgf/fonts/9d2ccd264dc61b9540199896728594ab.ttf') format('ttf'); } /* rubik-300italic */ @font-face { font-family: 'Rubik'; font-style: italic; font-display: swap; font-weight: 300; src: local('Rubik Light italic'), local('Rubik-Lightitalic'), url('chrome-extension://hjbfbllnfhppnhjdhhbmjabikmkfekgf/fonts/eddc6610fb077c6d999f1661fc721078.ttf') format('ttf'); } /* rubik-400normal */ @font-face { font-family: 'Rubik'; font-style: normal; font-display: swap; font-weight: 400; src: local('Rubik Regular'), local('Rubik-Regular'), url('chrome-extension://hjbfbllnfhppnhjdhhbmjabikmkfekgf/fonts/55fa11cdc8b9a3ee842fbb554733127c.ttf') format('ttf'); } /* rubik-400italic */ @font-face { font-family: 'Rubik'; font-style: italic; font-display: swap; font-weight: 400; src: local('Rubik Regular italic'), local('Rubik-Regularitalic'), url('chrome-extension://hjbfbllnfhppnhjdhhbmjabikmkfekgf/fonts/dd425b2765df0b8534886a866b864377.ttf') format('ttf'); } /* rubik-500normal */ @font-face { font-family: 'Rubik'; font-style: normal; font-display: swap; font-weight: 500; src: local('Rubik Medium'), local('Rubik-Medium'), url('chrome-extension://hjbfbllnfhppnhjdhhbmjabikmkfekgf/fonts/0e121b4fa4d6e9bc5c69eabb74d853dc.ttf') format('ttf'); } /* rubik-500italic */ @font-face { font-family: 'Rubik'; font-style: italic; font-display: swap; font-weight: 500; src: local('Rubik Medium italic'), local('Rubik-Mediumitalic'), url('chrome-extension://hjbfbllnfhppnhjdhhbmjabikmkfekgf/fonts/be80ed5dcc329afda7864601618e16a8.ttf') format('woff2'); } /* rubik-600normal */ @font-face { font-family: 'Rubik'; font-style: normal; font-display: swap; font-weight: 500; src: local('Rubik SemiBold'), local('Rubik-SemiBold'), url('chrome-extension://hjbfbllnfhppnhjdhhbmjabikmkfekgf/fonts/869208702057daef053d3faf0a6618fe.ttf') format('ttf'); } /* rubik-600italic */ @font-face { font-family: 'Rubik'; font-style: italic; font-display: swap; font-weight: 500; src: local('Rubik SemiBold italic'), local('Rubik-SemiBolditalic'), url('chrome-extension://hjbfbllnfhppnhjdhhbmjabikmkfekgf/fonts/3dbd4a6bacf93f30b48349b91d2f4323.ttf') format('ttf'); } /* rubik-700normal */ @font-face { font-family: 'Rubik'; font-style: normal; font-display: swap; font-weight: 700; src: local('Rubik Bold'), local('Rubik-Bold'), url('chrome-extension://hjbfbllnfhppnhjdhhbmjabikmkfekgf/fonts/c934eb22c2c69992b34c85801f5dbc38.ttf') format('ttf'); } /* rubik-700italic */ @font-face { font-family: 'Rubik'; font-style: italic; font-display: swap; font-weight: 700; src: local('Rubik Bold italic'), local('Rubik-Bolditalic'), url('chrome-extension://hjbfbllnfhppnhjdhhbmjabikmkfekgf/fonts/8aa61adc9e2d6f955dfebf308dbb5a02.ttf') format('ttf'); } /* rubik-800normal */ @font-face { font-family: 'Rubik'; font-style: normal; font-display: swap; font-weight: 800; src: local('Rubik ExtraBold'), local('Rubik-ExtraBold'), url('chrome-extension://hjbfbllnfhppnhjdhhbmjabikmkfekgf/fonts/c934eb22c2c69992b34c85801f5dbc38.ttf') format('ttf'); } /* rubik-800italic */ @font-face { font-family: 'Rubik'; font-style: italic; font-display: swap; font-weight: 800; src: local('Rubik ExtraBold italic'), local('Rubik-ExtraBolditalic'), url('chrome-extension://hjbfbllnfhppnhjdhhbmjabikmkfekgf/fonts/8aa61adc9e2d6f955dfebf308dbb5a02.ttf') format('ttf'); } /* rubik-900normal */ @font-face { font-family: 'Rubik'; font-style: normal; font-display: swap; font-weight: 900; src: local('Rubik Black'), local('Rubik-Black'), url('chrome-extension://hjbfbllnfhppnhjdhhbmjabikmkfekgf/fonts/a41b3ae4e6720095094692f7e9dd4a6b.ttf') format('ttf'); } /* rubik-900italic */ @font-face { font-family: 'Rubik'; font-style: italic; font-display: swap; font-weight: 900; src: local('Rubik Black italic'), local('Rubik-Blackitalic'), url('chrome-extension://hjbfbllnfhppnhjdhhbmjabikmkfekgf/fonts/acfb29dc2fb1e14bc1a05c700790f7ce.ttf') format('ttf'); } .cs-main-container { position: relative; display: flex; flex-direction: row; height: 100%; overflow: auto; border: solid 1px #d1dbe3; box-sizing: border-box; color: rgba(0, 0, 0, .87); background-color: #fff; font-size: 1rem } .cs-main-container>.cs-conversation-list { order: 0; height: 100%; flex-basis: 300px; border-top: solid 0px #d1dbe3; border-right: solid 1px #d1dbe3; border-bottom: solid 0px #d1dbe3; border-left: solid 0px #d1dbe3; box-shadow: 2px 0 5px -2px rgba(0, 0, 0, .38); z-index: 2 } .cs-main-container>.cs-sidebar.cs-sidebar--left { order: 0; height: 100%; max-width: 320px; flex-basis: 35%; border-right: solid 1px #d1dbe3; z-index: 2 } .cs-main-container>.cs-sidebar.cs-sidebar--right { flex-basis: 25%; min-width: 150px; max-width: 320px; border-top: solid 0px #d1dbe3; border-right: solid 0px #d1dbe3; border-bottom: solid 0px #d1dbe3; border-left: solid 1px #d1dbe3 } .cs-main-container>.cs-sidebar.cs-sidebar--left .cs-search { margin: .5em } .cs-main-container .cs-chat-container { order: 1; z-index: 1; flex-grow: 1; flex-basis: 65%; border-right: solid 0px #d1dbe3 } .cs-main-container .cs-sidebar { order: 2; height: 100%; z-index: 3 } .cs-main-container .cs-sidebar .cs-expansion-panel { border-left: 0; border-top: 0; border-right: 0 } .cs-main-container .cs-sidebar .cs-expansion-panel:nth-last-child(3) { border-bottom: 0 } .cs-main-container .cs-conversation-header { z-index: 1 } .cs-main-container--responsive .cs-chat-container .cs-conversation-header .cs-conversation-header__back { display: none } .cs-main-container--responsive .cs-chat-container .cs-conversation-header .cs-conversation-header__actions .cs-button--info { display: none } @media(max-width: 768px) { .cs-main-container--responsive { min-width: calc(1.6em + 40px + 180px) } .cs-main-container--responsive .cs-search { display: none } .cs-main-container--responsive>.cs-sidebar.cs-sidebar--left { flex-basis: calc(1.6em + 40px); min-width: calc(1.6em + 40px) } .cs-main-container--responsive>.cs-sidebar.cs-sidebar--right { display: none } .cs-main-container--responsive>.cs-conversation-list { flex-basis: calc(1.6em + 40px) } .cs-main-container--responsive .cs-conversation-list .cs-conversation>.cs-avatar, .cs-main-container--responsive .cs-sidebar .cs-conversation-list .cs-conversation>.cs-avatar { margin-right: 0 } .cs-main-container--responsive .cs-conversation-list .cs-conversation__content, .cs-main-container--responsive .cs-sidebar .cs-conversation-list .cs-conversation__content { display: none } .cs-main-container--responsive .cs-conversation-list .cs-conversation__operations, .cs-main-container--responsive .cs-sidebar .cs-conversation-list .cs-conversation__operations { display: none } .cs-main-container--responsive .cs-conversation-list .cs-conversation__last-activity-time, .cs-main-container--responsive .cs-sidebar .cs-conversation-list .cs-conversation__last-activity-time { display: none } .cs-main-container--responsive .cs-conversation-list .cs-conversation__unread-dot, .cs-main-container--responsive .cs-sidebar .cs-conversation-list .cs-conversation__unread-dot { position: absolute; top: .3em; right: .3em; margin-right: 0 } .cs-main-container--responsive .cs-conversation-header .cs-conversation-header__actions .cs-button--info { display: flex } } @media(max-width: 576px) { .cs-main-container--responsive { min-width: auto } .cs-main-container--responsive>.cs-sidebar.cs-sidebar--left { display: none } .cs-main-container--responsive .cs-chat-container .cs-conversation-header .cs-conversation-header__back { display: flex } } .cs-message { box-sizing: border-box; font-size: 1em; font-family: Helvetica Neue, Segoe UI, Helvetica, Arial, sans-serif; color: rgba(0, 0, 0, .87); display: flex; flex-direction: row; padding: 0; background-color: transparent; overflow: hidden; border-radius: 0 } .cs-message:only-child { margin: .2em 0 0 0 } .cs-message:not(:only-child) { margin: .2em 0 0 0 } .cs-message__avatar { box-sizing: border-box; margin: 0 8px 0 0; display: flex; flex-direction: column; justify-content: flex-end; width: 42px } .cs-message__content-wrapper { box-sizing: border-box; display: flex; flex-direction: column } .cs-message__header { box-sizing: border-box; color: rgba(77, 77, 77, .87); background-color: transparent; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; font-size: .8em; margin: 0 .2em .1em .2em } .cs-message__header .cs-message__sender-name { box-sizing: border-box; color: rgba(77, 77, 77, .87); background-color: transparent } .cs-message__header .cs-message__sent-time { box-sizing: border-box; color: rgba(77, 77, 77, .87); background-color: transparent; margin-left: auto; padding-left: .8em } .cs-message__footer { box-sizing: border-box; color: rgba(77, 77, 77, .87); background-color: transparent; display: flex; font-size: .8em; margin: .1em .2em 0 .2em } .cs-message__footer .cs-message__sender-name { box-sizing: border-box; color: rgba(77, 77, 77, .87); background-color: transparent } .cs-message__footer .cs-message__sent-time { box-sizing: border-box; color: rgba(77, 77, 77, .87); background-color: transparent; margin-left: auto; padding-left: .8em } .cs-message__content { box-sizing: border-box; color: rgba(0, 0, 0, .87); background-color: #c6e3fa; margin-top: 0; padding: .6em .9em; border-radius: .7em .7em .7em .7em; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; font-family: Helvetica Neue, Segoe UI, Helvetica, Arial, sans-serif; font-weight: normal; font-size: .91em; font-variant: normal } .cs-message--incoming { color: rgba(0, 0, 0, .87); background-color: transparent; margin-right: auto } .cs-message--incoming .cs-message__avatar { margin: 0 8px 0 0 } .cs-message--incoming .cs-message__sender-name { display: none } .cs-message--incoming .cs-message__sent-time { display: none } .cs-message--incoming .cs-message__content { color: rgba(0, 0, 0, .87); background-color: #c6e3fa; border-radius: 0 .7em .7em 0 } .cs-message--outgoing { color: rgba(0, 0, 0, .87); background-color: transparent; margin-left: auto; justify-content: flex-end } .cs-message--outgoing .cs-message__avatar { order: 1; margin: 0 0 0 8px } .cs-message--outgoing .cs-message__sender-name { display: none } .cs-message--outgoing .cs-message__sent-time { display: none } .cs-message--outgoing .cs-message__content { color: rgba(0, 0, 0, .87); background-color: #6ea9d7; border-radius: .7em 0 0 .7em } .cs-message.cs-message--incoming.cs-message--single { border-radius: 0 } .cs-message.cs-message--incoming.cs-message--single:not(:first-child) { margin-top: .4em } .cs-message.cs-message--incoming.cs-message--single .cs-message__sender-name { display: block } .cs-message.cs-message--incoming.cs-message--single .cs-message__sent-time { display: block } .cs-message.cs-message--incoming.cs-message--single .cs-message__content { border-radius: 0 .7em .7em .7em } .cs-message.cs-message--incoming.cs-message--first { border-radius: 0 0 0 0 } .cs-message.cs-message--incoming.cs-message--first:not(:first-child) { margin-top: .4em } .cs-message.cs-message--incoming.cs-message--first .cs-message__sender-name { display: block } .cs-message.cs-message--incoming.cs-message--first .cs-message__sent-time { display: block } .cs-message.cs-message--incoming.cs-message--first .cs-message__content { border-radius: 0 .7em .7em 0; background-color: #c6e3fa } .cs-message.cs-message--incoming.cs-message--last { border-radius: 0 0 0 0 } .cs-message.cs-message--incoming.cs-message--last .cs-message__sent-time { display: none } .cs-message.cs-message--incoming.cs-message--last .cs-message__content { border-radius: 0 .7em 0 .7em } .cs-message.cs-message--outgoing.cs-message--single { border-radius: 0 } .cs-message.cs-message--outgoing.cs-message--single:not(:first-child) { margin-top: .4em } .cs-message.cs-message--outgoing.cs-message--single .cs-message__sent-time { display: block } .cs-message.cs-message--outgoing.cs-message--single .cs-message__content { border-radius: .7em .7em 0 .7em } .cs-message.cs-message--outgoing.cs-message--first { border-radius: 0 0 0 0; margin-top: .4em } .cs-message.cs-message--outgoing.cs-message--first .cs-message__sent-time { display: block } .cs-message.cs-message--outgoing.cs-message--first .cs-message__content { border-radius: .7em 0 0 .7em; background-color: #6ea9d7 } .cs-message.cs-message--outgoing.cs-message--last { border-radius: 0 0 0 0 } .cs-message.cs-message--outgoing.cs-message--last .cs-message__sent-time { display: none } .cs-message.cs-message--outgoing.cs-message--last .cs-message__content { border-radius: .7em 0 .7em .7em } .cs-message--incoming.cs-message--avatar-spacer { margin-left: 50px } .cs-message--outgoing.cs-message--avatar-spacer { margin-right: 50px } .cs-message--avatar-tl .cs-message__avatar { justify-content: flex-start; order: 0; margin-right: 8px; margin-left: 0 } .cs-message--avatar-tl .cs-message__message-wrapper { order: 1 } .cs-message--avatar-tr .cs-message__avatar { justify-content: flex-start; order: 1; margin-left: 8px; margin-right: 0 } .cs-message--avatar-tr .cs-message__message-wrapper { order: 0 } .cs-message--avatar-br .cs-message__avatar { justify-content: flex-end; order: 1; margin-left: 8px; margin-right: 0 } .cs-message--avatar-br .cs-message__message-wrapper { order: 0 } .cs-message--avatar-bl .cs-message__avatar { justify-content: flex-end; order: 0; margin-right: 8px; margin-left: 0 } .cs-message--avatar-bl .cs-message__message-wrapper { order: 1 } .cs-message--avatar-cl .cs-message__avatar { justify-content: center; order: 0; margin-right: 8px; margin-left: 0 } .cs-message--avatar-cl .cs-message__message-wrapper { order: 1 } .cs-message--avatar-cr .cs-message__avatar { justify-content: center; order: 1; margin-left: 8px; margin-right: 0 } .cs-message--avatar-cr .cs-message__message-wrapper { order: 0 } .cs-message-group { box-sizing: border-box; display: flex; flex-direction: row; margin: .4em 0 0 0 } .cs-message-group__avatar { box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-end } .cs-message-group__content { box-sizing: border-box; display: flex; flex-direction: column } .cs-message-group__header { box-sizing: border-box; display: flex; font-size: .8em; font-family: Helvetica Neue, Segoe UI, Helvetica, Arial, sans-serif; color: rgba(0, 0, 0, .6); background-color: transparent; margin: 0 0 .2em 0; padding: 0 } .cs-message-group__footer { box-sizing: border-box; display: flex; font-size: .8em; font-family: Helvetica Neue, Segoe UI, Helvetica, Arial, sans-serif; color: rgba(0, 0, 0, .6); background-color: transparent; margin: .2em 0 0 0; padding: 0 } .cs-message-group__messages { box-sizing: border-box } .cs-message-group__messages .cs-message:first-child { margin-top: 0 } .cs-message-group__messages .cs-message .cs-message__content { background-color: #c6e3fa; margin-top: 0 } .cs-message-group--incoming { justify-content: flex-start } .cs-message-group--incoming .cs-message-group__avatar { margin-right: 8px; order: 0 } .cs-message-group--incoming .cs-message-group__content { order: 1 } .cs-message-group--incoming .cs-message-group__messages .cs-message:first-child .cs-message__content { border-radius: 0 .7em .7em 0 } .cs-message-group--incoming .cs-message-group__messages .cs-message .cs-message__content { border-radius: 0 .7em .7em 0; color: rgba(0, 0, 0, .87); background-color: #c6e3fa } .cs-message-group--incoming .cs-message-group__messages .cs-message:last-child .cs-message__content { border-radius: 0 .7em 0 .7em } .cs-message-group--incoming .cs-message-group__messages .cs-message:only-child .cs-message__content { border-radius: 0 .7em .7em .7em } .cs-message-group--outgoing { justify-content: flex-end; margin-left: auto } .cs-message-group--outgoing .cs-message-group__avatar { margin-left: 8px; order: 1 } .cs-message-group--outgoing .cs-message-group__content { order: 0 } .cs-message-group--outgoing .cs-message-group__messages .cs-message { justify-content: flex-end } .cs-message-group--outgoing .cs-message-group__messages .cs-message:first-child .cs-message__content { border-radius: .7em 0 0 .7em } .cs-message-group--outgoing .cs-message-group__messages .cs-message .cs-message__content { border-radius: .7em 0 0 .7em; color: rgba(0, 0, 0, .87); background-color: #6ea9d7 } .cs-message-group--outgoing .cs-message-group__messages .cs-message:last-child .cs-message__content { border-radius: .7em 0 .7em .7em } .cs-message-group--outgoing .cs-message-group__messages .cs-message:only-child .cs-message__content { border-radius: .7em .7em 0 .7em } .cs-message-group--avatar-tl .cs-message-group__avatar { justify-content: flex-start; order: 0; margin-right: 8px; margin-left: 0 } .cs-message-group--avatar-tl .cs-message-group__content { order: 1 } .cs-message-group--avatar-tr .cs-message-group__avatar { justify-content: flex-start; order: 1; margin-left: 8px; margin-right: 0 } .cs-message-group--avatar-tr .cs-message-group__content { order: 0 } .cs-message-group--avatar-bl .cs-message-group__avatar { justify-content: flex-end; order: 0; margin-right: 8px; margin-left: 0 } .cs-message-group--avatar-bl .cs-message-group__content { order: 1 } .cs-message-group--avatar-br .cs-message-group__avatar { justify-content: flex-end; order: 1; margin-left: 8px; margin-right: 0 } .cs-message-group--avatar-br .cs-message-group__content { order: 0 } .cs-message-group--avatar-cl .cs-message-group__avatar { justify-content: center; order: 0; margin-right: 8px; margin-left: 0 } .cs-message-group--avatar-cl .cs-message-group__content { order: 1 } .cs-message-group--avatar-cr .cs-message-group__avatar { justify-content: center; order: 1; margin-left: 8px; margin-right: 0 } .cs-message-group--avatar-cr .cs-message-group__content { order: 0 } .cs-message-separator { box-sizing: border-box; color: #6ea9d7; background-color: #fff; font-size: .8em; font-family: Helvetica Neue, Segoe UI, Helvetica, Arial, sans-serif; text-align: center; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center } .cs-message-separator::before, .cs-message-separator::after { box-sizing: border-box; content: ""; background-color: #6ea9d7; display: block; flex-grow: 1; height: 1px } .cs-message-separator:not(:empty)::before { margin: 0 1em 0 0 } .cs-message-separator:not(:empty)::after { margin: 0 0 0 1em } .cs-message-list { box-sizing: border-box; width: 100%; height: 100%; overflow: hidden; min-height: 1.25em; position: relative; color: rgba(0, 0, 0, .87); background-color: #fff } .cs-message-list__scroll-wrapper { box-sizing: border-box; position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; padding: 0 1.2em 0 .8em } .cs-message-list__scroll-to:first-child { box-sizing: border-box; float: left; clear: both; height: 0 } .cs-message-list__scroll-wrapper>.cs-message:nth-last-child(4) { margin-bottom: 2.65em } .cs-message-list__scroll-wrapper>.cs-message-group:nth-last-child(4) { margin-bottom: 2.65em } .cs-message-list .cs-typing-indicator { position: absolute; bottom: 0; left: 0; right: 15px; background-color: #fff; padding: .5em .5em; font-size: .9em; height: 1.25em; line-height: 1.25em } .cs-message-list__scroll-wrapper>.cs-message, .cs-message-list__scroll-wrapper>.cs-message-group { max-width: 85% } .cs-message-list .cs-message.cs-message--incoming, .cs-message-list .cs-message-group.cs-message-group--incoming { margin-right: auto } .cs-message-list .cs-message.cs-message--outgoing, .cs-message-list .cs-message-group.cs-message-group--outgoing { margin-left: auto } .cs-message-list .cs-message-separator:not(:first-child) { margin-top: 1.2em } .cs-message-list__loading-more { box-sizing: content-box; display: flex; flex-direction: row; justify-content: center; position: absolute; background-color: #fff; padding: 2px 0; top: 0; left: 0; right: 0; height: 1.2em; z-index: 1 } .cs-message-list__loading-more .cs-loader { width: 1.2em; height: 1.2em } .cs-message-list__loading-more .cs-loader::before, .cs-message-list__loading-more .cs-loader::after { width: 100%; height: 100% } .cs-message-list__loading-more--bottom { top: initial; bottom: 0 } .cs-message-list .ps__rail-y { z-index: 2 } .cs-avatar { position: relative; width: 42px; height: 42px; border-radius: 50%; box-sizing: border-box } .cs-avatar>img { box-sizing: border-box; width: 100%; height: 100%; border-radius: 50% } .cs-avatar:hover>img { filter: brightness(115%) } .cs-avatar.cs-avatar--xs { width: 16px; height: 16px; min-width: 16px; min-height: 16px } .cs-avatar.cs-avatar--sm { width: 26px; height: 26px; min-width: 26px; min-height: 26px } .cs-avatar.cs-avatar--md { width: 42px; height: 42px; min-width: 42px; min-height: 42px } .cs-avatar.cs-avatar--lg { width: 68px; height: 68px; min-width: 68px; min-height: 68px } .cs-avatar.cs-avatar--fluid { width: 100%; height: 100% } .cs-avatar.cs-avatar--fluid .cs-status { right: 5%; width: 22%; height: 22% } .cs-avatar .cs-status { box-sizing: border-box; position: absolute; right: -1px; bottom: 3% } .cs-avatar .cs-status__bullet { box-sizing: content-box; border: solid 2px #fff } .cs-avatar .cs-status--xs, .cs-avatar .cs-status--xs:not(.cs-status--named) { font-size: 1em; width: 6px; height: 6px; right: 0; bottom: 0 } .cs-avatar .cs-status--xs .cs-status__bullet, .cs-avatar .cs-status--xs:not(.cs-status--named) .cs-status__bullet { width: 4px; min-width: 4px; height: 4px } .cs-avatar .cs-status--sm, .cs-avatar .cs-status--sm:not(.cs-status--named) { font-size: 1em; width: 12px; height: 12px; right: -3px; bottom: -1px } .cs-avatar .cs-status--sm .cs-status__bullet, .cs-avatar .cs-status--sm:not(.cs-status--named) .cs-status__bullet { width: 8px; min-width: 8px; height: 8px } .cs-avatar .cs-status--md, .cs-avatar .cs-status--md:not(.cs-status--named) { font-size: 1em; width: 15px; height: 15px } .cs-avatar .cs-status--md .cs-status__bullet, .cs-avatar .cs-status--md:not(.cs-status--named) .cs-status__bullet { width: 11px; min-width: 11px; height: 11px } .cs-avatar .cs-status--lg, .cs-avatar .cs-status--lg:not(.cs-status--named) { font-size: 1em; width: 18px; height: 18px; bottom: 4% } .cs-avatar .cs-status--lg .cs-status__bullet, .cs-avatar .cs-status--lg:not(.cs-status--named) .cs-status__bullet { width: 14px; min-width: 14px; height: 14px } .cs-avatar-group { display: flex; flex-direction: row-reverse; overflow: visible; position: relative; flex-wrap: wrap; box-sizing: border-box; min-width: 40px; align-content: flex-start; justify-content: flex-end } .cs-avatar-group .cs-avatar--active { z-index: 1 } .cs-avatar-group .cs-avatar--active-on-hover:hover { z-index: 2 } .cs-avatar-group--xs { padding-left: 6.112px; padding-top: 6.112px } .cs-avatar-group--xs .cs-avatar { margin-top: -6.112px; margin-left: -6.112px; width: 16px; height: 16px; min-width: 16px; min-height: 16px; border: none; border-right: 1px solid #f2f2f2 } .cs-avatar-group--sm { padding-left: 9.932px; padding-top: 9.932px } .cs-avatar-group--sm .cs-avatar { margin-top: -9.932px; margin-left: -9.932px; width: 26px; height: 26px; min-width: 26px; min-height: 26px } .cs-avatar-group--md { padding-left: 16.044px; padding-top: 16.044px } .cs-avatar-group--md .cs-avatar { margin-top: -16.044px; margin-left: -16.044px; width: 42px; height: 42px; min-width: 42px; min-height: 42px; border: 2px solid #f2f2f2 } .cs-avatar-group--lg { padding-left: 25.976px; padding-top: 25.976px } .cs-avatar-group--lg .cs-avatar { margin-top: -25.976px; margin-left: -25.976px; width: 68px; height: 68px; min-width: 68px; min-height: 68px; border: 2px solid #f2f2f2 } .cs-message-input { display: flex; flex-direction: row; position: relative; background-color: #fff; border-top: none; border-right: none; border-bottom: none; border-left: none; box-sizing: border-box; padding: 0; overflow: visible; flex-shrink: 0 } .cs-message-input__content-editor-wrapper { box-sizing: border-box; position: relative; background-color: #c6e3fa; margin: 0; padding: .6em .9em; border-radius: .7em; flex-grow: 1 } .cs-message-input--disabled .cs-message-input__content-editor-wrapper { background-color: rgba(198, 227, 250, .38); color: rgba(0, 0, 0, .6) } .cs-message-input__content-editor-container { box-sizing: border-box; position: relative; background-color: #c6e3fa; display: flex; flex-direction: column; align-items: stretch; overflow: hidden; overflow-y: auto; font-size: .94em; line-height: 1.35em; min-height: 1.35em; max-height: 5.4em; padding: 0em 0em 0em 0em; scroll-padding: 0em } .cs-message-input--disabled .cs-message-input__content-editor-container { color: rgba(0, 0, 0, .6); background-color: transparent } .cs-message-input__content-editor { box-sizing: border-box; flex-grow: 1; background-color: #c6e3fa; font-family: Helvetica Neue, Segoe UI, Helvetica, Arial, sans-serif; outline: 0; border-top: 0 none; border-right: 0 none; border-bottom: 0 none; border-left: 0 none; overflow: visible; color: rgba(0, 0, 0, .87); overflow-wrap: anywhere; word-break: break-word } .cs-message-input--disabled .cs-message-input__content-editor { background-color: transparent; color: rgba(0, 0, 0, .6) } .cs-message-input__content-editor[data-placeholder]:empty:before { box-sizing: border-box; content: attr(data-placeholder); color: rgba(0, 0, 0, .38); display: block; cursor: text } .cs-message-input__tools { display: flex; flex-direction: row; box-sizing: border-box } .cs-message-input__tools .cs-button { font-size: 1.2em; margin-top: 0; margin-bottom: 0 } .cs-message-input__tools .cs-button--send { align-self: flex-end } .cs-message-input__tools .cs-button--attachment { align-self: flex-end } .cs-message-input__tools:first-child .cs-button:first-child { margin-left: 0 } .cs-message-input__tools:first-child .cs-button:last-child { margin-right: 0 } .cs-message-input__tools:last-child .cs-button:first-child { margin-left: 0 } .cs-message-input__tools:last-child .cs-button:last-child { margin-right: 0 } .cs-input-toolbox { box-sizing: border-box; display: flex; flex-direction: row; justify-content: flex-end; margin: 0; padding: 0 0 .4em 0 } .cs-input-toolbox .cs-button { margin: 0; padding: 0; background: none; border: none; margin: 0 .5em 0 0; font-size: 1.2em } .cs-chat-container { box-sizing: border-box; display: flex; flex-direction: column; height: 100%; min-width: 180px; color: rgba(0, 0, 0, .87); background-color: #fff } .cs-chat-container .cs-message-input { border-top: solid 1px #d1dbe3; border-right: solid 0px #d1dbe3; border-bottom: solid 0px #d1dbe3; border-left: solid 0px #d1dbe3; margin-top: auto; padding: .3em 0 .3em 0em; color: rgba(0, 0, 0, .87); background-color: #fff } .cs-chat-container .cs-message-input .cs-message-input__content-editor-wrapper:first-child { margin-left: .8em } .cs-chat-container .cs-message-input .cs-message-input__content-editor-wrapper:last-child { margin-right: .8em } .cs-chat-container .cs-input-toolbox { margin: 0; padding: 0 .8em .17em 0; color: rgba(0, 0, 0, .87); background-color: #fff } .cs-typing-indicator { box-sizing: content-box; font-size: inherit; font-family: Helvetica Neue, Segoe UI, Helvetica, Arial, sans-serif; display: flex; flex-direction: row; align-items: stretch } .cs-typing-indicator__indicator { box-sizing: inherit; background-color: transparent; display: flex; flex-direction: row; align-items: center } .cs-typing-indicator__dot { box-sizing: inherit; animation: cs-typing-indicator__typing-animation 1.5s infinite ease-in-out; border-radius: 100%; display: inline-block; height: 4px; width: 4px; background-color: #6ea9d7 } .cs-typing-indicator__dot:not(:last-child) { margin-right: 3px } .cs-typing-indicator__dot:nth-child(1) { box-sizing: inherit } .cs-typing-indicator__dot:nth-child(2) { animation-delay: 300ms } .cs-typing-indicator__dot:nth-child(3) { animation-delay: 400ms } .cs-typing-indicator__text { box-sizing: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #6ea9d7; background-color: transparent; margin: 0 0 0 .5em; -webkit-user-select: none; -moz-user-select: none; user-select: none } @keyframes cs-typing-indicator__typing-animation { 0% { transform: translateY(0px) } 28% { transform: translateY(-5px) } 44% { transform: translateY(0px) } } .cs-conversation-header { box-sizing: border-box; color: rgba(0, 0, 0, .87); background-color: #f6fbff; font-family: Helvetica Neue, Segoe UI, Helvetica, Arial, sans-serif; font-size: 1em; flex-shrink: 0; -webkit-user-select: none; -moz-user-select: none; user-select: none; display: flex; flex-direction: row; align-items: stretch; border-top: solid 0px #d1dbe3; border-right: solid 0px #d1dbe3; border-bottom: solid 1px #d1dbe3; border-left: solid 0px #d1dbe3; padding: .6em .9em } .cs-conversation-header__back { box-sizing: border-box; margin-right: .5em; display: flex; flex-direction: row; align-items: center; cursor: pointer; order: 1 } .cs-conversation-header__back button { font-size: 1.4em; padding: 0 } .cs-conversation-header__avatar { box-sizing: border-box; width: 42px; height: 42px; margin-right: 1em; order: 2 } .cs-conversation-header__avatar>.cs-avatar>.cs-status>.cs-status__bullet { border-color: #f6fbff } .cs-conversation-header__avatar .cs-avatar-group { padding-right: 0 !important } .cs-conversation-header__content { box-sizing: border-box; display: flex; flex-direction: column; order: 3; flex-grow: 2; justify-content: center; min-width: 0 } .cs-conversation-header__content .cs-conversation-header__user-name { box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: bold; color: rgba(0, 0, 0, .87); background-color: #f6fbff } .cs-conversation-header__content .cs-conversation-header__info { box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(0, 0, 0, .6); background-color: #f6fbff; font-weight: normal; font-size: .9em } .cs-conversation-header__actions { box-sizing: border-box; display: flex; flex-direction: row; align-items: center; color: rgba(0, 0, 0, .87); background-color: transparent; margin: 0 0 0 .5em; order: 4 } .cs-conversation-header__actions .cs-button:not(:first-child) { margin-left: .2em } .cs-conversation-header__actions .cs-button { padding: 0 } .cs-conversation-header__actions .cs-button.cs-button--arrow, .cs-conversation-header__actions .cs-button.cs-button--info, .cs-conversation-header__actions .cs-button.cs-button--voicecall, .cs-conversation-header__actions .cs-button.cs-button--videocall, .cs-conversation-header__actions .cs-button.cs-button--star, .cs-conversation-header__actions .cs-button.cs-button--adduser, .cs-conversation-header__actions .cs-button.cs-button--ellipsis, .cs-conversation-header__actions .cs-button.cs-button--ellipsis { font-size: 1.4em; color: normal; background-color: transparent } .cs-conversation-header__actions .cs-button.cs-button--ellipsis { font-size: 1.3em } .cs-conversation { display: flex; flex-direction: row; box-sizing: border-box; position: relative; font-family: Helvetica Neue, Segoe UI, Helvetica, Arial, sans-serif; padding: .675em .8em .675em .8em; cursor: pointer; justify-content: flex-start; color: rgba(0, 0, 0, .87); background-color: #fff; -webkit-user-select: none; -moz-user-select: none; user-select: none; border-top: 0; border-right: 0; border-bottom: 0; border-left: 0 } .cs-conversation:hover { background-color: #f3f8fc } .cs-conversation:hover>.cs-avatar>.cs-status>.cs-status__bullet { border-color: #f3f8fc } .cs-conversation:hover>.cs-avatar>img { filter: none } .cs-conversation.cs-conversation:active { color: rgba(0, 0, 0, .87); background-color: #d5e7f5; border-top: 0; border-right: 0; border-bottom: 0; border-left: 0 } .cs-conversation.cs-conversation:active>.cs-avatar>.cs-status>.cs-status__bullet { border-color: #d5e7f5 } .cs-conversation.cs-conversation--active { color: #2b6a9b; background-color: #d5e7f5; font-weight: normal; border-top: 0; border-right: 0; border-bottom: 0; border-left: 0 } .cs-conversation.cs-conversation--active>.cs-avatar>.cs-status>.cs-status__bullet { border-color: #d5e7f5 } .cs-conversation.cs-conversation--active .cs-conversation__name { color: #2b6a9b; font-weight: normal } .cs-conversation.cs-conversation--active .cs-conversation__info { color: #2b6a9b; font-weight: normal } .cs-conversation>.cs-avatar { width: 42.1px; height: 42.1px; margin-right: 1em } .cs-conversation>.cs-avatar>.cs-status { border-color: #fff } .cs-conversation>.cs-avatar-group { width: 42.1px; height: 42.1px; min-width: 42.1px; min-height: 42.1px; padding-right: 0 !important; margin-right: 1em } .cs-conversation__content { box-sizing: border-box; display: flex; flex-direction: column; overflow: hidden; margin-right: 1.1em; flex-grow: 1 } .cs-conversation__operations { box-sizing: border-box; display: flex; flex-direction: row; align-items: center; margin: 0 0 0 auto; color: rgba(179, 179, 179, .87); visibility: hidden } .cs-conversation__operations--visible { visibility: visible } .cs-conversation__operations:hover { color: rgba(102, 102, 102, .87) } .cs-conversation:hover .cs-conversation__operations { visibility: visible } .cs-conversation__name { box-sizing: border-box; color: rgba(0, 0, 0, .87); font-size: 1em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .cs-conversation__info { box-sizing: border-box; color: rgba(0, 0, 0, .6); font-size: .8em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .cs-conversation__last-sender { box-sizing: border-box; display: inline; font-weight: normal } .cs-conversation__info-content { box-sizing: border-box; display: inline; font-weight: normal } .cs-conversation__last-activity-time { box-sizing: border-box; margin: 0 0 0 auto; font-size: .8em; display: flex; flex-direction: row; align-items: center } .cs-conversation__last-activity-time+.cs-conversation__operations { margin-left: .5em } .cs-conversation__unread-dot { box-sizing: content-box; display: flex; flex-direction: row; align-items: center; margin-right: .5em; align-self: center; border-radius: 50%; width: .7em; min-width: .7em; height: .7em; box-shadow: 1px 1px 1px 0px #b3b3b3; perspective: 200px; perspective-origin: 50% 50%; background: radial-gradient(circle at 3px 3px, #7c9df1, #2e63e8) } .cs-conversation__unread-dot:hover::before { content: ""; position: absolute; top: 1%; left: 5%; border-radius: 50%; z-index: 2; filter: blur(0); height: 80%; width: 40%; background: radial-gradient(circle at 130% 130%, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 46%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.8) 58%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0) 100%); transform: translateX(131%) translateY(58%) rotateZ(168deg) rotateX(10deg) } .cs-conversation__unread-dot:hover::after { content: ""; position: absolute; top: 5%; left: 10%; width: 80%; height: 80%; border-radius: 100%; filter: blur(1px); z-index: 2; transform: rotateZ(-30deg); display: block; background: radial-gradient(circle at 50% 80%, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 74%, white 80%, white 84%, rgba(255, 255, 255, 0) 100%); animation: cs-unread-anim 2s ease-out infinite } .cs-conversation__unread { box-sizing: border-box; position: absolute; right: .8em; top: .3em; padding: .01em .3em; border-radius: .3em; font-size: .75em; font-weight: 600; color: #fff; background-color: #ec1212; max-width: 30em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; z-index: 100 } @keyframes cs-unread-anim { 0% { transform: scale(1) } 20% { transform: scaleY(0.95) scaleX(1.05) } 48% { transform: scaleY(1.1) scaleX(0.9) } 68% { transform: scaleY(0.98) scaleX(1.02) } 80% { transform: scaleY(1.02) scaleX(0.98) } 97%, 100% { transform: scale(1) } } .cs-conversation-list { box-sizing: border-box; position: relative; overflow: hidden; height: 100%; color: rgba(0, 0, 0, .87); background-color: transparent } .cs-conversation-list>div>ul { margin: 0; padding: 0; list-style-type: none } .cs-conversation-list__loading-more { box-sizing: content-box; display: flex; flex-direction: row; justify-content: center; position: absolute; background-color: transparent; padding: 2px 0; bottom: 0; left: 0; right: 0; height: 1.2em; z-index: 1 } .cs-conversation-list__loading-more .cs-loader { width: 1.2em; height: 1.2em } .cs-conversation-list__loading-more .cs-loader::before, .cs-conversation-list__loading-more .cs-loader::after { width: 100%; height: 100% } .cs-conversation-list .ps__rail-y { z-index: 2 } .cs-status { box-sizing: border-box; position: relative; display: flex; flex-direction: row; align-items: center; flex-wrap: nowrap; font-size: 1em } .cs-status .cs-status__bullet { box-sizing: content-box; width: 11px; height: 11px; border-radius: 50%; position: relative; perspective: 200px; perspective-origin: 50% 50% } .cs-status--selected { color: #2b6a9b; background-color: #d5e7f5 } .cs-status--named { width: auto; height: auto } .cs-status__name { margin: 0 0 0 .58em; line-height: 1.5 } .cs-avatar:hover .cs-status__bullet:before, .cs-status:hover .cs-status__bullet:before { box-sizing: border-box; content: ""; position: absolute; top: 1%; left: 5%; border-radius: 50%; z-index: 2; filter: blur(0); height: 80%; width: 40%; background: radial-gradient(circle at 130% 130%, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 46%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.8) 58%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0) 100%); transform: translateX(131%) translateY(58%) rotateZ(168deg) rotateX(10deg) } .cs-avatar:hover .cs-status__bullet:after, .cs-status:hover .cs-status__bullet:after { box-sizing: border-box; content: ""; position: absolute; top: 5%; left: 10%; width: 80%; height: 80%; border-radius: 100%; filter: blur(1px); z-index: 2; transform: rotateZ(-30deg); display: block; background: radial-gradient(circle at 50% 80%, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 74%, white 80%, white 84%, rgba(255, 255, 255, 0) 100%); animation: cs-bubble-anim 2s ease-out infinite } .cs-status--available .cs-status__bullet { background: radial-gradient(circle at 3px 3px, #00d5a6, #00a27e) } .cs-status--available .cs-status__name { color: rgba(0, 0, 0, .87) } .cs-status--unavailable .cs-status__bullet { background: radial-gradient(circle at 3px 3px, #ffb527, #a66d00) } .cs-status--unavailable .cs-status__name { color: rgba(0, 0, 0, .87) } .cs-status--away .cs-status__bullet { background: radial-gradient(circle at 3px 3px, #ffdbb0, #fc8b00) } .cs-status--away .cs-status__name { color: rgba(0, 0, 0, .87) } .cs-status--dnd .cs-status__bullet { background-color: #ec1212; background: radial-gradient(circle at 3px 3px, #f89f9f, #ec1212) } .cs-status--dnd .cs-status__name { color: rgba(0, 0, 0, .87) } .cs-status--invisible .cs-status__bullet { background-color: #c2d1d9; background: radial-gradient(circle at 3px 3px, white, #c2d1d9) } .cs-status--invisible .cs-status__name { color: rgba(0, 0, 0, .87) } .cs-status--eager .cs-status__bullet { background: radial-gradient(circle at 3px 3px, #fffccc, #ffee00) } .cs-status--eager .cs-status__name { color: rgba(0, 0, 0, .87) } .cs-status--xs:not(.cs-status--named) { font-size: 1em; width: 4px; height: 4px } .cs-status--xs:not(.cs-status--named) .cs-status__bullet { width: 4px; min-width: 4px; height: 4px } .cs-status--sm:not(.cs-status--named) { font-size: 1em; width: 8px; height: 8px } .cs-status--sm:not(.cs-status--named) .cs-status__bullet { width: 8px; min-width: 8px; height: 8px } .cs-status--md:not(.cs-status--named) { font-size: 1em; width: 11px; height: 11px } .cs-status--md:not(.cs-status--named) .cs-status__bullet { width: 11px; min-width: 11px; height: 11px } .cs-status--lg:not(.cs-status--named) { font-size: 1em; width: 14px; height: 14px } .cs-status--lg:not(.cs-status--named) .cs-status__bullet { width: 14px; min-width: 14px; height: 14px } .cs-status--fluid { width: 100%; height: 100% } .cs-status--fluid .cs-status__bullet { width: 100%; min-width: 100%; height: 100% } @keyframes cs-bubble-anim { 0% { transform: scale(1) } 20% { transform: scaleY(0.95) scaleX(1.05) } 48% { transform: scaleY(1.1) scaleX(0.9) } 68% { transform: scaleY(0.98) scaleX(1.02) } 80% { transform: scaleY(1.02) scaleX(0.98) } 97%, 100% { transform: scale(1) } } .cs-sidebar { box-sizing: border-box; position: relative; overflow: hidden; height: 100%; display: flex; flex-direction: column } .cs-sidebar--left { background-color: #fff } .cs-sidebar--right { background-color: #fff } .cs-sidebar .cs-expansion-panel+.cs-expansion-panel { border-top: 0 } .cs-expansion-panel { box-sizing: border-box; display: flex; flex-direction: column; color: rgba(0, 0, 0, .87); background-color: #fff; border: solid 1px #d1dbe3; font-family: Helvetica Neue, Segoe UI, Helvetica, Arial, sans-serif; font-weight: normal; font-size: inherit; font-variant: normal } .cs-expansion-panel__header { box-sizing: border-box; display: flex; flex-direction: row; color: rgba(0, 0, 0, .6); background-color: #f6fbff; font-family: Helvetica Neue, Segoe UI, Helvetica, Arial, sans-serif; font-weight: bold; font-size: .75em; font-variant: normal; -webkit-user-select: none; -moz-user-select: none; padding: .8em .8em; align-items: center; user-select: none; cursor: pointer } .cs-expansion-panel__header:hover { color: rgba(0, 0, 0, .6); background-color: #f3f8fc } .cs-expansion-panel__title { box-sizing: border-box; flex-grow: 1 } .cs-expansion-panel__icon { box-sizing: border-box; margin-left: 1em; margin-right: .5em } .cs-expansion-panel__content { display: none; color: rgba(0, 0, 0, .87); background-color: #fff; font-family: Helvetica Neue, Segoe UI, Helvetica, Arial, sans-serif; font-weight: normal; font-size: .8em; font-variant: normal; padding: .4em .8em } .cs-expansion-panel--open .cs-expansion-panel__content { display: block; color: rgba(0, 0, 0, .87); background-color: #fff } .cs-expansion-panel--closed .cs-expansion-panel__content { display: none } .cs-expansion-panel--open .cs-expansion-panel__header { color: rgba(0, 0, 0, .6); background-color: #f6fbff } .cs-search { box-sizing: border-box; display: flex; flex-direction: row; margin: 0; padding: 0; background-color: #c6e3fa; align-items: center; position: relative; border-radius: .7em; padding: .6em .9em; font-size: inherit; font-family: inherit } .cs-search__input { box-sizing: border-box; order: 1; color: rgba(0, 0, 0, .87); border: none; width: 100%; min-width: 0; outline: 0; margin-right: .5em; background-color: #c6e3fa; font-size: .8em; font-family: inherit } .cs-search__input:disabled { color: rgba(0, 0, 0, .38); background-color: #c6e3fa } .cs-search__input::-moz-placeholder { color: rgba(0, 0, 0, .87) } .cs-search__input::placeholder { color: rgba(0, 0, 0, .87) } .cs-search__search-icon { box-sizing: border-box; order: 0; display: block; margin-right: .5em; color: #6ea9d7 } .cs-search__clear-icon { box-sizing: border-box; order: 2; color: #6ea9d7; visibility: hidden } .cs-search__clear-icon:hover { color: rgba(110, 169, 215, .6); cursor: pointer } .cs-search__clear-icon--active { visibility: visible } .cs-search--disabled { opacity: .38; color: rgba(0, 0, 0, .38); background-color: #c6e3fa } .cs-button { box-sizing: border-box; display: inline-block; vertical-align: middle; text-align: center; color: #6ea9d7; background-color: transparent; border: none; border-radius: .7em; margin: .1em .2em; padding: .2em .7em; outline: none; font-size: 1em; line-height: 1.5 } .cs-button:focus { outline: none } .cs-button:disabled { opacity: .38 } .cs-button:not(:disabled) { cursor: pointer } .cs-button.cs-button--border { border: solid 1px #d1dbe3 } .cs-button:hover:not(:disabled) { opacity: .6 } .cs-button.cs-button--right>svg[data-icon]:first-child { margin-right: .5em } .cs-button.cs-button--left>svg[data-icon]:last-child { margin-left: .5em } .cs-button--adduser { color: #6ea9d7; background-color: transparent } .cs-button--arrow { color: #6ea9d7; background-color: transparent } .cs-button--ellipsis { color: #6ea9d7; background-color: transparent } .cs-button--info { color: #6ea9d7; background-color: transparent } .cs-button--star { color: #6ea9d7; background-color: transparent } .cs-button--videocall { color: #6ea9d7; background-color: transparent } .cs-button--voicecall { color: #6ea9d7; background-color: transparent } .cs-button--send { color: #6ea9d7; background-color: transparent } .cs-button--attachment { color: #6ea9d7; background-color: transparent } .cs-loader { box-sizing: border-box; display: inline-flex; position: relative; font-size: 1em; width: 1.8em; height: 1.8em; color: rgba(0, 0, 0, .87); background-color: transparent } .cs-loader::before, .cs-loader::after { box-sizing: border-box; display: block; width: 1.8em; height: 1.8em; margin: 0 0 0 -0.9em } .cs-loader::before { position: absolute; content: ""; top: 0; left: 50%; border-radius: 50%; border-color: #c6e3fa; border-style: solid; border-width: .2em } .cs-loader::after { position: absolute; content: ""; top: 0; left: 50%; animation: loader-default .6s linear; animation-iteration-count: infinite; border-radius: 50%; border-color: #6ea9d7 transparent transparent transparent; border-style: solid; border-width: .2em; box-shadow: 0 0 0 transparent } .cs-loader--content { width: auto; height: auto; padding-top: 2.6em } @keyframes loader-default { to { transform: rotate(360deg) } } .cs-overlay { box-sizing: border-box; display: flex; flex-direction: row; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; right: 0; bottom: 0; -webkit-backdrop-filter: blur(10%); backdrop-filter: blur(10%) } .cs-overlay__content { z-index: 220 } .cs-overlay::before { box-sizing: border-box; content: ""; background-color: rgba(198, 227, 250, .38); position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 200 } .cs-overlay--blur::before { -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px) } .cs-overlay--grayscale::before { -webkit-backdrop-filter: grayscale(50%); backdrop-filter: grayscale(50%) } .cs-status-list { box-sizing: border-box; list-style-type: none; margin: 0; padding: 1em; color: rgba(0, 0, 0, .87); background-color: #fff } .cs-status-list>li { box-sizing: border-box; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none } .cs-status-list>li>.cs-status { margin: 0; padding: .4em .8em; width: auto; height: auto } .cs-status-list>li .cs-status--selected { color: #2b6a9b; background-color: #d5e7f5 } .cs-status-list>li .cs-status--selected .cs-status__name { color: #2b6a9b; background-color: #d5e7f5 } .cs-status-list>li:hover { color: rgba(0, 0, 0, .6); background-color: #f3f8fc } .cs-status-list>li:focus { color: rgba(0, 0, 0, .87); background-color: #d5e7f5 } .cs-status-list>li:active { color: rgba(0, 0, 0, .87); background-color: #d5e7f5 } .cs-status-list--xs>li>.cs-status { font-size: 1em; width: auto; height: auto } .cs-status-list--xs>li>.cs-status .cs-status__bullet { width: 4px; min-width: 4px; height: 4px } .cs-status-list--sm>li>.cs-status { font-size: 1em; width: auto; height: auto } .cs-status-list--sm>li>.cs-status .cs-status__bullet { width: 8px; min-width: 8px; height: 8px } .cs-status-list--md>li>.cs-status { font-size: 1em; width: auto; height: auto } .cs-status-list--md>li>.cs-status .cs-status__bullet { width: 11px; min-width: 11px; height: 11px } .cs-status-list--lg>li>.cs-status { font-size: 1em; width: auto; height: auto } .cs-status-list--lg>li>.cs-status .cs-status__bullet { width: 14px; min-width: 14px; height: 14px } .ps { overflow: hidden !important; overflow-anchor: none; -ms-overflow-style: none; touch-action: auto; -ms-touch-action: auto } .ps__rail-x { display: none; opacity: 0; transition: background-color .2s linear, opacity .2s linear; -webkit-transition: background-color .2s linear, opacity .2s linear; height: 15px; bottom: 0px; position: absolute } .ps__rail-y { display: none; opacity: 0; transition: background-color .2s linear, opacity .2s linear; -webkit-transition: background-color .2s linear, opacity .2s linear; width: 15px; right: 0; left: auto !important; position: absolute } .ps--active-x>.ps__rail-x, .ps--active-y>.ps__rail-y { display: block; background-color: transparent } .ps:hover>.ps__rail-x, .ps:hover>.ps__rail-y, .ps--focus>.ps__rail-x, .ps--focus>.ps__rail-y, .ps--scrolling-x>.ps__rail-x, .ps--scrolling-y>.ps__rail-y { opacity: .6 } .ps .ps__rail-x:hover, .ps .ps__rail-y:hover, .ps .ps__rail-x:focus, .ps .ps__rail-y:focus, .ps .ps__rail-x.ps--clicking, .ps .ps__rail-y.ps--clicking { background-color: #eee; background-color: #f6fbff; opacity: .9 } .ps__thumb-x { background-color: #6ea9d7; border-radius: 6px; transition: background-color .2s linear, height .2s ease-in-out; -webkit-transition: background-color .2s linear, height .2s ease-in-out; height: 6px; bottom: 2px; position: absolute } .ps__thumb-y { background-color: #c6e3fa; border-radius: 6px; transition: background-color .2s linear, width .2s ease-in-out; -webkit-transition: background-color .2s linear, width .2s ease-in-out; width: 6px; right: 2px; position: absolute } .ps__rail-x:hover>.ps__thumb-x, .ps__rail-x:focus>.ps__thumb-x, .ps__rail-x.ps--clicking .ps__thumb-x { background-color: #c6e3fa; height: 11px } .ps__rail-y:hover>.ps__thumb-y, .ps__rail-y:focus>.ps__thumb-y, .ps__rail-y.ps--clicking .ps__thumb-y { background-color: #c6e3fa; width: 11px } @supports(-ms-overflow-style: none) { .ps { overflow: auto !important } } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .ps { overflow: auto !important } } .scrollbar-container { position: relative; height: 100% } /* ! tailwindcss v3.4.0 | MIT License | https://tailwindcss.com */ /* 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) */ *, ::before, ::after { box-sizing: border-box; /* 1 */ border-width: 0; /* 2 */ border-style: solid; /* 2 */ border-color: #CED6DE; /* 2 */ } ::before, ::after { --tw-content: ''; } /* 1. Use a consistent sensible line-height in all browsers. 2. Prevent adjustments of font size after orientation changes in iOS. 3. Use a more readable tab size. 4. Use the user's configured `sans` font-family by default. 5. Use the user's configured `sans` font-feature-settings by default. 6. Use the user's configured `sans` font-variation-settings by default. 7. Disable tap highlights on iOS */ html, :host { line-height: 1.5; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ -moz-tab-size: 4; /* 3 */ -o-tab-size: 4; tab-size: 4; /* 3 */ font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */ font-feature-settings: normal; /* 5 */ font-variation-settings: normal; /* 6 */ -webkit-tap-highlight-color: transparent; /* 7 */ } /* 1. Remove the margin in all browsers. 2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. */ body { margin: 0; /* 1 */ line-height: inherit; /* 2 */ } /* 1. Add the correct height in Firefox. 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) 3. Ensure horizontal rules are visible by default. */ hr { height: 0; /* 1 */ color: inherit; /* 2 */ border-top-width: 1px; /* 3 */ } /* Add the correct text decoration in Chrome, Edge, and Safari. */ abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } /* Remove the default font size and weight for headings. */ h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } /* Reset links to optimize for opt-in styling instead of opt-out. */ a { color: inherit; text-decoration: inherit; } /* Add the correct font weight in Edge and Safari. */ b, strong { font-weight: bolder; } /* 1. Use the user's configured `mono` font-family by default. 2. Use the user's configured `mono` font-feature-settings by default. 3. Use the user's configured `mono` font-variation-settings by default. 4. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */ font-feature-settings: normal; /* 2 */ font-variation-settings: normal; /* 3 */ font-size: 1em; /* 4 */ } /* Add the correct font size in all browsers. */ small { font-size: 80%; } /* Prevent `sub` and `sup` elements from affecting the line height in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) 3. Remove gaps between table borders by default. */ table { text-indent: 0; /* 1 */ border-color: inherit; /* 2 */ border-collapse: collapse; /* 3 */ } /* 1. Change the font styles in all browsers. 2. Remove the margin in Firefox and Safari. 3. Remove default padding in all browsers. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-feature-settings: inherit; /* 1 */ font-variation-settings: inherit; /* 1 */ font-size: 100%; /* 1 */ font-weight: inherit; /* 1 */ line-height: inherit; /* 1 */ color: inherit; /* 1 */ margin: 0; /* 2 */ padding: 0; /* 3 */ } /* Remove the inheritance of text transform in Edge and Firefox. */ button, select { text-transform: none; } /* 1. Correct the inability to style clickable types in iOS and Safari. 2. Remove default button styles. */ button, [type='button'], [type='reset'], [type='submit'] { -webkit-appearance: button; /* 1 */ background-color: transparent; /* 2 */ background-image: none; /* 2 */ } /* Use the modern Firefox focus style for all focusable elements. */ :-moz-focusring { outline: auto; } /* Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) */ :-moz-ui-invalid { box-shadow: none; } /* Add the correct vertical alignment in Chrome and Firefox. */ progress { vertical-align: baseline; } /* Correct the cursor style of increment and decrement buttons in Safari. */ ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } /* 1. Correct the odd appearance in Chrome and Safari. 2. Correct the outline style in Safari. */ [type='search'] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /* Remove the inner padding in Chrome and Safari on macOS. */ ::-webkit-search-decoration { -webkit-appearance: none; } /* 1. Correct the inability to style clickable types in iOS and Safari. 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Add the correct display in Chrome and Safari. */ summary { display: list-item; } /* Removes the default spacing and border for appropriate elements. */ blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { margin: 0; } fieldset { margin: 0; padding: 0; } legend { padding: 0; } ol, ul, menu { list-style: none; margin: 0; padding: 0; } /* Reset default styling for dialogs. */ dialog { padding: 0; } /* Prevent resizing textareas horizontally by default. */ textarea { resize: vertical; } /* 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) 2. Set the default placeholder color to the user's configured gray 400 color. */ input::-moz-placeholder, textarea::-moz-placeholder { opacity: 1; /* 1 */ color: #C3C6CB; /* 2 */ } input::placeholder, textarea::placeholder { opacity: 1; /* 1 */ color: #C3C6CB; /* 2 */ } /* Set the default cursor for buttons. */ button, [role="button"] { cursor: pointer; } /* Make sure disabled buttons don't get the pointer cursor. */ :disabled { cursor: default; } /* 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) This can trigger a poorly considered lint error in some tools but is included by design. */ img, svg, video, canvas, audio, iframe, embed, object { display: block; /* 1 */ vertical-align: middle; /* 2 */ } /* Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) */ img, video { max-width: 100%; height: auto; } /* Make elements with the HTML hidden attribute stay hidden by default */ [hidden] { display: none; } #kins-popup { font-family: 'Rubik, sans-serif'; } #kins-popup * { font-family: 'Rubik, sans-serif'; } *, ::before, ::after { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; } ::backdrop { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; } .container { width: 100%; } @media (min-width: 640px) { .container { max-width: 640px; } } @media (min-width: 768px) { .container { max-width: 768px; } } @media (min-width: 1024px) { .container { max-width: 1024px; } } @media (min-width: 1280px) { .container { max-width: 1280px; } } @media (min-width: 1536px) { .container { max-width: 1536px; } } /* Not In style guide */ .bg-gradient { background: linear-gradient(273deg, #FAF7F7 61.31%, #53647E 108.89%); } .bg-gradient-green { background: var(--Linear-1, linear-gradient(90deg, #ADD100 0%, #7B920A 100%)); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } .pointer-events-none { pointer-events: none; } .\!visible { visibility: visible !important; } .visible { visibility: visible; } .invisible { visibility: hidden; } .collapse { visibility: collapse; } .static { position: static; } .fixed { position: fixed; } .absolute { position: absolute; } .relative { position: relative; } .sticky { position: sticky; } .inset-0 { inset: 0px; } .inset-xs { inset: 6px; } .inset-x-0 { left: 0px; right: 0px; } .inset-y-0 { top: 0px; bottom: 0px; } .bottom-0 { bottom: 0px; } .bottom-auto { bottom: auto; } .bottom-sm { bottom: 12px; } .bottom-xs { bottom: 6px; } .end-0 { inset-inline-end: 0px; } .end-sm { inset-inline-end: 12px; } .end-xs { inset-inline-end: 6px; } .left-\[83px\] { left: 83px; } .left-sm { left: 12px; } .left-xs { left: 6px; } .right-0 { right: 0px; } .right-\[20px\] { right: 20px; } .right-\[40px\] { right: 40px; } .right-sm { right: 12px; } .right-xs { right: 6px; } .start-0 { inset-inline-start: 0px; } .start-sm { inset-inline-start: 12px; } .top-0 { top: 0px; } .top-\[-16px\] { top: -16px; } .top-\[-27px\] { top: -27px; } .top-\[-35px\] { top: -35px; } .top-\[156px\] { top: 156px; } .top-\[8px\] { top: 8px; } .top-xs { top: 6px; } .z-0 { z-index: 0; } .z-10 { z-index: 10; } .z-30 { z-index: 30; } .z-40 { z-index: 40; } .z-50 { z-index: 50; } .z-\[80\] { z-index: 80; } .z-dialog-overlay { z-index: 1000; } .z-max { z-index: 2147483647; } .col-span-2 { grid-column: span 2 / span 2; } .m-0 { margin: 0px; } .m-sm { margin: 12px; } .mx-\[10px\] { margin-left: 10px; margin-right: 10px; } .mx-auto { margin-left: auto; margin-right: auto; } .my-md { margin-top: 24px; margin-bottom: 24px; } .my-sm { margin-top: 12px; margin-bottom: 12px; } .-mt-md { margin-top: -24px; } .mb-\[3px\] { margin-bottom: 3px; } .mb-sm { margin-bottom: 12px; } .mb-xs { margin-bottom: 6px; } .me-sm { margin-inline-end: 12px; } .ml-sm { margin-left: 12px; } .ml-xs { margin-left: 6px; } .ms-\[1px\] { margin-inline-start: 1px; } .ms-xs { margin-inline-start: 6px; } .mt-1 { margin-top: 1px; } .mt-\[16px\] { margin-top: 16px; } .mt-md { margin-top: 24px; } .mt-sm { margin-top: 12px; } .mt-xs { margin-top: 6px; } .mt-xxs { margin-top: 3px; } .line-clamp-1 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; } .line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .line-clamp-3 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .line-clamp-4 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; } .line-clamp-5 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; } .line-clamp-6 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; } .block { display: block; } .inline-block { display: inline-block; } .inline { display: inline; } .flex { display: flex; } .table { display: table; } .grid { display: grid; } .hidden { display: none; } .aspect-square { aspect-ratio: 1 / 1; } .h-1 { height: 1px; } .h-\[108px\] { height: 108px; } .h-\[110px\] { height: 110px; } .h-\[119px\] { height: 119px; } .h-\[12px\] { height: 12px; } .h-\[13px\] { height: 13px; } .h-\[140px\] { height: 140px; } .h-\[14px\] { height: 14px; } .h-\[16px\] { height: 16px; } .h-\[177px\] { height: 177px; } .h-\[1px\] { height: 1px; } .h-\[200px\] { height: 200px; } .h-\[20px\] { height: 20px; } .h-\[218px\] { height: 218px; } .h-\[22px\] { height: 22px; } .h-\[24px\] { height: 24px; } .h-\[25px\] { height: 25px; } .h-\[26px\] { height: 26px; } .h-\[28px\] { height: 28px; } .h-\[30px\] { height: 30px; } .h-\[32px\] { height: 32px; } .h-\[34px\] { height: 34px; } .h-\[35px\] { height: 35px; } .h-\[36px\] { height: 36px; } .h-\[40px\] { height: 40px; } .h-\[44px\] { height: 44px; } .h-\[49px\] { height: 49px; } .h-\[50px\] { height: 50px; } .h-\[52px\] { height: 52px; } .h-\[5px\] { height: 5px; } .h-\[60px\] { height: 60px; } .h-\[61px\] { height: 61px; } .h-\[64px\] { height: 64px; } .h-\[65\%\] { height: 65%; } .h-\[66px\] { height: 66px; } .h-\[67px\] { height: 67px; } .h-\[69px\] { height: 69px; } .h-\[70\%\] { height: 70%; } .h-\[75px\] { height: 75px; } .h-\[76px\] { height: 76px; } .h-\[7px\] { height: 7px; } .h-\[80\%\] { height: 80%; } .h-\[80px\] { height: 80px; } .h-\[calc\(100vh-84px\)\] { height: calc(100vh - 84px); } .h-auto { height: auto; } .h-fit { height: -moz-fit-content; height: fit-content; } .h-full { height: 100%; } .h-md { height: 24px; } .h-sm { height: 12px; } .h-svh { height: 100svh; } .h-xs { height: 6px; } .max-h-\[140px\] { max-height: 140px; } .max-h-\[16px\] { max-height: 16px; } .max-h-\[200px\] { max-height: 200px; } .max-h-\[300px\] { max-height: 300px; } .max-h-\[80px\] { max-height: 80px; } .max-h-\[90vh\] { max-height: 90vh; } .min-h-\[120px\] { min-height: 120px; } .min-h-\[140px\] { min-height: 140px; } .min-h-\[150px\] { min-height: 150px; } .min-h-\[20px\] { min-height: 20px; } .min-h-\[22px\] { min-height: 22px; } .min-h-\[230px\] { min-height: 230px; } .min-h-\[36px\] { min-height: 36px; } .min-h-\[41px\] { min-height: 41px; } .min-h-\[50px\] { min-height: 50px; } .min-h-\[64px\] { min-height: 64px; } .min-h-\[80px\] { min-height: 80px; } .min-h-\[90px\] { min-height: 90px; } .min-h-xs { min-height: 6px; } .w-1 { width: 1px; } .w-1\/2 { width: 50%; } .w-11\/12 { width: 91.666667%; } .w-\[107px\] { width: 107px; } .w-\[10ch\] { width: 10ch; } .w-\[114px\] { width: 114px; } .w-\[11px\] { width: 11px; } .w-\[120px\] { width: 120px; } .w-\[12px\] { width: 12px; } .w-\[130px\] { width: 130px; } .w-\[13px\] { width: 13px; } .w-\[140px\] { width: 140px; } .w-\[142px\] { width: 142px; } .w-\[14px\] { width: 14px; } .w-\[150px\] { width: 150px; } .w-\[16px\] { width: 16px; } .w-\[179px\] { width: 179px; } .w-\[199px\] { width: 199px; } .w-\[200px\] { width: 200px; } .w-\[20px\] { width: 20px; } .w-\[22px\] { width: 22px; } .w-\[230px\] { width: 230px; } .w-\[24px\] { width: 24px; } .w-\[274px\] { width: 274px; } .w-\[280px\] { width: 280px; } .w-\[28px\] { width: 28px; } .w-\[300px\] { width: 300px; } .w-\[30px\] { width: 30px; } .w-\[35px\] { width: 35px; } .w-\[36px\] { width: 36px; } .w-\[380px\] { width: 380px; } .w-\[3em\] { width: 3em; } .w-\[400px\] { width: 400px; } .w-\[40px\] { width: 40px; } .w-\[420px\] { width: 420px; } .w-\[4px\] { width: 4px; } .w-\[50px\] { width: 50px; } .w-\[54px\] { width: 54px; } .w-\[56px\] { width: 56px; } .w-\[5px\] { width: 5px; } .w-\[60px\] { width: 60px; } .w-\[72px\] { width: 72px; } .w-\[75px\] { width: 75px; } .w-\[7px\] { width: 7px; } .w-\[80\%\] { width: 80%; } .w-\[92\%\] { width: 92%; } .w-\[calc\(100\%-20px\)\] { width: calc(100% - 20px); } .w-\[calc\(100\%-2px\)\] { width: calc(100% - 2px); } .w-fit { width: -moz-fit-content; width: fit-content; } .w-full { width: 100%; } .w-md { width: 24px; } .w-sm { width: 12px; } .w-svw { width: 100svw; } .min-w-0 { min-width: 0px; } .min-w-\[140px\] { min-width: 140px; } .min-w-\[213px\] { min-width: 213px; } .min-w-\[24px\] { min-width: 24px; } .min-w-\[36px\] { min-width: 36px; } .min-w-\[56px\] { min-width: 56px; } .min-w-\[85\%\] { min-width: 85%; } .min-w-fit { min-width: -moz-fit-content; min-width: fit-content; } .max-w-\[100px\] { max-width: 100px; } .max-w-\[120px\] { max-width: 120px; } .max-w-\[140px\] { max-width: 140px; } .max-w-\[150px\] { max-width: 150px; } .max-w-\[160px\] { max-width: 160px; } .max-w-\[180px\] { max-width: 180px; } .max-w-\[250px\] { max-width: 250px; } .max-w-\[300px\] { max-width: 300px; } .max-w-\[80\%\] { max-width: 80%; } .max-w-full { max-width: 100%; } .flex-1 { flex: 1 1 0%; } .shrink { flex-shrink: 1; } .shrink-0 { flex-shrink: 0; } .grow { flex-grow: 1; } .border-spacing-xs { --tw-border-spacing-x: 6px; --tw-border-spacing-y: 6px; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y); } .-translate-y-1\/2 { --tw-translate-y: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .-translate-y-full { --tw-translate-y: -100%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .translate-x-1 { --tw-translate-x: 1px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .translate-y-0 { --tw-translate-y: 0px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .translate-y-\[12\.5\%\] { --tw-translate-y: 12.5%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .translate-y-md { --tw-translate-y: 24px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .rotate-180 { --tw-rotate: 180deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .scale-110 { --tw-scale-x: 1.1; --tw-scale-y: 1.1; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .scale-75 { --tw-scale-x: .75; --tw-scale-y: .75; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .transform { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } @keyframes bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); } 50% { transform: none; animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } } .animate-bounce { animation: bounce 1s infinite; } @keyframes pulse { 50% { opacity: .5; } } .animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } @keyframes spin { to { transform: rotate(360deg); } } .animate-spin { animation: spin 1s linear infinite; } .cursor-default { cursor: default; } .cursor-grab { cursor: grab; } .cursor-not-allowed { cursor: not-allowed; } .cursor-pointer { cursor: pointer; } .touch-none { touch-action: none; } .select-none { -webkit-user-select: none; -moz-user-select: none; user-select: none; } .resize-none { resize: none; } .resize { resize: both; } .appearance-none { -webkit-appearance: none; -moz-appearance: none; appearance: none; } .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); } .grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); } .grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); } .grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); } .grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); } .grid-cols-\[auto_1fr\] { grid-template-columns: auto 1fr; } .grid-cols-none { grid-template-columns: none; } .grid-cols-subgrid { grid-template-columns: subgrid; } .grid-rows-1 { grid-template-rows: repeat(1, minmax(0, 1fr)); } .grid-rows-10 { grid-template-rows: repeat(10, minmax(0, 1fr)); } .grid-rows-11 { grid-template-rows: repeat(11, minmax(0, 1fr)); } .grid-rows-12 { grid-template-rows: repeat(12, minmax(0, 1fr)); } .grid-rows-2 { grid-template-rows: repeat(2, minmax(0, 1fr)); } .grid-rows-3 { grid-template-rows: repeat(3, minmax(0, 1fr)); } .grid-rows-4 { grid-template-rows: repeat(4, minmax(0, 1fr)); } .grid-rows-5 { grid-template-rows: repeat(5, minmax(0, 1fr)); } .grid-rows-6 { grid-template-rows: repeat(6, minmax(0, 1fr)); } .grid-rows-7 { grid-template-rows: repeat(7, minmax(0, 1fr)); } .grid-rows-8 { grid-template-rows: repeat(8, minmax(0, 1fr)); } .grid-rows-9 { grid-template-rows: repeat(9, minmax(0, 1fr)); } .grid-rows-none { grid-template-rows: none; } .grid-rows-subgrid { grid-template-rows: subgrid; } .flex-row { flex-direction: row; } .flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .items-start { align-items: flex-start; } .items-end { align-items: flex-end; } .items-center { align-items: center; } .items-baseline { align-items: baseline; } .items-stretch { align-items: stretch; } .justify-start { justify-content: flex-start; } .justify-end { justify-content: flex-end; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .justify-around { justify-content: space-around; } .justify-stretch { justify-content: stretch; } .gap-0 { gap: 0px; } .gap-1 { gap: 1px; } .gap-\[3px\] { gap: 3px; } .gap-md { gap: 24px; } .gap-sm { gap: 12px; } .gap-xs { gap: 6px; } .gap-xxs { gap: 3px; } .gap-x-0 { -moz-column-gap: 0px; column-gap: 0px; } .gap-x-1 { -moz-column-gap: 1px; column-gap: 1px; } .gap-x-md { -moz-column-gap: 24px; column-gap: 24px; } .gap-x-sm { -moz-column-gap: 12px; column-gap: 12px; } .gap-x-xs { -moz-column-gap: 6px; column-gap: 6px; } .gap-x-xxs { -moz-column-gap: 3px; column-gap: 3px; } .gap-y-0 { row-gap: 0px; } .gap-y-1 { row-gap: 1px; } .gap-y-md { row-gap: 24px; } .gap-y-sm { row-gap: 12px; } .gap-y-xs { row-gap: 6px; } .gap-y-xxs { row-gap: 3px; } .self-start { align-self: flex-start; } .self-end { align-self: flex-end; } .self-stretch { align-self: stretch; } .overflow-hidden { overflow: hidden; } .overflow-scroll { overflow: scroll; } .overflow-x-auto { overflow-x: auto; } .overflow-y-auto { overflow-y: auto; } .overflow-x-hidden { overflow-x: hidden; } .overflow-y-hidden { overflow-y: hidden; } .overflow-x-visible { overflow-x: visible; } .overflow-y-visible { overflow-y: visible; } .overflow-y-scroll { overflow-y: scroll; } .overscroll-contain { overscroll-behavior: contain; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .text-ellipsis { text-overflow: ellipsis; } .whitespace-nowrap { white-space: nowrap; } .text-wrap { text-wrap: wrap; } .text-nowrap { text-wrap: nowrap; } .break-all { word-break: break-all; } .rounded-1 { border-radius: 1px; } .rounded-\[100\%\] { border-radius: 100%; } .rounded-\[10px\] { border-radius: 10px; } .rounded-\[12px\] { border-radius: 12px; } .rounded-\[16px\] { border-radius: 16px; } .rounded-\[22\.5px\] { border-radius: 22.5px; } .rounded-\[2px\] { border-radius: 2px; } .rounded-\[30px\] { border-radius: 30px; } .rounded-\[60px\] { border-radius: 60px; } .rounded-\[8px\] { border-radius: 8px; } .rounded-edges { border-radius: 4px; } .rounded-full { border-radius: 100%; } .rounded-e-\[60px\] { border-start-end-radius: 60px; border-end-end-radius: 60px; } .rounded-s-\[4px\] { border-start-start-radius: 4px; border-end-start-radius: 4px; } .rounded-s-\[60px\] { border-start-start-radius: 60px; border-end-start-radius: 60px; } .rounded-t-edges { border-top-left-radius: 4px; border-top-right-radius: 4px; } .border-0 { border-width: 0px; } .border-0\.5 { border-width: 0.5px; } .border-1 { border-width: 1px; } .border-2 { border-width: 2px; } .border-3 { border-width: 3px; } .border-\[1\.5px\] { border-width: 1.5px; } .border-\[3px\] { border-width: 3px; } .border-\[4px\] { border-width: 4px; } .border-b-1 { border-bottom-width: 1px; } .border-b-2 { border-bottom-width: 2px; } .border-b-3 { border-bottom-width: 3px; } .border-e-0 { border-inline-end-width: 0px; } .border-l-0 { border-left-width: 0px; } .border-l-0\.5 { border-left-width: 0.5px; } .border-l-1 { border-left-width: 1px; } .border-l-2 { border-left-width: 2px; } .border-l-3 { border-left-width: 3px; } .border-t-1 { border-top-width: 1px; } .border-solid { border-style: solid; } .border-dashed { border-style: dashed; } .border-none { border-style: none; } .border-\[\#F94144\] { --tw-border-opacity: 1; border-color: rgb(249 65 68 / var(--tw-border-opacity)); } .border-gray-100 { --tw-border-opacity: 1; border-color: rgb(175 175 177 / var(--tw-border-opacity)); } .border-gray-100\/50 { border-color: rgb(175 175 177 / 0.5); } .border-gray-200 { --tw-border-opacity: 1; border-color: rgb(206 214 222 / var(--tw-border-opacity)); } .border-gray-300 { --tw-border-opacity: 1; border-color: rgb(226 232 236 / var(--tw-border-opacity)); } .border-gray-50 { --tw-border-opacity: 1; border-color: rgb(245 245 245 / var(--tw-border-opacity)); } .border-green-100 { --tw-border-opacity: 1; border-color: rgb(158 190 89 / var(--tw-border-opacity)); } .border-pink-100 { --tw-border-opacity: 1; border-color: rgb(225 87 113 / var(--tw-border-opacity)); } .border-pink-150 { --tw-border-opacity: 1; border-color: rgb(194 129 149 / var(--tw-border-opacity)); } .border-pink-200 { --tw-border-opacity: 1; border-color: rgb(188 64 102 / var(--tw-border-opacity)); } .border-pink-50 { --tw-border-opacity: 1; border-color: rgb(246 214 221 / var(--tw-border-opacity)); } .border-white { --tw-border-opacity: 1; border-color: rgb(255 255 255 / var(--tw-border-opacity)); } .border-b-gray-100 { --tw-border-opacity: 1; border-bottom-color: rgb(175 175 177 / var(--tw-border-opacity)); } .border-b-gray-300 { --tw-border-opacity: 1; border-bottom-color: rgb(226 232 236 / var(--tw-border-opacity)); } .border-b-gray-50 { --tw-border-opacity: 1; border-bottom-color: rgb(245 245 245 / var(--tw-border-opacity)); } .border-b-pink-150 { --tw-border-opacity: 1; border-bottom-color: rgb(194 129 149 / var(--tw-border-opacity)); } .border-b-pink-50 { --tw-border-opacity: 1; border-bottom-color: rgb(246 214 221 / var(--tw-border-opacity)); } .border-b-red { --tw-border-opacity: 1; border-bottom-color: rgb(249 65 68 / var(--tw-border-opacity)); } .border-b-white { --tw-border-opacity: 1; border-bottom-color: rgb(255 255 255 / var(--tw-border-opacity)); } .border-l-black { --tw-border-opacity: 1; border-left-color: rgb(29 32 34 / var(--tw-border-opacity)); } .border-l-black\/0 { border-left-color: rgb(29 32 34 / 0); } .border-l-black\/10 { border-left-color: rgb(29 32 34 / 0.1); } .border-l-black\/100 { border-left-color: rgb(29 32 34 / 1); } .border-l-black\/15 { border-left-color: rgb(29 32 34 / 0.15); } .border-l-black\/20 { border-left-color: rgb(29 32 34 / 0.2); } .border-l-black\/25 { border-left-color: rgb(29 32 34 / 0.25); } .border-l-black\/30 { border-left-color: rgb(29 32 34 / 0.3); } .border-l-black\/35 { border-left-color: rgb(29 32 34 / 0.35); } .border-l-black\/40 { border-left-color: rgb(29 32 34 / 0.4); } .border-l-black\/45 { border-left-color: rgb(29 32 34 / 0.45); } .border-l-black\/5 { border-left-color: rgb(29 32 34 / 0.05); } .border-l-black\/50 { border-left-color: rgb(29 32 34 / 0.5); } .border-l-black\/55 { border-left-color: rgb(29 32 34 / 0.55); } .border-l-black\/60 { border-left-color: rgb(29 32 34 / 0.6); } .border-l-black\/65 { border-left-color: rgb(29 32 34 / 0.65); } .border-l-black\/70 { border-left-color: rgb(29 32 34 / 0.7); } .border-l-black\/75 { border-left-color: rgb(29 32 34 / 0.75); } .border-l-black\/80 { border-left-color: rgb(29 32 34 / 0.8); } .border-l-black\/85 { border-left-color: rgb(29 32 34 / 0.85); } .border-l-black\/90 { border-left-color: rgb(29 32 34 / 0.9); } .border-l-black\/95 { border-left-color: rgb(29 32 34 / 0.95); } .border-l-blue { --tw-border-opacity: 1; border-left-color: rgb(55 135 255 / var(--tw-border-opacity)); } .border-l-blue-clicked { --tw-border-opacity: 1; border-left-color: rgb(12 99 231 / var(--tw-border-opacity)); } .border-l-blue-clicked\/0 { border-left-color: rgb(12 99 231 / 0); } .border-l-blue-clicked\/10 { border-left-color: rgb(12 99 231 / 0.1); } .border-l-blue-clicked\/100 { border-left-color: rgb(12 99 231 / 1); } .border-l-blue-clicked\/15 { border-left-color: rgb(12 99 231 / 0.15); } .border-l-blue-clicked\/20 { border-left-color: rgb(12 99 231 / 0.2); } .border-l-blue-clicked\/25 { border-left-color: rgb(12 99 231 / 0.25); } .border-l-blue-clicked\/30 { border-left-color: rgb(12 99 231 / 0.3); } .border-l-blue-clicked\/35 { border-left-color: rgb(12 99 231 / 0.35); } .border-l-blue-clicked\/40 { border-left-color: rgb(12 99 231 / 0.4); } .border-l-blue-clicked\/45 { border-left-color: rgb(12 99 231 / 0.45); } .border-l-blue-clicked\/5 { border-left-color: rgb(12 99 231 / 0.05); } .border-l-blue-clicked\/50 { border-left-color: rgb(12 99 231 / 0.5); } .border-l-blue-clicked\/55 { border-left-color: rgb(12 99 231 / 0.55); } .border-l-blue-clicked\/60 { border-left-color: rgb(12 99 231 / 0.6); } .border-l-blue-clicked\/65 { border-left-color: rgb(12 99 231 / 0.65); } .border-l-blue-clicked\/70 { border-left-color: rgb(12 99 231 / 0.7); } .border-l-blue-clicked\/75 { border-left-color: rgb(12 99 231 / 0.75); } .border-l-blue-clicked\/80 { border-left-color: rgb(12 99 231 / 0.8); } .border-l-blue-clicked\/85 { border-left-color: rgb(12 99 231 / 0.85); } .border-l-blue-clicked\/90 { border-left-color: rgb(12 99 231 / 0.9); } .border-l-blue-clicked\/95 { border-left-color: rgb(12 99 231 / 0.95); } .border-l-blue-light { --tw-border-opacity: 1; border-left-color: rgb(0 209 255 / var(--tw-border-opacity)); } .border-l-blue-light\/0 { border-left-color: rgb(0 209 255 / 0); } .border-l-blue-light\/10 { border-left-color: rgb(0 209 255 / 0.1); } .border-l-blue-light\/100 { border-left-color: rgb(0 209 255 / 1); } .border-l-blue-light\/15 { border-left-color: rgb(0 209 255 / 0.15); } .border-l-blue-light\/20 { border-left-color: rgb(0 209 255 / 0.2); } .border-l-blue-light\/25 { border-left-color: rgb(0 209 255 / 0.25); } .border-l-blue-light\/30 { border-left-color: rgb(0 209 255 / 0.3); } .border-l-blue-light\/35 { border-left-color: rgb(0 209 255 / 0.35); } .border-l-blue-light\/40 { border-left-color: rgb(0 209 255 / 0.4); } .border-l-blue-light\/45 { border-left-color: rgb(0 209 255 / 0.45); } .border-l-blue-light\/5 { border-left-color: rgb(0 209 255 / 0.05); } .border-l-blue-light\/50 { border-left-color: rgb(0 209 255 / 0.5); } .border-l-blue-light\/55 { border-left-color: rgb(0 209 255 / 0.55); } .border-l-blue-light\/60 { border-left-color: rgb(0 209 255 / 0.6); } .border-l-blue-light\/65 { border-left-color: rgb(0 209 255 / 0.65); } .border-l-blue-light\/70 { border-left-color: rgb(0 209 255 / 0.7); } .border-l-blue-light\/75 { border-left-color: rgb(0 209 255 / 0.75); } .border-l-blue-light\/80 { border-left-color: rgb(0 209 255 / 0.8); } .border-l-blue-light\/85 { border-left-color: rgb(0 209 255 / 0.85); } .border-l-blue-light\/90 { border-left-color: rgb(0 209 255 / 0.9); } .border-l-blue-light\/95 { border-left-color: rgb(0 209 255 / 0.95); } .border-l-blue\/0 { border-left-color: rgb(55 135 255 / 0); } .border-l-blue\/10 { border-left-color: rgb(55 135 255 / 0.1); } .border-l-blue\/100 { border-left-color: rgb(55 135 255 / 1); } .border-l-blue\/15 { border-left-color: rgb(55 135 255 / 0.15); } .border-l-blue\/20 { border-left-color: rgb(55 135 255 / 0.2); } .border-l-blue\/25 { border-left-color: rgb(55 135 255 / 0.25); } .border-l-blue\/30 { border-left-color: rgb(55 135 255 / 0.3); } .border-l-blue\/35 { border-left-color: rgb(55 135 255 / 0.35); } .border-l-blue\/40 { border-left-color: rgb(55 135 255 / 0.4); } .border-l-blue\/45 { border-left-color: rgb(55 135 255 / 0.45); } .border-l-blue\/5 { border-left-color: rgb(55 135 255 / 0.05); } .border-l-blue\/50 { border-left-color: rgb(55 135 255 / 0.5); } .border-l-blue\/55 { border-left-color: rgb(55 135 255 / 0.55); } .border-l-blue\/60 { border-left-color: rgb(55 135 255 / 0.6); } .border-l-blue\/65 { border-left-color: rgb(55 135 255 / 0.65); } .border-l-blue\/70 { border-left-color: rgb(55 135 255 / 0.7); } .border-l-blue\/75 { border-left-color: rgb(55 135 255 / 0.75); } .border-l-blue\/80 { border-left-color: rgb(55 135 255 / 0.8); } .border-l-blue\/85 { border-left-color: rgb(55 135 255 / 0.85); } .border-l-blue\/90 { border-left-color: rgb(55 135 255 / 0.9); } .border-l-blue\/95 { border-left-color: rgb(55 135 255 / 0.95); } .border-l-design_notes { --tw-border-opacity: 1; border-left-color: rgb(151 71 255 / var(--tw-border-opacity)); } .border-l-design_notes\/0 { border-left-color: rgb(151 71 255 / 0); } .border-l-design_notes\/10 { border-left-color: rgb(151 71 255 / 0.1); } .border-l-design_notes\/100 { border-left-color: rgb(151 71 255 / 1); } .border-l-design_notes\/15 { border-left-color: rgb(151 71 255 / 0.15); } .border-l-design_notes\/20 { border-left-color: rgb(151 71 255 / 0.2); } .border-l-design_notes\/25 { border-left-color: rgb(151 71 255 / 0.25); } .border-l-design_notes\/30 { border-left-color: rgb(151 71 255 / 0.3); } .border-l-design_notes\/35 { border-left-color: rgb(151 71 255 / 0.35); } .border-l-design_notes\/40 { border-left-color: rgb(151 71 255 / 0.4); } .border-l-design_notes\/45 { border-left-color: rgb(151 71 255 / 0.45); } .border-l-design_notes\/5 { border-left-color: rgb(151 71 255 / 0.05); } .border-l-design_notes\/50 { border-left-color: rgb(151 71 255 / 0.5); } .border-l-design_notes\/55 { border-left-color: rgb(151 71 255 / 0.55); } .border-l-design_notes\/60 { border-left-color: rgb(151 71 255 / 0.6); } .border-l-design_notes\/65 { border-left-color: rgb(151 71 255 / 0.65); } .border-l-design_notes\/70 { border-left-color: rgb(151 71 255 / 0.7); } .border-l-design_notes\/75 { border-left-color: rgb(151 71 255 / 0.75); } .border-l-design_notes\/80 { border-left-color: rgb(151 71 255 / 0.8); } .border-l-design_notes\/85 { border-left-color: rgb(151 71 255 / 0.85); } .border-l-design_notes\/90 { border-left-color: rgb(151 71 255 / 0.9); } .border-l-design_notes\/95 { border-left-color: rgb(151 71 255 / 0.95); } .border-l-ds { border-left-color: rgba(23, 168, 81, 0.1); } .border-l-ds\/0 { border-left-color: rgba(23, 168, 81, 0); } .border-l-ds\/10 { border-left-color: rgba(23, 168, 81, 0.1); } .border-l-ds\/100 { border-left-color: rgba(23, 168, 81, 1); } .border-l-ds\/15 { border-left-color: rgba(23, 168, 81, 0.15); } .border-l-ds\/20 { border-left-color: rgba(23, 168, 81, 0.2); } .border-l-ds\/25 { border-left-color: rgba(23, 168, 81, 0.25); } .border-l-ds\/30 { border-left-color: rgba(23, 168, 81, 0.3); } .border-l-ds\/35 { border-left-color: rgba(23, 168, 81, 0.35); } .border-l-ds\/40 { border-left-color: rgba(23, 168, 81, 0.4); } .border-l-ds\/45 { border-left-color: rgba(23, 168, 81, 0.45); } .border-l-ds\/5 { border-left-color: rgba(23, 168, 81, 0.05); } .border-l-ds\/50 { border-left-color: rgba(23, 168, 81, 0.5); } .border-l-ds\/55 { border-left-color: rgba(23, 168, 81, 0.55); } .border-l-ds\/60 { border-left-color: rgba(23, 168, 81, 0.6); } .border-l-ds\/65 { border-left-color: rgba(23, 168, 81, 0.65); } .border-l-ds\/70 { border-left-color: rgba(23, 168, 81, 0.7); } .border-l-ds\/75 { border-left-color: rgba(23, 168, 81, 0.75); } .border-l-ds\/80 { border-left-color: rgba(23, 168, 81, 0.8); } .border-l-ds\/85 { border-left-color: rgba(23, 168, 81, 0.85); } .border-l-ds\/90 { border-left-color: rgba(23, 168, 81, 0.9); } .border-l-ds\/95 { border-left-color: rgba(23, 168, 81, 0.95); } .border-l-gold-100 { --tw-border-opacity: 1; border-left-color: rgb(212 176 76 / var(--tw-border-opacity)); } .border-l-gold-100\/0 { border-left-color: rgb(212 176 76 / 0); } .border-l-gold-100\/10 { border-left-color: rgb(212 176 76 / 0.1); } .border-l-gold-100\/100 { border-left-color: rgb(212 176 76 / 1); } .border-l-gold-100\/15 { border-left-color: rgb(212 176 76 / 0.15); } .border-l-gold-100\/20 { border-left-color: rgb(212 176 76 / 0.2); } .border-l-gold-100\/25 { border-left-color: rgb(212 176 76 / 0.25); } .border-l-gold-100\/30 { border-left-color: rgb(212 176 76 / 0.3); } .border-l-gold-100\/35 { border-left-color: rgb(212 176 76 / 0.35); } .border-l-gold-100\/40 { border-left-color: rgb(212 176 76 / 0.4); } .border-l-gold-100\/45 { border-left-color: rgb(212 176 76 / 0.45); } .border-l-gold-100\/5 { border-left-color: rgb(212 176 76 / 0.05); } .border-l-gold-100\/50 { border-left-color: rgb(212 176 76 / 0.5); } .border-l-gold-100\/55 { border-left-color: rgb(212 176 76 / 0.55); } .border-l-gold-100\/60 { border-left-color: rgb(212 176 76 / 0.6); } .border-l-gold-100\/65 { border-left-color: rgb(212 176 76 / 0.65); } .border-l-gold-100\/70 { border-left-color: rgb(212 176 76 / 0.7); } .border-l-gold-100\/75 { border-left-color: rgb(212 176 76 / 0.75); } .border-l-gold-100\/80 { border-left-color: rgb(212 176 76 / 0.8); } .border-l-gold-100\/85 { border-left-color: rgb(212 176 76 / 0.85); } .border-l-gold-100\/90 { border-left-color: rgb(212 176 76 / 0.9); } .border-l-gold-100\/95 { border-left-color: rgb(212 176 76 / 0.95); } .border-l-gold-800 { --tw-border-opacity: 1; border-left-color: rgb(62 47 17 / var(--tw-border-opacity)); } .border-l-gold-800\/0 { border-left-color: rgb(62 47 17 / 0); } .border-l-gold-800\/10 { border-left-color: rgb(62 47 17 / 0.1); } .border-l-gold-800\/100 { border-left-color: rgb(62 47 17 / 1); } .border-l-gold-800\/15 { border-left-color: rgb(62 47 17 / 0.15); } .border-l-gold-800\/20 { border-left-color: rgb(62 47 17 / 0.2); } .border-l-gold-800\/25 { border-left-color: rgb(62 47 17 / 0.25); } .border-l-gold-800\/30 { border-left-color: rgb(62 47 17 / 0.3); } .border-l-gold-800\/35 { border-left-color: rgb(62 47 17 / 0.35); } .border-l-gold-800\/40 { border-left-color: rgb(62 47 17 / 0.4); } .border-l-gold-800\/45 { border-left-color: rgb(62 47 17 / 0.45); } .border-l-gold-800\/5 { border-left-color: rgb(62 47 17 / 0.05); } .border-l-gold-800\/50 { border-left-color: rgb(62 47 17 / 0.5); } .border-l-gold-800\/55 { border-left-color: rgb(62 47 17 / 0.55); } .border-l-gold-800\/60 { border-left-color: rgb(62 47 17 / 0.6); } .border-l-gold-800\/65 { border-left-color: rgb(62 47 17 / 0.65); } .border-l-gold-800\/70 { border-left-color: rgb(62 47 17 / 0.7); } .border-l-gold-800\/75 { border-left-color: rgb(62 47 17 / 0.75); } .border-l-gold-800\/80 { border-left-color: rgb(62 47 17 / 0.8); } .border-l-gold-800\/85 { border-left-color: rgb(62 47 17 / 0.85); } .border-l-gold-800\/90 { border-left-color: rgb(62 47 17 / 0.9); } .border-l-gold-800\/95 { border-left-color: rgb(62 47 17 / 0.95); } .border-l-gray-100 { --tw-border-opacity: 1; border-left-color: rgb(175 175 177 / var(--tw-border-opacity)); } .border-l-gray-100\/0 { border-left-color: rgb(175 175 177 / 0); } .border-l-gray-100\/10 { border-left-color: rgb(175 175 177 / 0.1); } .border-l-gray-100\/100 { border-left-color: rgb(175 175 177 / 1); } .border-l-gray-100\/15 { border-left-color: rgb(175 175 177 / 0.15); } .border-l-gray-100\/20 { border-left-color: rgb(175 175 177 / 0.2); } .border-l-gray-100\/25 { border-left-color: rgb(175 175 177 / 0.25); } .border-l-gray-100\/30 { border-left-color: rgb(175 175 177 / 0.3); } .border-l-gray-100\/35 { border-left-color: rgb(175 175 177 / 0.35); } .border-l-gray-100\/40 { border-left-color: rgb(175 175 177 / 0.4); } .border-l-gray-100\/45 { border-left-color: rgb(175 175 177 / 0.45); } .border-l-gray-100\/5 { border-left-color: rgb(175 175 177 / 0.05); } .border-l-gray-100\/50 { border-left-color: rgb(175 175 177 / 0.5); } .border-l-gray-100\/55 { border-left-color: rgb(175 175 177 / 0.55); } .border-l-gray-100\/60 { border-left-color: rgb(175 175 177 / 0.6); } .border-l-gray-100\/65 { border-left-color: rgb(175 175 177 / 0.65); } .border-l-gray-100\/70 { border-left-color: rgb(175 175 177 / 0.7); } .border-l-gray-100\/75 { border-left-color: rgb(175 175 177 / 0.75); } .border-l-gray-100\/80 { border-left-color: rgb(175 175 177 / 0.8); } .border-l-gray-100\/85 { border-left-color: rgb(175 175 177 / 0.85); } .border-l-gray-100\/90 { border-left-color: rgb(175 175 177 / 0.9); } .border-l-gray-100\/95 { border-left-color: rgb(175 175 177 / 0.95); } .border-l-gray-200 { --tw-border-opacity: 1; border-left-color: rgb(206 214 222 / var(--tw-border-opacity)); } .border-l-gray-200\/0 { border-left-color: rgb(206 214 222 / 0); } .border-l-gray-200\/10 { border-left-color: rgb(206 214 222 / 0.1); } .border-l-gray-200\/100 { border-left-color: rgb(206 214 222 / 1); } .border-l-gray-200\/15 { border-left-color: rgb(206 214 222 / 0.15); } .border-l-gray-200\/20 { border-left-color: rgb(206 214 222 / 0.2); } .border-l-gray-200\/25 { border-left-color: rgb(206 214 222 / 0.25); } .border-l-gray-200\/30 { border-left-color: rgb(206 214 222 / 0.3); } .border-l-gray-200\/35 { border-left-color: rgb(206 214 222 / 0.35); } .border-l-gray-200\/40 { border-left-color: rgb(206 214 222 / 0.4); } .border-l-gray-200\/45 { border-left-color: rgb(206 214 222 / 0.45); } .border-l-gray-200\/5 { border-left-color: rgb(206 214 222 / 0.05); } .border-l-gray-200\/50 { border-left-color: rgb(206 214 222 / 0.5); } .border-l-gray-200\/55 { border-left-color: rgb(206 214 222 / 0.55); } .border-l-gray-200\/60 { border-left-color: rgb(206 214 222 / 0.6); }