.hidden {
  display: none;
}

span.error{
  color: red!important;
  font-size: 11px;
}

.header__logo{
  text-decoration: none;
}

.text-nowrap.blue {
  color: #07a9a0 !important;
  font-weight: 500;
}

.nowrap-del {
  text-decoration: line-through;
  color: #607D8B;
}

.js-result-car {
  display: flex;
  justify-content: space-between;
}

.header__logo img {
  max-height: 47px;
}

@media (max-width: 767.98px) {
  .card-body .text {
    font-size: 14px;
  }
  .js-result-car {
    display: block;
  }
  .js-result-car > * {
    display: block;
  }
  .header__logo img {
    max-height: 20px;
  }  
}

.compire-item__checklist__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 20px;
}

.compare-checkbox {
  position: relative;
  width: 24px;
  height: 24px;
}

.compare-checkbox input[type="checkbox"] {
  visibility: hidden;
}

.compare-checkbox input[type="checkbox"]:checked + label {
  background-color: #14191B;
  border-color: #14191B;
}
.compare-checkbox label {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 50%;
  cursor: pointer;
  height: 24px;
  left: 0;
  position: absolute;
  top: 0;
  width: 24px;
}

.compare-checkbox input[type="checkbox"]:checked + label:after {
  opacity: 1;
}
.compare-checkbox label:after {
  border: 2px solid #fff;
  border-top: none;
  border-right: none;
  content: "";
  height: 6px;
  left: 6px;
  opacity: 0;
  position: absolute;
  top: 6px;
  transform: rotate(-45deg);
  width: 12px;
}

.section-404 {
    justify-content: center;
    align-items: center;
    display: flex;
    height: calc(100vh - 313px);
}

.section-404 .container {
    display: flex;
    gap: 36px;
    flex-direction: column;
}

.buttons-404 {
    width: fit-content;
}

@media (min-width: 1200px) {
  .fs-1 {
      font-size: 1.8rem !important;
      line-height: 1.8rem !important;
  }
}
@media (max-width: 1200px) {
  .fs-1 {
      font-size: 1.4rem !important;
  }

  .card-header:first-child {
    position: sticky !important;
    top: 48px;
    z-index: 10;
  }

  .benefits {
    padding: 12px 16px;
  }
  .benefits__promo__text {
    color: var(--White, #FFF);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; /* 125% */
  }
  .benefits__promo {
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
  }
  .benefit__title span {
    color: var(--White, #FFF);
    font-size: 52px;
    font-style: normal;
    font-weight: 700;
    line-height: 56px;
    text-transform: uppercase;
  }
  .benefit__title {
    color: var(--White, #FFF);
    text-align: right;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 56px; /* 175% */
    text-transform: uppercase;
  }

  .beneftits__container {
    justify-content: inherit;
  }
  .benefit__desc {
    margin: auto 0 0 0;
    color: var(--Grey-Light-grey, #F6F6F6);
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    line-height: 14px; /* 140% */
  }
  .benefit_car {
    left: -59px;
    bottom: 12px;
    max-width: 226px;
}
  .benefit_circle {
    width: 250px;
    height: 250px;
    left: -70px;
    bottom: -40px;
  }
}

@media (max-width: 1100px) {
  .main__card-header-asset {
      display: none;
  }
}

@media (max-width: 480px) {
    .benefit_car {
        left: -59px;
        bottom: 2px;
        max-width: 220px;
    }
    .benefit_circle {
        width: 210px;
        height: 210px;
        left: -80px;
        bottom: -55px;
    }
}
/* Чекбокс  */

@keyframes shake {
      0% { transform: translateX(0); }
      25% { transform: translateX(-4px); }
      50% { transform: translateX(4px); color: red; }
      75% { transform: translateX(-2px); }
      100% { transform: translateX(0); }
    }

     .form button.inactive {
      background: #9ca5b3;
      cursor: not-allowed;
      border: 1px solid transparent;
    }

    .checkbox-wrap {
      display: flex;
      align-items: center;
      gap: 8px;
      &:hover{
         & .checkmark {
      
      border-color: green;
    }
      }
    }

    .custom-checkbox {
      display: inline-flex;
          align-items: center;
          gap: 8px;
          font-family: sans-serif;
          cursor: pointer;
          user-select: none;
          font-size: 16px;
          background: transparent;
    }

    .custom-checkbox input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .checkmark {
     width: 16px;
          height: 16px;
          border-radius: 4px;
          border: 1px solid #AF9D89;
          position: relative;
          transition: all 0.2s ease;
          cursor: pointer;
    }

    .custom-checkbox input:checked + .checkmark {
      background-color: transparent;
      border-color: green;
    }

    .checkmark::after {
      content: "";
      position: absolute;
      display: none;
    }

    .custom-checkbox input:checked + .checkmark::after {
      display: block;
    }

    .custom-checkbox .checkmark::after {
     content: "";
          position: absolute;
          display: none;
          top: -1px;
          left: 4px;
          width: 6px;
          height: 12px;
          border: solid green;
          border-width: 0 2px 2px 0;
          transform: rotate(45deg);
    }

    .agreement-text {
      font-size: 12px;
      line-height: 15px;
      color: #5E5E64;
      cursor: pointer;
      
    }
     .agreement-text:focus {
     outline: none !important;
     border: 0 !important;
      
    }

    .agreement-text a {
      color: #5E5E64;
      text-decoration: underline;
      &:hover{
        opacity: 0.8;
      }
    }

    .highlighted {
      color: red !important;
      animation: shake 0.4s;
      
      & a{
        color: red;
      }
    }

    /* Политика   */

  .politic{
    position: fixed;
    bottom: 5%;
    margin: 0 auto;
    padding: 0 16px;
    z-index: 5;
    display: none;
  }
   .politic.active{
      display: block;
    }
    .politic__wrapper{
    border-radius: 16px;
    background-color: #FFF;
    padding: 18px;
    max-width: 382px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    position: relative;
    
    }
    .politic span{
      z-index: 2;
      color: #101010;
      font-size: 12px;
      font-style: normal;
      font-weight: 400;
      line-height: 14.4px;
     
    }
    .politic span a{
        color: #176888;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 14.4px;
        cursor: pointer;
        &:hover{
          text-decoration-line: none;
          opacity: 0.8;
        }
    }
    .politic button{
      z-index: 2;
      position: relative;
      color: #FFF;
      font-size: 16px;
      font-style: normal;
      font-weight: 500;
      line-height: 19.2px;
      border-radius: 8px;
      background: #1C1C1D;
      transition: var(--transition);
      cursor: pointer;
      padding: 12px 20px;
      &:hover{
        opacity: 0.9;
      }
    }
  @media (max-width: 768px) {
    .politic{
      bottom: 2%;
    }
     .politic__wrapper{
        text-align: center;
        padding: 16px;
        gap: 20px;
        flex-direction: column;
      }
     
      .politic span{
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
        & a{
          font-size: 14px;
          font-style: normal;
          font-weight: 400;
          line-height: 20px;
        }
      }
      .politic button{
        padding: 18px;
      }
  }