@import url('./reset/reset.css');
@import url('./fonts/fonts.css');

/*vars*/

:root {
    --main: 'Neue Machina';
    --new-font: 'SF UI Display';
    --additional: 'OCR A';

    --pink: #9934FF;
    --blue: #18DCFF;
    --width: 124px;

    --black: #000000;
    --new-black: #121212;
    --white: #ffffff;
    --hover-red: #ac1e1e;
    --hover-blue: #3925f3;
    --hover-pink: #ec23f7;
    --new-pink: #9934FF;
    --new-blue: #18DCFF;


    --new-black: #000;
    --new-gray-border: #dadada;
    --new-g-placeholder: #808080;
    --new-btn-blue: #103E95;
    --new-red: #FF3636;
    --new-red-alert: #FFE9E9;

}




html, body {
    font-size: 10px
}


body {
    width: 100%;
    max-width: 1920px;

    margin: 0 auto!important;


    font-family: var(--additional);
    font-weight: 700;

    background: transparent linear-gradient(122deg, #1b145d 0%, #540e57 100%) 0% 0% no-repeat padding-box;
    opacity: 1;


}
/*animation*/
.loader {
    position: relative;
    margin: 0 auto;
    width: var(--width);
  }

  .loader::before {
    content: '';
    display: block;
    padding-top: 100%;
  }

  .loader-bg {
    width: var(--width);
    position: relative;
    margin: 0 auto;

  }


  .loader-bg::after {
    content: url("data:image/svg+xml;utf8,<svg width='100' height='100' viewBox='0 0 124 124' fill='none' xmlns='http://www.w3.org/2000/svg'><g filter='url(%23filter0_b_181_147)'><rect width='124' height='124' rx='62' fill='url(%23paint0_linear_181_147)' fill-opacity='0.3'/></g><defs><filter id='filter0_b_181_147' x='-126.141' y='-126.141' width='376.281' height='376.281' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'><feFlood flood-opacity='0' result='BackgroundImageFix'/><feGaussianBlur in='BackgroundImageFix' stdDeviation='63.0704'/><feComposite in2='SourceAlpha' operator='in' result='effect1_backgroundBlur_181_147'/><feBlend mode='normal' in='SourceGraphic' in2='effect1_backgroundBlur_181_147' result='shape'/></filter><linearGradient id='paint0_linear_181_147' x1='1.33539' y1='3.03922' x2='104.206' y2='54.6021' gradientUnits='userSpaceOnUse'><stop stop-color='white' stop-opacity='0.4'/><stop offset='1' stop-color='white' stop-opacity='0.1'/></linearGradient></defs></svg>");
    /* width: 100px;
    height: 100px; */
    display: block;

    background-color: #1c1c1c;
    border-radius: 50%;
    /* box-shadow: -1px 1px 21px -2px rgba(0,0,0,0.75) inset;
-webkit-box-shadow: -1px 1px 21px -2px rgba(0,0,0,0.75) inset;
-moz-box-shadow: -1px 1px 21px -2px rgba(0,0,0,0.75) inset; */

    position: absolute;
    top: 50% !important;
    left: 50%;
    z-index: -1;

    transform: translate(-50%, -50%);
  }

  .loader-bg::before {
    content: "";
    width: 40px;
    height: 40px;
    display: none;

    background-image: url(../image/rectangle.svg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    position: absolute;
    top: 16% !important;
    left: 50%;
    z-index: 2;

    transform: translate(-50%, 50%);
  }

  .filters__search-block.active .loader-bg::before {
    display: block;
  }

  .filters__search-block.active .showbox::after {
    display: none;
  }

  .circular {

    height: 100%;
    transform-origin: center center;
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }


  /*main loader*/

  /* $animation-duration: 1.5s; */

  .fade-circle {
    display: inline-block;
    margin: 38.4px;  /* 2.4em * 16px */
    outline: 0 none;
    border-radius: 100%;
    font-size: 19.2px;  /* 1.2em * 16px */
    width: 16px;  /* 1em * 16px */
    height: 16px;  /* 1em * 16px */
    animation: fade-circle 1.5s infinite ease;
  }

  @keyframes fade-circle {
    0%, 100% {
      box-shadow: 0px -32px 0px 0px rgba(255, 255, 255, 1),
                  22.4px -22.4px 0px 0px rgba(255, 255, 255, 0),
                  32px 0px 0px 0px rgba(255, 255, 255, 0),
                  22.4px 22.4px 0px 0px rgba(255, 255, 255, 0),
                  0px 32px 0px 0px rgba(255, 255, 255, 0.2),
                  -22.4px 22.4px 0px 0px rgba(255, 255, 255, 0.4),
                  -32px 0px 0px 0px rgba(255, 255, 255, 0.6),
                  -22.4px -22.4px 0px 0px rgba(255, 255, 255, 0.8);
    }

    12.5% {
      box-shadow: 0px -32px 0px 0px rgba(255, 255, 255, 0.8),
                  22.4px -22.4px 0px 0px rgba(255, 255, 255, 1),
                  32px 0px 0px 0px rgba(255, 255, 255, 0),
                  22.4px 22.4px 0px 0px rgba(255, 255, 255, 0),
                  0px 32px 0px 0px rgba(255, 255, 255, 0),
                  -22.4px 22.4px 0px 0px rgba(255, 255, 255, 0.2),
                  -32px 0px 0px 0px rgba(255, 255, 255, 0.4),
                  -22.4px -22.4px 0px 0px rgba(255, 255, 255, 0.6);
    }

    25% {
      box-shadow: 0px -32px 0px 0px rgba(255, 255, 255, 0.6),
                  22.4px -22.4px 0px 0px rgba(255, 255, 255, 0.8),
                  32px 0px 0px 0px rgba(255, 255, 255, 1),
                  22.4px 22.4px 0px 0px rgba(255, 255, 255, 0),
                  0px 32px 0px 0px rgba(255, 255, 255, 0),
                  -22.4px 22.4px 0px 0px rgba(255, 255, 255, 0),
                  -32px 0px 0px 0px rgba(255, 255, 255, 0.2),
                  -22.4px -22.4px 0px 0px rgba(255, 255, 255, 0.4);
    }

    37.5% {
      box-shadow: 0px -32px 0px 0px rgba(255, 255, 255, 0.4),
                  22.4px -22.4px 0px 0px rgba(255, 255, 255, 0.6),
                  32px 0px 0px 0px rgba(255, 255, 255, 0.8),
                  22.4px 22.4px 0px 0px rgba(255, 255, 255, 1),
                   0px 32px 0px 0px rgba(255, 255, 255, 0),
                  -22.4px 22.4px 0px 0px rgba(255, 255, 255, 0),
                  -32px 0px 0px 0px rgba(255, 255, 255, 0),
                  -22.4px -22.4px 0px 0px rgba(255, 255, 255, 0.2);
    }

    50% {
      box-shadow: 0px -32px 0px 0px rgba(255, 255, 255, 0.2),
                  22.4px -22.4px 0px 0px rgba(255, 255, 255, 0.4),
                  32px 0px 0px 0px rgba(255, 255, 255, 0.6),
                  22.4px 22.4px 0px 0px rgba(255, 255, 255, 0.8),
                  0px 32px 0px 0px rgba(255, 255, 255, 1),
                  -22.4px 22.4px 0px 0px rgba(255, 255, 255, 0),
                  -32px 0px 0px 0px rgba(255, 255, 255, 0),
                  -22.4px -22.4px 0px 0px rgba(255, 255, 255, 0);
    }

    62.5% {
      box-shadow: 0px -32px 0px 0px rgba(255, 255, 255, 0),
                  22.4px -22.4px 0px 0px rgba(255, 255, 255, 0.2),
                  32px 0px 0px 0px rgba(255, 255, 255, 0.4),
                  22.4px 22.4px 0px 0px rgba(255, 255, 255, 0.6),
                  0px 32px 0px 0px rgba(255, 255, 255, 0.8),
                  -22.4px 22.4px 0px 0px rgba(255, 255, 255, 1),
                  -32px 0px 0px 0px rgba(255, 255, 255, 0),
                  -22.4px -22.4px 0px 0px rgba(255, 255, 255, 0);
    }

    75% {
      box-shadow: 0px -32px 0px 0px rgba(255, 255, 255, 0),
                  22.4px -22.4px 0px 0px rgba(255, 255, 255, 0),
                  32px 0px 0px 0px rgba(255, 255, 255, 0.2),
                  22.4px 22.4px 0px 0px rgba(255, 255, 255, 0.4),
                  0px 32px 0px 0px rgba(255, 255, 255, 0.6),
                  -22.4px 22.4px 0px 0px rgba(255, 255, 255, 0.8),
                  -32px 0px 0px 0px rgba(255, 255, 255, 1),
                  -22.4px -22.4px 0px 0px rgba(255, 255, 255, 0);
    }

    87.5% {
      box-shadow: 0px -32px 0px 0px rgba(255, 255, 255, 0),
                  22.4px -22.4px 0px 0px rgba(255, 255, 255, 0),
                  32px 0px 0px 0px rgba(255, 255, 255, 0),
                  22.4px 22.4px 0px 0px rgba(255, 255, 255, 0.2),
                  0px 32px 0px 0px rgba(255, 255, 255, 0.4),
                  -22.4px 22.4px 0px 0px rgba(255, 255, 255, 0.6),
                  -32px 0px 0px 0px rgba(255, 255, 255, 0.8),
                  -22.4px -22.4px 0px 0px rgba(255, 255, 255, 1);
    }
  }

  .custom-loader {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    background: transparent linear-gradient(122deg, #1b145d 0%, #540e57 100%) 0% 0% no-repeat padding-box;


    position: fixed;
    position: fixed;
    top: 0;
    z-index: 1000;

    opacity: 0;
    pointer-events: none;

    transition: all .1s linear;

  }

  .custom-loader.is-visible {
    opacity: 1;

    transition: all .1s linear;
  }


  .filters__search-block.active .circular {
    animation: rotate 2s linear infinite;
  }

  .filters__search-block.active .path {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
    stroke-linecap: round;
  }



  @keyframes rotate {
    100% {
      transform: rotate(360deg);
    }
  }

  @keyframes dash {
    0% {
      stroke-dasharray: 1, 200;
      stroke-dashoffset: 0;
    }
    50% {
      stroke-dasharray: 89, 200;
      stroke-dashoffset: -35px;
    }
    100% {
      stroke-dasharray: 89, 200;
      stroke-dashoffset: -124px;
    }
  }

  @keyframes color {
    100%,
    0% {
      stroke: var(--blue);
    }
    66% {
      stroke: var(--pink);
    }
  }

  /* demo-specific */
  /* body {
    background-color: var(--white);
  } */

  .showbox {
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /* padding: 5%; */
  }

  .showbox::after {
    content: "";
    width: 36px;
    height: 40px;
    display: block;
    background-image: url(../image/polygon.svg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    top: 16%;
    left: 51%;
    z-index: 2;
    transform: translate(-50%, 50%);
  }

.page.page--account {
    min-height: 100vh;

    padding-left: 0;
    padding: 0!important;
}

.container {
    padding: 0 40px!important;
}

.page.page--account .container {
    max-width: 100%!important;
}

/*main*/
.main.main--account {
    height: 100%;
    padding: 52px 0 92px 0;

    /* overflow: auto; */
    overflow: hidden;
    /* overflow-y: auto; */
}

/*btn*/

.btn--exit {
    font-family: var(--main);
    font-weight: 700;
    font-size: 2rem;
    color: var(--white);
    line-height: 2.7rem;
}

/*login*/

.login {
    height: 100%;
    min-height: 705px;
}

.login__header {
    margin-bottom: 14px;
}

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

.login__logo {
    width: 183px;

    margin-left: 50%;

    transform: translateX(-50%);
}



.login__body, .login__footer {
    max-width: 381px;
    margin: 0 auto;
}

.login__body {
    margin-bottom: 20px;
}



.login__footer--flex {
    display: flex;
    flex-direction: column;
    gap: 12px;

    text-align: center;
}

.login__block-link {
    display: block;

    font-family: var(--main);
    font-weight: 700;
    font-size: 1.8rem;
    line-height: 2.4rem;
    color: #F65AFF;
    cursor: pointer;
}

.login__block-link--grey {
    color: #8A8A8A;
    text-decoration: underline!important;
}

/*form*/

.form__wrapper-group.form__wrapper-group--flex {
    max-width: 491px;
    display: flex;
    gap: 25px;
}

.form__group--login {
    width: 100%;
    max-width: 381px;

    position: relative;
}

.form__group.form__group--login:not(:last-of-type) {
    margin-bottom: 20px;
}

.form__group--password {
    position: relative;
    z-index: 1;
}

.form__label {
    display: block;
    margin-bottom: 10px;

    font-family: var(--main);
    font-weight: 700;
    font-size: 1.8rem;
    color: var(--white);
    line-height: 2.4rem;
}

.page--login .form__label {
    font-weight: 400;
    text-align: left;
}

.login__block-link.collapsed > .login__block-link-span {
    display: none;
}

.login__block-link.collapsed > span:first-of-type {
    display: block;
}

.login__block-link .login__block-link-span {
    display: block;
}

.login__block-link > span:first-of-type {
    display: none;
}

.page.page--login .form__group-btns {
    display: flex;
    justify-content: space-between;
}

.page.page--login .form__group-btns .price-item__button {
    width: 100%;
    font-family: var(--main);
    font-weight: 400;
    font-size: 18px;
}

.page.page--login .form__group-btns .price-item__button svg {
    top: 50%;
    transform: translateY(-50%);
}


.form__input {
    width: 100%;
    max-width: 381px;
    padding: 22.5px 15px;
    display: block;

    background-color: var(--white);
    border-radius: 21px;

    font-family: var(--main);
    font-weight: 400;
    font-size: 1.8rem;
    color: var(--white);
    line-height: 2.4rem;
    color: var(--black);
}

.form__input::placeholder {
    font-family: var(--main);
    font-weight: 400;
    font-size: 1.8rem;
    color: var(--white);
    line-height: 2.4rem;
    color: #A7A7A7;
}

.form__show-pass {
    position: absolute;
    top: 55px;
    right: 20px;
    z-index: 2;
}

.form__button-submit {
    padding: 20px 40px;
}

.form__group--center {
    text-align: center;
}


.form__group.form__group--filters {
    max-width: 491px;
    position: relative;
}

.form__group.form__group--without-label {
    padding-top: 5px;
}

.form__group.form__group--without-label .form__input-error {
    top: -25px;
}

.form__group.form__group--filters.error .form__input {
    border: 2px solid #FF6464;
}

.account__sidebar-head {
    display: flex;
    justify-content: space-between;
    align-items: start;
}

.form__input-error {
    display: none;
    font-family: var(--main);
    font-weight: 400;
    font-size: 1.8rem;
    color: var(--white);
    line-height: 2.4rem;
    color: #FF6464;

    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
}

.form__group.form__group--filters.error .form__input-error, .form__group.error .form__input-error {
    display: block;
}

.toggle-checkbox-wrapper {
    height: fit-content;
}

/*btn*/

/* .btn.btn--exit {
    margin-left: auto;
    margin-right: 36px;
} */

/*account__nav*/

.account {
    display: flex;
}

.account__sidebar {
    width: 100%;
    max-width: 240px;
}

.account__sidebar-logo {
    display: block;
    margin-bottom: 40px;
}

.account__sidebar-logo.account__sidebar-logo--mobile {
    display: none;
    position: absolute;
}

.account__sidebar-wrapper {
    min-height: 570px;
    padding-right: 46px;

    border-right: 1px solid rgba(255, 255, 255, .1);
}

.account__content {
    width: 100%;
}

.account__content-head {
    width: 100%;
    display: flex;
    justify-content: center;

    margin-bottom: 60px;
}

.account__content-head-title {
    margin-left: 50%;

    font-family: var(--main);
    font-weight: 700;
    font-size: 2rem;
    line-height: 2.7rem;
    color: var(--white);

    transform: translateX(-50%);
}

.account__content-head-block--right {
    display: flex;
    gap: 18.5px;
    align-items: center;
    margin-left: auto;
    margin-right: 36px;
}

.account__content-body {
    padding-bottom: 200px;
    height: 100%;
    min-height: 100vh;

    overflow-y: auto;

    position: relative;
}


.account__nav {
    display: flex;
    flex-direction: column;
    gap: 25px;
    padding-top: 19.5px;
    padding-left: 0;
}

.account__sidebar .account__nav {
    padding-top: 0px;
}

.account__nav-link {
    width: 100%;
    max-width: 194px;
    display: flex;
    justify-content: start;
    flex-direction: row-reverse;
    align-items: center;
    gap: 30px;

}

.account__nav-link span {
    display: block;

    font-family: var(--main);
    font-weight: 700;
    font-size: 1.8rem;
    color: var(--white);
    line-height: 2.4rem;

    transition: all .2s linear;
}

.account__nav-link:hover span {
    color: #F65AFF;

    transition: all .2s linear;


}

.account__nav-link svg path {
    transition: all .2s linear;
}

.account__nav-link:hover svg path {
    fill: #13E4FF;


    transition: all .2s linear;
}

.account__nav-link:hover svg g path {
    stroke: #13E4FF;
}

.account__nav-link:hover svg path {
    stroke: #13E4FF;

    transition: all .2s linear;
}

.account__nav-link.active span {
    color: #F65AFF;

    transition: all .2s linear;
}

.account__nav-link.active svg path {
    fill: #13E4FF;

    transition: all .2s linear;
}

.account__social-list {
    display: flex;
    justify-content: center;
    gap: 55px;
}

/*toggle*/




  .slider-btn {
    display: block;
    height: 100%;
    position: relative;

  }

  .slider-btn:before,
  .slider-btn:after {
      bottom: 0;
      content: '';
      display: inline-block;
      margin: auto;
    }

    /* ellipse */
    .slider-btn:before {
     background-color: #ffffff;
     border-radius: 50px;
     top: 0;
     height: 37px;
     width: 79px;
    }

    /* circle */
    .slider-btn:after {
      background-color:  #A7A7A7;
      border-radius: 50%;
      position: absolute;
      top: 50%;
      height: 25px;
      left: 10px;
      transition: .4s;
      width: 25px;

      transform: translateY(-50%);
    }

  .toggle-checkbox {
    /* hide the "default" checkbox/appearance */
    display: none;



  }


  /* ellipse appearance after checkbox-click */
  .toggle-checkbox:checked ~ .slider-btn:before {
      background-color: #ffffff;
    }

    /* circle appearance after checkbox-click */
    .toggle-checkbox:checked ~ .slider-btn:after {
      background-color: #13E4FF;
      transform: translateX(38px) translateY(-50%);
    }


/*setting*/


.setting__list {
    width: 100%;
    max-width: 565px;
    margin: 0 auto;
}

.setting__list-item-wrapper--change-fields {
    background: #272727;
    border: 1px solid var(--new-pink);
    border-radius: 23px;

    position: absolute;

}

.setting__list-item-wrapper--change-fields::after {
    content: "";
    width: 10px;
    height: 10px;
    display: block;

    /* border: 2px solid #ffffff;
    border-left: none;
    border-top: none; */

    position: absolute;
    top: 50%;
    right: 10px;
    z-index: 2;

    transform: rotate(45deg);
}

.setting__list-item-wrapper--change-fields.is-opened {
    z-index: 2;
}

.setting__list-item-wrapper--change-fields.is-opened .setting__list-item-form{
    height: auto;
    padding: 8px 0 12px 0;
    grid-template-rows: 1fr;
    opacity: 1;
    pointer-events: all;
    transition: all .2s linear;

}

.setting__list-item {
    min-height: 50px;
    display: flex;
    justify-content: space-between;

    padding: 12.5px 0;

    /* border-bottom: 1px solid rgba(191, 191, 191, .26); */

    position: relative;

}

.setting__list-item.setting__list-item--b-bottom {
    padding: 15px 0;

    border-bottom: 1px solid rgba(191, 191, 191, .26);
}


.setting__list-item.setting__list-item--large.setting__list-item--full-width {
    min-height: 92px;
    padding: 20px 0;

    border-bottom: 1px solid rgba(191, 191, 191, .26);
    border-top: 1px solid rgba(191, 191, 191, .26);
}

.setting__list-item.setting__list-item--checkboxs {
    justify-content: start;
    gap: 40px;
}

.setting__list-item.setting__list-item--checkboxs .new-checkbox__label.new-checkbox__label--rounded::after {
    border: 1px solid var(--new-pink);
}

.setting__list-item.setting__list-item--checkboxs .new-checkbox__label.new-checkbox__label--rounded::before {
    background: var(--new-pink);
}

.setting__list-item.setting__list-item--disebled {
    opacity: .15;
    pointer-events: none;
    border: none;
}

.setting__list-item--large {
    min-height: 65px
}

.setting__list-item-wrapper.setting__list-item-wrapper--change-password {
    width: 100%;
}



.setting__name {
    font-family: var(--main);
    font-weight: 400;
    font-size: 1.8rem;
    line-height: 2.4rem;
    color: var(--white);

    position: relative;
}

.setting__button {
    padding: 5px 29px;

    background: #503DFF;
    border-radius: 10px;

    font-family: var(--main);
    font-weight: 400;
    font-size: 1.8rem;
    line-height: 2.4rem;
    color: var(--white);

}

.setting__name.setting__name--change-field {
    padding: 10px 121px 10px 15px;

    position: relative;
}

.setting__name.setting__name--change-field::after {
    top: 45%;
    right: 15px;
    border: solid transparent;
    content: "";
    height: 8px;
    width: 8px;
    position: absolute;
    pointer-events: none;

    border-radius: 1px;
    border: 2px solid #fff;
    border-top: none;
    border-left: none;

    transform: rotate(45deg) translateY(-50%);
    transition: all .2s linear;

}

.setting__list-item-wrapper--change-fields.is-opened .setting__name.setting__name--change-field::after {
    right: 10px;
    transform-origin: center;
    transform: rotate(225deg) translateY(-43%);
    transition: all .2s linear;
}

.setting__list-item-wrapper .setting__list-item-form {
    display: grid;
    grid-template-rows: 0px;
    height: 0;

    opacity: 0;
    pointer-events: none;
    flex-direction: column;
    gap: 15px;

    /* padding-left: 8px; */
    padding: 0;

    transition: all .2s linear, opacity .01s linear;
}

.setting__list-item-wrapper .setting__list-item-form .form__input{
    max-width: 249px;
    margin: 0 auto;
    padding: 13px 22px;

    border-radius: 15px;
}

.setting__list-item-wrapper .setting__list-item-form .setting__button {
    width: fit-content;
    margin: 0 auto;
}

.setting__list-item-wrapper.setting__list-item-wrapper--change-fields .setting__button {
    margin-top: 23px;
}

.setting-forms {
    display: flex;
    flex-direction: column;
    gap: 25px;

    height: 0;
    margin-top: 0;

    opacity: 0;
    pointer-events: none;

    transition: all .2s linear;
}

.setting__list-item-wrapper--change-password.is-open .setting-forms {
    height: 301px;
    margin-top: 25px;

    opacity: 1;
    pointer-events: all;

    transition: all .2s linear;
}

.setting-form.setting-form--change--password {
    display: flex;
    flex-direction: column;
    gap: 15px;
    /* height: 0;
    margin-top: 0;

    opacity: 0;
    pointer-events: none; */

    transition: all .2s linear;
}

/* .setting__list-item-wrapper--change-password.is-open .setting-form.setting-form--change--password {
    height: 240px;
    margin-top: 25px;

    opacity: 1;
    pointer-events: all;

    transition: all .2s linear;

} */

.setting-form.setting-form--change--password .form__input {
    width: 100%;
    max-width: 100%;
    padding: 12.5px 14px;

    border-radius: 10px;
}


/*help*/

.help-account {
    width: 100%;
    max-width: 796px;
    margin: 0 auto;
}

.help-account__sub-title, .help-account__text-link {


    font-family: var(--main);
    font-weight: 400;
    font-size: 1.8rem;
    line-height: 2.4rem;
    color: var(--white);
    text-align: center;
}

.help-account__sub-title {
    margin-bottom: 20px;
}

.help-account__text-link {
    margin-bottom: 129px;
}

.help-account__link {

    color: #F65AFF;
    cursor: pointer;
    text-decoration: underline;
}


/*faq-account*/

.faq-account {
    width: 100%;
    max-width: 629px;
    margin: 0 auto;
}

.faq-account__list {
    min-height: 350px;
    max-height: 650px;
    display: flex;
    flex-direction: column;
    gap: 35px;
    margin-bottom: 100px;

    overflow-y: scroll;

}

.faq-account__list::-webkit-scrollbar {
    background-color: transparent; /* Фон скролбару */
    width: 5px;
    height: 80%;
}

.faq-account__list::-webkit-scrollbar-thumb:vertical {
    height: 5px; /* Висота повзунка */
    height: 80%;
}

/* Задаємо колір повзунка */
.faq-account__list::-webkit-scrollbar-thumb {
    background-color: #13e4ff; /* Колір повзунка */
    border-radius: 5px; /* Закруглені кути повзунка */
    width: 5px;
    height: 80%;
}

/* Задаємо ширину повзунка */
.faq-account__list::-webkit-scrollbar-thumb:horizontal {
    width: 5px; /* Ширина повзунка */
    height: 80%;
}

.faq-account__list-item {
    min-height: 96px;

    position: relative;

}

.faq-account__item {
    display: flex;
    justify-content: space-between;

    padding: 20px 40px;

    background-color: #1C1C1C;
    border: 1px solid #503DFF;
    border-radius: 20px;

    overflow: hidden;

    position: absolute;
    z-index: 2;

    /* transition: all .2s linear; */
}

.faq-account__item.is-open {
    min-height: 100%;
    height: auto;

    /* transition: all .2s linear; */

    z-index: 3;
}




.faq-account__item.is-open .faq-account__btn {
    transform: rotate(45deg);

    transition: all .2s linear;
}

.faq-account__item .faq-account__btn svg {
    width: 28px!important;
    height: 28px!important;
    display: block;
}

.faq-account__item .faq-account__btn svg rect {
    transition: all .2s linear;

}

.faq-account__item.is-open .faq-account__btn svg rect {
    transition: all .2s linear;

    fill: #F65AFF;
}

.faq-account__item-content {
    font-family: var(--main);
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 2.4rem;
    color: var(--white);
}

.faq-account__item-content-title {
    margin-bottom: 22px;
}

.faq-account__btn {
    width: 100%;
    height: 28px;
    display: block;

    margin-top: 13px;

    transition: all .2s linear;
}

.faq-account__btn svg {
    width: 100%;
}


/*membership*/


.membership {
    width: 100%;
    max-width: 930px;
    margin: 0 auto;
    /* margin-top: -40px; */
}

.membership__head {
    margin: 0 auto;
    margin-bottom: 46px;
}



.membership__title {
    margin-bottom: 7px;

    font-family: var(--main);
    font-weight: 700;
    font-size: 1.8rem;
    line-height: 2.4rem;
    color: var(--white);
    /* text-decoration: underline; */
    text-align: center;
}

.membership__head p {
    font-family: var(--main);
    font-weight: 400;
    font-size: 1.8rem;
    line-height: 2.4rem;
    color: var(--white);

    text-align: center;
}

.membership__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* gap: 20px; */
}

.membership__list .content__prices-item {
    width: 203px;
    max-width: 203px;
    min-height: 381px;
    height: 100%;
}

.membership__list .content__prices-item  .price-item {
    width: 100%;
    height: 100%;
}

.membership__list .price-item__list {
    padding: 0;
}

.membership__list .price-item__header::after {
    height: 6px;
}

.membership__list .content__prices-item .price-item__button {
    opacity: 0;
    transition: .1s linear;
}

.membership__list .content__prices-item:hover .price-item__button {
    opacity: 1;
    transition: .1s linear;
}

.membership__tabs-list {
    display: flex;

    border-bottom: 1px solid #333333;
}

.membership__tabs-list-button {
    padding: 6px 20px;

    border-radius: 4px 4px 0 0;

    font-family: var(--main);
    font-weight: 700;
    font-size: 1.8rem;
    line-height: 2.4rem;
    color: var(--white);

    text-align: center;

    transition: all .2s linear;
}

.membership__tabs-list-button:hover {
    background: #F65AFF;

    transition: all .2s linear;
}

.membership__payment-history {
    width: 100%;
}

.membership__payment-history thead th {
    padding: 15px 0;

    font-family: var(--main);
    font-weight: 400;
    font-size: 1.8rem;
    line-height: 2.4rem;
    color: var(--white);
    text-align: left;
}

.membership__payment-history tbody td {
    padding: 15px 0;

    font-family: var(--main);
    font-weight: 700;
    font-size: 1.8rem;
    line-height: 2.4rem;
    color: var(--white);
}

.membership__payment-history-item--in-process td:nth-child(2) {
    font-weight: 400;
    color: #FF9C3A;
}

.membership__payment-history-item--in-process td:nth-child(3) {
    font-weight: 400;
}

.membership__payment-history-item--in-process td:nth-child(4) {
    font-weight: 400;
    color: #FF9C3A;
}

.membership__payment-history-item--applied td:nth-child(2) {
    font-weight: 400;
    color:#00FF5D;
}

.membership__payment-history-item--applied td:nth-child(3) {
    font-weight: 400;

}

.membership__payment-history-item--applied td:nth-child(4) {
    font-weight: 400;
    color:#00FF5D;
}

.membership__payment-history-item--not-approved td:nth-child(2) {
    font-weight: 400;
    color:#FF6464;
}

.membership__payment-history-item--not-approved td:nth-child(3) {
    font-weight: 400;

}

.membership__payment-history-item--not-approved td:nth-child(4) {
    font-weight: 400;
    color:#FF6464;
}

.membership__information-title {
    margin-bottom: 26px;

    font-family: var(--main);
    font-weight: 700;
    font-size: 2rem;
    line-height: 2rem;
    color: var(--white);
    text-align: start;
}

.membership__details {
    display: flex;
    gap: 35px;
    margin-bottom: 36px;

    border-bottom: 1px solid #333333;
}

.membership__details-group {
    margin-bottom: 19px;
}

.membership__details-title {
    margin-bottom: 6px;

    font-family: var(--main);
    font-weight: 700;
    font-size: 1.8rem;
    line-height: 2.4rem;
    color: #8A8A8A;
    text-align: start;
}

.membership__details-text {
    font-family: var(--main);
    font-weight: 700;
    font-size: 1.8rem;
    line-height: 2.4rem;
    color: var(--white);
    text-align: start;
}

/*referrals*/

.referrals__block {
    width: 100%;
    max-width: 692px;
    padding: 30px 25px 45px 25px;
    margin: 0 auto;


    background: #272727;
    border: 1px solid #503DFF;
    border-radius: 20px;

    text-align: center;
}

.referrals__title {
    margin-bottom: 20px;

    font-family: var(--main);
    font-weight: 400;
    font-size: 1.8rem;
    line-height: 2.4rem;
    color: var(--white);
    text-transform: uppercase;
    text-align: center;
}

.referrals__text {
    width: 100%;
    max-width: 452px;
    margin: 0 auto;
    margin-bottom: 44px;

    font-family: var(--main);
    font-weight: 400;
    font-size: 1.8rem;
    line-height: 2.4rem;
    color: var(--white);

    text-align: center;
}

.referrals__info {
    display: flex;
    gap: 65px;
}

.referrals__info {
    width: 100%;
    max-width: 240px;
    margin: 0 auto;
    margin-bottom: 49px;

    font-family: var(--main);
    font-weight: 400;
    font-size: 1.8rem;
    line-height: 2.4rem;
    color: var(--white);
    text-wrap: nowrap;

}

.referrals__info-list li {
    display: flex;
    justify-content: space-between;
    gap: 7px;
    text-align: start;
}

.referrals__info-count {
    color: #F65AFF;
}

.referrals__share-btn {
    width: 100%;
    max-width: 252px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;

    padding: 5px 20px;

    background-color: #503DFF;
    border-radius: 10px;

    font-family: var(--main);
    font-weight: 400;
    font-size: 1.8rem;
    line-height: 2.4rem;
    color: var(--white);
    cursor: pointer;
}

.membership__current-details {
    display: flex;
    gap: 40px;
}

.membership__current-details-name {
    font-family: var(--main);
    font-weight: 700;
    font-size: 2.5rem;
    line-height: 3.3rem;
    color: var(--white);
}

.membership__current-details-price {
    margin-top: revert-layer;

    font-family: var(--main);
    font-weight: 700;
    font-size: 1.6rem;
    line-height: 2.1rem;
    color: var(--white);
}

.membership__current-details-list li {
    font-family: var(--main);
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 2.1rem;
    color: var(--white);
}

.membership__current-btn {
    width: 100%;
    max-width: 213px;
    display: flex;
    padding: 5px 10px;

    background: #503DFF;
    border-radius: 10px;
}

/*offers*/

.offers {
    width: 100%;
    max-width: 550px;
    display: block;
    margin: 0 auto;
}

/*offer*/

.offer {
    padding: 15px 20px;

    border: 1px solid var(--new-pink);
    border-radius: 15px;
    background: #272727;

    font-family: var(--main);
    font-weight: 400;
    font-size: 1.8rem;
    line-height: 2.4rem;
    color: var(--white);
    cursor: pointer;
}

.offers__list {
    width: 100%;
    max-width: 467px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: 0 80px;
    padding-right: 40px;
    /* overflow-y: scroll; */
    margin: 0 auto;
}

.offers__list.offers__list--notifications {
   max-width: 980px;
}

.offers__list .notifications--list {
    width: 100%;
    height: auto;
    margin-left: 0;
    margin-bottom: 20px;
}

.calendar__offers .offers__list li {
    /* margin-bottom: 20px; */
}

.offers .offers__list {
    padding: 0;
    padding-right: 20px;
    margin-right: 0;
}

.offers .offers__list li {
    margin-bottom: 15px;
}

.offers .offers__list > li {
    margin-bottom: 0px;
}

.offers .offers__list .offer__btn-list > li {
    margin-bottom: 0px;
}


/* .offers__list::-webkit-scrollbar {
    background-color: #fff;
    border-radius: 5px;
    width: 5px;
    height: 80%;
}

.offers__list::-webkit-scrollbar-thumb:vertical {
    height: 5px;
    height: 80%;
}

.offers__list::-webkit-scrollbar-thumb {
    background-color: #13e4ff;
    border-radius: 5px;
    width: 5px;
    height: 80%;
}


.offers__list::-webkit-scrollbar-thumb:horizontal {
    width: 5px;
    height: 80%;
} */

.offer__head {
    display: flex;
    gap: 15px;
    margin-bottom: 9px;

    font-weight: 700;
}

.offer__period {
    display: flex;
    align-items: center;
    gap: 15px;
    /* margin-bottom: 27px; */

    font-family: var(--new-font);
    font-size: 16px;
    /* font-weight: 300; */
    line-height: 18px;
    text-align: left;

}

.offer__btn-list {
    display: flex;
    gap: 35px;

}

.calendar__offers .offer__btn-list {
    width: 100%;
    gap: 15px;
}

.calendar__offers .offer__btn-list > li:first-of-type {
    width: 100%;
}

.offer__btn-list > li:first-of-type {
    width: 100%;
}

.offer__title {
    font-family: var(--new-font);
    font-size: 18px;
    font-weight: 700;
    line-height: 22px;
    text-align: left;
    color: var(--new-blue);
}

.offer__body {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    margin-bottom: 23px;
}

.offer__body.offer__body--recent-blocks {
    margin-bottom: 0px;
}

.offer__body.offer__body--recent-blocks {
    flex-direction: column;
}

.offer__wrapper.offer__wrapper--recent-blocks {
    display: flex;
    justify-content: space-between;
}

.offer__periods {
    display: flex;
}

.offers .offer__footer {
    display: block;
}

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

.offer__btn {
    width: 100px;
    max-width: 110px;
    min-width: 106px;
    display: block;
    padding: 12px 18px;

    background-color:  var(--new-pink);
    border-radius: 28px;

    text-align: center;
    text-wrap: nowrap;
    font-family: var(--main);
    font-size: 16px;
    font-weight: 400;
    line-height: 18px;
    text-align: center;


    transition: all .2s linear;
}

.offer__btn:hover {
    transition: all .2s linear;
    background-color: #8020e0;
}


.offer__btn.offer__btn--large {
    width: 100%;
    max-width: 100%;
}

.offer__btn--red {
    background: #E95656;
    transition: all .2s linear;
}

.offer__btn--red:hover {
    transition: all .2s linear;
    background-color: var(--hover-red);
}

.offer__price {
    /* padding: 8px 21px; */

    /* border-radius: 22px 0px 22px 0px;
    border-left: 1px solid #503DFF;
    border-top: 1px solid #503DFF;
    box-shadow: -5px -5px 6px #343434; */
}

.block-history .offer__price {
    padding: 8px 21px;

    border-radius: 22px 0px 22px 0px;
    border-left: 1px solid #503DFF;
    border-top: 1px solid #503DFF;
    box-shadow: -5px -5px 6px #343434;
}

.offer__price span {
    display: block;

    text-align: center;
    text-wrap: nowrap;
    white-space: nowrap
}

.offer__price-total {
    margin-bottom: 4px;

    font-family: var(--new-font);
    font-size: 24px;
    font-weight: 700;
    line-height: 28px;
    text-align: left;
    color: var(--white);
    cursor: pointer;



}

.offer__price-per-hour {
    font-family: var(--new-font);

    font-size: 1.8rem;
    line-height: 1.9rem;
    color: var(--white);
    cursor: pointer;

}

/*filters*/

.filters {
    width: 100%;
    max-width: 713px;
    margin: 0 auto;


}


.filters-block {
    padding: 22px 40px 10px 40px;
    background: #272727;
    border: 1px solid #503DFF;
    border-radius: 22px;
}

.filters-block.filters-block--new {
    max-width: 550px;
    margin: 0 auto;
    padding: 0;
}

#test-form {
    margin-bottom: 20px;
}

.filters-tabs__list {
    display: flex;
    padding: 0;
    margin-right: 30px;

    border-bottom: 1px solid #FFFFFF1A;
}

.filters-block.is-short .filters-tabs__list {
    border-bottom: none;
}

.filters-tabs__item.active .filters-tabs__btn {
    background-color: #F65AFF;
    transition: all .2s linear;
}

.filters-tabs__btn {
    padding: 11px 24px;

    border-radius: 4px 4px 0 0;

    font-family: var(--main);
    font-weight: 400;
    font-size: 18px;
    color: #fff;
    line-height: 24px;
    text-align: center;

    transition: all .2s linear;
}

.filters-tabs__btn:hover {
    background-color: #F65AFF;
    transition: all .2s linear;
}



.filters__head-list {
    display: flex;
    justify-content: space-between;

}

.filters__head-btn {
    font-family: var(--main);
    font-weight: 700;
    font-size: 1.8rem;
    line-height: 2.4rem;
    color: var(--white);
    cursor: pointer;
}

.filters__head-btn:hover {
    text-decoration: underline;
}

.filters__animation {
    transform: rotate(35deg);
    margin: 0 auto;
}

.filters__body {
    padding: 0 10px;

    background: #272727;
    border: 1px solid #503DFF;
    border-radius: 15px;
}

.filters__body.filters__body--recent {
    padding: 0;

    background: transparent;
    border: none;
}

.filters__body-head {
    display: flex;
    align-items: center;
    margin-bottom: 10px;

    text-align: center;

    border-bottom: 1px solid #FFFFFF1A;

    position: relative;
    z-index: 1;
}

.filters__profiles-retutn-btn {
    margin-right: 134px;
}

.filters__btn-list .filters__btn-item:nth-child(2) .filters__btn {
    background: #7E70FF;
}

.filters__btn-list .filters__btn-item:nth-child(3) .filters__btn {
    background: #8A8A8A;
}

.filters__new-profile .form__group .filters__btn {
    background: #7E70FF;
}

.filters__new-profile {
    width: 100%;
    max-width: 427px;
    height: 0;
    display: block;
    align-items: center;


    /* background-image: url(../image/new_profile.svg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat; */
    /* border-radius: 10px; */

    overflow: hidden;

    position: absolute;
    top: 55px;
    left: 25px;
    z-index: 2;

    transition: all .1s linear;
}

.filters__new-profile.active {
    height: 85px;

    transition: all .1s linear;
}

.filters__new-profile-wrapper {
    position: relative;
    z-index: 2;
}

.filters__new-profile::after {
    content: "";
    width: 100%;
    height: 100%;
    display: block;

    background-image: url(../image/new_profile.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

    position: absolute;
    top: 0;
    z-index: -1;
}

.filters__new-profile .form__group {
    display: flex;
    align-items: center;
    gap: 17px;
    padding: 15px 20px;

}

.form__input.form__input--filters {
    max-width: 287px;
    height: 49px;

    border-radius: 10px;
}

.filters__profiles-retutn-btn {
    width: 30px;
    height: 30px;
    display: block;

    background: #272727;
    border-radius: 5px;
    box-shadow: -5px -5px 6px #343434;

    position: relative;
    z-index: 1;
}

.user-settings {
    display: flex;
    flex-direction: column;
    gap: 20px;

    margin-top: 20px;
    padding: 0;
}

.user-settings.is-short > li {
    display: none;
}

.user-settings.is-short > li:first-of-type {
    display: flex;
}


.filters__profiles .filters__body-head {
    padding-bottom: 20px;
}

.filters__profiles-retutn-btn::after {
    content: "";
    width: 100%;
    height: 100%;
    display: block;

    box-shadow: 3px 3px 6px #00000063;

    position: absolute;
    top: 0;
    z-index: 2;

    pointer-events: none;
}

.filters__btn-list {
    display: flex;
    justify-content: center;
    gap: 50px;
}

.filters__body-head-title {
    font-family: var(--main);
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 2.1rem;
    color: #13E4FF;

}

.filters__btn {
    margin: 15px auto;
    padding: 5px 20px;

    background: #F65AFF;
    border-radius: 10px;


    font-family: var(--main);
    font-weight: 400;
    font-size: 1.8rem;
    line-height: 2.4rem;
    color: var(--white);
    cursor: pointer;
}

.filters__option {
    /* width: fit-content;
    height: 46px; */
    padding: 11px 15px;
    padding-bottom: 15px;

    border: 1px solid #503DFF;
    border-radius: 23px;
}


.filters__search-block {
    /* margin-bottom: 10px; */

    position: relative;
    z-index: 1;
}

/* .loader::after {
    content: url("data:image/svg+xml;utf8,<svg width='100' height='100' viewBox='0 0 124 124' fill='none' xmlns='http://www.w3.org/2000/svg'><g filter='url(%23filter0_b_181_147)'><rect width='124' height='124' rx='62' fill='url(%23paint0_linear_181_147)' fill-opacity='0.3'/></g><defs><filter id='filter0_b_181_147' x='-126.141' y='-126.141' width='376.281' height='376.281' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'><feFlood flood-opacity='0' result='BackgroundImageFix'/><feGaussianBlur in='BackgroundImageFix' stdDeviation='63.0704'/><feComposite in2='SourceAlpha' operator='in' result='effect1_backgroundBlur_181_147'/><feBlend mode='normal' in='SourceGraphic' in2='effect1_backgroundBlur_181_147' result='shape'/></filter><linearGradient id='paint0_linear_181_147' x1='1.33539' y1='3.03922' x2='104.206' y2='54.6021' gradientUnits='userSpaceOnUse'><stop stop-color='white' stop-opacity='0.4'/><stop offset='1' stop-color='white' stop-opacity='0.1'/></linearGradient></defs></svg>");
    width: 100px;
    height: 100px;
    display: block;

    background-color: #1c1c1c;
    border-radius: 50%;
    box-shadow: -1px 1px 21px -2px rgba(0,0,0,0.75) inset;
-webkit-box-shadow: -1px 1px 21px -2px rgba(0,0,0,0.75) inset;
-moz-box-shadow: -1px 1px 21px -2px rgba(0,0,0,0.75) inset;

    position: absolute;
    top: 50% !important;
    left: 50%;
    z-index: -1;

    transform: translate(-50%, -50%);
} */

/* .filters__search-block::after {


} */

.filters__search-btn {
    width: 100%;
    display: block;
    max-width: 44px;
    margin: 0 auto;

    font-family: var(--main);
    font-weight: 700;
    font-size: 1.8rem;
    color: var(--white);
    text-align: center;

    position: relative;
    bottom: 10px;
    z-index: 999;
}

.filters__search-btn.active .filters__search-btn-start {
    display: none;
}

.filters__search-btn-stop {
    display: none;
}

.filters__search-btn.active .filters__search-btn-stop {
    display: block;
}
/* .filters__option:hover {
    min-height: 166px;
} */

/* .filters__search-btn::after {
    content: "";
    width: 36px;
    height: 40px;
    display: block;

    background-image: url(../image/polygon.svg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    position: absolute;
    top: -96px;
    left: 56%;
    z-index: 2;

    transform: translate(-50%, 50%);
} */

/* .filters__search-btn::before {
    content: "";
    width: 40px;
    height: 40px;
    display: none;

    background-image: url(../image/rectangle.svg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    position: absolute;
    top: -104px;
    left: 53%;
    z-index: 2;

    transform: translate(-50%, 50%);
} */

.filters__search-btn.active::after {
    display: none;
}

.filters__search-btn.active::before {
    display: block;
}

.filters__option-btn {
    min-width: 179px;
    margin-bottom: 20px;
    padding-right: 57px;

    font-family: var(--main);
    font-weight: 700;
    font-size: 1.8rem;
    line-height: 2.4rem;
    color: var(--white);
    text-align: start;
    cursor: pointer;

    position: relative;
    /* z-index: 1; */
}

/* .filters__option-btn::after {
    content: "";
    width: 14px;
    height: 10px;
    display: inline-block;

    background-image: url('../image/filter/btn-arr.svg');
    background-size: cover;

    position: absolute;
    top: 30%;
    right: 0;
    z-index: 2;

    transition: all .1s linear;
} */

/* .filters__option:hover .filters__option-btn::after {
    transform: rotate(90deg);

    transition: all .1s linear;
} */

.filters.filters--select.open .filters__body-list {
    max-height: 325px;
}

.filters__body-list {
    height: 100%;
    max-height: 90vh;
    display: block;
    flex-direction: column;
    gap: 14px;

    overflow-y: scroll;
}

/* Задаємо колір фону */
.filters__body-list::-webkit-scrollbar {
    background-color: transparent; /* Фон скролбару */
    width: 5px;
    height: 80%;
}

.filters__body-list::-webkit-scrollbar-thumb:vertical {
    height: 5px; /* Висота повзунка */
    height: 80%;
}

/* Задаємо колір повзунка */
.filters__body-list::-webkit-scrollbar-thumb {
    background-color: #13e4ff; /* Колір повзунка */
    border-radius: 5px; /* Закруглені кути повзунка */
    width: 5px;
    height: 80%;
}

/* Задаємо ширину повзунка */
.filters__body-list::-webkit-scrollbar-thumb:horizontal {
    width: 5px; /* Ширина повзунка */
    height: 80%;
}

.filters__body-list-item {
    /* height: 46px; */
    margin-bottom: 20px;

    background: #272727;

    position: relative;
    /* z-index: 1; */
}

.filters__option {
    min-width: auto;

    background: #272727;
    box-shadow: -5px -5px 6px #343434;

    /* position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    overflow: hidden; */

    transition: all .2s linear;
}

/* .filters__option-contant {
    width: 0;
    height: 0;
    display: grid;
    grid-template-columns: 0fr;
    grid-template-rows: 0fr;
    margin: 0 auto;

    transition: all .2s linear;
} */

.filters__option-contant.filters__option-contant--flex {
    display: flex;
    gap: 15px;
}

.filters__option-contant.filters__option-contant--flex .filters__option-label {
    text-align: start;
}

/* .filters__option-group {
    margin: 0 auto;

    padding: 0;
    opacity: 0;
    appearance: none;
    visibility: hidden;

    transition: all .2s linear;
} */

.filters__option-label {
    display: block;
    margin-bottom: 10px;

    font-family: var(--main);
    font-weight: 400;
    font-size: 1.8rem;
    line-height: 2.4rem;
    color: var(--white);
    text-align: left;
    cursor: pointer;
}

/* .filters__option:hover {
    min-width: 310px;
    height: auto;

    z-index: 4;

    transition: all .2s linear;
} */

.filters__option.filters__option--flex {
    /* width: fit-content;
    min-width: 371px; */
    height: 46px;
    padding: 5px;
    padding-left: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    transition: all .2s linear;
}



.filters__option.filters__option--flex .toggle-checkbox-wrapper {
    margin-bottom: -4px;
}

/* .filters__option.filters__option--flex:hover {
    min-height: 46px;
    height: 46px;
    width: fit-content;
    min-width: 371px;

    transition: all .2s linear;
} */

.filters__option:hover .filters__option-btn {
    width: 100%;
}

/* .filters__option:hover .filters__option-btn::after {
    transform: rotate(180deg);
} */

/* .filters__option:hover .filters__option-contant {
    width: fit-content;
    height: auto;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;

    transition: all .2s linear;

    overflow: visible;
} */

/* .filters__option:hover .filters__option-contant .filters__option-group {
    transition: all .2s linear;

    padding: 20px;
    opacity: 1;
    appearance: normal;
    visibility: visible;
} */

.filters__option-name {
    font-family: var(--main);
    font-weight: 700;
    font-size: 1.8rem;
    line-height: 2.4rem;
    color: var(--white);
    text-align: start;
}


.filters__option-input {
    width: 100%;
    max-width: 135px;

    padding: 7px 11px;

    border: 4px solid #393939;
    border-radius: 15px;

    font-family: var(--main);
    font-weight: 700;
    font-size: 2rem;
    line-height: 2.6rem;
    color: var(--white);
    cursor: pointer;
}


/*block-history*/

.block-history {
    width: 100%;
    max-width: 511px;
    display: block;

    margin: 0 auto;
}

.block-history__head-list {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 26px;
}

.block-history__content-list {
    max-height: 85vh;
    padding-right: 20px;
    margin-right: -20px;

    overflow-y: scroll;
}

.block-history__offers-head-btn {
    width: 100%;
    max-width: 107px;
    padding: 5px 20px;
    margin-bottom: 20px;
    background-color: #F65AFF;
    border-radius: 10px;
    font-family: var(--main);
    font-weight: 400;
    font-size: 1.8rem;
    line-height: 2.4rem;
    color: var(--white);
    cursor: pointer;
    text-align: center;
}

/* Задаємо колір фону */
.block-history__content-list::-webkit-scrollbar {
    background-color: transparent; /* Фон скролбару */
    width: 5px;
    height: 80%;
}

.block-history__content-list::-webkit-scrollbar-thumb:vertical {
    height: 5px; /* Висота повзунка */
    height: 80%;
}

/* Задаємо колір повзунка */
.block-history__content-list::-webkit-scrollbar-thumb {
    background-color: #13e4ff; /* Колір повзунка */
    border-radius: 5px; /* Закруглені кути повзунка */
    width: 5px;
    height: 80%;
}

/* Задаємо ширину повзунка */
.block-history__content-list::-webkit-scrollbar-thumb:horizontal {
    width: 5px; /* Ширина повзунка */
    height: 80%;
}

.block-history__content-list li:not(:last-of-type) {
    margin-bottom: 28px;
}

.block-history__head-title {
    font-family: var(--main);
    font-weight: 700;
    font-size: 1.8rem;
    line-height: 2.4rem;
    color: var(--white);
    cursor: pointer;
    text-align: center;
}

.block-history__item-title {
    margin-bottom: 14px;

    font-family: var(--main);
    font-weight: 700;
    font-size: 1.8rem;
    line-height: 2.4rem;
    color: var(--white);
    cursor: pointer;
    text-align: start;
}

.block-history__content-item {
    padding-left: 20px;
    padding-top: 15px;

    border: 1px solid #503DFF;
    border-radius: 22px;
}

.block-history__content-item {
    background: #272727;
}

.block-history__period {
    margin-bottom: 14px;
}

.block-history__item-body {
    font-family: var(--main);
    font-weight: 400;
    font-size: 1.8rem;
    line-height: 2.4rem;
    color: var(--white);
    cursor: pointer;
    text-align: start;
}

.block-history__reason {
    margin-left: 32px;
}

.block-history__item-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;

    font-family: var(--main);
    font-weight: 400;
    font-size: 1.8rem;
    line-height: 2.4rem;
    color: var(--white);
    cursor: pointer;
    text-align: center;
}

.block-history__item-time {
    margin-left: 32px;
}

.calendar {
    width: 100%;
    max-width: 668px;
    margin: 0 auto;
    display: flex;
    gap: 44px;
    flex-direction: column;

}

.calendar__day-list {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.calendar .offers__list {
    padding: 0;
    padding-right: 10px;
}

.calendar__offers-head {
    margin-bottom: 25px;

    text-align: center;

}

.calendar__offers {
    width: 100%;
}

.calendar__offers .offers__list {
    gap: 8px;
}

.calendar__offers-head-btn {
    width: 100%;
    max-width: 147px;
    padding: 12px 10px;

    background-color: transparent;
    border-radius: 30px;
    border: 1px solid var(--new-pink);

    font-family: var(--main);
    font-weight: 400;
    font-size: 1.8rem;
    line-height: 2.4rem;
    color: var(--white);
    cursor: pointer;
    text-align: center;

    transition: all .2s linear;
}

.calendar__offers-head-btn:hover {
    transition: all .2s linear;
    background-color:  var(--new-pink);
}

.calendar__day-item {
    width: 61px;
    max-height: 61px;
    padding: 10px;

    background: #272727;
    border: 1px solid #18DCFF;
    border-radius: 15px;

    font-family: var(--main);
    font-weight: 400;
    font-size: 1.8rem;
    line-height: 2rem;
    color: var(--white);
    cursor: pointer;
    text-align: center;

    transition: all .2s linear;
}

.calendar__day-item > span:first-of-type {
    font-family: var(--new-font);
    font-size: 14px;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
    color: var(--white);
}

.calendar__day-item > span:last-of-type {
    font-family: var(--new-font);
    font-size: 14px;
    font-weight: 400;
    line-height: 15px;
    text-align: center;
    color: var(--white);

}

.calendar__day-item:hover {
    background: #18DCFF;
    transition: all .2s linear;
}

.calendar__day-item.active {
    background: #18DCFF;
    transition: all .2s linear;
}

.calendar__day-list li:not(:last-of-type) {
    margin-bottom: 16px;
}

/*earnings*/

.earnings {
    width: 100%;
    max-width: 960px;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
}

.earnings__chart {
    width: 100%;
    max-width: 460px;
}

.earnings__chart-head {
    display: flex;
    justify-content: space-between;
}

.earnings__chart-period, .earnings__chart-label {
    font-family: var(--main);
    font-weight: 400;
    font-size: 1.8rem;
    line-height: 2.4rem;
    color: var(--white);
    cursor: pointer;
    text-align: left;
}

.highcharts-figure,
.highcharts-data-table table {
    min-width: 360px;
    max-width: 800px;
    margin: 1em auto;
}

.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid #ebebeb;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}

.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}

.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
    padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}

.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

.earnings__chart-body {
    position: relative;
    z-index: 1;
}

#charter_earnings, #charter_weekly {
    width: 460px!important;
    height: 320px!important;

    font-family: var(--main)!important;
    font-weight: 400;
    font-size: 1.2rem;
    line-height: 2.4rem;
    color: var(--white)!important;
    cursor: pointer;
    text-align: left;

    position: relative;
    z-index: 2;

    object-fit: fill;
}

.chart-body-bg {
    position: relative;
    z-index: 1;
}

.chart-body-bg::after {
    content: "";
    width: 92%;
    height: 90%;
    display: block;

    border-radius: 20px;
    background: rgb(50,42,123);
background: linear-gradient(180deg, rgba(50,42,123,1) 0%, rgba(5,5,8,1) 100%);
border: 1px solid #503DFF;

    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
}

.earnings__chart-label {
    display: block;

    position: relative;
    z-index: 1;
}

.earnings__chart-head {
    margin-bottom: 20px;
}

.earnings__chart-label::after {
    content: "";
    width: 45px;
    height: 20px;
    display: block;

    background-color: #13E4FF;
    border-radius: 10px;

    position: absolute;
    top: 10%;
    left: -40%;
    z-index: 4;
}

.earnings__chart-label.earnings__chart-label--blue::after {
    background-color: #F65AFF;
}

.burger__btn.burger__btn--sidebar {
    display: none;
    position: absolute;
}

.btn.btn--exit.btn--exit--mobile {
    display: none;
    position: absolute;
}

.stantions-block {
    width: 100%;
    max-width: 485px;
    margin: 0 auto;

    /* position: absolute;
    left: 50%;

    z-index: -1;
    transform: translateX(-50%); */

    /* transition: all .4s linear; */
}

.stantions-block.open {
    transition: all .4s linear;
    z-index: 1;
}

.stantions-block__list-wrapper {
    /* padding:  25px 24px 25px 54px; */
    /* background-color: #000; */
    /* box-shadow: inset 0px 0px 30px rgba(0, 0, 0, 0.5);
    border-radius: 18px; */
}

.stantions-block__list {
    width: 100%;
    max-width: 485px;
    height: 213px;
    display: flex;
    flex-direction: column;
    gap: 10px;


    margin: 0 auto;

    overflow-y: auto;
}

/* Задаємо колір фону */
.stantions-block__list::-webkit-scrollbar {
    background-color: transparent; /* Фон скролбару */
    width: 5px;
    height: 80%;
}

.stantions-block__list::-webkit-scrollbar-thumb:vertical {
    height: 5px; /* Висота повзунка */
    height: 80%;
}

/* Задаємо колір повзунка */
.stantions-block__list::-webkit-scrollbar-thumb {
    background-color: #13e4ff; /* Колір повзунка */
    border-radius: 5px; /* Закруглені кути повзунка */
    width: 5px;
    height: 80%;
}

.stantions-block__list-item {
    margin: 10px 0;
    position: relative;

    /* margin-bottom: 10px;
    margin-right: 30px; */
}

.filters__body-head--stations .new-button.new-button--middle {
    max-width: 377px;
}

.stantions-block__title {
    margin-bottom: 11px;

    font-family: var(--new-font);
    font-size: 18px;
    font-weight: 400;
    color: #ffffff;
    line-height: 24px;
    text-align: center;


}

.filters.filters--select {
    max-width: 647px;

    transition: all .2s linear;

}

.filters--select.open {
    margin-top: 312px;

    transition: all .2s linear;
}

.filters--select.open .setting__button-toggle-arr span::after {
    right: -5px;

    /* transition: all .2s linear; */
    transform: rotate(225deg) translateY(0%);
}

.filters.filters--select .filters__body-list {
    padding-left: 60px;
    padding-right: 25px;
    margin-right: 34px;
}

.form-group.form-group--checkbox {
    position: relative;
}

.form-group__checkbox-input {
    position: absolute;

    opacity: 0;
    visibility: hidden;
}

.form-group__checkbox-label {
    width: 100%;
    max-width: 377px;
    /* height: 42px; */
    display: block;

    padding: 10px 20px;
    margin: 0 auto;

    border-radius: 10px;
    background-color: #272727;
    border: 1px solid
    #18DCFF;

    font-family: var(--main);
    font-size: 16px;
    font-weight: 400;
    color: #ffffff;
    line-height: 18px;
    text-align: center;
    cursor: pointer;

    transition: all .2s linear;
}

.form-group__checkbox-label:hover {
    transition: all .2s linear;

    color: #000000;
    background: #fff;
}

.form-group__checkbox-input:checked + .form-group__checkbox-label {
    color: #000000;
    background: #fff;
}

.setting__button.setting__button--large {
    width: 100%;
    max-width: 485px;
}

.setting__button--pink {
    transition: all .2s linear;
    background-color: #F65AFF;
}

.setting__button--pink:hover {
    transition: all .2s linear;
    background-color: var(--hover-pink);
}


.filters__body-head--setting {
    margin-top: 21px;
    margin-bottom: 28px;
    justify-content: center;
    border: none;

}


.setting__button-toggle-arr {
    width: 25px;
    height: 25px;

    position: absolute;
    right: 32px;
}

.setting__button-toggle-arr span {
    display: block;

    position: relative;
}

.setting__button-toggle-arr span::after {
    content: "";
    width: 20px;
    height: 20px;
    display: block;

    border: 3px solid #fff;
    border-top: none;
    border-left: none;
    border-radius: 1px;

    position: absolute;
    top: 50%;
    right: 10px;
    z-index: 2;
    transform: rotate(45deg) translateY(-100%);
    /* transition: all .2s linear; */
}

/*notification*/

/* .header-notification__btn:hover .header-notification__btn-icon {
    animation: ani 1s forwards;

} */

.header-notification {
    position: relative;
    z-index: 2;
}

.header-notification__btn {
    display: block;
}

.header-notification__list-wrapper {
    width: 270px;
    /* height: 260px; */

    background: #272727;
    border-radius: 15px;
    border: 1px solid #FFFFFF1A;

    position: absolute;
    right: -18px;
    top: -136px;
    z-index: 3;

    /* visibility: hidden; */
    pointer-events: none;

    opacity: 0;

    transition: top .4s, opacity .4s;
}

.header-notification__list-wrapper.visible {
    top: 36px;
    opacity: 1;
    /* visibility: visible; */
    pointer-events: all;
    transition: top .4s, opacity .4s;
}

.header-notification__list-block {
    width: 100%;
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 10px;

    position: relative;
}

.header-notification__list {
    width: 100%;
    height: 230px;
    padding: 0 20px 0 20px;

    font-family: var(--main);
    font-size: 16px;
    font-weight: 400;
    line-height: 21px;
    color: #FF6464;

    overflow-y: auto;
}

    /* Задаємо колір фону */
    .header-notification__list::-webkit-scrollbar {
        background-color: #fff; /* Фон скролбару */
        border-radius: 5px;
        width: 5px;
        height: 80%;
    }

    .header-notification__list::-webkit-scrollbar-thumb:vertical {
        height: 5px; /* Висота повзунка */
        height: 80%;
    }

    /* Задаємо колір повзунка */
    .header-notification__list::-webkit-scrollbar-thumb {
        background-color: #13e4ff; /* Колір повзунка */
        border-radius: 5px; /* Закруглені кути повзунка */
        width: 5px;
        height: 80%;
    }

    /* Задаємо ширину повзунка */
    .header-notification__list::-webkit-scrollbar-thumb:horizontal {
        width: 5px; /* Ширина повзунка */
        height: 80%;
    }

.header-notification__list-item {
    padding-bottom: 20px;
    padding-top: 12px;

    border-bottom: 1px solid #FFFFFF1A;
}

.header-notification__list-item:nth-child(2n) {
    color: #13E4FF;
}


.header-notification__list-item:nth-child(3n) {
    color: #F65AFF;
}

.header-notification__list-item:nth-child(4n) {
    color: #FF9C3A;
}

.header-notification__list-item:nth-child(5n) {
    color: #ffffff;
}

.header-notification__list-item:last-of-type {
    border-bottom: none;
}

.header-notification__list-block:after, .header-notification__list-block:before {
	bottom: 100%;
	left: 90%;
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.header-notification__list-block:after {
	border-color: rgba(136, 183, 213, 0);
	border-bottom-color: #272727;
	border-width: 9px;
	margin-left: -9px;
}
.header-notification__list-block:before {
	border-color: rgba(194, 225, 245, 0);
	border-bottom-color: #FFFFFF1A;
	border-width: 11px;
	margin-left: -11px;
}

.header-notification__list-item-period {
    width: 100%;
    margin-bottom: 8px;

    color: #676767;
}

.header-notification__btn:hover .header-notification__btn-icon {
    animation: ani 1s forwards;
}

.header-notification__btn.has-notifications {
    position: relative;
}

.header-notification__btn.has-notifications::after {
    content: "";
    width: 10px;
    height: 10px;
    display: block;

    border: 2px solid #1C1C1C;
    background-color: #18DCFF;
    border-radius: 50%;

    position: absolute;
    top: -1px;
    right: 0;
}

@keyframes ani {
    10% {
        transform: rotate(15deg);
    } 20% {
        transform: rotate(-15deg);
    } 30% {
        transform: rotate(15deg);
    } 50% {
        transform: rotate(0deg);
    }

}

/*offers__list*/

.offers__list li:nth-child(2n) .notifications--list {
    color: #13E4FF!important;
}


.offers__list li:nth-child(3n) .notifications--list {
    color: #F65AFF!important;
}

.offers__list li:nth-child(4n) .notifications--list {
    color: #FF9C3A!important;
}

.offers__list li:nth-child(5n) .notifications--list {
    color: #ffffff!important;
}

.offers__list li .notifications--list .notifications__day {
    color: #676767!important;
}

.offers__list li .notifications--list .notifications__time {
    color: #676767!important;
}

/*subscribe message*/
.account__content-message {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 97px 20px;

    background: #00000026;
    border-radius: 30px;

    backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(50px);



    position: absolute;
    left: 0;
    top: -100%;
    z-index: 2;

    transition: all .3s linear;
}

.account__content-message.visible {
    top: 0;
    transition: all .3s linear;
}

.account__content-message-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

.account__content-message-text p, .account__content-message-link {
    margin: 0;
    font-family: var(--main);
    font-weight: 400;
    font-size: 20px;
    text-align: left;
    color: #fff;
}

.account__content-message-text {
    display: flex;
}

.account__content-message-link {
    display: block;

    margin-left: 8px;
    color: #13E4FF;
    text-decoration: underline!important;
    cursor: pointer;

    position: relative;
}

.account__content-message-link::after {
    content: ".";
    display: block;

    color: #fff;

    position: absolute;
    right: -7px;
    bottom: -3px;
}

.btn.btn--exit {
    font-family: var(--main);
    font-weight: 700;
    font-size: 2rem;
    line-height: 2.6rem;
    color: var(--white);
    text-align: left;

    position: relative;
    z-index: 2;
}

.btn.btn--exit:hover {
    color: var(--white);
}

.account__content-message-btn, .filter-block__btn-close {
    width: 25px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;

    position: absolute;
    top: 27%;
    right: 17%;

    transition: all .2s linear;

    /* Встановлення центру обертання в центр кнопки */
    transform-origin: 50% 50%;
    transform-box: fill-box;
}

.filter-block__btn-close {
    top: 40px;
    right: 28px;
}

.account__content-message-btn:hover, .filter-block__btn-close:hover {

    transform: rotate(90deg) translateX(-4px) translateY(4px);
}




.account__content-message-btn span, .filter-block__btn-close span{
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
    z-index: 1;
}

.account__content-message-btn span:after, .account__content-message-btn span:before, .filter-block__btn-close span:after, .filter-block__btn-close span::before {
    content: "";
    width: 8px;
    height: 28px;
    display: block;

    background-color: #f65aff;
    border-radius: 30px;

    position: absolute;
    top: -25%;
    left: 25%;
    z-index: 1;
}

.account__content-message-btn span:after, .filter-block__btn-close span:after {
    transform: rotate(-45deg) ;
}


.account__content-message-btn span::before, .filter-block__btn-close span::before {
    transform: rotate(45deg) ;
}

/*user fillers*/

.user-settings__item {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 28px 20px 28px 20px;
    background: #272727;
    border: 1px solid #503DFF;
    border-radius: 22px;
}

.user-settings__item-controlls {
    display: flex;
    gap: 24px;
}

.user-settings__item-name {
    font-family: var(--main);
    font-weight: 400;
    font-size: 20px;
    text-align: left;
    color: #fff;
    text-align: center;
}

/*btn-new*/

.btn-new {
    width: 100px;
    max-width: 110px;
    display: block;
    padding: 5px 10px;

    background-color: #503DFF;
    border-radius: 10px;

    font-family: var(--main);
    font-weight: 400;
    font-size: 20px;
    text-align: left;
    color: #fff;
    text-align: center;

    transition: all .2s linear;
}

.btn-new:hover {
    background-color: var(--hover-blue);
    transition: all .2s linear;
}

.btn-new--red {
    background-color: #E95656;
    transition: all .2s linear;
}

.btn-new--red:hover {
    background-color: var(--hover-red);
    transition: all .2s linear;
}

.filters-block {
    position: relative;
}



.filters-block__tab {
    display: none;
    flex-direction: column;
    row-gap: 15px;
}

.filters-block__tab.active {
    display: flex;
    padding-left: 5px;
}

.filters-block__group-block-title.filters-block__group-block-title--flex {
    /* max-width: 596px; */
    display: flex;
    /* justify-content: space-between; */
    align-items: center;
    gap: 8px;
}

.filters-block__group-block-title.filters-block__group-block-title--station {
    position: relative;
}

.filters-block__group-block-title.filters-block__group-block-title--station::before {

    content: url("data:image/svg+xml;utf8,<svg width='18' height='16' viewBox='0 0 18 16' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M16.4306 5.65978C16.1024 5.6121 15.7892 5.49099 15.5142 5.30547C15.2393 5.11995 15.0098 4.8748 14.8427 4.58827C14.6757 4.30174 14.5754 3.98121 14.5494 3.65056C14.5234 3.31991 14.5723 2.98765 14.6925 2.67853C14.7689 2.47644 14.7802 2.2555 14.7247 2.04669C14.6692 1.83788 14.5498 1.65166 14.3831 1.51415C13.6474 0.896341 12.81 0.411004 11.9081 0.0797798C11.7028 0.00349522 11.4786 -0.00603597 11.2675 0.0525441C11.0564 0.111124 10.8692 0.234827 10.7325 0.40603C10.5268 0.669085 10.2639 0.881841 9.96369 1.02816C9.66351 1.17448 9.33396 1.25053 9.00001 1.25053C8.66607 1.25053 8.33651 1.17448 8.03633 1.02816C7.73615 0.881841 7.47323 0.669085 7.26751 0.40603C7.13084 0.234827 6.94362 0.111124 6.73253 0.0525441C6.52144 -0.00603597 6.29724 0.00349522 6.09189 0.0797798C5.2592 0.385579 4.48066 0.822322 3.78564 1.37353C3.61044 1.51222 3.48425 1.70336 3.42555 1.91896C3.36684 2.13456 3.3787 2.36329 3.45939 2.57165C3.58919 2.88895 3.64282 3.23226 3.61597 3.57403C3.58913 3.9158 3.48256 4.24652 3.30481 4.53967C3.12707 4.83281 2.88309 5.08022 2.59246 5.26204C2.30183 5.44386 1.97262 5.55504 1.63126 5.58666C1.40964 5.61035 1.20148 5.70458 1.03744 5.85546C0.87339 6.00634 0.762121 6.20591 0.720012 6.42478C0.615273 6.94324 0.562512 7.47085 0.562512 7.99978C0.561742 8.44259 0.597488 8.88472 0.669387 9.32166C0.705171 9.54754 0.81437 9.75534 0.980101 9.91294C1.14583 10.0705 1.35887 10.1691 1.58626 10.1935C1.93512 10.2263 2.27106 10.3421 2.56597 10.5313C2.86088 10.7205 3.10617 10.9776 3.28132 11.2811C3.45646 11.5846 3.55637 11.9256 3.57267 12.2756C3.58897 12.6256 3.52119 12.9745 3.37501 13.2929C3.27935 13.5 3.25562 13.7332 3.30759 13.9554C3.35956 14.1775 3.48426 14.376 3.66189 14.5192C4.3932 15.1257 5.22258 15.6032 6.11439 15.931C6.22843 15.9705 6.34808 15.9914 6.46876 15.9929C6.63423 15.9925 6.79721 15.9525 6.94401 15.8762C7.09082 15.7998 7.21719 15.6894 7.31251 15.5542C7.513 15.2621 7.78174 15.0233 8.09542 14.8586C8.4091 14.6939 8.75823 14.6083 9.11251 14.6092C9.45578 14.6096 9.7942 14.6902 10.1008 14.8445C10.4075 14.9988 10.6739 15.2225 10.8788 15.4979C11.0151 15.6811 11.2081 15.8141 11.4279 15.8762C11.6476 15.9382 11.8818 15.9259 12.0938 15.841C12.9092 15.5128 13.6684 15.0592 14.3438 14.4967C14.5134 14.3564 14.6342 14.1659 14.6888 13.9527C14.7434 13.7394 14.7289 13.5143 14.6475 13.3098C14.5152 12.9966 14.4575 12.6569 14.479 12.3176C14.5005 11.9782 14.6005 11.6485 14.7713 11.3545C14.942 11.0605 15.1788 10.8102 15.4629 10.6233C15.7469 10.4365 16.0705 10.3182 16.4081 10.2779C16.6271 10.2476 16.8307 10.1485 16.9894 9.99473C17.1482 9.84101 17.2539 9.64073 17.2913 9.4229C17.3816 8.95373 17.4305 8.47752 17.4375 7.99978C17.4376 7.49586 17.3905 6.99304 17.2969 6.4979C17.2589 6.28489 17.1548 6.08925 16.9993 5.9388C16.8438 5.78834 16.6448 5.69071 16.4306 5.65978ZM11.8125 7.99978C11.8125 8.55604 11.6476 9.09981 11.3385 9.56232C11.0295 10.0248 10.5902 10.3853 10.0763 10.5982C9.56239 10.8111 8.99689 10.8668 8.45132 10.7582C7.90575 10.6497 7.40461 10.3819 7.01127 9.98852C6.61794 9.59518 6.35007 9.09404 6.24155 8.54847C6.13303 8.0029 6.18873 7.4374 6.4016 6.92348C6.61447 6.40957 6.97496 5.97031 7.43747 5.66127C7.89998 5.35223 8.44375 5.18728 9.00001 5.18728C9.74593 5.18728 10.4613 5.4836 10.9887 6.01104C11.5162 6.53849 11.8125 7.25386 11.8125 7.99978Z' fill='white'/></svg>");
    width: 18px;
    height: 16px;
    display: block;


    background-size: cover; /* Adjust background size to fill the container */

    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
}




.filters-block__group-block-title.filters-block__group-block-title--flex .filters-block__group-title {
    max-width: 250px;

    margin: 0;

    cursor: pointer;
}

.days-range__slider {
    width: 100%;
    max-width: 596px;
    /* margin: 0 auto; */
    margin-bottom: 0;
    text-align: center;

    flex: 1 1 0;
}

.days-range.days-range--flex {
    display: flex;
    align-items: center;
    gap: 15px;

    margin-bottom: 10px;
}

.days-range__button {
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;

    background: #00CD28;

    border-radius: 50%;

    font-family: var(--main);
    font-weight: 700;
    font-size: 20px;
    color: white;
}

.filters-block__elements.filters-block__elements--range.double .days-range__button.days-range__button--update {
    opacity: .5;

}

.days-range__button.days-range__button--remove {
    background-color: #FF0106;

    opacity: .5;
}

.filters-block__elements.filters-block__elements--range.double .days-range__button.days-range__button--remove{
    opacity: 1;
}

.days-range__button span {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    margin-top: -5px;
}

.filters-block__group {
    padding-bottom: 18px;

    /* border-bottom: 1px solid #FFFFFF1A; */
}

/* .filters-block__group:first-of-type {
    border-top: 1px solid #FFFFFF1A;
} */

.filters-block__group.filters-block__group--footer {
    padding-top: 30px;
}

.filters-block__tab > .filters-block__group:first-of-type {
    border-top: none;
}

.filters-block__group.filters-block__group--head {
    display: flex;
    justify-content: space-between;
}

.filters-block__group.filters-block__group--footer {
    display: flex;
    justify-content: center;
}


.filters-block__group.filters-block__group--checkbox {
    padding-bottom: 20px;
}

.filters-block__group:last-of-type {
    border-bottom: none;
}

.filters-block__group-title {
    font-family: var(--main);
    font-weight: 400;
    font-size: 12px;
    text-align: left;
    line-height: 24px;
    color: #fff;
    text-align: left;
}

.filters-block__group-subtitle {
    margin-bottom: 20px;

    font-family: var(--main);
    font-weight: 400;
    font-size: 18px;
    text-align: left;
    line-height: 24px;
    color: #fff;
    text-align: left;
}

.form__label.form__label--filters {
    font-weight: 400;
}

.filters-block .form__input.form__input--filters {
    max-width: 491px;
}

.filters-block__content {
    height: 270px;
    padding-right: 30px;

    overflow-y: auto;

    transition: all .2s linear;

}

.filters-block.is-short .filters-block__content {
    height: 0;

    transition: all .2s linear;
}

.filters-block.is-short .filter-block__btn-close {
    transform: rotate(44deg) translateX(-4px) translateY(4px);
}

.filters-block.is-short .filter-block__btn-close span:after, .filters-block.is-short .filter-block__btn-close span::before {
    background-color: #13E4FF;
 }

.filters-block__content::-webkit-scrollbar, .stations-list .filters-block__group-list::-webkit-scrollbar {
    background-color: #fff; /* Фон скролбару */
    border-radius: 5px;
    width: 5px;
    height: 80%;
}

.filters-block__content::-webkit-scrollbar-thumb:vertical, .stations-list .filters-block__group-list::-webkit-scrollbar-thumb:vertical {
    height: 5px; /* Висота повзунка */
    height: 80%;
}

/* Задаємо колір повзунка */
.filters-block__content::-webkit-scrollbar-thumb, .stations-list .filters-block__group-list::-webkit-scrollbar-thumb {
    background-color: #13e4ff; /* Колір повзунка */
    border-radius: 5px; /* Закруглені кути повзунка */
    width: 5px;
    height: 80%;
}

/* Задаємо ширину повзунка */
.filters-block__content::-webkit-scrollbar-thumb:horizontal, .stations-list .filters-block__group-list::-webkit-scrollbar-thumb:horizontal {
    width: 5px; /* Ширина повзунка */
    height: 80%;
}

.filters-block__content .simplebar-track.simplebar-horizontal {
    opacity: 0;
}

.simplebar-scrollbar, .simplebar-scrollbar:before , .simplebar-track {
    margin: 0!important;
    width: 6px;
    opacity: 1!important;
    background-color: #13e4ff;
    border-radius: 5px;

}

.simplebar-track {
    width: 5px!important;
    background-color: #fff;
}

.simplebar-track.simplebar-vertical {
    height: 85%!important;
}

/*stations-list*/

.stations-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 10px;
}

.stations-list .filters-block__group-list {
    height: 0;
    overflow-y: auto;
    margin-right: 13px;

    display: grid;
    grid-template-rows: 0px;
    height: 0;
    opacity: 0;
    pointer-events: none;
    flex-direction: column;
    gap: 15px;
    padding: 0;
    transition: max-height .2s linear, opacity .1s linear, grid-template-rows .2s linear, height .2s linear;
}

.stations-list__item.is-open .filters-block__group-list {
    padding-bottom: 35px;
    height: 240px;
    opacity: 1;
    pointer-events: all;
    grid-template-rows: 1fr;
    transition: max-height .2s linear, opacity .1s linear, grid-template-rows .2s linear, height .2s linear;
}

.stations-list .filters-block__group {
    padding: 15px 0;
    margin: 0 15px;
}

.stations-list .toggle-checkbox-wrapper {
    width: fit-content;
    margin-left: auto;
}

.stations-list__item {

    margin: 0 -10px;

    position: relative;
    z-index: 1;
    transition: all .5s linear;
}

.stations-list__item.is-open {
    transition: all .01s linear;
    z-index: 2;
}



.stations-list__item-info {
    width: 100%;
    max-width: 494px;

    background: #272727;
    border: 1px solid #503DFF;
    box-shadow:
  5px 5px 6px #131313,
  -5px -5px 6px #343434;

    border-radius: 23px;
    position: absolute;
    top: -5px;
}

.stations-list__item.not-active .stations-list__item-info {
    opacity: .5;
    pointer-events: none;
}

.stations-list__item-name {
    width: 100%;
    padding: 10px 21px 10px 15px;

    font-family: var(--main);
    font-weight: 400;
    font-size: 1.8rem;
    line-height: 2.4rem;
    color: var(--white);
    text-align: left;

    position: relative;

    text-wrap: nowrap;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stations-list__item.is-open .stations-list__item-name {
    text-wrap: wrap;
    white-space: wrap;
}

.stations-list__item-name::after {
    top: 45%;
    right: 15px;
    border: solid transparent;
    content: "";
    height: 8px;
    width: 8px;
    position: absolute;
    pointer-events: none;
    border-radius: 1px;
    border: 2px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg) translateY(-50%);
    transition: all .2s linear;

}

.stations-list__item.is-open .stations-list__item-name::after {
    right: 10px;
    transform-origin: center;
    transform: rotate(225deg) translateY(-43%);
    transition: all .2s linear;
}

.stations-list__item-form {
    display: grid;
    grid-template-rows: 0px;
    height: 0;
    opacity: 0;
    pointer-events: none;
    flex-direction: column;
    gap: 15px;
    /* padding-left: 8px; */
    padding: 0;
    transition: all .2s linear, opacity .01s linear;

    height: auto;
    padding: 8px 0 12px 0;
    grid-template-rows: 1fr;
    opacity: 1;
    pointer-events: all;
    transition: all .2s linear;
}

.filters-save-btn {
    width: 100%;
    display: none;
    padding: 5px;
    margin-top: 20px;

    background-color: #503DFF;
    border-radius: 10px;

    font-family: var(--main);
    font-weight: 400;
    font-size: 1.8rem;
    line-height: 2.4rem;
    color: var(--white);
    text-align: center;

}

.filters-block.is-saved + .filters-save-btn {
    display: block;
}

.filters-block__success-message {
    display: block;

    font-family: var(--main);
    font-weight: 400;
    font-size: 1.8rem;
    line-height: 2.4rem;
    color: #00FF5D;
    text-align: center;

    position: absolute;
    top: -34px;
    left: 0;
    z-index: 2;

    opacity: 0;
    pointer-events: none;

    transition: all .2s linear;
}

.filters-block.is-saved .filters-block__success-message {
    opacity: 1;
    pointer-events: all;

    transition: all .2s linear;
}

.nav-link-payment.active {
    background-color: #F65AFF;
    transition: all .2s linear;
}

/*faq*/

.faq-text {
    display: grid;
    grid-template-rows: 0;
    opacity: 0;
    margin: 0;

    transition: all .2s linear;
}

.faq.active .faq-text {
    grid-template-rows: 1fr;
    opacity: 1;
    margin: 30px 0;

    transition: all .2s linear;
}

.price-item__buttons {
    display: flex;
    align-items: center;
    gap: 54px;
}

.price-item__buttons .btn-new {
    padding: 5px 72px;
    width: 100%;
    max-width: 213px;
    text-align: center;
}

.account__content-head--mobile {
    display: none;

    position: absolute;
}

.form__group.error input, .form__group.has-error input {
    border: 2px solid #FF6464;
}

.help-block.form__label, .error-notification {
    font-family: var(--main);
    font-weight: 400;
    font-size: 1.8rem;
    line-height: 2.4rem;
    color: #FF6464;
    text-align: left;
}

.help-block.form__label {
    display: none;
}

.form__group.error .help-block.form__label, .form__group.has-error .help-block.form__label {
    display: block;
}

.membership__list-mob-label {
    display: none;

    position: absolute;
}

.form-group-checkbox {
    position: relative;
}

.form-group-checkbox input {
    position: absolute;
    /* visibility: hidden; */
}

.form-group-checkbox label {
    position: relative;

    padding-left: 30px;
}

.form-group-checkbox label::after {
    content: "";
    width: 20px;
    height: 20px;

    background-color: #fff;
    border-radius: 6px;

    position: absolute;
    left: 0;
    z-index: 2;
}

.form-group-checkbox label::before {
    content: "";
    width: 16px;
    height: 16px;
    display: none;

    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="16" height="16" viewBox="0 0 1280.000000 1034.000000" preserveAspectRatio="xMidYMid meet"><metadata>Created by potrace 1.15, written by Peter Selinger 2001-2017</metadata><g transform="translate(0.000000,1034.000000) scale(0.100000,-0.100000)" fill="%23503DFF" stroke="none"><path d="M7625 7270 l-3070 -3070 -1232 1232 -1233 1233 -1045 -1045 c-691 -691 -1045 -1052 -1045 -1065 0 -29 4527 -4555 4557 -4555 15 0 1188 1169 4130 4115 2259 2263 4110 4122 4112 4131 4 20 -2065 2094 -2089 2094 -8 0 -1397 -1381 -3085 -3070z"/></g></svg>');
    background-repeat: no-repeat;
    background-size: contain;

    /* Інші стилі за потреби */

    position: absolute;
    top: 3px;
    left: 2px;
    z-index: 3;

}

.form-group-checkbox input:checked + label::before {
    display: block;
}

.radio-inline.form__label a {
    color: #8A8A8A;
    text-decoration: underline;
    cursor: pointer;
}

.user-settings__item.is-stopped .user-settings__item-name, .user-settings__item.is-stopped .btn-new {
    opacity: .6;
    pointer-events: none;
}

/*noUi*/

.noUi-horizontal {
    height: 2px;
}

.noUi-target {
    border: none;
}

.noUi-connect {
    background-color: var(--new-pink);
}

.noUi-horizontal .noUi-handle {
    width: 14px;
    height: 14px;
    right: -10px;
    top: -6px;

    background: var(--new-pink);
    border-radius: 50%;
    border: none;
    box-shadow: none;

    cursor: pointer;
}

.noUi-handle:before, .noUi-handle:after {
    display: none;
}

.form__wrapper-group.form__wrapper-group--flex.form__wrapper-group--additional-range-field {
    display: none;
}

.filters-block__elements.filters-block__elements--range.double .form__wrapper-group.form__wrapper-group--flex.form__wrapper-group--additional-range-field {
    display: flex;
    flex-direction: row;
}

.filters-block__elements.filters-block__elements--range .form__group.form__group--filters {
    display: flex;
    gap: 3px;
}

.filters-block__elements.filters-block__elements--range .form__label {
    margin-bottom: 0;
}

.filters-block__elements.filters-block__elements--range .form__input{
    max-width: 90px;
    height: auto;
    padding: 0;

    background-color: transparent;

    color: #ffffff;

    pointer-events: none;
}

.filters-block__group {
    transition: all .1s linear;
}

.filters-block__group.not-active .filters-block__elements, .filters-block__group.not-active .filters-block__group-title, .filters-block__group.not-active .filters-block__group-subtitle {
    /* opacity: .5; */

    /* pointer-events: none; */

    transition: all .1s linear;
}

.login__content-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    /* margin: 0 41px; */
}

.login__content-head-block.login__content-head-block--right {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48.5px;
}

.login__body.login__body--large {

    max-width: 617px;
    margin-top: 11px;
}

.login__body-info-content {
    max-width: 617px;
}


.login__content-head-title {
    margin-left: -85px;

    font-family: var(--main);
    font-weight: 700;
    font-size: 2rem;
    line-height: 2.7rem;
    color: var(--white);
}

.login__body-info-text, .login__body-info-link {
    font-family: var(--main);
    font-weight: 400;
    font-size: 1.8rem;
    line-height: 2.4rem;
    color: var(--white);
}

.login__body-info-link {
    margin-right: 5px;

    text-decoration: underline!important;
    color: #13E4FF;
    cursor: pointer;
}

.login__body-info-content {
    text-align: center;
}

.login__body-info-retutn-btn {
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 29px;
    margin-left: -53px;

    background: #272727;
    border-radius: 5px;
    box-shadow: -5px -5px 6px #343434;
    position: relative;
    z-index: 1;

    cursor: pointer;
}

.login__body-info-retutn-btn::after {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    box-shadow: 3px 3px 6px #00000063;
    position: absolute;
    top: 0;
    z-index: 2;
    pointer-events: none;
}

.login__body-info {
    margin-top: 11px;
}

.login__body-info-content {
    margin: 0 auto;
    margin-bottom: 53px;
}

.login__content-form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

.main.main--account .login {
    margin-top: -52px;
}


/*filter-popup*/

.filter-popup {
    width: 100%;
    max-width: 390px;
    height: 100%;
    min-height: 100vh;
    /* display: none; */

    padding: 62px 40px;
    opacity: 1;
    /* backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(50px); */
    border-radius: 22px;
    background-color: var(--new-black);
    /* box-shadow: inset 0 0 62px rgba(136, 61, 255, 1); */
    position: fixed;
    right: 0;
    top: 0;
    z-index: 6;
    transition: all .2s linear;

    pointer-events: none;
    transform: translateX(105%);
}

.filter-popup.is-open {
    pointer-events: all;
    transition: all .2s linear;
    transform: translateX(0);
}

.filter-popup__head {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;

}

.filter-popup__head-title {
    font-family: var(--main);
    font-size: 18px;
    font-weight: 700;
    line-height: 24px;
    text-align: left;
    color: var(--white);
}

.filter-popup__body > .form__group.form__group--filters {
    margin-bottom: 30px;
}

.filter-popup__body .form__input.form__input--filters {
    max-width: 100%;

}

#arrival_time_to, #arrival_time_from {
    height: 40px;
}

.tabs-filters__nav {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0;
    margin-bottom: 30px;

    border: 1px solid var(--new-pink);
    border-radius: 31px;

}

.tabs-filters__nav-button {
    padding: 15px 20px;

    border-radius: 31px;

    font-family: var(--main);
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    text-align: center;
    color: var(--white);
    cursor: pointer;

    transition: all .2s linear;
}

.tabs-filters__nav-button:hover {
    background-color: var(--new-pink);

    transition: all .2s linear;
}

.tabs-filters__nav-button.active {
    background-color: var(--new-pink);
}

.tabs-filters__content-item {
    display: none;


}


.tabs-filters__content-item.active {
    display: block;
    overflow: auto;
max-height: 60vh;
padding-bottom: 200px;

&::-webkit-scrollbar {
    display: none;
  }

  scrollbar-width: none;


  -ms-overflow-style: none;

}

/* .filters-block__group-body {
    max-height: 60vh;
    overflow: auto;
} */

/* .filters-block__group-body {
    overflow-y: scroll;

    &::-webkit-scrollbar {
      display: none;
    }

    scrollbar-width: none;


    -ms-overflow-style: none;
} */

/*new checkbox*/

.new-checkbox__group {
    position: relative;

}

.new-checkbox__input {
    opacity: 0;

    position: absolute;
}

.new-checkbox__label {
    width: 18px;
    height: 18px;
    display: block;

    border-radius: 3px;
    border: 1px solid #B9B9B9;

    position: relative;
    z-index: 1;
}

.new-checkbox__label::after {
    content: url('data:image/svg+xml;utf8,<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="18" height="18" rx="3" fill="%2318DCFF"/><path d="M7.5 13.5C7.125 13.5 6.75 13.35 6.45 13.05L3.45 10.05C2.85 9.45 2.85 8.55 3.45 7.95C4.05 7.35 5.025 7.35 5.55 7.95L7.5 9.9L12.45 4.95C13.05 4.35 13.95 4.35 14.55 4.95C15.15 5.55 15.15 6.45 14.55 7.05L8.55 13.05C8.25 13.35 7.875 13.5 7.5 13.5Z" fill="%23121212"/></svg>');
    display: none;
    width: 18px;
    height: 18px;

    position: absolute;
    top: -1px;
    left: -1px;
    z-index: 2;
}

.new-checkbox__input:checked + .new-checkbox__label {
    border: 1px solid transparent;
}

.new-checkbox__input:checked + .new-checkbox__label::after {
    display: block;
}

/*8.05.2024*/

.filters-block__elements-time {
    display: flex;
    align-items: start;
    justify-content: space-between;
    margin-bottom: 18px;
    padding-right: 30px;

    position: relative;
}

.filters-block__elements-time::after {
    content: url('data:image/svg+xml;utf8,<svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.79708 0.525879L6 4.7288L10.2029 0.525879L11.5 1.82296L6 7.32296L0.5 1.82296L1.79708 0.525879Z" fill="%2318DCFF"/></svg>');
    width: 12px;
    height: 8px;
    display: block;

    position: absolute;
    right: 5.5px;
    top: 1.8px;
    z-index: 2;

    transition: all .2s linear;
}

.filters-block__elements-time-info {
    pointer-events: none;
}

.filters-block__elements-time-info .form__label, .filters-block__elements-time-info .form__input {
    font-family: var(--new-font);
    font-size: 12px;
    font-weight: 700;
    line-height: 20px;
    color: var(--new-blue)!important;
}

.filters-block__elements-time-info .form__wrapper-group.form__wrapper-group--flex {
    gap: 0;
}

.filters-block__elements.filters-block__elements--range .form__wrapper-group.form__wrapper-group--flex {
    max-width: 134px;
}

.filters-block__group.filters-block__group--head .filters-block__group-title {
    font-weight: 700;
}

.filters-block__group-title.filters-block__group-title--stations {
    font-family: var(--main);
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    text-align: left;
    color: var(--white);
}

/*new-button*/

.new-button {
    display: block;
    padding: 13px;

    background-color: var(--new-pink);
    border-radius: 8px;

    font-family: var(--main);
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    text-align: left;
    color: var(--white);

}

.new-button.new-button--filters {
    width: 100%;
    max-width: 254px;

    margin: 0 auto;
    text-align: center;
}

.new-button.new-button--middle {
    width: 100%;
    padding: 12px 41px;

    border-radius: 40px;

    font-family: var(--main);
    font-size: 16px;
    font-weight: 400;
    line-height: 18px;
    text-align: center;

}

.new-button.new-button--small {
    width: 100%;
    max-width: 130px;
    padding: 8px 21px;
    margin: 0 auto;

    text-align: center;
}

.new-button.new-button--history {
    max-width: fit-content;
    margin-bottom: 20px;
}

.setting__list-item-wrapper--change-password.is-open .toggle-change-form {
    background-color: var(--new-blue)!important;

    color: #1C1C1C!important;

    transition: all .2s linear;
}

.new-button.new-button--empty-bg {
    border: 1px solid #FFFFFF;
    background-color: transparent;
}

.new-button--empty-bg.new-button--blue {
    border: 1px solid var(--new-blue);

    color: var(--new-blue);

    transition: all .2s linear;
}



.new-button--empty-bg.new-button--blue:hover {
    background-color: var(--new-blue);

    color: #1C1C1C;

    transition: all .2s linear;
}

.new-button.new-button--change-pass {
    border: 1px solid var(--new-blue);
    background-color: var(--new-blue);

    color: #1C1C1C;
}

.new-button.new-button--red {
    background: #E95656;
}

.filters-block__group-body .filters-block__group {
    padding-bottom: 0;
}

/* .days-range-block {
    height: 0;
    opacity: 0;
    visibility: hidden;

    transition: all .2s linear;
} */

.days-range-block__labels {
    display: flex;
    justify-content: space-between;
    padding: 0 10px;

    font-family: var(--new-font);
    font-size: 12px;
    font-weight: 400;
    line-height: 13px;
    text-align: left;
    color: var(--white);

}

.filters-block__group.not-active .days-range-block {
    height: 0;
    opacity: 0;
    margin-bottom: 0;
    visibility: hidden;
    transition: all .2s linear;
}

.filters-block__group .days-range-block {
    height: 40px;
    margin-bottom: 25px;
    opacity: 1;
    visibility: visible;
    transition: all .2s linear;
}

.filters-block__group .filters-block__elements-time::after {
    transform: rotate(180deg);

    transition: all .1s linear;
}

.filters-block__group.not-active .filters-block__elements-time::after {
    transform: rotate(0deg);

    transition: all .1s linear;
}

/**/

.new-checkbox__label.new-checkbox__label--rounded {
    width: 100%;
    height: fit-content;
    padding-left: 26px;

    border: none;

    font-family: var(--main);
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
    color: var(--white);

}

.new-checkbox__label.new-checkbox__label--rounded::after {
    content: "";
    width: 18px;
    height: 18px;
    display: block;

    border: 1px solid var(--new-blue);
    border-radius: 50%;

    top: 50%;
    left: 0;

    transform: translateY(-50%);
}

.new-checkbox__label.new-checkbox__label--rounded::before {
    content: "";
    width: 8px;
    height: 8px;
    display:none;

    background: var(--new-blue);
    border-radius: 50%;

    position: absolute;
    top: 50%;
    left: 5px;
    z-index: 3;

    transform: translateY(-50%);
}

.new-checkbox__input.new-checkbox__input--rounded:checked + .new-checkbox__label.new-checkbox__label--rounded {
    border: none;
}

.new-checkbox__input.new-checkbox__input--rounded:checked + .new-checkbox__label.new-checkbox__label--rounded::before {
    display: block;
}

.new-checkbox__group-tips {
    position: absolute;
    top: -8px;
    right: -15px;
    z-index: 2;

}

.new-checkbox__group-tips-text {
    position: relative;

}

.new-checkbox__group-tips-text::after {
    content: attr(data-content);

    width: 100px;
    height: auto;
    /* display: none; */
    padding: 5px 8px;

    background: var(--white);
    border-radius: 5px;

    font-family: var(--new-font);
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    text-align: left;
    color: var(--black);


    position: absolute;
    top: -15px;
    left: -115px;
    z-index: 2;

    transition: opacity 0.3s ease-in-out;
    opacity: 0;
    pointer-events: none;
}

.new-checkbox__group-tips:hover .new-checkbox__group-tips-text::after {
    opacity: 1;
    display: block;
}

#settings_tab .filters-block__group.filters-block__group--head {
    flex-direction: column;
    gap: 24px;
}

#settings_tab .filters-block__group-title {
    margin-bottom: 0;

    font-size: 16px;
}

#settings_tab .new-checkbox__group {
    width: fit-content;
}

.new-filter-block__head-label, .new-filter-block__head-value {
    font-family: var(--new-font);
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
    color: var(--white);
    text-wrap: nowrap;

}

.new-filter-block__head-value {
    font-weight: 700;
    color: var(--new-blue);
}

.new-filter-block {
    margin-bottom: 15px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.2);

}

.new-filter-block__head {
    margin-bottom: 15px;
    position: relative;
}

.new-filter-block__head::after {
    content: url('data:image/svg+xml;utf8,<svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.79708 0.525879L6 4.7288L10.2029 0.525879L11.5 1.82296L6 7.32296L0.5 1.82296L1.79708 0.525879Z" fill="%23ffffff"/></svg>');
    width: 12px;
    height: 8px;
    display: block;

    position: absolute;
    right: 5.5px;
    top: 1.8px;
    z-index: 2;

    transition: all .2s linear;
}

.new-filter-block.active .new-filter-block__head::after {
    transform: rotate(180deg);
    transition: all .1s linear;
}

.new-filter-block__head.new-filter-block__head--flex {
    display: flex;
    gap: 5px;
}

.new-filter-block__head-values.new-filter-block__head-values--flex {
    display: flex;
}

.new-filter-block__body.new-filter-block__body--flex {
    display: flex;
    gap: 30px;
}

.new-filter-block.range-slider-block .new-filter-block__body {
    flex-direction: column;
}

.new-filter-block__body {
    margin-bottom: 25px;
}

/**/

.range-slider {
    width: 95%;
    margin-left: 3px;

}

.range-slider__values {
    display: flex;
    justify-content: space-between;

    font-family: var(--new-font);
    font-size: 12px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
    color: var(--white);
}

.range-slider__label {
    margin: 0 3px;
    font-family: var(--new-font);
    font-size: 14px;
    font-weight: 700;
    line-height: 24px;
    text-align: left;
    color: var(--new-blue);
}

.new-filter-block .new-filter-block__body.new-filter-block__body--flex {
    height: 0;
    opacity: 0;
    margin-bottom: 0;
    pointer-events: none;

    transition: all .2s linear;
}

.new-filter-block.active .new-filter-block__body.new-filter-block__body--flex {
    height: 44px;
    opacity: 1;
    margin-bottom: 15px;
    pointer-events: all;

    transition: all .2s linear;
}

.new-filter-block.range-slider-block.active .new-filter-block__body.new-filter-block__body--flex {
    height: 40px;

    gap: 13px;
}

.new-checkbox__group.new-checkbox__group--flex {
    display: flex;
    gap: 8px;
    align-items: center;
}

.new-checkbox__label-text.new-checkbox__label-text--common {
    font-family: var(--main);
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    text-align: left;
    color: var(--white);

}


/*stations*/

.new-checkbox__group--stations {
    padding-bottom: 15px;
    margin: 15px 0 15px 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.new-button.new-button--filters.new-button--station-settings {
    margin-top: 15px;
}

.new-station__body {
    height: 0;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;

    transition: all .2s linear;
}

.new-station.active .new-station__body {
    height: 100%;
    visibility: visible;
    opacity: 1;
    pointer-events: all;

    transition: all .2s linear;
}

.new-station__fields {
    height: 0;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;

    transition: all .2s linear;
}

.new-station__body.active .new-station__fields {
    height: 100%;
    visibility: visible;
    opacity: 1;
    pointer-events: all;

    transition: all .2s linear;
}

/*new filters*/

.filters-block__head-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 25px;

    font-family: var(--main);
    font-size: 16px;
    font-weight: 700;
    line-height: 18px;
    text-align: left;
    color: var(--white);

    position: relative;
}

.filters-block__head-btn::before {
    content: url("data:image/svg+xml;utf8,<svg width='8' height='12' viewBox='0 0 8 12' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M0.525879 10.2029L4.7288 6L0.525878 1.79708L1.82296 0.5L7.32296 6L1.82296 11.5L0.525879 10.2029Z' fill='white'/></svg>");
    display: inline-block;
    width: 8px;
    height: 12px;

    position: absolute;
    right: 25px;

}


/*form-new select*/

.filters-block__body {
    margin: 0 25px 19px 25px;
}

.form-new-select {
    position: relative;

    appearance: none;
}

.form-new-select__btn {
    width: 100%;
    /* max-width: 381px; */
    padding: 16px 15px;
    display: block;
    background-color: var(--white);
    border-radius: 10px;
    font-family: var(--main);
    font-weight: 400;
    font-size: 1.4rem;

    line-height: 1.8rem;
    color: var(--black);
    text-align: left;

    position: relative;
}

.form-new-select__btn::after {
    content: url("data:image/svg+xml;utf8,<svg width='11' height='6' viewBox='0 0 11 6' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M5.5 6L0.25 0.75H10.75L5.5 6Z' fill='%23121212'/></svg>");
    display: inline-block;
    width: 11px;
    height: 6px;

    position: absolute;
    right: 21px;
    top: 50%;
    transform: translateY(-10px);
}

.form-new-select__btn.active::after {
    transform: rotate(180deg) translateY(-4px);
}

.form-new-select__btn > span, .form-new-select__option {
    color: #A7A7A7;

    transition: all .2s linear;
}

.form-new-select__option:hover {

    color: var(--black);

    cursor: pointer;

    transition: all .2s linear;
}

.form-new-select__options {
    display: none;
}

 .form-new-select__options.active {
    width: 100%;
    max-width: 100%;
    display: block;
    padding: 16px 15px;

    background-color: var(--white);
    border: 1px solid var(--new-gray-border);
    border-radius: 10px;

    font-family: var(--main);
    font-weight: 400;
    font-size: 1.8rem;
    color: var(--white);
    line-height: 2.4rem;
    color: var(--black);
    text-align: left;

    position: absolute;
    top: 81px;
    z-index: 3;
}

.form-new-select__options.active {
    max-height: 250px;
    overflow: hidden;
    overflow-y: auto;
}

.form-new-select__option {
    font-size: 14px;
}

.form-new-select__label {
    margin-bottom: 8px;

    font-family: var(--main);
    font-size: 14px;
    font-weight: 700;
    line-height: 24px;
    text-align: left;
    color: var(--white);
}

/**/

.new-btns-group.new-btns-group--flex {
    display: flex;
    margin: 20px 0;
    gap: 20px;
}

.filters-block__head-title > span {
    font-family: var(--main);
    font-size: 16px;
    font-weight: 700;
    line-height: 18px;
    text-align: left;
    color: var(--white);
}

/* .toggle-checkbox-wrapper.toggle-checkbox-wrapper--new .slider-btn:before{
    height: 32px;
    width: 45px;
}

.toggle-checkbox-wrapper.toggle-checkbox-wrapper--new .slider-btn:after {
    width: 15px;
    height: 15px;
} */

.toggle-checkbox-wrapper.toggle-checkbox-wrapper--new .toggle-checkbox:checked ~ .slider-btn::before {
    background-color:  var(--new-pink);


}

.toggle-checkbox-wrapper.toggle-checkbox-wrapper--new .toggle-checkbox:checked ~ .slider-btn:after {
    background-color: #fff;
    /* transform: translateX(19px) translateY(-50%); */
}

.toggle-checkbox-wrapper.toggle-checkbox-wrapper--new .toggle-checkbox ~ .slider-btn:after {
    left: 5px;
}

.filters-block__head.filters-block__head--flex {
    display: flex;
    align-items: center;
}

.filters-block__head-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.filters-block__head--schedule {
    padding: 25px 20px;
    gap: 15px;

    position: relative;

    cursor: pointer;
}

.filters-block__head--schedule:after {
    content: url("data:image/svg+xml;charset=UTF-8,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.79684 0.525879L5.99976 4.7288L10.2027 0.525879L11.4998 1.82296L5.99976 7.32296L0.499756 1.82296L1.79684 0.525879Z' fill='white'/%3E%3C/svg%3E");
    display: block;

    position: absolute;
    right: 20px;
    z-index: 2;

    transition: all .2s linear;
}

.filters-block.filters-block--new.filters-block--bot-schedule.is-open .filters-block__head--schedule:after {
    transform: rotate(180deg);

    transition: all .2s linear;
}

.ui-timepicker-standard {
    z-index: 1!important;
}

.filters-block__body-text {
    margin-bottom: 20px;

    font-family: var(--main);
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    text-align: left;
    color: var(--white);
}

.filters-schedule-time__group-wrapper {
    position: relative;
}

.form-group__label.form-group__label--time {
    display: block;
    font-family: var(--main);
    font-size: 12px;
    font-weight: 700;
    line-height: 24px;
    text-align: left;
    color: var(--new-blue);
}

.form-group__label.form-group__label--time {

}

.form-group__input.form-group__input--time.timepicker {
    opacity: 0;
}

.form-group__label.form-group__label--time.form-group__label--time-view {
    font-family: var(--new-font);
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
    color: var(--white);
    pointer-events: none;
}


.form-group__input.form-group__input--time {
    font-family: var(--new-font);
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
    color: var(--white);
    position: absolute;
}

.filters-schedule-time {
    display: flex;
    gap: 88px;
}

.ui-timepicker, .ui-timepicker-viewport {
    text-align: left;
}

/*new-filter-popup*/

.new-popup-bg {
    width: 100%;
    height: 100%;
    padding: 160px 23px 23px 23px;
    display: block;

    background: rgba(36, 35, 49, .5);
    border: 1px solid rgba(255, 255, 255, .1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(100px);
    border-radius: 21px;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 3;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition: all .2s linear;
}

.new-popup-bg.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: all;

    transition: all .2s linear;
}

.new-popup.new-popup--delete-filter {
    width: 310px;
    height: fit-content;
    padding: 40px 23px;

    background: #121212;
    border: 3px solid var(--new-pink);
    border-radius: 32px;

    position: fixed;
    top: 25%;
    left: 50%;
    z-index: 3;

    transform: translate(-50%, -50%);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition: all .2s linear;

}

.new-popup.new-popup--delete-filter.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: all;

    transition: all .2s linear;
}

.new-popup__title {
    margin-bottom: 15px;

    font-family: var(--main);
    font-size: 20px;
    font-weight: 700;
    line-height: 19.3px;
    text-align: center;
    color: var(--white);
}

.new-popup__sub-title {
    margin-bottom: 25px;

    font-family: var(--main);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: center;
    color: #A7A7A7;

}

.new-popup__btns.new-popup__btns--flex {
    display: flex;
    gap: 20px;
}


.new-popup__btns.new-popup__btns--flex .new-button {
    padding: 12px 32px;
}

.filters-block__body.filters-block__body--main {
    height: 0;
    margin-bottom: 0;
    opacity: 0;
    pointer-events: none;

    transition: all .2s linear;
}

.filters-block__body.filters-block__body--main.is-open {
    height: auto;
    margin-bottom: 19px;
    opacity: 1;
    pointer-events: all;

    transition: all .2s linear;
}

.filters-block__head-btn::before {
    transform: rotate(0deg);
    transition: all .2s linear;
}

.filters-block__head-btn.is-open::before {
    transform: rotate(90deg);
    transition: all .2s linear;
}


.filters-block.filters-block--bot-schedule .filters-block__body {
    height: 0;
    margin-bottom: 0;
    opacity: 0;
    pointer-events: none;

    transition: all .2s linear;
}

.filters-block.filters-block--bot-schedule.is-open .filters-block__body {
    height: auto;
    margin-bottom: 19px;
    opacity: 1;
    pointer-events: all;

    transition: all .2s linear;
}

input[type="time"] {
    position: relative;
}

input[type="time"]::-webkit-calendar-picker-indicator, input[type="date"]::-webkit-calendar-picker-indicator  {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    color: transparent;
    background: transparent;
}

input[type="date"]::-webkit-inner-spin-button {
    z-index: 1;
}

.sidebar__btn-close {
    display: none;
}


/*timer*/

.search-timer {
    margin-bottom: 20px;
    margin-top: 8px;

    text-align: center;

    opacity: 0;
    pointer-events: none;
}

.search-timer.is-visible {
    opacity: 1;
}

#count_up_timer {
    margin: 0;

    font-family: var(--new-font);
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;

    color: rgba(255, 255, 255, 0.7);
}

.offer__time {
    display: flex;
}

.offer__time > svg {
    margin-right: 6px;
}

.offer__time > svg:last-of-type {
    margin-left: 15px;
}

.offers__empty-list {
    font-family: var(--main);
    font-size: 18px;
    font-weight: 700;
    line-height: 24px;
    text-align: center;
    color: var(--white);

}

/*status bot*/

.status-bot {
    position: absolute;
    top: 45%;
    transform: translateY(-50%);


    font-family: var(--main);
    font-size: 18px;
    font-weight: 700;
    line-height: 18px;
    text-align: left;
    pointer-events: none;
}

.status-bot.status-bot--on {
    left: 10px;

    color: var(--white);
    opacity: 0;
}

.status-bot.status-bot--off {
    right: 10px;

    color: var(--black);
    opacity: 1;
}

.toggle-checkbox-wrapper.toggle-checkbox-wrapper--new .toggle-checkbox:checked ~ .slider-btn .status-bot.status-bot--on {
    opacity: 1;
}

.toggle-checkbox-wrapper.toggle-checkbox-wrapper--new .toggle-checkbox:checked ~ .slider-btn .status-bot.status-bot--off {
    opacity: 0;
}

@media (max-width: 1700px) {
    .main.main--account {
        padding: 35px 0 15px 0;

        /* overflow: hidden; */
    }

    .login__content-head {
        margin: 0 41px;
    }

    .main.main--account .login {
        margin-top: 0;
    }
}

@media (max-width: 1560px) {
    .account__content-message-text p, .account__content-message-link {
        font-size: 14px;
    }

    .account__content-message {
        padding: 47px 20px;
    }

    .account__content-message-btn {
        top: 20%;
        right: 21%;
    }

}

@media (max-width: 1440px) {
    .filters {
        max-width: 613px;
    }
    .stations-list__item-info {
        max-width: 394px;
    }

    .stations-list__item-name, .filters-block__group-subtitle {
        font-size: 1.6rem;
    }

    .filters-block__group-title {
        font-size: 12px;
    }

    .form__input-error {
        font-size: 1.4rem;
    }

    .filters-block {
        padding: 12px 20px 10px 20px;
    }

    .filter-block__btn-close {
        top: 30px;
        right: 8px;
    }

    .membership {
        padding: 0 20px;
    }

    .chart-body-bg::after {
        width: 88%;
        height: 84%;
    }

    #charter_earnings, #charter_weekly {
        width: 345px!important;
        height: 290px !important;
    }

    .account__content-body {
        padding-left: 20px;
    }

    .earnings__chart {
        max-width: 356px;
    }
}

@media (max-width: 1440px) {
    .price-item__buttons .btn-new {
        padding: 5px  20px;
        width: 100%;
        max-width: 213px;
        text-align: center;
    }

    .price-item__buttons {
        gap: 14px;
    }
}



@media (max-width: 1320px) {
    .earnings {
        max-height: 650px;
        display: flex;
        /* flex-direction: column; */
        align-items: center;
        gap: 20px;
        padding-bottom: 150px;

        overflow-y: scroll;
    }

        /* Задаємо колір фону */
    .earnings::-webkit-scrollbar {
        background-color: transparent; /* Фон скролбару */
        width: 5px;
        height: 80%;
    }

    .earnings::-webkit-scrollbar-thumb:vertical {
        height: 5px; /* Висота повзунка */
        height: 80%;
    }

    /* Задаємо колір повзунка */
    .earnings::-webkit-scrollbar-thumb {
        background-color: #13e4ff; /* Колір повзунка */
        border-radius: 5px; /* Закруглені кути повзунка */
        width: 5px;
        height: 80%;
    }

    /* Задаємо ширину повзунка */
    .earnings::-webkit-scrollbar-thumb:horizontal {
        width: 5px; /* Ширина повзунка */
        height: 80%;
    }

    .filters {
        max-width: 582px;
    }

    .filters.filters--select .filters__body-list {
        padding-left: 30px;
        padding-right: 15px;
        margin-right: 14px;
    }

    .filters.filters--select {
        max-width: 587px;
    }

    .setting__button-toggle-arr {
        right: 11px;
    }

    .membership__current-details {
        display: grid;
        gap: 40px;
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 1220px) {
    .account__content-message-text {
        max-width: 350px;
        display: flex;
        align-items: baseline;
        flex-direction: column;
    }

    .account__content-message {
        padding: 37px 20px;
    }

    .account__content-message-btn {
        right: 29%;
    }

    .earnings {
        flex-direction: column;
     }

     .chart-body-bg::after {
        width: 92%;
        height: 90%;
        top: -5px;
    right: -11px;
    }

    .earnings__chart {
        max-width: 460px;
    }

    #charter_earnings, #charter_weekly {
        width: 354px!important;
        height: 290px !important;
    }

    .account__content-body {
        padding-left: 20px;
    }

    .earnings__chart {
        max-width: 356px;
    }
 }

@media (max-width: 991px) {

    .page.page--account {
        max-width: 768px;
        margin: 20px auto;
    }

    .account__content-body {
        padding-left: 0;
    }

    .account__sidebar-logo {
        margin-bottom: 0;
    }

    .account__sidebar {
        max-width: 340px;
        height: 100%;
        min-height: 100vh;
        padding: 60px 40px;
        padding-top: 25px;

        opacity: 1;
        backdrop-filter: blur(40px);
        -webkit-backdrop-filter: blur(50px);
        border-radius: 22px;

        /* box-shadow: inset 0 0 62px rgba(136, 61, 255, 1); */

        position: fixed;
        right: 0;
        top: 0;
        z-index: 6;

        transition: all .2s linear;
        transform: translateX(105%);

    }
    /* .main.main--account {
        overflow: visible;
    } */

    .account__sidebar.is-showed {
        transition: all .2s linear;
        transform: translateX(0);
    }

    .account__sidebar-wrapper {
        border: none;
    }

    .account__sidebar-logo {
        display: none;
    }

    .account__content-head-title {
        display: none;
        position: absolute;
    }

    .btn.btn--exit {
        display: none;
        position: absolute;
    }

    .sidebar__btn-close {
        display: block;
    }


    .account__content-head {
        align-items: center;
        justify-content: space-between;
    }

    .account__content-message-btn {
        right: 23%;
    }



    .account__sidebar-logo.account__sidebar-logo--mobile {
        display: block;
        position: static;
    }

    .burger__btn.burger__btn--sidebar {
        display: flex;
        position: relative;
    }

    .btn.btn--exit.btn--exit--mobile {
        display: block;
        margin-bottom: 48px;

        position: static;
    }
    /****************************/

    .main.main--account {
        max-width: 100%;
    }

    .block-history__head-list {
        margin-bottom: 37px;
    }

    .filters__animation {
        width: 120px!important;
        height: 120px!important;
        /* display: none; */
        /* position: absolute; */
        z-index: 3;
    }

    .filters__head-list {
        margin-bottom: 15px;
    }

    .account__social-list {
        margin-bottom: 50px;
    }

    .calendar {
        flex-direction: column;
    }

    .calendar__day-list {
        display: flex;
        gap: 8px;

        overflow-x: auto;
    }

    .calendar__offers .offers__list {
        gap: 8px;
        padding-bottom: 250px;
    }

    .main.main--account {
        height: 100%;
        min-height: 100vh;
    }

    .calendar__day-list {
        scrollbar-width: thin; /* Встановлюємо тонкість скроллбару */
        scrollbar-color: transparent transparent;
    }

    .calendar__day-list::-webkit-scrollbar {
        background-color: transparent; /* Фон скролбару */
        width: 5px;
        height: 80%;
    }

    .calendar__day-list::-webkit-scrollbar-thumb:vertical {
        height: 5px; /* Висота повзунка */
        height: 80%;
    }

    /* Задаємо колір повзунка */
    .calendar__day-list::-webkit-scrollbar-thumb {
        background-color: transparent; /* Колір повзунка */
        border-radius: 5px; /* Закруглені кути повзунка */
        width: 5px;
        height: 80%;
    }

    /* Задаємо ширину повзунка */
    .calendar__day-list::-webkit-scrollbar-thumb:horizontal {
        width: 5px; /* Ширина повзунка */
        height: 80%;
    }

    /* .calendar__offers-head {
        display: none;
        position: absolute;
    } */

    .block-history__content-list, .offers__list {
        padding-bottom: 250px;
    }

    .referrals {
        margin-bottom: 100px;
    }

    .membership {
        padding: 0px;
    }

    .membership__list {
        margin: 0 -45px;
        padding: 20px 0;
        max-width: 900px;

        overflow-x: auto;
    }

    .account__content-body .membership__list {
        margin: 0;
    }

        /* Задаємо колір фону */
        .membership__list::-webkit-scrollbar {
            background-color: transparent; /* Фон скролбару */
            width: 5px;
            height: 80%;
        }

        .membership__list::-webkit-scrollbar-thumb:vertical {
            height: 5px; /* Висота повзунка */
            height: 80%;
        }

        /* Задаємо колір повзунка */
        .membership__list::-webkit-scrollbar-thumb {
            background-color: #13e4ff; /* Колір повзунка */
            border-radius: 5px; /* Закруглені кути повзунка */
            width: 5px;
            height: 80%;
        }

        /* Задаємо ширину повзунка */
        .membership__list::-webkit-scrollbar-thumb:horizontal {
            width: 5px; /* Ширина повзунка */
            height: 80%;
        }

        .notifications--list .offer__head {
            margin-bottom: 5px;
        }

        .offers__list .notifications--list {
            padding-right: 10px;
        }

        .offers__list {
            padding: 0 20px;
            margin-right: 10px;
            padding-right: 10px !important;
        }

        .filters__search-block {
            margin-bottom: 10px;
        }

        .filters__search-btn {
            bottom: 0;
        }

        .filters__search-block::after {
            top: 40%;
        }

        .account__content-head--mobile {
            display: flex;
            justify-content: center;

            position: static;

            margin-bottom: 14px;
            font-family: var(--main);
            font-weight: 700;
            font-size: 1.8rem;
            line-height: 2.4rem;
            color: var(--white);
            cursor: pointer;
            text-align: center;
        }

    .membership__payment-history  thead {
        display: none;
    }

    .membership__list-mob-label {
        display: block;
        position: static;

        font-weight: 400;
        color: #8A8A8A;
    }

    .membership__list-item td {
        display: flex;
        justify-content: space-between;
        gap: 20px;
    }

    .membership__list-item td span {
        display: block;
    }

    .membership__payment-history tbody tr {
        display: block;
        padding-bottom: 12px;

        border-bottom: 1px solid #333333;
    }

    .membership__payment-history tbody {
        display: block;
        max-height: 60vh;
        padding-right: 15px;

        overflow-y: auto;
    }

    .membership__payment-history tbody::-webkit-scrollbar {
        background-color: #fff; /* Фон скролбару */
        width: 5px;
        height: 80%;
    }

    .membership__payment-history tbody::-webkit-scrollbar-thumb:vertical {
        height: 5px; /* Висота повзунка */
        height: 80%;
    }

    /* Задаємо колір повзунка */
    .membership__payment-history tbody::-webkit-scrollbar-thumb {
        background-color: #13e4ff; /* Колір повзунка */
        border-radius: 5px; /* Закруглені кути повзунка */
        width: 5px;
        height: 80%;
    }

    /* Задаємо ширину повзунка */
    .membership__payment-history tbody::-webkit-scrollbar-thumb:horizontal {
        width: 5px; /* Ширина повзунка */
        height: 80%;
    }


    .membership__payment-history tbody td {
        padding: 7px 0;
    }

    .login__body.login__body--large {
        margin-top: 51px;
    }

    .login__body-info-retutn-btn {
        margin-left: 0;
    }

    .login__content-head .btn.btn--exit {
        display: block;
        position: relative;
    }

    .login__content-head-block.login__content-head-block--right {
        gap: 8px;
        margin-top: 15px;
    }

    .login__content-head-title {
        margin-top: 15px;
        /* margin-left: -45px; */

    }

    .login__body.login__body--large {
        max-width: 417px;
    }

    .offers__list {
        max-width: 768px;
    }


}

@media (max-width: 768px) {
    /*main*/
    .main.main--account {
        /* max-width: 548px; */
        padding: 25px 0 92px 0;

        /* overflow: visible; */
    }

    .account__sidebar {
        transform: translateX(135%);
    }

    .earnings {
        padding-right: 10px;
    }

    .account__content-message-text {
        max-width: 300px;
    }

    #charter_earnings, #charter_weekly {
        width: 365px!important;
        height: 300px!important;
    }

    .chart-body-bg::after {
        width: 90%;
        height: 89%;
    }

    .container {
        padding: 0 10px !important;
    }

    .page.page--account {
        max-width: 608px;
    }

    .stations-list__item-info {
        max-width: 354px;
    }

    .form__wrapper-group.form__wrapper-group--flex {
        flex-direction: column;
    }

    .filters-block__elements.filters-block__elements--range .form__wrapper-group.form__wrapper-group--flex {
        flex-direction: row;
    }

    .form__input-error {
        font-size: 1.6rem;
    }

    /* .form__input-error {
        font-size: 1.2rem;
    }

    .form__label.form__label--filters {
        margin-bottom: 2px;
        font-size: 1.2rem;
    } */

    .login__content-head-title {
        display: none;
    }

}

@media (max-width: 568px) {

    .container {
        margin: 0;
    }
    .main.main--account {
        /* max-width: 448px; */
        padding: 25px 5px 92px 0;

        /* border: 3px solid #503DFF; */

        /* overflow: visible; */
    }

    .block-history__item-footer {
        display: block;
    }

    .block-history__item-title {
        display: flex;
        align-items: start;
        gap: 13px;
    }

    .block-history__item-title span {
        display: block;
        max-width: 300px;
    }

    .block-history__reason {
        margin-left: 0;
    }

    .block-history__item-time {
        margin-left: 0;
    }

    .offer__price {
        max-width: 110px;
        margin-left: auto;

    }

    /* .offer__price span {
        margin-right: -10px;
    } */

    .stantions-block__title {
        font-size: 14px;
    }

    .block-history__item-time {
        margin-bottom: 20px;
        text-align: start;
    }

    .filters__option {
        max-width: 320px;
    }

    .filters__option-btn {
        padding-right: 15px;
        text-wrap: nowrap;
    }

    .filters__option.filters__option--flex {
        min-width: 321px;
        height: 55px;
    }

    .filters__option.filters__option--flex:hover {
        min-width: 321px;
        height: 55px;
    }

    .filters__body-list-item {
        margin-bottom: 17px;
    }


    #charter_earnings, #charter_weekly {
        width: 367px!important;
        height: 300px!important;
    }

    /* .faq-account__item-content {
        max-width: 275px;
    } */

    .filters-tabs__btn {
        padding: 6px 6px;
        font-size: 18px;
    }

    .stations-list__item-name, .filters-block__group-subtitle {
        font-size: 1.8rem;
    }

    .filters-block__group-title {
        font-size: 12px;
    }

    .form__input-error {
        font-size: 1.8rem;
    }

    .user-settings > li {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .user-settings.is-short > li {
        display: none;

    }

    .offer__footer {
        display: block;
    }

    /* .calendar__offers .offer__btn-list {
        margin-bottom: 15px;
    } */

    .stantions-block .stantions-block__list-item {
        margin: 7.5px auto!important;
    }

    .filters__body.filters__body--recent .filters__body-list {
        padding: 0!important;
        margin-right: 0!important;
    }

    .filters__body-head--stations .new-button.new-button--middle {
        max-width: 267px;
    }


    .user-settings__item {
        flex-direction: column;
        gap: 10px;
        padding: 18px 10px 18px 10px;
    }

    .stantions-block__list-wrapper {
        padding: 15px 14px 15px 24px;
        padding-top: 0;
    }

    .filters.filters--select .filters__body {
        padding: 0;
    }

    .filters__body-head--setting {
        margin-top: 15px;
        margin-bottom: 16px;
    }


    .setting__button.setting__button--large {
        max-width: 285px;
    }

    .filters--select.open {
        margin-top: 290px;
    }

    .filters.filters--select .filters__body-list {
        padding-left: 20px;
    }

    .offer__period {
        flex-wrap: wrap;
    }

    .filters-block__group {
        padding-bottom: 20px;
    }

    .filter-block__btn-close {
        top: 20px;
    }

    .stations-list__item-info {
        width: 254px;

        transition: all .2s linear;
    }

    .stations-list__item.is-open .stations-list__item-info {
        width: 354px;

        transition: all .2s linear;
        z-index: 3;
    }

    .stations-list {
        gap: 36px;
    }

    .filters-tabs__list {
        flex-wrap: wrap;
    }

    .filters-tabs__btn {
        padding: 6px 9px;
        font-size: 18px;
    }

    .filters-tabs__btn {
        border-radius: 4px;
    }

    .block-history__content-list {
        max-width: 420px;
        margin: 0 auto;
    }

    .membership__current-details {
        grid-template-columns: 1fr;
    }

    .membership__current-details-list {
        padding: 0;
    }

    .filters-block__success-message {
        font-size: 1.4rem;
    }

    .login__body.login__body--large {
        max-width: 337px;
    }

    .days-range__button span {
        margin-top: 0;
    }

    .account__content-message-text {
        max-width: 300px;
    }

    .account__content-message {
        padding: 17px 20px;
    }

    .account__content-message {
        z-index: 6;
    }

    .account__content-message-btn {
        right: 20px;
    }

    .setting__button-toggle-arr span::after {
        right: 12px;
    }

    .calendar__day-item {
        width: 50px;
    }

    .offer__price-total {
        margin: 0;

        font-size: 20px;
    }

    .offer__price-per-hour {
        font-size: 14px;
    }

    .form-group__checkbox-label {
        font-size: 12px;
        text-wrap: nowrap;
    }

    .stantions-block__list-item .form-group__checkbox-label {
        text-wrap: wrap;
    }
}

@media (max-width: 450px) {
    .main.main--account {
        max-width: 420px;
        /* overflow-x: visible; */

    }



    .account__content-body.account__content-body--membership {
        overflow-y: visible;
    }

    .account__content-body.account__content-body--membership .membership__list {
        margin: 0px;
    }

    #profile-tab-pane {
        overflow: hidden;
    }

    .faq-account__item {
        width: 100%;
        padding: 10px 15px;
    }

    /* .faq-account__item-content {
        max-width: 225px;
    } */

    .faq-account__btn {
        width: auto;

    }

    .login__body, .login__footer {
        max-width: 321px;
        margin: 0 auto;
    }

    .faq-account__item-content-title {
        max-height: 75px;

        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;

        overflow: hidden;
    }

    .block-history__content-list {
        padding-right: 12px;
    }

    .block-history__content-list {
        max-width: 365px;
    }

    .block-history__item-title span, .block-history__period {
        max-width: 235px;
    }

    .block-history__period svg {
        margin-right: 4px;
    }

    .block-history__time {
        display: block;
        max-width: 225px;
        margin-left: 27px;
    }

    .offer {
        padding: 15px;
    }

    .calendar__offers .offer .offer__price {
        max-width: 150px;
    }

    .offer__btn-list {
        display: flex;
        /* flex-direction: column;
        gap: 15px; */
    }

    .calendar__offers .offer__period {
        display: flex;
    }

    .calendar__offers .offer__time {
        display: block;
        /* margin-left: 27px; */
    }

    .offers__list {
        padding-bottom: 50px;
    }

    .calendar__offers .offers__list {
        padding-bottom: 50px;
    }

    .offer__price {
        max-width: 150px;
    }

    .account__content-body.account__content-body--chart {
        padding-left: 0;
    }

    #charter_earnings, #charter_weekly {
        width: 330px!important;
        height: 260px!important;
    }

    .chart-body-bg::after {
        width: 83%;
        height: 85%;
    }

    .chart-body-bg::after {

        top: 2px;
        right: 22px;
    }

    .chart-body-bg.earnings__chart-body--monthly::after {
        top: -14px;
        right: 22px;
    }

    .earnings__chart-period {
        display: none;
        position: absolute;
    }

    .earnings__chart-label {
        margin-left: 65px;
    }

    .setting__name {
        text-align: start;
    }

    .account__sidebar {
        max-width: 100%;

        border-radius: 28px;
    }

    .filters__option {
        padding: 9px 15px;

    }

    .filters__option-btn {

        padding-right: 15px;

        line-height: 2rem;
        text-wrap: wrap;
    }

    .filters__option:hover {
        min-width: 270px;
    }

    .filters__option.filters__option--flex {
        min-width: 276px;
    }
    .filters__option.filters__option--flex:hover {
        min-width: 276px;
    }

    .page.page--account {
        max-width: 400px;
        border: 3px solid #503DFF;
    }

    .page.page--login {
        border: 3px solid #503DFF;
    }


    .stations-list__item-info {
        width: 219px;
    }

    .stations-list__item.is-open .stations-list__item-info {
        width: 324px;
    }

    .stations-list {
        padding-right: 2px;
    }

    .filters-block {
        padding: 12px 10px 10px 10px;
    }

    .stations-list__item-name, .filters-block__group-title, .filters-block__group-subtitle {
        font-size: 16px;
        line-height: 18px;
    }

    .stations-list {
        gap: 45px;
    }

    .login__content-head {
        margin: 0 10px;
    }

    .form__input-error {
        font-size: 1.4rem;
    }

    .block-history__offers-head-btn {
        margin-left: 10px;
    }

    .calendar .offers__list {
        padding-right: 0!important;
        margin-right: 0;
    }

    .calendar__day-list {
        padding-left: 30px;
    }

    .calendar .offer__btn-list {
        flex-direction: row;
    }

    .offer__btn-list {
        gap: 15px;
    }

    .offer__title {
        font-size: 14px;
        line-height: 18px;
    }


    .offer__time, .offer__day {
        font-size: 14px;
    }



    .offer__btn {
        font-size: 14px;
    }

    .calendar {
        gap: 30px;
    }

    .setting__list-item--full-width .setting__list-item-wrapper--change-fields {
        width: 100%;
    }

    .setting__list-item--full-width .setting__list-item-wrapper--change-fields.setting__list-item-wrapper--email-notification {
        max-width: 230px;
    }

    .setting__list-item--full-width .setting__list-item-wrapper--change-fields.setting__list-item-wrapper--email-notification.is-opened {
        max-width: 325px;
    }

    .setting__list-item--full-width .setting__list-item-wrapper--change-fields.setting__list-item-wrapper--email-notification .setting__name.setting__name--change-field {
        text-wrap: nowrap;
    }

    .setting__list-item--full-width .setting__list-item-wrapper--change-fields.setting__list-item-wrapper--email-notification .setting__name.setting__name--change-field:after {
        left: 206px;
    }

    .setting__list-item--full-width .setting__list-item-wrapper--change-fields.setting__list-item-wrapper--email-notification.is-opened .setting__name.setting__name--change-field:after {
        left: 100%;
    }

    .setting__name.setting__name--change-field::after {
        right: 0;
    }
}

@media(max-width: 420px) {
    .page.page--account {
        max-width: 380px;
    }

    .stations-list__item-info {
        width: 199px;
    }

    .user-settings__item-controlls {
        gap: 14px;
    }

    .stations-list__item.is-open .stations-list__item-info {
        width: 314px;
    }

    .block-history__content-list {
        max-width: 329px;
    }

    .chart-body-bg::after {
        width: 87%;
        height: 85%;
        right: 0;
    }

    .chart-body-bg.earnings__chart-body--monthly::after {
        right: 2px;
    }

    .setting__button.setting__button--large {
        max-width: 265px;
    }

    .filter-popup {
        padding: 62px 20px;
    }

    .offer__period {
        gap: 0px 15px;
    }

    .calendar__day-list {
        padding-left: 70px;
    }
}

@media(max-width: 390px) {
    .account__content-body.account__content-body--membership .membership__list {
        margin: 0px;
    }

    .page.page--login {
        max-width: 360px;
    }

    .page.page--account {
        max-width: 360px;
    }

    .account__content-message-btn {
        right: 10px;
    }

    #charter_earnings, #charter_weekly {
        width: 290px !important;
        height: 260px !important;
    }

    .chart-body-bg::after {
        width: 82%;

        right: 14px;
    }

    .chart-body-bg.earnings__chart-body--monthly::after {
        right: 15px;
    }

    .earnings {
        padding-right: 0;
    }
}