:root {
  /*css - переменные*/
  --main: #26A235;
  --main-opacity-7: rgba(38,161,53, 0.07);
  --main-opacity-14: rgba(38,161,53, 0.14);
  --main-opacity-20: rgba(38,161,53, 0.2);
  --main-opacity-40: rgba(38,161,53, 0.4);
  --main-opacity-50: rgba(38,161,53, 0.5);
  --hover: #008D12;
  --chess-hover: #F29202;
  --training: #0072DB;
}
/* применение var(--color-blue); */

.header__nav-block {
  top: 60px;
  height: calc(100vh - 43px);
}

/*стили сайдбара*/

.lasts__wrap {
  padding: 20px;
  border-radius: 5px;
  overflow: hidden;
  background-color: var(--dark-white);
}

.lasts__link {
  display: flex;
  align-items: center;
  color: var(--main);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
}

.lasts__link:hover {
  color: var(--hover);
  transition: 0.3s;
}

.lasts__arrow {
  stroke: var(--main);
  margin: 0 10px 0 0;
  transform: rotate(180deg);
  flex-shrink: 0;
}

.lasts__link:hover .lasts__arrow {
  stroke: var(--hover);
  transition: 0.3s;
}

.lasts__list {
  display: grid;
  grid-gap: 15px;
}

.lasts__item {
  padding: 0 0 15px;
  border-bottom: 1px solid var(--light-gray-1);
}

.lasts__item:last-child {
  padding: 0;
  border-bottom: none;
}

.lasts__date-time {
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  color: var(--gray);
}

.lasts__field {
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
}

.yandex {
  display: flex;
  align-items: center;
  margin: 0 0 0 15px;
  gap: 8px;
}

.yandex__info {
  font-weight: 600;
}

/*стили подтверждение данных*/

.field__condition:after {
  display: block;
  content: '';
  height: 16px;
  width: 1px;
  margin: 0 5px;
  background-color: var(--gray);
}

.field__address {
  margin: 0 0 2px;
}

.field {
  border-radius: 5px;
  background-color: var(--dark-white);
  padding: 20px;
}

.field__content {
  display: flex;
}

.field__img {
  border-radius: 5px;
  margin: 0 20px 0 0;
}

.field__texts {
  flex-grow: 1;
}

.field__name {
  font-weight: 700;
  font-size: 18px;
  line-height: 22px;
}

.field__address {
  font-size: 14px;
  line-height: 20px;
  margin: 0 0 2px;
}

.field__metro-list {
  display: flex;
}

.field__lists {
  gap: 10px;
  display: grid;
}

.field__list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  border-radius: 5px;
  border: 1px solid var(--light-gray-1);
  padding: 5px 10px;
}

.field__list--grids {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.field__list--grids .field__item:nth-child(4) {
  text-align: right;
}

.field__item {
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
  padding: 5px;
}

.buttons {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  grid-gap: 20px;
}

.button--fb {
  background-color: var(--blue);
}

.button--vk {
  background-color: var(--light-blue);
}

.button--fb:hover {
  background-color: var(--dark-blue);
}

.button--vk:hover {
  background-color: var(--dark-blue);
}

.form__bank-list {
  display: flex;
  align-items: center;
}

.form__bank-item {
  margin: 0 0 0 20px;
}

.form__text--gray {
  color: var(--gray);
  font-weight: 500;
}

.form__text--warning {
  color: var(--red);
}

.form__text--success {
  color: var(--green);
}

.form__small-text {
  font-size: 12px;
  line-height: 16px;
  color: var(--gray);
}

.form__label--pay {
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
}

.form__link-account {
  text-align: center;
  display: block;
  padding: 10px;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--gray);
}

.form__link-account:hover {
  color: var(--hover);
  transition: 0.3s;
}

.form__account {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
}

.form__account .form__group,
.form__account .form__input,
.form__account .form__label {
  margin: 0;
}

.form__timer {
  font-weight: 700;
  font-size: 30px;
  line-height: 34px;
  padding: 0 0 0 20px;
  display: flex;
  align-items: center;
}

.form__small-text--disabled {
  color: var(--light-gray-1);
}

.form__unit--success {
  padding: 76px 0 0;
}

.form__documents {
  display: grid;
  grid-gap: 20px;
}

.form__document {
  display: flex;
  align-items: center;
  color: var(--main);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
}

.form__document:hover {
  color: var(--hover);
  transition: 0.3s;
}

.form__document-icon {
  margin: 0 10px 0 0;
  stroke: var(--main);
}

.form__document:hover .form__document-icon {
  stroke: var(--hover);
  transition: 0.3s;
}

.form--entity {
  max-width: 610px;
  margin: 0 auto;
}

.form__grid--three {
  grid-template-columns: repeat(3,1fr);
}
.filters--disabled {
  pointer-events: none;
}

.filters--disabled .dropdown__title .dropdown__link {
  color: var(--light-gray-1);
}

.filters--disabled .dropdown__title {
  cursor: auto;
}

.filters--disabled .dropdown.js-open .dropdown__title,
.filters--disabled .dropdown__title:hover {
  border: 1px solid var(--light-gray-1);
}

.filters--disabled .dropdown__title:after {
  content: url("/img/arrow-light-gray.svg");
}

.heading-h2--right {
  text-align: right;
  justify-content: flex-end;
}

.ground__address {
  font-size: 16px;
  line-height: 24px;
}

.ground__review {
  display: flex;
  align-items: center;
}

.ground__rating {
  font-weight: 700;
  font-size: 18px;
  line-height: 24px;
  margin: 0 10px 0 0;
}

.ground__icon {
  fill: var(--main);
  margin: 0 10px 0 0;
}

.ground__number {
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  margin: 0 10px 0 0;
}

.ground__text {
  font-size: 12px;
  line-height: 16px;
}

.ground__link {
  color: var(--main);
  padding: 0 5px;
}

.ground__link:hover {
  color: var(--hover);
  transition: 0.3s;
}

.ground__header-wrap {
  position: sticky;
  top: 0;
  z-index: 1151;
}

.ground__header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  border-radius: 5px;
  border: 1px solid var(--light-gray-1);
  background-color: var(--white);
}

.ground__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ground__texts {
  margin: 0 auto 0 0;
}

.ground__header--selected .ground__texts {
  display: none;
}

.ground__header--no-selected .ground__texts {
  display: block;
}

.ground__header--selected .ground__price {
  display: none;
}

.ground__header--selected .ground__price.temp-price {
  display: block;
}

.ground__header--no-selected .ground__price {
  display: block;
}

.ground__text {
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
}

.ground__info {
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  color: var(--main);
  margin: 0 0 5px;
}

.ground__info:last-child {
  margin: 0;
}

.ground__price {
  font-weight: 700;
  font-size: 18px;
  line-height: 22px;
  margin: 0 20px;
  white-space: nowrap;
}

.ground__unit-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 auto 0 0;
}

.ground__unit {
  padding: 0 0 0 10px;
  background-color: var(--dark-white);
  border-radius: 5px;
  display: flex;
  align-items: center;
  flex-grow: 1;
  max-width: 585px;
}

.ground__details {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.ground__detail {
  padding: 5px;
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
}

.ground__closed {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin: 0 0 0 auto;
}

.ground__icon-wrap {
  width: 20px;
  height: 20px;
}

.ground__close-icon {
  fill: var(--light-black);
}

.ground__closed:hover .ground__close-icon {
  fill: var(--hover);
  transition: 0.3s;
}

.ground__duration {
  display: none;
}

.ground__booking {
  background-color: var(--dark-white);
  border-radius: 5px;
  padding: 20px;
  margin: 40px 0;
}

.ground__booking .form__input,
.ground__booking .dropdown__title {
  border: none;
}

.ground__wrap {
  display: none;
  align-items: flex-end;
}

.ground__wrap--active {
  display: flex;
}

.ground__times {
  display: grid;
  grid-gap: 5px;
  margin: 0 15px 0 0;
}

.ground__time {
  font-size: 14px;
  line-height: 20px;
  height: 30px;
  display: flex;
  align-items: center;
  min-width: 40px;
  color: var(--gray);
}

.pitch {
  position: relative;
}

.pitch__scrolling {
  overflow: scroll;
  width: 100%;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
  background-color: var(--dark-white);
  z-index: 4;
}

.pitch__scrolling::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.pitch__fields {
  display: flex;
  align-items: center;
  background-color: var(--dark-white);
  z-index: 4;
  width: 100%;
}

.pitch__field {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-direction: column;
  margin: 0 10px 0 0;
  flex-basis: 0;
  flex-grow: 1;
}

.pitch__field:last-child {
  margin: 0;
}

.pitch__field-name,
.pitch__field-text {
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  color: var(--gray);
  z-index: 3;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.slider--ground {
  margin: 0;
  overflow: initial;
  width: calc(100% - 55px);
}

.slider--ground .slider__item {
  position: static;
}

.slider--ground .slider__item:before,
.slider--ground .slider__item:after {
  display: none;
}

.pitch__days {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--light-gray-1);
  margin: 0 0 20px;
  background-color: var(--dark-white);
  z-index: 4;
}

.pitch__content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pitch__date {
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
}

.pitch__day {
  font-size: 12px;
  line-height: 16px;
}

.pitch--day-off .pitch__date,
.pitch--day-off .pitch__day {
  color: var(--red);
}

.pitch--day-select .pitch__date,
.pitch--day-select .pitch__day {
  color: var(--main);
}

.pitch__list {
  display: flex;
  align-items: center;
  width: 100%;
  z-index: 1;
}

.pitch__item {
  display: grid;
  grid-gap: 5px;
  margin: 0 10px 0 0;
  flex-basis: 0;
  flex-grow: 1;
  z-index: 1;
}

.pitch__item:last-child {
  margin: 0;
}

.pitch__link {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 5px;
  border-radius: 5px;
  background-color: var(--light-gray-1);
  z-index: 1;
}

.pitch__link--disabled {
  background-color: var(--dark-white);
  cursor: auto;
}

.pitch__link--personal {
  background-color: lightyellow;
  cursor: pointer;
}

.pitch__link--active {
  background-color: var(--hover);
  transition: 0.3s;
}

.pitch__link--disabled:hover {
  background-color: var(--dark-white);
}

.pitch__link--personal:hover {
  background-color: var(--main-opacity-50);
}

.pitch__price {
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  z-index: 1;
}

.pitch__link--disabled .pitch__price {
  color: var(--light-gray-3);
}

.pitch__link--personal .pitch__price {
  color: black;
}

.pitch__link--active .pitch__price {
  color: var(--white);
  transition: 0.3s;
}

.pitch__time {
  display: none;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  z-index: 1;
}

.pitch__link--disabled .pitch__time {
  color: var(--light-gray-3);
}

.pitch__link--personal .pitch__time {
  color: var(--light-gray-3);
}

.pitch__link--active .pitch__time {
  color: var(--white);
  transition: 0.3s;
}

.slider--ground .slider__arrows {
  position: static;
}

.slider--ground .slider__arrows-link {
  background-color: initial;
  position: absolute;
  top: -2px;
  left: -14px;
}

.slider--ground .slider__arrows-link[aria-disabled="true"] .slider__arrow {
  stroke: var(--light-gray-3);
}

.slider--ground .slider__arrows-link[aria-disabled="true"]:hover .slider__arrow {
  stroke: var(--light-gray-3);
}

.slider--ground .slider__arrow {
  stroke: var(--light-black);
}

.slider--ground .slider__arrows-link--right {
  right: -14px;
  left: auto;
}

.ground__options {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  grid-gap: 20px;
}

.ground__option {
  display: flex;
  align-items: center;
  padding: 15px;
  border-radius: 5px;
  border: 1px solid var(--light-gray-1);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
}

.ground__options--format .ground__option {
  font-weight: bold;
  font-size: 18px;
  line-height: 20px;
  color: var(--dark-gray);
  text-align: center;
  justify-content: center;
}

.ground__lawn-icon {
  margin: 0 10px 0 0;
  flex-shrink: 0;
  fill: var(--light-gray-3);
}

.ground__lawn-text {
  font-size: 16px;
  line-height: 24px;
}

.ground__logos {
  display: flex;
  align-items: center;
}

.ground__logo {
  margin: 0 25px 0 0;
}

.ground__logo:last-child {
  margin: 0;
}

.full-width .form--sidebar {
  margin: 0;
  padding: 40px 20px;
}

.full-width .form__wrapper {
  max-width: 1240px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
}

.full-width .heading-h3,
.full-width .form__text {
  width: 100%;
}

.full-width .form__group {
  width: calc((100% - 60px) / 4);
  margin: 0 20px 0 0;
}

.full-width .form--sidebar .button {
  margin: 0;
  width: calc((100% - 60px) / 4);
  flex-grow: 1;
  height: 40px;
}

.full-width .form__input {
  margin: 0;
}

@media (min-width: 1100px) {
  .pitch__link:hover {
    background-color: var(--hover);
    transition: 0.3s;
  }

  .pitch__link--disabled:hover .pitch__price {
    color: var(--light-gray-3);
  }

  .pitch__link:hover .pitch__price {
    color: var(--white);
    transition: 0.3s;
  }

  .pitch__link:hover .pitch__time {
    color: var(--white);
    transition: 0.3s;
  }

  .pitch__link--disabled:hover .pitch__time {
    color: var(--light-gray-3);
  }
}