:root {
	--index-body-change-theme:#00000000;
	--ip-loader:#74bff6;
	--text-color: #434343;
	--border-color: #d2d2d26e;
	--main-bg-color: #fff;
	--action-title-color: #7D6546;
	--alt-border-color:#0ea406;
	--color-button-ok:#fff;
	--color-button-ok-hover:#0ea406;
	--bgcolor-button-ok:#0ea406;
	--bgcolor-button-ok-hover:#fff;
	--a-color:#2494f5;
	--a-color-hover:#860c23;
	--lite-shadow:#00000040;
	--dropdown-item-hover:#6376842e;
	--bg-modal-header:#74bff6;
	--color-modal-header:#fff;

}

.dark-mode {
	--index-body-change-theme:#00000070;
	--ip-loader:#2f4250;
	--text-color: #e9e9e9;
	--border-color: #424f58;
	--main-bg-color: #2f4250;
	--action-title-color: #BEA37F;
	--alt-border-color:#637684;
	--color-button-ok:#e9e9e9;
	--color-button-ok-hover:#849daf;
	--bgcolor-button-ok:#167e11;
	--bgcolor-button-ok-hover:#2f4250;
	--a-color:#74bdfc;
	--a-color-hover:#fff;
	--lite-shadow:#ffffff75;
	--dropdown-item-hover:#637684;
	--bg-modal-header:#3b4f5d;
	--color-modal-header:#ffffffd1;
}
html, body{
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	scrollbar-width: none;
}
::-webkit-scrollbar {
	width: 5px;
	height: 7px;
}

::-webkit-scrollbar-button {
	width: 0px;
	height: 0px;
}
::-webkit-scrollbar-thumb {
	background: #637684;
}
::-webkit-scrollbar-thumb:hover {
	background: #ccc;
}
::-webkit-scrollbar-thumb:active {
	background: #860c23;
}
::-webkit-scrollbar-track {
	background: #2f4250;
}
::-webkit-scrollbar-track:active {
	background: #2f4250;
}
img{
	width: 100%;
	height:auto;
}
a{
	color: var(--a-color);
}
a:hover{
	color: var(--a-color-hover);
}
select:hover{
	cursor: pointer;
}

input:active, input:focus, textarea:active, textarea:focus, select:active, select:focus, button:active, button:focus, .close:not(:disabled):not(.disabled){
	outline:none;
}
.futer-text input:focus, #errorsModal .error-modal-form input#email:focus, textarea:focus{
	box-shadow: inset 0px 0px 30px -10px #d2ba0e;
}
a, #promoModal button, .futer-text button, .checkbox + label:after, .checkbox + label:before{
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}





/*index**********************************************************************************************************************************************/
.index-body{
	background-color: #0ea406;
}
.index-body-change-theme{
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;
	width: 100%;
	z-index: 1;
	background-color: var(--index-body-change-theme);
}
.ip-container{
	background-color: #fefefe;
}
.logo_svg_pre{
	width: 180px;
	height: 180px;
	position: absolute;
	left: 50%;
	margin-left: -89px;
	bottom: 50%;
	margin-bottom: -91px;
	background: var(--ip-loader);
	border-radius: 90px;
	padding: 10px;
}

.ip-header {
	position: fixed;
	top: 0;
	z-index: 100;
	min-height: 460px;
	width: 100%;
	height: 100%;
	background: var(--main-bg-color);
	box-shadow: inset 0px 0px 77px 5px rgba(0,0,0,0.2);
}

.ip-logo,
.ip-loader {
	position: absolute;
	left: 0;
	width: 100%;
	opacity: 0;
	cursor: default;
	pointer-events: none;
}

.ip-logo {
	top: 0;
	height: 100%;
	-webkit-transform: translate3d(0,25%,0);
	transform: translate3d(0,25%,0);
}

.ip-loader {
	bottom: 50%;
	margin-bottom: -120px;
}

.ip-header .ip-inner {
	display: block;
	margin: 0 auto;
	z-index: 1000;
}

.ip-header .ip-logo svg {
	position: absolute;
	min-height: 200px;
	height: 25%;
}

.loaded .ip-header .ip-logo svg {
	max-height: 300px;
}

.ip-header .ip-logo svg path {
	fill: #fff;
}

.ip-header .ip-loader svg path {
	fill: none;
	stroke-width: 2;
}

.ip-header .ip-loader svg path.ip-loader-circlebg {
	stroke: var(--border-color);
}

.ip-header .ip-loader svg path.ip-loader-circle {
	-webkit-transition: stroke-dashoffset 0.2s;
	transition: stroke-dashoffset 0.2s;
	stroke: var(--color-button-ok);
}
.loading .ip-logo,
.loading .ip-loader {
	opacity: 1;
}

.loading .ip-logo {
	-webkit-animation: animInitialLogo 1s cubic-bezier(0.7,0,0.3,1) both;
	animation: animInitialLogo 1s cubic-bezier(0.7,0,0.3,1) both;
}

@-webkit-keyframes animInitialLogo {
	from { opacity: 0; }
}

@keyframes animInitialLogo {
	from { opacity: 0; }
}

.loading .ip-loader {
	-webkit-animation: animInitialLoader 1s cubic-bezier(0.7,0,0.3,1) both;
	animation: animInitialLoader 1s cubic-bezier(0.7,0,0.3,1) both;
}

@-webkit-keyframes animInitialLoader {
	from { opacity: 0; -webkit-transform: scale3d(0.5,0.5,1); }
}

@keyframes animInitialLoader {
	from { opacity: 0; -webkit-transform: scale3d(0.5,0.5,1); transform: scale3d(0.5,0.5,1); }
}
.loaded .ip-header {
	-webkit-animation: animLoadedHeader 1s cubic-bezier(0.7,0,0.3,1) forwards;
	animation: animLoadedHeader 1s cubic-bezier(0.7,0,0.3,1) forwards;
}

@-webkit-keyframes animLoadedHeader {
	to { -webkit-transform: translate3d(0,-100%,0); }
}

@keyframes animLoadedHeader {
	to { -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0); }
}
.index-top{
	display: flex;
	background-image: url(../files/img/site/bg_menu.jpg);
	background-size: 100% 1000px;
}
.index-logo{
	color: #fff;
	font-size: 32px;
	font-weight: 400;
	line-height: 0;
	height: 90px;
	width: 210px;
	padding:16px 12px;
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none;   /* Chrome/Safari/Opera */
	-moz-user-select: none;      /* Firefox */
	-ms-user-select: none;       /* Internet Explorer/Edge */
	user-select: none;
	cursor: default; 
	z-index: 2;
}
.index-logo>img {
	margin-right: 10px;
	position: relative;
	top: 1px;
	left: 5px;
	display: inline;
	max-width: 40px;
	min-width: 0;
	height: 40px;
}
.index-logo>a {
	color: #fff;
}
.index-logo>a:hover {
	text-decoration: none;
	text-shadow: 0 0 5px #047;
}
span.slogan-logo {
	font-size: 10.4px;
	font-weight: 400;
	top: -15px;
	position: relative;
	left: 53px;
}
.index-logout{
	position: fixed;
	width: 200px;
	right: 0;
	top: 0;
	z-index: 99;
	text-align: right;
}
.index-radio{
	position: fixed;
	width: 200px;
	right: 0;
	bottom: 8px;
	z-index: 99;
	text-align: right;
}
.index-logout i, .index-radio .dropdown-item i{
	color: var(--a-color-hover);
	margin:0 5px;
	/*text-shadow: 0px 0px 15px #fff;*/
}
.index-logout .btn{
	color: #fff;
	border-radius: 0;
	box-shadow: 0 0 0 0;
	padding: 5px 18px;
}
.index-radio .btn{
	color: #fff;
	border-radius: 0;
	box-shadow: 0 0 0 0;
	padding: 5px 18px 5px 110px;
}
div[aria-labelledby="dropdownMenuRadio"]{
	left: 30px;
	min-width: 135px;
}
.dropdown-menu{
	color: var(--action-title-color);
	background-color: var(--main-bg-color);
	border: 1px solid var(--border-color);
	padding: 2px;
	margin-left: 25px;
}
.dropdown-item{
	border-bottom: 1px solid var(--border-color);
	color: var(--a-color-hover);
}
.index-radio .dropdown .dropdown-item:hover, .index-radio .dropdown .dropdown-item i:hover,
.index-logout .dropdown .dropdown-item:hover, .index-logout .dropdown .dropdown-item i:hover{
	background-color: var(--dropdown-item-hover);
	color: var(--a-color-hover);
}
.dropdown-menu .checkbox.change_theme + label:after {
	content: '\f185';
	font-family: 'Font Awesome 5 Free';
	position: absolute;
	left: 50%;
	width: 40px;
	margin-left: -23px;
	text-align: center;
	color: #777;
}
.dropdown-menu .checkbox.change_theme:checked + label:before {
	left: 50%;
	width: 70px;
	margin-left: -26px;
}
.dropdown-menu .checkbox.change_theme:checked + label:after {
	content: '\f6c3';
	font-weight: 900;
	left: 50%;
	width: 40px;
	margin-left: 2px;
}
.dropdown-menu .checkbox.change_theme + label:before {
	left: 50%;
	width: 70px;
	margin-left: -25px;
}
.index-logout .dropdown p{
	padding: 3px 0;
}
.row.item-modal-box{
	padding:25px 15px;
}
.item-modal-box .col-sm-12 h5{
	text-align: center;
	margin-bottom: 15px;
	color: var(--action-title-color);
}
.item-modal-box-a-mo{
	position: absolute;
	right: 15px;
	bottom: 0;	
}
.index-logout .btn:hover, .index-radio .btn:hover{
	background-color: #364d65;
}
.index-logout .dropdown-item:hover, .index-radio .dropdown-item:hover{
	background-color: #ccc;
}
.index-radio .dropdown-item.u_play_radio{
	background-color: #cccccc73;
}
.icon::before {
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
}

.index-radio .dropdown-item.u_play_radio::before{
	font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f144";
	padding: 0 2px;
	color: #920935;
	font-size: 18px;
}
.index-radio .dropdown-item::before{
	font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f28b";
	padding: 0 5px 0 5px;
	font-size: 12px;
	font-weight: 600;
	color: #ababab;
}
.slider_par{
	overflow: hidden;
}
#scene{
	margin: -3px -40px;
	border:none;
}
#area {
	position: relative;
}
#item {
	width: 20px;
	height: 300px;
	position: absolute;
}
.index-futer{
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #0ea406;
}
.index-login{
	padding-top: 20px;
}
.index-login button, .futer-text button, .error-modal-form button{
	padding: 5px 10px;
	cursor: pointer;
	border-radius: 4px;
	background-color: var(--bgcolor-button-ok);
	color: var(--color-button-ok);
	border: 1px solid var(--alt-border-color);

}
.index-login button:hover, .futer-text button:hover, .error-modal-form button:hover{
	background-color: var(--bgcolor-button-ok-hover);
	color: var( --color-button-ok-hover);
}
.foo-img-forest{
	width: 100px;
	height: auto;

}
.foo-img-fuel{
	width: 290px;
	height: auto;
	margin-bottom: -1px;
}
.futer-road{
	background-color: #2f4250;
	height: 50px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.futer-text{
	position: absolute;
	width: 300px;
	left: 50%;
	top: 50%;
	border: 1px solid var(--border-color);
	border-radius: .3rem;
	margin-left: -150px;
	margin-top: -107px;
	background-color: var(--main-bg-color);
	padding: 40px 30px 30px 30px;
	box-shadow: 0px 0px 30px 0px #00000029;
	z-index: 2;
}
.futer-text input{
	width: 100%;
	margin: 2px;
	padding: 5px 10px;
	background: var(--main-bg-color);
	color: var(--text-color);
	border: none;
	box-shadow: inset 0px 0px 30px -10px var(--lite-shadow);
}

.futer-text button{
	width: 100%;
	margin: 20px 2px 10px 2px;
}
.futer-text p{
	margin-top: 0;
	margin-bottom: 0;
	text-align: center;
}
.index-form a{
	color: #777;
}
.index-form a:hover{
	text-decoration: none;
	color: #fff;
}
.futer-copy{
	position: absolute;
	width: 160px;
	margin-left: 20px; 
	color: #777;
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none;   /* Chrome/Safari/Opera */
	-moz-user-select: none;      /* Firefox */
	-ms-user-select: none;       /* Internet Explorer/Edge */
	user-select: none;
	cursor: default; 
	display: inline-block;
	z-index: 2;
}
.index-form{
	z-index: 2;
	text-align: center;
	width: 100%;
}
.modal-content{
	background-color: var(--main-bg-color);
	border: 1px solid var(--border-color);
	color: var(--text-color);
}
.checkbox {
	position: absolute;
	z-index: -1;
	opacity: 0;
	margin: 10px 0 0 20px;
}
.checkbox + label {
	position: relative;
	padding: 0 0 0 60px;
	cursor: pointer;
}
.checkbox.change_theme + label{
	width: 140px;
	font-size: 0.9em;
}
.checkbox.change_theme + label:before {
	content: '\f6c3';
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	position: absolute;
	top: -4px;
	left: 0;
	width: 140px;
	height: 26px;
	text-align: right;
	padding: 2px 7px;
	color: #fff;
	border-radius: 13px;
	background: #63768461;
	box-shadow: inset 0 2px 3px rgba(0,0,0,.2);
}
.checkbox.change_theme + label:after {
	content: 'Дневная тема';
	position: absolute;
	top: -2px;
	left: 2px;
	width: 110px;
	height: 22px;
	border-radius: 10px;
	background: #FFF;
	box-shadow: 0 2px 5px rgba(0,0,0,.3);
}
.checkbox.change_theme:checked + label:before {
	content: '\f185';
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	position: absolute;
	top: -4px;
	left: 0;
	width: 139px;
	height: 26px;
	text-align: left;
	padding: 2px 7px;
	color: #fff;
	border-radius: 13px;
	background: var(--alt-border-color);
	box-shadow: inset 0 2px 3px rgba(0,0,0,.2);
}
.checkbox.change_theme:checked + label:after {
	content: 'Ночная тема';
	position: absolute;
	top: -2px;
	width: 110px;
	height: 22px;
	border-radius: 10px;
	color: #fff;
	background: var(--main-bg-color);
	box-shadow: 0 2px 5px rgba(0,0,0,.3);
	left: 27px;
}
.checkbox.change_theme:focus + label:before {
	box-shadow: none;
}
.checkbox + label:before {
	content: '';
	position: absolute;
	top: -4px;
	left: 0;
	width: 140px;
	height: 26px;
	border-radius: 13px;
	background: #CDD1DA;
	box-shadow: inset 0 2px 3px rgba(0,0,0,.2);
}
.checkbox + label:after {
	content: '';
	position: absolute;
	top: -2px;
	left: 2px;
	width: 22px;
	height: 22px;
	border-radius: 10px;
	background: #FFF;
	box-shadow: 0 2px 5px rgba(0,0,0,.3);
}
.checkbox:checked + label:before {
	background: #0ea406;
}
.checkbox:checked + label:after {
	left: 26px;
}
.checkbox:checked:hover + label:before{
	background-color: #baa900;
}
.checkbox:hover + label:before{
	background-color: #2f4250;
}
.modal-header{
	background-color: var(--bg-modal-header);
	color: var(--color-modal-header);
	border-color: var(--border-color);
	padding: 5px 10px;
}
.modal-header .close {
	color: #fff;
	text-shadow: none;
	opacity: 1;
}

#errorsModal  .error-modal-title{	
	text-align: center;
	font-size: 16px;
	color: var(--action-title-color);
	font-weight: 500;
}
#errorsModal  .error-modal-title, #errorsModal .error-modal-body, #errorsModal .error-modal-form{
	background-color: var(--main-bg-color);
	padding: 10px;
	margin-bottom: 10px;
}
#errorsModal .error-modal-form{
	margin: 0;
	display: flex;
	justify-content: space-between;
}
#errorsModal .error-modal-form label{
	font-size: 18px;
	margin: 0;
}
#errorsModal .error-modal-form input#email,
#errorsModal .error-modal-form input#new_password{
	padding: 2px 10px;
	margin: 0 10px;
	background: var(--main-bg-color);
	color: var(--text-color);
	border: none;
	box-shadow: inset 0px 0px 30px -10px var(--lite-shadow);
}
.ok-modal-title{
	padding: 10px;
	background-color: #fff;
	text-align: center;
	font-size: 16px;
	color: green;
	font-weight: 500;
}
.modal-backdrop.show {
	opacity: .7;
}
.row.item-modal-box{
	padding:25px 15px;
}
.item-modal-box .col-sm-12 h5{
	text-align: center;
	margin-bottom: 15px;
	color: var(--action-title-color);
}
.item-modal-box-a-mo{
	position: absolute;
	right: 15px;
	bottom: 0;	
}
/*index off**************************************************************************************************************************************/













@media (max-width: 600px) {
	/*index*/
	.index-top {
		height: 100px;
	}
	.index-logo {
		height: 70px;
		margin: auto;
		padding: 30px 12px;
	}
	#promoIndexBox{
		padding: 5px;
	}
	.row.item-modal-box .col-sm-8 p{
		padding: 15px 0;
	}
	#promoIndexBox .modal-dialog.modal-dialog-centered{
		margin: 0;
	}
	#errorsModal .error-modal-form {
		display: flex;
		flex-direction: column;
		width: 270px;
		margin: auto;
	}
	#errorsModal .error-modal-form label {
		font-size: 18px;
		margin: 0;
		display: none;
	}
	#errorsModal .error-modal-form input#email, #errorsModal .error-modal-form input#new_password {
		width: 100%;
		padding: 2px 10px;
		margin: 0 0 10px 0px;
	}
	/*index off*/
}
@media (min-width: 600px){
	/*index*/
	#promoIndexBox .modal-dialog {
		max-width: 600px;
	}
	/*index off*/
}