/* ------- Var Styles ------- */
*,
:before,
:after {
    /* Accent colours */
    --smart-tint3-rgba-25: rgba(182, 226, 255, 0.251);
    --smart-tint3: #DCF2FF;
    --smart-tint2-dark-rgb: 168 220 255;
    --smart-tint2-dark: #bbe1fe; /* (dark accent-lighter) */
    --smart-tint2-rgb: 140 208 254;
    --smart-tint2: #B1D7F5; /* (accent lighter) */
    --smart-tint1: #74ABDB; /* (shadow hover) */
    --smart-base-rgba-30: rgba(50, 154, 224, .3);
    --smart-base-rgb-50: rgb(50 154 224 / 0.502);
    --smart-base-25: #329ae040;
    --smart-base-50: #329ae080;
    --smart-base-rgb: 50 154 224;
    --smart-base: #3274B7; /* (accent) */
    --smart-shade1-rgb: 35 125 185;
    --smart-shade1: #034885; /* (accent darker) */
    --smart-shade2: #00355F; /* (accent darker 2) */
    --smart-shade3-rgb: 8 42 64;
    --smart-shade3: #002946; /* (accent dark) */
    --smart-shade4: #002238;
    
    --smart-light-base: #F5FBFF; /* (bg-light-base, use tint4) */
    --smart-light-base-rgb: 237 242 245;

    /* ------ Jacarta Colours ------ */
    --smart-neutral-tint4: #FBFDFF; /* (50) */
    --smart-neutral-tint4-rgb: 227 237 244; /* (50) */
    --smart-neutral-tint3-dark: #d1e1ec; /* (dark fill, jacarta 100) */
    --smart-neutral-tint3-dark-rgb: 209 225 236;
    --smart-neutral-tint3: #ECF6FC; /* (100) */
    --smart-neutral-tint3-rgb: 199 217 230; /* (100) */
    --smart-neutral-tint2-dark: #CEE3F0; /* (dark border-200, fill, color) */
    --smart-neutral-tint2-dark-rgb: 184 210 227; /* (dark border-200, fill, color) */
    --smart-neutral-tint2: #B2CFE3; /* (200) */
    --smart-neutral-tint2-rgb: 152 183 204; /* (200) */
    --smart-neutral-tint1: #98BCD5; /* (300, use tint1) */
    --smart-neutral-tint1-rgb: 125 159 183; /* (300) */
    --smart-neutral-base1: #98BCD5; /* (300, use tint1) */
    --smart-neutral-base1-rgb: 125 159 183; /* (300) */
    --smart-neutral-base: #577D97; /* (placeholder 1) */
    --smart-neutral-shade1: #3b5a70; /* (400) */
    --smart-neutral-shade1-rgb: 67 98 119; /* (400) */
    --smart-neutral-shade2: #2C4455; /* (placeholder 2) */
    --smart-neutral-shade2-rgb: 44 68 85;
    --smart-neutral-shade3: #192934; /* (500) */
    --smart-neutral-shade3-rgb: 42 61 74; /* (500) */
    --smart-neutral-shade4: #17252f; /* (600) */
    --smart-neutral-shade4-rgb: 30 44 54; /* (600) */
    --smart-neutral-shade5: #121D25; /* (700) */
    --smart-neutral-shade5-rgb: 22 32 39; /* (700) */
    --smart-neutral-shade5-50: #16202780; /* (sticky page header) */
    --smart-neutral-shade6: #111e2a; /* (800, gradient) */
    --smart-neutral-shade6-rgb: 13 19 24; /* (800, gradient) */
    --smart-neutral-shade7: #0f181f; /* (900) */
    --smart-neutral-shade7-rgb: 9 13 16; /* (900) */
    --smart-neutral-shade7-rgba10: rgba(9, 13, 16, .1);
    --smart-neutral-shade7-20: #090d1033; /* after */
    --smart-neutral-shade7-25: #090d1040; /* before */
    --smart-neutral-shade7-50: #090d1080; /* after */
    --smart-neutral-shade7-60: #090d1099; /* after */
    
    /* Other Template Styles */
    --smart-green-rgb: 16 185 129; /* green, success */
    --smart-red-rgb: 239 68 68; /* red, error */
    --smart-blue-rgb: 66 138 248; /* blue, hover */
    --smart-blue-tint3: #dfe3ef; /* rgb(223 227 239) */
    --smart-blue-tint4: #eef1f9; /* rgb(238 241 249) */
    --smart-orange-rgb: 250 109 30; /* bright orange */
    --col-737EF2-rgb: 115 126 242;
    --col-8DD059-rgb: 141 208 89;
    --col-F35BC7-rgb: 243 91 199;
    --shadow-10b981: #773ff8; /* shadow green, why us home */
    --shadow-10b981-hover: rgba(119, 63, 248, 0.102);
    --smart-green-rgba-30: rgba(119, 63, 248, 0.3);
    --shadow-ef4444: #c82dca; /* shadow red, why us home */
    --shadow-ef4444-hover: #c82dca1a;
    --smart-red-rgba-30: rgba(200, 45, 202, 0.3);
    --animate-grad-270: linear-gradient(270deg, #ff7356, #ff59e2 25.52%, #52ddf6 50%, #eadf4e 76.04%, #ff7356);
    --animate-grad-diag-270: linear-gradient(270deg, #4158d0, #c850c0 25.52%, #ffcc70 50%, #ff7070 76.04%, #4158d0);
    --grad-from-010107: #020304;
    --grad-to-010107-rgb: rgb(2 3 4 / 0);

    --tw-ring-color: var(--smart-base) !important;
    --tw-ring-color-50: var(--smart-base-rgb-50) !important;

    --svg-blue: #428af8;
    --svg-green: #773ff8;
    --svg-orange: #feb240;
    --svg-red: #c82dca;
}

::backdrop {
    --tw-ring-color: var(--tw-ring-color-50);
}

:root{
    /* Part of the root in the original CSS */
    --swiper-theme-color: var(--smart-shade1);
}

.filter-active {
    background-color: rgb(var(--smart-neutral-tint3-dark-rgb) / var(--tw-bg-opacity))
}

:is(.dark .filter-active) {
    background-color: rgb(var(--smart-neutral-shade5-rgb) / var(--tw-bg-opacity))
}

/* ------- Text Format Styles -----*/
p > a {
    color: var(--smart-base)
}
p > a:hover {
    color: var(--smart-shade3)
}
:is(.dark p > a:hover) {
    color: var(--smart-tint2)
}

#v3HomeCommitment ul, #v3HomeCommitment ol {
    color: rgb(var(--smart-neutral-shade5-rgb) / var(--tw-text-opacity))
}

/* ------ Form Styles ------ */

input::-moz-placeholder, textarea::-moz-placeholder {
    color: var(--smart-neutral-shade2)
}

input::placeholder, textarea::placeholder {
    color: var(--smart-neutral-shade2)
}

[type=text], input:where(:not([type])), [type=email], [type=url], [type=password], [type=number], [type=date], [type=datetime-local], [type=month], [type=search], [type=tel], [type=time], [type=week], [multiple], textarea, select {
    border-color: var(--smart-neutral-shade2)
}

[type=text]:focus, input:where(:not([type])):focus, [type=email]:focus, [type=url]:focus, [type=password]:focus, [type=number]:focus, [type=date]:focus, [type=datetime-local]:focus, [type=month]:focus, [type=search]:focus, [type=tel]:focus, [type=time]:focus, [type=week]:focus, [multiple]:focus, textarea:focus, select:focus {
    border-color: var(--tw-ring-color)
}

[type=checkbox], [type=radio] {
    color: var(--tw-ring-color);
    border-color: var(--smart-neutral-shade2)
}

[type=checkbox]:focus, [type=radio]:focus {
    --tw-ring-color: var(--tw-ring-color)
}

/* ------ Pseudo and Backdrop Styles ------- */
*, :before, :after {
    --tw-ring-color: var(--tw-ring-color-50)
}
::backdrop {
    --tw-ring-color: var(--tw-ring-color-50)
}

/* ------- Divide Styles ------- */
.divide-jacarta-100>:not([hidden])~:not([hidden]) {
    border-color: rgb(var(--smart-neutral-tint3-rgb) / var(--tw-divide-opacity))
}

/* ------- Border Styles ------ */
.border-accent {
    border-color: rgb(var(--smart-base-rgb) / var(--tw-border-opacity))
}

.border-accent-lighter {
    border-color: rgb(var(--smart-tint2-rgb) / var(--tw-border-opacity))
}

.border-jacarta-100 {
    border-color: rgb(var(--smart-neutral-tint3-rgb) / var(--tw-border-opacity))
}

.border-jacarta-200 {
    border-color: rgb(var(--smart-neutral-tint2-rgb) / var(--tw-border-opacity))
}

.border-jacarta-600 {
    border-color: rgb(var(--smart-neutral-shade4-rgb) / var(--tw-border-opacity))
}

/* ------- BG Styles ------- */
.\!bg-accent {
    background-color: rgb(var(--smart-base-rgb) / var(--tw-bg-opacity)) !important
}

.bg-accent {
    background-color: rgb(var(--smart-base-rgb) / var(--tw-bg-opacity))
}

.bg-accent-darker {
    background-color: rgb(var(--smart-shade1-rgb) / var(--tw-bg-opacity))
}

.bg-accent-dark {
    background-color: rgb(var(--smart-shade3-rgb) / var(--tw-bg-opacity))
}

.bg-accent-lighter {
    background-color: rgb(var(--smart-tint2-rgb) / var(--tw-bg-opacity))
}

.bg-jacarta-50 {
    background-color: rgb(var(--smart-neutral-tint4-rgb) / var(--tw-bg-opacity))
}

.bg-jacarta-100 {
    background-color: rgb(var(--smart-neutral-tint3-rgb) / var(--tw-bg-opacity))
}

.bg-jacarta-600 {
    background-color: rgb(var(--smart-neutral-shade4-rgb) / var(--tw-bg-opacity))
}

.bg-jacarta-700 {
    background-color: rgb(var(--smart-neutral-shade5-rgb) / var(--tw-bg-opacity))
}

.bg-jacarta-800 {
    background-color: rgb(var(--smart-neutral-shade6-rgb) / var(--tw-bg-opacity))
}

.bg-jacarta-900 {
    background-color: rgb(var(--smart-neutral-shade7-rgb) / var(--tw-bg-opacity))
}

.bg-light-base {
    background-color: rgb(var(--smart-light-base-rgb) / var(--tw-text-opacity))
}

/* ------- SVG Fill Styles ------- */
.fill-accent {
    fill: var(--smart-base)
}

.fill-accent-dark {
    fill: var(--smart-shade3)
}

.fill-accent\/25 {
    fill: var(--smart-base-25)
}

.fill-jacarta-100 {
    fill: var(--smart-neutral-tint3)
}

.fill-jacarta-200 {
    fill: var(--smart-neutral-tint2)
}

.fill-jacarta-300 {
    fill: var(--smart-neutral-base1)
}

.fill-jacarta-400 {
    fill: var(--smart-neutral-shade1)
}

.fill-jacarta-50 {
    fill: var(--smart-neutral-tint4)
}

.fill-jacarta-500 {
    fill: var(--smart-neutral-shade3)
}

.fill-jacarta-700 {
    fill: var(--smart-neutral-shade5)
}

.fill-blue {
    fill: var(--svg-blue)
}
.fill-green {
    fill: var(--svg-green)
}
.fill-orange {
    fill: var(--svg-orange)
}
.fill-red {
    fill: var(--svg-red)
}

/* ------- Text Colour Styles ------ */
.\!text-green {
    color: rgb(var(--smart-green-rgb) / var(--tw-text-opacity)) !important
}

.\!text-red {
    color: rgb(var(--smart-red-rgb) / var(--tw-text-opacity)) !important
}

.text-\[\#737EF2\] {
    color: rgb(var(--col-737EF2-rgb) / var(--tw-text-opacity))
}

.text-\[\#8DD059\] {
    color: rgb(var(--col-8DD059-rgb) / var(--tw-text-opacity))
}

.text-\[\#F35BC7\] {
    color: rgb(var(--col-F35BC7-rgb) / var(--tw-text-opacity))
}

.text-accent {
    color: rgb(var(--smart-base-rgb) / var(--tw-text-opacity))
}

.text-accent-darker {
    color: rgb(var(--smart-shade1-rgb) / var(--tw-text-opacity))
}

.text-accent-dark {
    color: rgb(var(--smart-shade3-rgb) / var(--tw-text-opacity))
}

.text-blue {
    color: rgb(var(--smart-blue-rgb) / var(--tw-text-opacity))
}

.text-green {
    color: rgb(var(--smart-green-rgb) / var(--tw-text-opacity))
}

.text-jacarta-200 {
    color: rgb(var(--smart-neutral-tint2-rgb) / var(--tw-text-opacity))
}

.text-jacarta-300 {
    color: rgb(var(--smart-neutral-base1-rgb) / var(--tw-text-opacity))
}

.text-jacarta-400 {
    color: rgb(var(--smart-neutral-shade1-rgb) / var(--tw-text-opacity))
}

.text-jacarta-50 {
    color: rgb(var(--smart-neutral-tint4-rgb) / var(--tw-text-opacity))
}

.text-jacarta-500 {
    color: rgb(var(--smart-neutral-shade3-rgb) / var(--tw-text-opacity))
}

.text-jacarta-600 {
    color: rgb(var(--smart-neutral-shade4-rgb) / var(--tw-text-opacity))
}

.text-jacarta-700, p {
    color: rgb(var(--smart-neutral-shade5-rgb) / var(--tw-text-opacity))
}

.text-orange-bright {
    color: rgb(var(--smart-orange-rgb) / var(--tw-text-opacity))
}

.text-red {
    color: rgb(var(--smart-red-rgb) / var(--tw-text-opacity))
}

/* ------- Placeholders ------- */
.placeholder-jacarta-300::-moz-placeholder {
    color: rgb(var(--smart-neutral-base1-rgb) / var(--tw-placeholder-opacity))
}

.placeholder-jacarta-300::placeholder {
    color: rgb(var(--smart-neutral-base1-rgb) / var(--tw-placeholder-opacity))
}

.placeholder-jacarta-500::-moz-placeholder {
    color: rgb(var(--smart-neutral-shade3-rgb) / var(--tw-placeholder-opacity))
}

.placeholder-jacarta-500::placeholder {
    color: rgb(var(--smart-neutral-shade3-rgb) / var(--tw-placeholder-opacity))
}


/* ------- Shadows ------- */
.shadow-2xl {
    --tw-shadow: 0px 25px 50px -12px var(--smart-neutral-shade7-rgba10), 0px 12px 24px 0px var(--smart-neutral-shade7-rgba10)
}

.shadow-\[0_5px_0_0_\#10b981\] {
    --tw-shadow: 0 5px 0 0 var(--shadow-10b981)
}

.shadow-\[0_5px_0_0_\#8358ff\] {
    --tw-shadow: 0 5px 0 0 var(--smart-base)
}

.shadow-\[0_5px_0_0_\#ef4444\] {
    --tw-shadow: 0 5px 0 0 var(--shadow-ef4444)
}

.shadow-accent-volume {
    --tw-shadow: 5px 5px 10px var(--smart-tint3-rgba-25), inset 2px 2px 6px var(--smart-tint1), inset -5px -5px 10px var(--smart-shade2)
}

.shadow-md {
    --tw-shadow: 0px 2px 4px -2px var(--smart-neutral-shade7-rgba10), 0px 4px 6px -1px var(--smart-neutral-shade7-rgba10)
}

.shadow-sm {
    --tw-shadow: 0px 1px 2px 0px var(--smart-neutral-shade7-rgba10)
}

.shadow-white-volume {
    --tw-shadow: 5px 5px 10px var(--smart-tint3-rgba-25), inset 2px 2px 6px var(--smart-blue-tint4), inset -5px -5px 10px var(--smart-blue-tint3)
}

.shadow-xl {
    --tw-shadow: 0px 8px 10px -6px var(--smart-neutral-shade7-rgba10), 0px 20px 25px -5px var(--smart-neutral-shade7-rgba10)
}

/* ------ Scrollbars ------ */
.scrollbar-custom::-webkit-scrollbar-track {
    background-color: rgb(var(--smart-neutral-tint3-dark) / var(--tw-bg-opacity))
}

:is(.dark .scrollbar-custom)::-webkit-scrollbar-track {
    background-color: rgb(var(--smart-neutral-shade6-rgb) / var(--tw-bg-opacity))
}

.scrollbar-custom::-webkit-scrollbar-thumb {
    background-color: rgb(var(--smart-neutral-base1-rgb) / var(--tw-bg-opacity))
}

:is(.dark .scrollbar-custom)::-webkit-scrollbar-thumb {
    background-color: rgb(var(--smart-neutral-shade4-rgb) / var(--tw-bg-opacity))
}

/* ------ Swiper Styles ------- */
.swiper-pagination-bullet {
    background-color: rgb(var(--smart-neutral-tint2-rgb) / var(--tw-bg-opacity))
}

.swiper-pagination-bullet-active, .swiper-pagination-bullet:hover, .swiper-pagination-bullet:focus {
    background-color: rgb(var(--smart-base-rgb) / var(--tw-bg-opacity))
}

.swiper-lazy-preloader {
    border-color: rgb(var(--smart-base-rgb) / var(--tw-border-opacity))
}

.swiper-scrollbar {
    background-color: rgb(var(--smart-neutral-tint3-dark) / var(--tw-bg-opacity))
}

:is(.dark .swiper-scrollbar) {
    background-color: rgb(var(--smart-neutral-shade4-rgb) / var(--tw-bg-opacity))
}

.swiper-scrollbar-drag {
    background-color: rgb(var(--smart-base-rgb) / var(--tw-bg-opacity))
}

/* ----- Tippy Styles ----- */
.tippy-box[data-theme~=xhibiter] {
    background-color: rgb(var(--smart-neutral-shade5-rgb) / var(--tw-bg-opacity))
}

.tippy-box[data-theme~=xhibiter][data-placement^=top]>.tippy-arrow:before {
    border-top-color: rgb(var(--smart-neutral-shade5-rgb) / var(--tw-border-opacity))
}

.tippy-box[data-theme~=xhibiter][data-placement^=bottom]>.tippy-arrow:before {
    border-bottom-color: rgb(var(--smart-neutral-shade5-rgb) / var(--tw-border-opacity))
}

.tippy-box[data-theme~=xhibiter][data-placement^=left]>.tippy-arrow:before {
    border-left-color: rgb(var(--smart-neutral-shade5-rgb) / var(--tw-border-opacity))
}

.tippy-box[data-theme~=xhibiter][data-placement^=right]>.tippy-arrow:before {
    border-right-color: rgb(var(--smart-neutral-shade5-rgb) / var(--tw-border-opacity))
}

/* ------- JS Page Header and Nav Styles ------- */
.js-page-header--is-sticky.page-header--transparent, .dark .js-page-header--is-sticky {
    background-color: var(--smart-neutral-shade5-50)
}

.nav-link.active {
    color: rgb(var(--smart-neutral-shade5-rgb) / var(--tw-text-opacity))
}

.nav-link.active:after {
    background-color: rgb(var(--smart-base-rgb) / var(--tw-bg-opacity))
}

.nav-link--style-2.active {
    --tw-shadow: 0px 25px 50px -12px var(--smart-neutral-shade7-rgba10), 0px 12px 24px 0px var(--smart-neutral-shade7-rgba10)
}

:is(.dark .nav-link--style-2.active) {
    background-color: rgb(var(--smart-neutral-shade5-rgb) / var(--tw-bg-opacity))
}

.nav-link--style-3.active:before {
    border-left-color: rgb(var(--smart-neutral-tint2-rgb) / var(--tw-border-opacity))
}

.nav-link--style-4.active {
    background-color: rgb(var(--smart-neutral-shade5-rgb) / var(--tw-bg-opacity))
}

.nav-link--style-5:hover {
    background-color: rgb(var(--smart-neutral-tint3-dark) / var(--tw-bg-opacity))
}

:is(.dark .nav-link--style-5:hover) {
    background-color: rgb(var(--smart-neutral-shade4-rgb) / var(--tw-bg-opacity))
}

.nav-link--style-5.active {
    background-color: rgb(var(--smart-neutral-tint3-dark) / var(--tw-bg-opacity))
}

:is(.dark .nav-link--style-5.active) {
    background-color: rgb(var(--smart-neutral-shade4-rgb) / var(--tw-bg-opacity))
}

/* ------- Modal Styles --------- */
/*:is(.dark .modal-content) {
    background-color: rgb(var(--smart-neutral-shade5-rgb) / var(--tw-bg-opacity))
}

.modal-header {
    border-color: rgb(var(--smart-neutral-tint3-dark) / var(--tw-border-opacity))
}

:is(.dark .modal-header) {
    border-color: rgb(var(--smart-neutral-shade4-rgb) / var(--tw-border-opacity))
}

.modal-title {
    color: rgb(var(--smart-neutral-shade5-rgb) / var(--tw-text-opacity))
}

.modal-footer {
    border-color: rgb(var(--smart-neutral-tint3-dark) / var(--tw-border-opacity))
}

:is(.dark .modal-footer) {
    border-color: rgb(var(--smart-neutral-shade4-rgb) / var(--tw-border-opacity))
}

.modal-backdrop {
    background-color: rgb(var(--smart-neutral-shade7-rgb) / var(--tw-bg-opacity))
}

.sc-modal-outer .sc-modal {
    background-color: rgb(var(--smart-neutral-tint4-rgb) / var(--tw-bg-opacity)) !important
}

.modal-header, .sc-modal-header {
    border-color: rgb(var(--smart-neutral-tint3-dark) / var(--tw-border-opacity)) !important;
    background-color: rgb(var(--smart-neutral-tint3-dark-rgb) / var(--tw-bg-opacity)) !important
}

.modal-title {
    --tw-text-opacity: 1;
    color: rgb(var(--smart-neutral-shade6-rgb) / var(--tw-text-opacity))
}

.modal-footer, .sc-modal-footer {
    --tw-border-opacity: 1;
    border-color: rgb(var(--smart-neutral-tint3-dark-rgb) / var(--tw-border-opacity))
}

.sc-form-button {
    background-color: var(--smart-base) !important;
    color: #fff !important;
}

.modal-backdrop {
    background-color: rgb(var(--smart-neutral-shade7-rgb) / var(--tw-bg-opacity))
}

#sc-form-body .sc-form-renderer {
    box-shadow: none;
}
#sc-form-body [type=text],
#sc-form-body input:where(:not([type])),
#sc-form-body [type=email],
#sc-form-body [type=url],
#sc-form-body [type=password],
#sc-form-body [type=number],
#sc-form-body [type=date],
#sc-form-body [type=datetime-local],
#sc-form-body [type=month],
#sc-form-body [type=search],
#sc-form-body [type=tel],
#sc-form-body [type=time],
#sc-form-body [type=week],
#sc-form-body [multiple],
#sc-form-body textarea,
#sc-form-body select {
    border-color: var(--smart-neutral-shade2)
}

#sc-form-body [type=text]:focus,
#sc-form-body input:where(:not([type])):focus,
#sc-form-body [type=email]:focus,
#sc-form-body [type=url]:focus,
#sc-form-body [type=password]:focus,
#sc-form-body [type=number]:focus,
#sc-form-body [type=date]:focus,
#sc-form-body [type=datetime-local]:focus,
#sc-form-body [type=month]:focus,
#sc-form-body [type=search]:focus,
#sc-form-body [type=tel]:focus,
#sc-form-body [type=time]:focus,
#sc-form-body [type=week]:focus,
#sc-form-body [multiple]:focus,
#sc-form-body textarea:focus,
#sc-form-body select:focus {
    border-color: var(--tw-ring-color)
}
*/

/* ------- Article Styles ------- */
.article-content>h1, .article-content>h2, .article-content>h3, .article-content>h4, .article-content>h5, .article-content>h6 {
    color: rgb(var(--smart-neutral-shade5-rgb) / var(--tw-text-opacity))
}

:is(.dark .article-content>p) {
    color: rgb(var(--smart-neutral-base1-rgb) / var(--tw-text-opacity))
}

:is(.dark .article-content>ul), :is(.dark .article-content>ol) {
    color: rgb(var(--smart-neutral-base1-rgb) / var(--tw-text-opacity))
}

/* ------- Alert Styles ------- */
.alert-error {
    background-color: var(--shadow-ef4444-hover);
    color: rgb(var(--smart-red-rgb) / var(--tw-text-opacity))
}

.alert-success {
    background-color: var(--shadow-10b981-hover);
    color: rgb(var(--smart-green-rgb) / var(--tw-text-opacity))
}

.animate-gradient {
    background: var(--animate-grad-270)
}

.animate-gradientDiagonal {
    background: var(--animate-grad-diag-270)
}

/* ------- BG: Before and After styles ------- */
.before\:bg-jacarta-900\/25:before {
    background-color: var(--smart-neutral-shade7-25)
}

.after\:bg-jacarta-400:after {
    background-color: rgb(var(--smart-neutral-shade1-rgb) / var(--tw-bg-opacity))
}

.after\:bg-jacarta-900\/20:after {
    background-color: var(--smart-neutral-shade7-20)
}

.after\:bg-jacarta-900\/50:after {
    background-color: var(--smart-neutral-shade7-50)
}

.after\:bg-jacarta-900\/60:after {
    background-color: var(--smart-neutral-shade7-60)
}

.after\:from-\[\#010107\]:after {
    --tw-gradient-from: var(--grad-from-010107) var(--tw-gradient-from-position);
    --tw-gradient-to: var(--grad-to-010107-rgb) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

/* ------- Checked Styles ------- */
.checked\:bg-accent:checked {
    background-color: rgb(var(--smart-base-rgb) / var(--tw-bg-opacity))
}

/* ------- Hover Styles -------- */
.hover\:border-accent:hover {
    border-color: rgb(var(--smart-base-rgb) / var(--tw-border-opacity))
}

.hover\:bg-accent:hover {
    background-color: rgb(var(--smart-base-rgb) / var(--tw-bg-opacity))
}

.hover\:bg-accent-dark:hover {
    background-color: rgb(var(--smart-shade3-rgb) / var(--tw-bg-opacity))
}

.hover\:bg-jacarta-50:hover {
    background-color: rgb(var(--smart-neutral-tint4-rgb) / var(--tw-bg-opacity))
}

.hover\:bg-jacarta-100:hover {
    background-color: rgb(var(--smart-neutral-tint3-rgb) / var(--tw-bg-opacity))
}

.hover\:bg-jacarta-600:hover {
    background-color: rgb(var(--smart-neutral-shade4-rgb) / var(--tw-bg-opacity))
}

.hover\:bg-jacarta-700:hover {
    background-color: rgb(var(--smart-neutral-shade5-rgb) / var(--tw-bg-opacity))
}

.hover\:fill-red:hover {
    fill: var(--shadow-ef4444)
}

.hover\:text-accent:hover {
    color: rgb(var(--smart-base-rgb))
}

.hover\:text-blue:hover {
    color: rgb(var(--smart-blue-rgb) / var(--tw-text-opacity))
}

.hover\:text-jacarta-700:hover {
    color: rgb(var(--smart-neutral-shade5-rgb) / var(--tw-text-opacity))
}

.hover\:shadow-\[0_16px_24px_-8px_rgba\(131\,88\,255\,\.3\)\]:hover {
    --tw-shadow: 0 16px 24px -8px var(--smart-base-rgba-30)
}

.hover\:shadow-\[0_16px_24px_-8px_rgba\(16\,185\,129\,\.3\)\]:hover {
    --tw-shadow: 0 16px 24px -8px var(--smart-green-rgba-30)
}

.hover\:shadow-\[0_16px_24px_-8px_rgba\(239\,68\,68\,\.3\)\]:hover {
    --tw-shadow: 0 16px 24px -8px var(--smart-red-rgba-30)
}

.hover\:shadow-accent-volume:hover {
    --tw-shadow: 5px 5px 10px var(--smart-tint3-rgba-25), inset 2px 2px 6px var(--smart-tint1), inset -5px -5px 10px var(--smart-shade2)
}

.hover\:shadow-lg:hover {
    --tw-shadow: 0px 4px 6px -4px var(--smart-neutral-shade7-rgba10), 0px 10px 15px -3px var(--smart-neutral-shade7-rgba10)
}

.hover\:shadow-md:hover {
    --tw-shadow: 0px 2px 4px -2px var(--smart-neutral-shade7-rgba10), 0px 4px 6px -1px var(--smart-neutral-shade7-rgba10)
}

.hover\:shadow-xl:hover {
    --tw-shadow: 0px 8px 10px -6px var(--smart-neutral-shade7-rgba10), 0px 20px 25px -5px var(--smart-neutral-shade7-rgba10)
}

.hover\:ring-accent\/10:hover {
    --tw-ring-color: rgb(var(--smart-base-rgb) / .1)
}

.checked\:hover\:bg-accent:hover:checked {
    background-color: rgb(var(--smart-base-rgb) / var(--tw-bg-opacity))
}

/* ------ Focus ------ */
.focus\:bg-accent:focus {
    background-color: rgb(var(--smart-base-rgb) / var(--tw-bg-opacity))
}

.focus\:text-accent:focus {
    color: rgb(var(--smart-base-rgb))
}

.focus\:ring-accent:focus {
    --tw-ring-color: rgb(var(--smart-base-rgb) / var(--tw-ring-opacity))
}

.focus\:ring-accent\/20:focus {
    --tw-ring-color: rgb(var(--smart-base-rgb) / .2)
}

.checked\:focus\:bg-accent:focus:checked {
    background-color: rgb(var(--smart-base-rgb) / var(--tw-bg-opacity))
}

.group:hover .group-hover\:fill-accent {
    fill: var(--smart-base)
}

.group:hover .group-hover\:text-accent {
    color: rgb(var(--smart-base-rgb))
}

.group:hover .group-hover\:fill-jacarta-300 {
    fill: var(--smart-neutral-base1)
}

.group:hover .group-hover\:fill-jacarta-600 {
    fill: var(--smart-neutral-shade4)
}

/* -------------- Dark Theme Styles ------------- */
:is(.dark .dark\:divide-jacarta-600)>:not([hidden])~:not([hidden]) {
    border-color: rgb(var(--smart-neutral-shade4-rgb) / var(--tw-divide-opacity))
}

:is(.dark .dark\:border-jacarta-300) {
    border-color: rgb(var(--smart-neutral-base1-rgb) / var(--tw-border-opacity))
}

:is(.dark .dark\:border-jacarta-500) {
    border-color: rgb(var(--smart-neutral-shade3-rgb) / var(--tw-border-opacity))
}

:is(.dark .dark\:border-jacarta-600) {
    border-color: rgb(var(--smart-neutral-shade4-rgb) / var(--tw-border-opacity))
}

:is(.dark .dark\:border-jacarta-700) {
    border-color: rgb(var(--smart-neutral-shade5-rgb) / var(--tw-border-opacity))
}

:is(.dark .dark\:bg-accent) {
    background-color: rgb(var(--smart-base-rgb) / var(--tw-bg-opacity))
}

:is(.dark .dark\:bg-jacarta-600) {
    background-color: rgb(var(--smart-neutral-shade4-rgb) / var(--tw-bg-opacity))
}

:is(.dark .dark\:bg-jacarta-700) {
    background-color: rgb(var(--smart-neutral-shade5-rgb) / var(--tw-bg-opacity))
}

:is(.dark .dark\:bg-jacarta-800) {
    background-color: rgb(var(--smart-neutral-shade6-rgb) / var(--tw-bg-opacity))
}

:is(.dark .dark\:bg-jacarta-900) {
    background-color: rgb(var(--smart-neutral-shade7-rgb) / var(--tw-bg-opacity))
}

:is(.dark .dark\:to-\[\#101436_33\%\]) {
    --tw-gradient-to: var(--smart-neutral-shade6) 33% var(--tw-gradient-to-position)
}

:is(.dark .dark\:fill-accent-lighter) {
    fill: var(--smart-tint2-dark)
}

:is(.dark .dark\:fill-accent\/50) {
    fill: var(--smart-base-50)
}

:is(.dark .dark\:fill-jacarta-100) {
    fill: var(--smart-neutral-tint3-dark)
}

:is(.dark .dark\:fill-jacarta-200) {
    fill: var(--smart-neutral-tint2-dark)
}

:is(.dark .dark\:fill-jacarta-300) {
    fill: var(--smart-neutral-base1)
}

:is(.dark .dark\:fill-jacarta-400) {
    fill: var(--smart-neutral-shade1)
}

:is(.dark .dark\:fill-jacarta-600) {
    fill: var(--smart-neutral-shade4)
}

:is(.dark .dark\:fill-jacarta-900) {
    fill: var(--smart-neutral-shade7)
}

:is(.dark .dark\:text-accent) {
    color: rgb(var(--smart-base-rgb))
}

:is(.dark .dark\:text-accent-lighter) {
    color: rgb(var(--smart-tint2-dark-rgb) / var(--tw-text-opacity))
}

:is(.dark .dark\:text-jacarta-100) {
    color: rgb(var(--smart-neutral-tint3-dark-rgb) / var(--tw-text-opacity))
}

/* Avoid adding classes to each paragraph in content */
:is(.dark .dark\:text-jacarta-200), :is(.dark p), :is(.dark li) {
    color: rgb(var(--smart-neutral-tint2-dark-rgb) / var(--tw-text-opacity))
}

:is(.dark .dark\:text-jacarta-300) {
    color: rgb(var(--smart-neutral-base1-rgb) / var(--tw-text-opacity))
}

:is(.dark .dark\:text-jacarta-400) {
    color: rgb(var(--smart-neutral-shade1-rgb) / var(--tw-text-opacity))
}

:is(.dark .dark\:placeholder-jacarta-300)::-moz-placeholder {
    color: rgb(var(--smart-neutral-base1-rgb) / var(--tw-placeholder-opacity))
}
:is(.dark .dark\:placeholder-jacarta-300)::placeholder {
    color: rgb(var(--smart-neutral-base1-rgb) / var(--tw-placeholder-opacity))
}

:is(.dark .dark\:placeholder\:text-jacarta-300)::-moz-placeholder {
    color: rgb(var(--smart-neutral-base1-rgb) / var(--tw-text-opacity))
}
:is(.dark .dark\:placeholder\:text-jacarta-300)::placeholder {
    color: rgb(var(--smart-neutral-base1-rgb) / var(--tw-text-opacity))
}

:is(.dark .dark\:hover\:border-accent:hover) {
    border-color: rgb(var(--smart-base-rgb) / var(--tw-border-opacity))
}

:is(.dark .dark\:hover\:bg-accent:hover) {
    background-color: rgb(var(--smart-base-rgb) / var(--tw-bg-opacity))
}

:is(.dark .dark\:hover\:bg-accent-dark:hover) {
    background-color: rgb(var(--smart-shade3-rgb) / var(--tw-bg-opacity))
}

:is(.dark .dark\:hover\:bg-jacarta-600:hover) {
    background-color: rgb(var(--smart-neutral-shade4-rgb) / var(--tw-bg-opacity))
}


:is(.dark .dark\:hover\:text-accent:hover) {
    color: rgb(var(--smart-base-rgb))
}

:is(.dark .dark\:focus\:text-accent:focus) {
    color: rgb(var(--smart-base-rgb))
}


/** Not yet sure if this is needed
    unless the colour change by res is deliberate
*/
@media (min-width: 575px) {
    .sm\:border-jacarta-100 {
        border-color: rgb(var(--smart-neutral-tint3-rgb) / var(--tw-border-opacity))
    }
}

@media (min-width: 1025px) {
    lg\:shadow-2xl {
        --tw-shadow: 0px 25px 50px -12px var(--smart-neutral-shade7-rgba10), 0px 12px 24px 0px var(--smart-neutral-shade7-rgba10)
    }
    
    :is(.dark .dark\:lg\:bg-transparent) {
        background-color: transparent;
    }
}