@import "login.css";
@import "variables.css";
@import "button.css";
@import "sidebar.css";
@import "dashboard.css";
@import "mod-input.css";
@import "table.css";
@import "footer.css";
@import "modal_2.css";
@import "print-layout.css";
@import "schedule.css";
@import "calendar.css";
@import "overtime.css";
@import "employee.css";
@import "position.css";
@import "topbar.css";
@import "tab.css";
@import "daterangemodal.css";
* {
    margin: 0;
    box-sizing: border-box;
}

#odc-loader {
    display: none;
}

body {
    background-color: var(--light);
    font-family: "Montserrat-Reg";
}

.change-password-modal-holder {
    z-index: 2;
    color: red;
    position: absolute;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    display: none
}

.change-password-modal {
    width: 700px;
    background-color: #fff;
    padding: 50px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    border-radius: 15px;
    box-shadow: 5px 5px 5px #888888;
}

    .change-password-modal .btn-footer {
        display: flex;
        flex-direction: column-reverse;
        gap: 20px;
    }


/*Change Password Regex Validation*/
/* The message box is shown when the user clicks on the password field */
#message {
    display: none;
    background: #f1f1f1;
    color: #000;
    position: relative;
    padding: 20px;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: start;
    text-align: left;
    width: 100%;
}

    #message p, #message h3 {
        padding: 5px;
        font-size: .8rem;
        margin: 0 !important;
        background-color: transparent !important;
    }
/* Add a green text color and a checkmark when the requirements are right */
.valid {
    color: green;
}

    .valid:before {
        position: relative;
        margin-right: 20px;
        content: "✔";
    }
/* Add a red text color and an "x" when the requirements are wrong */
.invalid {
    color: red;
}

    .invalid:before {
        position: relative;
        margin-right: 20px;
        content: "✖";
    }

.action {
    display: flex;
    gap: 5px;
    justify-content: center
}

    .action button {
        display: flex;
        flex-direction: row;
        gap: 5px
    }

.top-bar {
    display: none;
    background: var(--dark);
}

/*Tablet View*/
@media only screen and (max-width: 1024px) {
    .top-bar-holder {
        background: red !important;
        height: 500px !important;
    }

    .top-bar {
        display: none;
        background: var(--dark);
        width: 100vw;
        position: fixed;
        top: 0;
        max-height: 100px;
        padding: 0 50px;
        z-index: 1 !important
    }

    .top-bar .logo-box {
        width: 50% !important;
        height: 100px !important;
        padding: 10px;
        background-image: url(/img/logo-04.png);
        background-size: contain !important;
        background-repeat: no-repeat;
        background-position: left;
    }

    .top-bar .navigation {
        width: 50%;
        height: 100px !important;
        display: flex;
        align-items: center;
        justify-content: end
    }

    .top-bar .navigation i {
        color: var(--light);
        font-size: 35px
    }

    .top-bar .menu {
        background: red;
        width: 50vw;
        height: 100vh;
        position: absolute;
        top: 100px;
        right: 0;
        padding: 50px;
        background-color: var(--dark);
        display: none;
    }

    .top-bar .menu li {
        margin: 40px 0 !important;
        font-size: 28px;
    }

    .top-bar .menu li a {
        color: var(--light);
    }

    .top-bar .menu .emp-info {
        padding-bottom: 50px;
        border-bottom: 1px solid var(--light);
    }

    .top-bar .menu .emp-info span {
        font-size: 28px;
    }
    body{
        margin: 0 !important;
    }
    .title-main-container{
        margin: 0;
    }
    .title-main-container .content-container {
        border-radius: 0 !important;
    }
    #dashboard-main-container,
    dashboard-main-container {
        display: flex;
        flex-direction: column;
        width: 100vw;
        margin: 0 !important;
        padding: 0 !important;
    }
    #dashboard-main-container .main-container{
        padding: 50px;
    }
    .paginate_button {
        z-index: -1 !important;
    }

    .sidebar {
/*        display: none;*/
    }

    #close-nav {
        display: none;
    }
}
/*Mobile View*/
@media only screen and (max-width: 790px) {
    .top-bar {
        padding: 0 20px;
    }

    .top-bar .logo-box {
        width: 50% !important;
        padding: 10px;
        background-image: url(/img/logo-04.png);
        background-size: contain !important;
        background-repeat: no-repeat;
        background-position: left;
    }

    .top-bar .navigation {
        width: 50%;
        height: 100px !important;
        display: flex;
        align-items: center;
        justify-content: end
    }

    .top-bar .navigation i {
        font-size: 23px;
    }

    .top-bar .menu {
        width: 70vw;
        padding: 20px;
    }

    .top-bar .menu .emp-info span {
        font-size: 18px;
    }

    .top-bar .menu li {
        margin: 20px 0 !important;
        font-size: 18px;
    }
}