/* theme */
:root {
	
	--fnt-main: GT Eesti Pro, Helvetica, Roboto, segoe ui, arial, tahoma, sans-serif;
	
	--clr-prim: #336;
	--clr-prim-1: #549;
	--clr-acnt: #8ff;
	
	--clr-link: #08d;
	--clr-link-h: #19e;
	--clr-bg: #EEE;
	--clr-border: #ddd;
	--clr-unfocus: #888;
	--clr-plate: #FFF;
	--clr-error: #b02;
	--clr-success: #0D0;
	--clr-light: #05f1;
	--clr-overlay: #0007;
	--clr-shadow: #0007;
	--clr-input: #f7f7f7;
	--clr-off: #777;
	--clr-alert: #d33;
	--clr-alert-h: #e33;
	
	--clr-on-prim: #FFF;
	--clr-on-prim-1: #9bf;
	--clr-on-acnt: #111;
	--clr-on-bg: #222;
	--clr-on-plate: #333;
	--clr-on-error: #FFF;
	--clr-on-success: #FFF;
	--clr-on-link: #FFF;
	--clr-on-input: #000;
	--clr-on-off: #eee;
	--clr-on-alert: #fff;
	
	--dim-plate: 20px;
	--dim-range: 20px;
	--dim-wrapper: 10px;
	--dim-progress: 10px;
	--dim-gap: 5px;
	--dim-radius: 5px;
	--dim-scroll: 4px;
	--dim-picbox:50px;
	--dim-num:20px;
	
	--input-fnt-size: 14px;
	--input-fnt-height: 20px;
	--input-fnt:var(--fnt-main);
	
	--clr-success: #0A0;
	--clr-fail: #d00;
	
	--dim-h1: 2.0rem;
	--dim-h2: 1.8rem;
	--dim-h3: 1.6rem;
	--dim-h4: 1.4rem;
	--dim-h5: 1.2rem;
	--dim-h6: 1.0rem;

}

@media not screen and (max-width:500px){
::-webkit-scrollbar-corner { background: #000;}
::-webkit-scrollbar { width: var(--dim-scroll); height: var(--dim-scroll); background: #0001;}
::-webkit-scrollbar-thumb { background: var(--clr-prim); border-radius:calc(var(--dim-scroll) / 2);}
::-webkit-scrollbar-track { background: #0001; }
}

/* typography */

html, body { height:100%; width:100%; min-height:100vh; min-width:1080px; font: 14px/20px var(--fnt-main); }
body { color:var(--clr-on-bg); background:var(--clr-bg); }

*:focus { outline: none; }

h1, h2, h3, h4, h5, h6 { font-family: var(--fnt-main); }
h1, h2, h3, h4, h5, h6, hr, p, dl, ol, ul, table, form, fieldset, pre, blockquote, q { margin: 0 0 20px 0; }
hr { margin: 0 0 10px 0;}

h1 { font-size: var(--dim-h1); }
h2 { font-size: var(--dim-h2); }
h3 { font-size: var(--dim-h3); }
h4 { font-size: var(--dim-h4); }
h5 { font-size: var(--dim-h5); }
h6 { font-size: var(--dim-h6); }

hr { border:none; height: 1px; margin:0; padding:0; background: var(--clr-border);}
p, dd, dt, li { line-height:20px; }

dt { font-weight:bold; font-style:italic; }
dd { margin: 0 0 5px 40px; }
dd, dt, li { margin-bottom:10px; }
ol { list-style: decimal outside; padding-left:20px; }

ol { list-style-type: none; counter-reset: num; padding-left: 30px; position:relative; }
ol li:before {
	content: counter(num);
	position: absolute;
	font-size: 12px;
	width: 20px;
	height: 20px;
	line-height: 20px;
	border-radius: 50%;
	text-align: center;
	left: 0;
	counter-increment: num;
	color: var(--clr-on-prim);
	background: var(--clr-prim);
}

ul { list-style: disc outside; padding-left:20px; }

a { color:var(--clr-link); text-decoration:none; cursor:pointer; }
a:hover, a:active { color:var(--clr-link-h); }

table { font-size: 14px; }
table th, td { padding: 10px; }
table th { font-weight:normal; }

fieldset { 
	display: block;
	padding:10px 20px;
}

legend { font-size: 18px; }
label { font-size: 10px; display:block; margin-bottom:5px; }

button,
select,
textarea,
input[type=password],
input[type=number],
input[type=text] {
	font: var(--input-fnt-size) / var(--input-fnt-height) var(--input-fnt);
	padding: var(--dim-wrapper);
	outline:none;
	resize:none;
	box-sizing:border-box;
	border-radius:var(--dim-radius);
	border: 1px solid var(--clr-border);
    color:var(--clr-on-input);
    background:var(--clr-input);
}

select option:checked,
select option:hover {
	color:var(--clr-on-link);
	background:var(--clr-link);
}

button,
input[type=file],
input[type=submit],
input[type=reset], 
input[type=button] {
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius:var(--dim-radius);
    cursor: pointer;
    padding: var(--dim-wrapper);
    background: var(--clr-plate);
    border: none;
    color: var(--clr-on-plate);
    font-weight: bold;
}

input[type=text],
input[type=password],
textarea,
select { min-width: 50px; }

input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  outline:none;
  background: var(--clr-bg);
  height:calc(var(--dim-range) / 3);
  border-radius: var(--dim-radius);
  opacity:0.9;
}
input[type=range]:hover {opacity:1;}

input[type=range]::-moz-range-thumb {}
input[type=range]::-ms-thumb {}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  
  height: var(--dim-range);
  width: var(--dim-range);
  border-radius: var(--dim-range);
  background: var(--clr-plate);
  cursor: pointer;
  border:3px solid var(--clr-link);
  box-shadow: 0px 0px 10px var(--clr-shadow);
}

select:focus,
textarea:focus,
input:focus { border-color:var(--clr-link); }

sup { vertical-align: super; font-size: smaller;}
sub { vertical-align: sub; font-size: smaller;}

code {
	padding: 3px;
	font-family: monospace;
	font-size: 12px;
}

pre code {
	line-height: 16px;
	padding: 10px;
	font-family: monospace;
	font-size: 12px;
	margin-bottom: 10px;
	display: block;
}

blockquote, q { 
	margin-left: 15px;
	line-height: 20px;
	font-size: 14px;
	font-style: italic;
	padding: 0 0 0 10px;
}

video {max-width:100%;}

progress {height:var(--dim-progress);}

/* block system */

.hline {height:1px; width:100%; background:var(--clr-border); }

.vlines > * { border-right:1px solid var(--clr-border); }
.vlines > *:last-child { border-right:none; }

.hlines > * { border-bottom:1px solid var(--clr-border); }
.hlines > *:last-child { border-bottom:none; }

.list > * { margin-bottom:var(--dim-wrapper); }
.list > *:last-child { margin:0; }

.list.hlines > * { padding-bottom:var(--dim-wrapper); }
.list.hlines > *:last-child { margin:0; padding:0;}

.plate, .plate-c > * {
	border-radius:var(--dim-radius);
	background:var(--clr-plate);
	padding:var(--dim-plate);
}

.clear {clear:both;}
.clear:after {content:''; display:block; clear:both;}

.col, .col-c > *,
.float, .float-c > * { float:left; }

.col-1-2 { width:50%; }
.col-1-3 { width:33.33%; }
.col-2-3 { width:66.66%; }
.col-1-4 { width:25%; }
.col-3-4 { width:75%; }

.block, .row, .row-c > * { display:block; }
.row:after, .row-c:after { content:''; display:block; clear:both; }

.line, .line-c > * { display:inline-block; }

/* flex system */

.gap-5 {gap:5px;}
.gap-10 {gap:10px;}
.gap-15 {gap:15px;}
.gap-20 {gap:20px;}
.gap-25 {gap:25px;}
.gap-30 {gap:30px;}
.gap-35 {gap:35px;}
.gap-40 {gap:40px;}
.gap-45 {gap:45px;}
.gap-50 {gap:50px;}

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

.flex .grow, .flex.grow-c > * {flex:1 0;}
.flex .shrink {flex-shrink:1;}
.flex .no-grow {flex-grow:0;}
.flex .no-shrink {flex-shrink:0;}

.flx-a-cnt { align-items:center; }
.flx-a-top { align-items:flex-start; }
.flx-a-btm { align-items:flex-end; }
.flx-a-str { align-items:stretch; }

.flx-j-cnt { justify-content:center; }
.flx-j-rnd { justify-content:space-around; }
.flx-j-btw { justify-content:space-between; }
.flx-j-eve { justify-content:space-evenly; }

.flx-d-r  { flex-direction: row; }
.flx-d-rr { flex-direction: row-reverse; }
.flx-d-c  { flex-direction: column; }
.flx-d-cr { flex-direction: column-reverse; }

/* COLORS */

.clr-prim { color:var(--clr-prim); }
.clr-prim-1 { color:var(--clr-prim-1); }
.clr-acnt { color:var(--clr-acnt); }

.clr-link { color:var(--clr-link); }
.clr-link-h { color:var(--clr-link-h); }
.clr-light { color:var(--clr-light); }
.clr-unfocus { color:var(--clr-unfocus); }
.clr-bg { color:var(--clr-bg); }
.clr-plate { color:var(--clr-plate); }
.clr-error { color:var(--clr-error); }

.clr-success { color:var(--clr-success); }
.clr-fail { color:var(--clr-fail); }

.clr-on-prim { color:var(--clr-on-prim); }
.clr-on-prim-1 { color:var(--clr-on-prim-1); }
.clr-on-acnt { color:var(--clr-on-acnt); }
.clr-on-bg { color:var(--clr-on-bg); }
.clr-on-plate { color:var(--clr-on-plate); }
.clr-on-error { color:var(--clr-on-error); }

.bg-prim { background-color:var(--clr-prim); }
.bg-prim-1 { background-color:var(--clr-prim-1); }
.bg-acnt { background-color:var(--clr-acnt); }

.bg-link { background-color:var(--clr-link); }
.bg-link-h { background-color:var(--clr-link-h); }
.bg-bg { background-color:var(--clr-bg); }
.bg-plate { background-color:var(--clr-plate); }
.bg-error { background-color:var(--clr-error); }

.bg-on-prim { background-color:var(--clr-on-prim); }
.bg-on-prim-1 { background-color:var(--clr-on-prim-1); }
.bg-on-acnt { background-color:var(--clr-on-acnt); }
.bg-on-bg { background-color:var(--clr-on-bg); }
.bg-on-plate { background-color:var(--clr-on-plate); }
.bg-on-error { background-color:var(--clr-on-error); }

/* TEXT */

.txt-a-cnt { text-align:center; }
.txt-a-lft { text-align:left; }
.txt-a-rht { text-align:right; }

.txt-t-upp { text-transform:uppercase; }
.txt-t-low { text-transform:lowercase; }
.txt-t-cap { text-transform: capitalize; }
.txt-t-non { text-transform:none; }

.txt-d-und { text-decoration:underline; }
.txt-d-ovr { text-decoration:overline; }
.txt-d-non { text-decoration:none; }

/* font-setup */

.fnt-w-n { font-weight:normal; }
.fnt-w-b { font-weight:bold; }
.fnt-s-i { font-style:italic; }
.fnt-s-n { font-style:normal; }

.h1, .h2, .h3, .h4, .h5, .h6 {font-weight:bold;}

.h1 { font-size: var(--dim-h1); }
.h2 { font-size: var(--dim-h2); }
.h3 { font-size: var(--dim-h3); }
.h4 { font-size: var(--dim-h4); }
.h5 { font-size: var(--dim-h5); }
.h6 { font-size: var(--dim-h6); }

.fnt-5r { font-size:0.5rem; }
.fnt-06r { font-size:0.6rem; }
.fnt-07r { font-size:0.7rem; }
.fnt-08r { font-size:0.8rem; }
.fnt-09r { font-size:0.9rem; }
.fnt-10r { font-size:1.0rem; }
.fnt-12r { font-size:1.2rem; }
.fnt-14r { font-size:1.4rem; }
.fnt-16r { font-size:1.6rem; }
.fnt-18r { font-size:1.8rem; }
.fnt-20r { font-size:2.0rem; }

.fnt-10p { font-size:10px; }
.fnt-12p { font-size:12px; }
.fnt-14p { font-size:14px; }
.fnt-16p { font-size:16px; }
.fnt-18p { font-size:18px; }
.fnt-20p { font-size:20px; }

/* width and height */

.w05  {width:  5%;}
.w10  {width: 10%;}
.w15  {width: 15%;}
.w20  {width: 20%;}
.w25  {width: 25%;}
.w30  {width: 30%;}
.w35  {width: 35%;}
.w40  {width: 40%;}
.w45  {width: 45%;}
.w50  {width: 50%;}
.w55  {width: 55%;}
.w60  {width: 60%;}
.w65  {width: 65%;}
.w70  {width: 70%;}
.w75  {width: 75%;}
.w80  {width: 80%;}
.w85  {width: 85%;}
.w90  {width: 90%;}
.w95  {width: 95%;}
.w100 {width:100%;}

.vh05  {height:  5vh;}
.vh10  {height: 10vh;}
.vh15  {height: 15vh;}
.vh20  {height: 20vh;}
.vh25  {height: 25vh;}
.vh30  {height: 30vh;}
.vh35  {height: 35vh;}
.vh40  {height: 40vh;}
.vh45  {height: 45vh;}
.vh50  {height: 50vh;}
.vh55  {height: 55vh;}
.vh60  {height: 60vh;}
.vh65  {height: 65vh;}
.vh70  {height: 70vh;}
.vh75  {height: 75vh;}
.vh80  {height: 80vh;}
.vh85  {height: 85vh;}
.vh90  {height: 90vh;}
.vh95  {height: 95vh;}
.vh100 {height:100vh;}

.h05  {height:  5%;}
.h10  {height: 10%;}
.h15  {height: 15%;}
.h20  {height: 20%;}
.h25  {height: 25%;}
.h30  {height: 30%;}
.h35  {height: 35%;}
.h40  {height: 40%;}
.h45  {height: 45%;}
.h50  {height: 50%;}
.h55  {height: 55%;}
.h60  {height: 60%;}
.h65  {height: 65%;}
.h70  {height: 70%;}
.h75  {height: 75%;}
.h80  {height: 80%;}
.h85  {height: 85%;}
.h90  {height: 90%;}
.h95  {height: 95%;}
.h100 {height:100%;}

/* padding */

.pd-5, .pd-5-c > * { padding:  5px;}
.pd-10, .pd-10-c > * { padding: 10px;}
.pd-15, .pd-15-c > * { padding: 15px;}
.pd-20, .pd-20-c > * { padding: 20px;}
.pd-25, .pd-25-c > * { padding: 25px;}
.pd-30, .pd-30-c > * { padding: 30px;}
.pd-35, .pd-35-c > * { padding: 35px;}
.pd-40, .pd-40-c > * { padding: 40px;}
.pd-45, .pd-45-c > * { padding: 45px;}
.pd-50, .pd-50-c > * { padding: 50px;}

.pdt-5, .pdt-5-c > * { padding-top:  5px;}
.pdt-10, .pdt-10-c > * { padding-top: 10px;}
.pdt-15, .pdt-15-c > * { padding-top: 15px;}
.pdt-20, .pdt-20-c > * { padding-top: 20px;}
.pdt-25, .pdt-25-c > * { padding-top: 25px;}
.pdt-30, .pdt-30-c > * { padding-top: 30px;}
.pdt-35, .pdt-35-c > * { padding-top: 35px;}
.pdt-40, .pdt-40-c > * { padding-top: 40px;}
.pdt-45, .pdt-45-c > * { padding-top: 45px;}
.pdt-50, .pdt-50-c > * { padding-top: 50px;}

.pdb-5, .pdb-5-c > * { padding-bottom:  5px;}
.pdb-10, .pdb-10-c > * { padding-bottom: 10px;}
.pdb-15, .pdb-15-c > * { padding-bottom: 15px;}
.pdb-20, .pdb-20-c > * { padding-bottom: 20px;}
.pdb-25, .pdb-25-c > * { padding-bottom: 25px;}
.pdb-30, .pdb-30-c > * { padding-bottom: 30px;}
.pdb-35, .pdb-35-c > * { padding-bottom: 35px;}
.pdb-40, .pdb-40-c > * { padding-bottom: 40px;}
.pdb-45, .pdb-45-c > * { padding-bottom: 45px;}
.pdb-50, .pdb-50-c > * { padding-bottom: 50px;}

.pdl-5, .pdl-5-c > * { padding-left:  5px;}
.pdl-10, .pdl-10-c > * { padding-left: 10px;}
.pdl-15, .pdl-15-c > * { padding-left: 15px;}
.pdl-20, .pdl-20-c > * { padding-left: 20px;}
.pdl-25, .pdl-25-c > * { padding-left: 25px;}
.pdl-30, .pdl-30-c > * { padding-left: 30px;}
.pdl-35, .pdl-35-c > * { padding-left: 35px;}
.pdl-40, .pdl-40-c > * { padding-left: 40px;}
.pdl-45, .pdl-45-c > * { padding-left: 45px;}
.pdl-50, .pdl-50-c > * { padding-left: 50px;}

.pdr-5, .pdr-5-c > * { padding-right:  5px;}
.pdr-10, .pdr-10-c > * { padding-right: 10px;}
.pdr-15, .pdr-15-c > * { padding-right: 15px;}
.pdr-20, .pdr-20-c > * { padding-right: 20px;}
.pdr-25, .pdr-25-c > * { padding-right: 25px;}
.pdr-30, .pdr-30-c > * { padding-right: 30px;}
.pdr-35, .pdr-35-c > * { padding-right: 35px;}
.pdr-40, .pdr-40-c > * { padding-right: 40px;}
.pdr-45, .pdr-45-c > * { padding-right: 45px;}
.pdr-50, .pdr-50-c > * { padding-right: 50px;}

.pdc-5, .pdc-5-c > * {padding-top:  5px; padding-bottom:  5px; }
.pdc-10, .pdc-10-c > * {padding-top: 10px; padding-bottom: 10px; }
.pdc-15, .pdc-15-c > * {padding-top: 15px; padding-bottom: 15px; }
.pdc-20, .pdc-20-c > * {padding-top: 20px; padding-bottom: 20px; }
.pdc-25, .pdc-25-c > * {padding-top: 25px; padding-bottom: 25px; }
.pdc-30, .pdc-30-c > * {padding-top: 30px; padding-bottom: 30px; }
.pdc-35, .pdc-35-c > * {padding-top: 35px; padding-bottom: 35px; }
.pdc-40, .pdc-40-c > * {padding-top: 40px; padding-bottom: 40px; }
.pdc-45, .pdc-45-c > * {padding-top: 45px; padding-bottom: 45px; }
.pdc-50, .pdc-50-c > * {padding-top: 50px; padding-bottom: 50px; }

.pds-5, .pds-5-c > * {padding-left:  5px; padding-right:  5px; }
.pds-10, .pds-10-c > * {padding-left: 10px; padding-right: 10px; }
.pds-15, .pds-15-c > * {padding-left: 15px; padding-right: 15px; }
.pds-20, .pds-20-c > * {padding-left: 20px; padding-right: 20px; }
.pds-25, .pds-25-c > * {padding-left: 25px; padding-right: 25px; }
.pds-30, .pds-30-c > * {padding-left: 30px; padding-right: 30px; }
.pds-35, .pds-35-c > * {padding-left: 35px; padding-right: 35px; }
.pds-40, .pds-40-c > * {padding-left: 40px; padding-right: 40px; }
.pds-45, .pds-45-c > * {padding-left: 45px; padding-right: 45px; }
.pds-50, .pds-50-c > * {padding-left: 50px; padding-right: 50px; }

/* margin */

.mg-0 {margin: 0!important;}

.mgs-auto {margin:0 auto;}
.mgc-auto {margin:auto 0;}

.mg-5, .mg-5-c > * { margin:  5px;}
.mg-10, .mg-10-c > * { margin: 10px;}
.mg-15, .mg-15-c > * { margin: 15px;}
.mg-20, .mg-20-c > * { margin: 20px;}
.mg-25, .mg-25-c > * { margin: 25px;}
.mg-30, .mg-30-c > * { margin: 30px;}
.mg-35, .mg-35-c > * { margin: 35px;}
.mg-40, .mg-40-c > * { margin: 40px;}
.mg-45, .mg-45-c > * { margin: 45px;}
.mg-50, .mg-50-c > * { margin: 50px;}

.mgt-5, .mgt-5-c > * { margin-top:  5px;}
.mgt-10, .mgt-10-c > * { margin-top: 10px;}
.mgt-15, .mgt-15-c > * { margin-top: 15px;}
.mgt-20, .mgt-20-c > * { margin-top: 20px;}
.mgt-25, .mgt-25-c > * { margin-top: 25px;}
.mgt-30, .mgt-30-c > * { margin-top: 30px;}
.mgt-35, .mgt-35-c > * { margin-top: 35px;}
.mgt-40, .mgt-40-c > * { margin-top: 40px;}
.mgt-45, .mgt-45-c > * { margin-top: 45px;}
.mgt-50, .mgt-50-c > * { margin-top: 50px;}

.mgb-5, .mgb-5-c > * { margin-bottom:  5px;}
.mgb-10, .mgb-10-c > * { margin-bottom: 10px;}
.mgb-15, .mgb-15-c > * { margin-bottom: 15px;}
.mgb-20, .mgb-20-c > * { margin-bottom: 20px;}
.mgb-25, .mgb-25-c > * { margin-bottom: 25px;}
.mgb-30, .mgb-30-c > * { margin-bottom: 30px;}
.mgb-35, .mgb-35-c > * { margin-bottom: 35px;}
.mgb-40, .mgb-40-c > * { margin-bottom: 40px;}
.mgb-45, .mgb-45-c > * { margin-bottom: 45px;}
.mgb-50, .mgb-50-c > * { margin-bottom: 50px;}

.mgl-5, .mgl-5-c > * { margin-left:  5px;}
.mgl-10, .mgl-10-c > * { margin-left: 10px;}
.mgl-15, .mgl-15-c > * { margin-left: 15px;}
.mgl-20, .mgl-20-c > * { margin-left: 20px;}
.mgl-25, .mgl-25-c > * { margin-left: 25px;}
.mgl-30, .mgl-30-c > * { margin-left: 30px;}
.mgl-35, .mgl-35-c > * { margin-left: 35px;}
.mgl-40, .mgl-40-c > * { margin-left: 40px;}
.mgl-45, .mgl-45-c > * { margin-left: 45px;}
.mgl-50, .mgl-50-c > * { margin-left: 50px;}

.mgr-5, .mgr-5-c > * { margin-right:  5px;}
.mgr-10, .mgr-10-c > * { margin-right: 10px;}
.mgr-15, .mgr-15-c > * { margin-right: 15px;}
.mgr-20, .mgr-20-c > * { margin-right: 20px;}
.mgr-25, .mgr-25-c > * { margin-right: 25px;}
.mgr-30, .mgr-30-c > * { margin-right: 30px;}
.mgr-35, .mgr-35-c > * { margin-right: 35px;}
.mgr-40, .mgr-40-c > * { margin-right: 40px;}
.mgr-45, .mgr-45-c > * { margin-right: 45px;}
.mgr-50, .mgr-50-c > * { margin-right: 50px;}

.mgc-5, .mgc-5-c > * {margin-top:  5px; margin-bottom:  5px; }
.mgc-10, .mgc-10-c > * {margin-top: 10px; margin-bottom: 10px; }
.mgc-15, .mgc-15-c > * {margin-top: 15px; margin-bottom: 15px; }
.mgc-20, .mgc-20-c > * {margin-top: 20px; margin-bottom: 20px; }
.mgc-25, .mgc-25-c > * {margin-top: 25px; margin-bottom: 25px; }
.mgc-30, .mgc-30-c > * {margin-top: 30px; margin-bottom: 30px; }
.mgc-35, .mgc-35-c > * {margin-top: 35px; margin-bottom: 35px; }
.mgc-40, .mgc-40-c > * {margin-top: 40px; margin-bottom: 40px; }
.mgc-45, .mgc-45-c > * {margin-top: 45px; margin-bottom: 45px; }
.mgc-50, .mgc-50-c > * {margin-top: 50px; margin-bottom: 50px; }

.mgs-5, .mgs-5-c > * {margin-left:  5px; margin-right:  5px; }
.mgs-10, .mgs-10-c > * {margin-left: 10px; margin-right: 10px; }
.mgs-15, .mgs-15-c > * {margin-left: 15px; margin-right: 15px; }
.mgs-20, .mgs-20-c > * {margin-left: 20px; margin-right: 20px; }
.mgs-25, .mgs-25-c > * {margin-left: 25px; margin-right: 25px; }
.mgs-30, .mgs-30-c > * {margin-left: 30px; margin-right: 30px; }
.mgs-35, .mgs-35-c > * {margin-left: 35px; margin-right: 35px; }
.mgs-40, .mgs-40-c > * {margin-left: 40px; margin-right: 40px; }
.mgs-45, .mgs-45-c > * {margin-left: 45px; margin-right: 45px; }
.mgs-50, .mgs-50-c > * {margin-left: 50px; margin-right: 50px; }

/* modals */

.modal-window {
	position:fixed;
	max-height: 92vh;
	z-index:101;
	display:none;
	left:50%;
	top:50%;
	width:400px;
	border-radius:var(--dim-radius);
	overflow:hidden;
	transform:translate(-50%,-50%);
	box-shadow: 0 0 20px var(--clr-shadow);
}
.modal-window.active { display:block; }

.modal-window .wrapper { background:var(--clr-plate); padding:var(--dim-plate); }
.modal-window .wrapper .caption {color:var(--clr-clr-primary); text-shadow:none;}
.modal-window .title {font-size:1.2rem; color:var(--clr-clr-primary); padding:10px 0; margin-bottom:10px;}

.modal-window form {margin:0;}
.modal-window form button,
.modal-window form input {width:100%;}

.modal-window .long-list {overflow-y:scroll; overflow-x:hidden; max-height:50vh; padding: 0 calc(var(--dim-scroll) * 2) 0 0;}
.modal-window .long-list.fix {height:45vh;}

.modal-window .actions {display:flex; gap:var(--dim-wrapper);}
.modal-window .actions > * {flex:1 0;}
.modal-window .actions a {font-weight:normal; text-align:center;}

/* toast */

#toast {position:fixed; width:100%; height:0; z-index:10000; display:block; bottom:0; left:0;}
#toast .content {transition: all .5s; position:absolute; bottom:0; left:50%; transform:translate(-50%,100%); opacity:0; width:fit-content; padding:var(--dim-wrapper) calc(var(--dim-wrapper) * 2); background:var(--clr-prim); color:var(--clr-on-prim); border-radius:var(--dim-wrapper); text-align:center;}
#toast[data-type="error"] .content {background:var(--clr-error); color:var(--clr-on-error);}
#toast[data-type="success"] .content {background:var(--clr-success); color:var(--clr-on-success);}

#toast {display:block;}
#toast.active .content { bottom:var(--dim-wrapper); transform:translate(-50%,0); top:unset; opacity:1; box-shadow: 0 0 50px var(--clr-shadow);}


/* GENERAL */

.div {height:1px; background:var(--clr-border);}
.pic-box {
    position: relative;
    flex: 0 0 var(--dim-picbox);
    width: var(--dim-picbox);
    height: var(--dim-picbox);
    border-radius: 50%;
    overflow: hidden;
    background: var(--clr-bg);
}
.pic-box:before {
    content: '';
    position: absolute;
    display: block;
    vertical-align: middle;
    top:10%; left:10%;
    width: 80%;
    height: 80%;
    opacity:0.3;
    background: var(--clr-on-bg);
    -webkit-mask: url() no-repeat 50% 50% / contain;
    mask: url() no-repeat 50% 50% / contain;
}

.pic-box img { position:absolute; top: 0; left: 0; width:100%; height:100%; object-fit: cover;}

.spoiler .head {display:flex; gap:10px; align-items:center; padding: var(--dim-wrapper) 0; color:var(--clr-prim); font-weight:bold; cursor: pointer;}
.spoiler .head span {flex:1 1;}
.spoiler .head > * {flex-shrink:0;}
.spoiler .head i { width:1rem; height:1rem; background:var(--clr-prim); -webkit-mask:url(../icons/ic_ch_down.svg) no-repeat 50% 50% / contain; mask:url(../icons/ic_ch_down.svg) no-repeat 50% 50% / contain;}

.spoiler .content { display:none; border-top:1px solid var(--clr-border); padding-top: var(--dim-wrapper); }
.spoiler.active .content { display:block; }
.spoiler.active .head i { -webkit-mask:url(../icons/ic_ch_up.svg) no-repeat 50% 50% / contain; mask:url(../icons/ic_ch_up.svg) no-repeat 50% 50% / contain;}

.indicator {border-radius:50%; padding: 3px; background:var(--clr-prim); color:var(--clr-on-prim); font-weight:normal; width:1rem; height:1rem; line-height:1rem; font-size:0.8rem; text-align:center; display:inline-block;}

.progress {position:relative; border-radius:var(--dim-radius); background:var(--clr-bg); height:var(--dim-progress); box-shadow: inset 0 0 var(--dim-radius) #0003;}
.progress bar {display: block; background:var(--clr-acnt); height:100%; border-radius:var(--dim-radius);}

.loader

.hidden, .hide {display:none!important;}
.hidden.active {display:block;}

.mobile {display:none!important;}

.unselectable {
	-webkit-tap-highlight-color: transparent;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

templates {display:none;}
.sticked { position: fixed; top: 0; z-index:100; }
.stub {display:none;}

.empty .stub {display:flex; justify-content:center; align-items:center; gap:10px;}
.empty .items {display:none;}

#overlay {
	position:fixed;
	display:none;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:100;
	background:var(--clr-overlay);
}

#overlay.active { display:block; }

/* BUTTONS */

.link {display:flex; gap:5px; align-items:center; color:var(--clr-link);}
.link:hover {color:var(--clr-link-h);}
.link .ic:before {background:var(--clr-link);}
.link:hover .ic:before {background:var(--clr-link-h);}

textarea.off,
input.off,
button.off,
.button.off {color:var(--clr-on-off)!important; border-color:var(--clr-on-off)!important; background:var(--clr-off)!important; cursor:default;}

.button {display:flex; gap:5px; align-items:center; justify-content: center;}
.button.small {padding:5px; font-size:0.9rem;}

button, .button {
	--dim-ic:var(--input-fnt-height);
	font: var(--input-fnt-size) / var(--input-fnt-height) var(--input-fnt);
	cursor:pointer;
	border-radius:var(--dim-radius);
	color:var(--clr-on-link);
	background:var(--clr-link);
	border:1px solid transparent;
	padding:var(--dim-wrapper);
}
button:hover, .button:hover {color:var(--clr-on-link); background:var(--clr-link-h); border-color:var(--clr-link-h);}
button .ic:before, .button .ic:before { background:var(--clr-on-link); }

button.outline,
.button.outline {background:none; color:var(--clr-link); border-color:var(--clr-link);}
.button.outline .ic:before { background:var(--clr-link); }

button.prim,
.button.prim {background:var(--clr-prim); color:var(--clr-on-prim);}

button.prim-1,
.button.prim-1 {background:var(--clr-prim-1); color:var(--clr-on-prim-1);}

button.alert,
.button.alert {background:var(--clr-alert); color:var(--clr-on-alert); border-color:var(--clr-alert); }
button.alert:hover, .button.alert:hover {background:var(--clr-alert-h); border-color:var(--clr-alert-h);}

button.big, .button.big {display:block; text-align:center; }

/* FORMS */

form .caption {
	font-size: 1.2rem;
    color: var(--clr-prim);
    border-bottom: 1px solid var(--clr-border);
    padding-bottom: 10px;
    margin-bottom: 20px;
}

form .agreement {
    font-size: 12px;
    padding-left: 30px;
    position: relative;
}
form .agreement:before { background: var(--clr-link); }
form .agreement:after, 
form .agreement:before {
    content: '';
    width: 25px;
    height: 25px;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
}
form .agreement:after {
    background: url(../icons/ic_check.svg) no-repeat center center / 50%;
    filter: invert(1);
}
form .status { text-align: center; }

form .error,
.form .error { color: var(--clr-error); border-color:var(--clr-error); }

.input {position: relative;}
.input input {width:100%; }

.input.iconic input,
.input.icon input {padding-left:2rem;}

.input.icon:before,
.input.iconic .ic { position: absolute; display:block; width: 2rem; height: 100%; }

.input.icon:before,
.input.iconic .ic:before {
	content:'';
	background: var(--clr-on-input);
    -webkit-mask-size: 50%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-size: 50%;
    mask-repeat: no-repeat;
    mask-position: center;
}

.input.iconic:focus-within .ic:before,
.input.icon:focus-within:before { background-color: var(--clr-link); }

.input.iconic.pass .ic:before { -webkit-mask-image:url(../icons/ic-eye-closed.svg); mask-image:url(../icons/ic-eye-closed.svg); }
.input.iconic.pass.active .ic:before { -webkit-mask-image:url(../icons/ic-eye-opened.svg); mask-image:url(../icons/ic-eye-opened.svg); }

.input .reset {position: absolute; width:2rem; height:calc(100% - 2px); right:0; background: var(--clr-input); margin:1px; border-radius: var(--dim-radius); }
.input .reset:before {
	cursor:pointer;
	content: '';
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    background: var(--clr-on-input);
    transition:background 0.5s;
    -webkit-mask: url(../icons/ic_cancel.svg) no-repeat 50% 50% / 50%;
    mask: url(../icons/ic_cancel.svg) no-repeat 50% 50% / 50%;
}
.input .reset:hover:before { background: var(--clr-link); }

.radio, .checkbox, .switch { display:flex; gap:10px; align-items:center; font-size:1rem; line-height:1rem; cursor:pointer; }
.radio input, .checkbox input, .switch input { display: none; }
.radio span, .checkbox span, .switch span { flex-grow: 1; display: block; }
.radio:hover i, .checkbox:hover i, .switch:hover i { background-color: var(--clr-bg); }
.radio i, .checkbox i, .switch i { position: relative; user-select: none; width: 1rem; height: 1rem; flex-shrink: 0; display: block; box-shadow: rgba(0, 0, 0, 0.333) 0px 0px 3px inset; background-color: var(--clr-bg); transition: background-color 0.3s ease 0s; }
.radio i::before, .checkbox i::before, .switch i::before { content: ""; display: block; position: absolute; }

.radio i { border-radius: 50%; }
.radio i::before { left: 25%; top: 25%; width: 50%; height: 50%; border-radius: 50%; opacity: 0; background-color: var(--clr-plate); transform: scale(2); transition: opacity 0.1s ease 0s, transform 0.3s ease 0s; box-shadow: 0 1px 1px var(--clr-shadow);}
.radio input:checked ~ i, .checkbox input:checked ~ i, .switch input:checked ~ i { background-color: var(--clr-link); }
.radio input:checked ~ i::before { opacity: 1; transform: scale(1); }

.checkbox i { border-radius: 3px; }
.checkbox i::before { left: 20%; top: -25%; width: 50%; height: 100%; border-style: solid; border-color: white; border-image: initial; border-width: 0px 3px 3px 0px; opacity: 0; transform: rotate(45deg) scale(1); transition: opacity 0.1s ease 0s, transform 0.3s ease 0s; }
.checkbox input:checked ~ i::before { opacity: 1; transform: rotate(45deg) scale(0.5); }

.switch i { width: 2rem; border-radius: 1rem; }
.switch i::before { left: 0px; width: 50%; height: 100%; margin: -2px 0px 0px -2px; border: 2px solid var(--clr-bg); border-radius: 50%; box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 5px; background-color: var(--clr-plate); transition: left 0.3s ease 0s; }
.switch input:checked ~ i::before { left: 50%; border-color: var(--clr-link); }

/* CONTAINERS */

.container {max-width:950px; margin:0 auto;}
.container img {max-width:100%;}
.wrapper {padding:var(--dim-wrapper);}

.main-content { width:550px; margin:0 auto; padding:0; min-height:100%;}
.side-content { width:200px; padding:0; min-height:100%;}

/* APP BAR */

#app-bar { 
	min-height:30px;
	padding:15px 0;
	position:relative;
	z-index: 1;
	background:var(--clr-prim);
	color:var(--clr-on-prim);
}
#app-bar a {color:var(--clr-plate);}
#app-bar > .row {margin:0 auto; width: fit-content;}

#app-bar .ic { width: 24px; height: 24px; cursor:pointer; }
#app-bar .actions {font-size:0;}
#app-bar .actions a { display:inline-block; margin-right:10px; vertical-align:middle;}

#app-bar .main-content { display:flex; align-items:center; }
#app-bar .home { margin: 0 var(--dim-wrapper); opacity:0.7; }
#app-bar .title { margin: 0 var(--dim-wrapper); font-size:22px; line-height:30px; flex-grow:1; }

#app-bar .sub { display:none; }
#app-bar .title.wsub {font-size:1rem; line-height:1.2rem;}
#app-bar .title.wsub .sub {display:block; font-size:0.8rem; line-height:0.8rem; height: 12px; overflow: hidden;}

#app-bar .ic:before { background: var(--clr-on-prim); }
#app-bar .pic-box {flex-basis:2rem; width:2rem; height:2rem; margin:0 10px 0 0;}

/* MAIN MENU */

#main-menu .wrapper {display:flex; flex-direction:column;}

#main-menu { height: 100%; overflow:hidden; }
#main-menu .user { display: none; }

#main-menu .user a { display:block; height:30px; font-size:18px; line-height:30px; }
#main-menu .user .ic {vertical-align: middle; margin:0 10px 0 0; width:30px; height:30px; padding:0;}
#main-menu .user .ic:before {background:var(--clr-plate);}

#main-menu .menu { border-radius:var(--dim-radius); background: var(--clr-plate); overflow:hidden;}
#main-menu .menu a { display:block; line-height:25px; margin:0; font-size:14px; padding:10px; color: var(--clr-prim); border-bottom: 1px solid var(--clr-border); }
#main-menu .menu a .ic {vertical-align: middle; margin:0 5px; width:20px; height:20px; }
#main-menu .menu a .ic:before { background:var(--clr-prim); }
#main-menu .menu a span {vertical-align: middle; }

#main-menu .menu a:hover {background: var(--clr-light);}
#main-menu .menu a.active { color:var(--clr-on-prim); background:var(--clr-prim); }
#main-menu .menu a.active .ic:before { background:var(--clr-on-prim); }

/* SEARCH */

.search-form.active {display:block;}
.search-form { display:none; position:relative; padding:10px; border-radius: 0 0 10px 10px; }
.search-form input { width:100%; padding-right: 30px; }
.search-form a {position:absolute; top:0; right:var(--dim-wrapper); opacity: 0.5; width:30px; height:100%; display:block;}
.search-form a .ic {height:100%; margin: 0 auto; display: block;}

/* TAB-CONTROL */

.panels .panel { display:none; }
.panels .panel.active { display:block; }

.tab-ctrl { display: flex; background:var(--clr-prim); }
.tab-ctrl a.icon { flex:0 1 auto; padding: 10px 15px;}
.tab-ctrl a:hover { background:var(--clr-light); }
.tab-ctrl a i.counter {
	background: var(--clr-on-plate);
    color: var(--clr-plate);
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    width: 1.4rem;
    font-size: 0.8rem;
    line-height: 1.4rem;
    font-style: normal;
}
.tab-ctrl a {
	flex-basis: 100%;
	color:var(--clr-on-prim);
	display:flex;
	gap:5px;
	justify-content: center;
	line-height: 20px;
	cursor:pointer;
	text-align: center;
	text-transform:uppercase;
	padding:10px 5px;
	border-bottom: 2px solid transparent;
	transition: background 0.5s;
}
.tab-ctrl a .ic:before { background-color:var(--clr-on-prim); }
.tab-ctrl a.active { border-color: var(--clr-acnt); color:var(--clr-acnt); }
.tab-ctrl a.active .ic:before { background-color:var(--clr-acnt); }

.chooser {display: flex; border-radius:var(--dim-radius);  background: var(--clr-bg);}
.chooser a { flex-basis: 100%; padding:var(--dim-radius); border-radius:var(--dim-radius); text-align: center; color:var(--clr-on-bg); border-right: 1px solid var(--clr-border);}
.chooser a:last-child {border-right:none;}
.chooser a:hover {opacity:0.8;}
.chooser a.active {background: var(--clr-link); color: var(--clr-on-link); border-color: transparent;}
.chooser a:has(+ a.active) { border-color: transparent; }


.side-content .tab-ctrl { 
	flex-direction: column;
	overflow:hidden;
	border-radius:var(--dim-radius);
}
.side-content .tab-ctrl a {
	border:none;
	text-align: left;
	justify-content: left;
	padding:10px 20px;
}
.side-content .tab-ctrl { background: var(--clr-plate); }
.side-content .tab-ctrl a { color:#777; border-bottom: 1px solid var(--clr-border); }
.side-content .tab-ctrl a:last-child {border:none;}
.side-content .tab-ctrl a .ic:before { background-color:var(--clr-prim); }
.side-content .tab-ctrl a:hover { background:var(--clr-light); }
.side-content .tab-ctrl a.active { background:var(--clr-prim); color:var(--clr-on-prim); font-weight:bold;}
.side-content .tab-ctrl a.active .ic:before { background-color:var(--clr-on-prim); }

.tab-ctrl.flat {background:none;}
.tab-ctrl.flat a {color:#000;}
.tab-ctrl.flat a.active {color:var(--clr-acnt);}

/* SUB-MENU */

[data-menu] {cursor:pointer;}

.sub-menu { z-index: 115; display:none; width: fit-content; position:absolute; border-radius:10px; overflow:hidden; background:var(--clr-plate); box-shadow:0 0 10px #0003;}
.sub-menu.opened,
.sub-menu.active { display:block; }
.sub-menu a {display:block; color:var(--clr-prim); border-bottom:1px solid transparent; border-color:#eee; line-height:20px; padding: 10px 15px 10px 10px;}
.sub-menu a:active { background: var(--clr-light); }
.sub-menu a .ic { opacity:0.5; width:20px; height:20px; margin:0 5px; vertical-align:middle;}
.sub-menu a .ic:before {background-color:var(--clr-prim); }
.sub-menu a:last-child {border-bottom:none;}
.sub-menu a:hover { color:#000; background:#f7f7f7; }
.sub-menu a:hover .ic:before {background-color:#000;}

/* effects */

.scale-110p {transition:all 0.5s;}
.scale-110p:hover {transform:scale(1.1);}