
/* ХЕДЕР --------------------------------------------------------------------------------------------------- НАЧАЛО */
    header {
      display: flex;
      justify-content: space-between; /* элементы по краям */
      align-items: center;
      height: 70px;
      background-color: grey;
    }

/*ЛОГОТИП*/
    img.logo-main {
      height: 67px;
      width: 77px;
    }
    label.main-sign {
      font-size: 16px;
      font-weight: 800;
      font-family: "Montserrat", sans-serif;
      color: white;
    }

/*КОНТЕЙНЕРЫ В ХЕДЕРЕ*/
    div.div-header {
      display: inline-flex;
      justify-content: center;
      align-items: center;
    }
    .header-left {
        display: flex;
        align-items: center;
    }
    .header-center {
        flex: 1;
        text-align: center;
    }
    /* Правая часть (всё по правому краю) */
    .header-right {
       display: flex;
       align-items: center;
       gap: 10px; /* расстояние между элементами */
    }
    .header-form {
      margin-top: 0;
    }
    .header-form1 {
      display: none;
    }
    .img_button_header {
      width: 17px;
      height: 17px;
    }


/*КНОПКА-ССЫЛКА*/
    a.header-button{
      height: 15px;
      width: 100px;
      text-decoration: none;
      color: white;
      font-family: "Montserrat", sans-serif;
      font-size: 16px;
      font-weight: 600;
      background-color: rgba(255, 183, 0, 1);
      padding: 2px;
      border-radius: 5px;
      text-align: center;
    }
    a.link-sign {
      text-decoration: none;
    }

/*КНОПКА В ХЕДЕРЕ*/
    .header-right button {
        margin-left: 10px;
        padding: 5px 10px;
        border: none;
        background: white;
        color: black;
        border-radius: 5px;
        cursor: pointer;
    }
    .header-right button:hover {
      color: black;
      background: rgba(255, 183, 0, 1);
      font-weight: bold;
    }

/*ИМЯ ПОЛЬЗОВАТЕЛЯ*/
    .login_name {
      color: white;
      font-family: "Montserrat", sans-serif;
      margin-right: 10px;
    }


/*Адаптация хедера для экранов до 620px*/
@media (max-width: 620px) {
        
  label.main-sign {
      display: none;
    }
  }  

/*Адаптация хедера для экранов до 500px*/
@media (max-width: 500px) {
    .header-form0 {
      display: none;
    }
    .header-form1 {
      display: block;
    } 
  
  }    

/*Адаптация хедера для экранов до 420px*/
@media (max-width: 420px) {
    .login_name {
      display: none;
    }
  
  }      

/* ХЕДЕР --------------------------------------------------------------------------------------------------- КОНЕЦ */




/* ФУТЕР ---------------------------------------------------------------------------------------------------- НАЧАЛО */
footer {
  height: 70px;
  background-color: grey;
  text-align: center;
  color: #fff;
}
/* ПРИЖАТИЕ ФУТЕРА ВНИЗ */
    body {
      margin: 0;
      min-height: 100vh;           /* высота страницы на весь экран */
      display: flex;
      flex-direction: column;      /* выстраиваем элементы вертикально */
    }
    main {
      flex: 1;                     /* занимает всё доступное место */
      padding: 20px;
      background: #f0f0f0;
    }
/* ФУТЕР ---------------------------------------------------------------------------------------------------- КОНЕЦ */




/* БЛОК АВТОРИЗАЦИИ НА САЙТ ---------------------------------------------------------------------------------- НАЧАЛО*/
/* Стандартные стили контейнера */
      .authorization {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;     /* по вертикали */
        margin: 0 auto 0 auto;
        font-family: "Montserrat", sans-serif;
        font-size: 16px;
        font-weight: 600;
        border: 2px solid grey;
        padding: 30px;
      }
/* Адаптация для экранов до 380px */
      @media (max-width: 380px) {
        .authorization {
          margin: 10px;
          padding: 10px;
        }

      }  

      .main_index {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;     /* по вертикали */
      }

      .authorization-login {
        padding: 10px;
      }

      .authorization-pass {
        padding: 10px;
      }

      .button-enter-container {
        padding: 20px;
        margin: auto;
        display: flex;
        justify-content: center; /* по горизонтали */
        align-items: center;     /* по вертикали */
      }

      .button-enter {
        font-family: "Montserrat", sans-serif;
        font-weight: 600;
        font-size: 16px;
      }
/* БЛОК АВТОРИЗАЦИИ НА САЙТ ---------------------------------------------------------------------------------- КОНЕЦ*/





/* ФОРМЫ С ПОЛЯМИ ДЛЯ ВНЕСЕНИЯ ДАННЫХ */

form {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 30px;
}

.input_data_form {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 30px;
  width: 100%;
}

div.title_input_form {
  margin: 20px;
}

h2 {
  font-family: "Montserrat", sans-serif;
  margin: 0;
  text-transform: uppercase;
}

h3 {
  font-family: "Montserrat", sans-serif;
  margin: 0;
  text-transform: uppercase;
}

div.input_field {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; 
  justify-content: space-between;
  vertical-align: middle;
  margin: 15px;
  width: 500px;
}
/* Адаптация Изменение полей формы при разрешении до 700px */
@media (max-width: 700px) {
        div.input_field {
          width: 300px;
          gap: 10px 0px;
        }

      }  


.value_input_field {
  align-items: first baseline;
  margin-left: 10px;
}


p.name_input_field {
  font-weight: bold;
  font-size: 17px;
  font-family: "Montserrat", sans-serif;
  margin: 0;
  align-items: end;
}

div.name_input_field {
  font-weight: bold;
  font-size: 17px;
  font-family: "Montserrat", sans-serif;
  margin: 3px;
  text-align: center;
}

div.input_field_with_OR {
  grid-template-columns: 210px 287px;
  display: grid;
  margin: 15px;
}

input {
  font-size: 17px;
  font-family: "Montserrat", sans-serif;
  border-radius: 5px;
  width: 280px;
  border: solid 2px;
}

button {
  font-size: 17px;
  font-family: "Montserrat", sans-serif;
  border-radius: 5px;
  cursor: pointer;
  background-color: grey;
  color: white;
  padding: 10px 40px;
  margin: 10px;
}

button:hover {
  color: black;
  background: rgba(255, 183, 0, 1);
  font-weight: bold;
}

/*Кнопка вернуться на главную страницу*/
a.button_link_return {
  font-size: 17px;
  font-family: "Montserrat", sans-serif;
  border-radius: 5px;
  cursor: pointer;
  padding: 0;
  color: white; 
}

a.button_link_return:hover {
  color: black;
  font-weight: bold;
}
/*----------------------------------*/

div.info_message {
  display: flex;
  flex-direction: row;
  font-size: 17px;
  font-family: "Montserrat", sans-serif;
  color: green;
  font-weight: bold;
}

form span {
  font-size: 17px;
  font-family: "Montserrat", sans-serif;
  color: red;
  font-weight: bold;
}

select {
  font-size: 17px;
  font-family: "Montserrat", sans-serif;
  border-radius: 5px;
  border: solid 2px;
  width: 287px;
  height: 25px;
  padding: 0;
}

a.button_link {
  text-decoration: none;
  color: white;
}

a.button_link :hover {
  color: black;
}

div.input_chekbox {
  font-size: 17px;
  font-family: "Montserrat", sans-serif;
}

input.checkbox-form-entry {
  width: 30px;
}

div.input-checkbox-number {
  margin: 15px;
  font-weight: bold;
}

.textarea-for-checkbox {
  width: 460px;
  height: 190px;
  font-size: 15px;
  font-family: "Montserrat", sans-serif;
}
/* Адаптация Изменение полей формы при разрешении менее 460px */
@media (max-width: 460px) {
        .textarea-for-checkbox {
          width: 400px;
        }

      }  
/* Адаптация Изменение полей формы при разрешении менее 400px */
@media (max-width: 400px) {
        .textarea-for-checkbox {
          width: 350px;
        }

      }  
/* Адаптация Изменение полей формы при разрешении менее 350px */
@media (max-width: 350px) {
        .textarea-for-checkbox {
          width: 320px;
        }

      }  

.p-comment {
  font-family: "Montserrat", sans-serif;
  font-size: 17px;
  font-weight: bold;
}




