@keyframes spinning{0%{transform:rotate(0)}to{transform:rotate(2turn)}}fieldset[disabled] .multiselect{pointer-events:none}.multiselect__spinner{position:absolute;right:1px;top:1px;width:40px;height:38px;background:#fff;display:block}.multiselect__spinner::after,.multiselect__spinner::before{position:absolute;content:"";top:50%;left:50%;margin:-8px 0 0-8px;width:16px;height:16px;border-radius:100%;border-color:#41b883 transparent transparent;border-style:solid;border-width:2px;box-shadow:0 0 0 1px transparent;animation:spinning 2.4s cubic-bezier(.41,.26,.2,.62);animation-iteration-count:infinite}.multiselect__spinner::after{animation:spinning 2.4s cubic-bezier(.51,.09,.21,.8)}.multiselect__loading-enter-active{transition:opacity .4s ease-in-out;opacity:1}.multiselect__loading-leave-active{transition:opacity .4s ease-in-out}.multiselect__loading-enter,.multiselect__loading-leave-active{opacity:0}.multiselect,.multiselect__input,.multiselect__single{font-family:inherit;font-size:16px;touch-action:manipulation}.multiselect{box-sizing:content-box;display:block;position:relative;width:100%;min-height:40px;text-align:left;color:#35495e}.multiselect *{box-sizing:border-box}.multiselect:focus{outline:0}.multiselect--disabled{background:#ededed;pointer-events:none;opacity:.6}.multiselect--active{z-index:50}.multiselect--active:not(.multiselect--above) .multiselect__current,.multiselect--active:not(.multiselect--above) .multiselect__input,.multiselect--active:not(.multiselect--above) .multiselect__tags{border-bottom-left-radius:0;border-bottom-right-radius:0}.multiselect--active .multiselect__select{transform:rotateZ(180deg)}.multiselect--above.multiselect--active .multiselect__current,.multiselect--above.multiselect--active .multiselect__input,.multiselect--above.multiselect--active .multiselect__tags{border-top-left-radius:0;border-top-right-radius:0}.multiselect__input{padding:0 0 0 5px;margin-bottom:8px}.multiselect__input,.multiselect__single{position:relative;display:inline-block;min-height:20px;line-height:20px;border:0;border-radius:5px;background:#fff;width:calc(100%);transition:border .1s ease;box-sizing:border-box;vertical-align:top}.multiselect__input::placeholder{color:#35495e}.multiselect__tag~.multiselect__input,.multiselect__tag~.multiselect__single{width:auto}.multiselect__input:hover,.multiselect__single:hover{border-color:#cfcfcf}.multiselect__input:focus,.multiselect__single:focus{border-color:#a8a8a8;outline:0}.multiselect__single{padding:0 0 0 5px;margin-bottom:8px}.multiselect__tags-wrap{display:inline}.multiselect__tags{min-height:40px;display:block;padding:8px 40px 0 8px;border-radius:5px;border:1px solid #e8e8e8;background:#fff;font-size:14px}.multiselect__tag{position:relative;display:inline-block;padding:4px 26px 4px 10px;border-radius:5px;margin-right:10px;color:#fff;line-height:1;background:#41b883;margin-bottom:5px;white-space:nowrap;overflow:hidden;max-width:100%;text-overflow:ellipsis}.multiselect__tag-icon{cursor:pointer;margin-left:7px;position:absolute;right:0;top:0;bottom:0;font-weight:700;font-style:initial;width:22px;text-align:center;line-height:22px;transition:all .2s ease;border-radius:5px}.multiselect__tag-icon::after{content:"×";color:#266d4d;font-size:14px}.multiselect__tag-icon:focus::after,.multiselect__tag-icon:hover::after{color:#fff}.multiselect__current,.multiselect__select{line-height:16px;display:block;box-sizing:border-box;margin:0;text-decoration:none;cursor:pointer}.multiselect__current{min-height:40px;overflow:hidden;padding:8px 30px 0 12px;white-space:nowrap;border-radius:5px;border:1px solid #e8e8e8}.multiselect__select{position:absolute;width:40px;height:38px;right:1px;top:1px;padding:4px 8px;text-align:center;transition:transform .2s ease}.multiselect__select::before{position:relative;right:0;top:65%;color:#999;margin-top:4px;border-style:solid;border-width:5px 5px 0;border-color:#999 transparent transparent;content:""}.multiselect__placeholder{color:#adadad;display:inline-block;margin-bottom:10px;padding-top:2px}.multiselect--active .multiselect__placeholder{display:none}.multiselect__content-wrapper{position:absolute;display:block;background:#fff;width:100%;max-height:240px;overflow:auto;border:1px solid #e8e8e8;border-top:none;border-bottom-left-radius:5px;border-bottom-right-radius:5px;z-index:50;-webkit-overflow-scrolling:touch}.multiselect__content{list-style:none;display:inline-block;padding:0;margin:0;min-width:100%;vertical-align:top}.multiselect--above .multiselect__content-wrapper{bottom:100%;border-bottom-left-radius:0;border-bottom-right-radius:0;border-top-left-radius:5px;border-top-right-radius:5px;border-bottom:none;border-top:1px solid #e8e8e8}.multiselect__content::-webkit-scrollbar{display:none}.multiselect__element{display:block}.multiselect__option{display:block;padding:12px;min-height:40px;line-height:16px;text-decoration:none;text-transform:none;vertical-align:middle;position:relative;cursor:pointer;white-space:nowrap}.multiselect__option::after{top:0;right:0;position:absolute;line-height:40px;padding-right:12px;padding-left:20px;font-size:13px}.multiselect__option--highlight{background:#41b883;outline:0;color:#fff}.multiselect__option--highlight::after{content:attr(data-select);background:#41b883;color:#fff}.multiselect__option--selected{background:#f3f3f3;color:#35495e;font-weight:700}.multiselect__option--selected::after{content:attr(data-selected);color:silver;background:inherit}.multiselect__option--selected.multiselect__option--highlight{background:#ff6a6a;color:#fff}.multiselect__option--selected.multiselect__option--highlight::after{background:#ff6a6a;content:attr(data-deselect);color:#fff}.multiselect--disabled .multiselect__current,.multiselect--disabled .multiselect__select{background:#ededed;color:#a6a6a6}.multiselect__option--disabled{background:#ededed!important;color:#a6a6a6!important;cursor:text;pointer-events:none}.multiselect__option--group{background:#ededed;color:#35495e}.multiselect__option--group.multiselect__option--highlight{background:#35495e;color:#fff}.multiselect__option--group.multiselect__option--highlight::after{background:#35495e}.multiselect__option--disabled.multiselect__option--highlight{background:#dedede}.multiselect__option--group-selected.multiselect__option--highlight{background:#ff6a6a;color:#fff}.multiselect__option--group-selected.multiselect__option--highlight::after{background:#ff6a6a;content:attr(data-deselect);color:#fff}.multiselect-enter-active,.multiselect-leave-active{transition:all .15s ease}.multiselect-enter,.multiselect-leave-active{opacity:0}.multiselect__strong{margin-bottom:8px;line-height:20px;display:inline-block;vertical-align:top}[dir=rtl] .multiselect{text-align:right}[dir=rtl] .multiselect__select{right:auto;left:1px}[dir=rtl] .multiselect__tags{padding:8px 8px 0 40px}[dir=rtl] .multiselect__content{text-align:right}[dir=rtl] .multiselect__option::after{right:auto;left:0}[dir=rtl] .multiselect__clear{right:auto;left:12px}[dir=rtl] .multiselect__spinner{right:auto;left:1px}
.input-quantity[data-v-5661aa2a] {
    width: 50px;
    margin-left: 10px;
}

/* Стилизация JSON-вьювера, чтобы у кнопки были маленькие отступы */
.jv-container.jv-light .jv-code {
    padding: 2px;
}
.error-row {
    color: red;
}
/* Часть иконок взяты отсюда https://fontawesomeicons.com/ и дополнительно подключены в index.html ссылкой */
.slider-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    /* justify-content: center;
    align-items: center; */
    overflow-y: auto; /* если слайдер длиннее окна */
    padding: 20px; /* отступ для предотвращения прилипания к краям окна */
}
.slider-content {
    position: relative;
    background: #fff;
    padding: 20px;
    border-radius: 5px;
    max-height: 90vh; /* ограничиваем высоту 90% от высоты экрана */
    overflow-y: auto; /* добавляем прокрутку */
}
.slider-enter-active,
.slider-leave-active {
    transition: opacity 0.5s;
}
.slider-enter,
.slider-leave-to {
    opacity: 0;
}
.close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
}
.modal-modal {
    position: fixed; /* фиксированное позиционирование относительно окна браузера */
    top: 0; /* отступ сверху равен 0 - модальное окно начинается с верха экрана */
    left: 0; /* отступ слева равен 0 - модальное окно начинается с левого края экрана */
    right: 0; /* растягивает блок до правого края экрана */
    bottom: 0; /* растягивает блок до нижнего края экрана */
    background: #f5f7fa; /* затемнение фона (закомментировано) */
    display: flex; /* включает flex-контейнер для удобного центрирования содержимого */
    justify-content: center; /* горизонтальное центрирование содержимого */
    /*  align-items: center; вертикальное центрирование содержимого */
    /*overflow-y: auto;  если слайдер длиннее окна */ /* позволяет прокручивать содержимое, если оно выходит за пределы окна (закомментировано) */
    padding: 20px; /* внутренний отступ, предотвращающий прилипание содержимого к краям окна */
}
.modal-content {
    position: relative; /* относительно позиционированный контейнер для внутренних элементов */
    /* background: #625f59;  фоновый цвет модального окна */
    padding: 20px; /* внутренний отступ для содержимого модального окна */
    border-radius: 5px; /* скругление углов модального окна */
    /* height: 250px;  высота модального окна */
    width: 500px; /* ширина модального окна */
    max-height: 15vh; /* ограничение максимальной высоты модального окна относительно высоты экрана */
    overflow-y: auto; /* добавление вертикальной прокрутки при переполнении содержимого */
    border: 4px solid #27ae60; /* добавлена граница: 2px шириной, сплошная, с золотым цветом */
}
.modal-text {
    justify-content: center; /* горизонтальное центрирование содержимого */
    align-items: center; /* вертикальное центрирование содержимого */
    font-weight: bold; /* Жирный */
    padding-top: 40px; /* внутренний отступ для текста */
}
.modal-yes {
    background-color: #27ae60; /* цвет фона кнопки */
    color: #fff; /* цвет текста кнопки */
    border: none; /* убираем границу у кнопки */
    padding: 10px 20px; /* внутренний отступ кнопки */
    margin-top: 20px; /* отступ сверху для кнопки */
    cursor: pointer; /* изменение формы курсора при наведении на кнопку */
}
.modal-no {
    background-color: #e77164; /* цвет фона кнопки */
    color: #fff; /* цвет текста кнопки */
    border: none; /* убираем границу у кнопки */
    padding: 10px 20px; /* внутренний отступ кнопки */
    margin-top: 20px; /* отступ сверху для кнопки */
    cursor: pointer; /* изменение формы курсора при наведении на кнопку */
}
.modal-no:hover {
    background-color: #ea5b4b; /* цвет фона кнопки */
}
.modal-enter-active,
.modal-leave-active {
    transition: opacity 0.5s; /* плавное изменение прозрачности при появлении и скрытии модального окна */
}
.modal-enter,
.modal-leave-to {
    opacity: 0; /* начальное и конечное состояние прозрачности для анимации */
}
.close-button {
    position: absolute; /* абсолютное позиционирование относительно родительского элемента */
    top: 5px; /* отступ сверху для кнопки закрытия */
    right: 5px; /* отступ справа для кнопки закрытия */
    z-index: 1; /* установка приоритета по слоям для отображения кнопки над другими элементами */
}
/* Кнопки переключения. Используются в смарт процессах, при выборе полей и т.д*/
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}
/* Hide default HTML checkbox */
.switch input {
    display: none;
}
/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}
.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}
input:checked + .slider {
    background-color: #27ae60;
}
input:focus + .slider {
    box-shadow: 0 0 1px #27ae60;
}
input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}
.slider.round:before {
    border-radius: 50%;
}
.loader {
    width: 35px;
    height: 16px;
    /* display: block; */
    margin: 5px;
    padding: 5px;
    background-image: radial-gradient(circle 25px at 25px 25px, #fff 100%, transparent 0), radial-gradient(circle 50px at 50px 50px, #fff 100%, transparent 0), radial-gradient(circle 25px at 25px 25px, #fff 100%, transparent 0), linear-gradient(#fff 50px, transparent 0);
    background-size: 50px 50px, 100px 76px, 50px 50px, 120px 40px;
    background-position: 0px 30px, 37px 0px, 122px 30px, 25px 40px;
    background-repeat: no-repeat;
    position: relative;
    box-sizing: border-box;
}
.loader::before {
    content: "";
    left: 5px;
    bottom: 0px;
    position: absolute;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #27ae60;
    background-image: radial-gradient(circle 8px at 18px 18px, #fff 100%, transparent 0), radial-gradient(circle 4px at 18px 0px, #fff 100%, transparent 0), radial-gradient(circle 4px at 0px 18px, #fff 100%, transparent 0), radial-gradient(circle 4px at 36px 18px, #fff 100%, transparent 0),
        radial-gradient(circle 4px at 18px 36px, #fff 100%, transparent 0), radial-gradient(circle 4px at 30px 5px, #fff 100%, transparent 0), radial-gradient(circle 4px at 30px 5px, #fff 100%, transparent 0), radial-gradient(circle 4px at 30px 30px, #fff 100%, transparent 0),
        radial-gradient(circle 4px at 5px 30px, #fff 100%, transparent 0), radial-gradient(circle 4px at 5px 5px, #fff 100%, transparent 0);
    background-repeat: no-repeat;
    box-sizing: border-box;
    animation: rotationBack 3s linear infinite;
}
.loader::after {
    content: "";
    left: 39px;
    bottom: 0px;
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #27ae60;
    background-image: radial-gradient(circle 5px at 12px 12px, #fff 100%, transparent 0), radial-gradient(circle 2.5px at 12px 0px, #fff 100%, transparent 0), radial-gradient(circle 2.5px at 0px 12px, #fff 100%, transparent 0), radial-gradient(circle 2.5px at 24px 12px, #fff 100%, transparent 0),
        radial-gradient(circle 2.5px at 12px 24px, #fff 100%, transparent 0), radial-gradient(circle 2.5px at 20px 3px, #fff 100%, transparent 0), radial-gradient(circle 2.5px at 20px 3px, #fff 100%, transparent 0), radial-gradient(circle 2.5px at 20px 20px, #fff 100%, transparent 0),
        radial-gradient(circle 2.5px at 3px 20px, #fff 100%, transparent 0), radial-gradient(circle 2.5px at 3px 3px, #fff 100%, transparent 0);
    background-repeat: no-repeat;
    box-sizing: border-box;
    animation: rotationBack 4s linear infinite reverse;
}
@keyframes rotationBack {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-360deg);
    }
}
.multiselect {
    width: 500px;
    white-space: pre-wrap;
    /* margin: 0 auto; */
    /* position: relative; */
}
.multiselect_active {
    width: 500px;
    height: 200px;
}
/* Сброс базовых стилей */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* Основной стиль для body */
body {
    font-family: "Open Sans", sans-serif;
    background-color: #f5f7fa;
    color: #333;
    line-height: 1.6;
    padding: 20px;
    /* display: flex; добавлено для выравнивания по центру */
    /* flex-direction: column; элементы располагаются в колонку */
    align-items: center; /* центрирование по горизонтали */
    justify-content: center; /* центрирование по вертикали */
    /* min-height: 100vh; минимальная высота экрана */
    /* min-width: 100vh; минимальная ширина экрана */
    width: 100%; /* Гарантирует, что body занимает всю ширину */
}
/* Заголовки */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: #2c3e50;
    margin-bottom: 15px;
}
/* Ссылки */
a {
    color: #2980b9;
    text-decoration: none;
    transition: color 0.3s;
}
a:hover {
    color: #3498db;
}
/* Кнопки */
button {
    display: inline-block;
    background-color: #27ae60;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
    margin: 10px;
}
button.big {
    font-size: 25px;
    padding: 10px 20px;
    margin: 0px 5px;
}
button:hover {
    background-color: #2ecc71;
}
/* Стили для активной (отмеченной) кнопки */
button.active {
    background-color: #f39c12; /* изменённый цвет для выделенной кнопки */
}
button.disabled {
    background-color: #bdc3c7; /* изменённый цвет для выделенной кнопки */
}
button.cancel {
    background-color: #a30c0c; /* изменённый цвет для выделенной кнопки */
}
/* Формы и поля ввода */
input[type="text"],
input[type="email"],
textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #bdc3c7;
    border-radius: 4px;
    margin-bottom: 15px;
    background-color: #ecf0f1;
}
input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
    width: 500px;
    outline: none;
    border-color: #2980b9;
}
/* Карточки */
.card {
    background-color: #fff;
    border: 1px solid #e1e8ed;
    border-radius: 6px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(214, 31, 31, 0.1);
}
/* Списки */
ul {
    list-style-type: disc;
    padding-left: 20px;
    margin-bottom: 15px;
}
/* Текстовые блоки и абзацы */
p {
    margin-bottom: 15px;
}
/* Навигация */
nav {
    background-color: #f5f7fa;
    padding: 10px 20px;
    border-radius: 4px;
    margin-bottom: 20px;
    align-items: center; /* центрирование по горизонтали */
}
nav a {
    color: #ecf0f1;
    margin-right: 15px;
}
nav a:hover {
    color: #bdc3c7;
}
/* Таблицы */
table {
    /*display: block;  Позволяет применять overflow-x */
    table-layout: auto; /* авторасширение таблицы */
    width: auto;
    /* overflow-x: auto;  Включает горизонтальную прокрутку при переполнении */
    border-collapse: collapse;
    margin-bottom: 20px;
    white-space: nowrap;
}
table th,
table td {
    padding: 12px 15px;
    border: 1px solid #e1e8ed;
    text-align: left;
}
table th {
    background-color: #f5f7fa;
    color: #2c3e50;
}
table tr:nth-child(even) {
    background-color: #f9f9f9;
}
table tr:hover {
    background-color: #f1f1f1;
}
