body {
    font-family: 'Mulish', sans-serif;
}

.preloader {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #35B728;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}


.loader-container {
    position: fixed;
    height: 71.5%;
    width: 80%;
    background-color: #FFFFFF;
    display: flex;
    align-items: center;
    flex-direction: column;
    z-index: 9999;
    border-radius: 8vw;
    padding: 9.6vh 10.8vh 9.6vh 10.8vh;
}


.loader-container img{
    height: 14.8vh;
}


.loader-container h4{
    font-size: 2.7vh;
    font-weight: 600;
    letter-spacing: -0.0vw;
    color: #35B728;
    margin-top: 1vh;
}

.loader {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10vh;
  width: 4.5vh;
  height: 4.5vh;
  border: 0.3vh solid #35B728;
  border-radius: 50%;
}

.loader-inner {
  content: "";
  position: absolute;
  width: 10%;
  height: 130%;
  border-radius: 0%;
  border: 0.4vh solid #FFFFFF;
  clip: rect(0px, 1.5vh, 3.5vh, 0px);
  transform: rotate(45deg);
}


a {
    text-decoration: none;
}

h2 {
    font-size: 7.7vw;
    font-weight: 900;
    letter-spacing: -0.04em;
    margin-top: 1vh;
    margin-left: 1vw;
    color: #2E332E;
}

h5,
.container-pet h5 {
    font-size: 3.7vw;
    font-weight: 400;
    letter-spacing: 0.01em;
    color: #fff;
    margin-bottom: 0px;
    padding: 0.5vw 0 0 0;
}

.container-pet h5 {
    text-align: left;
    font-size: 4.8vw;
    font-weight: 400;
    letter-spacing: -0.0vw;
    margin-left: 0.0vw;
    color: #2e332eab;
}

.modal-content h5 {
    text-align: left;
    font-size: 4.8vw;
    font-weight: 400;
    letter-spacing: -0.0vw;
    margin-left: 0.0vw;
    color: #2e332eab;
}

p {
    font-size: 3.7vw;
    font-weight: 400;
    letter-spacing: 0.01em;
    text-align: left;
    padding: 0 3.2vw 0 3.2vw;
    margin-bottom: 0;
}

p2 {
    font-size: 4.8vw;
    font-weight: 400;
    letter-spacing: -0.01em;
    text-align: left;
    margin-bottom: 0;
    color: #2E332E;
    bottom: 0.5vw;
    position: relative;
}

.button-container {
    width: 100%;
    margin-left: 0%;
    padding-top: 3vw;
    padding-left: 7vw;
    padding-right: 7vw;
    display: flex;
    align-items: center; /* Выравнивание по вертикали по центру */
    text-align: center; /* Выравнивание текста по центру по горизонтали */
    display: inline-block;
    position: fixed;
    left: 0;
    bottom: 12%;
    background: linear-gradient(to bottom, transparent 0%, #fff 10%);
}

.container-questionnaire .button-container{
    bottom: 0;
}

.main-button {
    width: 100%;
    margin-top: 5.3vw;
    margin-bottom: 9.3vw;
    min-height: 16.5vw;
    padding: 2vh 2vw;
    border: 0px;
    border-radius: 25px;
    background-color: #35B828;
    font-size: 5.3vw;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #fff;
    transition: background-color 0.3s;
    box-shadow: 0px 4.2px 10.6px 0px #35B72833;
}

.btn-logout {
    background-color: #E0B4B7;
    color: #B72834;
    margin-bottom: 0;
}

.main-button:hover {
    background-color: #0d9a15;
}

.btn-logout:hover {
    background-color: #d59da0;
    color: #FFFFFF;
}

.support-button {
    width: 20%;
    margin-top: 1.3vw;
    margin-bottom: 0vw;
    height: 8.5vw;
    border: 0px;
    border-radius: 25px;
    background-color: #35B828;
    font-size: 3.7vw;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: #fff;
    transition: background-color 0.3s;
    box-shadow: 0px 4.2px 10.6px 0px #35B72833;
    display: none;
    position: absolute;
}
.support-button-back {
    left: 6.4%;
}
.support-button-next{
    right: 6.4%;
}

.support-button:hover {
    background-color: #0d9a15;
}

.oauth2-links{
    margin-top: 3dvh;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.oauth2-login-btn {
    display: flex;
    width: 120px;
    height: 120px;
    border: 2px solid #35B828;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
}

.fa-google, .fa-yandex-international, .fa-vk{
    font-size: 60px;
    color: #35B828;
}

.chat-container .questioonnaire-button{
    position: relative;
    display: block;
    width: auto;
    height: auto;
    padding: 1vh 2.5vw 1vh 2.5vw;
    margin-top: 1.3vw;
    border: 0px;
    border-radius: 25px;
    background-color: #35B828;
    font-size: 3.7vw;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: #fff;
    transition: background-color 0.3s;
    box-shadow: 0px 4.2px 10.6px 0px #35B72833;
}

.container-pet .container-back,
 .container-questionnaire .container-back,
    .container-problem .container-back,
      .container-event .container-back{
        padding-top: 3.2vw;
}

.container-pet .container-back .fa-arrow-left,
.container-event .container-back .fa-arrow-left,
.container-pet .container-edit .fa-pencil,
 .container-questionnaire .container-back .fa-arrow-left,
 .container-questionnaire .container-back .fa-pencil,
  .container-problem .container-back .fa-arrow-left,
  .container-problem .container-back .fa-pencil{
      font-size: 2.5vw;
      color: #35B728;
      align-items: center;
      text-align: center;
      display: inline-flex;
}

.container-pet .container-back h4,
.container-event .container-back h4,
.container-pet .container-edit h4,
.container-questionnaire .container-back h4,
 .container-problem .container-back h4{
    margin-left: 0.5vw;
    font-size: 3.7vw;
    font-weight: 400;
    color: #35B728;
    letter-spacing: -0.0vw;
    display: inline-block;
}


.container-pet .container-edit{
    width: 100%;
    padding-top: 0vw;
}




/*
---------------------------------------------
Стили страницы профиля
---------------------------------------------
*/
.first-page,
 .consultation-page,
    .registration-page{
        margin-left: 7.4%;
        margin-right: 7.4%;
        margin-top: 3%;
        height: 100vh;
        background-color: #FFFFFF;
        display: flex;
        align-items: center;
        flex-direction: column;
}

.first-page {
    position: relative;
}

.logout-link{
    width: 100%;
}

.container-profile-head .logout-link{
    position: relative;
}


.add-consultation-info {
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;
    margin-top: 24vh;
    padding: 0 3vw;
}

.first-page .help-btn {
    background-color: #FFFFFF;
    border: 5px solid #35B828;
    color: #35B828;
    line-height: 1.2;
}

.first-page .help-btn:hover {
    background-color: #35B828;
    color: #FFFFFF;
}

.first-page .modal-content {
    height: auto;
    gap: 20px;
    padding-bottom: 10vh !important;
}

.first-page .modal h3{
    margin: 0;
    letter-spacing: -0.01em;
}

.first-page .modal p{
    font-size: 38px;
    font-weight: 700;
}

.first-page .modal-content .main-button{
    margin: 0;
}

.consultation-page {
    height: auto;
    text-align: center;
    margin-left: 0%;
    margin-right: 0%;
    margin-top: 0%;
}

.consultation-page p1,
 .consultation-page p2{
    font-size: 3.7vw;
    font-weight: 700;
    letter-spacing: 0.01em;
    margin-top: 1vh;
    margin-bottom: 0;
    color: #999999;
    text-align: center;
}

.consultation-page p2 {
    font-weight: 400;
    margin-top: 0vh;
    text-align: center;
}

.logout-img{
  overflow: hidden;
  width: auto;
  height: 50%;
  margin-top: 0;
  transform: translateY(10px);
}

.first-page img{
  overflow: hidden;
  max-width: 100%;
  margin-top: 12dvh;
}

.first-page  .logout-img{
   margin-top: 0 !important;
   height: 3dvh;
   width: auto;
}

.consultation-page img{
  overflow: hidden;
  width: 34.8vw;
}

.consultation-page .consultation-block {
    width: 100%;
    margin-top: 6vh;
}

.consultation-page .consultation-block img{
    margin-top: 0vh;
    overflow: hidden;
    width: 11vw;
    height: 11vw;
    object-fit: cover;
    display: inline-block;
    border-radius: 50%;
}

.first-page .logo {
    align-items: center;
    text-align: center;
    display: inline-flex;
    position: absolute;
    margin-bottom: 5.3vw;
    bottom: 0vw;
    width: 30vw;
    height: 5.3vw;
    padding: 0.8vw 2.9vw 0.8vw 2.9vw;
    border-radius: 3vw;
    background-color: #35B728;
}

.first-page .logo img{
  overflow: hidden;
  width:auto;
  margin-top: 0vh;
  height: 3.7vw;
  margin-left: 1.2vw;
}

.container-profile,
.container-consultation{
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 0%;
    margin-bottom: 30vh;
}
.container-profile{
    margin-bottom: 28vh;
}

.container-profile-head {
    background: linear-gradient(to top, transparent 0%, #fff 10%);
}

.container-profile .container-profile-head,
 .container-consultation .container-consultation-head,
 .container-consultation-head{
    width: 80%;
    padding-top: 2.5vw;
    padding-bottom: 1.5%;
    position: fixed;
    background: linear-gradient(to top, transparent 0%, #fff 10%);
    z-index: 1;
}

.container-profile .container-profile-head h3,
 .feedback-page .container-profile-head h3{
    font-size: 9.5vw;
    font-weight: 900;
    letter-spacing: -0.01em;
}

.container-profile .container-profile-head .fa-pencil,
 .feedback-page .container-profile-head .fa-pencil{
  font-size: 3.0vw;
  color: #35B728;
  display: inline-block;
}

.container-profile .container-profile-head h4 {
    font-size: 3.0vw;
    font-weight: 400;
    display: inline-block;
    color: #35B728;
}

.container-profile .all-horses {
    width: 100%;
    padding-top: 13vw;
    padding-bottom: 4vh;
}

.container-profile .all-horses .horse-container,
.container-consultation .consultation-page .consultation-block .consultation-container{
    width: 100%;
    margin-top: 8vw;
}

.container-profile .all-horses .horse-container img{
  border-radius: 25px;
  overflow: hidden;
  height: 25vw;
  width: 25vw;
  object-fit: cover;
  display: inline-block;
}

.container-profile .all-horses .horse-container h3{
    font-size: 6.3vw;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin-left: 2.0vw;
    color: #2E332E;
}

.container-profile .all-horses .horse-container h4{
    font-size: 4.75vw;
    font-weight: 400;
    letter-spacing: -0.0vw;
    margin-left: 2.0vw;
    color: #2E332E;
}

.container-profile .all-horses .horse-container h5{
    font-size: 4.16vw;
    font-weight: 400;
    letter-spacing: -0.0vw;
    margin-left: 2.0vw;
    color: #8A998A;
}

.container-profile .all-horses .horse-container .fa-angle-right {
  font-size: 8.0vw;
  color: #D4D4D4;
}

.container-consultation .consultation-page .consultation-block .consultation-container h3 {
    font-size: 6.3vw;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin-left: 2.0vw;
    color: #2E332E;
}


.container-consultation .consultation-page .consultation-block .consultation-container h4 {
    font-size: 4.75vw;
    font-weight: 400;
    letter-spacing: -0.0vw;
    margin-left: 2.0vw;
    color: #2E332E;
}

.container-consultation .consultation-page .consultation-block .consultation-container h5{
    font-size: 4.16vw;
    font-weight: 400;
    letter-spacing: -0.0vw;
    margin-left: 2.0vw;
    margin-top: 1.0vw;
    color: #5C665C;
}

.container-consultation .consultation-page .consultation-block .consultation-container p{
    margin-right: 0.0vw;
    font-size: 3.7vw;
    font-weight: 400;
    letter-spacing: -0.0vw;
    color: #9BAB87;
    padding: 0 0vw 0 0;
    text-align: right;
}

.container-consultation .consultation-page .consultation-block .consultation-container .fa-angle-right {
  font-size: 8.0vw;
  color: #D4D4D4;
  margin-top: 5vw;
}

/*
---------------------------------------------
Стили анкеты
---------------------------------------------
*/

.container-questionnaire .head,
.container-problem .head{
    margin-bottom: 2%;
}

.container-questionnaire .head h1,
 .container-problem .head h1 {
    font-weight: 800;
    font-size: 8vw;
}

.container-problem .problem{
    margin-top: 0;
    width: 100%;
    margin-bottom: 18dvh;
}

.implementation{
    margin-top: 4%;
}

.implementation hr {
    border: 0.5vw solid #35B728;
    opacity: 1;
    width: 14.28%;
}

.container-questionnaire .question {
    margin-top: 7%;
    display: none;
}

.container-questionnaire .question h2 {
    font-weight: 400;
    font-size: 3.5vw;
}

.container-questionnaire .question .answer {
    margin-top: 20px;
}

.container-questionnaire .question .answer .answer-col {
    display: flex;
    align-items: center;
}

.container-questionnaire .question .answer h3 {
    font-weight: 400;
    font-size: 4vw;
    display: inline-block;
    margin-left: 2%;
}

.container-questionnaire .food {
    margin-top: 7%;
   display: none;
}

.container-questionnaire .food h2 {
    font-weight: 400;
    font-size: 3.5vw;
}

.container-questionnaire .food .answer {
    margin-top: 20px;
}

.container-questionnaire .food .answer h3 {
    font-weight: 400;
    font-size: 4vw;
    display: inline-block;
}

.container-questionnaire .food .answer .text {
    font-weight: 400;
    font-size: 4vw;
    display: inline-block;
    align-items: center;
}

.container-questionnaire .main-button {
    margin-top: 4vw;
}

.container-problem h3 {
    font-size: 5.3vw;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-left: 0.0vw;
    margin-bottom: 1vh;
    color: #2E332E;
}

.container-questionnaire .scroll-input {
    width: 100%;
    height: 3vh;
    -webkit-appearance: none;
    appearance: none;
    background: #fff;
    outline: none;
    border-radius: 5px;
}

.container-questionnaire .scroll-input::-webkit-slider-runnable-track {
    width: 100%;
    height: 0.8vw; /* Высота трека */
    background: #35B728; /* Цвет трека */
    border-radius: 5px; /* Радиус скругления углов трека */
}

/* Стили для заполненной части трека (бара) */
.container-questionnaire .scroll-input::-webkit-slider-thumb {
    -webkit-appearance: none; /* Убираем стандартный стиль ползунка для Safari/Chrome */
    appearance: none; /* Убираем стандартный стиль ползунка для других браузеров */
    width: 5vw; /* Ширина ползунка */
    height: 5vw; /* Высота ползунка */
    background: #fff; /* Цвет ползунка */
    border: 4px solid #35B728; /* Обводка ползунка */
    border-radius: 50%; /* Радиус скругления для круглого ползунка */
    cursor: pointer; /* Изменение курсора при наведении */
    margin-top: -2.0vw; /* Смещение ползунка на половину его высоты, чтобы он выравнивался по вертикали */
}


/*
---------------------------------------------
Стили профиля питомца
---------------------------------------------
*/
.container-pet,
 .container-questionnaire,
  .container-problem,
   .container-event{
    margin-left: 6.4%;
    margin-right: 6.4%;
    margin-top: 3%;
    margin-bottom: 13vh;
}
.container-questionnaire form{
  margin-top: 16vw;
}
.container-questionnaire .food input[type="text"]{
  width: 40%;
  height: 7vw;
  border-radius: 30px;
  border: 2px solid #35B828;
  border-radius: 15px;
  background: #FFF;
  font-size: 4vw;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: #2E332E;
  padding: 0.5vw 2vw 0.5vw 2vw;
  display: flex;
  align-items: center;
  text-align: center;
  display: inline-block;
}

.container-pet img{
  margin-top: 4.2vw;
  border-radius: 24px;
  overflow: hidden;
  width: 87.2vw;
  height: 87.2vw;
  object-fit: cover;
  display: inline-block;
}

.container-pet h3{
    font-size: 6.4vw;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin-top: 2.7vw;
    margin-left: 0.0vw;
    color: #2E332E;
}

.container-pet h4{
    font-size: 4.8vw;
    font-weight: 400;
    letter-spacing: -0.0vw;
    margin-left: 0.0vw;
    /*color: #2E332E;*/
}


.container-pet hr{
    margin-top: 5.3vw;
    border: 1px solid #E6E6E6;
}

.container-pet .questionnaire,
.container-pet .field
 {
    margin-top: 5.3vw;
}
.container-pet .specialization{
    display: none;
}
.container-event .field
 {
    margin-top: 5.3vw;
}

.container-pet .field-delete{
    margin-top: 10.6vw
}

.container-questionnaire h4{
    font-size: 5.3vw;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-left: 0.0vw;
    color: #8A998A;
}


.container-pet .questionnaire h4{
    font-size: 4.8vw;
    font-weight: 700;
    letter-spacing: -0.0vw;
    margin-left: 0.0vw;
    color: #2E332E;
}

.container-pet .questionnaire h5{
    font-size: 3.7vw;
    font-weight: 400;
    letter-spacing: 0.01em;
    margin-left: 0.0vw;
    color: #9BAB87;
}

.container-pet .questionnaire .food{
    width: 100%;
    height: auto;
    padding: 3.3vw 4.8vw 4.0vw 4.8vw;
    border-radius: 30px;
    gap: 4px;
    background: #35b72821;
}

.container-pet .questionnaire .main-button,
 .container-pet .main-button,
  .container-consultation .button-container .main-button{
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    margin-top: 5.3vw;
    padding: 4.0vw 0 4.0vw 0;
    border: 0px;
    border-radius: 30px;
    background: #35B828;
    box-shadow: 0px 16px 40px 0px #B4CA8733;
    transition: background-color 0.3s;
}

.container-pet .main-button{
    background: #F5A640;
    box-shadow: 0px 16px 40px 0px #F5A64033;
    margin-top: 1.3vw !important;
}

.container-pet .main-button:hover{
    background-color: #f5a640c7;
}

.container-pet .questionnaire .main-button:hover {
    background-color: #0d9a15;
}

.container-pet .questionnaire .main-button h4,
 .container-pet .main-button h4,
  .container-pet .questionnaire .food h4,
   .container-consultation .button-container .main-button h4{
    font-size: 5.3vw;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #fff;
    margin-bottom: 0px;
}

.container-pet .questionnaire .main-button h5,
 .container-pet .main-button h5,
  .container-pet .questionnaire .food h5{
    font-size: 3.7vw;
    font-weight: 400;
    letter-spacing: 0.01em;
    color: #fff;
    margin-bottom: 0px;
    padding: 0.5vw 0 0 0;
}

.container-pet .questionnaire .food h5{
    font-size: 4.8vw;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: #2E332E;
    padding: 1.2vw 0 0 0;
}
/*
---------------------------------------------
Создание питомца
---------------------------------------------
*/
.container-pet .custom-label {
  margin-top: 0.5vw;
  cursor: pointer;
  font-weight: 400;
  font-size: 4vw;
  align-items: center;
  /* text-align: center; /* Добавляем выравнивание текста по центру */
  line-height: 3.9vw;
  margin-top: 1vh;
}

.container-pet .custom-label .radio-container {
  height: 12.5vw;
  padding: 3.2vw 4.2vw 3.2vw 4.2vw;
  background: #F7F7F7;
  border-radius: 100px;
  align-items: center;
  margin-right: 1vw;
}

.container-pet .custom-label .radio-container .custom-radio {
  margin-top: 0.5vw;
  width: 5vw;
  height: 5vw;
  border: 2px solid #35B828;
  border-radius: 50%;
  position: relative;
  display: inline-block;
}

input[type="radio"]:checked + .custom-label .radio-container .custom-radio::before {
  content: "✓";
  display: inline-block;
  position: absolute;
  width: 5vw;
  height: 5vw;
  border-radius: 50%;
  top: -0.1vw;
  left: -0.1vw;
  text-align: center;
  line-height: 5vw; /* Выравниваем галочку по вертикали */
  font-size: 4vw; /* Устанавливаем размер галочки (меньший размер) */
  color: #35B828;
  background-color: #fff;
}

input[type="radio"]:checked + .custom-label .radio-container {
  background-color: #35B728;
}

.container-pet .custom-label .radio-container .custom-label p2 {
  padding: 0 0 0 1vw;
  display: inline-block;
}


input[type="file"] {
  display: none;
}

.container-pet .custom-file,
 .container-questionnaire .custom-file{
    width: 23.4vw;
    height: 23.4vw;
    border-radius: 25px;
    position: relative;
    background: #F7F7F7;
    padding: 6.4vw;
    cursor: pointer;
    display: inline-block;
}

.container-questionnaire .custom-file{
    width: 29.4vw;
    height: 29.4vw;
}

.container-pet .custom-file .circle,
 .container-questionnaire .custom-file .circle{
    width: 11.6vw;
    height: 11.6vw;
    border-radius: 50%;
    border: 5px solid #D4D4D4;
    color: #D4D4D4;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 7.5vw;
    font-weight: 300;
    padding-bottom: 0.5vw;
}

.container-questionnaire .custom-file .circle {
    width: 16.6vw;
    height: 16.6vw;
}

.container-pet .field p3,
 .container-questionnaire .field p3{
  font-size: 5.3vw;
  font-weight: 700;
  line-height: 5.8vw;
}


.container-pet .container-btn,
 .container-questionnaire .container-btn{
    margin-top: 1vw;
}

.container-pet .container-btn .custom-delete,
 .container-questionnaire .container-btn .custom-delete{
    color: #B72834;
    font-size: 3.7vw;
    font-weight: 400;
    letter-spacing: 0.01em;
    cursor: pointer;
}

.container-pet .button-create,
 .container-event .button-create{
    width: 100%;
    margin-top: 2%;
    height: 16.5vw;
    border: 0px;
    border-radius: 25px;
    background-color: #D4D4D4;
    font-size: 5.3vw;
    font-weight: 700;
    color: #999999;
    box-shadow: 0px 16px 40px 0px #B4CA8733;
}

.button-create.active {
    background-color: #35B728; /* Задайте желаемый цвет фона */
    color: #FFFFFF; /* Задайте желаемый цвет текста */
    cursor: pointer;
}

.container-pet .button-delete,
 .container-event .button-delete,
  .logout-modal .button-logout{
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    height: 18vw;
    margin-top: 5.3vw;
    padding: 4.0vw 0 4.0vw 0;
    border: 0px;
    border-radius: 30px;
    background: #E0B4B7;
    box-shadow: 0px 16px 40px 0px #B4CA8733;
    transition: background-color 0.3s;
    cursor: pointer;
    box-shadow: 0px 16px 40px 0px #B828341A;
}

.container-pet .button-delete:hover {
    background-color: #fccdd0;
}

.container-pet .button-delete h4,
 .container-event .button-delete h4{
    font-size: 5.3vw;
    font-weight: 700;
    color: #B72834;
    letter-spacing: -0.01em;
    margin-bottom: 0px;
}


.container-pet .button-delete h5{
    font-size: 3.7vw;
    font-weight: 400;
    letter-spacing: 0.01em;
    color: #B72834;
    margin-bottom: 0px;
    padding: 0.5vw 0 0 0;
}


.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0px;
    bottom: 0px;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    overflow: auto;
}

.modal-show {
    display: block;
    opacity: 1;
    transition: opacity 3s;
}

.modal h3{
    font-size: 6.3vw;
    font-weight: 800;
    letter-spacing: -0.2vw;
    margin-left: 2.0vw;
    color: #2E332E;
}

.modal-content {
    position: absolute;
    background-color: #fff;
    bottom: 0px;
    padding: 10.6vw 6.4vw 10.6vw 6.4vw;
    border-radius: 30px 30px 0px 0px;
    width: 100vw;
    height: 90vw;
    text-align: center;
    align-items: center;
}

/*
---------------------------------------------
Стили футера
---------------------------------------------
*/

footer {
    display: flex;
    align-items: center; /* Выравнивание по вертикали по центру */
    text-align: center; /* Выравнивание текста по центру по горизонтали */
    display: inline-block;
    position: fixed;
    left: 0;
    bottom: 0;
    background: #fff;
    width: 100%;
    height: 12%;
    padding-top: 3vw;
    padding-left: 5vw;
    padding-right: 5vw;
    border-top: 2px solid rgba(0, 0, 0, 0.3);
}
footer .container p{
    display: none;
}
footer .container .fa-instagram {
          display: none;
}
footer .container .fa-vk {
          display: none;
}

.fa-house, .fa-comment-dots, .fa-calendar, .fa-headphones-simple {
  font-size: 5.0vw;
  color: #bebebe;
}


.fa-focus {
  color: #35B728;
}

footer h4, .container-pet footer h4,  .container-questionnaire footer h4{
    margin-top: 1.2vw;
    font-size: 3.0vw;
    font-weight: 500;
    color: #bebebe;
}
footer h4 {
   font-size: 26px;
}

footer h4, .container-pet footer h4{
    color: #bebebe;
}

/*
---------------------------------------------
Стили чата
---------------------------------------------
*/

.chat-container {
    margin-left: 0vw;
    margin-right: 0vw;
    margin-top: 0vh;
    margin-bottom: 0vh;
    height: 100vh;
    position: fixed;
    overflow: hidden;
}



.chat-container .head {
    position: fixed;
    padding: 3.2vh 6.4vw 2vh 6.4vw;
    width: 100vw;
    border-bottom: 2px solid #0000001A;
    background: #fff;
    z-index: 10;
}


.chat-container .head  .fa-arrow-left {
    font-size: 5.5vw;
    color: #43503B;
    border-radius: 50%;
}

#arrow-icon.highlight {
    color: rgb(53 183 40 / 80%);
}

.room-logo.highlight{
    filter: brightness(1.5) hue-rotate(90deg);
    transition: filter 0.3s ease;
}

.chat-container .head img {
      overflow: hidden;
      width: 10vw;
      margin-top: 0.2vh;
      height: 10vw;
      margin-left: 3.0vw;
      object-fit: cover;
}

.chat-container .head h2 {
    font-size: 5.3vw;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-align: left;
    color: #2E332E;
    margin: 0;
}

.chat-container .head p {
    font-size: 3.7vw;
    font-weight: 400;
    letter-spacing: 0.01em;
    text-align: left;
    color: #5C665C;
    padding: 0 0 0 0;
}

.chat-container .chat-log {
    position: fixed;
    padding: 2vh 6.4vw 0 6.4vw;
    width: 100vw;
    overflow-y: auto;
    bottom: 18vh;
    top: 14vh;
    z-index: 11;
}


.chat-container .message-input {
    position: fixed;
    padding: 2dvh 6.4dvw 2dvh;
    width: 100vw;
    border-top: 2px solid #0000001A;
    bottom: 0;
}


input[type="textarea"] {
  display: inline-block;
  width: 100%;
  height: 7.5vh;
  border-radius: 10vw;
  background: #F7F7F7;
  border: 0px;
  font-size: 4.8vw;
  font-weight: 400;
  letter-spacing: -0.2vw;
  color: #2E332E;
  padding: 4.2vw 6.4vw 4.2vw 6.4vw;
}

.chat-container textarea {
  display: inline-block;
  width: 100%;
  border-radius: 10vw;
  background: #F7F7F7;
  border: 0px;
  font-size: 4.2vw;
  font-weight: 400;
  letter-spacing: -0.2vw;
  color: #2E332E;
  padding: 4.2vw 120px 4.2vw 6.4vw;
  max-height: 450px;
}

textarea:focus {
  border: 2px solid #35B728;
  outline: none;
}

input[type="textarea"]:focus {
  border: 2px solid #35B728;
  outline: none;
}

input[type="textarea"]::placeholder {
    font-size: 4.8vw;
    font-weight: 400;
    color: #999999;
}

.chat-container .message-input .send-button {
    width: 100%;
    margin-top: 0vw;
    margin-bottom: 0vw;
    height: 7.5vh;
    width: 7.5vh;
    max-height: 130px;
    max-width: 130px;
    border: 0px;
    border-radius: 50%;
    background-color: #999999;
    font-size: 5.3vw;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #fff;
    transition: background-color 0.3s;
    box-shadow: 0px 4.2px 10.6px 0px #35B72833;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-container .message-input .send-button img {
    height: 50%;
    width: 50%;
    filter: brightness(0) invert(1);
}

#chat-message-submit.active {
    background-color: #35B828;
}


.chat-container .modal-show {
    display: flex;
    opacity: 1;
    transition: opacity 3s;
    z-index: 15;
    align-items: center;
    justify-content: center;
}

.chat-container .modal-content {
    text-align: start;
    background-color: #fff;
    top: 10vh;
    padding: 3vh 6.4vw 3vh 6.4vw;
    border-radius: 30px 30px 30px 30px;
    width: 90vw;
    height: 85vh;
    overflow-y: auto;
}

.chat-container .finish-consultation-content{
    width: 100dvw;
    bottom: 0;
    top: auto;
    height: auto;
    border-radius: 30px 30px 0 0;
}

.chat-container .modal-content img{
  margin-top: 4.2vw;
  border-radius: 24px;
  object-fit: cover;
  width: 100%;
}

.chat-container .modal-content h3{
    font-size: 6.4vw;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin-top: 2.7vw;
    margin-left: 0.0vw;
    color: #2E332E;
}

.chat-container .modal-content h4{
    font-size: 4.8vw;
    font-weight: 400;
    letter-spacing: -0.0vw;
    margin-left: 0.0vw;
    color: #2E332E;
    overflow-wrap: break-word;
    hyphens: auto;

}

.chat-container .modal-content .question-doctor h4,
    .chat-container .modal-content .answer-doctor h4{
        width: 35vw;
    }

.chat-container .modal-content h3{
    font-size: 6.3vw;
    font-weight: 800;
    letter-spacing: -0.2vw;
    margin-left: 0.0vw;
    color: #2E332E;
}

.chat-container .modal-content .question-doctor{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1vh 1vh 1vh 1vh;
    hyphens: auto;
}

.chat-container .modal-content .answer-doctor{
    padding: 1vh 1vh 1vh 1vh;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 37vw;
}

.chat-container .modal-content .answer-doctor img{
  border-radius: 24px;
  object-fit: cover;
  width: 35vw;
  height: auto;
}

.chat-container .modal-content .main-button{
    z-index: 2;
    height: auto;
    padding: 10px 20px;
    min-width: 150px;
}

.chat-container .modal-content .modal-image {
  display: none;
  position: fixed;
  z-index: 3;
  padding-top: 50px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.9);
  padding: 0vh 10vw 0vh 10vw;
}

.chat-container .modal-content .modal-image .modal-content {
  margin-top: 10vh;
  display: block;
  max-width: 80%;
  max-height: 80%;
}

.chat-container .modal-content .modal-image img {
    width: 80vw;
}

/* Закрыть (X) кнопка */
.modal-image .close {
  position: absolute;
  top: 2vh;
  right: 4vw;
  color: #f1f1f1;
  font-size: 8vw;
  font-weight: bold;
  cursor: pointer;
  z-index: 3;
}

.modal-image .close:hover,
.modal-image .close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/*
---------------------------------------------
Инпуты
---------------------------------------------
*/

input[type="radio"] {
  display: none;
}


.container-questionnaire .question .answer .custom-radio{
  width: 4vw;
  height: 4vw;
  border: 2px solid #35B828;
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  font-weight: 400;
  font-size: 4vw;
  display: inline-block;
  text-align: center; /* Добавляем выравнивание текста по центру */
  line-height: 4vw; /* Выравниваем текст по вертикали */
}



input[type="radio"]:checked + .custom-radio::before {
  content: "✓";
  display: inline-block;
  position: absolute;
  width: 100%; /* Размер фона равен размеру родительской радиокнопки */
  height: 100%; /* Размер фона равен размеру родительской радиокнопки */
  border-radius: 50%;
  top: 0;
  left: 0;
  text-align: center;
  line-height: 3.9vw; /* Выравниваем галочку по вертикали */
  font-size: 3vw; /* Устанавливаем размер галочки (меньший размер) */
  color: #fff;
  background-color: #35B828;
}

input[type="radio"] + .custom-radio::before {
  content: "";
}


input[type="date"] {
  width: 100%;
  height: 16.5vw;
  border-radius: 30px;
  background: #F7F7F7;
  border: 0px;
  font-size: 6.4vw;
  font-weight: 800;
  letter-spacing: -0.2vw;
  color: #35B828;
  padding: 4.2vw 6.4vw 4.2vw 6.4vw;
}

input[type="number"] {
  width: 30%; /* Установите желаемую ширину */
  height: 5vw; /* Установите желаемую высоту */
  font-weight: 400;
  font-size: 4vw;
  border: 2px solid #35B828;
  border-radius: 15px;
  display: flex;
  align-items: center; /* Выравнивание по вертикали по центру */
  text-align: center; /* Выравнивание текста по центру по горизонтали */
  display: inline-block;
}

.container-questionnaire .food .answer input[type="number"]{
    height: 7vw;
}

input[type="time"] {
  width: 40%; /* Установите желаемую ширину */
  height: 5vw; /* Установите желаемую высоту */
  font-weight: 400;
  font-size: 4vw;
  border: 2px solid #35B828;
  border-radius: 15px;
  display: flex;
  align-items: center; /* Выравнивание по вертикали по центру */
  text-align: center; /* Выравнивание текста по центру по горизонтали */
  display: inline-block;
}


input[type="text"] {
  width: 100%;
  border-radius: 30px;
  background: #F7F7F7;
  border: 0px;
  font-size: 48px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #2E332E;
  padding: 2dvh 3dvw;
}

input[type="password"], input[type="email"] {
  width: 100%;
  border-radius: 30px;
  background: #F7F7F7;
  border: 0px;
  font-size: 48px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #2E332E;
  padding: 2dvh 3dvw;
}
input[type="submit"] {
    margin-top: 2vh;
    width: 100%;
    padding: 2dvh 2dvw;
    border: 0px;
    border-radius: 25px;
    background-color: #35B828;
    font-size: 48px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #fff;
    transition: background-color 0.3s;
    box-shadow: 0px 4.2px 10.6px 0px #35B72833;
}

input[type="datetime-local"] {
    width: 100%;
    border-radius: 30px;
    background: #F7F7F7;
    border: 0px;
    font-size: 6.4vw;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #35B828;
    padding: 2vh 6.4vw;
}

.custom-select {
  width: 100%;
  height: 16.5vw;
  border-radius: 30px;
  background: #F7F7F7;
  border: 0px;
  font-size: 4.8vw;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: #43503B;
  padding: 4.2vw 6.4vw 4.2vw 6.4vw;
}

.custom-select option {
  font-size: 2.3vw;
}

.form-check {
    margin-top: 2vw;
    display: flex;
    align-items: center;
}

.form-check-label {
    font-size: 4.2vw;
    font-weight: 400;
    letter-spacing: -0.01em;
    margin-left: 2%;
}
.container-problem .problem .form-check-label{
    font-size: 4.8vw;
    font-weight: 500;
    letter-spacing: -0.01em;
    margin-left: 2%;
}


.form-check-input{
    width: 5vw;
    height: 5vw;
}

.form-check-input:checked{
    background-color: #35B828;
    border-color: #35B828;
}

.form-check-input:checked[type=checkbox] {
    background-color: #35B828;
    border-color: #35B828;
}

.custom-label p2.selected {
    color: #fff;
    background-color: #35B728;
}
.container-logo {
        display: none;
}
.container-questionnaire .form-check-label {
        font-size: 4vw;
}
.container-questionnaire p{
        font-size: 3.2vw;
}
.form-select-custom {
    font-size: 4vw;
    border: 2px solid #35B828;
    width: 60%;
    border-radius: 15px;
}

.container-event textarea {
    font-size: 6.4vw;
    font-weight: 400;
    width: 100%;
    height: 29vh;
    border-radius: 30px;
    background: #F7F7F7;
    border: 0px;
    letter-spacing: -0.01em;
    color: #35B828;
    padding: 2vh 6.4vw;
}
.container-event .custom-select {
    font-size: 6.4vw;
    font-weight: 800;
}

.color-picker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2vw;
    width: 100%;
    padding: 1vh 2vw;
    justify-content: center;
}
.color-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.2s;
}


.first-page-btn {
    margin-top: 2dvh;
    margin-bottom: 0;
}

@media screen and (min-device-width: 480px) {
    body {
/*        background-color: #35B728; */
    }

    h2 {
        font-size: 24px;
        margin-top: 15px;
        margin-left: 10px;
    }

    .first-page {
        margin: 0vh 10vw;
        padding: 0 10vw;
        height: 100vh;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .first-page img {
        overflow: hidden;
        width: 100%;
        margin-top: 0;
    }

    .first-page  .logout-img{
       margin-top: 0 !important;
       height: 30px;
       width: auto;
    }

    .first-page h2 {
        margin: 0;
        max-width: 100%;
    }

    .first-page .main-button {
        margin-top: 36px;
        margin-bottom: 36px;
        border-radius: 10px;
        font-size: 18px;
        padding: 10px 20px;
        min-height: 67px;
        width: 100%;
    }

    .first-page .help-btn {
        margin-top: 0;
        border: 3px solid #35B828;
    }

    .first-page .modal {
        align-items: center;
        justify-content: center;
    }

    .first-page .modal-content {
        max-width: 100%;
        padding: 5vh 15vw;
    }

    .first-page .modal h3 {
        font-size: 24px;
    }

    .first-page .modal p {
        font-size: 18px;
    }

    .first-page .modal-content .main-button {
        min-width: 70%;
        width: auto;
    }

    .container-problem h3 {
        font-size: 18px;
        margin-bottom: 15px;
    }

    .container-problem .problem .form-check-label {
        font-size: 16px;
        font-weight: 500;
        letter-spacing: -0.01em;
        margin-left: 10px;
    }
    .container-problem p{
        font-size: 14px !important;
        padding: 10px 20px;
    }

    .container-profile,
    .container-consultation{
        margin-left: 0%;
        margin-right: 0%;
        margin-top: 0%;
        margin-bottom: 0%;
        height: 90vh;
        background: #fff;
    }

    .container-profile .container-profile-head,
    .container-profile-head,
    .container-consultation .container-consultation-head, .container-calendar-head {
        width: 100%;
        padding-top: 1vh;
        padding-bottom: 1vh;
        padding-left: 10%;
        padding-right: 10%;
        background: #fff;
        text-align: center;
        border: none;
        box-shadow: 0 4px 10px rgba(53, 183, 40, 0.5);
    }
    .container-profile .container-profile-head h2,
    .container-profile-head h2,
     .container-consultation .container-consultation-head h2,
      .container-pet h2,
      .container-event h2,
       .container-calendar-head h2{
        font-size: 24px;
        margin-top: 2vh;
        margin-left: 0vw;
        color: #35B828;
    }
    .container-questionnaire .head h2 {
        font-size: 24px;
        margin-top: 10px;
        margin-left: 0px;
        color: #35B828;
    }

    .container-profile .all-horses{
        padding-top: 15vh;
        background-color: #fff;
        padding-bottom: 25vh;
        padding-left: 10%;
        padding-right: 10%;
    }

    .container-consultation .consultation-page{
        background-color: #fff;
        height: 78vh;
    }

    .add-consultation-info {
        padding: 0 16vw;
    }

    .add-consultation-info p1 {
        font-size:  24px;
    }

    .add-consultation-info p2 {
        font-size:  18px;
    }

    .container-consultation .consultation-page .consultation-block{
        background-color: #fff;
        padding-bottom: 27vh;
        margin-top: 10vh;
        padding-left: 10%;
        padding-right: 10%;
    }

    .consultation-page img {
        width: auto;
    }

    .container-profile .all-horses .horse-container{
        margin-top: 2vh;
        width: 90%;
        margin-left: 2vw;
        min-height: 160px;
    }
    .container-consultation .consultation-page .consultation-block .consultation-container{
        margin-top: 2vh;
        width: 90%;
        margin-left: 2vw;
        height: 170px;
    }
    .container-profile .all-horses .horse-container img{
        border-radius: 15px;
        height: 80px;
        width: 80px;
    }
    .container-consultation .consultation-page .consultation-block .consultation-container img{
        border-radius: 50%;
        height: 80px;
        width: 80px;
    }
    .container-profile .all-horses .horse-container h3,
     .container-consultation .consultation-page .consultation-block .consultation-container h3{
        font-size: 18px;
        margin-left: 1vw;
        letter-spacing: -0.02em;
    }
    .container-profile .all-horses .horse-container h4,
     .container-consultation .consultation-page .consultation-block .consultation-container h4{
        font-size: 18px;
        margin-left: 1vw;
        letter-spacing: -0.02em;
    }
    .container-questionnaire h4 {
        font-size: 18px;
        letter-spacing: -0.02em;
    }
    .container-profile .all-horses .horse-container h5,
     .container-consultation .consultation-page .consultation-block .consultation-container h5{
        font-size: 16px;
        margin-left: 1vw;
        padding: 0;
        letter-spacing: -0.02em;
    }
    .container-consultation .consultation-page .consultation-block .consultation-container h5{
        margin-top: 1vh;
        font-size: 16px;
        letter-spacing: -0.02em;
    }
    .container-consultation .consultation-page .consultation-block .consultation-container p{
        font-size: 16px;
        letter-spacing: -0.02em;
    }
    .container-profile .all-horses .horse-container .fa-angle-right{
        font-size: 3vh;
    }
    .container-consultation .consultation-page .consultation-block .consultation-container .fa-angle-right{
        font-size: 3vh;
        margin-top: 3vh;
    }

    .button-container {
        width: 100%;
        height: auto;
        margin-left: 0%;
        padding-left: 10%;
        padding-right: 10%;
        padding-top: 1vh;
        padding-bottom: 1vh;
        display: flex;
        justify-content: center;
        bottom: 10%;
    }
    .container-consultation .button-container {
        width: 100%;
        height: auto;
        margin-left: 0%;
        padding-left: 10%;
        padding-right: 10%;
        padding-bottom: 1vh;
        display: flex;
        justify-content: center;
        padding-top: 1vh;
        bottom: 10%;
    }


    .main-button {
            margin-top: 1vh;
            margin-bottom: 1vh;
            height: auto;
            border-radius: 10px;
            font-size: 18px;
            font-weight: 700;
            padding: 10px 20px;
            min-height: 0;
    }
    .container-questionnaire .main-button {
        margin-top: 20px;
    }
    .container-consultation .button-container .main-button{
            margin-top: 1vh;
            margin-bottom: 1vh;
            border-radius: 15px;
            font-size: 28px;
            font-weight: 700;
            padding: 10px 20px;
            height: auto;
    }
    .container-consultation .button-container .main-button h4{
        font-size: 18px;
        letter-spacing: -0.02em;
    }
    .container-consultation .button-container .main-button h5{
        font-size: 16px;
    }

    footer {
        width: 100%;
        margin-left: 0%;
        padding-top: 2vh;
        padding-left: 10%;
        padding-right: 10%;
        height: 10vh;
        border: none;
        box-shadow: 0 -4px 10px rgba(53, 183, 40, 0.5);
    }
    .fa-house, .fa-comment-dots, .fa-calendar, .fa-headphones-simple{
        font-size: 18px;
    }

    footer h4,
    .container-pet  footer h4,
     .container-questionnaire footer h4{
        margin-top: 0.5vh;
        font-size: 18px;
        font-weight: 500;
        color: #bebebe;
    }
    .loader-container {
        width: 70%;
    }

    input[type="text"] {
        height: auto;
        font-size: 16px;
        font-weight: 800;
        letter-spacing: -0.01em;
        color: #2E332E;
        padding: 10px 20px;
        border-radius: 15px;
    }

    input[type="submit"] {
        margin-top: 10px;
        height: 81px;
        font-size: 24px;
        font-weight: 700;
    }
    input[type="date"] {
      width: 100%;
      height: 48px;
      font-size: 16px;
      font-weight: 800;
      letter-spacing: -0.02rem;
      color: #35B828;
      padding: 10px 20px;
      border-radius: 15px;
    }
    input[type="datetime-local"] {
        width: 100%;
        background: #F7F7F7;
        font-size: 16px;
        letter-spacing: -0.02rem;
        padding: 10px 20px;
    }
    input[type="radio"]:checked + .custom-label .radio-container .custom-radio::before {
        content: "✓";
        display: inline-block;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        top: 0;
        left: 0;
        text-align: center;
        background-color: #fff;
        font-size: 12px;
        line-height: normal;
        font-weight: 800;
    }
    .custom-select {
        width: 100%;
        height: auto;
        border-radius: 30px;
        background: #F7F7F7;
        border: 0px;
        font-size: 16px;
        font-weight: 400;
        letter-spacing: -0.02rem;
        color: #43503B;
        padding: 10px 20px;
        border-radius: 15px;
    }
    .container-event .custom-select {
        font-size: 16px;
    }
    .color-circle {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        cursor: pointer;
        transition: transform 0.2s;
    }
    .color-picker {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        padding: 10px 20px;
        justify-content: flex-start;
        align-items: center;
    }

    .custom-select option {
        font-size: 16px;
    }
    .container-pet .custom-file,
    .container-questionnaire .custom-file {
        width: 200px;
        height: 200px;
        padding: 1px;
        display: flex;
        align-content: center;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }

    .container-pet .custom-file .circle, .container-questionnaire .custom-file .circle {
        width: 140px;
        height: 140px;
    }

    .container-pet .custom-file .circle, .container-questionnaire .custom-file .circle {
        font-size: 50px;
        border: 3px solid #D4D4D4;
    }



    .container-questionnaire .custom-fil.container-questionnaire .form-check-labele {
        width: 300px;
        height: 300px;
    }
    /*Стили профиля коня*/
    .container-pet, .container-questionnaire, .container-problem, .container-event {
        margin-left: 0%;
        margin-right: 0%;
        margin-top: 3vh;
        margin-bottom: 15vh;
        padding-left: 10%;
        padding-right: 10%;
    }
    .container-pet .container-back,
    .container-questionnaire .container-back,
    .container-problem .container-back,
     .container-event .container-back{
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .container-pet .container-back .fa-arrow-left,
    .container-pet .container-edit .fa-pencil,
    .container-event .container-back .fa-arrow-left,
    .container-questionnaire .container-back .fa-arrow-left, .container-questionnaire
    .container-back .fa-pencil, .container-problem .container-back .fa-arrow-left,
    .container-problem .container-back .fa-pencil {
        font-size: 16px;
    }
    .container-pet .container-back h4,
    .container-pet .container-edit h4,
    .container-event .container-back h4,
    .container-questionnaire .container-back h4,
    .container-problem .container-back h4{
        font-size: 16px;
    }
    .container-pet img{
      width: 40vw;
      height: 30vw;
      margin-top: 3vh;
    }
    .container-pet .field p3{
        font-size: 18px;
        font-weight: 700;
        line-height: normal;
        margin-top: 1vh;
    }
    .container-pet .field p,
     .container-event .field p{
        font-size: 18px;
        padding: 10px 20px;
    }
    .container-pet h3 {
        font-size: 18px;
        letter-spacing: -0.02em;
        margin-top: 3vh;
    }
    .container-pet h4,
    .container-pet .questionnaire h4,
    .container-pet .main-button h4,
       .container-pet .questionnaire .main-button h4,
       .container-pet .questionnaire .food h4{
        font-size: 16px;
    }
    .container-pet h5,
    .container-pet .questionnaire h5,
     .container-pet .questionnaire .main-button h5,
     .container-pet .questionnaire .food h5{
        font-size: 16px;
        font-weight: 400;
    }
    .container-pet .main-button h5,
    .container-pet .questionnaire .main-button h5{
        text-align: center;
        font-size: 16px;
    }
    .container-pet .container-edit .fa-pencil {
        font-size: 14px;
    }
    .container-pet .container-edit h4{
        font-size: 16px;
    }
    .container-pet .questionnaire, .container-pet .field, .container-event .field {
        margin-top: 3vh;
    }
    .container-pet .main-button,
    .container-pet .questionnaire .main-button {
        margin-top: 3vh;
        margin-bottom: 0vh;
        padding: 10px 20px;
        height: auto;
        border-radius: 15px;
        width: 100%;
        max-width: 350px;
    }
    .container-pet .questionnaire .food {
        padding: 20px;
        border-radius: 15px;
    }
    .container-pet .custom-label {
        margin-top: 10px;
        cursor: pointer;
        font-weight: 400;
        font-size: 28px;
        line-height: normal;
    }
    .container-pet .custom-label .radio-container {
        display: flex;
        align-items: center;
        padding: 10px 20px;
        background: #F7F7F7;
        border-radius: 50px;
        margin-right: 0.5vw;
        height: auto;
    }
    .container-pet .custom-label .radio-container .custom-radio {
        width: 15px;
        height: 15px;
        margin-top: 0;
        border: 2px solid #35B828;
        border-radius: 50%;
        position: relative;
        display: inline-block;
    }
    .custom-label p2.selected {
        color: #fff;
    }
    .container-pet .custom-label .radio-container p2 {
        font-size: 18px;
        font-weight: 400;
        letter-spacing: -0.01em;
        text-align: left;
        margin-bottom: 0;
        margin-left: 5px;
        bottom: 0;
        position: relative;
    }
    .container-pet .container-btn {
        margin-top: 1vh;
    }
    .container-pet .container-btn .custom-delete{
        color: #B72834;
        font-size: 28px;
        font-weight: 400;
        letter-spacing: 0.01em;
        cursor: pointer;
    }
    .form-check-input {
        width: 15px;
        height: 15px;
    }
    .form-check {
        margin-top: 1vh;
        display: flex;
        align-items: center;
    }
    .form-check-label {
        font-size: 18px;
        font-weight: 400;
        letter-spacing: -0.01em;
        margin-left: 10px;
    }
    .container-pet .button-create, .container-event .button-create {
        width: 100%;
        max-width: 350px;
        height: auto;
        font-size: 18px;
        padding: 10px 20px;
        border-radius: 15px;
    }
    .container-pet .field-delete{
        margin-top: 30px;
    }
    .container-pet .button-delete,
     .container-event .button-delete{
        display: flex;
        align-items: center;
        text-align: center;
        justify-content: center;
        flex-direction: column;
        width: 100%;
        height: auto;
        margin-top: 10px;
        padding: 10px 20px;
        border: 0px;
        border-radius: 15px;
        background: #E0B4B7;
        box-shadow: 0px 16px 40px 0px #B4CA8733;
        transition: background-color 0.3s;
        cursor: pointer;
        box-shadow: 0px 16px 40px 0px #B828341A;
        max-width: 350px;
    }
    .container-pet .button-delete h4,
     .container-event .button-delete h4{
        font-size: 18px;
    }
    .container-pet .button-delete h5 {
        font-size: 16px;
    }

    .modal-show {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .modal-content {
        height: auto;
        padding: 50px 50px;
        max-width: 60%;
    }

    .container-pet .questionnaire .food h5 {
        margin-top: 1vh;
        padding-top: 0;
    }
    .implementation hr {
        border: 0.3vh solid #35B728;
        opacity: 1;
        width: 14.28%;
    }
    .support-button {
        width: auto;
        margin-top: 1vh;
        height: auto;
        font-size: 16px;
        font-weight: 700;
        padding: 10px 20px;
        border-radius: 15px;
    }
    .support-button-back {
        left: 10%;
    }
    .support-button-next{
        right: 10%;
    }

    .container-questionnaire .question {
        margin-top: 10%;
    }
    .container-questionnaire form{
        margin-top: 10vh;
    }
    .container-questionnaire .form-check{
        margin-top: 1.5vh;
    }
    .container-questionnaire .question h2 {
        font-size: 18px;
        margin-top: 10px;
        margin-left: 0;
    }
    .container-questionnaire .form-check-label {
        font-size: 18px;
        margin-top: 5px;
    }
    .container-questionnaire .form-check-input {
        width: 15px;
        height: 15px;
    }
    .container-questionnaire p{
        font-size: 16px;
        padding: 0;
        margin-left: 10px;
    }
    .container-pet .container-btn .custom-delete, .container-questionnaire .container-btn .custom-delete {
        font-size: 18px;
    }
    .container-questionnaire .food h2 {
        font-size: 18px;
        margin-left: 0;
    }
    .container-questionnaire .food .answer h3 {
        font-size: 18px;
    }
    .form-select-custom {
        font-size: 18px;
        border: 2px solid #35B828;
        width: auto;
        border-radius: 15px;
    }
    .container-questionnaire .scroll-input {
        height: 18px;
    }

    .container-questionnaire .scroll-input::-webkit-slider-runnable-track {
        height: 3px; /* Высота трека */
    }

    /* Стили для заполненной части трека (бара) */
    .container-questionnaire .scroll-input::-webkit-slider-thumb {
        width: 16px; /* Ширина ползунка */
        height: 16px; /* Высота ползунка */
        margin-top: -7px; /* Смещение ползунка на половину его высоты, чтобы он выравнивался по вертикали */
        border: 3px solid #35B728;
    }
    .chat-container {
        margin-left: 0;
        margin-right: 0;
        margin-top: 0;
        margin-bottom: 0;
        height: 100vh;
        width: 100vw;
        position: fixed;
        overflow: hidden;
    }
    .chat-container .head {
        padding: 1vh 10vw 1vh 10vw;
        width: 100%;
        border-bottom: 2px solid rgba(53, 183, 40, 1);
        box-shadow: 0 4px 10px rgba(53, 183, 40, 0.5);
        background: #fff;
        z-index: 1;
    }
    .chat-container .head .fa-arrow-left {
        font-size: 24px;
    }
    .chat-container .head img {
        width: 38px;
        height: 38px;
        margin-left: 10px;
    }
    .chat-container .head h2 {
        font-size: 24px;
    }
    .chat-container .head p {
        font-size: 18px;
    }
    .chat-container .chat-log {
        position: fixed;
        padding: 0 12%;
        width: 100vw;
        overflow-y: auto;
        bottom: 16vh;
        top: 16vh;
        height: 70dvh;
    }
    .chat-container .chat-log p{
       font-size: 14px;
       padding: 5px 0 0 0;
    }
    .chat-container .message-input {
        padding: 20px 10% 30px 10%;
        border-top: 0px solid #0000001A;
        box-shadow: 0 4px 10px rgba(53, 183, 40, 0.5);
        height: auto;
    }
    .chat-container .message-input input[type="textarea"] {
        height: auto;
        border-radius: 18px;
        font-size: 16px;
        letter-spacing: -0.01em;
        padding: 10px 20px;
    }
    .chat-container .message-input input[type="textarea"]::placeholder {
        font-size: 16px;
    }
    .chat-container .message-input .send-button {
        height: 40px;
        width: 40px;
    }
    .chat-container .questioonnaire-button {
        width: auto;
        height: auto;
        padding: 5px 10px;
        margin-top: 0vh;
        border-radius: 15px;
        font-size: 18px;
    }
    .chat-container .modal-show {
        padding: 0vh 0vw;
    }
    .chat-container .modal-content {
        top: 10vh;
        width: 90%;
        height: 75vh;
    }
    .chat-container .modal-content img {
        width: 100%;
        margin-top: 0;
    }
    .chat-container .modal-content h4 {
        font-size: 16px;
    }
    .chat-container .modal-content .question-doctor h4, .chat-container .modal-content .answer-doctor h4 {
        width: 20vw;
    }
    .modal-content h5 {
        font-size: 16px;
    }
    .container-event textarea {
        font-size: 16px;
        padding: 1vh 2vw;
        height: 200px;
    }
    .modal-show .modal-content h3 {
        font-size: 18px;
        letter-spacing: -0.02em;
        margin-top: 0;
        margin-left: 0;
    }

    .modal-content .main-button{
        min-height: auto;
    }

    .oauth2-links{
        margin-top: 2dvh;
        display: flex;
        justify-content: space-around;
    }

    .oauth2-login-btn {
        width: 70px;
        height: 70px;
    }

    .fa-google, .fa-yandex-international, .fa-vk {
        font-size: 40px;
        color: #35B828;
    }


    .chat-container .finish-consultation-content{
        width: auto;
        bottom: auto;
        top: auto;
        height: auto;
        border-radius: 30px 30px;
    }

    .chat-container .finish-consultation-content{
        text-align: center;
    }

    .container-problem .problem{
        margin-bottom: 0;
    }
}
@media screen and (min-device-width: 992px){
    input[type="text"] {
      letter-spacing: -0.01em;
    }
    input[type="password"] {
      letter-spacing: -0.01em;
    }


    .first-page img {
        width: 70%;
    }

    .first-page h2 {
        max-width: 70%;
    }

    .first-page .main-button {
        min-height: 67px;
        width: 70%;
    }

    .first-page .modal-content .main-button {
        min-width: 100%;
    }

    .container-profile .container-profile-head,
    .container-consultation .container-consultation-head,
    .feedback-page .container-profile-head{
        border-bottom: 2px solid rgba(53, 183, 40, 1);
    }
    .container-pet, .container-questionnaire, .container-problem{
        margin-left: 0%;
        margin-right: 0%;
        margin-top: 3vh;
        margin-bottom: 15vh;
        padding-left: 20%;
        padding-right: 20%;
    }

    .container-profile .all-horses {
        padding-top: 10vh;
    }
    .container-profile .all-horses .horse-container,
    .container-consultation .consultation-page .consultation-block .consultation-container{
        width: 90%;
        border: 1px solid rgba(53, 183, 40, 0.3);
        padding: 10px 20px 10px 20px;
        border-radius: 25px;
        box-shadow: 0 0px 10px rgba(53, 183, 40, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .container-consultation .consultation-page .consultation-block .consultation-container {
        height: auto;
        min-height: 160px;
    }

    .add-consultation-info {
        padding: 0 30vw;
    }

    .main-button,
     .container-consultation .button-container .main-button{
            width: auto;
    }

    .loader-container {
        width: 40%
    }

    .container-pet img{
      width: 15vw;
      height: 15vw;
    }
    .container-pet hr{
        display: none;
    }
    .modal-show {
        opacity: 1;
        transition: opacity 3s;
        padding: 34vh 32vw;
    }
    .modal-content {
        position: relative;
        background-color: #fff;
        /* bottom: 0px; */
        padding: 5vh 3vw;
        border-radius: 30px 30px 30px 30px;
        width: auto;
        height: auto;
        text-align: center;
    }

    .container-pet .main-button,
    .container-pet .questionnaire .main-button {
        margin-top: 20px;
        margin-bottom: 0vh;
        padding: 10px;
        height: auto;
        border-radius: 15px;
        width: 100%;
        max-width: 350px;
    }
    .support-button-back {
        left: 20%;
    }
    .support-button-next{
        right: 20%;
    }
    .chat-container .head {
        padding: 10px 15%;
    }
    .chat-container .modal-content .question-doctor h4,
    .chat-container .modal-content .answer-doctor h4{
        width: 20vw;
    }
    .chat-container .modal-content {
        top: 0vh;
    }
    .container-event textarea{
        font-size: 16px;
        padding: 10px 20px;
        width: 50%;
        height: 200px;
    }
}

@media screen and (min-device-width: 1200px){
    .first-page img {
        width: 50%;
    }

    .first-page h2 {
        max-width: 50%;
    }

    .container-logo {
        display: flex;
        height: 48px;
        margin-bottom: 0.5rem;
    }
    .container-login {
        padding-left: 10%;
        padding-right: 10%;
    }

    footer {
        padding-left: 0%;
        padding-right: 0%;
    }
    footer .container {
        margin-left: 5%;
        margin-right: 5%;
        width: 90%;
        max-width: none;
    }
    footer .container p{
        font-size: 18px;
        margin-top: 0;
        margin-left: 1vw;
        color: #35B828;
        padding: 0 0 0 0;
        display: block;
    }
    footer .container a{
        color: #35B828;
    }
    footer .container .fa-instagram {
          font-size: 3vh;
          color: #35B728;
          display: block;
    }
    footer .container .fa-vk {
          margin-left: 1vw;
          font-size: 3vh;
          color: #35B728;
          display: block;
    }


    .oauth2-links{
        margin-top: 0;
    }

    .chat-container .finish-consultation-content{
        width: 30dvw;
    }
}