/* ============================================
   LeafyTeam Shared Styles
   ============================================ */
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
}

::-webkit-scrollbar-track {
    background: transparent !important;
}

::-webkit-scrollbar-thumb {
    background: rgba(156, 163, 175, 0.5) !important;
    border-radius: 3px !important;
}

    ::-webkit-scrollbar-thumb:hover {
        background: rgba(156, 163, 175, 0.8) !important;
    }

.hide-scroll::-webkit-scrollbar {
    display: none !important;
}

.hide-scroll {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}

/* Select arrow (appearance: none hides the native arrow so only this one shows) */
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 1.25em 1.25em;
    padding-right: 2.5rem;
}

/* ============================================================
   Custom filter dropdown (.c-filter-dd)
   A styled replacement for a native <select> where the open list
   must be width-locked to the trigger (native popups can't be sized).
   Behaviour lives in global.js (_InitFilterDropdown), dark overrides
   in Dark.css. Markup pattern:
     <div class="c-filter-dd">
       <input type="hidden" class="c-filter-dd__value" value="..." />
       <button class="c-filter-dd__btn" ...>
         <span class="c-filter-dd__label">..</span><svg class="c-filter-dd__caret">..</svg>
       </button>
       <ul class="c-filter-dd__menu" role="listbox">
         <li class="c-filter-dd__opt is-selected" data-value="..">..</li>
       </ul>
     </div>
   Override `.c-filter-dd { width }` per instance as needed.
   ============================================================ */
.c-filter-dd {
    position: relative;
    width: 11rem;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .c-filter-dd {
        width: 8.5rem;
    }
}

.c-filter-dd__btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.75rem 0.875rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: #0F172A;
    background-color: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 0.5rem;
    cursor: pointer;
    text-align: left;
}

.c-filter-dd__btn:focus {
    outline: none;
    border-color: rgba(34, 197, 94, 0.4);
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
}

.c-filter-dd__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.c-filter-dd__caret {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    color: #6b7280;
    transition: transform 0.15s ease;
}

.c-filter-dd.is-open .c-filter-dd__caret {
    transform: rotate(180deg);
}

.c-filter-dd__menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 30;
    margin: 0;
    padding: 0.25rem;
    list-style: none;
    background-color: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 0.5rem;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    display: none;
}

.c-filter-dd.is-open .c-filter-dd__menu {
    display: block;
}

.c-filter-dd__opt {
    padding: 0.5rem 0.625rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: #334155;
    border-radius: 0.375rem;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.c-filter-dd__opt:hover {
    background-color: #F1F5F9;
    color: #0F172A;
}

.c-filter-dd__opt.is-selected {
    background-color: #ECFDF5;
    color: #1F7A4D;
    font-weight: 600;
}

/* Page section visibility */
.page-section {
    display: none;
}

    .page-section.active {
        display: block;
    }

/* Hidden utility */
.lt-hidden {
    display: none !important;
}

/* Animate pulse for status dots */
@keyframes ltPulse {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.lt-pulse {
    animation: ltPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Nav drawer transition */
.nav-drawer {
    transform: translateX(-100%);
    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

    .nav-drawer.open {
        transform: translateX(0);
    }

/* Theme font for card previews */
.theme-preview-font {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, 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:;
    --tw-contain-size:;
    --tw-contain-layout:;
    --tw-contain-paint:;
    --tw-contain-style:
}

::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:;
    --tw-contain-size:;
    --tw-contain-layout:;
    --tw-contain-paint:;
    --tw-contain-style:
}
/* ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com */

*, ::after, ::before {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #e5e7eb
}

::after, ::before {
    --tw-content: ''
}

:host, html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    tab-size: 4;
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-feature-settings: normal;
    font-variation-settings: normal;
    -webkit-tap-highlight-color: transparent
}

body {
    margin: 0;
    line-height: inherit
}

hr {
    height: 0;
    color: inherit;
    border-top-width: 1px
}

abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted
}

h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit
}

a {
    color: inherit !important;
    text-decoration: inherit !important
}

b, strong {
    font-weight: bolder
}

code, kbd, pre, samp {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-feature-settings: normal;
    font-variation-settings: normal;
    font-size: 1em
}

small {
    font-size: 80%
}

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse
}

button, input, optgroup, select, textarea {
    font-family: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
    margin: 0;
    padding: 0
}

button, select {
    text-transform: none
}

button, input:where([type=button]), input:where([type=reset]), input:where([type=submit]) {
    -webkit-appearance: button;
    background-color: transparent;
    background-image: none
}

:-moz-focusring {
    outline: auto
}

:-moz-ui-invalid {
    box-shadow: none
}

progress {
    vertical-align: baseline
}

::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

summary {
    display: list-item
}

blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre {
    margin: 0;
}

fieldset {
    margin: 0;
    padding: 0
}

legend {
    padding: 0
}

menu, ol, ul {
    list-style: none;
    margin: 0;
    padding: 0
}

dialog {
    padding: 0
}

textarea {
    resize: vertical
}

    input::placeholder, textarea::placeholder {
        opacity: 1;
        color: #9ca3af
    }

[role=button], button {
    cursor: pointer
}

:disabled {
    cursor: default
}

audio, canvas, embed, iframe, img, object, svg, video {
    display: block;
    vertical-align: middle
}

img, video {
    max-width: 100%;
    height: auto
}

[hidden]:where(:not([hidden=until-found])) {
    display: none
}

.pointer-events-none {
    pointer-events: none
}

.fixed {
    position: fixed
}

.absolute {
    position: absolute
}

.relative {
    position: relative
}

.sticky {
    position: sticky
}

.inset-0 {
    inset: 0px
}

.-inset-1 {
    inset: -0.25rem
}

.-inset-2 {
    inset: -0.5rem
}

.-inset-\[3px\] {
    inset: -3px
}

.inset-x-0 {
    left: 0px;
    right: 0px
}

.-bottom-16 {
    bottom: -4rem
}

.-left-16 {
    left: -4rem
}

.-right-20 {
    right: -5rem
}

.-top-20 {
    top: -5rem
}

.bottom-3 {
    bottom: 0.75rem
}

.left-0 {
    left: 0px
}

.right-0 {
    right: 0px
}

.right-3 {
    right: 0.75rem
}

.top-0 {
    top: 0px
}

.top-6 {
    top: 1.5rem
}

.-top-3 {
    top: -0.75rem
}

.bottom-0 {
    bottom: 0px
}

.bottom-1 {
    bottom: 0.25rem
}

.bottom-1\.5 {
    bottom: 0.375rem
}

.left-1 {
    left: 0.25rem
}

.left-1\/2 {
    left: 50%
}

.left-2 {
    left: 0.5rem
}

.left-4 {
    left: 1rem
}

.right-1 {
    right: 0.25rem
}

.right-2 {
    right: 0.5rem
}

.top-1 {
    top: 0.25rem
}

.top-2 {
    top: 0.5rem
}

.top-5 {
    top: 1.25rem
}

.-right-3 {
    right: -0.75rem
}

.-top-8 {
    top: -2rem
}

.bottom-20 {
    bottom: 5rem
}

.right-4 {
    right: 1rem
}

.top-4 {
    top: 1rem
}

.-top-10 {
    top: -2.5rem
}

.bottom-10 {
    bottom: 2.5rem
}

.top-1\/2 {
    top: 50%
}

.left-8 {
    left: 2rem
}

.top-10 {
    top: 2.5rem
}

.right-1\/4 {
    right: 25%
}

.top-1\/3 {
    top: 33.333333%
}

.-left-4 {
    left: -1rem
}

.-right-4 {
    right: -1rem
}

.-left-10 {
    left: -2.5rem
}

.-right-10 {
    right: -2.5rem
}

.z-10 {
    z-index: 10
}

.z-50 {
    z-index: 50
}

.z-40 {
    z-index: 40
}

.z-20 {
    z-index: 20
}

.z-\[60\] {
    z-index: 60
}

.z-\[70\] {
    z-index: 70
}

.z-30 {
    z-index: 30
}

.col-span-2 {
    grid-column: span 2 / span 2
}

.mx-3 {
    margin-left: 0.75rem;
    margin-right: 0.75rem
}

.mx-auto {
    margin-left: auto;
    margin-right: auto
}

.my-3 {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem
}

.mx-2 {
    margin-left: 0.5rem;
    margin-right: 0.5rem
}

.c-ml-1\.5 {
    margin-left: -0.375rem
}

.c-mb-1\.5 {
    margin-bottom: 0.375rem
}

.c-mb-2 {
    margin-bottom: 0.5rem
}

.c-mb-3 {
    margin-bottom: 0.75rem
}

.c-mb-4 {
    margin-bottom: 1rem
}

.c-ml-1\.5 {
    margin-left: 0.375rem
}

.c-mt-0\.5 {
    margin-top: 0.125rem
}

.c-mt-1 {
    margin-top: 0.25rem
}

.c-mt-3 {
    margin-top: 0.75rem
}

.c-mt-5 {
    margin-top: 1.25rem
}

.c-mb-1 {
    margin-bottom: 0.25rem
}

.c-mt-4 {
    margin-top: 1rem
}

.c-mt-2 {
    margin-top: 0.5rem
}

.c-mr-2 {
    margin-right: 0.5rem
}

.c-mt-12 {
    margin-top: -3rem
}

.c-mb-0\.5 {
    margin-bottom: 0.125rem
}

.c-mb-2\.5 {
    margin-bottom: 0.625rem
}

.c-mb-5 {
    margin-bottom: 1.25rem
}

.c-mb-6 {
    margin-bottom: 1.5rem
}

.c-ml-8 {
    margin-left: 2rem
}

.c-mr-1\.5 {
    margin-right: 0.375rem
}

.c-mt-1\.5 {
    margin-top: 0.375rem
}

.c-mt-6 {
    margin-top: 1.5rem
}

.c-mt-8 {
    margin-top: 2rem
}

.c-ml-auto {
    margin-left: auto
}

.c-mr-1 {
    margin-right: 0.25rem
}

.c-mt-9 {
    margin-top: 2.25rem
}

.c-mt-14 {
    margin-top: -3.5rem
}

.c-ml-1 {
    margin-left: 0.25rem
}

.c-mt-10 {
    margin-top: 2.5rem
}

.c-mt-10 {
    margin-top: -2.5rem
}

.line-clamp-3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3
}

.block {
    display: block
}

.inline-block {
    display: inline-block
}

.inline {
    display: inline
}

.flex {
    display: flex !important
}

.inline-flex {
    display: inline-flex
}

.grid {
    display: grid
}

.hidden {
    display: none
}

.aspect-video {
    aspect-ratio: 16 / 9
}

.h-1\.5 {
    height: 0.375rem
}

.h-2 {
    height: 0.5rem
}

.h-24 {
    height: 6rem !important
}

.h-28 {
    height: 7rem
}

.h-3 {
    height: 0.75rem
}

.h-3\.5 {
    height: 0.875rem
}

.h-4 {
    height: 1rem
}

.h-48 {
    height: 12rem
}

.h-5 {
    height: 1.25rem
}

.h-6 {
    height: 1.5rem
}

.h-72 {
    height: 18rem
}

.h-8 {
    height: 2rem
}

.h-9 {
    height: 2.25rem
}

.h-\[18px\] {
    height: 18px
}

.h-\[40px\] {
    height: 40px
}

.h-full {
    height: 100%
}

.h-px {
    height: 1px
}

.h-10 {
    height: 2.5rem
}

.h-11 {
    height: 2.75rem
}

.h-2\.5 {
    height: 0.625rem
}

.h-0\.5 {
    height: 0.125rem
}

.h-1 {
    height: 0.25rem
}

.h-12 {
    height: 3rem
}

.m-h-12 {
    min-height: 3rem;
    height: 100%;
}

.h-14 {
    height: 3.5rem
}

.h-16 {
    height: 4rem
}

.h-20 {
    height: 5rem
}

.m-h-20 {
    min-height: 5rem;
    height: 100%;
}

.h-40 {
    height: 10rem
}

.h-7 {
    height: 1.75rem
}

.h-\[166\%\] {
    height: 166%
}

.h-\[1px\] {
    height: 1px
}

.h-\[2px\] {
    height: 2px
}

.h-\[420px\] {
    height: 420px
}

.h-\[60px\] {
    height: 60px
}

.h-32 {
    height: 8rem
}

.h-36 {
    height: 9rem
}

.h-\[68px\] {
    height: 68px
}

.max-h-\[500px\] {
    max-height: 500px
}

.min-h-screen {
    min-height: 100vh
}

.min-h-\[140px\] {
    min-height: 140px
}

.min-h-full {
    min-height: 100%
}

.min-h-\[500px\] {
    min-height: 500px
}

.min-h-\[120px\] {
    min-height: 120px
}

.w-1\.5 {
    width: 0.375rem
}

.w-14 {
    width: 3.5rem
}

.w-16 {
    width: 4rem
}

.w-20 {
    width: 5rem
}

.w-24 {
    width: 6rem
}

.w-3 {
    width: 0.75rem
}

.w-3\.5 {
    width: 0.875rem
}

.w-4 {
    width: 1rem
}

.w-48 {
    width: 12rem
}

.w-72 {
    width: 18rem
}

.w-8 {
    width: 2rem
}

.w-9 {
    width: 2.25rem
}

.w-\[18px\] {
    width: 18px
}

.w-\[300px\] {
    width: 300px
}

.w-full {
    width: 100%
}

.w-px {
    width: 1px
}

.w-10 {
    width: 2.5rem
}

.w-11 {
    width: 2.75rem
}

.w-5 {
    width: 1.25rem
}

.w-2\.5 {
    width: 0.625rem
}

.w-12 {
    width: 3rem
}

.w-6 {
    width: 1.5rem
}

.w-7 {
    width: 1.75rem
}

.w-\[166\%\] {
    width: 166%
}

.w-\[210px\] {
    width: 210px
}

.w-\[12\%\] {
    width: 12%
}

.w-\[18\%\] {
    width: 18%
}

.w-\[20\%\] {
    width: 20%
}

.w-\[22\%\] {
    width: 22%
}

.w-\[28\%\] {
    width: 28%
}

.w-\[23\%\] {
    width: 23%
}

.w-\[27\%\] {
    width: 27%
}

.w-\[120px\] {
    width: 120px
}

.w-40 {
    width: 10rem
}

.w-\[2px\] {
    width: 2px
}

.w-\[68px\] {
    width: 68px
}

.w-28 {
    width: 7rem
}

.w-32 {
    width: 8rem
}

.min-w-0 {
    min-width: 0px
}

.max-w-7xl {
    max-width: 80rem
}

.max-w-\[88vw\] {
    max-width: 88vw
}

.max-w-md {
    max-width: 28rem
}

.max-w-xl {
    max-width: 36rem
}

.max-w-\[200px\] {
    max-width: 200px
}

.max-w-\[380px\] {
    max-width: 380px
}

.flex-1 {
    flex: 1 1 0%
}

.shrink-0 {
    flex-shrink: 0
}

.table-fixed {
    table-layout: fixed
}

.origin-top-left {
    transform-origin: top left
}

.-translate-x-full {
    --tw-translate-x: -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-0 {
    --tw-translate-x: 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-x-1\/2 {
    --tw-translate-x: -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-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))
}

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

.rotate-45 {
    --tw-rotate: 45deg;
    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-\[0\.6\] {
    --tw-scale-x: 0.6;
    --tw-scale-y: 0.6;
    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 pulse {
    50% {
        opacity: .5
    }
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite
}

.animate-\[slideUp_0\.25s_ease-out\] {
    animation: slideUp 0.25s ease-out
}

.cursor-pointer {
    cursor: pointer
}

.cursor-not-allowed {
    cursor: not-allowed
}

.cursor-grab {
    cursor: grab
}

.resize-none {
    resize: none
}

.appearance-none {
    -webkit-appearance: none;
    appearance: none
}

.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr))
}

.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr))
}

.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
}

.justify-end {
    justify-content: flex-end
}

.justify-center {
    justify-content: center
}

.justify-between {
    justify-content: space-between
}

.c-gap-1 {
    gap: 0.25rem
}

.c-gap-2 {
    gap: 0.5rem
}

.c-gap-2\.5 {
    gap: 0.625rem
}

.c-gap-3 {
    gap: 0.75rem !important;
}

.c-gap-4 {
    gap: 1rem
}

.c-gap-6 {
    gap: 1.5rem
}

.c-gap-1\.5 {
    gap: 0.375rem
}

.c-gap-8 {
    gap: 2rem
}

.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.125rem * var(--tw-space-y-reverse))
}

.space-y-5 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.25rem * var(--tw-space-y-reverse))
}

.space-y-2\.5 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.625rem * var(--tw-space-y-reverse))
}

.space-y-4 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1rem * var(--tw-space-y-reverse))
}

.space-y-6 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.5rem * var(--tw-space-y-reverse))
}

.space-y-2 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.5rem * var(--tw-space-y-reverse))
}

.space-y-1 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.25rem * var(--tw-space-y-reverse))
}

.space-y-8 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(2rem * var(--tw-space-y-reverse))
}

.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.375rem * var(--tw-space-y-reverse))
}

.overflow-hidden {
    overflow: hidden
}

.overflow-x-auto {
    overflow-x: auto
}

.overflow-y-auto {
    overflow-y: auto
}

.overflow-x-hidden {
    overflow-x: hidden
}

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.whitespace-nowrap {
    white-space: nowrap
}

.c-text-balance {
    text-wrap: balance
}

.rounded {
    border-radius: 0.25rem
}

.rounded-2xl {
    border-radius: 1rem
}

.rounded-full {
    border-radius: 9999px
}

.rounded-lg {
    border-radius: 0.5rem
}

.rounded-md {
    border-radius: 0.375rem
}

.rounded-xl {
    border-radius: 0.75rem
}

.rounded-\[30px\] {
    border-radius: 30px
}

.rounded-\[32px\] {
    border-radius: 32px
}

.rounded-\[2\.5rem\] {
    border-radius: 2.5rem
}

.rounded-\[28px\] {
    border-radius: 28px
}

.rounded-l-xl {
    border-top-left-radius: 0.75rem;
    border-bottom-left-radius: 0.75rem
}

.rounded-r-xl {
    border-top-right-radius: 0.75rem;
    border-bottom-right-radius: 0.75rem
}

.rounded-b-xl {
    border-bottom-right-radius: 0.75rem;
    border-bottom-left-radius: 0.75rem
}

.rounded-t-full {
    border-top-left-radius: 9999px;
    border-top-right-radius: 9999px
}

.rounded-t-2xl {
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem
}

.c-border {
    border-width: 1px
}

.c-border-2 {
    border-width: 2px
}

.c-border-\[3px\] {
    border-width: 3px
}

.c-border-\[6px\] {
    border-width: 6px
}

.c-border-4 {
    border-width: 4px
}

.c-border-b {
    border-bottom-width: 1px
}

.c-border-r {
    border-right-width: 1px
}

.c-border-t {
    border-top-width: 1px
}

.c-border-l-2 {
    border-left-width: 2px
}

.c-border-dashed {
    border-style: dashed
}

.c-border-\[\#10B981\]\/15 {
    border-color: rgb(16 185 129 / 0.15)
}

.c-border-\[\#E2E8F0\] {
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1))
}

.c-border-\[\#E8ECF1\] {
    --tw-border-opacity: 1;
    border-color: rgb(232 236 241 / var(--tw-border-opacity, 1))
}

.c-border-\[\#F1F5F9\] {
    --tw-border-opacity: 1;
    border-color: rgb(241 245 249 / var(--tw-border-opacity, 1))
}

.c-border-black\/10 {
    border-color: rgb(0 0 0 / 0.1)
}

.c-border-black\/20 {
    border-color: rgb(0 0 0 / 0.2)
}

.c-border-\[\#22C55E\]\/15 {
    border-color: rgb(34 197 94 / 0.15)
}

.c-border-\[\#00FFFF\]\/40 {
    border-color: rgb(0 255 255 / 0.4)
}

.c-border-\[\#1E3A5F\]\/50 {
    border-color: rgb(30 58 95 / 0.5)
}

.c-border-\[\#1F7A4D\] {
    --tw-border-opacity: 1;
    border-color: rgb(31 122 77 / var(--tw-border-opacity, 1))
}

.c-border-\[\#1F7A4D\]\/25 {
    border-color: rgb(31 122 77 / 0.25)
}

.c-border-\[\#2D7A4F\]\/40 {
    border-color: rgb(45 122 79 / 0.4)
}

.c-border-\[\#333\]\/60 {
    border-color: rgb(51 51 51 / 0.6)
}

.c-border-\[\#3B82F6\]\/10 {
    border-color: rgb(59 130 246 / 0.1)
}

.c-border-\[\#3B82F6\]\/25 {
    border-color: rgb(59 130 246 / 0.25)
}

.c-border-\[\#3B82F6\]\/40 {
    border-color: rgb(59 130 246 / 0.4)
}

.c-border-\[\#4CAF50\]\/30 {
    border-color: rgb(76 175 80 / 0.3)
}

.c-border-\[\#8B4513\]\/20 {
    border-color: rgb(139 69 19 / 0.2)
}

.c-border-\[\#A5D6A7\]\/60 {
    border-color: rgb(165 214 167 / 0.6)
}

.c-border-\[\#B8D4E8\] {
    --tw-border-opacity: 1;
    border-color: rgb(184 212 232 / var(--tw-border-opacity, 1))
}

.c-border-\[\#B8D4E8\]\/40 {
    border-color: rgb(184 212 232 / 0.4)
}

.c-border-\[\#CD853F\]\/30 {
    border-color: rgb(205 133 63 / 0.3)
}

.c-border-\[\#D4A853\] {
    --tw-border-opacity: 1;
    border-color: rgb(212 168 83 / var(--tw-border-opacity, 1))
}

.c-border-\[\#D4A853\]\/30 {
    border-color: rgb(212 168 83 / 0.3)
}

.c-border-\[\#D4A853\]\/40 {
    border-color: rgb(212 168 83 / 0.4)
}

.c-border-\[\#D4A853\]\/50 {
    border-color: rgb(212 168 83 / 0.5)
}

.c-border-\[\#D4A853\]\/60 {
    border-color: rgb(212 168 83 / 0.6)
}

.c-border-\[\#D4E6EF\]\/50 {
    border-color: rgb(212 230 239 / 0.5)
}

.c-border-\[\#D4E6EF\]\/60 {
    border-color: rgb(212 230 239 / 0.6)
}

.c-border-\[\#E53935\]\/25 {
    border-color: rgb(229 57 53 / 0.25)
}

.c-border-\[\#E53935\]\/40 {
    border-color: rgb(229 57 53 / 0.4)
}

.c-border-\[\#FF00FF\]\/20 {
    border-color: rgb(255 0 255 / 0.2)
}

.c-border-\[\#FF00FF\]\/40 {
    border-color: rgb(255 0 255 / 0.4)
}

.c-border-\[\#FF00FF\]\/50 {
    border-color: rgb(255 0 255 / 0.5)
}

.c-border-\[\#FFDAB9\]\/40 {
    border-color: rgb(255 218 185 / 0.4)
}

.c-border-\[\#FFDAB9\]\/60 {
    border-color: rgb(255 218 185 / 0.6)
}

.c-border-black\/15 {
    border-color: rgb(0 0 0 / 0.15)
}

.c-border-black\/5 {
    border-color: rgb(0 0 0 / 0.05)
}

.c-border-orange-400\/50 {
    border-color: rgb(251 146 60 / 0.5)
}

.c-border-slate-800 {
    --tw-border-opacity: 1;
    border-color: rgb(30 41 59 / var(--tw-border-opacity, 1))
}

.c-border-white {
    --tw-border-opacity: 1;
    border-color: rgb(255 255 255 / var(--tw-border-opacity, 1))
}

.c-border-white\/50 {
    border-color: rgb(255 255 255 / 0.5)
}

.c-border-white\/80 {
    border-color: rgb(255 255 255 / 0.8)
}

.c-border-\[\#1B7A4D\]\/15 {
    border-color: rgb(27 122 77 / 0.15)
}

.c-border-\[\#F8FAFC\] {
    --tw-border-opacity: 1;
    border-color: rgb(248 250 252 / var(--tw-border-opacity, 1))
}

.c-border-\[\#1B7A4D\]\/20 {
    border-color: rgb(27 122 77 / 0.2)
}

.c-border-\[\#1B7A4D\]\/25 {
    border-color: rgb(27 122 77 / 0.25)
}

.c-border-red-100 {
    --tw-border-opacity: 1;
    border-color: rgb(254 226 226 / var(--tw-border-opacity, 1))
}

.c-border-\[\#1F7A4D\]\/30 {
    border-color: rgb(31 122 77 / 0.3)
}

.c-border-red-200 {
    --tw-border-opacity: 1;
    border-color: rgb(254 202 202 / var(--tw-border-opacity, 1))
}

.c-border-\[\#1F7A4D\]\/50 {
    border-color: rgb(31 122 77 / 0.5)
}

.c-border-black\/30 {
    border-color: rgb(0 0 0 / 0.3)
}

.c-border-\[\#1F7A4D\]\/20 {
    border-color: rgb(31 122 77 / 0.2)
}

.c-border-gray-800 {
    --tw-border-opacity: 1;
    border-color: rgb(31 41 55 / var(--tw-border-opacity, 1))
}

.c-border-gray-200 {
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1))
}

.c-border-red-500\/30 {
    border-color: rgb(239 68 68 / 0.3)
}

.c-border-\[\#D4A853\]\/10 {
    border-color: rgb(212 168 83 / 0.1)
}

.c-border-\[\#D4A853\]\/20 {
    border-color: rgb(212 168 83 / 0.2)
}

.c-border-\[\#1E3A5F\] {
    --tw-border-opacity: 1;
    border-color: rgb(30 58 95 / var(--tw-border-opacity, 1))
}

.c-border-\[\#3B82F6\]\/15 {
    border-color: rgb(59 130 246 / 0.15)
}

.c-border-white\/20 {
    border-color: rgb(255 255 255 / 0.2)
}

.c-border-\[\#4CAF50\]\/15 {
    border-color: rgb(76 175 80 / 0.15)
}

.c-border-\[\#4CAF50\]\/20 {
    border-color: rgb(76 175 80 / 0.2)
}

.c-border-\[\#A5D6A7\]\/40 {
    border-color: rgb(165 214 167 / 0.4)
}

.c-border-\[\#00FFFF\]\/10 {
    border-color: rgb(0 255 255 / 0.1)
}

.c-border-\[\#FF00FF\]\/10 {
    border-color: rgb(255 0 255 / 0.1)
}

.c-border-\[\#FF00FF\]\/15 {
    border-color: rgb(255 0 255 / 0.15)
}

.c-border-\[\#FFDAB9\]\/10 {
    border-color: rgb(255 218 185 / 0.1)
}

.c-border-\[\#FFDAB9\]\/15 {
    border-color: rgb(255 218 185 / 0.15)
}

.c-border-\[\#FFDAB9\]\/20 {
    border-color: rgb(255 218 185 / 0.2)
}

.c-border-\[\#333\] {
    --tw-border-opacity: 1;
    border-color: rgb(51 51 51 / var(--tw-border-opacity, 1))
}

.c-border-\[\#E53935\]\/30 {
    border-color: rgb(229 57 53 / 0.3)
}

.c-border-white\/30 {
    border-color: rgb(255 255 255 / 0.3)
}

.c-border-white\/40 {
    border-color: rgb(255 255 255 / 0.4)
}

.c-border-\[\#070A10\] {
    --tw-border-opacity: 1;
    border-color: rgb(7 10 16 / var(--tw-border-opacity, 1))
}

.c-border-\[\#1F7A4D\]\/40 {
    border-color: rgb(31 122 77 / 0.4)
}

.c-border-\[\#4ED19C\] {
    --tw-border-opacity: 1;
    border-color: rgb(78 209 156 / var(--tw-border-opacity, 1))
}

.c-border-\[\#4ED19C\]\/55 {
    border-color: rgb(78 209 156 / 0.55)
}

.c-border-white\/10 {
    border-color: rgb(255 255 255 / 0.1)
}

.c-border-white\/15 {
    border-color: rgb(255 255 255 / 0.15)
}

.c-border-\[\#10B981\]\/20 {
    border-color: rgb(16 185 129 / 0.2)
}

.c-border-white\/\[0\.06\] {
    border-color: rgb(255 255 255 / 0.06)
}

.c-border-\[\#4ADE80\]\/20 {
    border-color: rgb(74 222 128 / 0.2)
}

.c-border-white\/5 {
    border-color: rgb(255 255 255 / 0.05)
}

.c-border-\[\#1B7A4D\]\/30 {
    border-color: rgb(27 122 77 / 0.3)
}

.c-border-\[\#1B7A4D\]\/40 {
    border-color: rgb(27 122 77 / 0.4)
}

.c-border-red-500\/15 {
    border-color: rgb(239 68 68 / 0.15)
}

.c-bg-\[\#1B7A4D\] {
    --tw-bg-opacity: 1;
    background-color: rgb(27 122 77 / var(--tw-bg-opacity, 1))
}

.c-bg-\[\#1B7A4D\]\/10 {
    background-color: rgb(27 122 77 / 0.1)
}

.c-bg-\[\#E2E8F0\] {
    --tw-bg-opacity: 1;
    background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1))
}

.c-bg-\[\#E8ECF1\] {
    --tw-bg-opacity: 1;
    background-color: rgb(232 236 241 / var(--tw-bg-opacity, 1))
}

.c-bg-\[\#ECFDF5\] {
    --tw-bg-opacity: 1;
    background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1))
}

.c-bg-\[\#F1F5F9\] {
    --tw-bg-opacity: 1;
    background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1))
}

.c-bg-\[\#FAFBFC\] {
    --tw-bg-opacity: 1;
    background-color: rgb(250 251 252 / var(--tw-bg-opacity, 1))
}

.c-bg-amber-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1))
}

.c-bg-blue-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1))
}

.c-bg-current {
    background-color: currentColor
}

.c-bg-transparent {
    background-color: transparent
}

.c-bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))
}

.c-bg-white\/15 {
    background-color: rgb(255 255 255 / 0.15)
}

.c-bg-white\/20 {
    background-color: rgb(255 255 255 / 0.2)
}

.c-bg-white\/25 {
    background-color: rgb(255 255 255 / 0.25)
}

.c-bg-white\/30 {
    background-color: rgb(255 255 255 / 0.3)
}

.c-bg-white\/80 {
    background-color: rgb(255 255 255 / 0.8)
}

.c-bg-\[\#F8FAFC\] {
    --tw-bg-opacity: 1;
    background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1))
}

.c-bg-\[\#DCFCE7\] {
    --tw-bg-opacity: 1;
    background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1))
}

.c-bg-\[\#00FFFF\] {
    --tw-bg-opacity: 1;
    background-color: rgb(0 255 255 / var(--tw-bg-opacity, 1))
}

.c-bg-\[\#00FFFF\]\/15 {
    background-color: rgb(0 255 255 / 0.15)
}

.c-bg-\[\#0A0A1A\] {
    --tw-bg-opacity: 1;
    background-color: rgb(10 10 26 / var(--tw-bg-opacity, 1))
}

.c-bg-\[\#0B1628\] {
    --tw-bg-opacity: 1;
    background-color: rgb(11 22 40 / var(--tw-bg-opacity, 1))
}

.c-bg-\[\#0C0A09\] {
    --tw-bg-opacity: 1;
    background-color: rgb(12 10 9 / var(--tw-bg-opacity, 1))
}

.c-bg-\[\#1A1A1A\] {
    --tw-bg-opacity: 1;
    background-color: rgb(26 26 26 / var(--tw-bg-opacity, 1))
}

.c-bg-\[\#1B5E20\]\/40 {
    background-color: rgb(27 94 32 / 0.4)
}

.c-bg-\[\#1E3A5F\] {
    --tw-bg-opacity: 1;
    background-color: rgb(30 58 95 / var(--tw-bg-opacity, 1))
}

.c-bg-\[\#1E3A5F\]\/50 {
    background-color: rgb(30 58 95 / 0.5)
}

.c-bg-\[\#1F7A4D\] {
    --tw-bg-opacity: 1;
    background-color: rgb(31 122 77 / var(--tw-bg-opacity, 1))
}

.c-bg-\[\#1F7A4D\]\/10 {
    background-color: rgb(31 122 77 / 0.1)
}

.c-bg-\[\#1F7A4D\]\/15 {
    background-color: rgb(31 122 77 / 0.15)
}

.c-bg-\[\#1F7A4D\]\/5 {
    background-color: rgb(31 122 77 / 0.05)
}

.c-bg-\[\#2A2A2A\] {
    --tw-bg-opacity: 1;
    background-color: rgb(42 42 42 / var(--tw-bg-opacity, 1))
}

.c-bg-\[\#2A6B9C\] {
    --tw-bg-opacity: 1;
    background-color: rgb(42 107 156 / var(--tw-bg-opacity, 1))
}

.c-bg-\[\#2E7D32\]\/30 {
    background-color: rgb(46 125 50 / 0.3)
}

.c-bg-\[\#388E3C\]\/25 {
    background-color: rgb(56 142 60 / 0.25)
}

.c-bg-\[\#3B82F6\] {
    --tw-bg-opacity: 1;
    background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1))
}

.c-bg-\[\#4CAF50\] {
    --tw-bg-opacity: 1;
    background-color: rgb(76 175 80 / var(--tw-bg-opacity, 1))
}

.c-bg-\[\#5C3317\]\/40 {
    background-color: rgb(92 51 23 / 0.4)
}

.c-bg-\[\#5D1A1A\] {
    --tw-bg-opacity: 1;
    background-color: rgb(93 26 26 / var(--tw-bg-opacity, 1))
}

.c-bg-\[\#66BB6A\]\/60 {
    background-color: rgb(102 187 106 / 0.6)
}

.c-bg-\[\#7BB4D4\] {
    --tw-bg-opacity: 1;
    background-color: rgb(123 180 212 / var(--tw-bg-opacity, 1))
}

.c-bg-\[\#8B0000\]\/20 {
    background-color: rgb(139 0 0 / 0.2)
}

.c-bg-\[\#A5D6A7\] {
    --tw-bg-opacity: 1;
    background-color: rgb(165 214 167 / var(--tw-bg-opacity, 1))
}

.c-bg-\[\#C8DCE9\] {
    --tw-bg-opacity: 1;
    background-color: rgb(200 220 233 / var(--tw-bg-opacity, 1))
}

.c-bg-\[\#D4A853\] {
    --tw-bg-opacity: 1;
    background-color: rgb(212 168 83 / var(--tw-bg-opacity, 1))
}

.c-bg-\[\#D4A853\]\/10 {
    background-color: rgb(212 168 83 / 0.1)
}

.c-bg-\[\#E53935\] {
    --tw-bg-opacity: 1;
    background-color: rgb(229 57 53 / var(--tw-bg-opacity, 1))
}

.c-bg-\[\#E8F0F5\] {
    --tw-bg-opacity: 1;
    background-color: rgb(232 240 245 / var(--tw-bg-opacity, 1))
}

.c-bg-\[\#F4F8FB\] {
    --tw-bg-opacity: 1;
    background-color: rgb(244 248 251 / var(--tw-bg-opacity, 1))
}

.c-bg-\[\#F5E6D0\] {
    --tw-bg-opacity: 1;
    background-color: rgb(245 230 208 / var(--tw-bg-opacity, 1))
}

.c-bg-\[\#FF00FF\] {
    --tw-bg-opacity: 1;
    background-color: rgb(255 0 255 / var(--tw-bg-opacity, 1))
}

.c-bg-\[\#FF00FF\]\/15 {
    background-color: rgb(255 0 255 / 0.15)
}

.c-bg-\[\#FFDAB9\] {
    --tw-bg-opacity: 1;
    background-color: rgb(255 218 185 / var(--tw-bg-opacity, 1))
}

.c-bg-\[\#FFDAB9\]\/20 {
    background-color: rgb(255 218 185 / 0.2)
}

.c-bg-black\/10 {
    background-color: rgb(0 0 0 / 0.1)
}

.c-bg-black\/5 {
    background-color: rgb(0 0 0 / 0.05)
}

.c-bg-blue-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1))
}

.c-bg-orange-900 {
    --tw-bg-opacity: 1;
    background-color: rgb(124 45 18 / var(--tw-bg-opacity, 1))
}

.c-bg-red-500\/90 {
    background-color: rgb(239 68 68 / 0.9)
}

.c-bg-rose-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(225 29 72 / var(--tw-bg-opacity, 1))
}

.c-bg-slate-800 {
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1))
}

.c-bg-white\/40 {
    background-color: rgb(255 255 255 / 0.4)
}

.c-bg-white\/50 {
    background-color: rgb(255 255 255 / 0.5)
}

.c-bg-white\/90 {
    background-color: rgb(255 255 255 / 0.9)
}

.c-bg-yellow-300 {
    --tw-bg-opacity: 1;
    background-color: rgb(253 224 71 / var(--tw-bg-opacity, 1))
}

.c-bg-\[\#1B7A4D\]\/15 {
    background-color: rgb(27 122 77 / 0.15)
}

.c-bg-red-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1))
}

.c-bg-red-50\/50 {
    background-color: rgb(254 242 242 / 0.5)
}

.c-bg-orange-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(249 115 22 / var(--tw-bg-opacity, 1))
}

.c-bg-black {
    --tw-bg-opacity: 1;
    background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1))
}

.c-bg-black\/60 {
    background-color: rgb(0 0 0 / 0.6)
}

.c-bg-gray-200 {
    --tw-bg-opacity: 1;
    background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1))
}

.c-bg-gray-300 {
    --tw-bg-opacity: 1;
    background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1))
}

.c-bg-gray-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1))
}

.c-bg-gray-800 {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1))
}

.c-bg-gray-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1))
}

.c-bg-\[\#1A1714\] {
    --tw-bg-opacity: 1;
    background-color: rgb(26 23 20 / var(--tw-bg-opacity, 1))
}

.c-bg-\[\#1A1714\]\/80 {
    background-color: rgb(26 23 20 / 0.8)
}

.c-bg-\[\#1A1714\]\/90 {
    background-color: rgb(26 23 20 / 0.9)
}

.c-bg-\[\#D4A853\]\/40 {
    background-color: rgb(212 168 83 / 0.4)
}

.c-bg-\[\#0F2440\] {
    --tw-bg-opacity: 1;
    background-color: rgb(15 36 64 / var(--tw-bg-opacity, 1))
}

.c-bg-\[\#0F2440\]\/60 {
    background-color: rgb(15 36 64 / 0.6)
}

.c-bg-\[\#0F2440\]\/70 {
    background-color: rgb(15 36 64 / 0.7)
}

.c-bg-\[\#0F2440\]\/80 {
    background-color: rgb(15 36 64 / 0.8)
}

.c-bg-amber-200 {
    --tw-bg-opacity: 1;
    background-color: rgb(253 230 138 / var(--tw-bg-opacity, 1))
}

.c-bg-orange-400 {
    --tw-bg-opacity: 1;
    background-color: rgb(251 146 60 / var(--tw-bg-opacity, 1))
}

.c-bg-rose-400 {
    --tw-bg-opacity: 1;
    background-color: rgb(251 113 133 / var(--tw-bg-opacity, 1))
}

.c-bg-\[\#0B3D2E\]\/50 {
    background-color: rgb(11 61 46 / 0.5)
}

.c-bg-\[\#0B3D2E\]\/60 {
    background-color: rgb(11 61 46 / 0.6)
}

.c-bg-\[\#1B5E20\]\/30 {
    background-color: rgb(27 94 32 / 0.3)
}

.c-bg-\[\#2E7D32\]\/15 {
    background-color: rgb(46 125 50 / 0.15)
}

.c-bg-\[\#FFF8E7\]\/90 {
    background-color: rgb(255 248 231 / 0.9)
}

.c-bg-white\/60 {
    background-color: rgb(255 255 255 / 0.6)
}

.c-bg-white\/70 {
    background-color: rgb(255 255 255 / 0.7)
}

.c-bg-\[\#0A0A1A\]\/60 {
    background-color: rgb(10 10 26 / 0.6)
}

.c-bg-\[\#0A0A1A\]\/80 {
    background-color: rgb(10 10 26 / 0.8)
}

.c-bg-\[\#FFFF00\] {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 0 / var(--tw-bg-opacity, 1))
}

.c-bg-\[\#5C3317\]\/30 {
    background-color: rgb(92 51 23 / 0.3)
}

.c-bg-\[\#FFF8F0\]\/90 {
    background-color: rgb(255 248 240 / 0.9)
}

.c-bg-white\/10 {
    background-color: rgb(255 255 255 / 0.1)
}

.c-bg-\[\#1A1A1A\]\/80 {
    background-color: rgb(26 26 26 / 0.8)
}

.c-bg-\[\#222\]\/80 {
    background-color: rgb(34 34 34 / 0.8)
}

.c-bg-purple-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(168 85 247 / var(--tw-bg-opacity, 1))
}

.c-bg-purple-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(147 51 234 / var(--tw-bg-opacity, 1))
}

.c-bg-\[\#060910\] {
    --tw-bg-opacity: 1;
    background-color: rgb(6 9 16 / var(--tw-bg-opacity, 1))
}

.c-bg-\[\#070A10\] {
    --tw-bg-opacity: 1;
    background-color: rgb(7 10 16 / var(--tw-bg-opacity, 1))
}

.c-bg-\[\#070B12\] {
    --tw-bg-opacity: 1;
    background-color: rgb(7 11 18 / var(--tw-bg-opacity, 1))
}

.c-bg-\[\#070B12\]\/80 {
    background-color: rgb(7 11 18 / 0.8)
}

.c-bg-\[\#0B1220\]\/50 {
    background-color: rgb(11 18 32 / 0.5)
}

.c-bg-\[\#0B1220\]\/70 {
    background-color: rgb(11 18 32 / 0.7)
}

.c-bg-\[\#1B7A4D\]\/20 {
    background-color: rgb(27 122 77 / 0.2)
}

.c-bg-\[\#1F7A4D\]\/20 {
    background-color: rgb(31 122 77 / 0.2)
}

.c-bg-\[\#1F7A4D\]\/25 {
    background-color: rgb(31 122 77 / 0.25)
}

.c-bg-\[\#4ED19C\]\/10 {
    background-color: rgb(78 209 156 / 0.1)
}

.c-bg-\[\#4ED19C\]\/20 {
    background-color: rgb(78 209 156 / 0.2)
}

.c-bg-white\/5 {
    background-color: rgb(255 255 255 / 0.05)
}

.c-bg-white\/\[0\.03\] {
    background-color: rgb(255 255 255 / 0.03)
}

.c-bg-\[\#10B981\]\/10 {
    background-color: rgb(16 185 129 / 0.1)
}

.c-bg-\[\#111827\]\/60 {
    background-color: rgb(17 24 39 / 0.6)
}

.c-bg-amber-500\/10 {
    background-color: rgb(245 158 11 / 0.1)
}

.c-bg-blue-500\/10 {
    background-color: rgb(59 130 246 / 0.1)
}

.c-bg-\[\#0D1420\]\/70 {
    background-color: rgb(13 20 32 / 0.7)
}

.c-bg-\[\#0D1420\]\/80 {
    background-color: rgb(13 20 32 / 0.8)
}

.c-bg-\[\#4ADE80\]\/15 {
    background-color: rgb(74 222 128 / 0.15)
}

.c-bg-blue-500\/15 {
    background-color: rgb(59 130 246 / 0.15)
}

.c-bg-red-500\/15 {
    background-color: rgb(239 68 68 / 0.15)
}

.c-bg-red-500\/5 {
    background-color: rgb(239 68 68 / 0.05)
}

.c-bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops))
}

.c-bg-gradient-to-b {
    background-image: linear-gradient(to bottom, var(--tw-gradient-stops))
}

.c-bg-gradient-to-r {
    background-image: linear-gradient(to right, var(--tw-gradient-stops))
}

.c-bg-gradient-to-l {
    background-image: linear-gradient(to left, var(--tw-gradient-stops))
}

.from-\[\#10B981\] {
    --tw-gradient-from: #10B981 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(16 185 129 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.from-\[\#F1F5F9\] {
    --tw-gradient-from: #F1F5F9 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(241 245 249 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.from-\[\#0B3D2E\] {
    --tw-gradient-from: #0B3D2E var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(11 61 46 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.from-\[\#8B0000\] {
    --tw-gradient-from: #8B0000 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(139 0 0 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.from-\[\#A8C8D8\] {
    --tw-gradient-from: #A8C8D8 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(168 200 216 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.from-\[\#D2691E\] {
    --tw-gradient-from: #D2691E var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(210 105 30 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.from-\[\#D4A853\]\/20 {
    --tw-gradient-from: rgb(212 168 83 / 0.2) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(212 168 83 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.from-orange-500 {
    --tw-gradient-from: #f97316 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(249 115 22 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.from-transparent {
    --tw-gradient-from: transparent var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.from-\[\#0B1628\]\/30 {
    --tw-gradient-from: rgb(11 22 40 / 0.3) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(11 22 40 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.from-\[\#3B82F6\] {
    --tw-gradient-from: #3B82F6 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.from-rose-700 {
    --tw-gradient-from: #be123c var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(190 18 60 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.from-\[\#1E293B\] {
    --tw-gradient-from: #1E293B var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(30 41 59 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.via-\[\#3B82F6\] {
    --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), #3B82F6 var(--tw-gradient-via-position), var(--tw-gradient-to)
}

.via-\[\#D4A853\] {
    --tw-gradient-to: rgb(212 168 83 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), #D4A853 var(--tw-gradient-via-position), var(--tw-gradient-to)
}

.via-\[\#E53935\] {
    --tw-gradient-to: rgb(229 57 53 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), #E53935 var(--tw-gradient-via-position), var(--tw-gradient-to)
}

.via-rose-500 {
    --tw-gradient-to: rgb(244 63 94 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), #f43f5e var(--tw-gradient-via-position), var(--tw-gradient-to)
}

.via-\[\#0B1628\]\/60 {
    --tw-gradient-to: rgb(11 22 40 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(11 22 40 / 0.6) var(--tw-gradient-via-position), var(--tw-gradient-to)
}

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

.to-white {
    --tw-gradient-to: #fff var(--tw-gradient-to-position)
}

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

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

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

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

.to-amber-500 {
    --tw-gradient-to: #f59e0b var(--tw-gradient-to-position)
}

.to-transparent {
    --tw-gradient-to: transparent var(--tw-gradient-to-position)
}

.to-\[\#D4A853\]\/30 {
    --tw-gradient-to: rgb(212 168 83 / 0.3) var(--tw-gradient-to-position)
}

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

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

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

.to-purple-900 {
    --tw-gradient-to: #581c87 var(--tw-gradient-to-position)
}

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

.object-contain {
    object-fit: contain
}

.object-cover {
    object-fit: cover
}

.c-p-3\.5 {
    padding: 0.875rem
}

.c-p-4 {
    padding: 1rem
}

.c-p-5 {
    padding: 1.25rem
}

.c-p-6 {
    padding: 1.5rem
}

.c-p-7 {
    padding: 1.75rem
}

.c-p-10 {
    padding: 2.5rem
}

.c-p-1 {
    padding: 0.25rem
}

.c-p-1\.5 {
    padding: 0.375rem
}

.c-p-3 {
    padding: 0.75rem
}

.c-p-8 {
    padding: 2rem
}

.c-p-2\.5 {
    padding: 0.625rem
}

.c-px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem
}

.c-px-4 {
    padding-left: 1rem;
    padding-right: 1rem
}

.c-px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem
}

.c-px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem
}

.c-py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem
}

.c-py-10 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem
}

.c-py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem
}

.c-py-2\.5 {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem
}

.c-py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem
}

.c-py-4\.5 {
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
}

.c-py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem
}

.c-px-1 {
    padding-left: 0.25rem;
    padding-right: 0.25rem
}

.c-px-1\.5 {
    padding-left: 0.375rem;
    padding-right: 0.375rem
}

.c-px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem
}

.c-px-3\.5 {
    padding-left: 0.875rem;
    padding-right: 0.875rem
}

.c-px-7 {
    padding-left: 1.75rem;
    padding-right: 1.75rem
}

.c-py-0\.5 {
    padding-top: 0.125rem;
    padding-bottom: 0.125rem
}

.c-py-7 {
    padding-top: 1.75rem;
    padding-bottom: 1.75rem
}

.c-py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem
}

.c-px-2\.5 {
    padding-left: 0.625rem;
    padding-right: 0.625rem
}

.c-py-1\.5 {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem
}

.c-py-3\.5 {
    padding-top: 0.875rem;
    padding-bottom: 0.875rem
}

.c-py-5 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}

.c-px-8 {
    padding-left: 2rem;
    padding-right: 2rem
}

.c-pb-3 {
    padding-bottom: 0.75rem
}

.c-pt-5 {
    padding-top: 1.25rem
}

.c-pt-4 {
    padding-top: 1rem
}

.c-pt-3 {
    padding-top: 0.75rem
}

.c-pb-4 {
    padding-bottom: 1rem
}

.c-pb-6 {
    padding-bottom: 1.5rem
}

.c-pl-0\.5 {
    padding-left: 0.125rem
}

.c-pl-3 {
    padding-left: 0.75rem
}

.c-pt-0\.5 {
    padding-top: 0.125rem
}

.c-pt-2 {
    padding-top: 0.5rem
}

.c-pt-2\.5 {
    padding-top: 0.625rem
}

.c-pt-6 {
    padding-top: 1.5rem
}

.c-pt-\[52px\] {
    padding-top: 52px
}

.c-pr-2 {
    padding-right: 0.5rem
}

.c-pb-0\.5 {
    padding-bottom: 0.125rem
}

.c-pb-5 {
    padding-bottom: 1.25rem
}

.c-pt-10 {
    padding-top: 2.5rem
}

.c-pt-16 {
    padding-top: 4rem
}

.c-pl-8 {
    padding-left: 2rem
}

.c-text-left {
    text-align: left
}

.c-text-center {
    text-align: center
}

.c-text-right {
    text-align: right
}

.c-text-2xl {
    font-size: 1.5rem;
    line-height: 2rem
}

.c-text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem
}

.c-text-\[10px\] {
    font-size: 10px
}

.c-text-\[11px\] {
    font-size: 11px
}

.c-text-base {
    font-size: 1rem;
    line-height: 1.5rem
}

.c-text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem
}

.c-text-sm {
    font-size: 0.8rem;
    line-height: 1.25rem
}

.c-text-xs {
    font-size: 0.75rem;
    line-height: 1rem
}

.c-text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem
}

.c-text-5xl {
    font-size: 3rem;
    line-height: 1
}

.c-text-\[12px\] {
    font-size: 12px
}

.c-text-\[14px\] {
    font-size: 14px
}

.c-text-\[15px\] {
    font-size: 15px
}

.c-text-\[7px\] {
    font-size: 7px
}

.c-text-\[8px\] {
    font-size: 8px
}

.c-text-\[9px\] {
    font-size: 9px
}

.c-text-\[13px\] {
    font-size: 13px
}

.font-bold {
    font-weight: 700
}

.font-medium {
    font-weight: 500
}

.font-semibold {
    font-weight: 600
}

.uppercase {
    text-transform: uppercase
}

.leading-none {
    line-height: 1
}

.leading-relaxed {
    line-height: 1.625
}

.leading-tight {
    line-height: 1.25
}

.tracking-tight {
    letter-spacing: -0.025em
}

.tracking-wider {
    letter-spacing: 0.05em
}

.tracking-widest {
    letter-spacing: 0.1em
}

.tracking-\[0\.15em\] {
    letter-spacing: 0.15em
}

.tracking-wide {
    letter-spacing: 0.025em
}

.tracking-\[0\.2em\] {
    letter-spacing: 0.2em
}

.c-text-\[\#059669\] {
    --tw-text-opacity: 1;
    color: rgb(5 150 105 / var(--tw-text-opacity, 1))
}

.c-text-\[\#0B1220\] {
    --tw-text-opacity: 1;
    color: rgb(11 18 32 / var(--tw-text-opacity, 1))
}

.c-text-\[\#0B1220\]\/80 {
    color: rgb(11 18 32 / 0.8)
}

.c-text-\[\#0F172A\] {
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1))
}

.c-text-\[\#F1F5F9\] {
    --tw-text-opacity: 1;
    color: rgb(241 245 249 / var(--tw-border-opacity, 1))
}

.c-text-\[\#1A2332\] {
    --tw-text-opacity: 1;
    color: rgb(26 35 50 / var(--tw-text-opacity, 1))
}

.c-text-\[\#1B7A4D\] {
    --tw-text-opacity: 1;
    color: rgb(27 122 77 / var(--tw-text-opacity, 1))
}

.c-text-\[\#475569\] {
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1))
}

.c-text-\[\#64748B\] {
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1))
}

.c-text-\[\#94A3B8\] {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1))
}

.c-text-amber-600 {
    --tw-text-opacity: 1;
    color: rgb(217 119 6 / var(--tw-text-opacity, 1))
}

.c-text-black\/80 {
    color: rgb(0 0 0 / 0.8)
}

.c-text-blue-600 {
    --tw-text-opacity: 1;
    color: rgb(37 99 235 / var(--tw-text-opacity, 1))
}

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

.c-text-\[\#CBD5E1\] {
    --tw-text-opacity: 1;
    color: rgb(203 213 225 / var(--tw-text-opacity, 1))
}

.c-text-\[\#16A34A\] {
    --tw-text-opacity: 1;
    color: rgb(22 163 74 / var(--tw-text-opacity, 1))
}

.c-text-\[\#0B1220\]\/60 {
    color: rgb(11 18 32 / 0.6)
}

.c-text-\[\#1A2D3D\] {
    --tw-text-opacity: 1;
    color: rgb(26 45 61 / var(--tw-text-opacity, 1))
}

.c-text-\[\#1F7A4D\] {
    --tw-text-opacity: 1;
    color: rgb(31 122 77 / var(--tw-text-opacity, 1))
}

.c-text-\[\#4A6878\] {
    --tw-text-opacity: 1;
    color: rgb(74 104 120 / var(--tw-text-opacity, 1))
}

.c-text-\[\#5A7D8E\] {
    --tw-text-opacity: 1;
    color: rgb(90 125 142 / var(--tw-text-opacity, 1))
}

.c-text-black\/70 {
    color: rgb(0 0 0 / 0.7)
}

.c-text-red-300 {
    --tw-text-opacity: 1;
    color: rgb(252 165 165 / var(--tw-text-opacity, 1))
}

.c-text-red-500 {
    --tw-text-opacity: 1;
    color: rgb(239 68 68 / var(--tw-text-opacity, 1))
}

.c-text-red-600 {
    --tw-text-opacity: 1;
    color: rgb(220 38 38 / var(--tw-text-opacity, 1))
}

.c-text-red-400 {
    --tw-text-opacity: 1;
    color: rgb(248 113 113 / var(--tw-text-opacity, 1))
}

.c-text-red-700 {
    --tw-text-opacity: 1;
    color: rgb(185 28 28 / var(--tw-text-opacity, 1))
}

.c-text-black\/40 {
    color: rgb(0 0 0 / 0.4)
}

.c-text-gray-400 {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1))
}

.c-text-gray-500 {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1))
}

.c-text-gray-700 {
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1))
}

.c-text-gray-900 {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1))
}

.c-text-gray-800 {
    --tw-text-opacity: 1;
    color: rgb(31 41 55 / var(--tw-text-opacity, 1))
}

.c-text-\[\#0C0A09\] {
    --tw-text-opacity: 1;
    color: rgb(12 10 9 / var(--tw-text-opacity, 1))
}

.c-text-\[\#8B7D6B\] {
    --tw-text-opacity: 1;
    color: rgb(139 125 107 / var(--tw-text-opacity, 1))
}

.c-text-\[\#A09080\] {
    --tw-text-opacity: 1;
    color: rgb(160 144 128 / var(--tw-text-opacity, 1))
}

.c-text-\[\#C4B5A0\] {
    --tw-text-opacity: 1;
    color: rgb(196 181 160 / var(--tw-text-opacity, 1))
}

.c-text-\[\#D4A853\] {
    --tw-text-opacity: 1;
    color: rgb(212 168 83 / var(--tw-text-opacity, 1))
}

.c-text-\[\#F5F0E8\] {
    --tw-text-opacity: 1;
    color: rgb(245 240 232 / var(--tw-text-opacity, 1))
}

.c-text-\[\#3B82F6\] {
    --tw-text-opacity: 1;
    color: rgb(59 130 246 / var(--tw-text-opacity, 1))
}

.c-text-\[\#60A5FA\] {
    --tw-text-opacity: 1;
    color: rgb(96 165 250 / var(--tw-text-opacity, 1))
}

.c-text-\[\#94B8DB\] {
    --tw-text-opacity: 1;
    color: rgb(148 184 219 / var(--tw-text-opacity, 1))
}

.c-text-orange-100 {
    --tw-text-opacity: 1;
    color: rgb(255 237 213 / var(--tw-text-opacity, 1))
}

.c-text-orange-600 {
    --tw-text-opacity: 1;
    color: rgb(234 88 12 / var(--tw-text-opacity, 1))
}

.c-text-white\/70 {
    color: rgb(255 255 255 / 0.7)
}

.c-text-white\/80 {
    color: rgb(255 255 255 / 0.8)
}

.c-text-white\/90 {
    color: rgb(255 255 255 / 0.9)
}

.c-text-\[\#A5D6A7\] {
    --tw-text-opacity: 1;
    color: rgb(165 214 167 / var(--tw-text-opacity, 1))
}

.c-text-\[\#A5D6A7\]\/70 {
    color: rgb(165 214 167 / 0.7)
}

.c-text-\[\#A5D6A7\]\/80 {
    color: rgb(165 214 167 / 0.8)
}

.c-text-\[\#E8F5E9\] {
    --tw-text-opacity: 1;
    color: rgb(232 245 233 / var(--tw-text-opacity, 1))
}

.c-text-\[\#3E1010\] {
    --tw-text-opacity: 1;
    color: rgb(62 16 16 / var(--tw-text-opacity, 1))
}

.c-text-\[\#5D4037\] {
    --tw-text-opacity: 1;
    color: rgb(93 64 55 / var(--tw-text-opacity, 1))
}

.c-text-\[\#8B0000\] {
    --tw-text-opacity: 1;
    color: rgb(139 0 0 / var(--tw-text-opacity, 1))
}

.c-text-\[\#8B4513\] {
    --tw-text-opacity: 1;
    color: rgb(139 69 19 / var(--tw-text-opacity, 1))
}

.c-text-\[\#00FFFF\]\/60 {
    color: rgb(0 255 255 / 0.6)
}

.c-text-\[\#B0B0C0\] {
    --tw-text-opacity: 1;
    color: rgb(176 176 192 / var(--tw-text-opacity, 1))
}

.c-text-\[\#E0E0F0\] {
    --tw-text-opacity: 1;
    color: rgb(224 224 240 / var(--tw-text-opacity, 1))
}

.c-text-black {
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity, 1))
}

.c-text-\[\#FFDAB9\] {
    --tw-text-opacity: 1;
    color: rgb(255 218 185 / var(--tw-text-opacity, 1))
}

.c-text-\[\#FFDAB9\]\/60 {
    color: rgb(255 218 185 / 0.6)
}

.c-text-\[\#FFDAB9\]\/70 {
    color: rgb(255 218 185 / 0.7)
}

.c-text-\[\#FFF8F0\] {
    --tw-text-opacity: 1;
    color: rgb(255 248 240 / var(--tw-text-opacity, 1))
}

.c-text-\[\#888\] {
    --tw-text-opacity: 1;
    color: rgb(136 136 136 / var(--tw-text-opacity, 1))
}

.c-text-\[\#999\] {
    --tw-text-opacity: 1;
    color: rgb(153 153 153 / var(--tw-text-opacity, 1))
}

.c-text-\[\#CCC\] {
    --tw-text-opacity: 1;
    color: rgb(204 204 204 / var(--tw-text-opacity, 1))
}

.c-text-rose-200 {
    --tw-text-opacity: 1;
    color: rgb(254 205 211 / var(--tw-text-opacity, 1))
}

.c-text-\[\#FF00FF\] {
    --tw-text-opacity: 1;
    color: rgb(255 0 255 / var(--tw-text-opacity, 1))
}

.c-text-\[\#5D1A1A\] {
    --tw-text-opacity: 1;
    color: rgb(93 26 26 / var(--tw-text-opacity, 1))
}

.c-text-\[\#4ED19C\] {
    --tw-text-opacity: 1;
    color: rgb(78 209 156 / var(--tw-text-opacity, 1))
}

.c-text-\[\#86EFAC\] {
    --tw-text-opacity: 1;
    color: rgb(134 239 172 / var(--tw-text-opacity, 1))
}

.c-text-blue-400 {
    --tw-text-opacity: 1;
    color: rgb(96 165 250 / var(--tw-text-opacity, 1))
}

.c-text-white\/45 {
    color: rgb(255 255 255 / 0.45)
}

.c-text-white\/50 {
    color: rgb(255 255 255 / 0.5)
}

.c-text-white\/60 {
    color: rgb(255 255 255 / 0.6)
}

.c-text-white\/65 {
    color: rgb(255 255 255 / 0.65)
}

.c-text-\[\#34D399\] {
    --tw-text-opacity: 1;
    color: rgb(52 211 153 / var(--tw-text-opacity, 1))
}

.c-text-amber-400 {
    --tw-text-opacity: 1;
    color: rgb(251 191 36 / var(--tw-text-opacity, 1))
}

.c-text-\[\#4ADE80\] {
    --tw-text-opacity: 1;
    color: rgb(74 222 128 / var(--tw-text-opacity, 1))
}

.c-text-white\/40 {
    color: rgb(255 255 255 / 0.4)
}

.c-text-red-400\/30 {
    color: rgb(248 113 113 / 0.3)
}

.c-text-white\/25 {
    color: rgb(255 255 255 / 0.25)
}

.underline {
    -webkit-text-decoration-line: underline;
    text-decoration-line: underline
}

.decoration-dotted {
    -webkit-text-decoration-style: dotted;
    text-decoration-style: dotted
}

.underline-offset-2 {
    text-underline-offset: 2px
}

.opacity-0 {
    opacity: 0
}

.opacity-\[0\.03\] {
    opacity: 0.03
}

.opacity-10 {
    opacity: 0.1
}

.opacity-15 {
    opacity: 0.15
}

.opacity-20 {
    opacity: 0.2
}

.opacity-25 {
    opacity: 0.25
}

.opacity-30 {
    opacity: 0.3
}

.opacity-40 {
    opacity: 0.4
}

.opacity-50 {
    opacity: 0.5
}

.opacity-70 {
    opacity: 0.7
}

.opacity-60 {
    opacity: 0.6
}

.opacity-\[0\.04\] {
    opacity: 0.04
}

.opacity-5 {
    opacity: 0.05
}

.opacity-\[0\.06\] {
    opacity: 0.06
}

.opacity-80 {
    opacity: 0.8
}

.mix-blend-screen {
    mix-blend-mode: screen
}

.mix-blend-overlay {
    mix-blend-mode: overlay
}

.shadow-\[inset_0_0_0_1px_rgba\(27\2c 122\2c 77\2c 0\.15\)\] {
    --tw-shadow: inset 0 0 0 1px rgba(27,122,77,0.15);
    --tw-shadow-colored: inset 0 0 0 1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-lg {
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

.shadow-sm {
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

.shadow-md {
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

.shadow-\[0_20px_50px_rgba\(0\2c 0\2c 0\2c 0\.2\)\] {
    --tw-shadow: 0 20px 50px rgba(0,0,0,0.2);
    --tw-shadow-colored: 0 20px 50px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-\[0_2px_10px_rgba\(0\2c 0\2c 0\2c 0\.04\)\] {
    --tw-shadow: 0 2px 10px rgba(0,0,0,0.04);
    --tw-shadow-colored: 0 2px 10px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-\[0_2px_8px_rgba\(0\2c 0\2c 0\2c 0\.02\)\] {
    --tw-shadow: 0 2px 8px rgba(0,0,0,0.02);
    --tw-shadow-colored: 0 2px 8px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-\[0_2px_8px_rgba\(0\2c 0\2c 0\2c 0\.03\)\] {
    --tw-shadow: 0 2px 8px rgba(0,0,0,0.03);
    --tw-shadow-colored: 0 2px 8px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-\[0_4px_15px_rgba\(31\2c 122\2c 77\2c 0\.1\)\] {
    --tw-shadow: 0 4px 15px rgba(31,122,77,0.1);
    --tw-shadow-colored: 0 4px 15px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-\[0_4px_20px_rgba\(42\2c 107\2c 156\2c 0\.12\)\] {
    --tw-shadow: 0 4px 20px rgba(42,107,156,0.12);
    --tw-shadow-colored: 0 4px 20px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-\[0_1px_3px_rgba\(0\2c 0\2c 0\2c 0\.04\)\] {
    --tw-shadow: 0 1px 3px rgba(0,0,0,0.04);
    --tw-shadow-colored: 0 1px 3px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-2xl {
    --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-\[0_2px_8px_rgba\(0\2c 0\2c 0\2c 0\.3\)\] {
    --tw-shadow: 0 2px 8px rgba(0,0,0,0.3);
    --tw-shadow-colored: 0 2px 8px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-\[0_4px_16px_rgba\(212\2c 168\2c 83\2c 0\.05\)\] {
    --tw-shadow: 0 4px 16px rgba(212,168,83,0.05);
    --tw-shadow-colored: 0 4px 16px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-\[0_8px_30px_rgba\(0\2c 0\2c 0\2c 0\.3\)\] {
    --tw-shadow: 0 8px 30px rgba(0,0,0,0.3);
    --tw-shadow-colored: 0 8px 30px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-\[0_2px_8px_rgba\(0\2c 0\2c 0\2c 0\.2\)\] {
    --tw-shadow: 0 2px 8px rgba(0,0,0,0.2);
    --tw-shadow-colored: 0 2px 8px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-\[0_4px_16px_rgba\(59\2c 130\2c 246\2c 0\.06\)\] {
    --tw-shadow: 0 4px 16px rgba(59,130,246,0.06);
    --tw-shadow-colored: 0 4px 16px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-\[0_4px_16px_rgba\(0\2c 0\2c 0\2c 0\.1\)\] {
    --tw-shadow: 0 4px 16px rgba(0,0,0,0.1);
    --tw-shadow-colored: 0 4px 16px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-\[0_8px_32px_rgba\(0\2c 0\2c 0\2c 0\.15\)\] {
    --tw-shadow: 0 8px 32px rgba(0,0,0,0.15);
    --tw-shadow-colored: 0 8px 32px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-xl {
    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-\[0_8px_32px_rgba\(0\2c 0\2c 0\2c 0\.2\)\] {
    --tw-shadow: 0 8px 32px rgba(0,0,0,0.2);
    --tw-shadow-colored: 0 8px 32px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-\[0_0_15px_rgba\(78\2c 209\2c 156\2c 0\.15\)\] {
    --tw-shadow: 0 0 15px rgba(78,209,156,0.15);
    --tw-shadow-colored: 0 0 15px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-\[inset_0_0_0_1px_rgba\(78\2c 209\2c 156\2c 0\.25\)\] {
    --tw-shadow: inset 0 0 0 1px rgba(78,209,156,0.25);
    --tw-shadow-colored: inset 0 0 0 1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.blur-\[10px\] {
    --tw-blur: blur(10px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.blur-\[12px\] {
    --tw-blur: blur(12px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.blur-\[15px\] {
    --tw-blur: blur(15px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.blur-\[18px\] {
    --tw-blur: blur(18px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.blur-\[20px\] {
    --tw-blur: blur(20px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.blur-\[25px\] {
    --tw-blur: blur(25px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.blur-\[8px\] {
    --tw-blur: blur(8px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.blur-\[40px\] {
    --tw-blur: blur(40px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.blur-\[60px\] {
    --tw-blur: blur(60px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.blur-md {
    --tw-blur: blur(12px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.blur-\[35px\] {
    --tw-blur: blur(35px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.blur-\[30px\] {
    --tw-blur: blur(30px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.blur-\[50px\] {
    --tw-blur: blur(50px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.blur-lg {
    --tw-blur: blur(16px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.blur-xl {
    --tw-blur: blur(24px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.drop-shadow-sm {
    --tw-drop-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.backdrop-blur-xl {
    --tw-backdrop-blur: blur(24px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}

.backdrop-blur-\[2px\] {
    --tw-backdrop-blur: blur(2px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}

.backdrop-blur-md {
    --tw-backdrop-blur: blur(12px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}

.backdrop-blur-sm {
    --tw-backdrop-blur: blur(4px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}

.backdrop-blur {
    --tw-backdrop-blur: blur(8px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}

.backdrop-blur-2xl {
    --tw-backdrop-blur: blur(40px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}

.transition {
    transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms
}

.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms
}

.transition-colors {
    transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms
}

.transition-opacity {
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms
}

.transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms
}

.duration-200 {
    transition-duration: 200ms
}

.duration-300 {
    transition-duration: 300ms
}

.ease-out {
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1)
}

.placeholder\:c-text-\[\#94A3B8\]::placeholder {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1))
}

.placeholder\:c-text-black\/40::placeholder {
    color: rgb(0 0 0 / 0.4)
}

.placeholder\:c-text-white\/40::placeholder {
    color: rgb(255 255 255 / 0.4)
}

.placeholder\:c-text-white\/45::placeholder {
    color: rgb(255 255 255 / 0.45)
}

.last\:c-border-0:last-child {
    border-width: 0px
}

.hover\:-translate-y-0\.5:hover {
    --tw-translate-y: -0.125rem;
    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))
}

.hover\:scale-110:hover {
    --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))
}

.hover\:scale-\[1\.02\]:hover {
    --tw-scale-x: 1.02;
    --tw-scale-y: 1.02;
    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))
}

.hover\:c-border-\[\#10B981\]\/30:hover {
    border-color: rgb(16 185 129 / 0.3)
}

.hover\:c-border-amber-300:hover {
    --tw-border-opacity: 1;
    border-color: rgb(252 211 77 / var(--tw-border-opacity, 1))
}

.hover\:c-border-blue-300:hover {
    --tw-border-opacity: 1;
    border-color: rgb(147 197 253 / var(--tw-border-opacity, 1))
}

.hover\:c-border-red-300:hover {
    --tw-border-opacity: 1;
    border-color: rgb(252 165 165 / var(--tw-border-opacity, 1))
}

.hover\:c-border-\[\#1F7A4D\]\/50:hover {
    border-color: rgb(31 122 77 / 0.5)
}

.hover\:c-border-\[\#CBD5E1\]:hover {
    --tw-border-opacity: 1;
    border-color: rgb(203 213 225 / var(--tw-border-opacity, 1))
}

.hover\:c-border-red-200:hover {
    --tw-border-opacity: 1;
    border-color: rgb(254 202 202 / var(--tw-border-opacity, 1))
}

.hover\:c-border-black\/30:hover {
    border-color: rgb(0 0 0 / 0.3)
}

.hover\:c-border-\[\#D4A853\]\/60:hover {
    border-color: rgb(212 168 83 / 0.6)
}

.hover\:c-border-\[\#3B82F6\]\/50:hover {
    border-color: rgb(59 130 246 / 0.5)
}

.hover\:c-border-\[\#4ED19C\]\/50:hover {
    border-color: rgb(78 209 156 / 0.5)
}

.hover\:c-border-red-500\/50:hover {
    border-color: rgb(239 68 68 / 0.5)
}

.hover\:c-border-white\/30:hover {
    border-color: rgb(255 255 255 / 0.3)
}

.hover\:c-border-amber-500\/30:hover {
    border-color: rgb(245 158 11 / 0.3)
}

.hover\:c-border-blue-500\/30:hover {
    border-color: rgb(59 130 246 / 0.3)
}

.hover\:c-border-red-500\/25:hover {
    border-color: rgb(239 68 68 / 0.25)
}

.hover\:c-border-white\/20:hover {
    border-color: rgb(255 255 255 / 0.2)
}

.hover\:c-bg-\[\#156B42\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(21 107 66 / var(--tw-bg-opacity, 1))
}

.hover\:c-bg-\[\#F1F5F9\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1))
}

.hover\:c-bg-black\/5:hover {
    background-color: rgb(0 0 0 / 0.05)
}

.hover\:c-bg-red-50:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1))
}

.hover\:c-bg-\[\#18653F\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(24 101 63 / var(--tw-bg-opacity, 1))
}

.hover\:c-bg-\[\#F8FAFC\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1))
}

.hover\:c-bg-red-600:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1))
}

.hover\:c-bg-\[\#FAFBFC\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(250 251 252 / var(--tw-bg-opacity, 1))
}

.hover\:c-bg-\[\#ECFDF5\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1))
}

.hover\:c-bg-white:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))
}

.hover\:c-bg-black\/10:hover {
    background-color: rgb(0 0 0 / 0.1)
}

.hover\:c-bg-red-500\/10:hover {
    background-color: rgb(239 68 68 / 0.1)
}

.hover\:c-bg-\[\#D4A853\]\/10:hover {
    background-color: rgb(212 168 83 / 0.1)
}

.hover\:c-bg-\[\#3B82F6\]\/10:hover {
    background-color: rgb(59 130 246 / 0.1)
}

.hover\:c-bg-white\/40:hover {
    background-color: rgb(255 255 255 / 0.4)
}

.hover\:c-bg-white\/10:hover {
    background-color: rgb(255 255 255 / 0.1)
}

.hover\:c-bg-white\/5:hover {
    background-color: rgb(255 255 255 / 0.05)
}

.hover\:c-bg-\[\#111827\]\/80:hover {
    background-color: rgb(17 24 39 / 0.8)
}

.hover\:c-bg-white\/\[0\.02\]:hover {
    background-color: rgb(255 255 255 / 0.02)
}

.hover\:c-bg-\[\#1B7A4D\]\/15:hover {
    background-color: rgb(27 122 77 / 0.15)
}

.hover\:c-text-\[\#0F172A\]:hover {
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1))
}

.hover\:c-text-red-600:hover {
    --tw-text-opacity: 1;
    color: rgb(220 38 38 / var(--tw-text-opacity, 1))
}

.hover\:c-text-gray-800:hover {
    --tw-text-opacity: 1;
    color: rgb(31 41 55 / var(--tw-text-opacity, 1))
}

.hover\:c-text-gray-600:hover {
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1))
}

.hover\:c-text-\[\#4ED19C\]:hover {
    --tw-text-opacity: 1;
    color: rgb(78 209 156 / var(--tw-text-opacity, 1))
}

.hover\:c-text-red-400:hover {
    --tw-text-opacity: 1;
    color: rgb(248 113 113 / var(--tw-text-opacity, 1))
}

.hover\:c-text-white\/70:hover {
    color: rgb(255 255 255 / 0.7)
}

.hover\:c-text-white\/80:hover {
    color: rgb(255 255 255 / 0.8)
}

.hover\:c-text-white\/90:hover {
    color: rgb(255 255 255 / 0.9)
}

.hover\:opacity-80:hover {
    opacity: 0.8
}

.hover\:shadow-lg:hover {
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.hover\:shadow-xl:hover {
    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.hover\:shadow-sm:hover {
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.hover\:shadow-\[\#10B981\]\/5:hover {
    --tw-shadow-color: rgb(16 185 129 / 0.05);
    --tw-shadow: var(--tw-shadow-colored)
}

.hover\:shadow-amber-500\/5:hover {
    --tw-shadow-color: rgb(245 158 11 / 0.05);
    --tw-shadow: var(--tw-shadow-colored)
}

.hover\:shadow-blue-500\/5:hover {
    --tw-shadow-color: rgb(59 130 246 / 0.05);
    --tw-shadow: var(--tw-shadow-colored)
}

.focus\:c-border-\[\#4ED19C\]\/35:focus {
    border-color: rgb(78 209 156 / 0.35)
}

.focus\:c-border-\[\#22C55E\]\/40:focus {
    border-color: rgb(34 197 94 / 0.4)
}

.focus\:outline-none:focus {
    outline: 2px solid transparent;
    outline-offset: 2px
}

.focus\:ring-2:focus {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}

.focus\:ring-\[\#4ED19C\]\/25:focus {
    --tw-ring-color: rgb(78 209 156 / 0.25)
}

.focus\:ring-\[\#22C55E\]\/20:focus {
    --tw-ring-color: rgb(34 197 94 / 0.2)
}

.focus-visible\:outline-none:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px
}

.active\:scale-95:active {
    --tw-scale-x: .95;
    --tw-scale-y: .95;
    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))
}

.active\:cursor-grabbing:active {
    cursor: grabbing
}

.disabled\:pointer-events-none:disabled {
    pointer-events: none
}

.disabled\:opacity-50:disabled {
    opacity: 0.5
}

.group:hover .group-hover\:translate-x-0\.5 {
    --tw-translate-x: 0.125rem;
    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))
}

.group:hover .group-hover\: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))
}

.group:hover .group-hover\:.c-bg-blue-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1))
}

.group:hover .group-hover\:.c-bg-red-200\/70 {
    background-color: rgb(254 202 202 / 0.7)
}

.group:hover .group-hover\:.c-bg-blue-500\/25 {
    background-color: rgb(59 130 246 / 0.25)
}

.group:hover .group-hover\:.c-bg-red-500\/25 {
    background-color: rgb(239 68 68 / 0.25)
}

.group:hover .group-hover\:opacity-100 {
    opacity: 1
}

@media (min-width: 640px) {
    .sm\:w-\[220px\] {
        width: 220px
    }

    .sm\:w-auto {
        width: auto
    }

    .sm\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .sm\:flex-row {
        flex-direction: row
    }

    .sm\:items-end {
        align-items: flex-end
    }

    .sm\:items-center {
        align-items: center
    }
}

@media (min-width: 768px) {
    .md\:col-span-1 {
        grid-column: span 1 / span 1
    }

    .md\:col-span-2 {
        grid-column: span 2 / span 2
    }

    .md\:block {
        display: block
    }

    .md\:flex {
        display: flex
    }

    .md\:table-cell {
        display: table-cell
    }

    .md\:w-auto {
        width: auto
    }

    .md\:w-40 {
        width: 10rem
    }

    .md\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .md\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }

    .md\:flex-row {
        flex-direction: row
    }

    .md\:items-center {
        align-items: center
    }

    .md\:justify-between {
        justify-content: space-between
    }

    .md\:c-p-10 {
        padding: 2.5rem
    }

    .md\:c-p-6 {
        padding: 1.5rem
    }

    .md\:c-p-8 {
        padding: 2rem
    }

    .md\:c-px-8 {
        padding-left: 2rem;
        padding-right: 2rem
    }

    .md\:c-py-8 {
        padding-top: 2rem;
        padding-bottom: 2rem
    }

    .md\:c-text-\[32px\] {
        font-size: 32px
    }

    .md\:c-text-2xl {
        font-size: 1.5rem;
        line-height: 2rem
    }
}

@media (min-width: 1024px) {
    .lg\:col-span-5 {
        grid-column: span 5 / span 5
    }

    .lg\:col-span-7 {
        grid-column: span 7 / span 7
    }

    .lg\:flex {
        display: flex
    }

    .lg\:grid-cols-12 {
        grid-template-columns: repeat(12, minmax(0, 1fr))
    }

    .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .lg\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }

    .lg\:grid-cols-\[200px_minmax\(0\2c 1fr\)\] {
        grid-template-columns: 200px minmax(0,1fr)
    }

    .lg\:grid-cols-\[250px_minmax\(0\2c 1fr\)\] {
        grid-template-columns: 250px minmax(0,1fr)
    }

    .lg\:grid-cols-\[235px_minmax\(0\2c 1fr\)\] {
        grid-template-columns: 235px minmax(0,1fr)
    }

    .lg\:grid-cols-\[minmax\(0\2c 1fr\)_280px\] {
        grid-template-columns: minmax(0,1fr) 280px
    }

    .lg\:grid-cols-\[minmax\(0\2c 1fr\)_255px\] {
        grid-template-columns: minmax(0,1fr) 255px
    }

    .lg\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .lg\:gap-6 {
        gap: 1.5rem
    }

    .lg\:c-border-b-0 {
        border-bottom-width: 0px
    }

    .lg\:c-border-r {
        border-right-width: 1px
    }
}

@media (min-width: 1280px) {
    .xl\:grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr))
    }
}

.d-flex {
    display: flex;
}

.h-100 {
    height: 100%;
}

.c-bg-theme {
    height: 4rem;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 0.55rem;
}

#theme_list button.selected {
    border-color: rgb(31 122 77 / 0.28);
    --tw-bg-opacity: 1;
    background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1))
}

.d-none {
    display: none !important;
}

.selected-text {
    line-height: 0.65rem;
}


.menu-tab {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-radius: 0.5rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    text-align: left;
    color: rgb(11 18 32 / 0.6)
}

    .menu-tab.active {
        --tw-text-opacity: 1;
        color: rgb(31 122 77 / var(--tw-text-opacity, 1));
        font-weight: 500;
        background-color: rgb(31 122 77 / 0.1);
    }

button.menu-tab .steps {
    display: inline-flex;
    height: 1.75rem;
    width: 1.75rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    border-width: 1px;
    font-size: 12px;
    font-weight: 600;
    border-color: rgb(0 0 0 / 0.15);
    background-color: rgb(0 0 0 / 0.05);
    color: rgb(0 0 0 / 0.7)
}

button.menu-tab.active .steps {
    border-color: rgb(31 122 77 / 0.25) !important;
    --tw-text-opacity: 1 !important;
    color: rgb(31 122 77 / var(--tw-text-opacity, 1)) !important;
    background-color: unset !important;
}

.space-y-2 > :not([hidden]) ~ :not([hidden]), .space-y-2 > :not([hidden]) ~ :not([hidden]) > div {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.h-30 {
    height: 7.5rem;
}

.input-group > input:focus, .input-group > textarea:focus, .input-group > select:focus {
    outline: none;
}

.input-group > input, .input-group > textarea, .input-group > select, .input-group > .input-group-text {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    padding-left: 0;
    padding-right: 0;
}

/* First child → left padding */
/* Fields inside an .input-group take the group's surface. Without this, mobile
   browsers paint their own UA chrome inside the white wrapper: iOS renders
   [type=search] (kept as -webkit-appearance: textfield by the reset above) as a
   grey inset box, and a bare <select> gets the platform button fill, so the
   search box and the phone country-code dropdown show as a different colour
   block from the field around them. */
.input-group > input, .input-group > select {
    -webkit-appearance: none;
    appearance: none;
    background-color: transparent;
    color: inherit;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    outline: none;
}

.input-group > input::placeholder {
    color: #94A3B8;
}

.input-group > input[type=search]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.input-group > :first-child:not(label) {
    padding-left: 0.875rem !important;
    border-top-left-radius: 0.75rem;
    border-bottom-left-radius: 0.75rem;
}

/* Last child → right padding */
.input-group > :last-child:not(label) {
    padding-right: 0.875rem !important;
    border-top-right-radius: 0.75rem;
    border-bottom-right-radius: 0.75rem;
}

.flex-nowrap {
    flex-wrap: nowrap;
    display: flex;
}

.d-block {
    display: block !important;
}

.custom-tooltip.tooltip {
    overflow: visible;
}

    .custom-tooltip.tooltip .tooltip-inner {
        --tw-bg-opacity: 1;
        background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
        color: rgb(100 116 139 / var(--tw-text-opacity, 1));
        border: 1px solid #E2E8F0;
        border-radius: 10px;
        padding: 10px 12px;
        font-size: 14px;
        box-shadow: 0 8px 20px rgba(0,0,0,0.08);
        text-align: left;
    }

    .custom-tooltip.tooltip .tooltip-arrow {
        width: 1rem;
        height: 0.5rem;
    }

        .custom-tooltip.tooltip .tooltip-arrow::before {
            content: "";
            position: absolute;
            width: 0;
            height: 0;
            border-style: solid;
        }

    .custom-tooltip.tooltip[data-popper-placement^="top"] .tooltip-arrow::before {
        border-width: 6px 6px 0 6px;
        border-color: #E2E8F0 transparent transparent transparent;
    }

    .custom-tooltip.tooltip[data-popper-placement^="bottom"] .tooltip-arrow::before {
        border-width: 0 6px 6px 6px;
        border-color: transparent transparent #E2E8F0 transparent;
    }

    .custom-tooltip.tooltip[data-popper-placement^="left"] .tooltip-arrow::before {
        border-width: 6px 0 6px 6px;
        border-color: transparent transparent transparent #E2E8F0;
    }

    .custom-tooltip.tooltip[data-popper-placement^="right"] .tooltip-arrow::before {
        border-width: 6px 6px 6px 0;
        border-color: transparent #E2E8F0 transparent transparent;
    }

/*w-full relative flex min-h-[140px] flex-col justify-between rounded-2xl border p-3 text-left transition border-[#1F7A4D] bg-[#1F7A4D]/5 shadow-[0_4px_15px_rgba(31,122,77,0.1)]
*/

/*w-full relative flex min-h-[140px] flex-col justify-between rounded-2xl border p-3 text-left transition border-black/10 bg-white hover:c-border-black/30 shadow-sm
*/
.template-library {
    width: 100%;
    position: relative;
    display: flex;
    min-height: 140px;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 1rem;
    border-width: 1px;
    padding: 0.75rem;
    text-align: left;
    border-color: rgb(0 0 0 / 0.1);
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

    .template-library:hover {
        border-color: rgb(0 0 0 / 0.3);
    }

    .template-library.selected {
        --tw-border-opacity: 1 !important;
        border-color: rgb(31 122 77 / var(--tw-border-opacity, 1)) !important;
        background-color: rgb(31 122 77 / 0.05) !important;
        --tw-shadow: 0 4px 15px rgba(31,122,77,0.1) !important;
        --tw-shadow-colored: 0 4px 15px var(--tw-shadow-color) !important;
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important
    }

.c-p-relative {
    position: relative;
}

.btnRemove {
    position: absolute;
    top: -5px;
    right: -5px;
    z-index: 2;
    cursor: pointer;
    width: 25px;
    height: 25px;
    border-radius: 50%; /* 👈 makes it round */
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.c-text-danger {
    --bs-bg-opacity: 1;
    color: rgba(var(--bs-danger-rgb), var(--bs-bg-opacity)) !important;
    font-size: 0.75rem;
    line-height: 1rem;
}

div.input-group:focus-within:not(:has(.input-validation-error)), .single-input:focus {
    --tw-ring-color: rgb(34 197 94 / 0.2);
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
    outline: 2px solid transparent !important;
    outline-offset: 2px !important;
    border-color: rgb(34 197 94 / 0.4) !important;
}

.form-control:not(.single-input) {
    border: none;
    box-shadow: none;
}

    .form-control:not(.single-input):focus {
        border: none;
        box-shadow: none;
    }

.input-group:has(.input-validation-error), .single-input.input-validation-error {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.2) !important;
}

.single-input, .input-group {
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1))
}

    .single-input::placeholder {
        --tw-text-opacity: 1;
        color: rgb(148 163 184 / var(--tw-text-opacity, 1))
    }

.break-word {
    word-break: break-word;
}

.m-auto {
    margin: auto;
}


/* =========================
    Swiper Layout
========================= */

.templateSwiper {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

    .templateSwiper .swiper-slide {
        height: auto !important;
    }

.slider-wrapper {
    position: relative;
    flex: 1;
    min-width: 0;
    overflow: visible;
}

.templateSwiper .swiper-slide {
    height: auto !important;
}


/* =========================
    Navigation Buttons
========================= */

.swiper-button-next,
.swiper-button-prev {
    color: #fff !important;
    background: rgba(0,0,0,0.4) !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
}

    .swiper-button-next::after,
    .swiper-button-prev::after {
        font-size: 16px !important;
    }

/* Position buttons outside slider */
.slider-wrapper {
    position: relative;
}

/* Left button */
.swiper-button-prev {
    position: absolute;
    left: 0 !important;
    top: 60% !important;
    transform: translateY(-50%);
    z-index: 10;
}

/* Right button */
.swiper-button-next {
    position: absolute;
    right: 0 !important;
    top: 60% !important;
    transform: translateY(-50%);
    z-index: 10;
}

/* =========================
   Template Library — narrow screens (<= 640px)
   #template_list is a flex row holding "Create New" + the card slider.
   On phones that row squeezes the slider to a sliver, so stack them and
   let each take the full width. Also trim the paging gutter so a single
   card isn't pinched by the nav arrows.
========================= */
@media (max-width: 640px) {
    #template_list {
        flex-direction: column;
        align-items: stretch;
    }

        /* full-width "Create New" tile once stacked */
        #template_list > .template-card {
            width: 100%;
        }

        /* smaller side gutter for the nav arrows; overrides the inline
           "padding: 0 50px" that is only present when paging is enabled */
        #template_list .slider-wrapper:has(.swiper-button-next) {
            padding-left: 44px !important;
            padding-right: 44px !important;
        }
}

/* =========================
   Item being dragged
========================= */

.sortable-drag {
    opacity: 1 !important;
    transform: rotate(2deg) scale(1.02);
    z-index: 9999;
}


/* =========================
   Selected item before drag
========================= */

.sortable-chosen {
    cursor: grabbing !important;
}


/* =========================
   Placeholder / ghost spot
========================= */

.sortable-ghost {
    opacity: 0.35;
    border: 2px dashed #1F7A4D !important;
    background: rgba(31, 122, 77, 0.08) !important;
    border-radius: 16px;
}


/* =========================
   Smooth item transitions
========================= */

.sortable-animation {
    transition: transform 0.2s ease;
}


/*********** Baseline, reset styles ***********/
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    width: 100%;
}

    /* Removes default focus */
    input[type="range"]:focus {
        outline: none;
    }

    /******** Chrome, Safari, Opera and Edge Chromium styles ********/
    /* slider track */
    input[type="range"]::-webkit-slider-runnable-track {
        background-color: #e5e7eb;
        border-radius: 999px;
        height: 6px;
    }

    /* slider thumb */
    input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none; /* Override default look */
        appearance: none;
        margin-top: -6px; /* Centers thumb on the track */
        background-color: #1f7a4d;
        border-radius: 999px;
        height: 18px;
        width: 18px;
    }

    input[type="range"]:focus::-webkit-slider-thumb {
        outline: 3px solid #1f7a4d;
        outline-offset: 0.125rem;
    }

    /*********** Firefox styles ***********/
    /* slider track */
    input[type="range"]::-moz-range-track {
        background-color: #e5e7eb;
        border-radius: 999px;
        height: 6px;
    }

    /* slider thumb */
    input[type="range"]::-moz-range-thumb {
        background-color: #1f7a4d;
        border: none; /*Removes extra border that FF applies*/
        border-radius: 999px;
        height: 18px;
        width: 18px;
    }

    input[type="range"]:focus::-moz-range-thumb {
        outline: 3px solid #1f7a4d;
        outline-offset: 0.125rem;
    }

    /* ===== HOVER EFFECT ===== */
    input[type="range"]:hover::-webkit-slider-thumb {
        background-color: rgb(31 122 77);
        box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
        transform: scale(1.1);
    }

.c-br-1 {
    border-radius: 0.25rem;
}

.c-br-2 {
    border-radius: 0.5rem;
}

.c-pl-1 {
    padding-left: 0.25rem;
}

.c-pl-2 {
    padding-left: 0.5rem;
}

.plus {
    display: inline-block;
    border-radius: 15px;
    background-color: #fff;
    width: 50px;
    height: 32px;
    position: relative;
}

    .plus:after {
        content: "+";
        position: absolute;
        font-size: 22px;
        left: 25%;
        top: 3px;
        color: #adb5bd;
    }

.content:hover .plus {
    background-color: #f8f9fa;
}

    .content:hover .plus:after {
        color: #212529
    }

.sortable-ghost {
    opacity: 0.4;
}

.c-ml-6 {
    margin-left: 1.5rem;
}

.c-font-medium {
    font-size: 14px;
}

.text-right {
    text-align: right;
}

.text-danger {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-danger-rgb), var(--bs-text-opacity)) !important;
}

/*
    ======================
    Start Custom Table css
    ======================
*/
.c-table {
    font-size: 14px;
    width: 100%;
    text-align: left;
    table-layout: fixed;
}

.c-table-header-row {
    border-bottom-width: 1px;
    border-color: rgb(0 0 0 / 0.05);
}

.c-table-header-cell {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
    background-color: rgb(0 0 0 / 0.05);
}

    .c-table-header-cell:first-child {
        border-top-left-radius: 0.75rem;
    }

    .c-table-header-cell:last-child {
        border-top-right-radius: 0.75rem;
    }

.c-table-row {
    border-bottom-width: 1px;
}

    .c-table-row:last-child {
        border: 0;
    }

    .c-table-row:hover {
        border-color: rgb(0 0 0 / 0.05);
        background-color: rgb(0 0 0 / 0.05);
    }

.c-table-cell {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/* Top-align cells so short columns line up with the top of tall wrapping cells
   (e.g. the multi-line Remarks). Desktop table layout only; on mobile the cells
   stack as flex cards where this has no effect. */
.c-align-top .c-table-cell {
    vertical-align: top;
}

.c-info-colour {
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Long free-text cells (e.g. the ~200-char Remarks): wrap onto multiple lines
   instead of a single truncated line. */
.c-info-colour.c-info-wrap {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
}

.c-active {
    --tw-text-opacity: 1;
    color: rgb(31 122 77 / var(--tw-text-opacity, 1));
    border-color: rgb(31 122 77 / 0.3);
    --tw-bg-opacity: 1;
    background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
}

.c-inactive {
    --tw-text-opacity: 1;
    color: rgb(185 28 28 / var(--tw-text-opacity, 1));
    --tw-border-opacity: 1;
    border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}

.c-pending {
    --tw-text-opacity: 1;
    color: rgb(202 138 4 / var(--tw-text-opacity, 1));
    border-color: rgb(202 138 4 / 0.3);
    --tw-bg-opacity: 1;
    background-color: rgb(254 252 232 / var(--tw-bg-opacity, 1));
}

.c-status {
    display: inline-flex;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    border-width: 1px;
    border-radius: 9999px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
}

.c-primary-info {
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
    text-underline-offset: 2px;
    -webkit-text-decoration-style: dotted;
    text-decoration-style: dotted;
    -webkit-text-decoration-line: underline;
    text-decoration-line: underline;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

/* Invoice subscription description — matches the Amount column: semibold
   black text (colour #0F172A), minus any link decoration, with truncation. */
.c-invoice-desc {
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.c-img-info {
    border-radius: 9999px;
    align-items: center;
    width: 2rem;
    height: 2rem;
    display: flex;
    flex-shrink: 0;
}

/* Invoice history table (_ListingPurchaseOrderHist): the Employee list rows are
   taller because their first cell carries a 2rem avatar. This table has no avatar,
   so add matching vertical breathing room on desktop to keep the same row rhythm.
   Scoped above the 767px card-layout breakpoint so mobile spacing is untouched. */
@media (min-width: 768px) {
    #tblPOHistory .c-table-cell {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
}

/* Bump the invoice table's body text and status pill a step larger than the
   shared 14px / 9px baseline, per request, for easier reading. Scoped to this
   table only so other listings keep their sizing. */
#tblPOHistory {
    font-size: 15px;
}

    #tblPOHistory .c-status {
        padding-top: 0.1875rem;
        padding-bottom: 0.1875rem;
        padding-left: 0.625rem;
        padding-right: 0.625rem;
        font-size: 11px;
    }

/* Scale the invoice search toolbar and the table title (header) row up to the
   same 15px / taller rhythm as the enlarged body rows, so the whole page reads
   consistently. Scoped to the invoice listing only. */
#divPOHistory .input-group > input,
#divPOHistory .c-filter-dd__btn {
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
    font-size: 15px;
}

#tblPOHistory .c-table-header-cell {
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: 15px;
}
/*
    ======================
    End Custom Table css
    ======================
*/

.rounded-2xl {
    border-radius: 1rem !important;
}

.c-note {
    margin-top: 1rem;
    border-radius: 0.75rem;
    border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
    padding: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    border-color: rgb(0 0 0 / 0.05);
    background-color: rgb(0 0 0 / 0.05);
    color: rgb(0 0 0 / 0.8);
}

.dropdown-item.text-danger:hover, .dropdown-item.text-danger:active {
    --tw-bg-opacity: 1;
    background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1)) !important;
}

.dropdown-item:not(.text-danger):active {
    text-decoration: none;
    background-color: #E8F3EE !important;
    color: #15803D !important;
}

/*
    ==========================
    Start Profile Sidebar menu
    ==========================
*/
/* Collapsed state is expressed with max-height:0 / opacity:0 (see the .submenu rule
   below) rather than display:none, so the open/close is a single CSS transition. Using
   display:none here would stop the transition from rendering and force the JS to animate
   the submenu with jQuery slideUp/slideDown, which fought this CSS = "expand then
   collapse" flicker when switching sections. */
.sidebar-menu .menu-group.active > .submenu {
    max-height: 500px;
    opacity: 1;
    transform: translateY(0);
}

.sidebar-menu .menu-header {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 12px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.sidebar-menu .menu-group.active > .menu-header {
    background: #E8F3EE;
    color: #15803D;
}

.sidebar-menu .collapse-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: #64748B;
    transition: transform 0.25s ease, color 0.2s ease;
}

.sidebar-menu .menu-group.active > .menu-header .collapse-icon {
    transform: rotate(180deg);
    color: #0F172A;
}

.sidebar-menu .submenu {
    position: relative;
    margin-top: 6px;
    margin-left: 15px;
    padding-left: 5px;
    border-left: 2px solid rgba(148, 163, 184, 0.25);
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-4px);
    transition: max-height 0.35s ease, opacity 0.25s ease, transform 0.25s ease;
}

.sidebar-menu .submenu-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    color: rgba(15, 23, 42, 0.65);
    transition: background-color 0.2s ease, color 0.2s ease;
}

    .sidebar-menu .submenu-item.active {
        background: #E8F3EE;
        color: #15803D;
    }

/*
    ==========================
    End Profile Sidebar menu
    ==========================
*/

/*
    ==========================
    Start Custom Switch button 
    ==========================
*/
.form-check-input {
    cursor: pointer;
}

.custom-switch {
    width: 3rem !important;
    height: 1.5rem !important;
}

    /* ON color */
    .custom-switch:checked {
        background-color: #28a745 !important;
        border-color: #28a745 !important;
    }

    .custom-switch:not(:checked):focus {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e") !important;
    }

    .custom-switch:focus {
        border-color: rgb(34 197 94 / 0.4) !important;
        box-shadow: 0 0 0 0.25rem rgb(34 197 94 / 0.2) !important;
    }

/*
    ==========================
    End Custom Switch button 
    ==========================
*/

th.sortable {
    cursor: pointer;
    user-select: none;
}

.sort-icon::after {
    content: "";
    margin-left: 6px;
    font-size: 12px;
    color: #666;
}

th.asc .sort-icon::after {
    content: "▼";
}

th.desc .sort-icon::after {
    content: "▲";
}

/* 
    ================
    Start Pagination 
    ================
*/
.pagination-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 10px;
}

/* Same compact recipe as .cs-date-btn (Card Stock) — the native control reads
   oversized next to the page buttons, so the arrow is drawn by us and the box
   is sized to the control scale used elsewhere. */
.page-size {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: auto;
    padding: 6px 26px 6px 12px;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    background: #ffffff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2394A3B8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 8px center;
    background-size: 13px 13px;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.5;
    color: #64748B;
    outline: none;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

    .page-size:hover,
    .page-size:focus {
        border-color: rgb(27,122,77);
        color: rgb(27,122,77);
        box-shadow: none;
    }

/* In-page stand-in for the native page-size select, opted into per listing via
   ViewData["CompactPageSize"]. A native <select> hands its option list to the
   browser, which draws it at OS scale and ignores this stylesheet — on a 400px
   viewport it opens several times the size of the control. This is real DOM, so
   it scales with the page. Same recipe as .cs-date-btn / .an-date-btn. */
.page-size-dd {
    position: relative;
    display: inline-block;
}

.page-size-btn {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: #ffffff;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 6px 8px 6px 12px;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.5;
    color: #64748B;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.page-size-btn:hover,
.page-size-btn:focus {
    border-color: rgb(27,122,77);
    color: rgb(27,122,77);
    outline: none;
    box-shadow: none;
}

.page-size-btn .material-symbols-outlined {
    font-size: 1rem;
    line-height: 1;
}

/* Opens upward: the control sits at the bottom of a listing card, so a menu
   dropping down would fall outside the card and off the foot of the page. */
.page-size-menu {
    display: none;
    position: absolute;
    left: 0;
    bottom: calc(100% + 4px);
    min-width: 100%;
    padding: 4px;
    background: #ffffff;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    box-shadow: 0 10px 24px -12px rgba(15, 23, 42, 0.35);
    z-index: 1056;
}

.page-size-menu.open {
    display: block;
}

.page-size-item {
    display: block;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #64748B;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
}

.page-size-item:hover,
.page-size-item:focus {
    background: #F1F5F9;
    color: rgb(27,122,77);
    text-decoration: none;
}

.page-size-item.active {
    background: rgba(27,122,77,0.08);
    color: rgb(27,122,77);
    font-weight: 600;
}

/* Trigger for a listing row's action menu (the vertical ellipsis). The glyph on its own
   is only about 20px wide, which is well under a comfortable touch target, so the button
   carries its own minimum box - same 36px the pagination buttons below use. */
.c-row-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    min-height: 36px;
}

.pagination {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.page-btn {
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    color: #374151;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .page-btn:hover:not(:disabled):not(.active) {
        background: #f3f4f6;
        border-color: #d1d5db;
    }

    .page-btn.active {
        background: #111827;
        color: #ffffff;
        border-color: #111827;
        cursor: not-allowed;
    }

    .page-btn:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

.page-dots {
    padding: 0 6px;
    color: #9ca3af;
    font-weight: 600;
    user-select: none;
}

@media (max-width: 768px) {

    .pagination-wrapper {
        flex-direction: column;
        align-items: flex-start;
    }

    .pagination {
        justify-content: flex-start;
    }

    .page-btn {
        min-width: 32px;
        height: 32px;
        font-size: 13px;
    }

    .page-size {
        width: auto;
        padding: 5px 24px 5px 10px;
        font-size: 0.75rem;
    }

    .page-size-btn {
        padding: 5px 6px 5px 10px;
        font-size: 0.75rem;
    }

    .page-size-item {
        padding: 7px 14px;
        font-size: 0.75rem;
    }
}
/* 
    ================
    End Pagination 
    ================
*/

.w-\[200px\] {
    width: 200px;
}


.sheet-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9998;
}

.sheet-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.sheet-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: #fff;
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
    transition: transform .3s ease;
}

.sheet-handle {
    width: 36px;
    height: 4px;
    background: #e0e0e0;
    border-radius: 2px;
    margin: 10px auto 16px;
}

.sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px 12px;
    border-bottom: 1px solid #f0f0f0;
}

.sheet-title {
    font-size: 15px;
    font-weight: 600;
    color: #111;
}

.sheet-close {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #f5f5f5;
    border: none;
    cursor: pointer;
    font-size: 18px;
    color: #888;
    line-height: 1;
}

.sheet-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border: none;
    background: transparent;
    cursor: pointer;
    width: 100%;
    text-align: left;
    transition: background .2s;
}

    .sheet-btn:hover {
        background: #f9f9f9;
    }

.sheet-btn-icon {
    font-size: 18px;
    width: 24px;
    text-align: center;
}

.sheet-btn-text {
    font-size: 14px;
    color: #111;
}

.sheet-divider {
    height: 1px;
    background: #f0f0f0;
    margin: 0 18px;
}

.sheet-footer {
    padding: 8px 18px 16px;
}

.sheet-cancel {
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    border: none;
    background: #f5f5f5;
    font-size: 14px;
    color: #888;
    cursor: pointer;
}

.d-flex {
    display: flex !important;
}

.m-h-30 {
    min-height: 7.5rem;
}

.digital-card-bold {
    font-weight: 550;
}

.digital-card-primary-font {
    font-size: 17px;
    line-height: 1.1;
}

.digital-card-secondary-font {
    font-size: 14px;
    line-height: 1.1;
}

.digital-card-tertiary-font {
    font-size: 12px;
    line-height: 1.1;
}

.digital-card-title {
    font-size: 9px;
    line-height: 1.1;
}

.digital-card-qr-container {
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border-radius: 0.2rem;
}

.digital-card-avatar-container {
    width: 70px;
    height: 100%;
    border: 1px solid #ddd;
}

/*
    Custom Color Picker
*/
.color-picker {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: nowrap; /* keeps single line */
}

/* ===== preview ===== */
.cp-preview {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.cp-ring {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 2px solid #ddd;
    position: relative;
    cursor: pointer;
    transition: 0.2s;
}

    .cp-ring:hover {
        transform: scale(1.05);
    }

/* native picker overlay */
.cp-native {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    height: 100%;
}

/* hex text */
.cp-value-text {
    font-size: 13px;
    font-family: monospace;
    color: #666;
}

/* ===== presets ===== */
.cp-presets {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    max-width: 100%;
    min-width: 0;
    flex: 1;
}

.cp-color {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex: 0 0 auto;
    border: 2px solid #ddd;
}

    .cp-color:hover {
        transform: scale(1.15);
    }

    .cp-color.active {
        border: 2px solid #111;
        box-shadow: 0 0 0 2px #fff inset;
    }

    /* actual colors */
    .cp-color[data-color="#000000"] {
        background: #000;
    }

    .cp-color[data-color="#dc3545"] {
        background: #dc3545;
    }

    .cp-color[data-color="#d63384"] {
        background: #d63384;
    }

    .cp-color[data-color="#fd7e14"] {
        background: #fd7e14;
    }

    .cp-color[data-color="#ffc107"] {
        background: #ffc107;
    }

    .cp-color[data-color="#20c997"] {
        background: #20c997;
    }

    .cp-color[data-color="#198754"] {
        background: #198754;
    }

    .cp-color[data-color="#0dcaf0"] {
        background: #0dcaf0;
    }

    .cp-color[data-color="#0d6efd"] {
        background: #0d6efd;
    }

    .cp-color[data-color="#6f42c1"] {
        background: #6f42c1;
    }

    .cp-color[data-color="#6610f2"] {
        background: #6610f2;
    }

.count-updated {
    background-color: #fff3b0;
    transition: background-color 0.3s;
}
/* ② highlight */


.m-h-20 {
    min-height: 5rem;
    height: 100%;
}

/* ============================================================
   Relocated from inline <style> blocks in views, for central
   maintenance. Dark-mode counterparts live in Dark.css.
   ============================================================ */

/* ---- Purchase page: stack list + summary on tablet/mobile (_PurchaseCard) ---- */
@media (max-width: 1023px) {
    .purchase-layout {
        flex-direction: column !important;
        gap: 16px !important;
    }

    .purchase-list {
        max-width: 100% !important;
        height: auto !important;
        overflow-y: visible !important;
        padding-right: 0 !important;
    }

    .purchase-summary {
        width: 100% !important;
        position: static !important;
    }
}

/* ---- Profile editor sidebar: mobile section tiles + step strip (_ProfileMenu) ---- */
@media (max-width: 1023px) {
    .sidebar-menu {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

        .sidebar-menu .menu-group {
            display: contents;
        }

        .sidebar-menu .menu-header {
            order: 0;
            flex: 0 0 calc(50% - 4px);
            min-width: 0;
            overflow: hidden;
            padding: 8px 12px;
            border: 1px solid rgba(0, 0, 0, 0.08);
            border-radius: 10px;
        }

            .sidebar-menu .menu-header [data-title] {
                width: auto;
                min-width: 0;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

        .sidebar-menu .collapse-icon {
            display: none;
        }

        .sidebar-menu .submenu {
            order: 1;
            flex: 1 1 100%;
            width: 100%;
            min-width: 0;
            box-sizing: border-box;
            display: flex !important;
            flex-direction: row;
            gap: 8px;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            max-height: none !important;
            opacity: 1 !important;
            transform: none !important;
            margin: 2px 0 0;
            padding: 10px 2px 8px;
            border-top: 1px solid rgba(0, 0, 0, 0.06);
            border-left: 0;
        }

            /* Slim bar */
            .sidebar-menu .submenu::-webkit-scrollbar {
                height: 6px;
            }

            .sidebar-menu .submenu::-webkit-scrollbar-track {
                background: transparent;
            }

            .sidebar-menu .submenu::-webkit-scrollbar-thumb {
                border-radius: 9999px;
                background-color: rgba(148, 163, 184, 0.55);
            }

                .sidebar-menu .submenu::-webkit-scrollbar-thumb:hover {
                    background-color: rgba(100, 116, 139, 0.75);
                }

    /* Firefox only - the guard keeps these away from Blink, where they suppress the rail above. */
    @supports not selector(::-webkit-scrollbar) {
        .sidebar-menu .submenu {
            scrollbar-width: thin;
            scrollbar-color: rgba(148, 163, 184, 0.55) transparent;
        }
    }

        .sidebar-menu .menu-tab {
            width: auto;
            flex: 0 0 auto;
            white-space: nowrap;
            padding: 8px 12px;
        }
}

/* ---- Listing tables: dropdown z-index + mobile card layout (_ListingProfile / _ListingTemplate) ---- */
.c-table .dropdown-menu {
    z-index: 1056;
}

/* ---- Brand checkbox (bulk-select on the employee listing, _ListingProfile) ----
   Custom-styled so the native control matches the green brand and supports an
   indeterminate (partial-selection) state on the header select-all. */
.c-check {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    flex: none;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    margin: 0;
    border: 1.5px solid #CBD5E1;
    border-radius: 5px;
    background-color: #ffffff;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

    .c-check:hover {
        border-color: #1F7A4D;
    }

    .c-check:checked,
    .c-check:indeterminate {
        background-color: #1F7A4D;
        border-color: #1F7A4D;
    }

    /* Checkmark (centered; the -55% Y nudge accounts for the tick's optical weight) */
    .c-check:checked::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 4px;
        height: 8px;
        border: solid #ffffff;
        border-width: 0 2px 2px 0;
        transform: translate(-50%, -55%) rotate(45deg);
    }

    /* Dash for the partial-selection state (centered) */
    .c-check:indeterminate::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 10px;
        height: 2px;
        border-radius: 1px;
        background-color: #ffffff;
        transform: translate(-50%, -50%);
    }

    .c-check:focus-visible {
        outline: 2px solid rgba(31, 122, 77, 0.35);
        outline-offset: 1px;
    }

/* Mobile-only "Select all" for the bulk toolbar. On phones the table collapses to
   cards and the header select-all is hidden, so surface it here instead. */
.bulk-select-all {
    display: none;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    color: #64748B;
}

@media (max-width: 767px) {
    .bulk-select-all {
        display: inline-flex;
    }
}

@media (max-width: 767px) {
    .c-table, .c-table tbody, .c-table tr, .c-table td {
        display: block;
        width: 100%;
    }

    .c-table {
        padding: 12px;
        box-sizing: border-box;
    }

        .c-table thead {
            display: none;
        }

        .c-table tr.c-table-row {
            position: relative;
            padding: 12px 14px;
            margin-bottom: 12px;
            border: 1px solid rgba(0, 0, 0, 0.08);
            border-radius: 14px;
            background: #FFFFFF;
        }

            .c-table tr.c-table-row > td {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 12px;
                padding: 6px 0;
                text-align: right;
                border: 0;
            }

                .c-table tr.c-table-row > td[data-label]::before {
                    content: attr(data-label);
                    flex: 0 0 auto;
                    font-weight: 600;
                    color: #64748B;
                    text-align: left;
                    white-space: nowrap;
                }

                .c-table tr.c-table-row > td[data-label] > * {
                    min-width: 0;
                    margin: 0;
                    text-align: right;
                    overflow-wrap: anywhere;
                }

                .c-table tr.c-table-row > td:first-child {
                    justify-content: flex-start;
                    padding: 0 40px 8px 0;
                    margin-bottom: 6px;
                    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
                }

                .c-table tr.c-table-row > td:last-child {
                    position: absolute;
                    top: 8px;
                    right: 8px;
                    width: auto;
                    padding: 0;
                }

                /* Remarks is the last column in the Connection report but it's long
                   free-text, not an action button - opt it out of the absolute
                   action-cell positioning above and let it stack full-width with the
                   label on top and the (wrapping) text below. */
                .c-table tr.c-table-row > td.c-cell-remarks {
                    position: static;
                    top: auto;
                    right: auto;
                    width: 100%;
                    flex-direction: column;
                    align-items: stretch;
                    padding: 6px 0;
                }

                    .c-table tr.c-table-row > td.c-cell-remarks::before {
                        white-space: normal;
                    }

                    .c-table tr.c-table-row > td.c-cell-remarks > * {
                        text-align: left;
                    }
}

/* ---- Employee listing: leading select-checkbox column on mobile ----
   The table collapses to cards where td:first-child is styled as the card header.
   With the new checkbox column, pin the checkbox to the card's top-left corner
   (no "Select" label) and promote the Employee (name) cell back to the header so
   the card still reads name-first. Scoped to #tblEmployee so other listings that
   have no checkbox column keep their existing first-child header. (_ListingProfile) */
@media (max-width: 767px) {
    #tblEmployee tr.c-table-row > td:first-child {
        position: absolute;
        top: 18px;
        left: 14px;
        width: auto;
        padding: 0;
        margin: 0;
        border: 0;
        justify-content: flex-start;
    }

        #tblEmployee tr.c-table-row > td:first-child::before {
            content: none;
        }

    #tblEmployee tr.c-table-row > td:nth-child(2) {
        justify-content: flex-start;
        padding: 0 40px 8px 30px;
        margin-bottom: 6px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    }

        #tblEmployee tr.c-table-row > td:nth-child(2) > * {
            text-align: left;
        }
}

/* ---- Profile editor: show live preview on mobile, stacked & not sticky (_LayoutProfile) ---- */
@media (max-width: 1023px) {
    #divPrevSection {
        display: flex;
        position: static;
        top: auto;
        margin-top: 4px;
    }
}

/* ---- Invoice products chip (_ListingPurchaseOrderHist) ---- */
.inv-prod-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
    padding: 0.125rem 0.625rem;
    border: 1px solid rgb(31 122 77 / 0.25);
    border-radius: 9999px;
    background-color: #ECFDF5;
    color: #1F7A4D;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

    .inv-prod-chip:hover {
        background-color: #D1FAE5;
        border-color: rgb(31 122 77 / 0.45);
        box-shadow: 0 1px 3px rgb(31 122 77 / 0.15);
    }

/* ---- Processing loader (_ProcessingLoader) ---- */
#CardAction {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

    #CardAction > div > div {
        position: relative !important;
        padding-top: 84px !important;
        margin: 20px auto !important;
        text-align: center !important;
    }

        #CardAction > div > div::before {
            content: '';
            position: absolute;
            top: 10px;
            left: 50%;
            width: 56px;
            height: 56px;
            transform: translateX(-50%);
            background-color: rgba(16, 185, 129, 0.03);
            border: 2px solid rgba(16, 185, 129, 0.2);
            border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
            animation: pro-fluid-morph 4s ease-in-out infinite alternate, pro-slow-orbit 12s linear infinite;
        }

        #CardAction > div > div::after {
            content: '';
            position: absolute;
            top: 10px;
            left: 50%;
            width: 56px;
            height: 56px;
            transform: translateX(-50%);
            border: 3px solid transparent;
            border-top-color: #10b981;
            border-right-color: #059669;
            border-radius: 50%;
            filter: drop-shadow(0 4px 12px rgba(16, 185, 129, 0.25));
            animation: pro-kinetic-snap 1s cubic-bezier(0.76, 0, 0.24, 1) infinite;
        }

        #CardAction > div > div > span {
            color: #111827 !important;
            font-size: 1.35rem !important;
            font-weight: 600 !important;
            letter-spacing: -0.02em !important;
            display: block !important;
        }

    #CardAction small.text-muted {
        color: #6b7280 !important;
        font-size: 0.95rem !important;
        font-weight: 450 !important;
        letter-spacing: -0.005em !important;
        margin-top: 8px !important;
        display: inline-block !important;
    }

    #CardAction .dots {
        position: relative;
        display: inline-block;
        width: 12px;
    }

        #CardAction .dots::after {
            content: '...';
            position: absolute;
            left: 3px;
            bottom: 0;
            color: #10b981;
            font-weight: 700;
            animation: pro-dot-glow 1.4s infinite ease-in-out;
        }

@keyframes pro-fluid-morph {
    0% {
        border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
    }

    50% {
        border-radius: 65% 35% 50% 50% / 30% 66% 34% 70%;
    }

    100% {
        border-radius: 45% 55% 30% 70% / 60% 30% 70% 40%;
    }
}

@keyframes pro-slow-orbit {
    0% {
        transform: translateX(-50%) rotate(0deg);
    }

    100% {
        transform: translateX(-50%) rotate(360deg);
    }
}

@keyframes pro-kinetic-snap {
    0% {
        transform: translateX(-50%) rotate(0deg);
    }

    50% {
        transform: translateX(-50%) rotate(180deg);
    }

    100% {
        transform: translateX(-50%) rotate(360deg);
    }
}

@keyframes pro-dot-glow {
    0%, 100% {
        opacity: 0.2;
    }

    50% {
        opacity: 1;
    }
}

/* ---- Image cropper modal (_MdlCropper) ---- */
#cropModal {
    z-index: 9999;
}

    #cropModal .modal-dialog {
        width: 100vw;
        height: 100vh;
        margin: auto;
    }

    #cropModal .modal-content {
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    #cropModal .modal-body {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        /* Cropper measures its stage with offsetWidth/offsetHeight, which INCLUDE padding,
           so Bootstrap's 1rem here made it fit the image to a box 32px wider than the area
           actually on screen - 32px of every image fell off the right edge. */
        padding: 0;
    }

#cropImage {
    max-width: 100%;
    max-height: 100%;
    display: block;
}

/* ---- Error pages (_Forbidden / _NotFound) ---- */
body div#error h3 {
    font-weight: 500;
}

/* ---- Custom Serial No field: max-content on desktop, full-width below it so the
        domain prefix + input never overflow a phone (_FrmCardInfo) ---- */
@media (max-width: 1023px) {
    .custom-serial-group {
        width: 100% !important;
        max-width: 100% !important;
    }
        /* keep the domain on one line; let the input take the rest and shrink */
        .custom-serial-group > .input-group-text {
            flex: 0 0 auto !important;
            white-space: nowrap !important;
        }

        .custom-serial-group > .form-control {
            flex: 1 1 auto !important;
            min-width: 0 !important;
            width: auto !important;
        }
}

/* Phones: keep prefix + serial + copy button on ONE line. The domain prefix is
   the long part, so it shrinks and clips from the left (ellipsis at the start,
   keeping the "/preview/" tail visible); the serial input keeps a usable
   minimum width and the copy button never shrinks. */
@media (max-width: 767px) {
    .custom-serial-group {
        flex-wrap: nowrap !important;
        font-size: 0.75rem;
    }

        .custom-serial-group > .input-group-text:first-child {
            flex: 0 1 auto !important;
            min-width: 0;
            max-width: 45%;
            overflow: hidden;
            text-overflow: ellipsis;
            direction: rtl;
            text-align: left;
            padding-right: 0.25rem !important;
        }

        .custom-serial-group > .form-control {
            flex: 1 1 0 !important;
            min-width: 5rem !important;
            font-size: 0.75rem;
        }

        .custom-serial-group > .btn-copy-link {
            flex: 0 0 auto !important;
            padding: 0 0.625rem !important;
        }
}

/* ---- Profile content blocks: on phones the header wraps so the title field
        drops to its own full-width line under the grip / type icon / remove,
        keeping it comfortable to tap and type (_FrmProfileContent) ---- */
@media (max-width: 767px) {
    .pc-block-head {
        flex-wrap: wrap;
    }
        /* grip + icon stay top-left; the remove button hugs the far right */
        .pc-block-head .pc-head-remove {
            margin-left: auto;
        }
        /* title input takes the whole second line */
        .pc-block-head > .input-group {
            order: 1;
            flex-basis: 100%;
            width: 100%;
        }
}

.c-text-md {
    margin: 0.5rem;
    word-break: break-word;
}

.w-max-content{
    width:max-content;
}

.text-deco-none{
    text-decoration:none;
}

.cursor-unset{
    cursor:unset;
}

.rounded-0 {
    border-radius: 0 !important;
}

/* ============================================
   Page components
   Dark-theme counterparts live in Dark.css.
   NOTE: bootstrap.min.css loads after this file, so any rule that must beat a
   Bootstrap component (.btn, .dropdown-item, ...) needs specificity above a
   single class -- hence the element-qualified button.cs-*-btn selectors below.
   ============================================ */

/* -- Card Stock ---------------------------------------------------------- */
.cs-date-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #ffffff;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 4px 10px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #64748B;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
    line-height: 1.5;
}

.cs-date-btn:hover,
.cs-date-btn:focus {
    border-color: rgb(27,122,77);
    color: rgb(27,122,77);
    outline: none;
    box-shadow: none;
}

.cs-date-btn .material-symbols-outlined {
    font-size: 0.95rem;
    line-height: 1;
}

#csDateFilterMenu {
    min-width: 210px;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.07);
    padding: 6px 0;
    margin-top: 4px;
}

#csDateFilterMenu .dropdown-item {
    font-size: 0.8125rem;
    color: #374151;
    padding: 6px 14px;
    border-radius: 0;
}

#csDateFilterMenu .dropdown-item:hover {
    background: #F8FAFC;
    color: #0F172A;
}

#csDateFilterMenu .dropdown-item.active,
#csDateFilterMenu .dropdown-item:active {
    background: rgba(27,122,77,0.08);
    color: rgb(27,122,77);
    font-weight: 600;
}

#csDateFilterMenu .dropdown-divider {
    border-color: #E2E8F0;
    margin: 4px 0;
}

.cs-custom-range {
    padding: 8px 14px 10px;
}

.cs-custom-range label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #94A3B8;
    margin-bottom: 6px;
    display: block;
}

.cs-purchase-list::-webkit-scrollbar { width: 4px; }
.cs-purchase-list::-webkit-scrollbar-track { background: transparent; }
.cs-purchase-list::-webkit-scrollbar-thumb { background: #E2E8F0; border-radius: 999px; }

/* Quick Action buttons. Element-qualified so they outrank Bootstrap's .btn,
   which resets background/border/color/font-weight from its --bs-btn-* vars. */
button.cs-primary-btn {
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

button.cs-primary-btn:hover,
button.cs-primary-btn:focus {
    background: rgb(22, 101, 62) !important;
    color: #ffffff !important;
}

button.cs-secondary-btn {
    background: #ffffff;
    border: 1px solid #E2E8F0;
    color: #0F172A;
    font-weight: 600;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

button.cs-secondary-btn:hover,
button.cs-secondary-btn:focus {
    background: #EEF2F7 !important;
    border-color: #CBD5E1 !important;
}

/* -- Analytics ------------------------------------------------------------ */

/* Date-filter trigger button (same recipe as .cs-date-btn) */
.an-date-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #ffffff;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #64748B;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
    line-height: 1.5;
}

.an-date-btn:hover,
.an-date-btn:focus {
    border-color: rgb(27,122,77);
    color: rgb(27,122,77);
    outline: none;
    box-shadow: none;
}

.an-date-btn .material-symbols-outlined {
    font-size: 0.95rem;
    line-height: 1;
}

#anDateFilterMenu {
    min-width: 210px;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.07);
    padding: 6px 0;
    margin-top: 4px;
}

#anDateFilterMenu .dropdown-item {
    font-size: 0.8125rem;
    color: #374151;
    padding: 6px 14px;
    border-radius: 0;
}

#anDateFilterMenu .dropdown-item:hover {
    background: #F8FAFC;
    color: #0F172A;
}

#anDateFilterMenu .dropdown-item.active,
#anDateFilterMenu .dropdown-item:active {
    background: rgba(27,122,77,0.08);
    color: rgb(27,122,77);
    font-weight: 600;
}

#anDateFilterMenu .dropdown-divider {
    border-color: #E2E8F0;
    margin: 4px 0;
}

/* On a phone the hero header wraps and the trigger drops to its own line at the
   left edge, so a right-anchored panel opens off-screen and only half of it is
   reachable. Anchor it left and let it use the width of the row instead. */
@media (max-width: 767px) {
    .an-date-filter {
        width: 100%;
    }

    .an-date-filter .an-date-btn {
        width: 100%;
        justify-content: center;
    }

    #anDateFilterMenu {
        left: 0;
        right: auto !important;
        width: 100%;
        min-width: 0;
    }
}

.an-custom-range {
    padding: 8px 14px 10px;
}

.an-custom-range label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #94A3B8;
    margin-bottom: 6px;
    display: block;
}

/* Panels (chart cards) */
.an-panel {
    padding: 20px 24px;
}

/* ── KPI cards ───────────────────────────────────────────────────────────
   Four saturated gradient tiles. Text is always white, so the light/dark
   themes share one set of rules; Dark.css only softens the shadows. */
.an-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    margin-bottom: 20px;
}

@media (min-width: 576px) {
    .an-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1200px) {
    .an-grid { grid-template-columns: repeat(4, 1fr); }
}

.an-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 196px;
    padding: 20px 22px 16px;
    border-radius: 18px;
    color: #ffffff;
    box-shadow: 0 12px 26px -12px rgba(15, 23, 42, 0.5),
                inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease;
}

/* Depth pass: a single restrained key light top-right. The colour blooms in
   the gradient do the shaping — a strong white radial on top of them just
   washes the tile out. */
.an-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 88% -14%, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 50%);
    z-index: -1;
    pointer-events: none;
}

/* Diagonal sheen that sweeps across on hover — kept faint so it reads as the
   gradient catching the light, not a white band crossing the card. */
.an-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(115deg, transparent 34%, rgba(255, 255, 255, 0.07) 48%, transparent 62%);
    transform: translateX(-130%);
    transition: transform 0.75s ease;
    z-index: -1;
    pointer-events: none;
}

.an-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 44px -16px rgba(15, 23, 42, 0.6),
                inset 0 1px 0 rgba(255, 255, 255, 0.11);
}

.an-card:hover::after { transform: translateX(130%); }

a.an-card,
a.an-card:hover,
a.an-card:focus {
    color: #ffffff;
    text-decoration: none;
}

/* Oversized watermark glyph bleeding off the bottom-right corner */
.an-card-glyph {
    position: absolute;
    right: -14px;
    bottom: -26px;
    font-size: 122px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.11);
    transform: rotate(-8deg);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.35s ease;
    z-index: -1;
    pointer-events: none;
    user-select: none;
}

.an-card:hover .an-card-glyph {
    transform: rotate(-8deg) scale(1.08) translate(-4px, -4px);
    color: rgba(255, 255, 255, 0.15);
}

/* Mesh gradients: two off-axis colour blooms over a diagonal ramp.
   The palette is anchored on the brand green — the other three hues are pitched
   at the same saturation and lightness so the four tiles read as one family
   rather than four stock Tailwind vivids. Blooms are mid-tone hues, not pale
   tints, so they shift colour without lifting toward white.

   Energised pass: every hue angle is unchanged from the original ramp, only
   saturation is up (roughly x1.45), so the four tiles keep their identity and
   their relationship to each other. Lightness came down a few points alongside
   it — a saturation lift on its own costs contrast against the white card text,
   and each step is held to at least the contrast the original colour had
   (light ends 2.7/2.8/2.7/3.9, dark ends 6.0/7.1/5.4/8.2 against white). */
.an-card--visits {
    background:
        radial-gradient(circle at 84% 6%, rgba(13, 178, 100, 0.50) 0%, rgba(13, 178, 100, 0) 56%),
        radial-gradient(circle at 8% 96%, rgba(5, 113, 77, 0.55) 0%, rgba(5, 113, 77, 0) 58%),
        linear-gradient(135deg, #0DB264 0%, #06864B 50%, #05714D 100%);
}

.an-card--clicks {
    background:
        radial-gradient(circle at 84% 6%, rgba(19, 167, 201, 0.50) 0%, rgba(19, 167, 201, 0) 56%),
        radial-gradient(circle at 8% 96%, rgba(8, 88, 168, 0.55) 0%, rgba(8, 88, 168, 0) 58%),
        linear-gradient(135deg, #13A7C9 0%, #097AB8 50%, #0858A8 100%);
}

.an-card--profile {
    background:
        radial-gradient(circle at 84% 6%, rgba(249, 122, 9, 0.50) 0%, rgba(249, 122, 9, 0) 56%),
        radial-gradient(circle at 8% 96%, rgba(193, 60, 16, 0.55) 0%, rgba(193, 60, 16, 0) 58%),
        linear-gradient(135deg, #F97A09 0%, #DA5B09 50%, #C13C10 100%);
}

.an-card--content {
    background:
        radial-gradient(circle at 84% 6%, rgba(148, 106, 222, 0.50) 0%, rgba(148, 106, 222, 0) 56%),
        radial-gradient(circle at 8% 96%, rgba(87, 57, 167, 0.55) 0%, rgba(87, 57, 167, 0) 58%),
        linear-gradient(135deg, #946ADE 0%, #7349C8 50%, #5739A7 100%);
}

/* Every piece of card text is white on both themes. These are stated on a
   prefixed selector so they outrank any element-level colour (base sheet or
   Bootstrap) that would otherwise land on the bare p/span and paint it dark —
   .an-card-value and .an-card-name only inherited before, and lost that race
   in light theme. The watermark glyph is deliberately not covered here. */
.an-card .an-card-value,
.an-card .an-card-name,
.an-card .an-card-badge,
.an-card .an-card-avatar { color: #ffffff; }

.an-card .an-card-label { color: rgba(255, 255, 255, 0.92); }

.an-card .an-card-sub,
.an-card .an-card-empty { color: rgba(255, 255, 255, 0.88); }

.an-card .an-card-meta { color: rgba(255, 255, 255, 0.85); }

.an-card .an-card-foot,
.an-card .an-card-foot span { color: rgba(255, 255, 255, 0.94); }

/* Label and icon badge are centred against each other, not top-aligned — the
   badge is 38px against a 12px label, so flex-start left the text hanging at
   the top of the badge, and worse once a longer label ("Most visited profile")
   wrapped to two lines.
   Centring does mean the 18px label carries 10px of slack under it inside the
   38px row, which reads as part of the gap to the content below — hence 8px
   here rather than 12px. It does not go lower: the badge is the tall element,
   and below 8px the content crowds it. */
.an-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.an-card-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.88);
    margin: 0;
    line-height: 1.5;
}

.an-card-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.20);
}

.an-card-icon .material-symbols-outlined {
    font-size: 1.25rem;
    line-height: 1;
    color: #ffffff;
}

.an-card-value {
    font-size: 2.8125rem;
    line-height: 1.08;
    font-weight: 600;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    margin: 0 0 3px;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.10);
}

.an-card-sub {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.84);
    margin: 0;
}

/* The body slot is the space between the label and the footer, and it is the
   same height on all four tiles now that .an-card-foot has a fixed floor. The
   short bodies (entity, empty state) are centred in it — left flush to the top
   they hung with 17px of dead space under the profile block and 50px under the
   empty message. The value + subtitle pair already fills the slot, so it needs
   no auto margins.
   The paired rule matters: the footer's own margin-top:auto has to be cancelled
   or three auto margins split the free space between them and the footer stops
   sitting on the bottom edge. */
.an-card-empty {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.85);
    margin: auto 0;
}

.an-card-empty + .an-card-foot {
    margin-top: 0;
}

/* Entity block (most visited profile / top content) */
.an-card-entity {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    margin: auto 0;
}

.an-card-entity + .an-card-foot {
    margin-top: 0;
}

.an-card-entity-text { min-width: 0; }

.an-card-avatar {
    width: 54px;
    height: 54px;
    min-width: 54px;
    border-radius: 50%;
    object-fit: cover;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.14);
    border: 2px solid rgba(255, 255, 255, 0.28);
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1;
    color: #ffffff;
}

.an-card-avatar--icon {
    border-radius: 15px;
    object-fit: contain;
    padding: 9px;
    background: rgba(255, 255, 255, 0.16);
}

/* The glyph inside the icon avatar scales with the tile, not with the 20px
   default the .material-symbols-outlined base rule gives it */
.an-card-avatar--icon .material-symbols-outlined {
    font-size: 1.6rem;
    line-height: 1;
}

.an-card-name {
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: -0.005em;
    margin: 0 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.an-card-meta {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.80);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Footer strip — pinned to the bottom, and held to one height across all four
   tiles. Without the floor, a footer carrying an .an-card-badge is 8px taller
   than one carrying plain text (26px badge vs an 18px bare span), so its
   divider rides up and the hairline no longer runs straight across the row —
   the most-visited-profile tile was the only one showing a badge.
   41px = 14px padding-top + 1px border + 26px badge. */
.an-card-foot {
    margin-top: auto;
    padding-top: 14px;
    min-height: 41px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.92);
}

.an-card-foot .material-symbols-outlined {
    font-size: 1rem;
    line-height: 1;
    transition: transform 0.2s ease;
}

a.an-card:hover .an-card-foot .material-symbols-outlined { transform: translateX(4px); }

.an-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 999px;
    padding: 3px 10px;
    white-space: nowrap;
}

.an-kpi-pill {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgb(27,122,77);
    background: rgba(27,122,77,0.08);
    border-radius: 999px;
    padding: 2px 10px;
    white-space: nowrap;
}

/* ── Chart panels ────────────────────────────────────────────────────── */
.an-charts {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

@media (min-width: 992px) {
    .an-charts { grid-template-columns: repeat(2, 1fr); }
}

/* Hairline of the categorical ramp across the top of each chart panel, so the
   panel announces the colours its series will use. Same five hues as the JS
   palette() — keep the two in step when either changes. */
.an-chart-panel {
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.an-chart-panel:hover {
    border-color: rgba(27, 122, 77, 0.28) !important;
    box-shadow: 0 14px 30px -18px rgba(15, 23, 42, 0.35);
}

.an-chart-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #06864B 0%, #097AB8 28%, #DA5B09 55%, #7349C8 78%, #C42A62 100%);
}

.an-chart-panel--b::before {
    background: linear-gradient(90deg, #C42A62 0%, #7349C8 22%, #DA5B09 45%, #097AB8 72%, #06864B 100%);
}

/* Sits behind the plot area and fades out downward — stops the chart floating
   on flat white without competing with the series colours. */
.an-chart-panel::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 58%;
    background: linear-gradient(180deg, rgba(27, 122, 77, 0) 0%, rgba(27, 122, 77, 0.045) 100%);
    pointer-events: none;
    z-index: 0;
}

.an-chart-panel--b::after {
    background: linear-gradient(180deg, rgba(122, 93, 180, 0) 0%, rgba(122, 93, 180, 0.05) 100%);
}

.an-chart-head,
.an-chart-panel > div[id^="chart"] {
    position: relative;
    z-index: 1;
}

/* ApexCharts' tooltip is nowrap, so a long profile name ran past the panel's
   overflow:hidden edge and was cut off - wrap it instead. */
.an-chart-panel .apexcharts-tooltip {
    white-space: normal;
    max-width: 320px;
}

.an-chart-panel .apexcharts-tooltip-title {
    overflow-wrap: anywhere;
}

.an-chart-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.an-chart-title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #0F172A;
    margin: 0 0 2px;
}

.an-chart-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.an-chart-dot--a { background: linear-gradient(135deg, #0DB264 0%, #06864B 100%); }
.an-chart-dot--b { background: linear-gradient(135deg, #946ADE 0%, #7349C8 100%); }

.an-chart-sub {
    font-size: 0.8125rem;
    color: #94A3B8;
    margin: 0;
}

.an-chart-badge {
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 999px;
    padding: 4px 11px;
    white-space: nowrap;
    background: rgba(27, 122, 77, 0.08);
    color: rgb(27, 122, 77);
}

.an-chart-badge--alt {
    background: rgba(122, 93, 180, 0.10);
    color: #6F52A8;
}

/* Back button on history pages */
.an-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    border: 1px solid #E2E8F0;
    background: #ffffff;
    color: #64748B;
    margin-right: 14px;
    flex-shrink: 0;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.an-back-btn:hover {
    border-color: rgb(27,122,77);
    color: rgb(27,122,77);
}

.an-back-btn .material-symbols-outlined {
    font-size: 1.1rem;
}

/* Placeholder tile shown while the KPI cards load */
.an-skel-card {
    min-height: 196px;
    border-radius: 18px;
    background: linear-gradient(135deg, #E2E8F0 0%, #F1F5F9 60%, #E2E8F0 100%);
    animation: an-pulse 1.4s ease-in-out infinite;
}

@keyframes an-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

/* -- Purchase Card ------------------------------------------------------- */
.pc-layout {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    width: 100%;
    gap: 24px;
}

.pc-product-col {
    flex: 1;
    min-width: 0;
    height: 75vh;
    overflow-y: auto;
    padding-right: 8px;
    display: flex;
    flex-direction: column;
    scrollbar-width: thin;
    scrollbar-color: #86EFAC transparent;
}

.pc-product-col::-webkit-scrollbar { width: 6px; }
.pc-product-col::-webkit-scrollbar-track { background: transparent; margin: 6px 0; }
.pc-product-col::-webkit-scrollbar-thumb { background: #86EFAC; border-radius: 99px; transition: background .2s; }
.pc-product-col::-webkit-scrollbar-thumb:hover { background: #4ADE80; }

.pc-summary-col {
    width: 480px;
    flex-shrink: 0;
    position: sticky;
    top: 24px;
}

/* Quantity textbox: numeric, no spinners, matches the grouped stepper look */
.qty-display { -moz-appearance: textfield; }
.qty-display::-webkit-outer-spin-button,
.qty-display::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-display:focus { background: #F8FAFC; }

/* Inner card: name left, price right - no overlap at any width */
.pc-card-namerow {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
}

.pc-card-namecell {
    flex: 1;
    min-width: 0;
}

.pc-card-pricecell {
    flex: 0 0 auto;
    min-width: 72px;
    text-align: right;
}

/* Collapse to single column at <=900px (avoids the squeeze zone) */
@media (max-width: 900px) {
    .pc-layout {
        flex-direction: column;
        gap: 16px;
    }

    /* flex:none prevents the column-flex parent from overriding height */
    .pc-product-col {
        flex: none;
        max-width: 100%;
        width: 100%;
        height: 45vh;
        min-height: 200px;
        overflow-y: auto;
        padding-right: 4px;
    }

    .pc-summary-col {
        width: 100%;
        position: static;
        top: auto;
    }
}

/* Group Order Discounts (banner, hero toggle, pricing panel) on phones. The
   markup carries inline styles, so these need !important to win. */
@media (max-width: 767px) {
    .pc-gp-toggle {
        width: 100%;
        justify-content: center;
        margin-top: 14px;
    }

    .pc-gp-banner {
        flex-wrap: wrap !important;
        gap: 6px 12px !important;
        padding: 14px 16px !important;
    }

        .pc-gp-banner-title {
            flex: 1 1 auto;
        }

        .pc-gp-banner-link {
            flex: 0 0 auto;
        }

        .pc-gp-banner-text {
            flex: 1 1 100% !important;
            order: 3;
            font-size: 0.8125rem !important;
            line-height: 1.4;
        }

    .pc-gp-panel-head {
        padding: 16px 16px 10px !important;
    }

    .pc-gp-table {
        width: max-content !important;
        min-width: 100% !important;
    }

        .pc-gp-table th,
        .pc-gp-table td {
            padding: 10px 14px !important;
        }

        .pc-gp-table th:first-child,
        .pc-gp-table td:first-child {
            position: sticky;
            left: 0;
            z-index: 1;
            background: #ffffff;
            box-shadow: 1px 0 0 #F1F5F9;
        }

        .pc-gp-table thead th:first-child {
            background: #F8FAFC;
        }

        .pc-gp-table th {
            font-size: 0.8125rem !important;
        }

        .pc-gp-table td {
            font-size: 0.875rem !important;
        }

            .pc-gp-table td .pc-tier-price {
                font-size: 0.9375rem !important;
            }
}

/* -- Invoice ------------------------------------------------------------- */
.inv-page > * + * {
    margin-top: 1.5rem;
}

.inv-hero {
    border-radius: 1rem;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(27, 122, 77, 0.06) 0%, rgba(255, 255, 255, 0.98) 50%);
}

.inv-icon-box,
.inv-sub-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inv-subscription {
    border-radius: 1rem;
}

/* Nudge every text size in this card up one step so it reads slightly larger,
   in line with the enlarged invoice history below. Scoped to the card; higher
   specificity than the base c-text-* utilities so it wins. */
.inv-subscription .c-text-xs { font-size: 13px; }
.inv-subscription .c-text-sm { font-size: 15px; }
.inv-subscription .c-text-\[10px\] { font-size: 11px; }
.inv-subscription .c-text-\[11px\] { font-size: 12px; }

/* Update / Cancel action buttons */
.inv-action-btn {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: 1rem;
    border: 1px solid;
    background: none;
    text-align: left;
    width: 100%;
    height: 100%;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.inv-action-btn--default {
    background: #F8FAFC;
    border-color: #E2E8F0;
}

.inv-action-btn--default:hover {
    background: #ffffff;
    border-color: #CBD5E1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.inv-action-btn--danger {
    background: rgba(254, 242, 242, 0.5);
    border-color: #FEE2E2;
}

.inv-action-btn--danger:hover {
    background: #FEF2F2;
    border-color: #FECACA;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Locked state: subscription cancelled, no resubscription until period ends */
.inv-action-btn--locked,
.inv-action-btn--locked:hover {
    background: #F1F5F9;
    border-color: #E2E8F0;
    box-shadow: none;
    cursor: not-allowed;
    opacity: 0.65;
}

/* Mini payment card (inside Update Payment Card button) */
.inv-mini-card {
    position: relative;
    width: 76px;
    height: 48px;
    min-width: 76px;
    border-radius: 0.5rem;
    padding: 0.4rem 0.5rem;
    background: linear-gradient(135deg, #0B3B25 0%, #1B7A4D 60%, #2FA36B 100%);
    box-shadow: 0 6px 12px -6px rgba(11, 59, 37, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    text-align: left;
}

/* Diagonal sheen */
.inv-mini-card::after {
    content: "";
    position: absolute;
    top: -70%;
    right: -15%;
    width: 34px;
    height: 240%;
    background: rgba(255, 255, 255, 0.07);
    transform: rotate(24deg);
    pointer-events: none;
}

.inv-mini-chip {
    width: 14px;
    height: 10px;
    border-radius: 2px;
    background: linear-gradient(135deg, #F2D27E 0%, #DCAC48 100%);
    box-shadow: inset 0 0 0 1px rgba(120, 82, 20, 0.35);
}

.inv-mini-num {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.1em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}

.inv-mini-brand {
    font-size: 8px;
    font-weight: 800;
    font-style: italic;
    letter-spacing: 0.08em;
}

.inv-mc-mark {
    display: inline-flex;
}

.inv-mc-mark span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.inv-mc-mark span:first-child {
    background: #EB001B;
}

.inv-mc-mark span:last-child {
    background: #F79E1B;
    opacity: 0.9;
    margin-left: -4px;
}

/* -- Cancel Subscription modal (Views/Invoice/_Subscription) ------------- */
.inv-cancel-modal .modal-dialog {
    max-width: 28rem;
}

.inv-cancel-modal .modal-content {
    border: 0;
    border-radius: 1rem;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.35);
}

/* Slate wash + blur instead of Bootstrap's flat black; the class is put on the
   backdrop by _Subscription's script, since the backdrop is not a child here. */
.modal-backdrop.inv-cancel-backdrop {
    background-color: #0F172A;
    backdrop-filter: blur(4px);
}

.modal-backdrop.inv-cancel-backdrop.show {
    opacity: 0.55;
}

.inv-cancel-body {
    padding: 1.5rem 1.5rem 0;
}

.inv-cancel-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.inv-cancel-alert {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FEE2E2;
    color: #EF4444;
}

.inv-cancel-close {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: #94A3B8;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}

.inv-cancel-close:hover {
    background: rgba(0, 0, 0, 0.05);
}

.inv-cancel-title {
    margin: 1rem 0 0;
    font-size: 18px;
    font-weight: 700;
    color: #0F172A;
}

.inv-cancel-lead {
    margin: 0.5rem 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: #64748B;
}

.inv-cancel-lead span {
    font-weight: 600;
    color: #0F172A;
}

/* What happens after cancelling */
.inv-cancel-facts {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid #E2E8F0;
    border-radius: 0.75rem;
    background: #F8FAFC;
}

.inv-cancel-fact {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
}

.inv-cancel-fact + .inv-cancel-fact {
    margin-top: 0.75rem;
}

.inv-cancel-fact svg {
    flex-shrink: 0;
    margin-top: 2px;
}

.inv-cancel-fact p {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: #64748B;
}

.inv-cancel-fact strong {
    font-weight: 700;
    color: #0F172A;
}

.inv-cancel-fact--yes svg {
    color: #16A34A;
}

.inv-cancel-fact--no svg {
    color: #DC2626;
}

/* Amber "please note" callout — stays light in both themes, as designed */
.inv-cancel-note {
    margin-top: 0.75rem;
    padding: 0.75rem;
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    border: 1px solid #FDE68A;
    border-radius: 0.75rem;
    background: #FFFBEB;
}

.inv-cancel-note svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: #D97706;
}

.inv-cancel-note p {
    margin: 0;
    font-size: 12px;
    line-height: 1.6;
    color: #78350F;
}

.inv-cancel-note strong {
    font-weight: 700;
}

.inv-cancel-actions {
    display: flex;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem 1.5rem;
}

.inv-cancel-btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 0.75rem 0.5rem;
    border: 0;
    border-radius: 0.75rem;
    font-size: 14px;
    font-weight: 600;
    transition: background 0.15s ease;
}

.inv-cancel-btn--keep {
    background: #F1F5F9;
    color: #0F172A;
}

.inv-cancel-btn--keep:hover {
    background: #E2E8F0;
}

.inv-cancel-btn--danger {
    background: #DC2626;
    color: #ffffff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.inv-cancel-btn--danger:hover {
    background: #B91C1C;
    color: #ffffff;
}

.inv-cancel-btn--primary {
    background: #1B7A4D;
    color: #ffffff;
    box-shadow: 0 10px 15px -3px rgba(27, 122, 77, 0.30);
}

.inv-cancel-btn--primary:hover {
    background: #156B42;
    color: #ffffff;
}

/* Confirmation screen shown after the cancellation goes through */
.inv-cancel-done {
    padding: 2rem;
    text-align: center;
}

.inv-cancel-done-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #DCFCE7;
    color: #16A34A;
}

.inv-cancel-done h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #0F172A;
}

.inv-cancel-done p {
    margin: 0.5rem 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: #64748B;
}

.inv-cancel-done strong {
    font-weight: 700;
    color: #0F172A;
}

.inv-cancel-done .inv-cancel-btn {
    width: 100%;
    margin-top: 1.5rem;
}

/* Narrow phones: tighten the padding and stack the two actions */
@media (max-width: 400px) {
    .inv-cancel-body {
        padding: 1.25rem 1.25rem 0;
    }

    .inv-cancel-actions {
        flex-direction: column;
        padding: 1rem 1.25rem 1.25rem;
    }

    .inv-cancel-done {
        padding: 1.75rem 1.25rem;
    }
}
/* ============================================================
   PurchaseCard - promo code (Views/PurchaseCard/_PurchaseCard)
   ============================================================ */

.pc-promo-label {
    color: #64748B;
}

.pc-promo-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

/* Anchors the in-field remove button, so its position does not depend on the
   width of the Apply button sitting next to it. */
.pc-promo-field {
    position: relative;
    display: flex;
    flex: 1;
    min-width: 0;
}

.pc-promo-input {
    width: 100%;
    min-width: 0;
    /* right padding reserves room for the remove button */
    padding: 10px 34px 10px 12px;
    font: inherit;
    font-size: 0.875rem;
    color: #0F172A;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    outline: none;
    text-transform: uppercase;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.pc-promo-input::placeholder {
    color: #94A3B8;
    text-transform: none;
}

.pc-promo-input:focus {
    border-color: #4ADE80;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.12);
}

.pc-promo-input:disabled {
    background: #F8FAFC;
    color: #64748B;
    cursor: not-allowed;
}

.pc-promo-btn {
    flex: 0 0 auto;
    padding: 10px 14px;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #FFFFFF;
    background: #1B7A4D;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s ease, opacity .15s ease;
}

.pc-promo-btn:hover:not(:disabled) {
    background: #15653F;
}

.pc-promo-btn:disabled {
    background: #E2E8F0;
    color: #94A3B8;
    cursor: not-allowed;
}

/* Sits inside the text field, mirroring the e-commerce checkout */
.pc-promo-remove {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    color: #94A3B8;
    background: none;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    z-index: 2;
    transition: color .15s ease, background-color .15s ease;
}

.pc-promo-remove:hover {
    color: #EF4444;
    background-color: rgba(239, 68, 68, 0.08);
}

.pc-promo-msg {
    margin-top: 8px;
    margin-bottom: 0;
    font-size: 0.75rem;
    color: #EF4444;
}

.pc-discount-row,
.pc-discount-row #summaryDiscount {
    color: #EF4444;
}

.pc-promo-rate {
    font-size: 0.75rem;
    color: #94A3B8;
}

/* Toggled from JS. Scoped to the summary card so it outranks the
   `.flex { display: flex !important }` utility, which beats an inline display:none. */
.pc-order-summary .is-hidden {
    display: none !important;
}

.c-bg-theme svg {
    width: 100%;
}
/* PDPA consent tick-box on the Add Card / Resubscribe cards */
.pdpa-consent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 0.75rem;
    line-height: 1.5;
    color: #475569;
    text-align: left;
}

.pdpa-consent input[type="checkbox"] {
    margin-top: 2px;
    flex: 0 0 auto;
}

/* Brand green, heavy underline and a new-tab arrow so the link stands out inside the 12px consent line */
/* !important because the reset near the top of this file sets a { color: inherit !important; text-decoration: inherit !important } */
.pdpa-consent a {
    color: #1B7A4D !important;
    font-weight: 700;
    text-decoration: underline !important;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
}

/* \FE0E asks for the text glyph, without it the arrow falls back to a colour emoji font */
.pdpa-consent a::after {
    content: "\2197\FE0E";
    margin-left: 2px;
}

.pdpa-consent a:hover,
.pdpa-consent a:focus {
    color: #156B42 !important;
}

/* Confirm is greyed until PDPA consent is given, but still takes the click so the
   warning below the tick-box can explain why nothing happened */
/* !important because Site.css loads before the bootstrap bundle, so a single-class
   rule here otherwise loses to .btn at equal specificity */
.pdpa-locked {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

.pdpa-warning {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: -8px 0 12px;
    font-size: 0.75rem;
    line-height: 1.5;
    color: #EF4444;
    text-align: left;
}

.pdpa-warning svg {
    flex: 0 0 auto;
    margin-top: 1px;
}

/* ============================================================
   Purchase Cards - product images, colour chooser, preview lightbox
   (Views/PurchaseCard/_PurchaseCard.cshtml + _ProductMediaModals.cshtml)
   ============================================================ */

/* Product image strip under the name - tap any photo to open the lightbox */
.pc-media-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
.pc-thumb {
    display: inline-flex;
    width: 112px;
    height: 64px;
    padding: 0;
    overflow: hidden;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    background: #F8FAFC;
    cursor: zoom-in;
    transition: transform .15s ease, border-color .15s ease;
}
.pc-thumb:hover { transform: scale(1.04); border-color: #1B7A4D; }
.pc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-media-hint { font-size: 0.625rem; font-weight: 500; color: #94A3B8; }

/* Colour block: label row + the selected colour tile that opens the chooser */
.pc-colour-block { margin-top: 16px; }
.pc-colour-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}
.pc-colour-label { font-size: 0.75rem; font-weight: 600; color: #0F172A; }
.pc-req { color: #EF4444; }
.pc-colour-browse {
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #16A34A;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.pc-colour-browse:hover { color: #1B7A4D; }
.pc-colour-selected {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px;
    text-align: left;
    border: 2px solid #E2E8F0;
    border-radius: 12px;
    background: #F8FAFC;
    cursor: pointer;
    transition: border-color .15s ease;
}
.pc-colour-selected:hover { border-color: #CBD5E1; }
.pc-colour-selected-thumb {
    flex-shrink: 0;
    width: 112px;
    height: 72px;
    overflow: hidden;
    border-radius: 8px;
    background: #E2E8F0;
    box-shadow: 0 1px 2px rgba(15,23,42,.08);
}
.pc-colour-selected-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-colour-selected-text { flex: 1; min-width: 0; }
.pc-colour-selected-name {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #0F172A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pc-colour-selected-meta { display: block; font-size: 0.6875rem; color: #94A3B8; margin-top: 2px; }
.pc-colour-zoom,
.pc-colour-change {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 8px;
    font: inherit;
    font-size: 0.6875rem;
    color: #475569;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
}
.pc-colour-zoom { cursor: zoom-in; transition: border-color .15s ease; }
.pc-colour-zoom:hover { border-color: #1B7A4D; color: #1B7A4D; }

/* No photo for a colour - neutral swatch in place of the image */
.pc-colour-noimg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #CBD5E1;
}

/* Colour chooser grid (modal) */
.pc-colour-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}
.pc-colour-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    text-align: left;
    font: inherit;
    border: 2px solid #E2E8F0;
    border-radius: 12px;
    background: #FFFFFF;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.pc-colour-tile:hover { border-color: #CBD5E1; }
.pc-colour-tile.is-selected { border-color: #22C55E; box-shadow: 0 6px 18px rgba(34,197,94,.18); }
.pc-colour-tile-media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px;
    padding: 12px;
    background: #F8FAFC;
}
.pc-colour-tile-media img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(15,23,42,.12);
}
.pc-colour-tile-zoom {
    position: absolute;
    top: 8px;
    left: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: #FFFFFF;
    background: rgba(0,0,0,.5);
    border-radius: 999px;
    cursor: zoom-in;
    transition: transform .15s ease;
}
.pc-colour-tile-zoom:hover { transform: scale(1.1); }
.pc-colour-tile-check {
    position: absolute;
    top: 8px;
    right: 8px;
    display: none;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: #FFFFFF;
    background: #22C55E;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.pc-colour-tile.is-selected .pc-colour-tile-check { display: inline-flex; }
.pc-colour-tile-body { padding: 12px; }
.pc-colour-tile-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}
.pc-colour-tile-name { font-size: 0.875rem; font-weight: 700; color: #0F172A; }
.pc-colour-tile-price { flex-shrink: 0; font-size: 0.875rem; font-weight: 700; color: #0F172A; }
.pc-colour-tile-product { display: block; margin-top: 2px; font-size: 0.6875rem; color: #94A3B8; }
.pc-colour-tile-desc {
    margin-top: 4px;
    font-size: 0.6875rem;
    line-height: 1.5;
    color: #64748B;
    /* three lines, then ellipsis - the lightbox shows the full text */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Shared modal chrome (both dialogs) */
.pc-mdl-content { border: 1px solid #E2E8F0; border-radius: 16px; overflow: hidden; }
.pc-mdl-header { align-items: flex-start; padding: 16px 20px; border-bottom: 1px solid #E2E8F0; }
.pc-mdl-titles { min-width: 0; }
.pc-mdl-title { font-size: 0.9375rem; font-weight: 700; color: #0F172A; margin: 0; }
.pc-mdl-sub { margin: 2px 0 0 0; font-size: 0.75rem; color: #94A3B8; }

/* Lightbox */
.pc-lb-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 240px;
    background: #F8FAFC;
}
.pc-lb-stage img { display: block; width: 100%; max-height: 62vh; object-fit: contain; }
.pc-lb-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0 0 3px 0;
    font-size: 1.5rem;
    line-height: 1;
    color: #FFFFFF;
    background: rgba(0,0,0,.45);
    border: none;
    border-radius: 999px;
    cursor: pointer;
}
.pc-lb-nav:hover { background: rgba(0,0,0,.65); }
.pc-lb-prev { left: 12px; }
.pc-lb-next { right: 12px; }
.pc-lb-count {
    position: absolute;
    right: 12px;
    bottom: 12px;
    padding: 2px 8px;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #FFFFFF;
    background: rgba(0,0,0,.45);
    border-radius: 999px;
}
.pc-lb-thumbs {
    display: flex;
    gap: 8px;
    padding: 12px 20px;
    overflow-x: auto;
    border-bottom: 1px solid #E2E8F0;
    scrollbar-width: thin;
}
.pc-lb-thumb {
    flex-shrink: 0;
    width: 64px;
    height: 48px;
    padding: 0;
    overflow: hidden;
    border: 2px solid #E2E8F0;
    border-radius: 8px;
    background: #F8FAFC;
    cursor: pointer;
}
.pc-lb-thumb.is-active { border-color: #1B7A4D; }
.pc-lb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-lb-info { padding: 16px 20px; }
.pc-lb-desc { font-size: 0.875rem; line-height: 1.6; color: #64748B; }
.pc-lb-desc p:last-child { margin-bottom: 0; }
.pc-lb-desc img { max-width: 100%; }
.pc-lb-pricerow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
}
.pc-lb-price { font-size: 1.125rem; font-weight: 700; color: #1B7A4D; }
.pc-lb-perunit { font-size: 0.75rem; font-weight: 500; color: #94A3B8; }
.pc-lb-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 7px 12px;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    color: #1B7A4D;
    background: #FFFFFF;
    border: 1px solid #BBF7D0;
    border-radius: 999px;
    cursor: pointer;
}
.pc-lb-back:hover { background: #F0FDF4; }

/* Single-photo galleries need no thumbs / arrows; toggled from JS */
.pc-lb-thumbs.is-hidden,
.pc-lb-nav.is-hidden,
.pc-lb-count.is-hidden,
.pc-lb-back.is-hidden,
.pc-colour-zoom.is-hidden { display: none !important; }

@media (max-width: 575.98px) {
    .pc-thumb { width: 96px; height: 56px; }
    .pc-colour-selected { flex-wrap: wrap; }
    .pc-colour-selected-thumb { width: 96px; height: 60px; }
    .pc-colour-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .pc-colour-tile-media { height: 96px; }
}

/* First product image in place of the icon chip - tap to open the lightbox */
.pc-chip-img {
    display: inline-flex;
    width: 56px;
    height: 56px;
    padding: 0;
    overflow: hidden;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    background: #F8FAFC;
    cursor: zoom-in;
    transition: transform .15s ease, border-color .15s ease;
}
.pc-chip-img:hover { transform: scale(1.04); border-color: #1B7A4D; }
.pc-chip-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Selected colour description line under the tile */
.pc-colour-selected-desc {
    display: block;
    margin-top: 2px;
    font-size: 0.6875rem;
    line-height: 1.4;
    color: #64748B;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.whitespace-normal
{
    white-space: normal;
}