/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification\
for details on configuring this project to bundle and minify static web assets. */

/*------------------------------------------------------------------
Table of Contents

+ Root
    - Constants
    - Variables
+ Fonts
    - Blender
    - Cerebri Sans Pro
+ Bootstrap Customization
+ Body
    - Body Container
+ Typography
    - Icons
+ Navbar
+ Sidebar
    - Footer
+ Margins
+ Padding
    - Table Cell Padding
    - Card Padding
+ Logo
+ Toast
    - Header
    - Body
+ Alerts
+ Modals
    - Container Modal
    - Card Modal
    - Options + Filters Popups
        - Options Popup Animations
        - Filters Popup Animations
+ Scrollbars
+ Buttons
    - Accept
    - Button Group
        - Main Button
        - Secondary Button
        - Table Cell
            - Main Button
            - Secondary Button
    - Danger
    - Dropdown + Popup
        - Edit Option
        - Danger Option
        - Accept Option
    - Edit
    - Icon
        - Disabled
    - Important
    - Inverted
    - Invisible
    - Large
    - Small
+ Dropdown Menus
+ Collapsible Rows
+ Forms
    - Disabled Form
    - Form with Info
    - Buttons
    - Custom Switches
    - Disabled
    - File Drops
    - Required Labels
    - Select Multiple
    - Spans
+ Tables
    - Clickable + Selectable Tables
    - Table Row Collapse
+ Cards
    - Card Header
        - Header Forms
	    - Large Header Input
        - Buttons
    - Card Tabs
    - Card Body
    - Chart Cards
    - Card in Card
    - Canvas Cards
    - Detail Cards
    - Quill Cards
    - Stat Cards
    - Table Cards
        - Table Y Scroll
        - Overflowing
    - Transition Cards
+ Browser Alert
+ Cookie Consent
+ Activate Inputs
+ Quill Editor
+ Select2
+ Miscellaneous
    - Cursor
    - Height
    - Invisible Selects
    - Horizontal Rule
    - Media
    - Width
    - Wrap
+ Elm stuff
-------------------------------------------------------------------*/

/* Root */
:root {
    /* Root: Constants */
    --main-bg-color: #fcfdfe;
    --main-text-color: #212529;
    --disabled-text-color: #b7bbbf;

    --blue-accent-color: #2c7be5;
    --light-muted-blue-accent-color: #edf2f9;
    --muted-blue-accent-color: #6e84a3;

    --green-accent-color: #28a745;
    --green-accent-color-2: #f3fcf5;
    --red-accent-color: #dc3545;
    --white-accent-color: #fff;
    --yellow-accent-color: #ffc107;
    --admin-accent-color: #f08;

    --main-border-radius: 5px;
    --main-font-size: 0.9rem;
    --main-letter-spacing: 0.01rem;

    /* Root: Variables */
    --toast-width: 0px;
    --filters-popup-height: calc(100% - 213px);
    --options-popup-height: calc(100% - (1.5rem + 32px));
}


/* Fonts */
/* Fonts: Blender */
@font-face {
    font-family: Blender-Medium;
    src: url("../fonts/Blender/EOT/Blender-Medium.eot");
    src: url("../fonts/Blender/EOT/Blender-Medium.eot?#iefix") format("embedded-opentype"),
         url("../fonts/Blender/TTF/Blender-Medium.ttf") format("truetype");
}
.blender { font-family: Blender-Medium; }

/* Fonts: Cerebri Sans Pro */
@font-face {
    font-family: CerebriSansPro-Regular;
    src: url("../fonts/CerebriSansPro/EOT/CerebriSansPro-Regular.eot");
    src: url("../fonts/CerebriSansPro/EOT/CerebriSansPro-Regular.eot?#iefix") format("embedded-opentype"),
         url("../fonts/CerebriSansPro/TTF/CerebriSansPro-Regular.ttf") format("truetype"),
         url("../fonts/CerebriSansPro/OTF/CerebriSansPro-Regular.otf") format("opentype");
}
.cerebri-sans-pro { font-family: CerebriSansPro-Regular; }

@font-face {
    font-family: CerebriSansPro-Bold;
    src: url("../fonts/CerebriSansPro/EOT/CerebriSansPro-Bold.eot");
    src: url("../fonts/CerebriSansPro/EOT/CerebriSansPro-Bold.eot?#iefix") format("embedded-opentype"),
         url("../fonts/CerebriSansPro/TTF/CerebriSansPro-Bold.ttf") format("truetype"),
         url("../fonts/CerebriSansPro/OTF/CerebriSansPro-Bold.otf") format("opentype");
}
.cerebri-sans-pro-bold { font-family: CerebriSansPro-Bold; }


/* Bootstrap Customization */
.container-fluid { padding: 0; }


/* Body */
body {
    background-color: var(--main-bg-color);
    color: var(--main-text-color);
    font-family: CerebriSansPro-Regular;
}

    /* Body: Body Container */
    body .body-container { min-height: 100vh; }

@media screen and (min-width: 1200px) {
    .body-container {
        height: 100vh;
        overflow-y: auto;
    }
}
    .body-container .body-content { padding: 68px 25px 10px 25px; }

    @media screen and (min-width: 1200px) {
        .body-container .body-content.logged-in { padding-top: 25px; }
        .body-container .body-content.logged-out { padding-top: 94px; }
    }


/* Typography */
h1, h2, h3, h4, h5, h6, p, ul, ol, label, span, i, code { margin: 0; }

h2 { font-size: 1.8rem; }
h4 { font-size: 1.3rem; }
h5, h5 > span { font-size: 1.15rem; }

h6,
h6 ul,
h6 ol,
h6 li,
h6 span,
h6 i,
h6 code {
    font-size: 0.75rem;
    letter-spacing: var(--main-letter-spacing);
}

p, ul, ol, li, label, span, i, code {
    font-size: var(--main-font-size);
    letter-spacing: var(--main-letter-spacing);
}

a {
    color: var(--muted-blue-accent-color) !important;
    transition: ease 0.2s;
}
    a:hover {
        color: var(--blue-accent-color) !important;
        text-decoration: none;
    }

.blue { color: var(--blue-accent-color); }

/* Typography: Icons */
.sm-icon,
.md-icon,
.lg-icon {
    vertical-align: middle;
}

.xs-icon {
    font-size: 0.7rem;
    line-height: 0.7rem;
}

.sm-icon {
    font-size: 1rem;
    line-height: 1rem;
}

.md-icon {
    font-size: 1.2rem;
    line-height: 1.5rem;
}

.lg-icon { font-size: 1.5rem !important; }

.xl-icon {
    display: block;
    font-size: 7rem;
    text-align: center;
}

@media screen and (min-width: 992px) {
    .xl-icon { font-size: 6rem; }
}


/* Navbar */
.navbar {
    background-color: var(--main-bg-color);
    box-shadow: 0 0.75rem 1.5rem rgba(18, 38, 63, 0.03);
    padding: 7.5px 15px;
    position: fixed;
    width: 100%;
    z-index: 3;
}

@media screen and (min-width: 1200px) {
    .navbar { padding: 0 11px; }
}

.navbar .nav-link {
    cursor: pointer;
    padding: 10px 25px;
    transition: ease 0.2s;
    --blue-accent-color: #8114ED;
}
.navbar .nav-link:hover, .navbar .nav-link.active:hover {
    background-color: var(--blue-accent-color);
    color: var(--white-accent-color);
}

.navbar .nav-link i { line-height: calc(1.75rem*1.2); }

.navbar .nav-link.active {
    // --main-bg-color: #fcfdfe;
    //--blue-accent-color: pink;
    color: var(--blue-accent-color)
}

/* Sidebar */
.sidebar {
    background-color: var(--main-bg-color);
    border-right: 1px solid var(--light-muted-blue-accent-color);
    height: 100vh;
    left: -100%;
    overflow-y: auto;
    padding: 30px 0 123px 0 !important;
    position: fixed;
    top: 0;
    z-index: 4;
}

@media screen and (min-width: 1200px) {
    .sidebar { position: static; }
        .sidebar.logged-out { display: none; }
}

.sidebar.show { left: 0; }

.sidebar .icon-btn {
    position: absolute;
    right: 15px;
    top: 10px;
}

.sidebar h1 {
    font-size: 2.2rem;
    padding-left: 25px;
}

@media screen and (min-width: 1200px) {
    .sidebar h1 {
        font-size: 2.5rem;
        padding: 0;
        text-align: center;
    }
}

.sidebar .sidebar-links hr {
    margin-left: 25px;
    margin-right: 25px;
}

.sidebar .sidebar-links a { color: var(--main-text-color) !important; }
    .sidebar .sidebar-links a:hover { color: var(--blue-accent-color) !important; }

.sidebar .sidebar-links a .row i,
.sidebar-footer .footer-collapse a .row i {
    color: var(--muted-blue-accent-color);
    font-size: 1rem;
    line-height: calc(var(--main-font-size)*1.5);
    transition: ease 0.2s;
}
    .sidebar .sidebar-links a:hover .row i { color: var(--blue-accent-color) !important; }

.sidebar .sidebar-links .row {
    margin: 0.75rem 0;
    padding: 0 25px;
}

.sidebar .home-link {
    padding: 0 25px;
    margin-bottom: 50px;
    letter-spacing: 1px;
}

.sidebar .sidebar-links .row.active {
    border-left: 3px solid var(--blue-accent-color);
    color: var(--blue-accent-color);
    padding-left: 22px;
}
    .sidebar .sidebar-links .row.active i { color: var(--blue-accent-color); }

.sidebar .sidebar-links .row.collapsible-row {
    background-color: var(--main-bg-color);
    color: var(--main-text-color);
    margin-bottom: 0;
    transition: ease 0.2s;
}
    .sidebar .sidebar-links .row.collapsible-row:hover { color: var(--blue-accent-color); }

/* Sidebar: Footer */
.sidebar-footer {
    bottom: 0;
    left: -100%;
    position: fixed;
    transition: ease 1s;
    z-index: 4;
}

@media screen and (min-width: 1200px) {
    .sidebar-footer { left: 0; }
}

.sidebar-footer.show { left: 0; }

.sidebar-footer .footer-collapse,
.sidebar-footer .footer-static {
    background-color: var(--main-bg-color);
    border-top: 1px solid var(--light-muted-blue-accent-color);
    border-right: 1px solid var(--light-muted-blue-accent-color);
    padding: 15px 15px 15px 20px;
    position: relative;
}

.sidebar-footer .footer-collapse {
    position: absolute;
    top: 0;
    transition: ease 0.5s;
}

.sidebar-footer .footer-collapse.show { top: calc((31px + (1.5*0.875rem))*-1); }
    .sidebar-footer .footer-collapse a:hover { cursor: pointer; }

        .sidebar-footer .footer-collapse a p {
            color: var(--main-text-color);
            line-height: 1.5;
            transition: ease 0.2s;
        }

        .sidebar-footer .footer-collapse a:hover i,
        .sidebar-footer .footer-collapse a:hover p {
            color: var(--blue-accent-color);
        }

.sidebar-footer .footer-static .row {
    cursor: pointer;
    transition: ease 0.2s;
}
    .sidebar-footer .footer-static .row:hover { color: var(--blue-accent-color); }

.sidebar-footer .footer-static .img-container { max-height: 2.5rem; }


/* Margins */
.no-margin { margin: 0 !important; }

.margin-center {
    margin-left: auto !important;
    margin-right: auto !important;
}

.negative-margin-bottom { margin-bottom: -15px !important; }

.xs-margin-top { margin-top: 5px !important; }
.xs-margin-bottom { margin-bottom: 5px !important; }
.xs-margin-left { margin-left: 5px !important; }
.xs-margin-right { margin-right: 5px !important; }

.sm-margin-top { margin-top: 10px !important; }
.sm-margin-bottom { margin-bottom: 10px !important; }
.sm-margin-left { margin-left: 10px !important; }
.sm-margin-right { margin-right: 10px !important; }

.margin-top { margin-top: 15px !important; }
.margin-bottom { margin-bottom: 15px !important; }
.margin-right { margin-right: 15px !important; }
.margin-left { margin-left: 15px !important; }

.md-margin-top { margin-top: 20px !important; }
.md-margin-bottom { margin-bottom: 20px !important; }
.md-margin-right { margin-right: 20px !important; }
.md-margin-left { margin-left: 20px !important; }

.lg-margin-top { margin-top: 25px !important; }
.lg-margin-bottom { margin-bottom: 25px !important; }
.lg-margin-left { margin-left: 25px !important; }
.lg-margin-right { margin-right: 25px !important; }


/* Padding */
.no-padding { padding: 0 !important; }

.sm-pad-top { padding-top: 10px !important; }
.sm-pad-bottom { padding-bottom: 10px !important; }
.sm-pad-left { padding-left: 10px !important; }
.sm-pad-right { padding-right: 10px !important; }

.pad-top { padding-top: 15px !important; }
.pad-bottom { padding-bottom: 15px !important; }
.pad-left { padding-left: 15px !important; }
.pad-right { padding-right: 15px !important; }
.pad-around { padding: 15px !important; }

/* Padding: Table Cell Padding */
td.sm-pad-top { padding-top: 0.6rem !important; }
td.sm-pad-bottom { padding-bottom: 0.6rem !important; }
td.sm-pad-left { padding-left: 0.6rem !important; }
td.sm-pad-right { padding-right: 0.6rem !important; }

td.lg-pad-top { padding-top: 0.9rem !important; }
td.lg-pad-bottom { padding-bottom: 0.9rem !important; }
td.lg-pad-left { padding-left: 0.9rem !important; }
td.lg-pad-right { padding-right: 0.9rem !important; }

/* Padding: Card Padding */
@media screen and (max-width: 575px) {
    .card-pad-right:not(.col-12) { padding-right: 25px !important; }
    .card-pad-left:not(.col-12) { padding-left: 25px !important; }
}

@media screen and (min-width: 576px) {
    .card-pad-right.col-sm-1,
    .card-pad-right.col-sm-2,
    .card-pad-right.col-sm-3,
    .card-pad-right.col-sm-4,
    .card-pad-right.col-sm-5,
    .card-pad-right.col-sm-6,
    .card-pad-right.col-sm-7,
    .card-pad-right.col-sm-8,
    .card-pad-right.col-sm-9,
    .card-pad-right.col-sm-10,
    .card-pad-right.col-sm-11 {
        padding-right: 25px !important;
    }

    .card-pad-left.col-sm-1,
    .card-pad-left.col-sm-2,
    .card-pad-left.col-sm-3,
    .card-pad-left.col-sm-4,
    .card-pad-left.col-sm-5,
    .card-pad-left.col-sm-6,
    .card-pad-left.col-sm-7,
    .card-pad-left.col-sm-8,
    .card-pad-left.col-sm-9,
    .card-pad-left.col-sm-10,
    .card-pad-left.col-sm-11 {
        padding-left: 25px !important;
    }
}

@media screen and (min-width: 768px) {
    .card-pad-right.col-md-1,
    .card-pad-right.col-md-2,
    .card-pad-right.col-md-3,
    .card-pad-right.col-md-4,
    .card-pad-right.col-md-5,
    .card-pad-right.col-md-6,
    .card-pad-right.col-md-7,
    .card-pad-right.col-md-8,
    .card-pad-right.col-md-9,
    .card-pad-right.col-md-10,
    .card-pad-right.col-md-11 {
        padding-right: 25px !important;
    }

    .card-pad-left.col-md-1,
    .card-pad-left.col-md-2,
    .card-pad-left.col-md-3,
    .card-pad-left.col-md-4,
    .card-pad-left.col-md-5,
    .card-pad-left.col-md-6,
    .card-pad-left.col-md-7,
    .card-pad-left.col-md-8,
    .card-pad-left.col-md-9,
    .card-pad-left.col-md-10,
    .card-pad-left.col-md-11 {
        padding-left: 25px !important;
    }
}

@media screen and (min-width: 992px) {
    .card-pad-right.col-lg-1,
    .card-pad-right.col-lg-2,
    .card-pad-right.col-lg-3,
    .card-pad-right.col-lg-4,
    .card-pad-right.col-lg-5,
    .card-pad-right.col-lg-6,
    .card-pad-right.col-lg-7,
    .card-pad-right.col-lg-8,
    .card-pad-right.col-lg-9,
    .card-pad-right.col-lg-10,
    .card-pad-right.col-lg-11 {
        padding-right: 25px !important;
    }

    .card-pad-left.col-lg-1,
    .card-pad-left.col-lg-2,
    .card-pad-left.col-lg-3,
    .card-pad-left.col-lg-4,
    .card-pad-left.col-lg-5,
    .card-pad-left.col-lg-6,
    .card-pad-left.col-lg-7,
    .card-pad-left.col-lg-8,
    .card-pad-left.col-lg-9,
    .card-pad-left.col-lg-10,
    .card-pad-left.col-lg-11 {
        padding-left: 25px !important;
    }
}

@media screen and (min-width: 1200px) {
    .card-pad-right.col-xl-1,
    .card-pad-right.col-xl-2,
    .card-pad-right.col-xl-3,
    .card-pad-right.col-xl-4,
    .card-pad-right.col-xl-5,
    .card-pad-right.col-xl-6,
    .card-pad-right.col-xl-7,
    .card-pad-right.col-xl-8,
    .card-pad-right.col-xl-9,
    .card-pad-right.col-xl-10,
    .card-pad-right.col-xl-11 {
        padding-right: 25px !important;
    }

    .card-pad-left.col-xl-1,
    .card-pad-left.col-xl-2,
    .card-pad-left.col-xl-3,
    .card-pad-left.col-xl-4,
    .card-pad-left.col-xl-5,
    .card-pad-left.col-xl-6,
    .card-pad-left.col-xl-7,
    .card-pad-left.col-xl-8,
    .card-pad-left.col-xl-9,
    .card-pad-left.col-xl-10,
    .card-pad-left.col-xl-11 {
        padding-left: 25px !important;
    }
}


/* Logo */
.sm-logo,
.lg-logo {
    border-radius: 50%;
    cursor: pointer;
}

.sm-logo { height: 28px; }

.lg-logo {
    height: 85px;
    margin: 0 auto;
    width: 85px;
}
    .lg-logo img { width: inherit; }


/* Toast */
.toast {
    backdrop-filter: none;
    background-color: rgba(0, 0, 0, 0);
    border: none;
    box-shadow: none;
    left: calc(50% - var(--toast-width)/2);
    max-width: none;
    position: fixed;
    top: 25px;
    width: fit-content;
    width: -moz-fit-content;
    width: -webkit-fit-content;
    z-index: -1;
}

.toast.show { z-index: 5; }

    .toast .toast-content {
        background-color: var(--white-accent-color);
        border-radius: var(--main-border-radius);
        margin: 0 auto;
        max-width: calc(100vw - 50px);
        min-width: 100px;
        width: fit-content;
        width: -moz-fit-content;
        width: -webkit-fit-content;
    }

    @media screen and (min-width: 1200px) {
        .toast .toast-content {
            max-width: 500px;
            min-width: 200px;
        }
    }

        /* Toast: Header */
        .toast .toast-content .toast-header {
            background-color: var(--muted-blue-accent-color);
            border-top-left-radius: var(--main-border-radius);
            border-top-right-radius: var(--main-border-radius);
            color: var(--white-accent-color);
            padding: 5px 10px;
        }

        .toast .toast-content.success .toast-header {
            background-color: var(--green-accent-color);
            border-color: var(--green-accent-color);
        }

        .toast .toast-content.warning .toast-header {
            background-color: var(--yellow-accent-color);
            border-color: var(--yellow-accent-color);
        }

        .toast .toast-content.error .toast-header {
            background-color: var(--red-accent-color);
            border-color: var(--red-accent-color);
        }

        .toast .toast-content.admin .toast-header {
            background-color: var(--admin-accent-color);
            border-color: var(--admin-accent-color);
        }
            .toast .toast-content .toast-header i[data-dismiss] { color: var(--white-accent-color); }
                .toast .toast-content .toast-header i[data-dismiss]:hover {
                    color: var(--white-accent-color) !important;
                    opacity: 0.6;
                }

        /* Toast: Body */
        .toast .toast-content .toast-body {
            border: 1px solid var(--light-muted-blue-accent-color);
            border-bottom-left-radius: var(--main-border-radius);
            border-bottom-right-radius: var(--main-border-radius);
            border-top: none;
            color: var(--main-text-color);
            padding: 15px 25px;
        }

        .toast .toast-content.success .toast-body { border-color: var(--green-accent-color); }
        .toast .toast-content.warning .toast-body { border-color: var(--yellow-accent-color); }
        .toast .toast-content.error .toast-body { border-color: var(--red-accent-color); }
        .toast .toast-content.admin .toast-body { border-color: var(--admin-accent-color); }

            .toast .toast-content.status .toast-body p.success { color: var(--green-accent-color); }
            .toast .toast-content.status .toast-body p.warning { color: var(--yellow-accent-color); }
            .toast .toast-content.status .toast-body p.error { color: var(--red-accent-color); }
            .toast .toast-content.status .toast-body p.admin { color: var(--admin-accent-color); }


/* Alerts */
.alert {
    border: none;
    border-radius: var(--main-border-radius);
    color: var(--white-accent-color);
    margin: 0;
}

.alert.alert-info { background-color: var(--orange-accent-color); }
.alert.alert-danger { background-color: var(--red-accent-color); }
.alert.alert-warning { background-color: var(--yellow-accent-color); }

    .alert.alert-danger a,
    .alert.alert-warning a {
        color: var(--white-accent-color) !important;
        text-decoration: underline;
    }
        .alert.alert-danger a:hover { color: var(--white-accent-color) !important; }


/* Modals */
.modal .modal-dialog {
    margin: 15px auto;
    width: fit-content;
    width: -moz-fit-content;
    width: -webkit-fit-content;
}

@media screen and (min-width: 1200px) {
    .modal .modal-dialog { margin: 1.75rem auto; }
}
    .modal .modal-dialog .modal-header {
        background-color: var(--white-accent-color);
        border: 1px solid var(--light-muted-blue-accent-color);
        padding: 15px 20px 10px 20px;
    }

    .modal .modal-dialog .modal-content {
        background-color: var(--white-accent-color);
        border: 1px solid var(--light-muted-blue-accent-color);
        margin: 0 auto;
        max-width: calc(100% - 30px);
        padding: 15px 20px;
    }

    @media screen and (min-width: 1200px) {
        .modal .modal-dialog .modal-content {
            max-width: none;
            padding: 20px 30px;
        }
    }
        .modal .modal-dialog .modal-content { word-break: break-word; }
            .modal .modal-dialog .modal-content button { text-transform: capitalize; }

/* Modals: Container Modal */
.modal .modal-dialog.container-fluid {
    max-width: none;
    width: auto;
}

/* Modals: Card Modal */
.modal.card-modal .modal-dialog .modal-content {
    background: none;
    border: none;
    padding: 0;
}

/* Modals: Image Modal */
.modal.image-modal .modal-dialog {
    max-width: none;
    width: 90%;
}

@media screen and (min-width: 992px) {
    .modal.image-modal .modal-dialog { width: 60%; }
}
    .modal.image-modal .modal-dialog .close-btn {
        color: var(--white-accent-color) !important;
        opacity: 0.5;
    }
        .modal.image-modal .modal-dialog .close-btn:hover { opacity: 1; }

/* Modals: Options + Filters Popups */
.modal.options-popup .modal-dialog,
.modal.filters-popup .modal-dialog {
    height: 100%;
    margin: 0 auto;
    width: 100%;
}

    .modal.options-popup .modal-dialog .modal-content,
    .modal.filters-popup .modal-dialog .modal-content {
        border: none;
        max-width: none;
    }

    .modal.options-popup .modal-dialog .modal-content {
        background-color: var(--blue-accent-color);
        padding: 0;
    }

    .modal.filters-popup .modal-dialog .modal-content {
        background-color: var(--white-accent-color);
        border-bottom-left-radius: unset;
        border-bottom-right-radius: unset;
        padding: 25px 30px;
    }

        .modal.filters-popup .modal-dialog .modal-content form .form-group .form-control { margin-top: 0; }

        .modal.options-popup .modal-dialog .modal-content .close {
            background-color: var(--white-accent-color);
            border-radius: 10px;
            height: 5px;
            left: 37.5%;
            opacity: 1;
            position: absolute;
            top: -10px;
            width: 25%;
        }

    /* Modals: Options + Filters Popups: Options Popup Animations */
    .modal.options-popup.slide-up .modal-dialog .modal-content {
        animation: optionsPopup 0.4s;
        top: var(--options-popup-height);
    }

    .modal.options-popup.slide-down .modal-dialog .modal-content {
        animation: optionsPopdown 0.4s;
        top: 100%;
    }

    @keyframes optionsPopup {
        0% {
            top: 100%;
            opacity: 0;
        }

        100% {
            top: var(--options-popup-height);
            opacity: 1;
        }
    }

    @keyframes optionsPopdown {
        0% {
            top: var(--options-popup-height);
            opacity: 1;
        }

        100% {
            top: 100%;
            opacity: 0;
        }
    }

    /* Modals: Options + Filters Popups: Filters Popup Animations */
    .modal.filters-popup.slide-up .modal-dialog .modal-content {
        animation: filtersPopup 0.4s;
        top: var(--filters-popup-height);
    }

    .modal.filters-popup.slide-down .modal-dialog .modal-content {
        animation: filtersPopdown 0.4s;
        top: 100%;
    }

    @keyframes filtersPopup {
        0% {
            top: 100%;
            opacity: 0;
        }

        100% {
            top: var(--filters-popup-height);
            opacity: 1;
        }
    }

    @keyframes filtersPopdown {
        0% {
            top: var(--filters-popup-height);
            opacity: 1;
        }

        100% {
            top: 100%;
            opacity: 0;
        }
    }


/* Scrollbars */
@media screen and (min-width: 1200px) {
    ::-webkit-scrollbar {
        height: 0.7rem;
        width: 0.7rem;
    }

    ::-webkit-scrollbar-button:after { display: none; }
    ::-webkit-scrollbar-corner { background-color: var(--white-accent-color); }
    ::-webkit-scrollbar-thumb { background-color: var(--light-muted-blue-accent-color); }
}


/* Buttons */
button {
    background-color: var(--white-accent-color);
    border: 1px solid var(--light-muted-blue-accent-color);
    border-radius: var(--main-border-radius);
    color: var(--muted-blue-accent-color);
    font-size: var(--main-font-size);
    letter-spacing: var(--main-letter-spacing);
    padding: 7.5px 12.5px;
    transition: ease 0.2s;
}
    button:hover:not([disabled]) {
        background-color: var(--light-muted-blue-accent-color);
        color: var(--blue-accent-color);
    }

    button:focus:not(:focus-visible) { outline: none; }

/* Buttons: Accept */
.accept-btn,
.accept-btn.inverted:hover {
    background-color: var(--white-accent-color);
    border: 1px solid var(--green-accent-color);
    color: var(--green-accent-color);
}
    .accept-btn:hover,
    .accept-btn.inverted {
        background-color: var(--green-accent-color);
        color: var(--white-accent-color);
    }

/* Buttons: Button Group */
.btn-group { position: relative; }
    .btn-group button:not(.dropdown-btn):not(.popup-btn) { max-height: 36px; }
    .btn-group button:not(.dropdown-btn):focus { outline: none; }

    /* Buttons: Button Group: Main Button */
    .btn-group button.btn-group-main {
        border-radius: var(--main-border-radius) 0 0 var(--main-border-radius);
        border-right: none !important;
    }

    /* Buttons: Button Group: Secondary Button */
    .btn-group button.btn-group-secondary {
        border-radius: 0 var(--main-border-radius) var(--main-border-radius) 0;
        padding: 7.5px;
    }

    .btn-group .dropdown .dropdown-menu {
        right: 0 !important;
        top: calc(100% + 1px) !important;
    }

    /* Buttons: Button Group: Table Cell */
    /* Buttons: Button Group: Table Cell: Main Button */
    td .btn-group button.btn-group-main {
        font-size: 0.75rem;
        padding: 5px 10px;
    }

    td .btn-group button.btn-group-main.edit-option,
    td .btn-group button.btn-group-main.danger-option,
    td .btn-group button.btn-group-main.accept-option {
        color: var(--white-accent-color);
    }
        td .btn-group button.btn-group-main.edit-option:hover,
        td .btn-group button.btn-group-main.danger-option:hover,
        td .btn-group button.btn-group-main.accept-option:hover {
            background-color: var(--white-accent-color);
        }

    td .btn-group button.btn-group-main.edit-option {
        background-color: var(--blue-accent-color);
        border: 1px solid var(--blue-accent-color);
    }
        td .btn-group button.btn-group-main.edit-option:hover { color: var(--blue-accent-color); }

    td .btn-group button.btn-group-main.danger-option {
        background-color: var(--red-accent-color);
        border: 1px solid var(--red-accent-color);
    }
        td .btn-group button.btn-group-main.danger-option:hover { color: var(--red-accent-color); }

    td .btn-group button.btn-group-main.accept-option {
        background-color: var(--green-accent-color);
        border: 1px solid var(--green-accent-color);
    }
        td .btn-group button.btn-group-main.accept-option:hover { color: var(--green-accent-color); }

    /* Buttons: Button Group: Table Cell: Secondary Button */
    td .btn-group button.btn-group-secondary {
        font-size: 0.75rem;
        padding: 5px;
    }

    td .btn-group button.btn-group-secondary.edit-option {
        border: 1px solid var(--blue-accent-color);
        color: var(--blue-accent-color);
    }
        td .btn-group button.btn-group-secondary.edit-option:hover { background-color: var(--blue-accent-color); }

    td .btn-group button.btn-group-secondary.danger-option {
        border: 1px solid var(--red-accent-color);
        color: var(--red-accent-color);
    }
        td .btn-group button.btn-group-secondary.danger-option:hover { background-color: var(--red-accent-color); }

    td .btn-group button.btn-group-secondary.accept-option {
        border: 1px solid var(--green-accent-color);
        color: var(--green-accent-color);
    }
        td .btn-group button.btn-group-secondary.accept-option:hover { background-color: var(--green-accent-color); }

        td .btn-group button.btn-group-secondary.edit-option:hover,
        td .btn-group button.btn-group-secondary.danger-option:hover,
        td .btn-group button.btn-group-secondary.accept-option:hover {
            border-left: 1px solid var(--white-accent-color);
            color: var(--white-accent-color);
        }

/* Buttons: Danger */
.danger-btn,
.danger-btn.inverted:hover {
    background-color: var(--white-accent-color);
    border: 1px solid var(--red-accent-color);
    color: var(--red-accent-color);
}
    .danger-btn:hover,
    .danger-btn.inverted {
        background-color: var(--red-accent-color);
        color: var(--white-accent-color);
    }

/* Buttons: Dropdown + Popup */
.dropdown-btn,
.popup-btn {
    border-radius: unset;
    cursor: pointer;
    text-align: right;
    transition: ease 0.2s;
    width: 100%;
}
    .dropdown-btn:hover,
    .popup-btn:hover {
        background-color: var(--white-accent-color) !important;
    }

.dropdown-btn { padding: 10px 15px; }

    .dropdown-btn:first-child {
        border-top-left-radius: var(--main-border-radius);
        border-top-right-radius: var(--main-border-radius);
    }

    .dropdown-btn:last-child {
        border-bottom-left-radius: var(--main-border-radius);
        border-bottom-right-radius: var(--main-border-radius);
    }

    .dropdown-btn i,
    .popup-btn i,
    .dropdown-btn p,
    .popup-btn p {
        color: var(--white-accent-color);
        transition: ease 0.2s;
    }

.popup-btn { padding: 15px 20px; }

    .popup-btn:first-child {
        border-top-left-radius: 0.5rem;
        border-top-right-radius: 0.5rem;
    }

/* Buttons: Dropdown + Popup: Edit Option */
.dropdown-btn.edit-option,
.popup-btn.edit-option {
    background-color: var(--blue-accent-color);
    border: 1px solid var(--blue-accent-color);
}
    .dropdown-btn.edit-option:hover i,
    .popup-btn.edit-option:hover i,
    .dropdown-btn.edit-option:hover p,
    .popup-btn.edit-option:hover p {
        color: var(--blue-accent-color);
    }

/* Buttons: Dropdown + Popup: Danger Option */
.dropdown-btn.danger-option,
.popup-btn.danger-option {
    background-color: var(--red-accent-color);
    border: 1px solid var(--red-accent-color);
}
    .dropdown-btn.danger-option:hover i,
    .popup-btn.danger-option:hover i,
    .dropdown-btn.danger-option:hover p,
    .popup-btn.danger-option:hover p {
        color: var(--red-accent-color);
    }

/* Buttons: Dropdown + Popup: Accept Option */
.dropdown-btn.accept-option,
.popup-btn.accept-option {
    background-color: var(--green-accent-color);
    border: 1px solid var(--green-accent-color);
}
    .dropdown-btn.accept-option:hover i,
    .popup-btn.accept-option:hover i,
    .dropdown-btn.accept-option:hover p,
    .popup-btn.accept-option:hover p {
        color: var(--green-accent-color);
    }

/* Buttons: Edit */
.edit-btn,
.edit-btn.inverted:hover {
    background-color: var(--white-accent-color);
    border: 1px solid var(--blue-accent-color);
    color: var(--blue-accent-color);
}
    .edit-btn:hover,
    .edit-btn.inverted {
        background-color: var(--blue-accent-color);
        color: var(--white-accent-color);
    }

/* Buttons: Icon */
.icon-btn {
    color: var(--muted-blue-accent-color);
    cursor: pointer;
    transition: ease 0.2s;
}
    .icon-btn:not(.hover-fade):hover { font-weight: 900; }
    .icon-btn.hover-fade:hover { opacity: 0.6; }

.icon-btn.blue { color: var(--blue-accent-color); }

/* Buttons: Icon: Disabled */
.icon-btn[disabled] {
    cursor: default;
    opacity: 0;
}
    .icon-btn[disabled]:hover { opacity: 0; }

/* Buttons: Important */
.important-btn,
.important-btn.inverted:hover {
    background-color: var(--white-accent-color);
    border: 1px solid var(--blue-accent-color);
    border-radius: 3px;
    color: var(--blue-accent-color);
    padding: 7.5px 35px;
}
    .important-btn:hover,
    .important-btn.inverted {
        background-color: var(--blue-accent-color);
        color: var(--white-accent-color);
    }

.important-btn.slim { padding: 7.5px 12.5px; }

/* Buttons: Inverted */
.inverted-btn {
    background-color: unset;
    border: 1px solid var(--white-accent-color);
    color: var(--white-accent-color);
}
    .inverted-btn:hover { background-color: var(--white-accent-color); }
    .inverted-btn.accept-btn:hover { background-color: var(--green-accent-color); }

/* Buttons: Invisible */
.invisible-btn {
    background: none;
    border: none;
    padding: 0;
}
    .invisible-btn:hover {
        background: none;
        color: unset;
    }

/* Buttons: Large */
@media screen and (max-width: 575px) {
    .lg-btn { width: 100% !important; }
}

.lg-btn {
    background-color: var(--blue-accent-color);
    border: 2px solid var(--blue-accent-color);
    color: var(--white-accent-color);
    display: block;
    font-size: 1rem;
    margin: 0 auto;
    padding: 7.5px 0;
    width: 100%;
}

@media screen and (min-width: 576px) {
    .lg-btn {
        font-size: 1.1rem;
        padding: 12.5px 0;
    }
}
    .lg-btn:hover,
    .lg-btn:active {
        background-color: var(--white-accent-color);
        border: 2px solid var(--blue-accent-color);
        color: var(--blue-accent-color);
    }

/* Buttons: Small */
.sm-btn {
    font-size: 0.75rem;
    padding: 5px 10px;
}


/* Dropdown Menus */
.dropdown { padding: 0 !important; }
    .dropdown:hover { color: var(--blue-accent-color); }

    .dropdown .dropdown-icon {
        line-height: 1.5;
        padding: 0.75rem 20px 0.75rem 0.75rem;
        width: fill-available;
        width: -moz-available;
        width: -webkit-fill-available;
    }

    .dropdown .dropdown-menu {
        animation-name: fadeInDropdown;
        animation-duration: 0.2s;
        background-color: var(--white-accent-color);
        border: none;
        border-radius: var(--main-border-radius);
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
        margin: 0;
        min-width: 115px;
        left: auto !important;
        padding: 0;
        right: 15px !important;
        top: 80% !important;
        transform: none !important;
        z-index: 3;
    }
        .card-body.overflowing .dropdown .dropdown-menu { z-index: 1; }

    @keyframes fadeInDropdown {
        0% { opacity: 0; }
        100% { opacity: 1; }

    }


/* Collapsible Rows */
.collapsible-row {
    background-color: var(--light-muted-blue-accent-color);
    border-top: 1px solid var(--white-accent-color);
    color: var(--muted-blue-accent-color);
    cursor: pointer;
    padding: 15px 20px;
}
    .collapsible-row .collapsible-row-button.large { font-size: 2rem; }


/* Forms */
form { line-height: 21px; }
form .form-group { margin-bottom: 20px; }

    form .form-group .form-control {
        background-color: var(--light-muted-blue-accent-color);
        border: none;
        color: var(--main-text-color);
        font-size: var(--main-font-size);
        letter-spacing: var(--main-letter-spacing);
        margin-top: 3px;
    }
        form .form-group .form-control::placeholder { color: var(--muted-blue-accent-color); }

/* Forms: Disabled Form */
form.disabled-form .form-group:not(.exclude-disabled),
form.disabled-form .required-legend:not(.exclude-disabled) {
    cursor: not-allowed;
    opacity: 0.5;
}

form.disabled-form .form-group:not(.exclude-disabled) input,
form.disabled-form .form-group:not(.exclude-disabled) select,
form.disabled-form .form-group:not(.exclude-disabled) .select2,
form.disabled-form .form-group:not(.exclude-disabled) .icon-btn,
form.disabled-form .form-group:not(.exclude-disabled) label,
form.disabled-form .form-group:not(.exclude-disabled) label::before,
form.disabled-form .form-group:not(.exclude-disabled) label::after {
    pointer-events: none;
}

/* Forms: Form with Info */
form.form-with-info .form-group h6 {
    color: var(--muted-blue-accent-color);
    margin: -2px 0 5px 0;
}

    /* Forms: Buttons */
    form .form-group button.form-control {
        color: var(--main-text-color);
        transition: ease 0.2s;
    }
        form .form-group button.form-control:hover {
            background-color: var(--dark-bg-color);
            color: var(--white-text-color);
        }

    /* Forms: Custom Switches */
    form .form-group .custom-switch { padding-left: 3rem; }
        form .form-group .custom-switch .custom-control-label { cursor: pointer; }

            form .form-group .custom-switch .custom-control-label::before {
                background-color: var(--light-muted-blue-accent-color);
                border: none;
                border-radius: 1.2rem;
                height: 1.2rem;
                left: -3rem;
                top: 0;
                width: 2.4rem;
            }

            form .form-group .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--blue-accent-color); }

            form .form-group .custom-switch .custom-control-label::after {
                background-color: var(--white-accent-color);
                height: calc(1.2rem - 4px);
                left: calc(-3rem + 2px);
                top: 2px;
                width: calc(1.2rem - 4px);
            }

            form .form-group .custom-switch .custom-control-input:checked ~ .custom-control-label::after { transform: translateX(1.2rem); }

    /* Forms: Disabled */
    form .form-group .form-control[disabled] {
        cursor: not-allowed;
        opacity: 0.6;
    }
        form .form-group select.form-control option[disabled] { color: var(--disabled-text-color); }

    /* Forms: File Input */
    form .form-group .file-input {
        background-color: var(--light-muted-blue-accent-color);
        border: none;
        border-radius: 4px;
        color: var(--main-text-color);
        font-size: var(--main-font-size);
        letter-spacing: var(--main-letter-spacing);
        margin-top: 3px;
    }

        form .form-group .file-input label {
            background-color: var(--white-accent-color);
            border: 1px solid var(--blue-accent-color);
            border-radius: 4px;
            color: var(--blue-accent-color);
            cursor: pointer;
            font-size: var(--main-font-size);
            letter-spacing: var(--main-letter-spacing);
            margin-right: 10px;
            padding: 7.5px 12.5px;
            transition: ease 0.2s;
        }
            form .form-group .file-input label:hover {
                background-color: var(--blue-accent-color);
                color: var(--white-accent-color);
            }

        form .form-group .file-input input[type="file"] {
            height: 0;
            margin: 0;
            padding: 0;
            width: 0;
        }

    /* Forms: File Drops */
    form .form-group .file-drop {
        border: 2px dashed var(--blue-accent-color);
        border-radius:  var(--main-border-radius);
        padding: 25px 0;
        text-align: center;
        transition: ease 0.2s;
    }
        form .form-group .file-drop p label {
            color: var(--blue-accent-color);
            cursor: pointer;
            transition: ease 0.2s;
        }
            form .form-group .file-drop p label:hover { color: var(--white-text-color); }

    /* Forms: Input Error */
    form .form-group .input-error {
        background-color: rgba(220, 53, 69, 0.15); /* red accent color with opacity */
        border: 1px solid var(--red-accent-color);
        color: var(--red-accent-color);
    }

    form .form-group .input-error-message {
        color: var(--red-accent-color) !important;
        display: none;
        margin: 5px 0 0 0 !important;
    }

    /* Forms: Required Labels */
    form .form-group label.required-label span { font-size: 1rem; }

    /* Forms: Select Multiple */
    form .form-group select[multiple] {
        border: 1px solid var(--light-muted-blue-accent-color);
        min-height: calc((19px*6) + 6px + 2px); /* 6 options + padding offset + border offset */
        overflow-y: auto;
    }

    /* Forms: Spans */
    form .form-group span {
        font-size: 0.75rem;
        margin-top: 5px;
    }


/* Tables */
table {
    border-collapse: collapse;
    color: var(--main-text-color);
    font-size: var(--main-font-size);
    letter-spacing: var(--main-letter-spacing);
    margin: 0;
}
    table thead tr th,
    table tbody tr td {
        border: none;
        padding: 0.75rem;
    }

    table thead tr th {
        background-color: var(--light-muted-blue-accent-color);
        color: var(--muted-blue-accent-color);
        cursor: default;
        font-family: CerebriSansPro-Bold;
        font-size: 0.7rem;
        letter-spacing: 0.075rem;
        padding: 8px 10px;
        text-transform: uppercase;
        transition: ease 0.2s;
        white-space: nowrap;
    }
        table.sortable thead tr th:not(.ignore-sort):hover {
            color: var(--blue-accent-color);
            cursor: pointer;
        }

    table thead tr th.mobile-hidden-col,
    table tbody tr td.mobile-hidden-col {
        display: none;
    }

    @media screen and (min-width: 768px) {
        table thead tr th.mobile-hidden-col,
        table tbody tr td.mobile-hidden-col {
            display: table-cell;
        }
    }

    table tbody tr:not(:first-child) td { border-top: 1px solid var(--light-muted-blue-accent-color); }

    /* Tables: Clickable + Selectable Tables */
    table.clickable tbody tr,
    table.selectable tbody tr {
        transition: ease 0.2s;
    }

        table.clickable tbody tr:not(.ignore-row):hover,
        table.clickable tbody tr.allow-click:hover,
        table.selectable tbody tr:not(.ignore-row):hover,
        table.selectable tbody tr.allow-select:hover{
            background-color: var(--light-muted-blue-accent-color);
            cursor: pointer;
        }

    /* Tables: Table Row Collapse */
    table tbody tr[data-toggle="collapse"][aria-expanded="true"] { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1); }

        table tbody tr.table-row-collapse td {
            padding: 0;
            border: none;
        }
            table tbody tr.table-row-collapse td div .table-row-collapse-content { padding: 20px 20px 15px 20px; }

    /* Tables: Tutorial Tables */
    /* Tables: Tutorial Tables: Table Head */
    .tutorial-section .card table.tutorial-table thead tr th {
        background-color: var(--muted-blue-accent-color);
        color: var(--white-accent-color);
        text-align: center;
    }

    @media screen and (min-width: 768px) {
        .tutorial-section .card table.tutorial-table thead tr th { width: 25%; }
    }

    .tutorial-section .card table.tutorial-table thead tr th:first-child { border-top-left-radius: 0.5rem; }
    .tutorial-section .card table.tutorial-table thead tr th:last-child { border-top-right-radius: 0.5rem; }

    /* Tables: Tutorial Tables: Table Body */
    .tutorial-section .card table.tutorial-table tbody tr td:first-child,
    .tutorial-section .card table.tutorial-table tbody tr td:first-child:nth-last-child(4) ~ td:last-child {
        padding-left: 20px;
        padding-right: 20px;
    }

    @media screen and (min-width: 768px) {
        /* Tables: Tutorial Tables: Table Body: Two Table Cells per Row */
        .tutorial-section .card table.tutorial-table tbody tr td:first-child:nth-last-child(2),
        .tutorial-section .card table.tutorial-table tbody tr td:first-child:nth-last-child(2) ~ td {
            width: 50%;
        }

        /* Tables: Tutorial Tables: Table Body: Three Table Cells per Row */
        .tutorial-section .card table.tutorial-table tbody tr td:first-child:nth-last-child(3),
        .tutorial-section .card table.tutorial-table tbody tr td:first-child:nth-last-child(3) ~ td {
            width: 33.333%;
        }

        /* Tables: Tutorial Tables: Table Body: Four Table Cells per Row */
        .tutorial-section .card table.tutorial-table tbody tr td:first-child:nth-last-child(4),
        .tutorial-section .card table.tutorial-table tbody tr td:first-child:nth-last-child(4) ~ td {
            width: 25%;
        }
    }
        /* Tables: Tutorial Tables: Table Body: Hover Tooltip */
        .tutorial-section .card table.tutorial-table tbody tr td #hoverTooltip {
            background-color: var(--blue-accent-color);
            border-radius: var(--main-border-radius);
            color: var(--white-accent-color);
            left: 43.75%;
            padding: 5px 10px;
            position: absolute;
            text-align: center;
            top: calc((0.9rem + 15px)*-1);
            transition: ease 1s;
            width: 12.5%;
        }
            .tutorial-section .card table.tutorial-table tbody tr td #hoverTooltip::after {
                border-color: var(--blue-accent-color) transparent transparent transparent;
                border-style: solid;
                border-width: 5px;
                content: " ";
                left: 50%;
                margin-left: -5px;
                position: absolute;
                top: 100%;
            }

        /* Tables: Tutorial Tables: Table Body: IFrame */
        .tutorial-section .card table.tutorial-table tbody tr td .iframe-container {
            cursor: pointer;
            margin: 0 auto;
            position: relative;
            width: fit-content;
        }
            .tutorial-section .card table.tutorial-table tbody tr td .iframe-container iframe,
            .tutorial-section .card table.tutorial-table tbody tr td .iframe-container .fa-expand-alt {
                pointer-events: none;
                transition: ease 0.2s;
            }

            .tutorial-section .card table.tutorial-table tbody tr td .iframe-container .fa-expand-alt {
                bottom: 15px;
                color: var(--blue-accent-color);
                opacity: 0;
                position: absolute;
                right: 11px;
            }

            .tutorial-section .card table.tutorial-table tbody tr td .iframe-container:hover .fa-expand-alt { opacity: 1; }


/* Cards */
.card {
    background-color: var(--white-accent-color);
    border: 1px solid var(--light-muted-blue-accent-color);
    border-radius: 0.5rem;
    box-shadow: 0 0.75rem 1.5rem rgba(18, 38, 63, 0.03);
    margin-bottom: 25px;
    position: relative;
}

    /* Card: Card Header */
    .card .card-header {
        background-color: var(--white-accent-color);
        border-bottom: 1px solid var(--light-muted-blue-accent-color);
        border-radius: 0.5rem 0.5rem 0 0;
        padding: 7.5px 15px;
    }

    @media screen and (min-width: 768px) {
        .card .card-header { padding: 10px 20px; }
    }
        .card .card-header .row { align-items: center; }

        /* Card: Card Header: Header Forms */
        .card .card-header .header-form {
            background-color: var(--light-muted-blue-accent-color);
            border: none;
            border-radius: var(--main-border-radius);
            color: var(--muted-blue-accent-color);
            font-size: var(--main-font-size);
            height: 38px;
            letter-spacing: var(--main-letter-spacing);
            margin: 0;
            outline: none;
            padding: 7.5px 12.5px;
        }
            .card .card-header .header-form::placeholder {
                color: var(--muted-blue-accent-color);
                opacity: 1;
            }

        .card .card-header input.header-form { color: var(--main-text-color); }

        .card .card-header .icon-btn.header-form {
            background: none;
            padding: 0;
        }

        /* Card: Card Header: Header Forms: Large Header Input */
        .card .card-header .lg-header-input {
            border-radius: 15px !important;
            padding-left: 20px !important;
            padding-right: 20px !important;
            width: 100%;
        }

        /* Card: Card Header: Buttons */
        .card .card-header button:not(.popup-btn):not(.important-btn) {
            padding-top: 4px;
            padding-bottom: 4px;
        }

        @media screen and (min-width: 768px) {
            .card .card-header button:not(.popup-btn):not(.important-btn) {
                padding-top: 7.5px;
                padding-bottom: 7.5px;
            }
        }

    /* Card: Card Tabs */
    .card .card-tabs {
        background-color: var(--white-accent-color);
        margin-top: -1px;
    }

    .card .card-tabs.no-card-header {
        background-color: var(--main-bg-color);
        margin-left: -1px;
        width: calc(100% + 2px);
    }

    @media screen and (min-width: 768px) {
        .card .card-tabs.no-md-card-header {
            background-color: var(--main-bg-color);
            margin-left: -1px;
            width: calc(100% + 2px);
        }
    }
        .card .card-tabs .card-tab {
            background-color: var(--light-muted-blue-accent-color);
            border: 1px solid var(--light-muted-blue-accent-color);
            border-bottom: none;
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
            cursor: pointer;
            padding: 5px 0;
        }

        .card .card-tabs .card-tab[data-tab-selected=true] {
            background-color: var(--white-accent-color);
            color: var(--blue-accent-color);
        }
            .card .card-tabs .card-tab:hover { color: var(--blue-accent-color); }

            .card .card-tabs .card-tab p,
            .card .card-tabs .card-tab p span {
                color: var(--muted-blue-accent-color);
                font-family: CerebriSansPro-Bold;
                font-size: 0.7rem;
                letter-spacing: 0.075rem;
                text-align: center;
                text-transform: uppercase;
                transition: ease 0.2s;
            }

        .card .card-tabs .card-tab-excess { border-bottom: 1px solid var(--light-muted-blue-accent-color); }

    /* Card: Card Body */
    .card .card-body {
        overflow: auto;
        padding: 10px 15px;
        scrollbar-color: var(--light-bg-color) var(--medium-bg-color);
    }

    .card .card-body h6.subtext {
        color: var(--muted-blue-accent-color);
        margin: -2px 0 5px 0;
    }

    @media screen and (min-width: 1200px) {
        .card .card-body { padding: 15px 25px; }
    }
        .card .card-body table { display: inline-table; }

    /* Card: Chart Cards */
    .card.chart-card .card-body { padding: 0; }

        .card.chart-card .card-body .chart-container {
            display: inline-flex;
            min-width: 686px; /* .col-md (768px) - .body-content padding (50px) - .card-body padding (32px) */
            padding: 10px 15px;
            width: 100%;
        }

        @media screen and (min-width: 1200px) {
            .card.chart-card .card-body .chart-container { padding: 15px 25px; }
        }

    /* Card: Card in Card */
    .card.card-in-card .card-body { padding: 15px; }
        .card.card-in-card .card-body .card { margin: 0; }
            .card.card-in-card .card-body .card .card-body { padding: initial; }
                .card.card-in-card .card-body .card .card-body table thead th:first-child { border-top-left-radius: var(--main-border-radius); }
                .card.card-in-card .card-body .card .card-body table thead th:last-child { border-top-right-radius: var(--main-border-radius); }

    /* Card: Canvas Cards */
    .card.canvas-card .card-body { padding: 5px 10px; }
        .card.canvas-card .card-body canvas { width: 100%; }

    /* Card: Detail Cards */
    .card.details-card .card-body table tr th {
        text-align: right;
        white-space: nowrap;
        vertical-align: top;
    }

    .card.details-card .card-body table tr td {
        border: none;
        padding: 0 0 0 15px;
    }

    /* Card: Anatomy Parts Tree */
    .card.parts-tree-card .card-body ul {
        list-style-type: none;
        padding-left: 0;
    }
        .card.parts-tree-card .card-body ul ul { padding-left: 40px; }
            .card.parts-tree-card .card-body ul ul li { margin-top: 0 !important; }

        .card.parts-tree-card .card-body ul li {
            cursor: default;
            white-space: nowrap;
        }
            .card.parts-tree-card .card-body ul li:not(:first-child) { margin-top: 25px; }
            .card.parts-tree-card .card-body ul li::before { content: "\f0c8"; }

            .card.parts-tree-card .card-body ul li[data-expanded] {
                cursor: pointer;
                transition: ease 0.2s;
            }
                .card.parts-tree-card .card-body ul li[data-expanded="true"]::before { content: "\f146"; }
                .card.parts-tree-card .card-body ul li[data-expanded="false"]::before { content: "\f0fe"; }
                .card.parts-tree-card .card-body ul li[data-expanded]:hover { background-color: var(--light-muted-blue-accent-color); }

            .card.parts-tree-card .card-body ul li::before {
                font-family: "Font Awesome 5 Pro";
                font-weight: 300;
                padding: 0 10px 0 0;
            }

    /* Card: Quill Cards */
    .card .card-body.ql-editor { white-space: normal; }

        .card .card-body.ql-editor ul,
        .card .card-body.ql-editor ol {
            padding: 0 !important;
        }

    /* Card: Stat Cards */
    .card.stat-card { padding: 10px 20px 10px 15px; }

        .card.stat-card h6 {
            color: var(--muted-blue-accent-color);
            font-family: CerebriSansPro-Bold;
            font-size: 0.6rem;
            letter-spacing: 0.03rem;
            margin-top: 5px;
            text-transform: uppercase;
        }

    /* Card: Table Cards */
    .card.table-card .card-header { border: none; }
    .card.table-card .card-body { padding: 0; }

    /* Card: Table Cards: Table Y Scroll */
    .card.table-card .card-body.table-y-scroll { max-height: 500px; }

        .card.table-card .card-body table { width: 100%;}

            .card.table-card .card-body table thead tr th {
                position: sticky;
                top: 0;
                z-index: 2;
            }

            .card.table-card .card-body table tbody tr td.options {
                cursor: pointer;
                padding-right: 20px;
                text-align: right;
                width: 1%;
            }
                .card.table-card .card-body table tbody tr td.options .dropdown-menu { right: 20px !important; }

                /* Card: Table Cards: Overflowing */
                .card.table-card .card-body.overflowing { position: relative; }

                .card.table-card .card-body.overflowing table tbody tr .dropdown.options .dropdown-menu.render-above {
                    bottom: 70% !important;
                    top: unset !important;
                    z-index: 3;
                }

                .card.table-card .card-body.overflowing table tbody tr .btn-group .dropdown .dropdown-menu.render-above {
                    bottom: calc(100% + 1px) !important;
                    top: unset !important;
                    z-index: 3;
                }

    /* Card: Transition Cards */
    .transition-card { transition: ease 0.75s; }



/* Tutorial Section */
.tutorial-section {
    background-color: var(--light-muted-blue-accent-color);
    margin-bottom: 50px;
    padding: 15px 20px 20px 20px;
}
    .tutorial-section h4,
    .tutorial-section p {
        color: var(--muted-blue-accent-color);
    }

    /* Tutorial Section: Cards */
    .tutorial-section .card:last-child { margin-bottom: 0; }

    /* Tutorial Section: MOdals */
    .tutorial-section .modal .modal-dialog {
        max-width: none;
        width: calc(100% - 30px);
    }

    @media screen and (min-width: 768px) {
        .tutorial-section .modal .modal-dialog { width: calc(1920 / 1080 * 75vh); }
    }
        .tutorial-section .modal .modal-dialog .modal-content {
            border-radius: 0 0 var(--main-border-radius) var(--main-border-radius);
            border-top: none;
            max-width: none;
            padding: 0 10px;
        }

        @media screen and (min-width: 768px) {
            .tutorial-section .modal .modal-dialog .modal-content { padding: 15px 20px; }
        }
            .tutorial-section .modal .modal-dialog .modal-content iframe {
                height: calc(1080 / 1920 * 100vw);
                width: 100%;
            }

            @media screen and (min-width: 768px) {
                .tutorial-section .modal .modal-dialog .modal-content iframe { height: 66vh; }
            }


/* iFrame */
iframe { border: none; }


/* Browser Alert */
#browserAlert {
    background-color: var(--red-accent-color);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
    position: fixed;
    width: 100%;
    z-index: 5;
}


/* Cookie Consent */
#cookieConsent {
    background-color: var(--white-accent-color);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
    color: var(--main-text-color);
    position: fixed;
    width: 100%;
    z-index: 5;
}


/* Activate Inputs */
.activate-container {
    padding-top: 15%;
    position: relative;
    width: 100%;
}
    .activate-container div {
        border-radius: var(--main-border-radius);
        bottom: 0;
        left: 0;
        padding: 0 5px;
        position: absolute;
        right: 0;
        top: 0;
    }

    @media screen and (min-width: 1200px) {
        .activate-container div { padding: 0 10px; }
    }
        .activate-container div input {
            background-color: var(--light-muted-blue-accent-color);
            border: none;
            color: var(--main-text-color) !important;
            font-family: Blender-Medium;
            font-size: 2rem;
            height: 100%;
            text-align: center;
            text-transform: uppercase;
        }

        @media screen and (min-width: 576px) {
            .activate-container div input { font-size: 3rem; }
        }

        @media screen and (min-width: 768px) {
            .activate-container div input { font-size: 4rem; }
        }

        @media screen and (min-width: 992px) {
            .activate-container div input { font-size: 4.5rem; }
        }
            .activate-container div input:focus {
                background-color: var(--light-muted-blue-accent-color);
                box-shadow: none;
            }


/* Quill Editor */
.ql-toolbar {
    border: 1px solid var(--light-muted-blue-accent-color) !important;
    border-top-left-radius: var(--main-border-radius);
    border-top-right-radius: var(--main-border-radius);
    font-family: CerebriSansPro-Regular !important;
    padding: 0.375rem 0.75rem !important;
    margin-top: 5px;
}
    .ql-toolbar .ql-formats { margin-top: 0; }

        .ql-toolbar .ql-formats button,
        .ql-toolbar .ql-formats .ql-picker {
            height: 18px !important;
            padding: 0 2px !important;
            transition: ease 0.2s;
            width: 22px !important;
        }

        .ql-toolbar .ql-formats button.ql-showHtml { margin-top: -3px; }

            .ql-toolbar .ql-formats button.ql-showHtml::after {
                content: "\f121";
                font-family: "Font Awesome 5 Free";
                font-weight: 600;
            }

        .ql-toolbar .ql-formats .ql-picker {
            font-size: 0.75rem;
            margin: 0;
        }
            .ql-toolbar .ql-formats .ql-picker .ql-picker-label {
                border: none;
                margin: 0;
                padding: 0;
            }
                .ql-toolbar .ql-formats .ql-picker .ql-picker-label svg { vertical-align: initial; }

                    .ql-toolbar .ql-formats svg .ql-stroke,
                    .ql-toolbar .ql-formats svg .ql-fill {
                        transition: ease 0.2s;
                    }

                    .ql-toolbar .ql-formats svg .ql-stroke { stroke: var(--muted-blue-accent-color); }
                    .ql-toolbar .ql-formats svg .ql-fill { fill: var(--muted-blue-accent-color); }

                        .ql-toolbar .ql-formats button:hover svg .ql-stroke,
                        .ql-toolbar .ql-formats .ql-picker:hover svg .ql-stroke {
                            stroke: var(--blue-accent-color) !important;
                        }

                        .ql-toolbar .ql-formats button:hover svg .ql-fill,
                        .ql-toolbar .ql-formats .ql-picker:hover svg .ql-fill {
                            fill: var(--blue-accent-color) !important;
                        }

.ql-container {
    background-color: var(--light-muted-blue-accent-color);
    border: 1px solid var(--light-muted-blue-accent-color) !important;
    border-bottom-left-radius: var(--main-border-radius);
    border-bottom-right-radius: var(--main-border-radius);
    font-family: CerebriSansPro-Regular !important;
    font-size: var(--main-font-size) !important;
    min-height: 60px;
    padding: 0.375rem 0.75rem;
}
    .ql-container .ql-editor { padding: 0; }
        .ql-container .ql-editor span { font-size: var(--main-font-size); }

    .ql-container .ql-tooltip {
        border: 1px solid var(--light-muted-blue-accent-color) !important;
        border-radius: var(--main-border-radius);
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1) !important;
        color: var(--main-text-color) !important;
        left: 0 !important;
        top: 20px !important;
        padding: 0.375rem 0.75rem !important;
    }
        .ql-container .ql-tooltip input {
            border: none !important;
            background-color: var(--light-muted-blue-accent-color);
            border-radius: 0.25rem;
            color: var(--main-text-color);
            font-size: var(--main-font-size) !important;
            padding: 2.5px 0.75rem !important;
        }
            .ql-container .ql-tooltip input::placeholder { color: var(--muted-blue-accent-color); }
            .ql-container .ql-tooltip input:focus { outline: none; }


/* Select2 */
.select2 span { margin-top: 0 !important; }

.select2.select2-container {
    margin-top: 3px !important;
    width: 100% !important;
}
    .select2-container .select2-selection {
        background-color: var(--light-muted-blue-accent-color) !important;
        border: none !important;
        border-radius: 0.25rem !important;
        font-size: var(--main-font-size) !important;
        height: calc(1.5em + 0.75rem + 2px) !important;
        padding: 0.375rem 0.75rem;
    }
        .select2-container .select2-selection:focus { outline: none; }

        .select2-container .select2-selection .select2-selection__rendered {
            color: var(--main-text-color) !important;
            font-size: var(--main-font-size) !important;
            line-height: 1.5 !important;
            padding: 0 !important;
        }

        .select2-container .select2-selection .select2-selection__arrow { height: 30px !important; }
            .select2-container .select2-selection .select2-selection__arrow b { border-color: var(--muted-blue-accent-color) transparent transparent transparent !important; }
            .select2-container--open .select2-selection .select2-selection__arrow b { border-color: transparent transparent var(--muted-blue-accent-color) transparent !important; }

.select2-dropdown {
    border: 1px solid var(--light-muted-blue-accent-color) !important;
    border-bottom-left-radius: var(--main-border-radius) !important;
    border-bottom-right-radius: var(--main-border-radius) !important;
}
    .select2-dropdown .select2-search { padding: 10px; }

        .select2-dropdown .select2-search .select2-search__field {
            background-color: var(--light-muted-blue-accent-color);
            border: none !important;
            border-radius: 0.25rem;
            color: var(--main-text-color);
            padding: 0.375rem 0.75rem;
        }
            .select2-dropdown .select2-search .select2-search__field:focus { outline: none; }


/* Miscellaneous */
.hidden-overflow { overflow: hidden !important; }
.z-top { z-index: 3; }

/* Miscellaneous: Cursor */
.cursor-default { cursor: default; }
.cursor-pointer { cursor: pointer; }

/* Miscellaneous: Height */
.h-fill {
    height: fill-available !important;
    height: -moz-fill-available !important;
    height: -webkit-fill-available !important;
}

.h-fit {
    height: fit-content !important;
    height: -moz-fit-content !important;
    height: -webkit-fit-content !important;
}

.max-vh-50 { max-height: 50vh; }

/* Miscellaneous: Invisible Selects */
.invisible-select {
    border: none;
    display: block;
    height: 0;
    visibility: hidden;
}

/* Miscellaneous: Horizontal Rule */
hr {
    border-top: 1px solid var(--light-muted-blue-accent-color);
    margin: 1.25rem 0;
}

hr.inverted-hr {
    border: none;
    border-bottom: 1px solid var(--light-muted-blue-accent-color);
    margin-top: 0;
    padding-top: 1.25rem;
}

/* Miscellaneous: Media */
.img-container {
    width: 100%;
    padding: 0 50px;
}
    .img-container img { width: 100%; }
        .img-container img.outline { border: 1px solid var(--blue-accent-color); }

.pdf {
    height: 753.2px;
    width: 547.75px;
}

/* Miscellaneous: Width */
.w-1 { width: 1%; }

.w-fit {
    width: fit-content;
    width: -moz-fit-content;
    width: -webkit-fit-content;
}

.w-none {
    display: none;
    height: 0;
    overflow: hidden;
    padding: 0 !important;
    width: 0;
}

/* Miscellaneous: Wrap */
.break-word { overflow-wrap: break-word; }
.no-wrap { white-space: nowrap !important; }
.wrap { white-space: normal !important; }

/* Elm stuff */
.highlight-new {
    animation: 3s forwards new-row ease-in-out;
}

@keyframes new-row {
    from {
        background-color: var(--green-accent-color);
    }

    to {
        background-color: var(--green-accent-color-2);
    }
}

.actions-contianer {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.actions-filter {
    flex-grow: 1;
   
    display: flex;
    flex-wrap: wrap;
    gap: 5px 15px;
}


.actions-page {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 15px;
    white-space: nowrap;
}

@keyframes spinner-animate {
    to { transform: rotate(360deg) }
}

.spinner-animate {
    animation: spinner-animate 1.4s linear infinite;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* Delayed fadeIn so that loading messages don't flicker as the app is starting up */
.loading {
    animation: fadeIn 1s ease-out 1s both;
}

.hover-subtle {
    cursor: pointer;
    transition: background-color ease-in-out .2s;
    padding: 3px;
}
.hover-subtle:hover {
    background-color: var(--light-muted-blue-accent-color);
}

.branded-form-container > *:not(form) {
    text-align: center;
}

.branded-form-container p {
    color: var(--muted-blue-accent-color);
}

.branded-form-container {
    /* Root: Constants */
    --main-text-color: #212529;
    --light-muted-blue-accent-color: #fff;
    --muted-blue-accent-color: #666;

    --form-border-color: #C8ADFF;

    color: var(--main-text-color);
}

/* Set footer at the bottom of the page or below, currently only logged out mode */
.body-content.logged-out {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.body-content.logged-out > div {
    flex-grow: 1;
}

@font-face {
    font-family: 'Tt commons pro variable';
    src: url('../fonts/TTCommonsPro/WOFF/TT_Commons_Pro_Variable.woff2') format('woff2'), url('../fonts/TTCommonsPro/WOFF/TT_Commons_Pro_Variable.woff') format('woff');
    font-weight: 100 950;
    font-style: normal;
    font-display: swap;
}

.branded-form-container {
    font-family: 'Tt commons pro variable', Arial, sans-serif;
    --main-letter-spacing: inherit;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    max-width: 500px;
}

.branded-form-container h2 {
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
}

.branded-form-container .form-group p {
    font-size: 11px;
}

.branded-form-container .important-btn {
    --blue-accent-color: #fff;
    --white-accent-color: #6C10C8;
    --light-muted-blue-accent-color: #C8ADFF;
}

.branded-form-container form .form-group .custom-switch .custom-control-label::before {
    --light-muted-blue-accent-color: #edf2f9;
}

.branded-form-container .important-btn:hover {
    color: #000;
}

.branded-form-container form .form-group .form-control {
    border: 1px solid var(--form-border-color);
}

.branded-form-container .required-label::after {
    content: "*";
}

.branded-form-container a {
    font-weight: 600;
}

/* line spacing */
.branded-form-container h2 {
    margin-bottom: 4px;
}

.branded-form-container form {
    margin: 32px 0 24px
}

.branded-form-container form .form-group {
    margin-bottom: 16px;
}

.branded-form-container form .form-group .form-control {
    margin: 4px 0;
}

/* Dialog animation altered from MDN example: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog */
dialog[open] {
    opacity: 1;
    transform: translateY(0);
}
dialog {
    opacity: 0;
    transform: translateY(-50px);
    transition: all 0.2s ease-out allow-discrete;
}
@starting-style {
    dialog[open] {
        opacity: 0;
        transform: translateY(-50px);
    }
}
dialog::backdrop {
    backdrop-filter: blur(0);
    transition: all 0.2s ease-out allow-discrete;
}
dialog[open]::backdrop {
    backdrop-filter: blur(2px);
}
@starting-style {
    dialog[open]::backdrop {
        backdrop-filter: blur(0);
    }
}

.logo-nav {
    background: url(/images/AnatomyXMedivisLogo.png);
    width: 150px;
    height: 28px;
    text-indent: -999px;
    padding: 10px 25px;
}
.navbar .axi-logo {
    font-size: 27px;
    vertical-align: middle;
}

/* todo: rename class other-login-links */
nav.other-login-links {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
}

nav.other-login-links button {
    display: inline;
    font-weight: 600;
    padding: 0;
    margin: 0;
}

nav.other-login-links a:not(:first-child)::before, nav.other-login-links button::before {
    content: "\25CB";
    padding: 0 5px 0 4px;
}

nav.other-login-links a, nav.other-login-links button {
    font-size: 14px;
}

form.external-login-links button {
    border: 2px solid var(--form-border-color);
    padding: 8px;
    font-size: 16px;
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    color: var(--main-text-color);
}

form.external-login-links button:hover {
    border: 2px solid var(--form-border-color);
    background-color: var(--form-border-color);
    color: var(--main-text-color);
}

form.external-login-links button[value="Microsoft"]::before {
    content: '';
    background: url("../images/ms-logo.png");
    width: 21px;
    height: 21px;
}

.or-login {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 20px 0;
    color: var(--muted-blue-accent-color);
}

.or-login::before,
.or-login::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--form-border-color);
}

.or-login::before {
    margin-right: 0.8rem;
}

.or-login::after {
    margin-left: 0.8rem;
}

.beta-label::after {
    content: "BETA";
    position: relative;
    top: -0.5rem;
    font-size: 0.6rem;
    padding-left: 0.2rem;
    color: var(--blue-accent-color);
}