@media screen and (min-width: 1800px) {
    
}
@media screen and (min-width: 1500px) and (max-width: 1799px){
    
}
@media screen and (min-width: 1440px) and (max-width: 1499px) {
    
}

@media screen and (min-width: 1366px) and (max-width: 1439px) {
    
}

@media screen and (min-width: 1280px) and (max-width: 1365px) {
    
}

@media screen and (min-width: 1025px) and (max-width: 1279px) { 
    .employee__row {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        flex-direction: column;
    }
    .employee__col-right {
        margin: 20px 0 0 0;
    }
    .emp__ck {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
    .ja__rolesfilter {
        position: absolute;
        width: 100%;
        right: 0px;
        display: flex;
        align-items: center;
        top: -150px;
        left: 0;
    }
    #ja__roles {
        margin: 80px 0 0 0;
    }
    .ja__rolesfilter .btn-jaa {
        width: 150px;
        font-size: 12px;
        padding: 10px 10px;
    }
}
@media screen and (max-width: 1024px) {
   
}

@media screen and (min-width: 992px) and (max-width: 1024px) {
    .employee__row {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        flex-direction: column;
    }
    .employee__col-right {
        margin: 20px 0 0 0;
    }
    .emp__ck {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
    .ja__rolesfilter {
        position: absolute;
        width: 100%;
        right: 0px;
        display: flex;
        align-items: center;
        top: -150px;
        left: 0;
    }
    #ja__roles {
        margin: 80px 0 0 0;
    }
    .ja__rolesfilter .btn-jaa {
        width: 150px;
        font-size: 12px;
        padding: 10px 10px;
    }
}
@media screen and (min-width: 768px) {
    .modal-dialog {
        max-width: 650px;
    }
}
@media screen and (max-width: 991px) {
    .mobile-menu {
        display: block;
        font-size: 24px;
    }
    #mobile-menu .sidebar__menu-list {
        width: 100%;
    }
    #mobile-menu .menu-collapsed {
        display: inline-block;
    }
    #mobile-menu .sidebar__menulist-item a {
        justify-content: flex-start;
    }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
    #sidebar-container {
        display: none;
    }
    .sidebar-collapsed .page-container {
        width: 100%;
        margin-left: 0;
    }
    .sidebar-collapsed .jaa-header {
        width: 100%;
        left: 0;
    }
    .page-content {
        margin-top: 73px;
        padding: 20px 15px 20px 15px;
    }
    .emp__ck {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
    .employee__row {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        flex-direction: column;
    }
    .employee__col-right {
        margin: 20px 0 0 0;
    }
    .jaa-header {
        padding: 12px 15px 12px 15px;
    }
    .jaa__login-right {
        width: 50%;
    }
    .jaa__login-left {
        width: 50%;
        padding: 0 15px;
    }
    .ja__rolesfilter {
        position: absolute;
        width: 100%;
        right: 0px;
        display: flex;
        align-items: center;
        top: -150px;
        left: 0;
    }
    #ja__roles {
        margin: 80px 0 0 0;
    }
    .ja__rolesfilter .btn-jaa {
        width: 150px;
        font-size: 12px;
        padding: 10px 10px;
    }
    .sidebar-expanded .page-container {
        width: 100%;
        margin-left: 0;
    }
}

@media screen and (max-width: 767px) {
    .jaa__login {
        display: flex;
        flex-direction: row;
        padding: 0 15px;
    }
    .jaa__login-right {
        display: none;
    }
    .jaa__login-left {
        width: 100%;
        height: 100%;
        padding-top: 80px;
        padding-bottom: 80px;
    }
    .jaa__login {
        display: flex;
        flex-direction: column;
    }
    #ja__roles {
        margin: 210px 0 0 0;
    }
    .ja__rolesfilter {
        position: absolute;
        width: 100%;
        right: 0px;
        display: flex;
        align-items: flex-start;
        top: -288px;
        flex-direction: column;
        left: 0;
    }
    .ja__rolesfilter .pgc__header {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 15px;
    }
    .ja__rolesfilter .pgc__headcontainer {
        display: flex;
        align-items: inherit;
        justify-content: flex-start;
        width: 100%;
        flex: 0 0 100%;
        flex-direction: column;
        flex-wrap: wrap;
    }
    #sidebar-container {
        display: none;
    }
    .sidebar-collapsed .page-container {
        width: 100%;
        margin-left: 0;
    }
    .sidebar-collapsed .jaa-header {
        width: 100%;
        left: 0;
    }
    .page-content {
        margin-top: 73px;
        padding: 20px 15px 20px 15px;
    }
    .pgc__header {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
    }
    .pgc__filter {
        margin-left: 0;
        margin-top: 15px;
        width: 100%;
    }
    .pgc__search {
        margin-top: 15px;
        margin-left: 0;
    }
    .jaa-header {
        padding: 12px 15px 12px 15px;
    }
    .pgc__search {
        width: 100%;
    }
    .employee__row {
        flex-direction: column;
    }
    .employee__col-left {
        flex-wrap: wrap;
    }
    .employee__col-right .btn {
        margin-left: 0;
        margin-top: 15px;
        width: 100%;
    }
    .emp__ck {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    .pgc__filter .btn {
        width: 100%;
    }
    .sidebar-expanded .page-container {
        width: 100%;
        margin-left: 0;
    }
    .sidebar-expanded .jaa-header {
        width: 100%;
        left: 0;
    }
}
@media screen and (max-width: 320px) and (max-width: 360px) {
    
}