body {
 font-family: sans-serif;
}
.warning{
 background: #ff00005c;
 margin-bottom: 60px;
 border-radius: 20px;
 font-size: 16px;
 color: #b02a37;
}
.alert-success {
 margin-bottom: 50px;
}
.btn-outline-success {
 text-decoration: none;
}
.link-login {
 color: rgb(0, 0, 0);
 font-size: 16px;
 font-weight: 400;
 line-height: 19px;
}
.bg-color {
 min-height: 100vh;
 background: linear-gradient(to right, #ebefff 60%, #afb3ff 60% 40%);
}
.bg-info {
 display: flex;
 flex-direction: column;
 align-items: flex-end;
 background: transparent !important;
}
.bg-form {
 padding: 0 30px;
}
.form {
 min-height: 100vh;
 width: 50%;
}
.form-select {
 width: 100%;
 border: 1px solid #444;
 border-radius: 5px;
 padding: 10px;
 font-size: 20px;
 background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktY2hldnJvbi1kb3duIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xLjY0NiA0LjY0NmEuNS41IDAgMDEuNzA4IDBMOCAxMC4yOTNsNS42NDYtNS42NDdhLjUuNSAwIDAxLjcwOC43MDhsLTYgNmEuNS41IDAgMDEtLjcwOCAwbC02LTZhLjUuNSAwIDAxMC0uNzA4eiIvPjwvc3ZnPg==);
 background-size: 30px;
 background-repeat: no-repeat;
 background-position: calc(100% - 10px) 50%;
 cursor: pointer;
}
.header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 30px;
}
.header-step {
 font-weight: 700;
 font-size: 20px;
 letter-spacing: -0.4px;
 position: relative;
 text-transform: uppercase;
 padding: 0 8px;
}
.header-step::before {
 content: "";
 position: absolute;
 display: block;
 width: 100%;
 height: 50px;
 top: 50%;
 left: 50%;
 -webkit-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
 border-radius: 50%;
 border: 1px solid #000;
}
.steps {
 display: flex;
 align-items: center;
 justify-content: space-between;
 flex-wrap: wrap;
 padding-left: 30px;
}
.step-item {
 display: flex;
 align-items: center;
 margin-right: 10px;
 font-size: 11px;
 text-transform: uppercase;
 color: #c7c7c7;
}
.step-item.active {
 color: #000;
}
.step-count {
 padding: 4px 7px 4px;
 margin-right: 5px;
 border-radius: 50%;
 position: relative;
}
.step-count:before {
 border: 1px solid #000;
}
.step-item.active .step-count:before {
 border: 1px solid #000;
}
.step-count:before {
 content: "";
 display: block;
 position: absolute;
 top: calc(50% - 1px);
 left: 50%;
 -webkit-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
 border: 1px solid #c7c7c7;
 border-radius: 50%;
 width: 22px;
 height: 22px;
}
.counter__btn {
 height: 50px;
 width: 50px;
 border-radius: 50%;
 border: 1px solid #000;
 background-color: #fff;
 opacity: 1;
 transition: 0.3s;
 color: #000;
 font-size: 40px;
 position: relative;
 cursor: pointer;
}
.counter__btn:hover {
 border: 1px solid blue;
}
.counter__btn:before {
 width: 24px;
 height: 1px;
}
.counter__btn.increase:after {
 width: 1px;
 height: 24px;
}
.counter__btn:after,
.counter__btn:before {
 content: "";
 background-color: #000;
 position: absolute;
 top: 50%;
 left: 50%;
 -webkit-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
 transition: 0.3s;
}
.counter {
 display: flex;
 align-items: center;
 margin-top: 40px;
 margin-bottom: 50px;
}
.counter > div {
 display: flex;
 margin: 0 10px;
 font-size: 20px;
 width: max-content;
 text-align: center;
}
.booking-recreation {
 font-size: 12px;
}
.booking-recreation p {
 border: none;
 padding: 11px 0;
 background: none;
 font-size: 20px;
 cursor: default;
}
#choosing_date,
#choosing_time {
 margin-top: 30px;
}
.bg-booking {
 display: flex;
 padding-top: 100px;
}
.booking-card {
 width: 100%;
 max-width: 450px;
 margin: 33px auto;
}
.booking-card .booking-card-linearBg {
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 background: linear-gradient(
  180deg,
  hsla(0, 0%, 100%, 0),
  rgba(0, 0, 0, 0.686712) 120%
 );
}
.primary-info {
 min-height: 188px;
 background: url(https://booking.silavetra.com/static/media/card-bg.f308eeb4.jpg);
 background-size: cover;
 padding: 17px 30px;
 display: flex;
 justify-content: flex-end;
 flex-direction: column;
 border-radius: 25px 25px 0 0;
 position: relative;
}
.card-hole,
.card-hole:before {
 position: absolute;
 height: 20px;
 background: #1d1d1d;
}
.card-hole:before {
 content: "";
 display: block;
 width: 20px;
 border-radius: 50%;
 top: -10px;
 left: calc(50% - 10px);
}
.card-hole {
 top: 30px;
 left: calc(50% - 42px);
 width: 84px;
 border-radius: 20px;
}
.main-info-label {
 margin-bottom: 6px;
 z-index: 1;
}
.card-label {
 font-size: 0.75rem;
 line-height: 1rem;
 color: #fff;
 opacity: 0.5;
 text-transform: uppercase;
 font-weight: 500;
 letter-spacing: 0.2px;
 margin-bottom: 9px;
}
.card-course {
 margin-bottom: 5px;
 z-index: 1;
}
.card-caption {
 color: #fff;
 font-size: 20px;
 line-height: 23px;
 font-weight: 500;
 letter-spacing: 0.3px;
 text-transform: uppercase;
}
.course-date {
 color: #fff;
 font-size: 0.75rem;
 line-height: 1rem;
 text-transform: uppercase;
 font-weight: 500;
 letter-spacing: 0.1px;
 z-index: 1;
}
.secondary-info {
 background: #000;
 padding: 25px 50px 17px 30px;
}
.difficulty__label {
 margin-bottom: 9px;
}
.difficulty__caption {
 margin-bottom: 9px;
}
.participants-info {
 padding: 22px 50px 17px 30px;
 background: #000;
 position: relative;
}
.price-info {
 padding: 18px 20px 15px 30px;
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
 align-items: center;
 background: #fff;
 border-radius: 0 0 30px 30px;
}
.price-label {
 color: #000;
 font-weight: 700;
 letter-spacing: -0.1px;
 margin-bottom: 10px;
}
.price {
 font-size: 40px;
 line-height: 1;
 font-weight: 700;
}
.form-button.btn.btn-primary {
 display: block;
 margin: 18px auto auto;
 max-width: 470px;
 font-size: 20px;
 cursor: pointer;
 min-width: 260px;
 padding: 17px 10px;
 text-align: center;
 text-transform: uppercase;
 font-weight: 700;
 background-color: #000;
 color: #fff;
 border: none;
 border-radius: 8px;
 transition: 0.3s;
 z-index: 100;
}
@media (max-width: 991px) {
 .bg-booking {
  flex-direction: column-reverse;
  padding-top: 40px;
 }
 .bg-info > img {
  display: none;
 }
 .booking-card {
  display: none;
 }
 .form {
  width: 100%;
 }
 .bg-color {
  background: #ebefff;
 }
 .header {
  padding: 30px 0;
 }
 .header-logo {
  width: 150px;
 }
 .header-logo img {
  width: 100%;
 }
 .header-step {
  font-size: 14px;
  letter-spacing: 0;
 }
 .steps {
  padding: 0;
 }
 .bg-form {
  padding: 0;
 }
}
@media (max-width: 479px) {
 .header-logo {
  width: 110px;
 }
 .header-logo img {
  width: 100%;
 }
 .header-step {
  font-size: 11px;
  letter-spacing: 0;
 }
}

.custom-select {
 position: relative;
 margin-bottom: 50px;
}

.custom-select select {
 display: none; /* скрываем оригинальный элемент SELECT */
}

.select-selected {
 border-radius: 5px;
}

/* стили стрелочки внутри элемента выбора */
.select-selected:after {
 position: absolute;
 content: "";
 top: 14px;
 right: 10px;
 width: 0;
 height: 0;
}

/* стрелочка указывает вверх, когда выпадающий список открыт (активен) */
.select-selected.select-arrow-active:after {
 border-color: transparent transparent #fff transparent;
 top: 7px;
}

/* стили пунктов выбора (опций), включая выбранный пункт */
.select-selected {
 border: 1px solid #444;
 background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktY2hldnJvbi1kb3duIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xLjY0NiA0LjY0NmEuNS41IDAgMDEuNzA4IDBMOCAxMC4yOTNsNS42NDYtNS42NDdhLjUuNSAwIDAxLjcwOC43MDhsLTYgNmEuNS41IDAgMDEtLjcwOCAwbC02LTZhLjUuNSAwIDAxMC0uNzA4eiIvPjwvc3ZnPg==);
}
.select-items div,
.select-selected {
 display: flex;
 width: 100%;
 border-bottom: 1px solid #000;
 padding: 10px;
 font-size: 20px;
 background-size: 30px;
 background-repeat: no-repeat;
 background-position: calc(100% - 10px) 50%;
}

/* стили пунктов выбора (опций) */
.select-items {
 position: absolute;
 top: 100%;
 left: 0;
 right: 0;
 z-index: 99;
 background: #fff;
 border: 1px solid #000;
 border-radius: 5px;
}

/* скрываем пункты выбора, когда выпадающий список закрыт */
.select-hide {
 display: none;
}

.select-items > div:hover,
.same-as-selected {
 background-color: rgba(0, 0, 0, 0.1);
}
.hidden {
 display: none;
}
.custom-select-wrapper {
 position: relative;
 user-select: none;
 margin-top: 40px;
}
.custom-select__2 {
 position: relative;
 display: flex;
 flex-direction: column;
}

.custom-options {
 display: none;
}
.custom-option {
 position: relative;
 display: flex;
 align-items: center;
 justify-content: space-between;
 font-size: 18px;
 font-weight: 400;
 color: #333;
 line-height: 40px;
 cursor: pointer;
 transition: all 0.5s;
}
.custom-option:hover {
 cursor: pointer;
 background-color: none !important;
}
.custom-select-wrapper.open .custom-select__2 .custom-options {
 display: block;
 opacity: 1;
 visibility: visible;
 pointer-events: all;
}
#select-4 .item__element:first-child,
#select-4 .item__element:nth-child(2) {
 border-right: 2px solid #757575;
}
#select-4 .item__element:first-child {
 flex: 0 0 100px;
}
.item__element:first-child {
 margin-right: 5px;
 display: flex;
 align-items: center;
}
.item__element:nth-child(2) {
 flex: 0 0 160px;
 margin-right: 5px;
 display: flex;
 align-items: center;
}
.item__element:nth-child(3) {
 flex: 1 0 80px;
 font-size: 12px;
 line-height: 37px;
 display: flex;
 align-items: center;
}
.item__element {
 color: #1d1d1d;
 border-bottom: none !important;
 padding: 0 !important;
}
.item__places {
 font-size: 26px;
 margin-right: 5px;
}
.item__places-label {
 font-size: 12px;
 max-width: 65px;
 display: inline-block;
 vertical-align: baseline;
 line-height: 12px;
}
.item__event {
 word-wrap: break-word;
 line-height: 15px;
 max-width: calc(100% - 30px);
}
.item__time {
 font-size: 26px;
}
.form-title {
 font-size: 22px;
 margin-top: 30px;
}
.form-subtitle {
 font-size: 19px;
 margin-bottom: 40px;
}
label {
 margin: 0;
 padding: 0;
 position: absolute;
 left: 0;
 top: -15px;
 transform: translateY(-50%);
 color: rgb(0, 0, 0);
 font-size: 16px;
 font-weight: 400;
 line-height: 19px;
 transition: 0.1s linear;
 margin-bottom: 10px;
}
.form-input-wrap {
 margin-bottom: 42px;
 position: relative;
 background: #fff;
 width: 100%;
 border: 1px solid #444;
 border-radius: 5px;
 padding: 10px;
 font-size: 20px;
 line-height: 25px;
}
.form-input-wrap-error {
 margin-bottom: 40px;
}
input {
 width: 100%;
 height: 100%;
 border: none;
}
input:focus {
 outline: none;
}
.errorWindow {
 display: none;
}

.errorWindow.active,
.infoWindow.active {
 margin: 0;
 padding: 0;
 width: 100%;
 position: absolute;
 bottom: -20px;
 left: 0;
 display: flex;
 color: red;
 font-size: 11px;
}
.infoWindow.active {
 color: #333;
}