*,
:before,
:after {
    --sc-tint3-rgba-25: rgba(209, 234, 251, 0.251);
    --sc-tint3-rgb: 209 234 251;
    --sc-tint3: #d1eafb;
    --sc-tint2-rgb: 130 201 248;
    --sc-tint2: #82c9f8; /* (accent lighter) */
    --sc-tint2-dk-rgb: 174 217 246;
    --sc-tint2-dk: #aed9f6; /* dark accent-lighter */
    --sc-tint1-rgb: 50 154 224;
    --sc-tint1: #329AE0;
    --sc-base-rgb: 0 113 192;
    --sc-base-rgba-30: rgba(0, 113, 192, .3);
    --sc-base-25: #0071c040;
    --sc-base-50: #0071c080;
    --sc-base: #0071c0; /* (accent) */
    --sc-shade1-rgb: 0 84 147;
    --sc-shade1: #005493; /* (accent darker) */
    --sc-shade2: #003560; /* (accent darker 2) */
    --sc-shade3-rgb: 0 27 51;
    --sc-shade3: #001b33; /* (accent dark) */
    --sc-shade4-rgb: 0, 12, 22;
    --sc-shade4: #000c16; /* (accent darkest) */

    --sc-light-base-rgb: 245 251 255;
    --sc-light-base: #f5fbff; /* (bg-light-base) */
    
    /* ------ Jacarta Colours ------ */
    --sc-neu-tint4-rgb: 250 253 255; /* (50) */
    --sc-neu-tint4: #fafdff; /* (50) */
    --sc-neu-tint3-rgb: 216 227 235; /* (100) */
    --sc-neu-tint3: #D8E3EB; /* (100) */    
    --sc-neu-tint3-dk-rgb: 227 238 246;
    --sc-neu-tint3-dk: #e3eef6; /* (dark fill, jacarta 100) */
    --sc-neu-tint2-rgb: 156 179 195; /* (200) */    
    --sc-neu-tint2: #9cb3c3; /* (200) */
    --sc-neu-tint2-dk-rgb: 185 202 215; /* (dark border-200, fill, color) */
    --sc-neu-tint2-dk: #b9cad7; /* (dark border-200, fill, color) */
    --sc-neu-tint1-rgb: 119 146 163; /* (300) */
    --sc-neu-tint1: #7792a3; /* (300) */
    --sc-neu-base: #5B788D; /* (placeholder 1) */
    --sc-neu-shade1-rgb: 66 93 113; /* (400) */
    --sc-neu-shade1: #425d71; /* (400) */
    --sc-neu-shade2-rgb: 48 73 92; /* (placeholder 2) */
    --sc-neu-shade2: #30495C; /* (placeholder 2) */
    --sc-neu-shade3-rgb: 37 59 75; /* (500) */
    --sc-neu-shade3: #253b4b; /* (500) */
    --sc-neu-shade4-rgb: 29 48 63; /* (600) */
    --sc-neu-shade4: #1d303f; /* (600) */
    --sc-neu-shade5-rgb: 23 39 52; /* (700) */
    --sc-neu-shade5: #172734; /* (700) */
    --sc-neu-shade5-50: #17273480; /* (sticky page header) */
    --sc-neu-shade6-rgb: 19 30 41; /* (800, gradient) */
    --sc-neu-shade6: #131e29; /* (800, gradient) */
    --sc-neu-shade7-rgb: 14 23 31; /* (900) */
    --sc-neu-shade7-rgba10: rgba(14, 23, 31, .1);
    --sc-neu-shade7-rgba60: rgba(14, 23, 31, .6);
    --sc-neu-shade7: #0e171f; /* (900) */
    --sc-neu-shade7-20: #0e171f33; /* after */
    --sc-neu-shade7-25: #0e171f40; /* before */
    --sc-neu-shade7-50: #0e171f80; /* after */
    --sc-neu-shade7-60: #0e171f99; /* after */

    /* Part of the root in the original CSS */
    /*--tw-ring-color: var(--sc-base) !important;
    --tw-ring-color-50: var(--sc-base-rgb-50) !important;
    */
    /* Other Template Styles */
    --sc-green-rgba-30: rgba(16, 185, 129, 0.3);
    --sc-green-rgb: 16 185 129; /* green, success */
    --sc-green: #10b981;
    --shadow-10b981: #10b981; /* shadow green, why us home */
    --shadow-10b981-hover: #10b9811a;
    --sc-red-rgba-30: rgba(239, 68, 68, .3);
    --sc-red-rgb: 239 68 68; /* red, error */
    --sc-red: #ef4444;
    --shadow-ef4444: #ef4444; /* shadow red, why us home */
    --shadow-ef4444-hover: #ef44441a;
    --sc-blue-rgb: 32 100 217; /* blue, hover */
    --sc-blue: #2064d9;
    --sc-blue-tint2: #5E95F0;
    --sc-blue-tint3: #9dbef5; /* rgb(157 190 245) */
    --sc-blue-tint4: #d1e2fd; /* rgb(209 226 253) */
    --sc-orange-rgb: 250 109 30; /* bright orange */
    --sc-orange: #feb240;
    --col-737EF2-rgb: 115 126 242;
    --col-8DD059-rgb: 141 208 89;
    --col-F35BC7-rgb: 243 91 199;
    --animate-grad-270: linear-gradient(270deg, #f76649, #d059ff 25.52%, #4ac6db 50%, #eadf4e 76.04%, #f76649);
    --animate-grad-diag-270: linear-gradient(270deg, #4178d0, #c85058 25.52%, #ffcc70 50%, #f89143 76.04%, #4178d0);
    --grad-from-010107: #010407;
    --grad-to-010107-rgb: rgb(1 4 7 / 0);

}

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

.filter-active {
    background-color: rgb(var(--sc-neu-tint3-dk-rgb) / var(--tw-bg-opacity))
}

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


/* ------- Text Format Styles -----*/
p > a, :not(header) li > a, .accordion li > a, article li > a, p a {
    color: var(--sc-base)
}
p > a:hover, :not(header) li > a:hover, .accordion li > a:hover, article li > a:hover, p a:hover {
    color: var(--sc-shade3)
}
:is(.dark p > a), :is(.dark :not(header) li > a), :is(.dark .accordion li > a), :is(.dark p a) {
    color: var(--sc-tint3)
}
:is(.dark p > a:hover), :is(.dark :not(header) li > a:hover), :is(.dark .accordion li > a:hover), :is(.dark p a:hover) {
    color: white
}


/* Change this ID when you find it again */
#v3HomeWhyUs ul, #v3HomeWhyUs ol {
    color: rgb(var(--sc-neu-shade5-rgb) / var(--tw-text-opacity))
}

/* ------ Form Styles ------ */
/*
input::-moz-placeholder, textarea::-moz-placeholder,
input::placeholder, textarea::placeholder,
[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(--sc-neu-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(--sc-neu-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(--sc-neu-tint3-dk-rgb) / var(--tw-divide-opacity))
}

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

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

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

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

.border-jacarta-300 {
    border-color: rgb(var(--sc-neu-tint1-rgb) / var(--tw-border-opacity))
}

.border-jacarta-400 {
    border-color: rgb(var(--sc-neu-shade1-rgb) / var(--tw-border-opacity))
}

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

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

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

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

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

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

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

.bg-jacarta-100 {
    background-color: rgb(var(--sc-neu-tint3-dk-rgb) / var(--tw-bg-opacity))
}

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

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

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

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

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

.from-\[\#172734\] {
    --tw-gradient-from: var(--sc-neu-shade5) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(var(--sc-neu-shade5-rgb) / 0 ) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.to-\[\#005493\] {
    --tw-gradient-to: #005493 var(--tw-gradient-to-position)
}

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

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

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

.fill-jacarta-100 {
    fill: var(--sc-neu-tint3)
}

.fill-jacarta-200 {
    fill: var(--sc-neu-tint2)
}

.fill-jacarta-300 {
    fill: var(--sc-neu-tint1)
}

.fill-jacarta-400 {
    fill: var(--sc-neu-shade1)
}

.fill-jacarta-50 {
    fill: var(--sc-neu-tint4)
}

.fill-jacarta-500 {
    fill: var(--sc-neu-shade3)
}

.fill-jacarta-700 {
    fill: var(--sc-neu-shade5)
}

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

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

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

.text-white {
    color: rgb(255 255 255 / var(--tw-text-opacity))
}

.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-lighter {
    color: rgb(var(--sc-tint2-rgb) / var(--tw-text-opacity))
}

.text-accent {
    color: rgb(var(--sc-tint1-rgb) / var(--tw-text-opacity))
}

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

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

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

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

.text-jacarta-100 {
    color: rgb(var(--sc-neu-tint3-rgb) / var(--tw-text-opacity))
}

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

.text-jacarta-300 {
    color: rgb(var(--sc-neu-tint1-rgb) / var(--tw-text-opacity))
}

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

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

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

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

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

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

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



/* ------- Placeholders ------- */
/*
.placeholder-jacarta-300::-moz-placeholder {
    color: rgb(var(--sc-neu-tint1-rgb) / var(--tw-placeholder-opacity))
}

.placeholder-jacarta-300::placeholder {
    color: rgb(var(--sc-neu-tint1-rgb) / var(--tw-placeholder-opacity))
}

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

.placeholder-jacarta-500::placeholder {
    color: rgb(var(--sc-neu-shade3-rgb) / var(--tw-placeholder-opacity))
}
*/

/* ------- Shadows ------- */
.shadow-2xl {
    --tw-shadow: 0px 25px 50px -12px var(--sc-neu-shade7-rgba10), 0px 12px 24px 0px var(--sc-neu-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(--sc-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(--sc-tint3-rgba-25), inset 2px 2px 6px var(--sc-tint1), inset -5px -5px 10px var(--sc-shade2)
}

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

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

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

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

/* ------ Scrollbars ------ */
.scrollbar-custom::-webkit-scrollbar-track {
    background-color: rgb(var(--sc-neu-tint3-dk-rgb) / var(--tw-bg-opacity))
}

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

.scrollbar-custom::-webkit-scrollbar-thumb {
    background-color: rgb(var(--sc-neu-tint1-rgb) / var(--tw-bg-opacity))
}

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

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

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

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

.swiper-scrollbar {
    background-color: rgb(var(--sc-neu-tint3-dk-rgb) / var(--tw-bg-opacity))
}

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

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

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

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

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

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

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

/* ------- JS Page Header and Nav Styles ------- */
.js-page-header--is-sticky {
    background-color: #ffffff80
}

.js-page-header--is-sticky.page-header--transparent,
.dark .js-page-header--is-sticky {
    background-color: var(--sc-neu-shade5-50)
}

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

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

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

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

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

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

.nav-link--style-5:hover {
    background-color: rgb(var(--sc-neu-tint3-dk-rgb) / var(--tw-bg-opacity))
}

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

.nav-link--style-5.active {
    background-color: rgb(var(--sc-neu-tint3-dk-rgb) / var(--tw-bg-opacity))
}

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

/* ------ User Guide Accordion Style ----- */
.user-guide-accordion .accordion-button:not(.collapsed) {
    background-color: rgb(var(--sc-light-base-rgb) / var(--tw-bg-opacity));
    border-color: rgb(var(--sc-shade1-rgb) / var(--tw-border-opacity))
}
:is(.dark .user-guide-accordion .accordion-button:not(.collapsed)) {
    background-color: rgb(var(--sc-neu-shade5-rgb) / var(--tw-bg-opacity));
    border-color: rgb(var(--sc-tint2-rgb) / var(--tw-border-opacity))
}

/* ------ Story Accordion Style ----- */
#accordionStory .accordion-button:not(.collapsed) {
    background-color: rgb(var(--sc-light-base-rgb) / var(--tw-bg-opacity));
    border-color: rgb(var(--sc-shade1-rgb) / var(--tw-border-opacity))
}
:is(.dark #accordionStory .accordion-button:not(.collapsed)) {
    background-color: rgb(var(--sc-neu-shade5-rgb) / var(--tw-bg-opacity));
    border-color: rgb(var(--sc-tint2-rgb) / var(--tw-border-opacity))
}

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

.modal-header {
    border-color: rgb(var(--sc-neu-tint3-dk-rgb) / var(--tw-border-opacity))
}

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

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

.modal-footer {
    border-color: rgb(var(--sc-neu-tint3-dk-rgb) / var(--tw-border-opacity))
}

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

.modal-backdrop {
    background-color: rgb(var(--sc-neu-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(--sc-neu-shade5-rgb) / var(--tw-text-opacity))
}

.article-content cite {
    --tw-text-opacity: 1;
    color: rgb(--sc-neu-shade1-rgb / var(--tw-text-opacity));
}

:is(.dark .article-content>p) {
    color: rgb(var(--sc-neu-tint3-rgb) / var(--tw-text-opacity))
}

:is(.dark .article-content>ul), :is(.dark .article-content>ol) {
    color: rgb(var(--sc-neu-tint2-rgb) / var(--tw-text-opacity))
}

:is(.dark .article-content cite) {
    color: rgb(var(--sc-neu-tint3-rgb) / var(--tw-text-opacity))
}

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

.alert-success {
    background-color: var(--shadow-10b981-hover);
    color: rgb(var(--sc-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(--sc-neu-shade7-25)
}

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

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

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

.after\:bg-jacarta-900\/60:after {
    background-color: var(--sc-neu-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(--sc-base-rgb) / var(--tw-bg-opacity))
}

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

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

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

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

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

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

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

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

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

.hover\:text-accent-lighter:hover {
    color: rgb(var(--sc-tint2-rgb))
}

.hover\:text-accent:hover {
    color: rgb(var(--sc-tint1-rgb))
}

.hover\:text-accent-dark:hover {
    color: rgb(var(--sc-shade3-rgb))
}

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

.hover\:text-jacarta-700:hover {
    color: rgb(var(--sc-neu-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(--sc-base-rgba-30)
}

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

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

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

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

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

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

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

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

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

.focus\:text-accent:focus {
    color: rgb(var(--sc-tint1-rgb))
}

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

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

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

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

.group:hover .group-hover\:text-accent {
    color: rgb(var(--sc-tint1-rgb))
}

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

:is(.dark .dark\:border-jacarta-100) {
    border-color: rgb(var(--sc-neu-tint3-dk-rgb) / var(--tw-border-opacity))
}

:is(.dark .dark\:border-jacarta-300) {
    border-color: rgb(var(--sc-neu-tint1-rgb) / var(--tw-border-opacity))
}

:is(.dark .dark\:border-jacarta-400) {
    border-color: rgb(var(--sc-neu-shade1-rgb) / var(--tw-border-opacity))
}

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

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

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

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

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

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

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

:is(.dark .dark\:after\:bg-jacarta-900\/60:after) {
    background-color: rgba(var(--sc-neu-shade7-rgba60));
}
:is(.dark .dark\:bg-jacarta-900) {
    background-color: rgb(var(--sc-neu-shade7-rgb) / var(--tw-bg-opacity))
}

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

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

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

:is(.dark .dark\:fill-jacarta-100) {
    fill: var(--sc-neu-tint3-dk)
}

:is(.dark .dark\:fill-jacarta-200) {
    fill: var(--sc-neu-tint2-dk)
}

:is(.dark .dark\:fill-jacarta-300) {
    fill: var(--sc-neu-tint1)
}

:is(.dark .dark\:fill-jacarta-400) {
    fill: var(--sc-neu-shade1)
}

:is(.dark .dark\:fill-jacarta-600) {
    fill: var(--sc-neu-shade4)
}

:is(.dark .dark\:fill-jacarta-900) {
    fill: var(--sc-neu-shade7)
}

:is(.dark .dark\:text-accent) {
    color: rgb(var(--sc-tint1-rgb))
}

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

:is(.dark .dark\:text-jacarta-100) {
    color: rgb(var(--sc-neu-tint3-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(--sc-neu-tint2-dk-rgb) / var(--tw-text-opacity))
}

:is(.dark .dark\:text-jacarta-300) {
    color: rgb(var(--sc-neu-tint1-rgb) / var(--tw-text-opacity))
}

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

:is(.dark .dark\:placeholder-jacarta-300)::-moz-placeholder {
    color: rgb(var(--sc-neu-tint1-rgb) / var(--tw-placeholder-opacity))
}
:is(.dark .dark\:placeholder-jacarta-300)::placeholder {
    color: rgb(var(--sc-neu-tint1-rgb) / var(--tw-placeholder-opacity))
}

:is(.dark .dark\:placeholder\:text-jacarta-300)::-moz-placeholder {
    color: rgb(var(--sc-neu-tint1-rgb) / var(--tw-text-opacity))
}
:is(.dark .dark\:placeholder\:text-jacarta-300)::placeholder {
    color: rgb(var(--sc-neu-tint1-rgb) / var(--tw-text-opacity))
}


:is(.dark .dark\:border-accent-lighter) {
    border-color: rgb(var(--sc-tint2-dk-rgb) / var(--tw-border-opacity))
}

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

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

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

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


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

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

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

/** Override SC Form styles
    Omit dark mode versions
 */
 
/*.sc-modal-outer .sc-modal {
    background-color: rgb(var(--sc-neu-tint4-rgb) / var(--tw-bg-opacity)) !important;
}

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

#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(--sc-neu-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)
}

.modal-title {
    --tw-text-opacity: 1;
    color: rgb(var(--sc-neu-shade6-rgb) / var(--tw-text-opacity))
}
.modal-footer, .sc-modal-footer {
    --tw-border-opacity: 1;
    border-color: rgb(var(--sc-neu-shade1-rgb) / var(--tw-border-opacity))
}

input::-moz-placeholder,
textarea::-moz-placeholder {
    color: var(--sc-neu-base);
    opacity: 1
}

input::placeholder,
textarea::placeholder {
    color: var(--sc-neu-base);
    opacity: 1
}

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

.sc-form-label-static p {
  color: black;
}

/** 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(--sc-neu-tint3-dk-rgb) / var(--tw-border-opacity))
    }
}

@media (min-width: 1025px) {
    lg\:shadow-2xl {
        --tw-shadow: 0px 25px 50px -12px var(--sc-neu-shade7-rgba10), 0px 12px 24px 0px var(--sc-neu-shade7-rgba10)
    }

    :is(.dark .dark\:lg\:bg-transparent) {
        background-color: transparent;
    }
}