body {
	margin:0 auto;
	background-color: #FCFCFC; 
	width: min(1400px,calc(95vw)); 
	font-family: Verdana, Tahoma, Arial;
	color: #616161;
}
table, tr, td {
	font-size: 1em;
}
p {
	font-size: 1em;
	text-align: justify; 
	text-indent: 2em;
}
p.notes {
	color: #AFAFAF;
	font-size: 0.5em;
	text-align: justify;
	text-indent: 4em;
    line-height: 1em;

	
}
a {
	color: #3D74FB;
	text-decoration: none;
}
a:hover {text-shadow: #A1A1A1 2px 0 15px; box-shadow: 0px 0px 16px 0px #A0A0A0; background-color: #DFDFDF;}
a:active {text-shadow: #444444 2px 0 15px; box-shadow: 0px 0px 16px 0px #A0A0A0; background-color: #DFDFDF;}

.link {
	text-decoration: none;
	cursor: hand;
}
.link:hover {text-shadow: #A1A1A1 2px 0 15px; box-shadow: 0px 0px 16px 0px #A0A0A0; background-color: #DFDFDF;}

input::placeholder {
	color: gray;
	font-style: italic;
	font-size: 0.8em;
	color: #E3B490;
}
hr {
	border: solid 1px green;
}

.flexboxes {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	/* justify-content: center;*/
	padding: 5px;
	margin: 5px;
	border-radius: 5px;
}
.blockboxes {
	display: block;
	border-radius: 5px;
}
.relativeboxes {
	 position: relative;
}
.hidden {
	display: none;	
}
.full_width {
	width: 100%;
}
div.text_center {
	justify-content: center;
	text-align: center;
}

div.head_title{
	justify-content: center;
	padding: 1px;
	margin: 0px 0px 0px auto;
	border: 0px solid green;
	border-radius: 5px;
	font-size: 1.3em;	
	font-weight: bold;
	color: #909090;
}


/* ===================================== Главная страница ========================================= */
div.quarter {
	width: max(30%, 320px);
	border: 6px solid #ECECEC;
	border-radius: 15px;
	font-size: 1.1em;
	margin: 5px;
	padding: 5px;
	text-align: center;
	cursor: hand;
}
img.quarter {
	width: min(100%, 200px);
}
div.und_constr {
	background-image: url("images/und_constr_light.webp");
	background-repeat: no-repeat;
	opacity: 0.7;
	background-position: right bottom;
}


/* ===================================== Модификаторы ========================================= */
.hand { cursor: hand; }

.divtoright 	{ margin-left: auto; }
.divtoleft 		{ margin-right: auto; }
.divtocenter 	{ margin-left: auto; margin-right: auto; }

.toright {
	text-align: right;
	justify-content: right;
	align-items: flex-end;
}
.tocenter {
	text-align: center;
	justify-content: center;
	align-items: center;
}
.vertikal-center { align-items: center; vertical-align: center;}

.bold 		{ font-weight: bold; }
.italic 	{ font-style: italic; }

.redfont	{color: red; }
.greenfont	{color: green; }
.blackfont	{color: black; }
.yellowfont	{color: yellow; }
.whitefont	{color: white; }

.flex { display: flex; }
.block { display: block; }
.flex-column { flex-direction: column; }

.minwidth50 	{ min-width: 50px;}
.minwidth100 	{ min-width: 100px;}
.minwidth150 	{ min-width: 150px; }
.minwidth200 	{ min-width: 200px; }
.minwidth250 	{ min-width: 250px; }
.minwidth300 	{ min-width: 300px; }
.minwidth350 	{ min-width: 350px; }
.minwidth400 	{ min-width: 400px; }
.minwidth450 	{ min-width: 450px; }
.minwidth500 	{ min-width: 500px; }
.minwidth550 	{ min-width: 550px; }
.minwidth600 	{ min-width: 600px; }
.minwidth650 	{ min-width: 650px; }
.minwidth700 	{ min-width: 700px; }
.minwidth750 	{ min-width: 750px; }

.maxwidth50 	{ max-width: 50px; }
.maxwidth100 	{ max-width: 100px; }
.maxwidth150 	{ max-width: 150px; }
.maxwidth200 	{ max-width: 200px; }
.maxwidth250	{ max-width: 250px; }
.maxwidth350	{ max-width: 350px; }
.maxwidth450	{ max-width: 450px; }
.maxwidth500	{ max-width: 500px; }
.maxwidth550	{ max-width: 550px; }
.maxwidth600	{ max-width: 600px; }
.maxwidth650	{ max-width: 650px; }
.maxwidth700	{ max-width: 700px; }

.maxwidth25prc 	{ max-width: 25%; }
.maxwidth31prc 	{ max-width: 31%; }
.maxwidth40prc 	{ max-width: 40%; }
.maxwidth50prc 	{ max-width: 50%;}
.maxwidth75prc 	{ max-width: 75%; }
.maxwidth85prc 	{ max-width: 85%; }
.maxwidth95prc 	{ max-width: 95%; }
.maxwidth98prc 	{ max-width: 98%; }
.maxwidth100prc	{ max-width: 100%; }

.minwidth25prc 	{ min-width: 25%; }
.minwidth40prc 	{ min-width: 40%; }
.minwidth50prc 	{ min-width: 50%;}
.minwidth75prc 	{ min-width: 75%; }
.minwidth85prc 	{ min-width: 85%; }
.minwidth95prc 	{ min-width: 95%; }
.minwidth98prc 	{ min-width: 98%; }
.minwidth100prc	{ min-width: 100%; }
                                  
.width50 	{ width: 50px; }
.width100 	{ width: 100px; }
.width150 	{ width: 150px; }
.width200 	{ width: 200px; }
.width250	{ width: 250px; }
.width350	{ width: 350px; }
.width450	{ width: 450px; }
.width500	{ width: 500px; }
.width550	{ width: 550px; }
.width600	{ width: 600px; }
.width650	{ width: 650px; }
.width700	{ width: 700px; }

.width25prc 	{ width: 25%; }
.width30prc 	{ width: 30%; }
.width40prc 	{ width: 40%; }
.width48prc 	{ width: 48%; }
.width50prc 	{ width: 50%; }
.width75prc 	{ width: 75%; }
.width85prc 	{ width: 85%; }
.width95prc 	{ width: 95%; }
.width98prc 	{ width: 98%; }
.width100prc	{ width: 100%; }



.lightborder { border: 1px solid #DBDBDB; }
.border { border: 3px solid green; }
.radiusborder { border: 1px solid green; border-radius: 10px; }

.redbackground 		{ background-color: #F5C9B7; }
.greenbackground 	{ background-color: #ADDEA5; }
.lightgreenbackground 	{ background-color: #CCFFCC; }
.whitebackground 	{ background-color: #FFFFFF; }
.yellowbackground 	{ background-color: #FFE800; }
.blackbackground 	{ background-color: #000000; color: #FFFFFF }
.graybackground 	{ background-color: #DBDBDB; }
.lightgraybackground 	{ background-color: #F5F5F5; }
.highlite 			{ background-color: #000000; color: #FFFFFF }


.nomargin 	{	margin: 0px; }
.yesmargin 	{	margin: 5px; }
.nopadding 	{ padding: 0px; }
.yespadding 	{ padding: 5px; }

.font06em {	font-size: 0.6em;}
.font07em {	font-size: 0.7em;}
.font08em {	font-size: 0.8em;}
.font09em {	font-size: 0.9em;}
.font1em  { font-size: 1em;}
.font11em {	font-size: 1.1em;}
.font12em {	font-size: 1.2em;}
.font13em {	font-size: 1.3em;}

.brdr-radius-5 	{ border-radius: 5px; }
.brdr-radius-7 	{ border-radius: 7px; }
.brdr-radius-10 	{ border-radius: 10px; }
.brdr-radius-15 	{ border-radius: 15px; }
.brdr-radius-20 	{ border-radius: 20px; }

.height-08	{height: 0.8em;}
.height-09	{height: 0.9em;}
.height-1	{height: 1em;}
.height-11	{height: 1.1em;}
.height-12	{height: 1.2em;}
.height-13	{height: 1.3em;}
.height-14	{height: 1.4em;}
.height-15	{height: 1.5em;}
.height-16	{height: 1.6em;}
.height-17	{height: 1.7em;}
.height-18	{height: 1.8em;}
.height-19	{height: 1.9em;}
.height-2	{height: 2em;}
.height-3	{height: 3em;}
.height-4	{height: 4em;}
.height-5	{height: 5em;}
.height-6	{height: 6em;}

.min-height-15 {min-height: 15em;}
.full-height {min-height: 100%;}

.line-height-1	{line-height: 1em;}
.line-height-12	{line-height: 1.2em;}
.line-height-14	{line-height: 1.4em;}
.line-height-16	{line-height: 1.6em;}




/* ===================================== Профайл ========================================= */
div.avatars{
    position: fixed;
    top: 10%;
	width: 80%;
	max-width: 600px;
	background-color: #767C73;
	opacity: 0.85;
	z-index: 100;
	display: none;
}
div.avatars_img{
	height: 120px;
	margin: 5px;
	
}

/* ======================================= MENU =========================================== */
div.global_opacity{
	width: 100%;
	height: 100%;
	background-color: #576359;
	background-color: #767C73;
	opacity: 0.85;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
    background-image: url('/images/gray_setka_50_prc.webp');
    background-repeat: repeat;
    
}
div.menu {
	position: sticky; 
	top: 45;
	z-index: 200;
	background-color: #f5f5f5; 
	color: #AAAAAA;
	width: max(30%, 500px);
	line-height: 1.8em;
	padding: 5px;
	text-align: end; 
	border: dotted 1px white;
	border-radius: 7px;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;

}
div.up_menu_menu{
	position: sticky; 
	top: 1;
	width: 98%;
	background-color: #ECECEC; 
	justify-content: left; 
	padding: 1px 5px 1px 5px; 
	margin-bottom: 1px; 
	border-bottom: solid 0px green;	
}
div.menu_item {
	color: green;
	background-color: #ECECEC; 
	min-width: 200px;
	width: 95%;
	line-height: 1.8em;
	margin: 1px auto 1px auto;
	padding: 5px ;
	text-align: left; 
	border: dotted 1px #F0F0F0;
	border-radius: 7px;
	cursor: hand;  
}
div.menu_item img {
	height: 1.2em;
}
div.selected_menu {
	background-color: #DEDEDE; 
	font-weight: bold;
}
div.menu_item_context {
	width: 97%;
	line-height: 1em;
	margin:5 5 5 auto;
	border: 1px solid #FFFFFF;	
	border-radius: 5px;
	background-color: #FCFCFC; 
	color: #616161;
	cursor: default;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: left;
}
/* Контейнер <div> - необходим для размещения выпадающего содержимого */
.dropdown {
	position: relative;
	display: inline-block;
	margin-top: 15px;
}
.dropdown img{
	height: 80%;
	margin-top: auto;
}
.dropdown-content { /* Выпадающее содержимое (скрыто по умолчанию) */
	display: none;
	position: absolute;
	background-color: #f1f1f1;
	min-width: 200px;
	width: 85%;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
	color: green;
	background-color: #ECECEC; 
	margin: 1px auto 1px auto;
	padding: 5px ;
	padding-left: 2em;
}
.dropdown:hover .dropdown-content {display: block;} /* Показать выпадающее меню при наведении курсора */
.dropdown:hover .menu_item {background-color: #E8E8FF;} /* Изменение цвета фона кнопки раскрывающегося списка при отображении содержимого раскр. списка */
.dropdown-content a {  color: green;}	/* Ссылки внутри выпадающего списка */

/* ======================================= LOGIN =========================================== */
div.login {
	padding: 2px 0px 2px 0px;
	margin: 0px auto 5px auto;
	min-width: 550px;
	width: 80%;
	border: 0px solid green;
	border-radius: 0px 0px 15px 15px;
	text-align: center; 
	vertical-align: middle;
	background-color: #ECECEC;
}
div.login_up_menu {
	margin: 5px auto 0px auto;
	padding:0px;
	line-height: 1.3em;
	background-color: #FCFCFC;
	text-align: left; 
	border-radius: 0px;
}
div.up_menu_login_item {
	min-width:200px;
	border: 1px solid #ECECEC;
	border-bottom: 0px;
	border-radius: 10px 10px 0px 0px;
	font-size: 1.1em;
	margin: 0px 5px 0px 5px;
	padding: 5px 0px 5px 0px;
	text-align: center;
	cursor: hand;
}
div.selected {
	background-color: #ECECEC;
	cursor: default
}

div.login_item {
	min-width:49%;
	border: 0px solid gray;
	font-size: 1.1em;
	margin: 5px auto 5px auto;
	text-align: center;
}
div.left {
	text-align: right;
	margin-right: auto;
}
div.right {
	text-align: left;
	text-align: center;
	margin-left: auto;
}
input.login {
	font-size: 1.1em;
	width: 100%;
	border: 0px;
	background-color: #FCFCFC; 
	border-bottom: solid 1px green;
	text-align: center
}
input.login_code{
	font-size: 40px;
	font-family: courier;
	letter-spacing: 35px;
	text-indent: 35px;
	text-align: left;
	width: 280px;
	height: 60px;
	border: 4px solid #FCFCFC;
	border-radius: 7px;
	background-color: #ffffff;
	
    background-image: url('/images/digit_fon_4pcs.gif');
	background-repeat: no-repeat;	
}
input.login_button{
	cursor: hand;
	color: green;
	margin: 5px;
	font-size: 1.2em;
	min-width: 235px;
	border: 0px;
	border-radius: 5px;
	border: 2px solid #FCFCFC;
	border: 2px outset  #FCFCFC;
}
input.login_button:hover {color: blue;}
input.login_button:active {border: 2px inset #FCFCFC;}

div.menu_login {	/* Кнопка вызва окна логина вверху справа */
	padding: 1px ;
	min-width: 35px;
	order: 999;
	margin: 1px 1px 1px auto;
}

/* ======================================= LIST =========================================== */
fieldset {
	border: 0px solid green;
	background-color: #ECECEC; 	
	border-radius: 5px;
	margin: 2px;
	margin-bottom: 7px;
	padding: 2px;
	font-size: 1em;
	line-height: 1.2em;	
	display: block;
}
legend {
	min-width: 250px;
	font-size: 1em;
	background-color: #FCFCFC; 	
	border: 5px solid #ECECEC;
	border-radius: 15px;
	line-height: 1.3em;	
	/* height: 1.4em;	*/
	text-indent: 2em;
}
.list_text {
	height: 1.5em;	
	font-size: 1em;
	line-height: 1.6em;
	border: none;
	border-radius: 5px;
	background-color: #F0F2FC; 	
	margin: 2px;
}
input.long {
	width: max(80%, 500px);
}
input.small {
	width: max(10%, 50px);
}
input.medium {
	width: max(90%, 250px);
}

input.width10prc { width: max(10%, 80px); }
input.width20prc { width: max(20%, 110px); }
input.width30prc { width: max(30%, 110px); }
input.width40prc { width: max(40%, 130px); }
input.width50prc { width: max(50%, 150px); }
input.width60prc { width: max(60%, 200px); }
input.width70prc { width: max(70%, 230px); }
input.width80prc { width: max(80%, 260px); }
input.width90prc { width: max(90%, 300px); }

div.list_item_context {
	width: 98%;
	line-height: 1.2em;
	font-size: 0.9em;
	margin:5 5 5 auto;
	border: 1px solid #FFFFFF;	
	border-radius: 5px;
	background-color: #FCFCFC; 
	color: #616161;
	cursor: default;
	justify-content: start;
}
div.list_zakl {
	min-width: 8%;
	line-height: 1.1em;
	border: 2px solid #A8ABB6;	
	border-bottom: 0px;
	border-radius: 5px;
	border-top-right-radius: 10px 15px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 0px;
	text-align: center;	
	cursor: hand;
	margin: 0px;
	margin-bottom: 0px;
	padding: 2px;
	
}
div.list_context{
	margin: 5px;
	margin-top: 0px;
	
}
div.help_window {
	display: none;	
	position: absolute;
	width: max(60%, 700px);
	top: 50%;
	left:50%;
	transform:translate(-50%, 20%);	
	z-index: 200;
	background-color: #FAFADE; 
	padding: 2px;
	border: solid 1px #090B05;
	border-radius: 7px;
}
div.list_checkboxes{
	font-size: 1em;
	background-color: #FCFCFC; 	
	border: 1px solid #ECECEC;
	border-radius: 10px;
	line-height: 1.3em;	
	padding: 1px 5px 1px 5px;
}
div.demo_list {
	font-size: 1em;
	min-width:250px;
	min-height:250px;
	background-color: #FCFCFC; 	
	border: 1px solid #ECECEC;
	border-radius: 10px;
	line-height: 1.3em;	
	padding: 1px 5px 1px 5px;
	
}
div.demo_element {
	font-size: 1em;
	min-width:220px;
	background-color: #E8E8F2; 	
	border: 1px solid #ECECEC;
	border-radius: 10px;
	line-height: 1.2em;	
	padding: 1px 5px 1px 5px;
	margin:  3px 5px 1px 5px;
}
div.channels {
	font-size: 0.8em;
	width:100%;
	border: 1px solid #ECECEC;
	border-radius: 10px;
	line-height: 0.9em;	
	padding: 1px 5px 1px 5px;
	margin:  1px 5px 1px 5px;
}

img.rot {
  animation: 2s linear 0s normal none infinite running rot;
  -webkit-animation: 2s linear 0s normal none infinite running rot;
  width: 100px;
}
@keyframes rot {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@-webkit-keyframes rot {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/* ======================================= other =========================================== */

input.text, textarea.text {
	font-size: 1.1em;
	line-height: 1.1em;
	background-color: #FFFFFF; 
	border: dotted 1px #B6B6B6;
	border-radius: 5px;
	/*text-align: left;	*/
	padding-left: 0.4em;	
}
input[type="date"]:before {
	content: attr(placeholder);
	color: grey;
	text-align: left;
	color: gray;
	font-style: italic;
	font-size: 0.8em;
	color: #E3B490;
}
input[type="date"]:focus:before {
  content: none;
}

input.cust_text {
	border: dotted 1px #B6B6B6;
	border-radius: 5px;
	padding-left: 0.4em;	
}


input.big, div.TruePrice {
	width: max(40%, 650px);
	font-size: 1em;
	min-height: 50px;
	line-height: 50px;
	margin-bottom: 20px;
	text-align: center; 
	border: dotted 1px gray;
	border-radius: 25px;
	cursor: hand; 
}
input.danger_buton {
	min-width: 250px;
	font-size: 1em;
	margin: 2px 2px 2px auto;
	border: 5px solid #ECECEC;
	border-radius: 15px;
	text-indent: 0em;
	background-color: #FFD8D8; 	
}
input.send_button {
	cursor: hand;
	min-width: 250px;
	font-size: 1em;
	margin: 2px;
	border: 5px solid #ECECEC;
	border: 1px solid #48B248;
	border-radius: 15px;
	text-indent: 0em;
	background-color: #ADDEA5; 	
}
.cust_button {
	cursor: hand;
	color: green;
	margin: 5px;
	font-size: 1.2em;
	border: 0px;
/*	background-color: #B1C839; */
	border-radius: 5px;
	border: 2px outset #DBDBDB;
}
.cust_button:hover {color: blue;}
.cust_button:active {border: 2px inset #FCFCFC;}

.mini_button {
	cursor: hand;
	border-radius: 5px;
	border: 2px outset #DBDBDB;
}
.mini_button:hover {box-shadow: 0px 0px 16px 0px #A0A0A0;}
.mini_button:active {border: 2px inset #FCFCFC; box-shadow: 0px 0px 16px 0px #A0A0A0;}

.div_float_right {
	position: sticky; 
	top: 60px; 
	right: 5px;
	margin-left: auto;
    float: right; 
    border-radius: 5px;
/*    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
    z-index: 10; 
}
body {
	margin:0 auto;
	background-color: #FCFCFC; 
	width: min(1400px,calc(95vw)); 
	font-family: Verdana, Tahoma, Arial;
	color: #616161;
}
table, tr, td {
	font-size: 1em;
}
p {
	font-size: 1em;
	text-align: justify; 
	text-indent: 2em;
}
p.notes {
	color: #AFAFAF;
	font-size: 0.5em;
	text-align: justify;
	text-indent: 4em;
    line-height: 1em;

	
}
a {
	color: #3D74FB;
	text-decoration: none;
}
a:hover {text-shadow: #A1A1A1 2px 0 15px; box-shadow: 0px 0px 16px 0px #A0A0A0; background-color: #DFDFDF;}
a:active {text-shadow: #444444 2px 0 15px; box-shadow: 0px 0px 16px 0px #A0A0A0; background-color: #DFDFDF;}

.link {
	text-decoration: none;
	cursor: hand;
}
.link:hover {text-shadow: #A1A1A1 2px 0 15px; box-shadow: 0px 0px 16px 0px #A0A0A0; background-color: #DFDFDF;}

input::placeholder, textarea::placeholder {
	color: gray;
	font-style: italic;
	font-size: 0.8em;
	color: #E3B490;
}
hr {
	border: solid 1px green;
}

.flexboxes {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	/* justify-content: center;*/
	padding: 5px;
	margin: 5px;
	border-radius: 5px;
}
.blockboxes {
	display: block;
	border-radius: 5px;
}
.relativeboxes {
	 position: relative;
}
.hidden {
	display: none;	
}
.full_width {
	width: 100%;
}
div.text_center {
	justify-content: center;
	text-align: center;
}

div.head_title{
	justify-content: center;
	padding: 1px;
	margin: 0px 0px 0px auto;
	border: 0px solid green;
	border-radius: 5px;
	font-size: 1.3em;	
	font-weight: bold;
	color: #909090;
}


/* ===================================== Главная страница ========================================= */
div.quarter {
	width: max(30%, 320px);
	border: 6px solid #ECECEC;
	border-radius: 15px;
	font-size: 1.1em;
	margin: 5px;
	padding: 5px;
	text-align: center;
	cursor: hand;
}
img.quarter {
	width: min(100%, 200px);
}
div.und_constr {
	background-image: url("images/und_constr_light.webp");
	background-repeat: no-repeat;
	opacity: 0.7;
	background-position: right bottom;
}


/* ===================================== Модификаторы ========================================= */
.hand { cursor: hand; }

.divtoright 	{ margin-left: auto; }
.divtoleft 		{ margin-right: auto; }
.divtocenter 	{ margin-left: auto; margin-right: auto; }

.toright {
	text-align: right;
	justify-content: right;
	align-items: flex-end;
}
.tocenter {
	text-align: center;
	justify-content: center;
	align-items: center;
}
.vertikal-center { align-items: center; vertical-align: center;}

.bold 		{ font-weight: bold; }
.italic 	{ font-style: italic; }

.redfont	{color: red; }
.greenfont	{color: green; }
.blackfont	{color: black; }
.yellowfont	{color: yellow; }
.whitefont	{color: white; }


.flex { display: flex; }
.block { display: block; }
.flex-column { flex-direction: column; }

.minwidth50 	{ min-width: 50px;}
.minwidth100 	{ min-width: 100px;}
.minwidth150 	{ min-width: 150px; }
.minwidth200 	{ min-width: 200px; }
.minwidth250 	{ min-width: 250px; }
.minwidth300 	{ min-width: 300px; }
.minwidth350 	{ min-width: 350px; }
.minwidth450 	{ min-width: 450px; }
.minwidth500 	{ min-width: 500px; }
.minwidth550 	{ min-width: 550px; }
.minwidth600 	{ min-width: 600px; }
.minwidth650 	{ min-width: 650px; }
.minwidth700 	{ min-width: 700px; }
.minwidth750 	{ min-width: 750px; }

.maxwidth50 	{ max-width: 50px; }
.maxwidth100 	{ max-width: 100px; }
.maxwidth150 	{ max-width: 150px; }
.maxwidth200 	{ max-width: 200px; }
.maxwidth250	{ max-width: 250px; }
.maxwidth350	{ max-width: 350px; }
.maxwidth450	{ max-width: 450px; }
.maxwidth500	{ max-width: 500px; }
.maxwidth550	{ max-width: 550px; }
.maxwidth600	{ max-width: 600px; }
.maxwidth650	{ max-width: 650px; }
.maxwidth700	{ max-width: 700px; }

.maxwidth25prc 	{ max-width: 25%; }
.maxwidth31prc 	{ max-width: 31%; }
.maxwidth40prc 	{ max-width: 40%; }
.maxwidth50prc 	{ max-width: 50%;}
.maxwidth75prc 	{ max-width: 75%; }
.maxwidth85prc 	{ max-width: 85%; }
.maxwidth95prc 	{ max-width: 95%; }
.maxwidth98prc 	{ max-width: 98%; }
.maxwidth100prc	{ max-width: 100%; }

.minwidth25prc 	{ min-width: 25%; }
.minwidth40prc 	{ min-width: 40%; }
.minwidth50prc 	{ min-width: 50%;}
.minwidth75prc 	{ min-width: 75%; }
.minwidth85prc 	{ min-width: 85%; }
.minwidth95prc 	{ min-width: 95%; }
.minwidth98prc 	{ min-width: 98%; }
.minwidth100prc	{ min-width: 100%; }



.lightborder { border: 1px solid #DBDBDB; }
.border { border: 3px solid green; }
.radiusborder { border: 1px solid green; border-radius: 10px; }
.radiuslightborder { border: 1px solid #DBDBDB; border-radius: 7px; }

.redbackground 		{ background-color: #F5C9B7; }
.greenbackground 	{ background-color: #ADDEA5; }
.lightgreenbackground 	{ background-color: #CCFFCC; }
	.graygreenbackground 	{ background-color: #FAFAF0; } 
.whitebackground 	{ background-color: #FFFFFF; }
.yellowbackground 	{ background-color: #FFE800; }
.blackbackground 	{ background-color: #000000; color: #FFFFFF }
.graybackground 	{ background-color: #DBDBDB; }
.lightgraybackground 	{ background-color: #F5F5F5; }
.highlite 			{ background-color: #000000; color: #FFFFFF }
.selecteditem 		{ border: 5px solid green; }



.nomargin 	{	margin: 0px; }
.yesmargin 	{	margin: 5px; }
.yesmargin2px 	{	margin: 2px; }
.nopadding 	{ padding: 0px; }
.yespadding 	{ padding: 5px; }
.yespadding2px 	{ padding: 2px; }

.font06em {	font-size: 0.6em;}
.font07em {	font-size: 0.7em;}
.font08em {	font-size: 0.8em;}
.font09em {	font-size: 0.9em;}
.font1em  { font-size: 1em;}
.font11em {	font-size: 1.1em;}
.font12em {	font-size: 1.2em;}
.font13em {	font-size: 1.3em;}

.brdr-radius-5 	{ border-radius: 5px; }
.brdr-radius-7 	{ border-radius: 7px; }
.brdr-radius-10 	{ border-radius: 10px; }
.brdr-radius-15 	{ border-radius: 15px; }
.brdr-radius-20 	{ border-radius: 20px; }

.height-08	{height: 0.8em;}
.height-09	{height: 0.9em;}
.height-1	{height: 1em;}
.height-11	{height: 1.1em;}
.height-12	{height: 1.2em;}
.height-13	{height: 1.3em;}
.height-14	{height: 1.4em;}
.height-15	{height: 1.5em;}
.height-16	{height: 1.6em;}
.height-17	{height: 1.7em;}
.height-18	{height: 1.8em;}
.height-19	{height: 1.9em;}
.height-2	{height: 2em;}
.height-3	{height: 3em;}
.height-4	{height: 4em;}
.height-5	{height: 5em;}
.height-6	{height: 6em;}

.min-height-15 {min-height: 15em;}
.full-height {min-height: 100%;}

.line-height-1	{line-height: 1em;}
.line-height-12	{line-height: 1.2em;}
.line-height-14	{line-height: 1.4em;}
.line-height-16	{line-height: 1.6em;}




/* ===================================== Профайл ========================================= */
div.avatars{
    position: fixed;
    top: 10%;
	width: 80%;
	max-width: 600px;
	background-color: #767C73;
	opacity: 0.85;
	z-index: 100;
	display: none;
}
div.avatars_img{
	height: 120px;
	margin: 5px;
	
}

/* ======================================= MENU =========================================== */
div.global_opacity{
	width: 100%;
	height: 100%;
	background-color: #576359;
	background-color: #767C73;
	opacity: 0.85;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
    background-image: url('/images/gray_setka_50_prc.webp');
    background-repeat: repeat;
    
}
div.menu {
	position: sticky; 
	top: 45;
	z-index: 200;
	background-color: #fff; /*#f5f5f5; */
	color: #AAAAAA;
	width: max(30%, 500px);
	line-height: 1.8em;
	padding: 5px;
	text-align: end; 
	border: dotted 1px white;
	border-radius: 7px;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;

}
div.up_menu_menu{
	position: sticky; 
	top: 1;
	width: 98%;
	background-color: #ECECEC; 
	justify-content: left; 
	padding: 1px 5px 1px 5px; 
	margin-bottom: 1px; 
	border-bottom: solid 0px green;	
}
div.menu_item {
	color: green;
	background-color: #ECECEC; 
	min-width: 200px;
	width: 95%;
	line-height: 1.8em;
	margin: 1px auto 1px auto;
	padding: 5px ;
	text-align: left; 
	border: dotted 1px #F0F0F0;
	border-radius: 7px;
	cursor: hand;  
}
div.menu_item img {
	height: 1.2em;
}
div.selected_menu {
	background-color: #DEDEDE; 
	font-weight: bold;
}
div.menu_item_context {
	width: 97%;
	line-height: 1em;
	margin:5 5 5 auto;
	border: 1px solid #FFFFFF;	
	border-radius: 5px;
	background-color: #FCFCFC; 
	color: #616161;
	cursor: default;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: left;
}
/* Контейнер <div> - необходим для размещения выпадающего содержимого */
.dropdown {
	position: relative;
	display: inline-block;
	margin-top: 15px;
}
.dropdown img{
	height: 80%;
	margin-top: auto;
}
.dropdown-content { /* Выпадающее содержимое (скрыто по умолчанию) */
	display: none;
	position: absolute;
	background-color: #f1f1f1;
	min-width: 200px;
	width: 85%;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
	color: green;
	background-color: #ECECEC; 
	margin: 1px auto 1px auto;
	padding: 5px ;
	padding-left: 2em;
}
.dropdown:hover .dropdown-content {display: block;} /* Показать выпадающее меню при наведении курсора */
.dropdown:hover .menu_item {background-color: #E8E8FF;} /* Изменение цвета фона кнопки раскрывающегося списка при отображении содержимого раскр. списка */
.dropdown-content a {  color: green;}	/* Ссылки внутри выпадающего списка */

/* ======================================= LOGIN =========================================== */
div.login {
	padding: 2px 0px 2px 0px;
	margin: 0px auto 5px auto;
	min-width: 550px;
	width: 80%;
	border: 0px solid green;
	border-radius: 0px 0px 15px 15px;
	text-align: center; 
	vertical-align: middle;
	background-color: #ECECEC;
}
div.login_up_menu {
	margin: 5px auto 0px auto;
	padding:0px;
	line-height: 1.3em;
	background-color: #FCFCFC;
	text-align: left; 
	border-radius: 0px;
}
div.up_menu_login_item {
	min-width:200px;
	border: 1px solid #ECECEC;
	border-bottom: 0px;
	border-radius: 10px 10px 0px 0px;
	font-size: 1.1em;
	margin: 0px 5px 0px 5px;
	padding: 5px 0px 5px 0px;
	text-align: center;
	cursor: hand;
}
div.selected {
	background-color: #ECECEC;
	cursor: default
}

div.login_item {
	min-width:49%;
	border: 0px solid gray;
	font-size: 1.1em;
	margin: 5px auto 5px auto;
	text-align: center;
}
div.left {
	text-align: right;
	margin-right: auto;
}
div.right {
	text-align: left;
	text-align: center;
	margin-left: auto;
}
input.login {
	font-size: 1.1em;
	width: 100%;
	border: 0px;
	background-color: #FCFCFC; 
	border-bottom: solid 1px green;
	text-align: center
}
input.login_code{
	font-size: 40px;
	font-family: courier;
	letter-spacing: 35px;
	text-indent: 35px;
	text-align: left;
	width: 280px;
	height: 60px;
	border: 4px solid #FCFCFC;
	border-radius: 7px;
	background-color: #ffffff;
	
    background-image: url('/images/digit_fon_4pcs.gif');
	background-repeat: no-repeat;	
}
input.login_button{
	cursor: hand;
	color: green;
	margin: 5px;
	font-size: 1.2em;
	min-width: 235px;
	border: 0px;
	border-radius: 5px;
	border: 2px solid #FCFCFC;
	border: 2px outset  #FCFCFC;
}
input.login_button:hover {color: blue;}
input.login_button:active {border: 2px inset #FCFCFC;}

div.menu_login {	/* Кнопка вызва окна логина вверху справа */
	padding: 1px ;
	min-width: 35px;
	order: 999;
	margin: 1px 1px 1px auto;
}

/* ======================================= LIST =========================================== */
fieldset {
	border: 0px solid green;
	background-color: #ECECEC; 	
	border-radius: 5px;
	margin: 2px;
	margin-bottom: 7px;
	padding: 2px;
	font-size: 1em;
	line-height: 1.2em;	
	display: block;
}
legend {
	min-width: 250px;
	font-size: 1em;
	background-color: #FCFCFC; 	
	border: 5px solid #ECECEC;
	border-radius: 15px;
	line-height: 1.3em;	
	/* height: 1.4em;	*/
	text-indent: 2em;
}
.list_text {
	height: 1.5em;	
	font-size: 1em;
	line-height: 1.6em;
	border: none;
	border-radius: 5px;
	background-color: #F0F2FC; 	
	margin: 2px;
}
input.long {
	width: max(80%, 500px);
}
input.small {
	width: max(10%, 50px);
}
input.medium {
	width: max(90%, 250px);
}

input.width10prc { width: max(10%, 80px); }
input.width20prc { width: max(20%, 110px); }
input.width30prc { width: max(30%, 110px); }
input.width40prc { width: max(40%, 130px); }
input.width50prc { width: max(50%, 150px); }
input.width60prc { width: max(60%, 200px); }
input.width70prc { width: max(70%, 230px); }
input.width80prc { width: max(80%, 260px); }
input.width90prc { width: max(90%, 300px); }

div.list_item_context {
	width: 98%;
	line-height: 1.2em;
	font-size: 0.9em;
	margin:5 5 5 auto;
	border: 1px solid #FFFFFF;	
	border-radius: 5px;
	background-color: #FCFCFC; 
	color: #616161;
	cursor: default;
	justify-content: start;
}
div.list_zakl {
	min-width: 8%;
	line-height: 1.1em;
	border: 2px solid #A8ABB6;	
	border-bottom: 0px;
	border-radius: 5px;
	border-top-right-radius: 10px 15px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 0px;
	text-align: center;	
	cursor: hand;
	margin: 0px;
	margin-bottom: 0px;
	padding: 2px;
	
}
div.list_context{
	margin: 5px;
	margin-top: 0px;
	
}
div.help_window {
	display: none;	
	position: absolute;
	width: max(60%, 700px);
	top: 50%;
	left:50%;
	transform:translate(-50%, 20%);	
	z-index: 200;
	background-color: #FAFADE; 
	padding: 2px;
	border: solid 1px #090B05;
	border-radius: 7px;
}
div.list_checkboxes{
	font-size: 1em;
	background-color: #FCFCFC; 	
	border: 1px solid #ECECEC;
	border-radius: 10px;
	line-height: 1.3em;	
	padding: 1px 5px 1px 5px;
}
div.demo_list {
	font-size: 1em;
	min-width:250px;
	min-height:250px;
	background-color: #FCFCFC; 	
	border: 1px solid #ECECEC;
	border-radius: 10px;
	line-height: 1.3em;	
	padding: 1px 5px 1px 5px;
	
}
div.demo_element {
	font-size: 1em;
	min-width:220px;
	background-color: #E8E8F2; 	
	border: 1px solid #ECECEC;
	border-radius: 10px;
	line-height: 1.2em;	
	padding: 1px 5px 1px 5px;
	margin:  3px 5px 1px 5px;
}
div.channels {
	font-size: 0.8em;
	width:100%;
	border: 1px solid #ECECEC;
	border-radius: 10px;
	line-height: 0.9em;	
	padding: 1px 5px 1px 5px;
	margin:  1px 5px 1px 5px;
}

img.rot {
  animation: 2s linear 0s normal none infinite running rot;
  -webkit-animation: 2s linear 0s normal none infinite running rot;
  width: 100px;
}
@keyframes rot {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@-webkit-keyframes rot {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/* ======================================= other =========================================== */

input.text {
	font-size: 1.1em;
	line-height: 1.1em;
	background-color: #FFFFFF; 
	border: dotted 1px #B6B6B6;
	border-radius: 5px;
	/*text-align: left;	*/
	padding-left: 0.4em;	
}
input[type="date"]:before {
	content: attr(placeholder);
	color: grey;
	text-align: left;
	color: gray;
	font-style: italic;
	font-size: 0.8em;
	color: #E3B490;
}
input[type="date"]:focus:before {
  content: none;
}

input.cust_text {
	border: dotted 1px #B6B6B6;
	border-radius: 5px;
	padding-left: 0.4em;	
}


input.big, div.TruePrice {
	width: max(40%, 650px);
	font-size: 1em;
	min-height: 50px;
	line-height: 50px;
	margin-bottom: 20px;
	text-align: center; 
	border: dotted 1px gray;
	border-radius: 25px;
	cursor: hand; 
}
input.danger_buton {
	min-width: 250px;
	font-size: 1em;
	margin: 2px 2px 2px auto;
	border: 5px solid #ECECEC;
	border-radius: 15px;
	text-indent: 0em;
	background-color: #FFD8D8; 	
}
input.send_button {
	cursor: hand;
	min-width: 250px;
	font-size: 1em;
	margin: 2px;
	border: 5px solid #ECECEC;
	border: 1px solid #48B248;
	border-radius: 15px;
	text-indent: 0em;
	background-color: #ADDEA5; 	
}
.cust_button {
	cursor: hand;
	color: green;
	margin: 5px;
	font-size: 1.2em;
	border: 0px;
/*	background-color: #B1C839; */
	border-radius: 5px;
	border: 2px outset #DBDBDB;
}
.cust_button:hover {color: blue;}
.cust_button:active {border: 2px inset #FCFCFC;}

.mini_button {
	cursor: hand;
	border-radius: 5px;
	border: 2px outset #DBDBDB;
}
.mini_button:hover {box-shadow: 0px 0px 16px 0px #A0A0A0;}
.mini_button:active {border: 2px inset #FCFCFC; box-shadow: 0px 0px 16px 0px #A0A0A0;}

.div_float_right {
	position: sticky; 
	top: 60px; 
	right: 5px;
	margin-left: auto;
    float: right; 
    border-radius: 5px;
/*    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
    z-index: 10; 
}