/* ================================================
   Masterpage Styles
   Credit: Josh Comeau for this shadow generation tool: https://www.joshwcomeau.com/shadow-palette/
   ================================================ */
/* CSS Vars for the entire application can be defined here.
    Currently just brand colors
*/
:root {
    --amsti-red: rgb(178 41 46);
    --amsti-blue: rgb(0 85 184);
    --amsti-gray: rgb(158 161 162);
}

#siteHeader {
    width: 100%;
    margin: 0 auto;
    /* Transitions when the width of the header is changed. */
    transition: width 0.8s ease;
}

    /* Adds a shadow and changes width when the page is scrolled down. */
    #siteHeader.scrolled {
        box-shadow: 0px 0.5px 0.6px hsl(var(--shadow-color) / 0.34), 0px 0.9px 1px -1.2px hsl(var(--shadow-color) / 0.34), 0px 2.1px 2.4px -2.5px hsl(var(--shadow-color) / 0.34);
        width: 80%;
    }

/*
/ Keep footer at bottom of page when content gets too short.
/ Sourced from MDN Docs: https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Sticky_footers
*/

* {
    box-sizing: inherit;
}

html {
    height: 100%;
    box-sizing: border-box;
}

body {
    min-height: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto;
}

#siteLogo {
    /* Takes the big logo out of the normal flow that way the tiny one can be beneath it*/
    position: absolute;
    visibility: unset;
    /* When transform (scale) is changed, transition*/
    transition: transform 0.2s ease, opacity 0.2s ease, visibility 0.2s ease;
}

/* Initially hide tiny logo */
#siteLogoTiny {
    opacity: 0;
    visibility: hidden;
    /* The scale starts small that way it zooms in when the scale reverts to 1*/
    transform: scale(0.8);
    /* Transition is here for when the main site logo comes back into frame */
    transition: transform 0.2s ease, opacity 0.2s ease, visibility 0.2s ease;
}

/* Change logos when scrolled (helped by JS) */
#siteLogo.scrolled {
    opacity: 0;
    visibility: hidden;
    /* Shrinks down the logo a little for transition. */
    transform: scale(0.25);
}

#siteLogoTiny.scrolled {
    opacity: 1;
    visibility: unset;
    /* Revert scale for zoom in */
    transform: scale(1);
}

/* Remove the animation to avoid vestibular motion triggers. */
@media (prefers-reduced-motion: reduce) {
    #siteHeader.scrolled {
        width: 100%;
        /* !important is used here to override bootstrap classes */
        border-radius: 0 !important;
        border-right-style: none !important;
        border-left-style: none !important;
    }

    /* Disable animation stuff for the logos as well*/
    #siteLogo {
        transition: none;
    }

    #siteLogoTiny {
        transition: none;
    }

    #siteLogo.scrolled {
        transform: none;
    }
}

/* Anything mobile related can go here. */
@media (width < 576px) {
    .lead {
        font-size: unset;
    }
}

/* ================================================
   Catppuccin + Bootstrap 5 Theme
   Light: Latte | Dark: Macchiato
   Requires @catppuccin/palette from jsdelivr
   Description: Catpuccin color palette for light and dark modes, overrides bootstrap defaults. 
   Any RGB values have to be copied from catpuccin's css directly for bootstrap processing.
   ================================================ */
:root, [data-bs-theme=light] {
    /* #region Non-Bootstrap */
    /* Not bootstrap related, but goes well here */
    --shadow-color: 221deg 8% 56%;
    /* #endregion*/
    /* #region Main overrides */
    /* Bootstrap styles that have/can be overwritten */
    --bs-blue: var(--ctp-latte-blue);
    --bs-purple: var(--ctp-latte-mauve);
    --bs-pink: var(--ctp-latte-pink);
    --bs-red: var(--ctp-latte-red);
    --bs-orange: var(--ctp-latte-peach);
    --bs-yellow: var(--ctp-latte-yellow);
    --bs-green: var(--ctp-latte-green);
    --bs-teal: var(--ctp-latte-teal);
    --bs-cyan: var(--ctp-latte-sapphire);
    --bs-primary: var(--ctp-latte-blue);
    --bs-secondary: var(--ctp-latte-text);
    --bs-success: var(--ctp-latte-green);
    --bs-info: var(--ctp-latte-sapphire);
    --bs-warning: var(--ctp-latte-yellow);
    --bs-danger: var(--ctp-latte-red);
    --bs-primary-rgb: 30, 102, 245;
    --bs-secondary-rgb: 76, 79, 105;
    --bs-success-rgb: 64, 160, 43;
    --bs-info-rgb: 32, 159, 181;
    --bs-warning-rgb: 223, 142, 29;
    --bs-danger-rgb: 210, 15, 57;
    --bs-primary-text-emphasis: #062360;
    --bs-secondary-text-emphasis: #292B38;
    --bs-success-text-emphasis: #1D4D14;
    --bs-info-text-emphasis: #092F3A;
    --bs-warning-text-emphasis: #492C09;
    --bs-danger-text-emphasis: #460715;
    --bs-primary-bg-subtle: #C3D8F9;
    --bs-secondary-bg-subtle: #ACADC3;
    --bs-success-bg-subtle: #ABE59E;
    --bs-info-bg-subtle: #56CCE1;
    --bs-warning-bg-subtle: #EDBA73;
    --bs-danger-bg-subtle: #F9BDC8;
    --bs-primary-border-subtle: #9ABAF9;
    --bs-secondary-border-subtle: #9595B2;
    --bs-success-border-subtle: #C6EEBF;
    --bs-info-border-subtle: #2FC1DA;
    --bs-warning-border-subtle: #E9AD58;
    --bs-danger-border-subtle: #F792A8;
    --bs-body-color: var(--ctp-latte-text);
    --bs-body-color-rgb: 76, 79, 105;
    --bs-body-bg: var(--ctp-latte-base);
    --bs-body-bg-rgb: 239, 241, 245;
    --bs-secondary-color: var(--ctp-latte-subtext1);
    --bs-secondary-color-rgb: 92, 95, 119;
    --bs-secondary-bg: var(--ctp-latte-overlay0);
    --bs-secondary-bg-rgb: 156, 160, 176;
    --bs-tertiary-color: var(--ctp-latte-subtext0);
    --bs-tertiary-color-rgb: 108, 111, 133;
    --bs-tertiary-bg: var(--ctp-latte-overlay1);
    --bs-tertiary-bg-rgb: 140, 143, 161;
    --bs-link-color: #155FF4;
    --bs-link-color-rgb: 21, 95, 244;
    --bs-link-hover-color: #0947C3;
    --bs-link-hover-color-rgb: 9, 71, 195;
    --bs-code-color: var(--ctp-latte-pink);
    --bs-border-color: var(--ctp-latte-overlay0);
    --bs-border-color-translucent: rgba(156, 160, 176, 0.175);
    --bs-focus-ring-color: rgb(114 135 253 / 0.25);
    --bs-form-valid-color: var(--ctp-latte-green);
    --bs-form-valid-border-color: var(--ctp-latte-green);
    --bs-form-invalid-color: var(--ctp-latte-red);
    --bs-form-invalid-border-color: var(--ctp-latte-red);
    /* This is for DataTables Bootstrap integration, but same concept applies */
    --dt-row-selected: 16, 92, 244 !important;
    /* #endregion */
    /* #region Buttons */
    & .btn-primary {
        --bs-btn-color: var(--ctp-latte-base);
        --bs-btn-bg: #105CF4;
        --bs-btn-border-color: #105CF4;
        --bs-btn-hover-color: var(--ctp-latte-base);
        --bs-btn-hover-bg: #0A4CD1;
        --bs-btn-hover-border-color: #0947C3;
        --bs-btn-focus-shadow-rgb: 10,78,214;
        --bs-btn-active-color: var(--ctp-latte-base);
        --bs-btn-active-bg: #0947C3;
        --bs-btn-active-border-color: #0842B4;
        --bs-btn-disabled-color: var(--ctp-latte-base);
        --bs-btn-disabled-bg: #105CF4;
        --bs-btn-disabled-border-color: #105CF4;
    }

    & .btn-outline-primary {
        --bs-btn-color: #105CF4;
        --bs-btn-border-color: #105CF4;
        --bs-btn-hover-color: var(--ctp-latte-base);
        --bs-btn-hover-bg: #105CF4;
        --bs-btn-hover-border-color: #105CF4;
        --bs-btn-focus-shadow-rgb: 16,92,244;
        --bs-btn-active-color: var(--ctp-latte-base);
        --bs-btn-active-bg: #105CF4;
        --bs-btn-active-border-color: #105CF4;
        --bs-btn-disabled-color: #105CF4;
        --bs-btn-disabled-border-color: #105CF4;
    }

    & .btn-secondary {
        --bs-btn-color: var(--ctp-latte-base);
        --bs-btn-bg: var(--ctp-latte-text);
        --bs-btn-border-color: var(--ctp-latte-text);
        --bs-btn-hover-color: var(--ctp-latte-base);
        --bs-btn-hover-bg: #3C3D53;
        --bs-btn-hover-border-color: #38394D;
        --bs-btn-focus-shadow-rgb: 94,97,130;
        --bs-btn-active-color: var(--ctp-latte-base);
        --bs-btn-active-bg: #38394D;
        --bs-btn-active-border-color: #3C3D53;
        --bs-btn-disabled-color: var(--ctp-latte-base);
        --bs-btn-disabled-bg: var(--ctp-latte-text);
        --bs-btn-disabled-border-color: var(--ctp-latte-text);
    }

    & .btn-outline-secondary {
        --bs-btn-color: var(--ctp-latte-text);
        --bs-btn-border-color: var(--ctp-latte-text);
        --bs-btn-hover-color: var(--ctp-latte-base);
        --bs-btn-hover-bg: var(--ctp-latte-text);
        --bs-btn-hover-border-color: var(--ctp-latte-text);
        --bs-btn-focus-shadow-rgb: 76,79,105;
        --bs-btn-active-color: var(--ctp-latte-base);
        --bs-btn-active-bg: var(--ctp-latte-text);
        --bs-btn-active-border-color: var(--ctp-latte-text);
        --bs-btn-disabled-color: var(--ctp-latte-text);
        --bs-btn-disabled-border-color: var(--ctp-latte-text);
    }

    & .btn-success {
        --bs-btn-color: var(--ctp-latte-base);
        --bs-btn-bg: #327D21;
        --bs-btn-border-color: #327D21;
        --bs-btn-hover-color: var(--ctp-latte-base);
        --bs-btn-hover-bg: #2A691C;
        --bs-btn-hover-border-color: #27611A;
        --bs-btn-focus-shadow-rgb: 58,145,39;
        --bs-btn-active-color: var(--ctp-latte-base);
        --bs-btn-active-bg: #27611A;
        --bs-btn-active-border-color: #235918;
        --bs-btn-disabled-color: var(--ctp-latte-base);
        --bs-btn-disabled-bg: #327D21;
        --bs-btn-disabled-border-color: #327D21;
    }

    & .btn-outline-success {
        --bs-btn-color: #327D21;
        --bs-btn-border-color: #327D21;
        --bs-btn-hover-color: var(--ctp-latte-base);
        --bs-btn-hover-bg: #327D21;
        --bs-btn-hover-border-color: #327D21;
        --bs-btn-focus-shadow-rgb: 50,125,33;
        --bs-btn-active-color: var(--ctp-latte-base);
        --bs-btn-active-bg: #327D21;
        --bs-btn-active-border-color: #327D21;
        --bs-btn-disabled-color: #327D21;
        --bs-btn-disabled-border-color: #327D21;
    }

    & .btn-danger {
        --bs-btn-color: var(--ctp-latte-base);
        --bs-btn-bg: var(--ctp-latte-red);
        --bs-btn-border-color: var(--ctp-latte-red);
        --bs-btn-hover-color: var(--ctp-latte-base);
        --bs-btn-hover-bg: #B00C30;
        --bs-btn-hover-border-color: #A70C2D;
        --bs-btn-focus-shadow-rgb: 186,13,50;
        --bs-btn-active-color: var(--ctp-latte-base);
        --bs-btn-active-bg: #A70C2D;
        --bs-btn-active-border-color: #990B29;
        --bs-btn-disabled-color: var(--ctp-latte-base);
        --bs-btn-disabled-bg: var(--ctp-latte-red);
        --bs-btn-disabled-border-color: var(--ctp-latte-red);
    }

    & .btn-outline-danger {
        --bs-btn-color: var(--ctp-latte-red);
        --bs-btn-border-color: var(--ctp-latte-red);
        --bs-btn-hover-color: var(--ctp-latte-base);
        --bs-btn-hover-bg: var(--ctp-latte-red);
        --bs-btn-hover-border-color: var(--ctp-latte-red);
        --bs-btn-focus-shadow-rgb: 210,15,57;
        --bs-btn-active-color: var(--ctp-latte-base);
        --bs-btn-active-bg: var(--ctp-latte-red);
        --bs-btn-active-border-color: var(--ctp-latte-red);
        --bs-btn-disabled-color: var(--ctp-latte-red);
        --bs-btn-disabled-border-color: var(--ctp-latte-red);
    }

    & .btn-warning {
        --bs-btn-color: var(--ctp-mocha-crust);
        --bs-btn-bg: var(--ctp-latte-yellow);
        --bs-btn-border-color: var(--ctp-latte-yellow);
        --bs-btn-hover-color: var(--ctp-mocha-crust);
        --bs-btn-hover-bg: #D4871C;
        --bs-btn-hover-border-color: #D98A1C;
        --bs-btn-focus-shadow-rgb: 185,118,24;
        --bs-btn-active-color: var(--ctp-mocha-crust);
        --bs-btn-active-bg: #D4871C;
        --bs-btn-active-border-color: #D98A1C;
        --bs-btn-disabled-color: var(--ctp-mocha-crust);
        --bs-btn-disabled-bg: var(--ctp-latte-yellow);
        --bs-btn-disabled-border-color: var(--ctp-latte-yellow);
    }

    & .btn-outline-warning {
        --bs-btn-color: var(--ctp-latte-yellow);
        --bs-btn-border-color: var(--ctp-latte-yellow);
        --bs-btn-hover-color: var(--ctp-mocha-crust);
        --bs-btn-hover-bg: var(--ctp-latte-yellow);
        --bs-btn-hover-border-color: var(--ctp-latte-yellow);
        --bs-btn-focus-shadow-rgb: 223,142,29;
        --bs-btn-active-color: var(--ctp-mocha-crust);
        --bs-btn-active-bg: var(--ctp-latte-yellow);
        --bs-btn-active-border-color: var(--ctp-latte-yellow);
        --bs-btn-disabled-color: var(--ctp-latte-yellow);
        --bs-btn-disabled-border-color: var(--ctp-latte-yellow);
    }

    & .btn-info {
        --bs-btn-color: var(--ctp-mocha-crust);
        --bs-btn-bg: var(--ctp-latte-sapphire);
        --bs-btn-border-color: var(--ctp-latte-sapphire);
        --bs-btn-hover-color: var(--ctp-mocha-crust);
        --bs-btn-hover-bg: #1F98AD;
        --bs-btn-hover-border-color: #1F9CB2;
        --bs-btn-focus-shadow-rgb: 27,133,152;
        --bs-btn-active-color: var(--ctp-mocha-crust);
        --bs-btn-active-bg: #1E94A9;
        --bs-btn-active-border-color: #1F9CB2;
        --bs-btn-disabled-color: var(--ctp-mocha-crust);
        --bs-btn-disabled-bg: var(--ctp-latte-sapphire);
        --bs-btn-disabled-border-color: var(--ctp-latte-sapphire);
    }

    & .btn-outline-info {
        --bs-btn-color: #0F5661;
        --bs-btn-border-color: var(--ctp-latte-sapphire);
        --bs-btn-hover-color: var(--ctp-mocha-crust);
        --bs-btn-hover-bg: var(--ctp-latte-sapphire);
        --bs-btn-hover-border-color: var(--ctp-latte-sapphire);
        --bs-btn-focus-shadow-rgb: 32,159,181;
        --bs-btn-active-color: var(--ctp-mocha-crust);
        --bs-btn-active-bg: var(--ctp-latte-sapphire);
        --bs-btn-active-border-color: var(--ctp-latte-sapphire);
        --bs-btn-disabled-color: var(--ctp-latte-sapphire);
        --bs-btn-disabled-border-color: var(--ctp-latte-sapphire);
    }
    /* This is for DataTables Bootstrap integration, but same concept applies */
    & .btn-subtle {
        --bs-btn-color: var(--ctp-latte-text);
        --bs-btn-bg: var(--ctp-latte-crust);
        --bs-btn-border-color: var(--ctp-latte-overlay0);
        --bs-btn-hover-color: var(--ctp-latte-text);
        --bs-btn-hover-bg: #D1D5E1;
        --bs-btn-hover-border-color: #D7DBE5;
        --bs-btn-focus-shadow-rgb: 35, 38, 52;
        --bs-btn-active-color: var(--ctp-latte-text);
        --bs-btn-active-bg: #CED2DF;
        --bs-btn-active-border-color: #D7DBE5;
        --bs-btn-disabled-color: var(--ctp-latte-text);
        --bs-btn-disabled-bg: var(--ctp-latte-crust);
        --bs-btn-disabled-border-color: var(--ctp-latte-crust);
        background-color: var(--bs-btn-bg) !important;
        color: var(--bs-btn-color) !important;
    }

        & .btn-subtle:hover {
            color: var(--bs-btn-hover-color) !important;
            background-color: var(--bs-btn-hover-bg) !important;
            border-color: var(--bs-btn-hover-border-color) !important;
        }

        & .btn-subtle:active {
            color: var(--bs-btn-active-color) !important;
            background-color: var(--bs-btn-active-bg) !important;
            border-color: var(--bs-btn-active-border-color) !important;
        }

        & .btn-subtle:focus-visible {
            color: var(--bs-btn-hover-color) !important;
            background-color: var(--bs-btn-hover-bg) !important;
            border-color: var(--bs-btn-hover-border-color) !important;
            outline: 0 !important;
            box-shadow: var(--bs-btn-focus-box-shadow) !important;
        }
    /* #endregion */
    /* #region Cards */
    & .card {
        --bs-card-border-color: var(--bs-border-color-translucent);
        --bs-card-cap-bg: var(--ctp-latte-crust);
        --bs-card-bg: var(--ctp-latte-mantle);
        background-color: var(--bs-card-bg);
        border: var(--bs-card-border-width) solid var(--bs-card-border-color);
    }
    /* #endregion */
    /* #region Forms */
    & .form-control {
        color: var(--bs-body-color);
        background-color: var(--ctp-latte-mantle);
        background-clip: padding-box;
        border: var(--bs-border-width) solid var(--bs-border-color);
        border-radius: var(--bs-border-radius);
        transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    }
        /* Makes placeholder text lighter than normal text */
        & .form-control::placeholder {
            color: var(--ctp-latte-subtext0);
        }

        & .form-control:disabled {
            background-color: var(--bs-secondary-bg);
        }
        /* Changes text color for readability when a form-control is disabled and set to readonly */
        & .form-control[readonly]:disabled {
            color: var(--bs-black);
        }
    /* #endregion */
    /* #region Tables*/
    & .table-light {
        --bs-table-color: var(--ctp-latte-text);
        --bs-table-bg: var(--ctp-latte-crust);
        --bs-table-border-color: var(--ctp-latte-overlay0);
        --bs-table-striped-bg: #D1D5E1;
        --bs-table-active-bg: #C4C9D9A;
        --bs-table-hover-bg: #CAD0DD;
        color: var(--bs-table-color);
        border-color: var(--bs-table-border-color);
    }

    & .table-dark {
        --bs-table-color: var(--ctp-macchiato-text);
        --bs-table-bg: var(--ctp-macchiato-crust);
        --bs-table-border-color: var(--ctp-macchiato-overlay0);
        --bs-table-striped-bg: #26273B;
        --bs-table-active-bg: #30314A;
        --bs-table-hover-bg: #2A2B41;
        color: var(--bs-table-color);
        border-color: var(--bs-table-border-color);
    }
    /* Bootstrap currently does not adapt tables to dark/light mode
        I am implementing that functionality here with the table auto class.
    */
    & .table-auto, & .dt-scroll-body {
        --bs-table-bg: var(--ctp-latte-crust);
        --bs-table-border-color: var(--ctp-latte-overlay0);
        --bs-table-striped-bg: #D1D5E1;
        --bs-table-active-bg: #C4C9D9A;
        --bs-table-hover-bg: #CAD0DD;
        color: var(--bs-table-color);
        border-color: var(--bs-table-border-color);
    }
    /* #endregion */
    /* #region Navbar */
    & .navbar {
        --bs-navbar-color: rgb(76, 79, 105);
        --bs-navbar-hover-color: rgb(30, 102, 245);
        --bs-navbar-disabled-color: rgba(76, 79, 105, 0.5);
        --bs-navbar-active-color: rgb(30, 102, 245);
        --bs-navbar-brand-color: rgb(76, 79, 105);
        --bs-navbar-brand-hover-color: rgb(30, 102, 245);
        --bs-navbar-toggler-border-color: rgb(156, 160, 176);
    }
    /* #endregion */
    /* #region Dropdown */
    & .dropdown-menu {
        --bs-dropdown-link-hover-color: var(--bs-emphasis-color);
    }
    /* #endregion */
}



[data-bs-theme=dark] {
    /* #region Non-Bootstrap */
    /* Not bootstrap related, but goes well here */
    --shadow-color: 232deg 35% 8%;
    /* #endregion*/
    /* #region Main overrides */
    /* Bootstrap styles that have/can be overwritten */
    --bs-blue: var(--ctp-macchiato-blue);
    --bs-purple: var(--ctp-macchiato-mauve);
    --bs-pink: var(--ctp-macchiato-pink);
    --bs-red: var(--ctp-macchiato-red);
    --bs-orange: var(--ctp-macchiato-peach);
    --bs-yellow: var(--ctp-macchiato-yellow);
    --bs-green: var(--ctp-macchiato-green);
    --bs-teal: var(--ctp-macchiato-teal);
    --bs-cyan: var(--ctp-macchiato-sapphire);
    --bs-primary: var(--ctp-macchiato-blue);
    --bs-secondary: var(--ctp-macchiato-surface1);
    --bs-success: var(--ctp-macchiato-green);
    --bs-info: var(--ctp-macchiato-sapphire);
    --bs-warning: var(--ctp-macchiato-yellow);
    --bs-danger: var(--ctp-macchiato-red);
    --bs-primary-rgb: 138, 173, 244;
    --bs-secondary-rgb: 73, 77, 100;
    --bs-success-rgb: 166, 218, 149;
    --bs-info-rgb: 125, 196, 228;
    --bs-warning-rgb: 238, 212, 159;
    --bs-danger-rgb: 237, 135, 150;
    --bs-body-color: var(--ctp-macchiato-text);
    --bs-body-color-rgb: 202, 211, 245;
    --bs-body-bg: var(--ctp-macchiato-base);
    --bs-body-bg-rgb: 36, 39, 58;
    --bs-secondary-color: var(--ctp-macchiato-subtext1);
    --bs-secondary-color-rgb: 184, 192, 224;
    --bs-secondary-bg: var(--ctp-macchiato-overlay0);
    --bs-secondary-bg-rgb: 110, 115, 141;
    --bs-tertiary-color: var(--ctp-macchiato-subtext0);
    --bs-tertiary-color-rgb: 165, 173, 203;
    --bs-tertiary-bg: var(--ctp-macchiato-overlay1);
    --bs-tertiary-bg-rgb: 128, 135, 162;
    --bs-primary-text-emphasis: #DFE9FB;
    --bs-secondary-text-emphasis: #777D9C;
    --bs-success-text-emphasis: #EBF7E8;
    --bs-info-text-emphasis: #AAD7EE;
    --bs-warning-text-emphasis: #F8EACE;
    --bs-danger-text-emphasis: #F9D2D7;
    --bs-primary-bg-subtle: #1041A2;
    --bs-secondary-bg-subtle: #0E0E11;
    --bs-success-bg-subtle: #356A25;
    --bs-info-bg-subtle: #0A2A38;
    --bs-warning-bg-subtle: #412D0B;
    --bs-danger-bg-subtle: #841525;
    --bs-primary-border-subtle: #2E6DEA;
    --bs-secondary-border-subtle: #1B1C23;
    --bs-success-border-subtle: #509F38;
    --bs-info-border-subtle: #2178A1;
    --bs-warning-border-subtle: #A87A1F;
    --bs-danger-border-subtle: #D4213C;
    --bs-link-color: var(--ctp-macchiato-blue);
    --bs-link-hover-color: #A5C1F8;
    --bs-link-color-rgb: 138, 173, 244;
    --bs-link-hover-color-rgb: 165, 193, 248;
    --bs-code-color: var(--ctp-macchiato-pink);
    --bs-border-color: var(--ctp-macchiato-overlay0);
    --bs-border-color-translucent: rgba(110, 115, 141, 0.15);
    --bs-form-valid-color: var(--ctp-macchiato-green);
    --bs-form-valid-border-color: var(--ctp-macchiato-green);
    --bs-form-invalid-color: var(--ctp-macchiato-red);
    --bs-form-invalid-border-color: var(--ctp-macchiato-red);
    /* This is for DataTables Bootstrap integration, but same concept applies */
    --dt-row-selected: 138, 173, 244 !important;
    --dt-row-selected-text: 36, 39, 58 !important;
    /* #endregion */
    /* #region Buttons */
    & .btn-primary {
        --bs-btn-color: var(--ctp-macchiato-base);
        --bs-btn-bg: var(--ctp-macchiato-blue);
        --bs-btn-border-color: var(--ctp-macchiato-blue);
        --bs-btn-hover-color: var(--ctp-macchiato-base);
        --bs-btn-hover-bg: #6694F0;
        --bs-btn-hover-border-color: #5D8DEF;
        --bs-btn-focus-shadow-rgb: 111,154,241;
        --bs-btn-active-color: var(--ctp-macchiato-base);
        --bs-btn-active-bg: #5D8DEF;
        --bs-btn-active-border-color: #4F84EE;
        --bs-btn-disabled-color: var(--ctp-macchiato-base);
        --bs-btn-disabled-bg: var(--ctp-macchiato-blue);
        --bs-btn-disabled-border-color: var(--ctp-macchiato-blue);
    }

    & .btn-outline-primary {
        --bs-btn-color: var(--ctp-macchiato-blue);
        --bs-btn-border-color: var(--ctp-macchiato-blue);
        --bs-btn-hover-color: var(--ctp-macchiato-base);
        --bs-btn-hover-bg: var(--ctp-macchiato-blue);
        --bs-btn-hover-border-color: var(--ctp-macchiato-blue);
        --bs-btn-focus-shadow-rgb: 138,173,244;
        --bs-btn-active-color: var(--ctp-macchiato-base);
        --bs-btn-active-bg: var(--ctp-macchiato-blue);
        --bs-btn-active-border-color: var(--ctp-macchiato-blue);
        --bs-btn-disabled-color: var(--ctp-macchiato-blue);
        --bs-btn-disabled-border-color: var(--ctp-macchiato-blue);
    }

    & .btn-secondary {
        --bs-btn-color: var(--ctp-macchiato-text);
        --bs-btn-bg: var(--ctp-macchiato-surface1);
        --bs-btn-border-color: var(--ctp-macchiato-surface1);
        --bs-btn-hover-color: var(--ctp-macchiato-text);
        --bs-btn-hover-bg: #383B4D;
        --bs-btn-hover-border-color: #333647;
        --bs-btn-focus-shadow-rgb: 90,95,124;
        --bs-btn-active-color: var(--ctp-macchiato-text);
        --bs-btn-active-bg: #333647;
        --bs-btn-active-border-color: #383B4D;
        --bs-btn-disabled-color: var(--ctp-macchiato-text);
        --bs-btn-disabled-bg: var(--ctp-macchiato-surface1);
        --bs-btn-disabled-border-color: var(--ctp-macchiato-surface1);
    }

    & .btn-outline-secondary {
        --bs-btn-color: var(--ctp-macchiato-surface1);
        --bs-btn-border-color: var(--ctp-macchiato-surface1);
        --bs-btn-hover-color: var(--ctp-macchiato-text);
        --bs-btn-hover-bg: var(--ctp-macchiato-surface1);
        --bs-btn-hover-border-color: var(--ctp-macchiato-surface1);
        --bs-btn-focus-shadow-rgb: 73,77,100;
        --bs-btn-active-color: var(--ctp-macchiato-text);
        --bs-btn-active-bg: var(--ctp-macchiato-surface1);
        --bs-btn-active-border-color: var(--ctp-macchiato-surface1);
        --bs-btn-disabled-color: var(--ctp-macchiato-surface1);
        --bs-btn-disabled-border-color: var(--ctp-macchiato-surface1);
    }

    & .btn-success {
        --bs-btn-color: var(--ctp-macchiato-base);
        --bs-btn-bg: var(--ctp-macchiato-green);
        --bs-btn-border-color: var(--ctp-macchiato-green);
        --bs-btn-hover-color: var(--ctp-macchiato-base);
        --bs-btn-hover-bg: #75C65D;
        --bs-btn-hover-border-color: #62BE46;
        --bs-btn-focus-shadow-rgb: 120,199,96;
        --bs-btn-active-color: var(--ctp-macchiato-base);
        --bs-btn-active-bg: #62BE46;
        --bs-btn-active-border-color: #5BB540;
        --bs-btn-disabled-color: var(--ctp-macchiato-base);
        --bs-btn-disabled-bg: var(--ctp-macchiato-green);
        --bs-btn-disabled-border-color: var(--ctp-macchiato-green);
    }

    & .btn-outline-success {
        --bs-btn-color: var(--ctp-macchiato-green);
        --bs-btn-border-color: var(--ctp-macchiato-green);
        --bs-btn-hover-color: var(--ctp-macchiato-base);
        --bs-btn-hover-bg: var(--ctp-macchiato-green);
        --bs-btn-hover-border-color: var(--ctp-macchiato-green);
        --bs-btn-focus-shadow-rgb: 166,218,149;
        --bs-btn-active-color: var(--ctp-macchiato-base);
        --bs-btn-active-bg: var(--ctp-macchiato-green);
        --bs-btn-active-border-color: var(--ctp-macchiato-green);
        --bs-btn-disabled-color: var(--ctp-macchiato-green);
        --bs-btn-disabled-border-color: var(--ctp-macchiato-green);
    }

    & .btn-danger {
        --bs-btn-color: var(--ctp-macchiato-base);
        --bs-btn-bg: var(--ctp-macchiato-red);
        --bs-btn-border-color: var(--ctp-macchiato-red);
        --bs-btn-hover-color: var(--ctp-macchiato-base);
        --bs-btn-hover-bg: #E76578;
        --bs-btn-hover-border-color: #E5576D;
        --bs-btn-focus-shadow-rgb: 232,109,128;
        --bs-btn-active-color: var(--ctp-macchiato-base);
        --bs-btn-active-bg: #E5576D;
        --bs-btn-active-border-color: #E34A61;
        --bs-btn-disabled-color: var(--ctp-macchiato-base);
        --bs-btn-disabled-bg: var(--ctp-macchiato-red);
        --bs-btn-disabled-border-color: var(--ctp-macchiato-red);
    }

    & .btn-outline-danger {
        --bs-btn-color: var(--ctp-macchiato-red);
        --bs-btn-border-color: var(--ctp-macchiato-red);
        --bs-btn-hover-color: var(--ctp-macchiato-base);
        --bs-btn-hover-bg: var(--ctp-macchiato-red);
        --bs-btn-hover-border-color: var(--ctp-macchiato-red);
        --bs-btn-focus-shadow-rgb: 237,135,150;
        --bs-btn-active-color: var(--ctp-macchiato-base);
        --bs-btn-active-bg: var(--ctp-macchiato-red);
        --bs-btn-active-border-color: var(--ctp-macchiato-red);
        --bs-btn-disabled-color: var(--ctp-macchiato-red);
        --bs-btn-disabled-border-color: var(--ctp-macchiato-red);
    }

    & .btn-warning {
        --bs-btn-color: var(--ctp-macchiato-base);
        --bs-btn-bg: var(--ctp-macchiato-yellow);
        --bs-btn-border-color: var(--ctp-macchiato-yellow);
        --bs-btn-hover-color: var(--ctp-macchiato-base);
        --bs-btn-hover-bg: #EAC886;
        --bs-btn-hover-border-color: #ECCE93;
        --bs-btn-focus-shadow-rgb: 224,173,72;
        --bs-btn-active-color: var(--ctp-macchiato-base);
        --bs-btn-active-bg: #E8C887;
        --bs-btn-active-border-color: #EBCE94;
        --bs-btn-disabled-color: var(--ctp-macchiato-base);
        --bs-btn-disabled-bg: var(--ctp-macchiato-yellow);
        --bs-btn-disabled-border-color: var(--ctp-macchiato-yellow);
    }

    & .btn-outline-warning {
        --bs-btn-color: var(--ctp-macchiato-yellow);
        --bs-btn-border-color: var(--ctp-macchiato-yellow);
        --bs-btn-hover-color: var(--ctp-macchiato-base);
        --bs-btn-hover-bg: var(--ctp-macchiato-yellow);
        --bs-btn-hover-border-color: var(--ctp-macchiato-yellow);
        --bs-btn-focus-shadow-rgb: 238,212,159;
        --bs-btn-active-color: var(--ctp-macchiato-base);
        --bs-btn-active-bg: var(--ctp-macchiato-yellow);
        --bs-btn-active-border-color: var(--ctp-macchiato-yellow);
        --bs-btn-disabled-color: var(--ctp-macchiato-yellow);
        --bs-btn-disabled-border-color: var(--ctp-macchiato-yellow);
    }

    & .btn-info {
        --bs-btn-color: var(--ctp-macchiato-base);
        --bs-btn-bg: var(--ctp-macchiato-sapphire);
        --bs-btn-border-color: var(--ctp-macchiato-sapphire);
        --bs-btn-hover-color: var(--ctp-macchiato-base);
        --bs-btn-hover-bg: #6FBDE2;
        --bs-btn-hover-border-color: #78C1E3;
        --bs-btn-focus-shadow-rgb: 69,170,217;
        --bs-btn-active-color: var(--ctp-macchiato-base);
        --bs-btn-active-bg: #67B9E0;
        --bs-btn-active-border-color: #78C1E3;
        --bs-btn-disabled-color: var(--ctp-macchiato-base);
        --bs-btn-disabled-bg: var(--ctp-macchiato-sapphire);
        --bs-btn-disabled-border-color: var(--ctp-macchiato-sapphire);
    }

    & .btn-outline-info {
        --bs-btn-color: var(--ctp-macchiato-sapphire);
        --bs-btn-border-color: var(--ctp-macchiato-sapphire);
        --bs-btn-hover-color: var(--ctp-macchiato-base);
        --bs-btn-hover-bg: var(--ctp-macchiato-sapphire);
        --bs-btn-hover-border-color: var(--ctp-macchiato-sapphire);
        --bs-btn-focus-shadow-rgb: 125,196,228;
        --bs-btn-active-color: var(--ctp-macchiato-base);
        --bs-btn-active-bg: var(--ctp-macchiato-sapphire);
        --bs-btn-active-border-color: var(--ctp-macchiato-sapphire);
        --bs-btn-disabled-color: var(--ctp-macchiato-sapphire);
        --bs-btn-disabled-border-color: var(--ctp-macchiato-sapphire);
    }
    /* This is for DataTables Bootstrap integration, but same concept applies */
    & .btn-subtle {
        --bs-btn-color: var(--ctp-macchiato-text);
        --bs-btn-bg: var(--ctp-macchiato-crust);
        --bs-btn-border-color: var(--ctp-macchiato-overlay0);
        --bs-btn-hover-color: var(--ctp-macchiato-text);
        --bs-btn-hover-bg: #0E0E16;
        --bs-btn-hover-border-color: #14141F;
        --bs-btn-focus-shadow-rgb: 24, 25, 38;
        --bs-btn-active-color: var(--ctp-macchiato-text);
        --bs-btn-active-bg: #0A0A10;
        --bs-btn-active-border-color: #14151F;
        --bs-btn-disabled-color: var(--ctp-macchiato-text);
        --bs-btn-disabled-bg: var(--ctp-macchiato-crust);
        --bs-btn-disabled-border-color: var(--ctp-macchiato-crust);
        background-color: var(--bs-btn-bg) !important;
        color: var(--bs-btn-color) !important;
    }

        & .btn-subtle:hover {
            color: var(--bs-btn-hover-color) !important;
            background-color: var(--bs-btn-hover-bg) !important;
            border-color: var(--bs-btn-hover-border-color) !important;
        }

        & .btn-subtle:active {
            color: var(--bs-btn-active-color) !important;
            background-color: var(--bs-btn-active-bg) !important;
            border-color: var(--bs-btn-active-border-color) !important;
        }

        & .btn-subtle:focus-visible {
            color: var(--bs-btn-hover-color) !important;
            background-color: var(--bs-btn-hover-bg) !important;
            border-color: var(--bs-btn-hover-border-color) !important;
            outline: 0 !important;
            box-shadow: var(--bs-btn-focus-box-shadow) !important;
        }
    /* #endregion */
    /* #region Cards */
    & .card {
        --bs-card-border-color: var(--bs-border-color-translucent);
        --bs-card-cap-bg: var(--ctp-macchiato-crust);
        --bs-card-bg: var(--ctp-macchiato-mantle);
        background-color: var(--bs-card-bg);
        border: var(--bs-card-border-width) solid var(--bs-card-border-color);
    }
    /* #endregion */
    /* #region Forms */
    & .form-control {
        color: var(--bs-body-color);
        background-color: var(--ctp-macchiato-mantle);
        background-clip: padding-box;
        border: var(--bs-border-width) solid var(--bs-border-color);
        border-radius: var(--bs-border-radius);
        transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    }
        /* Makes placeholder text darker than normal text */
        & .form-control::placeholder {
            color: var(--ctp-macchiato-subtext0);
        }

        & .form-control:disabled {
            background-color: var(--bs-secondary-bg);
        }
        /* Changes text color for readability when a form-control is disabled and set to readonly */
        & .form-control[readonly]:disabled {
            color: var(--bs-white);
        }
    /* #endregion */
    /* #region Tables */
    /* Bootstrap currently does not adapt tables to dark/light mode
        I am going to attempt to replicate that functionality here with the table auto class.
    */
    & .table-auto, .dt-scroll-body {
        --bs-table-bg: var(--ctp-macchiato-crust);
        --bs-table-border-color: var(--ctp-macchiato-overlay0);
        --bs-table-striped-bg: #26273B;
        --bs-table-active-bg: #30314A;
        --bs-table-hover-bg: #2A2B41;
        color: var(--bs-table-color);
        border-color: var(--bs-table-border-color);
    }
    /* #endregion */
    /* #region Navbar */
    .navbar {
        --bs-navbar-color: rgb(202, 211, 245);
        --bs-navbar-hover-color: rgb(138, 173, 244);
        --bs-navbar-disabled-color: rgba(202, 211, 245, 0.5);
        --bs-navbar-active-color: rgb(138, 173, 244);
        --bs-navbar-brand-color: rgb(202, 211, 245);
        --bs-navbar-brand-hover-color: rgb(138, 173, 244);
        --bs-navbar-toggler-border-color: rgb(110, 115, 141);
    }
    /* #endregion */
}