.main-area {
    padding: 40px 40px 0;
}

@media screen and (min-width: 770px) {
    .availablePTO {
        margin-left: 1rem !important;
    }
}

.metrics {
    font-size: 17px;
}

.updatedBy {
    font-size: 10px;
    font-style: italic;
    font-weight: bold;
}

#timecards .options .buttons button:not(:first-of-type),
#tcBtns > #btn-tcCopy {
    margin-left: 6px;
}

#timecards .options > *, #tcControls > * {
    margin: 0 0 6px 0;
    width: 100%;
}

#tcBtns {
    display: flex;
    flex-direction: row;
}
@media screen and (min-width: 770px) {

    .emp-option,
    #tcWeekSelect {
        /*flex-basis: 100%;*/
        flex-basis: 280px;
    }
}

    #gridTimecardReviewUsers .k-grid-content {
        max-height: calc(100vh - 16rem);
    }

    @media screen and (max-width: 769px) {
        #tcBtns {
            width: 100%;
        }

        #ltControls > div:not(:last-of-type) {
            margin: 0 0 1rem 0;
        }

        #ltControls #tcWeekSelect {
            width: 100%;
        }

        #timecards .options .buttons > button,
        #tcBtns > button {
            flex: 1;
        }

        /* added 11/11/2020 to wrap elements above timecard grid -AS */
        #tcControls {
            flex-wrap: wrap !important;
        }

            #timecards .options::before,
            #tcControls::before {
                font-weight: bold;
                margin: 0 auto 10px 0;
            }

        #timecards .options::before {
            content: "Employee Selection";
        }

        #tcControls::before {
            content: "Timecard Selection";
        }

        #tcControls.statistics::before {
            content: "Time Statistics";
        }

        #timecards .options, #tcControls {
            background: #ddd;
            color: #666;
            width: 100%;
            padding: 4px 8px;
            border-radius: 4px;
            border: 1px solid #767676;
        }
    }

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

        #timecards .options .buttons {
            margin-left: 6px;
        }

        #ltControls > div:not(:last-of-type) {
            margin: 0 1rem 0 0;
        }

        #timecards .options > *, #tcControls > * {
            margin: 0 0 6px 0;
            width: auto;
        }

        #tcWeekSelect {
            /*flex-basis: auto;*/
        }
    }


    /* grids */

    .groupColumns span,
    .totalColumn span {
        font-size: .75rem;
        text-align: center;
        width: 100%;
    }

    .totalColumn {
        align-content: center;
        display: flex;
        flex-basis: 20%;
    }

    .groupColumns,
    #tcAccordion .card-header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        flex-basis: 80%;
    }

    #timecardHeader,
    #timecardFooter {
        display: flex;
        align-items: center;
    }

    .totalColumn {
        justify-content: flex-end;
        font-weight: bold;
        text-transform: uppercase;
    }

    .row-title {
        flex-basis: 100%;
        font-weight: bold;
    }

    .timecardname {
        font-size: .8rem;
        color: #343d49;
    }

    .accordion .card-header .btn-link:before {
        margin-right: 10px;
        font-family: "FontAwesome";
        font-weight: 900;
    }

    .accordion .card-header .btn-link:before {
        content: "\f146";
    }

    .accordion .card-header .btn-link.collapsed:before {
        content: "\f0fe";
    }

    .tcClient.row-title {
        display: flex;
        flex-direction: row;
        align-items: center;
        line-height: 1rem;
    }

    #timecardHeader {
        background: rgba(0,0,0,0.15);
    }

    #timecardFooter {
        background: rgba(2, 143, 204, 0.2);
    }


    @media screen and (max-width: 770px) {
        #timecardHeader, #timecardFooter, .list-group .list-group-item, #tcAccordion .card-header {
            padding: 6px;
            flex-wrap: wrap;
        }

        .tcClient.row-title {
            margin-bottom: 10px;
        }


        #timecardHeader .groupColumns span {
            padding: 3%;
            display: block;
            white-space: normal;
            text-align: center;
        }

        .groupColumns span {
            border-right: 1px solid rgba(0,0,0,0.1);
        }
    }


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

        .groupColumns span,
        .totalColumn span {
            font-size: 1rem;
            align-self: center;
            width: 100%;
        }

        #timecardHeader,
        #tcAccordion .card-header {
            flex-direction: row;
        }

        #timecards .row-title {
            flex-basis: 20%;
        }

        #timecards .groupColumns {
            flex-basis: 70%;
        }

        #timecards .totalColumn {
            flex-basis: 10%;
            padding-left: 6px;
        }
    }

    /* SAT and SUN grid colorization*/
    #editGrid .k-grid-content table tbody tr:nth-child(6n),
    #editGrid .k-grid-content table tbody tr:nth-child(7n),
    #editBDSGrid .k-grid-content table tbody tr.bdsrow5,
    #editBDSGrid .k-grid-content table tbody tr.bdsrow6 {
        background: repeating-linear-gradient( 45deg, rgba(255,255,255,0.5), rgba(255,255,255,.5) 4px, rgba(2,143,204,0.15) 4px, rgba(2,143,204,0.15) 8px);
    }

    #bdsGridTCName,
    #editGridTCName {
        margin-top: 2rem;
    }

        #bdsGridTCName h5,
        #editGridTCName h5 {
            font-weight: bold !important;
            font-size: 2rem !important;
        }

        #bdsGridTCName p,
        #editGridTCName p {
            font-style: italic;
        }

    #editBDSGrid table {
        width: 100%;
        table-layout: fixed;
    }

    div.k-grid-footer, div.k-grid-header {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: row;
        flex-direction: row;
        -ms-flex-align: stretch;
        align-items: stretch;
    }

    div.k-grid-footer, div.k-grid-header {
        padding-right: 0;
    }

    /*Timecard Review*/

    .timecardreview .options,
    #tcReviewUserStats #timecardModal,
    #tcReviewUserStats #btn-tcCopy {
        display: none !important;
    }

    .options > * {
        margin-right: 8px;
    }

    @media screen and (max-width: 769.98px) {
        #tcApprove, #tcReview {
            width: 100%;
        }
    }

    @media screen and (min-width: 770px) {
        #tcReviewUserPanel {
            /*flex-basis: 35%;*/
            width: 600px !important;
            min-width: 600px;
        }

        #tcReviewUserStats {
            flex: 0 1 100%;
        }

        #employeeChart {
            width: 100% !important;
        }
    }

    #tcReviewUserPanel .k-grid-content.k-auto-scrollable {
        max-height: 65vh;
    }

    #tcReviewUserStats h2 {
        border-bottom: 2px solid rgb(2, 143, 204);
        color: rgb(2, 143, 204);
        font-size: 1.15rem;
    }

    .inspections, .reviews {
        margin-top: 20px;
    }

    #tcReviewUserStats .detstat {
        margin-bottom: initial;
    }

        #tcReviewUserStats .detstat .stat div {
            margin-right: 15px;
        }

    #statistics .statarea .detstat .stat {
        justify-content: space-between;
    }

    .k-header.k-grid-toolbar {
        display: flex;
        align-items: center;
    }

        .k-header.k-grid-toolbar > * {
            margin-right: 8px;
        }

    .obscure {
        opacity: .2;
    }

    @media screen and (max-width: 769px) {
        .obscure {
            display: none;
        }
    }

    .holiday-panel {
        border: solid 1px #ced4da;
        padding: 5px;
        border-radius: 3px;
        background-color: #f8f9fa;
    }

    @media (min-width: 770px) {
        #calendarMyDays {
            width: 800px;
        }
    }

    .flex-row.fbuttons > * {
        flex-shrink: 1;
        margin-left: 4px;
    }

    .flex-row.buttons > * + * {
        margin-left: 6px;
    }

    .fbuttons > .dropdown button {
        width: 100%;
    }


    @media screen and (max-width: 769px) {
        .fbuttons {
            flex-wrap: wrap;
        }

            .fbuttons > * {
                flex: 1 0 48%;
                ;
                margin: 1%;
            }
    }
    /*End Timecard Review*/


    /* Timecard Address Entry Modal */

    #addressEntryModal > div + div {
        margin-top: 1rem;
    }

    /*#addressEntryModal > div:last-of-type
*/
    .addressEntry {
        flex: 1 1 80%;
    }

    .deleteEntry {
        padding: 2rem;
    }


    #plusEntry i {
        color: #ffffff;
        background: #218838;
        padding: .75rem;
        border-radius: 50%;
        aspect-ratio: 1/1;
        margin: 1rem auto;
        transition: background 300ms ease-in-out;
    }

    #plusEntry {
        display: flex;
        position: relative;
        cursor: pointer;
    }

        #plusEntry:hover i {
            background: #1e8435;
        }

        #plusEntry::after,
        #plusEntry::before {
            position: absolute;
            width: calc(50% - 30px);
            border-bottom: 1px solid #ccc;
            height: 1px;
            content: "";
            top: 50%;
        }

        #plusEntry::after {
            left: 0;
        }

        #plusEntry::before {
            right: 0;
        }

    #addresses > .addressBlock + .addressBlock {
        margin-top: 2rem;
        padding-top: 2rem;
        border-top: 2px solid #ccc;
    }


    [data-label="Regular Hours"] {
        position: relative;
    }

    #editGrid [data-label="Regular Hours"] label,
    #editBDSGrid [data-label="Regular Hours"] label {
        /*    position: absolute;
    font-size: 0.75rem;
    line-height: 1rem;
    margin: 0 5px;
    bottom: 0;
    right: 0;*/
        display: none;
    }

    [data-label="Regular Hours"] span {
        display: block;
    }

    .tcSwitchArea button.active {
        background: #1b75bc;
        color: #fff;
    }

    #editGrid td {
        overflow: visible;
    }


    .tcSwitchArea {
        margin: 2rem 0 0 0;
    }

        .tcSwitchArea .btn-group {
            display: flex !important;
        }

        .tcSwitchArea button {
            border-radius: 4px 4px 0 0;
            flex: 0 1 150px !important;
        }


    #timecardWeekGrid {
        border-radius: 0 0 4px 4px;
    }

    #timecardHeader {
        border-radius: 0;
    }

    #reportIFrame {
        width: 100%;
        height: 80vh;
    }

    .reviewSelectedName {
        padding: 1rem;
        font-size: clamp(1rem, 4vw, 2rem);
        background: #1b75bc;
        margin: 1rem 0 !important;
        display: block;
        color: white;
    }

    .notselected {
        background: #efefef !important;
        color: #444;
    }

    .nav-link.active {
        color: #1b75bc !important;
    }

    #TimecardReviewContent #tcBtns #tcSubmit,
    #TimecardReviewContent #tcBtns #timecardModal,
    #TimecardReviewContent #tcBtns #btn-tcCopy {
        display: none;
    }

    #TimecardReviewLayout {
        display: flex;
        gap: 2rem;
    }

        #TimecardReviewLayout .userlist {
            flex: 0 0 30%;
        }

        #TimecardReviewLayout .userdetails {
            flex: 1 1 auto;
        }

    #statistics .statarea {
        height: 45vh;
    }

    #statistics .utilizationdetails {
        overflow: scroll;
    }

    .no-user-selected {
        background: whitesmoke;
        padding: 2rem;
        border-radius: 10px;
        height: 50vh;
        margin: 2rem 0;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 2rem;
    }