body{
margin:0;
background:#1f1f1f;
font-family:Arial;
color:#eee;
min-height:100vh;
display:flex;
flex-direction:column;
}

.site-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
padding:10px 14px;
background:#111;
border-bottom:1px solid #2f2f2f;
position:sticky;
top:0;
z-index:1000;
}

.header-left,
.header-center,
.header-right{
display:flex;
align-items:center;
gap:10px;
flex-wrap:wrap;
}

.header-left{
justify-content:flex-start;
flex:1 1 0;
}

.header-center{
justify-content:center;
flex:0 1 auto;
}

.header-right{
justify-content:flex-end;
flex:1 1 0;
}

.nav-btn{
display:inline-flex;
align-items:center;
justify-content:center;
height:42px;
padding:0 16px;
background:#252525;
border:1px solid #3d3d3d;
border-radius:8px;
color:#00bfff;
text-decoration:none;
font-size:16px;
line-height:1;
cursor:pointer;
transition:background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
box-sizing:border-box;
white-space:nowrap;
}

.nav-btn:hover{
background:#2f2f2f;
border-color:#555;
}

.nav-btn:active{
background:#1e1e1e;
}

.nav-btn-active{
background:#1d2b36;
border-color:#00bfff;
color:#7fdfff;
}

.time-btn{
min-width:82px;
cursor:default;
color:#ddd;
}

.user-box{
display:flex;
align-items:center;
justify-content:center;
height:42px;
min-width:220px;
max-width:100%;
padding:0 16px;
background:#252525;
border:1px solid #3d3d3d;
border-radius:8px;
font-size:16px;
box-sizing:border-box;
text-align:center;
color:#ddd;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

.page-wrap{
width:100%;
max-width:1500px;
margin:0 auto;
padding:20px 15px 24px 15px;
box-sizing:border-box;
flex:1 0 auto;
}

.page-head{
margin-bottom:18px;
text-align:center;
}

.page-title{
margin:0 0 8px 0;
font-size:32px;
font-weight:700;
color:#f0f0f0;
}

.page-subtitle{
font-size:20px;
color:#9acd32;
margin-bottom:8px;
}

.page-note{
font-size:15px;
color:#b8b8b8;
line-height:1.35;
max-width:760px;
margin:0 auto;
}

.general-settings-section{
margin-bottom:14px;
}

.settings-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
gap:14px;
align-items:stretch;
}

.settings-card{
background:#2b2b2b;
border:1px solid #3a3a3a;
border-radius:10px;
padding:14px;
box-sizing:border-box;
display:flex;
flex-direction:column;
min-height:360px;
}

.settings-card-general{
min-height:auto;
}

.settings-card-title{
font-size:22px;
font-weight:700;
color:#f2f2f2;
text-align:center;
margin-bottom:14px;
line-height:1.2;
}

.setting-row{
display:grid;
grid-template-columns:minmax(0,1fr) auto auto;
align-items:center;
gap:10px;
padding:10px 0;
border-bottom:1px solid #3a3a3a;
min-height:52px;
box-sizing:border-box;
}

.setting-label{
font-size:16px;
color:#d6d6d6;
line-height:1.25;
}

.setting-value{
min-width:92px;
text-align:right;
font-size:18px;
font-weight:700;
color:#9acd32;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

.setting-value-wide{
min-width:180px;
max-width:340px;
}

.setting-btn{
display:inline-flex;
align-items:center;
justify-content:center;
width:44px;
height:44px;
background:#252525;
border:1px solid #3d3d3d;
border-radius:8px;
color:#00bfff;
font-size:22px;
cursor:pointer;
transition:background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.05s ease;
box-sizing:border-box;
}

.setting-btn:hover{
background:#2f2f2f;
border-color:#555;
}

.setting-btn:active{
background:#1e1e1e;
transform:scale(0.98);
}

.allowed-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:12px 0 10px 0;
margin-top:2px;
}

.allowed-label{
font-size:15px;
color:#bdbdbd;
}

.allowed-value{
font-size:15px;
color:#ffcc66;
font-weight:700;
text-align:right;
}

.general-note{
padding-top:12px;
font-size:14px;
line-height:1.35;
color:#bdbdbd;
}

.preview-wrap{
margin-top:auto;
padding-top:10px;
}

.preview-bar{
display:flex;
width:100%;
height:26px;
background:#1e1e1e;
border:1px solid #444;
border-radius:8px;
overflow:hidden;
box-sizing:border-box;
}

.preview-zone{
height:100%;
min-width:0;
}

.preview-green{
background:#4caf50;
width:33.33%;
}

.preview-yellow{
background:#ffc107;
width:33.33%;
}

.preview-red{
background:#f44336;
width:33.34%;
}

.card-hint{
margin-top:10px;
font-size:14px;
line-height:1.3;
color:#ffcc66;
text-align:center;
min-height:18px;
}

.hidden{
display:none !important;
}

.btn{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:46px;
padding:10px 16px;
background:#252525;
border:1px solid #3d3d3d;
border-radius:8px;
color:#00bfff;
font-size:18px;
line-height:1.2;
cursor:pointer;
box-sizing:border-box;
transition:background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
text-align:center;
}

.btn:hover{
background:#2f2f2f;
border-color:#555;
}

.btn:active{
background:#1e1e1e;
}

.modal{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.72);
display:none;
align-items:center;
justify-content:center;
z-index:9999;
padding:16px;
box-sizing:border-box;
}

.modal-box{
width:100%;
max-width:420px;
background:#2b2b2b;
border:1px solid #444;
border-radius:12px;
padding:18px;
box-sizing:border-box;
box-shadow:0 10px 30px rgba(0,0,0,0.35);
}

.modal-box-keyboard{
max-width:460px;
}

.modal-title{
font-size:24px;
font-weight:700;
color:#f1f1f1;
text-align:center;
margin-bottom:8px;
line-height:1.2;
}

.modal-subtitle{
font-size:18px;
color:#9acd32;
text-align:center;
margin-bottom:6px;
line-height:1.2;
}

.modal-field-title{
font-size:17px;
color:#d7d7d7;
text-align:center;
margin-bottom:14px;
line-height:1.25;
}

.modal-info-row{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:10px;
margin-bottom:8px;
}

.modal-info-label{
font-size:15px;
color:#bdbdbd;
line-height:1.3;
}

.modal-info-value{
font-size:15px;
color:#ffcc66;
font-weight:700;
text-align:right;
line-height:1.3;
}

.number-input{
width:100%;
height:54px;
margin:10px 0 14px 0;
padding:0 14px;
box-sizing:border-box;
border:1px solid #555;
border-radius:8px;
background:#1f1f1f;
color:#f3f3f3;
font-size:26px;
font-weight:700;
text-align:right;
outline:none;
}

.keyboard-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:10px;
}

.key-btn{
display:inline-flex;
align-items:center;
justify-content:center;
height:54px;
background:#252525;
border:1px solid #3d3d3d;
border-radius:8px;
color:#f0f0f0;
font-size:24px;
cursor:pointer;
box-sizing:border-box;
transition:background 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}

.key-btn:hover{
background:#2f2f2f;
border-color:#555;
}

.key-btn:active{
background:#1e1e1e;
transform:scale(0.98);
}

.keyboard-actions{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
margin-top:10px;
}

.key-btn-wide{
font-size:18px;
color:#00bfff;
}

.modal-error{
margin-top:12px;
padding:10px 12px;
border:1px solid #7a2d2d;
background:#3a1f1f;
border-radius:8px;
font-size:15px;
line-height:1.3;
color:#ff9d9d;
text-align:center;
}

.modal-actions{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
margin-top:14px;
}

.modal-btn{
width:100%;
min-height:48px;
font-size:18px;
}

#numberModalSave{
background:#1f3a22;
border-color:#4caf50;
color:#c8ffcf;
font-weight:700;
}

#numberModalSave:hover{
background:#284b2c;
border-color:#66bb6a;
color:#e6ffe9;
}

#numberModalSave:active{
background:#18301c;
}

.choice-list{
display:flex;
flex-direction:column;
gap:10px;
margin-top:14px;
}

.choice-btn{
width:100%;
min-height:50px;
font-size:19px;
}

.choice-note{
margin-top:14px;
font-size:14px;
line-height:1.35;
color:#bcbcbc;
text-align:center;
}

.timezone-list{
display:flex;
flex-direction:column;
gap:10px;
margin-top:14px;
}

.timezone-btn{
justify-content:center;
}

.site-footer{
flex-shrink:0;
padding:12px 10px 14px 10px;
background:#111;
border-top:1px solid #2f2f2f;
text-align:center;
}

.footer-text{
color:#888;
font-size:15px;
line-height:1.2;
}

@media (max-width: 1400px){
.user-box{
min-width:190px;
}
}

@media (max-width: 1200px){
.site-header{
flex-direction:column;
align-items:center;
gap:8px;
padding:8px 10px;
position:static;
}

.header-left,
.header-center,
.header-right{
width:100%;
justify-content:center;
gap:8px;
}

.nav-btn{
height:40px;
font-size:15px;
padding:0 12px;
}

.time-btn{
min-width:74px;
}

.user-box{
min-width:180px;
height:40px;
font-size:15px;
padding:0 12px;
}

.page-wrap{
padding:16px 12px 22px 12px;
}

.page-title{
font-size:28px;
}

.page-subtitle{
font-size:19px;
}

.settings-grid{
grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
gap:12px;
}
}

@media (max-width: 700px){
.site-header{
gap:6px;
padding:6px 8px;
position:static;
}

.header-left,
.header-center,
.header-right{
gap:6px;
}

.nav-btn{
font-size:14px;
padding:0 10px;
height:36px;
border-radius:7px;
}

.time-btn{
min-width:64px;
}

.user-box{
min-width:0;
width:auto;
max-width:100%;
height:36px;
font-size:14px;
padding:0 10px;
border-radius:7px;
}

.page-wrap{
padding:14px 10px 18px 10px;
}

.page-title{
font-size:25px;
}

.page-subtitle{
font-size:18px;
}

.page-note{
font-size:14px;
}

.settings-grid{
grid-template-columns:1fr;
gap:10px;
}

.settings-card{
padding:12px;
min-height:auto;
}

.settings-card-title{
font-size:20px;
margin-bottom:10px;
}

.setting-row{
grid-template-columns:minmax(0,1fr) auto auto;
gap:8px;
padding:9px 0;
min-height:48px;
}

.setting-label{
font-size:15px;
}

.setting-value{
min-width:72px;
font-size:16px;
}

.setting-value-wide{
min-width:110px;
max-width:160px;
}

.setting-btn{
width:40px;
height:40px;
font-size:20px;
}

.allowed-label,
.allowed-value{
font-size:14px;
}

.preview-bar{
height:22px;
}

.card-hint{
font-size:13px;
}

.modal{
padding:10px;
}

.modal-box,
.modal-box-keyboard{
max-width:none;
padding:14px;
border-radius:10px;
}

.modal-title{
font-size:22px;
}

.modal-subtitle{
font-size:17px;
}

.modal-field-title{
font-size:16px;
}

.modal-info-label,
.modal-info-value{
font-size:14px;
}

.number-input{
height:50px;
font-size:24px;
}

.keyboard-grid{
gap:8px;
}

.key-btn{
height:50px;
font-size:22px;
}

.key-btn-wide{
font-size:17px;
}

.modal-actions{
gap:8px;
}

.modal-btn,
.choice-btn{
min-height:46px;
font-size:17px;
}

.choice-note{
font-size:13px;
}

.site-footer{
padding:10px 8px 12px 8px;
}

.footer-text{
font-size:14px;
}
}


/* =========================================================
   VISUAL ZONE MODAL MOBILE SCROLL FIX
   Назначение:
   - на телефоне окно настройки цветовых зон не должно обрезаться снизу;
   - содержимое окна должно прокручиваться внутри экрана;
   - кнопки Отмена / Сохранить должны быть доступны.
   ========================================================= */

@media (max-width: 700px){
.modal{
    align-items:flex-start !important;
    justify-content:center !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
    padding:10px 8px 90px 8px !important;
}

.visual-zone-modal-box{
    width:100% !important;
    max-width:none !important;
    max-height:none !important;
    margin:0 auto 24px auto !important;
    overflow:visible !important;
    box-sizing:border-box !important;
}

.visual-zone-preview{
    padding:8px !important;
}

#visualZoneGauge{
    max-width:100% !important;
}

.visual-zone-field{
    margin-top:12px !important;
}

.visual-zone-range{
    height:42px !important;
}

.visual-zone-mode-buttons{
    grid-template-columns:1fr !important;
    gap:8px !important;
}

.visual-zone-mode-btn{
    min-height:46px !important;
}

.visual-zone-modal-box .modal-actions{
    position:sticky !important;
    bottom:0 !important;
    background:#2b2b2b !important;
    padding-top:10px !important;
    padding-bottom:4px !important;
    z-index:5 !important;
}

.visual-zone-modal-box .modal-btn{
    min-height:48px !important;
}
}

@media (max-height: 760px) and (max-width: 700px){
.visual-zone-modal-box .modal-title{
    font-size:21px !important;
    margin-bottom:5px !important;
}

.visual-zone-modal-box .modal-subtitle{
    font-size:17px !important;
    margin-bottom:6px !important;
}

.visual-zone-preview{
    margin-top:8px !important;
}

#visualZoneGauge{
    max-height:190px !important;
}

.visual-zone-live-values{
    margin:6px 0 8px 0 !important;
}

.visual-zone-auto-wrap{
    margin-top:10px !important;
    padding:8px 10px !important;
}

.visual-zone-field{
    margin-top:10px !important;
}
}


/* =========================================================
   VISUAL ZONE MODAL DESKTOP + MOBILE FIX
   Назначение:
   - окно "Настройка цветовых зон" должно нормально работать
     и на компьютере при небольшой высоте окна, и на телефоне;
   - прокрутка должна быть внутри модального окна;
   - нижние кнопки Отмена / Сохранить должны быть доступны;
   - кнопка "Цветовые зоны" должна иметь штатный вид.
   ========================================================= */

.zone-visual-btn{
display:flex !important;
align-items:center !important;
justify-content:center !important;
width:100% !important;
min-height:42px !important;
margin-top:10px !important;
padding:8px 12px !important;
border:1px solid #4b5660 !important;
border-radius:8px !important;
background:#252525 !important;
color:#00bfff !important;
font-size:15px !important;
font-weight:700 !important;
font-family:Arial, sans-serif !important;
cursor:pointer !important;
box-sizing:border-box !important;
appearance:none !important;
-webkit-appearance:none !important;
}

.zone-visual-btn:hover{
background:#303840 !important;
border-color:#6c8fb2 !important;
}

/* Общая прокрутка модального окна для любого экрана */
#visualZoneModal.modal{
align-items:flex-start !important;
justify-content:center !important;
overflow-y:auto !important;
overflow-x:hidden !important;
-webkit-overflow-scrolling:touch !important;
padding:16px 12px 80px 12px !important;
box-sizing:border-box !important;
}

#visualZoneModal .visual-zone-modal-box{
width:100% !important;
max-width:620px !important;
max-height:none !important;
margin:0 auto 32px auto !important;
overflow:visible !important;
box-sizing:border-box !important;
border-radius:12px !important;
}

#visualZoneModal .visual-zone-preview{
display:block !important;
margin-top:10px !important;
padding:10px !important;
border:1px solid #3e4650 !important;
border-radius:10px !important;
background:#20262c !important;
box-sizing:border-box !important;
}

#visualZoneGauge{
width:100% !important;
max-width:420px !important;
height:auto !important;
display:block !important;
margin:0 auto !important;
}

#visualZoneModal .visual-zone-live-values{
display:flex !important;
justify-content:space-between !important;
gap:10px !important;
margin:8px 0 10px 0 !important;
font-size:14px !important;
color:#b8c0c8 !important;
}

#visualZoneModal .visual-zone-live-values b{
color:#ffcc66 !important;
font-weight:700 !important;
}

#visualZoneModal .visual-zone-bar{
display:flex !important;
position:relative !important;
width:100% !important;
height:28px !important;
background:#1e1e1e !important;
border:1px solid #444 !important;
border-radius:8px !important;
overflow:hidden !important;
box-sizing:border-box !important;
}

#visualZoneModal .visual-zone-bar-part{
height:100% !important;
min-width:0 !important;
}

#visualZoneModal .visual-zone-green{
background:#4caf50 !important;
}

#visualZoneModal .visual-zone-yellow{
background:#ffc107 !important;
}

#visualZoneModal .visual-zone-red{
background:#f44336 !important;
}

#visualZoneModal .visual-zone-auto-wrap{
display:block !important;
margin-top:12px !important;
padding:9px 11px !important;
border:1px solid #3e4650 !important;
border-radius:8px !important;
background:#20262c !important;
box-sizing:border-box !important;
}

#visualZoneModal .visual-zone-check{
display:flex !important;
align-items:center !important;
gap:10px !important;
font-size:15px !important;
line-height:1.25 !important;
color:#eef3f7 !important;
font-weight:700 !important;
cursor:pointer !important;
user-select:none !important;
}

#visualZoneModal .visual-zone-check input{
width:18px !important;
height:18px !important;
accent-color:#9acd32 !important;
}

#visualZoneModal .visual-zone-field{
display:block !important;
margin-top:12px !important;
}

#visualZoneModal .visual-zone-field-head{
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap:10px !important;
margin-bottom:6px !important;
font-size:15px !important;
color:#d8dde2 !important;
}

#visualZoneModal .visual-zone-field-head b{
color:#9acd32 !important;
font-size:16px !important;
font-weight:700 !important;
}

#visualZoneModal .visual-zone-range{
display:block !important;
width:100% !important;
height:36px !important;
accent-color:#9acd32 !important;
cursor:pointer !important;
}

#visualZoneModal .visual-zone-range:disabled{
opacity:0.45 !important;
cursor:not-allowed !important;
}

#visualZoneModal .visual-zone-mode-buttons{
display:grid !important;
grid-template-columns:1fr 1fr !important;
gap:10px !important;
width:100% !important;
}

#visualZoneModal .visual-zone-mode-btn{
width:100% !important;
min-height:44px !important;
font-size:16px !important;
}

#visualZoneModal .visual-zone-mode-btn.active{
background:#1d2b36 !important;
border-color:#00bfff !important;
color:#7fdfff !important;
}

#visualZoneModal .modal-actions{
display:grid !important;
grid-template-columns:1fr 1fr !important;
gap:10px !important;
position:sticky !important;
bottom:0 !important;
background:#2b2b2b !important;
padding-top:10px !important;
padding-bottom:6px !important;
z-index:30 !important;
}

#visualZoneModal .modal-btn{
width:100% !important;
min-height:46px !important;
font-size:16px !important;
}

#visualZoneModal .visual-zone-save-btn{
background:#1f3a22 !important;
border-color:#4caf50 !important;
color:#c8ffcf !important;
font-weight:700 !important;
}

#visualZoneModal .visual-zone-save-btn:hover{
background:#284b2c !important;
border-color:#66bb6a !important;
color:#e6ffe9 !important;
}

#visualZoneModal .visual-zone-setpoint-marker{
position:absolute !important;
top:-5px !important;
bottom:-5px !important;
width:3px !important;
background:#ffffff !important;
border-radius:3px !important;
box-shadow:0 0 0 1px rgba(0,0,0,0.55), 0 0 7px rgba(255,255,255,0.75) !important;
z-index:5 !important;
pointer-events:none !important;
}

#visualZoneModal .visual-zone-setpoint-marker::after{
content:"уставка" !important;
position:absolute !important;
top:-23px !important;
left:50% !important;
transform:translateX(-50%) !important;
font-size:12px !important;
line-height:1 !important;
font-weight:700 !important;
color:#ffffff !important;
text-shadow:0 1px 2px rgba(0,0,0,0.85) !important;
white-space:nowrap !important;
}

/* Компактный режим для низкого окна браузера на компьютере */
@media (max-height: 760px){
#visualZoneModal.modal{
padding-top:8px !important;
padding-bottom:70px !important;
}

#visualZoneModal .visual-zone-modal-box{
max-width:560px !important;
padding:12px !important;
}

#visualZoneModal .modal-title{
font-size:21px !important;
line-height:1.15 !important;
margin-bottom:4px !important;
}

#visualZoneModal .modal-subtitle{
font-size:17px !important;
line-height:1.15 !important;
margin-bottom:5px !important;
}

#visualZoneGauge{
max-height:150px !important;
}

#visualZoneModal .visual-zone-preview{
margin-top:6px !important;
padding:7px !important;
}

#visualZoneModal .visual-zone-live-values{
margin:5px 0 6px 0 !important;
}

#visualZoneModal .visual-zone-bar{
height:24px !important;
}

#visualZoneModal .visual-zone-auto-wrap{
margin-top:8px !important;
padding:7px 9px !important;
}

#visualZoneModal .visual-zone-field{
margin-top:8px !important;
}

#visualZoneModal .visual-zone-range{
height:32px !important;
}

#visualZoneModal .visual-zone-mode-btn{
min-height:40px !important;
}

#visualZoneModal .modal-btn{
min-height:42px !important;
}
}

/* Узкий экран: одна колонка для кнопок режима */
@media (max-width: 700px){
#visualZoneModal.modal{
padding-left:8px !important;
padding-right:8px !important;
}

#visualZoneModal .visual-zone-modal-box{
max-width:none !important;
}

#visualZoneModal .visual-zone-mode-buttons{
grid-template-columns:1fr !important;
gap:8px !important;
}
}


/* =========================================================
   VISUAL ZONE MODAL FINAL SCROLL + GAUGE PROPORTION FIX
   Назначение:
   - кнопки Отмена / Сохранить не закрепляются и не наезжают на блоки;
   - окно прокручивается целиком;
   - canvas-шкала не растягивается по ширине/высоте;
   - пропорции индикатора сохраняются на компьютере и телефоне.
   ========================================================= */

#visualZoneModal .modal-actions,
#visualZoneModal .visual-zone-modal-box .modal-actions,
.visual-zone-modal-box .modal-actions{
position:static !important;
bottom:auto !important;
left:auto !important;
right:auto !important;
z-index:auto !important;
background:transparent !important;
padding-top:14px !important;
padding-bottom:0 !important;
margin-top:14px !important;
display:grid !important;
grid-template-columns:1fr 1fr !important;
gap:10px !important;
}

#visualZoneModal.modal{
overflow-y:auto !important;
overflow-x:hidden !important;
-webkit-overflow-scrolling:touch !important;
align-items:flex-start !important;
justify-content:center !important;
}

#visualZoneModal .visual-zone-modal-box{
margin-bottom:50px !important;
}

#visualZoneModal .visual-zone-preview{
overflow:hidden !important;
}

#visualZoneGauge{
display:block !important;
width:min(100%, 360px) !important;
max-width:360px !important;
height:auto !important;
max-height:none !important;
aspect-ratio:360 / 230 !important;
object-fit:contain !important;
margin:0 auto !important;
}

@media (max-width: 700px){
#visualZoneModal .modal-actions,
#visualZoneModal .visual-zone-modal-box .modal-actions,
.visual-zone-modal-box .modal-actions{
position:static !important;
bottom:auto !important;
background:transparent !important;
padding-top:12px !important;
padding-bottom:0 !important;
margin-top:12px !important;
grid-template-columns:1fr 1fr !important;
}

#visualZoneModal .visual-zone-modal-box{
margin-bottom:90px !important;
}

#visualZoneGauge{
width:min(100%, 340px) !important;
max-width:340px !important;
height:auto !important;
max-height:none !important;
aspect-ratio:360 / 230 !important;
object-fit:contain !important;
}
}

@media (max-width: 420px){
#visualZoneGauge{
width:min(100%, 320px) !important;
max-width:320px !important;
height:auto !important;
max-height:none !important;
}
}