@import 'fontello.css';

* {margin: 0; padding: 0; box-sizing: border-box;}

@font-face {
	font-family: 'Montserrat'; 
	src: url(fonts/montserrat.ttf); 
}

body, html, .popup {height: 100%; width: 100%;}
.wrapper, .popup, .body, .left ul, .row{display: flex;}

input, button, .header, div, a ul{border-radius: 8px;}

dl, ul {list-style: none !important;}

body {
	background-color: var(--bg-grey);
    color: var(--black);
    margin: 0; padding: 0;
	font-size: 15px;
}

.wrapper, .popup{
	align-items: center;
	flex-direction: column;
	font-family: Montserrat, Arial, sans-serif;
	font-size: 15px;
	width: 100%;
}

.wrapper > div{width: 700px;}
.body > div:first-child{margin-right: 10px;}
.body > div{width: 345px;}
.body > div{margin-top: 10px;}

.left ul li{flex: 1; padding: 10px 10px 10px 0;}
.left ul li:first-child{text-align: right; color: var(--orange);}

.right > ul > li{margin-bottom: 10px;}
.right h3{padding: 0 0 4px 10px; font-size: 12px; color: var(--orange);}

.row li{flex: 1;}
.row li:not(:first-child){margin-left: 4px;}
.header, input[type="submit"]{text-align: center; background-color: var(--green); color: var(--white)}
input, button, .header{
	font-size: 15px;
	border: 1px solid var(--green);
	padding: 8px 10px;
	width: 100%;
}
input, button{ margin: 0 0 5px 0;}
button{background-color: var(--bg-green);}
input.symbolRub{
	padding-left: 24px;
    background-image: url("svg/rub.svg");
	background-repeat: no-repeat;
	background-position: left 5px top 7px;
}
input::placeholder, textarea::placeholder{color: var(--green);font-size: 13px;}
button:active, button:focus, input:active, input:focus, select:active, select:focus, textarea:focus {outline: none;}



.header{margin-top: 20px; position: relative; cursor: pointer;}
.header span { position: absolute; right: 0; top: 9px; z-index: 1;}
.box_error{
	border: 1px solid var(--red);
	background-color: var(--bg-orange);
	text-align: center;
	margin-top: 10px;
	padding: 10px;
}

.box_orange{
	border: 1px solid var(--orange);
	background-color: var(--bg-orange);
	padding: 10px;
}

.box_green, .news, .auth{
	border: 1px solid var(--green);
	background-color: var(--bg-green);
	padding: 10px;
	height: auto;
}

.box_green p, .auth p, .box_orange p{padding-top:10px;}


.auth {background-color: var(--bg-grey);}
.auth span{font-size: 12px;padding: 0 0 0 10px;}
.auth > div{padding-top: 10px;}
.auth > div:last-child{padding-top: 20px;}
.auth img {
    width: 100%;
    height: auto;
    display: block;
}
.white_bg {background-color: var(--white);}
/* 
.container {
    width: 100%;
    max-width: 800px;
    height: auto;
} */


.small {font-size: 12px;}
.big {font-size: 18px;}
.bold {font-weight: bold;}
.hide {display: none;}
.nowrap{white-space: nowrap;}
.center{text-align: center;}

grey, .grey {color: var(--grey);}
.red{color: var(--red);}
.blue{color: var(--blue);}
.rose{color: var(--rose);}
.white{color: var(--white);}
.green{color: var(--green);}
.orange{color: var(--orange);}

.news li{flex: initial; padding: 4px 0 8px 0; font-size: 13px; }
.news li:first-child{color: var(--green); font-weight: bold;}
.news dl{justify-content: space-between;}



a, a:visited, a:link { color: var(--green); text-decoration: none;}
a.orange, a.orange:visited, a.orange:link { color: var(--orange); text-decoration: none; }
.right a:hover { text-decoration: underline; }
a.orange:hover { text-decoration: underline; }



section {
    position: relative;
    display: inline-block;
    width: 100%;
}
section .fontello {
    position: absolute;
	padding: 0; margin: 0;
    right: 8px; bottom: 9px;
	color: var(--color-orange);
    user-select: none;
	/* font-size: 18px; */

	width: 25px; height: 25px;
	justify-content: center;
	align-items: center;
	display: flex;
}

.inputFontello.fontello{
	color: var(--green);
	/* background-color: var(--bg-grey); */
	border-radius: calc(var(--radius) - 2px);
    cursor: pointer;
}

.divider td{border-bottom: 1px solid #c9c8c8;}
.report {width: 100%}
.report td{padding: 2px; font-size: 14px;}
.report td:first-child{text-align: right;}
.report td:not(:nth-child(2)){color: var(--green); white-space: nowrap;}

/* .addons p{padding: 0;} */
.addons p{padding: 8px 0 0 0;}

a ul { background-color: var(--white); }
a:hover ul{ background-color: var(--bg-green); }

@media (max-width: 740px) {
	.body{flex-direction: column;}
	.wrapper > div, .body > div{width: 100%;}
	.wrapper{ padding: 0 20px;}
}

/* --- debug --- */
ol.debug, ol.debug pre {
    margin: 0;
    padding: 0;
    font-size: 11px;
}
ol.debug > li:first-child{padding-top: 20px}
ol.debug {margin: 0 5px; padding-left: 5px;}