body, html{width:100%; padding:0; margin:0;  }
html{ font-size:16px; height: 100%;}
body{background: #fff; color:#454958; font:400 16px/1.6 'Inter', sans-serif;}
input, select, textarea, button{background: #fff; padding:.5rem; color:#454958; font:400 16px/1.6 'Inter', sans-serif;}
input, select, textarea{border:1px solid #eaedfb;}
input:focus, select:focus, textarea:focus{outline:none; border-color:#133c8b;}
*{box-sizing: border-box;}
.text-right{text-align: right}
.text-left{text-align: left}
.text-center{text-align: center}
.text-bold{font-weight:bold;}
.text-nowrap{white-space: nowrap;}
.text-second{color:#a4b6da;}
a{color:#133c8b; transition:all .25s ease;}
a:hover{color:#e40613;}
.icon{display:inline-block; width:16px; height:16px; fill:#133c8b;}
.arrow-left{transform: rotate(180deg);}
.form-group{position: relative; display: flex;}
.btn{display: inline-block; cursor:pointer; border:none; padding:.5rem 2rem; text-align: center; transition: background .25s ease; background:#133c8b; color:#fff; font-weight: bold; text-decoration: none; }
.btn:hover{background:#e40613; color:#fff;}
.btn-link{background:transparent; border:0; cursor: pointer;}
.btn-link:focus{outline:none; color:#133c8b;}
.btn-second{background:#ccd1e6; color:#133c8b;}
.btn-second:hover{background:#133c8b; color:#fff;}
.col{padding:0 .5rem;}

/* Высоту шапки и первой строки шапки таблицы проставляет main.js: от них
   зависят отступ страницы и позиции липких строк, а раньше это были магические
   числа (75/62/107), из-за которых шапка наезжала на таблицу. */
:root{--header-h:64px; --thead-h:48px; --control-h:36px;}

body{padding-top:var(--header-h);}
main{min-height:80vh;}
#header{position: fixed; top:0; background: #fff; width:100%; left:0; padding:.5rem 0; z-index: 20; box-shadow:0 1px 0 #eaedfb;}
#header.fixed{z-index: 10; opacity: 10;}
.header-logo{display:flex; align-items:center; flex:0 0 auto;}
.header-logo svg, .header-logo img{width: 60px; height:35px;}

.header-user_link .icon{ margin-right:6px; position: relative; top:3px; }
.header-user_link-name{font-weight: bold; color:#133c8b;}
.header-user_link:hover .header-user_link-name{color:#e40613;}
.header-user_link:hover .icon{fill:#e40613; }

.js-color.rating-5{background: #ffbcbc}
.js-color.rating-10{background: #ffbcbc}
.js-color.rating-15{background: #ffbcbc}
.js-color.rating-20{background: #ffbcbc}

.js-color.rating-25{background: #ffedbc}
.js-color.rating-30{background: #ffedbc}
.js-color.rating-35{background: #ffedbc}
.js-color.rating-40{background: #ffedbc}

.js-color.rating-45{background: #fffdbc}
.js-color.rating-50{background: #fffdbc}
.js-color.rating-55{background: #fffdbc}
.js-color.rating-60{background: #fffdbc}

.js-color.rating-65{background: #efffbc}
.js-color.rating-70{background: #efffbc}
.js-color.rating-75{background: #efffbc}
.js-color.rating-80{background: #efffbc}

.js-color.rating-85{background: #ccffbc}
.js-color.rating-90{background: #ccffbc}
.js-color.rating-95{background: #ccffbc}
.js-color.rating-100{background: #ccffbc}

.dropdown{position: relative; cursor:pointer;}
.dropdown-block{display:none; padding:0; position: absolute; text-align: left; background: #fff; top:100%; z-index: 10; left:0; box-shadow: 0 0 50px rgba(0,0,0,.1); left:0;}
.dropdown.is_active .dropdown-block{display: flex; flex-direction: column;}
/* .logout-button обёрнут в свою <form>; display:contents делает форму
   прозрачной для раскладки, чтобы кнопка стояла в общей колонке пунктов меню. */
.dropdown-block .logout-form{display: contents;}
.dropdown-block a, .dropdown-block .logout-button{display: block; text-decoration: none; padding:1rem; white-space: nowrap; max-width:200px; border-bottom:1px solid #eaedfb;}
.dropdown-block a:hover, .dropdown-block .logout-button:hover{background:#f5f7ff;}
.dropdown-block a:last-child, .dropdown-block .logout-button:last-child{border:0;}
/* Кнопка выхода: сброс стилей браузера, чтобы не отличалась от соседних ссылок */
.dropdown-block .logout-button{width:100%; text-align:left; background:none; border-left:0; border-right:0; border-top:0; font:inherit; color:inherit; cursor:pointer;}
.text-right .dropdown-block{left:auto; right:0;}

.input-group{display: -ms-flexbox; display: -webkit-box; display: flex; align-items: center;}
.input-group span{padding:0 .5rem; font-weight: normal}
.input-group input{padding:.2rem .5rem!important; min-width:68px;}
.input-group .btn-link{position: relative!important;}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {-webkit-appearance: none;}

input[type='number'] { -moz-appearance: textfield;}

.table-responsive { margin-bottom:3rem;}
table {border-collapse: separate; border-spacing: 0; position: relative; width:100%;}
table tr{transition: all .25s ease; }
table td, table th{border:1px solid #f5f7ff; padding:.5rem; line-height: 1.2;}
table tr:hover{ box-shadow: 0 0 60px rgba(0,0,0,.05) inset;}

thead th{position: sticky; top:var(--header-h); padding:0 .5rem; z-index: 2; background: #f8f8fb;}
thead tr:first-child{height:48px;}
thead tr:first-child th{padding-bottom:0;}
thead th{border-left-color:#f0f1f5; border-right-color:#f0f1f5;}
thead tr:hover{box-shadow:none;}
thead .search-row th{top:calc(var(--header-h) + var(--thead-h)); padding-bottom:.5rem;}
thead input, thead select, .search-form input{font-size:14px; font-weight:400; line-height: 1.3; display: inline-block; background: transparent; width: 100%;  padding: .2rem .5rem;}
thead input, .search-form input{line-height: 1.6;}
thead input, .search-form input{padding-right: 32px;}

thead .search-row th:hover input, thead tr:nth-child(2) th:hover select{background: #fff;}
thead .btn-link, .search-form .btn-link{opacity: .2; padding:0 .5rem; position: absolute; top:0; right:0; bottom:0; width:32px; height:30px; margin:auto;}
thead .btn-link:hover, .search-form .btn-link:hover{opacity: 1;}
thead .btn-link .icon, .search-form .btn-link .icon{width:14px; height:14px;}
tr.is_active, tr.is_active:hover{background: #d3f5ff;}
thead .small-text{font-size:10px; display: block;}
.td-title{min-width:100px!important;}
.select{position: relative; font-size:14px; font-weight:400;}
.select-link{white-space:nowrap; overflow: hidden; padding-right:20px; position: relative; border: 1px solid #eaedfb; line-height: 1.6; cursor: pointer; display: block;  height:32px; padding: .3rem; padding-right:20px;}
.select-link:hover{background: #fff;}
.select-link:after{content:''; display: block; position: absolute; top:2px; right:5px; bottom:0; margin:auto; width:0; height:0; border:3px solid transparent; border-top:7px solid #454958}
.select-link:before{content:''; display: block; position: absolute; top:0; right:0; bottom:0;  background: #fff; margin:auto; width:20px; height:100%;}
.select-list{position:absolute; z-index: 10; display: none; flex-direction: column; top:100%; left:0; list-style: none; text-align: left; margin:0; padding:.5rem 0; background: #fff; box-shadow: 0 10px 40px rgba(0,0,0,.1)}
.select:focus .select-list{display: flex; }
.select:focus .select-link{border-color:#133c8b;  outline:none;}
.select-option{white-space: nowrap; cursor:pointer; display: block; padding:.5rem 1rem; text-decoration: none; border-bottom:1px solid #f8f8fb}
.select-option .icon{position: relative; top:3px; margin-right:6px;}
.select-option:hover{background:#f8f8fb; color:#E40613;}
.select-option:hover .icon{fill:#e40613}
.select-list li:last-child a{border-bottom:0;}
.in_search{background: #fffed3}

/* display:contents убирает форму из раскладки, чтобы .search-bar_fields и
   .search-bar_flags вели себя как прямые flex-элементы .search-bar (ниже),
   хоть и лежат внутри <form>. */
.search-form{position: relative; display: contents;}
.search-form input:focus{border-color:#133c8b;}
.input-mark{background:#fffed3!important;}

/* Строка поиска в шапке. Раньше это была сетка flexboxgrid: селекты не влезали
   в свои колонки и наезжали друг на друга, а высоты полей (44/43/40) не
   совпадали. Теперь одна флекс-строка с общим шагом и общей высотой контролов. */
.search-bar{display:flex; align-items:center; flex-wrap:wrap; gap:.5rem .75rem;}
.search-bar_fields{display:flex; align-items:center; flex-wrap:wrap; gap:.5rem; flex:1 1 22rem; min-width:0;}
/* Галочки — сеткой в две колонки: так блок всегда занимает две ровные строки
   и не растягивает шапку в зависимости от длины подписей. */
.search-bar_flags{display:grid; grid-template-columns:repeat(2, max-content); align-content:center; gap:.25rem 1rem; flex:0 1 auto;}
#header .header-user{margin-left:auto; white-space:nowrap;}

.search-field{position:relative; flex:1 1 11rem; min-width:9rem; max-width:18rem; margin:0;}
#header input[type="text"], #header select{width:100%; height:var(--control-h); padding:.25rem .5rem; border:1px solid #eaedfb; background:#fff; font-size:14px; line-height:1.2; text-overflow:ellipsis;}
#header .search-field input{padding-right:30px;}
#header select{width:auto; flex:0 1 auto; min-width:7rem; max-width:10rem; cursor:pointer;}
#header select[name="sort"]{min-width:9rem; max-width:11.5rem;}
#header .btn-link{position:absolute; top:0; right:0; bottom:0; width:30px; height:auto; padding:0; margin:0; opacity:.35;}
#header .btn-link:hover{opacity:1;}

.checkbox-label{display:flex; align-items:center; gap:.35rem; margin:0; line-height:1.2; font-size:13px; white-space:nowrap; cursor:pointer;}
.checkbox-label input[type="checkbox"]{flex:0 0 auto; width:14px; height:14px; margin:0; padding:0;}


.login{min-height:80vh;}

.card{background: #f8f8fb; padding:1rem;}
.card-header{font-size:2rem;}
.card .form-group, .card .button-group{padding:1rem 0;}
.card .form-group input{padding:.5rem; border: 1px solid #eaedfb; width:100%;}
.alert-danger{color:#e40613;}

.pagination{display: -ms-flexbox; display: -webkit-box; display: flex; align-items:center; padding:0; list-style: none;}
.pagination li{display: block; }
.pagination li .page-link {text-decoration: none; display: block; text-align: center; padding:0 3px; min-width:30px; height:30px; line-height: 30px;}
.pagination li a:hover{background:#f5f7ff}
.pagination .active a, .pagination .active a:hover{background:#133c8b; color:#fff;}
.pagination .icon{vertical-align: middle; width:14px; height:14px; margin-top:-2px;}
.page-item{margin:0 2px;}
.page-link_disable{opacity: .5;}

.bottom-block{position: fixed; width:100%; padding:.5rem 0; left:0; bottom:0; background: #fff; z-index: 10; border-top:2px solid #133c8b;}

.total-price{display::inline-block; padding:0 .5rem;}

	.container-fluid{padding:0 1rem;}

@media screen and (max-width:48em){
	.btn{line-height: 1.2;}
	.select-list{left:auto; right:0;}
	/* На узком экране шапка складывается: логотип и пользователь сверху,
	   поля и галочки — отдельными строками во всю ширину. */
	.header-logo{order:-2;}
	#header .header-user{order:-1;}
	.search-bar_fields, .search-bar_flags{flex:1 1 100%;}
	.search-field{flex:1 1 100%; max-width:none;}
	#header select, #header select[name="sort"]{flex:1 1 45%; min-width:0; max-width:none;}
}

@media screen and (min-width:48em){
	.card{padding:2rem;}
}


.loader{
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: url('/static/img/loading.gif') 
              1% 0% no-repeat;
}

.add_comment{
  width: 20px;
  height: 20px;
  position: absolute; right: 5px;
  z-index: 999;
  cursor: pointer;
  background: url('/static/img/addcomment.png') no-repeat;
}

.delete_comment{
  display: inline-block;
  width: 20px;
  height: 20px;
  z-index: 999;
  cursor: pointer;
  background: url('/static/img/delete_comment.png') no-repeat;
}

.contacts-block__form {
  margin-bottom: 50px;
  padding: 32px 48px;
  position: relative;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.contacts-block__form > div,
.contacts-block__form label {
  position: relative;
}

.contacts-block__form-title {
  font-family: "PF BeauSans Pro", serif;
  color: #241324;
  font-size: 24px;
  line-height: 1.3;
  font-weight: 600;
  margin-bottom: 16px;
}
.contacts-block__form label {
  display: block;
  margin: 0 0 8px;
}
.contacts-block__form .site-btn,
.contacts-block__form a.site-btn {
  width: 50%;
}

.modal {
z-index: 999;
}
.blocker {
z-index: 100000 !important;
}
.my-popup {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: center;
      align-items: center;
  background: rgba(0,0,0,0.5);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
}
.my-popup.opened {
  opacity: 1;
  visibility: visible;
}
.my-popup--reviews .my-popup__container {
  max-width: 590px;
}
.my-popup__container {
  position: relative;
  max-height: 100%;
  overflow: auto;
  max-width: 1200px;
  width: 100%;
  padding: 30px 10px 10px;
  -webkit-overflow-scrolling: touch;
}
.my-popup__close {
  cursor: pointer;
  position: absolute;
  right: 5px;
  top: 0;
  font-size: 0;
  line-height: 1;
  z-index: 1;
}
.my-popup__close .svg-icon {
  width: 26px;
  height: 26px;
  color: #fff;
}
.my-popup__form-send {
  text-align: center;
  color: #fff;
  padding: 34px 34px;
  background: gray;
  box-shadow: inset 4px 4px 20px rgba(255,255,255,0.5);
  border-radius: 20px;
}
.my-popup__form-send-title {
  font-weight: 500;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 10px;
}
.my-popup__form-send-desc {
  font-weight: 500;
  font-size: 20px;
  line-height: 2;
  text-align: center;
  letter-spacing: 0.07em;
}

.hr-dotted {
	margin: 20px 0;
	padding: 0;
	height: 0;
	border: none;
	border-top: 2px dotted #ddd;
}

@media all and (max-width: 1022px) {
.contacts-block {
    margin-bottom: 40px;
  }
  .contacts-block__form {
    padding: 20px 20px;
    margin-bottom: 10px;
  }
  .contacts-block__form-title {
    margin-bottom: 15px;
    font-size: 18px;
  }
  .contacts-block__form label {
    margin-bottom: 20px;
  }
  .contacts-block__form-button {
    margin-top: 20px;
  }
  .my-popup__form-send {
    padding: 30px 20px;
    border-radius: 20px;
  }
  .my-popup__form-send-title {
    font-size: 22px;
    margin-bottom: 15px;
  }
  .my-popup__form-send-desc {
    line-height: 1.2;
    font-size: 16px;
  }
  }