/* ------- Var Styles ------- */
*,
:before,
:after {
    /* Accent colours */
    --smart-tint3-rgba-25: #f5dcdc40;
    --smart-tint3-rgb: 245 220 220;
    --smart-tint3: #f5dcdc;
    --smart-tint2: #f14646; /* (accent lighter) */
    --smart-tint2-rgb: 241 70 70;
    --smart-tint2-dark: #f1a9a9; /* (dark accent-lighter) */
    --smart-tint2-dark-rgb: 241 169 169;
    --smart-tint1: #bc4343; /* (shadow hover) */
    --smart-base: #9e1212; /* (accent) */
    --smart-base-rgb: 158 18 18;
    --smart-base-25: #9e121240;
    --smart-base-50: #9e121280;
    --smart-base-rgba-50: rgba(161, 18, 18, 0.502);
    --smart-base-rgba-30: rgba(158, 18, 18, 0.3);
    --smart-shade1: #6c0e0a; /* (accent darker) */
    --smart-shade1-rgb: 108 14 10;
    --smart-shade2: #480c0a; /* (accent darker 2) */
    --smart-shade3: #2e0909; /* (accent dark) */
    --smart-shade3-rgb: 46 9 9;
    
    --smart-light-base: var(--smart-neutral-tint4); /* (bg-light-base, use ntrl tint4) */
    --smart-light-base-rgb: var(--smart-neutral-tint4-rgb);

    /* ------ Jacarta Colours ------ */
    --smart-neutral-tint4: #fff2f2; /* (50) */
    --smart-neutral-tint4-rgb: 255 242 242; /* (50) */
    --smart-neutral-tint3-dark: #fce7e7; /* (dark fill, jacarta 100) */
    --smart-neutral-tint3-dark-rgb: 252 231 231;
    --smart-neutral-tint3: #fadddd; /* (100) */
    --smart-neutral-tint3-rgb: 250 221 221; /* (100) */
    --smart-neutral-tint2-dark: #f2cfcf; /* (dark border-200, fill, color) */
    --smart-neutral-tint2-dark-rgb: 242 207 207; /* (dark border-200, fill, color) */
    --smart-neutral-tint2: #ebc1c1; /* (200) */
    --smart-neutral-tint2-rgb: 235 193 193; /* (200) */
    --smart-neutral-base1: #d2a0a0; /* (300, use tint1) */
    --smart-neutral-base1-rgb: 210 160 160; /* (300) */
    --smart-neutral-base: #ad7c7c; /* (placeholder 1) */
    --smart-neutral-shade1: #825959; /* (400) */
    --smart-neutral-shade1-rgb: 130 89 89; /* (400) */
    --smart-neutral-shade2: #593a3a; /* (placeholder 2) */
    --smart-neutral-shade3: #372323; /* (500) */
    --smart-neutral-shade3-rgb: 55 35 35; /* (500) */
    --smart-neutral-shade4: #241616; /* (600) */
    --smart-neutral-shade4-rgb: 36 22 22; /* (600) */
    --smart-neutral-shade5: #190e0e; /* (700) */
    --smart-neutral-shade5-rgb: 25 14 14; /* (700) */
    --smart-neutral-shade5-50: #190e0e80; /* (sticky page header) */
    --smart-neutral-shade6: #150d0d; /* (800, gradient) */
    --smart-neutral-shade6-rgb: 21 13 13; /* (800, gradient) */
    --smart-neutral-shade7: #0d0808; /* (900) */
    --smart-neutral-shade7-rgb: 13 8 8; /* (900) */
    --smart-neutral-shade7-rgba10: rgba(13, 8, 8, 0.1);
    --smart-neutral-shade7-20: #0d080833; /* after */
    --smart-neutral-shade7-25: #0d080840; /* before */
    --smart-neutral-shade7-50: #0d080880; /* after */
    --smart-neutral-shade7-60: #0d080899; /* after */
    
    /* Other Template Styles */

    /* The red is accent 1 */
    --smart-red-rgb: 221 178 19; /* red, error */
    --smart-red-rgba-30: rgba(221, 178, 19, 0.302);

    /* The green is accent 2 */
    --smart-green-rgb: 39 125 236; /* green, success */
    --smart-green-rgba-30: rgba(39, 125, 236, 0.302);

    /* The blue is the base color */
    --smart-blue-rgb: 158 18 18; /* blue, hover */
    --smart-blue-tint3: #f2b5b5; /* rgb(223 227 239) */
    --smart-blue-tint4: #f5dcdc; /* rgb(238 241 249) */

    /* The orange can be just orange, changing depending on the other colors above */
    --smart-orange-rgb: 254 159 64; /* bright orange */

    --col-F35BC7-rgb: var(--smart-red-rgb); /* Red */
    --col-8DD059-rgb: var(--smart-green-rgb); /* Green */
    --col-737EF2-rgb: var(--smart-blue-rgb); /* Blue */
    
    --shadow-ef4444: #ddb213; /* shadow red, why us home */
    --shadow-ef4444-hover: #ddb2131a;

    --shadow-10b981: #277dec; /* shadow green, why us home */
    --shadow-10b981-hover: #277dec1a;
    
    --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: #010203;
    --grad-to-010107-rgb: rgb(1 2 3 / 0);

    --tw-ring-color: var(--smart-base);
    --tw-ring-color-50: var(--smart-base-rgba-50);

    --svg-red: #ddb213;
    --svg-green: #277dec;
    --svg-blue: #9e1212;
    --svg-orange: #fe9f40;
}

::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, :not(header)li > a, .accordion li > a, article li > a, p a, a.back-to-link {
    color: var(--smart-base)
}
p > a:hover, :not(header)li > a:hover, .accordion li > a:hover, article li > a:hover, p a:hover, a:hover.back-to-link {
    color: var(--smart-shade3)
}
:is(.dark p > a), :is(.dark :not(header)li > a), :is(.dark .accordion li > a), :is(.dark p a), :is(.dark a.back-to-link) {
    color: var(--smart-tint3)
}
:is(.dark p > a:hover), :is(.dark :not(header)li > a:hover), :is(.dark .accordion li > a:hover), :is(.dark p a:hover), :is(.dark a:hover.back-to-link) {
    color: white
}

#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))
}

/* ------- 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;
    }
}