@font-face {
    font-family: 'Manrope'; /* Название шрифта, которое вы будете использовать в CSS */
    src: url('../../assetv2/fonts/Manrope-VariableFont_wght.ttf') format('truetype'); /* Путь к файлу шрифта в формате TTF */
    /* Дополнительные свойства, если необходимо */
}

 span,button,h1,h2,h3,h4,h5,h6,a,small{
	 font-family: 'Manrope'!important;
 }

 /*------scroll bar---------------------*/
 ::-webkit-scrollbar {
   width: 10px;
   height: 10px;
 }
 ::-webkit-scrollbar-button {
   width: 0px;
   height: 0px;
 }
 ::-webkit-scrollbar-thumb {
   background: #525965;
   border: 0px none #ffffff;
   border-radius: 0px;
 }
 ::-webkit-scrollbar-thumb:hover {
   background: #525965;
 }
 ::-webkit-scrollbar-thumb:active {
   background: #525965;
 }
 ::-webkit-scrollbar-track {
   background: transparent;
   border: 0px none #ffffff;
   border-radius: 50px;
 }
 ::-webkit-scrollbar-track:hover {
   background: transparent;
 }
 ::-webkit-scrollbar-track:active {
   background: transparent;
 }
 ::-webkit-scrollbar-corner {
   background: transparent;
 }

/*PC view input-from*/
@media (min-width: 768px) {
  .input-from{
    height:60px;
    border-radius: 11px 0px 0px 11px;
    border-top: 2px solid #F0D454;
    border-bottom: 2px solid #F0D454;
    border-left: 2px solid #F0D454;
    border-right: 0px;
    padding-right: 2px;
    background: var(--bs-input-background);
  }
  .input-from:focus{
    height:60px;
    border:var(--input-finder-border-color);
    box-shadow: none;
    padding-right: 0px;

  }
}
/*Mobile view input-from*/
@media (max-width: 768px) {
  .input-from{
    height:60px;
    border-radius: 11px 11px 0px 0px;
    border-bottom: 0px;
    border-color: transparent;
    background: var(--bs-input-background);
    border:0px;
  }
  .input-from:focus{
    height:60px;
    border:0px;
    box-shadow: none;
    background: rgba(255, 255, 255, 0.05);

  }
}

/*PC view input-to*/
@media (min-width: 768px) {
  .input-to{
    height:60px;
    border-radius: 0px;
    border-top: 2px solid #F0D454;
    border-bottom: 2px solid #F0D454;
    border-left: 0px;
    border-right: 0px;
    padding-left: 10px;
    padding-right: 2px;
    background: var(--bs-input-background);
  }
  .input-to:focus{
    height:60px;
    border:var(--input-finder-border-color);
    box-shadow: none;
    padding-left: 8px;
    padding-right: 0px;
  }
}
/*Mobile view input-to*/
@media (max-width: 768px) {
  .input-to{
    height: 60px;
    border-radius: 0px 0px 11px 11px;
    border: 0px;
    background: var(--bs-input-background);
    border-top: var(--finder-block-line);

  }
  .input-to:focus{
    height:60px;
    border-top: var(--finder-block-line);
    box-shadow: none;
    background: rgba(255, 255, 255, 0.05);

  }
}
/*PC view input-travel-date*/
@media (min-width: 768px) {
  .input-travel-date{
    height:60px;
    border-radius: 0px;
    border-top: 2px solid #F0D454;
    border-bottom: 2px solid #F0D454;
    border-left: var(--bs-input-vertical-border);
    border-right: 0px;
    padding-left: 10px;
    padding-right: 2px;
    background: var(--bs-input-background);
  }
  .input-travel-date:focus{
    height:60px;
    border:var(--input-finder-border-color);
    box-shadow: none;
    padding-left: 9px;
    padding-right: 0px;
    background: var(--bs-input-background);
  }
}
/*Mobile view input-travel-date*/
@media (max-width: 768px) {
  .input-travel-date{
    height: 60px;
    border: 0px;
    border-radius: 11px;
    background: #222125;
    margin-top: 10px;
    margin-bottom: 10px;
    background: var(--bs-input-background);
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
  }
  .input-travel-date:focus{
    height:60px;
    border:0px;
    box-shadow: none;
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
  }
}

/*PC view button-swap*/
@media (min-width: 768px) {
  .button-swap{
    background: var(--bs-button-swap-background);
    text-decoration: none;
    border-top: 2px solid #F0D454;
    border-bottom: 2px solid #F0D454;
    height: 60px;
    border-left: var(--bs-input-vertical-border);
    border-right: var(--bs-input-vertical-border);
    color:var(--bs-button-swap-icon-color);
  }
  .button-swap:hover{
    background:var(--bs-button-swap-background-hover);
    color:var(--bs-button-swap-icon-color-hover);

  }
}
/*Mobile view swap-block*/
@media (max-width: 768px) {
  .button-swap{
    background: var(--bs-button-swap-background-mobile);
    text-decoration: none;
    height: 50px;
    color: #9C9BA1;
    border-radius: 50px;
    transform: rotate(90deg);
    color:var(--bs-button-swap-icon-color);
  }
  .button-swap:hover{
    background:var(--bs-button-swap-background-hover);
    color:var(--bs-button-swap-icon-color);

  }
}

/*PC view swap-block*/
@media (min-width: 768px) {
  .swap-block{
    max-width:60px;
  }
}
/*Mobile view swap-block*/
@media (max-width: 768px) {
  .swap-block{
    width: 50px;
    height: 50px;
    position: absolute;
    right: 20px;
    top: 36px;
    z-index: 1002;
  }
}

/*PC view button-swap*/
@media (min-width: 768px) {
  .search-plash{
    background:#F0D454;
    border-radius: 0px 11px 11px 0px;
  }
}
/*Mobile view button-swap*/
@media (max-width: 768px) {
  .search-plash{
    background:#F0D454;
    border-radius: 11px;
    height: 60px;
  }
}

.btn-search{
  width: 100%;
  height: 100%;
  padding: 8px;
}

/*PC view button-swap*/
@media (min-width: 768px) {
  .finder-block{
    box-shadow: none;
  }
}
/*Mobile view button-swap*/
@media (max-width: 768px) {
  .finder-block{
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    border-radius: 11px;
  }
}
/*PC view icon-custom*/
@media (min-width: 768px) {
  .icon-custom {
    position: absolute;
    top: 30px;
    right: 5px;
    transform: translateY(-50%);
    color: #9C9BA1;
  }
}
/*Mobile view icon-custom*/
@media (max-width: 768px) {
  .icon-custom {
    position: absolute;
    top: 40px;
    right: 10px;
    transform: translateY(-50%);
    color: #9C9BA1;
  }
}

.landing-bg {
  background-image:var(--bs-landing-background);
  background-size: cover;
  border-radius: 0px 0px 11px 11px;
  position: relative;
  top: -65px;
}
.offcanvas-line-win{
  width: 50px;
    height: 3px;
    top: 10px;
    background-color: var(--bs-line-win-color);
}

/*Calendar*/
.calendar-container {
      max-width: 600px;
      margin: auto;
      border-radius: 10px;
      padding: 0px;
    }

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      padding-bottom: 10px;
      border-bottom: var(--finder-block-line);
    }

    .header h2 {
      margin: 0;
      font-size: 1.5em;
    }

    .quick-select-buttons {
      display: flex;
      gap: 10px;
      margin-bottom: 20px;
    }

    .quick-select-buttons button {
      background-color: #ffc107;
      border: none;
      color: #222;
      padding: 8px 12px;
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.2s;
    }

    .quick-select-buttons button:hover {
      background-color: #ffc107;
    }

    .calendar-wrapper {
      display: flex;
    }

    .month-list {
      width: 30%;
      padding-right: 20px;
      overflow-y: auto;
      border-right: 1px solid #444;
    }

    .month-list-item {
      padding: 10px 5px;
      cursor: pointer;
      opacity: 0.6;
      transition: opacity 0.2s, font-weight 0.2s;
    }

    .month-list-item.active {
      opacity: 1;
      font-weight: bold;
    }
    /*PC view day-view-container*/
    @media (min-width: 768px) {
      .day-view-container {
        width: 70%;
        height: 527px;
        overflow-y: scroll;
        position: relative;
      }
    }
    /*Mobile view day-view-container*/
    @media (max-width: 768px) {
      .day-view-container {
        width: 100%;
        height: 450px;
        overflow-y: scroll;
        position: relative;
      }
    }


    .day-view {
      padding-left: 20px;
      padding-right: 20px;
    }

    .weekdays-sticky {
      position: sticky;
      top: -1px;
      background-color:var(--bs-weekdays-sticky-background);
      z-index: 10;
      padding-bottom: 5px;
      padding: 9px 20px 0px 20px; /* Общий отступ для дней недели */
      padding-bottom: 5px; /* Отступ снизу для заголовка */
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      text-align: center;
      font-weight: bold;
      color: #888;
      gap: 5px;
    }

    .week-cal-day{
      width: 30px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      cursor: pointer;
      border-radius: 50%;
      transition: background-color 0.2s;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0 auto;
    }


    .month-block {
      margin-bottom: 20px;
    }

    .month-title {
      font-size: 1.2em;
      font-weight: bold;
      margin-bottom: 10px;
    }

    .days-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      text-align: center;
      gap: 5px; /* Зазор между днями */
    }

    .weekdays-sticky span {
      display: inline-block;
      text-align: center;
    }

    .day {
      width: 30px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      cursor: pointer;
      border-radius: 50%;
      transition: background-color 0.2s;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0 auto; /* Центрирование в колонке */
    }

    .day:hover {
      background-color: rgb(93,93,93,0.1);
    }

    .day.current-day {
      background-color: rgb(93,93,93,0.1);
    }

    .day.selected {
      background-color: #ffc107;
      color: #222;
    }

    .day.weekend {
      color: #f66;
    }

    .day.disabled {
      color: #888;
      cursor: not-allowed;
      opacity: 0.3;
    }
	.day.past-date {
	  opacity: 0.3; /* Устанавливаем прозрачность */
	  cursor: not-allowed; /* Изменяем курсор, чтобы показать, что день неактивен */
	}
  /*PC view theme-toogle-button*/
  @media (min-width: 768px) {
  .theme-toogle-button{
    border: 0px;
    background: transparent;
    color: var(--bs-toogle-theme-button-color);
    font-size: 1.3rem;
    border-left: var(--bs-input-vertical-border);
    cursor:pointer;
  }
  }
  /*Mobile view theme-toogle-button*/
  @media (max-width: 768px) {
  .theme-toogle-button{
    border: 0px;
    background: transparent;
    color: var(--bs-toogle-theme-button-color);
    font-size: 1.3rem;
    border-left: 0px;
    cursor:pointer;
  }
  }


  @keyframes fast-spin {
    0% {
      transform: rotate(0deg);
      filter: blur(0px);
    }
    15% {
      transform: rotate(720deg); /* Быстрое вращение на два полных оборота */
      filter: blur(10px); /* Максимальное смазывание */
    }
    20% {
      transform: rotate(720deg);
      filter: blur(0px); /* Резкое возвращение к четкому изображению */
    }
    100% {
      transform: rotate(720deg); /* Удерживаем конечное положение */
      filter: blur(0px);
    }
  }

  .fast-spinning-image {
    animation: fast-spin 5s infinite; /* Анимация длится 5 секунд и повторяется бесконечно */
    transform-origin: center center; /* Убедитесь, что вращение происходит вокруг центра */
  }

  .corner-color{
    fill:var(--bs-corner-color);
  }
  /*PC view input-subtitle-text*/
  @media (min-width: 768px) {
    .input-subtitle-text{
      position: absolute;
      top: 9px;
      font-size: 9px;
      left: 10px;
      color: #9C9BA1;
    }
  }
  /*Mobile view input-subtitle-text*/
  @media (max-width: 768px) {
    .input-subtitle-text{
      position: absolute;
      top: 17px;
      font-size: 9px;
      left: 10px;
      color: #9C9BA1;
    }
  }

  .input-main-form{
    padding-top: 21px;
  }
  .input-subtitle-from-to{
    position: absolute;
    top: 9px;
    font-size: 9px;
    left: 10px;
    color: #9C9BA1;
  }

  .badge-count{
    width: 25px;
    height: 25px;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 2px;
    color:#000;
    cursor:pointer;
  }

  .landing-bg-section{
    height:auto;
  }

  /*PC view power-block-height*/
  @media (min-width: 768px) {
    .power-block-height {
      min-height: 253px;
    }
  }
  /*Mobile view power-block-height*/
  @media (max-width: 768px) {
    .power-block-height {
      min-height: 130px;
    }
  }

.power-overlay-card {
    background-image: url(../../img/pexels-olly-764293.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: -webkit-fill-available;
}
  /*Mobile view power-overlay-img-heightn*/
@media (max-width: 768px) {
    .power-overlay-img-height {
        height: 153px;
    }
}

.how-to-buy-1{
    background-image: url(../../img/landing_bg_light.png);
    background-size: cover;
}
.how-to-buy-2{
    background-image: url(../../img/how-to-buy-2.png);
    background-size: cover;
}
.how-to-buy-3{
    background-image: url(../../img/how-to-buy-3.png);
    background-size: cover;
}
.how-to-buy-4{
    background-image: url(../../img/how-to-buy-4.png);
    background-size: cover;
}
.dotted-background {
    background-image: var(--bs-dotted-background);
    background-size: 20px 20px; /* Пример: точки каждые 25x25 пикселей. Регулируйте для плотности. */
    background-repeat: repeat; /* Повторяем узор по всей области */
}

.img-city {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative; /* Необходим для позиционирования дочерних элементов */
  height: 0;
  padding-top: 100%;
}

.power-overlay-card-video {
    position: relative;
    overflow: hidden;
    height: -webkit-fill-available;
}

/* Этот новый класс стилизует само видео, чтобы оно работало как фон */
.background-video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Растягивает видео, чтобы оно покрывало весь контейнер */
    transform: translate(-50%, -50%); /* Центрирует видео */
    z-index: 1; /* Отправляет видео на задний план */
}

#city-carousel .owl-nav{
  display:none!important;
}
.js-owl-carousel .owl-nav .owl-next{
 width:25px!important;
 height:25px!important;
 background-color: #ffc107!important;
 color:#000!important;
}
.js-owl-carousel .owl-nav .owl-prev{
  width:25px!important;
  height:25px!important;
  background-color: #ffc107!important;
  color:#000!important;
}
.js-owl-carousel .owl-nav{
      margin-top: 0px!important;
}

.corner-color-video{
  fill:rgb(255, 255, 255, 0.5)!important;
}
.link-a{
  color: var(--bs-heading-color);
  text-decoration: none;
}

.offcanvas-pick-date{
  border-radius: 11px 11px 0px 0px!important;
}
.small-logo-text{
  font-size:10px;
}
.result-contain{
  position: relative;
  top: -50px;
}

.accordion-search-item-bg{
  background: transparent !important;
}

.result-block{
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
  border-radius: 11px;
  margin-top: 1.8rem !important;
}

.hr-line {
    position: relative;
}

.hr-line::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--bs-line-win-color); /* Цвет линии, можно изменить */
    transform: translateY(-50%);
}
.span-onway{
  color:#000;
  font-size: 10px;
  padding: 1px 6px 1px 6px;
  background-color: #ffc107;
}




/* Основной контейнер для каждого пункта */
.timeline-container {
    position: relative;
    padding-left: 2rem; /* Отступ для линии и точек */
}

.waypoint-item {
    position: relative;
    padding-bottom: 0.2rem;
}

/* Создает круглую точку */
.waypoint-item::before {
  content: '';
  position: absolute;
  left: -16px;
  top: 9px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ffc107;
  z-index: 1;
}

/* Создает пунктирную линию, которая соединяет точки */
.waypoint-item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: -12px;
  top: 10px;
  height: 100%;
  border-left: 2px dashed var(--bs-line-win-color);
}

.waypoint-city {
    font-weight: bold;
    font-size: 0.8rem;
}

.waypoint-address {
    font-size: 0.8rem;
    color: #999;
    line-height: 1.2;
}

.card-rules-block{
  position: absolute;
  z-index: -1;
  top: -22px;
  left: 10px;
}
.rule-span{
  font-size: 11px;
  border-radius: 5px 5px 0px 0px;
  padding: 0px 5px 0px 5px;
  margin: 0px 0px 5px 0px;
}
.accordion-button.accordion-button-details{
  background-color: transparent !important;
  padding:0px!important;
  font-size: 0.8rem!important;
}
.accordion-button.accordion-button-details::after{
  margin-left: 3px;
  background-size: 0.5rem;
  height:0.5rem;
  width:0.5rem;
}
.accordion-item.accordion-item-details{
  background-color: transparent!important;
}
.accordion-button.accordion-button-details:focus{
  box-shadow:none;
}
.accordion-button.accordion-button-details:not(.collapsed) {
  color:var(--accordion-button-details-collapse);
}
.nav-tabs.nav-details {
  font-size: 11px !important;
  border-radius: 15px;
  background-color: transparent;
  padding: 2px;
  border-bottom:0px!important;
}
.nav-details .nav-link {
  border-radius: 15px;
  padding: 5px 10px 5px 10px;
  border: 0px;
  color:var(--bs-heading-color);
}
.nav-details .nav-link.active {
  background-color: #ffc107 !important;
  border-radius: 15px;
  padding: 0px 10px 0px 10px;
  border: 0px;
  color:#000;
}
.nav-details .nav-link:hover {
  background-color: #ffc107 !important;
  border-radius: 15px;
  padding: 0px 10px 0px 10px;
  border: 0px;
  color:#000;
}
.nav-details .nav-link:focus {
  background-color: #ffc107 !important;
  border-radius: 15px;
  padding: 0px 10px 0px 10px;
  border: 0px;
}
.waypoint-time{
  position: absolute;
  left: -60px;
  font-weight: bold;
  font-size: 0.8rem;
  top: 5px;
}
.timeline-way-time{
      padding-left: 65px!important;
}
.way-info-text {
    font-size: 0.8rem;
    color: #999;
    line-height: 1.2;
}
.hr-dashed{
  border: 1px dashed var(--bs-line-win-color);
}
.next-transfer-w{
  max-width: 50px;
}

.input-form-custom{
  height: 60px;
  border-radius: 11px;
  border: 2px solid #ffc107;
  border-top: 2px solid #ffc107;
  background: var(--bs-input-background);
  padding-top: 21px;
}
.input-subtitle-custom {
    position: absolute;
    top: 9px;
    font-size: 9px;
    left: 26px;
    color: #9C9BA1;
}
.annotation-line{
    min-width: 3px;
    position: relative;
    left: -16px;
    border-radius: 0px 11px 11px 0px;
    background: #ffc107;
}
.input-plus-phone {
    position: absolute;
    top: 23px;
    font-size: 20px;
    left: 26px;
}
.phone-input-pad{
  padding-left: 27px !important;
}
.seat {
  width: 3rem;
  height: 3rem;
  /* Добавляем Flexbox свойства */
  display: flex;
  justify-content: center; /* Центрирует по горизонтали */
  align-items: center; /* Центрирует по вертикали */
  position: relative; /* Необходим для позиционирования чекбокса */
}



/* Остальные стили */
.seat-checkbox {
  width: 3rem;
  height: 3rem;
  /* Абсолютное позиционирование, чтобы он был под номером */
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  /* Убираем стандартные свойства */
  cursor: pointer;
}

.seat-checkbox:checked {
  background: #74C062;
  border-color: transparent;
}

.seat-checkbox:checked + .seat-num {
    color: #fff;
}
.seat-checkbox:disabled{
  background: var(--bs-seat-checkbox);
}
.button-seat-edit-ok{
  border-radius: 0px 10px 10px 0px;
  height: 40px;
}
/*PC view bus-container*/
@media (min-width: 768px) {
  .bus-container{

  }
}
/*Mobile view bus-container*/
@media (max-width: 768px) {
  .bus-container{
    height:875px;
  }
}
/*PC view bus-view-rotation*/
@media (min-width: 768px) {
  .bus-view-rotation{
    margin-top: 50px;
  }
}
/*Mobile bus-view-rotation*/
@media (max-width: 768px) {
  .bus-view-rotation{
    transform: rotate(-90deg);
  }
}
/*PC view seat-num*/
@media (min-width: 768px) {
  .seat-num {
    /* Чтобы номер сиденья был поверх чекбокса */
    z-index: 1;
    pointer-events: none; /* Позволяет кликам проходить сквозь текст на чекбокс */
  }
}
/*Mobile view seat-num*/
@media (max-width: 768px) {
  .seat-num {
    /* Чтобы номер сиденья был поверх чекбокса */
    z-index: 1;
    pointer-events: none; /* Позволяет кликам проходить сквозь текст на чекбокс */
    transform: rotate(90deg);
  }
}


.input-constructor-custom {
    position: absolute;
    top: 9px;
    font-size: 9px;
    left: 15px;
    color: #9C9BA1;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}

.input-plus-min-buttons{
  top: 1px !important;
  right: 5px !important;
  position: absolute !important;
}

.svg-wheel{
  height: 2rem;
  width: 2rem;
  background:url('data:image/svg+xml,<svg width="24" height="24" fill="currentColor" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path class="b" d="M22 12c0-5.51-4.49-10-10-10S2 6.49 2 12s4.49 10 10 10 10-4.49 10-10zm-2 0c0 3.71-2.54 6.82-5.97 7.73l.5-4.01c.31-2.47.31-4.97 0-7.44l-.5-4.01C17.46 5.17 20 8.29 20 12Zm-8 1.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM12 4l-.28 1.67a5.995 5.995 0 0 1-5.07 4.95l-2.58.37C4.57 7.06 7.93 4 12 4Zm-7.93 9.01 2.58.37c2.59.37 4.64 2.37 5.07 4.95L12 20c-4.07 0-7.43-3.05-7.93-6.99Z" style="fill:%23495057;fill-opacity:1"/></svg>');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}


.seat input {
    border: 1px solid #74C062;
}
.seat input:disabled {
    border: 0px !important;
}
.sub-input-edit{
  z-index: 99;
  position: absolute;
  top: 3px;
  font-size: 9px;
  left: 21px;
  color: #9C9BA1;
}
.seat-input-edit-num{
  border-radius: 11px 0px 0px 11px!important;
  border: 2px solid #ffc107 !important;
}
/*PC view dropdown-rotate*/
@media (min-width: 768px) {
  .dropdown-rotate{

  }
}
/*Mobile view dropdown-rotate*/
@media (max-width: 768px) {
  .dropdown-rotate{
     transform: rotate(90deg)!important;;
  }
}