body {margin: 0; font-family: arial;}
img {border: none;}
input {outline: none; -webkit-appearance: none;}
input[type="submit"] {cursor: pointer;}
textarea {outline: none; resize: none; -webkit-appearance: none;}
header {max-width: 980px; margin: 0 auto; background: rgba(255,255,255,0.8);}

.lang-header {max-width: 980px; margin: 0 auto;text-align: right;}

header .logo {float: left; padding: 10px; margin-right: 45px; margin box-sizing: border-box;}
header .logo img {display: block;width: 205px; }

header .cont {
	float: right;
	font-family: verdana;
	text-align: right;
	color: #10846d;
	/*background: url(../img/time.png) left center no-repeat / auto 80%;*/
	padding: 22px 22px 22px 100px;
	box-sizing: border-box;
}
header .cont .tel {margin-top: 5px;}
header .cont .tel a {font-family: 'Roboto', sans-serif; color: #095042; font-size: 18px; text-decoration: none;}
header .cont .tel em {
	font-size: 23px;
	padding-left: 10px;
	-moz-transform: scale(-1, 1);
	-webkit-transform: scale(-1, 1);
	-o-transform: scale(-1, 1);
	transform: scale(-1, 1);
	filter: FlipH;
	-ms-filter: "FlipH";}
header .cont .mail {padding-top: 18px;}
header .cont .mail a {font-family: 'Roboto', sans-serif; color: #095042; font-size: 18px; text-decoration: none;}
header .cont .mail em {font-size: 19px; padding-right: 10px;}
header .cont .address {padding-top: 18px;}
header .cont .address:before {background: none;}
header .cont .address span {font-family: 'Roboto', sans-serif; color: #095042; font-size: 18px;}
header .cont .address em {font-size: 19px; padding-right: 10px;}
header .work-schedule {
	float: left;
	width: 298px;
	margin-top: 135px;
	margin-left: -248px;
}
header .work-schedule .exp {
	font-family: 'Roboto', sans-serif;
	color: #139f83;
	text-transform: uppercase;
	display: block;
	float: left;
	margin-left: 8px;
	margin-top: 27px;
	font-size: 14px;
}
header .work-schedule .circle {
	font-family: 'Roboto', sans-serif;
	background-color: #139f83;
	color: #fff;
	display: block;
	width: 42px;
	height: 42px;
	text-align: center;
	vertical-align: center;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	position: relative;
	line-height: 42px;
	font-size: 16px;
	float: left;
	margin-top: 21px;

}

nav {background: url(../img/menu-bg.png) left top repeat-x #0b4b3d;}
nav > ul {list-style: none; display: table; width: 100%; margin: 0; padding: 0;}
nav > ul > li {display: table-cell; text-align: center; border-right: 1px solid #43b6a0; position: relative;}
nav > ul > li:last-child {border-right: 0;}
nav > ul > li > a {text-decoration: none; color: #fff; font-family: Impact; font-size: 24px; padding: 30px 20px; display: block;}
nav > ul > li:hover > a, nav > ul > li.active > a {background: #212121;}

nav > ul > li > ul {display: none; position: absolute; top: 100%; margin: 0; padding: 0; list-style: none; z-index: 9;}
nav > ul > li:hover > ul {display: block;}
nav > ul > li > ul > li {white-space: nowrap; text-align: left; background: #0b4b3d;}
nav > ul > li > ul > li > a {text-decoration: none; color: #fff; position: relative; display: block; padding: 5px 10px 5px 30px;}
nav > ul > li > ul > li > a:before {content: ""; position: absolute; top: 7px; left: 8px; width: 10px; height: 10px; border: 1px solid #fff; border-radius: 3px;}
nav > ul > li > ul > li:hover > a:before, nav > ul > li > ul > li.active > a:before {background: #fff;}

h1 {color: #fff; font-size: 22px; font-weight: normal; text-align: center; position: relative; overflow: hidden; margin-top: 0;}
h1:before, h1:after {
	content: '';
	display: inline-block;
	width: 100%;
	height: 1px;
	background: #fff;
	position: relative;
	vertical-align: middle;
}
h1:before {
	right: 15px;
	margin: 0 0 0 -100%;
}
h1:after {
	left: 15px;
	margin: 0 -100% 0 0;
}

h2 {color: #9a9a9a; font-size: 22px; font-weight: normal; text-align: center; position: relative; overflow: hidden; margin-top: 0;}
h3 {color: #9a9a9a; font-size: 22px; font-weight: normal; text-align: center; position: relative; overflow: hidden; margin-top: 0;}
h4 {color: #9a9a9a; font-size: 22px; font-weight: normal; text-align: center; position: relative; overflow: hidden; margin-top: 0;}

article p {color: #9a9a9a; text-indent:5px;}
article p a {color: #fff;}
article ol {color: #9a9a9a;}
article ul {color: #9a9a9a; list-style: square;}
article .l ul li {margin: 35px 0;}

footer {
	/*text-align: center; */
	background-color: #474747;
	padding: 20px;
	box-sizing: border-box;
}
footer p {color: #838383;font-size: 12px;text-align: center;}
footer p a {color: #fff;}
li a {
	color:white;
}

table iframe {border: 5px solid #2f2f2f; margin-top: 16px; border-radius: 5px;}

::-webkit-input-placeholder {color: #454545;}
:-moz-placeholder {color: #454545; opacity:  1;}
::-moz-placeholder {color: #454545; opacity:  1;}
:-ms-input-placeholder {color: #454545;}

nav > ul > li > ul > li > a:before,
.r a img,
nav a,
.anim {
	-moz-transition: 0.3s all ease;
	-o-transition: 0.3s all ease;
	-webkit-transition: 0.3s all ease;
	transition: 0.3s all ease;
}

.clear {clear: both;}

.flag {background-image: url(../img/24a.png); display: inline-block; width: 24px; height: 24px; cursor: pointer;}

.main {max-width: 980px; margin: 100px auto; background: rgba(0,0,0,0.9); padding: 20px; box-sizing: border-box;}

.l {width: 48%; float: left;}
.r {width: 48%; float: right; text-align: center;}
.r a {display: inline-block; text-decoration: none; color: #fff; width: 30%; margin-bottom: 30px; vertical-align: top;}
.r a img {display: block; width: 70%; border-radius: 100%; margin: 0 auto 10px; border: 5px solid #2f2f2f;}
.r a:hover img {border: 5px solid #fff;}

.more {cursor: pointer;}
.moreText {display: none;}

a.gflag {vertical-align:middle;font-size:24px;padding:1px 0;background-repeat:no-repeat;background-image:url(//gtranslate.net/flags/24.png);}
a.gflag img {border:0;}
a.gflag:hover {background-image:url(//gtranslate.net/flags/24a.png);}
#goog-gt-tt {display:none !important;}
.goog-te-banner-frame {display:none !important;}
.goog-te-menu-value:hover {text-decoration:none !important;}
body {top:0 !important;}
#google_translate_element2 {display:none!important;}

.mmenu {display: none;}

@media (min-width: 980px){
	nav {
		background: none;
	}
	nav > ul > li {
		border-right: none;
	}
	nav > ul > li > a {
		font-family: 'Roboto', sans-serif;
		color: #212121;
		font-size: 18px;
		padding: 22px 20px;
	}
	nav > ul > li:hover > a, nav > ul > li.active > a {
		background: none;
		color: #139f83;
		text-decoration: underline;
	}
	nav > ul > li > ul > li {
		background: #fff;
	}
	nav > ul > li > ul > li > a:before {
		border: 1px solid #139f83;
	}
	nav > ul > li > ul > li:hover > a:before, nav > ul > li > ul > li.active > a:before {
		background: #139f83;
	}
	nav > ul > li > ul > li > a {
		color: #139f83;
	}
	nav ul li ul li ul {
		background: #fff!important;
	}
	nav ul li ul li ul li a {
		color: #139f83!important;
	}
	nav ul li ul li ul li a::before {
		border: 1px solid #139f83!important;
	}
	nav > ul > li > ul > li ul li > a:hover::before {
		background: #139f83!important;
	}
}
@media (max-width: 979px){

	header {background: #f5f5f5; text-align: center; padding-top: 80px;}
	header .logo {float: none;}
	header .logo img {display: inline-block;}
	header .cont {float: none; padding: 10px 10px 30px; background: none; text-align: center;}
	nav {position: absolute; top: 0; left: 0; width: 100%; text-align: right; z-index: 9;}
	nav > ul {display: none; position: absolute; right: 0; top: 54px; width: initial;}
	nav > ul > li {display: block;}
	nav > ul > li > a {text-align: right; background: #13997e; padding: 10px;}
	nav > ul > ul {display: none!important;}

	.mmenu {display: inline-block; font-size: 30px; text-transform: uppercase; font-weight: 600; color: #fff; padding: 10px;
	    position: absolute; z-index: 1;}
	.mmenu img {float: right; margin-left: 15px;}

	h1:before, h1:after {display: none;}
	article {text-align: justify;}
	.l, .r {display: block; width: 100%;}
	.r a  {width: 43%;}

	.more {display: block; text-align: center;}

	.tcont {width: 100%; text-align: center;}
	.tpart {width: 100%; text-align: center;}

	iframe {width: 100%!important; box-sizing: border-box;}
	nav > ul > li > ul {display: none!important;}
	article div {width: 100%!important; box-sizing: border-box;}

}

nav ul li ul li ul {
	display: none;
	position: absolute;
	left: 391px;
	background: #0b4b3d;
	width: 287px;
	padding: 0 5px 5px;
	list-style-type: none;
	top: 0;

}
nav ul li ul li  {
	position: relative;

}

nav ul li ul li ul li {
	padding:  5px;
	white-space: normal;
	color:#fff;
	position: relative;
	margin-left: 10px;
}
nav ul li ul li:hover ul{
	display: block;

}
nav  ul  li  ul  li ul li  a::before {
	content: "";
	position: absolute;
	top: 9px;
	left: -15px;
	width: 10px;
	height: 10px;
	border: 1px solid #fff;
	border-radius: 3px;
	transition: 0.3s all ease;
}
nav > ul > li > ul > li ul li > a:hover::before{
	background: #fff;
}
.price-order {
	text-align: center;
	margin: 40px 0 22px;
	position: relative;
}
.price-order .price {
	color: #7bf3d7;
	display: inline-block;
	background-color: #555555;
	padding: 12px 21px;
	font-weight: 600;
	width: auto;
	margin-bottom: 10px;
}
.price-order .order{
	position: absolute;
	top: 0;
	right: 0;
	background: url(../img/menu-bg.png);
	background-size: contain;
	color: #10b48e;
	text-transform: uppercase;
	font-weight: 600;
	text-align: center;
	font-size: 16px;
	padding: 12px 32px;
	cursor: pointer;
}
#popup-form, #form-request_discount {
	display: none;
}
#popup-form.active,
#form-request_discount.active{
	position: fixed;
	display: block;
	top: 0;
	bottom: 0px;
	left: 0px;
	right: 0px;
	z-index: 999;
}
#popup-form .mask,
#form-request_discount .mask{
	position: absolute;
	background: rgba(255,255,255,0.89);
	top: 0;
	bottom: 0px;
	left: 0px;
	right: 0px;
	z-index: 1000;
}
#popup-form form {
	position: absolute;
	background: rgba(0,0,0,0.85);
	z-index: 1001;
	padding: 37px 55px;
	top: 0;
	bottom: 0px;
	left: 0px;
	right: 0px;
	height: 390px;
	width: 338px;
	margin: auto;
	text-align: center;
}
#form-request_discount form {
	position: absolute;
	background: rgba(0,0,0,0.85);
	z-index: 1001;
	padding: 37px 55px;
	top: 0;
	bottom: 0px;
	left: 0px;
	right: 0px;
	height: 540px;
	width: 400px;
	margin: auto;
	text-align: center;
}
#popup-form form h3,
#form-request_discount form h3 {
	color: #09ad86;
	font-width: 600;
	text-transform: uppercase;

}

#popup-form form input[type="text"],
#popup-form form input[type="email"],
#popup-form form input[type="tel"],
#form-request_discount form input[type='text'],
#form-request_discount form input[type='email'],
#form-request_discount form input[type='tel'],
#form-request_discount form input[type='number'] {
	color: #fff;
	background: transparent;
	border: none;
	border-bottom: 1px solid #fff;
	display: block;
	max-width: 400px;
	width: 100%;
	font-size: 18px;
	padding: 14px 10px;
	margin-bottom: 15px;
}
#popup-form form input[type="text"]:focus,
#popup-form form input[type="email"]:focus,
#popup-form form input[type="tel"]:focus,
#form-request_discount form input[type='text']:focus,
#form-request_discount form input[type='email']:focus,
#form-request_discount form input[type='tel']:focus,
#form-request_discount form input[type='number']:focus {
	color: #23d2a9;
	border-bottom: 1px solid #23d2a9;
}
#popup-form form input[type="text"]::-webkit-input-placeholder,
#popup-form form input[type="email"]::-webkit-input-placeholder,
#popup-form form input[type="tel"]::-webkit-input-placeholder,
#form-request_discount form input[type='text']::-webkit-input-placeholder,
#form-request_discount form input[type='email']::-webkit-input-placeholder,
#form-request_discount form input[type='tel']::-webkit-input-placeholder,
#form-request_discount form input[type='number']::-webkit-input-placeholder {
	color: #fff;
}
#popup-form form input[type="text"]:focus::-webkit-input-placeholder,
#popup-form form input[type="email"]:focus::-webkit-input-placeholder,
#popup-form form input[type="tel"]:focus::-webkit-input-placeholder,
#form-request_discount form input[type='text']:focus::-webkit-input-placeholder,
#form-request_discount form input[type='email']:focus::-webkit-input-placeholder,
#form-request_discount form input[type='tel']:focus::-webkit-input-placeholder,
#form-request_discount form input[type='number']:focus::-webkit-input-placeholder{
	color: #23d2a9;
}


#popup-form form input[type="submit"],
#form-request_discount form input[type='submit']
{
	display: inline-block;
	background: #23d2a9;
	border: none;
	color: #0a5546;
	text-transform: uppercase;
	font-weight: 600;
	text-align: center;
	font-size: 16px;
	padding: 22px 32px;
	cursor: pointer;
	margin-top: 40px;
	line-height: 0.3;
}
#popup-form #message-success,
#form-request_discount #message-success-discount {
	display: none;
	font-size: 18px;
	color: #05d705;
	text-align: center;
	margin-bottom: -18px;
}

#form-request_discount form textarea,
#popup-form form textarea{
    color: #fff;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid #000; /* Черная граница */
    display: block;
    max-width: 400px;
    width: 100%;
    font-size: 18px;
    padding: 14px 10px;
    margin-bottom: 15px;
    box-sizing: border-box; /* Чтобы граница входила в общий размер поля */
}

#form-request_discount form textarea:focus,
#popup-form form textarea:focus{
    color: #fff;
    border-color: #23d2a9; /* Цвет границы при фокусе */
    background: rgba(0, 0, 0, 0.3); /* Немного более темный фон при фокусе */
}

#form-request_discount form textarea::-webkit-input-placeholder,
#popup-form form textarea::-webkit-input-placeholder{
    color: #fff;
}

#form-request_discount form textarea:focus::-webkit-input-placeholder,
#popup-form form textarea::-webkit-input-placeholder{
    color: #23d2a9;
}

footer .container {
	margin-right: auto;
	margin-left: auto;
	padding-left: 15px;
	padding-right: 15px;
	max-width: 980px;
}


.row {
	display: initial;
}

.row > div {
	position: relative;
	min-height: 1px;
	padding-left: 24px;
	padding-right: 24px;
	display: block;
	float: left;
	color: #fff;
}


.logo-footer {
	position: relative;
}
/*.logo-footer:before {
	content: "";
	width: 20px;
	height: 20px;
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	background: url("/templates/slt/img/icon/.png");
}*/
.address {
	position: relative;
	padding-top: 14px;
	line-height: 20px;
}
.address:before {
	content: "";
	width: 20px;
	height: 20px;
	position: absolute;
	top: 14px;
	left: 0;
	display: block;
	background: url("/static/img/icon/location.png") no-repeat;
}
.email {
	position: relative;
	padding-top: 14px;
}
.email:before {
	content: "";
	width: 20px;
	height: 20px;
	position: absolute;
	top: 14px;
	left: 0;
	display: block;
	background: url("/static/img/icon/envelope.png") no-repeat;
}
.phone {
	position: relative;
	padding-top: 14px;
	text-align: right;
	font-weight: 600;
	padding-right: 0px!important;
}
.phone:before {
	content: "";
	width: 20px;
	height: 20px;
	position: absolute;
	top: 39px;
	left: 108px;
	display: block;
	background: url("/static/img/icon/phone.png") no-repeat;
}
.phone .for-russia {

	margin-bottom: 8px;

	color: #14a084;

	text-transform: uppercase;
}
.phone .for-russia:before {
	content: "";
	width: 20px;
	height: 20px;
	position: absolute;
	top: 14px;
	left: 0;
	display: block;
	background: url("/static/img/icon/phone-green.png") no-repeat;
}
.nav-footer {
	display: inline-block;
	width: 100%;
}
.nav-footer ul{

	width: 100%;

	display: table;

	padding-left: 0;
}
.nav-footer ul li{
	list-style: none;
	display: table-cell;
	text-align: center;
}
.nav-footer ul li a{
	text-transform: uppercase;
	text-decoration: none;
	font-weight: 600;
	/* font-size: 16px; */
}
.nav-footer ul li a:hover{
	cursor: pointer;
}
.nav-footer .in-top {

}
@media (max-width: 1045px) {
	.row > div {
		font-size: 14px;
	}
	.phone:before {
		top: 37px;
		left: 92px;
	}
	.nav-footer ul li a {
		font-size: 14px;
	}
}

@media (max-width: 979px) {
	article div {
		width: inherit !important;
	}
	.price-order .order {
		position: relative;
		width: 148px!important;
		margin-left: auto;
		margin-right: auto;
	}
	.row > div {
		display: inline-block;
		width: 50%;
		box-sizing: border-box;
	}
	.logo-footer {

		text-align: right;

	}
	.address {
		height: 75px;
		margin-top: 16px;
	}
	.email {
		text-align: right;
	}

	.email:before {
		display: none;
	}

	.email:after {
		content: "";
		width: 20px;
		height: 20px;
		position: absolute;
		top: 14px;
		right: 124px;
		display: block;
		background: url("/static/img/icon/envelope.png") no-repeat;
	}
	.phone {
		text-align: left;
	}
	.phone span {
		margin-left: 94px;
	}
}
@media (max-width: 640px){
	.row > div.logo-footer {
		width: 100%;
		text-align: center;
		display: block;
		float: initial;
	}
	.row > div.address {
		display: block;
		float: initial;
		margin: auto;
		width: 254px;
		float: initial;
		height: 50px;
	}
	.row > div.email {
		float: initial;
		display: block;
		width: 254px;
		margin: auto;
		text-align: left;
	}
	.row > div.email:after {
		display: none;
	}
	.row > div.email:before {
		content: "";
		width: 20px;
		height: 20px;
		position: absolute;
		top: 14px;
		display: block;
		background: url(/static/img/icon/envelope.png) no-repeat;
	}
	.row > div.phone {
		text-align: left;
		float: initial;
		display: block;
		width: 254px;
		margin: auto;
	}
}

#map-container {
    width: 100%;
    height: 60vh;
    margin: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

#map {
    width: 100%;
    height: 100%;
}

input, select {
    display: block;
    width: 100%;
    height: 24px;
    box-sizing: border-box;
    border: 1px solid #801111;
    border-radius: 4px;
    font-family: "Arial";
    font-size: 16px;
    margin-bottom: 1rem;
	color: black;
	background-color: #e7e4e4;
}

button {
    display: inline-block;
    padding: 0.5rem 1rem;
    background-color: #23a488;
    color: #ffffff;
    text-decoration: none;
    font-size: 16px;
    border: none;
    cursor: pointer;
    margin-bottom: 1rem;
	transition: opacity 0.7s ease, transform 0.1s ease;
	border-radius: 4px;
}

button:active {
    /* Style for when the button is pressed */
    background-color: #1b7f6b; /* Darker shade for pressed effect */
    transform: translateY(2px); /* Slightly move down the button */
}

button.disabled {
    /* Style for disabled button */
    background-color: #94dec9;
    cursor: not-allowed;
    pointer-events: none;
}

#transport #checkboxContainer #loading_address #add_address #unloading_address #batchSelect #result #distance {color: #ffffff;}
label {color: #faf3f3;}

#result #distance {
	color:white;
	font-family: "Arial";
	font-size: 16px;
}


.input-with-delete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 1rem;
  position: relative;
}

.input-delete {
  cursor: pointer;
  height: 16px;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ff0000;
  color: #ffffff;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
}


.d-none {
    opacity: 0 !important;
}

div #popup-form form input #tel_client_bid :invalid:not(:placeholder-shown) {border-color: #0000ff;}
div #popup-form form input #tel_client_bid :valid:not(:placeholder-shown) {border-color: green;}

#findCheaperBtn {
    display: inline-block;
	float: right;
    padding: 0.5rem 1rem;
    background-color: #0000ff !important;
    color: #ffffff;
    text-decoration: none;
    font-size: 16px;
    border: none;
    cursor: pointer;
    margin-bottom: 1rem;
	transition: opacity 0.7s ease;
}

#findCheaperBtn[disabled],
#requestBtn[disabled]{
    cursor: default;
}

.leaflet-routing-container {
    display: none !important;
}

#volume {
	opacity: 0;
	transition: opacity 0.5s ease-in-out;
	display: none;
}

#volume.visible {
  opacity: 1;
  display: block;
}

#add_address[disabled] {
  background-color: #1b7f6b;
  cursor: not-allowed;
}

.disabled {
    cursor: not-allowed;
    pointer-events: none;
}

.info-label {
    position: relative;
    display: inline-block;
}
.info-container {
    display: inline-block;
    position: relative;
}

.info-icon {
    cursor: pointer;
    margin-left: 5px;
    width: 20px; /* Задайте нужный размер для иконки */
    height: 20px; /* Задайте нужный размер для иконки */
	vertical-align: middle;
}

.info-tooltip {
    display: none;
    position: absolute;
    background-color: #fff;
    color: black;
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #09ad86;
    z-index: 100;
    left: 450px; /* Смещение вправо, рядом с иконкой */
    top: 50%;
    transform: translateY(-50%); /* Центрирование по вертикали относительно иконки */
    width: 200px;
}

.info-container:hover .info-tooltip {
    display: block;
}

