/* Minification failed. Returning unminified contents.
(5,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(7,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(9,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(10,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(36,17): run-time error CSS1039: Token not allowed after unary operator: '-old-glory-blue'
(37,34): run-time error CSS1019: Unexpected token, found ' '
(37,34): run-time error CSS1019: Unexpected token, found ' '
(37,34): run-time error CSS1042: Expected function, found ' '
(37,34): run-time error CSS1062: Expected semicolon or closing curly-brace, found ' '
(108,28): run-time error CSS1039: Token not allowed after unary operator: '-old-glory-blue'
(112,28): run-time error CSS1039: Token not allowed after unary operator: '-light-blue'
(116,17): run-time error CSS1039: Token not allowed after unary operator: '-light-blue'
(120,17): run-time error CSS1039: Token not allowed after unary operator: '-old-glory-blue'
(124,17): run-time error CSS1039: Token not allowed after unary operator: '-light-blue'
(180,36): run-time error CSS1019: Unexpected token, found ' '
(180,36): run-time error CSS1019: Unexpected token, found ' '
(180,36): run-time error CSS1042: Expected function, found ' '
(180,36): run-time error CSS1062: Expected semicolon or closing curly-brace, found ' '
(185,36): run-time error CSS1019: Unexpected token, found ' '
(185,36): run-time error CSS1019: Unexpected token, found ' '
(185,36): run-time error CSS1042: Expected function, found ' '
(185,36): run-time error CSS1062: Expected semicolon or closing curly-brace, found ' '
(192,34): run-time error CSS1019: Unexpected token, found ' '
(192,34): run-time error CSS1019: Unexpected token, found ' '
(192,34): run-time error CSS1042: Expected function, found ' '
(192,34): run-time error CSS1062: Expected semicolon or closing curly-brace, found ' '
(230,28): run-time error CSS1039: Token not allowed after unary operator: '-old-glory-blue'
(234,32): run-time error CSS1039: Token not allowed after unary operator: '-light-blue'
(248,28): run-time error CSS1039: Token not allowed after unary operator: '-slate-gray'
(249,28): run-time error CSS1039: Token not allowed after unary operator: '-light-gray'
(256,28): run-time error CSS1039: Token not allowed after unary operator: '-old-glory-blue'
(284,28): run-time error CSS1039: Token not allowed after unary operator: '-old-glory-blue'
(291,21): run-time error CSS1039: Token not allowed after unary operator: '-light-blue'
(292,32): run-time error CSS1039: Token not allowed after unary operator: '-old-glory-blue'
(309,39): run-time error CSS1039: Token not allowed after unary operator: '-old-glory-blue'
(319,28): run-time error CSS1039: Token not allowed after unary operator: '-old-glory-blue'
(331,32): run-time error CSS1039: Token not allowed after unary operator: '-light-blue'
(376,17): run-time error CSS1039: Token not allowed after unary operator: '-old-glory-blue'
(406,40): run-time error CSS1039: Token not allowed after unary operator: '-old-glory-blue'
(426,28): run-time error CSS1039: Token not allowed after unary operator: '-old-glory-blue'
(436,21): run-time error CSS1039: Token not allowed after unary operator: '-light-blue'
(446,28): run-time error CSS1039: Token not allowed after unary operator: '-old-glory-blue'
(447,34): run-time error CSS1019: Unexpected token, found ' '
(447,34): run-time error CSS1019: Unexpected token, found ' '
(447,34): run-time error CSS1042: Expected function, found ' '
(447,34): run-time error CSS1062: Expected semicolon or closing curly-brace, found ' '
(457,32): run-time error CSS1039: Token not allowed after unary operator: '-light-blue'
(468,28): run-time error CSS1039: Token not allowed after unary operator: '-old-glory-blue'
(497,28): run-time error CSS1039: Token not allowed after unary operator: '-light-blue'
(502,32): run-time error CSS1039: Token not allowed after unary operator: '-light-blue'
(503,21): run-time error CSS1039: Token not allowed after unary operator: '-old-glory-blue'
(517,39): run-time error CSS1039: Token not allowed after unary operator: '-light-blue'
(527,21): run-time error CSS1039: Token not allowed after unary operator: '-light-blue'
(567,17): run-time error CSS1039: Token not allowed after unary operator: '-old-glory-blue'
(568,28): run-time error CSS1039: Token not allowed after unary operator: '-faded-gray'
(599,28): run-time error CSS1039: Token not allowed after unary operator: '-light-gray'
(606,21): run-time error CSS1039: Token not allowed after unary operator: '-old-glory-blue'
(619,32): run-time error CSS1039: Token not allowed after unary operator: '-light-blue'
(632,28): run-time error CSS1039: Token not allowed after unary operator: '-old-glory-blue'
(649,28): run-time error CSS1039: Token not allowed after unary operator: '-old-glory-blue'
(666,28): run-time error CSS1039: Token not allowed after unary operator: '-old-glory-blue'
(679,17): run-time error CSS1039: Token not allowed after unary operator: '-old-glory-blue'
(686,21): run-time error CSS1039: Token not allowed after unary operator: '-light-blue'
(690,17): run-time error CSS1039: Token not allowed after unary operator: '-light-blue'
(697,21): run-time error CSS1039: Token not allowed after unary operator: '-old-glory-blue'
(701,17): run-time error CSS1039: Token not allowed after unary operator: '-old-glory-blue'
(712,17): run-time error CSS1039: Token not allowed after unary operator: '-old-glory-blue'
(724,21): run-time error CSS1039: Token not allowed after unary operator: '-light-blue'
(732,17): run-time error CSS1039: Token not allowed after unary operator: '-light-blue'
(739,17): run-time error CSS1039: Token not allowed after unary operator: '-light-blue'
(746,28): run-time error CSS1039: Token not allowed after unary operator: '-light-gray'
(750,17): run-time error CSS1039: Token not allowed after unary operator: '-old-glory-blue'
(784,28): run-time error CSS1039: Token not allowed after unary operator: '-old-glory-blue'
(785,35): run-time error CSS1019: Unexpected token, found ' '
(785,35): run-time error CSS1019: Unexpected token, found ' '
(785,35): run-time error CSS1042: Expected function, found ' '
(785,35): run-time error CSS1062: Expected semicolon or closing curly-brace, found ' '
(799,32): run-time error CSS1039: Token not allowed after unary operator: '-light-blue'
(803,32): run-time error CSS1039: Token not allowed after unary operator: '-light-blue'
(813,28): run-time error CSS1039: Token not allowed after unary operator: '-light-blue'
(816,28): run-time error CSS1039: Token not allowed after unary operator: '-slate-gray'
(833,28): run-time error CSS1039: Token not allowed after unary operator: '-light-gray'
(837,17): run-time error CSS1039: Token not allowed after unary operator: '-old-glory-blue'
(845,28): run-time error CSS1039: Token not allowed after unary operator: '-light-gray'
(849,17): run-time error CSS1039: Token not allowed after unary operator: '-light-blue'
(857,28): run-time error CSS1039: Token not allowed after unary operator: '-light-blue'
(865,28): run-time error CSS1039: Token not allowed after unary operator: '-light-gray'
(869,17): run-time error CSS1039: Token not allowed after unary operator: '-old-glory-blue'
(876,21): run-time error CSS1039: Token not allowed after unary operator: '-light-blue'
(885,32): run-time error CSS1039: Token not allowed after unary operator: '-light-blue'
(907,17): run-time error CSS1039: Token not allowed after unary operator: '-light-blue'
(914,28): run-time error CSS1039: Token not allowed after unary operator: '-light-gray'
(918,17): run-time error CSS1039: Token not allowed after unary operator: '-old-glory-blue'
(925,21): run-time error CSS1039: Token not allowed after unary operator: '-light-blue'
(934,32): run-time error CSS1039: Token not allowed after unary operator: '-light-blue'
(942,17): run-time error CSS1039: Token not allowed after unary operator: '-old-glory-blue'
(958,17): run-time error CSS1039: Token not allowed after unary operator: '-old-glory-blue'
(974,32): run-time error CSS1039: Token not allowed after unary operator: '-light-blue'
(1002,17): run-time error CSS1039: Token not allowed after unary operator: '-old-glory-blue'
(1007,70): run-time error CSS1039: Token not allowed after unary operator: '-light-gray'
(1011,33): run-time error CSS1039: Token not allowed after unary operator: '-light-blue'
(1068,34): run-time error CSS1019: Unexpected token, found ' '
(1068,34): run-time error CSS1019: Unexpected token, found ' '
(1068,34): run-time error CSS1042: Expected function, found ' '
(1068,34): run-time error CSS1062: Expected semicolon or closing curly-brace, found ' '
(1078,22): run-time error CSS1039: Token not allowed after unary operator: '-light-gray'
(1099,30): run-time error CSS1039: Token not allowed after unary operator: '-old-glory-blue'
(1218,32): run-time error CSS1039: Token not allowed after unary operator: '-faded-gray'
(1225,28): run-time error CSS1039: Token not allowed after unary operator: '-old-glory-blue'
 */
/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*                                                                                                 GLOBAL                                                                                                                             */
/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
:root {
    --old-glory-blue: #003e7e;
    --dark-blue: #0b2744;
    --faded-gray: #d8d9da;
    --light-gray: #f1f3f6;
    --slate-gray: #68778b;
    --light-blue: #7aa1cb;
}


* {
    box-sizing: border-box;
    font-family: 'Lato', Courier, monospace;
}

html {
    font-size: 62.5%;
    height: 100%;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

body {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 68px 38px repeat(9, 1fr) 20px;
    background-color: #fff;
    color: var(--old-glory-blue);
    font-size: clamp(1rem, 1rem + 1.75vw, 1.6rem);
}


.col-span-12 {
    grid-column: 1/13;
}


.hidden {
    display: none;
}

.relative {
    position: relative;
}

.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.flex-all-center {
    justify-content: center;
    align-items: center;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-row {
    flex-direction: row;
}

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

.content-center {
    justify-content: center;
}

.items-center {
    align-items: center;
}

.justify-space-around {
    justify-content: space-around;
}

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

.flex-1 {
    flex: 1;
}

.overflow-auto {
    overflow: auto;
}

.margin-none {
    margin: 0;
}

.background-glory-blue {
    background-color: var(--old-glory-blue);
}

.background-light-blue {
    background-color: var(--light-blue);
}

.hover-color-light-blue:hover {
    color: var(--light-blue)
}

.color-glory-blue {
    color: var(--old-glory-blue);
}

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

.color-white {
    color: white;
}

.w-full {
    width: 100%;
}

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

.absolute {
    position: absolute;
}

.h-full {
    height: 100%;
}

.featured, .sidenav {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
}



a {
    outline: none;
    padding-left: 3px;
    padding-right: 3px;
    color: white;
    text-decoration: none;
    font-weight: 700;
}

p {
    margin: 0;
}



h1, h2, h3, h4, h5, h6 {
    margin: 0;
}

/*---------------------------------------------------------- */
/* TYPOGRAPHY */
/* ---------------------------------------------------------- */

h2 { /* Titles */
    font-size: clamp(2.2rem, 1rem + 1.75vw, 3rem);
    font-weight: bold;
}

h3, label { /* Sub-titles */
    font-size: clamp(1.2rem, 1rem + 1.75vw, 2rem);
    font-weight: 600;
    margin-bottom: 4px;
    display: inline-block;
}

.label-inline {
    font-size: clamp(1rem, 1rem + 1.75vw, 1.8rem);
    font-weight: normal;
    display: inline;
}


/*---------------------------------------------------------- */
/* CONTAINERS */
/* ---------------------------------------------------------- */

.page-container {
    height: 100%;
    width: 100%;
    overflow-y: auto;
}

.fixed-container {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

/*---------------------------------------------------------- */
/* SCROLLBAR */
/* ---------------------------------------------------------- */


*::-webkit-scrollbar {
    height: 6px;
    border-radius: 10px;
    transition-duration: 150ms;
    width: 6px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: var(--old-glory-blue);
}

    ::-webkit-scrollbar-thumb:hover {
        background-color: var(--light-blue);
    }

/*---------------------------------------------------------- */
/* JQUERY UI */
/* ---------------------------------------------------------- */

.ui-dialog {
    width: 95% !important;
    height: fit-content !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    position: fixed !important;
    border: 1px solid var(--slate-gray) !important;
    background-color: var(--light-gray) !important;
    border-radius: 4px !important;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px !important;
}

.ui-dialog-titlebar {
    padding: 5px !important;
    background-color: var(--old-glory-blue) !important;
}

.ui-dialog-title {
    font-size: 1.8rem !important;
}

/*.ui-dialog-content, .ui-widget-content {
    height: 100% !important;
    width: 100% !important;
    overflow: auto;
}

    .ui-dialog-content div, .ui-widget-content div {
        overflow: auto;
        width: 100% !important;
    }*/

ui-dialog-titlebar-close {
    border: none !important;
    background-color: none !important;
    color: white !important;
    margin: 0 !important;
    padding: 0 !important;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    padding: 0 2px !important;
    background-color: var(--old-glory-blue) !important;
    border: none !important;
    border-style: none !important;
    color: white !important;
}

    .ui-state-default:hover {
        color: var(--light-blue) !important;
        background-color: var(--old-glory-blue) !important;
    }

#secondaryNotesDiv {
    display: flex;
    flex-direction: column;
    gap: 6px;
}


    #secondaryNotesDiv textarea {
        width: 100% !important;
        height: 100% !important;
        min-height: 300px;
    }

        #secondaryNotesDiv textarea:focus-visible {
            outline: 0.5px solid var(--old-glory-blue);
        }

.ui-dialog button {
    align-self: flex-end !important;
    width: fit-content;
    padding: 4px;
    font-size: 1.4rem;
    color: white;
    text-decoration: none;
    background-color: var(--old-glory-blue);
    border-radius: 5px;
    font-weight: 700;
    letter-spacing: 0.7px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
    transition: 200ms all ease-in-out;
    border: none;
    cursor: pointer;
    white-space: nowrap;
}

    .ui-dialog button:hover {
        background-color: var(--light-blue);
    }


#secondaryNotesDiv button {
    align-self: flex-end !important;
    width: fit-content;
    padding: 4px;
    font-size: 1.4rem;
}

@media screen and (min-width: 600px) {
    .ui-dialog, .ui-resizable {
        width: 80% !important;
        height: fit-content !important;
    }
}

@media screen and (min-width: 800px) {
    .ui-dialog, .ui-resizable {
        width: 70% !important;
    }
}

@media screen and (min-width: 950px) {
    .ui-dialog, .ui-resizable {
        width: 50% !important;
        height: fit-content !important;
    }
}
/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*                                                                                                 LAYOUT                                                                                                                             */
/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------*/
/*             HEADER               */
/*----------------------------------*/
header {
    grid-row: 1;
    background-color: white;
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 5px 15px;
    color: var(--old-glory-blue);
    height: 100%;
}

.header-logo-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
}

.header-logo {
    color: white;
    height: auto;
    width: clamp(7rem, 27vw, 15rem);
}

/* HEADER LOGO APPEAR/HIDE DEPENDING ON SCREEN SIZE*/
.lone-star-header-logo {
    display: none;
    width: clamp(6rem, 23vw, 11rem);
}

@media screen and (min-width: 500px) {

    .lone-star-header-logo {
        display: block;
    }

    .divider-horizontal {
        border-right: 2.5px solid var(--old-glory-blue);
        height: 30px;
        width: 1px;
    }
}


.user-nav-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-icon-frame {
    width: 30px;
    height: 30px;
    position: relative;
}

.user-icon {
    background-color: var(--old-glory-blue);
    line-height: 30px;
    cursor: pointer;
}

    .user-icon i {
        transition: all 150ms ease-in-out;
    }

    .user-icon:hover i {
        color: var(--light-blue);
    }

.login-nav {
    position: relative; /* Dropdown hooks onto container*/
}

.header-nav-btn {
    color: white;
    text-decoration: none;
    background-color: var(--old-glory-blue);
    font-size: clamp(.1rem, 2vw + .4rem, 1.6rem);
    border-radius: 5px;
    font-weight: 700;
    letter-spacing: .7px;
    padding: 6px 15px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
    transition: 200ms all ease-in-out;
}

    .header-nav-btn:hover {
        background-color: var(--light-blue);
    }


/*----------------------------------*/
/*             NAV-BAR               */
/*----------------------------------*/
nav {
    grid-row: 2;
    position: relative;
    padding: 6px 20px;
    background-color: var(--old-glory-blue);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 1));
    height: 100%;
}

    nav .active {
        font-weight: bold;
    }


/* NAV BAR NAVIGATION LINKS */

.nav-links {
    flex: 1;
    display: flex;
    gap: 20px;
    align-items: center;
    flex-direction: row;
}

.return-btn {
    height: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--light-blue) !important;
    color: white !important;
}

    .return-btn:hover {
        background-color: var(--light-blue);
        color: var(--old-glory-blue) !important;
    }

.nav-bar-link {
    font-weight: 400;
    position: relative;
}

    .nav-bar-link::after {
        position: absolute;
        left: 0;
        top: 27px;
        content: '';
        width: 100%;
        border-bottom: solid 1px var(--light-blue);
        transform: scaleX(0);
        transition: 250ms ease-in-out;
    }

    .nav-bar-link:hover::after {
        transform: scaleX(1);
    }

    .nav-bar-link:hover {
        color: var(--light-blue);
    }


.active:hover {
    color: white;
}

.active::after {
    transform: scaleX(1);
    border-bottom: solid 1px white;
    transition: 0ms;
}



/*----------------------------------*/
/*             BODY               */
/*----------------------------------*/

main {
    grid-row: 3/12;
    height: 100%;
}

.content-full-row {
    grid-row: 2/12;
    height: 100%;
}

.content-nav-deducted-row {
    grid-row: 3/12;
    height: 100%;
}

/*----------------------------------*/
/*             FOOTER               */
/*----------------------------------*/
footer {
    grid-row: 12;
    color: var(--old-glory-blue);
    background-color: var(--faded-gray);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 2px clamp(1px, 2vh, 13px);
    align-items: center;
    font-size: clamp(1px, 2vh, 13px);
    height: 100%;
}

.footer-logo {
    width: auto;
    height: clamp(1px, 2vh, 13px);
}



/*----------------------------------*/
/*             DESKTOP-DROPDOWN     */
/*----------------------------------*/
.dropdown-container {
    position: relative;
    display: inline-block;
}

.dropdown-options {
    display: none;
    flex-direction: column;
    position: absolute;
    left: -120px;
    top: 30px;
    background-color: var(--light-gray);
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 6;
}

    .dropdown-options a {
        color: var(--old-glory-blue);
        text-decoration: none;
        display: block;
        font-weight: 400;
        padding: 12px 16px;
    }

    .dropdown-options form {
        margin: 0;
    }

    /* Change color of dropdown links on hover */
    .dropdown-options a:hover {
        background-color: var(--light-blue);
    }

.dropdown-container:hover .dropdown-options {
    display: flex;
}


/*----------------------------------*/
/*             MOBILE-DROPWDOWN               */
/*----------------------------------*/
.nav-icon-mobile {
    font-size: 20px;
    background-color: var(--old-glory-blue);
    transition: 250ms ease-in-out;
    color: white;
}

.dropdown-options-mobile {
    display: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 12px;
    padding: 12px;
    color: white;
    position: fixed;
    width: 100%;
    left: 0;
    top: 106px;
    background-color: var(--old-glory-blue);
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 3;
}


    .dropdown-options-mobile a {
        color: white;
        background-color: rgba(0,0,0,0);
        text-decoration: none;
        display: inline-block;
        font-weight: 400;
        overflow: hidden;
        line-height: 1em;
    }

.dropdown-hover-animation-mobile {
    background-color: var(--old-glory-blue);
    transition: 200ms all ease-in-out;
}

/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*                                                                                                 CONTROLS/ELEMENTS                                                                                                                           */
/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*---------------------------------------------------------- */
/* LINKS */
/* ---------------------------------------------------------- */

.link {
    color: var(--old-glory-blue);
    text-decoration: none;
    transition: 150ms all ease-in-out;
    cursor: pointer;
}

    .link:hover {
        color: var(--light-blue);
    }

.inactive-link {
    color: var(--light-blue);
    text-decoration: none;
    transition: 150ms all ease-in-out;
    cursor: pointer;
}

    .inactive-link:hover {
        color: var(--old-glory-blue);
    }

.active-link {
    color: var(--old-glory-blue);
    font-weight: bold;
    cursor: default;
}


/*---------------------------------------------------------- */
/* ICONS */
/* ---------------------------------------------------------- */

.icon-link {
    color: var(--old-glory-blue);
    cursor: pointer;
    font-size: 14px;
    transition: 150ms all ease-in-out;
}

.icon-link-reg {
    font-style: normal;
    transition: 150ms all ease-in-out;
}

    .icon-link-reg:hover {
        color: var(--light-blue);
    }

.icon-link::before {
    transition: 150ms all ease-in-out;
}

.icon-link:hover::before {
    color: var(--light-blue);
}



.disabled-icon {
    opacity: 70%;
    color: var(--light-blue);
    cursor: default;
}

.select {
    width: 100%;
    height: clamp(1.25rem, 3vh, 3rem);
    background-color: var(--light-gray);
    border: 1px solid #858585;
    padding-left: 10px;
    border-radius: 3px;
    color: var(--old-glory-blue);
    font-size: 16px;
    line-height: 40px;
    transition: 50ms all ease-in-out;
}

.edit-icon::before {
    content: '';
}

.download-icon::before {
    content: '';
}

.delete-icon::before {
    content: '';
}

.plus-icon::before {
    content: '+';
}

.BrowserTab::before {
    content: '';
}


/*---------------------------------------------------------- */
/* BUTTONS */
/* ---------------------------------------------------------- */

.btn {
    color: white;
    text-decoration: none;
    background-color: var(--old-glory-blue);
    font-size: clamp(1.1rem, 3vw + 1rem, 1.6rem);
    border-radius: 5px;
    font-weight: 700;
    letter-spacing: 0.7px;
    padding: 8px 15px; /* More top padding or less? */
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
    margin: 10px;
    transition: 200ms all ease-in-out;
    border: none;
    cursor: pointer;
    white-space: nowrap;
}

    .btn:hover {
        background-color: var(--light-blue);
    }

    .btn:disabled {
        background-color: var(--light-blue);
    }

/*Modal btns are slightly larger*/
.modal-btn {
    padding-left: 60px;
    padding-right: 60px;
}

.btn-inactive {
    background-color: var(--light-blue);
    pointer-events: none;
    cursor: default;
    border: 1px solid var(--slate-gray);
}

/*---------------------------------------------------------- */
/* INPUTS */
/* ---------------------------------------------------------- */

/*Wrapper For input and icon*/
.input-container {
    position: relative;
    width: clamp(10rem, 40vw, 50rem);
}


.textbox {
    width: 100%;
    height: 45px;
    background-color: var(--light-gray);
    border: 1px solid #858585;
    padding: 0 0 0 24px;
    border-radius: 3px;
    color: var(--old-glory-blue) !important;
    font-size: 16px;
    /*line-height: 40px;*/
    transition: 100ms all ease-in-out;
}

.textbox-style-enforced {
    height: 45px !important;
    background-color: var(--light-gray) !important;
}

.textbox::placeholder {
    color: var(--light-blue);
    font-weight: 700;
    letter-spacing: 1.2px;
    opacity: 50%;
    transform: translate3d(0,2px,0)
}

.textbox:focus {
    border: 1px solid var(--light-blue);
    outline: none;
    background-color: #fff;
}

[type='text'], [type='tel'], [type='email'], [type='datetime'] {
    width: 100%;
    height: 45px;
    background-color: var(--light-gray);
    border: 1px solid #858585;
    padding: 0 0 0 24px;
    border-radius: 3px;
    color: var(--old-glory-blue) !important;
    font-size: 16px;
    /*line-height: 40px;*/
    transition: 100ms all ease-in-out;
}

    [type='text']::placeholder, [type='tel']::placeholder, [type='email']::placeholder, [type='datetime']::placeholder {
        color: var(--light-blue);
        font-weight: 700;
        letter-spacing: 1.2px;
        opacity: 50%;
        transform: translate3d(0,2px,0)
    }


    [type='text']:focus, [type='tel']:focus, [type='email']:focus, [type='datetime']:focus {
        border: 1px solid var(--light-blue);
        outline: none;
        background-color: #fff;
    }

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    opacity: 1;
}


/* Textbox Icon, the icon is actually contained within ::before psuedo-element */
.textbox-icon::before {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #858585;
}

.disabled-textbox {
    opacity: 70%;
    color: var(--light-blue) !important;
    cursor: default;
}

[type='text'], [type='tel'], [type='email'], [type='datetime'] {
    width: 100%;
    height: 45px;
    background-color: var(--light-gray);
    border: 1px solid #858585;
    padding: 0 0 0 24px;
    border-radius: 3px;
    color: var(--old-glory-blue) !important;
    font-size: 16px;
    /*line-height: 40px;*/
    transition: 100ms all ease-in-out;
}

    [type='text']::placeholder, [type='tel']::placeholder, [type='email']::placeholder, [type='datetime']::placeholder {
        color: var(--light-blue);
        font-weight: 700;
        letter-spacing: 1.2px;
        opacity: 50%;
        transform: translate3d(0,2px,0)
    }


    [type='text']:focus, [type='tel']:focus, [type='email']:focus, [type='datetime']:focus {
        border: 1px solid var(--light-blue);
        outline: none;
        background-color: #fff;
    }

[type='checkbox'] {
    width: clamp(1.75rem, 1vw, 3rem);
    height: clamp(1.75rem, 1vw, 3rem);
    color: var(--old-glory-blue);
    vertical-align: middle;
    -webkit-appearance: none;
    background: none;
    border: 0;
    outline: 0;
    flex-grow: 0;
    border-radius: 0%;
    background-color: white;
    transition: background 300ms;
    cursor: pointer;
}

[type='radio'] {
    width: clamp(1.75rem, 1vw, 3rem);
    height: clamp(1.75rem, 1vw, 3rem);
    color: var(--old-glory-blue);
    vertical-align: middle;
    -webkit-appearance: none;
    background: none;
    border: 0;
    outline: 0;
    flex-grow: 0;
    border-radius: 50%;
    background-color: white;
    transition: background 300ms;
    cursor: pointer;
}



    [type='checkbox']:hover, [type='radio']:hover {
        background-color: var(--light-blue);
    }


    [type='checkbox']::before, [type='radio']::before {
        content: "";
        color: transparent;
        display: block;
        width: inherit;
        height: inherit;
        border-radius: inherit;
        border: 0;
        background-color: transparent;
        background-size: contain;
        box-shadow: inset 0 0 0 1px #CCD3D8;
    }

    [type='checkbox']:checked, [type='radio']:checked {
        background-color: currentcolor;
    }

select {
    width: 100%;
    padding: 5px 35px 5px 5px;
    font-size: 16px;
    height: 35px;
    border: 1px solid #858585;
    border-radius: 3px;
    color: var(--old-glory-blue) !important;
    transition: 100ms all ease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: url('./images/dropdown-icon.png') 98% no-repeat var(--light-gray);
}

    select:focus-visible {
        outline: 1px solid var(--light-blue);
        background: url('./images/dropdown-icon.png') 98% no-repeat #fff;
    }

    /* CAUTION: IE hackery ahead */
    select::-ms-expand {
        display: none; /* remove default arrow on ie10 and ie11 */
    }

/* target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
    select {
        background: none\9;
        padding: 5px\9;
    }
}



/*---------------------------------------------------------- */
/* FORM */
/* ---------------------------------------------------------- */

form {
    margin: 0;
}

fieldset {
    border: 0 none;
    padding: 0;
    margin: 0;
}

legend {
    display: none;
}

select {
    width: 100%;
}

.form-container {
    width: 100%;
    height: 100%;
}

.form-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}


.edit-form {
    position: relative;
    font-size: clamp(1rem, 1rem + 1.75vw, 1.8rem);
    width: 95%;
    height: 98%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    border-radius: 4px;
    overflow: auto;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    border: 1px var(--light-gray) solid;
    padding: 20px 10px;
    gap: 12px;
}


    .edit-form fieldset {
        width: 95%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 8px;
    }


.form-group {
    width: 100%;
}

.form-options-divider {
    border: 0.5px solid var(--old-glory-blue);
    margin-bottom: 4px;
    margin-top: 4px;
}

.same-line-field {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
}

.field {
    width: 100%;
}


.field-group {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 2px;
}

@media screen and (min-height: 800px) {
    .edit-form {
        height: 94%;
    }

        .edit-form fieldset {
            gap: 20px;
        }
}

.field-validation-error {
    color: red;
}

.field-validation-valid {
    display: none;
}
/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*                                                                                                 COMPONENTS                                                                                                                           */
/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------- */
/* TABLE */
/* ---------------------------------------------------------- */
.table {
    margin: auto;
    width: 100%;
    table-layout: fixed;
}

    .table th {
        color: black;
        border-bottom: 1px solid #D8D9DA;
        height: 18px;
        font-size: 13px;
        text-align: center;
        font-weight: normal;
    }

    .table td {
        border-bottom: 1px solid #D8D9DA;
        font-size: 13px;
        font-weight: 400;
        color: #858585;
        height: 18px;
        text-align: center;
        word-wrap: break-word;
    }

    .table tr {
        height: 30px;
    }





/*---------------------------------------------------------- */
/* SLIDER */
/* ---------------------------------------------------------- */

/* The checkbox container */
.slider-container {
    display: inline-block;
    position: relative;
    cursor: pointer;
    user-select: none;
    width: 51px;
    height: 25px;
}

    /* Hide the default checkbox */
    .slider-container input {
        display: none;
    }

/* The slider */
.slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: white;
    transition: .4s;
    border-radius: 34px;
}

    /* The slider round knob */
    .slider:before {
        position: absolute;
        content: "";
        height: 23px;
        width: 23px;
        left: 1px;
        bottom: 1px;
        background-color: var(--faded-gray);
        transition: .4s;
        border-radius: 50%;
    }

/* Checkbox checked state */
.slider-container input:checked + .slider {
    background-color: var(--old-glory-blue);
}

    /* Slider knob position when checked */
    .slider-container input:checked + .slider:before {
        transform: translateX(26px);
    }



/* Used in the brainstorm pages*/
.strikeout td {
    color: #646464;
    background-color: #ffeded;
    text-decoration: line-through;
}

.strikeout tr {
    color: #646464;
    background-color: #ffeded;
    text-decoration: line-through;
    border-left: #c43c35 8px solid;
}