@charset "UTF-8";
@font-face {
  font-family: nunito;
  src: url(../fonts/NunitoSans_7pt-ExtraLight.woff2), url(../fonts/NunitoSans_7pt-ExtraLight.woff);
  font-weight: 200;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: nunito;
  src: url(../fonts/NunitoSans_7pt-Light.woff2), url(../fonts/NunitoSans_7pt-Light.woff);
  font-weight: 300;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: nunito;
  src: url(../fonts/NunitoSans_7pt-Regular.woff2), url(../fonts/NunitoSans_7pt-Regular.woff);
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: nunito;
  src: url(../fonts/NunitoSans_7pt-SemiBold.woff2), url(../fonts/NunitoSans_7pt-SemiBold.woff);
  font-weight: 600;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: nunito;
  src: url(../fonts/NunitoSans_7pt-Bold.woff2), url(../fonts/NunitoSans_7pt-Bold.woff);
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}
* {
  padding: 0;
  margin: 0;
  border: 0;
}

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

:focus, :active {
  outline: none;
}

a:focus, a:active {
  outline: none;
}

nav, footer, header, aside {
  display: block;
}

html, body {
  height: 100%;
  width: 100%;
  font-size: 100%;
  line-height: 1;
  font-size: 14px;
  -ms-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

input, button, textarea {
  font-family: inherit;
}

input::-ms-clear {
  display: none;
}

button {
  cursor: pointer;
}

button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

a, a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

ul li {
  list-style: none;
}

img {
  vertical-align: top;
}

h1, h2, h3, h4, h5, h6 {
  font-style: inherit;
  font-weight: 400;
}

button {
  background-color: transparent;
  border: none;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

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

body {
  overflow-x: hidden;
  min-width: 320px;
  background: #F0F3F9;
  font-family: nunito, sans-serif;
  color: #000;
  line-height: normal;
  letter-spacing: 0px;
}

.wrapper {
  min-height: 100%;
  position: relative;
  display: grid;
  grid-template-columns: 285px calc(100vw - 285px - 15px);
  grid-template-columns: 285px calc(100% - 285px);
}
.wrapper:has(.reg-and-log) {
  display: block;
}
.wrapper:has(.reg-and-log) .sidebar {
  display: none;
}

.main {
  flex: 1 0 auto;
  padding: 40px 0;
  grid-column: 2/3;
}

.header {
  flex: 1 0 auto;
}

.footer {
  flex: 0 0 auto;
}

.container {
  max-width: 1050px;
  width: 100%;
  margin: 0 auto;
  padding: 0 15px;
  margin: 0 auto 0 0;
  padding: 0 15px 0 60px;
}
.container:has(.purchases__items-box) {
  padding-left: 60px;
}

.title-box {
  width: 100%;
  padding-bottom: 10px;
  border-bottom: 1px solid #B0B0B0;
  margin-bottom: 20px;
}
.title-box--line {
  padding-bottom: 0;
  margin-bottom: 14px;
}

.title {
  font-size: 20px;
  font-weight: 700;
}
h3.title {
  font-size: 16px;
}

.title--up {
  text-transform: uppercase;
}

a {
  font-family: nunito, sans-serif;
  color: #000;
  line-height: normal;
}

.logo {
  margin-bottom: 40px;
}
.logo__img {
  display: block;
  /*
   * Ширина/высота продублированы из width/height атрибутов <img> —
   * без них браузер не знает пропорции SVG до его загрузки и резервирует
   * нулевую высоту, из-за чего меню под логотипом "прыгает" вниз в момент
   * рендера. Фиксируем размер сразу, чтобы верстка не зависела от таймингов
   * загрузки картинки.
   */
  width: 49px;
  height: 86px;
}

.nav__list {
  display: flex;
  flex-direction: column;
  gap: 17px;
}
.nav__item-services {
  margin-top: 24px;
}
.nav__item-account {
  margin-top: 24px;
}
.nav__link {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 15px;
  font-size: 16px;
  font-weight: 600;
}
.nav__count {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #EB5757;
  color: #FFF;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
}

.btn ,
.button{
  width: fit-content;
  min-height: 35px;
  padding: 5px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  border-radius: 4px;
  background-color: #4D4AFD;
  color: #FFF;
  font-size: 16px;
  font-weight: 400;
}
.btn:active {
  background-color: #000;
}
.btn--green {
  background-color: #00BE35;
}
.btn--cancel {
  min-height: 35px;
  padding: 5px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  border: 1px solid #E7EBEE;
  color: #B0B0B0;
  font-size: 16px;
  font-weight: 400;
}
.btn--cancel:active {
  color: #000;
  background-color: #E7EBEE;
}
.btn--muted {
  min-height: 35px;
  padding: 5px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  border: 1px solid #E7EBEE;
  background-color: #E7EBEE;
  color: #000;
  font-size: 14px;
  font-weight: 400;
}
.btn__copy {
  width: 17px;
  height: 17px;
}
.btn.default {
    background: #696969;
}
.btn--search {
  max-width: 92px;
  width: 100%;
  height: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #4D4AFD;
}
.btn--action {
  min-width: 60px;
  min-height: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #000;
  font-size: 7px;
  font-weight: 400;
  text-transform: uppercase;
  border-radius: 4px;
  border: 1px solid #E7EBEE;
}

.socials__link {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 15px;
}
.socials__link img {
  display: block;
  width: 27px;
}
.socials__link span {
  font-size: 14px;
  font-weight: 600;
}

.copyright {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 8px;
}
.copyright a {
  color: #B0B0B0;
  font-size: 10px;
  font-weight: 300;
}

.icon-nav {
  width: 19px;
  height: 19px;
  fill: #231F20;
}
.icon-eye {
  width: 15px;
  height: 15px;
  stroke: #242424;
  fill: transparent;
}
.icon-exit {
  width: 15px;
  height: 15px;
  stroke: #242424;
  fill: transparent;
}
.icon-copy {
  width: 17px;
  height: 17px;
  pointer-events: none;
}
.icon-chevron {
  width: 19px;
  height: 19px;
  stroke: #B0B0B0;
  fill: transparent;
}
.icon-reset {
  width: 18px;
  height: 16px;
  fill: #B0B0B0;
}
.icon-info {
  width: 13px;
  height: 13px;
  fill: #B0B0B0;
  cursor: pointer;
}
.icon-arrow-tringle {
  width: 12px;
  height: 10px;
  fill: #D9D9D9;
}
.icon-arrow-green {
  width: 22px;
  height: 35px;
  stroke: #00BE35;
  fill: transparent;
}
.icon-search {
  width: 24px;
  height: 24px;
  stroke: #fff;
  fill: transparent;
}
.icon-dropdown-tringle {
  width: 13px;
  height: 12px;
  fill: #D9D9D9;
}
.icon-use {
  width: 23px;
  height: 20px;
  stroke: #242424;
  fill: transparent;
}
.icon-edit {
  width: 17px;
  height: 17px;
  stroke: transparent;
  fill: #231F20;
}
.icon-plus {
  width: 16px;
  height: 16px;
  fill: #231F20;
}

.text-color, .text--red {
  color: #FD6A4A;
}
.text--green {
  color: #00BE35;
}
.text--muted {
  color: #B0B0B0 !important;
}
.text--violet, .text--blue {
  color: #4D4AFD;
}
.text--black {
  color: #000;
}
.text--orange {
  color: #E08A00;
}

.input-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  margin: 0;
  padding: 0;
  border: none;
}

.rating {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
  font-size: 15px;
  line-height: 0.833;
}
.rating__value {
  color: #000;
  font-size: 14px;
  font-weight: 400;
  white-space: nowrap;
}
.rating__body {
  position: relative;
}
.rating__body::before {
  content: "★★★★★";
  display: block;
  color: rgba(77, 74, 253, 0.18);
}
.rating__active {
  position: absolute;
  width: 0%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
}
.rating__active::before {
  content: "★★★★★";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  color: #4D4AFD;
}
.rating__items {
  display: flex;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.rating__item {
  flex: 0 0 20%;
  height: 100%;
  opacity: 0;
}

hr {
  width: 100%;
  border: none;
  border-top: 2px dotted black;
}

.rate__circle-wrapper {
  rotate: 45deg;
  transform: scale(-1, 1);
}
.rate__circle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  overflow: hidden;
  background: #000;
  color: #000;
  width: 44px;
  height: 44px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
}
.rate__circle span {
  position: relative;
  display: flex;
  z-index: 2;
  rotate: 45deg;
  transform: scale(-1, 1);
  font-weight: 600;
}
.rate__circle span small {
  font-size: 1em;
  font-weight: inherit;
  align-self: center;
}
.rate__circle::after {
  content: "";
  position: absolute;
  inset: 4px;
  background: #fff;
  border-radius: inherit;
  z-index: 1;
}
.rate__circle::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: inherit;
  box-shadow: 0 0 0 1rem #D9D9D9;
  z-index: -1;
}

.table-wrapper {
  overflow-x: auto;
  width: calc(100% + 2px);
  padding-bottom: 100px;
  margin-bottom: -100px;
}
.table-wrapper table {
  border-collapse: collapse;
}
.table-wrapper th,
.table-wrapper td {
  padding: 8px 12px;
}
.table-wrapper th {
  height: 35px;
  border: 1px solid #E7EBEE;
  background: #F5FEFB;
  color: #000;
  font-size: 14px;
  font-weight: 700;
}
.table-wrapper td {
  min-height: 32px;
  border: 1px solid #E7EBEE;
  background: #FFF;
  font-size: 12px;
  font-weight: 400;
}

.table__btn--popup {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
}

.search {
  height: 35px;
  display: flex;
  border-radius: 4px;
  border: 1px solid #E7EBEE;
  color: #000;
  font-size: 14px;
  font-weight: 400;
}
.search__input {
  width: 100%;
  height: 100%;
  padding: 5px 30px;
  border-radius: 4px 0px 0px 4px;
  background-color: #fff;
}
.search__input::placeholder {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}
.search__btn {
  width: 35px;
  height: 100%;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0px 4px 4px 0px;
  border-left: 1px solid #E7EBEE;
  background: #E7EBEE;
}
.search .icon-search {
  stroke: #242424;
}

.admin-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 25px;
}
.admin-footer__link {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 5px;
  color: #000;
  font-size: 10px;
  font-weight: 300;
}

.line--vertical {
  display: block;
  width: 1px;
  height: 1em;
  background-color: #B0B0B0;
}

.header__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.footer__inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form {
  font-family: nunito, sans-serif;
  color: #000;
  line-height: normal;
  letter-spacing: 0px;
}
.form__input-boxes {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.form__input-box {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid #E7EBEE;
  background: #FFF;
}
.form__input-box.disabled {
  background: #fafafa;
}
/*
 * Лёгкий красный контур для полей, которых не хватает перед покупкой
 * лейбла (см. app.js checkBuyGate()/updateBuyReadiness()). Старый общий
 * .error красил только текст (color:#f00) и был практически незаметен на
 * пустом инпуте — отсюда и жалобы, что непонятно, чего не хватает.
 */
.form__input-box.field-invalid,
.package-size__input-box.field-invalid {
  border-color: #FD6A4A;
  box-shadow: 0 0 0 1px #FD6A4A;
}
.form-group.field-invalid .dropdown__button {
  border-color: #FD6A4A;
  box-shadow: 0 0 0 1px #FD6A4A;
}
.form__input {
  width: 100%;
  height: 100%;
  padding: 23px 25px 8px;
  color: #000;
  font-size: 14px;
  font-weight: 400;
}
.form__label {
  position: absolute;
  top: 15.5px;
  left: 25px;
  pointer-events: none;
  transition: all 0.1s linear;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
  white-space: nowrap;
  color: #B0B0B0;
  font-size: 14px;
  font-weight: 400;
}
.form__input:focus + .form__label, .form__input:focus-visible + .form__label, .form__input:not(:placeholder-shown) + .form__label {
  top: 8px;
  font-size: 10px;
}
.form__input-box--search {
  height: 35px;
  padding: 0;
  border-radius: 4px;
  overflow: hidden;
}
.form__input-box--search .form__input {
  padding: 5px 30px;
  border-right: 1px solid #E7EBEE;
}
.form__input-box--search .form__input::placeholder {
  color: #000;
  font-size: 14px;
  font-weight: 400;
}
.form__copy-box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
}

.data-picker__label {
  width: 100%;
  height: 25px;
  padding: 0 7.5px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  cursor: pointer;
  z-index: 3;
  background-image: url(../images/icons/calendar.svg);
  background-repeat: no-repeat;
  background-size: 13px 11px;
  background-position: calc(100% - 7.5px) center;
  border-radius: 3px;
  border: 1px solid #E7EBEE;
  background-color: #FFF;
}
.data-picker__input {
  cursor: pointer;
  background-color: transparent;
  color: #000;
  font-size: 10px;
  font-weight: 400;
}

/*
 * Единый виджет "от/до" вместо старой пары независимых календарей: один
 * инпут, внутри которого можно выбрать как один день, так и диапазон.
 * Скрытые date/date2 остаются как были — бэкенд их не заметил. Пресеты,
 * Reset и Submit теперь живут внутри самого попапа календаря (см.
 * assets/js/daterange.js), поэтому снаружи инпута — просто поле.
 */
.date-range-filter {
  width: 100%;
  position: relative;
}
.date-range-filter .data-picker__label {
  width: 100%;
}
.date-range-filter__input {
  width: 100%;
}

.add-file__box {
  width: 130px;
  height: 35px;
  flex-shrink: 0;
  position: relative;
  border-radius: 4px;
  border: 1px dashed #D9D9D9;
  font-size: 12px;
  font-weight: 400;
}
.add-file__input {
  width: 100%;
  height: 100%;
  opacity: 0;
  padding: 5px 20px;
  cursor: pointer;
}
.add-file__input::-webkit-file-upload-button {
  visibility: hidden;
}
.add-file__img {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: cover;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 21px;
  pointer-events: none;
}
.add-file__text {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 50px;
  pointer-events: none;
}

.input,
.input-buffer {
  color: #000;
  font-family: nunito, sans-serif;
  font-size: 14px;
}

.input {
  width: 100px;
  min-width: 100px;
}

.input-buffer {
  position: absolute;
  top: -1000px;
  left: -1000px;
  visibility: hidden;
  white-space: nowrap;
}

.copy-box {
  display: flex;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 10px;
  flex-direction: row-reverse;
}
.copy-box.copied .icon-copy {
  stroke: #00BE35;
}
.copy-box.copied .copy-input {
  color: #00BE35;
}

.btn__copy.copied .icon-copy {
  stroke: #00BE35;
}
.btn__copy.copied ~ .copy-input {
  color: #00BE35;
}

.copy-btn.copied .icon-copy {
  stroke: #00BE35;
}
.copy-btn.copied ~ .input {
  color: #00BE35;
}

.api__copy .copy-box {
  padding: 8px 35px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 15px;
  border-radius: 4px;
  border: 1px solid #E7EBEE;
  background: #FFF;
}
.api__copy .input {
  width: 255px;
  min-width: 255px;
  font-size: 14px;
  font-weight: 700;
}

.modals__sender-receiver .copy-box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
}
.modals__sender-receiver .input {
  width: 135px;
  min-width: 135px;
  font-size: 16px;
  font-weight: 400;
  text-transform: uppercase;
}
.modals__sender-receiver--confirm .input {
  color: #B0B0B0;
}
.modals__sender-receiver--confirmed .input {
  width: 141px;
  min-width: 141px;
  color: #000;
}

.purchases__item .copy-box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
}
.purchases__item .input {
  width: 123px;
  min-width: 123px;
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
}
.purchases__item .icon-copy {
  width: 15px;
  height: 15px;
}

.modals__new-user .input {
  font-size: 16px;
  font-weight: 400;
}
.modals__new-user .modal-content__item:nth-child(1) .copy-box .input {
  min-width: 91px;
  width: 91px;
}
.modals__new-user .modal-content__item:nth-child(2) .input {
  min-width: 155px;
  width: 155px;
}

.modals__new-user-support .input {
  min-width: 155px !important;
  width: 155px !important;
  font-size: 16px;
  font-weight: 400;
}

.checkbox-label {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 400;
}
.checkbox-circle {
  color: #4D4AFD;
  text-transform: capitalize;
}
.checkbox-circle .checkbox-cstm {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: transparent;
  border: 2px solid #4D4AFD;
}
.checkbox-circle .checkbox-input:checked + .checkbox-cstm {
  background-color: #4D4AFD;
}
.checkbox-switch .checkbox-cstm {
  width: 30px;
  height: 15px;
  border-radius: 11px;
  border: 1px solid var(--Unactive-Text, #B0B0B0);
  position: relative;
}
.checkbox-switch .checkbox-cstm::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background-color: #B0B0B0;
  transition: all 0.2s ease;
}
.checkbox-switch .checkbox-input:checked + .checkbox-cstm::before {
  left: 15px;
  background-color: rgba(0, 190, 53, 0.68);
}
.checkbox-angle {
  position: absolute;
  top: 10px;
  left: -24px;
}
.checkbox-angle .checkbox-cstm {
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  background: #FFF;
  position: relative;
}
.checkbox-angle .checkbox-cstm .icon-chevron {
  width: 14px;
  height: 14px;
  stroke: #242424;
}
.checkbox-angle .checkbox-input:checked + .checkbox-cstm {
  background: #4D4AFD;
}
.checkbox-angle .checkbox-input:checked + .checkbox-cstm .icon-chevron {
  stroke: #FFFFFF;
}

.modal-overlay {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(20, 20, 30, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
  z-index: 11;
}

.modal {
  display: flex;
  align-items: center;
  justify-content: center;
  display: none;
}

.modal-overlay--visible {
  opacity: 1;
  visibility: visible;
  transition: all 0.3s ease-in-out;
}

.modal--visible {
  display: block;
}

.modals__sender-receiver {
  max-width: 800px;
  padding: 40px 40px 30px;
  border-radius: 4px;
  background: #FFF;
}
.modals__sender-receiver .modal-content {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
}
.modals__sender-receiver .modal-content__top {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 50px;
}
.modals__sender-receiver .modal-content .icon-arrow-green {
  align-self: center;
}
/* .modals__sender-receiver .modal-content__top-item {
  display: flex;
  flex-direction: column;
} */
.modals__sender-receiver .modal-content__top-title {
  margin-bottom: 15px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
}
.modals__sender-receiver .modal-content__middle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  width: 100%;  
  position: relative;
}
.modals__sender-receiver .modal-content__middle-item {
  display: flex;
  align-items: center;
  gap: 15px;
  color: #000;
  font-size: 12px;
  font-weight: 200;
}
.modals__sender-receiver .modal-content__middle-item span {
  font-size: 16px;
  font-weight: 400;
}
.modals__sender-receiver .modal-content__middle-item .form {
  display: flex;
  align-items: center;
  gap: 10px;
}
.modals__sender-receiver .modal-content__middle-item .form__input {
  min-width: 135px;
  width: 140px;
  padding: 0;
  font-size: 16px;
  font-weight: 400;
  text-transform: uppercase;
}
.modals__sender-receiver .modal-content__bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
}
.modals__sender-receiver--confirm .form__input {
  width: 135px;
}
.modals__sender-receiver--confirm .icon-copy {
  stroke: #B0B0B0;
}
.modals__sender-receiver--confirm .form__input {
  color: #B0B0B0;
}
.modals__sender-receiver--confirmed .icon-arrow-green {
  fill: #00BE35;
}
.modals__sender-receiver--confirmed .btn--cancel {
  color: #000;
  background-color: #E7EBEE;
}

/* confirm-modal start */

.modal[data-target="modal-sender-receiver-confirm"].modals__sender-receiver {
  width: 900px;
  max-width: calc(100vw - 40px);
  padding: 20px 24px 22px;
}

.modals__sender-receiver--confirm,
.modals__sender-receiver--confirmed {
  width: 100%;
  position: relative;
}

.modals__sender-receiver--confirm .confirm-modal__close,
.modals__sender-receiver--confirmed .confirm-modal__close {
  display: flex !important;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  right: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: #8B8B93;
  font-size: 0;
  cursor: pointer;
  transition: background 0.15s ease;
}
.modals__sender-receiver--confirm .confirm-modal__close::before,
.modals__sender-receiver--confirm .confirm-modal__close::after,
.modals__sender-receiver--confirmed .confirm-modal__close::before,
.modals__sender-receiver--confirmed .confirm-modal__close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 1.5px;
  background: #8B8B93;
}
.modals__sender-receiver--confirm .confirm-modal__close::before,
.modals__sender-receiver--confirmed .confirm-modal__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.modals__sender-receiver--confirm .confirm-modal__close::after,
.modals__sender-receiver--confirmed .confirm-modal__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.modals__sender-receiver--confirm .confirm-modal__close:hover,
.modals__sender-receiver--confirmed .confirm-modal__close:hover {
  background: #F2F3F7;
}

.modals__sender-receiver .modal-content.confirm-modal {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  align-items: stretch;
}

.confirm-modal .buyLabelInfo:empty {
  display: none;
}

.confirm-modal__success {
  visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 18px;
  font-size: 14px;
  font-weight: 700;
  color: #00BE35;
}
.confirm-modal__success .icon-check-circle {
  width: 17px;
  height: 17px;
  stroke: #00BE35;
}
.modals__sender-receiver--confirmed .confirm-modal__success {
  visibility: visible;
}

.confirm-modal__main {
  display: flex;
  align-items: stretch;
  gap: 18px;
}
.confirm-modal__left {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.confirm-modal__parties {
  display: flex;
  align-items: stretch;
  gap: 16px;
}
.confirm-modal__party {
  flex: 1 1 0;
  min-width: 0;
  border: 1px solid #ECEDF2;
  border-radius: 8px;
  padding: 10px 14px;
}
.confirm-modal__party-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.confirm-modal__avatar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: #EDEBFA;
}
.confirm-modal__avatar .icon-person {
  width: 16px;
  height: 16px;
  stroke: #5642D6;
}
.confirm-modal__party-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #9B9BAE;
}
.confirm-modal__party-name {
  font-size: 14px;
  font-weight: 700;
  color: #000;
  line-height: 1.4;
}
.confirm-modal__party-address {
  font-size: 12.5px;
  font-weight: 400;
  color: #55555F;
  line-height: 1.45;
}
.confirm-modal__party-address:empty {
  display: none;
}
.confirm-modal__arrow {
  flex-shrink: 0;
  align-self: center;
  width: 16px;
  height: 24px;
  stroke: #00BE35;
  fill: transparent;
}

.confirm-modal__info {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  gap: 10px;
}
.confirm-modal__chip {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #ECEDF2;
  border-radius: 8px;
  padding: 8px 10px;
}
.confirm-modal__chip-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
}
.confirm-modal__chip-icon svg {
  width: 15px;
  height: 15px;
}
.confirm-modal__chip:nth-child(1) .confirm-modal__chip-icon {
  background: #E6F7EA;
}
.confirm-modal__chip:nth-child(1) .confirm-modal__chip-icon svg {
  stroke: #22A366;
}
.confirm-modal__chip:nth-child(2) .confirm-modal__chip-icon {
  background: #E5EEFF;
}
.confirm-modal__chip:nth-child(2) .confirm-modal__chip-icon svg {
  stroke: #3C7CF0;
}
.confirm-modal__chip:nth-child(3) .confirm-modal__chip-icon {
  background: #EDEBFA;
}
.confirm-modal__chip:nth-child(3) .confirm-modal__chip-icon svg {
  stroke: #5642D6;
}
.confirm-modal__chip-text {
  min-width: 0;
}
.confirm-modal__chip-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #9B9BAE;
  margin-bottom: 2px;
}
.confirm-modal__chip-value {
  font-size: 12.5px;
  font-weight: 700;
  color: #000;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.confirm-modal__box {
  flex-shrink: 0;
  position: relative;
  width: 300px;
  aspect-ratio: 890 / 440;
  align-self: flex-start;
}
.confirm-modal__box-img {
  display: block;
  width: 100%;
  height: 100%;
}
.confirm-modal__dim {
  position: absolute;
  white-space: nowrap;
}
.confirm-modal__dim-value {
  font-size: 13px;
  font-weight: 700;
  color: #0A0A0A;
}
.confirm-modal__dim--height {
  top: 26%;
  left: 84.0%;
}
.confirm-modal__dim--width {
  top: 80%;
  left: 18.0%;
}
.confirm-modal__dim--length {
  top: 80%;
  left: 68.7%;
}

.confirm-modal__track {
  position: relative;
  width: 100%;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px dashed rgba(0, 190, 53, 0.4);
  background: rgba(0, 190, 53, 0.045);
  border-radius: 8px;
  padding: 6px 20px;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  box-sizing: border-box;
}
.confirm-modal__track-status {
  display: none;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: #55555F;
  text-align: center;
  max-width: 560px;
}
.confirm-modal__track--processing .confirm-modal__track-status:not(:empty) {
  display: block;
}
.confirm-modal__track-result {
  display: none;
  width: 100%;
  text-align: center;
}
.confirm-modal__track--done {
  border: 1.5px solid #ECEDF2;
  background: #FFF;
}
.confirm-modal__track--done .confirm-modal__track-result,
/* во время processing показываем ту же строку с текстом-заглушкой "Tracking Number" вместо номера асинхронного заказа — см. app.js buyLabel() */
.confirm-modal__track--processing .confirm-modal__track-result {
  display: block;
}
.confirm-modal__track-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9B9BAE;
  margin-bottom: 4px;
}
/* Пока async-лейбл в обработке, значение — просто текст-заглушка "Tracking
 * Number" (см. app.js), поэтому подпись над ним скрываем, чтобы не дублировать
 * одну и ту же надпись дважды. */
.confirm-modal__track--processing .confirm-modal__track-label {
  display: none;
}
.confirm-modal__track .copy-box {
  justify-content: center !important;
  gap: 0;
}
.confirm-modal__track .copy-input {
  font-size: 18px;
  font-weight: 700;
  color: #000;
  cursor: pointer;
  border-bottom: 1.5px dotted #B0B0B0;
  padding-bottom: 2px;
  letter-spacing: 0.03em;
}
.confirm-modal__track .copy-box.copied .copy-input {
  border-bottom-color: #00BE35;
}

.modal-content__bottom.confirm-box .btn--cancel,
.modal-content__bottom.confirm-box .button {
  min-width: 190px;
  box-sizing: border-box;
}
.modal-content__bottom.confirm-box .btn--cancel:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.modal-content__bottom.confirm-box .button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.modal-content__bottom.confirm-box #confirm-buy-label {
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-content__bottom.confirm-box #confirm-buy-label.hide {
  display: none;
}
.modal-content__bottom.confirm-box #confirm-buy-label.button--loading .confirm-btn__label {
  display: none;
}
.modal-content__bottom.confirm-box #confirm-buy-label:not(.button--loading) .loader-dots--btn {
  display: none;
}
.modal-content__bottom.confirm-box .download-file {
  gap: 8px;
}
.modal-content__bottom.confirm-box .download-file .icon-download {
  width: 15px;
  height: 15px;
  stroke: #FFF;
}

@media (max-width: 767px) {
  .confirm-modal__main {
    flex-direction: column;
  }
  .confirm-modal__parties {
    flex-direction: column;
  }
  .confirm-modal__arrow {
    align-self: center;
    transform: rotate(90deg);
  }
  .confirm-modal__info {
    flex-direction: column;
  }
  .confirm-modal__box {
    width: 100%;
    max-width: 300px;
    align-self: center;
  }
}

/* confirm-modal end */
.modals__sender-receiver--rate {
  max-width: 550px;
  width: fit-content;
  height: auto;
  padding: 25px 25px 35px;
  border-radius: 4px;
  background: #FFF;
}
.modals__sender-receiver--rate .modal-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #000;
  font-size: 14px;
  font-weight: 400;
}
.modals__sender-receiver--rate .modal-content__title {
  font-size: 20px;
  font-weight: 700;
}
.modals__sender-receiver--rate .modal-content__date {
  color: #B0B0B0;
  font-size: 12px;
  font-weight: 400;
}
.modals__sender-receiver--rate .modal-content__readmore {
  color: #00BE35;
  font-size: 12px;
  font-weight: 700;
}
.modals__password {
  width: 300px;
  min-height: 260px;
  padding: 55px;
  border-radius: 4px;
  background: #FFF;
  box-shadow: -5px 5px 10px 0px rgba(0, 0, 0, 0.1);
}
.modals__password .modal-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #000;
  font-size: 12px;
  font-weight: 200;
}
.modals__password .modal-content__title {
  margin-bottom: 7px;
  font-size: 16px;
  font-weight: 600;
}
.modals__password .copy-box {
  margin-bottom: 20px;
}
.modals__password .copy-box .copy-input {
  font-size: 16px;
  font-weight: 400;
  /* text-transform: uppercase; */
  min-width: 155px;
  width: 185px;
  text-align: right;
}
.modals__password .modals__password-text {
  display: inline-block;
  margin-bottom: 30px;
}
.modals__password .btn {
  width: 100%;
}
.modals__password .btn:disabled {
  color: #B0B0B0;
  border-radius: 4px;
  border: 1px solid #E7EBEE;
  background-color: transparent;
  pointer-events: none;
}
.modals__new-user {
  max-width: 300px;
  width: 100%;
  min-height: 300px;
  padding: 70px 60px;
  border-radius: 4px;
  background: #FFF;
  box-shadow: -5px 5px 10px 0px rgba(0, 0, 0, 0.1);
}
.modals__new-user .modal-content {
  text-align: center;
}
.modals__new-user .modal-content__title {
  margin-bottom: 20px;
  color: #000;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
}
.modals__new-user .modal-content__item {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.modals__new-user .modal-content__item:not(:last-child) {
  margin-bottom: 20px;
}
.modals__new-user .modal-content__item-title {
  color: #000;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
}
.modals__new-user .copy-box {
  justify-content: center !important;
}
.modals__price-show {
  max-width: 600px;
  width: 100%;
  height: 100vh;
  overflow-y: auto;
}
.modals__price-show::-webkit-scrollbar {
  display: none;
}
.modals__price-show .modal-content {
  padding: 60px 70px 50px;
  margin: 20px 15px;
  background-color: #F0F3F9;
}
.modals__price-show .modal-content__items {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.modals__price-show .modal-content__table {
  border-collapse: collapse;
}
.modals__price-show th:nth-child(1),
.modals__price-show td:nth-child(1) {
  min-width: 180px;
  width: 180px;
  max-width: 180px;
}
.modals__price-show th:nth-child(1) input,
.modals__price-show td:nth-child(1) input {
  max-width: 156px;
}
.modals__price-show th:nth-child(2),
.modals__price-show td:nth-child(2) {
  min-width: 100px;
  width: 100px;
  max-width: 100px;
}
.modals__price-show th:nth-child(2) input,
.modals__price-show td:nth-child(2) input {
  max-width: 76px;
}
.modals__price-show th:nth-child(3),
.modals__price-show td:nth-child(3) {
  min-width: 140px;
  width: 140px;
  max-width: 140px;
}
.modals__price-show th:nth-child(3) input,
.modals__price-show td:nth-child(3) input {
  max-width: 116px;
}
.modals__price-show .modal-content__btns {
  display: grid;
  grid-template-columns: minmax(auto, 230px) minmax(auto, 170px);
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.modals__price-show .modal-content__btns .btn--muted,
.modals__price-show .modal-content__btns .btn {
  width: 100%;
}
.modals__new-user-support {
  max-width: 300px;
  width: 100%;
  min-height: 180px;
  padding: 45px;
  border-radius: 4px;
  background: #FFF;
  box-shadow: -5px 5px 10px 0px rgba(0, 0, 0, 0.1);
}
.modals__templates {
  max-width: 560px;
  width: 100%;
  height: 100vh;
  overflow-y: auto;
}
.modals__templates::-webkit-scrollbar {
  display: none;
}
.modals__templates .modal-content {
  width: 100%;
  padding: 40px;
  margin: 20px 0px;
  border-radius: 4px;
  background: #FFF;
}
.modals__templates .form__input-box--cstm:nth-child(1) {
  width: calc(100% - 180px - 20px);
}
.modals__templates .form__input-box--cstm:nth-child(2) {
  width: 180px;
}
.modals__templates .sender-receiver__form .form__input-box--cstm:nth-child(2) .form__input {
  padding-right: 45px;
}
.modals__templates .sender-receiver__form .form__input-box--cstm:nth-child(2) .btn--reset {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 22px;
}
.modals__templates .cstm-bottom {
  width: 100%;
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
}
.modals__templates-delete {
  max-width: 200px;
  width: 100%;
  padding: 10px;
  border-radius: 4px;
  background: #FFF;
}
.modals__templates-delete-title {
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 20px;
}
.modals__templates-delete-btns {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.modals__tickets-message {
  max-width: 540px;
  width: 100%;
  height: 100vh;
  overflow-y: auto;
}
.modals__tickets-message::-webkit-scrollbar {
  display: none;
}
.modals__tickets-message .modal-content {
  margin: 20px 0px;
}
.modals__tickets-message .tickets__form-input--box-track {
  display: none;
}
.modals__tickets-message .tickets__form-input--box-type:has(.dropdown__button .regarding-the-label) ~ .tickets__form-input--box-track {
  display: flex;
}
.modals__withdraw {
  max-width: 540px;
  width: 100%;
  padding: 30px 20px;
  border-radius: 4px;
  background: #FFF;
}
.modals__withdraw .modal-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.modals__withdraw-title {
  font-size: 16px;
  font-weight: 600;
  text-align: center;
}
.modals__withdraw .balance__elem-input--box {
  max-width: 200px;
  margin: 0 auto;
}
.modals__withdraw-btns {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.modals__api {
  max-width: 200px;
  width: 100%;
  padding: 30px 20px;
  border-radius: 4px;
  background: #FFF;
}
.modals__api .modal-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.modals__api-title {
  font-size: 16px;
  font-weight: 600;
  text-align: center;
}
.modals__api-btns {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.modals__invite {
  max-width: 300px;
  width: 100%;
  padding: 30px 20px;
  border-radius: 4px;
  background: #FFF;
}
.modals__invite .copy-box {
  justify-content: center !important;
}
.modals__change-contact {
  max-width: 365px;
  width: 100%;
  padding: 23px 35px 33px;
  background-color: #fff;
}
.modals__change-contact .modals__change-title {
  margin-bottom: 20px;
  color: #000;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
}
.modals__change-contact .modals__change-content {
  margin-bottom: 35px;
}
.modals__change-contact .modals__change-btns {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
}
.modals__change-contact .cstm-input {
  width: 100%;
  border-bottom: 1px solid #4D4AFD;
  padding-bottom: 5px;
  color: #000;
  font-size: 16px;
  font-weight: 600;
}
.modals__change-password {
  max-width: 365px;
  width: 100%;
  padding: 23px 35px 33px;
  background-color: #fff;
}
.modals__change-password .modals__change-title {
  margin-bottom: 20px;
  color: #000;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
}
.modals__change-password .modals__change-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 35px;
}
.modals__change-password .modals__change-btns {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
}
.modals__change-password .form__input-box--cstm .btn--reset {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 22px;
}
.modals__change-password .form__input-box--cstm .btn--reset .icon-reset {
  fill: #231F20;
}

input[type=number],
input[type=number]::placeholder {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

.input-price--box {
  position: relative;
}
.input-price--box .input-price--symbol {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  display: none;
  pointer-events: none;
}
.input-price--box:has(.input-price:not(:placeholder-shown)) .input-price {
  position: relative;
  left: 7px;
}
.input-price--box:has(.input-price:not(:placeholder-shown)) .input-price--symbol {
  display: inline-block;
}

.balance__elem-input--box .input-price {
  text-align: center;
  left: 0 !important;
}

.form-group {
  width: 100%;
}
.form-group.disabled {
  opacity: 0.5;
}
.form-group.select-flags.disabled {
  pointer-events: none;
  cursor: not-allowed;
}

.dropdown {
  position: relative;
}
.dropdown .cstm-dropdown-placeholder {
  position: absolute;
  top: 15.5px;
  left: 25px;
  transition: all 0.1s linear;
  pointer-events: none;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
  color: #B0B0B0;
  font-size: 14px;
  font-weight: 400;
}
.dropdown.cstm-dropdown-active .cstm-dropdown-placeholder {
  top: 8px;
  font-size: 10px;
}
.dropdown.cstm-dropdown-active .cstm-dropdown-placeholder .icon-chevron {
  display: none;
}

.dropdown__button {
  position: relative;
  width: 100%;
  height: 50px;
  text-align: left;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
  border-radius: 4px;
  border: 1px solid #E7EBEE;
  background: #FFF;
  padding: 8px 25px;
  color: #000;
  font-size: 14px;
  font-weight: 400;
  text-transform: capitalize;
  white-space: nowrap;
  cursor: pointer;
}
.dropdown__button span {
  pointer-events: none;
}

.dropdown__button:focus,
.dropdown__button--active {
  outline: none;
}
.dropdown__button:focus + .cstm-dropdown-placeholder,
.dropdown__button--active + .cstm-dropdown-placeholder {
  top: 8px;
  font-size: 10px;
}
.dropdown__button:focus + .cstm-dropdown-placeholder .icon-chevron,
.dropdown__button--active + .cstm-dropdown-placeholder .icon-chevron {
  display: none;
}

.dropdown__list {
  display: none;
  max-height: 225px;
  position: absolute;
  left: 0;
  top: 52px;
  margin: 0;
  padding: 0;
  list-style-type: none;
  border: 1px solid #E7EBEE;
  background: #FFFFFF;
  overflow: auto;
  border-radius: 4px;
  width: 100%;
  z-index: 3;
}

.dropdown__list--visible {
  display: block;
}

.dropdown__list-item {
  height: 50px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 0;
  padding: 0;
  padding: 8px 25px;
  cursor: pointer;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
  color: #000;
  font-size: 14px;
  font-weight: 400;
  text-transform: capitalize;
}
.dropdown__list-item:not(:last-child) {
  border-bottom: 1px solid #E7EBEE;
}

.dropdown__list-item:hover {
  background: rgba(176, 198, 225, 0.26);
}

.dropdown__list-item-content {
  pointer-events: none;
}

/*
 * canada.png — растровая иконка флага небольшого нативного размера
 * (в отличие от векторных usa.svg). Фиксируем размер, чтобы она не
 * растягивала строку дропдауна на свою нативную высоту.
 */
img.dropdown__list-item-content[src$="canada.png"] {
  width: 20px;
  height: 15px;
  object-fit: contain;
  vertical-align: middle;
}

.dropdown__input-hidden {
  display: none;
}

.form-group.status .dropdown__button {
  width: 100%;
  height: 16px !important;
  border: none;
  padding: 0 !important;
  font-size: inherit;
  font-weight: inherit;
}
.form-group.status .icon-chevron {
  position: absolute;
  right: -5px;
  z-index: 1;
  stroke: #242424;
  pointer-events: none;
}
.form-group.status .dropdown__list {
  top: calc(100% + 0px);
  width: calc(100% + 24px);
  left: -12px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}
.form-group.status .dropdown__list-item {
  height: 25px;
  padding: 8px 12px;
  font-size: inherit;
  font-weight: inherit;
}

.sidebar {
  width: 285px;
  transition: transform 0.2s ease;
  position: relative;
  background: #FFF;
  position: fixed;
  top: 0;
  bottom: 0;
}
.sidebar__inner {
  height: 100vh;
  padding: 28px 60px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow: auto;
}
.sidebar__btn-open {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 10px;
  right: -47px;
  border-radius: 4px;
  background-color: #4D4AFD;
  padding: 3px;
  display: none;
}
.sidebar__btn-line {
  display: block;
  width: 100%;
  height: 2px;
  background-color: #fff;
  position: relative;
}
.sidebar__btn-line::before, .sidebar__btn-line::after {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 2px;
  background-color: #fff;
}
.sidebar__btn-line::before {
  top: -7px;
}
.sidebar__btn-line::after {
  top: 7px;
}
.sidebar.sidebar-open {
  transform: translateX(0%);
}
.sidebar.sidebar-open .sidebar__btn-line {
  transform: rotate(-45deg);
}
.sidebar.sidebar-open .sidebar__btn-line::before {
  top: 0;
  transform: rotate(90deg);
}
.sidebar.sidebar-open .sidebar__btn-line::after {
  top: 0;
  transform: rotate(45deg);
  opacity: 0;
}
.sidebar__nav {
  margin-bottom: 80px;
}
.sidebar__nav:has(.nav__item-account) {
  margin-bottom: 40px;
}
.sidebar.sidebar-admin .sidebar__nav {
  margin-bottom: 20px;
}

.page-api .nav__item-api .nav__link {
  color: #4D4AFD;
}
.page-api .nav__item-api .nav__link svg {
  fill: #4D4AFD;
}
.page-news .nav__item-news .nav__link {
  color: #4D4AFD;
}
.page-news .nav__item-news .nav__link svg {
  fill: #4D4AFD;
}
.page-wallet .nav__item-wallet .nav__link {
  color: #4D4AFD;
}
.page-wallet .nav__item-wallet .nav__link svg {
  fill: #4D4AFD;
}
.page-purchases .nav__item-purchases .nav__link {
  color: #4D4AFD;
}
.page-purchases .nav__item-purchases .nav__link svg {
  fill: #4D4AFD;
}
.page-bulkpurchases .nav__item-bulkpurchases .nav__link {
  color: #4D4AFD;
}
.page-bulkpurchases .nav__item-bulkpurchases .nav__link svg {
  fill: #4D4AFD;
}
.page-templates .nav__item-templates .nav__link {
  color: #4D4AFD;
}
.page-templates .nav__item-templates .nav__link svg {
  fill: #4D4AFD;
}
.page-support .nav__item-support .nav__link {
  color: #4D4AFD;
}
.page-support .nav__item-support .nav__link svg {
  fill: #4D4AFD;
}
.page-tickets .nav__item-support .nav__link {
  color: #4D4AFD;
}
.page-tickets .nav__item-support .nav__link svg {
  fill: #4D4AFD;
}
.page-account .nav__item-account .nav__link {
  color: #4D4AFD;
}
.page-account .nav__item-account .nav__link svg {
  fill: #4D4AFD;
}
.page-services .nav__item-services .nav__link {
  color: #4D4AFD;
}
.page-services .nav__item-services .nav__link svg {
  fill: #4D4AFD;
}
.page-admin-user .nav__item-overview .nav__link {
  color: #4D4AFD;
}
.page-admin-user .nav__item-overview .nav__link svg {
  fill: #4D4AFD;
}
.page-admin-service .nav__item-service .nav__link {
  color: #4D4AFD;
}
.page-admin-service .nav__item-service .nav__link svg {
  fill: #4D4AFD;
}
.page-admin-support .nav__item-support .nav__link {
  color: #4D4AFD;
}
.page-admin-support .nav__item-support .nav__link svg {
  fill: #4D4AFD;
}
.page-support-user .nav__item-overview .nav__link {
  color: #4D4AFD;
}
.page-support-user .nav__item-overview .nav__link svg {
  fill: #4D4AFD;
}
.page-admin-wallet .nav__item-wallet .nav__link {
  color: #4D4AFD;
}
.page-admin-wallet .nav__item-wallet .nav__link svg {
  fill: #4D4AFD;
}

.api__form {
  height: 35px;
  padding: 8px 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  border-radius: 4px;
  border: 1px solid #E7EBEE;
  background: #FFF;
}
.api__input {
  display: block;
  min-width: 255px;
  height: 19px;
  color: #000;
  font-family: nunito, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0px;
}
.api__copy {
  margin-bottom: 30px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
  font-size: 14px;
  font-weight: 700;
}
.api__params {
  margin-bottom: 60px;
}
.api__item:not(:last-child) {
  margin-bottom: 60px;
}
.api__item-title {
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 300;
}
.api__item-wrapper {
  overflow-x: auto;
  max-width: 100%;
  width: calc(100vw - 285px - 30px);
  width: calc(100vw - 285px - 60px - 15px);
}
.api__table {
  width: 100%;
  border-collapse: collapse;
}
.api__table th,
.api__table td {
  min-height: 35px;
  padding: 8px 25px;
  border: 1px solid #E7EBEE;
  white-space: nowrap;
  font-size: 14px;
  vertical-align: top;
}
.api__table th {
  text-align-last: left;
  background: #f5f5f5;
  font-weight: 700;
}
.api__table td {
  background: #FFF;
  font-weight: 400;
}
.api__table tr th:nth-child(1), .api__table tr th:nth-child(4) {
  min-width: 150px;
  width: 15px;
}
.api__table tr th:nth-child(2), .api__table tr th:nth-child(3) {
  min-width: 130px;
  width: 130px;
}
.api__table tr th:last-child {
  width: auto;
}
.api__request-list {
  padding: 40px;
  border: 1px solid #E7EBEE;
  background: #FFF;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  font-size: 14px;
  font-weight: 400;
}

.api__request .tab-wrap {
  display: none;
}
.api__request .tab-wrap.active {
  display: block;
}

.news__inner {
  max-width: 886px;
}
.news__items {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.news__item {
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 25px;
  border-radius: 4px;
  background: #FFF;
}
.news__item:has(.checkbox-input:checked) {
  background: #E7EBEE;
}
.news__item:has(.checkbox-input:checked) .news__img {
  opacity: 0.5;
}
.news__item:nth-child(n+2) {
  display: none;
}
.news__items.history-show .news__item:nth-child(n+2) {
  display: flex;
}
.news__item-more-btn {
  width: fit-content;
  margin: 0 auto;
}
.news__img {
  display: block;
  width: 100%;
  height: 150px;
  border-radius: 4px;
  object-fit: cover;
}
.news__info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.news__title {
  font-size: 20px;
  font-weight: 700;
}
.news__date {
  color: #B0B0B0;
  font-size: 12px;
  font-weight: 400;
}
.news__descr {
  display: flex;
  flex-direction: column;
  gap: 1em;
  max-height: 171px;
  overflow: hidden;
  font-size: 14px;
  font-weight: 400;
}
.news__descr div {
  display: flex;
  flex-direction: column;
}
.news .news__info.news-more-active .news__descr {
  max-height: 600px;
  overflow: auto;
}
.news__read-off {
  display: none;
}
.news .checkbox-label {
  width: fit-content;
}
.news .checkbox-input:checked ~ .news__read-on {
  display: none;
}
.news .checkbox-input:checked ~ .news__read-off {
  display: inline-block;
}
.news__more {
  display: inline-block;
  text-align: center;
  color: #B0B0B0;
  font-size: 12px;
  font-weight: 600;
}
.news__item-more-btn.news-more-active .news__more-btn--more {
  display: none;
}
.news__item-more-btn.news-more-active .news__more-btn--less {
  display: block;
}
.news .news__more-btn--less {
  display: none;
}

.sender-receiver {
  margin-bottom: 30px;
}
.sender-receiver__inner {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 50px;
}
.sender-receiver__item {
  width: 100%;
  min-width: 0;
}
.sender-receiver__item .checkbox-label {
  margin-top: 20px;
}
.choose-template {
  display: flex;
  align-items: center;
  gap: 10px;
}
.choose-template .form-group {
  flex: 1 1 auto;
  min-width: 0;
}
.choose-template .dropdown {
  min-width: 0;
}
.choose-template .dropdown__button {
  overflow: hidden;
}
.choose-template .dropdown__button span {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.btn-save-tpl {
  flex-shrink: 0;
  min-width: 110px;
  text-align: center;
  height: 50px;
  padding: 0 18px;
  border-radius: 8px;
  border: 1.5px solid rgba(0, 168, 47, 0.35);
  background: #FFF;
  color: rgba(0, 130, 47, 0.6);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn-save-tpl:hover:not(:disabled) {
  border-color: rgba(0, 168, 47, 0.5);
  color: rgba(0, 130, 47, 0.85);
  background: rgba(0, 168, 47, 0.05);
}
.btn-save-tpl:disabled {
  opacity: 0.6;
  cursor: default;
}
.btn-save-tpl--success {
  border-color: #00A82F;
  background: #00A82F;
  color: #FFF;
}
.btn-save-tpl--error {
  border-color: #E63946;
  background: #FFF;
  color: #E63946;
}
.sender-receiver__form {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.sender-receiver .form__input-box--cstm:nth-child(1) {
  width: calc(100% - 180px - 20px);
}
.sender-receiver .form__input-box--cstm:nth-child(2) {
  width: 180px;
}
.sender-receiver .sender-receiver__form .form__input-box--cstm:nth-child(2) .form__input {
  padding-right: 45px;
}
.sender-receiver .sender-receiver__form .form__input-box--cstm:nth-child(2) .btn--reset {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 22px;
}
.sender-receiver .dropdown__button {
  padding: 23px 25px 8px;
}
.sender-receiver .autoComplete_wrapper .logo__img {
  margin-left: 20px;
}

.custom-line-item {
  margin-bottom: 80px;
  display: none;
}
.custom-line-item__items {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.custom-line-item__item {
  display: grid;
  grid-template-columns: auto 145px 220px 10px;
  align-items: center;
  gap: 20px;
}
.custom-line-item__item-add {
  width: fit-content;
  color: #00BE35;
  font-size: 12px;
  font-weight: 400;
}
.custom-line-item__item-btn {
  justify-self: end;
}
.custom-line-item__item-btn-img {
  display: block;
  width: 20px;
  height: 20px;
  object-fit: contain;
}
.custom-line-item .title {
  text-transform: uppercase;
}
.custom-line-item .form__input--price {
  padding-left: 33.5px;
}
.custom-line-item .form__input--price:valid ~ .form__input--price-symbol {
  display: inline-block;
}
.custom-line-item .form__input--price-symbol {
  position: absolute;
  top: 22px;
  left: 25px;
  display: none;
  color: #000;
  font-size: 14px;
  font-weight: 400;
}
.custom-line-item .custom-line-item__item-box {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.custom-line-item .custom-line-item__item-box .custom-line-item__item-btn {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.custom-line-item .custom-line-item__item-box.active-line {
  display: flex !important;
}
.custom-line-item .custom-line-item__item-box.active-line.del-btn .custom-line-item__item-add {
  display: inline-block !important;
}
.custom-line-item .custom-line-item__item-box.del-btn .custom-line-item__item-btn {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}
.custom-line-item .custom-line-item__item-box .custom-line-item__item-add {
  display: none;
}
.custom-line-item .custom-line-item__item-box:first-child .custom-line-item__item-btn {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.custom-line-item .custom-line-item__item-box:not(:first-child) {
  display: none;
}

.details__content {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 40px;
  margin-bottom: 20px;
}
.details__options {
  max-width: 460px;
}
.details__options-title {
  margin-bottom: 15px;
  font-size: 14px;
  font-weight: 400;
}
.details__options-title span {
  font-size: 24px;
  font-weight: 700;
}
.ship-location {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  max-width: 100%;
}
.ship-location span.ship-location__prefix {
  font-size: 13px;
  font-weight: 400;
  color: #8B8B93;
  white-space: nowrap;
  flex-shrink: 0;
}
.ship-location span.ship-location__city {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 13px;
  font-weight: 700;
  color: #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ship-location__arrow {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  stroke: #8B8B93;
  stroke-width: 1.6;
  fill: none;
}
.details__options-items {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.details__options-item-title {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  margin-bottom: 5px;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 400;
}
.service-selector {
  display: flex;
  align-items: stretch;
  gap: 10px;
  width: 100%;
}
.service-selector .dropdown__list-item {
  flex: 1 1 0;
  min-width: 0;
  height: auto;
  min-height: 48px;
  margin: 0;
  padding: 8px 10px;
  border: 1.5px solid #E7EBEE;
  border-radius: 12px;
  background: #FFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
  white-space: normal;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  color: rgba(0, 0, 0, 0.55);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.service-selector__btn-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
}
.service-selector__btn-subtitle {
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.2;
  color: rgba(0, 0, 0, 0.4);
}
.service-selector .dropdown__list-item.active .service-selector__btn-subtitle,
.service-selector .dropdown__list-item.default_platform .service-selector__btn-subtitle {
  color: rgba(58, 55, 220, 0.5);
}
.service-selector .dropdown__list-item:hover {
  border-color: rgba(77, 74, 253, 0.3);
  background: rgba(176, 198, 225, 0.08);
}
.service-selector .dropdown__list-item.active,
.service-selector .dropdown__list-item.default_platform {
  border-color: rgba(77, 74, 253, 0.35);
  background: rgba(77, 74, 253, 0.05);
  color: rgba(58, 55, 220, 0.65);
}
.service-selector--single {
  justify-content: center;
}
.service-selector--single .dropdown__list-item {
  flex: 0 1 auto;
  min-width: 200px;
}
.service-selector .dropdown__list-item.hide {
  display: none;
}
.service-selector[disabled] {
  opacity: 0.5;
  pointer-events: none;
}
.package-size {
  background: #F6F6F8;
  border-radius: 16px;
  padding: 20px;
}
.package-size__steppers {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 20px;
}
.package-size__stepper-group {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
}
.package-size__stepper-group + .package-size__stepper-group::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 20px;
  bottom: 2px;
  width: 1px;
  background: #D6D6DC;
}
.package-size__label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #000;
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.package-size .package-size__input-box {
  position: static;
  width: 100%;
  height: 42px;
  background: #FFF;
  border-radius: 10px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  gap: 4px;
}
.package-size .package-size__input-box .input-number__arrow {
  position: static;
  transform: none;
  width: 16px;
  height: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  color: #000;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.package-size .package-size__input-box .form__input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: auto;
  border: none;
  padding: 0;
  margin: 0;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: #000;
  background: transparent;
}
.package-size .package-size__input-box input[type=number]::-webkit-outer-spin-button,
.package-size .package-size__input-box input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.package-size .package-size__input-box input[type=number] {
  -moz-appearance: textfield;
}
.details__options-rate-box {
  height: 35px;
  padding: 8px 25px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 15px;
  border-radius: 4px;
  border: 1px solid #E7EBEE;
  background: #FFF;
}
.details__options-ceckboxes {
  width: fit-content;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.details__img-white {
  display: none;
}
.details__img-ups {
  display: none;
}
.details__img-ups_inter {
  display: none;
}
.details__img-fedex {
  display: none;
}
.details__img-usps {
  display: none;
}
.details__img-uspsv1 {
  display: none;
}
.details__img-uspsv5 {
  display: none;
}
.details__img-fedex_express {
  display: none;
}
.details .details__content:has(.dropdown__button .ups) .details__img-ups {
  display: block;
}
.details .details__content:has(.dropdown__button .ups_inter) .details__img-ups_inter {
  display: block;
}
.details .details__content:has(.dropdown__button .white) .details__img-white {
  display: block;
}
.details .details__content:has(.dropdown__button .fedex) .details__img-fedex {
  display: block;
}
.details .details__content:has(.dropdown__button .usps) .details__img-usps {
  display: block;
}
.details__img-box {
  width: 472px;
  max-width: 100%;
  aspect-ratio: 472/265;
  flex-shrink: 0;
}
.details__img {
  display: block;
  max-width: 472px;
  height: auto;
  aspect-ratio: 472/265;
}
.details__prices {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  max-width: 460px;
  width: 100%;
}
.details__prices-item {
  width: 100%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  /*
   * Уменьшено с 14 до 11px, чтобы освободить ~15px под увеличенную
   * .sr-badge--compact (100px -> 108px, см. sr-badge) без превышения
   * max-width строки (460px) — иначе разделитель внутри SR-плашки
   * снова начинал схлопываться из-за нехватки места.
   */
  gap: 11px;
  padding: 12px 16px;
  position: relative;
  border-radius: 12px;
  border: 1px solid #E7EBEE;
  background: #FFF;
}
.details__prices-item .btn {
  border-radius: 8px;
}
.details__prices-item.cheaper::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 20px;
  width: 82px;
  height: 44px;
  background-image: url(../images/price-cheaper.svg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.details__prices-item.best-choice::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 20px;
  width: 90.237px;
  height: 44px;
  background-image: url(../images/price-best-choice.svg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.details__prices-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background: rgba(77, 74, 253, 0.12);
}
.icon-lightning {
  width: 18px;
  height: 18px;
  stroke: #4D4AFD;
  stroke-width: 1.3;
  fill: none;
}
/*
 * Единый компонент плашки Success Rate — раньше страница Services
 * (.services-page__sr*) и карточки Buy Now на Create Shipment
 * (.details__prices-sr*, ныне удалено) описывались двумя почти
 * одинаковыми, но независимыми наборами правил. На Create Shipment
 * плашке банально не хватало ширины: label+divider+value упирались
 * в 100px и flexbox сжимал "бесплатный" (без текста) divider первым —
 * из-за этого разделитель пропадал именно там, где на Services он
 * прекрасно виден. Теперь оба места используют один .sr-badge,
 * модификатор --compact только сужает внешние размеры под тесную
 * строку карточки, а сам divider всегда flex-shrink:0 и не может
 * схлопнуться ни в одном контексте.
 */
.sr-badge {
  flex-shrink: 0;
  width: 130px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  background: rgba(0, 190, 53, 0.1);
}
.sr-badge--compact {
  width: 108px;
  height: 40px;
  gap: 6px;
  padding: 0 10px;
}
.sr-badge__label {
  flex-shrink: 0;
  color: #00A82F;
  font-size: 13px;
  font-weight: 700;
}
.sr-badge__divider {
  flex-shrink: 0;
  width: 1px;
  height: 16px;
  background: rgba(0, 190, 53, 0.3);
}
.sr-badge__value {
  color: #000;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}
.details__prices-divider {
  flex-shrink: 0;
  width: 1px;
  height: 28px;
  background: #E7EBEE;
}
.details__prices-info {
  /*
   * Раньше блок был flex-direction:column без align-items — заголовок
   * ("Ground"/"Priority"/…) и дни прилипали к левому краю (к divider1),
   * а свободное место оставалось только справа перед divider2. Из-за
   * этого разделители слева и справа от названия службы визуально были
   * не по центру относительно текста. center на кросс-оси (align-items)
   * + text-align центрируют содержимое равноудалённо от обоих divider.
   */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}
.details__prices-title {
  margin: 0;
  color: #000;
  font-size: 15px;
  font-weight: 700;
  text-transform: none;
  text-align: center;
}
.details__prices-days {
  color: #8B8B8B;
  font-size: 12px;
  font-weight: 400;
  text-align: center;
}
.details__prices-price-wrap {
  /*
   * Раньше ширина зависела только от текста цены (min-width:36px,
   * text-align:right) — у USPS (цена без центов, 2-3 цифры) цифра
   * прижималась к divider2/Buy Now иначе, чем у служб с "$XX.XX"
   * (4-5 цифр). Фиксированная ширина + центрирование (тот же приём,
   * что и у .sr-badge) убирают эту зависимость: цена всегда
   * равноудалена и от divider2, и от кнопки Buy Now, независимо от
   * количества цифр.
   */
  flex-shrink: 0;
  position: relative;
  width: 64px;
  display: flex;
  justify-content: center;
}
.details__prices-price {
  min-width: 0;
  color: #000;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
}
.details__prices-item .btn--buy {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
/*
 * Второй ("тусклый") уровень кнопки Buy Now — см. app.js updateBuyReadiness().
 * В отличие от .disabled (тариф ещё грузится, pointer-events:none), эта кнопка
 * остаётся кликабельной специально: клик по ней подсвечивает конкретные
 * незаполненные поля вместо того, чтобы просто ничего не делать.
 *
 * pointer-events:auto здесь обязателен и важнее .opacity: пока форма не
 * заполнена, кнопка почти всегда одновременно ещё и .disabled (цена
 * перезапрашивается после правки полей) — без явного auto клик по ней
 * блокировался бы через pointer-events:none от .disabled и красная
 * подсветка полей вообще не появлялась бы (баг: "кнопка тусклая, но клик
 * ничего не делает").
 */
.details__prices-item .btn--buy.btn--buy--incomplete {
  opacity: 0.45;
  pointer-events: auto;
}
.icon-arrow-right {
  width: 14px;
  height: 14px;
  stroke: #FFF;
  stroke-width: 1.6;
  fill: none;
}
.details .text-color--green {
  display: inline-block;
  color: rgba(0, 190, 53, 0.68);
  font-size: 10px;
  font-weight: 400;
}
.details .title-box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
}
.details .title {
  text-transform: uppercase;
}
.details .dropdown__button {
  height: 35px;
  padding-left: 47px;
}
.details .dropdown__button::after {
  content: "";
  position: absolute;
  left: 25px;
  width: 12px;
  height: 12px;
  background-image: url(../images/icons/add-circle.svg);
  background-repeat: no-repeat;
  background-size: 12px;
  background-position: center;
}
.details .dropdown__list {
  top: 37px;
}
.details .dropdown__list-item {
  height: 35px;
}
.details .dropdown__list-item span {
  pointer-events: none;
}
.details .rating__value {
  position: relative;
}
.details .rating__value::before {
  content: "SR: ";
}
.details .rating__value::after {
  content: "%";
}
.details .form__input {
  height: 40px;
  padding: 6px 15px;
  padding-left: 37px;
}

.input-number__arrow {
  position: absolute;
  left: 14px;
}
.input-number__arrow--minus {
  transform: translateY(6.5px);
}
.input-number__arrow--plus {
  transform: translateY(-6.5px);
}
.input-number__arrow--minus .icon-arrow-tringle {
  transform: scale(1, -1);
}

.purchases__inner {
  display: grid;
  grid-template-rows: auto auto auto auto;
  gap: 30px;
}
.purchases__filters {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  z-index: 1;
  grid-row: 1/2;
}
.purchases__filters .btn {
  width: 100%;
  min-height: 25px;
  padding: 0;
  font-size: 10px;
  font-weight: 400;
}
.purchases__filters .icon-dropdown-tringle {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 7.5px;
  z-index: 2;
}
.purchases__filters .dropdown:has(.dropdown__list.dropdown__list--visible) .icon-dropdown-tringle {
  transform: translateY(-50%) scale(1, -1);
  fill: #000;
}
.purchases__filters .dropdown__button {
  height: 25px;
  padding: 4.5px 7.5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  font-weight: 400;
}
.purchases__filters .dropdown__list {
  top: 27px;
}
.purchases__filters .dropdown__list-item {
  height: 25px;
  padding: 4.5px 7.5px;
  font-size: 10px;
  font-weight: 400;
}
.purchases__items-wrapper {
  grid-row: 4/5;
}
.purchases__items-wrapper::-webkit-scrollbar {
  display: none;
}
.purchases__item.purchases__items-head {
  padding: 10px 30px;
  margin-bottom: 10px;
  border-radius: 4px;
  border: 1px solid #E7EBEE;
  background: #F5FEFB;
  color: #000;
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
}
.purchases__items {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.purchases__item-box {
  position: relative;
}
.purchases__item-box:has(.checkbox-circle .checkbox-input:checked) .purchases__item, .purchases__item-box:has(.checkbox-angle .checkbox-input:checked) .purchases__item {
  background: #E7EBEE;
  box-shadow: -5px 5px 10px rgba(0, 0, 0, 0.1);
}
.purchases__item-box:has(.checkbox-circle .checkbox-input:checked) .input, .purchases__item-box:has(.checkbox-angle .checkbox-input:checked) .input {
  background: #E7EBEE;
}
.purchases__item {
  padding: 20px 30px;
  display: grid;
  grid-template-columns: minmax(110px, 160px) 1px minmax(110px, 160px) 1px minmax(110px, 160px) 1px minmax(55px, 80px) 1px minmax(150px, 210px);
  gap: 15px;
  justify-content: space-between;
  border-radius: 4px 4px 0px 0px;
  background: #FFF;
}
.purchases__item .input-copy {
  color: #000;
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
}
.purchases__item-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  color: #000;
  font-size: 12px;
  font-weight: 400;
}
.purchases__item-col .text {
  text-align: center;
}
.purchases__item-line {
  width: 1px;
  height: 100%;
  background: #B0B0B0;
}
.purchases__item-bottom {
  padding: 8px 16px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 80px;
}
.purchases__item-bottom:has(.checkbox-circle .checkbox-input:checked) .purchases__item-options {
  display: flex;
}
.purchases__item-options {
  justify-content: flex-start;
  align-items: center;
  gap: 30px;
  display: none;
}
.purchases__item-options a {
  color: #4D4AFD;
  font-size: 12px;
  font-weight: 700;
  text-transform: capitalize;
}
.purchases__item-options a.purchases__item-cancel {
  color: #E5484D;
}
.purchases .form__input-copy {
  color: #000;
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
}
.purchases .form__input-box--search {
  grid-row: 3/4;
}
.purchases #progress-score-1-full,
.purchases #progress-score-2-full,
.purchases #progress-score-3-full {
  display: none;
}
.purchases__bars.purchases__bars--circle {
  padding: 20px 30px 15px;
  border-radius: 4px;
  background: #FFF;
  font-size: 12px;
  font-weight: 400;
}
.purchases__bars--circle {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 90px;
}
.purchases__bars--circle .purchases__bars-title {
  max-width: 100px;
}
.purchases__bars--line {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.purchases__bars--line .purchases__bars-items {
  padding: 15px 30px;
  display: grid;
  grid-template-columns: repeat(3, minmax(auto, 220px));
  border-radius: 4px;
  background: #FFF;
  font-size: 12px;
  font-weight: 400;
}
.purchases__bars--line .purchases__bars-items .purchases__bars-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.purchases__bars--line .purchases__bars-items .purchases__bars-text {
  display: flex;
  flex-direction: column;
}
.purchases__bars-title {
  font-size: 16px;
  font-weight: 400;
}
.purchases__bars-items {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  width: 100%;
}
.purchases__bars-item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 15px;
}
.purchases__bars-item:nth-child(1) .rate__circle,
.purchases__bars-item:nth-child(1) .purchases__bars-line {
  background-color: #000;
}
.purchases__bars-item:nth-child(2) .rate__circle,
.purchases__bars-item:nth-child(2) .purchases__bars-line {
  background-color: #4D4AFD;
}
.purchases__bars-item:nth-child(3) .rate__circle,
.purchases__bars-item:nth-child(3) .purchases__bars-line {
  background-color: #00BE35;
}
.purchases__bars-line--box {
  width: 100%;
  height: 13px;
  overflow: hidden;
  border-radius: 4px;
  background: #D9D9D9;
}
.purchases__bars-line {
  height: 100%;
  border-radius: 4px;
}

.purchases__items-head--selected {
  color: #fff;
  background-color: #4D4AFD;
  display: none;
}
.purchases__items-head--selected .purchases-bars__table-head-btn {
  cursor: pointer;
}

.purchases__items-wrapper:has(.checkbox-angle .checkbox-input:checked) .purchases__items-head--default {
  display: none;
}
.purchases__items-wrapper:has(.checkbox-angle .checkbox-input:checked) .purchases__items-head--selected {
  color: #fff;
  display: grid;
  background-color: #4D4AFD;
}

.balance {
  margin-bottom: 80px;
}
.balance__inner {
  max-width: 800px;
}
.balance__content {
  display: flex;
  gap: 20px 40px;
}
.balance__content-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.balance__content-col:nth-child(2) {
  text-align: center;
  min-width: 250px;
}
.balance__content-col:nth-child(2) .balance__elem-box span {
  padding: 0;
}
.balance__content-col:nth-child(2):has(.payment-active) .balance__elem-box--btn .btn {
  color: #fff;
  border: none;
  background-color: #4D4AFD;
  pointer-events: all;
}
.balance .balance__elem-input--box:has(.form-group) {
  padding: 0;
  border: none;
}
.balance .balance__elem-input--box .dropdown__button {
  height: 35px;
  justify-content: center;
  font-size: 14px;
  font-weight: 400;
}
.balance .balance__elem-input--box .dropdown__list {
  top: calc(100% + 5px);
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}
.balance .balance__elem-input--box .dropdown__list-item {
  font-size: 14px;
  font-weight: 400;
  height: 35px;
  justify-content: center;
}
.balance .balance__elem-input--box .icon-chevron {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: calc(50% - 45px);
  z-index: 1;
  pointer-events: none;
}
.balance .balance__elem-input--box .dropdown__list-item-content {
  position: relative;
}
.balance .balance__elem-input--box .dropdown__list-item-content::before {
  content: "$";
  /* position: absolute;
  left: -7px; */
}
.balance .balance__elem-input--box:has(.balance__elem-input--btn) {
  padding: 0;
}
.balance__elem-box--btn {
  flex: 1;
}
.balance__elem-box--btn .btn {
  color: #B0B0B0;
  border: 1px solid #E7EBEE;
  background-color: #FFF;
  /* pointer-events: none; */
}
.balance__elem-box {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.balance__elem-box span {
  padding-left: 25px;
  font-size: 12px;
  font-weight: 300;
}
.balance__elem-box .btn {
  width: 100%;
  margin-top: auto;
}
.balance__elem-input--box {
  width: 100%;
  height: 35px;
  padding: 8px 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 4px;
  border: 1px solid #E7EBEE;
  background: #FFF;
  font-size: 14px;
  font-weight: 400;
}
.balance__elem-input--box-btns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(auto, 120px));
  justify-content: center;
  align-items: center;
  gap: 10px;
  display: flex;
  flex-wrap: wrap;
}
.balance__elem-input {
  text-align: center;
}
.balance__elem-btn {
  width: 120px;
  height: 35px;
  padding: 8px 15px;
  display: flex;
  align-items: center;
  gap: 15px;
  flex-shrink: 0;
  border-radius: 4px;
  border: 1px solid #E7EBEE;
  background: #FFF;
}
.balance__elem-btn.payment-active {
  background-color: #4D4AFD;
  color: #FFF;
}
.balance__elem-btn img {
  display: block;
  width: auto;
  height: 18.5px;
  pointer-events: none;
}

.history__inner {
  max-width: 800px;
}
.history__search-box {
  display: grid;
  grid-template-columns: auto 195px 100px minmax(auto, 100px);
  gap: 20px;
  margin-bottom: 20px;
}
.history__search-box .data-picker__label {
    height: 35px;
    position: relative;
}
.history__search-box .data-picker__input {
    line-height: 35px;
}
.history__search-box .btn {
  width: 100%;
}
.history__table {
  border-collapse: collapse;
}
.history__table th,
.history__table td {
  min-height: 35px;
  padding: 8px 12px;
  border: 1px solid #E7EBEE;
  text-align: left;
  vertical-align: top;
}
.history__table th:nth-child(1),
.history__table td:nth-child(1) {
  min-width: 130px;
}
.history__table th:nth-child(2),
.history__table td:nth-child(2) {
  min-width: 110px;
}
.history__table th:nth-child(3),
.history__table td:nth-child(3) {
  min-width: 320px;
}
.history__table th:nth-child(4),
.history__table td:nth-child(4) {
  min-width: 100px;
}
.history__table th:nth-child(5),
.history__table td:nth-child(5) {
  min-width: 140px;
}
.history__table-head {
  background: #F5FEFB;
}
.history td {
  background: #FFF;
}

.templates__inner {
  max-width: 900px;
}
.templates__items {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 20px;
}
.templates__item {
  max-width: 390px;
  width: 100%;
  padding-left: 10px;
}
.templates__item-title {
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
}
.templates__list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.templates__list-item {
  width: 100%;
  height: 110px;
  padding: 10px 20px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-radius: 0px 4px 4px 0px;
  background: #FFF;
  position: relative;
}
.templates__list-item .shape {
  position: absolute;
  width: 10px;
  height: 90px;
  background: #B0B0B0;
  top: 10px;
  left: -10px;
}
.templates__list-item .shape::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  width: 10%;
  height: 10px;
  border-right: 10px solid #B0B0B0;
  border-top: 10px solid transparent;
}
.templates__list-item .shape::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 10%;
  height: 10px;
  border-right: 10px solid #B0B0B0;
  border-bottom: 10px solid transparent;
}
.templates__list-text--box {
  display: flex;
  flex-direction: column;
  font-size: 14px;
  font-weight: 400;
}
.templates__list-btns {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
  margin-left: auto;
}
.templates__list-btns img {
  display: block;
}

.tickets__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 40px;
}
.tickets__head-item {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  font-size: 12px;
  font-weight: 400;
}
.tickets__head-item:nth-child(1) .tickets__head-circle {
  border: 3px solid #4D4AFD;
}
.tickets__head-item:nth-child(2) .tickets__head-circle {
  border: 3px solid #B0B0B0;
}
.tickets__head-item:nth-child(3) .tickets__head-circle {
  border: 3px solid #FD6A4A;
}
.tickets__head-item:nth-child(4) .tickets__head-circle {
  border: 3px solid #00BE35;
}
.tickets__head-circle {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
}
.tickets__content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 20px;
}
/*
 * Окно переписки просили сделать пошире — базовый .container (1050px)
 * этого не позволял вместить широкий чат рядом со списком тикетов.
 * Расширяем контейнер только на этой странице, остальной админки
 * не касается.
 */
.page-admin-support .container {
  max-width: 1300px;
}
.tickets__history {
  /*
   * Список тикетов остаётся компактным (см. .tickets__send ниже) — всю
   * дополнительную ширину страницы получает окно переписки.
   */
  max-width: 460px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding-left: 10px;
}
.tickets__history .btn {
  padding: 5px 40px;
}
.tickets__history-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 25px;
}
.tickets__history-list.tickets__history-list--more {
  margin: 0;
  display: none;
}
.tickets__history-list.tickets__history-list--more.tickets-more {
  display: flex;
}
.tickets__history-list-item {
  width: 100%;
  min-height: 40px;
  padding: 8px 20px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  border-radius: 0px 3px 3px 0px;
  border: 1px solid var(--Frame, #E7EBEE);
  background: #FFF;
  font-size: 12px;
  font-weight: 400;
  position: relative;
  /*
   * ВАЖНО: overflow-x/y на самой строке нельзя трогать — .dropdown__list
   * (статус) абсолютно позиционирован и всплывает НИЖЕ строки, а цветная
   * полоса ::before торчит левее (left: -10px). Любой overflow, отличный
   * от visible, на этом элементе обрезает и то, и другое (по спецификации
   * overflow-x != visible принудительно делает и overflow-y автоматическим).
   * Поэтому строка остаётся flex/nowrap (это и так поведение по умолчанию),
   * а скролл при нехватке места сделан точечно внутри .tickets__history-list-item-user.
   */
}
.tickets__history-list-item-user {
  white-space: nowrap;
  color: #8A8F98;
  font-size: 11px;
  overflow-x: auto;
  min-width: 0;
  max-width: 170px;
  scrollbar-width: none;
}
.tickets__history-list-item-user::-webkit-scrollbar {
  display: none;
}
.tickets__history-list-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: -10px;
  bottom: 0;
  width: 10px;
  height: 100%;
  border-radius: 8px 0px 0px 8px;
}
.tickets__history-list-item--not-resolved::before {
  background: rgba(176, 176, 176, 0.3);
}
.tickets__history-list-item--resolved::before {
  background: #A8E4BF;
}
.tickets__history-list-item--not-answered::before {
  background: #F4CBC5;
}
.tickets__history-list-item--answered::before {
  background: rgba(77, 74, 253, 0.3);
}
.tickets__history-list-item--more {
  text-align: center;
  color: #B0B0B0;
  font-size: 12px;
  font-weight: 600;
}
.tickets__send {
  /*
   * Базовое (клиентское) значение оставлено прежним: страница клиента
   * (.page-tickets) использует стандартный .container (1050px), и вместе
   * с .tickets__history (460px) более широкий чат туда не помещается —
   * .tickets__content (flex-wrap: wrap) роняет чат под список. Более
   * широкий чат — только для админки, см. .page-admin-support ниже.
   */
  max-width: 480px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-size: 12px;
  font-weight: 400;
}
.page-admin-support .tickets__send {
  max-width: 650px;
}
.tickets__send-head {
  display: flex;
  align-items: center;
  gap: 20px;
}
.tickets__send-head .tickets__send-ticket {
  height: 35px;
  padding: 8px 24px;
  border-radius: 12px;
  border: 1px solid #E7EBEE;
  background: #FFF;
  font-weight: 600;
}
.tickets__send-ticket {
  width: auto;
  flex: 1 1 100%;
  white-space: nowrap;
}
.tickets__send-priority {
  width: 160px;
  flex-shrink: 0;
}
.tickets__send-chat--box {
  padding: 20px 20px 25px;
  border-radius: 20px;
  border: 1px solid #ECECEC;
  background: #FFF;
  box-shadow: 0 4px 24px rgba(20, 20, 43, 0.05);
}
/*
 * Прокручиваемая область сообщений — раньше здесь не было ни max-height,
 * ни overflow, окно просто бесконечно растягивалось под всю переписку,
 * а app.scrollChat() (который выставляет .scrollTop) фактически ничего
 * не скроллил, потому что скроллить было нечему. Селектор через прямого
 * ребёнка .tickets__send-chat--box, потому что тем же классом
 * (massage_content) по разметке помечен ещё и вложенный #messages —
 * ограничиваем высотой именно внешнюю обёртку.
 */
.tickets__send-chat--box > .massage_content {
  max-height: 560px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #E7EBEE transparent;
  margin: 0 -8px 20px;
  padding: 0 8px;
}
.tickets__send-chat--box > .massage_content::-webkit-scrollbar {
  width: 5px;
}
.tickets__send-chat--box > .massage_content::-webkit-scrollbar-thumb {
  background: #E7EBEE;
  border-radius: 10px;
}
.tickets__send-chat {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/*
 * Современный чат: свои сообщения (from) — справа, тёмный пузырь;
 * входящие (to) — слева, светлый пузырь. Раньше оба типа "прилипали"
 * к левому краю и отличались только сдвигом padding-left — из-за
 * этого переписка читалась не как диалог, а как две колонки текста.
 */
.tickets__send-message-from,
.tickets__send-message-to {
  display: flex;
  flex-direction: column;
  max-width: 78%;
}
.tickets__send-message-from {
  align-self: flex-end;
  align-items: flex-end;
}
.tickets__send-message-to {
  align-self: flex-start;
  align-items: flex-start;
}
.tickets__send-message-from .tickets__send-message {
  background: #17181C;
  color: #fff;
  border-radius: 16px 16px 4px 16px;
}
.tickets__send-message-to .tickets__send-message {
  background: #F1F2F5;
  color: #17181C;
  border-radius: 16px 16px 16px 4px;
}
.tickets__send-message-avatar-img {
  display: none;
}
.tickets__send-message-name {
  padding: 0 4px 4px;
  color: #A6ABB5;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.tickets__send-message {
  min-height: unset;
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 400;
  word-break: break-word;
}
.tickets__send-message p {
  margin: 0;
}

.tickets__send-message img{
	max-width: 100%;
	border-radius: 8px;
	margin-top: 6px;
}

.tickets__send-message-date {
  position: static;
  display: block;
  margin-top: 4px;
  padding: 0 4px;
  color: #B0B0B0;
  font-size: 10px;
  font-weight: 400;
}
.tickets__send-chat-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 4px 0;
  white-space: normal;
  text-align: center;
  overflow: hidden;
  color: #B0B0B0;
  font-size: 11px;
  font-weight: 400;
}
.tickets__send-chat-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.tickets__send-chat-bottom .btn {
  min-width: 130px;
}
/*
 * Поле ввода и нижняя панель — только внутри окна переписки тикета
 * (#ticket-chat), чтобы не задеть #send-message/.add-file__box в других
 * формах (создание тикета, форма на tpl/footer.php и т.д.), которые
 * используют те же общие классы.
 */
#ticket-chat #send-message {
  border: 1px solid #E7EBEE;
  border-radius: 14px;
  padding: 12px 16px;
  font-size: 13px;
  transition: border-color .15s ease;
}
#ticket-chat #send-message:focus {
  outline: none;
  border-color: #17181C;
}
#ticket-chat .tickets__send-chat-bottom .add-file__box {
  border-radius: 12px;
}
#ticket-chat .tickets__send-chat-bottom .button {
  border-radius: 12px;
  background-color: #17181C;
}
#ticket-chat .tickets__send-chat-bottom .button:hover {
  background-color: #33343A;
}
.tickets__send-bottom {
  display: flex;
  gap: 40px;
}
.tickets__send-bottom-btn {
  min-width: 180px;
  height: 35px;
  flex-shrink: 0;
  color: #000;
  border-radius: 12px;
  border: 1px solid #E7EBEE;
  background: #E7EBEE;
  color: #B0B0B0;
  background: #FFF;
  transition: background-color .15s ease, color .15s ease;
}
.tickets__send-bottom-btn:nth-child(2) {
  flex-grow: 1;
}
.tickets__send-bottom-btn:hover,
.tickets__send-bottom-btn:active {
  color: #000;
  border-radius: 12px;
  border: 1px solid #E7EBEE;
  background: #E7EBEE;
}
.tickets-page__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
/*
 * .tickets__content обычно flex с justify-content: space-between — это
 * работает, когда рядом два блока (список тикетов + чат). Здесь ребёнок
 * один (приветствие для тех, у кого ещё нет тикетов), и space-between
 * просто прижимает его к левому краю вместо центра страницы.
 */
.tickets-page__new-create {
  justify-content: center;
  width: 100%;
}
.tickets-page__box .btn {
  padding: 5px 40px;
}
.tickets-page__box-text {
  max-width: 450px;
  font-size: 16px;
  font-weight: 400;
}
.tickets-page__box-text p {
  margin-bottom: 1em;
}
.tickets-page__box-text--framed {
  text-align: center;
  padding: 30px 40px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 12px;
  background: transparent;
}
.tickets-page__box-text--framed p {
  margin-bottom: 0;
}
.tickets-page__new-btn-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.tickets-page__telegram-link {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 35px;
  padding: 5px 16px;
  border-radius: 4px;
  border: 1px solid #E7EBEE;
  color: #55555F;
  font-size: 14px;
  font-weight: 400;
  white-space: nowrap;
  transition: border-color .15s ease, color .15s ease;
}
.tickets-page__telegram-link img {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.tickets-page__telegram-link:hover {
  border-color: #4D4AFD;
  color: #4D4AFD;
}
.tickets__not {
  max-width: 330px;
  width: 100%;
  height: 40px;
  padding: 8px 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0px 3px 3px 0px;
  border: 1px solid #E7EBEE;
  background: #B0B0B0;
}
.tickets__form-box {
  max-width: 540px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.tickets__form {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 30px;
  border-radius: 4px;
  border: 1px solid #E7EBEE;
  background: #FFF;
}
.tickets__form-title {
  margin-bottom: 20px;
  font-size: 24px;
  font-weight: 700;
}
.tickets__form-inputs {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 30px;
}
.tickets__form-input--box {
  width: 100%;
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-left: 24px;
  border-radius: 0px 3px 3px 0px;
  border: 1px solid #E7EBEE;
  background: #FFF;
}
.tickets__form-input--box:has(.form-group) {
  padding: 0;
  border: none;
}
.tickets__form-input--box .dropdown__button {
  height: 40px;
  padding-left: 62px;
  font-size: 12px;
  font-weight: 400;
}
.tickets__form-input--box .dropdown__list {
  top: calc(100% + 5px);
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}
.tickets__form-input--box .dropdown__list-item {
  height: 40px;
  font-size: 12px;
  font-weight: 400;
}
.tickets__form-input--box .tickets__form-input-title {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 24px;
  z-index: 1;
  pointer-events: none;
  color: #000;
  font-size: 12px;
  font-weight: 700;
}
.tickets__form-input {
  width: 100%;
  min-height: 40px;
  padding: 8px 24px 8px 8px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 12px;
  font-weight: 400;
}
.tickets__form-input--textarea {
  min-height: 114px;
  padding: 15px 25px;
  margin-bottom: 30px;
  resize: none;
}
.tickets__form-input--textarea::placeholder {
  color: #000;
  font-family: inherit;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.tickets__form-input--placeholder {
  font-size: 12px;
  font-weight: 700;
}
.tickets__search {
  max-width: 390px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: flex-start;
}
.tickets__search .search {
  width: 100%;
}
.tickets__search .btn {
  padding: 5px 30px;
  margin-top: auto;
}
.tickets__search-list {
  max-width: 300px;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.tickets__search-list-item {
  padding: 8px 15px;
  border-radius: 4px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 14px;
}
.tickets__search-list-item:active {
  background-color: #000;
}
.tickets__search-list-item:active .tickets__search-list-text {
  color: #fff;
}
.tickets__search-list-text {
  font-size: 14px;
  font-weight: 400;
}
.tickets__search-list-circles {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
}
.tickets__search-list-circles .tickets__head-circle {
  width: 20px;
  height: 20px;
  border: 1.5px solid #fff;
  font-size: 7px;
  font-weight: 400;
}
.tickets__search-list-circles .tickets__head-circle:nth-child(1) {
  border-color: #FD6A4A;
}
.tickets__search-list-circles .tickets__head-circle:nth-child(2) {
  border-color: #B0B0B0;
}
.tickets.page-tickets-page .tickets__content {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.tickets.page-tickets-request-2 .tickets__content {
  display: grid;
  grid-template-columns: minmax(auto, 390px) minmax(auto, 540px);
}

.tickets__history .btn {
  margin: 0 auto;
}

.tickets__history .form-group {
  width: fit-content;
}
.tickets__history .dropdown__button {
  width: fit-content;
  height: 100%;
  border: none;
  padding: 0;
  padding-right: 28px;
  color: #000;
  font-size: 12px;
  font-weight: 400;
}
.tickets__history .dropdown__list {
  width: calc(100% + 10px);
  margin-left: -10px;
  top: calc(1em + 10px);
}
.tickets__history .dropdown__list-item {
  height: fit-content;
  padding: 5px 10px;
  color: #000;
  font-size: 12px;
  font-weight: 400;
}
.tickets__history .icon-chevron {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  stroke: #242424;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  z-index: 2;
}
/*
 * Раньше цвет полосы определялся через :has(.dropdown__button .not-answered)
 * и т.п. — но класс на span'е статуса генерировался как strtolower($status)
 * БЕЗ замены пробела на дефис ("Not answered" -> класс "not answered", то
 * есть ДВА класса "not"+"answered"), поэтому .answered совпадал у Not
 * answered и Answered одновременно, и оба красились одинаково. Плюс эти
 * :has()-правила специфичнее и перебивали простые classes ниже
 * (.tickets__history-list-item--not-answered и т.д.), которые уже
 * корректно проставляются и на сервере, и через сокет в JS. Убрано,
 * цвет теперь только от этих простых классов.
 */

.tickets__send-priority {
  padding: 0;
  border-radius: 4px;
  border: none;
}
.tickets__send-priority .icon-chevron {
  position: absolute;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
  right: 13px;
  stroke: #242424;
  pointer-events: none;
}
.tickets__send-priority .dropdown__button {
  height: 35px;
  padding: 5px 13px;
  font-size: 14px;
  font-weight: 400;
}
.tickets__send-priority .dropdown__list {
  top: 40px;
}
.tickets__send-priority .dropdown__list-item {
  height: 35px;
  padding: 5px 13px;
}

.tickets__form-input--box-priority .dropdown__button {
  padding-left: 77px;
}

.tickets__form-input--box.choice-user .icon-chevron,
.choice-user .icon-chevron {
  stroke: #242424;
  pointer-events: none;
}
.tickets__form-input--box.choice-user .dropdown__button,
.choice-user .dropdown__button {
  padding-left: 105px;
  gap: 8px;
}
.tickets__form-input--box.choice-user .dropdown__list,
.choice-user .dropdown__list {
  top: calc(100% + 10px);
  height: 272px;
  max-height: unset;
}
.tickets__form-input--box.choice-user .dropdown__list-item--searchid,
.choice-user .dropdown__list-item--searchid {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  padding: 8px 25px;
}
.tickets__form-input--box.choice-user .dropdown__list-item--searchid span,
.choice-user .dropdown__list-item--searchid span {
  color: #000;
  font-family: inherit;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
  white-space: nowrap;
}
.tickets__form-input--box.choice-user .dropdown__list-item--searchid .icon-search,
.choice-user .dropdown__list-item--searchid .icon-search {
  stroke: #242424;
}
.tickets__form-input--box.choice-user .dropdown__list-item--searchid form,
.choice-user .dropdown__list-item--searchid form {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.tickets__form-input--box.choice-user .dropdown__list-item--searchid button,
.choice-user .dropdown__list-item--searchid button {
  width: 24px;
  height: 24px;
}
.tickets__form-input--box.choice-user .dropdown__list-item--searchid input,
.choice-user .dropdown__list-item--searchid input {
  width: 100%;
  height: 24px;
}
.tickets__form-input--box.choice-user .dropdown__list-item,
.choice-user .dropdown__list-item {
  height: fit-content;
  padding: 7.5px 25px;
  border: none;
}
.tickets__form-input--box.choice-user .dropdown__list-item:hover,
.choice-user .dropdown__list-item:hover {
  background-color: unset;
}

.reg-and-log {
  display: flex;
  align-items: center;
  min-height: calc(100vh - 80px);
}
.reg-and-log .container {
  margin: 0 auto;
}
.reg-and-log__inner {
  max-width: 300px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 60px;
  align-items: center;
}
.reg-and-log__title {
  text-align: center;
  color: #000;
  font-size: 20px;
  font-weight: 700;
}
.reg-and-log__content {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 30px;
}
.reg-and-log__captcha {
  width: 100%;
  height: auto;
}
.reg-and-log__captcha img {
  display: block;
  width: 100%;
}
.reg-and-log__btns {
  width: 100%;
  display: flex;
  justify-content: space-around;
}
.reg-and-log .logo {
  margin: 0;
}

.account__inner {
  max-width: 830px;
}
.account__content {
  display: flex;
  flex-direction: column;
  gap: 35px;
}
.account__top {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 40px;
}
.account__top .account__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 25px 30px 20px;
  background-color: #fff;
}
.account__item {
  width: 100%;
}
.account__text-box {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.account__text-placeholder {
  font-size: 14px;
  font-weight: 400;
}
.account__text {
  font-size: 20px;
  font-weight: 700;
}
.account__text .copy-box .input {
  font-size: inherit;
  font-weight: inherit;
}
.account__item-img {
  width: 30px;
  height: 30px;
  object-fit: cover;
}
/*
 * Только страница Account: цветные квадраты с иконками слева от текста,
 * как на референсе. Страница Bulk Purchase использует те же .account__item
 * /.account__top под старые img-иконки — трогать их нельзя, поэтому весь
 * новый вид навешен через .page-account, а не на общие классы.
 */
.page-account .account__top .account__item {
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  padding-left: 20px;
  padding-right: 16px;
}
.account__item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  min-width: 46px;
  border-radius: 13px;
}
.account__item-icon svg {
  width: 24px;
  height: 24px;
}
.page-account .account__top .account__text-placeholder {
  white-space: nowrap;
}
.account__item-icon--balance {
  background-color: #ECEBFF;
  color: #4D4AFD;
}
.account__item-icon--purchases {
  background-color: #E3F0FF;
  color: #2F86EB;
}
.account__item-icon--tickets {
  background-color: #E4F9EC;
  color: #22A366;
}
.account__bottom {
  padding: 25px 0 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 40px;
  background-color: #fff;
}
.account__bottom .account__item {
  padding: 0 30px 0;
}
.account__bottom .account__text-placeholder {
  white-space: nowrap;
}
.account__toggles {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: 20px 40px;
}
.account__toggles .account__item {
  width: auto;
  flex: 1 1 0;
  min-width: 0;
}
.account__bottom .copy-box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
}
.account__user-input {
  min-width: 98px;
  width: 98px;
  max-width: 153px;
}
.account__contact-input {
  min-width: 124px;
  width: 124px;
  max-width: 153px;
}
.account__password-input {
  min-width: 118px;
  width: 118px;
  max-width: 153px;
  -webkit-text-security: circle;
}
.account .replacer {
  border: 1px #666 dotted;
  height: 20px;
  display: inline-block;
  color: #444;
  background: #eee;
}
.account .replacer.current {
  border-color: #ccc;
  color: #000;
  background: #fff;
}
.account__contact-box, .account__password-box {
  flex-direction: row !important;
  justify-content: flex-start !important;
}

.user__inner {
  max-width: 940px;
}
.user__filtered {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
  width: 100%;
  /* overflow-x: auto; */
  white-space: nowrap;
  font-size: 12px;
  font-weight: 400;
}
.user__filtered-text--color {
  color: #00BE35;
}
.user__filtered-items {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
}
.user .search {
  margin-bottom: 40px;
}
.user__btns {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px 20px;
  margin-bottom: 20px;
}
.user__btns .btn--muted {
  min-width: 170px;
  pointer-events: all;
}
.user__btns .btn {
  min-width: 170px;
  margin-left: auto;
}
.user__ceckboxes {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 35px;
}
.user__tab-btns {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 5px;
}

.users-tab,
.user__tab-btn {
  width: fit-content;
  height: 47px;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #B0B0B0;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
}

.users-tab.active,
.user__tab-btn.tab-active {
  color: #000;
  font-size: 20px;
  font-weight: 700;
}
.user__tab-item {
  display: none;
}
.user__tab-item.tab-active {
  display: block;
}
.user__table {
  border-collapse: collapse;
}
.user__table th,
.user__table td {
  min-width: 100px;
  width: 100px;
  max-width: 100px;
  padding: 8px 12px;
}
.user__table th input,
.user__table td input {
  max-width: 69px;
}
.user__table th:nth-child(1),
.user__table td:nth-child(1) {
  min-width: 120px;
  width: 120px;
  max-width: 120px;
}

.user__table th:nth-child(4),
.user__table td:nth-child(4) {
  min-width: 120px;
  width: 120px;
  max-width: 120px;
}
.user__table th:nth-child(4) input,
.user__table td:nth-child(4) input {
  max-width: 120px;
}
.user__table th:nth-child(5), .user__table th:nth-child(6),
.user__table td:nth-child(5),
.user__table td:nth-child(6) {
  min-width: 120px;
  width: 120px;
  max-width: 120px;
}
.user__table th:nth-child(5) input, .user__table th:nth-child(6) input,
.user__table td:nth-child(5) input,
.user__table td:nth-child(6) input {
  max-width: 100px;
}
.user__table th {
  height: 35px;
  border: 1px solid #E7EBEE;
  background: #F5FEFB;
  color: #000;
  font-size: 14px;
  font-weight: 700;
}
.user__table td {
  min-height: 32px;
  border: 1px solid #E7EBEE;
  background: #FFF;
  font-size: 12px;
  font-weight: 400;
}
.user__table td:has(.form-group) {
  padding: 0;
}
.user__table td:has(.form-group.status) {
  padding: 8px 12px;
}
.user__table th {
  position: relative;
}
.user__table th.sortable {
  cursor: pointer;
}
.user__table th.sortable::before {
  content: ' ';
  background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --><svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.0686 15H7.9313C7.32548 15 7.02257 15 6.88231 15.1198C6.76061 15.2238 6.69602 15.3797 6.70858 15.5393C6.72305 15.7232 6.93724 15.9374 7.36561 16.3657L11.4342 20.4344C11.6323 20.6324 11.7313 20.7314 11.8454 20.7685C11.9458 20.8011 12.054 20.8011 12.1544 20.7685C12.2686 20.7314 12.3676 20.6324 12.5656 20.4344L16.6342 16.3657C17.0626 15.9374 17.2768 15.7232 17.2913 15.5393C17.3038 15.3797 17.2392 15.2238 17.1175 15.1198C16.9773 15 16.6744 15 16.0686 15Z" stroke="%23000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M7.9313 9.00005H16.0686C16.6744 9.00005 16.9773 9.00005 17.1175 8.88025C17.2393 8.7763 17.3038 8.62038 17.2913 8.46082C17.2768 8.27693 17.0626 8.06274 16.6342 7.63436L12.5656 3.56573C12.3676 3.36772 12.2686 3.26872 12.1544 3.23163C12.054 3.199 11.9458 3.199 11.8454 3.23163C11.7313 3.26872 11.6323 3.36772 11.4342 3.56573L7.36561 7.63436C6.93724 8.06273 6.72305 8.27693 6.70858 8.46082C6.69602 8.62038 6.76061 8.7763 6.88231 8.88025C7.02257 9.00005 7.32548 9.00005 7.9313 9.00005Z" stroke="%23000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-repeat: no-repeat;
  position: absolute;
  background-size: contain;
  height: 15px;
  width: 15px;
  right: 0px;
  top: 10px;
  opacity: .4;
}
.user__tab-item .table-wrapper thead {
  width: 100%;
  display: block;
}
.user__tab-item .table-wrapper tbody {
  overflow-y: scroll;
  height: 800px;
  display: block;
}

.service__items {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.service__items .btn {
  min-width: 170px;
}
.service__selector-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.service__selector-title label {
  font-size: 13px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.7);
  white-space: nowrap;
}
.service__selector-title label .text--muted {
  font-weight: 400;
  font-size: 12px;
}
.service__selector-title input {
  max-width: 220px;
}
.service__table {
  border-collapse: collapse;
}
.service__table th,
.service__table td {
  min-width: 100px;
  width: 100px;
  max-width: 100px;
}
.service__table th input,
.service__table td input {
  max-width: 76px;
}
.service__table td input.input-service-label,
.service__table td input.input-service-days {
  max-width: 110px;
}
.service__table th:nth-child(1),
.service__table td:nth-child(1) {
  min-width: 180px;
  width: 180px;
  max-width: 180px;
}
.service__table th:nth-child(1) input,
.service__table td:nth-child(1) input {
  max-width: 156px;
}
.service__table th:nth-child(4),
.service__table td:nth-child(4) {
  min-width: 140px;
  width: 140px;
  max-width: 140px;
}
.service__table th:nth-child(4) input,
.service__table td:nth-child(4) input {
  max-width: 116px;
}
.service__table th:nth-child(5),
.service__table td:nth-child(5) {
  min-width: 110px;
  width: 110px;
  max-width: 110px;
}
.service__table th:nth-child(5) input,
.service__table td:nth-child(5) input {
  max-width: 86px;
}
.service__table th {
  text-align: left;
}
.service__table th:nth-child(6) {
  min-width: 180px;
  width: 180px;
  max-width: 180px;
}
.service__table th:nth-child(6) input {
  max-width: 156px;
}
.service__table td:nth-child(6), .service__table td:nth-child(7) {
  min-width: 90px;
  width: 90px;
  max-width: 90px;
}
.service__table td:nth-child(6) input, .service__table td:nth-child(7) input {
  max-width: 90px;
}
.service__table td:has(.form__input-box) {
  padding: 0;
}
.service__table td .form__input-box {
  height: 100%;
  border: none;
}
.service__table td .form__input {
  padding: 8px 12px 8px 31px;
  font-size: 12px;
  font-weight: 400;
}
.service__table td .input-number__arrow {
  left: 12px;
}
.service .form-group .dropdown__button {
  width: 100%;
  height: 100%;
  border: none;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
}
.service .form-group .icon-chevron {
  position: absolute;
  right: -5px;
  z-index: 1;
  stroke: #242424;
  pointer-events: none;
}
.service .form-group .dropdown__list {
  top: calc(100% + 0px);
  width: calc(100% + 24px);
  left: -12px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}
.service .form-group .dropdown__list-item {
  height: 25px;
  padding: 8px 12px;
  font-size: inherit;
  font-weight: inherit;
}

.admin-support .title-box {
  overflow-x: auto;
}
.admin-support__tab-btns {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
  white-space: nowrap;
  width: fit-content;
}
.admin-support__tab-btn {
  color: #B0B0B0;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
}
.admin-support__tab-btn.tab-active {
  color: #000;
  font-size: 20px;
  font-weight: 700;
}
.admin-support__tab-item {
  display: none;
}
.admin-support__tab-item.tab-active {
  display: block;
}
.admin-support__compensations {
  display: grid;
  grid-template-columns: auto minmax(auto, 280px);
  justify-content: flex-start;
  align-items: flex-start;
  gap: 40px;
}
.admin-support__compensations .table__btn {
  width: 100%;
  height: 35px;
  padding: 8px 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 4px;
  border: 1px solid #E7EBEE;
  background: #FFF;
}
.admin-support__compensations .table__btn span {
  font-size: 14px;
  font-weight: 400;
  padding: 0;
}
.admin-support .compensations__amount-btn .balance__elem-input--box,
.admin-support .compensations__amount-btn .balance__elem-input {
  pointer-events: none;
}
.admin-support__compensations-col-1 {
  max-width: 200px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.admin-support__compensations-col-1 .balance__elem-box:has(.btn) span {
  opacity: 0;
}
.admin-support__compensations-col-2 {
  max-width: 280px;
  width: 100%;
  height: 100%;
}
.admin-support__compensations-col-2 .balance__elem-box {
  height: 100%;
}
.admin-support__compensations-trackers {
  height: 100%;
  padding: 25px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  border-radius: 4px;
  border: 1px solid #E7EBEE;
  background: #FFF;
}
.admin-support__compensations-trackers span {
  padding: 0;
  color: #000;
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
}
.admin-support .tech-support__create {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 40px;
}
.admin-support .tech-support__input {
  width: 280px;
  height: 35px;
  padding: 4.59px 30px;
  flex-shrink: 0;
}
.admin-support .tech-support__table th,
.admin-support .tech-support__table td {
  min-width: 150px;
  width: 150px;
}
.admin-support .tech-support .btn {
  min-width: 160px;
}

.admin-wallet__checkboxes-box {
  display: grid;
  grid-template-columns: 200px auto;
  gap: 40px;
  margin-top: 60px;
}
/*
 * У админа выше больше нет блока пополнения баланса (он ему не нужен —
 * это не его личный счёт), переключатели способов оплаты идут сразу
 * под заголовком секции, поэтому большой отступ, рассчитанный на блок
 * пополнения сверху, здесь не нужен.
 */
.admin-wallet__checkboxes-box--top {
  margin-top: 0;
}
/*
 * Остался единственный способ оплаты (Crypto) — заголовок и тумблер
 * теперь в одну строку, а не в grid из двух колонок под общий блок
 * пополнения, которого на этой странице больше нет.
 */
.admin-wallet__checkboxes-box--single {
  display: flex;
  align-items: center;
  gap: 20px;
}
.admin-wallet__checkboxes-box--single .admin-wallet__checkboxes-title {
  margin-bottom: 0;
}
.admin-wallet__checkboxes {
  padding: 0 15px;
}
.admin-wallet__checkboxes-title {
  margin-bottom: 20px;
  color: #000;
  font-size: 14px;
  font-weight: 400;
}
.admin-wallet__checkboxes-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: fit-content;
}
.admin-wallet .balance__elem-input--box:has(.form-group) {
  padding: 0;
  border: none;
}
.admin-wallet .balance__elem-input--box .dropdown__button {
  height: 35px;
  justify-content: center;
  font-size: 14px;
  font-weight: 400;
}
.admin-wallet .balance__elem-input--box .dropdown__list {
  top: calc(100% + 5px);
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}
.admin-wallet .balance__elem-input--box .dropdown__list-item {
  font-size: 14px;
  font-weight: 400;
  height: 35px;
  justify-content: center;
}
.admin-wallet .balance__elem-input--box .icon-chevron {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: calc(50% - 45px);
  z-index: 1;
  pointer-events: none;
}
.admin-wallet .balance__elem-input--box .dropdown__list-item-content {
  position: relative;
}
.admin-wallet .balance__elem-input--box .dropdown__list-item-content::before {
  content: "$";
  position: absolute;
  left: -7px;
}
.admin-wallet .balance__elem-input--box:has(.balance__elem-input--btn) {
  padding: 0;
}

.balance__elem-input--btn {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.balance__elem-input--btn svg {
  pointer-events: none;
}

.page-support .tickets__history .form-group {
  width: fit-content;
}
.page-support .tickets__history .dropdown__button {
  width: fit-content;
  height: 100%;
  border: none;
  padding: 0;
  padding-right: 28px;
  color: #000;
  font-size: 12px;
  font-weight: 400;
}
.page-support .tickets__history .dropdown__list {
  width: calc(100% + 10px);
  margin-left: -10px;
  top: calc(1em + 10px);
}
.page-support .tickets__history .dropdown__list-item {
  height: fit-content;
  padding: 5px 10px;
  color: #000;
  font-size: 12px;
  font-weight: 400;
}
.page-support .tickets__history .icon-chevron {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  stroke: #242424;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  z-index: 2;
}
.page-support .tab-compensations .choice-user .dropdown__button {
  padding: 8px 25px;
  padding-left: 76px;
}
.page-support .tab-compensations .choice-user .icon-plus {
  width: 12px;
  height: 12px;
}
.page-support .tab-compensations .balance__elem-box .choice-user span {
  padding: 0;
  color: #000;
  font-size: 14px;
  font-weight: 400;
}
.page-support .tab-compensations .tickets__form-input-title {
  width: 12px;
  height: 12px;
  top: 50%;
  transform: translateY(-50%);
  left: 54px;
}
.page-support .tab-compensations .choice-user .dropdown__list {
  min-width: 290px;
}

.page-support .tab-compensations .choice-user .dropdown__button,
.page-admin-support .tab-compensations .choice-user .dropdown__button {
  padding: 8px 25px;
  padding-left: 76px;
  height: 35px;
}
.page-support .tab-compensations .choice-user .icon-plus,
.page-admin-support .tab-compensations .choice-user .icon-plus {
  width: 12px;
  height: 12px;
}
.page-support .tab-compensations .balance__elem-box .choice-user span,
.page-admin-support .tab-compensations .balance__elem-box .choice-user span {
  padding: 0;
  color: #000;
  font-size: 14px;
  font-weight: 400;
}
.page-support .tab-compensations .tickets__form-input-title,
.page-admin-support .tab-compensations .tickets__form-input-title {
  width: 12px;
  height: 12px;
  top: 50%;
  transform: translateY(-50%);
  left: 54px;
}
.page-support .tab-compensations .choice-user .dropdown__list,
.page-admin-support .tab-compensations .choice-user .dropdown__list {
  min-width: 290px;
}

.tickets__send-priority {
  padding: 0;
  border-radius: 4px;
  border: none;
}
.tickets__send-priority .icon-chevron {
  position: absolute;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
  right: 13px;
  stroke: #242424;
}
.tickets__send-priority .dropdown__button {
  height: 35px;
  padding: 5px 13px;
  font-size: 14px;
  font-weight: 400;
}
.tickets__send-priority .dropdown__list {
  top: 40px;
}
.tickets__send-priority .dropdown__list-item {
  height: 35px;
  padding: 5px 13px;
}

.page-support-user .support-user__dropdown {
  margin-bottom: 40px;
}
.page-support-user .support-user__dropdown .form-group {
  width: fit-content;
}
.page-support-user .support-user__dropdown .dropdown {
  width: fit-content;
}
.page-support-user .support-user__dropdown .dropdown__button {
  width: 200px;
  height: 35px;
  justify-content: center;
  padding: 8px 25px;
}
.page-support-user .support-user__dropdown .dropdown__button span {
  padding-right: 30px;
}
.page-support-user .support-user__dropdown .icon-chevron {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 50px;
  stroke: #242424;
  z-index: 2;
}
.page-support-user .support-user__dropdown .dropdown__list {
  width: 480px;
}
.page-support-user .purchases__items-box {
  overflow-x: auto;
  padding-left: 24px;
  margin-left: -24px;
}
.page-support-user .purchases__items-box::-webkit-scrollbar {
  display: none;
}
.page-support-user .purchases__item {
  width: fit-content;
  grid-template-columns: 160px 1px 130px 1px 160px 1px 80px 1px 160px 1px 100px;
}
.page-support-user .btn--action {
  width: fit-content;
  padding: 2.5px 8.5px;
  margin: 0 auto;
}

	
	/* admin */
		.user-disabled{
			display: none;
		}
	/* admin end */
	
	/* loader start */
		.loader-box.buy-label{
			left: 200px;
			position: relative;
		}
	
		.loader-wrap{
			z-index: 999;
			transform: translate(-50%, -50%);
		}

		.loader-dots{
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 4px;
		}

		.loader-dots span{
			width: 6px;
			height: 6px;
			border-radius: 50%;
			background: #4d4afd;
			animation: loader-dots-bounce 1.4s ease-in-out infinite both;
		}

		.loader-dots span:nth-child(1){ animation-delay: -0.32s; }
		.loader-dots span:nth-child(2){ animation-delay: -0.16s; }
		.loader-dots span:nth-child(3){ animation-delay: 0s; }
		.loader-dots span:nth-child(4){ animation-delay: 0.16s; }

		.loader-dots--inline{
			display: inline-flex;
			vertical-align: middle;
		}

		.loader-dots--inline span{
			width: 5px;
			height: 5px;
		}

		.loader-dots--btn span{
			background: #FFF;
		}

		.loader-prices{
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			display: none;
			position: absolute;
		}

		.details__prices-price.price-loading{
			opacity: 0;
		}

		@keyframes loader-dots-bounce{
			0%, 80%, 100% {
				transform: scale(0.6);
				opacity: 0.4;
			}
			40% {
				transform: scale(1);
				opacity: 1;
			}
		}
	
	/* loader end */

	.hide{
		display: none;
	}

	/*
	 * Баннер режима "просмотр как пользователь" (read-only impersonation
	 * из админки). Fixed, чтобы не трогать flex/grid разметку .wrapper —
	 * добавлять паддинг под него на всех клиентских страницах избыточно
	 * для внутреннего служебного индикатора.
	 */
	.impersonation-banner{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 9999;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 16px;
		height: 36px;
		background: #FFB020;
		color: #1a1a1a;
		font-size: 13px;
		font-weight: 500;
	}

	.impersonation-banner__exit{
		border: 1px solid #1a1a1a;
		background: transparent;
		color: #1a1a1a;
		border-radius: 6px;
		padding: 3px 12px;
		font-size: 12px;
		font-weight: 600;
		cursor: pointer;
	}

	.impersonation-banner__exit:hover{
		background: #1a1a1a;
		color: #FFB020;
	}
	
	.error{
		color: #f00;
		min-height: 15px;
	}
	input.error, select.error, textarea.error { 	
		border: 1px solid #f00;
	}

	.empty{
		box-shadow: 0px 0px 0px 1px #f00;
	}

	.center{
		text-align: center;
	}
	
	#send-message{
		width: 100%;
		border: solid 1px #ccc;
		margin: 20px 0px 20px 0px;
		border-radius: 4px;
		resize: none;
		padding: 7px;
	}
	
	.message-text-form-wrap{
		text-align: center;
	}
	
	#compensation textarea[name="tracks"]{
		width: 100%;
		height: 100%;
		resize: none;
	}
	
	.fs12{
		font-size: 12px;
		margin-bottom: 10px;
		display: inline-block;
	}
	
	#new-invite-form{
		max-width: 590px;
	}
	
	.item.ticket{
		cursor: pointer;
	}	
	
	.inline{
		display: inline-block;
	}
	
	.country img,
	.dropdown.cstm-dropdown-active img{
		width: 25px;
	}
	
	.user_id{
		position: relative;
	}
	
	.user_id .view-as-user{
		cursor: pointer;
	}
	
	.user_id .view-as-user:hover{
		text-decoration: underline;
	}
	
	.user_id-contact{
		display: block;
		font-size: 11px;
		line-height: 1.3;
		color: #8B8B8B;
		font-weight: 400;
	}
	
	#info-desc,
	.info-desc{
		display: none;
		position: absolute;
		background: #fff;
		border-radius: 5px 5px 5px 0px;
		padding: 20px;
		z-index: 999;
		box-shadow: 0px 0px 5px 1px #ccc;
	}
	.info-desc ul li {
	/*        list-style: disc;*/
	}
	.details__prices-item .icon-info{
		top: 10px;
		right: 15px;
		position: absolute;
	}
	
	.disabled{
		opacity: 0.6;
		pointer-events: none;
	}
	
	.change-pass .copy-btn{
		margin: -3px 45px 0px 0px;
	}
	
	.choice-user-filtered .dropdown__list{
		max-height: 237px;
		overflow-x: hidden;
	}
	
	.choice-user-filtered .search-select{
		padding: 10px 0px 10px 20px;
	}
	
	.choice-user-filtered .dropdown__button{
		width: 160px;
		border: none;
		background: none;
	}
	
	.account-more .details__options-box{
		width: 380px;
	}
	
	.delivery_cahnge{
		margin-top: 20px;
	}
	
	.account-more .delivery_service_platform {
		margin-right: 66px;
	}
	
	#alerts{
		right: 0;
		bottom: 10%;
		position: fixed;
		transition: 0.5s;
	}
	
	#alerts .alert:not(.visible){
		display: none;
	}
	
	#alerts .alert{
		padding: 20px;
		margin: 20px;
		background: #fff;
		border-radius: 3px;
		position: relative;
		transition: 0.5s;
		box-shadow: 0px 0px 2px 2px #ccc;
	}
	
	#alerts .alert .close:after{
		top: 0;
		right: 6px;
		content: '\2715';
		cursor: pointer;
		position: absolute;
	}

	/* тост "недостаточно баланса" перед покупкой лейбла — см. app.js checkBalanceBeforeBuy() */
	#alerts .alert--balance .alert-text{
		padding-right: 10px;
		line-height: 1.5;
	}

	#alerts .alert--balance .alert-text strong{
		display: block;
		color: #FD6A4A;
	}
	
	body .tickets__send-head .tickets__send-ticket {
		min-width: 540px;
		word-break: break-all;
		overflow: hidden;
		min-height: 35px;
		height: auto;
		white-space: break-spaces;
	}
	
	.error a,
	.tranzaction a{
		color: #4d4afd;
	}
	
	body .tickets__inner{
		position: relative;
	}
	
	body .tickets__content.tickets-page__new{
		position: absolute;
		width: 100%;
		top: 58px;
		left: 219px;
	}
	
	
	.modals__sender-receiver .modal-content__middle-item .label-track{
		width: 200px;
		display: inline-block;
	}
	
	.choose-template {
		margin: 0px 0px 20px 0px;
	}
	
	.pl0,
	button span.pl0{
		padding-left: 0px;
	}
	
	.account__contact-input.nick{
		width: auto;
	}
	
	.mt10{
		margin-top: 10px;
	}
	
	.margin-auto{
		margin: auto;
	}
	
	.fs14pt{
		font-size: 14pt !important;
	}
	
	/* templates */
		
		.templates__item{
			position: relative;
		}
		
		.create-tpl{
			right: 0px;
			position: absolute;
			border: solid 1px #cfd0d3;
			padding: 5px 9px;
			border-radius: 5px;
			background: #4d4afd;
			color: #fff;
		}
		
	/* templates end */
	
	/* attachment alider */
		
		.attachment{
			cursor: pointer;
		}
	
	/* attachment slider and */
	
	.tickets__history-list--more .ticket{
		margin: 0px 0px 15px 0px;
	}
	
	a{
		cursor: pointer;
	}
	
	.label-type,
	.label-weight{
		min-width: 50px;
	}
	
	.label-platform{
		min-width: 100px;
	}
	
	.info-alert-box{
		margin: auto;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		gap: 4px 18px;
		text-align: center;
		border: solid 1px #B0B0B0;
		background: #fffddb;
		/* padding-top: 10px; */
		position: relative;
		top: -25px;
		width: 98%;
		border-radius: 3px;
		padding: 6px 14px;
		box-sizing: border-box;
	}
	.info-alert-box + .info-alert-box{
		margin-top: 8px;
	}
	.info-alert-text{
		flex: 1 1 auto;
	}
	.info-alert-text p{
		margin: 0;
	}
	.info-alert-dismiss,
	.info-alert-dismiss-onetime{
		flex-shrink: 0;
		cursor: pointer;
		font-size: 12px;
		font-weight: 600;
		color: #8a8a8a;
		text-decoration: underline;
		text-underline-offset: 2px;
		white-space: nowrap;
		transition: color .15s ease;
	}
	.info-alert-dismiss:hover,
	.info-alert-dismiss-onetime:hover{
		color: #17181C;
	}
	
	.purchases-filters .search-select{
		width: 100%;
		height: 30px;
		text-align: center;
	}
	
	.li-search{
		height: 50px;
		border-bottom: 1px solid #E7EBEE;
	}
	
	.li-search input{
		width: 100%;
		height: 100%;
		padding: 0 10px;
		text-align: center;
	}
	
	ul.choose-tpl{
		position: absolute;
		z-index: 1;
		background: #fff;
		width: 482px;
		box-shadow: 0 2px 6px rgba(0,0,0,.3);
	}
	
	ul.choose-tpl li{
		height: 31px;
		font-size: 13px;
		font-family: Arial,sans-serif;
	}
	
	ul.choose-tpl li:hover{
		cursor: default;
		background: #fafafa;
	}
	
	ul.choose-tpl li span:before{
		content: "";
		width: 15px;
		height: 20px;
		margin-right: 7px;
		margin-left: -20px;
		display: inline-block;
		vertical-align: top;
		background-image: url(https://maps.gstatic.com/mapfiles/api-3/images/autocomplete-icons.png);
		background-position: 0px 120px;
		background-size: 34px;
	}
	
	#receiver-form .details__options-box.form__input-box--cstm .form__input-box.form__input-box--cstm{
		width: 100%;
	}
	
/* mod end */

.user__inner .user__ceckboxes{
	position: relative;
}

.user__ceckboxes.box-right{
	left: 200px;
	position: absolute;
}

.relative{
	position: relative;
}

.shipment-activity:after{
	content: "";
	top: 18px;
	left: -10px;
	width: 15px;
	height: 20px;
	position: absolute;
	background-image: url(https://maps.gstatic.com/mapfiles/api-3/images/autocomplete-icons.png);
}

.black-font,
.ship-status-new,
.ship-status-not_yet_shipped{
	color: #000;
}

.black-blue,
.ship-status-transit{
	color: #4d4afd;
}

.black-green,
.ship-status-delivered{
	color: #00be35;
}

.ship-status-canceled,
.ship-status-compensated{
	color: #ccc;
}
.ship-status-processing {
  	color: #d56400;
}
/* signIn new Start */

.page-registration-and-login{
	height: 100%;
	background: url(../images/sign-bg.svg) no-repeat;
	background-size: cover;
	background-attachment: fixed;
}

.page-registration-and-login .logo{
	left: 60px;
	top: 30px;
	position: absolute;
}

.page-registration-and-login .reg-and-log__inner{
	left: 60px;
	top: 500px;
	z-index: 10;
	position: absolute;
}

.page-registration-and-login .site-title{
	top: 130px;
	left: 60px;
	position: absolute;
}

.main-auth{
	width: 1200px;
	height: 100%;
	margin: auto;
	position: relative;
}

.cheap-shipping{
	display: block;
}

.automated-service{
	margin-top: 20px;
}

.site-title-label{
	width: 274px;
	height: 44px;
	top: 324px;
	left: 60px;
	gap: 0px;
	font-size: 32px;
	text-align: left;
	font-weight: 400;
	line-height: 43.65px;
	margin: -30px 0px 0px 0px;
	font-family: nunito, sans-serif;
}

/*
 * Раньше здесь были два разных изображения (монитор + ноутбук),
 * позиционированные отдельными абсолютными блоками — из-за этого они
 * догружались и появлялись на экране не одновременно. Теперь это одна
 * склеенная картинка (см. dev-заметку в assets/images/), поэтому один
 * блок вместо двух.
 */
.site-monitors{
	z-index: 9;
	position: absolute;
	top: 92px;
	left: 250px;
	width: 1191px;
	height: 804px;
}
.site-monitors__img{
	display: block;
	width: 100%;
	height: 100%;
}

button[name="signIn"].active,
button[name="signUp"].active{
	background: rgba(0, 0, 0, 1);
}

#signIn{
	height: 150px;
}

.reg-and-log__btns{
	bottom: 0px;
	position: absolute;
}

/* signIn new End */

/*
 * Редизайн карточки логин/регистрация (tpl/auth.php). Используем отдельный
 * класс .auth-card поверх старых #signIn/.reg-and-log__btns, потому что те же
 * id/класс используются в tpl/signup.php (инвайт-флоу) — его не трогаем.
 */
#signIn.auth-card{
	width: 100%;
	max-width: 372px;
	height: auto;
	background: #FFF;
	border-radius: 20px;
	box-shadow: 0 14px 40px rgba(20, 20, 20, 0.08);
	padding: 28px 32px 30px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 15px;
}
/*
 * Тот же #signIn/.reg-and-log__inner используется и в tpl/signup.php
 * (инвайт-флоу с абсолютно другой вёрсткой) — поднимаем и центрируем
 * именно карточку auth.php через :has(), не трогая signup.php. Только
 * для desktop-ширин: на мобильном actions ниже (@media max-width:800px)
 * должны сохранять свои left/max-width/width без нашего вмешательства.
 */
@media all and (min-width: 801px){
	.page-registration-and-login .reg-and-log__inner:has(.auth-card){
		top: 300px;
		max-width: 372px;
	}
}
.auth-card__header{
	text-align: center;
}
.auth-card__title{
	margin: 0 0 4px;
	color: #000;
	font-size: 20px;
	font-weight: 800;
}
.auth-card__subtitle{
	margin: 0;
	color: #8A8F98;
	font-size: 12px;
	font-weight: 400;
}
.auth-card__divider{
	width: 100%;
	display: flex;
	align-items: center;
	gap: 9px;
}
.auth-card__divider-line{
	flex: 1 1 auto;
	height: 1px;
	background: #ECECEC;
}
.auth-card__divider-icon{
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 8px;
	background: #ECEBFF;
	color: #4D4AFD;
	display: flex;
	align-items: center;
	justify-content: center;
}
.auth-card__divider-icon svg{
	width: 12px;
	height: 12px;
}
.auth-card .auth-card__input-box{
	width: 100%;
	height: 42px;
	border-radius: 10px;
	border: 1px solid #E7EBEE;
	background: #FFF;
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 0 14px;
	position: relative;
	overflow: visible;
}
.auth-card__input-icon{
	flex: none;
	display: flex;
	color: #8A8F98;
}
.auth-card__input-icon svg{
	width: 12px;
	height: 12px;
}
.auth-card__input.form__input{
	flex: 1 1 auto;
	width: auto;
	height: 100%;
	padding: 11px 0 0;
	border: 0;
	background: transparent;
	font-size: 13px;
}
.auth-card__label.form__label{
	left: 34px;
}
.auth-card__eye-toggle{
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 14px;
	height: 14px;
	color: #B0B0B0;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}
.auth-card__eye-toggle svg{
	width: 11px;
	height: 11px;
}
.auth-card__eye-toggle.is-visible{
	color: #4D4AFD;
}
.auth-card .error{
	width: 100%;
	text-align: center;
}
.auth-card .reg-and-log__btns{
	position: static;
	width: 100%;
	display: flex;
	gap: 10px;
}
.auth-card .reg-and-log__btns .button{
	flex: 1 1 0;
	width: auto;
	min-height: 38px;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 700;
}

/*
 * Редизайн модалки "Your Password" после регистрации (tpl/footer.php,
 * modal-password-2). Отдельный класс .modals__password--v2, чтобы не задеть
 * такой же .modals__password в tpl/admin/footer.php (общий style.css).
 */
.modals__password--v2{
	width: 100%;
	max-width: 440px;
	min-height: auto;
	padding: 40px 36px 36px;
	border-radius: 24px;
	box-shadow: 0 20px 60px rgba(20, 20, 20, 0.12);
}
.modals__password--v2 .modal-content{
	align-items: center;
	color: #000;
	font-size: 14px;
	font-weight: 400;
}
.auth-pass__icon{
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: #ECEBFF;
	color: #4D4AFD;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 18px;
}
.auth-pass__icon svg{
	width: 26px;
	height: 26px;
}
.auth-pass__title{
	margin: 0 0 6px;
	font-size: 22px;
	font-weight: 800;
}
.auth-pass__subtitle{
	margin: 0 0 24px;
	color: #8A8F98;
	font-size: 14px;
	font-weight: 400;
}
.modals__password--v2 .auth-pass__box.copy-box{
	width: 100%;
	gap: 12px;
	padding: 16px 20px;
	border-radius: 14px;
	border: 1px solid #ECECEC;
	background: #FAFAFB;
	margin-bottom: 20px;
}
.modals__password--v2 .auth-pass__value.copy-input{
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0.01em;
	text-align: left;
	width: auto;
	min-width: 0;
	word-break: break-all;
}
.auth-pass__copy-btn{
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	color: #4D4AFD;
}
.auth-pass__box.copied .auth-pass__copy-btn{
	color: #22A366;
}
.auth-pass__important{
	width: 100%;
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 16px 18px;
	border-radius: 14px;
	background: #F5F5FA;
	margin-bottom: 22px;
	text-align: left;
}
.auth-pass__important-icon{
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: #ECEBFF;
	color: #4D4AFD;
	display: flex;
	align-items: center;
	justify-content: center;
}
.auth-pass__important-icon svg{
	width: 17px;
	height: 17px;
}
.auth-pass__important-text{
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.auth-pass__important-text b{
	font-size: 14px;
	font-weight: 700;
}
.auth-pass__important-text span{
	color: #6B7280;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.4;
}
.auth-pass__check{
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 22px;
	cursor: pointer;
	user-select: none;
}
.auth-pass__check input{
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}
.auth-pass__check-circle{
	flex: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 2px solid #D9D9D9;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color 0.15s ease;
}
.auth-pass__check-circle::after{
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #22A366;
	transform: scale(0);
	transition: transform 0.15s ease;
}
.auth-pass__check input:checked ~ .auth-pass__check-circle{
	border-color: #22A366;
}
.auth-pass__check input:checked ~ .auth-pass__check-circle::after{
	transform: scale(1);
}
.auth-pass__check-label{
	font-size: 14px;
	font-weight: 500;
}
.modals__password--v2 .auth-pass__ok.btn{
	width: 100%;
	height: 54px;
	border-radius: 14px;
	background: #4D4AFD;
	color: #FFF;
	font-size: 15px;
	font-weight: 700;
	border: 0;
	cursor: pointer;
	transition: background 0.15s ease;
}
.modals__password--v2 .auth-pass__ok.btn:hover:not(:disabled){
	background: #3F3CF0;
}
.modals__password--v2 .auth-pass__ok.btn:disabled{
	background: #D8D7FE;
	color: #FFF;
	border: 0;
	cursor: not-allowed;
	pointer-events: none;
}

@media all and (max-width: 800px){
	#signIn.auth-card{
		max-width: 100%;
		padding: 32px 24px 28px;
	}
}

.tranzactions table{
	height: 400px;
	overflow-y: auto;
	display: block;
	overflow-x: hidden;
}

/* rules modal start */

	.rules-modal{
		width: 560px;
		max-width: 90vw;
		max-height: 85vh;
		background: #fff;
		border-radius: 16px;
		padding: 32px;
		position: relative;
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	.rules-modal__close{
		position: absolute;
		top: 20px;
		right: 20px;
		width: 32px;
		height: 32px;
		border-radius: 50%;
		border: none;
		background: #F5F5F7;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		color: #55555F;
		padding: 0;
		z-index: 1;
	}
	.rules-modal__close:hover{
		background: #ECECF5;
	}
	.modal-rules.modal--locked .rules-modal__close{
		display: none;
	}

	.rules-modal__header{
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		padding-right: 36px;
	}
	.rules-modal__title{
		font-size: 22px;
		font-weight: 700;
		color: #17181C;
		margin: 0;
	}
	.rules-modal__lang{
		flex-shrink: 0;
		display: flex;
		gap: 4px;
		background: #F5F5F7;
		border-radius: 10px;
		padding: 3px;
	}
	.rules-modal__lang-btn{
		border: none;
		background: transparent;
		padding: 6px 14px;
		border-radius: 8px;
		font-size: 13px;
		font-weight: 700;
		color: #8A8A99;
		cursor: pointer;
		transition: background 0.15s ease, color 0.15s ease;
	}
	.rules-modal__lang-btn.active{
		background: #4D4AFD;
		color: #fff;
	}

	.rules-modal__body{
		overflow-y: auto;
		max-height: 50vh;
		padding-right: 6px;
	}
	.rules-modal__text{
		display: none;
		font-size: 14px;
		line-height: 1.6;
		color: #37373F;
	}
	.rules-modal__text.active{
		display: block;
	}
	.rules-modal__text p{
		margin: 0 0 14px;
	}
	.rules-modal__text p:last-child{
		margin-bottom: 0;
	}
	.rules-modal__text h1,
	.rules-modal__text h2,
	.rules-modal__text h3{
		font-size: 16px;
		margin: 18px 0 8px;
		color: #17181C;
	}
	.rules-modal__text h1:first-child,
	.rules-modal__text h2:first-child,
	.rules-modal__text h3:first-child{
		margin-top: 0;
	}
	.rules-modal__text ul{
		margin: 0 0 14px;
		padding-left: 20px;
		list-style: disc;
	}
	.rules-modal__text li{
		margin: 0 0 6px;
	}

	.rules-modal__footer{
		flex-shrink: 0;
		border-top: 1px solid #EEF0F3;
		padding-top: 18px;
	}
	.rules-modal__confirm-row{
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		flex-wrap: wrap;
	}
	.rules-modal__check{
		display: flex;
		align-items: center;
		gap: 10px;
		cursor: pointer;
		user-select: none;
	}
	.rules-modal__check input{
		position: absolute;
		width: 1px;
		height: 1px;
		opacity: 0;
		pointer-events: none;
	}
	.rules-modal__check-circle{
		flex: none;
		width: 20px;
		height: 20px;
		border-radius: 50%;
		border: 2px solid #D9D9D9;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.rules-modal__check-circle::after{
		content: "";
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background: #4D4AFD;
		transform: scale(0);
		transition: transform 0.15s ease;
	}
	.rules-modal__check input:checked ~ .rules-modal__check-circle{
		border-color: #4D4AFD;
	}
	.rules-modal__check input:checked ~ .rules-modal__check-circle::after{
		transform: scale(1);
	}
	.rules-modal__check-label{
		font-size: 14px;
		font-weight: 500;
		color: #17181C;
	}

	.rules-modal__confirm-btn{
		flex: none;
		height: 48px;
		padding: 0 28px;
		border-radius: 12px;
		background: #4D4AFD;
		color: #FFF;
		font-size: 14px;
		font-weight: 700;
		font-family: inherit;
		border: 0;
		cursor: pointer;
	}
	.rules-modal__confirm-btn:hover:not(:disabled){
		background: #3F3CF0;
	}
	.rules-modal__confirm-btn:disabled{
		background: #D8D7FE;
		cursor: not-allowed;
	}

	.rules-modal__agreed{
		font-size: 13px;
		font-weight: 600;
		color: #55555F;
		text-align: center;
	}

/* rules modal end */

.label-api {
    background: #eee;
    display: inline-block;
    width: 50px;
    text-align: center;
    border-radius: 5px;
    color: #555;
}
.my-balance {
    background: #eee;
    display: inline-block;
    text-align: center;
    border-radius: 5px;
    color: #555;
    padding: 3px;
    font-size: 12px;
}
.service__table.service.users th, .service__table.service.users td, .service__table.users th:nth-child(1), .service__table.users td:nth-child(1) {
    min-width: 100px;
    width: 100px;
    margin: 100px;
}
.ajax-loader {
	display: none;
	text-align: center;
}

ul.descr {
	margin: 10px;
}
ul.descr a {
	color: #4D4AFD;
	text-decoration: underline;
}
ul.descr a:hover {
	text-decoration: none;
}

.settings-menu {
	position: relative;
}
.settings-menu__btn {
	justify-content: center;
}
.settings-menu__btn svg {
	width: 18px;
	height: 18px;
}
.settings-menu__list {
	top: calc(100% + 4px);
	left: auto;
	right: 0;
	width: max-content;
	min-width: 180px;
	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
	z-index: 2;
}
.settings-menu__list .dropdown__list-item {
	height: auto;
	padding: 10px 16px;
	white-space: nowrap;
}
.user__table th.td-user-balance, .user__table td.td-user-balance {
    max-width: 135px;
    width: 135px;
}
.user__table td.td-user-balance .input-price--box {
    float: left;
}

.modals__user-settings, .modals__user-stat {
    max-width: 800px;
    width: 100%;
    overflow-y: none;
}
.modals__user-settings .modal-content, .modals__user-stat .modal-content {
    padding: 20px;
    margin: 20px 15px;
    background-color: #F0F3F9;
}

.modals__user-stat .modal-content .container, .modals__user-settings .modal-content .container {
    max-width: 100%;
    margin: 0;
    padding: 0;
}
.modals__user-settings .modal-content__btns {
    display: flex;
    justify-content: space-between;
    align-items: start;
}
.modals__user-settings .input-number {
    margin: 10px 0;
    padding: 10px;
}


@media (min-width: 1700px) {
  .page-api .main {
    width: 100%;
  }
}
@media (min-width: 1440px) {
  .container {
    max-width: 1140px;
    padding: 0 60px;
  }
}
@media (max-width: 991px) {
  .wrapper {
    display: block;
  }
  .page-api .main {
    width: 100%;
  }
  .container {
    padding: 0 0 0 5%;
    max-width: 95%;
    margin: 0;
  }
  .container:has(.purchases__items-box) {
    padding-left: 15px;
  }
  .page-support-user .purchases__items-box {
    margin-left: 0;
  }
  .page-support-user .purchases__items-wrapper {
    padding: 0;
  }
  .sidebar {
    position: fixed;
    transform: translateX(-100%);
    border-right: 1px solid #E7EBEE;
    padding: 20px;
    z-index: 10;
  }
  .sidebar__btn-open {
    display: block;
  }
  .sidebar__inner {
    height: calc(100vh - 40px);
    padding: 0;
    margin: 0;
  }
  .sidebar__inner::-webkit-scrollbar {
    display: none;
  }
  .api__item-wrapper {
    width: calc(100vw - 30px);
  }
  .purchases__filters {
    grid-template-columns: repeat(4, 1fr);
  }
  .purchases__filters .btn {
    grid-column: 4/5;
    grid-row: 1/2;
  }
  .purchases__items-box {
    margin-left: 15px;
  }
  .purchases .form__input-box--search {
    width: calc(100% - 15px);
    margin-left: 15px;
  }
  .tranzactions table {
    overflow-y: scroll;
    overflow-x: scroll;
  }
}
@media (max-width: 768px) {
  .page-support-user .purchases__items-wrapper {
    padding-left: 15px;
  }
  .api__copy {
    flex-direction: column;
    align-items: flex-start;
  }
  .news__item {
    padding: 15px;
  }
  .sender-receiver__inner {
    flex-direction: column;
  }
  .custom-line-item__item {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .modals__sender-receiver,
  .modals__sender-receiver--rate {
    margin: 0 15px;
  }
  .modals__sender-receiver .modal-content__middle {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .purchases__items-wrapper {
    width: calc(100vw - 15px);
    padding: 0 15px;
    margin: 0 -15px;
    overflow-x: scroll;
  }
  .purchases__item.purchases__items-head,
  .purchases__item {
    width: fit-content;
  }
  .purchases .form__input-box--search {
    width: 100%;
    margin: 0;
  }
  .purchases__bars--circle {
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
  }
  .tickets.page-tickets-request-2 .tickets__content {
    display: flex;
    flex-direction: column;
  }
  .account__top {
    flex-direction: column;
    gap: 20px;
  }
  .account__bottom {
    display: flex;
    flex-direction: column;
    gap: 30px;
  }
  .account__item--exit {
    order: 10;
  }
  .account__toggles {
    flex-direction: column;
    gap: 20px;
  }
  .user__btns {
    flex-wrap: wrap;
  }
  .user__btns .btn {
    margin: 0;
  }
  .user__filtered-items {
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-evenly;
  }
}
@media (max-width: 540px) {
  .modals__templates .form__input-box--cstm:nth-child(1),
  .modals__templates .form__input-box--cstm:nth-child(2),
  .sender-receiver .form__input-box--cstm:nth-child(1),
  .sender-receiver .form__input-box--cstm:nth-child(2) {
    width: 100%;
  }
  .modals__templates .form__input-boxes,
  .sender-receiver__item .form__input-boxes {
    flex-direction: column;
  }
  .details__img {
    max-width: 100%;
  }
  .modals__sender-receiver .modal-content__top {
    display: flex;
    flex-direction: column;
    gap: 30px;
  }
  .modals__sender-receiver .modal-content .icon-arrow-green {
    rotate: 90deg;
  }
  .modals__sender-receiver,
  .modals__sender-receiver--rate {
    padding: 20px;
  }
  .purchases__filters {
    grid-template-columns: repeat(3, 1fr);
  }
  .purchases__filters .btn {
    grid-column: 1/4;
    grid-row: 3/4;
  }
  .purchases__bars-items {
    flex-direction: column;
  }
  .purchases__bars--line .purchases__bars-items {
    display: flex;
    flex-direction: column;
    padding: 15px;
  }
  .balance__content {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .balance__elem-box {
    text-align: center;
  }
  .balance__elem-box span {
    padding: 0;
  }
  .history__search-box {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .tickets__head {
    flex-direction: column;
    align-items: flex-start;
  }
  .tickets__send-head {
    flex-direction: column;
    align-items: flex-start;
  }
  .tickets__history {
    max-width: 100%;
  }
  .tickets__send-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .tickets__send-bottom-btn {
    width: 100%;
  }
  .tickets__send-chat--box {
    padding: 15px;
  }
  .tickets__send-message {
    padding: 10px 20px 20px;
  }
  .tickets__form {
    padding: 15px;
  }
  .tickets__search {
    gap: 20px;
  }
  .account__top .account__item {
    padding: 20px;
  }
  .account__bottom {
    padding: 20px 0;
  }
  .account__bottom .account__item {
    padding: 0 20px;
  }
  .modals__price-show .modal-content {
    padding: 20px;
  }
  .admin-support__compensations {
    display: flex;
    flex-direction: column;
  }
  .admin-wallet__checkboxes-box {
    display: flex;
    gap: 0;
    margin-top: 30px;
  }
  .modals__templates .modal-content {
    padding: 20px;
  }
  .users-tab, .user__tab-btn {
    font-size: 12px;
  }

}
@media (max-width: 420px) {
  .tickets__form-title {
    font-size: 20px;
  }
  .sidebar {
    max-width: 260px;
  }
  .api__copy .input {
    max-width: 185px;
    width: 185px;
    min-width: 185px;
  }
  .package-size__steppers {
    flex-wrap: wrap;
  }
  .package-size__stepper-group {
    flex: 1 1 40%;
  }
  .service-selector {
    flex-wrap: wrap;
  }
  .service-selector .dropdown__list-item {
    flex: 1 1 45%;
  }
  .details__prices {
    justify-content: center;
  }
  .purchases__filters {
    grid-template-columns: repeat(2, 1fr);
  }
  .purchases__filters .btn {
    grid-column: 1/3;
    grid-row: 4/5;
  }
  .tickets__send-chat-bottom {
    flex-direction: column;
  }
  .add-file__box {
    width: 100%;
  }
  .tickets__send-chat-bottom .btn,
  .user__btns .btn--muted,
  .user__btns .btn,
  .admin-support .tech-support .btn {
    width: 100%;
  }
  .admin-support .tech-support__input {
    width: 100%;
  }
  .api__copy .copy-box {
    padding: 8px 15px;
    margin: 0 -15px;
  }
}

/* mod */

@media all and (max-width: 800px) {
  .page-registration-and-login .site-title {
    left: 5%;
    max-width: 600px;
  }
  .page-registration-and-login .site-title img {
    width: 90%;
  }
  .main-auth {
    width: 100%;
  }
  .automated-service {
    width: 70% !important;
  }
  .site-monitors {
    width: 100%;
    max-width: 480px;
    position: absolute;
    height: 400px;
    top: 200px;
    left: 0;
    margin: 0 auto;
  }
  .site-monitors__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
  }
  .page-registration-and-login .reg-and-log__inner {
    left: 5%;
    max-width: 90%;
    width: 85%;
  }
  .api__table th, .api__table td {
    white-space: normal;
  }
  .page-purchases .history__table th:nth-child(7), .page-purchases .history__table td:nth-child(7) {
    width: 140px;
    display: flex;
  }
  .page-purchases .history__table .btn, .page-purchases .history__table .button {
    margin: 0 5px;
  }
}
@media all and (min-width: 480px) and (max-width: 800px) {
  .site-monitors {
    margin: 0 0 0 -240px;
    left: 50%;
  }
}
a.wait {display: none}

/* ==========================================================================
   Services page
   ========================================================================== */
.services-page__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.services-page__row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 24px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}
.services-page__carrier {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1 1 auto;
  min-width: 0;
}
.services-page__carrier-icon {
  flex-shrink: 0;
  width: 48px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px;
  border-radius: 10px;
  border: 1px solid #E7EBEE;
  background: #FFF;
}
.services-page__carrier-icon img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.services-page__carrier-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.services-page__carrier-title {
  font-size: 15px;
  font-weight: 700;
  color: #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.services-page__carrier-subtitle {
  font-size: 12px;
  font-weight: 400;
  color: #B0B0B0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.services-page__days {
  flex-shrink: 0;
  width: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.services-page__days-value {
  font-size: 14px;
  font-weight: 600;
  color: #000;
}
.services-page__days-label {
  font-size: 12px;
  font-weight: 400;
  color: #B0B0B0;
}
.services-page__price {
  flex-shrink: 0;
  width: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.services-page__price-value {
  font-size: 16px;
  font-weight: 700;
  color: #000;
}
.services-page__price-value--dash {
  color: #B0B0B0;
}
.services-page__price-note {
  font-size: 11px;
  color: #B0B0B0;
  white-space: nowrap;
}
.services-page__status {
  flex-shrink: 0;
  width: 120px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.services-page__status-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #000;
}
.services-page__status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00BE35;
  flex-shrink: 0;
}
.services-page__status-creation {
  font-size: 12px;
  font-weight: 400;
  color: #B0B0B0;
  white-space: nowrap;
}
.services-page__empty {
  padding: 40px 0;
  text-align: center;
  color: #B0B0B0;
  font-size: 15px;
}
@media all and (max-width: 900px) {
  .services-page__row {
    flex-wrap: wrap;
    row-gap: 10px;
  }
  .services-page__carrier {
    flex: 1 1 100%;
  }
}