/*!
    * locations-manager.css
    * By: Kassandra Schmidt
    * Updated On: 2022-04-22
    * Description: Custom CSS for the PTO Management Screen
 */

/*!
    16px = 1em (generally)

 */

:root {
    --brandBlue: #00ABBA;
    --brandBlueLight: #F4F9FC;
    --brandGreyDark: #CAC8C8;
    --brandGreyLight: #E6E7E8;
    --brandWhite: #FDFDFD;
    --customLocation: #B3C6FF;
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: absolute; /* Stay in place fixed */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 150%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(200,200,200,0.5); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 1% auto; /* 15% from the top and centered */
    padding: 20px;
    margin-top: 350px;
    border: 1px solid #888;
    font-weight: bold;
    align-content: center;
    width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
    color: rgb(50,50,50);
    float: none;
    font-size: 20px;
    font-weight: bold;
}

    .close:hover,
    .close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }

.underline-on-hover:hover {
    text-decoration: underline;
}

.master-container > * { /*! All elements less than (children of) the master container  */
    padding: 1em;
}

.header-container {
    background-color: var(--brandWhite);
    padding-bottom: 0.5em;
    padding-top: 0.5em;
    width: 100%;
    z-index: 9999;
}

.body-container {
}

.header-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.logo-container {
    max-width: 15em;
    order: 1;
    padding-bottom: 0.5em;
}

.logo {
    max-width: 15em;
}

.header-filter-container {
    display: inherit;
    order: 2;
    padding-left: 0.5em;
    padding-right: 0.5em;
}

.select-employee {
    display: flex;
    align-items: center;
    padding-left: 0.5em;
    padding-bottom: 0.5em;
}

.span-label {
    font-size: 1em;
    font-weight: bold;
    padding-left: 0.5em;
    padding-right: 0.5em;
}

/* bootstrap-select: To Add Borders & Control Font Size */
.btn.dropdown-toggle.btn-light {
    font-size: 0.75em;
    border-color: #000000;
    height: 36px;
}

.filter-option-inner-inner {
    padding-top: 2px;
}

.uniform-width {
    min-width: 200px;
    min-height: 36px;
    border: 1px solid #000000;
}

.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
    min-height: 36px;
    min-width: 200px;
}

.select-status {
    display: flex;
    align-items: center;
    padding-left: 0.5em;
    padding-right: 0.5em;
    padding-bottom: 0.5em;
}

.pto-calendar {
    display: inline;
    min-width: 15em;
    order: 3;
    text-align: right;
}

.icon {
    max-height: 2em;
}

.employee-info {
    font-size: 1.5em;
    font-weight: bold;
}

.current-employee-container {
    margin: auto;
    text-align: center;
}

.employee-name {
    order: 1;
}

.benefits-date {
    order: 2;
}

.as-of-date {
    order: 3;
    text-align: right;
}

#client-data-row::after {
    content: '';
    width: 100%;
    height: 2px;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: var(--brandGreyDark);
    box-shadow: 0 0 1px;
}

.body-row-container-form {
    display: flex;
    flex-wrap: wrap;
}

.body-row-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.table-header-container-1, .table-header-container-2 {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    padding-top: 0.5em;
    width: 48%;
}

.table-container-1, .table-container-2 {
    display: flex;
    height: auto;
    padding-top: 0.5em;
    width: 100%;
}

.first-row-h3 {
    padding-top: 0.5em;
}

.h3-brand-compliant {
    padding-top: 2em;
    padding-bottom: 0.5em;
    display: flex;
}

    .h3-brand-compliant h3 {
        color: var(--brandBlue);
        font-weight: bold;
        margin: 0px 0px 0px;
    }

.span-tooltip {
    display: inline;
    position: relative;
}

    .span-tooltip .tooltip-source {
        cursor: pointer;
        max-height: 2em;
        padding-left: 1em;
    }

    .span-tooltip:hover .tooltip-source::after {
        pointer-events: auto
    }

    .span-tooltip .tooltip-content {
        position: absolute;
        z-index: 99991;
        width: 384px;
        right: 10%;
        margin: 0 10px 0 -475px;
        top: 100%;
        text-align: right;
        font-size: 14px;
        line-height: 18px;
        -webkit-box-shadow: -5px -5px 15px rgba(48, 54, 61, 0.2);
        box-shadow: -5px -5px 15px rgba(48, 54, 61, 0.2);
        background: var(--customLocation);
        opacity: 0;
        cursor: default;
        pointer-events: none;
        padding: 0px;
    }

        /*Arrow */
        .span-tooltip .tooltip-content::after {
            content: '';
            bottom: 100%;
            border: solid;
            height: 0;
            width: 0;
            left: 50%;
            margin: 0 0 -10px -2px;
            position: absolute;
            pointer-events: none;
            border-color: var(--customLocation) transparent transparent;
            border-width: 10px;
        }

    /* Final Tooltip*/

    /* .span-tooltip .tooltip-content-checkbox {
        position: absolute;
        z-index: 99991;
        width: 550px;
        right: 100%;
        text-align: left;
        font-size: 14px;
        line-height: 30px;
        -webkit-box-shadow: -5px -5px 15px rgba(48, 54, 61, 0.2);
        box-shadow: -5px -5px 15px rgba(48, 54, 61, 0.2);
        background: var(--customLocation);
        opacity: 0;
        cursor: default;
        pointer-events: none;
        margin: -18px -6px 0 0;
    }*/

    .span-tooltip:hover .tooltip-content, .span-tooltip:hover .tooltip-content-checkbox {
        pointer-events: auto;
        opacity: 1;
    }

.tooltip-content-checkbox::after {
    content: '';
    border: solid;
    top: 15%;
    height: 0;
    width: 0;
    left: 100%;
    margin: 12px 0 0 -10px;
    position: absolute;
    pointer-events: none;
    border-color: var(--brandGreyDark) transparent transparent;
    border-width: 1px;
    transform: rotate(90deg);
}

.span-tooltip .tooltip-text {
    font-size: 0.8rem;
    display: block;
    padding: 0em;
}

.loc-table {
    height: fit-content;
    max-height: 450px;
    overflow-y: scroll;
    text-align: center;
    width: 100%;
    border: 2px solid var(--brandGreyDark);
}

.loc-table-no-scroll {
    height: fit-content;
    max-height: 450px;
    text-align: center;
    width: 100%;
    border: 0 solid var(--brandGreyDark);
}

.loc-table-2 {
    height: fit-content;
    max-height: 450px;
    overflow-y: scroll;
    text-align: center;
    width: 60%;
    border: 2px solid var(--brandGreyDark);
}

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}


tr {
    border: 1px solid var(--brandGreyDark);
}

.loc-table th {
    border: 1px solid var(--brandGreyDark);
    background-color: var(--brandGreyLight);
    padding: 0.25em;
    position: sticky;
    top: 0;
}

td {
    background-color: var(--brandWhite);
    border: 1px solid var(--brandGreyDark);
    padding: 0.25em;
}

.btn-extensis {
    border-color: var(--brandBlue);
    border-radius: 1em;
    font-size: large;
    width: 10em;
}

.btn-extensis-disabled {
    background-color: var(--brandGreyLight);
}

.btn-save {
    background-color: var(--brandBlue);
    color: var(--brandWhite);
}

.btn-cancel {
    background-color: var(--brandWhite);
    color: var(--brandBlue);
}

.th-sticky {
    position: sticky;
    left: 0;
    z-index: 999;
}

.td-sticky {
    position: sticky;
    left: 0;
}

.comment-area {
    resize: none;
}

.submission-message-conatiner {
    width: 100%;
}

.submission-message {
    color: red;
    font-size: larger;
    font-weight: bold;
}

.form-header-container-1 {
    display: flex;
    flex-wrap: wrap;
    padding-top: 0.5em;
    width: 33%;
}

.form-header-container-2 {
    display: flex;
    flex-wrap: wrap;
    padding-left: 4px;
    padding-right: 4px;
    padding-top: 0.5em;
    width: 32%;
}

.form-header-container-3 {
    display: flex;
    flex-wrap: wrap;
    padding-top: 0.5em;
    width: 34%;
}

.form-container-1 {
    align-items: start;
    display: flex;
    padding-top: 0.5em;
    width: 33%;
}

.form-container-2 {
    align-items: start;
    display: flex;
    padding-left: 4px;
    padding-right: 4px;
    padding-top: 0.5em;
    width: 32%;
}

.form-container-3 {
    align-items: start;
    display: flex;
    padding-top: 0.5em;
    width: 34%;
}

.form-container {
    border: 1px solid var(--brandGreyDark);
    padding-bottom: 0.5em;
    width: 100%;
}

.form-row-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-left: 0.5em;
    padding-right: 1em;
}

.form-left-container, .form-right-container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    padding-top: 0.5em;
}

.checkbox-scale {
    height: 1.5em;
    width: 1.5em;
}

.form-spacer-row {
    height: 44px;
    padding-top: 1em;
}

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

.cancel-container {
    padding-left: 1em;
}

.datepicker.datepicker-dropdown.dropdown-menu.datepicker-orient-left.datepicker-orient-top {
    z-index: 1000 !important;
}

.button {
    display: block;
    width: 115px;
    height: 25px;
    background: #4E9CAF;
    padding: 10px;
    text-align: center;
    border-radius: 5px;
    color: white;
    font-weight: bold;
    line-height: 25px;
}

@media screen and (max-width: 1400px) {
    .form-header-container-1, .form-header-container-2, .form-header-container-3 {
        flex-direction: column;
    }

    .form-header-container-1, .form-header-container-2, .form-container-1, .form-container-2, .form-container-3 {
        width: 48%;
    }

    .form-header-container-3 {
        width: 100%;
    }

    .form-header-container-1 {
        order: 1;
    }

    .form-container-1 {
        order: 3;
    }

    .form-header-container-2 {
        order: 2;
    }

    .form-container-2 {
        order: 4;
    }

    .form-header-container-3 {
        order: 5;
    }

    .form-container-3 {
        order: 6;
    }

    div.h3-brand-compliant {
        padding-top: 0.5em;
    }
}

@media screen and (max-width: 1300px) {
    .body-row-container {
        text-align: center;
    }

    .table-header-container-1, .table-header-container-2, .table-container-1, .table-container-2 {
        margin: auto;
        min-width: 95%;
    }

    .form-header-container-1, .form-header-container-2, .form-header-container-3 {
        margin: auto;
        min-width: 100%;
    }

    .form-container-1, .form-container-2, .form-container-3 {
        margin: auto;
        min-width: 45%;
    }

    div.h3-brand-compliant {
        margin: auto;
    }

    .select-employee {
        flex-direction: column;
    }

    .select-status {
        flex-direction: column;
    }

    .employee-info {
        font-size: 1em;
        font-weight: bold;
    }

    .table-container-1, .table-header-container-1 {
        order: 1;
    }

    .table-container-2, .table-header-container-2 {
        order: 2;
    }

    .form-header-container-1 {
        order: 1;
        width: 51%;
    }

    .form-container-1 {
        order: 2;
        width: 51%;
    }

    .form-header-container-2 {
        order: 3;
        width: 51%;
    }

    .form-container-2 {
        order: 4;
        width: 51%;
    }

    .form-header-container-3 {
        order: 5;
        width: 51%;
    }

    .form-container-3 {
        order: 6;
        width: 51%;
    }

    .first-row-h3 {
        padding-top: 2em;
    }
}

@media screen and (max-width: 1100px) {
    #top-row {
        justify-content: center;
    }

    .pto-calendar {
        min-width: initial;
    }

    .body-row-container {
        justify-content: initial;
    }
}

@media screen and (max-width: 902px) {
    .pto-calendar {
        display: none;
    }

    #client-data-row {
        justify-content: initial;
        flex-direction: column;
    }

    .form-container-1, .form-container-2, .form-container-3, .form-container {
        min-width: 436px;
    }
}

@media screen and (max-width: 698px) {
    .span-tooltip {
        display: none;
    }
}