:root {
            --main-color: #212121;
            --accent: #ffcc00;
            --bg: #f7f7f7;
            --border: #e7e7e7;
        }
* {
	box-sizing: border-box;
}
body {
	margin: 0;
	font-family: 'Roboto', Arial, sans-serif;
	background: var(--bg);
	color: var(--main-color);
}
header {
	background: #fff;
	border-bottom: 1px solid var(--border);
	padding: 0 40px;
}
.logo {
	font-weight: 500;
	font-size: 1.5em;
	color: var(--main-color);
	padding: 20px 0;
	display: inline-block;
}
nav {
	display: inline-block;
	float: right;
	margin-top: 16px;
}
nav a, nav a:visited {
	text-decoration: none;
	color: var(--main-color);
	margin-left: 30px;
	font-size: 1em;
	padding-bottom: 4px;
	border-bottom: 2px solid transparent;
	transition: border 0.2s;
}
nav a:hover,
nav a.active {
	border-bottom: 2px solid var(--accent);
}
main {
	max-width: 800px;
	margin: 40px auto;
	background: #fff;
	border-radius: 10px;
	padding: 40px 30px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
h1 {
	font-size: 2em;
	font-weight: 500;
	margin: 0 0 16px 0;
}
.section {
	display: none;
}
.section.active {
	display: block;
}
ul {
	padding-left: 18px;
}
@media (max-width: 600px) {
	header {
		padding: 0 10px;
	}
	main {
		padding: 20px 6px;
	}
	nav a {
		margin-left: 12px;
	}
}


/* общий на всё стиль */
body,p,ul,ol,div,td,th,h1,h2,h3,h4,h5,h6			{ text-align: left; margin:0; padding:0; font-size:10pt; font-weight: normal; font-family: Golos, sans-serif; }
body 	{background-color:#FFF;}

/* шрифты */
_h1 			{ font-size: 2.2em; padding: 0.2em 0.2em 0.4em; color:#1B46C8; }
h2 			{ font-size: 1.6em; padding: 0.1em 0.1em 0.3em; color:#1B46C8; }
h3 			{ font-size: 1.5em; padding: 0.1em 0.1em 0.2em; color:#1B46C8 }
h4 			{ font-size: 1.1em; padding: 0.1em 0.1em 0.1em; font-weight:bold }
h1, h2, h3	{ clear:both }
p 			{ padding: 0.1em 0 0.2em;}
ul,ol			{ padding: 0.1em 0 0.2em 0.1em; margin-left: 2em;}
li 			{ margin: 2px 0 5px }
a,a:visited	{ color:#1B46C8;}


/* обтекания и выравнивания */
.fleft 		{ float:left }
.fright		{ float:right }
.left 		{ text-align: left }
.right 		{ text-align: right }
.center 	{ text-align: center }
.nowrap 	{ white-space: nowrap; }
.clear 		{ clear:both; }
.auto 		{ overflow:auto; }

/* отступы */
.top10 		{ margin-top:10px; }
.top20 		{ margin-top:20px; }
.bottom5 	{ margin-bottom:5px; }
.bottom10 	{ margin-bottom:10px; }
.bottom20 	{ margin-bottom:20px; }
.left5 		{ margin-left:5px; }
.left10 		{ margin-left:10px; }
.left20 		{ margin-left:20px; }
.right5 		{ margin-right: 5px}
.right10 	{ margin-right: 10px}
.right20 	{ margin-right: 20px}
.both5		{ margin-left:5px; margin-right:5px; }
.both10		{ margin-left:10px; margin-right:10px; }
.both20		{ margin-left:20px; margin-right:20px; }
.pright5	{ padding-right:5px}
.pright10	{ padding-right:10px}
.pright20	{ padding-right:20px}
.pleft5		{ padding-left:5px}
.pleft10	{ padding-left:10px}
.pleft20	{ padding-left:20px}
.pboth10	{ padding-right:10px; padding-left:10px }
.ptop10		{ padding-top:10px }
.pbotom10	{ padding-bottom:10px }
.width100	{ width:100% }
.width98	{ width:98% }
.width60	{ max-width:60px; overflow:hidden; }

/* Декоры текста */
.hint		{ cursor: pointer; border-bottom:1px dashed #AAA}
.pointer	{ cursor: pointer; }
.underline 	{ text-decoration:underline}
.big		{ font-size:110%; }
.small		{ font-size:86%; }
.bold 		{ font-weight: bold } 


/* отображение блоков */
.hidden 		{ display:none }
.invisible 	{ visibility:hidden; }
.faded 		{ opacity: 0.1; }
.modal		{ border:1px solid #AAA; background-color: #FFF; border-radius:5px; padding: 10px; box-shadow: 0 0 5px rgba(0,0,0,0.5);
				left: 50%; width: auto; min-width: 500px; max-width: 1000px; position: fixed; top: 1vh; max-height: 95vh;  overflow-y: auto; z-index: 1001;	transform: translate(-50%, 0%);}
.overdiv	{ z-index:1001; }
.error		{ background-color:#C80064 !important; color: #FFFF46; padding:10px; border-radius: 5px; }
.error a, .error a:visited		{ color:#FFFF46 }
.info		{ background-color:#FFFF46 !important; color: #C80064; padding:10px; border-radius: 5px; }
.green		{ background-color: rgba(0, 255, 75, 0.71) !important; padding:10px; border-radius: 5px; }
.approve	{ background-color:#8067DC !important; color: #FFFF46; padding:10px; border-radius: 5px; }

/* типичная таблица */
table 		{ width:100% }
tr			{ vertical-align:top }

/* форма из php.class.forms */
.form		{ margin:4px 8px; border: 1px solid #9BB6A8; -webkit-border-top-left-radius:10px; -webkit-border-top-right-radius:10px;}
.form_title	{ font-size:1.5em; background-color: #F5F5F5; padding:10px; border-bottom:1px solid #CCC; -webkit-border-top-left-radius:10px; -webkit-border-top-right-radius:10px; }
.form table	{ margin:8px 12px; width:auto }
.form_buttons { background-color: #007aff; padding:10px;  border-top:1px solid #CCC; text-align:center }

/* красивая таблица */
.table				{ border-collapse:separate; border-radius: 5px; border:1px solid #d3d3d3; background:#fefefe; margin:10px 5px; border-spacing:0; width: auto;}
.table tr:first-child th:first-child 	{ -moz-border-radius-topleft:5px; -webkit-border-top-left-radius:5px; }
.table tr:first-child th:last-child  	{ -moz-border-radius-topright:5px; -webkit-border-top-right-radius:5px; }
.table tr:last-child td:first-child  	{ -moz-border-radius-bottomleft:5px; -webkit-border-bottom-left-radius:5px; }
.table tr:last-child td:last-child 	{ -moz-border-radius-bottomright:5px; -webkit-border-bottom-right-radius:5px; }
.table th 			{ padding: 5px; font-weight:bold; text-align:center; color:#FFFF46;	background-color:#1A88BE !important; }
.table td 			{ padding: 5px; height:20px; border-top:1px solid #e0e0e0; border-right:1px solid #e0e0e0; }
.table tr:nth-child(even)   		{ background-color: #F0F0FF ; }
.table tr:hover		{ background-color:#FFFFA6 !important; color:#007aff !important;  }
.table .header 		{ cursor: pointer; padding:5px 20px 5px 5px; background-image: url(/magic/img/bg.gif); background-position: right center; background-repeat: no-repeat; }
.table .headerSortUp { background-image: url(/magic/img/asc.gif); }
.table .headerSortDown {	background-image: url(/magic/img/desc.gif);	}

/* таблица формы */

#frmtabl_myform 	{ }
#frmtabl_myform tr:hover		{ background-color:#FFFFA6 !important;  }
.th_myform			{ font-weight:bold; white-space: nowrap; }
#frmtabl_myform td	{padding:3px 3px;}

#frmcs	{ padding:10px 5px;}

#usermenudiv{ min-width: 200px;
    float: right;
    position: absolute;
    right: 0px;
    top: 52px;
    width: 100px;
    left: auto; transform: initial;}

span.button			{ text-align: center; cursor: pointer; background-color: #1B46C8; display: inline-block; padding: 2px 6px 3px; border-width: 1px; border-style: outset; border-color: #AAA; border-radius: 4px; color:#FFFFFF}
span.button:hover	{ background-color:#9BB6A8; color: #C80064}

/* фильтры красифой таблицы */
.tablefilter		{ border: 1px solid #CCC; border-radius: 5px; padding: 4px; margin-right: 10px;}
.tablefilter input	{ border: 0; outline: 0; }
.tablefilter img		{ cursor:pointer; border:0;}

/* цвета */
.drubin, a.drubin, a.drubin:visited 				{ color:#c80064; }
.rubin, a.rubin, a.rubin:visited 				{ color:#DE006F; }
.pink, a.pink, a.pink:visited					{ color:#D15580; }
.izumrud , a.izumrud, a.izumrud:visited 			{ color:#489225; }
.lgreen , a.lgreen, a.lgreen:visited 				{ color:#93C11A; }
.sgreen , a.sgreen, a.sgreen:visited 				{ color:#79bb57; }
.salat , a.salat, a.salat:visited 				{ color:#8067DC; }
.yellow , a.yellow, a.yellow:visited 				{ color:#FFFF46; }
.gyellow , a.gyellow, a.gyellow:visited 			{ color:#BEBD00; }
.grey , a.grey, a.grey:visited 					{ color:#AAA; }
.ggrey , a.ggrey, a.ggrey:visited 				{ color:#9BB6A8; }
.lgrey , a.lgrey, a.lgrey:visited 				{ color:#F0F0FF; }
.black , a.black, a.black:visited 				{ color:#000; }

/* длинный обрезанный текст */
 .size {
    white-space: nowrap; /* Отменяем перенос текста */
    overflow: hidden; /* Обрезаем содержимое */    
    text-overflow: ellipsis; /* Многоточие */
	padding:4px;
}
.size:hover {    
    white-space: normal; 
	background-color:#FFF;
	
}

/* Витрина качества */
.csiblockdiv		{ border-top: 1px dashed #67B7DC; }
.csibookmark		{ padding: 5px 15px; clear: both; font-weight: bold;}
.csibookmark span	{ padding: 5px 15px; background-color: #67B7DC; min-width:250px; clear: both; font-weight: bold;}
.csigrafcontainer 	{ width:550px; padding:10px 20px; }
.csigaugecontainer 	{ width:350px; padding:10px 20px; }
.csigaugegraf		{ width:100%; height:250px; }
.csilinesgraf		{ width:100%; height:250px; }
.csitblcontainer 	{ max-width:450px; width:27%; padding:10px 20px; }
.csitblweekcont 	{ max-width:450px; width:27%; padding:10px 20px; }

/* форма авторизации */
.form-signin{
    width: 100%;
    max-width: 330px;
    margin: auto;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}
.form-signin h1 {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.2);
    margin-top: 0px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    color: #fff;
    padding: 15px;
    text-align: center;
}

.form-signin form .btn {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.2);
    color: #fff;
}
.form-signin {
	width: 100%;
	max-width: 330px;
	margin: auto;
  
  @include glassmorphism();
  border-radius: 3px;
  
  h1 {
    @include glassmorphism();
    margin-top: 0px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
    color:#fff;
    padding:15px;
    text-align:center;
  }
  
  form {
    padding:15px;
    
    .btn {
      @include glassmorphism; color:#fff;
       background-color: #999;
      /*&:hover, &:focus {
        background: rgba(255,255,255,0.1);
        box-shadow:none;
      }*/
	 
    }
    
    .form-control:focus {
      border-color:#ced4da;
      box-shadow: 5px 5px 30px rgba(0,0,0,0.2);
    }
  }
  
   .copyright {
     text-align:center;
      color:rgba(255,255,255,0.65);
    }
  
  .form-control {
    background:rgba(255,255,255,0.9);
  }
  
  .form-check {
    display:flex;
    align-items:center;
     color:rgba(255,255,255,0.65);
    label {
      font-size:0.9em;
    }
    
    input {
      margin-right:0.5em;
      
      &:checked {
        background-color:#9ce060;
        border-color: #81c63f;
      }
    }
  }
  
	.form-floating {
		&:focus-within {
			z-index: 2;
		}
	}
  
	input[type="email"] {
		margin-bottom: -1px;
		border-bottom-right-radius: 0;
		border-bottom-left-radius: 0;
	}
	input[type="text"] {
		margin-bottom: 5px;
		border-bottom-right-radius: 0;
		border-bottom-left-radius: 0;

	}
	input[type="password"] {
		margin-bottom: 10px;
		border-top-left-radius: 0;
		border-top-right-radius: 0;
	}
}

._bg {
			position:absolute;
			z-index:-1;
			top:0;
			right:0;
			bottom:0;
			left:0;
			  
			background-image: radial-gradient(circle at 30% 86%, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.03) 8%,transparent 8%, transparent 92%),radial-gradient(circle at 55% 100%, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.03) 8%,transparent 8%, transparent 92%),radial-gradient(circle at 40% 75%, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.03) 6%,transparent 6%, transparent 94%),radial-gradient(circle at 7% 99%, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.03) 6%,transparent 6%, transparent 94%),radial-gradient(circle at 69% 76%, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.03) 6%,transparent 6%, transparent 94%),radial-gradient(circle at 2% 35%, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.03) 6%,transparent 6%, transparent 94%),radial-gradient(circle at 14% 48%, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.03) 6%,transparent 6%, transparent 94%),radial-gradient(circle at 28% 87%, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.04) 4%,transparent 4%, transparent 96%),radial-gradient(circle at 65% 14%, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.04) 4%,transparent 4%, transparent 96%),radial-gradient(circle at 51% 36%, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.04) 4%,transparent 4%, transparent 96%),radial-gradient(circle at 6% 93%, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.04) 4%,transparent 4%, transparent 96%),linear-gradient(135deg, rgb(23, 233, 173),rgb(29, 24, 208));
		}
.contentbody {padding:10px 5px}		
.forumbuttons { text-align:center }


.magicmodal		{ border:1px solid #AAA; background-color: #FFF; border-radius:5px; padding: 10px; box-shadow: 0 0 5px rgba(0,0,0,0.5);
				left: 50%; width: auto; min-width: 500px; max-width: 1000px; position: fixed; top: 1vh; max-height: 95vh;  overflow-y: auto; z-index: 1001;	transform: translate(-50%, 0%);}
.overdiv	{ z-index:1001; }