/* common */

:root{
	--footer-height:12vw;
}

html, body{
	height:100%;
}

html,
body, main {
	border: none;
	padding: 0;
	font-family: 'Arial',sans-serif;
	width: 100%;
	margin: 0 auto;
	transition: all 0.6s ease;
}

h1,h2,h3,h4,h5,h6{
	color: #39A95E;
}

main h1{
	font-size: 3.3vw;
	font-weight: bold;
	text-align:center;
}

/*
label:after{
	content:':';
}
*/

input[type="number"]{
	text-align:right;
}

input[type=number]::-webkit-inner-spin-button{
	opacity:1;
}

/*
https://stackoverflow.com/questions/32505389/how-can-i-add-padding-right-to-an-input-type-number-when-aligning-right
-->
*/

input::-webkit-inner-spin-button { margin-left: 5px; }
input::-webkit-outer-spin-button { margin-left: 5px; }

input[type=number] {/* todo check */
	-moz-appearance:textfield;
}
/*
<--
*/


input.error::placeholder{
	color:red;
}

/* -> windows ----------------------------------------------todo вынести в оконный css*/

.modal-container .win-back{
	inset:0;
	position:fixed;
	background-color: rgba(0,0,0,0.5);
	padding:5px;
	display:flex;
	overflow:auto;
}

.modal-container .win-container{
	position:relative;
	margin:auto;
}

.modal-container .win-close{
	position:absolute;
	right:7px;
	top:0;
	color: #aaa;
	font-size: 28px;
}

.modal-container .win-close:hover{
	color:black;
	font-weight:bold;
	cursor:pointer;
}

.modal-container h1{
	text-align:center;
	color: #014D1A;
	font-size: 20px;
	margin: 0px 0 20px  0;
}

.modal-container .win-content{
	padding:10px 20px;
	border-radius:5px;
}

.modal-container .win-simple .win-content{
	background-color:#fff;
	min-width:150px;
}

.modal-container .win-tabs .win-content{
	background-color:#e6e6e6;
}

.modal-container .win-max .win-content{
	width:calc(92vw - 50px);
}

.modal-container .modal-win-buttons{
	display:flex;
	justify-content:center;
	column-gap:10px;
	margin-top:15px;
}

.modal-container input, .modal-container textarea, .modal-container select{
	padding:3px;
}

.modal-container textarea{
	height:5em;
}

.modal-container .modal-win-buttons .btn{/*todo перенести в класс кнопок, например btn-min-width-80*/
	padding:10px;
	min-width:80px;
}

.modal-container .inputs-container li{/* todo не уверен, что этот класс нужно определить здесь */
	font-size: 13px;
	color: red;
	margin-right: 5px;
}

.modal-container .alert-danger{
	color:red;
	margin-bottom:5px;
}

.modal-container .check-box-container{
	display:flex;
	align-items:center;
	flex-direction:row;
	column-gap:5px;
}

/* check human todo поместить в css без авторизации*/

.modal-container .check_human{
	display:flex;
	flex-direction:row;
	align-items:center;
	column-gap:3px;
}

.modal-container .check_human input{
	border: 1px solid #b3b3b3;
	height: 20px;
	max-width: 150px;
	width: 50px;
	box-sizing: border-box;
}
.modal-container .check_human img{
	max-width: 13px;
	width: 100%;
	height: auto;
	opacity: 0.6
}
.modal-container .check_human label {
	margin: 0 10px 0 0;
}

/* win tabs */

.modal-container .tab-container{
	padding-top:10px;
}

.modal-container .tab-container .type-buttons{
	overflow:hidden;
}

.modal-container .tab-container .type-buttons li{
	display: block;
	background-color: inherit;
	float: left;
	border: 1px solid #ccc;
	outline: none;
	cursor: pointer;
	padding: 14px 16px;
	transition: 0.3s;
	font-size: 16px;
	font-weight: 500;
	text-align: left;
}

.modal-container .tab-container .type-buttons li:hover {
	background-color:#f8f8f8;
}

.modal-container .tab-container .type-buttons .tab-radius-left{
	border-top-left-radius: 15px;
}

.modal-container .tab-container .type-buttons .tab-radius-right{
	border-top-right-radius: 15px;
}

.modal-container .tab-container .tabcontent{
	overflow:hidden;
	padding:25px;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	background-color:#FFF;
	border-bottom-right-radius: 15px;
	border-bottom-left-radius: 15px;
	border-top-right-radius: 15px;
}

.modal-container .tab-container .tabcontent-item{
	display: none;
	border-top: none;
	width: 96%;
}

/* <- windows -------------------------------------------*/

.wrapper{
	min-height:100%;
	width:100%;
	position:relative;
}

.container{
	padding-bottom:var(--footer-height);
}

.common-wrapper{
	padding:0 10px;
}

/* header */
header{
	background-color:#EDECEA;
	padding: 10px 0;
}

header .common-wrapper{
	display:flex;
	justify-content:space-between;
	align-items:center;/*todo test for need*/
}

header .logo-wrapper img{
	width:150px;
}

header .contacts{
	display:flex;
	column-gap:35px;
}

header .social-icons .fa-twitter:hover{
	color:#1C96E9;
}

header .social-icons .fa-instagram:hover{
	color:#E90071;
}

header .social-icons .fa-youtube:hover{
	color:#D94A3E;
}

header .social-icons .fa-facebook:hover{
	color:#3F64AC;
}

header .social-icons .fa-telegram:hover{
	color:#02A2DA;
}

header .support-contacts{
	display: flex;
	column-gap:15px;
	align-items: center;
}

header .social-icons{
	display: flex;
	column-gap:7px;
}

header .text{
	font-size:16px;
}

header .text, header a{
	color:#757575;
}

/* buttons */
.btn{
	border-radius:0.5vw;
	display:inline-block;
	cursor:pointer;
	font-family:Arial;
	font-weight:bold;
	text-decoration:none;
	text-align:center;
	border:none;
}

.btn:active:not([disabled]){
	position:relative;
	top:1px;
}

.btn-primary:not([disabled]){
	background-color:#2C7C40;
	color:#ffffff;
	text-shadow:0px 1px 0px #3d768a;
}

.btn-primary:hover:not([disabled]){
	background-color:#014D1A;
}

.btn-secondary:not([disabled]){
	background-color:#EDECEA;
	color:#014D1A;
	text-shadow:0px 1px 0px #ffffff;
}

.btn-secondary:hover:not([disabled]){
	background-color:#dfdfdf;
}

.btn:disabled{
	background-color:#ddd;
	color:#ffffff;
	text-shadow:0px 1px 0px #3d768a;
}

.btn-padding-5px{
	padding:5px;
}

/* service header */

.service-header{
	background-color:#014D1A;
	padding-top:5px;
	padding-bottom:5px;
}

.service-header .common-actions{
	display:flex;
	column-gap:20px;
	justify-content:flex-end;
}

.service-header .common-actions a{
	color:#ffffff;
}

.service-header .common-actions i{
	margin-right:5px;
}

.service-header #menu i{
	margin-right:5px;
}

/* footer */

footer{
	background: #014D1A;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height:var(--footer-height);
}

footer .common-wrapper{
	padding:2vw;
}

footer .top{
	display:flex;
	justify-content:space-between;
	align-items:center;
	column-gap:1vw;
}

footer .logo-wrapper{
	margin-bottom:1.5vw;
}

footer .logo-wrapper object{
	width:15vw;
}

footer .slogan{
	color:#FFFFFF;
	font-size:1.2vw;
}

footer .support-contacts{
	display:contents;
}

footer .contacts{
	display:flex;
	column-gap:2vw;
	align-items:center;
}

footer .social-icons{
	display: flex;
	column-gap:1vw;
}

footer a, footer .text{
	color:#FFFFFF;
	font-size:1.2vw;
}
/* media -> */

@media(width < 1000px){

	:root{
		--footer-height:150px;
	}

footer .common-wrapper{
	padding:30px;
}

	footer .top{
		flex-wrap:wrap;
		column-gap:50px;
		row-gap:30px;
	}

	footer .slogan, footer a, footer .text{
		font-size:15px;
	}

	footer .logo-wrapper object{
		width:150px;
	}

	footer .contacts{
		column-gap:30px;
	}

}

@media(width < 700px){

	:root{
		--footer-height:210px;
	}

	header .text{
		display:none;
	}

}

@media(max-width < 500px){

}

@media (max-width:650px){

}

@media(max-width:500px){

}

@media(max-width:380px){

}