.order-category__filter {
    width: 60%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.order-category__nav {
    border-right: 1px solid #dee2e6;
}

.order-category__form {
    margin: 0 15px;
}

.order-category__form table tbody {

}

.order-category__form table thead {
    height: 110px;
}

@media(max-width: 768px) {
    .order-category__filter {
        width: 100%;
        display: block;
    }
}

@media(max-width: 1024px) {
    .order-category__form table thead {
        height: 100%;
    }
}

@media(max-width: 1398px) {
    .order-category__nav {
        border-right: none;
    }
}

/* Survery-form */
.table-bordered th,
.table-bordered td { font-weight: 400; vertical-align: middle; }
.table-bordered th { border-top: 1px solid #ebedf282; border-right: none; border-left: none; }
.table-bordered td { border-right: none; border-left: none; }

.custom-switch { position: relative; display: table-cell; display: inline-block; }
/* .custom-switch .button-cover { height: 100px; margin: 20px; background-color: #fff; box-shadow: 0 10px 20px -8px #c5d6d6; border-radius: 4px; } */
/* .custom-switch .button-cover:before { position: absolute; right: 0; bottom: 0; content: counter(button-counter); padding: 5px; font-size: 12px; color: #d7e3e3; line-height: 1; counter-increment: button-counter; } */
.custom-switch .button-cover,
.custom-switch .off,
.custom-switch .on { position: absolute;  top: 0; right: 0; left: 0; bottom: 0; border-radius: 25px; box-shadow: inset 0px 0px 4px 0px #7f7f7f3b; }
.custom-switch .off { z-index: 2;  background-color: #e8ebf1; }
.custom-switch .on { z-index: 1; width: 100%; background-color: #e8ebf1; transition: 0.3s ease all; }
.custom-switch .button-switch { overflow: hidden; position: relative; top: 50%; width: 74px; height: 36px; margin: -20px auto 0 auto; }
.custom-switch .button-switch,
.custom-switch .button-switch .on { border-radius: 100px; }
.custom-switch .checkbox { position: relative; z-index: 3; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
.custom-switch .button-switch .off:before { position: absolute; top: 4px; left: 4px; display: flex; justify-content: center; align-items: center; content: "NO"; width: 28px; height: 28px; padding: 9px 4px; border-radius: 50%; background-color: white; font-size: 12px; font-weight: 500; text-align: center; transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all; }
.custom-switch .button-switch .checkbox:checked + .off:before { content: "Yes"; left: 42px; background-color: #0cbb87; color: white; }
.custom-switch .button-switch .checkbox:checked ~ .on { background-color: white; }
.custom-switch .button-switch .off,
.custom-switch .button-switch .off:before,
.custom-switch .button-switch .on { transition: 0.3s ease all; }

/* Modal Survery-form */
.form-modal .modal-content { border-color: #7F7F7F; border-radius: 0; box-shadow: inset 0px 0px 4px 0px #7F7F7F; }
.form-modal .modal-body { max-width: 90%; margin: 0 auto; }
.form-modal .check-inner { position: relative; max-width: 40px; padding: .75rem 1rem; border-radius: 5px; background-color: #f7f6f7; box-shadow: inset 0px 0px 4px 0px #7f7f7f21; }
.form-modal .form-check { padding-left: unset; }
/* .form-modal .form-check-input { top: 50%; left: 50%; transform: translate(-50%, -50%); width: 15px; height: 15px; margin-top: unset; margin-left: unset; padding: 0; accent-color: #31c399; } */
/* .form-modal .form-control-sm { flex: 0 0 75%; } */

.form-modal .check-inner input {  opacity: 0; cursor: pointer; }
.form-modal .check-inner .checkmark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 15px; height: 15px; border: 1px solid #31c399; border-radius: 2px; background-color: #eee; }
.form-modal .check-inner:hover input ~ .checkmark { background-color: #ccc; }
.form-modal .check-inner input:checked ~ .checkmark { background-color: white; }
.form-modal .check-inner .checkmark:after { position: absolute; display: none; content: ""; }
.form-modal .check-inner input:checked ~ .checkmark:after { display: block; }
.form-modal .check-inner .checkmark:after { top: 1px; left: 4px; width: 5px; height: 9px; border: solid #31c399; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg);  transform: rotate(45deg); }

.nav-modal-wrapper { overflow: auto; margin-bottom: 1rem; padding-bottom: 1rem; }
.nav-tabs-modal { align-items: center; flex-wrap: nowrap; margin-bottom: 0; }
.nav-tabs-modal .nav-link { position: relative; padding: 0 .75rem !important; border: none; background-color: transparent; font-size: 14px !important; color: #898b97 !important; font-weight: 500; }
.nav-tabs-modal .nav-link.active { border-bottom: 1px solid; border-color: #727ee1; background-color: transparent; color: #727ee1 !important; }
/* .nav-tabs-modal .nav-link.active::after { position: absolute; right: 0; bottom: -5px; content: ''; width: 100%; border-bottom: 3px solid #727ee1; border-top-right-radius: 10px; color: #727ee1; } */
.form-modal .form-label { margin-bottom: 0; }

.table .add-file { margin-left: 1rem; padding: .5rem 1.5rem; border-radius: 4px; background-color: #eef1ff; color: #727ee1; text-align: center; }
.table .add-file label { margin-bottom: 0; white-space: nowrap; }

/* General-risk */
.check-doors-inner { position: relative; display: flex; align-items: center; }
.check-doors-inner .form-check { padding-left: .75rem; }
.check-doors-inner input { display: none; }
.check-doors-inner input[type="checkbox"]:checked + label { background: #7F7F7F; color: white; }
.check-doors-inner label { display: flex; justify-content: center; align-items: center; padding: .5rem 1.5rem; border-radius: 4px; background: linear-gradient(180deg, rgba(232,232,234,1) 1%, rgba(255,255,255,1) 91%); color: black; box-shadow: inset 5px 0px 5px -5px rgba(0,0,0,0.3), inset -5px 0px 5px -5px rgba(0,0,0,0.3); }

/* SIte completion form */
.list-group-app .list-group-item { border: none !important; text-align: center; }

@media(max-width: 1199px) {
    .nav-tabs-modal .nav-link { white-space: nowrap; }
}

@media(max-width: 1199px) {
    .form-modal .form-label { margin-left: 1rem; }
}

@media(max-width: 991px){
    .order-category__form { margin: 0; }
}

@media(max-width: 767px) {
    .form-modal .modal-body { max-width: 100%; }
    .form-modal .form-group { margin-bottom: 1rem; }
    .form-modal .form-label { margin-left: 0; }
}

@media (max-width: 480px){
    .custom-switch { display: block !important; padding-left: unset; }
    .custom-switch .button-switch { margin: -5px 0 0 auto; }
}

