* { margin: 0px; padding: 0px;    font-family: Verdana, Tahoma; }
body {
	font-size: 16px;
	margin: auto;
}
header {
//	font-family:Trebuchet MS;
//	background:#c2ffff;
	background-image: url(../Screen/fon_schapka.jpg);
	background-size: cover;
	min-height: 100px;
}
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

h1 {font-size: 1.5em;
	color: #008000;
	text-align:  center;
	margin-top: 10px;
    margin-bottom: 10px;}
h2 {font-size: 1.4em;
	text-align:  center;
    margin-top: 10px;
    margin-bottom: 10px;}h4 {font-size: 22px;
	margin-left: 30px;
	margin-top: 10px;
    margin-bottom: 10px;}
h3 {font-size: 1.3em;
	text-align:  center;
    margin-top: 10px;
    margin-bottom: 10px;}
pre {font-size: 1em; padding: 0px 0px 0px 10px;
}
p {	text-indent:5%; /*отступ первой строки*/
	font-size: 1em; padding: 0px 0px 0px 10px;
}	

li{list-style-position: inside;/* рисовать точки перед текстом*/
	font-size: 1em; padding: 0px 0px 0px 10px;}
iframe {margin-left: 10px;}

.vsj-forma {
	text-align: center;
	border-style:groove;
	width: 199px;
	margin: 0 auto;
	background: #D3DAD7;
	border-radius: 0.6em;
}
#pokaz_vxoda {
	position: fixed;
	top: 10px;
	left: 50%;
	transform: translate(-50%, -50%);
	height:0px;
	width:100vw;
	z-index:10;
	background:lightgrey;
	display:none;
}
#pokaz_registr {
	position: fixed;
	top: 10px;
	left: 50%;
	transform: translate(-50%, -50%);
	height:0px;
	width:100vw;
	z-index:10;
	background:lightgrey;
	display:none;
}
.ssilki {
	font-size: 0.6em;
    text-decoration: none; /* Убираем подчёркивание */
}
.ssilki a:hover {
	background:#ADFF2F;
    text-decoration: underline; /* Добавляем подчёркивание */
    text-decoration-color: red /* Цвет подчёркивания */
}



.elementi-form {
	overflow: hidden;
}
.elementi-form input {
	border-radius: 0.5em;
	font-size: 1em;
	float: right;
	height: 0.9em;
	line-height: 19px;
	padding: 5px 5px;
	width: 187px;
	border: 1px solid #ABADB3;
}

.elementi-form button {
	cursor: pointer;
	border-radius: 0.5em;
	padding:3px;
	line-height: 10px;
	background: #00FF00;
	color:#000000;
	margin: 0.5em 1em;
}

.elementi-form button:hover {
	background:#ADFF2F;
}

nav ul {
    list-style: none;  display: flex;
	justify-content: center;
	flex-wrap: wrap;
    background-color: #000000;
    padding-left: 4px;
    border-radius: 0.5em;
	opacity: 0.5;
}
nav ul li {
    padding: 3px 3px 3px 3px;
    border-right: 1px solid #ccc;
	border-left: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	width:7em;
	text-align: center;
}
nav ul li a {
    color: #f9ff00; text-decoration: none;
    font-size: 0.8em;
}
nav ul li a:hover {
    color: #fff;
	font-weight: bold;
}

main {
    display:flex;
}


aside {
    /* Задаем для боковой колонки ширину по умолчанию и предотвращаем ее сжатие */
    flex-shrink:0;
    width:200px;
	margin:0 auto;
	background: #d6ffa1;
}
#BazaPodlogka  { fill: #3EFD30;
	            fill-opacity:0.6; /* прозрачность*/
				}
#p_prldr {
	position: fixed;
	left: 0;
	top: 0;
	right:0;
	bottom:0;
	background: #3DFA69;
	z-index: 30;
	}
.contpre small{font-size:25px;}
 
.contpre{
	width: 250px;
	height: 100px;
	position: absolute;
	left: 50%;top: 48%;
	margin-left:-125px;
	margin-top:-75px;
	color:#fff;
	font-size:40px;
	letter-spacing:-2px;
	text-align:center;
	line-height:35px;
}
@media all and (max-width: 5000px) {
	img {
		max-width: 1200px;
	}
}
@media all and (max-width: 2000px) {
	img {
		max-width: 80%;
	}
}
@media all and (max-width: 1200px) {
	img {
		max-width: 90%;
	}
}
@media all and (max-width: 700px) {
    aside {
        display:none;    /* Заставляет боковую колонку спрятать */
    }
	img {
		max-width: 85%;
	}
}
@media all and (max-width: 600px) {
	img {
		max-width: 90%;
	}
}
@media all and (max-width: 450px) {
	img {
		max-width: 95%;
	}
}
@media all and (max-width: 300px) {
	img {
		max-width: 100%;
	}
}

footer {
    text-align: center; font-size: 0.8em;
    color: #888; margin-top: 20px;
}




.ElemetNaXolst {
				animation: animationNaxolste 4s ease infinite;
				fill-opacity:0.4; // прозрачность
				stroke-width: 1;
				}
@keyframes animationNaxolste {   
  0% {     
    fill: Gold;   
  }   
  30% {     
    fill: GreenYellow;   
  } 
   60% {     
    fill: Red;   
  } 
  100% {
    fill: Gold;
   }
}
.bazaelement {	
				animation: animationBaza 2s ease infinite;
				stroke : #304131;
				stroke-width: 1;
				fill-opacity:0.7; // прозрачность
}
@keyframes animationBaza {   
  0% {     
    fill: LightSkyBlue;   
  }   
  50% {     
    fill: DeepSkyBlue;   
  } 
   100% {     
    fill: LightSkyBlue;   
  } 
}
.nedoElemetNaXolst {stroke :rgb(20,0,200);
				fill: transparent;
				stroke-width: 2;
				fill-opacity:0; /* прозрачность*/
				}
.TochkaSvjzi {fill: rgb(0,0,255);	
}
#SVG111 { touch-action: none; /*отменяю касания браузера*/
	color:rgb(100,0,20);
	background-color:rgb(234,233,200);
}
.styl_plus_t
	{ /*для Кнопок*/
    background: PowderBlue; /* синий цвет фона */ 
    color: SteelBlue; /* Чёрные буквы */ 
    font-size: 1rem; /* Размер шрифта в пунктах */
	border-style: solid;
	border: 1px;
	border-radius: 8px;
	padding:3px;
   }
.styl_plus_t:hover { background:Turquoise;color:Blue;transition: all 0.4s ease;}
.inp_n_tochka {/*Для INPUT точек связей и длины*/
	width: 50px;
	text-align: center;
}
.selec_str_sopr{
	   padding: 3px;
}
.inp_sopr_dlina{
	width: 100px;
	text-align: center;
}
.knop_str_sopr_dobav{
    padding: 3px;
    margin-inline: 20px;
}
.knop_str_sopr_del{
    padding: 3px;
    margin-inline: 20px;
}
.knopka_save { /*для Кнопок*/
    background: Lime; /* зелён цвет фона */ 
    color: Blue; /* Белые буквы */ 
    font-size: 1.2rem; /* Размер шрифта в пунктах */
 	margin-left: 4px;
	border-style: solid;
	border: 1px;
	border-radius: 7px;
	padding:3px;
   }
.knopka_save:hover { background:LimeGreen;color:LemonChiffon;transition: all 0.4s ease;}
.knopka_otm { /*для Кнопок*/
    background: Orange; /* жёлт цвет фона */ 
    color: Blue; /* Белые буквы */ 
    font-size: 1.2rem; /* Размер шрифта в пунктах */
 	margin-left: 4px;
	margin-right: 4px;
	border-style: solid;
	border: 1px;
	border-radius: 6px;
	padding:3px;
  }
.knopka_otm:hover { background:Yellow;color:DodgerBlue;transition: all 0.4s ease;}
.knopka_del { /*для Кнопок*/
    background: LightCoral; /* красн цвет фона */ 
    color: white; /* Белые буквы */ 
    font-size: 1.2rem; /* Размер шрифта в пунктах */
 	margin-left: 4px;
	border-style: solid;
	border: 1px;
	border-radius: 6px;
	padding:3px;
  }
.knopka_del:hover { background:Red;color:#000000;transition: all 0.4s ease;}
.knopka_rasch { /*для Кнопок*/
    background: Chartreuse; /* красн цвет фона */ 
    color: Blue; /* Белые буквы */ 
    font-size: 1.2rem; /* Размер шрифта в пунктах */
	border-style: solid;
	border: 1px;
	border-radius: 6px;
	padding:3px;
   }
.knopka_rasch:hover { background:#005c9e;color:#ffffff;transition: all 0.4s ease;}
.knopka_golubaj { /*для Кнопок*/
    background: Aqua; /* Голубой цвет фона */ 
    color: Black; /* Чёрные буквы */ 
    font-size: 1.2rem; /* Размер шрифта в пунктах */
	border-style: solid;
	border: 1px;
	border-radius: 6px;
	padding:3px;
   }
.knopka_golubaj:hover { background:#005c9e;color:#ffffff;transition: all 0.4s ease;}

.formula {	
    display: block;
    margin-left: auto;
    margin-right: auto;
	margin-top: 14px;
	margin-bottom: 14px;
}
.form_otziv {
	margin: 5px;
	border: 3px solid DimGray;
	border-radius:10px;
	padding: 10px;
}
.form_otziv label {
	color: rgb(34,32,155);
	width:10em;
}
dt {
	margin-left:5px;
}
dd {
	font-style: italic;
	margin:4px ;
	margin-left:40px;
	border: 1px solid YellowGreen;
	border-radius:5px;
}
dt span {
	font-size:12px;
	margin: 5px;
}
#pokaz_kn_registr {
	background:#ff7b0d; width:90%; font-size:1.2em; border-radius: 10px; margin:5px; cursor: pointer;
}
#pokaz_kn_registr:hover { background:#ffe000;transition: all 0.4s ease;}
#pokaz_kn_vxoda {
	background:#ff7b0d; width:90%; font-size:1.2em; border-radius: 10px; margin:5px; cursor: pointer;
}
#pokaz_kn_vxoda:hover { background:#ffe000;transition: all 0.4s ease;}
.vlojen_div {
    padding: 0rem 3rem;
}