@charset "UTF-8";
@import url("./../fonts/fonts.css");

:root{

  --font-family: 'Avenir Next Cyr', sans-serif;
  --font-size: 14px;
  --line-height: 1.142;

  --unit: 8px; /* 8px */ 
  --wr-size: 1440px;

  --bg-color: hsl(0, 0%, 100%);
  --color1:         #1F77DD;
  --color1-hover:   #469BFF;
  --color2:         #D4E5ED;
  --text1:          #11435D;
  --text2:          #8A98A3;

  --animation-speed: 0.25s;
  --animation-easeing: ease-in-out;

}

html, 
body {
  margin: 0; 
  padding: 0; 
  max-width: 100%;
  height: 100%;
  background: var(--bg-color); 
  color: var(--text1);
  font-size: var(--font-size);
  font-style: normal;
  font-weight: normal;
  font-family: var(--font-family);
  line-height: var(--line-height);
}

body {
  cursor: default; 
  position: relative;
  min-width: 360px;
  padding: calc(var(--unit) * 2);
}

iframe body{
  padding: calc(var(--unit) * 2);
}

img {
  max-width: 100%; 
  user-select: none; 
  pointer-events: none;
}
a img {border: 0;}

a {
  text-decoration: none; 
  color: var(--color1);
  transition: color var(--animation-speed) var(--animation-easeing);
}
a span, 
a font {cursor: inherit;}

hr {
  background: var(--color1);
  height: 0.15rem; 
  border: 0; 
  margin: 1rem 0;
}
label {cursor: pointer; user-select: none;}

input[type="submit"], 
button {cursor: pointer;}

textarea {resize: vertical;}

input,
textarea, 
button {
  font-family: var(--font-family);
  line-height: var(--line-height);
  color: var(--text1); 
  outline: 0;
}
button::-moz-focus-inner {
  padding: 0; 
  border: 0;
}
button:disabled{cursor: not-allowed;}

input{
  width: 15rem;
  margin: 5px;
  border: 1px solid var(--color1);
  color: var(--text1);
  background: var(--bg-color);
}

input,
output {
  display: inline-block;
  vertical-align: middle;
  font-family: var(--font-family);
  line-height: var(--line-height);
}

output {
  background: var(--color1);
  padding: 5px 16px;
  border-radius: 3px;
  color: #fff;
}

script {display: none !important;}

svg{
  width: 24px; height: 24px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

::selection { 
  color: white; 
  background: var(--color1);
}

*, 
*:before, 
*:after {box-sizing: border-box;}

/* Scroll */
*::-webkit-scrollbar,
html *::-webkit-scrollbar {
  height: 3px;
  width: 3px;
}
*::-webkit-scrollbar-track,
html *::-webkit-scrollbar-track {
  background: var(--color2);
}
*::-webkit-scrollbar-thumb,
html *::-webkit-scrollbar-thumb {
  background-color: var(--color1);
  border-radius: 5px;
}

section {
  position: relative;
  margin: 0;
}

/* Typography */
h1, h2, h3,
h4, h5, h6,
.h0, .h1, .h2, .h3,
.h4, .h5, .h6{
  font-family: var(--font-family);
  line-height: var(--line-height);
  font-style: normal;
  margin: 0.5em 0 0.125em;
}
h1, h2, h3, h4,
.h0, .h1, .h2, .h3, .h4{
  font-weight: 700;
}
h5, h6,
.h5, .h6{
  font-weight: 500;
}

.h0{font-size: 3.428rem;}
h1, .h1{font-size: 2.285rem;}
h2, .h2{font-size: 1.714rem;}
h3, .h3{font-size: 1.571rem;}
h4, .h4{font-size: 1.428rem;}
h5, .h5{font-size: 1.285rem;}
h6, .h6{font-size: 1.142rem;}

p, .p{
  font-size: 1rem;
  margin: 0.5em 0;
}

.small{
  font-size: 0.857rem;
  margin: 0.5em 0;
}

/* Buttons */
button, 
.button{
  background: var(--color1);
  color: #fff;
  padding: 0.75em;
  border: 1px solid var(--color1);
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
  font-family: var(--font-family);
  outline: none;
  display: inline-block;
  border-radius: 4px; /* 8px было */
  min-width: 120px;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  transition: all var(--animation-speed) var(--animation-easeing);
}

button:hover, 
.button:hover{
  background: var(--color1-hover);
  border-color: var(--color1-hover);
}

button:disabled, 
.button.button_disabled{
  background: var(--text2);
  border-color: var(--text2);
  cursor: not-allowed;
}
button:disabled:hover, 
.button.button_disabled:hover{
  opacity: 0.9;
}

button.button_middle, 
.button.button_middle{
  padding: 0.5em;
  min-width: 150px;
}

button.button_small, 
.button.button_small{
  font-size: 0.857rem;
  padding: 0.251em;
  min-width: 110px;
  border-radius: 4px;
}

.button-group .button{
  margin: 16px 0 0;
}

.button-group .button:first-child{
  margin-top: 0;
}

.button__text{
  display: initial;
  vertical-align: middle;
}

.button__text_mobile{display: none;}


.button_left{
  text-align: left;
}

.button_stroke{
  background: transparent;
  color: var(--text1);
  border-color: var(--color2);
  font-weight: 500;
}

.button_stroke:hover{
  background: var(--color1-hover);
  color: #fff;
}

.button_stroke .button__icon{
  color: var(--color1);
}

.button_stroke .button__icon:after{
  background: var(--color1);
  opacity: 0.1;
}
.button_stroke:hover{
  border-color: var(--color1);
  background: transparent;
  color: var(--color1);
}

/* buttons icon */
.button__icon{
  display: inline-block;
  font-size: 0;
  line-height: 0;
  vertical-align: middle;
  position: relative;
  margin: -3px 30px -3px 0;
  top: -1px;
}
.button__icon:after{
  content: "";
  position: absolute;
  left: -0.571rem; right: -0.571rem;
  top: -0.571rem; bottom: -0.571rem;
  z-index: 0;
  display: block;
  background: #fff;
  opacity: 0.2;
  border-radius: 8px;
  transition: all var(--animation-speed) var(--animation-easeing);
}
.button__icon svg{
  position: relative;
  z-index: 3;
}
.button_stroke.button__icon_black .button__icon{
  color: var(--text1);
}
.button_stroke.button__icon_black .button__icon:after{
  background: var(--text1);
}


button svg:after, 
.button svg:after{
  content: "-";
  display: inline-block;
  width: 50px;
  height: 50px;
}

.button_middle .button__icon{margin-right: 12px;}
.button_middle .button__icon:after{
  left: -0.285rem; right: -0.285rem;
  top: -0.285rem; bottom: -0.285rem;
}

.button_small .button__icon{margin: 0 2px;}
.button_small .button__icon:after{
  left: -0.142rem; right: -0.142rem;
  top: -0.142rem; bottom: -0.142rem;
  display: none;
}


/* app */
/* .app{
  padding: calc(var(--unit) * 2);
} */

.page{
  display: flex;
}

.sidebar{
  width: 30%;
  max-width: 392px;
  padding: 0 2% 0 0;
}

.sidebar .button{
  display: block;
}

.main{
  flex-grow: 3;
}

.header{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  padding: 0 0 20px;
}


/* service */
.service{
  display: table;
  border-radius: 8px;
  overflow: hidden;
  margin: 32px 0;
  width: 100%;
}

.service .button{
  border-color: var(--color1);
  color: var(--color1);
  font-weight: bold;
}

.service .button:hover{
  background-color: var(--color1);
  color: #fff;
}

.service__row{
  display: table-row;
  position: relative;
}

.service__row:after{
  content: "";
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  opacity: 0.1;
  z-index: 0;
}

.service__row:nth-child(odd):after{
  background: var(--text2);
}

.service__row.service__row_header{
  font-size: 16px;
  font-weight: bold;
  position: relative;
}
.service__row.service__row_header .service__col{
  padding-top: 18px;
  padding-bottom: 18px;
}

/* .service__row:not(.service__row_header):hover:nth-child(odd):after{
  
} */
.service__row:not(.service__row_header):hover:after{
  background: var(--color1-hover);
  opacity: 0.15;
}


.service__col{
  display: table-cell;
  padding: 12px 24px;
  padding: calc(var(--unit) * 1.5) calc(var(--unit) * 3);
  position: relative;
  z-index: 5;
}

.service__col-mobile{
  display: none;
}



/* select */
.select-group{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: space-between;
  align-items: center;
  margin: 30px 0 0;
  z-index: 10;
  position: sticky;
  top: 10px;
  background: var(--bg-color);
}

.select{
  position: relative;
  display: block;
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--color2, #D4E5ED);
  padding: 10px 20px;
  cursor: pointer;
  font-weight: 450;
}

.select-group .select{width: 50%;}

.select.select_active::after{
  transform: translateY(-50%) rotate(180deg);
  margin-top: -1px;
}

.select.select_active .select__list{
  opacity: 1;
  visibility: visible;
}


.select::after{
  content:  url("../img/arrow.svg");
  color: var(--text2);
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  transition: all var(--animation-speed) var(--animation-easeing);
  margin-top: 2px;
}

.select + .select{
  margin-left: 24px;
}

.select__name{
  font-size: 12px;
  font-weight: 450;
  color: var(--text2);
  width: 100%;
  display: block;
}

.select__info{
  margin: 0 0 5px 0;
}

.select__select{
  color: var(--text1);
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: 0.48px;
  overflow: hidden;
  white-space: nowrap;
  max-width: 90%;
  text-overflow: ellipsis;
}

.select__list{
  position: absolute;
  left: 0;
  top: 100%;
  right: 0;
  margin: 8px 0 0;
  border-radius: 8px;
  background: #FFF;
  box-shadow: 0px 11px 29px 0px rgba(0, 0, 0, 0.11);
  z-index: 10;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: all var(--animation-speed) var(--animation-easeing);
}

.select__list-opened{
  opacity: 1;
  visibility: visible;
}

.select__scroll{
  overflow-x: hidden;
  max-height: 100%;
  padding: 22px 0;
  max-height: 50vh;
}

.select__item{
  padding: 6px 20px;
}

.select__item.select__item_select,
.select__item:hover{
  background: rgba(31, 119, 221, 0.1);
  cursor: pointer;
  color: var(--color1);
}



/* pacients */

.patients{
  position: relative;
  display: block;
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--color2, #D4E5ED);
  cursor: pointer;
  font-weight: 450;
  margin: 0 0 16px;
  padding: 8px 0 0;
}

.patients.patients_active::after{
  transform: translateY(-50%) rotate(180deg);
  margin-top: -1px;
  opacity: 0;
}

.patients.patients_active .patients__list{
  opacity: 1;
  visibility: visible;
}


.patients::after{
  content:  url("../img/arrow.svg");
  color: var(--text2);
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  transition: all var(--animation-speed) var(--animation-easeing);
  margin-top: 2px;
}

.patients + .patients{
  margin-top: 24px;
}

.patients__name{
  font-size: 12px;
  font-weight: 450;
  color: var(--text2);
}

.patients__info{
  margin: 0 0 5px 0;
  padding: 10px 20px;
  font-size: 24px;
  font-weight: bold;
  color: var(--text1);
}

.patients__select{
  color: var(--text1);
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: 0.48px;
}

.patients__list{
  border-radius: 8px;
  background: #FFF;
  z-index: 10;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: all var(--animation-speed) var(--animation-easeing);
}

.patients__scroll{
  overflow-x: hidden;
  max-height: 100%;
  padding: 0 0 22px 0;
  max-height: 50vh;
}

.patients__item{
  padding: 6px 20px;
}

.patients__item.patients__item_select{
  color: var(--color1);
}
.patients__item:hover{
  background: rgba(31, 119, 221, 0.1);
  cursor: pointer;
  color: var(--color1);
}

/* login form */

.account-page{
  min-height: auto;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}

.account{
  max-width: 460px;
  width: 100%;
  padding: 54px;
  position: relative;
}

.account:after{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  border-radius: 8px;
  background: var(--text2);
  opacity: 0.1;
  z-index: 1;
}

.account > *{
  position: relative;
  z-index: 5;
}

.account h1, .account h2, .account h3,
.account h4, .account h5, .account h6{
  margin: 0;
}

.account h1{
  font-size: 48px;
  white-space: nowrap;
}

.account-status{
  margin: 18px 0;
  color: #EB5757;
  font-size: 16px;
}

.form__item{
  margin: 18px 0 24px;
}

.form__input{
  position: relative;
}

.form__input input{
  width: 100%;
  border: 1px solid var(--color2);
  background: #fff;
  font-size: 18px;
  font-weight: 450;
  color: var(--text1);
  height: 64px;
  line-height: 64px;
  margin: 0;
  padding: 16px 20px 0;
}

.form__input label{
  position: relative;
  display: block;
  cursor: text;
}

.form__input-name{
  position: absolute;
  left: 0;
  top: 0;
  font-size: 18px;
  font-weight: 450;
  line-height: 64px;
  padding: 0 20px;
  color: var(--text2);
  transition: all var(--animation-speed) var(--animation-easeing);
}

.form__input input:focus + .form__input-name, 
.form__input input.active + .form__input-name{
  font-size: 12px;
  line-height: 35px;
}

.form__input .show-pass{
  position: absolute;
  width: 60px;
  height: 60px;
  top: 2px;
  right: 2px;
  cursor: pointer;
}
.form__input .show-pass svg{
  margin: 20px 0 0 18px;
}

.form__input .show-pass .show{
  display: none;
}

.form__input .show-pass.active .show{
  display: block;
}
.form__input .show-pass.active .hide{
  display: none;
}




@media (max-width: 800px){

  .page{
    display: flex;
    flex-direction: column;
  }

  .sidebar{
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column-reverse;
  }

  .patients{
    margin-top: 16px;
  }

  .sidebar__item .button-group{
    display: flex;
  }
  .sidebar__item .button-group .button{
    width: 50%;
  }
  .sidebar__item .button-group .button + .button{
    margin: 0 0 0 16px;
  }

  h1, .h1 {
    font-size: 1.5rem;
  }

}

@media (max-width: 580px){
  .button__text_desktop{
    display: none;
  }
  .button__text_mobile{
    display: inline-block;
    font-size: 14px;
  }
  .button__icon{
    margin-right: 10px;
  }

  .service, 
  .service__row,
  .service__col{display: block;}

  .service__row{
    display: block;
  }

  .service__row.service__row_header{display: none;}

  .service__row{
    margin: 16px 0 0;
    padding: calc(var(--unit) * 1.5) calc(var(--unit) * 2);
  }
  .service__row:after{
    background: var(--text2);
    border-radius: 8px;
  }

  .service__col{
    font-weight: 450;
    padding: calc(var(--unit) * 0.75) 0;
  }

  .service__col-mobile{
    display: block;
    font-size: 12px;
    font-weight: bold;
    color: var(--text2);
    margin: 0 0 2px;
  }

  .service__col_button{
    position: absolute;
    bottom: var(--unit);
    right: calc(var(--unit) * 2);
  }

  .service .button{
    background-color: var(--color1);
    color: #fff;
  }

  .select-group{
    flex-direction: column;
  }
  .select-group .select{width: 100%;}
  .select + .select{
    margin-left: 0;
    margin-top: 12px;
  }

  .header .button{
    min-width: auto;
  }

  .account{
    padding: 0;
  }

  .account:after{
    display: none;
  }

  .account h1{
    font-size: 40px;
  }

}