body { 
  padding-right: 0 !important ;
}

/* Убираем выделение автозаполнения */
#login_username:-webkit-autofill,
#login_password:-webkit-autofill,
#register_username:-webkit-autofill,
#register_email:-webkit-autofill,
#register_password:-webkit-autofill,
#register_password_confirm:-webkit-autofill,
#login_username:-webkit-autofill:hover,
#login_password:-webkit-autofill:hover,
#register_username:-webkit-autofill:hover,
#register_email:-webkit-autofill:hover,
#register_password:-webkit-autofill:hover,
#register_password_confirm:-webkit-autofill:hover,
#login_username:-webkit-autofill:focus,
#login_password:-webkit-autofill:focus,
#register_username:-webkit-autofill:focus,
#register_email:-webkit-autofill:focus,
#register_password:-webkit-autofill:focus,
#register_password_confirm:-webkit-autofill:focus,
#login_username:-webkit-autofill:active,
#login_password:-webkit-autofill:active,
#register_username:-webkit-autofill:active,
#register_email:-webkit-autofill:active,
#register_password:-webkit-autofill:active,
#register_password_confirm:-webkit-autofill:active {
  -webkit-box-shadow: none !important;
  -webkit-text-fill-color: white !important;
  background: none !important;
  transition: background-color 5000s ease-in-out 0s !important;
}

input:-internal-autofill-selected {
  appearance: none !important;
  background-image: none !important;
  background-color: transparent !important;
  color: white !important;
}
body::-webkit-scrollbar {
  display: none;  /* Скрыть полосы прокрутки */
}
/* Кнопка дешборда и модалка с дешбордом */
#menu_container{

  display: flex;
  justify-content: flex-end;
}
#menu_right{
    position: fixed; 
    right: 10px; 
    z-index: 1;
}
#menu_left{
  position: fixed; 
  left: 10px; 
  z-index: 1;
}
#menu_container_right,
#menu_container_left{
  padding-top: 5px;
}
#menu_container_button,
#menu_container_button_2,
#menu_container_button_3,
#menu_container_button_4,
#menu_container_button_5{
  padding: 0px;
}
#inputs_of_dashboards{
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-bottom: 15px;
}
#inputs_of_dashboards .btn{
  max-width: 340px;
  min-width: 140px;
}
#ModalBody 
#day_input_start,
#ModalBody 
#day_input_end{
  margin: 0px;
}
#inputs_of_dashboards input{
  max-width: 340px;
  min-width: 90px;
}
#information_about_calendar h2 span{
 cursor: default;
}
#chart_content{
  width: 100%; 
  display: flex; 
  flex-direction: column; 
  align-items: center;
}
#chart_block_1{
  text-align: center;
  width: 100%;
}
.line_chart{
  width: 95%;
}
#chart_block_2{
  width: 100%; 
  display: flex; 
  justify-content: center; 
  flex-direction: row;
  padding-top: 20px;
}
.pie_chart{
  width: 50%;
  text-align: center;
}
/* Модальное окна календаря */
#cost_container_new_student{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
#cost_container_new_student_number{
  display: flex;
  flex-direction: column;
  width: 70%;
}
#cost_container_new_student_currency{
  display: flex;
  flex-direction: column;
  width: 30%;
}

#buttons_for_item_edited_caledar{
  display: flex;
  justify-content: flex-end;
}
#buttons_for_item_edited_caledar .btn{
  width: 100%;
  margin: 0 5px 0 5px;
}
#btn_add_from_all{
  margin-bottom: 5px;
}

#edit_time_div input{
  width: 100%;
}
.mb-3{
  justify-content: center;
}
#ModalBody .was-validated #dashboard{
  overflow: overlay;
}
.was-validated #edited_comment{
background-image: none;
}
#ModalBody_information div{
  display: flex;
  width: 100%;
}
#ModalBody #container_of_time_scheduled_lesson_of_the_student_modal_calendar{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
#ModalBody #container_of_time_scheduled_lesson_of_the_student_modal_calendar input{
  width: 48%;
}
#ModalBody #recurent_settings_for_lesson_of_the_student_modal_calendar{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
}
#ModalBody #recurent_of_the_student_modal_calendar,
#ModalBody #recurent_of_the_student_modal_calendar_2{
  width: 30px;
  height: 25px;

}
#ModalBody 
#recurent_settings_for_lesson_of_the_student_modal_calendar 
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
#ModalBody .form-switch {
  padding-left: 0;
}
#ModalBody .form-check-input:checked {
  border-radius: 50px; /* Округлые края */
  background-color: #0d6efd; /* Цвет фона, когда включено */
}

#ModalBody .form-check-input {
  border-radius: 50px; /* Округлые края для невыбранного состояния */
  width: 3rem;  /* Настройте ширину переключателя */
  height: 1.5rem; /* Настройте высоту переключателя */
}

#ModalBody .form-check-input:disabled {
  opacity: 0.6; /* Сделать выключенный переключатель немного прозрачным */
}


#list_of_lessons_in_modal{
  display: flex;
  flex-direction: column;
  
}
.list_of_lessons_in_modal{
  display: flex;
  align-items: stretch;
  flex-direction: column;
  
}
.list_of_lessons_in_modal .btn{
  margin-bottom: 5px;
  width: 50%;
}
#ModalBody_information #OpenCalendar_buttonsEdit button{
  width: 100%;
  margin-bottom: 5px;
}

#ModalBody span{
    margin-bottom: 5px;
}
#ModalBody label{
text-align: left;
}
#ModalBody input, 
#ModalBody textarea,
#ModalBody select
{
  margin-bottom: 5px;
}


#ModalBody .input-group {
    margin-bottom: 5px;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
}
.top_sign{
  width: 100%;
  text-align: center;
  position: fixed;
}
#clicked_day_lessons p{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
#clicked_day_lessons p span{
  padding-right: 10px;
}

/* Стили таблицы */

#calendar{
  padding-top: 100px;
  margin-bottom: 50px;
}
#calendar thead{
  overflow: hidden;
}
#calendar thead tr th{
  position: sticky;
  top: 0px;
  z-index: 1;
}
#calendar tbody{
  overflow: hidden;
}
#calendar tbody tr .day_of_month{
  position: sticky;
  left: -1px;
}

#calendar #spinner{
  padding-top: 30vh;
}
#calendar #password_check_container{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10000;
}
#calendar #password_check_container label{
  font-family: 'Sour Gummy';
}
#calendar #password_check_container input{
  margin-bottom: 8px;
}
#calendar h1{
  text-align: center;
}
#calendar #error_block_1,
#calendar #error_block_2{
  display: flex;
  flex-direction: column;
  align-items: center;

  position: absolute;
  left: 40%;
  top: 45%;
}
#calendar table {
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3);
  margin: auto;
  padding: 5vh;

}
#calendar .table-color{
  height: 3px;
  padding: 0px;
}

#calendar thead tr th:last-child,
.month_day_td_new,
.table-color:last-child{
display: none;
}
#show_buttons_add_students_this_month{
  cursor: default;
}
#show_buttons_add_students_this_month:focus{
  outline: none;
  box-shadow: none;
  cursor: default;
}
#show_buttons_add_students_this_month i{
  cursor: pointer;
}

#link_db{
margin-left: 15px
}
#backup_link{
  color: gray;
  text-align: center;
  text-decoration:none;
}
#backup_link:hover{
  text-decoration: underline;
}

table tbody, table td, table tfoot, table th, table thead, table tr {
  border-color: rgba(128, 128, 128, 0.405);
  border-style: solid;
  border-width: 0.1px;
  padding: 5px;
}
table td{
  height: 70px;
}
.space_cell{
    min-height: 2px;
    display: flex;
    background-color: black;
}
td.day_of_month{
  cursor: pointer;
}
td.day_of_month div{
    display: flex;
    justify-content: space-between;
}
td.day_of_month span{
    text-align: justify;
}

.month_day_td{
  cursor: pointer;
  text-align: center;
}
.month_day_td span{
  display: flex;
  flex-direction: column;
  height: 20px;
  font-size: 12px;
}
.month_day_td i::before{
  display: flex;
  flex-direction: column;
  height: 20px;
}


thead tr .student_top_th{
  padding: 5px 5px 30px 5px;
  min-width: 100px;
  width: 100px;
  max-width: 100px;
  cursor: pointer;
  text-align: center;
  vertical-align: middle;
  top: 0;  
}

thead tr .student_top_th_add_new{
  width: 60px;
  text-align: center;
  vertical-align: middle;
  top: 0px;  
}
thead tr .student_top_th_month{
  width: 90px;
  vertical-align: middle;
  text-align: center;
  top: 0px; 
}
thead tr .student_top_th_month span{
 cursor: default;
 font-family: 'Rouge Script';
 font-size: 24px;
}
thead tr .student_top_th h3{
  text-align: center;
  margin: auto;
  font-family: 'Oswald', sans-serif;
  transform: rotate(-50grad);
}
thead tr .student_top_th span{
  display: block;
  width: 70px;
  text-align: center;
  
}
thead tr .student_top_th #top_student_span{
  padding-bottom: 20px;
  margin: auto;
}
#calendar #i_hide_row_student{
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 3;
}

#dashboard{
  overflow: hidden;
}
#dashboard .table td, #dashboard .table th {
  min-width: 120px;
}
#today_day_of_week_anchor{
  text-decoration: none;
  color: #212529;
  font-family: 'Sour Gummy';
}
#today_day_of_week_anchor:hover{
  text-decoration: underline;
  color: gray;
  font-family: 'Sour Gummy';
}
.fa-gear:hover,
.fa-repeat:hover,
.fa-hryvnia-sign:hover,
.fa-chart-line:hover,
#information_about_calendar h2 span:hover{
  color: gray;
}
.fa-money-bill-1{
  color: green
} 
#return_to_top_div,
#return_to_bottom_div{
  display: flex;
  justify-content: center;
}
#return_to_top_div a,
#return_to_bottom_div a{
  width: 45px;
}
#return_to_top_div a:focus,
#return_to_bottom_div a:focus,
#information_about_calendar h2 button:focus{
  outline: none;
  box-shadow: none;
}
#bottom_button_to_top{
  width: 100%;
  position: fixed;
  bottom: 0px;
}
#div_buttons_calendar_week_chart{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  
}
#div_buttons_calendar_week_chart button{
  margin: 5px;
}
.toastui-calendar-week-view-day-names {
  height: 45px !important;
}

.toastui-calendar-timegrid {
  height: 20% !important;
  min-height: 99% !important;
}
.toastui-calendar-week-view-day-names{
  overflow: hidden !important;
}

.login-background {
    background-image: url('../img/login_screen.jpg');
    background-size: cover;
    background-position: center;
    height: 100vh;
    width: 100vw;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
}
/* Общие контейнеры для авторизации */
#password_check_container,
#auth_login_container,
#auth_register_container,
#auth_user_container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  max-width: 400px;
  margin: 20px auto;
  margin-top: 10vh;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10000;
}

/* Общий стиль для баблов */
.bubble {
  position: relative;
  padding: 15px 20px;
  border-radius: 25px;
  font-size: 16px;
  color: black;
  box-shadow: 0 0 0 3px black;
  display: inline-block;
  max-width: 100%;
}

/* Лейбл */
.bubble.left {
  background-color: #f0aac9;
  align-self: flex-start;
  transform: translateX(-20px);
  height: 50px;  /* Устанавливаем одинаковую высоту */
  display: flex;
  align-items: center;  /* Выравниваем текст по вертикали */
}

/* Инпут */
.bubble.right {
  background-color: #a7a9d9;
  align-self: flex-end;
  transform: translateX(20px);
  height: 50px;  /* Устанавливаем одинаковую высоту */
  display: flex;
  align-items: center;  /* Выравниваем текст по вертикали */
}

/* Верхний хвостик для левого бабла (лейбл) */
.bubble.left::after {
  content: "";
  position: absolute;
  left: 1px;  /* Прикрепляем хвостик к левому краю */
  bottom: -5px;  /* Перемещаем хвостик вниз, приближаем к овальному пузырьку */
  width: 0;
  height: 0;
  border-top: 15px solid #f0aac9;  /* Обводка сверху */
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  transform: rotate(-105deg); /* Разворачиваем хвостик на 55 градусов */
}

/* Нижний хвостик для левого бабла (черный, под верхним) */
.bubble.left::before {
  content: "";
  position: absolute;
  left: 0px;  /* Прикрепляем хвостик к левому краю */
  bottom: -12px;  /* Перемещаем хвостик ниже, чтобы он был под первым */
  width: 0;
  height: 0;
  border-top: 15px solid #000;  /* Черный хвостик */
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  transform: rotate(-105deg); /* Разворачиваем хвостик в другую сторону */
}

/* Верхний хвостик для правого бабла (инпут) */
.bubble.right::after {
  content: "";
  position: absolute;
  right: 1px;  /* Прикрепляем хвостик к правому краю */
  bottom: -3px;  /* Перемещаем хвостик вниз, приближаем к овальному пузырьку */
  width: 0;
  height: 0;
  border-top: 15px solid #a7a9d9;  /* Обводка сверху */
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  transform: rotate(105deg); /* Разворачиваем хвостик на 55 градусов */
}

/* Нижний хвостик для правого бабла (черный, под верхним) */
.bubble.right::before {
  content: "";
  position: absolute;
  right: 0px;  /* Прикрепляем хвостик к правому краю */
  bottom: -10px;  /* Перемещаем хвостик ниже, чтобы он был под первым */
  width: 0;
  height: 0;
  border-top: 15px solid #000;  /* Черный хвостик */
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  transform: rotate(105deg); /* Разворачиваем хвостик в другую сторону */
}

/* Поля ввода внутри бабла */
#password_input,
#login_username,
#login_password,
#register_username,
#register_email,
#register_fullname,
#register_password,
#register_password_confirm {
  background: none;
  border: none;
  outline: none;
  color: white;
  font-size: 16px;
  width: 100%;
}

#login_username::placeholder,
#login_password::placeholder,
#register_username::placeholder,
#register_email::placeholder,
#register_fullname::placeholder,
#register_password::placeholder,
#register_password_confirm::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

/* Кнопки авторизации */
#password_button,
#login_button,
#register_button {
  width: 50%;
  align-self: center;
  margin: 5px;
}

/* Дополнительные кнопки */
#auth_login_container button:nth-of-type(2),
#auth_register_container button:nth-of-type(2) {
  width: 60%;
  align-self: center;
  margin: 5px;
}