/* ==========================================================================
   utilities.css - Color/background/spacing utility classes.
   Token values live in tokens.css. Load after tokens.css.
   ========================================================================== */

/* --------------------------------------------------------
   STYLED CALLOUT BLOCKS
   -------------------------------------------------------- */

.is-style-info {
    background-color: #d6efee;
    color: #094264;
    border-radius: 4px;
    box-sizing: border-box;
    padding: 32px;
}

.is-style-success {
    background-color: #d0eac4;
    color: #154a28;
    border-radius: 4px;
    box-sizing: border-box;
    padding: 32px;
}

.is-style-warning {
    background-color: #fbe7dd;
    color: #8a4b30;
    border-radius: 4px;
    box-sizing: border-box;
    padding: 32px;
}

.is-style-error {
    background-color: #ffdede;
    color: #8b343c;
    border-radius: 4px;
    box-sizing: border-box;
    padding: 32px;
}

.is-style-pink {
    background-color: #f5ebf3 !important;
    color: #55298a !important;
    border-radius: 4px;
    box-sizing: border-box;
    padding: 32px;
}

/* --------------------------------------------------------
   TEXT COLOR CLASSES
   -------------------------------------------------------- */

.text-a4a5a6 { color: #a4a5a6; }
.text-4f156a { color: #4f156a; }
.text-55298a { color: #55298a; }
.text-00543d { color: #00543d; }
.text-e3eFe3 { color: #e3eFe3; }
.text-f5ebf3 { color: #f5ebf3; }
.text-f5f5eb { color: #f5f5eb; }
.text-f5f5f5 { color: #f5f5f5; }

.text-indigo { color: var(--bs-indigo); }
.text-indigo-subtle { color: var(--bs-indigo-subtle); }
.text-indigo-emphasis { color: var(--bs-indigo-emphasis); }

.text-purple { color: var(--bs-purple); }
.text-purple-subtle { color: var(--bs-purple-subtle); }
.text-purple-emphasis { color: var(--bs-purple-emphasis); }

.text-pink { color: var(--bs-pink); }
.text-pink-subtle { color: var(--bs-pink-subtle); }
.text-pink-emphasis { color: var(--bs-pink-emphasis); }

.text-red { color: var(--bs-red); }
.text-red-subtle { color: var(--bs-red-subtle); }
.text-red-emphasis { color: var(--bs-red-emphasis); }

.text-orange { color: var(--bs-orange); }
.text-orange-subtle { color: var(--bs-orange-subtle); }
.text-orange-emphasis { color: var(--bs-orange-emphasis); }

.text-yellow { color: var(--bs-yellow); }
.text-yellow-subtle { color: var(--bs-yellow-subtle); }
.text-yellow-emphasis { color: var(--bs-yellow-emphasis); }

.text-green { color: var(--bs-green); }
.text-green-subtle { color: var(--bs-green-subtle); }
.text-green-emphasis { color: var(--bs-green-emphasis); }

.text-teal { color: var(--bs-teal); }
.text-teal-subtle { color: var(--bs-teal-subtle); }
.text-teal-emphasis { color: var(--bs-teal-emphasis); }

.text-cyan { color: var(--bs-cyan); }
.text-cyan-subtle { color: var(--bs-cyan-subtle); }
.text-cyan-emphasis { color: var(--bs-cyan-emphasis); }

.text-black { color: var(--bs-black); }
.text-black-subtle { color: var(--bs-black-subtle); }
.text-black-emphasis { color: var(--bs-black-emphasis); }

.text-white { color: var(--bs-white); }
.text-white-subtle { color: var(--bs-white-subtle); }
.text-white-emphasis { color: var(--bs-white-emphasis); }

.text-gray { color: var(--bs-gray); }
.text-gray-subtle { color: var(--bs-gray-subtle); }
.text-gray-emphasis { color: var(--bs-gray-emphasis); }

.text-gray-dark { color: var(--bs-gray-dark); }
.text-gray-dark-subtle { color: var(--bs-gray-dark-subtle); }
.text-gray-dark-emphasis { color: var(--bs-gray-dark-emphasis); }

.text-primary { color: var(--bs-primary); }
.text-primary-subtle { color: var(--bs-primary-subtle); }
.text-primary-emphasis { color: var(--bs-primary-emphasis); }

.text-light-primary { color: var(--bs-light-primary); }
.text-light-primary-subtle { color: var(--bs-light-primary-subtle); }
.text-light-primary-emphasis { color: var(--bs-light-primary-emphasis); }

.text-secondary { color: var(--bs-secondary); }
.text-secondary-subtle { color: var(--bs-secondary-subtle); }
.text-secondary-emphasis { color: var(--bs-secondary-emphasis); }

.text-tertiary { color: var(--bs-tertiary); }
.text-tertiary-subtle { color: var(--bs-tertiary-subtle); }
.text-tertiary-emphasis { color: var(--bs-tertiary-emphasis); }

.text-success { color: var(--bs-success); }
.text-success-subtle { color: var(--bs-success-subtle); }
.text-success-emphasis { color: var(--bs-success-emphasis); }

.text-warning { color: var(--bs-warning); }
.text-warning-subtle { color: var(--bs-warning-subtle); }
.text-warning-emphasis { color: var(--bs-warning-emphasis); }

.text-danger { color: var(--bs-danger); }
.text-danger-subtle { color: var(--bs-danger-subtle); }
.text-danger-emphasis { color: var(--bs-danger-emphasis); }

.text-error { color: var(--bs-error); }
.text-error-subtle { color: var(--bs-error-subtle); }
.text-error-emphasis { color: var(--bs-error-emphasis); }

/* --------------------------------------------------------
   BACKGROUND COLOR CLASSES
   -------------------------------------------------------- */

.bg-ebedee { background-color: #ebedee; }
.bg-4f156a { background-color: #4f156a; }
.bg-55298a { background-color: #55298a; }
.bg-00543d { background-color: #00543d; }
.bg-e3eFe3 { background-color: #e3eFe3; }
.bg-f5ebf3 { background-color: #f5ebf3; }
.bg-f5f5eb { background-color: #f5f5eb; }
.bg-f5f5f5 { background-color: #f5f5f5; }

.bg-indigo { background-color: var(--bs-indigo); }
.bg-indigo-subtle { background-color: var(--bs-indigo-subtle); }
.bg-indigo-emphasis { background-color: var(--bs-indigo-emphasis); }

.bg-purple { background-color: var(--bs-purple); }
.bg-purple-subtle { background-color: var(--bs-purple-subtle); }
.bg-purple-emphasis { background-color: var(--bs-purple-emphasis); }

.bg-pink { background-color: var(--bs-pink); }
.bg-pink-subtle { background-color: var(--bs-pink-subtle); }
.bg-pink-emphasis { background-color: var(--bs-pink-emphasis); }

.bg-red { background-color: var(--bs-red); }
.bg-red-subtle { background-color: var(--bs-red-subtle); }
.bg-red-emphasis { background-color: var(--bs-red-emphasis); }

.bg-orange { background-color: var(--bs-orange); }
.bg-orange-subtle { background-color: var(--bs-orange-subtle); }
.bg-orange-emphasis { background-color: var(--bs-orange-emphasis); }

.bg-yellow { background-color: var(--bs-yellow); }
.bg-yellow-subtle { background-color: var(--bs-yellow-subtle); }
.bg-yellow-emphasis { background-color: var(--bs-yellow-emphasis); }

.bg-green { background-color: var(--bs-green); }
.bg-green-subtle { background-color: var(--bs-green-subtle); }
.bg-green-emphasis { background-color: var(--bs-green-emphasis); }

.bg-teal { background-color: var(--bs-teal); }
.bg-teal-subtle { background-color: var(--bs-teal-subtle); }
.bg-teal-emphasis { background-color: var(--bs-teal-emphasis); }

.bg-cyan { background-color: var(--bs-cyan); }
.bg-cyan-subtle { background-color: var(--bs-cyan-subtle); }
.bg-cyan-emphasis { background-color: var(--bs-cyan-emphasis); }

.bg-black { background-color: var(--bs-black); }
.bg-black-subtle { background-color: var(--bs-black-subtle); }
.bg-black-emphasis { background-color: var(--bs-black-emphasis); }

.bg-white { background-color: var(--bs-white); }
.bg-white-subtle { background-color: var(--bs-white-subtle); }
.bg-white-emphasis { background-color: var(--bs-white-emphasis); }

.bg-opacity-10 { --bs-bg-opacity: 0.1; }
.bg-opacity-25 { --bs-bg-opacity: 0.25; }
.bg-opacity-50 { --bs-bg-opacity: 0.5; }
.bg-opacity-75 { --bs-bg-opacity: 0.75; }
.bg-opacity-100 { --bs-bg-opacity: 1; }

.bg-gray { background-color: var(--bs-gray); }
.bg-gray-subtle { background-color: var(--bs-gray-subtle); }
.bg-gray-emphasis { background-color: var(--bs-gray-emphasis); }

.bg-gray-dark { background-color: var(--bs-gray-dark); }
.bg-gray-dark-subtle { background-color: var(--bs-gray-dark-subtle); }
.bg-gray-dark-emphasis { background-color: var(--bs-gray-dark-emphasis); }

.bg-light {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important;
}

.bg-primary { background-color: var(--bs-primary); }
.bg-primary-subtle { background-color: var(--bs-primary-subtle); }
.bg-primary-emphasis { background-color: var(--bs-primary-emphasis); }

.bg-light-primary { background-color: var(--bs-light-primary); }
.bg-light-primary-subtle { background-color: var(--bs-light-primary-subtle); }
.bg-light-primary-emphasis { background-color: var(--bs-light-primary-emphasis); }

.bg-secondary { background-color: var(--bs-secondary); }
.bg-secondary-subtle { background-color: var(--bs-secondary-subtle); }
.bg-secondary-emphasis { background-color: var(--bs-secondary-emphasis); }

.bg-tertiary { background-color: var(--bs-tertiary); }
.bg-tertiary-subtle { background-color: var(--bs-tertiary-subtle); }
.bg-tertiary-emphasis { background-color: var(--bs-tertiary-emphasis); }

.bg-success { background-color: var(--bs-success); }
.bg-success-subtle { background-color: var(--bs-success-subtle); }
.bg-success-emphasis { background-color: var(--bs-success-emphasis); }

.bg-warning { background-color: var(--bs-warning); }
.bg-warning-subtle { background-color: var(--bs-warning-subtle); }
.bg-warning-emphasis { background-color: var(--bs-warning-emphasis); }

.bg-danger { background-color: var(--bs-danger); }
.bg-danger-subtle { background-color: var(--bs-danger-subtle); }
.bg-danger-emphasis { background-color: var(--bs-danger-emphasis); }

.bg-error { background-color: var(--bs-error); }
.bg-error-subtle { background-color: var(--bs-error-subtle); }
.bg-error-emphasis { background-color: var(--bs-error-emphasis); }

/* --------------------------------------------------------
   TEXT + BACKGROUND PAIRS
   -------------------------------------------------------- */

.text-bg-indigo { background-color: var(--bs-indigo); color: var(--bs-white); }
.text-bg-indigo-subtle { background-color: var(--bs-indigo-subtle); color: var(--bs-indigo-emphasis); }

.text-bg-purple { background-color: var(--bs-purple); color: var(--bs-white); }
.text-bg-purple-subtle { background-color: var(--bs-purple-subtle); color: var(--bs-purple-emphasis); }

.text-bg-pink { background-color: var(--bs-pink); color: var(--bs-white); }
.text-bg-pink-subtle { background-color: var(--bs-pink-subtle); color: var(--bs-pink-emphasis); }

.text-bg-red { background-color: var(--bs-red); color: var(--bs-white); }
.text-bg-red-subtle { background-color: var(--bs-red-subtle); color: var(--bs-red-emphasis); }

.text-bg-orange { background-color: var(--bs-orange); color: var(--bs-white); }
.text-bg-orange-subtle { background-color: var(--bs-orange-subtle); color: var(--bs-orange-emphasis); }

.text-bg-yellow { background-color: var(--bs-yellow); color: var(--bs-white); }
.text-bg-yellow-subtle { background-color: var(--bs-yellow-subtle); color: var(--bs-yellow-emphasis); }

.text-bg-green { background-color: var(--bs-green); color: var(--bs-white); }
.text-bg-green-subtle { background-color: var(--bs-green-subtle); color: var(--bs-green-emphasis); }

.text-bg-teal { background-color: var(--bs-teal); color: var(--bs-white); }
.text-bg-teal-subtle { background-color: var(--bs-teal-subtle); color: var(--bs-teal-emphasis); }

.text-bg-cyan { background-color: var(--bs-cyan); color: var(--bs-white); }
.text-bg-cyan-subtle { background-color: var(--bs-cyan-subtle); color: var(--bs-cyan-emphasis); }

.text-bg-black { background-color: var(--bs-black); color: var(--bs-white); }
.text-bg-black-subtle { background-color: var(--bs-black-subtle); color: var(--bs-black-emphasis); }

.text-bg-white { background-color: var(--bs-white); color: var(--bs-black); }
.text-bg-white-subtle { background-color: var(--bs-white-subtle); color: var(--bs-white-emphasis); }

.text-bg-gray { background-color: var(--bs-gray); color: var(--bs-white); }
.text-bg-gray-subtle { background-color: var(--bs-gray-subtle); color: var(--bs-gray-emphasis); }

.text-bg-gray-dark { background-color: var(--bs-gray-dark); color: var(--bs-white); }
.text-bg-gray-dark-subtle { background-color: var(--bs-gray-dark-subtle); color: var(--bs-gray-dark-emphasis); }

.text-bg-light {
    color: #000 !important;
    background-color: RGBA(var(--bs-light-rgb), var(--bs-bg-opacity, 1)) !important;
}

.text-bg-primary { background-color: var(--bs-primary); color: var(--bs-white); }
.text-bg-primary-subtle { background-color: var(--bs-primary-subtle); color: var(--bs-primary-emphasis); }

.text-bg-light-primary { background-color: var(--bs-light-primary); color: var(--bs-primary); }
.text-bg-light-primary-subtle { background-color: var(--bs-light-primary-subtle); color: var(--bs-light-primary-emphasis); }

.text-bg-secondary { background-color: var(--bs-secondary); color: var(--bs-white); }
.text-bg-secondary-subtle { background-color: var(--bs-secondary-subtle); color: var(--bs-secondary-emphasis); }

.text-bg-tertiary { background-color: var(--bs-tertiary); color: var(--bs-white); }
.text-bg-tertiary-subtle { background-color: var(--bs-tertiary-subtle); color: var(--bs-tertiary-emphasis); }

.text-bg-success { background-color: var(--bs-success); color: var(--bs-white); }
.text-bg-success-subtle { background-color: var(--bs-success-subtle); color: var(--bs-success-emphasis); }

.text-bg-warning { background-color: var(--bs-warning); color: var(--bs-white); }
.text-bg-warning-subtle { background-color: var(--bs-warning-subtle); color: var(--bs-warning-emphasis); }

.text-bg-danger { background-color: var(--bs-danger); color: var(--bs-white); }
.text-bg-danger-subtle { background-color: var(--bs-danger-subtle); color: var(--bs-danger-emphasis); }

.text-bg-error { background-color: var(--bs-error); color: var(--bs-white); }
.text-bg-error-subtle { background-color: var(--bs-error-subtle); color: var(--bs-error-emphasis); }

/* --------------------------------------------------------
   MISC LAYOUT UTILITIES
   -------------------------------------------------------- */

@media (min-width: 1200px) {
    .pt-xl-164 {
        padding-top: 164px !important;
    }
}

.full-height {
    @media (min-width: 992px) {
        height: 100vh !important;
    }
}

.has-reflection {
    position: relative;
    display: inline-block;
    line-height: 1;
}

.has-reflection::after {
    content: attr(data-text);
    position: absolute;
    top: 90%;
    left: 0;
    width: 100%;
    transform: scaleY(-1);
    opacity: 0.3;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, transparent 75%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, transparent 75%);
    pointer-events: none;
}