html{
  width: 100%;

}

body{
    text-align: center;
    width: 100%;
    background-image: url('../pictures/fon-1-1_1.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0;
    font-family: 'Jost';
}

.menu {
	display: table;
  margin-left: auto;
  margin-right: auto;
}

.menu_button {
  display: inline-block;
  padding: 15px;
  background: #bd162b;
  transform: skew(45deg);
  border-radius: 5px;
  border-color: #8594ae;
  border-width: 5px;
  border-style: outset;
  width: 300px;
  margin: 5px;
}
.menu_button_atcive {
  display: inline-block;
  padding: 15px;
  background: #dddae0;;
  transform: skew(45deg);
  border-radius: 5px;
  border-color: #8594ae;
  border-width: 5px;
  border-style: outset;
  width: 300px;
  margin: 5px;
  color: #000;
}

.menu_button:hover{
    background:#8594ae;
}

.menu_button:active{
    border-style: groove;
}

.menu_button_text {
  display: inline-block;
  transform: skew(-45deg);
  color: #fff;
}

.menu_button_text_active {
  display: inline-block;
  transform: skew(-45deg);
  /*color: #000000;*/
  
}
.menu_button_text_active:hover {
  color: #fff;
}


li {
	display: table-cell;
	/*position: relative;*/
	/*background: #bcbdbe;*/
  /*z-index: 1;*/
}

.msll_button{
  display: inline-block;
  padding: 15px;
  background: #bd162b;
  border-radius: 5px;
  border-color: #8594ae;
  border-width: 5px;
  border-style: outset;
  width: 300px;
  margin: 5px; 
  color: #fff;
  font-weight: bold;
}

.msll_button:hover{
    background:#8594ae;
}

.msll_button:active{
    border-style: groove;
}

.msll_button_in_table{

  position: absolute;
  top: 0; 
  bottom: 0;
  left: 0;
  width: 100%;
  background: #e0e4e9;
  border-color: #e0e4e9;
  border-style: solid;
  border-width: 0;

 /* 
  height: 100%;
  width: 100%;
  background: #e0e4e9; /*-------------------------------------* /
  border-color: #e0e4e9;
  
  border-width: 0;
  border-style: solid;
  
  display: block;
  /*box-sizing: border-box;* /
  
  margin: 0;
  padding: 0;
  */
}

.msll_button_in_table:hover{
  background: #d2d6db;
}

.msll_button_in_table:active{
  border-style: groove;
  border-width: 5px;
}

.td_no_padding{
  padding: 0px;
  margin: 0px; 
}

.msll_small_button{
  display: inline-block;
  padding: 0;
  background: #bd162b;
  border-radius: 5px;
  border-color: #8594ae;
  border-width: 5px;
  border-style: outset;
  width: 100px;
  margin: 0; 
  color: #fff;
  font-weight: bold;
}
.msll_small_button:hover{
    background:#8594ae;
}

.msll_small_button:active{
    border-style: groove;
}

.msll_middle_button{
  display: inline-block;
  padding: 0;
  background: #bd162b;
  border-radius: 5px;
  border-color: #8594ae;
  border-width: 5px;
  border-style: outset;
  width: 200px;
  height: 50px;
  margin: 5px; 
  color: #fff;
  font-weight: bold;
}
.msll_middle_button:hover{
    background:#8594ae;
}

.msll_middle_button:active{
    border-style: groove;
}

.msll_middle_button:disabled{
    background:#8594ae;
    border-style: groove;
}


table.msll_table  {
  position: static;
  font-size: 16px;
  border-collapse: collapse;
  border-style: hidden;
  text-align: center;
  width: 96%;
  margin-left: 2%;
  margin-right: 2%;
}

table.msll_table th, table.msll_table td {
  border-style: solid;
  border-width: 0 5px 5px 0;
  border-color: white;
  padding: 5px;
}

table.msll_table2 th, table.msll_table2 td {
  border-width: 1 1 1 1;
  padding: 0;
  font-size: 16px;
  text-align: center;
}

.msll_td_nopadding {
  padding: 0;
  background: #bd162b;
  }


table.msll_table th, table.msll_table th a{
  background: #8594ae; /*#dddae0; /*#8594ae*/  
  color: #fff;
  font-weight: bold;
  
}

table.msll_table td {
  background: #e0e4e9;
}

/*
table.msll_table th:first-child, table.msll_table td:first-child {
  padding: 10px;
}
  */

.my_header{
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    background-color: #dddae0;
    position: sticky;
    top: 0px;
    z-index: 1;
    box-shadow: rgba(0, 0, 0, 0.08) 0px 1.2px 18px, rgba(0, 0, 0, 0.12) 0px 6.4px 28px;
    height: 50px;
    min-height: 50px;
    padding: 0px 0px;
    text-align: right;
}
.my_header2{
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    /*background-color: #dddae0;*/
    position: fixed;
    top: 0px;
    z-index: 1;
    /*box-shadow: rgba(0, 0, 0, 0.08) 0px 1.2px 18px, rgba(0, 0, 0, 0.12) 0px 6.4px 28px;*/
    height: 50px;
    min-height: 50px;
    padding: 0px 0px;
    text-align: right;
    right: 2%;
}

.my_unheader2{
  width: 100%;
  border-style: double;
  right: 0;
  display: block;
  justify-content: center;
  position: absolute;
  padding: 10px 10px;
}

.my_header_polygon{
    display: flex;
    align-items: center;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 60px 100%);
    border: 0px none;
    width: 40%;
    height: 100%;
    background: #bd162b;
    position: absolute;
    right: 0;
    /*text-align: right;*/
    color: #fff;
}





/*начало*/
.menu-bar {
	width: 100%;
	display: table-cell;
}
.menu-bar ul {
	display: table-cell;

}
.menu-bar li {
	display: table-cell;
	position: relative;
	/*background: #bcbdbe;*/
  z-index: 10;
}
  
.menu-bar li a {
	display: block;
	padding: 15px 15px;
	color: #fff ;
	text-align: center;
  z-index: 1;   
}

.menu-bar ul li:hover, .menu-bar a:hover {
	/*background: #8594ae; /*#666*/
  color: #fff; /*тут надо цвет текста поменять*/
}

.menu-bar li:hover ul  {
	display: block;
	position: absolute;
	top: 100%;
	left: 0px;
	/*background: #666;*/
	margin: 0;
	padding: 10px 0;
	width: 160px;
	/*z-index: 9999;*/
}
.menu-bar ul ul  {
	display: none;
  text-align: left;
}
.menu-bar ul ul li  {
	display: block;
	/*background: #666;*/
	padding: 5px 20px;
}
.menu-bar ul ul li a  {
	display: block;
	padding: 0;
	/*background: #666;*/
	text-align: left;
}
/*конец*/


.menu-bar li {
  list-style: none;
  color: rgb(255, 255, 255);
  font-family: 'Jost';
  font-weight: bold;
  padding: 12px 16px;
  margin: 0 8px;
  position: relative;
  cursor: pointer;
  white-space: nowrap;
  }
.menu-bar li::before {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
  transition: 0.2s;
  border-radius: 0px;
}
.menu-bar li:hover {
  color: black;
}
.menu-bar li:hover::before {
  /*background: linear-gradient(to bottom, #e8edec, #d2d1d3);*/
  box-shadow: 0px 3px 20px 0px black;
  transform: scale(1);
  }

/*-------------------------*/

div.logo{
  height: 100%;
  width: 190px;
  background-image: url('../pictures/logo.png');
  background-size: cover;
}


.msll_footer {
    position: fixed;
    z-index: 1;
    height: 48px;
    min-height: 48px;
    padding: 0px 0px;
    width: 100%;
    bottom: 0;
    
}

.msll_footer_polygon_red {
    display: flex;
    clip-path: polygon(0 0, 96% 0, 100% 100%, 0px 100%);
    position: absolute;
    border: 0px none;
    width: 15%;
    height: 33%;
    background: #bd162b;
    left: 0;  
    bottom: 0;
    box-shadow: rgba(0, 0, 0, 0.08) 0px 1.2px 18px, rgba(0, 0, 0, 0.12) 0px 6.4px 28px;
}

.msll_footer_polygon_light_gray {
    display: flex;
    clip-path: polygon(0 0, 96% 0, 100% 100%, 4% 100%);
    position: absolute;
    border: 0px none;
    width: 60%;
    height: 66%;
    background: #dddae0;
    left: 10%;
    bottom: 0;
}

.msll_footer_polygon_dark_gray {
    display: flex;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 4% 100%);
    position: absolute;
    border: 0px none;
    width: 50%;
    height: 100%;
    background: #8594ae;
    right: 0;
    top: 0;
}

/* Поля textarea на форме editors */
textarea.ta_editor{
  min-height: max-content;
  min-width: 100%;
  max-width: max-content;
  width: 100%; /* На всю ширину */
  height: 100%; /* На всю высоту */
}

label {
    width: 100%;
    display: inline-block;
    text-align: center;
    font-size: 1.5rem;
    font-family: 'Jost';
}


input[type='text'].login_form, input[type='email'].login_form, select.login_form {
    width: 500px;
    border: 2px solid #ccc;
    font-size: 1.5rem;
    font-weight: 100;
    padding: 10px;
}

form.change_users {
    margin: 25px auto;
    padding: 20px;
    border: 5px solid #8594ae;
    width: 800px;
    background: #dddae0;
    border-style: outsetf;
    border-width:20px;
    display: block;
}

div.no_display {
    display: none;
}

div.display {
    display: block;
}

form.change_users div.form-element {
    margin: 20px 0;
}

p.error {
    background: orangered;
} 

.error {
    color: orangered;
    font-weight: bold;
    animation: pulse 1.5s infinite;
} 
@keyframes pulse {
from { opacity: 1; /* Непрозрачный текст */ }
to { opacity: 0; /* Прозрачный текст */ }
}

/* Меню боковой панели */
.sidenav {
  height: 100%; /* Полная высота: удалите это, если вы хотите "авто" высота */
  width: 400px; /* Установите ширину боковой панели */
  position: fixed; /* Фиксированная боковая панель (оставайтесь на месте при прокрутке) */
  z-index: 0; /* Оставайтесь с верху */
  top: 0; /* Оставайтесь на вершине */
  left: 0;
  /*background-color: #dddae0; /*#dddae0* #8594ae*/
  background-image: url("../pictures/1975.png");
  background-repeat: no-repeat;
  background-size: cover;
  overflow-x: hidden; /* Отключить горизонтальную прокрутку */
  padding-top: 20px;
  box-shadow: rgba(0, 0, 0, 0.08) 0px 1.2px 18px, rgba(0, 0, 0, 0.12) 0px 6.4px 28px;
  margin-top: 48px;
}
/* Тело сайта, при наличии бокового меню */
.msll_body{
  margin-left: 400px;
}

.msll_filter{
width: 95%;
padding: 10px;

}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  border-style: dashed;
}

.modal2 {
  all: unset;
  /*display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  border-style: dashed;
}


/* Modal Content */
.modal-content-40 {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 40%;
  /*height: 40%;*/
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s;
  
  
  border-style: dashed;
}

/* Modal Content */
.modal-content-50 {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 50%;
  /*height: 70%;*/
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s;
  margin-bottom: 200px;
}

.modal-content-60 {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 60%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s;
  margin-top: 5%;
  margin-bottom: 200px;
}


.modal-content-80 {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 80%;
  /*height: 40%;*/
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s;
  margin-top: 5%;
  margin-bottom: 200px;
}



.modal-body {
  padding: 2px 16px;
  background-image: url("../pictures/1975.png");
  background-repeat: no-repeat;
  background-size: cover;
}


/* Add Animation */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

/* The Close Button */
.close {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modal-header, .modal-footer {
  padding: 2px 16px;
  background-color: #8594ae;
  color: white;
  height: 48px;
}



.container_inline {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    border: 0;
    padding: 0;
    margin: 0;
}

div.width95{
  width: 95%;
  margin-left: 2%;

  /*border: #000;*/
  /*border-style: dotted;*/
}

div.container_inline2 {
    margin: 20px 0;

    display: flex;
    flex-direction: row;
    justify-content: left;
    /*float: left;*/
    /*width: 100%;*/
    

    /*border: #000;*/
    /*border-style: dotted;*/
}

input.checkbox-height25{
  width: 25px;
  margin-right: 15px;
}
label.label-align-left {
    width: 100%;
    display: inline-block;
    text-align: left;
    font-size: 1.5rem;
    font-family: 'Jost';
}

.form_login {
    margin: 150px auto;
    padding: 20px;
    width: 600px;
    border-color: #8594ae;
    border-style: outset;
    border-width: 10px;
    background-image: url("../pictures/1975.png");
    background-repeat: no-repeat;
    background-size: cover;
}
.msll_center {
  text-align: center;
  vertical-align: middle;
  height: 100%;
  padding-top: 7;
  padding-bottom: 7;
}

.spinner {
  display: none; /* Hidden by default */
  border: 1px solid #000;
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 25%; /* Location of the box */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

p.p-text-aligan-justify{
  text-align: justify;
}