@media all and (max-width: 380px) {
    #login{
        background-color: #fff;
    }
    #login #left-login{
        display: none;
    }
    #login #right-login{
        margin-left: 30px !important;
        min-width: 310px;
    }
    #home .text-right{
        margin-bottom: 20px;
    }
    #header .info-user .info-name {
        padding-left: 5px;
        padding-right: 5px;
        margin-right: -10px;
    }
}
@media (max-width: 480px) {
    #login{
        background-color: #fff;
    }
    #login #left-login{
        display: none;
    }
    #login #right-login{
        margin-left: 34px !important;
    }
    #home .text-right{
        margin-bottom: 20px;
    }
    #header .info-user .info-name {
        padding-left: 5px;
        /* padding-right: 20px; */
       
    }
}

@media (min-width: 481px) and (max-width: 767px) {
    #login{
        background-color: #fff;
        padding: 50px;
    }
    #login #left-login{
        display: none;
    }
    #login #right-login{
        margin-left: 20px !important;
    }
    #home .text-right{
        margin-bottom: 20px;
    }
    #header .info-user .info-name {
        padding-left: 5px;
        padding-right: 20px;
        margin-right: -40px;
    }
   
}

@media all and (max-width: 767px) {
    .col-cs-6{
        width: 100% !important;
        text-align: center;
        padding-bottom: 10px;
    }
    .main-contents{
        margin-left: 0;
    }
    #modalHistory .table-responsive{
        display: block;
    }
    .icon-pass-login{
        margin-top: -1px;
        padding-top: 8px;
        padding-bottom: 8px;
    }
    .header-content .header-left {
        justify-content: center;
    }
    #header h3 {
        font-size: 20px;
        text-align: center;
    }
    #header{
        margin-bottom: 0px;
    }
    #menu-left{
        margin-top: 30px;
    }
    #menu-left .list-group .group-item {
        margin-bottom: 5px;
    }
 

}
@media all and (max-width: 768px) { 
    .app-header .logo img{
        padding: 0;
    }
    .app-header .logo {
        text-align: center;
    }
    #header .info-user .avatar-wrap{
        padding-right: 20px;
    }
   
   
}
@media (max-width: 992px) and (min-width: 768px) {
    #app {
        padding: 0px 30px;
    }

    #login #right-login {
        padding: 0px;

    }
    #login #left-login img{
        margin-top: 60px;
    }
    #login form{
        min-height: 490px;
    }
    #header h3 {
        font-size: 26px;
    }
    #header{
        margin-bottom: 0px;
    }
    #menu-left{
        margin-right: 20px;
        margin-top: 30px;
    }
    #menu-left .list-group .group-item {
        margin-bottom: 15px;
        
    }
    #header .info-user .avatar-wrap{
        padding-right: 20px;
    }
    #header .info-user .info-name {
        padding-left: 5px;
        padding-right: 10px;
    }

   
}

@media (min-width: 993px) and (max-width: 1200px) {
    #app {
        padding: 0 50px;
    } 
    #login #right-login {
        padding: 10px 10px 10px 0px;

    }
    #login #left-login img{
        margin-top: 50px;
    }
    #login form{
        min-height: 520px;
    }
    #app .container-right{
        margin-bottom: 50px;
    }
   
    .app-header .logo img {
        padding-left: 20px;
    }
    .app-header .logo{
        margin-top: 30px;
    }
    #header h3{
        font-size: 27px;
    }
    #home table td .btn-sm{
        margin-bottom: 10px;
    }
    #header .info-user .info-name {
        padding-left: 5px;
        padding-right: 20px;
    }
    #header .info-user {
        padding: 4px 0px 4px 0px;
    }
   
}
@media all and (max-width: 1200px){
    .header-statistical{
        flex-flow: column-reverse;
    }
   
}

@media (min-width:1024px) and  (max-width: 1365px) {
   
    #menu-left .logo {
        margin: 34px 30px;
    }
    #header .info-user .info-name {
        padding-left: 5px;
        padding-right: 20px;
    }
    #header .info-user {
        padding: 4px 0px 4px 0px;
    }
    .navbar-expand-lg{
        padding: 8px 0px;
    }
   
}


@media (min-width:1366px) and (max-width:1411px){
   
    #header .info-user .info-name {
        padding-left: 5px;
        padding-right: 30px;
    }
    /* #app {
        padding: 10px 20px;
    }  */
    #login #right-login{
        padding: 0;
    }
    #menu-left .logo {
        margin: 34px 25px;
    }
    
    #menu-left .list-group {
        margin: 0;
    } 
    .app-header .logo img{
        padding-left: 20px;
    }
    .navbar-expand-lg{
        padding: 8px 0px;
    }
}

@media (min-width:1412px) and  (max-width: 1687px) {
    /* #app {
        padding: 10px 10px;
    }  */

   #login #right-login {
        padding: 50px 40px 30px 0px;

    }
    #login #left-login img{
        margin-top: 30px;
    }
    #login form{
        min-height: 510px;
    } 
    #menu-left .list-group .group-item{
        padding: 10px 0px;
    }
    .app-header .logo img{
        padding-left: 30px;
    }
    #header .info-user .info-name {
        padding-left: 5px;
        padding-right: 8px;
    }
    
}

@media (min-width:1920px) and (max-width:2559px){
    #header .info-user {
        margin-left: 130px;
    }
    #header .info-user .info-name {
        padding-left: 5px;
        padding-right: 30px;
    }
    /* #app {
        padding: 0 50px;
    }  */
    /* #header .info-user .info-name {
        padding-left: 5px;
        padding-right: -12px;
    } */
}