@font-face {
  font-family: 'Reza Zulmi Serif';
  src: url('../fonts/Reza Zulmi Serif/RezaZulmiSerif.woff') format('WOFF');
}

/* Определение переменной для отступа модального окна */
.itc-modal {
  --itc-modal-margin: 0.5rem;
}

/* Медиа-запрос для изменения отступа на более широких экранах */
@media (min-width: 576px) {
  .itc-modal {
    --itc-modal-margin: 1.75rem;
  }
}

/* Стили для подложки модального окна */
.itc-modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background: rgb(0 0 0 / 50%);
  opacity: 0;
  transition: opacity 0.2s ease-in;
  pointer-events: none;
}

/* Стили для контента модального окна */
.itc-modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: auto;
  margin: var(--itc-modal-margin);
  background-color: #BAEEFF;
  background-clip: padding-box;
  box-shadow: 0 0 7px 0 rgb(0 0 0 / 30%);
  transition: opacity 0.3s ease-in;
}

/* Медиа-запрос для изменения ширины контента на более широких экранах */
@media (min-width: 576px) {
  .itc-modal-content {
    width: 60%;
    margin: var(--itc-modal-margin) auto;
  }
}

/* Стили для отображения модального окна */
.itc-modal-show .itc-modal-backdrop,
.itc-modal-show .itc-modal-content {
  z-index: 1050;
  overflow-y: auto;
  opacity: 1;
  pointer-events: auto;
}

/* Стили для прокручиваемой области внутри модального окна */
.itc-modal-scrollable {
  height: calc(96% - var(--itc-modal-margin) * 2);
  overflow: hidden;
}

/* Стили для заголовка модального окна */
.itc-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
}

/* Стили для заголовка модального окна */
.itc-modal-title {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.5;
}

/* Стили для кнопки закрытия модального окна */
.itc-modal-btn-close {
  float: right;
  color: #000;
  font-weight: 700;
  font-size: 24px;
  font-family: sans-serif;
  line-height: 1;
  text-decoration: none;
  text-shadow: 0 1px 0 #fff;
  opacity: 0.5;
}

/* Стили для состояний фокуса и наведения на кнопку закрытия */
.itc-modal-btn-close:focus,
.itc-modal-btn-close:hover {
  color: #000;
  text-decoration: none;
  cursor: pointer;
  opacity: 0.75;
}

/* Стили для содержимого модального окна */
.itc-modal-body {
  position: relative;
  flex: 1 1 auto;
  padding: 1rem;
  overflow-y: auto;
  overflow-wrap: anywhere;
}


/* Стили для формы регистрации */
#registrationForm {
  display: flex;
  align-items: center;
  background-color: white;
  font-family: 'Reza Zulmi Serif';
  height: 81%;
  padding: .3vw 0 0;
}
/* Стили для изображения в форме регистрации */
#registrationForm img {
  height: 100%;
  max-width: 100%;
}
/* Стили для разметки формы регистрации */
#registrationForm div {
  width: 50%;
}
#registrationForm h4{
  font-size: 1.8vw;
  margin: 1vw 0;
}
/* Стили для блока с элементами формы */
.form-div {
  margin: 0 0 0 4.5vw;
  display: block;
}

/* Стили для полей ввода в форме */
#registrationForm input {
  width: 80%;
  border: none;
  border-bottom: 1px solid black;
  height: 2.5vw;
  margin: .8vw 0;
  font-family: 'Reza Zulmi Serif';
  font-size: .9vw;
}
#registrationForm input:focus{
  outline: none;
}

/* Стили для чекбокса в форме */
#registrationForm input[type="checkbox"] {
  width: 1vw;
  height: 1vw;
  font-size: .9vw;
}
#registrationForm label{
  font-size: .7vw;
  display: block;
}
#registrationForm button{
  background-color: #BAEEFF;
  border: none;
  padding: 1vw 2vw;
  border-radius: .5vw;
  margin: 1vw 0 0 1.5vw;
}


/* Стили для формы авторизации */
#loginForm {
  display: flex;
  align-items: center;
  background-color: white;
  font-family: 'Reza Zulmi Serif';
  height: 81%;
  padding: .3vw 0 0;
}
#loginForm h4{
  font-size: 1.8vw;
  margin: 1vw 0;
}
/* Стили для изображения в форме авторизации */
#loginForm img {
  height: 100%;
  max-width: 100%;
}
/* Стили для разметки формы авторизации */
#loginForm div {
  width: 50%;
}
/* Стили для полей ввода в форме авторизации */
#loginForm input {
  width: 80%;
  border: none;
  border-bottom: 1px solid black;
  height: 2.5vw;
  margin: .8vw 0;
  font-family: 'Reza Zulmi Serif';
  font-size: .9vw;
}
#loginForm input:focus{
  outline: none;
}
/* Стили для чекбокса в форме авторизации */
#loginForm input[type="checkbox"] {
  width: 1vw;
  height: 1vw;
  font-size: .9vw;
}
#loginForm label{
  font-size: .7vw;
  display: block;
}
#loginForm button{
  background-color: #BAEEFF;
  border: none;
  padding: 1vw 2vw;
  border-radius: .5vw;
  margin: 1vw 0 0 1.3vw;
}

@media screen and (max-width: 1024px){
    /* Стили для заголовка модального окна */
    .itc-modal-header {
      align-items: center;
      padding: 10px 15px 0 0;
    }
    /* Стили для содержимого модального окна */
    .itc-modal-body {
      padding: 0 2rem;
    }
    #form-img{
      display: none;
    }
    /* Стили для формы регистрации */
    #registrationForm {
      display: block;
      height: 80%;
      padding: 5vw 2vw;
    }
    /* Стили для разметки формы регистрации */
    #registrationForm div {
      width: 100%;
    }
    #registrationForm h4{
      font-size: 2.5vw;
      margin: 0 0 2vw;
    }
    /* Стили для полей ввода в форме */
    #registrationForm input {
      width: 80%;
      height: 4vw;
      margin: 2vw 0;
      font-size: 1.5vw;
    }
    /* Стили для чекбокса в форме */
    #registrationForm input[type="checkbox"] {
      width: 2vw;
      height: 2vw;
    }
    #registrationForm label{
      font-size: 1.5vw;
      margin: 2vw 0 0;
    }
    #registrationForm button{
      padding: 2vw 4.5vw;
      border-radius: .5vw;
      margin: 2vw 0 0 1vw;
    }
    /* Стили для формы авторизации */
    #loginForm {
      display: block;
      height: 80%;
      padding: 5vw 2vw;
    }
    #loginForm h4{
      font-size: 2.5vw;
      margin: 5vw 0 2vw;
    }
    /* Стили для разметки формы авторизации */
    #loginForm div {
      width: 100%;
    }
    /* Стили для полей ввода в форме авторизации */
    #loginForm input {
      width: 80%;
      height: 6vw;
      margin: 2vw 0;
      font-size: 1.5vw;
    }
    /* Стили для чекбокса в форме авторизации */
    #loginForm input[type="checkbox"] {
      width: 2vw;
      height: 2vw;
    }
    #loginForm label{
      font-size: 1.5vw;
      margin: 2vw 0;
    }
    #loginForm button{
      padding: 2vw 4.5vw;
      border-radius: .5vw;
      margin: 2vw 0 0 1vw;
    }
}
@media screen and (max-width: 768px){
        .itc-modal-content{
          height: 65%;
        }
        /* Стили для заголовка модального окна */
        .itc-modal-header {
          align-items: center;
          padding: 1rem;
        }
        /* Стили для содержимого модального окна */
        .itc-modal-body {
          padding: 0 3.5rem;
          
        }
        #registrationForm{
          height: 80%;
        }
        #registrationForm h4, #loginForm h4{
          font-size: 5vw;
          margin: 0vw 0 5vw;
        }
        /* Стили для полей ввода в форме */
        #registrationForm input, #loginForm input {
          width: 85%;
          height: 6vw;
          margin: 2vw 0;
          font-size: 3vw;
        }
        /* Стили для чекбокса в форме */
        #registrationForm input[type="checkbox"] {
          width: 3vw;
          height: 3vw;
          margin: 0 1vw 0 0;
        }
        #registrationForm label{
          font-size: 2.5vw;
          width: 95%;
        }
        #registrationForm button, #loginForm button{
          padding: 2vw 3vw;
          border-radius: 1vw;
          margin: 3vw 0 0 1vw;
        }
}