/* Variables */
:root{
    --primary-color: #0088ff;
    --light-blue: #E2F1FF;
    --input-bg: #F6F6F6;
    --placeholder-grey: #A0A0A2;
    --dark-grey: #424242;
    --dark-blue: #1F2B5D;
    --darker-blue: #002648;
}

/* Dashboard sidebar padding */
@media only screen and (max-width : 1100px) {
    .dash-main, .dash-footer, .dash-header .navbar {
        padding-left: 0 !important;
    }
}


@media (min-width: 768px) {
    body.dash-pad{
        padding-top: 50px;
    }

    .side-nav{
        z-index: 1020;
    }

    .smarter-way{
        display: flex;
    }
    .register-sec{
        /* height: 95vh;
        height: calc(var(--vh, 1vh) * 95); */
        min-height: 100vh;
    }
    .register-sec a{ font-size: 13px; }
    #register-form label{ font-weight: 500; font-size: 14px; }
    #register-form p { font-size: 13px; font-weight: 500; }
    #register-form, .reset-success{
        width: 400px;
    }
    .reg-footer{
        flex-direction: row;
        justify-content: space-between;
        height: 5vh;
    }

    .email-pass{
        height: 95vh;
    }

    .support{ order: 2; }
    .copyright{ order: 1; }

    /* Reports pages */

    #report-container {
        max-width: 780px;
        margin: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    #report-container h5,
    #resolution h5{
        font-size: 24px;
        font-weight: 900;
        color: var(--darker-blue);
    }

    #report-container h4{
        font-size: 18px;
        font-weight: 900;
        color: var(--darker-blue);
    }

    #report-container p{
        color: var(--dark-blue);
    }

    .categories{ display: flex; }
    #incident, #accident{ max-width: 350px; }
    #guestName .form-control{ width: 40%; }

    /* Step 3 */

    .image-preview{
        width: 450px;
        height: 300px;
    }

    .image-thumbnail{
        width: 250px;
        height: 200px;
    }

    .add-another{
        width: 250px;
        height: 200px;
    }

    #report-container .image-preview .image-preview-content p,
    #report-container .add-another p{
        color: var(--placeholder-grey);
    }

    .assign .custom-dropdown{
        width: 350px;
    }

    /* Modals */
    .modal-footer { display: flex; justify-content: flex-end;}
    .modal-body p {font-size: 15px;}

    /* Upload Csv Modal */
    .upload-csv{
        width: 500px;
        height: 200px;
    }

    /* Notifications */
    .notification-content{
        right: 0;
        top: 100%;
        left: auto;
        min-width: 400px;
    }

    /* Dashboard */

    #welcome-sec {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    #welcome-sec .welcome-greeting h1{
        font-size: 2.2rem;
    }

    #welcome-sec img{
        order: 2;
        width: auto;
    }
    #welcome-sec .welcome-greeting{ order: 1; }

    .activity-grid{
        grid-template-columns: 2fr 1fr;
        grid-gap: 1rem;
    }

    #activity-sec .stats{
        order: 2;
    }

    .stats{
        height: 100%;
    }

    .stats .number-stats{
        height: 198px;
    }

    .num-stat-grid{
        height: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 1fr 1fr;
        grid-gap: .7rem;
    }

    /* Reports Views Page */
    #resolution{
        box-shadow: -1px 0px 2px #55555552;
        position: fixed;
        right: 0;
        top: unset;
        display: block;
        height: calc(100vh - 55px);
        overflow: auto;
    }
    #resolution .resolution{
        border-bottom: .2px solid #70707058;
    }
    #resolution p{
        font-size: 14px;
    }

    #resolution .bold{
        font-weight: 700;
    }

    #resolution .small{
        font-size: 12px;
        color: #596B71;
    }
    .comments .small{
        font-size: 10px;
        color: var(--placeholder-grey);
    }

    .comments .chat .message{
        border: 1px solid  #55555552;
        border-radius: 5px;
    }

    .comments .chat i{
        color: var(--dark-grey);
    }

    .comments .chat #show-replies{
        color: var(--dark-grey);
        font-weight: 500;
        font-size: 12px;
    }

    .comments .chat .msg{
        font-weight: 500;
        font-size: 14px;
    }

    /* Settings Page */
    #settings{
        min-height: 60vh;
    }

    #settings .page-header{
        border-bottom: .2px solid #E8E8E8;
    }

    /* Coming Soon */
    #coming_soon{
        width: 80%;
    }

    /* Reports */
    .filter-controls>div.input-group{
        width: 230px;
        /* height: 40px; */
    }

    #timeoffApplications .filter-controls>div.input-group,
    #timeoffHistory .filter-controls>div.input-group{
        width: 200px;
    }

    /* .filter-controls .dropdown .btn{
        height: 40px;
    }


    .filter-controls .btn-primary{
        height: 40px;
    } */

    /* Time off stles */
    #newLeaveTypeSec{
        display: flex;
        justify-content: center;
    }

    #newLeaveTypeSec>form {
        width: 550px;
    }

    .info-content .info-item{
        width: 350px;
    }

    /* Announcements */
    #announcementsComments{
        width: 500px;
    }

    .announcement-title {
        max-width: 60%;
    }

    .admin-personal{
        height: calc(100vh - 50px);
        box-shadow: 0 1px 2px #55555552;
    }

    .admin-analytics{
        height: calc(100vh - 50px);
        overflow: hidden;
    }

    .activity-card-header{
        padding: 10px 20px;
    }

    .activity{
        padding: 10px 0;
    }

    #anniversary-card,
    #birthdayCard,
    #timeoff-card,
    #otherCard {
        width: 50%;
        height: auto;
    }


    /* Employee Profile Page */
    .profile-content{
        width: 75%;
        height: 600px;
        margin-left: 15px;
        margin-right: 30px;
        margin-top: 15px;
    }

    #profile-nav{
        width: 25%;
        height: 100%;
        display: block;
    }

    .profile-content-item .actn-buttons{
        bottom: -15px;
        right: 0;
    }


    /* Website Styles */
    .showcase-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-direction: row;
    }

    #showcase-text {
        width: 40%;
    }

    #showcase-img{
    width: 60%;
    position: relative;
    right: -50px;
    }


    .showcase-content h1{
        font-size: 2.9rem;
    }

    #create-reports #products .tabs-content .productTab.show{
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    #create-reports #products .tabs-content .productTab .content,
    #create-reports #products .tabs-content .productTab .img{
        width: 46%;
        margin-bottom: 0;
    }


    #features .feature-row{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 1.3rem;
    }

    #features .feature img{
        margin-bottom: 10px;
    }

    #call-to-action{
        height: 350px;
    }

    #call-to-action>div{
        width: 100%;
    }

    #call-to-action img{
        display: inline;
        position: absolute;
        bottom: 0;
        right: 10%;
        width: 30%;
    }

    /* Cookie consent popup */
    #consent-popup{
        left: 50%;
        bottom: 20px;
        padding: 15px;
        width: calc(100% - 100px);
        border-radius: 10px;
    }

    #consent-popup.is-visible {
        transform: translate3d(-50%,0,0);
    }


    #footer .footer-sec{
        width: 400px;
        text-align: center;
    }

    #userGuide-intro{
        max-width: 900px;
        margin: 0 auto;
    }

    #userGuide-intro .input-group{
        background-color: #fff;
        border-radius: 4px;
    }

    #userGuide-intro .input-group .form-control{
        border: none;
        border-radius: inherit;
    }

}

@media (max-width: 768px) {
    /* 404 page */
    .error-page {padding: 1rem 3%;}
}

@media (min-width: 576px){
    #leavePoliciesModal .modal-dialog {
        max-width: 550px;
    }
}

@media (min-width: 1100px) {
    #toggleSidenav{
        display: none;
    }
}