/* Primary-on-top BrandTheme Css */

/*#region Desktop */

@media only screen and (min-width: 1180px) {
    .navbar-toggler {
        display: none;
    }

    .topnav .navbar-nav .nav-item .nav-link.active:before {
        bottom: -4px;
    }
}

/*#endregion */


/*#region Tablet */

/* portrait orientation */
@media only screen and (min-width : 768px) and (max-width : 1368px) and (orientation : portrait) {

    .navbar-toggler {
        display: none;
    }

    .navbar-toggler {
        margin-left: 50% !important;
    }

    #login-ad {
        display: none !important;
    }

    .navbar-brand-box {
        display: none;
    }

}

/* landscape orientation */
@media only screen and (min-width : 768px) and (max-width : 1368px) and (orientation : landscape) {

    #MainMenu > ul {
        align-items: end;
        margin-right: 10px;
    }

    .navbar-toggler {
        margin-left: 50% !important;
    }

    .navbar-brand-box {
        display: none;
    }

}

/*#endregion */


/*#region Mobile */

/* landscape orientation */
@media only screen and (min-width : 375px) and (max-width : 844px) and (orientation : landscape) {

/*    #resources {
        display: none;
    }*/

    .navbar-toggler:focus {
        box-shadow: none;
    }

    #MainMenu > ul {
        align-items: end;
        margin-right: 10px;
    }

    .subnav {
        white-space: nowrap;
    }

    #login-ad {
        display: none !important;
    }

    /* Underlines element with .active class */
    #MainMenu > ul > li > a.active {
        border-bottom: 4px solid var(--secondary-color);
        /*border-radius: 3px;*/
    }

    #MainMenu > ul > li > a:hover {
        border-bottom: 4px solid var(--secondary-color);
        /*border-radius: 3px;*/
    }

    .navbar-brand-box {
        display: none;
    }

}

/* portrait orientation */
@media only screen and (min-width : 375px) and (max-width : 844px) and (orientation : portrait) {

/*    #resources {
        display: none;
    }*/

    .navbar-toggler:focus {
        box-shadow: none;
    }

    #MainMenu > ul {
        align-items: end;
        margin-right: 10px;
    }

    .subnav {
        white-space: nowrap;
    }

    .subnav .subnav-menu {
        margin: 0;
        padding: 0;
        float: initial;
        overflow-x: auto;
        overflow-y: hidden;
    }

    #MainMenu {
        flex-direction: column;
    }

    .navbar-nav > ul {
        flex-direction: row;
    }

    /* Underlines element with .active class */
    #MainMenu > ul > li > a.active {
        border-bottom: 4px solid var(--secondary-color);
        /*border-radius: 3px;*/
    }

    #MainMenu > ul > li > a:hover {
        border-bottom: 4px solid var(--secondary-color);
        /*border-radius: 3px;*/
    }

    #login-ad {
        display: none !important;
    }

    .subnav {
        background-color: var(--primary-color) !important;
        color: var(--primary-color) !important;
        /*border-top: solid 4px var(--secondary-color);*/
    }

    .navbar-brand-box {
        display: none;
    }

}

/* portrait orientation */
@media only screen and (max-width : 375px) and (orientation : portrait) {

/*    #resources {
        display: none;
    }*/

    .navbar-toggler:focus {
        box-shadow: none;
    }

    #MainMenu > ul {
        align-items: end;
        margin-right: 10px;
    }

    .subnav {
        white-space: nowrap;
    }

    .subnav .subnav-menu {
        margin: 0;
        padding: 0;
        float: initial;
        overflow-x: auto;
        overflow-y: hidden;
    }

    #MainMenu {
        flex-direction: column;
    }

    .navbar-nav > ul {
        flex-direction: row;
    }


    /* Underlines element with .active class */
    #MainMenu > ul > li > a.active {
        border-bottom: 4px solid var(--secondary-color);
        /*border-radius: 3px;*/
    }

    #MainMenu > ul > li > a:hover {
        border-bottom: 4px solid var(--secondary-color);
        /*border-radius: 3px;*/
    }

    #login-ad {
        display: none !important;
    }
}

/*#endregion */


/*#region Color Theme */

#page-topbar {
    background-color: var(--primary-color);
}

.navbar-header {
    border-bottom: solid 4px var(--secondary-color) !important;
    background-color: var(--primary-color) !important;
}

.topnav {
    background: var(--primary-color);
}

.subnav {
    background: #ffffff !important;
    margin-top: 0px !important;
    height: initial;
}

#page-header-user-dropdown > span, #page-header-user-dropdown > i {
    /*color: #ffffff;*/
    color: var(--secondary-color);
}

body[data-layout=horizontal][data-topbar=light] .topnav {
    background-color: var(--primary-color);
}

.subnav .navbar-nav .nav-item .nav-link.active:before {
    display: none;
}

#MainMenu_Dashboard, #MainMenu_Employee, #MainMenu_Payroll, #MainMenu_WFM, #MainMenu_ATS, #MainMenu_Report, #MainMenu_Company, #MainMenu_Hub {
    color: var(--secondary-color) !important;
}

#SubMenu_Today, #SubMenu_Cases, #SubMenu_AuthContact, #SubMenu_Reminders, #SubMenu_EmployeeAccess, #SubMenu_Notifications, #SubMenu_DocumentsToSign, #SubMenu_Employee, #SubMenu_PrimaryInfo, #SubMenu_OnBoarding,
#SubMenu_PayrollInfo, #SubMenu_DirectDeposit, #SubMenu_ProHr, #SubMenu_TaxInfo, #SubMenu_AdditionalFields, #SubMenu_PayByDate, #SubMenu_Summary, #SubMenu_Payroll, #SubMenu_Covid,
#SubMenu_Document, #SubMenu_ExSetting, #SubMenu_PowerGridSetting, #SubMenu_W4Changes, #SubMenu_EmployeeChanges, #SubMenu_Calculator,
#SubMenu_Home, #SubMenu_Clock, #SubMenu_History, #SubMenu_Admin, #SubMenu_StateRegistration, #SubMenu_PtoRequests, #SubMenu_WorkGroups, #SubMenu_ClientInfo {
    color: dimgray !important;
}

    #SubMenu_Today.active, #SubMenu_Cases.active, #SubMenu_AuthContact.active, #SubMenu_Reminders.active, #SubMenu_EmployeeAccess.active, #SubMenu_Notifications.active, #SubMenu_DocumentsToSign.active, #SubMenu_Employee.active, #SubMenu_PrimaryInfo.active, #SubMenu_OnBoarding.active,
    #SubMenu_PayrollInfo.active, #SubMenu_DirectDeposit.active, #SubMenu_ProHr.active, #SubMenu_TaxInfo.active, #SubMenu_AdditionalFields.active, #SubMenu_Summary.active, #SubMenu_PayByDate.active, #SubMenu_Payroll.active, #SubMenu_Covid.active,
    #SubMenu_Document.active, #SubMenu_ExSetting.active, #SubMenu_PowerGridSetting.active, #SubMenu_W4Changes.active, #SubMenu_EmployeeChanges.active, #SubMenu_Calculator.active,
    #SubMenu_Home.active, #SubMenu_Clock.active, #SubMenu_History.active, #SubMenu_Admin.active, #SubMenu_StateRegistration.active, #SubMenu_PtoRequests.active, #SubMenu_WorkGroups.active, #SubMenu_ClientInfo.active {
        color: black !important;
        font-weight: bold !important;
    }

.navbar-header {
    border-bottom: solid 4px var(--secondary-color) !important;
    background-color: var(--primary-color) !important;
}

.navbar-header .dropdown .show.header-item {
    background-color: var(--primary-color) !important;
}

#divNotification {
    margin-bottom: 0px;
}

#page-topbar > div.navbar-header > div:nth-child(1) > div > a > span > img {
    width: 155px !important;
}

.topnav {
    flex: 1;
    margin: auto;
    display: flex;
    justify-content: space-between;
    z-index: 1000;
}

.noti-icon i {
    /*color: white;*/
    color: var(--secondary-color);
}

.footer-item {
    color: #ffffff;
}

.company-infor-container {
    color: white;
}

.footer {
    width: 100%;
    /*height: 65px;*/
    background-color: var(--secondary-color) !important;
}

#layout-wrapper > div.main-content > footer > div > div > div:nth-child(3) > div,
#layout-wrapper > div.main-content > footer > div > div > div:nth-child(3),
#layout-wrapper > div.main-content > footer > div > div > div:nth-child(3) > div > img {
    background-color: var(--secondary-color) !important;
}

#layout-wrapper > div.main-content > footer > div > div > div:nth-child(1) > p {
    color: white;
}

/*#endregion */


/*#region Utilities and Globals */


.navbar-toggler:focus {
    box-shadow: none;
}

.navbar-header {
    height: 72px;
}

.subnav {
    margin-top: 0px !important;
    height: initial;
}

html {
    position: relative !important;
    min-height: 100% !important;
    padding-bottom: 50px !important;
    box-sizing: border-box !important;
}

*, *:before, *:after {
    -webkit-box-sizing: border-box !important;
    -moz-box-sizing: border-box !important;
    box-sizing: border-box !important;
}

body, form {
    /*overflow-x: hidden !important;*/
    padding: 0 !important;
    margin: 0 !important;
}

.grid {
    margin: 0 auto;
}

.login-logo-resize {
    /* Set the height and width to auto, allowing the image to scale proportionally */
    height: auto;
    width: auto;
    min-height: auto;
    min-width: 300px;
    /* Desired height */
    max-height: 100px;
    /* Desired width */
    max-width: 300px;
    /* Ensure the image maintains its aspect ratio while fitting within its container */
    object-fit: contain;
    /* Display the image as a block element, and center it horizontally within its container */
    display: block;
    /* Center the image horizontally within its container */
    margin: 0 auto;
}

.dashboard-logo-resize {
    /* Set the height and width to auto, allowing the image to scale proportionally */
    height: auto;
    width: auto;
    min-height: auto;
    min-width: 250px;
    /* Desired height */
    max-height: 50px;
    /* Desired width */
    max-width: 250px;
    /* Ensure the image maintains its aspect ratio while fitting within its container */
    object-fit: contain;
    /* Display the image as a block element, and center it horizontally within its container */
    display: block;
    /* Center the image horizontally within its container */
    margin: 0 auto;
}


/*.img-responsive {
    height: auto;
    width: auto;
    max-height: 65px;
    max-width: 250px;
}*/
/*#endregion */