@import "asupk.css";
@import "header.css";
:root{
    --main_color: #3b638a;
    --grey: #8B8B8B;
    --grey-light: #D9D9D9;
    --btn-general_color: #3b638a;
    --btn-radius: 8px;
    --btn-paddig: 6px;
    --light-blue: #E2F4FB;
    --white: #FFFFFF;
    --black: #000000;
    --dark-graphite: #1F2024;
    --light-lavander: #F5F7FF;
    --dark-grey: #212529;
    --input-radius:14px;
    --label-color:#5f6f84;
    --red: #E57373;
    --green: #81C784;
    --yellow: #efb732;
}
/* Основные стили для закрепления столбцов и шапки */
.items-table-container {
    position: relative;
    overflow: auto;
    border: 1px solid #dee2e6;
    max-height: 650px;
}
.ts-dropdown [data-selectable].option {
    opacity: 1;
    cursor: pointer;
    text-align: start;
}


.table thead tr{
    border-top: 0px!important;
}
.payments-list-table tbody tr td:nth-child(2){
    text-align: start!important;
}
.items-table {
    width: auto;
    min-width: 100%;
    margin-bottom: 0;
}
.goodsTable thead th {
    position: sticky;
    top: 0;
    background: #343a40; /* Цвет как в table-dark */
    color: white;
    z-index: 20;
    vertical-align: middle;
    text-align: center;
}

/* Закрепление шапки */
.items-table thead th {
    position: sticky;
    top: 0;
    background: #343a40; /* Цвет как в table-dark */
    color: white;
    z-index: 20;
    vertical-align: middle;
    text-align: center;
}

/* Закрепление первого столбца (Изделие) */
.items-table tbody td:first-child {
    position: sticky;
    left: 0;
    background: white;
    z-index: 10;
    min-width: 200px;
    font-weight: bold;
}
.btn{
    white-space: nowrap;
}

.btn-complete-content{
    text-decoration: none;
}
/* Закрепление второго столбца (Даты) */
.items-table tbody td:nth-child(2)  {
    position: sticky;
    left: 200px;!important; /* Ширина первого столбца */
    background: white;
    z-index: 10;
    text-align: left;
}

/* Особые стили для закрепленных ячеек в шапке */
.items-table thead th:first-child {
    z-index: 30;
    left: 0;
}
.payments-table .fix-width{
    width: 100px!important;
    max-width: 100px!important;
    min-width: 100px!important;
    font-size: 12px;
}
.item-editable{
    cursor: pointer;
}
.filter-label{
    font-size: 12px;
}
.filter-block{
    display: flex;
    flex-direction: column;
    margin-left: 15px;
}.filter-block .ts-control{
    margin-top: 4px;
  min-width: 120px;
    max-width: 120px;
}
.items-table thead th:nth-child(2) {
    z-index: 30;
    left: 200px;
}
th{
    vertical-align: middle;
}
.payments-table {
   /* ключевой пункт */
    width: 100%;
    table-layout: fixed;
}
/* Стили для периодов */
.items-table .period {
    min-width: 100px;
    text-align: center;
}

/* Подсветка строк */
.items-table tr.table-warning td {
    background-color: #fff3cd;
}

/* Для модального окна с графиком */
#scheduleEditTable {
    max-height: 60vh;
    overflow: auto;
}

.items-table tbody td.fixed-x-td{
    position: sticky;
    left: 200px;!important;
    background: white;
    z-index: 999 !important;
    min-width: 250px!important;
    text-align: left;
}
.items-table td.fixed-x-td::after{
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 1.5px;
    background: #d1d1d1;
}

.payments-table tbody td.fixed-x-td{
    position: sticky;
    left: 250px;!important;
    background: white;
    z-index: 999 !important;
    min-width: 200px!important;
    text-align: left;
    border-right: 2px solid #d1d1d1!important;
}


#scheduleEditTable thead th {
    position: sticky;
    top: 0;
    background: white;
    z-index: 10;
}

#scheduleEditTable tbody td:first-child {
    position: sticky;
    left: 0;
    background: white;
    z-index: 5;
}

#scheduleEditTable tbody td.fixed-x-td{
    position: sticky;
    left: 200px;!important;
    background: white;
    z-index: 20 !important;
    min-width: 250px!important;
    text-align: left;
    border-right: 1px inset #282828!important;
}
#scheduleEditTable thead th:nth-child(2) {
    position: sticky;
    left: 200px;
    z-index: 100;
}
#scheduleEditTable thead th:first-child {
    position: sticky;
    left: 0px;
    z-index: 100;
}
#scheduleEditTable tbody td:nth-child(2) {
    position: sticky;
    left: 200px;
    background: white;
    z-index: 5;
}
.items-table th:nth-child(2) {
    z-index: 15;
}
.nav-link:focus, .nav-link:hover
{
    color: inherit!important;
}
.form-control{
    min-width: 60px;
}
.form-control.priceTypeInput{
    min-width: 130px;
}
/* Увеличенная ширина модального окна */
.modal-dialog.modal-xl {
    max-width: 90%;
}
/* Зафиксированный заголовок таблицы */
#scheduleEditTable {
    border-collapse: separate;
    border-spacing: 0;
}
.table-container{
    position: relative;
}
#scheduleEditTable thead {
    position: sticky;
    top: 0;
    background: white;
    z-index: 100;
}
.custom-switch-container {
    display: flex;
    align-items: center;
    gap: 10px;
    user-select: none;
}

.custom-switch-input {
    display: none;
}

.custom-switch-label {
    display: flex;
    align-items: center;
    cursor: pointer;
}
.goodsTable tr td:nth-child(2){
    text-align: start!important;
    width: 200px;
}
.custom-switch-slider {
    position: relative;
    width: 40px;
    height: 22px;
    background-color: #ccc;
    border-radius: 50px;
    transition: background-color 0.3s;
    margin-right: 10px;
}

.custom-switch-slider::before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    left: 2px;
    top: 2px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.3s;
}

.custom-switch-input:checked + .custom-switch-label .custom-switch-slider {
    background-color: var(--main_color);
}

.custom-switch-input:checked + .custom-switch-label .custom-switch-slider::before {
    transform: translateX(18px);
}

.custom-switch-text {
    font-size: 13px;
}
.items-table td.period{
    width: 70px;
    max-width: 70px;
    min-width: 70px;
}
.table-wrap {
    max-height: 700px; /* или нужная тебе высота */
    overflow: auto;
    position: relative;
}

/* Липкая шапка */
.payments-table thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #212529;
    color: white;
}

/* Липкий футер */
.payments-table tfoot td {
    position: sticky;
    bottom: 0;
    z-index: 4;
    background: #f1f1f1;
    font-weight: bold;
}

/* Липкий 1 и 2 столбцы */
.payments-table th:first-child,
.payments-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 6;
    background: white;
    min-width: 250px; /* подгони под длину item_name */
}
.payments-table thead{
    z-index: 999;
}
.payments-table th:nth-child(2),
.payments-table td:nth-child(2) {
    position: sticky;
    left: 250px; /* то же значение, что ширина первого столбца */
    z-index: 6;
    background: white;
    min-width: 150px; /* ширина колонки "Этап платежа" */
}

.bg-blue{
    background-color: rgb(237, 248, 254) !important;
}
    /* Для ячеек шапки/футера повыше z-index */
.payments-table thead th:first-child,
.payments-table tfoot td:first-child {
    z-index: 99;
}
.payments-table thead th:nth-child(2),
.payments-table tfoot td:nth-child(2) {
    z-index: 99;
}

.items-table tr td:first-child{
    text-align: start!important;
}
.t1{
    width: 5%!important;
}
.t2{
    width: 5%!important;
}
.modal-content{
    border-radius: 20px;
}
.modal-body {
    position: relative;
    flex: 1 1 auto;
    padding: 1.5rem;
    border-radius: 20px;
}
#templatesHistoryTable tr td:last-child{
    width: 75px;
}
#scheduleEditTable thead{
    z-index: 100;!important;
}
#scheduleEditTable.table-bordered>:not(caption)>*>* {
    border-width: 1px 1px!important;
}
.hidden{
    opacity: 0;
}
#paymentHistoryTable tbody tr td{
    text-align: center!important;
}
#paymentHistoryTable tbody tr td:nth-child(2){
    text-align: start!important;
}
.periodTh{
    max-width: 70px!important;
}
.customOrderTable tbody td{
    max-width: 70px!important;
}
    /* Горизонтальный скролл сверху */
.scroll-wrapper {
    overflow-x: auto;
    position: relative;
    width: 100%;
    margin-bottom: 10px;
}
.input-group *:not(input) {
    opacity: 0;
    transition: all .2s linear;
}
.input-group{
    transition: all .2s linear;
    padding: 0;
    flex-wrap: nowrap;
    border-radius: 10px;
    overflow: hidden;
    max-width: 31px;
    height: 25px;
}

td.active .input-group *:not(input) {
    opacity: 1;
    transition: all .3s linear;
}
td.active .input-group{
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    border: #d1d1d1 0.5px solid;
    max-width: 100px;
    padding: 0 10px;
}

td.active  .input-group button{
    width: unset;
    overflow: hidden;
    padding: 0 5px;
}
.input-group button{
    border: 0px;
    background: transparent;
    font-size: 18px;
    width: 0px;
    overflow: hidden;
    padding: 0px;
}
.origCount{
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translate(-50%, -50%);
}
.input-group input[type=number]::-webkit-inner-spin-button,
.input-group input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.paymentTemplatesHistoryTable tr td:nth-child(2){
    width: 200px;
    max-width: 200px;
    white-space: break-spaces;
    text-align: start;
}

.input-group input[type=number] {
    -moz-appearance: textfield;
}

.input-group input{
    padding: 0;
    border: 0;
    background: transparent ;
    text-align: center;
    width: 20px;
}
.scroll-sync-top {
    overflow-x: auto;
    height: 16px;
}

.scroll-sync-bottom {
    overflow-x: auto;
}

/* Синхронизация скролла */
.scroll-sync-top::-webkit-scrollbar {
    height: 8px;
}
.info-block, .blue-block{
    border-radius: 8px;
    padding: 8px 12px;
    background: rgb(237, 248, 254);
}
.cell-on-track { background-color: #e8f5e9; }
.cell-almost { background-color: #e3f2fd; }
.cell-plan-ok-but-delay { background-color: #fff9c4; }
.cell-delay { background-color: #ef9a9a; }
.cell-total-fail { background-color: #8b0000; color: white; }
tbody td{
    text-align: center;
}
table{
    overflow-y: unset!important;
    width: 100% !important;
}
.ts-control{
    height: 35px;
}
thead th{
    color: #fff;
    text-align: center!important;
}
.nav-link{
    color: var(--main_color);
}
table{
    border-radius: 10px;
    overflow: hidden;
}
table thead > *{
    text-align: center;
}
.items-table tbody tr td:nth-child(2),.items-table tbody tr:not(:first-child) td:nth-child(1){
    text-align: left!important;
}
.items-table tbody tr td:nth-child(2){
    width: 290px;
}
thead tr > * {
    padding: .5rem .5rem;
    background-color: var(--main_color)!important;
    border-bottom-width: 1px;
    box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
}
.btn-primary {
    color: #fff;
    background-color: var(--main_color);
    border-color: var(--main_color);
}
.header{
    background-color: var(--main_color);
    height: 50px;
    border-bottom: 4px solid #CCC;
}

.header-title{
    height: 50px;
    padding: 0 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: max-content;
    color: #FFF;
    font-size: 16px;
    font-weight: 400;
    border-bottom: 4px solid #0088cc;
}
body{
    font-family: 'roboto';
    font-weight: normal;
}
.card-all{
    background: #F5F8FB;
    border-radius: 20px;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.10);
    color: #1A1A1A;
    max-width: fit-content;
}
.table-all{
    background: #FFFFFF;
    border-radius: 12px;
    border: 1px solid #C4C9D1;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}
.table-all.dataTable{
    background: #FFFFFF;
    border-radius: 12px;
    border: 1px solid #C4C9D1;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}
.table-all thead{
    background: #EDF1F8;
    color: var(--main_color);
    border-radius: 12px 12px 0px 0px;
}
.table-all thead th:first-child {
    border-radius: 12px 0px 0px 0px;
}
.table-all thead th:last-child {
    border-radius: 0px 12px 0px 0px;
}
.table-all tbody {
    border-radius: 0px 0px 12px 12px;
}
.table-all tbody tr:last-child td:first-child {
    border-radius: 0px 0px 0px 12px;
}
.table-all tbody tr:last-child td:last-child {
    border-radius: 0px 0px 12px 0px;
}
.table-all td{
    padding: 8px 10px;
}
.caption{
    font-size: 12px;
    line-height: 16px;
    color: var(--grey);
    margin-bottom: 0;
}
table.dataTable.table-all thead th{
    color: #EDF1F8;
    background: #EDF1F8;

    /*color: var(--main_color);*/
}
table.dataTable.table-all tbody td,
table.dataTable.table-all thead th {
    border: 1px solid #bbb;
}
table.dataTable.table-all thead tr:last-child th {
    border-bottom-color: #bbb;
}
.btn-all{
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-main-solid{
    min-width: 140px;
    background-color: var(--btn-general_color);
    color: #fff;
    padding: var(--btn-paddig);
    border-radius: var(--btn-radius);
    transition: all 0.4s ease;
    border: 1.5px solid transparent;
    font-size: 13px;
}
.btn-main-solid:hover{
    border: 1.5px solid var(--btn-general_color);
    color:var(--btn-general_color);
    background-color: #fff;
}
.btn-main-outline{
    min-width: 140px;
    border: 1.5px solid var(--btn-general_color);
    border-radius: var(--btn-radius);
    color:var(--btn-general_color);
    background-color: #fff;
    padding: var(--btn-paddig);
    transition: all 0.4s ease;
    font-size: 13px;
}
.btn-main-outline:hover{
    background-color: var(--btn-general_color);
    color: #fff;
    border: 1.5px solid transparent;
}

.btn-main-outline svg path{

    transition: all .2s linear;
}
.price-input{
    width: 140px;
}
.table-dark{
    border-color: transparent!important;
}
thead{
    border: 0px;
    border-top: 0px!important;
}
th{
    font-size: 12px;
}
td{
    font-size: 12px;
}
table{
    border: 0px;
}

table thead th:last-child{
    border-radius: 0px 20px 0px 0px;
}

table thead th:first-child{
    border-radius: 20px 0px 0px 0px;
}
.btn-main-outline:hover svg path{
   stroke: var(--btn-general_color);
    transition: all .2s linear;
}

.btn-main-outline.red{
    border: 1.5px solid var(--red);
    background:var(--red);
    color: #fff;
}
.btn-main-outline.red:hover{
    background-color: #fff;
    color: var(--red);
}
.btn-main-outline.green{
    border: 1.5px solid var(--green);
    background:var(--green);
    color: #fff;
}
.btn-main-outline.green:hover{
    background-color: #fff;
    color: var(--green);
}
.btn-main-outline.grey{
    border: 1.5px solid var(--label-color);
    color:var(--label-color);
}
.btn-main-outline.grey:hover{
    background-color: var(--label-color);
    color: #fff;
}
.btn-main-outline.yellow{
    border: 1.5px solid var(--yellow);
    background:var(--yellow)
}
.modal-all .modal-header{
    border-bottom: unset;
    padding: 22px;
}
.modal-all .modal-content{
    border-radius: 10px;
    border: unset;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.modal-all .modal-body{
    padding: 0px 22px 22px;
}
.modal-all .modal-footer{
    border-top: unset;
    padding: 0px 22px 22px;
}
.modal-all .modal-title{
    color: var(--main_color);
}
.modal-all .btn-close{
    transition: all 0.4s ease;
    transform: rotate(0deg);
}
.modal-all .btn-close:hover{
    transform: rotate(180deg);
}
.form-control.select-all {
    padding: 8px 30px 8px 16px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='%23000'><path d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
}
.form-control.textarea-all,
.form-control.input-all,
.ts-control{
    padding: 8px 16px;
}
.form-control.textarea-all,
.form-control.select-all,
.form-control.input-all,
.ts-control{
    background-color: #fff;
    border-radius: var(--input-radius);
    line-height: 1;
    transition: box-shadow .2s;
    border: 1px solid #ccc;
    font-size: 14px;
}
.form-control.select-all{
    padding: 9.5px 32px 9.5px 16px;
}
.form-control.textarea-all:focus,
.form-control.select-all:focus,
.form-control.input-all:focus,
.ts-control:focus{
    outline: none;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(0, 136, 204, 0.3);
}
.label-all{
    color: var(--label-color);
    margin-bottom: 6px;
    display: block;
    font-size: 14px;
}
.line.flex-line{
    display:flex;
    gap: 15px;
    flex-wrap: nowrap;
}
.line.flex-line .flex-line-child{
    width: 100%;
}
.line.line-checkbox{
    display: flex;
    align-items: center;
    width: fit-content;
}
.error {
    border: 1px solid red !important;
}
.line.line-checkbox.last-line-checkbox{
    justify-content: end;
    margin-left: auto;
}
.btn-modal__one{
    min-width: 190px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-top: 22px;
}
.line{
    margin-bottom: 15px;
}
.ts-control input{
    font-size: 14px;
}
.ts-control .item{
    line-height: 17px;
}
.btn-id-in-table{
    display: flex;
    align-items: center;
    line-height: 100%;
    width: max-content  ;
    padding: 4px 10px;
    background: var(--btn-general_color);
    border-radius: var(--btn-radius);
    color: #fff;
    cursor: pointer;
    margin: 5px;
    border: 1.5px solid transparent;
    transition: all 0.4s ease;
}
.btn-id-in-table:hover{
    border: 1.5px solid var(--btn-general_color);
    color:var(--btn-general_color);
    background-color: #fff;
}
.btn-id-in-table svg{
    margin-right: 8px;
}
.btn-id-in-table svg path{
    stroke:#fff;
    transition: all 0.4s ease;
}
.btn-id-in-table:hover svg path{
    stroke:var(--btn-general_color);
}
.form-control.textarea-all.isDisabled,
.form-control.select-all.isDisabled,
.form-control.input-all.isDisabled,
.ts-control.isDisabled {
    color: var(--grey-light);
    cursor: not-allowed;
    opacity: 0.5;
    text-decoration: none;
    background-color: var(--grey);
    pointer-events: none;
}
.isDisabled {
    color: var(--grey-light);
    cursor: not-allowed;
    opacity: 0.5;
    text-decoration: none;
    background-color: var(--grey);
    pointer-events: none;
}
.pagination .page-item.active .page-link{
    background-color: var(--btn-general_color);
    border-color: var(--btn-general_color);
    border-radius: var(--btn-radius);
}
.pagination .page-item .page-link{
    border-radius: var(--btn-radius);
}
.body-block-center{
    height: 100vh;
    display: flex;
    flex-direction: column;
}
.main-block-center {
    display: flex;
    flex-direction: column;
    flex: 1;
    align-items: center;
    justify-content: center;
}
.card-one-block{
    max-width: 600px;
}
.section-signin{
    width: 100%;
    display: flex;
    justify-content: center;
}
.b-txt-form-line{
    display: flex;
    justify-content: space-between;
    gap: 15px;
}
.btn-signin{
    width: 100%;
    max-width: 190px;
    margin: 0 auto;
}
.link-all{
    color: var(--btn-general_color);
}
.link-all:hover{
    color: var(--btn-general_color);
}
.link-bottom-border{
    text-decoration: none;
    position: relative;
    transition: all 0.6s;
    -moz-transition: all 0.6s;
    -o-transition: all 0.6s;
    -webkit-transition: all 0.6s;
}
.link-bottom-border:before{
    content: "";
    width: 0;
    height: 0.1em;
    position: absolute;
    bottom: 0;
    left: 50%;
    background: inherit;
    transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    -webkit-transition: all 0.3s;
}
.link-bottom-border:hover:before{
    width: 100%;
    left: 0;
    background: var(--btn-general_color);
}
.color-main{
    color: var(--btn-general_color);
}
.bg-lavander{
    background-color: var(--light-lavander);
}

.form-check-input:focus{
    box-shadow: unset;
}
.form-check-input {
    appearance: none;
    -webkit-appearance: none;
    width: 1.2em;
    height: 1.2em;
    margin-top: 0.1em;
    background: #F6F6F6;
    cursor: pointer;
}
.form-check-input:checked{
    background-color: var(--btn-general_color);
    border-color: var(--btn-general_color);

}
.form-check-label {
    margin-left: 0.5em;
    cursor: pointer;
}
.btn-logout, .btn-login{
    color:var(--white);
    text-decoration: none;
}
.btn-logout svg path, .btn-login svg path{
    stroke:var(--white);
    transition: all 0.4s ease;
}
.btn-logout:hover svg path.arrow{
    transform: translateX(-3px);
}
.btn-login:hover svg path.arrow{
    transform: translateX(3px);
}
.thumbnail {
    display: block;
    padding: 4px;
    line-height: 1.42857143;
    border-radius: 4px;
    -webkit-transition: border .2s ease-in-out;
    -o-transition: border .2s ease-in-out;
    transition: border .2s ease-in-out;
}
.thumbnail .thumb-preview {
    position: relative;
}
.shadow-style-1 {
    box-shadow: 0px 0px 12px 12px rgba(245, 247, 255, 0.2);
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    transition: all 0.4s ease;
    background: var(--light-lavander);
    border-radius: var(--input-radius);
}
.shadow-style-1:hover {
    box-shadow: 0px 0px 12px 12px rgba(245, 247, 255, 0.4);
}
.thumbnail > img, .thumbnail a > img {
    height: 160px;
    width: auto;
    margin-right: auto;
    margin-left: auto;
    display: block;
}
.thumbnail .thumb-preview .show-help-btn {
    position: absolute;
    right: 4px;
    bottom: 3px;
    z-index: 999;
    color: #ffffff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: #279;
    border: 1px #279 solid;
    border-radius: 50px;
    padding: 3px 7px 0;
}
.thumbnail .title__service-one {
    font-weight: bold;
    margin-top: 5px;
}
.section-banner-home{
    background: var(--light-lavander);
    padding: 70px 0px;
}
.clear-search-input {
    position: absolute;
    right: 10px;
    top: 7px;
    z-index: 999;
    color: var(--btn-general_color);
    font-size: 14px;
}
.search-service-label{
    display: block;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}
.go-to-kohana{
    color: var(--white);
    transition: all 0.4s ease;
    border: 1px solid var(--white);
    padding: 2px 4px;
    border-radius: 100%;
}
.go-to-kohana svg{
    transform: rotateY(0);
    transition: transform 0.6s ease;
}
.go-to-kohana:hover svg{
    transform: rotateY(360deg);
}
.go-to-kohana:hover{
    color: var(--white);
}
.select-inside{
    max-width: fit-content;
}
#select_type_login + .ts-wrapper{
    flex: 0 0 180px;
}
.input-group .ts-control,
.input-group .ts-wrapper.single.input-active .ts-control {
    border-radius: 0px var(--input-radius) var(--input-radius) 0;
    background-color: var(--grey-light);
}
table.dataTable {
    border-collapse: collapse;
    width: 100%;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

table.dataTable thead th {
    background-color: #2d2a3e;
    color: white;
    font-weight: normal;
    padding: 15px 10px;
    border: none;
    text-align: left;
}

table.dataTable tbody tr {
    background-color: white;
}

table.dataTable tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

table.dataTable tbody td {
    padding: 12px 10px;
    border: none;
    border-bottom: 1px solid #f0f0f0;
}

/* Remove default DataTables styling */
table.dataTable.no-footer {
    border-bottom: none;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate {

    margin: 15px 0;
}

.dataTables_wrapper .dataTables_filter input {
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 4px;
    padding: 5px 10px;
}

.dataTables_wrapper .dataTables_length select {
    background-color: rgba(255, 255, 255, 0.9);

    border-radius: 4px;

}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    background: transparent;
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    padding: 5px 10px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: rgba(255, 255, 255, 0.2);
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: rgba(255, 255, 255, 0.3);
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.6);
}
.table-info td{
    padding: 8px 10px;
}
.table-info tr{
    border-bottom: 1px solid var(--grey-light);
}
.table-info tr:last-child{
    border-bottom: unset;
}