/* Указываем box sizing */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Убираем внутренние отступы */
ul[class],
ol[class] {
  padding: 0;
}

/* Убираем внешние отступы */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
}

/* Выставляем основные настройки по-умолчанию для body */
body {
  min-height: 100vh;
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* Удаляем стандартную стилизацию для всех ul и il, у которых есть атрибут class*/
ul[class],
ol[class] {
  list-style: none;
}

/* Элементы a, у которых нет класса, сбрасываем до дефолтных стилей */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Упрощаем работу с изображениями */
img {
  max-width: 100%;
  display: block;
}

/* Указываем понятную периодичность в потоке данных у article*/
article > * + * {
  margin-top: 1em;
}

/* Наследуем шрифты для инпутов и кнопок */
input,
button,
textarea,
select {
  font: inherit;
}

/* Удаляем все анимации и переходы для людей, которые предпочитай их не использовать */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body{
  background: url(../html/images/Background.svg);
  background-color: rgb(252 211 222);
  background-size: 100% 100%;
  background-position: center center;
  /* background: no-repeat; */
  background-attachment: fixed;
  font-family: 'Century Gothic';
}
h1{
  font-weight: 700;
  font-size: 64px;
  line-height: 78px;
  display: flex;
  align-items: center;
  letter-spacing: 0.07em;
  
  color: #000000;
  
}
h2{
  font-style: normal;
  font-weight: 700;
  font-size: 32px;
  line-height: 39px;
  display: flex;
  align-items: center;
  
  color: #000000;
}
h3{
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 25px;
  display: flex;
  align-items: center;

  color: #000000;
}
.d-none{
  display: none !important;
}
.d-flex{
  display: flex !important;
}
.flex-row{
  display: flex;
  justify-content: center;
  align-items: center;
}
.flex-column{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
/* .container{
    max-width: 1540px;
    margin: 0 auto;
}
.forma{
    width: 100%;
    height: 90vh;
    background: white;
    margin-top: 5%;
} */

.wrapper{
  min-height: 100%;
  /* overflow: hidden; */
}
.empty-container{
  width: 100%;
  height: 20px;
}
.forma-container{

  width: 100%;
  height: 100%;
  background: white;

  box-shadow: 7px 7px 10px 2px rgb(0 0 0 / 25%);
  border-radius: 10px 10px 0 0;
}
.bx-shadow-0{
  box-shadow: none;
}
.wrapper-content{
  margin: 0 auto;
  /* height: 100vh; */
  width: 77%;
  /* background: white; */
}
header{
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  height: 10%;
  background: white;
  box-shadow: 0px 0px 26px 6px rgba(229, 96, 131, 0.1);
  justify-content: flex-start !important;
  padding: 12px 87px 12px 20px;
  justify-content: space-between !important;

  border-radius: 10px 10px 0 0;
}
header .flex-row{
  height: 100%;
  gap: 10px;
}
/* header .flex-row:nth-child(2){
  padding: 0 87px;
  gap: 34px;
} */
header .flex-row > .flex-row:nth-child(2){
  padding: 0 87px;
}
header > .flex-row:nth-child(2){
  gap: 20px;
}
header > .flex-row:nth-child(2) h3{
  font-style: normal;
}
header > .flex-row:nth-child(1) h3{
  font-style: italic;
  color: #ABABAB;
}
.forma-auth{
  justify-content: center !important;
  align-items: center !important;

  gap: 144px;
}
.forma-content{
  margin: 0 auto;
  height: fit-content;
  gap: 68px;
  justify-content: flex-start;
  align-items: flex-start;
}
.forma-content-p1{
  gap: 68px;
}
.forma-content-input{
  gap: 21px;
}
.forma-buttons .flex-row:nth-child(2) h2{
  color: #FFA3A3;
}
.forma-content-input > input{
  width: 100%;
  background: #FFFFFF;
  box-shadow: 0px -1px 4px rgb(0 0 0 / 25%), 0px 3px 4px rgb(242 34 89 / 25%);
  border-radius: 116px;
  border: none;
  padding: 15px 45px;
  font-weight: 400;
  font-size: 36px;
  line-height: 44px;

  color: black;
  outline: none;

  transition: all 1s;
}
.forma-content-input > input:focus-within{
  box-shadow: 0px -1px 4px rgba(0, 0, 0, 0.25), 0px 20px 26px rgba(242, 34, 89, 0.1), 0px 4px 4px rgba(242, 34, 89, 0.35);
}
.forma-content-input input::placeholder{
  color: #AEAEAE;
}
.forma-buttons{
  gap: 60px;
}
.forma-buttons .flex-row h2{
  transition: color 0.5s;
}
.forma-buttons a:nth-child(2) h2:hover{
  color: #D8D8D8 !important;
}
.forma-buttons a h2:hover{
  color: #FFA3A3 !important;
}
.forma-buttons > div{
  align-items: flex-start;
  gap: 38px;
}
.forma-buttons > .flex-column > .flex-row{
  gap: 20px;
}
.forma-buttons input[type="submit"]{
  background: transparent;
  border: none;
  color: white;
}
.forma-buttons input[type="submit"]:hover{
  cursor: pointer;
}
.forma-buttons #button-auth:hover{
  background: rgb(255, 116, 116);
}
#button-auth{
  background: #2C2C2C;
  border-radius: 116px;
  color: white;
  padding: 20px 30px;
  cursor: pointer;
  font-weight: normal;
  font-size: 24px;
  line-height: 44px;
  border: 0;
  transition: all 1s;
  justify-content: center;
  align-items: center;
}
#button-auth svg{
  /* display: none; */
}
#button-auth{
  --display: none;
  --background: none;
}
#button-auth::after {
  display: var(--display) !important;
  /* background: var(--background) !important; */
  content: '';
  width: 200px;
  height: 95px;
  position: absolute;
  z-index: 1;
  animation: slide 2.5s normal;
  background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 99%,rgba(125,185,232,0) 100%);
}
@keyframes slide {
	0% {transform:translateX(-100%);}
	100% {transform:translateX(80%);}
}
.flex-column > a{
  text-decoration: none;
}

.forma-sidebar{
  position: sticky;
  top: 0;
  height: 100vh;
  width: 114px;
  border: 0;
  justify-content: space-evenly;
  box-shadow: 0px 0px 26px 6px rgba(229, 96, 131, 0.1);
  transition: all 1s;
}
.forma-sidebar:hover{
  width: 240px;
}
.forma-content:has(.forma-sidebar){
  gap: 0;
}

h4{
  font-weight: 400;
  font-size: 18px;
  line-height: 22px;
  color: #848484;
}
.forma-c{
  height: 100%;
  width: 100%;
  padding: 80px;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
}
.shadow{
  background: #F6F4FF;
  border-radius: 10px;
}
.file-container{
  /* width: 100px;
  height: 50px; */
  padding: 20px;
  background: #FFCED4;
  border-radius: 10px;
  position: relative;
  bottom: 10px;
  right: 10px;
}
.file-circle{
  padding: 10px;
  width: 5px;
  background: #68BFF3;
  box-shadow: 0px 0px 9px 3px rgba(104, 191, 243, 0.3);
  border-radius: 100%;
}
.file-number{
  gap: 0 !important;
}
.shadow-number{
  width: 30px;
  height: 30px;
  background: #E3DAEA;
  border-radius: 100%;
  text-align: center;
  position: relative;
  z-index: 1;
  top: 3px;
}
.file-number > p{
  background: #68BFF3;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    position: relative;
    left: 25px;
    text-align: center;
    color: white;
    /* top: 10px; */
    z-index: 2;
}
#file-theme .file-circle{
  background: #5AB643;
  box-shadow: 0px 0px 9px 3px rgba(90, 182, 67, 0.3);
}
#file-theme p{
  background: #5AB643;
}
#file-theme .shadow-number{
  background: #E3E8D4;
}
.file-content{
  align-items: flex-start;
  gap: 27px;
}
.file-content > .flex-column{
  gap: 6px;
  width: 100%;
  align-items: flex-start;
}
.file-content > .flex-column > .flex-row{
  width: 100%;
  justify-content: space-between;
  
}
.file-content > .flex-column > .flex-row > .flex-row{
  gap: 20px;
}
.file-content > .flex-column > .flex-row > .flex-row h3{
  font-style: normal;
}
/* .file-container::after{
  content: '';
} */
.file-container button{
  font-size: 18px;
  border: none;
  background: #FFECE7;
  box-shadow: 7px 9px 19px 3px rgba(229, 96, 131, 0.2);
  border-radius: 14px;
  padding: 5px 20px;
  gap: 30px;
  transition: .5s;
}
.file-container button:hover{
  cursor: pointer;
  background: #FFE5A1;
}
.select-choice{
  height: 100%;
  width: 100%;
  gap: 27px;
}
.select-choice h2{
  font-weight: 700;
  font-size: 30px;
  line-height: 37px;
}
.choice-selector{
  background: #E56083;
  box-shadow: 6.61111px 8.81481px 19.0988px 2.93827px rgba(229, 96, 131, 0.1);
  border-radius: 40px;
  padding: 38px 50px;
  font-weight: 400;
  font-size: 24px;
  line-height: 29px;
  color: white;
  gap: 44px;
}
.mail-teacher{
  position: fixed;
  bottom: 2vw;
  right: 15vw;
  width: fit-content;
  border: none;
  border-radius: 100%;
  padding: 15px;
  background: #F9F9F9;
  box-shadow: 0px 0px 4px 3px rgb(0 0 0 / 25%);
}
.mail-teacher:hover{
  background: #F6F4FF;
  cursor: pointer;
}
.forma-files-folder{
  position: sticky;
  top: 0;
  width: 35vw;
  height: 100%;
  background: #F6F4FF;
  padding: 50px 0;
  text-align: center;
  justify-content: flex-start;
  gap: 30px;
}
input[type="submit"]{
  background: transparent;
  border: none;
}
.forma-files-folder h3{
  font-style: normal;
}
.forma-files-folder h2{
  font-size: 24px;
}
.files-folder > .flex-row{
  gap: 20px;
}
.files-folder{
  width: 100%;
  align-items: flex-start;
}
.file-cont{
  width: 100%;
  height: 65px;
  padding: 0 30px;
  justify-content: flex-start;
}
.file-cont:hover{
  cursor: pointer;
  background: #E56083;
}
.file-cont:hover h3{
  color: white;
}
#file-document{
  background: #E2CC08;
  box-shadow: 0px 0px 9px 3px rgba(226, 204, 8, 0.3);
}
#file-video{
  background: #C54A58;
  box-shadow: 0px 0px 9px 3px rgba(197, 74, 88, 0.3);
}
.forma-catalog{
  display: grid;
  grid-template-rows: minmax(135px, 1fr);
  grid-template-columns: repeat(3, 1fr);
  column-gap: 20px;
  row-gap: 50px;
  text-align: -webkit-center;
}
form button{
  cursor: pointer;
  background: #E56083;
  border-radius: 116px;
  border: none;
  color: white;
  padding: 15px 48px;
  font-weight: bold;
}
.forma-test{
  display: flex;
  flex-direction: column;
  gap: 44px;
}
.forma-test h3{
  font-size: 30px;
  font-style: normal;
  font-weight: 700;
}
.tests-container{
  width: 100%;
}
.test-container{
  justify-content: flex-start;
  padding: 5px 40px;
  border-radius: 10px;
}
.test-container > .flex-row{
  gap: 15px;
}
.test-container > .flex-row::after{
  /* margin-left: 20px; */
}
.test-container:hover ::after{
  content: url('../html/images/test-arrow.svg');
}
.test-container:hover{
  cursor: pointer;
  background: #F6F4FF;
}
.test-container h4{
  font-weight: 400;
  font-size: 24px;
  line-height: 29px;
  color: black;
}

#listlessions{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 50px;
}
.choice-discipline-container{
  width: 65%;
  padding: 37px 30px;
  justify-content: flex-start;
  background: #FFFFFF;
  box-shadow: 0px 0px 8px -1px rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  gap: 40px;
}
.choice-discipline-container > .razd{
  background: black;
  width: 1px;
  height: 106px;
}
.buttons-discipline{
  height: 100%;
  width: 100%;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 25px;
}
.buttons-discipline input{
  position: absolute;
  opacity: 0;
}
.button-discipline{
  padding: 6px 20px;
}
.button-discipline:hover{
  background: #F6F4FF;
  border-radius: 10px;
}
.button-discipline label{
  font-weight: 400;
  font-size: 20px;
  line-height: 25px;
}
.button-discipline :hover label::after{
  content: url('../html/images/check.svg');
}
.buttons-discipline button{
  width: 100%;
  border: none;
  background: none;
  border-radius: 10px;
  padding: 6px 20px;
  transition: all 0.2s;
}
.buttons-discipline button:hover{
  cursor: pointer;
  background: #F6F4FF;
}
.buttons-discipline button:focus{
  background: #DAD2FF;
}
.buttons-discipline button:focus ::after{
  content: url('../html/images/check.svg');
}
.buttons-discipline button p{
  text-align: initial;
  font-weight: 400;
  font-size: 20px;
  line-height: 25px;
  width: 100%;
  justify-content: space-between;
}
.buttons-discipline :hover p::after{
  content: url('../html/images/check.svg');
}
.statistics-container{
  width: 100%;
  gap: 60px;
}
.stats-block{
  width: 100%;
  max-height: 158px;
  padding: 30px;
  background: #ECF6FF;
  border-radius: 10px;
  align-items: flex-start;
  gap: 20px;
}
.stats-block h3{
  font-weight: 700;
  font-size: 24px;
  line-height: 29px;
}
.stats-block h1{
  font-weight: 700;
  font-size: 40px;
  line-height: 49px;
}
.stats-block:nth-child(1){
  background: #ECF6FF;
}
.stats-block:nth-child(2){
  background: #F6F4FF;
}
.stats-block:nth-child(1) h1{
  color: #68BFF3;
}
.stats-block:nth-child(2) h1{
  color: #6659BC;
}
.stats-block:nth-child(3) h1{
  color: #FF9D84;
}
.stats-block:nth-child(3){
  background: #FFECE7;
}

table{
  width: 100%;
}
tbody{
  display: grid;
  row-gap: 10px;
}
tr{
  width: 100%;
  display: grid;
  grid-template-columns: minmax(100px, 1fr) minmax(80px, 1fr) minmax(200px, 1fr) minmax(100px, 1fr) minmax(100px, 1fr);
  column-gap: 20px;
  align-items: center;
  justify-items: start;
  padding: 12px 25px;
  background: #ECF6FF;
  border-radius: 10px;
}
tr:nth-child(1){
  padding: 0 25px;
  border-radius: 0;
  background: none;
  border-bottom: 1px solid;
}
td{
  font-weight: 400;
  font-size: 20px;
  line-height: 25px;
}
td:last-child{
  display: flex;
  gap: 10px;
}
.check td:last-child:after{
  content: url('../html/images/table-check.svg');
}
table a{
  color: #6659BC;
  text-decoration: none;
  /* text-decoration-color: dodgerblue; */
}
table a:hover{
  color: dodgerblue;
  text-decoration: none;
}
table .check{
  background: #FFECE7;
}

.menu-box{
  width: 100%;
  justify-content: space-between;
}
.menu-item{
  width: 50px;
  overflow: hidden;
  margin-right: 35px;
  align-items: center;
  justify-content: start;
  transition: all  0.8s ease-in-out;
}
.menu-box:hover .menu-item{
  cursor: pointer;
  margin-right: 0;
  width: 190px;
}
.b-left{
  background: white;
  width: 10px;
  height: 100%; 
  transition: all 1s ease;
}
.menu-box:hover .b-left{
  background: #E56083;
}
.menu-item span{
  font-size: 24px;
}
.menu-item img{
  max-width: max-content;
}
.menu-catalog-item{
  width: inherit;
  overflow: hidden;
  opacity: 0;
  margin: 5px;
  justify-content: space-between;
  transition: all 1.5 ease;
}
.menu-box .menu-catalog-item{
  opacity: 0;
  transition: all 0.4s;
}
.menu-box:hover .menu-catalog-item{
  opacity: 1;
}
.menu-catalog-item svg{
  min-width: 100px !important;  
  transition: all 0.7s;
}
.menu-catalog-item span{
  min-width: 130px;
  margin: 5px;
  transition: all 0.2s;
}
.menu-catalog-item:hover{
  cursor: pointer;
  color: #F28181;
}
.menu-catalog-item:hover svg{
  width: 70px;
  height: 70px;
}

@media screen and (max-width: 1447px) {
  header .flex-row > .flex-row:nth-child(2) {
    text-align: center;
  }
}

@media screen and (max-width: 1380px) {
  .forma-catalog{
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 1326px) {
  
}