/*Стиль начальной загрузки*/
html {
  height: 100%;
}
body {
  background-image: radial-gradient(circle farthest-corner at center, #3C4B57 0%, #1C262B 100%);
}
.loader {
  position: absolute;
  top: calc(50% - 75px);
  left: calc(50% - 75px);
  width: 150px;
  height: 150px;
  border-radius: 50%;
  perspective: 800px;
  z-index:5;
}
.inner {
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border-radius: 50%;  
}
.inner.one {
  left: 0%;
  top: 0%;
  animation: rotate-one 1s linear infinite;
  border-bottom: 3px solid #EFEFFA;
}
.inner.two {
  right: 0%;
  top: 0%;
  animation: rotate-two 1s linear infinite;
  border-right: 3px solid #EFEFFA;
}
.inner.three {
  right: 0%;
  bottom: 0%;
  animation: rotate-three 1s linear infinite;
  border-top: 3px solid #EFEFFA;
}
@keyframes rotate-one {
  0% {
    transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
  }
}
@keyframes rotate-two {
  0% {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
  }
}
@keyframes rotate-three {
  0% {
    transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
  }
}
.textload {
  position: absolute;
  top: calc(50% - 10px);
  left: calc(50% - 40px);
  font-size: 18px;
  color: #EFEFFA;
}


/*Стиль сообщений в Тех.Под.*/
.reporter{ 
   background: rgba(255, 248, 220, 1);
   width:80%;
   border-radius:6px;
   border:3px solid rgba(72, 61, 139, 0.6);
   padding:5px;
   margin-left: auto;
   margin-right:5px;
   }
.reporter2{ 
   background: rgba(255, 248, 220, 1);
   width:80%;
   border-radius:6px;
   border:3px solid rgba(244, 164, 96, 0.6);
   padding:5px;
   margin-left: 5px;
   }
   
/*Окно подтверждения*/
.zatemnenie{
background: rgba(102, 102, 102, 0.5);
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
justify-content: center;
align-items: center;
display: none;
z-index:1000;
}
.okno{
height:auto;
width:80%;
text-align: center;
padding: 20px;
border: 3px solid rgba(153, 70, 51, 0.6);
border-radius: 10px;
color: #0000cc;
position: absolute;
background: rgba(255, 248, 220, 1);
}

/*Окно управления серфинг*/
.oknoSerf{
height:157px;
text-align: center;
padding: 5px;
border: 3px solid rgba(153, 70, 51, 0.6);
border-radius: 10px;
color: #0000cc;
position: absolute;
background: rgba(255, 248, 220, 1);
}

/*Окно всплывающих сообщений*/
.MessagePosition{
position:fixed;   
top:0.5%;
left: 25%;
color: #0000cc;
display: table;
width:50%;
z-index:2000;
}
.Message{
font-size: 16px;
font-weight:500;
font-style: oblique;
text-align: center;
padding: 5px;
border: 3px solid rgba(153, 70, 51, 0.6);
border-radius: 10px;
position: relative;
background: rgba(255, 248, 220, 0.85);
padding-top: 10px;
margin-bottom: 5px;
hyphens:auto;
}

/* Убираем отступы */
form {
margin: 0; 
}
/**/
hr{
border: none; 
color:rgba(153, 70, 51, 0.6);
background-color: rgba(153, 70, 51, 0.6);
height: 2px;
}
/*Крестик закрытия окна*/
.toast__close {
content: "";
position: absolute;
top: 0.36rem;
right: 0.36rem;
width: 0.4em;
height: 0.4em;
background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/0.875em auto no-repeat;
border: 0;
opacity: 0.5;
cursor: pointer;
transition: opacity 0.1s ease-in-out;
}
/*Убрать стрелочки Input*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
input[type='number'] {
    -moz-appearance: textfield;
}
/*Поле ввода*/
.InputText{
border:2px solid rgba(153, 70, 51, 0.6);
border-radius:10px;
width: 45vw;
text-align:center;
font-size: 14px;
font-style: oblique;
font-weight:500;
color: #002ac4;
background:#fffcc7;
}
.TiketText{
border:2px solid rgba(153, 70, 51, 0.6);
border-radius:10px;
width: 90vw;
text-align:center;
font-size: 14px;
font-style: oblique;
font-weight:600;
color: #002ac4;
background:#fffcc7;
}
/*Кнопка*/
.Button{
margin: auto;
display: inline;
font-weight: 500;
font-style: italic;
font-size:15px;
display: flex;
justify-content: center;
min-width: 70px;
height: 25px;
vertical-align: middle;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px 1px #777;
color: #fff;
outline: none;
border: 2px solid rgba(153, 70, 51, 0.6);
border-radius: 10px;
box-shadow: 7px 6px 28px 1px rgba(0, 0, 0, 0.24);
background: #2b87de;
}
/*Анимация кнопки нопка*/
button{
position: relative;
}
.sending{
cursor: pointer;
pointer-events: none;
}
.sending:before {
content: '';
position: absolute;
top: 50%;
margin-top: -12px;
width: 20px;
height: 20px;
border: 2px solid;
border-left-color: transparent;
border-right-color: transparent;
border-radius: 50%;
opacity: 0;
transition: opacity 0.5s;
animation: 1s linear infinite rotate;
transition-delay: 0.5s;
transition-duration: 1s;
opacity: 1;
}@keyframes rotate {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}

/*Внутренняя рамка левого меню*/        
.stels-menu{
background: rgba(255, 248, 220, 0.5);
border-radius:3px;
border:2px solid rgba(153, 70, 51, 0.6);
padding:2px;
margin: 5px 5px 0px 5px;
text-align: justify;
}

/*Крупный текст*/
.BigText{
font-size: 24px;
font-weight:600;
font-style: italic;
color: #f77827;
} 

/*Основной текст*/
.Text{
font-size: 16px;
font-weight:500;
font-style: oblique;
color: #002ac4;
hyphens:auto;
}
/*Доп. текст*/
.Text_2{
font-size: 16px;
font-weight:500;
font-style: oblique;
color: #2b87de;
hyphens:auto;
}

/*Рамка с содержимым сайта*/
.stels{
width:calc(100vw - 18px);
position:absolute;
overflow-y: auto;
/*max-height: calc(var(--vh, 1vh)*100 - 28px - 99.9vw/468*60);*/
height: calc(var(--vh, 1vh)*100 - 42px);
/*top: calc(22px + 99.9vw/468*60);*/
top: 32px;
left:5px;
background: rgba(255, 248, 220, 0.3);
border-radius:3px;
border:2px solid rgba(153, 70, 51, 0.6);
padding:2px;
text-align: justify;
z-index: 10;
}
.stels-post{
background: rgba(255, 248, 220, 0.3);
border-radius:3px;
border:2px solid rgba(153, 70, 51, 0.6);
padding:2px;
text-align: justify;
}

/*Размер и фон страницы*/
.body{
background: rgba(240, 240, 240, 1);
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}

/*Банер вверху страницы*/
.logotip{
position: fixed;
top: 0px;
width:99.9%;
/*height:calc(99.9vw/468*60);*/ 
height: 0px;
float:left; 
margin: 0; 
text-align:center;
}
.logotip_img{
width: 100%;
height: 100%;
object-fit: cover;
}

/*Верхнее меню*/
.ul_menu {
position: fixed;
/*top:calc(99.9vw/468*60);*/
top: 1px;
list-style: none;
margin: 0;
padding-left: 0;
height: 150px;
z-index: 2;
}
.a_menu {
text-decoration: none;
text-align:center;
background:#2b87de;
color:#fff;
padding:5px 0px;
font-family: arial;
font-size:19px;
font-weight:600;
width:calc((100vw - 45px)/4);
line-height:20px;
display: block; 
border-right: 1px solid blue;
}
.a_menu_knopca {
text-decoration: none;
text-align:center;
background:#2b87de; 
color:#fff;
padding:5px 0px;
font-family: arial;
width:40px;
line-height:20px;
display: block; 
border-right: 1px solid blue;
}
.li_menu {
float:left; 
position:relative; 
}

/*Бургер кнопка*/
.burger{
position: relative;
right: -8px;
top: 0px;
width: 25px;
height: 0px;
cursor: pointer;
}
.burger span, .burger span:before, .burger span:after{
  width: 100%;
  position: absolute;
  height: 2px;
  background: #fff;
  display: block;
  border-radius: 5px;
}
.burger span:before{
  content: "";
  top: -6px;
}
.burger span{
  top: -12px;
}
.burger span:after{
  content: "";
  bottom: -6px;
}

/*Левое меню*/
.prog{
    position: absolute;
    left:-80%;   
	}
.left_left-right {
    /*top: calc(22px + 99.9vw/468*60);*/
    top: 32px;
    animation: left_go-left-right 0.5s 1 ;
    animation-fill-mode: forwards;
    position: absolute;
border-radius:3px;
border:2px solid rgba(153, 70, 51, 0.6);
    padding: 0px 0px 5px 0px;
    width:50%;
	text-align:center;
	overflow-y: auto;
    min-height: 1%;
    background: #ffffff;
    /*max-height: calc(var(--vh, 1vh)*100 - 36px - 99.9vw/468*60);*/
    max-height: calc(var(--vh, 1vh)*100 - 43px);
	z-index: 99999 !important;
	position: absolute;
    }
@keyframes left_go-left-right {
    from {left:-80%;}
    to {left: 5px;}
    }
.left_right-left {
    /*top: calc(22px + 99.9vw/468*60);*/
    top: 32px; 
    animation: left_go-right-left 0.5s 1;
    animation-fill-mode: forwards;
    position: absolute;
border-radius:3px;
border:2px solid rgba(153, 70, 51, 0.6);
width:50%;
	text-align:center;
	overflow-y: auto;
    min-height: 1%;
    background: #ffffff;
    /*max-height: calc(var(--vh, 1vh)*100 - 36px - 99.9vw/468*60);*/
    max-height: calc(var(--vh, 1vh)*100 - 43px);
    z-index: 99999 !important;
	position: absolute;
    }
@keyframes left_go-right-left {   /* назовём анимацию: "go-left-right" */
    from {left: 5px;}
    to {left: -80%;}
}