body::-webkit-scrollbar {
  width: 15px;               /* ширина scrollbar */
}
body::-webkit-scrollbar-track {
  background: linear-gradient(#F2E8C9D4,#F2E8C9D4) top left/100% 100% no-repeat,
  url("img/mramor.jpg") bottom left/100% 100% no-repeat;       /* цвет дорожки */
}
body::-webkit-scrollbar-thumb {
  background-color: #099;    /* цвет плашки */
  border-radius: 5px;       /* закругления плашки */
  border: 1px solid #f2e8c9;  /* padding вокруг плашки */
}

 @font-face {
    font-family: font;
    src: url(font/font3.ttf);
   }
    @font-face {
    font-family: font1;
    src: url(font/font6.ttf);
   }
  body { font-family:font;
}
 .F6 { font-family:font1;
 left: 35%;
}
	section  { font-family:font1;
}
	 
			.rightpic {
  float: right;
  white-space: nowrap;
  margin: 0 0 1em 1em;
  }
  
	.centrpic {
    float: center; 
    top: 7,5;
   
	}
	.ddd{
	white-space: pre-wrap;
	}
			
			.notice-success {
background: radial-gradient(#FFFFFF,#FFFFFF);
}
   			.notice-success1 {
background: linear-gradient(#F2E8C9D4,#F2E8C9D4) top left/100% 100% no-repeat,
  url("img/mramor.jpg") bottom left/100% 100% no-repeat;

background-attachment: fixed;
} 
  
 .left {
    float: left; 
	white-space: pre-wrap;
    margin: 5 1em 1em 0; 
   }  
.right{
    float: right;
	white-space: pre-wrap;
    margin: 0 0 1em 1em; 
   }
.frog{
	display: block;
}
.frog + p{
	width: 200px;
	text-align: center;
} 
.frog{
	display: block;
	white-space: pre-wrap;
}
.frog + p{
	width: 200px;
	text-align: center;
}  
.h1{
  position: fixed;
  width: 15%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(#009999, #009999) top center/100% 100% no-repeat;
   z-index: 3;
   font-family:font1;

   overflow-y: auto;
    margin-left: auto;
    margin-right: auto;
	text-align: center;
}
.h1::-webkit-scrollbar {
  /* This is the magic bit for WebKit */
  display: none;
 }
@keyframes  ani2{
  0% {top: 0px; }
  100% {top: 100000000px;}
  }
 .in{
  animation-name: ani2;
  animation-duration: 5s;
  }
.h2{
  z-index: 1;
  position: absolute;
  width: 79%;
  height: 100%;
  top: 1%;
  bottom: 0;
  left: 16%;
  right: 5%;
  font-weight: 600;
   z-index: 1;
   font-family:font;

}

     .nicecolor1 {
	 
white-space: nowrap

   display:inline-block;
     }
.nicecolor {
background: #009999; 
border-radius: 5px;
  font-size: 1vi;
  width: 72%;
 border: 2px #f2e8c9 solid;
padding: 5;
    margin-left: auto;
    margin-right: auto;

}
    .nicecolor:hover {

 box-shadow:3px 3px 5px #222;

     }


.sign {
    float: right; /* Выравнивание по правому краю */
    border: 5px  ridge #099; /* Параметры рамки */
    padding: 0 0 7px 0; /* Поля внутри блока */
    margin: 10px 0 5px 5px; /* Отступы вокруг */
    background: #0000; /* Цвет фона */ 
	width: 30%;
	z-index: 4;
	
   }
   .sign figcaption {
    margin: 0 auto 5px; /* Отступы вокруг абзаца */
	color: #099;
	
	    font-weight: 600;

   }

.sign1 {
    float: left; /* Выравнивание по правому краю */
    border: 5px  ridge #099; /* Параметры рамки */
    padding: 0 0 7px 0; /* Поля внутри блока */
    margin: 10px 0 5px 5px; /* Отступы вокруг */
    background: #0000; /* Цвет фона */ 
width: 30%;
	
   }
   .sign1 figcaption {
    margin: 0 auto 5px; /* Отступы вокруг абзаца */
	color: #099;
	
	    font-weight: 600;
	
   }
   
   
   .Window {

  top: 2%;
  bottom:  2%;
  left: 16%;
  right: 2%;
 width: 83%;
  height: 96%;
position: fixed;
background: linear-gradient(#099e,#099e) top left/100% 100% no-repeat;
z-index: 99999;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
display: none;
pointer-events: none;
border-radius: 10px;

}
.Window:target {
display: block;
pointer-events: auto;

}
.Window > div {

 bottom: 20%;
position: relative;

padding: 2%;
	top: 2%;
  bottom:  2%;
border-radius: 5px;


}

.h4{
  z-index: 1;

  height: 93%;
   overflow: auto;

}
.img{

	width: 83%;
	float: center;
	border-radius: 10px;
}
.close {
left: 93%;
border: none;
	position: fixed;
	  text-decoration: none;
color: #f2e8c9ee;
font-family:font1;
}


.h4::-webkit-scrollbar {
  width: 20px;               /* ширина scrollbar */
}
.h4::-webkit-scrollbar-track {
  background: linear-gradient(#8b000000,#8b000000) top left/100% 100% no-repeat;
}
.h4::-webkit-scrollbar-thumb {
background-color: #099;    /* цвет плашки */
  border-radius: 5px; 
border: 3px  solid #f2e8c9;
}


.button {
  background-color: #f2e8c9;
   border: 3px #099 solid;
   color:  #099;
  padding: 0.625em;
  border-radius: 0.5em;
  cursor: pointer;
}

.button:hover {
  filter: brightness(0.9);
}

.button:active {
  transform: translateY(2px);
}

.person-selector {
  display: flex;
  justify-content: center;
  gap: 1em;
  margin: 3em auto 1em;
  max-width: 40em;
}

.person-selector-button {
  width: 100%;
  background-color: #15202b;
  color: #fff;
  font-size: 1.1em;
}

.active-person {
  background: #08529d;
  box-shadow: 0 0 0.5em 0.1em #c3c3c333;
}

.chat-container {
  background: #15202b;
  font-family: 'Roboto', sans-serif;
  border-radius: 0.5em;
  padding: 0.5em 1.25em;
  margin: auto;
  max-width: 37.5em;
  height: 37.5em;
  box-shadow: 0 0 1.25em 0.5em #c3c3c333;
}

.chat-header {
  margin-bottom: 1em;
  color: #fff;
}

.chat-header h2 {
  font-size: 1.25em;
  font-weight: bold;
}

.chat-messages {
  overflow-y: scroll;
}

.chat-messages::-webkit-scrollbar {
  display: none;
}
input {outline:none;}
.message {
  padding: 0.625em;
  border-radius: 1em;
  margin-bottom: 0.625em;
  display: flex;
  flex-direction: column;
  color: #fff;
}

.message-sender {
  font-weight: bold;
  margin-bottom: 0.31em;
 opacity: 0;
}

.message-text {
  font-size: 1em;
  margin-bottom: 0.31em;
  word-wrap: break-word;
}

.message-timestamp {
  font-size: 0.75em;
  text-align: right;
}
.message-id {
  font-size: 0.75em;
  text-align: left;
}

.opac {
opacity: 0;
}

.blue-bg {
  background-color: #099;
  border: 3px #f2e8c9 solid;
  color: #f2e8c9;
}

.gray-bg {
  background-color: #f2e8c9;
   border: 3px #099 solid;
   color:  #099;
}

.chat-input-form {
  display: flex;
  align-items: center;
  margin-top: 2em;
  gap: 0.625em;
}

.chat-input {
  padding: 0.625em;
  border: none;
  border-radius: 0.5em;
   background-color: #f2e8c9;
   border: 3px #099 solid;
  color: #099;
  font-size: 1em;
  flex-grow: 1;
  font-family:font;
}

.chat-input1 {
  padding: 0.625em;
  border: none;
  border-radius: 0.5em;
   background-color: #f2e8c9;
   border: 3px #099 solid;
  color: #099;
  font-size: 1em;
  flex-grow: 1;
  font-family:font1;
}
.send-button {
  background-color: #f2e8c9;
   border: 3px #099 solid;
   color:  #099;

  font-size: 1em;
  font-weight: bold;
}



.button1 {
  background-color: #f2e8c9;
   border: 3px #099 solid;
   color:  #099;
  padding: 0.625em;
  border-radius: 0.5em;
  cursor: pointer;
  font-family: font2;
}


.a{
color: #009999; 
text-decoration: none;
}

.a:visited{
color: #01796F;
}