/* ==========================================================================
   Custom variables
   ========================================================================== */
:root,
[data-bs-theme="light"] {
    /* Color function concept from: https://frzi.medium.com/less-sass-more-color-mix-or-color-manipulation-with-pure-css-dbf6f244ef29 */
    /* --bs-primary:              #008577;
    --bs-primary-rgb:          0, 133, 119; */
    --bs-primary-dark:         color-mix(in srgb, black 25%, var(--bs-primary)); /* Darken by 25% */
    --bs-primary-light:        color-mix(in srgb, white 25%, var(--bs-primary)); /* Lighten by 25% */
    --bs-primary-bg-subtle:    color-mix(in srgb, white 85%, var(--bs-primary)); /* Lighten by 85% */
    /* --bs-secondary:            #003241;
    --bs-secondary-rgb:        0, 50, 65; */
    --bs-secondary-dark:       color-mix(in srgb, black 25%, var(--bs-secondary)); /* Darken by 25% */
    --bs-secondary-light:      color-mix(in srgb, white 25%, var(--bs-secondary)); /* Lighten by 25% */
    --bs-secondary-bg-subtle:  color-mix(in srgb, white 85%, var(--bs-secondary)); /* Lighten by 85% */
    /* --bs-tertiary:             #01a7b7;
    --bs-tertiary-rgb:         1, 167, 183; */
    --bs-tertiary-dark:        color-mix(in srgb, black 25%, var(--bs-tertiary)); /* Darken by 25% */
    --bs-tertiary-light:       color-mix(in srgb, white 25%, var(--bs-tertiary)); /* Lighten by 25% */
    --bs-tertiary-bg-subtle:   color-mix(in srgb, white 85%, var(--bs-tertiary)); /* Lighten by 85% */

    --bs-link-color:           var(--bs-primary);
    --bs-link-color-rgb:       var(--bs-primary-rgb);
    --bs-link-decoration:      underline;
    --bs-link-hover-color:     var(--bs-primary-dark);
    --bs-link-hover-color-rgb: var(--bs-primary-dark);

    --bs-light:                #f1f2f3;
    --bs-light-rgb:            247, 248, 249;
    --bs-dark:                 #1A1717;
    --bs-dark-rgb:             26, 23, 23;
    --bs-border-color:         var(--bs-gray-300);
    --bs-gradient-primary:     linear-gradient(180deg, var(--bs-primary-light) 0%, var(--bs-primary-dark) 100%);
    --bs-gradient-secondary:   linear-gradient(180deg, var(--bs-secondary-light) 0%, var(--bs-secondary-dark) 100%);
    --bs-body-color:           #333;
    --bs-body-color-rgb:       51, 51, 51;
    --bs-heading-color:        var(--bs-dark);
    --bs-modal-color:          var(--bs-body-color);

    --bs-gray:                 var(--bs-gray-500);
    --bs-gray-dark:            var(--bs-gray-800);
    --bs-gray-100:             #f8f9fa;
    --bs-gray-200:             #e9ecef;
    --bs-gray-300:             #dee2e6;
    --bs-gray-400:             #ced4da;
    --bs-gray-500:             #adb5bd;
    --bs-gray-600:             #6c757d;
    --bs-gray-700:             #495057;
    --bs-gray-800:             #343a40;
    --bs-gray-900:             #212529;

    /* Fonts */
    /* --bs-font-sans-serif:      "Nimbus Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; */
    /* --bs-heading-font:         var(--bs-font-sans-serif); */

    /* Links */
    /* --bs-link-color:           var(--bs-primary);
    --bs-link-hover-color:     var(--bs-primary-rgb); */
    --bs-link-decoration:      underline;

    /* Border Radii */
    /* --bs-border-radius:        0.25rem;
    --bs-border-radius-sm:     0.125rem;
    --bs-border-radius-md:     var(--bs-border-radius);
    --bs-border-radius-lg:     0.5rem;
    --bs-border-radius-xl:     1rem;
    --bs-border-radius-xxl:    2rem;
    --bs-border-radius-2xl:    var(--bs-border-radius-xxl);
    --bs-border-radius-pill:   50rem; */

    /* Focus Color */
    --bs-focus-ring-color:     color-mix(in srgb, white 25%, var(--bs-primary));
    --bs-focus-ring-width:     0.40rem;
    --bs-focus-ring-opacity:   0.25;
    --bs-focus-outline-width:  0.15rem;

    /* Animation Easing */
    /* Cubic bezier easing variables inspired by Google MUI - https://mui.com/material-ui/customization/transitions/#easings */
    --ease-in-out:             cubic-bezier(0.4, 0, 0.2, 1); /* This is the most common easing curve. */
    --ease-out:                cubic-bezier(0.0, 0, 0.2, 1); /* Objects enter the screen at full velocity from off-screen and slowly decelerate to a resting point. */
    --ease-in:                 cubic-bezier(0.4, 0, 1, 1);   /* Objects leave the screen at full velocity. They do not decelerate when off-screen. */
    --ease-sharp:              cubic-bezier(0.4, 0, 0.6, 1); /* The sharp curve is used by objects that may return to the screen at any time. */

    /* Shadows */
    /* Elevation levels inspired by https://shadows.brumm.af/ */
    --bs-box-shadow-xs:        0px 2px 1px -1px rgba(0,0,0,0.2),
                                0px 1px 1px 0px rgba(0,0,0,0.14),
                                0px 1px 3px 0px rgba(0,0,0,0.12);
    --bs-box-shadow-sm:        0px 3px 1px -2px rgba(0,0,0,0.2),
                                0px 2px 2px 0px rgba(0,0,0,0.14),
                                0px 1px 5px 0px rgba(0,0,0,0.12);
    --bs-box-shadow:           0px 1.4px 2.2px rgba(0, 0, 0, 0.024),
                                0px 3.3px 5.3px rgba(0, 0, 0, 0.036),
                                0px 6.3px 10px rgba(0, 0, 0, 0.046),
                                0px 11.2px 17.9px rgba(0, 0, 0, 0.057),
                                0px 20.9px 33.4px rgba(0, 0, 0, 0.071),
                                0px 50px 80px rgba(0, 0, 0, 0.1);
    --bs-box-shadow-lg:        0px 2.2px 2.2px rgba(0, 0, 0, 0.024),
                                0px 5.3px 5.3px rgba(0, 0, 0, 0.036),
                                0px 10px 10px rgba(0, 0, 0, 0.046),
                                0px 17.9px 17.9px rgba(0, 0, 0, 0.057),
                                0px 33.4px 33.4px rgba(0, 0, 0, 0.071),
                                0px 80px 80px rgba(0, 0, 0, 0.1);
    --bs-box-shadow-xl:        0px 2.8px 2.2px rgba(0, 0, 0, 0.024),
                                0px 6.7px 5.3px rgba(0, 0, 0, 0.036),
                                0px 12.5px 10px rgba(0, 0, 0, 0.046),
                                0px 22.3px 17.9px rgba(0, 0, 0, 0.057),
                                0px 41.8px 33.4px rgba(0, 0, 0, 0.071),
                                0px 100px 80px rgba(0, 0, 0, 0.1);
    --bs-box-shadow-center:    0px 0px 20px 0px rgba(86, 92, 104, 0.15),
                                0px 0px 4px 0px rgba(86, 92, 104, 0.10);
}


/* Set custom vars properties */
.shadow-xs {
    box-shadow: var(--bs-box-shadow-xs) !important;
}

.shadow-xl {
    box-shadow: var(--bs-box-shadow-xl) !important;
}

.shadow-center {
    box-shadow: var(--bs-box-shadow-center) !important;
}

.bg-primary {
    background-color: var(--bs-primary) !important;
}

.bg-primary-dark {
    background-color: var(--bs-primary-dark) !important;
}

.bg-primary-light {
    background-color: var(--bs-primary-light) !important;
}

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

.bg-secondary {
    background-color: var(--bs-secondary) !important;
}

.bg-secondary-dark {
    background-color: var(--bs-secondary-dark) !important;
}

.bg-secondary-light {
    background-color: var(--bs-secondary-light) !important;
}

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

.bg-tertiary {
    background-color: var(--bs-tertiary) !important;
}

.bg-tertiary-dark {
    background-color: var(--bs-tertiary-dark) !important;
}

.bg-tertiary-light {
    background-color: var(--bs-tertiary-light) !important;
}

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

.text-tertiary {
    color: var(--bs-tertiary) !important;
}

.bg-gradient,
.bg-gradient-primary {
    background: var(--bs-gradient-primary) !important;
}

.bg-gradient-secondary {
    background: var(--bs-gradient-secondary) !important;
}

/* ==========================================================================
      Misc
      ========================================================================== */
/* Set global focus style */
*:focus-visible {
    outline: var(--bs-focus-outline-width) #fff solid !important;
    outline-offset: 0 !important;
    box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color) !important;
    transition: all 200ms var(--ease-out);
}

/* Set global selection style */
::-moz-selection {
    background: var(--bs-primary);
    color: rgba(255, 255, 255, 0.9);
    text-shadow: none;
}
::selection {
    background: var(--bs-primary);
    color: rgba(255, 255, 255, 0.9);
    text-shadow: none;
}

/* Stagger loading animation effect - (requires js staggeredAnimation function) */
.stagger-menu>* {
    opacity: 0;
    transform: scale(0.95);
    transform-origin: center;
    transition-property: opacity, transform;
    transition-duration: 180ms;
    transition-timing-function: var(--ease-out);
}

.stagger-menu.show>*,
.show>.stagger-menu>* {
    opacity: 1;
    transform: scale(1);
    transition-delay: calc(50ms * var(--i));
}

/* Loading Placeholder */
.placeholder {
    opacity: .25;
    border-radius: var(--bs-border-radius);
}

/* Alpine.js custom styles */
[x-cloak] {
    display: none !important;
}

.spinner-border {
    color: var(--bs-gray-500);
}

/* Custom hover effect for links */
.link-action {
    text-decoration: none;
    padding: .5rem .75rem;
    margin: -.5rem -.75rem;
    border-radius: var(--bs-border-radius);
    position: relative;
    z-index: 1;
}
.link-action::after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        width: 100%;
        height: 100%;
        background-color: var(--bs-light);
        border-radius: var(--bs-border-radius);
        box-shadow: 0 0 0 transparent;
        opacity: 0;
        transform: scale(.90);
        transition: all 200ms var(--ease-out);
    }
.link-action:hover,
    .link-action.active {
        color: var(--bs-link-hover-color);
    }
.link-action:hover::after, .link-action.active::after {
            opacity: 1;
            transform: scale(1);
        }
.link-action.link-action-sm {
        padding: .2rem .3rem;
        margin: -.2rem -.3rem;
        font-size: 0.9rem;
    }
/* Color variants */
.link-action.link-action-primary:after {
        background-color: var(--bs-primary);
    }
.link-action.link-action-secondary:after {
        background-color: var(--bs-secondary);
    }
.link-action.link-action-dark:after {
        background-color: rgba(0, 0, 0, .15);
    }
.link-action.link-action-light:after {
        background-color: rgba(255, 255, 255, .2);
    }

/* Bootstrap icons */
.bi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Adjust containers padding */
.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
@media (min-width: 1200px) {
.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
        padding-left: 2.5rem;
        padding-right: 2.5rem
}
    }

/* ==========================================================================
      Utilities
      ========================================================================== */
.ff-1 {
    font-family: var(--bs-font-sans-serif) !important;
}

.ff-2 {
    font-family: var(--bs-heading-font) !important;
}

.lh-normal {
    line-height: normal !important;
}

.text-xl,
.fs-xl {
    font-size: 1.25rem !important;
}

.text-lg,
.fs-lg {
    font-size: 1.125rem !important;
}

.text-sm,
.fs-sm {
    font-size: 0.9rem !important;
}

.text-xs,
.fs-xs {
    font-size: 0.8rem !important;
}

.fw-300 {
    font-weight: 300 !important;
}

.fw-400 {
    font-weight: 400 !important;
}

.fw-500 {
    font-weight: 500 !important;
}

.fw-600 {
    font-weight: 600 !important;
}

.fw-700 {
    font-weight: 700 !important;
}

.fw-800 {
    font-weight: 800 !important;
}

.fw-900 {
    font-weight: 900 !important;
}

.hidden {
    display: none !important;
}

.scroll-offset,
.scroll-offset-1 {
    scroll-margin-top: 1rem !important;
}

.scroll-offset-2 {
    scroll-margin-top: 2rem !important;
}

.scroll-offset-3 {
    scroll-margin-top: 3rem !important;
}

.bg-contain {
    background-size: contain !important;
}

.bg-cover {
    background-size: cover !important;
}

.flex-1 {
    flex: 1 !important;
}

/* ==========================================================================
      Buttons
      ========================================================================== */
.btn {
    --bs-btn-font-weight: 400;
    --bs-btn-border-radius: var(--bs-border-radius);
    --bs-btn-padding-x: .75rem;
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-border-width: .15rem;
    white-space: nowrap;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-primary-dark);
    --bs-btn-hover-border-color: var(--bs-primary-dark);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-primary-dark);
    --bs-btn-active-border-color: var(--bs-primary-dark);
    --bs-btn-active-shadow: none;
}

.btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-secondary);
    --bs-btn-border-color: var(--bs-secondary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-secondary-dark);
    --bs-btn-hover-border-color: var(--bs-secondary-dark);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-secondary-dark);
    --bs-btn-active-border-color: var(--bs-secondary-dark);
    --bs-btn-active-shadow: none;
}

.btn-tertiary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-tertiary);
    --bs-btn-border-color: var(--bs-tertiary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-tertiary-dark);
    --bs-btn-hover-border-color: var(--bs-tertiary-dark);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-tertiary-dark);
    --bs-btn-active-border-color: var(--bs-tertiary-dark);
    --bs-btn-active-shadow: none;
}

.btn-outline-primary {
    --bs-btn-bg: #fff;
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: var(--bs-primary-dark);
    --bs-btn-hover-bg: var(--bs-light);
    --bs-btn-hover-border-color: var(--bs-primary-dark);
    --bs-btn-active-color: var(--bs-primary-dark);
    --bs-btn-active-bg: var(--bs-light);
    --bs-btn-active-border-color: var(--bs-primary-dark);
    --bs-btn-active-shadow: none;
    --bs-gradient: none;
}

.btn-outline-primary.dropdown-toggle {
        background-color: #fff !important;
        color: var(--bs-dark) !important;
        font-size: 1rem;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        color: var(--bs-dark);
        border-color: var(--bs-border-color);
    }

.btn-outline-primary.dropdown-toggle:hover {
            background-color: var(--bs-light);
            border-color: var(--bs-primary);
        }

.btn.disabled,
.btn:disabled,
fieldset:disabled .btn {
    color: #fff;
    pointer-events: none;
    background-color: #707070;
    border-color: #707070;
    opacity: 1;
}

.btn-light {
    color: var(--bs-primary);
}


.btn-group {
    gap: 0.5rem;
}


.btn-group >.btn {
        flex: 0;
        font-weight: 400;
        color: var(--bs-body-color);
        border: none;
        border-bottom: none;
        border-radius: var(--bs-border-radius) !important;
        background: transparent !important;
        position: relative;
        transition: all 200ms var(--ease-in);
    }


.btn-group >.btn:before {
            content: "";
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
            width: 100%;
            height: 100%;
            background-color: var(--bs-light);
            border-radius: var(--bs-border-radius);
            box-shadow: 0 0 0 transparent;
            opacity: 0;
            transform: scale(.9);
            transition: all 200ms var(--ease-out);
        }


.btn-group >.btn:after {
            content: "";
            display: block;
            position: absolute;
            bottom: .125rem;
            left: 0;
            width: 100%;
            height: .25rem;
            background: var(--bs-primary);
            border-radius: var(--bs-border-radius);
            opacity: 0;
            transform: scale(.85);
            transition: all 200ms var(--ease-out);
        }


.btn-group >.btn.active:after {
                opacity: 1;
                transform: scale(1);
            }


.btn-group >.btn:hover:not(.active):before {
                opacity: 1;
                transform: scale(1);
            }


.btn-group >.btn:active {
            color: var(--bs-body-color) !important;
        }


/* ==========================================================================
      Tables
      ========================================================================== */
.table {
    overflow: hidden;
    border-radius: var(--bs-border-radius);
    box-shadow: inset 0 0 0 1px var(--bs-border-color);
    border-color: var(--bs-border-color);
}
.table > :not(caption)>*>* {
        background: transparent;
        padding: .75rem 1rem;
        border: none;
    }
.table tr {
        border-top: 1px solid var(--bs-border-color);
    }
.table tr:first-of-type {
        border: none;
    }
.table thead,
    .table tbody {
        border-width: 0 !important;
    }
.table thead {
        background: #f1f2f3;
        box-shadow: inset 0 0 0 1px var(--bs-border-color);
        border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
    }
.table tbody {
        border: 1px solid var(--bs-border-color);
    }
.table tbody tr {
        transition: all 180ms ease;
    }
.table tbody tr:hover,
    .table tbody tr:focus {
        background: #f7f8f9;
        box-shadow: inset 0 0 0 1px var(--bs-border-color);
    }
.table tbody tr:last-of-type {
        border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius);
    }


/* ==========================================================================
      Modal
      ========================================================================== */
.modal {
    --bs-modal-color: var(--bs-body-color);
    -webkit-backdrop-filter: blur(0);
            backdrop-filter: blur(0);
    background-color: rgba(0, 0, 0, 0);
    transition: all 200ms var(--ease-out);
}
.modal.fade {
        -webkit-backdrop-filter: blur(4px);
                backdrop-filter: blur(4px);
        background-color: rgba(0, 0, 0, 0.5);
    }
.modal.fade .modal-dialog {
            transform: scale(.95) translateY(-.25rem);
            transform-origin: top center;
            transition: all 200ms var(--ease-out);
            will-change: transform, opacity;
        }
.modal.show .modal-dialog {
        transform: none;
    }

.modal-content {
    border-radius: var(--bs-border-radius);
    box-shadow: var(--bs-box-shadow-xl);
}

.modal-backdrop {
    display: none;
}

/* ==========================================================================
      Dropdown Menu
      ========================================================================== */
.dropdown-menu {
    border: none;
    box-shadow: none;
    min-width: 100%;
    padding: 0;
    border-radius: var(--bs-border-radius-sm);
    box-shadow: var(--bs-box-shadow-lg);
    overflow: hidden;

    /* Handle dropdown animation effect */
    display: block;
    top: 95%;
    left: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    max-height: 0;
    transform: scale(.85) rotateX(-25deg);
    transform-origin: top center;
    transition: all 180ms var(--ease-out);
    will-change: transform, opacity;
}
.dropdown-menu.show {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        max-height: 50vh;
        transform: scale(1) rotateX(0deg);
    }
/* Remove border from last item */
.dropdown-menu li:last-of-type .dropdown-item {
        border-bottom: none;
    }
.dropdown-menu[data-bs-popper] {
        margin: 0;
    }

.nav-item.dropdown {
    position: relative;
    perspective: 1440px;
    z-index: 1;
}

.dropdown-item {
    font-size: 0.85rem;
    padding: .75rem 1rem;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--bs-border-color);
    transition: all 200ms ease;
}

.dropdown-item:hover {
        background-color: var(--bs-light);
        color: var(--bs-dark);
    }

/* Adjust focus to inset due to container overflow */

.dropdown-item:focus-visible {
        box-shadow: inset 0 0 0 0.25rem var(--bs-focus-ring-color) !important;
    }

.dropdown-toggle::after {
    z-index: 1;
}

/* ==========================================================================
      Nav Links
      ========================================================================== */
.nav-item {
    position: relative;
    z-index: 1;
}

.nav-link {
    --bs-navbar-nav-link-padding-x: .7rem;

    display: flex;
    align-items: center;
    padding: .5rem var(--bs-navbar-nav-link-padding-x);
    color: var(--bs-dark);
    font-size: 1rem;
    font-weight: 400;
    border-radius: var(--bs-border-radius-sm);
    position: relative;
    width: 100%;
    text-align: left;
    white-space: normal;
    transition: all 200ms var(--ease-out);
}

.nav-link span {
        z-index: 1;
    }

.nav-link::before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--bs-light);
        border-radius: var(--bs-border-radius-sm);
        opacity: 0;
        z-index: -1;
        transform: scale(.85);
        transition: all 200ms var(--ease-out);
    }

.nav-link::after {
        content: "";
        display: block;
        position: absolute;
        bottom: .125rem;
        left: 0;
        width: 100%;
        height: .25rem;
        background: var(--bs-primary);
        border-radius: var(--bs-border-radius);
        opacity: 0;
        transform: scale(.85);
        transition: all 200ms var(--ease-out);
    }

.nav-link:hover,
    .nav-link:focus,
    .nav-link:focus-visible {
        color: var(--bs-dark);
    }

.nav-link:hover::before, .nav-link:focus::before, .nav-link:focus-visible::before {
            opacity: 1;
            transform: scale(1);
        }

@keyframes fadeInScale {
        from {
            opacity: 0;
            transform: scale(.85);
        }

        to {
            opacity: 1;
            transform: scale(1);
        }
    }

.nav-link.active::before {
            opacity: 0;
        }

.nav-link.active::after {
            opacity: 1;
            transform: scale(1);
            animation: fadeInScale 200ms var(--ease-out);
        }

/* ==========================================================================
    Accordion
   ========================================================================== */
.accordion-container {
    display: flex;
    flex-direction: column;
}

.accordion-toggle-btns.btn-group {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 1.5rem;
    margin-left: auto;
    border: 1px solid var(--bs-border-color);
    padding: .25rem .5rem;

}

.accordion-toggle-btns.btn-group button {
        padding: .5rem 1rem;
    }

.accordion-toggle-btns.btn-group button:focus:after,
    .accordion-toggle-btns.btn-group button:focus-visible:after {
        opacity: 1;
        transform: scale(1);
    }

.accordion-toggle-btns.btn-group button:focus::before,
    .accordion-toggle-btns.btn-group button:active::before {
        opacity: 0 !important;
        transform: scale(.75) !important;
        transition: all 200ms var(--ease-out);
    }

.accordion-toggle-btns.btn-group button:active:after {
        opacity: 1;
        transform: scale(1);
    }

.accordion-button {
    color: var(--bs-dark);
    font-size: 1.15rem;
    transition: all 200ms var(--ease-out);
}

.accordion-button::before {
        content: "";
        display: block;
        position: absolute;
        top: 5%;
        left: .25rem;
        width: .25rem;
        height: 90%;
        background-color: var(--bs-primary);
        border-radius: var(--bs-border-radius);
        opacity: 0;
        transform: scale(.85);
        transition: all 200ms var(--ease-out);
    }

.accordion-button:not(.collapsed) {
        background-color: var(--bs-primary);
        color: #fff;
        box-shadow: none;
    }

.accordion-button:not(.collapsed)::before {
            opacity: 1;
            transform: scale(1);
            background: var(--bs-primary-light);
        }

.accordion-button:not(.collapsed):hover {
            background-color: var(--bs-primary);
            color: #fff;
        }

.accordion-button:not(.collapsed):after {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
        }

.accordion-button:hover {
        background: var(--bs-light);
    }

.accordion-button:hover::before {
            opacity: 1;
            transform: scale(1);
        }

.accordion-button:focus {
        box-shadow: none
    }

/* ==========================================================================
      Tabs
      ========================================================================== */
.nav-tabs {
    border: none;
    margin-bottom: 1rem;
}
.nav-tabs .nav-item {
        margin-inline-end: .5rem;
        margin-bottom: .5rem;
    }
.nav-tabs .nav-link {
        font-size: 1.15rem;
        padding: .5rem .75rem;
        border: none;
        border-radius: var(--bs-border-radius);
    }
.nav-tabs .nav-link::after {
            content: "";
            display: block;
            position: absolute;
            bottom: .125rem;
            left: 0;
            width: 100%;
            height: .25rem;
            background: var(--bs-primary);
            border-radius: var(--bs-border-radius);
            opacity: 0;
            transform: scale(.85);
            transition: all 200ms var(--ease-out);
        }
.nav-tabs .nav-link.active {
            color: var(--bs-primary);
            background: transparent;
        }
.nav-tabs .nav-link.active::before {
                opacity: 0;
                transform: scale(.85);
                background: var(--bs-light);
            }
.nav-tabs .nav-link.active::after {
                opacity: 1;
                transform: scale(1);
            }
.nav-tabs .nav-link.active:hover {
                color: var(--bs-primary);
            }
.nav-tabs .nav-link:hover {
            border: none;
            color: var(--bs-dark);
        }

.tabs-vertical {
    display: flex;
    flex-direction: column;
}

.tabs-vertical .nav-tabs {
        display: flex;
        flex-direction: row;
        border: 0;
    }