.bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

@media (min-width: 768px) {
    .bd-placeholder-img-lg {
        font-size: 3.5rem;
    }
}

@keyframes spinner-border {
    100% {
        transform: rotate(360deg);
    }
}

.text-muted {
    white-space: nowrap;
}

fieldset, legend {
    all: revert;
}

fieldset.allio {
    all: unset;
    margin-top: -10px;
}

fieldset.allio > legend{
    text-align: center;
}

.d-red {
    border: 1rem solid indianred;
}

table th {
    text-align: center;
}

.params {
    font-size: 1.4rem;
}

.col-sm .form-control,
.col-sm .form-select {
    min-height: 35px;
    font-size: 1.7rem;
}

.dataTables_length,
.dataTables_filter {
    display: none;
}

.dataTable {
    font-size: 1.7rem;
}

.dataTables_info {
    display: flex;
    justify-content: center;
}

.discount_select .kp-red {
    color: #c92929;
}

select option:disabled {
    color: #d3d3d3;
    font-style: italic;
}

.text-center {
    position: relative;
    justify-content: center;
}

.radio-head {
    position: absolute;
    margin-top: -22px;
    width: 80%;
}

.state {
    width: 30%;
    margin-left: 35%;
    color: #294ec9;
    text-align: right;
}

#add-sum {
    width: 135px;
}

.transh {
    display: none;
}

.datepicker .span2 {
    background-color: #87faae;
}

.icon-arrow-left,
.icon-arrow-right {
    font-style: normal;
}

.icon-arrow-left::before {
    content: "⮜";
}

.icon-arrow-right::before {
    content: "⮞";
}
/* Список банков и расчеты */
/* .row и .card — флекс-контейнеры, их потомки по умолчанию не сжимаются уже
   содержимого (min-width: auto), поэтому широкая таблица растягивала блок вместо
   того, чтобы прокручиваться внутри .table-responsive */
#banks-list-block [class^="col"],
#banks-list-block .card,
#banks-list-block .card-body {
    min-width: 0;
}

#banks-list-block td,
#banks-list-block th {
    padding: 6px;
    white-space: nowrap;
}

/* заголовки в две строки — межстрочный интервал плотнее обычного */
#banks-list-block thead th {
    line-height: 1.15;
}

/* цифры выравниваются по правому краю — так их проще сравнивать между строками;
   текстовые колонки (банк, программа, лимит) читаются слева.
   Номера колонок соответствуют colgroup в banks_list_block.php */
#banks-list-block td:not(.text-center) {
    text-align: right;
}

#banks-list-block td:nth-child(1),
#banks-list-block td:nth-child(2),
#banks-list-block td:nth-child(10) {
    text-align: left;
}

/* заголовки — по центру независимо от выравнивания значений в столбце */
#banks-list-block thead th {
    text-align: center;
}

/* прилипающие колонки — только на десктопе: на узких экранах они съедали бы
   и без того малую видимую ширину таблицы */
@media (min-width: 992px) {
    /* банк и программа остаются на месте при горизонтальной прокрутке таблицы.
       Фон обязателен — под прилипшими ячейками проезжает остальная таблица, а разделитель
       нарисован тенью: при border-collapse границы у sticky-ячеек не держатся */
    #banks-list-block th:nth-child(1),
    #banks-list-block td:nth-child(1),
    #banks-list-block th:nth-child(2),
    #banks-list-block td:nth-child(2) {
        position: sticky;
        z-index: 1;
        background-color: #fff;
    }

    #banks-list-block th:nth-child(1),
    #banks-list-block td:nth-child(1) {
        left: 0;
    }

    #banks-list-block th:nth-child(2),
    #banks-list-block td:nth-child(2) {
        left: var(--banks-list-bank-width);
        box-shadow: 1px 0 0 #dee2e6;
    }

    /* угол таблицы: заголовки прилипших колонок перекрывают и строки, и шапку */
    #banks-list-block thead th:nth-child(1),
    #banks-list-block thead th:nth-child(2) {
        z-index: 3;
    }

    #banks-list-block thead th:nth-child(2) {
        box-shadow: 1px 0 0 #dee2e6, inset 0 -1px 0 #dee2e6;
    }

    /* подсветка строки при наведении не доходит до прилипших ячеек — повторяем её цвет */
    #banks-list-block tbody tr:hover td:nth-child(1),
    #banks-list-block tbody tr:hover td:nth-child(2) {
        background-color: #f2f2f2;
    }
}

/* лимит программы отделён от цифр слева, чтобы статус не липнул к соседней колонке */
#banks-list-block td:nth-child(10) {
    padding-left: 10px;
}

/* мелкие подписи под значениями переносятся, чтобы не вылезать за колонку */
#banks-list-block td small {
    white-space: normal;
}

/* ширины из <col> соблюдаются только при фиксированной раскладке: при table-layout auto
   браузер расширяет колонку под содержимое и заданную ширину игнорирует. Ширина по
   содержимому вместо .table { width: 100% } — иначе колонки сжались бы под контейнер;
   так сумму ширин пересчитывать не нужно */
/* таблица прокручивается внутри своего окна, а не всей страницей: так горизонтальная
   полоса прокрутки всегда под рукой, у нижнего края экрана, а не в конце длинного списка */
#banks-list-block .table-responsive {
    max-height: 85vh;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: #7cb0e3 transparent;
}

#banks-list-block .table-responsive::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

#banks-list-block .table-responsive::-webkit-scrollbar-track {
    background-color: #e3eef9;
}

#banks-list-block .table-responsive::-webkit-scrollbar-thumb {
    background-color: #7cb0e3;
    border-radius: 4px;
}

#banks-list-block .table-responsive::-webkit-scrollbar-thumb:hover {
    background-color: #5b98d6;
}

#banks-list-block .table {
    table-layout: fixed;
    width: max-content;
}

/* шапка остаётся видимой при вертикальной прокрутке списка */
#banks-list-block thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: #fff;
    box-shadow: inset 0 -1px 0 #dee2e6;
}

/* ширины колонок задаются через <col>, перенос текста — только на ячейках:
   col понимает лишь width, border, background и visibility */
/* блок вынесен из .container страницы: на широком экране занимает почти всю ширину окна,
   но не растягивается бесконечно — иначе шапка карточки уезжала бы к краям, а таблица
   оставалась посередине */
.banks-list-wrap {
    max-width: 1800px;
    margin-left: auto;
    margin-right: auto;
}

#banks-list-block {
    /* ширина колонки банка нужна и для отступа прилипающей колонки программы */
    --banks-list-bank-width: 120px;

    /* блок вынесен из .container страницы и занимает всю ширину окна */
    margin-top: 3rem;

    /* на странице со списком подвал скрыт, снизу остаётся отступ от края страницы */
    margin-bottom: 10px;
}

/* когда окно шире таблицы, она стоит по центру, а не липнет к левому краю */
#banks-list-block .table {
    margin-left: auto;
    margin-right: auto;
}

#banks-list-block .banks-list-col-bank {
    width: var(--banks-list-bank-width);
}

#banks-list-block .banks-list-col-prog {
    width: 280px;
}

#banks-list-block .banks-list-col-rate {
    width: 80px;
}

#banks-list-block .banks-list-col-rate-final {
    width: 90px;
}

#banks-list-block .banks-list-col-kv {
    width: 120px;
}

#banks-list-block .banks-list-col-pv {
    width: 220px;
}

#banks-list-block .banks-list-col-credit,
#banks-list-block .banks-list-col-pay,
#banks-list-block .banks-list-col-cost,
#banks-list-block .banks-list-col-maxcost {
    width: 140px;
}

#banks-list-block .banks-list-col-period {
    width: 110px;
}

#banks-list-block .banks-list-col-limit {
    width: 170px;
}

#banks-list-block .banks-list-col-action {
    width: 100px;
}

#banks-list-block .banks-list-prog {
    white-space: normal;
}

/* описание акции выводится в .text-muted, которому выше задан nowrap — здесь нужен перенос */
#banks-list-block .banks-list-prog * {
    white-space: normal;
    overflow-wrap: break-word;
}
