* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-family: "Roboto", sans-serif;
  font-size: 110%;
}

.header {
  height: 60px;
  text-transform: uppercase;
  display: flex;
  justify-content: center;
  align-items: center;
}

.header h1 {
  letter-spacing: 1px;
  color: rgb(2, 107, 174);
  font-size: 200%;
}

.nav {
  height: 80px;
  background-color: rgb(2, 107, 174);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav .awarded {
  font-weight: 600;
}

.nav .chosen {
  color: rgb(207, 207, 207);
}

.nav .special {
  color: rgb(183, 217, 243);
}

.nav .special:hover {
  color: rgb(255, 255, 255);
}

.left {
  width: 96%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.flank {
  width: 7%;
}

.nav ul {
  display: flex;
  list-style: none;
}

.nav h1 {
  letter-spacing: 5px;
  font-size: 180%;
}

.nav--link {
  text-decoration: none;
  padding: 0 10px;
  text-transform: uppercase;
  font-size: 14px;
  color: rgb(255, 255, 255);
  letter-spacing: 1px;
}

.nav--link:hover {
  color: rgb(207, 207, 207);
}

.nav--link i {
  text-decoration: none;
  padding: 0 10px;
  text-transform: uppercase;
  font-size: 17px;
  color: rgb(255, 255, 255);
  letter-spacing: 1px;
}

.nav--link:hover i {
  color: rgb(207, 207, 207);
}

.main {
  min-height: calc(100vh - 160px);
  padding: 30px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  background-color: rgb(245, 247, 250);
}

.main .form {
  width: 400px;
  background-color: rgb(255, 255, 255);
  padding: 60px;
  border: 1px solid rgb(207, 207, 207);
  border-radius: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(5, 1fr);
  grid-template-areas:
    "name name--inp"
    "surname surname--inp"
    "init init--inp"
    "availability availability--inp"
    "btn btn";
  gap: 10px;
}

.main-login {
  min-height: calc(100vh - 130px);
  padding: 30px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 15px;
  background-color: rgb(200, 229, 247);
}

.main-login .form {
  width: 330px;
  background-color: rgb(255, 255, 255);
  padding: 50px;
  border: 1px solid rgb(0, 93, 145);
  border-radius: 5px;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(3, 1fr);
  grid-template-areas:
    "login--inp"
    "password--inp"
    "btn";
  gap: 15px;
}

.login,
.password {
  display: flex;
  align-items: center;
}

.login--inp,
.password--inp {
  text-align: center;
  text-indent: 5px;
}

.main--wraper-login {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.main--wraper-login img {
  width: 400px;
  border-radius: 10px;
}
.main--pass {
  height: 80px;
  width: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(2, 107, 174);
  letter-spacing: 1px;
}

.main--wraper-login h3 {
  color: rgb(2, 107, 174);
  letter-spacing: 1px;
}

.login--box {
  height: 50px;
  width: 350px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.form--name {
  grid-area: name;
  padding: 5px 0;
}

.form--name-inp {
  grid-area: name--inp;
  padding-left: 2px;
}

.form--surname {
  grid-area: surname;
  padding: 5px 0;
}

.form--surname-inp {
  grid-area: surname--inp;
  padding-left: 2px;
}

.form--initial {
  grid-area: init;
  padding: 5px 0;
}

.form--initial-inp {
  grid-area: init--inp;
  padding-left: 2px;
}

.form--availability {
  grid-area: availability;
  padding: 5px 0;
}

.form--availability-inp {
  grid-area: availability--inp;
  padding-left: 2px;
}

.form--btn {
  grid-area: btn;
  padding: 5px;
  cursor: pointer;
}

.main .form--time {
  width: 400px;
  background-color: rgb(255, 255, 255);
  padding: 60px;
  border: 1px solid rgb(207, 207, 207);
  border-radius: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, 1fr);
  grid-template-areas:
    "time time-inp"
    "minute minute-inp"
    "btn btn";
  gap: 10px;
}

.label--time {
  padding: 5px 0;
  grid-area: time;
}

.inp--time {
  grid-area: time-inp;
  padding-left: 2px;
}

.label--minute {
  padding: 5px 0;
  grid-area: minute;
}

.inp--minute {
  grid-area: minute-inp;
  padding-left: 2px;
}

.inp--btn {
  grid-area: btn;
  padding: 5px;
  cursor: pointer;
}

.main .form--place {
  width: 400px;
  background-color: rgb(255, 255, 255);
  padding: 60px;
  border: 1px solid rgb(207, 207, 207);
  border-radius: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(2, 1fr);
  grid-template-areas:
    "place place-inp"
    "btn btn";
  gap: 10px;
}

.main .form--pass {
  width: 410px;
  background-color: rgb(255, 255, 255);
  padding: 60px;
  border: 1px solid rgb(207, 207, 207);
  border-radius: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, 1fr);
  grid-template-areas:
    "place place-inp"
    "repet repet-inp"
    "btn btn";
  gap: 10px;
}

.main .form--update {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.main .form--update-btn {
  margin-top: 20px;
  padding: 5px 40px;
  cursor: pointer;
}

.main .teachers {
  display: flex;
  margin-top: 20px;
  width: 1355px;
  flex-wrap: wrap;
  padding: 5px;
}

.teachers .teacher {
  width: 220px;
  border: 1px solid rgb(207, 207, 207);
  margin: 2px;
  padding: 3px;
  font-size: 13px;
  background-color: rgb(62, 128, 195);
  font-weight: 400;
  color: rgb(255, 255, 255);
  cursor: pointer;
  border-radius: 2px;
}

.teachers .teacher-del {
  background-color: rgb(5, 102, 199);
  color: rgb(255, 255, 255);
}

.teachers .teacher:hover {
  background-color: rgb(207, 207, 207);
  color: rgb(0, 0, 0);
}

.label--place {
  padding: 5px 0;
  grid-area: place;
}

.inp--place {
  grid-area: place-inp;
  padding-left: 2px;
}

.label--pass {
  padding: 5px 0;
  grid-area: place;
}

.inp--pass {
  grid-area: place-inp;
  padding-left: 2px;
  text-align: center;
}

.label--pass-repet {
  padding: 5px 0;
  grid-area: repet;
}

.inp--pass-repet {
  grid-area: repet-inp;
  padding-left: 2px;
  text-align: center;
}

.footer {
  height: 50px;
  background-color: rgb(2, 107, 174);
  color: #fff;
  display: flex;
  justify-content: left;
  padding-left: 10px;
  align-items: center;
  font-size: 12px;
}

.main .col--link {
  text-transform: uppercase;
  font-size: 18px;
  color: rgb(5, 102, 199);
  text-decoration: none;
  padding: 0 16px;
}

.main .col--link:hover {
  color: rgb(192, 66, 66);
}

table {
  page-break-inside: avoid;
  border: 1px solid rgb(218, 218, 218);
  border-collapse: collapse;
  margin-bottom: 10px;
}

.print--table {
  width: 1550px;
}

tr {
  page-break-inside: avoid;
  page-break-after: auto;
}

table th {
  background-color: rgb(64, 136, 209);
  padding: 8px;
  color: rgb(255, 255, 255);
  text-transform: uppercase;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 1px;
}

table td {
  border: 1px solid rgb(218, 218, 218);
  padding: 6px;
}

table tr:hover {
  background-color: rgb(218, 218, 218);
}

.plan {
  width: 1610px;
}

table .col {
  width: 60px;
  text-align: center;
}

table .col--big {
  min-width: 120px;
  padding: 10px 6px;
}

table .print--col-big {
  width: 170px;
  text-align: center;
}

table .col--bigest {
  min-width: 200px;
  text-align: left;
}

table .col--big-mod {
  width: 150px;
  text-align: center;
}

table .col--big-info {
  min-width: 160px;
  text-align: center;
}

table .bk {
  background-color: rgb(207, 207, 207);
}

table .col--input {
  text-align: center;
  min-width: 180px;
  padding: 5px 5px;
}

table .info {
  padding: 2px 0;
  cursor: pointer;
}

input[disabled] {
  pointer-events: none;
}

.main--wraper {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main--wraper .wraper--left {
  width: 50%;
  /* height: 600px; */
  display: flex;
  justify-content: center;
  align-items: center;
}

.wraper--left img {
  width: 86%;
  min-width: 300px;
  border-radius: 15px;
}

.main--wraper .wraper--right {
  width: 50%;
  /* height: 600px; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.wraper--right--login {
  margin-bottom: 10px;
  color: rgb(2, 107, 174);
  letter-spacing: 1px;
}

.wraper--right--ico {
  color: rgb(9, 70, 108);
}

.right--linki {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 0;
}

.right--linki a {
  width: 300px;
  height: 50px;
  border-radius: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  text-transform: uppercase;
  background-color: rgb(2, 107, 174);
  color: rgb(255, 255, 255);
  letter-spacing: 1px;
  font-weight: 500;
}

.right--linki-small a {
  width: 300px;
  height: 50px;
  border-radius: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  text-transform: uppercase;
  background-color: rgb(2, 107, 174);
  color: rgb(255, 255, 255);
  letter-spacing: 1px;
  font-weight: 500;
}

.box--small {
  width: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.right--linki-small {
  margin: 5px;
  width: 145px;
  height: 50px;
  border-radius: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  text-transform: uppercase;
  background-color: rgb(2, 107, 174);
  color: rgb(255, 255, 255);
  letter-spacing: 1px;
  font-weight: 500;
}

.right--linki a:hover,
.right--linki-small a:hover {
  background-color: rgb(2, 107, 174);
  color: rgb(218, 218, 218);
}

.right--current {
  margin: 30px 0;
  font-weight: 450;
  color: rgb(0, 128, 80);
}

.right--current-false {
  margin: 30px 0;
  font-weight: 450;
  color: rgb(183, 34, 34);
}

.print--day {
  text-transform: uppercase;
  color: rgb(2, 107, 174);
  margin: 20px 0;
  letter-spacing: 1px;
  text-align: center;
}

.draft {
  margin-top: 20px;
}

.draft--link {
  text-decoration: none;
  text-transform: uppercase;
  color: rgb(2, 107, 174);
  font-size: 16px;
}

.draft--link:hover {
  color: rgb(175, 210, 232);
}

@media (min-width: 1800px) {
  html {
    font-size: 120%;
  }
  .main {
    font-size: 14px;
  }
  .nav--link {
    font-size: 15px;
  }
  .footer {
    font-size: 13px;
  }
}