.table {
    table-layout: fixed;
}

thead, .current {
    background-color: #0070c0 !important;
}

th {
    color: white;
}

td {
    /*white-space: nowrap;*/
    word-wrap: break-word;
    color: black;
}

/*flatpickr*/
.flatpickr-current-month {
    display: flex;
}

/*flatpickr*/

@media (max-width: 767px) {
    #main_logo {
        width: 50px;
        height: 50px;
    }

    .aaa {
        width: 33% !important;
        margin-left: 0 !important;
    }

    .bbb {
        width: 33% !important;
    }

    #customer_form i, #user_form i, #edit_user_form i {
        display: none !important;
    }

    .main_logo {
        width: 70px !important;
        height: 60px !important;
    }

    #btn_send_check_in {
        width: 90% !important;
    }

    .m-5 {
        margin: 0 !important;
        margin-top: 5rem !important;
    }

    .sidenav .nav-link-text {
        display: none;
    }

    nav ul {
        width: 50% !important;
    }

    .navbar-collapse {
        display: contents;
    }

    .phonenumber {
        width: 35% !important;
    }

    .form-check {
        padding-left: 0;
    }

    .take_photo {
        width: 50% !important;
        margin-bottom: 5px !important;
    }

    .empty_width {
        width: 0 !important;
    }
}

main input:not([type="radio"])::placeholder, main button, select:invalid, .select2:invalid {
    font-style: italic;
}

video {
    width: 100%;
    height: 100%;
}


.navbar-vertical.navbar-expand-xs {
    max-width: 15% !important;
}

.input-group i {
    color: black;
    font-weight: normal;
    display: flex;
    padding-top: 12px;
    margin-right: 10px;
    width: 16px;
}

::placeholder {
    color: black !important; /* change placeholder color here */
}

.input-group {
    padding-right: 10px;
}


/*-------------------datatable----------------------*/
button, .previous, .next {
    border: 1px solid #172c51;
    color: black;
    border-radius: 15rem;
    background-color: #c8dcf4;
    height: 40px;
}

.previous, .next, .paginate_button {
    border: 1px solid #172c51 !important;
    color: black !important;
    border-radius: 15rem !important;
    background-color: #c8dcf4 !important;
    height: 40px !important;
}

.previous:before {
    transition: none !important;
    content: "\f060" !important;
    font-family: "Font Awesome 6 Pro";
    /*font-size: larger;*/
    /*max-width: 5rem;*/
    /*width: 4.8375rem;*/
    /*height: 2.8375rem;*/
    background-image: none !important;
    margin-right: 5px;
}

.next:after {
    transition: none !important;
    content: "\f061" !important;
    font-family: "Font Awesome 6 Pro";
    /*font-size: larger;*/
    /*max-width: 5rem;*/
    /*width: 4.8375rem;*/
    /*height: 2.8375rem;*/
    background-image: none !important;
    margin-left: 5px;
}

.dataTables_length label {
    display: flex;
}

/*------------end datatable---------------------*/

td .btn-inner--text {
    margin-left: 15px;
}

.print:hover, .edit:hover, .check_status:hover, .edits:hover, .cancel:hover {
    color: #0070c0 !important;
}

.current, .paginate_button:hover {
    background-color: #0070c0 !important;
}

/*---checkbox custom---*/
.form-check:not(.form-switch) .form-check-input[type=radio]:after {
    /* transition: opacity .25s ease-in-out; */
    transition: none !important;
    content: "\f058" !important;
    font-family: "Font Awesome 6 Pro";
    font-size: larger;
    max-width: 5rem;
    width: 4.8375rem;
    height: 2.8375rem;
    background-image: none !important;
    /* background-img: linear-gradient(195deg, #ec407a, #d81b60), var(--bs-gradient); */
    top: 16px;
}

.form-check:not(.form-switch) .form-check-input[type=checkbox]:checked, .form-check:not(.form-switch) .form-check-input[type=radio]:checked {
    /*border-color: unset;*/
    border: unset !important;
}

/*---End checkbox custom---*/

/*input in modal*/
.modal input[type=text], .modal input[type=email], .modal input[type=password], #modal-default input[type=text], #modal-default input[type=email], #modal-default input[type=password] {
    border: 1px solid black;
    color: black !important;
    border-radius: unset !important;
    width: 80% !important;
    /*background-color: #c8dcf4;*/
    /*padding-left: 30px*/
}

#customer_form input, #v_type, #v_id_type {
    border: 1px solid black;
    color: black !important;
    border-radius: unset !important;
    width: 80% !important;
}

.modal .span_header {
    font-size: 18px;
    color: black;
}

/*End input in modal*/

/*select2*/
.select2 {
    border: 1px solid black;
    color: black !important;
    border-radius: unset !important;
    text-align: left;
}

.select2-container--open .select2-dropdown--below {
    z-index: 10005;
}

.select2-container--default .select2-selection--single {
    border: none;
}

.select2-results__option:not([aria-disabled="true"]) {
    color: black;
}

/*end select2*/

#loading {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(245, 245, 245, 0.3) url("../images/loading.gif") no-repeat center center;
    z-index: 11111;
}

.error {
    color: red !important;
    border-color: red !important;
}

.select label.error {
    position: absolute;
    bottom: -30px;
}

label.error {
    margin-left: 10px !important;
}

.modal {
    z-index: 9999;
}

.form-control {
    appearance: auto;
}

.disabled {
    opacity: 0.8; /* reduce opacity to indicate the button is disabled */
    cursor: not-allowed; /* change cursor to indicate the button is disabled */
    pointer-events: none; /* prevent any click events from firing on the button */
}

.modal-open .select2-dropdown {
    z-index: 10060;
}

.modal-open .select2-close-mask {
    z-index: 10055;
}

.select2-results__option--highlighted:hover {
    background-color: lightblue;
}

.select2-selection__rendered {
    padding-top: 5px;
}

.dashboardcode-bsmultiselect {
    width: 100%;
}

.swal2-container {
    z-index: 11000 !important;
}

.ui-menu {
    height: auto;
    max-height: 70%;
    overflow: scroll;
    z-index: 11000 !important;
}

.nav-link.active {
    border: 1px solid black !important;
    border-radius: 8px !important;
    background-color: #c8dcf4 !important;
}

.sidenav.fixed-start + .main-content {
    margin-left: 15% !important;
}

.h1, .h2, .h3, h1, h2, h3 {
    font-family: 'times', 'Arial', "Phetsarath_OT";

}

.table-hover tbody tr:hover {
    background-color: lightblue;
    color: black;
}

.tooltip {
    z-index: 11000;
}

/*.dataTables_filter .form-control{*/
/*    border: 1px solid #d2d6da;*/
/*}*/

.col-sm1-1 {
    flex: 0 0 auto;
    width: 5%
}

.col-sm1-2 {
    flex: 0 0 auto;
    width: 10%
}

.col-sm1-3 {
    flex: 0 0 auto;
    width: 15%
}

.col-sm1-4 {
    flex: 0 0 auto;
    width: 20%
}

.col-sm1-5 {
    flex: 0 0 auto;
    width: 25%
}

.col-sm1-6 {
    flex: 0 0 auto;
    width: 30%
}

.col-sm1-7 {
    flex: 0 0 auto;
    width: 35%
}

.col-sm1-8 {
    flex: 0 0 auto;
    width: 40%
}

.col-sm1-9 {
    flex: 0 0 auto;
    width: 45%
}

.col-sm1-10 {
    flex: 0 0 auto;
    width: 50%
}

.col-sm1-11 {
    flex: 0 0 auto;
    width: 55%
}

.col-sm1-12 {
    flex: 0 0 auto;
    width: 60%
}

.col-sm1-13 {
    flex: 0 0 auto;
    width: 65%
}

.col-sm1-14 {
    flex: 0 0 auto;
    width: 70%
}

.col-sm1-15 {
    flex: 0 0 auto;
    width: 75%
}

.col-sm1-16 {
    flex: 0 0 auto;
    width: 80%
}

.col-sm1-17 {
    flex: 0 0 auto;
    width: 85%
}

.col-sm1-18 {
    flex: 0 0 auto;
    width: 90%
}

.col-sm1-19 {
    flex: 0 0 auto;
    width: 95%
}

.col-sm1-20 {
    flex: 0 0 auto;
    width: 100%
}