@media (min-width: 768px) {

    .mx-25-percent{
        margin-right: 25% !important;
        margin-left: 25% !important;
    }
    .mx-30-percent{
        margin-right: 30% !important;
        margin-left: 30% !important;
    }
}

@media (min-width: 992px) {

    .mx-25-percent{
        margin-right: 25% !important;
        margin-left: 25% !important;
    }
    .mx-30-percent{
        margin-right: 30% !important;
        margin-left: 30% !important;
    }
}
@media (min-width: 1200px) {

    .mx-25-percent{
        margin-right: 25% !important;
        margin-left: 25% !important;
    }
    .mx-30-percent{
        margin-right: 30% !important;
        margin-left: 30% !important;
    }
}
@media (min-width: 1400px) {

    .mx-25-percent{
        margin-right: 25% !important;
        margin-left: 25% !important;
    }
    .mx-30-percent{
        margin-right: 30% !important;
        margin-left: 30% !important;
    }
}
/*.mx-25-percent{*/
/*    margin-right: 25% !important;*/
/*    margin-left: 25% !important;*/
/*}*/

body {
    font-family: 'Sarabun', sans-serif !important;
}


.px-6 {
    padding-right: 3.5rem !important;
    padding-left: 3.5rem !important;
}

.ps-6 {
    padding-left: 3.5rem !important;
}

.pe-6 {
    padding-right: 3.5rem !important;
}

.text-bold {
    font-weight: bold !important;
}

.bg-gray-lighter {
    background-color: #f2f2f2;
}


.bg-column-service-by-company
{
    background-color: #fff7ee !important;
}

.bg-column-user-package
{
    background-color: #f2ffee !important;
}

.bg-column-red
{
    background-color: #ffeeee !important;
}


.table-row-border {
    border-bottom: 1px solid #c3c3c3 !important;
}

.vertical-middle {
    vertical-align: middle; !important;
}

.patrol-attach-history{
    min-width: 80px;
    max-width: 80px;
    width: 80px;
    max-height: 80px;
}


.hidden{
    display: none !important;
}

.profile-photo{
    width: 140px !important;;
    height: 140px !important;;
    max-width: 140px !important;
    max-height: 140px !important;;
}

.profile-photo-l{
    width: 160px !important;;
    height: 160px !important;;
    max-width: 160px !important;
    max-height: 160px !important;;
}

.border-1-theme-light{
    border: 1px solid rgba(0, 0, 0, 0.08) ;
}

.div-photo-preview{
    /*border: 1px solid #585858;*/
    /*background-color: #eeeeee;*/
    justify-content: center;
    text-align: center;
    /*width:180px !important;*/
    /*max-width:180px !important;*/
    width: 100%;
    height:180px !important;
    max-height:180px !important;
    vertical-align: middle;
    padding: 10px;
    object-fit: scale-down;
}
.div-photo-preview > img {
    /*width:180px !important;*/
    /*max-width:180px !important;*/
    height:140px !important;
    /*max-height:140px !important;*/
}

.cursor-pointer{
    cursor: pointer !important;
}

#btn-sidebar {
    display: block;
    position: fixed;
    left :0;
    top : 10px !important;
    border-radius: 0 10px 10px 0;
    padding: 5px 7px 5px 7px !important;
    transition: all 350ms ease;
    z-index: 101 !important;
}

#btn-sidebar.active {
    /*left: 311px  !important;*/
    padding-left: 16px !important;
    padding-right: 8px !important;
    z-index: 101 !important;
    transform: translate3d(311px, 0, 0);
}

#menu-sidebar{
    transform: translate3d(-102%, 0, 0);
}

#menu-sidebar-mobile{
    transform: translate3d(-110%, 0, 0);
}



.nav-menu ul
,.nav-menu ul li
{
    padding: 0;
    margin: 0px;
    list-style: none;
}
.nav-menu ul li a
{
    display: block;
    /*padding-left: 30px;*/
    /*padding-right: 30px;*/
    /*padding-top: 10px;*/
    /*padding-bottom: 10px;*/
    color: #8b8b8b;
    position: relative;
    /*-webkit-transition: .3s padding-left ease;*/
    /*-o-transition: .3s padding-left ease;*/
    /*transition: .3s padding-left ease;*/
    border-radius: 10px;
}
.nav-menu ul li a:before
{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0px;
    background-color: #4A89DC;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: .3s opacity ease, .3s visibility ease, .3s width ease;
    -o-transition: .3s opacity ease, .3s visibility ease, .3s width ease;
    transition: .3s opacity ease, .3s visibility ease, .3s width ease;
    border-radius: 10px 0 0 10px;
}
.nav-menu ul li a:active
,.nav-menu ul li a:focus
,.nav-menu ul li a:hover
{
    outline: none;
}
.nav-menu ul li a:hover
{
    background: #f6f6f6;
    color: #000;
}
.nav-menu ul li a:hover:before
{
    width: 4px;
    opacity: 1;
    visibility: visible;
}
.nav-menu ul li.active a
{
    background: #f6f6f6;
    color: #000;
}
.nav-menu ul li.active a:before
{
    opacity: 1;
    visibility: visible;
    width: 4px;
}
.nav-menu ul li .collapsible
{
    position: relative;
}
.nav-menu ul li .collapsible:after
{
    content: "\f054";
    font-size: 10px;
    font-family: "FontAwesome";
    /*position: absolute;*/
    /*right: 20px;*/
    /*width: 20px;*/
    /*height: 20px;*/
    /*line-height: 20px;*/
    -webkit-transition: .3s transform ease;
    -o-transition: .3s transform ease;
    transition: .3s transform ease;
    vertical-align: middle !important;
    float: right;
    padding-right: 8px;

}
.nav-menu ul li .collapsible[aria-expanded="true"]
{
    background: #f6f6f6;
    color: #000;
}
.nav-menu ul li .collapsible[aria-expanded="true"]:before
{
    opacity: 1;
    visibility: visible;
    width: 4px;
}
.nav-menu ul li .collapsible[aria-expanded="true"]:after
{
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);

}

.list-custom-xs
{
    line-height: 40px;
}

.list-custom-xs a i:first-child
{
    margin-top: 6px;
}

.menu-sidebar .list-custom-xs i:first-child
,.menu-sidebar-mobile .list-custom-xs i:first-child
{
    width: 27px !important;
    height: 27px !important;
    line-height: 27px !important;
}
.list-custom-xs a i:first-child
{
    text-align: center;
    float: left;
    margin-left: 10px;
    margin-right: 10px;
}

.bootstrap-table .pagination .page-item .page-link
{
    border: none !important;;
}
.bootstrap-table .btn-secondary
{
    color: #6c6c6c !important;;
}

.bootstrap-table .caret
{
    display: none !important;
}

.bootstrap-table .pagination .page-item.active {
    background-color: #4A89DC !important;
    border: 1px solid #4A89DC !important;
}

.page-item.active .page-link
{
    background-color: #4A89DC !important;
}

.fixed-table-header
{
    border-radius: 10px 10px 0 0;
    background-color: #c9e4ff !important;
}

.fixed-table-header th
,.fixed-table-container:not(.fixed-height) .fixed-table-body thead > th
{
    text-align: center !important;
}

.fixed-table-container
{
    background-color: #f8fbfe;
}
.fixed-table-footer
{
    border-radius: 0 0 10px 10px;
}
.fixed-table-container tr
,.fixed-table-container th
{
    border: 1px solid #eff2ff !important;
}

.fixed-table-border
{
    border-left: 1px solid #eff2ff !important;
    border-right: 1px solid #eff2ff !important;
}
/*.fixed-table-header th*/
/*{*/
/*    color: white !important;*/
/*}*/

/*.fixed-table-container:not(.fixed-height) .fixed-table-header*/
/*{*/
/*    background-color: #c4e9e0 !important;*/
/*}*/

.fixed-table-container:not(.fixed-height) .table-bordered thead tr th
{
    background-color: #c9e4ff !important;
    text-align: center !important;
    /*border-radius: 10px 10px 0 0 !important;*/
}

.fixed-table-container:not(.fixed-height) .fixed-table-body{
    border-radius: 10px !important;
}


.fixed-table-container .fixed-columns .fixed-table-body{
    border-radius: 10px 0 0 10px !important;
}

.bootstrap-table table.table-bordered tbody tr td, .bootstrap-table table.table-bordered thead tr th
{
    border: 1px solid #eff2ff !important;
}
.bootstrap-table table.table-hover tbody tr:hover
, .bootstrap-table table.table-hover tbody tr:hover td
{
    background: #d8ecff !important;
    --bs-table-hover-bg: none !important;
}

/*.bootstrap-table .btn:focus, .bootstrap-table .btn:hover*/
/*{*/
/*    background-color: #4A89DC !important;*/
/*    color: white !important;*/
/*    border: 1px solid #4A89DC !important;*/
/*}*/

.required:after {
    content:" *";
    color: #dc3545;
}

.was-validated .form-control:invalid, .form-control.is-invalid {
    border-color: #dc3545 !important;
}

.form-control.is-invalid:focus, .was-validated .form-control:invalid:focus {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.25rem rgb(220 53 69 / 25%) !important;
}

.theme-light input.is-invalid:not([type=submit]):not(.focus-color):focus, .theme-light select.is-invalid:focus, .theme-light textarea.is-invalid:active {
    border-color: #dc3545 !important;
}

.form-control:disabled, .form-control[readonly]
{
    border: 1px solid #ced4da !important;
}

.toast-tiny
{
    z-index: 111 !important;
}

.in-col-centered
{
    display:inline-block;
    float:none;
    text-align:left;
}

.bootstrap-table .fixed-table-toolbar .columns .dropdown-menu
{
    margin: 0px !important;;
    position: absolute !important;;
    inset: 0px auto auto 0px !important;;
    transform: translate3d(-61px, 28px, 0px) !important;
}


.profile-photo-report{
    min-width: 40px !important;
    max-width: 40px !important;;
    width: 40px !important;;
    max-height: 40px !important;;
}

.datepicker-panel>ul>li:hover {
    background-color: #e9fffb !important;
}

.datepicker-panel>ul>li.picked, .datepicker-panel>ul>li.picked:hover
{
    color: #4A89DC !important;
}

.datepicker-panel>ul>li.highlighted
{
    background-color: #e9fffb !important;
}


.datepicker-top-left, .datepicker-top-right
{
    border-top-color: #4A89DC !important;
}

.bootstrap-table .fixed-table-pagination>.pagination-detail .page-list .btn-group .dropdown-menu.show.open
{
    margin: 0 !important;
    position: absolute !important;
    inset: unset !important;
    transform: none !important;
    top: auto !important;
    bottom: 100% !important;
}

.bootstrap-table table.table-bordered tbody tr td {
    padding: 0.2rem !important;
}

.bootstrap-table .fixed-table-container{
    min-height: 420px;
}

.card.gradient-blue.card-hover:hover{
    background-image: linear-gradient(to bottom, #639be2, #295997);
}
.card.gradient-aqua.card-hover:hover{
    background-image: linear-gradient(to bottom, #42b5de, #2186ac);
}
.card.gradient-grass.card-hover:hover{
    background-image: linear-gradient(to bottom, #2eea7d, #229a54)
}