body
{
font-family: 'Segoe UI', Arial;
margin: 0;
padding: 0;
min-width: 320px;
overflow-x: hidden;
}
.badge.text-reserved { background: #E6761B !important; }
.text-dark.text-reserved { color: #E6761B !important;}
.ReserveNow svg { color: #E6761B; }
.drawer-nav .hello { display: block; width: 100%; padding-left: 20px; margin-top: 20px; margin-bottom: 5px; border-bottom: 1px solid #ccc; padding-bottom: 10px; }
.drawer-nav .hello .image{ width: 53px; height: 50px; display: inline-block; vertical-align: top;}
.drawer-nav .hello .image img{ width: 50px; height: 50px; border-radius: 25px; border: 3px solid #13994B}
.drawer-nav .hello .intro{ width: auto; display: inline-block;vertical-align: top;}
.drawer-nav .hello .intro .name{ display: block; font-size: 16px; font-weight: bold;}
.drawer-nav .hello .intro .mobile{ display: block; font-size: 13px; font-weight: 300; }
.drawer-nav .balanse { width: 100%; display: block; margin-bottom: 15px; padding-left: 20px; text-align: left;}
.drawer-nav .balanse .name { font-weight: bold; font-size:14px;}
.drawer-nav .balanse .name span { font-size:16px; font-weight: 300;}
.drawer-nav .balanse .left { width: 100px;}
.drawer-nav .balanse .left,
.drawer-nav .balanse .bottom { display: inline-block; vertical-align: middle;}
.drawer-nav .balanse .bottom a{ text-decoration: none; background: #13994B; display: block; padding: 6px 11px; font-size: 14px; font-weight:600;color: #fff; margin-top: 5px; margin-left: 10px; border-radius: 3px; transition: box-shadow 0.3s ease;}
.drawer-nav .menu-wrap .menu-separator{ display: block; width: 100%; font-weight: 600; background: #C4C4C4; color: #fff; font-size: 13px; padding:3px 0; padding-left: 20px; border-bottom: 1px solid #fff;}
.drawer-nav ul.navigation { padding: 0; margin: 0; list-style: none;}
.drawer-nav ul.navigation li{ border-bottom: solid 1px #F0F0F0;}
.drawer-nav ul.navigation li:last-child{ border-bottom: none;}
.drawer-nav ul.navigation li:hover{ background: #C4C4C4; transition: 0.2s;}
.drawer-nav ul.navigation li:hover a{ color: #fff;transition: 0.2s;}
.drawer-nav ul.navigation li a{ font-weight: 400; font-size: 17px; color: #35363A; text-decoration:none; display: block; width: 100%; padding: 10px 0; padding-left: 20px;}
.drawer-nav ul.navigation li.act{ background: #C4C4C4;}
.drawer-nav ul.navigation li.act a{ color: #fff;}
.row.ocpp_rec { padding: 0; margin: 0; margin-top:20px;}
.row.ocpp_rec .col-5,
.row.ocpp_rec .col-7 { margin-bottom: 5px; white-space: nowrap;}
.row.ocpp_rec .col-5 { color: #303030; font-size: 14px;}
.row.ocpp_rec .col-7 { color: #515151; font-size: 14px;}
.row.ocpp_rec .col-7.text-success{ font-size: 18px; font-weight: 400}
.row.ocpp_rec_list_view { margin: 0; padding: 0; font-size: 14px;}
.row.ocpp_rec_list_view .big { background: #F5F5F5; margin:0 auto; margin-top: 10px;padding: 5px 0;}
.row.ocpp_rec_list_view .big .row { margin:0; padding: 0}
.row.ocpp_rec_list_view .big .col-4 { font-weight:400;}
.row.ocpp_rec_list_view .big .col-8 { font-weight:500; color:#3A7F5B;}
.row.ocpp_rec_button .btn.btn-success,
.row.ocpp_rec_button .btn.btn-danger { font-size: 14px; font-weight:500; padding:3px 10px; margin-top: 10px;}
.ocpp_rec_images img { width: 50px; height: 50px;}
.up_balance.payment_method { margin-top:70px;}
.up_balance.payment_method .item { border-radius: 5px; border: solid 1px #ccc; --bs-gutter-x: 0.5rem; background: #fff;transition: 0.3s}
.up_balance.payment_method .item:hover { border: solid 1px #0094FF; cursor: pointer; box-shadow: 0 0 10px rgba(0,0,0,0.5); transition: 0.3s;}
.content-form.login-form .field { display: block; margin-bottom:10px; text-align: center;}
.content-form.login-form .field a{ color:#404040}
.content-form.login-form .field input[type=text],
.content-form.login-form .field input[type=tel],
.content-form.login-form .field input[type=password] { padding:10px;font-size: 22px; font-weight: bold; width: 280px; border: 0; border: 2px solid #13994B;background: #fff; border-radius: 3px;}
.content-form.login-form .field input[type=submit]{ padding:10px 30px; font-size: 17px; margin-top:10px; border-radius: 3px; font-weight: 300}
.content-form.login-form .field input[disabled]{ background: #C0C0C0}
.content-form.login-form .field label { font-weight: 300; font-size: 16px; }
.content-form.login-form .field a.forgot { font-weight: bold; color: #198754; text-decoration: none; font-size: 17px; }
.content-form.login-form .field .btn-success { font-weight: bold; color: #fff; text-decoration: none; font-size: 18px; }
.content-form.login-form .errors span { display: block; margin-bottom: 20px; color: red;}
.content-form.login-form .errors { text-align: center;}
.content-form.login-form { margin-top:70px;}
.content-form.login-form .my-logo.mx-auto,
.content-form.forgot-form .my-logo.mx-auto { width: 300px; margin-bottom: 50px;}
.content-form.login-form .my-logo.mx-auto img.img-fluid.home-logo,
.content-form.forgot-form .my-logo.mx-auto img.img-fluid.home-logo { width: 100%;}
.content-form.register-form .field { display: block; margin-bottom:10px; text-align: center;}
.content-form.register-form .field a{ color:#404040}
.content-form.register-form .field input[type=text],
.content-form.register-form .field input[type=tel],
.content-form.register-form .field input[type=password] { padding:10px;font-size: 22px; font-weight: bold; width: 280px; border: 0; border: 2px solid #198754; }
.content-form.register-form .field input[type=submit]{ padding:10px 30px; font-size: 17px; margin-top: 15px; border-radius: 0;}
.content-form.register-form .field input[disabled]{ background: #C0C0C0}
.content-form.register-form .field label { font-weight: 400;}
.content-form.register-form .field a.forgot { font-weight: bold; color: #198754; text-decoration: none; font-size: 17px; }
.content-form.register-form .field .btn-success { font-weight: bold; color: #fff; text-decoration: none; font-size: 18px;}
.content-form.register-form span.starrequired { color: red;}
.content-form.forgot-form .field { display: block; margin-bottom:10px; text-align: center;}
.content-form.forgot-form .field a{ color:#404040}
.content-form.forgot-form .field input[type=tel],
.content-form.forgot-form .field input[type=password] { padding:10px;font-size: 22px; font-weight: bold; width: 280px; border: 0; border: 2px solid #198754; }
.content-form.forgot-form .field input[type=submit]{ padding:10px 30px; font-size: 17px; margin-top: 15px; border-radius: 0;}
.content-form.forgot-form .field input[disabled]{ background: #C0C0C0}
.content-form.forgot-form .field label { font-weight: 400;}
.content-form.forgot-form .field a.forgot { font-weight: bold; color: #198754; text-decoration: none; font-size: 17px; }
.content-form.forgot-form .field .btn-success { font-weight: bold; color: #fff; text-decoration: none; font-size: 18px;}
.forgot-form.forgot-form .errors span { display: block; margin-bottom: 20px; color: red; font-size: 18px;}
.forgot-form.forgot-form .errors { text-align: center;}
.forgot-form.forgot-form { margin-top: 100px;}
.container-full.payments .row { margin: 0; padding: 0;}
.container-full.payments .table { font-size: 13px;}
.container-full.payments .my_stat { margin-top: 40px;}
.container-full.payments .my_stat p{ margin: 0; padding: 0; margin-bottom:7px;}
.container-full.payments .my_stat p.fw-bolder{ color: #198754; line-height: 200;}
.container-full.payments .my_stat p.fs-6{ font-size: 14px !important; line-height: 200;}
.content-form.profile-form .form-input {border:0}
.content-form.profile-form .field { display: block; margin-bottom:12px;}
.content-form.profile-form .field img { width: 170px; height: 170px; border-radius: 50%}
.content-form.profile-form .field label { font-weight: 600;}
.content-form.profile-form .field a{ color:#404040}
.content-form.profile-form .field input[type=text],
.content-form.profile-form .field input[type=password] { width: 300px;padding:10px; border: 2px solid #ccc; border-radius: 3px; background:#fff;}
.content-form.profile-form .field input[type=text]:disabled { background: #f2f2f2; }
.content-form.profile-form .field input[type=submit]{ padding:7px 20px;}
.container-full.session .row { padding: 0; margin: 0}
.container-full.session .my_stat { margin-top: 40px;}
.container-full.session .my_stat p{ margin: 0; padding: 0; margin-bottom:7px;}
.container-full.session .my_stat p.fw-bolder{ color: #198754; line-height: 200;}
.container-full.session .my_stat p.fs-6{ font-size: 14px !important; line-height: 200;}
.container-full.session form.mt-4.mb-4 [type="submit"]{ font-weight: 600; padding-left: 30px; padding-right: 30px; font-size: 12px;}
.container-full.session form.mt-4.mb-4 span{ font-weight: 600; font-size: 13px;}
.container-full.session form.mt-4.mb-4 .form-select{ font-weight: 600; font-size: 13px; border-radius: 0}
.container-full.session form.mt-4.mb-4 { margin-top: 0px !important;}
.container-full.session tbody tr.hidden { display: none;}
.container-full.session .table { font-size: 12px; font-weight: 600;}
.container-full.session .table th{ font-size: 14px; }
.container-full.session button.big_list { width: 200px; font-weight: bold; font-size: 13px;}
.container-full.session tr.act { background: #FFD1D1}
.text-dark.text-reserved {
color: #E6761B !important;
}
.ReserveNow svg { color: #E6761B; }
.edrive-modal {font-size: 17px;line-height: 22px;}
.edrive-modal .dropdown-toggle.text-success::after { display: none;}
.edrive-modal ul.dropdown-menu a { text-decoration: none;}
.edrive-modal .modal-dialog {max-width:600px;border-radius: 0px;background-color: #ffffff;overflow: hidden; margin: 0 auto; bottom: 0; position: absolute; border-top-left-radius: 10px; border-top-right-radius: 10px; left: 0; right: 0}
.edrive-modal .modal-content {border: none;}
.edrive-modal .modal-title {font-size:22px; line-height: 100%;color: #ffffff;}
.edrive-modal .modal-title.address {font-size: 18px; font-weight: 900}
.edrive-modal .modal-header { min-height: 58px;padding: 20px;}
.edrive-modal .modal-header.free {background: #149a4b;}
.edrive-modal .modal-header.paid {background: #345eab;}
.edrive-modal .modal-header.login {background: #35363a;}
.edrive-modal .btn-close {
background: url("/app/tpl/img/close_modal.png") no-repeat; background-size: contain;opacity: 1; margin-top: 5px !important; margin-bottom: 5px !important; padding: 4px !important}
.edrive-modal .modal-body {position: relative; padding: 30px 20px;}
.edrive-modal.wide .modal-body {padding: 0; padding-bottom: 15px; }
.edrive-modal .modal-major {font-weight: 600; font-size: 15px;}
.edrive-modal .modal-link {color: #149a4b; transition: .3s;}
.edrive-modal .modal-link:hover {color: #149a4b; opacity: .7;}
.edrive-modal .modal-desc {font-weight: 300;}
.edrive-modal .modal-body .intro strong, .modal-body .intro b { font-weight: 500; color: #000}
.edrive-modal .modal-body .intro { font-weight: 500; font-size: 15px; color: #198754}
.edrive-modal .modal-desc.status {color: #149a4b;font-weight: 600; font-size: 16px;}
.edrive-modal .modal-desc.status.yellow { color: #efa300;font-weight: 300;}
.edrive-modal .modal-desc.price {color: #149a4b;}
.edrive-modal .modal-gallery { display: flex; align-items: center; justify-content: space-between;}
.edrive-modal .modal-img {display: flex; justify-content: center; width: 85px; height: 72px; margin-right: 10px;}
.edrive-modal .modal-pane { position: relative;padding: 16px 10px; background: #f5f5f5;}
.edrive-modal.login {font-size: 16px;line-height: 20px;}
.edrive-modal.login .modal-body {position: relative;padding: 36px 49px 46px;z-index: 1;}
.edrive-modal .modal-login__back {position: absolute; z-index: -1;bottom: 0; left: -84px;}
.map-block .mask-position { position: absolute; bottom: 0; left: 0; width: 100%; background:rgba(19,153,75,0.7); z-index: 1; color: #fff;}
.map-block .mask-position .row,
.map-block .mask-position .row .col{ padding: 0; margin:0; text-align: center;}
.map-block .mask-position .row { padding: 10px 0; align-items: center;}
.map-block .mask-position .row .col span{ font-weight:300; }
.map-block .mask-position .row .col .form-select{ width: 80px; margin: 0 auto; font-size: 14px; font-weight: 300;}
.map-block .mask-position .row .col.search svg{ font-size: 25px; width:25px; height: 50px;}
.map-block .mask-position .row .col.search svg:hover{ color: #404040; cursor: pointer; transition: 0.2s;}
.map-wrapper { width: 100%;}
#maps { background:#F8F9FA; display: block;}
.ymaps-2-1-79-copyrights-pane { display: none;}
.add-button { display: none !important;}
#ChargeOpenWindows,
#ChargeOpenWindowsReserveNow { display: none; position: fixed;top: 0; left: 0;width: 100%;height: 100%;background-color: rgba(255, 255, 255, 1); z-index: 9999; opacity: 0; animation: fadeIn 0.1s ease;}
#ChargeOpenWindowsReserveNow { z-index:10000; }
@keyframes fadeIn {from {opacity: 0;} to { opacity: 1;}}
#ChargeOpenWindows .contents,
#ChargeOpenWindowsReserveNow .contents { height: 100vh; overflow: auto; }
#ChargeOpenWindows .close_modal,
#ChargeOpenWindowsReserveNow .close_modal { position: fixed; bottom: 1.5vh; left: 0; padding: 10px;}
#ChargeOpenWindows .close_modal button,
#ChargeOpenWindowsReserveNow .close_modal button { padding: 10px;}
#ChargeOpenWindows .progress-bar {background-color : #00AD5F;border-radius: 10px; }
#ChargeOpenWindows .progress {height: 75px; width: 65%; font-size: 16px; position: relative;overflow: visible;border-radius: 10px;}
#ChargeOpenWindows .progress .text-pro {width: 100%;height: 100%;position: absolute;top: 0;left: 0; padding-top: 15px; text-align: center; font-weight: 600; color: #000; font-size: 30px;}
#ChargeOpenWindows .progress::after {content: "";position: absolute;top: 17.5px;right: -10px;width: 10px;height: 40px;background-color: #E9ECEF;}
#ChargeOpenWindows h4,
#ChargeOpenWindowsReserveNow h4 {font-size: 1.1rem;}
.contents .wp_group { margin-top: 20px;}
.contents .wp_group a{ color:#198754; text-decoration: none;}
.contents .wp_group svg{ color:#198754; }
.fancybox-slide img {max-width: 100%;max-height: 100%; display: block; margin: 0 auto;}
.filter-block { width: 100%; height: 100%; overflow: hidden; z-index: 1000001; position: fixed;background-color: rgba(0, 0, 0, 0.6); top: 0}
.filter-block-ias { color: #000; width: auto; height: auto; background: #fff; width: 90%; padding: 30px; padding-top: 0; font-size: 20px; font-weight: 600; border-radius: 10px;}
.reset_filter { text-decoration: none; font-weight: 300; font-size: 14px; color: #000; margin-left: 10px;}
#filter { position: fixed;; right: 10px; bottom: 170px; z-index: 1; }
#filter svg { color: #35363A; background: #fff; border-radius: 10px; padding:10px; border: solid 1px #E5E5E5;}
.close_filter_block { color: #000; text-align: right; clear: both;}
.close_filter_block svg:hover { color: #000; animation: rotate 0.4s ease-in-out both; }
table.table_charger { border-bottom: 1px solid #DBDBDB; width: 100%; padding-bottom: 40px; margin-bottom: 40px;}
table.table_charger th { background: #35363A; color: #fff; font-size: 14px; font-weight: 500; padding: 10px 5px;}
table.table_charger tr.public { width: 100%; display: table-row;}
.table_charger tr:hover{ box-shadow: 0 0 10px rgba(0,0,0,0.5); transition: 0.2s; z-index: 10001; cursor: pointer;}
.table_charger tr:nth-child(2n) { background: #F5F5F5;}
.table_charger tr td { font-size: 14px; font-weight: 400; vertical-align: middle; padding: 10px 5px;}
.table_charger tr td.status { font-size: 16px; font-weight: 500; }
table.table_charger td .bi-sun {color:#71B7B5; margin-right:10px;}
table.table_charger .solar-row { background-color: #9dfffc!important;}
@media (max-width: 699px) {.city-column {display: none;}}
@keyframes rotate {0% {transform: rotate(0);} 100% { transform: rotate(270deg); }}
#sheet .content { font-size: 12px;}
#sheet main h4 { font-size:1.1rem;}
#sheet .modal-major { font-size: 16px; text-align: left; line-height: 30px}
#sheet .placemark { font-size:0.8rem;}
#sheet .placemark .info { cursor: pointer;}
#sheet .placemark .info .col{ padding-left: 5px;padding-right: 5px;}
#sheet .placemark .info:hover { background: #ccc; transition: background 0.3s ease; }
#sheet .placemark .info strong.status { font-size:0.9rem;}
#sheet .placemark .info small { font-size:0.7rem; color: #515151}
#sheet .placemark .info small span{ font-weight:600; text-decoration: underline;color: #7A7A7A }
#sheet .placemark .modal-gallery {margin-top: 10px; overflow: hidden;}
#sheet .placemark .modal-gallery img { width:70px; height:70px; object-fit: cover; border-radius: 6px; border: 1px solid #288700; margin-right:5px;}
#sheet .placemark .modal-gallery img { width:70px; height:70px; object-fit: cover; border-radius: 6px; border: 1px solid #288700; margin-right:5px;}
#sheet .placemark .optimize .dropdown-toggle::after { display: none;}
#sheet .placemark .optimize a.dropdown-toggle { font-size: 0.9rem; color: #198754; text-decoration: none;;}
#sheet .placemark .optimize a.dell_favorite,
#sheet .placemark .optimize a.add_favorite { font-size:0.9rem; color: #198754; text-decoration: none;}
#sheet .placemark .optimize svg { color: #FF0000}
#sheet .dropdown-menu.show a { text-decoration: none;}
#sheet .dropdown-menu.show button { border-bottom:1px solid #ccc; padding-top:8px; padding-bottom:8px;}
#sheet .dropdown-menu { padding: 0}
.head_nav.nav.nav-pills { margin-top: 13px; padding-left:20px;}
.head_nav.nav-pills .nav-link.active,
.head_nav.nav-pills .show>.nav-link { background: #198754; color: #fff}
.head_nav.nav-pills .nav-link { color: #404040}
#my_charge { position: fixed;; right: 10px; bottom: 230px; z-index: 1; }
#my_charge svg { color: #187CCE; background: #fff; border-radius: 10px; padding:10px; border: solid 1px #E5E5E5;}
.ymaps-2-1-79-controls__control_toolbar { width: 55px; height: 55px; border-radius: 10px; position: fixed !important; right: 10px; bottom: 17px; z-index: 1; border-radius: 10px; border: solid 1px #E5E5E5; box-shadow: none; background: #fff url('img/my_location.png') no-repeat center;}
.ymaps-2-1-79-controls__control_toolbar:hover { cursor: pointer;}
.ymaps-2-1-79-float-button.ymaps-2-1-79-_hidden-text { display: none;}
.decisions button.btn span { font-size: 12px; display: block; font-weight: 100px;}
.decisions button.btn { font-size: 16px; line-height: 20px; font-weight: 700; width: 75%; margin-bottom: 10px; background: #E6761B; color: #fff;}
/* ==== Нижнее меню: компактно на маленьких, крупно на больших ==== */
/* ==== Нижнее меню: адаптивная сетка, safe-area, компактные подписи ==== */
/* Фиксируем снизу и учитываем вырез (iOS) */
.navbar.navbar-light.bg-white{
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 1;
width: 100%;
border-top: 1px solid #e9ecef;
flex-wrap: nowrap; /* без переноса */
background: #fff; /* на всякий случай */
}
/* 5 равных колонок, всегда влезает по ширине */
.navbar.navbar-light.bg-white .container-fluid{
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
align-items: center;
gap: 0;
padding: 0;
margin: 0;
}
/* Каждая колонка */
.navbar.navbar-light.bg-white .container-fluid .col{
display: flex;
justify-content: center;
align-items: center;
min-width: 0; /* важно для ellipsis */
padding: .25rem 0;
text-align: center;
}
/* Ссылка: иконка сверху, текст снизу; компактные размеры */
.navbar.navbar-light.bg-white .container-fluid .col .nav-link{
display: flex;
flex-direction: column;
align-items: center;
gap: 1px; /* меньше зазор */
padding: .45rem .2rem;
line-height: 1; /* плотнее */
color: #404040;
font-weight: 600;
text-decoration: none;
font-size: clamp(9px, 2.1vw, 11px); /* компактнее подпись */
white-space: normal; /* можно переносить, если нет .label */
}
/* Иконки: плавное масштабирование компактнее */
.navbar.navbar-light.bg-white .container-fluid .col .nav-link svg{
margin-bottom: 5px;
width: clamp(16px, 4.8vw, 22px);
height: clamp(16px, 4.8vw, 22px);
flex: none;
}
/* QR — чуть крупнее */
.navbar.navbar-light.bg-white .container-fluid .col.qr .nav-link svg{
width: clamp(18px, 5.4vw, 24px);
height: clamp(18px, 5.4vw, 24px);
}
/* Актив/ховер */
.navbar.navbar-light.bg-white .container-fluid .col .nav-link:hover,
.navbar.navbar-light.bg-white .container-fluid .col .nav-link.act{
color: #198754;
}
/* Если подпись завернута в …, включаем ellipsis */
.navbar.navbar-light.bg-white .container-fluid .col .nav-link .label{
display: block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; /* одна строка */
}
/* Узкие экраны — делаем ещё компактнее */
@media (max-width: 360px){
.navbar.navbar-light.bg-white .container-fluid .col .nav-link{
font-size: clamp(8px, 2.2vw, 10px);
gap: 0;
padding: .35rem .15rem;
}
.navbar.navbar-light.bg-white .container-fluid .col .nav-link svg{
width: clamp(15px, 4.6vw, 20px);
height: clamp(15px, 4.6vw, 20px);
}
}
/* Совсем крошечные — скрываем подписи (если есть .label) */
@media (max-width: 300px){
.navbar.navbar-light.bg-white .container-fluid .col .nav-link .label{
display: none;
}
}
/* Дополнительно: если используешь
между иконкой и текстом,
то на очень узких можно его скрыть, чтобы не ломало высоту */
@media (max-width: 300px){
.navbar.navbar-light.bg-white .container-fluid .col .nav-link br{
display: none;
}
}
@media (min-width: 0px) and (max-width: 320px)
{
.table_charger tr td { font-size: 10px; }
.table_charger tr th { font-size: 10px; }
.table_charger tr td.status { font-size:8px;}
.head_nav.nav-pills .nav-link { font-size: 12px;}
}
.map-block .notification-icon svg { cursor: pointer; color:#404040; transition: transform 0.3s ease; margin-right: 20px; margin-top: 10px;}
.map-block .notification-icon svg:hover {transform: scale(1.1);}
.map-block .spinner {border: 4px solid rgba(0, 0, 0, 0.1); border-left-color: #878787; border-radius: 50%; width: 40px; height: 40px;animation: spin 1s linear infinite;}
@keyframes spin { to { transform: rotate(360deg); }}
.map-block .charge-search { margin:10px 10px; }
.map-block .charge-search input.form-control {font-size:13px; font-weight:600; color:#6C757D;}