@import url('root.css?s=1');
@import url('header.css?s=1');
@import url('footer.css?s=1');
@import url('button.css');
@import url('form.css');
@import url('filter.css?s=22');
@import url('popup.css?s=1');
@import url('profile.css');
@import url('table.css?s=1');



.input_change { background-color: #ffe2d3; }

.paginator_wrapper {
	max-width: 1400px;
	display: flex;
	justify-content: flex-end;
	padding: 17px 30px;
	width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}



/*=============== index.php ===============*/
/*========== Промо блок ==========*/


.logo{  margin: 15px; }

.promo {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 1600px;
  margin: 0 auto;
  margin-bottom: 100px;
  padding: 0 100px;
}

.promo__description {
  max-width: 500px;
  padding-top: 52px;
}

.promo__title {
  margin: 0;
  margin-bottom: 30px;

  font-weight: 500;
  font-size: 70px;
  line-height: 125%;
  color: var(--text-blue-darken);
}

.promo__text {
  margin: 0;
  margin-bottom: 50px;
  padding-right: 60px;

  font-size: 20px;
  line-height: 155%;
  color: var(--text-blue);
}

.promo__button {
  min-width: 208px;
}

.promo__image {
  /*min-width: 800px;
  height: 460px;*/
  max-width: 50%;
  min-width: 500px;
}

/*========== Описание ==========*/

.description {
  max-width: 750px;
  margin: 0 auto;
  margin-bottom: 100px;

  text-align: center;
}

.description__title {
  margin: 0;
  margin-bottom: 33px;
  padding: 0 140px;

  font-weight: 500;
  font-size: 40px;
  line-height: 136.5%;
  color: var(--text-blue-darken);
}

.description__text {
  margin: 0;

  font-weight: 400;
  font-size: 20px;
  line-height: 155%;
  color: var(--text-blue);
}

/*========== Функции системы ==========*/

.functions {
  padding-top: 100px;
  padding-bottom: 50px;

  background-color: var(--functions-background);
}

.functions__title {
  margin: 0;
  margin-bottom: 65px;

  font-weight: 500;
  font-size: 40px;
  line-height: 136.5%;
  text-align: center;
  color: var(--text-blue-darken);
}

.functions__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 1230px;
  margin: 0 auto;
  padding: 0;

  list-style: none;
}

.function {
  position: relative;

  flex-basis: 25%;
  width: 25%;
  min-width: 295px;
  min-height: 175px;
  margin-bottom: 45px;
  padding-top: 70px;
  padding-bottom: 15px;
}

.function__icon {
  position: absolute;
  top: 0;
  left: 50%;

  transform: translateX(-50%);
}

.function__icon--auto {
  left: 48%;

  width: 55px;
  height: 43px;
}

.function__icon--parking {
  top: -5px;

  width: 55px;
  height: 55px;
}

.function__icon--camera {
  left: 46%;

  width: 45px;
  height: 45px;
}

.function__icon--passed-1 {
  left: 48%;

  width: 50px;
  height: 50px;
}

.function__icon--passed-2 {
  left: 46%;

  width: 50px;
  height: 50px;
}

.function__icon--shipped {
  left: 48%;

  width: 55px;
  height: 55px;
}

.function__icon--video {
  left: 43%;

  width: 45px;
  height: 45px;
}

.function__icon--web {
  left: 48%;

  width: 45px;
  height: 45px;
}

.function__description {
  margin: 0;
  padding: 0 26px;

  font-size: 18px;
  line-height: 155%;
  text-align: center;
  color: var(--text-blue);
}

/*========== Подключение к системе ==========*/

.connect {
  max-width: 1600px;
  margin: 0 auto;
  margin-bottom: 80px;
  padding-top: 98px;
}

.connect__title {
  max-width: 830px;
  margin: 0 auto;
  margin-bottom: 53px;

  font-weight: 500;
  font-size: 70px;
  line-height: 125%;
  text-align: center;
  color: var(--orange);
}

.connect__input {
  margin-bottom: 20px;
}

.connect__button {
  min-width: 190px;
  margin-top: 14px;
}

/*=============== index.php - END ===============*/



/*========== login.php ==========*/

.login__input {
  margin-bottom: 20px;
}

.login__button {
  min-width: 239px;
  margin-top: 12px;
  margin-bottom: 22px;
}

.login__link {
  margin: 0 auto;
}

/*========== registration.php ==========*/

.registration-form {
  max-width: 350px;
  margin-bottom: 80px;
}

.registration-form__inner {
  margin-bottom: 13px;
}

.registration-form__button {
  margin-top: 37px;
}

/*========== event.php ==========*/

.open-gate-button {
  margin: 0 auto;
  min-width: 188px;
}


/*========== Результаты ==========*/

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

.results-title,
.results-value {
  font-size: 12px;
  line-height: 14px;
  font-style: normal;
  font-weight: 500;
  color: var(--text-blue);
  opacity: 0.6;
}

.results-title {
  margin-right: 10px;
}

.results-select {
  min-width: 78px;
  padding: 8px;
  padding-left: 14px;
  padding-right: 30px;
  border: 1px solid var(--border-gray);
  border-radius: 5px;
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  color: var(--text-blue-darken);
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
  background-image: url(../img/results-arrow-down.svg);
  background-size: 22px 22px;
  background-repeat: no-repeat;
  background-position: 90% 50%;
}

.results-value {
  margin-left: 10px;
}

/*========== Пагинатор ==========*/

.paginator {
  display: flex;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

.table__data-inner .paginator {
  margin-left: auto;
}

.paginator__item--number {
  margin-right: 5px;
}

.paginator__item:last-child {
  margin-right: 0;
}

.paginator__item--prev {
  margin-right: 16px;
}

.paginator__item--next {
  margin-left: 16px;
}

.paginator__link {
  font-size: 12px;
  line-height: 14px;
  font-weight: bold;
  color: var(--orange);
}

.paginator__link--number {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 34px;
  min-height: 34px;
  color: var(--text-blue-darken);
  border: 1px solid var(--border-gray);
  border-radius: 50%;
  background-color: transparent;
}

.paginator__link--disabled {
  color: var(--text-blue);
  opacity: 0.6;
}

.paginator__link--active {
  color: var(--basic-white);
  background-color: var(--orange);
  border-color: var(--orange);
}

/*========== Номера ==========*/


.format_card_title {
  /* min-width: 80px; */
  height: 30px;
  width: 55px;
  color: #1f1f1f;
  /* font-weight: bold; */
  border: solid 1px #838383;
  padding: 2px 12px;
  background-color: #f3f3f3;
  display: inline-block;
  border-radius: 3px;
  /* margin: 3px 20px; */
  align-content: center;
}

.format_card_num{
  font-size: 12px;
  min-width: 100px;
  color: #838383;
  padding: 2px 12px;

  display: inline-block;


}


.format_num {
  min-width: 100px;
  color: #838383;
  font-weight: bold;
  border: solid 1px #838383;
  padding: 2px 12px;
  background-color: #fff;
  display: inline-block;
  border-radius: 3px;
  text-wrap: nowrap;
  margin-top: -20px;
}

.format_num:hover {
  border-color: black;
  color: black;
}

.format_num .num_main {
  min-width: 65px;
  display: inline-block;
  font-size: 14px;
}

.format_num .num_main .digit {
  font-size: 16px;
  padding: 0 2px;
}

.format_num .reg {
  text-align: center;
  font-size: 16px;
  display: inline-block;
  width: 26px;
  margin-left: 4px;
  padding-left: 4px;
  border-left: solid 1px #838383;
}


.format_tel{
  text-wrap: nowrap;
}

.link {
  font-size: 16px;
  color: #813b08;
  text-decoration: underline;
  cursor: pointer;
}

.reg_page {
  margin: 0 auto;
  max-width: 460px;
}

.recovery_login {
  text-align: center;
  display: block;
  margin-bottom: 80px;
  font-size: 14px;
}

.help_content { margin: 0px auto;  max-width: 900px; padding: 30px;}

.top_page_content { margin: 0px auto;  max-width: 900px; padding: 30px;}


/*  For Mobile Phones  */
@media (max-width:480px){

  .logo{
    margin: 0px;
  }


  .main-header {
    padding: 10px;
    min-height: auto;
  }


  .logo{  width: 70px; }

  .promo{
  padding: 0 15px;
  }



  .promo__text{
  padding-right: 0;
  }

  .promo__title {
  text-align: center;
  font-size: 40px;
  }

  .promo__image {
  max-width: none;
  min-width: auto;
  }

  .promo__image img{
  height: auto;
  }


  .description__title {
    padding: 0 15px;
    font-size: 30px;
  }

  .description__text{
    padding: 0 15px;
    text-align: left;
  }

  .description {
    margin-bottom: 50px;
  }

  .functions {
   /* display: flex;*/
    padding-top: 50px;
  }

/*
  .function__icon {
    position: relative;
    left:0;
  }
*/

  .login_page .form {
    width: 300px;
    margin-top:30px;
  }


  .reg_page {
    margin: 50px auto 0 auto;
    max-width: 460px;
    padding: 20px;
  }
  .reg_page h1 {font-size: 30px;}

}