:root {
    /*** root colors ***/
    --cs-primary: #A26944;
    --cs-banner: #F5EEF7;
    --cs-primary-text: #890EA8;
    --cs-primary-dark: #824934;
    --cs-primary-light: #C289564;
    /*** Standard font, space, shadow apply across app ***/
    --cs-font: Inter, Arial, sans-serif;
    --space-xs: 4px;
    --space-s: 8px;
    --space-m: 16px;
    --space-l: 24px;
    --space-xl: 32px;
    --space-xxl: 40px;
    --space-xxxl: 48px;
    --space-super: 64px;
    --space-mega: 80px;
    --shadow-s: 0px 1px 8px var(--bs-gray-100);
    --shadow-m: 0px 4px 12px var(--bs-gray-200);
    --shadow-l: 0px 6px 24px var(--bs-gray-300);
}

.row {
    padding-bottom: 15px;
}

tr {
    border-bottom: 1px solid var(--bs-gray-300);
 
}
tr:hover{
    background-color: var(--bs-gray-200);
}
td {
    padding-right: 25px;
    padding-bottom: 10px;
    padding-top: 10px;

}
th{
    padding-right: 25px;
    padding-bottom: 10px;
    padding-top:10px;
    text-align:left;
}

html {
    position: relative;
    min-height: 100%;
}


body {
    font-family: var(--cs-font);
    font-size: 15px;
    color: var(--bs-gray-700);
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
}

.container {
    padding: var(--space-m);
}

/*** Logo styling ***/
.navbar-brand {
    font-weight: 600;
    color: var(--cs-primary) !important;
    font-size: 1.2em;
}

    .navbar-brand img {
        height: 60px;
        margin-right: 4px;
    }

span.username {
    font-weight: 600;
}

/*** Responsive Menu ***/
.navbar-toggler {
    padding: .25rem .25rem;
}

.navbar-light .navbar-toggler {
    font-size: 1.1em;
    border: 0;
}

.nav-link:focus, .nav-link:hover {
    color: var(--cs-primary) !important;
}

/*** Links and button styling ***/
a {
    color: var(--cs-primary-text);
}

    a:hover {
        color: var(--cs-primary-dark);
    }

.btn {
    margin: 0 2px;
}

.btn-primary {
    background-color: var(--cs-primary);
    border-color: var(--cs-primary);
}

    .btn-primary:hover {
        background-color: var(--cs-primary-dark);
        border-color: var(--cs-primary-text);
    }

    .btn-check:focus + .btn-primary, .btn-primary:focus {
        color: #fff;
        background-color: var(--cs-primary);
        border-color: var(--cs-primary);
        box-shadow: 0 0 0 .25rem rgba(49, 132, 253, .5);
    }

.btn:focus, .btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--cs-primary-light) !important;
}

.btn-check:active + .btn-primary,
.btn-check:checked + .btn-primary,
.btn-primary.active,
.btn-primary:active,
.show > .btn-primary.dropdown-toggle {
    background-color: var(--cs-primary-dark);
    border-color: var(--cs-primary-dark);
}

    .btn-check:active + .btn-primary:focus,
    .btn-check:checked + .btn-primary:focus, .btn-primary.active:focus,
    .btn-primary:active:focus,
    .show > .btn-primary.dropdown-toggle:focus {
        box-shadow: 0 0 0 .25rem rgba(128,128,128,.5)
    }

.btn-primary.disabled,
.btn-primary:disabled {
    color: #fff;
    background-color: var(--cs-primary);
    border-color: var(--cs-primary);
}

/*** Calendar ***/

.day a {
    text-decoration: none;
}

    .day a:hover {
        text-decoration: underline;
    }

.hk_event {
    border: 1px solid #106010;
    color: #106010;
    background-color: #D0FFD0;
    font-size: 10px;
}

.hk_display {
    overflow: hidden;
    max-height: 45px;
}

.cas_event {
    border: 1px solid #601010;
    color: #601010;
    background-color: #FFD0D0;
    font-size: 10px;
}

.cas_display {
    overflow: hidden;
    max-height: 22px;
}

.tsk_event {
    border: 1px solid #101090;
    color: #101090;
    background-color: #ccccff;
    font-size: 10px;
}

.tsk_display {
    overflow: hidden;
    max-height: 22px;
}

.calendar_link {
    text-decoration: underline;
    cursor: pointer;
}

.day {
    border: 1px solid var(--bs-gray-400);
    width: 180px;
    height: 180px;
    display: inline-block;
    padding: 6px;
}

.spacer {
    width: 150px;
    height: 150px;
    display: inline-block;
}

@media screen and (max-width: 1200px) {

    .day {
        width: 110px;
        height: 130px;
    }

    .spacer {
        width: 110px;
        height: 130px;
    }
}

@media screen and (max-width: 1000px) {

    .spacer {
        display: none;
    }

    .day {
        width: 100%;
    }
}



/*** Form ***/
button, input, optgroup, select, textarea {
    margin: 0 0 4px 0;
}

label {
    margin-bottom: var(--space-xs);
    font-weight: 500;
    display: inline;
    color: var(--bs-gray-600);
    font-size: 14px;
}

legend {
    font-weight: 600;
    margin-bottom: 12px;
}

input[type="checkbox"], input[type="radio"] {
    transform: scale(1.4);
    margin: 0 4px;
}

.form-control, .form-select {
    border: 1px solid var(--bs-gray-500);
    margin-bottom: 8px;
    width: 99%;
}

    .form-control:focus, .form-select:focus {
        border-color: var(--bs-gray-900);
    }

.form-group {
    margin-bottom: var(--space-xs);
}


fieldset {
    border-bottom: 4px solid var(--bs-gray-200);
    padding: var(--space-s) 0;
}

/*** Table ***/
tbody#body_gridcontainer > tr:hover {
    cursor: pointer;
}

/*** History ***/
.history-item {
    align-items: normal;
    gap: 10px !important;
    display: flex;
    margin-bottom: var(--space-xs);
}

    .history-item a {
        text-decoration: none;
        color: var(--bs-gray-700);
    }

        .history-item a:hover {
            text-decoration: underline;
        }

/*** Footer ***/
footer {
    padding: var(--space-m) 0;
    background: var(--bs-gray-100);
}



@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}
#errorflash {
    border: solid 1px #CC0000;
    background-color: #FFd5d5;
    padding: 5px;
}

#successflash {
    border: solid 1px #00CC00;
    background-color: #d5ffd5;
    padding: 5px;
}
option:disabled {
    font-style: italic;
    background-color:#eee;
}
.footerspacer{
    width:100%;
    clear:both;
    height:150px;
}
#impersonation{   
    top:0;
    left:0;
    width:100%;
    background-color:#800;
    z-index:1000;
    color:#fff;
    text-align:center;
    padding-top:10px;
    padding-bottom:10px;
}
#impersonation a {
    color:#fff;
    text-decoration:underline;
}