body{
    /* font-family:Mitr; */
    font-family:NotoSans;
    font-size: 14px !important;
}

input{
    font-size:12px !important;
}


html,
    body,
    header,
    .carousel {
      height: 100%;
    }

    @media (min-width: 800px) and (max-width: 850px) {
            .navbar:not(.top-nav-collapse) {
                background: linear-gradient(110deg, #00aeff 20%, #0055ca 60%) !important;
            }
        }

.carousel,.carousel .carousel-inner,.carousel .carousel-inner .active,.carousel .carousel-inner .carousel-item,.view,body,html{
    height:auto;
    max-height:100%;
}

.navbar{
    background-color:rgba(0,0,0,.2);
}

.page-footer,.top-nav-collapse{
    background: linear-gradient(110deg, #00aeff 20%, #0055ca 60%);
}

.indent-50{
    text-indent: 50px;
}

.text-headpage{
    color:#0055ca;
}

.page-footer{
    background: linear-gradient(110deg, #0055ca 80%, #00aeff 60%);
}

.navbar.navbar-dark .navbar-nav .nav-item.active>.nav-link{
    background-color: rgba(255, 255, 255, 0.5);
    color:black;
}

.hoverimage{
    max-width:100px;
    margin:15px 15px 0px 15px;
    transition: .3s;
}

.hoverimage:hover{
    max-width:120px;
    transition: .3s;
}

.main-body{
    background-color:white;
    padding:10px;
    border:solid 1px lightgray;
    border-radius: 5px;
    box-shadow:#0000001f 5px 5px 10px 0px;
}

input.form-control-sm {
    height: calc(1.5em + 0.5rem - 1px) !important;
}

.nav-link{
    color:white;
}

.nav-link:hover{
    color:rgb(199, 198, 198);
}

.navbar_logo{
    max-height:50px;
}

.navbar.navbar-dark .breadcrumb .nav-item.active>.nav-link, .navbar.navbar-dark .navbar-nav .nav-item.active>.nav-link {
    background-color: rgba(255, 255, 255, 0.1);
    color:white !important;
}

.navbar.navbar-dark .breadcrumb .nav-item .nav-link, .navbar.navbar-dark .navbar-nav .nav-item .nav-link{
    color:white;
}

.indent{
    text-indent: 50px;
}

.text-title-head{
    color:#1C2331;
    font-size:28px;
    font-weight: 500;
    transition:.3s;
}

.text-detail{
    color:black;
    font-size:16px;
    transition:.3s;
}

.text-detail-list{
    color:black;
    font-size:16px;
    /* list-style-type:decimal; */
    padding-inline-start:80px;
    transition:.3s;
}

.text-headpage{
    font-size:28px;
    transition:.3s;
}

.profile_image{
    max-width:400px;
    transition:.3s;
}

.font-white{
    color:white !important;
}

.award_image{
    max-height:400px;
    max-width:100%;
}

table thead tr th{
    font-weight: 500 !important;
}

.font-weight-500{
    font-weight: 500;
}

.font-weight-300{
    font-weight: 400;
}

.form_readonly{
    color:darkorange;
}

.table-sm td {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    padding-left: 0.3rem !important;
    padding-right: 0.3rem !important;
    
}

.table-sm th {
    padding: 0.3rem !important;
    
}

table tbody tr td .btn.btn-sm {
    padding: 0.3rem 1rem;
    font-size: .64rem;
}

table tbody tr td{
    font-weight: 400;
}

.select2-container{
    width:100% !important;
}

table{
    width:100% !important;
}

.nowrap{
    white-space: nowrap !important;
}

.modal-dialog {
    max-width: 600px;
    padding-left:15px;
    padding-right:15px;
    margin: 1.75rem auto;
}

.modal-dialog-search {
    max-width: 100%;
    padding-left:15px;
    padding-right:15px;
    margin: 1.75rem auto;
}

.click_checked{
    cursor: pointer;
}

.result_selected_product{
    background-color: #84fb84 !important ;
}


.custom-control-input:checked ~ .custom-control-label::before {
    color: #fff;
    border-color: #00c851;
    background-color: #00c851 !important ;
}

table {
    border-top: solid 1px black;
}

td, th{
    border: solid 1px rgb(224, 224, 224);
}

th{
    border: solid 1px rgb(224, 224, 224);
    background-color: aliceblue;
}

.dataTables_scrollBody thead{
    visibility: collapse;
}

.form_password i{
    position: absolute;
    right: 23px;
    top: 28px;
    color: darkgray;
    font-size: 12px;
}

.swal2-html-container{
    text-align:center;
}

.select2-container .select2-selection--single {
    height:25px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 25px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow{
    height: 24px;
}

.form-label-file {
    border: 1px solid orange;
    border-radius: 0.25rem 0px 0px 0.25rem;
    padding: 6px 10px;
    white-space: nowrap;
    height: 31.34px;
    width:100%;
    margin:0px;
    overflow-y: hidden;
}

.form-label-choose-file{
    border: 1px solid orange;
    background-color:orange;
    color:white;
    font-weight: 400;
    white-space: nowrap;
    padding: 6px 10px;
    height: 31.34px;
    margin:0px;
    border-left: none;
}

.form-file{
    max-width:100%;
}

.bg-detail-employee{
    background-color:#0055ca;
}

.bg-cost-salary{
    background-color:#35da3e;
}

.bg-minus-salary{
    background-color:#ff7979;
}

button.btn{
    font-size:14px !important;
    padding:3px 15px !important;
}

.font_16{
    font-size:16px;
}

@media (max-width: 575.98px) {

    body{
        font-family:Mitr;
        font-size: 12px !important;
    }

    input{
        font-size:12px !important;
    }

    .navbar_logo{
        max-height:30px;
    }

    .text-headpage{
        font-size:16px;
    }

    .text-title-head{
        font-size:16px;
    }
    
    .text-detail{
        font-size:11px;
    }

    .text-detail-list{
        font-size:14px;
    }

    .profile_image{
        max-width:200px;
    }

    .form_password i{
        position: absolute;
        right: 23px;
        top: 25px;
        color: darkgray;
        font-size: 12px;
    }

}








@media (min-width: 576px) and (max-width: 767.98px) { 

    body{
        font-family:Mitr;
        font-size: 12px !important;
    }

    input{
        font-size:12px !important;
    }

    .navbar_logo{
        max-height:30px;
    }

    .form_password i{
        position: absolute;
        right: 23px;
        top: 25px;
        color: darkgray;
        font-size: 12px;
    }


}











@media (min-width: 768px) and (max-width: 991.98px) { 

    body{
        font-family:Mitr;
        font-size: 12px !important;
    }
    
    input{
        font-size:12px !important;
    }

    .navbar_logo{
        max-height:30px;
    }   

    .form_password i{
        position: absolute;
        right: 23px;
        top: 25px;
        color: darkgray;
        font-size: 12px;
    }


}









@media (min-width: 992px) and (max-width: 1199.98px) { 


    
}









@media (min-width: 1200px) { 

    .w-lg-25{
        max-width:500px;
    }
    

}


@media only screen and (max-width: 1200px){
    .table-responsive-xl {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}


@media only screen and (max-width: 992px){
    button.btn{
        font-size:12px !important;
    }
}

@media only screen and (min-width: 992px){
    .w-md-50{
        width:50% !important;
    }
}