/* Vars */
:root {
  --swiper-theme-color: #fff;
}
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, 
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, 
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  background: #fff;
  opacity: 1;
}
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet-active, 
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet-active {
  width: 30px;
  border-radius: 17px;
}


/* Components */
input.line {
  border: none;
  border-bottom: 1px solid;
  width: 100%;
  margin-top: 5px;
  font-size: 16px;
  padding: 0 5px 3px;
}


/* Buttons */
.btn {
  width: 180px;
  /* height: 40px;
  background-color: #3b5bcb;
  border: none;
  color: #fff;
  font-size: 16px;
  border-radius: 5px;
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  text-decoration: none; */
}
@media (max-width:500px;) {
  .btn {
    width: fit-content;
  }
}
.blue .btn {
  width: auto;
  height: auto;
  background-color: unset;
}
/* .btn:hover {
  background-color: #fff;
  border: 2px solid #3b5bcb;
  color: #000;
} */
.blue .btn:hover {
  background-color: #fff;
  border: none;
}
.btn_not_painted {
  width: 180px;
  height: 40px;
  background-color: #fff;
  border: 2px solid #3b5bcb;
  font-size: 16px;
  border-radius: 5px;
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  text-decoration: none;
  color: #000;
}
.btn_not_painted:hover {
  background-color: #3b5bcb;
  color: #fff;
}
.btn-payment {
  width: 115px;
  height: 40px;
  background-color: #ff7373;
  border: none;
  color: #fff;
  font-size: 16px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.btn-payment:hover {
  background-color: #fff;
  color: #000;
  border: 2px solid #ff7373;
}

.navigation-down .btn {
  width: 100%;
  max-width: 187px;
  height: 43px;
  border-radius: 10px;
  background: #fff;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  margin: 0;
}
.navigation-down .btn:hover {
  background: #fff;
}
.navigation-down .btn.btn-down {
  max-width: 100%;
  height: 68px;
  border-radius: 20px 20px 0 0;
  color: #4795DD;
  font-size: 24px;
}

.navigation-down {
  width: 100%;
  margin-top: 10px;
}
/* ========== */

.h-line {
  min-width: 160px;
  height: 1px;
  background-color: #000;
}
/* для элемента input c type="checkbox" */
.custom-checkbox,
.custom-checkbox-btn {
  position: absolute;
  z-index: -1;
  opacity: 0;
}
/* для элемента label, связанного с .custom-checkbox */
.custom-checkbox + label,
.custom-checkbox-btn + label {
  display: inline-flex;
  align-items: center;
  user-select: none;
}
/* создание в label псевдоэлемента before со следующими стилями */
.custom-checkbox + label::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  flex-grow: 0;
  border: 1px solid #adb5bd;
  border-radius: 0.25em;
  margin-right: 0.5em;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 50% 50%;
  background-color: #fff;
}
/* стили при наведении курсора на checkbox */
.custom-checkbox:not(:disabled):not(:checked) + label:hover::before {
  border-color: #b3d7ff;
}
/* стили для активного чекбокса (при нажатии на него) */
.custom-checkbox:not(:disabled):active + label::before {
  background-color: #b3d7ff;
  border-color: #b3d7ff;
}
/* стили для чекбокса, находящегося в фокусе */
.custom-checkbox:focus + label::before {
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
/* стили для чекбокса, находящегося в фокусе и не находящегося в состоянии checked */
.custom-checkbox:focus:not(:checked) + label::before {
  border-color: #80bdff;
}
/* стили для чекбокса, находящегося в состоянии checked */
.custom-checkbox:checked + label::before {
  border-color: #0b76ef;
  background-color: #0b76ef;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
}
/* стили для чекбокса, находящегося в состоянии disabled */
.custom-checkbox:disabled + label::before {
  background-color: #e9ecef;
}

.custom-checkbox-btn + label {
  width: 60px;
  height: 30px;
  border: 1px solid #3b5bcb;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
/* стили для чекбокса, находящегося в состоянии checked */
.custom-checkbox-btn:checked + label {
  background-color: #3b5bcb;
  color: #fff;
}

/* =============================== */
/* для элемента input c type="radio" */
.custom-radio {
  position: absolute;
  z-index: -1;
  opacity: 0;
}
/* для элемента label связанного с .custom-radio */
.custom-radio + label {
  display: inline-flex;
  align-items: center;
  user-select: none;
  position: relative;
  padding: 2px 5px;
  cursor: pointer;
}
.custom-radio + label span {
  z-index: 3;
  /* color: #000; */
}
/* создание в label псевдоэлемента  before со следующими стилями */
.custom-radio + label::after {
  content: "";
  display: inline-block;
  width: 45px;
  height: 21px;
  flex-shrink: 0;
  flex-grow: 0;
  border: 1px solid #adb5bd;
  border-radius: 5px;
  /* margin-right: 0.5em; */
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 50% 50%;
  position: absolute;
  left: 0;
  z-index: 1;
}
/* стили при наведении курсора на радио */
.custom-radio:not(:disabled):not(:checked) + label:hover::after {
  border-color: #b3d7ff;
}
/* стили для активной радиокнопки (при нажатии на неё) */
.custom-radio:not(:disabled):active + label::after {
  background-color: #b3d7ff;
  border-color: #b3d7ff;
}
/* стили для радиокнопки, находящейся в фокусе */
.custom-radio:focus + label::after {
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
/* стили для радиокнопки, находящейся в фокусе и не находящейся в состоянии checked */
.custom-radio:focus:not(:checked) + label::after {
  border-color: #80bdff;
}
/* стили для радиокнопки, находящейся в состоянии checked */
.custom-radio:checked + label::after {
  border-color: #0b76ef;
  background-color: #0b76ef;
  color: #fff;
}
.custom-radio:checked + label span {
  color: #fff;
}
/* стили для радиокнопки, находящейся в состоянии disabled */
.custom-radio:disabled + label::after {
  background-color: #e9ecef;
}
.custom-radio:disabled + label::after span {
  color: #fff;
}

.wrap-paymet {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 5px 0;
}
.paymet label {
  /* width: 194px; */
  min-height: 76px;
  max-height: 100px;
  background-color: #fff;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-family: var(--font-bold);
  font-weight: bold;
  /* border: none; */
}
.paymet .custom-radio + label {
  padding: 5px 5px;
}
.paymet label::after {
  content: none;
}
.paymet label img {
  object-fit: contain;
  /* max-width: 186px; */
  max-height: 90px;
  border-radius: 7px;
}
.wrap-paymet #card-pay {
  display: none;
}
  /* стили для радиокнопки, находящейся в фокусе */
  .paymet  .custom-radio:focus+label {
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    z-index: 3;
  }
  /* стили для радиокнопки, находящейся в фокусе и не находящейся в состоянии checked */
  .paymet .custom-radio:focus:not(:checked)+label {
    border-color: #80bdff;
    z-index: 3;
  }
  /* стили для радиокнопки, находящейся в состоянии checked */
  .paymet  .custom-radio:checked+label {
    border: 3px solid #0b76ef;
    z-index: 3;
  }
  /* стили для радиокнопки, находящейся в состоянии disabled */
  .paymet  .custom-radio:disabled+label {
    background-color: #e9ecef;
    z-index: 3;
  }


/* Tree */
.tree {
  line-height: normal;
  max-width: 800px;
  width: 100%;
  margin: 0 20px;
}
.tree details {
  display: block;
  position: relative;
}
.tree div {
  position: relative;
  margin-bottom: 10px;
}
.tree .branch {
  margin-left: 30px;
}
.tree .branch.mr-0 {
  margin-left: 0;
}
.tree .branch div {
  padding: 0px 0 5px 25px;
  margin-bottom: 5px;
}
.tree .branch div:last-child {
  padding: 0px 0 0 25px;
}
.tree details div:not(:last-child) {
  /* необязательно */
  /* border-left: 1px solid #3b5bcb; */
  border-left: 2px dashed #fff;
}
.tree details div:before {
  /* необязательно */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1.1em;
  height: 0.5em;
  /* border-bottom: 1px solid #3b5bcb; */
  border-bottom: 2px dashed #fff;
}
.tree details div.no-line:before {
  border: none;
}
.tree details div:last-child:before {
  /* необязательно */
  /* border-left: 1px solid #3b5bcb; */
  border-left: 2px dashed #fff;
}
.tree details div.no-line:last-child:before {
  /* необязательно */
  border-left: none;
}
details > summary {
  cursor: pointer;
  list-style: none;
  position: absolute;
  top: -20px;
  left: -30px;
}
.tree details div {
  margin-bottom: 0;
}
.d1[open] > .l1,
.d2[open] > .l2 {
  color: #eee;
  /* background-color:#333; */
}
.d1 .l1:before,
.d2 .l2:before {
  content: "";
  background-image: url(../images/plus_new.svg);
  background-repeat: no-repeat;
  background-position: center;
  width: 24px;
  height: 16px;
  padding: 0px 12px;
  background-size: 60%;
  /* background-color: #fff; */
}
.d1[open] .l1:before,
.d2[open] .l2:before {
  content: "";
  background-image: url(../images/minus_new.svg);
  background-size: 80%;
  /* background-color: #fff; */
}
.branch .d1[open],
.no-line .d2[open] {
  margin-top: 10px;
}
.branch .d1[open] .l1,
.branch .d2[open] .l2,
.no-line .d2[open] .l2 {
  top: -30px;
}


/* Links */
.back {
  cursor: pointer;
  z-index: 9;
}

/* Wraps */
.wrap-form {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* bg */
.blue {
  background-color: #4795DD;
  color: #fff;
}

/* hidden */
.hidden {
  display: none;
}

/* margin */
.mr-0 {
  margin: 0; 
}

/* Top */