/* ============================================
   CSS Variables - Modern Light Mode Theme
   ============================================ */
:root {
    /* Colors */
    --color-primary: #0D6EFD;
    --color-primary-hover: #0B5ED7;
    --color-success: #198754;
    --color-warning: #FFC107;
    --color-danger: #DC3545;
    --color-info: #0DCAF0;
    --color-alert: #FD7E14;
    
    /* Backgrounds */
    --bg-primary: #FFFFFF;
    --bg-secondary: #F8F9FA;
    --bg-tertiary: #E9ECEF;
    --bg-dark: #212529;
    
    /* Text Colors */
    --text-primary: #212529;
    --text-secondary: #6C757D;
    --text-light: #FFFFFF;
    --text-muted: #ADB5BD;
    
    /* Borders */
    --border-color: #DEE2E6;
    --border-color-light: #E9ECEF;
    --border-radius: 8px;
    --border-radius-sm: 4px;
    --border-radius-lg: 12px;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    
    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    
    /* Status Colors (maintaining existing meanings) */
    --status-low: #0DCAF0;
    --status-ok: #198754;
    --status-warning: #FFC107;
    --status-alert: #FD7E14;
    --status-danger: #DC3545;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,body{
    height:100%;
}
body{
    font-family: 'Open Sans', sans-serif;
    font-size: 1em;
    margin:0;
    padding:0;
    overflow-x: hidden;
    height: 100%;
    background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 50%, var(--bg-tertiary) 100%);
    color: var(--text-primary);
    line-height: 1.5;
}

input, textarea{
    font-family: Arial;
}

.loader-main{
    z-index: 1500;
    position: absolute;
    top: 52%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    height: 88%;
    background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.loader-content{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6rem;
    text-align: center;
    animation: fadeIn 0.5s ease-in;
}

.loader-content h1{
    color: var(--text-primary);
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
    margin-top: 2rem;
    letter-spacing: -0.02em;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

.navbar{
    overflow: hidden;
    list-style-type: none;
    position: fixed;
    bottom: 0;
    width: 100%;
    background: linear-gradient(to top, var(--bg-primary) 0%, var(--bg-secondary) 100%);
    padding: 0;
    margin: 0;
    color: var(--text-primary);
    border-top: 2px solid var(--border-color);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
    z-index: 1000;
    backdrop-filter: blur(10px);
}

.brand-container{
    width: 25%;
    display: flex;
    flex-direction: row;
    position: absolute;
    right: 0;
    align-items: center;
    gap: var(--spacing-md);
    padding-right: var(--spacing-md);
}

.brand-container span{
    flex:1;
}

.time-container{
    padding-top: 0;
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.95rem;
}

/* .header-page-container moved above */

/* .header-status-breadcrumb and .time-logo-container styles moved above */

.title-subtitle{
    font-weight: normal;
    display: inline-block;
    margin-left: 1rem;
}

/*.header-status-breadcrumb h2{*/
    /*font-weight: normal;*/
/*}*/

/*.header-status-breadcrumb h2{*/
    /*display: inline-block;*/
    /*margin-left: 1rem;*/
/*}*/


#insta_title{
    display: inline-block;
    padding-left: 3px;
}

.time-logo-container{
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex-shrink: 0;
}

.logo-widget{
    display: flex;
    align-items: center;
}

.logo-widget img{
    height: 42px;
    width: auto;
}

.time-widget{
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.85rem;
    white-space: nowrap;
}

.header-page-container{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm) var(--spacing-md);
    margin-bottom: var(--spacing-xs);
    border-bottom: 1px solid var(--border-color-light);
    background-color: var(--bg-primary);
    position: relative;
    flex-shrink: 0;
}

.header-status-breadcrumb {
    flex: 1;
    display: flex;
    align-items: center;
}

.header-status-breadcrumb h1 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.main-header{
    padding-left: var(--spacing-lg);
    padding-top: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--border-color-light);
}

.main-header h1 {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

/*
==============================================================
                      Navigation Left
==============================================================
*/
#sandwich{
    font-size: 1.5rem;
    cursor:pointer;
    width: 2.5rem;
    height: 2.5rem;
    line-height: 2.5rem;
    text-align: center;
    position: absolute;
    left: var(--spacing-md);
    top: var(--spacing-md);
    transform: translateY(0);
    color: var(--text-primary);
    background-color: var(--bg-secondary);
    z-index: 1001;
    vertical-align: middle;
    border-radius: var(--border-radius-sm);
    transition: all 0.2s ease;
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

#sandwich:hover {
    background-color: var(--color-primary);
    color: var(--text-light);
    transform: scale(1.05);
}
 
.sidenav {
    height: 95.5%;
    position: fixed;
    z-index: 1000;
    width: 0;
    top: 0;
    left: 0;
    background: linear-gradient(to bottom, var(--bg-primary) 0%, var(--bg-secondary) 100%);
    overflow-x: hidden;
    overflow-y: auto;
    transition: 0.3s ease;
    padding: 0;
    color: var(--text-primary);
    box-shadow: var(--shadow-lg);
    border-right: 1px solid var(--border-color);
}

.sidenav::-webkit-scrollbar {
    width: 6px;
}

.sidenav::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

.sidenav::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

.sidenav::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

.sidenav a {
    padding: var(--spacing-md) var(--spacing-md) var(--spacing-md) var(--spacing-xl);
    text-decoration: none;
    font-size: 0.95rem;
    color: var(--text-primary);
    display: block;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
    border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
}

.sidenav a:hover {
    color: var(--color-primary);
    background-color: var(--bg-secondary);
    border-left-color: var(--color-primary);
    transition: all 0.2s ease;
}

.sidenav div span:hover {
    color: var(--color-primary);
    transition: all 0.2s ease;
}

.sidenav .closebtn {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    font-size: 28px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    background-color: var(--bg-secondary);
    border-radius: var(--border-radius-sm);
    transition: all 0.2s ease;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}

.sidenav .closebtn:hover {
    background-color: var(--color-danger);
    color: var(--text-light);
    transform: rotate(90deg);
}

.sidenav div {
    padding: var(--spacing-sm) var(--spacing-md);
    text-decoration: none;
    font-size: 0.9rem;
    color: var(--text-secondary);
    transition: all 0.2s ease;
    cursor: pointer;
}

.sidenav .user-options {
    padding: var(--spacing-xl) var(--spacing-md) var(--spacing-md);
    border-bottom: 1px solid var(--border-color-light);
    margin-bottom: var(--spacing-sm);
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
    border-radius: var(--border-radius);
}

.sidenav .user-options #username {
    display: flex;
    align-items: center;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    text-transform: none;
    letter-spacing: normal;
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: rgba(13, 110, 253, 0.1);
    border-radius: var(--border-radius-sm);
    border-left: 3px solid var(--color-primary);
    margin-bottom: var(--spacing-sm);
}

.sidenav .user-options #username::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: var(--spacing-sm);
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%230D6EFD"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
}

.sidenav .nav-item {
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--text-primary);
    font-weight: 500;
    display: block;
    border-radius: var(--border-radius-sm);
    transition: all 0.2s ease;
}

.sidenav .nav-item:hover:not(.nav-disabled) {
    background-color: var(--bg-secondary);
    color: var(--color-primary);
    padding-left: var(--spacing-lg);
}

.sidenav .nav-item.logout {
    color: var(--color-danger);
    font-weight: 600;
    margin-top: var(--spacing-sm);
}

.sidenav .nav-item.logout:hover {
    background-color: rgba(220, 53, 69, 0.1);
    color: var(--color-danger);
}

.sidenav .nav-disabled {
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 1px;
    margin-top: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
    padding-bottom: var(--spacing-xs);
    border-bottom: 1px solid var(--border-color-light);
    cursor: default;
}

.sidenav-decor{
    padding: 0px;
    text-align: center;
}

.nav-item{
    display: block;
}

#global-options, #intal-options {
    padding-left: var(--spacing-sm);
}

#global-options h4, #intal-options h4 {
    margin: var(--spacing-xs) 0;
    font-weight: 500;
    font-size: 0.95rem;
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--text-primary);
    transition: all 0.2s ease;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    border-left: 3px solid transparent;
}

#global-options h4:hover, #intal-options h4:hover {
    color: var(--color-primary);
    background-color: var(--bg-secondary);
    border-left-color: var(--color-primary);
    padding-left: var(--spacing-lg);
}

.nav-disabled:hover {
    color: var(--text-muted) !important;
    cursor: default;
}

/* #intal-options h4 styles moved above with #global-options */

.instal-nav{
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: var(--spacing-xs) 0;
    margin: var(--spacing-xs) 0;
    border-radius: var(--border-radius-sm);
    transition: all 0.2s ease;
}

.instal-nav:hover {
    background-color: var(--bg-secondary);
}

.insta-name{
    text-align: left!important;
    flex: 4;
    font-size: 0.9rem;
    padding: var(--spacing-sm) var(--spacing-md)!important;
    color: var(--text-primary);
    font-weight: 500;
    cursor: pointer;
}

.insta-info{
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--spacing-xs);
    padding-right: var(--spacing-sm);
}

.insta-brand{
    position: absolute;
    right:0;
    top:0;
}

.insta-brand img{
    width: 400px;
}

.logout{
    font-size: 0.9rem!important;
    font-weight: 600;
}

/*
==============================================================
                      Navigation Bottom
==============================================================
*/
.nv-bot-display-n{
    display: none
}

.nv-bot{

}

.nv-bot {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: var(--spacing-xs) 0;
}

.nv-bot li{
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nv-bot li a{
    display: block;
    text-align: center;
    padding: var(--spacing-md) var(--spacing-lg);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--text-secondary);
    transition: all 0.2s ease;
    border-radius: var(--border-radius-sm);
    margin: 0 var(--spacing-xs);
    position: relative;
    white-space: nowrap;
}

.nv-bot li a::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background-color: var(--color-primary);
    transition: width 0.2s ease;
    border-radius: 3px 3px 0 0;
}

.nv-bot li a:hover {
    background-color: var(--bg-primary);
    color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.nv-bot li a:hover::before {
    width: 80%;
}

.nv-bot li a:active {
    transform: translateY(0);
}

.nv-bot li a:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Active state for current page */
.nv-bot li.active a {
    color: var(--color-primary);
    background-color: var(--bg-primary);
    font-weight: 600;
}

.nv-bot li.active a::before {
    width: 80%;
}


@media screen and (max-width: 1490px){
	.nv-bot li a{
		padding: var(--spacing-sm) var(--spacing-md);
		font-size: 0.85rem;
	}
}

@media screen and (max-width: 1200px){
	.nv-bot li a{
		padding: var(--spacing-sm) var(--spacing-sm);
		font-size: 0.8rem;
		margin: 0 2px;
	}
}

/*
==============================================================
                      Main Container
==============================================================
*/

.container{
    display: flex;
    padding: var(--spacing-xs);
    gap: var(--spacing-sm);
    min-height: 0;
}

.main{
    /*height: 96%;*/
    opacity:0;
    /*pointer-events: none;*/
    /*cursor: default;*/
    /*background:rgba(0, 0, 0, 0.75);*/
    /*filter: brightness(20%);*/
}

.main-after{
    height: calc(100vh - 60px);
    display: flex;
    overflow: hidden;
}

/* Status page specific layout */
.main-after:has(.status-content-wrapper) {
    flex-direction: column;
}

.status-content-wrapper {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.main-after:has(.status-content-wrapper) .header-page-container {
    width: 100%;
    flex-shrink: 0;
}

/*
--------------------------------------------------------------
                      Biggest Container
--------------------------------------------------------------
*/

.c-big {
    flex: 2;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.c-column{
    flex-direction: column;
}

.c-charts{
    flex: 0 0 auto;
    padding: 0 var(--spacing-sm);
    background-color: var(--bg-primary);
}

.c-graph{
    display: flex;
    flex-direction: row;
    background-color: var(--bg-secondary);
    border-radius: var(--border-radius);
    padding: var(--spacing-xs);
    margin-bottom: var(--spacing-xs);
    box-shadow: var(--shadow-sm);
}

.real{
    padding: 0;
}
.risk{
    padding: 0;
}

.graph{
    flex: 8;
    height: 200px;
    min-height: 180px;
    max-height: 220px;
    background-color: var(--bg-primary);
    border-radius: var(--border-radius-sm);
    padding: var(--spacing-xs);
}

/* Date Controllers */
.date-controllers {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    background-color: var(--bg-secondary);
    border-radius: var(--border-radius-sm);
    margin-bottom: var(--spacing-xs);
    flex-wrap: wrap;
    flex: 0 0 auto;
}

.date-controllers span {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-weight: 500;
    color: var(--text-primary);
}

.date-controllers input[type="date"] {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 0.9rem;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.date-controllers input[type="date"]:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);
}

.date-controllers input[type="date"]:hover {
    border-color: var(--color-primary);
}

.date-controllers input[type="text"]:disabled {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 0.9rem;
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
    cursor: not-allowed;
    text-align: center;
}

/* Buttons */
button, .camera-btn-same {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Open Sans', sans-serif;
}

button:hover:not(:disabled), .camera-btn-same:hover:not(:disabled) {
    background-color: var(--color-primary);
    color: var(--text-light);
    border-color: var(--color-primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}

button:disabled, .camera-btn-same:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: var(--bg-tertiary);
    color: var(--text-muted);
}

button:active:not(:disabled), .camera-btn-same:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}


.info{
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: var(--spacing-xs);
    font-weight: 600;
    font-size: 0.95rem;
    background-color: var(--bg-primary);
    border-radius: var(--border-radius-sm);
    margin-left: var(--spacing-xs);
    box-shadow: var(--shadow-sm);
}

.info div{
    flex:1;
    width: 100%;
    padding: var(--spacing-xs) 0;
    color: var(--text-primary);
    display: flex;
    align-items: baseline;
    gap: var(--spacing-xs);
}

.measure{
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-secondary);
}

/*
**************************************************************
                      Console log
**************************************************************
*/

.c-log{
    flex: 1;
    padding: var(--spacing-xs) var(--spacing-sm) var(--spacing-md) var(--spacing-sm);
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.event-table-wrapper{
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.e-log{
    flex:1;
    padding: 7vh 5px 5px 30px;
}

.c-log-sensor{
    flex: 1;
    padding: var(--spacing-xs) var(--spacing-xs) var(--spacing-md) var(--spacing-xs);
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.console-main{
    display: flex;
    flex-direction: column;
    margin-top: var(--spacing-xs);
    flex: 1;
    min-height: 0;
    background-color: var(--bg-primary);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.console-sensors{
    margin-top: var(--spacing-xs);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.console-head{
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    font-weight: 600;
    text-align: center;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0;
    border-bottom: 1px solid var(--border-color);
}


.th-select{
    width: 100%;
    border: 1px solid var(--border-color);
    outline: none;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    transition: all 0.2s ease;
}

.th-select:hover {
    border-color: var(--color-primary);
    background-color: var(--bg-secondary);
}

.th-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);
}

.thE-select{
    width: 100%;
    border: none;
    outline: none;
    background-color: #333333;
    color: #DDDDDD;
    font-weight: bold;
    font-size: 0.7rem;
    cursor: pointer;
}

#list_sensors{
    cursor: pointer;
}

.console-title{
    display: inline-block;
    padding: var(--spacing-xs) 0;
    color: var(--text-primary);
    font-weight: 600;
}

.log-title{
    display: inline-block;
    padding: var(--spacing-xs);
    text-align: center;
    color: var(--text-primary);
    font-weight: 600;
}

.log-title input{
    text-align: center;
    vertical-align: middle;
}

.console-body{
    flex:1;
    display: flex;
    margin: 5px 0;
    min-height: 0;
}

.overflow-container{
    flex:1;
    overflow-y: auto;
    width: 100%;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) var(--bg-secondary);
}

.overflow-container::-webkit-scrollbar {
    width: 8px;
}

.overflow-container::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

.overflow-container::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

.overflow-container::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

.console-statement{
    font-size: 0.85rem;
    margin: 0 0 1px 0;
    background-color: var(--bg-primary);
    transition: background-color 0.2s ease;
}

.console-statement:hover {
    background-color: var(--bg-secondary);
}

.console-info-table{
    display: grid;
    grid-template-columns: 1fr 1fr 2fr 1fr;
    font-size: 0.85rem;
    gap: var(--spacing-xs);
}

.console-info-table .log-title {
    padding: var(--spacing-xs);
    font-weight: 600;
    color: var(--text-primary);
}

.console-infoE-table{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 2fr 1fr;
    font-size: 0.85rem;
    gap: var(--spacing-xs);
}

.console-infoE-table .log-title {
    padding: var(--spacing-xs);
    font-weight: 600;
    color: var(--text-primary);
}

.console-sensors-table{
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    font-size: 0.85rem;
    gap: var(--spacing-xs);
}

.console-sensors-table .log-title {
    padding: var(--spacing-xs);
    font-weight: 600;
    color: var(--text-primary);
}

.console-sensors-table .log-title.sortable {
    cursor: pointer;
    user-select: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    white-space: nowrap;
}

.console-sensors-table .log-title.sortable:hover {
    background-color: var(--bg-tertiary, rgba(0, 0, 0, 0.05));
}

.sort-indicator {
    font-size: 0.7em;
    opacity: 0;
    visibility: hidden;
}

.sort-indicator.sort-asc,
.sort-indicator.sort-desc {
    opacity: 1;
    visibility: visible;
}

.sort-indicator.sort-asc::before {
    content: "↑";
}

.sort-indicator.sort-desc::before {
    content: "↓";
}

/*
--------------------------------------------------------------
                      Smallest Container
--------------------------------------------------------------
*/

.c-small{
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background-color: var(--bg-primary);
    border-radius: var(--border-radius);
    padding: var(--spacing-xs);
}

.c-map{
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-secondary);
    border-radius: var(--border-radius);
    padding: var(--spacing-xs);
    box-shadow: var(--shadow-sm);
    min-height: 0;
}

.c-logo{
    position:absolute;
    right:0!important;

}
.c-logo img{
    /* width: 150px; */
	height: 51px;
}

.control-line{
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-xs) var(--spacing-sm);
    background-color: var(--bg-primary);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--border-color-light);
}

.control-line:not(:last-child) {
    margin-bottom: var(--spacing-xs);
}

.control-line span{
    position: relative;
    color: var(--text-primary);
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.control-line .left {
    flex: 1;
}

.control-line .right {
    flex: 0 0 auto;
    text-align: right;
    color: var(--color-primary);
    font-weight: 500;
}

.left{
    left: 0;
}
.right{
    right:0;
}

.map{
    flex: 1;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-color-light);
}

.details{
    flex: 0 0 auto;
    background-color: var(--bg-secondary);
    border-radius: var(--border-radius-sm);
    padding: var(--spacing-xs);
    margin-bottom: var(--spacing-xs);
}

.risk-rate{
    margin: var(--spacing-xs) 0;
    padding: var(--spacing-xs);
    text-align: center;
    background-color: var(--bg-secondary);
    border-radius: var(--border-radius-sm);
    font-size: 0.8rem;
    color: var(--text-primary);
    font-weight: 500;
    flex-shrink: 0;
}

.risk-rate span {
    margin: 0 var(--spacing-xs);
}

/*
--------------------------------------------------------------
                      Decorators
--------------------------------------------------------------
*/

.txt-decor{
     padding: 5px 0;
     text-align: center;
 }

.txt-status-decor{
    font-weight:bold;
    padding: 5px;
    text-align: center;
}

.low{
    background-color: var(--status-low);
    color: var(--text-light);
}

.ok{
    background-color: var(--status-ok);
    color: var(--text-light);
}

.warning{
    background-color: var(--status-warning);
    color: var(--text-primary);
}

.alert{
    background-color: var(--status-alert);
    color: var(--text-light);
}

.danger{
    background-color: var(--status-danger);
    color: var(--text-light);
}

.eer{
    background-color: #5f6064;
}

.eir{
    background-color: #AfA0A4;
}

/* Measure class already updated above */


.dot {
    border-radius: 50%;
    display: inline-block;
}

.tiny{
    height: 12px;
    width: 12px;
}

.medium{
    height: 18px;
    width: 18px;
}

.large{
    height: 22px;
    width: 22px;
}

.dotborder{
	border-style: solid;
	border-width: 3px;
	border-color: #1FABDE;
}

.rombo {
    height: 15px;
    width: 15px;
	
     /* width: 100px;  */
     /* height: 100px;  */
     border: 1px solid black;
     -webkit-transform: rotate(45deg);
     -moz-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
     -o-transform: rotate(45deg);
     transform: rotate(45deg);
}

.romRed{
	background: red;
}
.romOrange{
	background: orange;
}
.romYellow{
	background: yellow;
}
.romGreen{
	background: green;
}
.romBlue{
	background: blue;
}
.romPurple{
	background: magenta;
}
.romWhite{
	background: white;
}
.romBlack{
     border: 1px solid white;
	background: black;
}




.aligner{
    right:0;
}

.err-container{
    width: 100%;
    height: 100%;
    display: table;
    text-align: center;
}

.err-msg{
    display: table-cell;
    vertical-align: middle;
}

.loader_e {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #CCCCCC;
    border-bottom: 16px solid #CCCCCC;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

#loader-chart_1, #loader-chart_2{
    z-index: 1000;
    margin: 8rem 30rem;
    position: absolute;
}

@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.ldr-center{
    margin-left: 45%;
    margin-top: 2%;
}

.loader {
    margin: 0;
    font-size: 32px;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    position: relative;
    text-indent: -9999em;
    -webkit-animation: load5 1.1s infinite ease;
    animation: load5 1.1s infinite ease;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}
@-webkit-keyframes load5 {
    0%,
    100% {
        box-shadow: 0em -2.6em 0em 0em #0D6EFD, 1.8em -1.8em 0 0em rgba(13, 110, 253, 0.2), 2.5em 0em 0 0em rgba(13, 110, 253, 0.2), 1.75em 1.75em 0 0em rgba(13, 110, 253, 0.2), 0em 2.5em 0 0em rgba(13, 110, 253, 0.2), -1.8em 1.8em 0 0em rgba(13, 110, 253, 0.2), -2.6em 0em 0 0em rgba(13, 110, 253, 0.5), -1.8em -1.8em 0 0em rgba(13, 110, 253, 0.7);
    }
    12.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(13, 110, 253, 0.7), 1.8em -1.8em 0 0em #0D6EFD, 2.5em 0em 0 0em rgba(13, 110, 253, 0.2), 1.75em 1.75em 0 0em rgba(13, 110, 253, 0.2), 0em 2.5em 0 0em rgba(13, 110, 253, 0.2), -1.8em 1.8em 0 0em rgba(13, 110, 253, 0.2), -2.6em 0em 0 0em rgba(13, 110, 253, 0.2), -1.8em -1.8em 0 0em rgba(13, 110, 253, 0.5);
    }
    25% {
        box-shadow: 0em -2.6em 0em 0em rgba(13, 110, 253, 0.5), 1.8em -1.8em 0 0em rgba(13, 110, 253, 0.7), 2.5em 0em 0 0em #0D6EFD, 1.75em 1.75em 0 0em rgba(13, 110, 253, 0.2), 0em 2.5em 0 0em rgba(13, 110, 253, 0.2), -1.8em 1.8em 0 0em rgba(13, 110, 253, 0.2), -2.6em 0em 0 0em rgba(13, 110, 253, 0.2), -1.8em -1.8em 0 0em rgba(13, 110, 253, 0.2);
    }
    37.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(13, 110, 253, 0.2), 1.8em -1.8em 0 0em rgba(13, 110, 253, 0.5), 2.5em 0em 0 0em rgba(13, 110, 253, 0.7), 1.75em 1.75em 0 0em #0D6EFD, 0em 2.5em 0 0em rgba(13, 110, 253, 0.2), -1.8em 1.8em 0 0em rgba(13, 110, 253, 0.2), -2.6em 0em 0 0em rgba(13, 110, 253, 0.2), -1.8em -1.8em 0 0em rgba(13, 110, 253, 0.2);
    }
    50% {
        box-shadow: 0em -2.6em 0em 0em rgba(13, 110, 253, 0.2), 1.8em -1.8em 0 0em rgba(13, 110, 253, 0.2), 2.5em 0em 0 0em rgba(13, 110, 253, 0.5), 1.75em 1.75em 0 0em rgba(13, 110, 253, 0.7), 0em 2.5em 0 0em #0D6EFD, -1.8em 1.8em 0 0em rgba(13, 110, 253, 0.2), -2.6em 0em 0 0em rgba(13, 110, 253, 0.2), -1.8em -1.8em 0 0em rgba(13, 110, 253, 0.2);
    }
    62.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(13, 110, 253, 0.2), 1.8em -1.8em 0 0em rgba(13, 110, 253, 0.2), 2.5em 0em 0 0em rgba(13, 110, 253, 0.2), 1.75em 1.75em 0 0em rgba(13, 110, 253, 0.5), 0em 2.5em 0 0em rgba(13, 110, 253, 0.7), -1.8em 1.8em 0 0em #0D6EFD, -2.6em 0em 0 0em rgba(13, 110, 253, 0.2), -1.8em -1.8em 0 0em rgba(13, 110, 253, 0.2);
    }
    75% {
        box-shadow: 0em -2.6em 0em 0em rgba(13, 110, 253, 0.2), 1.8em -1.8em 0 0em rgba(13, 110, 253, 0.2), 2.5em 0em 0 0em rgba(13, 110, 253, 0.2), 1.75em 1.75em 0 0em rgba(13, 110, 253, 0.2), 0em 2.5em 0 0em rgba(13, 110, 253, 0.5), -1.8em 1.8em 0 0em rgba(13, 110, 253, 0.7), -2.6em 0em 0 0em #0D6EFD, -1.8em -1.8em 0 0em rgba(13, 110, 253, 0.2);
    }
    87.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(13, 110, 253, 0.2), 1.8em -1.8em 0 0em rgba(13, 110, 253, 0.2), 2.5em 0em 0 0em rgba(13, 110, 253, 0.2), 1.75em 1.75em 0 0em rgba(13, 110, 253, 0.2), 0em 2.5em 0 0em rgba(13, 110, 253, 0.2), -1.8em 1.8em 0 0em rgba(13, 110, 253, 0.5), -2.6em 0em 0 0em rgba(13, 110, 253, 0.7), -1.8em -1.8em 0 0em #0D6EFD;
    }
}
@keyframes load5 {
    0%,
    100% {
        box-shadow: 0em -2.6em 0em 0em #0D6EFD, 1.8em -1.8em 0 0em rgba(13, 110, 253, 0.2), 2.5em 0em 0 0em rgba(13, 110, 253, 0.2), 1.75em 1.75em 0 0em rgba(13, 110, 253, 0.2), 0em 2.5em 0 0em rgba(13, 110, 253, 0.2), -1.8em 1.8em 0 0em rgba(13, 110, 253, 0.2), -2.6em 0em 0 0em rgba(13, 110, 253, 0.5), -1.8em -1.8em 0 0em rgba(13, 110, 253, 0.7);
    }
    12.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(13, 110, 253, 0.7), 1.8em -1.8em 0 0em #0D6EFD, 2.5em 0em 0 0em rgba(13, 110, 253, 0.2), 1.75em 1.75em 0 0em rgba(13, 110, 253, 0.2), 0em 2.5em 0 0em rgba(13, 110, 253, 0.2), -1.8em 1.8em 0 0em rgba(13, 110, 253, 0.2), -2.6em 0em 0 0em rgba(13, 110, 253, 0.2), -1.8em -1.8em 0 0em rgba(13, 110, 253, 0.5);
    }
    25% {
        box-shadow: 0em -2.6em 0em 0em rgba(13, 110, 253, 0.5), 1.8em -1.8em 0 0em rgba(13, 110, 253, 0.7), 2.5em 0em 0 0em #0D6EFD, 1.75em 1.75em 0 0em rgba(13, 110, 253, 0.2), 0em 2.5em 0 0em rgba(13, 110, 253, 0.2), -1.8em 1.8em 0 0em rgba(13, 110, 253, 0.2), -2.6em 0em 0 0em rgba(13, 110, 253, 0.2), -1.8em -1.8em 0 0em rgba(13, 110, 253, 0.2);
    }
    37.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(13, 110, 253, 0.2), 1.8em -1.8em 0 0em rgba(13, 110, 253, 0.5), 2.5em 0em 0 0em rgba(13, 110, 253, 0.7), 1.75em 1.75em 0 0em #0D6EFD, 0em 2.5em 0 0em rgba(13, 110, 253, 0.2), -1.8em 1.8em 0 0em rgba(13, 110, 253, 0.2), -2.6em 0em 0 0em rgba(13, 110, 253, 0.2), -1.8em -1.8em 0 0em rgba(13, 110, 253, 0.2);
    }
    50% {
        box-shadow: 0em -2.6em 0em 0em rgba(13, 110, 253, 0.2), 1.8em -1.8em 0 0em rgba(13, 110, 253, 0.2), 2.5em 0em 0 0em rgba(13, 110, 253, 0.5), 1.75em 1.75em 0 0em rgba(13, 110, 253, 0.7), 0em 2.5em 0 0em #0D6EFD, -1.8em 1.8em 0 0em rgba(13, 110, 253, 0.2), -2.6em 0em 0 0em rgba(13, 110, 253, 0.2), -1.8em -1.8em 0 0em rgba(13, 110, 253, 0.2);
    }
    62.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(13, 110, 253, 0.2), 1.8em -1.8em 0 0em rgba(13, 110, 253, 0.2), 2.5em 0em 0 0em rgba(13, 110, 253, 0.2), 1.75em 1.75em 0 0em rgba(13, 110, 253, 0.5), 0em 2.5em 0 0em rgba(13, 110, 253, 0.7), -1.8em 1.8em 0 0em #0D6EFD, -2.6em 0em 0 0em rgba(13, 110, 253, 0.2), -1.8em -1.8em 0 0em rgba(13, 110, 253, 0.2);
    }
    75% {
        box-shadow: 0em -2.6em 0em 0em rgba(13, 110, 253, 0.2), 1.8em -1.8em 0 0em rgba(13, 110, 253, 0.2), 2.5em 0em 0 0em rgba(13, 110, 253, 0.2), 1.75em 1.75em 0 0em rgba(13, 110, 253, 0.2), 0em 2.5em 0 0em rgba(13, 110, 253, 0.5), -1.8em 1.8em 0 0em rgba(13, 110, 253, 0.7), -2.6em 0em 0 0em #0D6EFD, -1.8em -1.8em 0 0em rgba(13, 110, 253, 0.2);
    }
    87.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(13, 110, 253, 0.2), 1.8em -1.8em 0 0em rgba(13, 110, 253, 0.2), 2.5em 0em 0 0em rgba(13, 110, 253, 0.2), 1.75em 1.75em 0 0em rgba(13, 110, 253, 0.2), 0em 2.5em 0 0em rgba(13, 110, 253, 0.2), -1.8em 1.8em 0 0em rgba(13, 110, 253, 0.5), -2.6em 0em 0 0em rgba(13, 110, 253, 0.7), -1.8em -1.8em 0 0em #0D6EFD;
    }
}


.infoLegend { 		/*ventana*/
	padding: 5px 5px 5px 5px;
	font: 13px/13px Arial,Helvetica, sans-serif;
	background: white;
	opacity: 0.8;
	/* background: rgba(255,255,255,0.8); */
	/* box-shadow: 0 0 15px rgba(0,0,0,0.2); */
	/* border-radius: 5px; */
} 
	

.legend { 		/*texto*/
	text-align: left;
	color: #555;
}

.legend h5 {		/*titulo*/
	font: 14px/14px Arial,Helvetica, sans-serif;
	line-height: 23px;
	margin: 0;
	color: #777;
}


/*
=================================================================
                        Login
=================================================================
*/
#logout{
    margin-left: 2rem;
}

.login{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    display: flex;
    flex-direction: row;
    gap: var(--spacing-lg);
    align-items: stretch;
    max-width: 1200px;
    width: 95%;
}

.login-title{
    flex: 1;
    display: flex;
    flex-direction: row;
    background: var(--bg-secondary);
    padding: var(--spacing-xl);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-color-light);
}

.title-test{
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-right: var(--spacing-xl);
    margin-right: var(--spacing-xl);
    border-right: 2px solid var(--border-color-light);
    min-width: 240px;
}

.title-test h1{
    font-size: 2rem;
    font-weight: 600;
    margin: 0 0 var(--spacing-xs) 0;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.title-test h2{
    font-size: 1.5rem;
    font-weight: 500;
    margin: 0 0 var(--spacing-sm) 0;
    color: var(--text-secondary);
}

.title-test span{
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-muted);
    background: var(--bg-primary);
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--border-color);
}

.login-title form{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 280px;
    max-width: 350px;
}

.login-logo{
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl);
    background: var(--bg-primary);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color-light);
    width: 450px;
}

.login-logo img{
    max-width: 100%;
    height: auto;
    max-height: 180px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.form-raw{
    margin-bottom: var(--spacing-md);
    display: flex;
    flex-direction: column;
}

.form-raw label{
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.form-raw input{
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.95rem;
    transition: all 0.2s ease;
    outline: none;
    width: 100%;
    box-sizing: border-box;
}

.form-raw input:hover{
    border-color: var(--color-primary);
}

.form-raw input:focus{
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);
}

.sign-in{
    background-color: var(--color-primary);
    color: var(--text-light);
    width: 100%;
    border: none;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius-sm);
    outline: none;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: var(--spacing-xs);
    box-sizing: border-box;
}

.sign-in:hover{
    background-color: var(--color-primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.sign-in:active{
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

.lds-spinner {
    color: #000000;
    display: inline-block;
    position: relative;
    width: 64px;
    height: 64px;
}
.lds-spinner div {
    transform-origin: 32px 32px;
    animation: lds-spinner 1.2s linear infinite;
}

/**/

.instal_window{
    /*display: block;*/
    display: flex;
    flex-direction: row;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1000;
    /*min-height: 150px;*/
    width: 32rem;
    background-color: #FFF;
    transform: translate(-50%, -50%);
    border-radius: 3px;
}


.instal-window-table{
    flex:5;
    display: flex;
    flex-direction: column;
    width: 20rem;
    max-height: 32rem;
}


.instal-btn{
    flex:1;
    margin-left: 1rem;
    justify-content: space-between;
    flex-direction: column;
    display: flex;
}

.btn-option{
    height: 1.8rem;
    bottom: .5rem;
    position: absolute;
}


.instalEv-btn{
    /* flex:0.3; */
    /* margin-left: 1rem; */
    /* justify-content: space-between; */
    /* flex-direction: column; */
    /* display: flex; */
}

.btnEv-option{
    /* height: 1.8rem; */
    /* bottom: .5rem; */
    /* position: ; */
	margin-top: -2px;
	margin-left: 1px;
}

.btn-tnst{
    position: absolute;
    top: 58%;
}

.window-open-btn{
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 5px;
    background-color: #CCCCCC;
    color: #333333;
    border-radius: 3px;
    cursor: pointer;
    outline: none;
    border: none;
}

.window-open-btn:hover{
    background-color: #333333;
    color: #DDDDDD;
    transition: all 0.8s ease-out;
}

.window-head{
    padding: 4px 0 4px 0;
    background-color: #333333;
    color: #DDDDDD;
    font-weight: bold;
    text-align: center;
    height: 17px;
}

.window-line{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    font-size: 0.7rem;
}


/*
=========================================================
                Modal Alert
=========================================================
*/

/* The Modal (background) */
.modalA {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 2001; /* Sit on top */
  padding-top: 200px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modalA-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 30%;
}

/* The Close Button */
.closeA {
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.closeA:hover,
.closeA:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modalA-alert {
  padding: 2px 16px;
  background-color: #ff0000;
  color: white;
}

.modalA-prealert {
	padding: 2px 16px;
  background-color: yellow;
  color: black;
}


.net_date_change{
	border: 1px solid red;
}

/*
=========================================================
                View: Forecast
=========================================================
*/


.forecast-container-main{
    display: flex;
    flex-direction: column;
}

.f-container{
    display: flex;
    padding: 5px;
}

.f-column{
    flex-direction: column;
}

.f-charts{
    flex:2;
    padding-left: 30px;
}

.f-graph{
    flex:1;
    flex-direction: row;
}

.f-real{
    padding: 0;

}
.f-risk{
    padding: 0;
}

.fgraph{
    flex: 8;
    max-height: 270px!important;
    min-height: 210px!important;
}

.f-loader {
    margin: 100px auto;
    font-size: 25px;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    position: relative;
    text-indent: -9999em;
    -webkit-animation: load5 1.1s infinite ease;
    animation: load5 1.1s infinite ease;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}


#f-loader-chart_1, #f-loader-chart_2, #f-loader-chart_3, #f-loader-chart_4{
    z-index: 1000;
    margin: 6rem 50rem;
    position: absolute;
}

/*
=========================================================
                View: Users
=========================================================
*/

.view-block-users{
    display: flex;
    flex-direction: column;
    height: 80%;
    padding: 3rem;
    gap: var(--spacing-md);
}

#user_new, #user_add, #add_cancel{
    width: 5rem;
}

.user_edit {
	height: 14px;
	cursor: pointer;
}
.user_edit:hover {
	opacity: 0.8;
	height: 15px;
}

.user_sortable {
	cursor: pointer;
	transition: color 0.2s ease;
}

.user_sortable:hover {
	color: var(--color-primary);
}

#userSearch {
	background-image: url('../img/searchicon.png');
	background-position: 10px 10px;
	background-repeat: no-repeat;
	font-size: 14px;
	padding: var(--spacing-sm) var(--spacing-md) var(--spacing-sm) 40px;
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-sm);
	background-color: var(--bg-primary);
	color: var(--text-primary);
	margin-bottom: 0px;
	transition: all 0.2s ease;
}

#userSearch:hover {
	border-color: var(--color-primary);
}

#userSearch:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);
}

.users-read{
    background-color: rgba(25, 135, 84, 0.15) !important;
}

.users-read:hover {
    background-color: rgba(25, 135, 84, 0.25) !important;
}

.users-pending{
    background-color: rgba(255, 193, 7, 0.2) !important;
}

.users-pending:hover {
    background-color: rgba(255, 193, 7, 0.3) !important;
}

.users-container-main{
    display: flex;
    flex-direction: column;
}

.header-pages{
    flex:1;
}

.user-table-flex{
    flex: 15;
    /* padding: 5rem; */
}

.users-main{
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: 88%;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.users-info-table{
    display: grid;
    grid-template-columns: repeat(4, 3fr) 2fr 4fr 3fr repeat(6, 2fr) 1fr;
    font-size: 0.7rem;
}

.users-head{
    padding: var(--spacing-sm) 0px;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    font-weight: 600;
    text-align: center;
    border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0;
}

.users-title{
    display: inline-block;
    padding: 3px 0;
}

.users-body{
    /* flex: 1; */
    display: flex;
    margin: 5px 0;
    /* min-height: 0; */
}

.users-statement{
    font-size: 0.7rem;
    margin: 0 0 2px 0;
    background-color: var(--bg-primary);
    border-bottom: 1px solid var(--border-color-light);
    transition: background-color 0.2s ease;
}

.users-statement:hover {
    background-color: var(--bg-secondary);
}

.users-title{

}


.input-line{
    background: #eeeeee;
}


.user-add-title{
    /* margin-left: .3rem; */
}

.user-form-btn{
    /* position: absolute; */
    /* bottom: 8.5rem; */
    /* right: 4rem; */
	/* margin-right: 1rem; */
}

.user-form-btn button{
    margin-top: .5rem;
    padding: var(--spacing-sm) var(--spacing-lg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.95rem;
}

.user-form-btn button:hover {
    background-color: var(--color-primary);
    color: var(--text-light);
    border-color: var(--color-primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}


/* Add padding to container elements */
.user-edit-container {
  padding: 25px;
}

.user-add-container {
  /* line-height: 3.0; */
}

.user-add-container input[type=text],
.user-add-container input[type=number],
.user-add-container input[type=email],
.user-add-container select{
  width: 100%;
  padding: 5px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

.user-add-container input[type=number] {
  -moz-appearance: textfield;
}

.user-add-container input::-webkit-outer-spin-button,
.user-add-container input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.user-add-container input[type=checkbox] {
  padding: 5px 20px;
  margin: 15px;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

/* The Modal (background) */
.user-modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 100; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  /* overflow: auto; */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.6); /* Black w/ opacity */
  /* padding-top: 50px; */
}

/* Modal Content/Box */
.user-modal-content {
  background-color: #fefefe;
  margin: 4% auto auto auto; /* 5% from the top, 15% from the bottom and centered */
  border: 1px solid #888;
  width: 50%; /* Could be more or less, depending on screen size */
  height: 80%;
  overflow: auto;
}

/* Style the horizontal ruler */
hr {
  border: 1px solid #f1f1f1;
  margin-bottom: 20px;
}
 

/* Clear floats */
.user-modal-btn::after {
  content: "";
  clear: both;
  display: table;
}

.user-close {  
  position: absolute;
  right: 15px;
  top: 0;
  color: #000;
  font-size: 35px;
  font-weight: bold;
}

.user-close:hover,
.user-close:focus {
  color: #333;
  cursor: pointer;
}

.closecontainer {
  text-align: center;
  position: relative;
}


/*
=========================================================
                View: Notification
=========================================================
*/

.w3-bar{
    background: var(--bg-secondary);
    display: flex;
    border-bottom: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0;
}

.view-container{
    padding: 10px 35px;
    width: 100%;
    height: 90%;
}

.view-block-notification{
    display: flex;
    flex-direction: row;
    min-height: 85vh;
    padding: 2rem 12rem 2rem 12rem;
}

.view-block{
    display: flex;
    flex-direction: row;
    min-height: 70vh;
    max-height: 85vh;
    padding: 2rem 12rem 2rem 12rem;
}

.bookmark{
    flex: 1;
    margin: 5px;
    width: 100%;
    background: #555;
}

.b-notification{
    background: var(--color-success);
}

.b-alert{
    background: #B71101;
}

.b-maintenance{
    background: #0D70A9;
}

.b-management{
    background: var(--color-danger);
}

.b-send{
    background: var(--color-info);
}

.b-cameras{
    background: var(--color-primary);
}

.b-vision{
    background: #802060;
}

.b-downloads{
    background: var(--color-alert);
}

.b-training{
    background: var(--color-warning);
}

.b-tools{
    background: var(--color-primary);
}

.view-main{
    flex: 9;
    /*height: 80%;*/
    margin: 5px;
    width: 100%;
    background: var(--bg-primary);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}


.view-sublock{
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: var(--spacing-sm);
}

.risk-index-block{
    display: flex;
    flex-direction: row;
    gap: var(--spacing-md);
}

.risk-index-unit{
    flex: 1;
    background-color: var(--bg-secondary);
    border-radius: var(--border-radius);
    padding: var(--spacing-md) var(--spacing-lg);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s ease;
}

.risk-index-unit:hover {
    box-shadow: var(--shadow);
}

.risk-index-unit h3 {
    color: var(--text-primary);
    font-weight: 600;
    margin-top: 0;
    margin-bottom: var(--spacing-md);
    font-size: 1.1rem;
}

.notification-form-column{
    flex: 1;
    margin: 20px 0;
    display: flex;
    flex-direction: column;
    padding-right: 20px;
}

.notification-tab-header{
    border: none;
    background-color: var(--bg-secondary);
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: 1rem;
    outline: none;
    color: var(--text-primary);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 3px solid transparent;
}

.notification-tab-header:hover {
    background-color: var(--bg-tertiary);
    color: var(--color-primary);
}

.tab-active{
    background-color: var(--bg-primary);
    border-bottom: 3px solid var(--color-primary);
    color: var(--color-primary);
    font-weight: 600;
}

.tab-container{
    padding: var(--spacing-md);
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-primary);
    overflow-y: auto;
    max-height: 100%;
}

.notification-row{
    flex: 1;
    display: flex;
    flex-direction: row;
    padding: 8px 0;
    align-items: flex-start;
}

.notification-row-small{
    flex:1;
    display: flex;
    flex-direction: row;
    padding: 10px 0;
}

.notification-row-label{
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-left: 20px;
}

.notification-row-label i{
    color: #333;
    font-size: 4rem;
    margin-top: 2rem;
}

.notification-row-small input, .notification-row textarea{
    flex: 3;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: all 0.2s ease;
    font-size: 0.95rem;
    font-family: 'Open Sans', sans-serif;
}

.notification-row textarea {
    height: 80px;
    resize: none;
    min-height: 80px;
    max-height: 80px;
}

.notification-row-small input:hover, 
.notification-row textarea:hover {
    border-color: var(--color-primary);
}

.notification-row-small input:focus, 
.notification-row textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);
}

.notification-row-small input:disabled, 
.notification-row textarea:disabled {
    background-color: var(--bg-tertiary);
    cursor: not-allowed;
    opacity: 0.7;
}

.notification-row-label label {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.95rem;
}

.line-separator{
    border: 1px solid #FFF;
    width: 90%;
    margin: auto;
    margin-top: 1%;
    margin-bottom: 1%;
}

.line-separator-vertical{
    border: 1px solid #FFF;
    height: 90%;
    margin: auto;
    margin-left: 1%;
    margin-right: 1%;
}

/*
=========================================================
                View: Alerts
=========================================================
*/

.view-main-alert{
    flex: 9;
    margin: 5px;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.alert-row-1{
    flex: 2;
    display: flex;
    flex-direction: row;
    /*max-height: 150px;*/
}

.alert-row-2{
    flex: 5;
    background: #CCCCCC;
    margin: 10px 5px 5px 5px;
    padding: 20px 40px;
}

.alert-row-2 .alert-message-row{
    padding-left: 8rem;
}

.alert-row-3{
    flex: 2;
    background: #DDDDDD;
    margin:5px 5px 0px 5px;
    text-align: center;
    font-size: 1.2rem;
}

.alert-column-1{
    flex: 1;
    background: #BBBBBB;
    margin: 0 5px 0 5px;
    padding: 0 20px;
    display: flex;
    flex-direction: row;
}


/* .alert-option-title, .alert-btn-activate{ */
    /* display:flex; */
    /* flex-direction: column; */
    /* flex:1; */
/* } */

/* .alert-option-title h3{ */
    /* padding-bottom: 1rem; */
    /* margin: 0; */
/* } */

/* .status-container-handler h3{ */
    /* margin-top: .5rem; */
/* } */

/* #launch_prealert, #launch_extalert, #confirm_prealert, #reset_alert{ */
    /* height: 1.5rem; */
    /* width: 6rem; */
/* } */

/* #reset_alert{ */
    /* width: 6rem; */
/* } */

/* .alert-btn-activate{ */
    /* display: flex; */
    /* flex-direction: column; */
/* } */

/* .btn-container-activate{ */
    /* display:flex; */
    /* flex-direction: row; */
/* } */

/* .btn-container-activate div, .btn-container-activate button{ */
    /* flex:1; */
/* } */

/* .alert-btn-activate div, .alert-option-title div{ */
    /* flex: 1; */
    /*max-height: 1.5rem;*/
    /*min-height: .8rem;*/
/* } */

.alert-column-2 div{
    flex:1;
}

.alert-column-2{
    /*flex: 1;*/
    background: #AAAAAA!important;
    /*margin: 0 5px 5px 5px;*/
    /*padding: 20px;*/
    /*display: flex;*/
    /*flex-direction: row;*/
}

.btn-block{
    text-align: right;
    padding-right: 1.3rem;
}

.btn-block input, .btn-block button{
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    margin: 0 var(--spacing-xs);
}

.btn-block input:hover:not(:disabled), 
.btn-block button:hover:not(:disabled) {
    background-color: var(--color-primary);
    color: var(--text-light);
    border-color: var(--color-primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}

.btn-block input:disabled, 
.btn-block button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.alert-message-row{
    margin: 15px 0px;
    display: flex;
    flex-direction: row;
}

.alert-message-row i{
    font-size: 4rem;
}

.alert-message-title{
    flex:1;
    display:flex;
    flex-direction: column;
}

.alert-message-row i{
    color: #333333;
}

.alert-message-row input, .alert-message-row textarea{
    flex: 6;
}


.alert-checkbox-block{
    flex: 3;
    display: flex;
    flex-direction: row;
    margin-left: 5%;
}

.checkbox-container{
    margin-top: 2rem;
}

.alert-checkbox-block h3{
    margin: 0;
}

.alert-checkbox-block div{
    flex:1;
    display: flex;
    flex-direction: row;
}

.alert-row-3 div{
    position: relative;
    top: 30%;
    padding: 1rem 0;
}

.btn-block-alert{
    text-align: right;
    padding-right: 26.5rem;
}

.btn-block-alert button{
    padding: 5px 10px;
}

/* .alert-option h3{ */
    /* display: inline-block; */
/* } */

/* .alert-option button{ */
    /*float:right;*/
    /* display: inline-block; */

/* } */

/* .alert-option{ */
    /* height: 2rem; */
    /* display: table-cell; */
    /* vertical-align: middle; */
    /* width: 100%; */
/* } */

/* .label-password{ */
    /* margin-right: 5rem; */
/* } */


/*
=========================================================
               View: Viewer (Vision)
=========================================================
*/

.vision-content-center{
	position: absolute;
    top: 48%;
    transform: translateY(-50%);
    width: 98%;
    height: 85%;
}

.view-block-vision{
    display: flex;
    flex-direction: row;
    /* height: 20rem; */
    /* padding: 2rem 0 0 0; */
    /* height: 100%; */
	
	position: absolute;
    top: 52%;
    transform: translateY(-50%);
    width: 98%;
    height: 87%;
}

.view-main-vision{
    flex: 9;
    margin: 5px;
    width: 100%;
    /* height: 500px; */
    display: flex;
    /* flex-direction: row; */
}

.vision-row{
    /* flex: 1; */
	display: grid;
    /* background: #CCCCCC; */
    padding: 0px 8px 0px 8px;
}

.vision-row h3{
    margin: 0;
	
	text-align: center;
	font-size: 30px;
}

.v-row-1{
    margin: 0 5px 0 5px;
    width: 100%;
}

.v-row-2{
    margin: 0 5px 0 5px;
    /* width: 50%; */
}

.v-row-3{
    margin: 0 5px 0 5px;
    /* width: 23%; */
}

/*.vision-row div{*/
/*text-align: center;*/
/*position:relative;*/
/*top:10%;*/
/*font-size: .8rem;*/
/*}*/


.pan_cap:hover {opacity: 0.8;}



/* The Modal (background) */
.vis_modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 100; /* Sit on top */
  padding-top: 50px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}


/* Modal Content (image) */
/* .vis_modal-content { */
  /* margin: auto; */
  /* display: block; */
  /* height: 90%; */
/* } */

.vis_modal-content {
  position:absolute;
  height: 85%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


/* Add Animation */
/* .vis_modal-content{   */
  /* -webkit-animation-name: zoom; */
  /* -webkit-animation-duration: 0.6s; */
  /* animation-name: zoom; */
  /* animation-duration: 0.6s; */
/* } */

/* Modal Content (image) */
.vis_modal-matrix {
  position:absolute;
  height: 85%;
  z-index: 20;
    top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


/* Add Animation */
/* .vis_modal-matrix{   */
  /* -webkit-animation-name: zoom; */
  /* -webkit-animation-duration: 0.3s; */
  /* animation-name: zoom; */
  /* animation-duration: 0.3; */
/* } */


.vis_modal-downImage {
	height: 20px;
	filter: invert(100%);
	margin-left: 10px;
	cursor: pointer;
}
.vis_modal-downImage:hover {
	opacity: 0.6;
	/* height: 21px; */
}

.vis_modal-disabled {
	height: 20px;
	filter: invert(100%);
	margin-left: 10px;
	opacity: 0.6;
}

.vis_modal-agro {
	height: 18px;
	filter: invert(100%);
	margin-left: 10px;
	background-color: #7DD41D;
	border-radius: 4px;
	padding: 2px;
	cursor: pointer;
}
.vis_modal-agro:hover {
	opacity: 0.6;
	/* height: 21px; */
}

.vis_modal-ptz {
	height: 18px;
	/* filter: invert(100%); */
	margin-left: 10px;
	background-color: #FFF;
	border-radius: 4px;
	padding: 2px;
	cursor: pointer;
}
.vis_modal-ptz:hover {
	opacity: 0.6;
	/* height: 21px; */
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

/* The Close Button */
.vis_close {
  /* position: absolute; */
  /* top: 10px; */
  /* right: 35px; */
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
  margin-left: 10px;
}

.vis_close:hover,
.vis_close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* The matrix check */
.vis_matrix {
  position: absolute;
  top: 0px;
  right: 17px;
  color: #f1f1f1;
  font-size: 20px;
  font-weight: bold;
  transition: 0.3s;
}



.hiddenEd { display: none !important; }

/* El contenedor del modal que envuelve la imagen y el canvas debe ser relative */
/* #vis_img01 { display:block; max-width:100%; height:auto; user-select:none; } */
/* El canvas se superpone a la imagen */
#vis_canvas01 {
  position:absolute;
  height: 85%;
  z-index: 20;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  inset:0; 
  touch-action:none; 
  pointer-events:auto;
  z-index:104;
}
/* Cursor circular del pincel */
.brush-cursor {
  position:absolute;
  border:2px solid #000;
  border-radius:9999px;
  pointer-events:none;
  transform: translate(-50%, -50%);
  /* height: 85%; */
    /* top: 50%; */
  /* left: 50%; */
  /* transform:translate(-50%,-50%); */
  opacity:0.9;
  z-index:105;
}

.vis_closeEd {
  /* position: absolute; */
  /* top: 10px; */
  /* right: 35px; */
  color: #555;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
  margin-left: 10px;
}

.edLabel {
  font-size: 18px;
  color: white;
  transform: translate(0%, -5%);
}

.edColor {
  height: 25px;
  width: 25px;
  transform: translate(0%, -10%);
}

.edThick {
  height: 20px;
  width: 120px;
}

.edTex {
  height: 21px;
  width: 170px;
  font-size: 17px;
  transform: translate(0%, -10%);
}

.edSiz {
  height: 21px;
  width: 40px;
  font-size: 17px;
  transform: translate(0%, -10%);
}


/*
=========================================================
                View: Cameras
=========================================================
*/

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(255, 255, 255, 0.8);
}

.gohome{
	float:center;
	height:30px;
  padding: 9px;
  background-color: white;
  border: 2px solid #AAA;
  border-radius: 5px;
}

.gohome:hover {
  background-color: #DDD;
}

.cameras-content-center{
    position: absolute;
    top: 48%;
    transform: translateY(-50%);
    width: 97%;
    height: 85%;
}

.view-block-cameras{
    display: flex;
    flex-direction: row;
    height: 20rem;
    padding: 2rem 0 0 0;
    height: 100%;
}

.view-main-cameras{
    flex: 9;
    margin: 5px;
    width: 100%;
    display: flex;
    gap: var(--spacing-xs);
}

.cameras-row{
    background-color: var(--bg-secondary);
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s ease;
}

.cameras-row:hover {
    box-shadow: var(--shadow);
}

.cameras-row h3{
    margin: 0 0 var(--spacing-md) 0;
    text-align: center;
    color: var(--text-primary);
    font-size: 1.25rem;
    font-weight: 600;
}

.c-row-1{
    margin: 0 5px 0 5px;
    width: 22%;
}

.c-row-1 #map {
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--border-color);
    overflow: hidden;
    margin-bottom: var(--spacing-md);
}

.c-row-2{
    margin: 0 5px 0 5px;
    width: 78%;
    display: grid;
}

/* Camera page specific input/select styling */
.cameras-row label,
.c-row-1 label,
.c-row-2 label,
.ccolumnM label {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.9rem;
    margin-right: var(--spacing-xs);
}

.cameras-row input[type="datetime-local"],
.cameras-row input[type="text"],
.cameras-row input[type="number"],
.cameras-row select,
.c-row-1 input[type="datetime-local"],
.c-row-1 input[type="text"],
.c-row-1 input[type="number"],
.c-row-1 select,
.c-row-2 input[type="datetime-local"],
.c-row-2 input[type="text"],
.c-row-2 input[type="number"],
.c-row-2 select,
.ccolumnM input[type="datetime-local"],
.ccolumnM input[type="text"],
.ccolumnM input[type="number"],
.ccolumnM select {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: all 0.2s ease;
    font-size: 0.9rem;
    margin-right: var(--spacing-sm);
}

.cameras-row input[type="datetime-local"]:hover,
.cameras-row input[type="text"]:hover,
.cameras-row input[type="number"]:hover,
.cameras-row select:hover,
.c-row-1 input[type="datetime-local"]:hover,
.c-row-1 input[type="text"]:hover,
.c-row-1 input[type="number"]:hover,
.c-row-1 select:hover,
.c-row-2 input[type="datetime-local"]:hover,
.c-row-2 input[type="text"]:hover,
.c-row-2 input[type="number"]:hover,
.c-row-2 select:hover,
.ccolumnM input[type="datetime-local"]:hover,
.ccolumnM input[type="text"]:hover,
.ccolumnM input[type="number"]:hover,
.ccolumnM select:hover {
    border-color: var(--color-primary);
}

.cameras-row input[type="datetime-local"]:focus,
.cameras-row input[type="text"]:focus,
.cameras-row input[type="number"]:focus,
.cameras-row select:focus,
.c-row-1 input[type="datetime-local"]:focus,
.c-row-1 input[type="text"]:focus,
.c-row-1 input[type="number"]:focus,
.c-row-1 select:focus,
.c-row-2 input[type="datetime-local"]:focus,
.c-row-2 input[type="text"]:focus,
.c-row-2 input[type="number"]:focus,
.c-row-2 select:focus,
.ccolumnM input[type="datetime-local"]:focus,
.ccolumnM input[type="text"]:focus,
.ccolumnM input[type="number"]:focus,
.ccolumnM select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);
}

.cameras-row input[type="datetime-local"]:disabled,
.cameras-row input[type="text"]:disabled,
.cameras-row input[type="number"]:disabled,
.cameras-row select:disabled,
.c-row-1 input[type="datetime-local"]:disabled,
.c-row-1 input[type="text"]:disabled,
.c-row-1 input[type="number"]:disabled,
.c-row-1 select:disabled,
.c-row-2 input[type="datetime-local"]:disabled,
.c-row-2 input[type="text"]:disabled,
.c-row-2 input[type="number"]:disabled,
.c-row-2 select:disabled,
.ccolumnM input[type="datetime-local"]:disabled,
.ccolumnM input[type="text"]:disabled,
.ccolumnM input[type="number"]:disabled,
.ccolumnM select:disabled {
    background-color: var(--bg-tertiary);
    cursor: not-allowed;
    opacity: 0.7;
}

.cameras-row textarea,
.c-row-1 textarea {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: all 0.2s ease;
    font-size: 0.9rem;
    font-family: 'Open Sans', sans-serif;
    resize: vertical;
}

.cameras-row textarea:hover,
.c-row-1 textarea:hover {
    border-color: var(--color-primary);
}

.cameras-row textarea:focus,
.c-row-1 textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);
}

.cameras-row input[type="submit"],
.c-row-1 input[type="submit"] {
    padding: var(--spacing-sm) var(--spacing-lg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.95rem;
}

.cameras-row input[type="submit"]:hover:not(:disabled),
.c-row-1 input[type="submit"]:hover:not(:disabled) {
    background-color: var(--color-primary);
    color: var(--text-light);
    border-color: var(--color-primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}

.cameras-row input[type="submit"]:disabled,
.c-row-1 input[type="submit"]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: var(--bg-tertiary);
}

/*.cameras-row div{*/
/*text-align: center;*/
/*position:relative;*/
/*top:10%;*/
/*font-size: .8rem;*/
/*}*/

.cam_date_change{
	border: 1px solid red;
}

#camerasOUT, #camerasIN {
    width: 100%;
    box-sizing: border-box;
 }



/*
=========================================================
                View: Maintenance
=========================================================
*/

.maintenance-row{
    /*flex: 3;*/
    flex: 2;
    display: flex;
    flex-direction: row;
    margin: 0 5px 0 5px;
    /*max-height: 150px;*/
}

/*
=========================================================
                View: Management
=========================================================
*/

.view-main-management{
    flex: 9;
    margin: 5px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.management-row-1{
    /*flex: 3;*/
    flex: 2;
    display: flex;
    flex-direction: row;
    margin: 0 5px 0 5px;
    /*max-height: 150px;*/
}

.management-row-2{
    flex: 4;
    display: flex;
    flex-direction: row;
    gap: var(--spacing-xs);
    margin: 0;
    min-height: 320px;
}

.management-row-3{
    flex: 1;
    background-color: var(--bg-secondary);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    margin: 0;
    text-align: center;
    font-size: 1.2rem;
    transition: box-shadow 0.2s ease;
}

.management-row-3:hover {
    box-shadow: var(--shadow);
}

.management-row-3 div{
    position: relative;
    top: 30%;
    padding: 1rem 0;
}

.management-column-1{
    flex: 1;
    background-color: var(--bg-secondary);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    margin: 0;
    padding: var(--spacing-md) var(--spacing-lg);
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s ease;
    min-height: 300px;
}

.management-column-1:hover {
    box-shadow: var(--shadow);
}

/* Management/Training section headings */
.management-column-1 h3,
.management-row-3 h3 {
    color: var(--text-primary);
    font-weight: 600;
    margin-top: 0;
    margin-bottom: var(--spacing-md);
    font-size: 1.1rem;
}

/* Management/Training inputs and selects */
.management-column-1 input[type="number"],
.management-column-1 input[type="text"],
.management-column-1 select,
.management-row-3 input[type="password"] {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: all 0.2s ease;
    font-size: 0.95rem;
}

.management-column-1 input[type="number"]:hover,
.management-column-1 input[type="text"]:hover,
.management-column-1 select:hover,
.management-row-3 input[type="password"]:hover {
    border-color: var(--color-primary);
}

.management-column-1 input[type="number"]:focus,
.management-column-1 input[type="text"]:focus,
.management-column-1 select:focus,
.management-row-3 input[type="password"]:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);
}

/* Management/Training labels */
.management-column-1 label,
.management-row-3 .label-password {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.95rem;
}

/* Management/Training buttons */
.management-column-1 button,
.management-row-3 button {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    margin: 0 var(--spacing-xs);
}

.management-column-1 button:hover:not(:disabled),
.management-row-3 button:hover:not(:disabled) {
    background-color: var(--color-primary);
    color: var(--text-light);
    border-color: var(--color-primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}

.management-column-1 button:disabled,
.management-row-3 button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Management/Training checkboxes */
.management-column-1 input[type="checkbox"],
.management-row-3 input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--color-primary);
}

.management-column-2 div{
    flex:1;
}

.management-column-2{
    background-color: var(--bg-secondary) !important;
}



.activation-block{
    flex: 4;
    background-color: var(--bg-secondary);
    width: 100%;
    height: 100%;
    margin: 0 5px 5px 0;
    display: flex;
    flex-direction: row;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s ease;
}

.activation-block:hover {
    box-shadow: var(--shadow);
}

.block-handler{
    flex: 6;
    background-color: var(--bg-secondary);
    display: flex;
    flex-direction: row;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s ease;
}

.block-handler:hover {
    box-shadow: var(--shadow);
}

.activation-title{
    flex: 1;
    /*display: flex;*/
    /*flex-direction: column;*/
}

.activation-title h3, .activation-title div, .activation-title button{
    flex:1;
}
.activation-title:nth-child(1){
    flex: 2;
    display: flex;
    flex-direction: column;
}

.activation-title:nth-child(2){
    height: 100%;
    line-height: 50%;
    padding: 0 .8rem;
    display: flex;
    flex-direction: column;
    position: relative;
}

.activation-title h3{
    padding: 0 .8rem;
    vertical-align: middle;
    text-align: center;
    color: var(--text-primary);
    font-weight: 600;
}

.activation-title button{
    flex: 1;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    margin: 2px;
}

.activation-title button:hover:not(:disabled) {
    background-color: var(--color-primary);
    color: var(--text-light);
    border-color: var(--color-primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}

.activation-title button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* #maintenance_activate{ */
    /* height: 1.5rem; */
    /* width: 6rem; */
    /* position: absolute; */
    /* right: 1rem; */
    /* top: 50%; */
    /* transform: translateY(-50%); */
/* } */

.block-handler-fill{
    flex:1;
}

.activation-container{
    flex: 2;
    padding: 20px;
    max-height: 78%;
    display: flex;
    flex-direction: column;
}

.activation-container button{
    flex: 1;
    margin-top: .5rem;
    float: right;
    width: 5rem;
}

.status-container{
    flex:3;
    background: var(--text-secondary);
    text-align: center;
    padding: 20px 0;
    height: 100%;
    line-height: 50%;
    display: flex;
    flex-direction: column;
    border-radius: var(--border-radius-sm);
    color: var(--text-light);
    font-weight: 600;
}

.status-container div{
    vertical-align: middle;
    text-align: center;
}

.status-off{
    color: var(--text-light);
    background-color: var(--text-secondary);
}

.status-on{
    background: var(--status-ok);
}

.status-training{
    background: var(--color-info);
}

.status-container-handler{
    flex: 1;
}



.alert-option-title, .alert-btn-activate{
    display:flex;
    flex-direction: column;
    flex:1;
}

.alert-option-title h3{
    padding-bottom: 1rem;
    margin: 0;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1.1rem;
}

.alert-option-title div {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.status-container-handler h3{
    margin-top: .5rem;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1.1rem;
}

#launch_prealert, #launch_extalert, #confirm_prealert, #reset_alert{
    height: 2.5rem;
    width: 6rem;
}

.alert-btn-activate{
    display: flex;
    flex-direction: column;
}

.btn-container-activate{
    display:flex;
    flex-direction: row;
}

.btn-container-activate div{
    flex:1;
}

.btn-container-activate button{
    flex:1;
    padding: var(--spacing-sm) var(--spacing-lg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.95rem;
}

.btn-container-activate button:hover:not(:disabled) {
    background-color: var(--color-primary);
    color: var(--text-light);
    border-color: var(--color-primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}

.btn-container-activate button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.alert-btn-activate div, .alert-option-title div{
    flex: 1;
    /*max-height: 1.5rem;*/
    /*min-height: .8rem;*/
}

.alert-option h3{
    display: inline-block;
}

.alert-option button{
    /*float:right;*/
    display: inline-block;

}

.alert-option{
    height: 2rem;
    display: table-cell;
    vertical-align: middle;
    width: 100%;
}

.label-password{
    margin-right: 5rem;
}


/*
=========================================================
                View: Send
=========================================================
*/


.sendRemoteImage {
	height: 15px;
	margin-left: 10px;
}
.sendRemoteImage:hover {
	opacity: 0.6;
	cursor: pointer;
}

.view-main-send{
    flex: 9;
    margin: 5px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}


.send-row-1{
    flex: 5;
    background-color: var(--bg-secondary);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    margin: 0;
    padding: var(--spacing-sm) var(--spacing-lg);
    transition: box-shadow 0.2s ease;
}

.send-row-1:hover {
    box-shadow: var(--shadow);
}


.send-row-2{
    flex: 2;
    background-color: var(--bg-secondary);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    margin: 0;
    padding: var(--spacing-sm) var(--spacing-lg);
    transition: box-shadow 0.2s ease;
}

.send-row-2:hover {
    box-shadow: var(--shadow);
}


.send-row-1 .send-message-row{
    padding-left: 8rem;
}

.send-row-2 .send-message-row{
    padding-left: 8rem;
}

.send-row-3{
    flex: 1;
    background-color: var(--bg-secondary);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    margin: 0;
    text-align: center;
    font-size: 1.2rem;
    min-height: 120px;
    transition: box-shadow 0.2s ease;
}

.send-row-3:hover {
    box-shadow: var(--shadow);
}


.send-message-row{
    margin: 8px 80px 8px 0px;
    display: flex;
    flex-direction: row;
}

.send-message-row i{
    font-size: 4rem;
}

.send-message-title{
    flex:1;
    display:flex;
    flex-direction: column;
}

.send-message-row i{
    color: #333333;
}

.send-message-row input, .send-message-row textarea{
    flex: 6;
}

.send-message-row input[type="checkbox"]{
    flex: 0;
    width: auto;
    margin: 0 1rem;
    cursor: pointer;
}



.send-row-3 div{
    position: relative;
    top: 30%;
    padding: 1rem 0;
}

.btn-block-send{
    text-align: right;
    padding-right: 26.5rem;
}

.btn-block-send button{
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    margin: 0 var(--spacing-xs);
}

.btn-block-send button:hover:not(:disabled) {
    background-color: var(--color-primary);
    color: var(--text-light);
    border-color: var(--color-primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}

.btn-block-send button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-block-send select {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: all 0.2s ease;
    font-size: 0.95rem;
    margin-right: var(--spacing-sm);
}

.btn-block-send select:hover {
    border-color: var(--color-primary);
}

.btn-block-send select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);
}

/* Send/Notifications headings */
.send-row-1 h3,
.send-row-2 h3 {
    color: var(--text-primary);
    font-weight: 600;
    margin-top: 0;
    margin-bottom: var(--spacing-md);
    font-size: 1.1rem;
}

/* Send/Notifications inputs, textareas, and selects */
.send-row-1 input[type="text"],
.send-row-1 textarea,
.send-row-2 input[type="text"],
.send-row-2 textarea {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: all 0.2s ease;
    font-size: 0.95rem;
}

.send-row-1 input[type="text"]:hover,
.send-row-1 textarea:hover,
.send-row-2 input[type="text"]:hover,
.send-row-2 textarea:hover {
    border-color: var(--color-primary);
}

.send-row-1 input[type="text"]:focus,
.send-row-1 textarea:focus,
.send-row-2 input[type="text"]:focus,
.send-row-2 textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);
}

.send-row-1 input[type="text"]:disabled,
.send-row-1 textarea:disabled,
.send-row-2 input[type="text"]:disabled,
.send-row-2 textarea:disabled {
    background-color: var(--bg-tertiary);
    cursor: not-allowed;
    opacity: 0.7;
}

/* Send/Notifications labels */
.send-row-1 label,
.send-row-2 label {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.95rem;
}

/* Send/Notifications checkboxes */
.send-row-2 input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--color-primary);
}


/*
=========================================================
                View: Downloads
=========================================================
*/

.downloads-content-center{
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
    width: 96%;
    height: 40%;
}

.view-block-downloads{
    display: flex;
    flex-direction: row;
    min-height: 28rem;
    padding: 5rem 0;
}

.view-main-downloads{
    flex: 9;
    margin: 5px;
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: var(--spacing-xs);
}

.downloads-row{
    flex: 1;
    background-color: var(--bg-secondary);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    transition: box-shadow 0.2s ease;
    min-height: 400px;
    display: flex;
    flex-direction: column;
}

.downloads-row:hover {
    box-shadow: var(--shadow);
}

.downloads-row h3{
    color: var(--text-primary);
    font-weight: 600;
    margin-top: 0;
    margin-bottom: var(--spacing-md);
    font-size: 1.1rem;
}

.d-row-1{
    margin: 0;
}

.d-row-2{
    margin: 0;
}

.d-row-3{
    margin: 0;
}

/*.downloads-row div{*/
/*text-align: center;*/
/*position:relative;*/
/*top:10%;*/
/*font-size: .8rem;*/
/*}*/

.downloads-element-container{
    display: flex;
    flex-direction: column;
    text-align: center;
    position: relative;
    top: 10%;
    font-size: .8rem;
}

.download-with-link{
    margin-top: 1rem;
    margin-left: 2rem;
}

.measure-events-container{
    flex: 1;
    text-align: right;
}

/* Training-specific classes to make it independent from downloads */
.management-column-1 .downloads-element-container{
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    text-align: center;
    position: static;
}

.management-column-1 .measure-events-container{
    flex: 1;
    text-align: right;
    padding: var(--spacing-md);
}

.net-handler{
    margin: 0 8.2rem;
}

.sensor-handler{
    margin: 0 2.15rem;
}

.downloads-btn-same{
    width: 6rem;
}

/* Downloads form elements styling */
.downloads-row input[type="date"],
.downloads-row select {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: all 0.2s ease;
    font-size: 0.95rem;
}

.downloads-row input[type="date"]:hover,
.downloads-row select:hover {
    border-color: var(--color-primary);
}

.downloads-row input[type="date"]:focus,
.downloads-row select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);
}

.downloads-row label {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.95rem;
}

.downloads-row button {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    margin: 0 var(--spacing-xs);
}

.downloads-row button:hover:not(:disabled) {
    background-color: var(--color-primary);
    color: var(--text-light);
    border-color: var(--color-primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}

.downloads-row button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.downloads-btn-tut{
    width: 12rem;
}

.period-btn-container{
    flex:1;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.period-btn-container input{
    width: 11rem;
    font-size: .9rem;
    font-family: monospace;
}

.period-btn-container button{
    margin-left: var(--spacing-md);
}

.download-btn-downloads{
    text-decoration: none;
    padding: 1px 6px;
    align-items: flex-start;
    text-align: center;
    cursor: default;
    color: buttontext;
    background-color: buttonface;
    box-sizing: border-box;
    border-width: 2px;
    border-style: outset;
    border-color: buttonface;
    border-image: initial;
    text-rendering: auto;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    margin: 0em;
    font: 400 13.3333px Arial;
    -webkit-writing-mode: horizontal-tb !important;
    -webkit-appearance: button;
}

.download-link{
    /*color: blue;*/
    cursor: pointer;
    /*text-decoration: underline;*/
}


/*
=========================================================
                View: Tools
=========================================================
*/

.view-main-tools{
    flex: 9;
    margin: 5px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}


.tools-row-1{
    flex: 5;
    background-color: var(--bg-secondary);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    margin: 0;
    padding: var(--spacing-sm) var(--spacing-lg);
    transition: box-shadow 0.2s ease;
}

.tools-row-1:hover {
    box-shadow: var(--shadow);
}

.tools-row-2{
    flex: 2;
    background-color: var(--bg-secondary);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    margin: 0;
    padding: var(--spacing-sm) var(--spacing-lg);
    transition: box-shadow 0.2s ease;
}

.tools-row-2:hover {
    box-shadow: var(--shadow);
}


.tools-row-1 .tools-message-row{
    padding-left: 8rem;
}

.tools-row-2 .tools-message-row{
    padding-left: 8rem;
}

.tools-row-3{
    flex: 2;
    background-color: var(--bg-secondary);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    margin: 0;
    text-align: center;
    font-size: 1.2rem;
}


.tools-message-row{
    margin: 8px 80px 8px 0px;
    display: flex;
    flex-direction: row;
}

.tools-message-row i{
    font-size: 4rem;
}

.tools-message-title{
    flex:1;
    display:flex;
    flex-direction: column;
}

.tools-message-row i{
    color: #333333;
}

.tools-message-row input, .tools-message-row textarea{
    flex: 6;
}



.tools-row-3 div{
    position: relative;
    top: 30%;
    padding: 1rem 0;
}


.btn-block-tools{
    text-align: right;
    padding-right: 26.5rem;
}

.btn-block-tools button{
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-block-tools button:hover:not(:disabled) {
    background-color: var(--color-primary);
    color: var(--text-light);
    border-color: var(--color-primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}

.btn-block-tools button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Tools headings */
.tools-row-1 h3,
.tools-row-2 h3 {
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: var(--spacing-md);
    font-size: 1.1rem;
}

/* Tools inputs and selects */
.tools-row-1 input[type="number"],
.tools-row-1 select,
.tools-row-2 input[type="number"],
.tools-row-2 select,
.tools-row-2 #risk_val,
.tools-row-2 #risk_typ,
.send-row-3 input[type="password"] {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: all 0.2s ease;
    font-size: 0.95rem;
}

.tools-row-1 input[type="number"]:hover,
.tools-row-1 select:hover,
.tools-row-2 input[type="number"]:hover,
.tools-row-2 select:hover,
.tools-row-2 #risk_val:hover,
.tools-row-2 #risk_typ:hover,
.send-row-3 input[type="password"]:hover {
    border-color: var(--color-primary);
}

.tools-row-1 input[type="number"]:focus,
.tools-row-1 select:focus,
.tools-row-2 input[type="number"]:focus,
.tools-row-2 select:focus,
.tools-row-2 #risk_val:focus,
.tools-row-2 #risk_typ:focus,
.send-row-3 input[type="password"]:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);
}

.tools-row-1 input[type="number"]:disabled {
    background-color: var(--bg-tertiary);
    cursor: not-allowed;
    opacity: 0.7;
}

/* Tools labels */
.tools-row-1 label,
.tools-row-2 label,
.label-password {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.95rem;
}

/* Tools table styling */
.tools-row-1 table {
    width: 95%;
    border-collapse: collapse;
}

.tools-row-1 table th {
    text-align: left;
    color: var(--text-primary);
    font-weight: 600;
    padding: var(--spacing-sm) 0;
    font-size: 0.95rem;
}

.tools-row-1 table td {
    padding: var(--spacing-xs) var(--spacing-sm);
}

/* Tools buttons - Update and Cancel */
.tools-row-1 button {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    margin: 0 var(--spacing-xs);
}

.tools-row-1 button:hover:not(:disabled) {
    background-color: var(--color-primary);
    color: var(--text-light);
    border-color: var(--color-primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}

.tools-row-1 button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Checkbox styling for tools */
.tools-row-1 input[type="checkbox"],
.tools-row-2 input[type="checkbox"],
.send-row-3 input[type="checkbox"],
.tools-row-3 input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--color-primary);
}






/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}



.crow{
	overflow: auto;
	padding: var(--spacing-sm);
}

.crow:after {
  content: "";
  display: table;
  clear: both;
}

/* Four columns side by side */
.ccolumn {
  float: left;
  width: 25%;
}

.ccolumnC {
  display: none; /* Hide all elements by default */
  position: relative;
}

.ccolumnCV {
  display: none; /* Hide all elements by default */
  position: relative;
}

.ccolumnCV iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  display: block;
  border: none;
}


.ccolumnF {
  float: right;
  width: 25%;
  display: flex;
  gap: var(--spacing-xs);
  flex-wrap: wrap;
  align-items: center;
}

.ccolumnF button {
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.85rem;
    min-width: 45px;
}

.ccolumnF button:hover {
    background-color: var(--color-primary);
    color: var(--text-light);
    border-color: var(--color-primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.ccolumnM {
  float: left;
  width: 75%;
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  align-items: center;
}

/* Add a transparency effect for thumnbail images */
.demo {
  opacity: 1;
}

.demo:hover {
  opacity: 0.8;
}

.cborder {
  outline: 3px solid red;
  outline-offset: -3px;
}

.coborder {
  outline: 3px solid orange;
  outline-offset: -3px;
}

.cgborder {
  outline: 3px solid #30E530;
  outline-offset: -3px;
}

.cpborder {
  outline: 3px solid #8A2BE2;
  outline-offset: -3px;
}

.cbborder {
  /* content: " "; */
  /* position: absolute; */
  /* top: 3px; */
  /* left: 3px; */
  /* right: 3px; */
  /* bottom: 3px; */
  /* border-left:3px solid; */
  /* border-left-color: cyan; */
  /* border-bottom:3px solid; */
  /* border-bottom-color: cyan; */
  
  outline: 3px solid cyan;
  outline-offset: -3px;
}

.cbcircle {
 	position: absolute;
	top: 4%;
	left: 92%;
    border-radius: 50%;
    display: inline-block;
	height: 12px;
    width: 12px;
	background-color: cyan;
	border: 2px solid #0075ff;
	/* opacity: 0.8;  */
}

/* Style the buttons */
.camera-btn-ia {
  border: 2px solid white;
  outline: none;
  padding: 6px 10px;
  background-color: black;
  font-size: 18px;
  cursor: pointer;
  margin-right: 70px;
  border-radius: 16px;
  color: white;
}

.camera-btn-ia:hover {
  background-color: #444;
    /* border-color: #777; */
}

.camera-btn-ia:disabled {
    /* background-color: light-dark(rgba(239, 239, 239, 0.3), rgba(19, 1, 1, 0.3)); */
    color: #888;
    border-color: #888;
}

.fire-btn-ia {
  /* border-color: red; */
  color: red !important;
}

.discard-btn-ia {
  /* border-color: #30E530; */
  color: #30E530 !important;
}

.publish-btn-ia {
  /* border-color: cyan; */
  color: cyan !important;
}




/* The "show" class is added to the filtered elements */
.show {
  display: block;
}
/* Style the buttons */
.btn {
  border: none;
  outline: none;
  padding: 8px 10px;
  background-color: white;
  cursor: pointer;
}

.btn:hover {
  background-color: #ddd;
}

.btn.active {
  background-color: #666;
  color: white;
}


.vrow{
  /* overflow: auto; */
  
    overflow-x: hidden;
  overflow-y: auto;
  padding-right: 10px;
  
  /* background-color: #F00; */
}

.vrow:after {
  content: "";
  display: table;
  clear: both;
}

/* columns side by side */
.vcolumn {
  float: left;
  width: 33.33%;
  position: relative;
  max-width: 544px;
}

.vleft{
  left: 5%;
  position: relative;
  /* padding-left: 10px; */
  /* padding-right: 10px; */
  width: 86.5%;
  
}

@media screen and (min-height: 860px){
	
	#camerasOUT {
		height: 200px;
	}
}

@media screen and (min-height: 950px){
	.vcolumn {
	  max-width: 544px;
	}

	
	/* .vision-row { */
		/* padding: 5px 0px 5px 0px; */
	/* } */
	
	/* .v-row-1{ */
		/* margin: 0; */
	/* } */
	
	/* .vleft{ */
	  /* left: 5%; */
	/* } */
	
	/* view-block-vision */
}

@media screen and (min-height: 1000px){
	.vcolumn {
	  max-width: 610px;
	}
	
	.vleft{
	  left: 0%;
	}
}

@media screen and (min-height: 1060px){
	.vcolumn {
	  max-width: 610px;
	}
	
	.vleft{
	  left: 0%;
	}
}

@media screen and (max-height: 800px){
	.vcolumn {
	  max-width: 542px;
	}
	
	.vleft{
	  left: 0%;
	}
	
	.view-block-vision{
		top: 54%;
		width: 97.5%;
		height: 80%;
	}
		
}

.seqImg:hover{
  opacity: 0.6;
  cursor: pointer;
}

.v-empty{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 30px;
  color: yellow;
}

.vborder {
  outline: 4px solid red;
  outline-offset: -4px;
}

.voborder {
  outline: 4px solid orange;
  outline-offset: -4px;
}

.vgborder {
  outline: 4px solid #30E530;
  outline-offset: -4px;
}

.vbborder {
  outline: 4px solid cyan;
  outline-offset: -3px;
}

.vbcircle {
 	position: absolute;
	top: 87%;
	left: 4%;
    border-radius: 50%;
    display: inline-block;
	height: 20px;
    width: 20px;
	background-color: cyan;
}

.datavalues{
	text-align: right;
	line-height: 1.3;
}


/* Create three equal columns that floats next to each other */
.fcolumn {
 float: left;
  padding: 5px;
  width: 100%;
  height: 520px; /* Should be removed. Only for demonstration */
}

.fleft {
  width: 30%;
  text-align: left;
  margin-top: 5px;
}

.fmiddle  {
  width: 45%;
  text-align: left;
  margin-top: 5px;
}

.fright {
  width: 25%;
  text-align: left;
  margin-top: 5px;
}

/* Clear floats after the columns */
.frow:after {
  content: "";
  display: table;
  clear: both;
}



.leaflet-container {
	height: 200px;
	width: 600px;
	max-width: 100%;
	max-height: 100%;
}







/*
===========================================================
                         Portability
===========================================================
*/

@media screen and (min-width: 1375px) and (max-width: 1600px){
    body{
        font-size: 0.9rem;
    }

    #date_2, #date_3, #date_1, #date_0{
        height: 18px;
        font-size: 0.9rem;
    }

    #list_sensors{
        height:20px;
        font-size: 0.9rem;
    }
    .console-sensors-table, .console-info-table, #selectState{
        font-size: 0.8rem;
    }
    .console-infoE-table {
        font-size: 0.8rem;
    }

    .info{
        font-size: 0.75rem
    }

    .measure{
        font-size: 0.67rem
    }
    .c-small{
        padding-right: 10px
    }

}

@media screen and (width: 1600px){
    body{
        font-size: 0.9rem;
    }

    #date_2, #date_3, #date_1, #date_0{
        height: 18px;
        font-size: 0.9rem;
    }

    #list_sensors{
        height:20px;
        font-size: 0.9rem;
    }
    .console-sensors-table, .console-info-table, #selectState{
        font-size: 0.7rem;
    }
    .console-infoE-table {
        font-size: 0.7rem;
    }

    .info{
        font-size: 0.8rem
    }

    .measure{
        font-size: 0.67rem
    }
    .c-small{
        padding-right: 10px
    }

    .sidenav{
        height: 93.5%;
    }

    #sandwich{
        width: 1.4rem;
        height: 44rem;
        line-height: 44rem;
    }

    #loader-chart_1, #loader-chart_2{
        margin: 6.5rem 26rem;
        position: absolute;
        font-size: 1rem;
    }

    /* forecast */

    #f-loader-chart_1, #f-loader-chart_2 #f-loader-chart_3 #f-loader-chart_4{
        margin: 6.5rem 26rem;
        position: absolute;
        font-size: 1rem;
    }

    /* Users */

    #main-container-handler{
        height: 98%;
    }

    .users-statement {
        font-size: 0.53rem;
    }


    .user-form-btn{
        bottom: 6.8rem;
        right: 3.5rem;
    }

    .btn-block input, .btn-block button{
        padding: 3px 6px!important;
    }

    .input-line{
        padding: .3rem;
    }

    /* Users */

    /* Notification */

    .notification-row textarea{
        height: 7rem;
    }

    /* Notification */

    /* Alerts */

    .alert-row-1{
        flex: 2;
    }

	.management-row-2{
        flex: 2;
	}

    .alert-column-1{
        padding: 0 20px;
    }

    .management-column-1{
        padding: 0 20px;
    }

    .alert-option-title div{
        height: .7rem;
    }

    .alert-row-2{
        padding: 0 40px 10px 40px;
    }

    .alert-message-row{
        margin: 10px 0;
    }

    .alert-message-row i{
        font-size: 3rem;
    }

    .send-row-1{
        padding: 0 40px 10px 40px;
    }

    .send-row-2{
        padding: 0 40px 10px 40px;
    }

    .send-message-row{
        margin: 10px 0;
    }

    .send-message-row i{
        font-size: 3rem;
    }

    .tools-row-1{
        padding: 0 40px 10px 40px;
    }

    .tools-row-2{
        padding: 0 40px 10px 40px;
    }

    .tools-message-row{
        margin: 10px 0;
    }

    .tools-message-row i{
        font-size: 3rem;
    }

    .checkbox-container{
        margin-top: 0;
    }

    .btn-block-alert{
        padding-right: 16.3rem;
    }

    .btn-block-send{
        padding-right: 16.3rem;
    }

    .btn-block-tools{
        padding-right: 16.3rem;
    }

    .alert-row-3{
        font-size: 1rem;
    }

    .management-row-3{
        font-size: 1rem;
    }

    .send-row-3{
        font-size: 1rem;
    }

    .tools-row-3{
        font-size: 1rem;
    }

    /* Alerts */

    /* Downloads */

    .net-handler{
        margin: 0 2.2rem;
    }

    .sensor-handler{
        margin: 0 2.3rem;
    }

    .downloads-btn-same{
        margin-top: 1rem;
    }

    /* Downloads */
}

@media screen and (width: 1440px){
    body{
        font-size: 0.8rem;
    }

    #date_2, #date_3, #date_1, #date_0{
        height: 18px;
        font-size: 0.9rem;
    }

    #list_sensors{
        height:20px;
        font-size: 0.9rem;
    }
    .console-sensors-table, .console-info-table, #selectState{
        font-size: 0.7rem;
    }
    .console-infoE-table {
        font-size: 0.7rem;
    }

    .info{
        font-size: 0.8rem
    }

    .measure{
        font-size: 0.67rem
    }
    .c-small{
        padding-right: 10px
    }

    .sidenav{
        height: 93.5%;
    }

    #sandwich{
        width: 1.3rem;
        height: 42rem;
        line-height: 42rem;
    }

    #loader-chart_1, #loader-chart_2{
        margin: 6.5rem 24rem;
        position: absolute;
        font-size: 1rem;
    }
	
	
    /* forecast */	

    #f-loader-chart_1, #f-loader-chart_2, #f-loader-chart_3, #f-loader-chart_4{
        margin: 6.5rem 24rem;
        position: absolute;
        font-size: 1rem;
    }

    /* Users */

    #main-container-handler{
        height: 98%;
    }

    .users-statement {
        font-size: 0.53rem;
    }


    .user-form-btn{
        bottom: 6.7rem;
        right: 3.5rem;
    }

    .btn-block input, .btn-block button{
        padding: 3px 6px!important;
    }

    /* Users */

    /* Notifications */

    .notification-row textarea{
        height: 7.5rem;
    }

    /* Notifications */

    /* Alert */

    .alert-row-1{
        flex: 2;
    }

	.management-row-2{
        flex: 2;
	}

    .alert-column-1{
        padding: 0 20px;
    }

    .management-column-1{
        padding: 0 20px;
    }

    .alert-option-title div{
        height: .7rem;
    }

    .alert-row-2{
        padding: 0 40px 10px 40px;
    }

    .alert-message-row{
        margin: 10px 0;
    }

    .alert-message-row i{
        font-size: 3rem;
    }

    .send-row-1{
        padding: 0 40px 10px 40px;
    }

    .send-row-2{
        padding: 0 40px 10px 40px;
    }

    .send-message-row{
        margin: 10px 0;
    }

    .send-message-row i{
        font-size: 3rem;
    }

    .tools-row-1{
        padding: 0 40px 10px 40px;
    }

    .tools-row-2{
        padding: 0 40px 10px 40px;
    }

    .tools-message-row{
        margin: 10px 0;
    }

    .tools-message-row i{
        font-size: 3rem;
    }

    .checkbox-container{
        margin-top: 0;
    }

    .btn-block-alert{
        padding-right: 14rem;
    }

    .btn-block-send{
        padding-right: 14rem;
    }

    .btn-block-tools{
        padding-right: 14rem;
    }

    .alert-row-2 .alert-message-row{
        padding-left: 6rem;
    }

    .alert-message-row textarea{
        height: 5.2rem;
    }

    .send-row-1 .send-row-1 .send-message-row{
        padding-left: 6rem;
    }

    .send-message-row textarea{
        height: 5.2rem;
    }

    .tools-row-1 .tools-row-1 .tools-message-row{
        padding-left: 6rem;
    }

    .tools-message-row textarea{
        height: 5.2rem;
    }

    .label-password{
        margin-right: 2rem;
    }

    .alert-row-3{
        font-size: 1rem;
    }

    .management-row-3{
        font-size: 1rem;
    }

    .send-row-3{
        font-size: 1rem;
    }

    .tools-row-3{
        font-size: 1rem;
    }

    /* Alert */

    /* Maintenance */

    .alert-row-2 h2{
        margin: 0 0 5px 0;
    }

    .send-row-1 h2{
        margin: 0 0 5px 0;
    }

    .send-row-2 h2{
        margin: 0 0 5px 0;
    }

    .tools-row-1 h2{
        margin: 0 0 5px 0;
    }

    .tools-row-2 h2{
        margin: 0 0 5px 0;
    }

    .activation-container button{
        flex: 1;
        margin-top: .7rem;
        margin-left: .3rem;
        padding: .2rem;
        height: 1.8rem;
    }

    .status-container{
        flex: 3;
    }

    .status-container h3{
        font-size: .8rem;
    }

    .status-container strong{
        font-size: .6rem;
    }

    .maintenance-row{
        flex:2;
    }

    .management-row-1{
        flex: 2;
    }

    .alert-row-2{
        flex: 6;
    }

    .send-row-1{
        flex: 6;
    }

    .send-row-2{
        flex: 6;
    }

    .tools-row-1{
        flex: 6;
    }

    .tools-row-2{
        flex: 6;
    }

    /* Maintenance */

    /* Downloads */

    .net-handler{
        margin: 0 2rem;
    }

    .sensor-handler{
        margin: 0 2rem;
    }

    .downloads-btn-same{
        margin-top: 1rem;
    }

    /* Downloads */

    .alert-message-row i{
        font-size: 3rem;
    }

    .send-message-row i{
        font-size: 3rem;
    }

    .tools-message-row i{
        font-size: 3rem;
    }

    .period-btn-container input[type=date]{
        width: 6rem;
        font-size: .65rem;
    }

    .info{
        font-size: 0.8rem
    }

    .measure{
        font-size: 0.6rem
    }

    .c-small{
        padding-right: 20px
    }

    #date_2, #date_3, #date_1, #date_0{
        height: 15px;
        font-size: 0.85rem;
    }

    #list_sensors{
        height:18px;
        font-size: 0.8rem;
    }

    .console-sensors-table, .console-info-table, #selectState{
        font-size: 0.7rem;
    }
    .console-infoE-table {
        font-size: 0.7rem;
    }

    /* 05.03.2019 */
    .c-log{
        padding: 0 5px 10px 30px;
    }

    .c-log-sensor{
        padding: 5px 5px 10px 5px;
    }

    .s-model{
        font-size: 0.65rem;
    }

    .loader-main{
        top: 51%;
        height: 86%;
    }

    #date_3, #date_2, #date_1, #date_0{
        width: 7.1rem;
        font-size: .75rem;
        height: .8rem;
    }
}

@media screen and (width: 1366px){
    body{
        font-size: 0.8rem;
    }

    #sandwich{
        width: 1.2rem!important;
        height: 33rem;
        line-height: 33rem;
    }

    /* Main */

    #main-body{
        height:95%;
    }

    .sidenav{
        height: 92.5%;
    }

    #loader-chart_1, #loader-chart_2{
        margin: 5.5rem 22rem;
    }

    .loader{
        font-size: 16px;
    }

    .graph{
        /*max-height: 160px!important;*/
        /*min-height: 140px!important;*/
        max-height: 140px !important;
        min-height: 120px !important;
    }

    /* Forecast */

    #f-loader-chart_1, #f-loader-chart_2, #f-loader-chart_3, #f-loader-chart_4{
        margin: 5.5rem 22rem;
    }

    .f-loader{
        font-size: 16px;
    }

    .fgraph{
        /*max-height: 160px!important;*/
        /*min-height: 140px!important;*/
        max-height: 140px !important;
        min-height: 120px !important;
    }

    /* Users */

    .users-main{
		max-height: 80%;
        /* height: 22rem; */
    }


    #main-container-handler{
        height: 98%;
    }

    .users-statement {
        font-size: 0.53rem;
    }


    .user-form-btn{
        bottom: 6rem!important;
        right: 4rem!important;
    }

    .btn-block input, .btn-block button{
        padding: 3px 6px!important;
    }

    /* Users */

    /* Notifications */

    .view-block-notification{
        height: 100%;
        padding: 2rem 12rem 2rem 12rem;
    }

    .view-block{
        height: 90%;
        padding: 5rem 12rem 0 12rem;
    }

    .notification-row textarea{
        height: 3.5rem!important;
    }

    .tab-container{
        padding: 0 20px;
    }

    @-moz-document  url-prefix(){
        .notification-form-column {
            margin: 5px 0;
        }

        .view-sublock h3{
            margin: 0;
            padding-right: 0;
        }

        .notification-row-small input, .notification-row textarea{
            flex: 5;
        }

        .view-block {
            height: 72%;
            padding: 5rem 10rem 0rem 10rem;
        }

        #sandwich {
            width: 1.2rem;
            height: 30rem!important;
            line-height: 30rem!important;
        }
    }

    /* Notifications */

    /* Alert */

    .alert-option-title h3{
        margin-block-start: 1em!important;
        margin-block-end: 1em!important;
        margin-inline-start: 0px!important;
        margin-inline-end: 0px!important;
    }

    .alert-row-1{
        flex: 2;
    }

	.management-row-2{
        flex: 2;
	}

    .alert-column-1{
        padding: 0 20px;
    }

    .management-column-1{
        padding: 0 20px;
    }

    .alert-option-title div{
        height: .7rem;
    }

    .alert-row-2{
        padding: 0 40px 10px 40px;
    }

    .alert-message-row{
        margin: 10px 0;
    }

    .alert-message-row i{
        font-size: 3rem;
    }

    .send-row-1{
        padding: 0 40px 10px 40px;
    }

    .send-row-2{
        padding: 0 40px 10px 40px;
    }

    .send-message-row{
        margin: 10px 0;
    }

    .send-message-row i{
        font-size: 3rem;
    }

    .tools-row-1{
        padding: 0 40px 10px 40px;
    }

    .tools-row-2{
        padding: 0 40px 10px 40px;
    }

    .tools-message-row{
        margin: 10px 0;
    }

    .tools-message-row i{
        font-size: 3rem;
    }

    .checkbox-container{
        margin-top: 0!important;
    }

    .btn-block-alert{
        padding-right: 12.5rem!important;
    }

    .btn-block-send{
        padding-right: 12.5rem!important;
    }

    .btn-block-tools{
        padding-right: 12.5rem!important;
    }

    .alert-row-2 .alert-message-row{
        padding-left: 4rem;
        margin: .5rem 0;
    }

    .alert-message-row textarea{
        height: 5.2rem;
    }

    .send-row-1 .send-message-row{
        padding-left: 4rem;
        margin: .5rem 0;
    }

    .send-row-2 .send-message-row{
        padding-left: 4rem;
        margin: .5rem 0;
    }

    .send-message-row textarea{
        height: 5.2rem;
    }

    .tools-row-1 .tools-message-row{
        padding-left: 4rem;
        margin: .5rem 0;
    }

    .tools-row-2 .tools-message-row{
        padding-left: 4rem;
        margin: .5rem 0;
    }

    .tools-message-row textarea{
        height: 5.2rem;
    }

    .label-password{
        margin-right: 2rem;
    }

    .alert-row-2 h3{
        margin-block-start: 1em!important;
        margin-block-end: 1em!important;
        margin-inline-start: 0px!important;
        margin-inline-end: 0px!important;
    }

    .alert-message-row input{
        height: 1rem;
    }

    .send-row-1 h3{
        margin-block-start: 1em!important;
        margin-block-end: 1em!important;
        margin-inline-start: 0px!important;
        margin-inline-end: 0px!important;
    }

    .send-row-2 h3{
        margin-block-start: 1em!important;
        margin-block-end: 1em!important;
        margin-inline-start: 0px!important;
        margin-inline-end: 0px!important;
    }

    .send-message-row input{
        height: 1rem;
    }

    .tools-row-1 h3{
        margin-block-start: 1em!important;
        margin-block-end: 1em!important;
        margin-inline-start: 0px!important;
        margin-inline-end: 0px!important;
    }

    .tools-row-2 h3{
        margin-block-start: 1em!important;
        margin-block-end: 1em!important;
        margin-inline-start: 0px!important;
        margin-inline-end: 0px!important;
    }

    .tools-message-row input{
        height: 1rem;
    }

    .alert-row-3{
        flex: 1;
    }

    .management-row-3{
        flex: 1;
    }

    .send-row-3{
        flex: 1;
    }

    .alert-checkbox-block h3{
        margin: 0!important;
    }

    .alert-row-3{
        font-size: 1rem;
    }

    .management-row-3{
        font-size: 1rem;
    }

    .send-row-3{
        font-size: 1rem;
    }

    .tools-row-3{
        font-size: 1rem;
    }

    .alert-row-3 div{
        top: unset!important;
        padding: 1rem 0;
    }
	
	.management-row-3 div{
        top: unset!important;
        padding: 1rem 0
    }

    .send-row-3 div{
        top: unset!important;
        padding: 1rem 0;
    }

    .tools-row-3 div{
        top: unset!important;
        padding: 1rem 0;
    }

    /* Alert */

    /* Maintenance */

    .alert-row-2 h2{
        margin: 0 0 5px 0;
    }

    .send-row-1 h2{
        margin: 0 0 5px 0;
    }

    .send-row-2 h2{
        margin: 0 0 5px 0;
    }

    .tools-row-1 h2{
        margin: 0 0 5px 0;
    }

    .tools-row-2 h2{
        margin: 0 0 5px 0;
    }

    .activation-container button{
        flex: 1;
        margin-top: .7rem;
        margin-left: .3rem;
        padding: .2rem;
        height: 1.8rem;
    }

    .activation-container{
        display: flex;
        flex-direction: row;
        padding: .5rem;
    }

    .status-container{
        flex: 3;
        max-height: 1.7rem;
        width: 6rem;
    }

    .status-container h3{
        font-size: .8rem;
    }

    .status-container strong{
        font-size: .6rem;
    }

    .maintenance-row{
        flex:2;
    }

    .management-row-1{
        flex: 2;
    }

    .alert-row-2{
        flex: 6;
    }

    .send-row-1{
        flex: 6;
    }

    .send-row-2{
        flex: 6;
    }

    .tools-row-1{
        flex: 6;
    }

    .tools-row-2{
        flex: 6;
    }

    /* Maintenance */

    .alert-message-row i{
        font-size: 3rem;
    }

    .send-message-row i{
        font-size: 3rem;
    }

    .tools-message-row i{
        font-size: 3rem;
    }

    .period-btn-container input[type=date]{
        width: 6rem;
        font-size: .65rem;
    }

    .net-handler{
        margin: 0 1.1rem;
    }

    .downloads-btn-same{
        margin-top: .5rem;
    }

    .sensor-handler {
        margin: 0 1.3rem;
    }


    .info{
        font-size: 0.8rem
    }

    .measure{
        font-size: 0.6rem
    }

    .c-small{
        padding-right: 20px
    }

    #list_sensors{
        height:18px;
        font-size: 0.8rem;
    }

    .console-sensors-table, .console-info-table, #selectState{
        font-size: 0.7rem;
    }
    .console-infoE-table {
        font-size: 0.7rem;
    }

    /* 05.03.2019 */
    .c-log{
        padding: 0 5px 10px 30px;
    }

    .c-log-sensor{
        padding: 5px 5px 10px 5px;
    }

    .s-model{
        font-size: 0.65rem;
    }

    .loader-main{
        top: 51%;
        height: 86%;
    }

    #date_3, #date_2, #date_1, #date_0{
        width: 7.1rem;
        font-size: .75rem;
        height: .8rem;
    }
}

@media screen and (width: 1280px){

    .sidenav{
        height: 92.5%;
    }

    #loader-chart_1, #loader-chart_2{
        margin: 5.5rem 20rem!important;
    }

    .loader{
        font-size: 16px;
    }

    body{
        font-size: 0.8rem;
    }

    #sandwich{
        width: 1.2rem!important;
        height: 30rem!important;
        line-height: 30rem!important;
    }

    .graph{
        max-height: 140px!important;
        min-height: 100px!important;
    }

    @-moz-document  url-prefix(){
        .graph{
            max-height: 100px!important;
            min-height: 80px!important;
        }
    }

    .users-statement {
        font-size: 0.53rem!important;
    }

    .user-form-btn{
        bottom: 6rem!important;
        right: 4rem!important;
    }

    /* Main */

    #main-body{
        height:95%;
    }

    /* Forecast */

    #f-loader-chart_1, #f-loader-chart_2, #f-loader-chart_3, #f-loader-chart_4{
        margin: 5.5rem 20rem!important;
    }

    .f-loader{
        font-size: 16px;
    }

    /* Users */

    #main-container-handler{
        height: 98%;
    }

    /* Users */

    .users-main{
		max-height: 80%;
        /* height: 15rem; */
    }


    #main-container-handler{
        height: 98%;
    }

    .users-statement {
        font-size: 0.53rem;
    }

    .user-form-btn{
        bottom: 4rem!important;
        right: 10.5rem!important;
    }

    .btn-block input, .btn-block button{
        padding: 3px 6px!important;
    }

    /* Users */

    /* Notifications */

    .view-block-notification{
        height: unset!important;
        padding: 5rem 8rem 5rem 8rem!important;
    }

    .view-block{
        height: unset!important;
        padding: 5rem 8rem 5rem 8rem!important;
    }

    .notification-row textarea{
        height: 5rem;
    }

    .tab-container{
        padding: 0 20px;
    }

    .btn-block{
        padding-top: 1rem;
    }

    @-moz-document  url-prefix(){

        .view-block-notification{
            height: unset!important;
        }

        .view-block{
            height: unset!important;
        }

        .notification-form-column {
            margin: 5px 0;
        }

        .view-sublock h3{
            margin: 0;
            padding-right: 0;
        }

        .notification-row-small input, .notification-row textarea{
            flex: 5;
        }

        .view-block {
            height: 72%;
        }

        #sandwich {
            width: 1.2rem;
            height: 30rem!important;
            line-height: 30rem!important;
        }

        .risk-index-block{
            padding: 1rem;
        }
    }

    /* Notifications */

    /* Alert */

    .main-after{
        height: 88%;
    }

    .alert-row-1{
        flex: 2;
    }

	.management-row-2{
        flex: 2;
	}

    /*.alert-column-1{*/
        /*padding: 0 20px;*/
    /*}*/

    /* .management-column-1{ */
        /* padding: 0 20px; */
    /* } */

    .alert-row-2{
        padding: 10px 20px;
    }

    .send-row-1{
        padding: 10px 20px;
    }

    .send-row-2{
        padding: 10px 20px;
    }

    .tools-row-1{
        padding: 10px 20px;
    }

    .tools-row-2{
        padding: 10px 20px;
    }


    #sms_body, #email{
        height: 3rem;
    }

    .alert-message-row{
        /*margin: .3rem 0!important;*/
    }
	
    .send-message-row{
        /*margin: .3rem 0!important;*/
    }
	
    .tools-message-row{
        /*margin: .3rem 0!important;*/
    }

    .alert-row-2 h3{
        margin: 0 0 4px 0;
    }

    .send-row-1 h3{
        margin: 0 0 4px 0;
    }

    .send-row-2 h3{
        margin: 0 0 4px 0;
    }

    .tools-row-1 h3{
        margin: 0 0 4px 0;
    }

    .tools-row-2 h3{
        margin: 0 0 4px 0;
    }

    .alert-option-title div{
        display: none;
    }

    .alert-option-title{
        display:block;
    }

    .alert-option-title h3{
        padding-top: 1rem;
    }

    .alert-row-3{
        font-size: .8rem;
        padding: .5rem 0 1rem 0;
    }

    .management-row-3{
        font-size: .8rem;
        padding: .5rem 0 1rem 0;
    }

    .send-row-3{
        font-size: .8rem;
        padding: .5rem 0 1rem 0;
    }

    .tools-row-3{
        font-size: .8rem;
        padding: .5rem 0 1rem 0;
    }


    .label-password{
        margin-right: 1rem;
    }

    .checkbox-container {
        margin-top: 1rem;
    }

    .alert-checkbox-block{
        margin-left: 1rem;
    }

    .btn-block-alert {
        padding-right: 12.8rem!important;
    }

    .btn-block-send {
        padding-right: 12.8rem!important;
    }

    .btn-block-tools{
        padding-right: 12.8rem!important;
    }

    .alert-row-3 div{
        top: 26%;
    }
	
	.management-row-3 div{
        top: 26%;
    }

    .send-row-3 div{
        top: 26%;
    }

    .tools-row-3 div{
        top: 26%;
    }

    .activation-title h3{
        margin: 0;
        font-size: .7rem;
    }

    @-moz-document  url-prefix(){
        .alert-option-title h3{
            padding-top: .5rem;
        }
    }

    /* Alert */

    /* Maintenance */



    .alert-row-2 h2{
        margin: 0 0 5px 0;
    }
	
    .send-row-1 h2{
        margin: 0 0 5px 0;
    }
	
    .send-row-2 h2{
        margin: 0 0 5px 0;
    }
	
    .tools-row-1 h2{
        margin: 0 0 5px 0;
    }
	
    .tools-row-2 h2{
        margin: 0 0 5px 0;
    }

    .activation-container button{
        flex: 1;
        margin-top: .7rem;
        margin-left: .3rem;
        padding: .2rem;
        height: 1.8rem;
    }

    .activation-container{
        display: flex;
        flex-direction: row;
        padding: .5rem;
    }

    .status-container{
        flex: 3;
        max-height: 1.7rem;
        width: 6rem;
        flex-direction: row;
        padding: 12px 0;
        height: unset;
        line-height: unset;
    }

    .status-container h3{
        font-size: .8rem;
        display: inline-block;
        margin: 0;
    }

    .status-container strong{
        font-size: .6rem;
        display: inline-block;
    }

    .status-container-handler{
        display: flex;
        flex-direction: row;
    }

    .status-container-handler h3, .status-container-handler strong{
        flex:1;
        padding-bottom: .5rem;
    }

    .status-container-handler:nth-child(1), .status-container-handler:nth-child(3){
        display: none;
    }

    .maintenance-row{
        flex:3;
    }

    .management-row-1{
        flex: 3;
    }

    .alert-row-2{
        flex: 6;
    }
	
    .send-row-1{
        flex: 6;
    }
	
    .send-row-2{
        flex: 6;
    }
	
    .tools-row-1{
        flex: 6;
    }
	
    .tools-row-2{
        flex: 6;
    }

    /* Maintenance */

    /* Downloads */

    .net-handler {
        margin: 0 .3rem!important;
    }

    .downloads-btn-same{
        margin-top: .5rem;
    }

    .sensor-handler {
        margin: 0 .6rem!important;
    }

    /* Downloads */

    .alert-message-row i{
        font-size: 3rem;
    }
	
    .send-message-row i{
        font-size: 3rem;
    }
	
    .tools-message-row i{
        font-size: 3rem;
    }

    .period-btn-container input[type=date]{
        width: 6rem;
        font-size: .65rem;
    }

    .info{
        font-size: 0.8rem
    }

    .measure{
        font-size: 0.6rem
    }

    .c-small{
        padding-right: 20px
    }

    #date_2, #date_3, #date_1, #date_0{
        height: 15px;
        font-size: 0.85rem;
    }

    #list_sensors{
        height:18px;
        font-size: 0.8rem;
    }

    .console-sensors-table, .console-info-table, #selectState{
        font-size: 0.7rem;
    }
    .console-infoE-table {
        font-size: 0.7rem;
    }

    /* 05.03.2019 */
    .c-log{
        padding: 0 5px 10px 30px;
    }

    .c-log-sensor{
        padding: 5px 5px 10px 5px;
    }

    .s-model{
        font-size: 0.65rem;
    }

    .loader-main{
        top: 51%;
        height: 86%;
    }

    #date_3, #date_2, #date_1, #date_0{
        width: 7.1rem;
        font-size: .75rem;
        height: .8rem;
    }
}

@media screen and (min-width: 1200px) and (max-width: 1375px){
    #loader-chart_1, #loader-chart_2{
        margin: 5.5rem 22rem;
    }

    .loader{
        font-size: 16px;
    }

    body{
        font-size: 0.8rem;
    }

    #sandwich{
        width: 1.4rem;
        height: 33rem;
        line-height: 33rem;
    }

    .users-statement {
        font-size: 0.53rem!important;
    }

    .user-form-btn{
        bottom: 6rem;
        right: 4rem;
    }

    .btn-block input, .btn-block button{
        padding: 3px 6px!important;
    }

    .alert-option-title div{
        display: none;
    }

    .alert-option-title{
        display:block;
    }

    .alert-option-title h3{
        padding-bottom: 0;
        margin: 0;
    }

    .checkbox-container {
        margin-top: 1rem;
    }

    .alert-checkbox-block{
        margin-left: 1rem;
    }

    .btn-block-alert {
        padding-right: 14.9rem;
    }

    .btn-block-send {
        padding-right: 14.9rem;
    }

    .btn-block-tools{
        padding-right: 14.9rem;
    }

    .alert-row-3 div{
        top: 26%;
    }
	
	.management-row-3 div{
        top: 26%;
    }

    .send-row-3 div{
        top: 26%;
    }

    .tools-row-3 div{
        top: 26%;
    }

    .activation-title h3{
        margin: 0;
        font-size: .7rem;
    }

    /* Main */

    #main-body{
        height:95%;
    }


    /* Forecast */
	
    #f-loader-chart_1, #f-loader-chart_2, #f-loader-chart_3, #f-loader-chart_4{
        margin: 5.5rem 22rem;
    }

    .f-loader{
        font-size: 16px;
    }

    /* Users */

    #main-container-handler{
        height: 98%;
    }

    /* Users */

    /* Notifications */

    .view-block-notification{
        height: 90%;
    }

    .view-block{
        height: 74%;
    }

    .view-sublock{
        height: 90%;
    }

    .view-sublock h2{
        margin: 0 0;
    }

    .notification-row-label i{
        font-size: 3rem;
        margin-top: 0;
    }

    .notification-row-small, .notification-row{
        padding: 5px 0;
    }

    /* Notifications */

    /* Alert */

    .main-after{
        height: 88%;
    }

    .alert-row-2{
        height: 15rem;
    }

    .send-row-1{
        height: 15rem;
    }

    .send-row-2{
        height: 15rem;
    }

    #sms_body, #email{
        height: 3rem;
    }

    .tools-row-1{
        height: 15rem;
    }

    .tools-row-2{
        height: 15rem;
    }

    .alert-message-row{
        margin: 0;
    }

    .send-message-row{
        margin: 0;
    }

    .tools-message-row{
        margin: 0;
    }

    .alert-row-2 h3{
        margin: 0 0 4px 0;
    }

    .send-row-1 h3{
        margin: 0 0 4px 0;
    }

    .send-row-2 h3{
        margin: 0 0 4px 0;
    }

    .tools-row-1 h3{
        margin: 0 0 4px 0;
    }

    .tools-row-2 h3{
        margin: 0 0 4px 0;
    }

    /* Alert */

    /* Maintenance */

    .alert-row-2 h2{
        margin: 0 0 5px 0;
    }

    .send-row-1 h2{
        margin: 0 0 5px 0;
    }

    .send-row-2 h2{
        margin: 0 0 5px 0;
    }

    .tools-row-2 h2{
        margin: 0 0 5px 0;
    }

    .tools-row-1 h2{
        margin: 0 0 5px 0;
    }

    .tools-row-2 h2{
        margin: 0 0 5px 0;
    }

    .activation-container button{
        flex: 1;
        margin-top: .7rem;
        margin-left: .3rem;
        padding: .2rem;
        height: 1.8rem;
    }

    .activation-container{
        display: flex;
        flex-direction: row;
        padding: .5rem;
    }

    .status-container{
        flex: 3;
        max-height: 1.7rem;
        width: 6rem;
    }

    .status-container h3{
        /*margin:0;*/
        font-size: .8rem;
    }

    .status-container strong{
        font-size: .6rem;
    }

    .maintenance-row{
        flex:2;
    }

    .management-row-1{
        flex: 2;
    }

    .alert-row-2{
        flex: 6;
    }

    .send-row-1{
        flex: 6;
    }

    .send-row-2{
        flex: 6;
    }

    .tools-row-1{
        flex: 6;
    }

    .tools-row-2{
        flex: 6;
    }

    /* Maintenance */



    .alert-message-row i{
        font-size: 3rem;
    }

    .send-message-row i{
        font-size: 3rem;
    }

    .tools-message-row i{
        font-size: 3rem;
    }


    .period-btn-container input[type=date]{
        width: 6rem;
        font-size: .65rem;
    }

    .net-handler{
        margin: 0 1.1rem;
    }

    .downloads-btn-same{
        margin-top: .5rem;
    }

    .sensor-handler {
        margin: 0 1.3rem;
    }


    .info{
        font-size: 0.8rem
    }

    .measure{
        font-size: 0.6rem
    }

    .c-small{
        padding-right: 20px
    }

    #date_2, #date_3, #date_1, #date_0{
        height: 15px;
        font-size: 0.85rem;
    }

    #list_sensors{
        height:18px;
        font-size: 0.8rem;
    }

    .console-sensors-table, .console-info-table, #selectState{
        font-size: 0.7rem;
    }
    .console-infoE-table {
        font-size: 0.6rem;
    }

    /* 05.03.2019 */
    .c-log{
        padding: 0 5px 10px 30px;
    }

    .c-log-sensor{
        padding: 5px 5px 10px 5px;
    }

    .s-model{
        font-size: 0.65rem;
    }

    .loader-main{
        top: 51%;
        height: 86%;
    }

    #date_3, #date_2, #date_1, #date_0{
        width: 7.1rem;
        font-size: .75rem;
        height: .8rem;
    }

}

@media screen and (min-width: 1100px) and (max-width: 1200px){
    body{
        font-size: 0.7rem;
    }

    .info{
        font-size: 0.63rem
    }

    .measure{
        font-size: 0.55rem
    }

    .c-small{
        padding-right: 30px
    }

    #date_2, #date_3, #date_1, #date_0{
        height: 12px;
        font-size: 0.75rem;
    }

    #list_sensors{
        height:15px;
        font-size: 0.65rem;
    }
    .console-sensors-table, .console-info-table, #selectState{
        font-size: 0.6rem;
    }
    .console-infoE-table {
        font-size: 0.6rem;
    }
}

@media screen and (min-width: 1000px) and (max-width: 1100px){
    body{
        font-size: 0.7rem;
    }

    .info{
        font-size: 0.63rem
    }

    .measure{
        font-size: 0.55rem
    }

    .c-small{
        padding-right: 40px
    }

    #date_2, #date_3, #date_1, #date_0{
        height: 12px;
        font-size: 0.75rem;
    }

    #list_sensors{
        height:14px;
        font-size: 0.6rem;
    }
    .console-sensors-table, .console-info-table, #selectState{
        font-size: 0.6rem;
    }
    .console-infoE-table {
        font-size: 0.6rem;
    }
    .loader_c{
        border: 8px solid #f3f3f3;
        border-top: 8px solid blue;
        border-right: 8px solid green;
        border-bottom: 8px solid red;
        width: 60px;
        height: 60px;
    }
}

@media screen and (width: 1024px){

    .sidenav{
        height: 92.5%;
    }

    body{
        font-size: 0.7rem;
    }

    .info{
        font-size: 0.63rem
    }

    .measure{
        font-size: 0.55rem
    }

    .c-small{
        padding-right: 10px
    }

    #date_2, #date_3, #date_1, #date_0{
        height: 12px;
        font-size: 0.75rem;
    }

    #list_sensors{
        height:14px;
        font-size: 0.6rem;
    }
    .console-sensors-table, .console-info-table, #selectState{
        font-size: 0.6rem;
    }
    .console-infoE-table {
        font-size: 0.6rem;
    }

    .graph{
        max-height: 120px!important;
        min-height: 80px!important;
    }

    #sandwich{
        height: 40rem;
        line-height: 40rem;
        width: 1.2rem;
    }

    #loader-chart_1, #loader-chart_2 {
        z-index: 1000;
        margin: 6rem 16rem;
        position: absolute;
        font-size: .8rem;
    }
	
	/* Forecast */

    #f-loader-chart_1, #f-loader-chart_2, #f-loader-chart_3, #f-loader-chart_4 {
        z-index: 1000;
        margin: 6rem 16rem;
        position: absolute;
        font-size: .8rem;
    }

    /* Users */

    .view-container{
        padding: 10px;
    }

    .user-table-flex{
        padding: 5rem 4rem 0 4rem;
    }

    .users-head{
        height: 2rem;
    }


    .user-form-btn{
        bottom: 3.5rem;
        right: 4.8rem;
    }


    /* Users */

   /* Notifications */

    .bookmark{
        display: none;
    }

    .notification-row-label i{
        font-size: 2rem;
        margin-top: 1rem;
    }

    .view-block-notification{
        height: unset!important;
        padding: 5rem 8rem 5rem 8rem!important;
    }

    .view-block{
        height: unset!important;
        padding: 5rem 8rem 5rem 8rem!important;
    }

    .notification-row textarea{
        height: 5rem;
    }

    .tab-container{
        padding: 0 20px;
    }

    .btn-block{
        padding-top: 1rem;
    }

    @-moz-document  url-prefix(){

        .view-block-notification{
            height: unset!important;
        }

        .view-block{
            height: unset!important;
        }

        .notification-form-column {
            margin: 5px 0;
        }

        .view-sublock h3{
            margin: 0;
            padding-right: 0;
        }

        .notification-row-small input, .notification-row textarea{
            flex: 5;
        }

        .view-block {
            height: 72%;
        }

        #sandwich {
            width: 1.2rem;
            height: 30rem!important;
            line-height: 30rem!important;
        }

        .risk-index-block{
            padding: 1rem;
        }
    }

   /* Notifications */

    /* Alert */

    .btn-block-alert{
        padding: 0;
    }

    .btn-block-send{
        padding: 0;
    }

    .btn-block-tools{
        padding: 0rem;
    }

    .alert-row-1{
        flex: 2;
    }

	.management-row-2{
        flex: 2;
	}

    .alert-row-2{
        padding: 10px 20px;
    }

    .alert-row-2 .alert-message-row{
        padding-left: 3rem;
    }

    .send-row-1{
        padding: 10px 20px;
    }

    .send-row-2{
        padding: 10px 20px;
    }
	
    .send-row-1 .send-message-row{
        padding-left: 3rem;
    }
	
    .send-row-2 .send-message-row{
        padding-left: 3rem;
    }

    .tools-row-1{
        padding: 10px 20px;
    }

    .tools-row-2{
        padding: 10px 20px;
    }
	
    .tools-row-1 .tools-message-row{
        padding-left: 3rem;
    }
	
    .tools-row-2 .tools-message-row{
        padding-left: 3rem;
    }

    .alert-column-1{
        padding: 0 20px;
    }

    .management-column-1{
        padding: 0 20px;
    }

    .alert-message-row i{
        font-size: 2rem;
        margin-top: 1rem;
    }

    .alert-message-row{
        margin: 5px 0px;
    }

    .send-message-row i{
        font-size: 2rem;
        margin-top: 1rem;
    }

    .send-message-row{
        margin: 5px 0px;
    }

    .tools-message-row i{
        font-size: 2rem;
        margin-top: 1rem;
    }

    .tools-message-row{
        margin: 5px 0px;
    }

    .checkbox-container {
        margin-top: 1rem;
    }

    .alert-option-title h3{
        font-size: .7rem;
    }

    .btn-block-alert button{
        padding: 2px;
    }

    .btn-block-send button{
        padding: 2px;
    }

    .btn-block-tools button{
        padding: 2px;
    }

    .label-password{
        margin:0;
        font-size: .8rem;
    }

    .alert-row-3{
        padding: .5rem 0 1rem 0;
    }
	
	.management-row-3{
        padding: .5rem 0 1rem 0;
    }
	
	.send-row-3{
        padding: .5rem 0 1rem 0;
    }
	
	.tools-row-3{
        padding: .5rem 0 1rem 0;
    }

    /* Alert */

    /* Maintenance */

    #maintenance_activate{
        height: unset;
        width: unset;
    }

    /* Maintenance */

    /* Vision */

    .view-main-vision{
        flex-direction: column;
    }

    .view-block-vision{
        height: 0;
        padding: 0;
    }

    .v-row-1{
        margin: 2rem 4rem;
    }

    .v-row-2{
        margin: 2rem 4rem;
    }

    .v-row-3{
        margin: 2rem 4rem;
    }

    .vision-content-center{
        position: unset;
        top: unset;
        transform: unset;
    }

    /* Cameras */

    .view-main-cameras{
        flex-direction: column;
    }

    .view-block-cameras{
        height: 0;
        padding: 0;
    }

    .c-row-1{
        margin: 2rem 4rem;
    }

    .c-row-2{
        margin: 2rem 4rem;
    }

    .cameras-content-center{
        position: unset;
        top: unset;
        transform: unset;
    }


    /* Downloads */

    .view-main-downloads{
        flex-direction: column;
    }

    .view-block-downloads{
        height: 0;
        padding: 0;
    }

    .d-row-1{
        margin: 2rem 4rem;
    }

    .d-row-2{
        margin: 2rem 4rem;
    }

    .d-row-3{
        margin: 2rem 4rem;
    }

    .downloads-content-center{
        position: unset;
        top: unset;
        transform: unset;
    }


    .net-handler {
        margin: 0 10.8rem;
    }

    .sensor-handler {
        margin: 0 11rem;
    }

    .download-with-link {
        text-align: center;
    }

    .download-link{
        font-size: 1rem;
        padding-right: 1rem;
    }


}

@media screen and (min-width: 900px) and (max-width: 1000px){
    body{
        font-size: 1rem;
        margin:0;
        padding:0;
        overflow-y: scroll;
    }

    .info{
        font-size: 0.8rem
    }

    .measure{
        font-size: 0.7rem
    }

    #date_2, #date_3, #date_1, #date_0{
        height: 15px;
        font-size: 1rem;
    }

    .console-sensors-table, .console-info-table, #selectState{
        font-size: 0.8rem;
    }
    .console-infoE-table {
        font-size: 0.8rem;
    }

    .nv-bot{
        font-size: 0.8rem;
    }
    .main{
        margin: 0;
        width: 100%;
        height: 100%;
        flex-direction: column;
    }

    .container {
        display: unset;
        padding: 0;
    }

    .c-charts{
        max-height: 500px;
        flex: 4;
        display: flex;
        flex-direction: column;
    }

    .c-graph{
        display: flex;
        flex:1;
    }

    .c-big{
        display: flex;
        padding: 0px 40px;
    }

    .c-small{
        display: flex;
        flex:2;
        width: 100%;
    }

    .c-map{
        display: flex;
        margin-top: 20px;
        min-height: 400px;
        padding: 0px 40px;
    }

    .details{
        display: flex;
    }

    .graph{
        flex: 6;
        max-height: 287px;
    }

    .sensor-tb{
        padding: 0px 40px;
    }

    .loader_c{
        border: 8px solid #f3f3f3;
        border-top: 8px solid blue;
        border-right: 8px solid green;
        border-bottom: 8px solid red;
        width: 60px;
        height: 60px;
    }
		
	
	/* Forecast */
    .f-container {
        display: unset;
        padding: 0;
    }

    .f-charts{
        max-height: 500px;
        flex: 4;
        display: flex;
        flex-direction: column;
    }

    .f-graph{
        display: flex;
        flex:1;
    }

    .fgraph{
        flex: 6;
        max-height: 287px;
    }
}

@media screen and (min-width: 600px) and (max-width: 900px){

    /* Login */

    .login{
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-md);
        width: 90%;
        max-width: 600px;
    }

    .login-title{
        flex-direction: column;
        width: 100%;
        gap: var(--spacing-lg);
    }

    .title-test{
        padding-right: 0;
        margin-right: 0;
        border-right: none;
        border-bottom: 2px solid var(--border-color-light);
        padding-bottom: var(--spacing-lg);
        min-width: auto;
    }

    .login-title form{
        min-width: auto;
        max-width: none;
        width: 100%;
    }

    .login-logo{
        padding: var(--spacing-lg);
        width: 100%;
    }

    .login-logo img {
		height: 77px;
    }

    /* Login */

    /* select Installations */

    .brand-container{
        width: 50%;
    }

    .instal_window{
        left: 57%;
    }

    /*#sandwich{*/
        /*display: none;*/
    /*}*/

    /* select Installations */

    body{
        font-size: 0.9rem;
        margin:0;
        padding:0;
        overflow-y: scroll;
    }

    .info{
        font-size: 0.7rem
    }

    #sandwich{
        height: 3.3rem;
        line-height: 3rem;
        position: fixed;
    }

    .measure{
        font-size: 0.6rem
    }


    #date_2, #date_3, #date_1, #date_0{
        height: 15px;
        font-size: 0.9rem;
    }

    #list_sensors{
        height:18px;
        font-size: 0.8rem;
    }
    .console-sensors-table, .console-info-table, #selectState{
        font-size: 0.8rem;
    }
    .console-infoE-table {
        font-size: 0.8rem;
    }

    .nv-bot{
        /*font-size: 0.6rem;*/
        display: none;
    }
    .main{
        margin: 0;
        width: 100%;
        height: 100%;
        flex-direction: column;
    }

    .container {
        display: unset;
        padding: 0;
    }

    .c-charts{
        flex: 4;
        max-height: 500px;
        display: flex;
        flex-direction: column;
    }

    .c-graph{
        display: flex;
    }

    .c-big{
        display: flex;
        padding: 0px 40px;
    }

    .c-small{
        display: flex;
        flex:2;
        width: 100%;
    }

    .c-map{
        display: flex;
        margin-top: 20px;
        min-height: 400px;
        padding: 0px 40px;
    }

    .details{
        display: flex;
    }

    .graph{
        flex: 6;
        max-height: 227px;
    }

    .sensor-tb{
        padding: 0px 40px;
    }

    .loader_c{
        border: 4px solid #f3f3f3;
        border-top: 4px solid blue;
        border-right: 4px solid green;
        border-bottom: 4px solid red;
        width: 30px;
        height: 30px;
    }
    .nv-bot-display-n{
        display: block;
        padding: 0px 8px;
        background: #555555;
        position: fixed;
        left: 0;
        bottom: 20%;
        cursor: pointer;
        color: #FFFFFFFF;
        font-size: 2rem;
        text-align: center;
    }

    .loader-main{
        top: 54%;
        height: 94%;
    }


	
    /* Forecast */

    .f-container {
        display: unset;
        padding: 0;
    }

    .f-charts{
        flex: 4;
        max-height: 500px;
        display: flex;
        flex-direction: column;
    }

    .f-graph{
        display: flex;
    }

    .fgraph{
        flex: 6;
        max-height: 227px;
    }
	
	
    /* Users */

    .view-container{
        padding: 10px;
    }

    .user-table-flex{
        padding: 5rem 6rem 0 6rem;
    }

    .users-head{
        height: 2rem;
    }


    .user-form-btn{
        bottom: 2.5rem;
        right: 2.4rem;
    }


    /* Users */

    /* Notification */

    .bookmark{
        display: none;
    }

    .risk-index-block{
        flex-direction: column;
    }

    .notification-form-column{
        margin: 0;
    }

    .line-separator-vertical{
        display: none;
    }

    .notification-row-label i{
        font-size: 2rem;
        margin-top: 0;
    }

    .line-separator{
        display: none;
    }

    /* Notification */

    /* Alerts */

    .alert-row-2 .alert-message-row{
        padding-left: 0;
    }
	
    .send-row-1 .send-message-row{
        padding-left: 0;
    }

    .send-row-2 .send-message-row{
        padding-left: 0;
    }
	
    .tools-row-1 .tools-message-row{
        padding-left: 0;
    }

    .tools-row-2 .tools-message-row{
        padding-left: 0;
    }

    .alert-message-row i{
        font-size: 2rem;
    }

    .send-message-row i{
        font-size: 2rem;
    }

    .tools-message-row i{
        font-size: 2rem;
    }

    .btn-block-alert{
        padding-right: 10.5rem;
    }

    .btn-block-send{
        padding-right: 10.5rem;
    }

    .btn-block-tools{
        padding-right: 10.5rem;
    }

    .alert-message-row input[type=text]{
        margin-left: .8rem;
    }

    .send-message-row input[type=text]{
        margin-left: .8rem;
    }

    .tools-message-row input[type=text]{
        margin-left: .8rem;
    }

    /* Alerts */

    /* Vision */

    .view-main-vision{
        flex-direction: column;
    }

    .view-block-vision{
        height: 0;
        padding: 0;
    }

    .v-row-1{
        margin: 2rem 4rem;
    }

    .v-row-2{
        margin: 2rem 4rem;
    }

    .v-row-3{
        margin: 2rem 4rem;
    }

    .vision-content-center{
        position: relative;
        top: 20rem;
    }

    /* Cameras */

    .view-main-cameras{
        flex-direction: column;
    }

    .view-block-cameras{
        height: 0;
        padding: 0;
    }

    .c-row-1{
        margin: 2rem 4rem;
    }

    .c-row-2{
        margin: 2rem 4rem;
    }

    .cameras-content-center{
        position: relative;
        top: 20rem;
    }

    /* Downloads */

    .view-main-downloads{
        flex-direction: column;
    }

    .view-block-downloads{
        height: 0;
        padding: 0;
    }

    .d-row-1{
        margin: 2rem 4rem;
    }

    .d-row-2{
        margin: 2rem 4rem;
    }

    .d-row-3{
        margin: 2rem 4rem;
    }

    .downloads-content-center{
        position: relative;
        top: 20rem;
    }

    .net-handler {
        margin: 0 3.8rem;
    }

    .sensor-handler {
        margin: 0 4.15rem;
    }

    .download-with-link {
        margin-left: 8rem;
    }

    .download-link{
        padding-right: 1rem;
    }

}

@media screen and (width: 768px){

    /* Login */

    .login{
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-md);
        width: 90%;
        max-width: 600px;
    }

    .login-title{
        flex-direction: column;
        width: 100%;
        gap: var(--spacing-lg);
    }

    .title-test{
        padding-right: 0;
        margin-right: 0;
        border-right: none;
        border-bottom: 2px solid var(--border-color-light);
        padding-bottom: var(--spacing-lg);
        min-width: auto;
    }

    .login-title form{
        min-width: auto;
        max-width: none;
        width: 100%;
    }

    .login-logo{
        padding: var(--spacing-lg);
        width: 100%;
    }

    .login-logo img {
		height: 77px;
    }

    /* Login */

    /* select Installations */

    .brand-container{
        width: 50%;
    }

    .instal_window{
        left: 57%;
    }

    /*#sandwich{*/
    /*display: none;*/
    /*}*/

    /* select Installations */

    body{
        font-size: 0.9rem;
        margin:0;
        padding:0;
        overflow-y: scroll;
    }

    .info{
        font-size: 0.7rem
    }

    #sandwich{
        height: 3.3rem;
        line-height: 3rem;
        position: fixed;
    }

    .measure{
        font-size: 0.6rem
    }


    #date_2, #date_3, #date_1, #date_0{
        height: 15px;
        font-size: 0.9rem;
    }

    #list_sensors{
        height:18px;
        font-size: 0.8rem;
    }
    .console-sensors-table, .console-info-table, #selectState{
        font-size: 0.8rem;
    }
    .console-infoE-table {
        font-size: 0.8rem;
    }

    .nv-bot{
        /*font-size: 0.6rem;*/
        display: none;
    }
    .main{
        margin: 0;
        width: 100%;
        height: 100%;
        flex-direction: column;
    }

    .container {
        display: unset;
        padding: 0;
    }

    .c-charts{
        flex: 4;
        max-height: 500px;
        display: flex;
        flex-direction: column;
    }

    .c-graph{
        display: flex;
    }

    .c-big{
        display: flex;
        padding: 0px 40px;
    }

    .c-small{
        display: flex;
        flex:2;
        width: 100%;
    }

    .c-map{
        display: flex;
        margin-top: 20px;
        min-height: 400px;
        padding: 0px 40px;
    }

    .details{
        display: flex;
    }

    .graph{
        flex: 6;
        max-height: 227px;

    }

    .sensor-tb{
        padding: 0px 40px;
    }

    #loader-chart_1, #loader-chart_2 {
        z-index: 1000;
        margin: 6.5rem 18rem;
        position: absolute;
        font-size: 1.4rem;
    }

    .nv-bot-display-n{
        display: block;
        padding: 0px 8px;
        background: #555555;
        position: fixed;
        left: 0;
        bottom: 20%;
        cursor: pointer;
        color: #FFFFFFFF;
        font-size: 2rem;
        text-align: center;
    }

    .loader-main{
        top: 54%;
        height: 94%;
    }
	
    /* Forecast */

    .f-container {
        display: unset;
        padding: 0;
    }

    .f-charts{
        flex: 4;
        max-height: 500px;
        display: flex;
        flex-direction: column;
    }

    .f-graph{
        display: flex;
    }

    .fgraph{
        flex: 6;
        max-height: 227px;

    }
	
		
    /* Forecast */

    #f-loader-chart_1, #f-loader-chart_2, #f-loader-chart_3, #f-loader-chart_4 {
        z-index: 1000;
        margin: 6.5rem 18rem;
        position: absolute;
        font-size: 1.4rem;
    }
	
    /* Users */

    .view-container{
        padding: 10px;
    }

    .user-table-flex{
        padding: 5rem 6rem 0 6rem;
    }

    .users-head{
        height: 2rem;
    }


    .user-form-btn{
        bottom: 2.5rem;
        right: 2.4rem;
    }


    /* Users */

    /* Notification */

    .bookmark{
        display: none;
    }

    .risk-index-block{
        flex-direction: column;
    }

    .notification-form-column{
        margin: 0;
    }

    .line-separator-vertical{
        display: none;
    }

    .notification-row-label i{
        font-size: 2rem;
        margin-top: 0;
    }

    .line-separator{
        display: none;
    }

    .notification-row textarea{
        height: 3rem;
    }

    /* Notification */

    /* Alerts */

    @-moz-document  url-prefix(){
        .alert-message-row input[type=text], .alert-message-row textarea{
            flex:1!important;
        }
		
        .send-message-row input[type=text], .send-message-row textarea{
            flex:1!important;
        }
		
        .tools-message-row input[type=text], .tools-message-row textarea{
            flex:1!important;
        }

        .alert-row-1 {
            padding: 0!important;
        }

		.management-row-2{
            padding: 0!important;
		}

    }

    .alert-row-1{
        flex-direction: column;
        padding: 0 0 15.5rem 0;
    }

	.management-row-2{
        flex-direction: column;
        padding: 0 0 15.5rem 0;
	}


    .alert-option-title h3{
        margin:0;
        font-size: .8rem;
    }

    .alert-column-1{
        padding: 0 20px;
        margin-bottom: .3rem;
    }

    .management-column-1{
        padding: 0 20px;
        margin-bottom: .3rem;
    }

    .alert-row-2 .alert-message-row{
        padding-left: 0;
    }

    .send-row-1 .send-message-row{
        padding-left: 0;
    }

    .send-row-2 .send-message-row{
        padding-left: 0;
    }

    .tools-row-1 .tools-message-row{
        padding-left: 0;
    }

    .tools-row-2 .tools-message-row{
        padding-left: 0;
    }

    .alert-row-3{
        padding: .5rem 0 2rem 0;
    }
	
	.management-row-3{
        padding: .5rem 0 2rem 0;
    }
	
	.send-row-3{
        padding: .5rem 0 2rem 0;
    }
	
	.tools-row-3{
        padding: .5rem 0 2rem 0;
    }

    .alert-message-row i{
        font-size: 2rem;
    }

    .send-message-row i{
        font-size: 2rem;
    }

    .tools-message-row i{
        font-size: 2rem;
    }

    .btn-block-alert {
        padding-right: 8rem;
    }

    .btn-block-send {
        padding-right: 8rem;
    }

    .btn-block-tools{
        padding-right: 8rem;
    }

    .label-password{
        margin:0;
        display: block;
        text-align: center;
    }

    .alert-row-2{
        padding: 0 5px 5px 40px;
    }

    .alert-message-row input[type=text]{
        margin-left: 1rem;
        height: 1rem;
        min-width: 8rem;
        flex: 1;
    }

    .send-row-1{
        padding: 0 5px 5px 40px;
    }

    .send-row-2{
        padding: 0 5px 5px 40px;
    }

    .send-message-row input[type=text]{
        margin-left: 1rem;
        height: 1rem;
        min-width: 8rem;
        flex: 1;
    }

    .tools-row-1{
        padding: 0 5px 5px 40px;
    }

    .tools-row-2{
        padding: 0 5px 5px 40px;
    }

    .tools-message-row input[type=text]{
        margin-left: 1rem;
        height: 1rem;
        min-width: 8rem;
        flex: 1;
    }

    #pass_check{
        text-align: center;
    }

    .alert-message-row textarea{
        margin-left: .2rem;
        min-width: 8rem;
        flex: 1;
    }

    .send-message-row textarea{
        margin-left: .2rem;
        min-width: 8rem;
        flex: 1;
    }

    .tools-message-row textarea{
        margin-left: .2rem;
        min-width: 8rem;
        flex: 1;
    }

    .alert-checkbox-block{
        flex: 3;
        margin: 0 0 0 5%;
        flex-direction: column;
    }

    .alert-checkbox-block div label{
        flex:2;
    }

    .alert-checkbox-block div input[type=checkbox]{
        flex:1;
    }

    .alert-checkbox-block div{
        margin-bottom: .3rem;
    }

    /* Alerts */

    /* Maintenance */

    .activation-block{
        flex-direction: column;
    }

    #maintenance_activate{
        position:unset;
        margin: 0 auto;
    }

    .status-container-handler h3{
        margin:0;
    }

    .status-container{
        padding: 20px 10px;
    }

    .status-container-handler strong{
        display: block;
        height: 2rem;
        white-space: nowrap;
    }

    .status-container-handler{
        height: 100%;
    }

    /* Maintenance */

    /* Vison */

    .view-main-vision{
        flex-direction: column;
    }

    .view-block-vision{
        height: 0;
        padding: 0;
    }

    .v-row-1{
        margin: 2rem 4rem;
    }

    .v-row-2{
        margin: 2rem 4rem;
    }

    .v-row-3{
        margin: 2rem 4rem;
    }

    .vision-content-center{
        position: relative;
        top: 20rem;
    }

    /* Cameras */

    .view-main-cameras{
        flex-direction: column;
    }

    .view-block-cameras{
        height: 0;
        padding: 0;
    }

    .c-row-1{
        margin: 2rem 4rem;
    }

    .c-row-2{
        margin: 2rem 4rem;
    }

    .cameras-content-center{
        position: relative;
        top: 20rem;
    }


    /* Downloads */
    .view-main-downloads{
        flex-direction: column;
    }

    .view-block-downloads{
        height: 0;
        padding: 0;
    }

    .d-row-1{
        margin: 2rem 4rem;
    }

    .d-row-2{
        margin: 2rem 4rem;
    }

    .d-row-3{
        margin: 2rem 4rem;
    }

    .downloads-content-center{
        position: relative;
        top: 20rem;
    }

    .net-handler {
        margin: 0 3.8rem;
    }

    .sensor-handler {
        margin: 0 4.15rem;
    }

    .download-with-link {
        margin-left: 8rem;
    }

    .download-link{
        padding-right: 1rem;
    }


}

@media screen and (min-width: 450px) and  (max-width: 600px){

    #sandwich {
        height: 3.3rem;
        line-height: 3rem;
        position: fixed;
    }

    .nv-bot-display-n {
        display: block;
        padding: 0px 8px;
        background: #555555;
        position: fixed;
        left: 0;
        bottom: 20%;
        cursor: pointer;
        color: #FFFFFFFF;
        font-size: 2rem;
        text-align: center;
    }

    body{
        font-size: 0.8rem;
        margin:0;
        padding:0;
        overflow-y: scroll;
    }

    .info{
        font-size: 0.65rem
    }

    .measure{
        font-size: 0.55rem
    }

    .nv-bot-display-n{
        display: block;
        padding: 0px 8px;
        background: #555555;
        position: fixed;
        left: 0;
        bottom: 20%;
        cursor: pointer;
        color: #FFFFFFFF;
        font-size: 2rem;
        text-align: center;
    }


    #date_2, #date_3, #date_1, #date_0{
        height: 12px;
        font-size: 0.8rem;
    }

    #list_sensors{
        height:18px;
        font-size: 0.8rem;
    }
    .console-sensors-table, .console-info-table, #selectState{
        font-size: 0.7rem;
    }
    .console-infoE-table {
        font-size: 0.7rem;
    }

    .nv-bot{
        display: none;
    }
    .main{
        margin: 0;
        width: 100%;
        height: 100%;
        flex-direction: column;
    }

    .container {
        display: unset;
        padding: 0;
    }

    .c-charts{
        flex: 4;
        display: flex;
        flex-direction: column;
        max-height: 500px;
    }

    .c-graph{
        display: flex;
    }

    .c-big{
        display: flex;
        padding: 0px 40px;
    }

    .c-small{
        display: flex;
        flex:2;
        width: 100%;
    }

    .c-map{
        display: flex;
        margin-top: 20px;
        min-height: 400px;
        padding: 0px 40px;
    }

    .details{
        display: flex;
    }

    .graph{
        flex: 6;
        max-height: 175px;
    }

    .sensor-tb{
        padding: 0px 40px;
    }

    .loader-main{
        top: 54%;
        height: 94%;
    }
		
    /* Forecast */
    .f-container {
        display: unset;
        padding: 0;
    }

    .f-charts{
        flex: 4;
        display: flex;
        flex-direction: column;
        max-height: 500px;
    }

    .f-graph{
        display: flex;
    }

    .fgraph{
        flex: 6;
        max-height: 175px;
    }

    /* Users */

    .view-container{
        padding: 10px;
    }

    .user-table-flex{
        padding: 5rem 6rem 0 6rem;
    }

    .users-head{
        height: 2rem;
    }


    .user-form-btn{
        bottom: 2.5rem;
        right: 2.4rem;
    }


    /* Users */

    /* Notification */

    .view-block-notification{
        padding: 2rem 1.5rem 0 .5rem;
    }

    .bookmark{
        display: none;
    }

    .risk-index-block{
        flex-direction: column;
    }

    .notification-form-column{
        margin: 0;
    }

    .line-separator-vertical{
        display: none;
    }

    .notification-row-label i{
        font-size: 2rem;
        margin-top: 0;
    }

    .line-separator{
        display: none;
    }

    .notification-row textarea{
        max-height: 3rem;
    }

    .notification-row-small{
        padding: .2rem 0;
    }

    .notification-row{
        padding: .2rem 0;
    }

    .view-sublock h3{
        margin-top: 0;
    }

    /* Notification */

    /* Alerts */

    .view-block{
        padding: 3rem 1.5rem 0 .5rem;
    }

    .time-logo-container{
        display: none;
    }

    .alert-row-1 {
        flex-direction: column;
        padding: 0 0 21.5rem 0;
    }

	.management-row-2{
        flex-direction: column;
        padding: 0 0 21.5rem 0;
	}

    .alert-row-2 .alert-message-row{
        padding-left: 0;
    }

    .send-row-1 .send-message-row{
        padding-left: 0;
    }

    .send-row-2 .send-message-row{
        padding-left: 0;
    }

    .tools-row-1 .tools-message-row{
        padding-left: 0;
    }

    .tools-row-2 .tools-message-row{
        padding-left: 0;
    }

    .alert-message-row i{
        font-size: 2rem;
    }

    .send-message-row i{
        font-size: 2rem;
    }

    .tools-message-row i{
        font-size: 2rem;
    }

    .btn-block-alert{
        padding-right: 0rem;
    }

    .btn-block-send{
        padding-right: 0rem;
    }

    .btn-block-tools{
        padding-right: 0rem;
    }

    .alert-message-row input[type=text]{
        margin-left: .8rem;
        height:1rem;
    }

    .send-message-row input[type=text]{
        margin-left: .8rem;
        height:1rem;
    }

    .tools-message-row input[type=text]{
        margin-left: .8rem;
        height:1rem;
    }

    .alert-row-3 div{
        top: 10%;
    }

    .management-row-3 div{
        top: 10%;
    }

    .send-row-3 div{
        top: 10%;
    }

    .tools-row-3 div{
        top: 10%;
    }

    .label-password{
        font-size: .7rem;
        margin-right: 0;
    }

    .alert-row-3{
        padding: .5rem 0 1rem 0;
        margin-bottom: 1rem;
    }
	
	.management-row-3{
        padding: .5rem 0 1rem 0;
        margin-bottom: 1rem;
    }
	
	.send-row-3{
        padding: .5rem 0 1rem 0;
        margin-bottom: 1rem;
    }
	
	.tools-row-3{
        padding: .5rem 0 1rem 0;
        margin-bottom: 1rem;
    }

    .alert-message-row input, .alert-message-row textarea{
        max-width: 10rem!important;
    }

    .send-message-row input, .send-message-row textarea{
        max-width: 10rem!important;
    }

    .tools-message-row input, .tools-message-row textarea{
        max-width: 10rem!important;
    }

    .user-form {
        display: flex;
        flex-direction: column;
    }

    .input-line {
        padding-left: 1.5rem;
    }

    .users-main{
		max-height: 80%;
        /* height: 22rem; */
    }

    .user-form-btn {
        position: relative;
        bottom: 0.5rem;
        left: 8.5rem;
        margin-top: 1rem;
    }

    .maintenance-row{
        flex: 5;
        height: 5rem;
    }

    .management-row-1{
        flex: 5;
        height: 5rem;
    }

    .block-handler{
        display: none;
    }

    .activation-block{
        margin: 0;
        height: 5rem;
    }

    .alert-column-1{
        margin-bottom: .3rem;
    }

    .management-column-1{
        margin-bottom: .3rem;
    }

    /* Alerts */

    /* Vision */

    .view-main-vision{
        flex-direction: column;
    }

    .view-block-vision{
        height: 0;
        padding: 0;
    }

    .v-row-1{
        margin: 2rem 4rem;
    }

    .v-row-2{
        margin: 2rem 4rem;
    }

    .v-row-3{
        margin: 2rem 4rem;
    }

    .vision-content-center{
        position: relative;
        top: 2rem;
        transform: unset;
    }

    /* Cameras */

    .view-main-cameras{
        flex-direction: column;
    }

    .view-block-cameras{
        height: 0;
        padding: 0;
    }

    .c-row-1{
        margin: 2rem 4rem;
    }

    .c-row-2{
        margin: 2rem 4rem;
    }

    .cameras-content-center{
        position: relative;
        top: 2rem;
        transform: unset;
    }

    /* Downloads */

    .view-main-downloads{
        flex-direction: column;
    }

    .view-block-downloads{
        height: 0;
        padding: 0;
    }

    .d-row-1{
        margin: 2rem 4rem;
    }

    .d-row-2{
        margin: 2rem 4rem;
    }

    .d-row-3{
        margin: 2rem 4rem;
    }

    .downloads-content-center{
        position: relative;
        top: 2rem;
        transform: unset;
    }

    .net-handler {
        margin: 0 3.8rem;
    }

    .sensor-handler {
        margin: 0 4.15rem;
    }

    .download-with-link {
        margin-left: 0;
        margin-top: 0;
    }

    .download-link{
        padding-right: 1rem;
    }

}

@media screen and (max-width: 450px){

    /* Login */

    .login{
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-sm);
        padding: var(--spacing-md);
        width: calc(100% - var(--spacing-xl));
        max-width: none;
    }

    .login-title{
        flex-direction: column;
        width: 100%;
        gap: var(--spacing-md);
        padding: var(--spacing-md);
    }

    .title-test{
        padding-right: 0;
        margin-right: 0;
        border-right: none;
        border-bottom: 2px solid var(--border-color-light);
        padding-bottom: var(--spacing-md);
        min-width: auto;
    }

    .login-title form{
        width: 100%;
        min-width: auto;
        max-width: none;
    }

    .login-logo{
        padding: var(--spacing-md);
        width: 100%;
    }

    .form-raw input{
        width: 100%;
    }

    .sign-in{
        width: 100%;
    }

    .login-logo img {
		height: 60px;
    }

    /* Login */

    /* select Installations */

    .instal_window{
        width: 20rem;
        left: 58%;
    }

    .brand-container{
        width: 96%;
    }

    .window-line{
        font-size: 0.55rem;
    }

    .window-head{
        padding: 4px 0 0px 0;
    }


    body{
        font-size: 0.8rem;
        margin:0;
        padding:0;
        overflow-y: scroll;
    }

    #sandwich{
        height: 3.3rem;
        line-height: 3rem;
        position: fixed;
    }

    .info{
        font-size: 0.65rem
    }

    .measure{
        font-size: 0.55rem
    }


    #date_2, #date_3, #date_1, #date_0{
        height: 10px;
        font-size: 0.65rem;
    }

    #list_sensors{
        height:18px;
        font-size: 0.8rem;
    }
    .console-sensors-table, .console-info-table, #selectState{
        font-size: 0.6rem;
    }
    .console-infoE-table {
        font-size: 0.6rem;
    }

    .nv-bot{
        display: none;
    }

    .main{
        margin: 0;
        width: 100%;
        height: 100%;
        flex-direction: column;
    }

    .container {
        display: unset;
        padding: 0;
    }

    .c-charts{
        flex: 4;
        display: flex;
        flex-direction: column;
    }

    .c-graph{
        display: flex;
        max-height: 200px;
    }

    .c-big{
        display: flex;
        padding: 0 15px;
    }

    .c-small{
        display: flex;
        flex:2;
        width: 100%;
    }

    .c-map{
        display: flex;
        margin-top: 20px;
        min-height: 400px;
        padding: 0px 40px;
    }

    .details{
        display: flex;
    }

    .graph{
        flex: 6;
        /*min-height: 150px!important;*/
        max-height: 175px!important;
    }

    .sensor-tb{
        padding: 0px 40px;
    }

    .nv-bot-display-n{
        display: block;
        padding: 0px 8px;
        background: #555555;
        position: fixed;
        left: 0;
        bottom: 20%;
        cursor: pointer;
        color: #FFFFFFFF;
        font-size: 2rem;
        text-align: center;
    }

    .loader-main{
        top: 54%;
        height: 94%;
    }


    /* Forecast */
	
    .forecast-container-main{}

    .f-container {
        display: unset;
        padding: 0;
    }

    .f-charts{
        flex: 4;
        display: flex;
        flex-direction: column;
    }

    .f-graph{
        display: flex;
        max-height: 200px;
    }

    .fgraph{
        flex: 6;
        /*min-height: 150px!important;*/
        max-height: 175px!important;
    }
	
	
    /* Users */

    .time-logo-container{
        display: none;
    }

    .view-container{
        padding: 10px;
    }

    .user-table-flex{
        padding: 5rem 2rem 0 1rem;
    }

    .users-head{
        height: 2rem;
        font-size: .49rem;
    }

    .users-title{
        width: 1.5rem;
    }

    .users-statement{
        height: 2.5rem;
        font-size: .43rem;
    }

    .users-statement .console-title{
        width: 1.5rem;
        overflow-wrap: break-word;
    }


    .user-form-btn{
        position: relative;
        bottom: 0.5rem;
        left: 5rem;
        margin-top: 1rem;
    }

    .input-line{
        padding-left: 1.5rem;
    }

    .users-main{
		max-height: 80%;
        /* height: 20rem; */
    }

    .users-container-main{}

    /* Users */

    /* Notification */

    .tab-container{
        padding: 0 20px;
    }

    .view-block-notification{
        padding: 2rem 2rem 1rem 1rem;
        /*height: 45rem;*/
        height: 100%;
    }

    .view-block{
        padding: 3rem 2rem 1rem 1rem;
        /*height: 45rem;*/
        height: 100%;
    }

    .view-main{
        height: 32rem;
    }

    .risk-index-unit h2{
        margin: 0;
    }

    .notification-row-small{
        padding: 5px 0;
    }

    .notification-row{
        padding: 5px 0;
    }

    .notification-row textarea{
        height: 2.2rem;
    }

    .btn-block{
        margin-top: .3rem;
    }

    .btn-block button{
        height: 1.8rem;
    }

    .bookmark{
        display: none;
    }

    .risk-index-block{
        flex-direction: column;
    }

    .notification-form-column{
        margin: 0;
    }

    .line-separator-vertical{
        display: none;
    }

    .notification-row-label i{
        font-size: 1rem;
        margin-top: 0;
    }

    .line-separator{
        display: none;
    }

    @-moz-document  url-prefix(){
        .notification-row-small input, .notification-row textarea{
            max-width: 8rem!important;
        }

        .notification-row-label{
            padding-left: 0;
        }

        .view-sublock h3{
            margin: 0;
        }
    }

    /* Notification */

    /* Alerts */

    @-moz-document  url-prefix(){
        .alert-message-row input[type=text], .alert-message-row textarea{
            width: 3rem!important;
            flex:1!important;
        }
		
        .send-message-row input[type=text], .send-message-row textarea{
            width: 3rem!important;
            flex:1!important;
        }
		
        .tools-message-row input[type=text], .send-message-row textarea{
            width: 3rem!important;
            flex:1!important;
        }

        .alert-row-1 {
            padding: 0!important;
        }

		.management-row-2{
            padding: 0!important;
		}

        .alert-message-row{
            /*flex-direction: column;*/
        }

        .send-message-row{
            /*flex-direction: column;*/
        }

        .tools-message-row{
            /*flex-direction: column;*/
        }
    }

    .alert-row-1{
        flex-direction: column;
        display: block;
        /*padding: 0 0 15.5rem 0;*/
    }

    .management-row-2{
        flex-direction: column;
        display: block;
        /*padding: 0 0 15.5rem 0;*/
    }

    .alert-row-2{
        padding: 10px 5px;
    }

    .alert-row-2 .alert-message-row{
        padding-left: 0;
    }

    .send-row-1{
        padding: 10px 5px;
    }

    .send-row-2{
        padding: 10px 5px;
    }

    .send-row-1 .send-message-row{
        padding-left: 0;
    }

    .send-row-2 .send-message-row{
        padding-left: 0;
    }

    .tools-row-1{
        padding: 10px 5px;
    }

    .tools-row-2{
        padding: 10px 5px;
    }

    .tools-row-1 .tools-message-row{
        padding-left: 0;
    }

    .tools-row-2 .tools-message-row{
        padding-left: 0;
    }

    .alert-column-1{
        padding: 0 20px;
        margin-bottom: .3rem;
    }

    .management-column-1{
        padding: 0 20px;
        margin-bottom: .3rem;
    }

    .alert-checkbox-block{
        flex-direction: column;
        margin-top: 0rem;
        margin-left: 1rem;
    }

    .alert-option-title h3{
        padding-bottom: 0;
    }

    .checkbox-container div{
        display: flex;
        flex-direction: row;
    }

    .checkbox-container div:first-child{
        margin-bottom: .1rem;
    }

    .checkbox-container div:last-child{
        margin-top: .8rem;
    }

    .checkbox-container div label{
        flex:1;
    }

    .checkbox-container div input{
        flex:1;
    }

    .alert-message-row{
        margin: 5px 0;
    }

    .alert-message-row i{
        font-size: 2rem;
    }

    .send-message-row{
        margin: 5px 0;
    }

    .send-message-row i{
        font-size: 2rem;
    }

    .tools-message-row{
        margin: 5px 0;
    }

    .tools-message-row i{
        font-size: 2rem;
    }

    .btn-block-alert{
        padding-right: 4.5rem;
    }

    .btn-block-send{
        padding-right: 4.5rem;
    }

    .btn-block-tools{
        padding-right: 4.5rem;
    }

    .alert-message-row input[type=text]{
        margin-left: .8rem;
        width: 5rem;
        height: 1.5rem;
    }

    .alert-message-row textarea{
        width: 5rem;
    }

    .send-message-row input[type=text]{
        margin-left: .8rem;
        width: 5rem;
        height: 1.5rem;
    }

    .tools-message-row input[type=text]{
        margin-left: .8rem;
        width: 5rem;
        height: 1.5rem;
    }

    .sens-message-row textarea{
        width: 5rem;
    }

    .label-password{
        margin-right: 0;
    }

    .alert-row-3 div{
        top: 10%;
    }
	
	.management-row-3 div {
        top: 10%;
    }
	
	.send-row-3 div {
        top: 10%;
    }
	
	.tools-row-3 div {
        top: 10%;
    }

    .alert-option-title h3{
        margin: 0;
    }

    /* Alerts */

    /* Maintenance */

    @-moz-document  url-prefix(){

        .alert-message-row input[type="text"], .alert-message-row textarea{
            max-width: 6rem;
        }

        .alert-message-row textarea{
            margin-left: .3rem;
        }

        .send-message-row input[type="text"], .send-message-row textarea{
            max-width: 6rem;
        }

        .send-message-row textarea{
            margin-left: .3rem;
        }

        .send-tools-row input[type="text"], .send-tools-row textarea{
            max-width: 6rem;
        }

        .send-tools-row textarea{
            margin-left: .3rem;
        }
    }

    .block-handler{
        display: none;
    }

    .activation-block{
        background-color: var(--bg-secondary);
        width: 100%;
        height: 100%;
        margin: 0;
    }

    .activation-title h3{
        margin: 0;
    }

    #maintenance_activate{
        width: 6.6rem;
    }

    .maintenance-row{
        display: block;
        margin: 0 5px 0 5px;
        height: 5rem;
        /*width: 100%;*/
        /*height: 100%;*/
        /*margin-bottom: .3rem;*/
    }

    .management-row-1{
        flex:2;
    }

    .alert-row-3 div {
        top: 10%;
    }
	
	.management-row-3 div {
        top: 10%;
    }
	
	.send-row-3 div {
        top: 10%;
    }
	
    .label-password {
        font-size: .7rem;
        margin-right: 0;
    }
	
	.tools-row-3 div {
        top: 10%;
    }

    /* Maintenance */

    /* Vision */

    .view-main-vision{
        flex-direction: column;
    }

    .view-block-vision{
        height: 0;
        padding: 0;
    }

    .v-row-1{
        margin: 1rem 2rem 1rem 1rem;
    }

    .v-row-2{
        margin: 1rem 2rem 1rem 1rem;
    }

    .v-row-3{
        margin: 1rem 2rem 1rem 1rem;
    }

    .vision-content-center{
        position: relative;
        top: 10rem;
    }

    /* Cameras */

    .view-main-cameras{
        flex-direction: column;
    }

    .view-block-cameras{
        height: 0;
        padding: 0;
    }

    .c-row-1{
        margin: 1rem 2rem 1rem 1rem;
    }

    .c-row-2{
        margin: 1rem 2rem 1rem 1rem;
    }
	
    .cameras-content-center{
        position: relative;
        top: 10rem;
    }


    /* Downloads */

    .view-main-downloads{
        flex-direction: column;
    }

    .view-block-downloads{
        height: 0;
        padding: 0;
    }

    .d-row-1{
        margin: 1rem 2rem 1rem 1rem;
    }

    .d-row-2{
        margin: 1rem 2rem 1rem 1rem;
    }

    .d-row-3{
        margin: 1rem 2rem 1rem 1rem;
    }

    .downloads-content-center{
        position: relative;
        top: 10rem;
    }

    .net-handler {
        margin: 0;
    }

    .sensor-handler {
        margin: 0;
    }

    .download-with-link {
        margin-left: 0rem;
    }

    .download-link{
        padding-right: 1rem;
    }

    .period-btn-container input{
        height: .8rem;
        width: 6.2rem;
    }


}

/* ============================================
   Status Page Layout & Components
   ============================================ */

/* Main Status Page Layout */
.main-content-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.sidebar-section {
    flex: 0 0 880px;
    max-width: 940px;
    min-width: 760px;
    display: flex;
    flex-direction: column;
    padding-left: var(--spacing-md);
    min-height: 0;
}

.event-table-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* Event Table Styles */
.consoleE-main {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    background-color: var(--bg-primary);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.consoleE-head {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    font-weight: 600;
    text-align: center;
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.console-infoE-table {
    display: grid;
    grid-template-columns: 3fr 1fr 3fr 2fr 6fr 2fr;
    gap: var(--spacing-sm);
    font-size: 0.8rem;
}

.consoleE-title {
    font-weight: 600;
    color: var(--text-primary);
}

.console-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.overflow-container {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--spacing-xs);
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) var(--bg-secondary);
}

.overflow-container::-webkit-scrollbar {
    width: 8px;
}

.overflow-container::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

.overflow-container::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

.overflow-container::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

.consoleE-statement {
    display: grid;
    grid-template-columns: 3fr 1fr 3fr 2fr 6fr 2fr;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    margin-bottom: 2px;
    background-color: var(--bg-primary);
    border-radius: var(--border-radius-sm);
    font-size: 0.8rem;
    transition: background-color 0.2s ease;
    align-items: center;
}

.consoleE-statement:hover {
    background-color: var(--bg-secondary);
}

.consoleE-statement span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Select dropdown in table header */
.thE-select {
    width: 100%;
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.thE-select:hover {
    border-color: var(--color-primary);
}

.thE-select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);
}

/* Installation List Styles */
.instal_windowEv {
    display: flex;
    flex-direction: column;
    background-color: var(--bg-primary);
    border-radius: var(--border-radius);
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.instal-windowEv-table {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    background-color: var(--bg-primary);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    min-width: 840px;
}

@media screen and (max-width: 1400px) {
    .sidebar-section {
        flex: 0 0 720px;
        max-width: 760px;
        min-width: auto;
    }

    .instal-windowEv-table {
        min-width: 720px;
    }
}

.windowEv-head {
    display: grid;
    grid-template-columns: 0.8fr 1.5fr 2.5fr 2fr 1.5fr 1.5fr 1.5fr 1.5fr 1.5fr 1fr 1fr 1fr;
    gap: var(--spacing-xs);
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    font-weight: 600;
    text-align: center;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    align-items: center;
}
.windowEv-head span {
    display: flex;
    justify-content: center;
    align-items: center;
}
.windowEv-head span:first-child .btnEv-option {
    width: 100%;
}

.windowEv-line {
    display: grid;
    grid-template-columns: 0.8fr 1.5fr 2.5fr 2fr 1.5fr 1.5fr 1.5fr 1.5fr 1.5fr 1fr 1fr 1fr;
    gap: var(--spacing-xs);
    font-size: 0.75rem;
}

.sortable-column {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    user-select: none;
}

.sortable-column .sort-indicator {
    font-size: 0.75em;
    line-height: 1;
    min-width: 0.9em;
    text-align: center;
}

.sortable-column.active.sort-asc .sort-indicator::before {
    content: "▲";
}

.sortable-column.active.sort-desc .sort-indicator::before {
    content: "▼";
}

.btnEv-option {
    padding: var(--spacing-xs) var(--spacing-sm);
    margin: var(--spacing-xs);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btnEv-option:hover {
    background-color: var(--color-primary);
    color: var(--text-light);
    border-color: var(--color-primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}

/* Loader styles */
.loader_e {
    border: 16px solid var(--bg-tertiary);
    border-radius: 50%;
    border-top: 16px solid var(--color-primary);
    border-bottom: 16px solid var(--color-primary);
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.ldr-center {
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Status color classes */
.txt-status-decor {
    padding: var(--spacing-xs) var(--spacing-sm);
    text-align: center;
    border-radius: var(--border-radius-sm);
    font-weight: 600;
    color: var(--text-light);
}

.low {
    background-color: var(--status-low);
}

.ok {
    background-color: var(--status-ok);
}

.warning {
    background-color: var(--status-warning);
    color: var(--text-primary);
}

.alert {
    background-color: var(--status-alert);
}

.danger {
    background-color: var(--status-danger);
}

.eer {
    background-color: var(--text-secondary);
}

/* ============================================
   Modern Responsive Styles - Mobile First
   ============================================ */

/* Mobile Devices (< 768px) */
@media screen and (max-width: 768px) {
    /* Layout adjustments */
    .container {
        flex-direction: column;
        padding: var(--spacing-sm);
        gap: var(--spacing-sm);
    }
    
    .c-big, .c-small {
        width: 100%;
        flex: 1;
    }
    
    .c-charts {
        padding-left: var(--spacing-sm);
        padding-right: var(--spacing-sm);
    }
    
    .c-column {
        flex-direction: column;
    }
    
    /* Status page mobile layout */
    .sidebar-section {
        flex: 1;
        padding-left: 0;
        margin-top: var(--spacing-md);
    }
    
    .console-infoE-table,
    .consoleE-statement {
        grid-template-columns: 2fr 1fr 2fr 1.5fr 4fr 1.5fr;
        font-size: 0.7rem;
    }
    
    .windowEv-head,
    .windowEv-line {
        grid-template-columns: 0.8fr 1.5fr 2fr 2fr 1.5fr 1.5fr 1.5fr 1.5fr 1.5fr 1.5fr 1.5fr 1.5fr;
        font-size: 0.6rem;
    }
    
    /* Header adjustments */
    .header-page-container {
        flex-direction: column;
        align-items: flex-start;
        padding: var(--spacing-sm);
        gap: var(--spacing-sm);
    }
    
    .header-status-breadcrumb {
        width: 100%;
    }
    
    .header-status-breadcrumb h1 {
        font-size: 1.5rem;
    }
    
    .time-logo-container {
        width: 100%;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: var(--spacing-sm);
    }
    
    .time-widget {
        font-size: 0.85rem;
    }
    
    .logo-widget img {
        height: 40px;
    }
    
    .main-header {
        padding-left: var(--spacing-sm);
        padding-right: var(--spacing-sm);
    }
    
    .main-header h1 {
        font-size: 1.5rem;
    }
    
    .brand-container {
        width: 100%;
        position: relative;
        justify-content: flex-end;
        padding-right: var(--spacing-sm);
    }
    
    /* Graph containers */
    .c-graph {
        flex-direction: column;
        padding: var(--spacing-sm);
    }
    
    .graph {
        max-height: 250px !important;
        min-height: 200px !important;
        margin-bottom: var(--spacing-sm);
    }
    
    .info {
        margin-left: 0;
        margin-top: var(--spacing-sm);
        padding: var(--spacing-sm);
        font-size: 1rem;
    }
    
    /* Date controllers */
    .date-controllers {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-sm);
        padding: var(--spacing-sm);
    }
    
    .date-controllers span {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs);
    }
    
    .date-controllers input[type="date"] {
        width: 100%;
    }
    
    /* Buttons */
    button, .camera-btn-same {
        width: 100%;
        padding: var(--spacing-md);
        min-height: 44px; /* Touch-friendly */
    }
    
    /* Tables */
    .console-main {
        height: auto;
        max-height: 40vh;
    }
    
    .console-head {
        font-size: 0.75rem;
        padding: var(--spacing-xs) var(--spacing-sm);
    }
    
    .console-statement {
        font-size: 0.75rem;
    }
    
    .console-info-table,
    .console-infoE-table,
    .console-sensors-table {
        font-size: 0.7rem;
        grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    }
    
    /* Map */
    .c-map {
        flex-direction: column;
        padding: var(--spacing-sm);
    }
    
    .map {
        min-height: 300px;
    }
    
    /* Navigation */
    .navbar {
        height: auto;
        padding: var(--spacing-xs) 0;
    }
    
    .nv-bot li {
        float: none;
        width: 100%;
    }
    
    .nv-bot li a {
        padding: var(--spacing-md);
        text-align: left;
        border-radius: 0;
    }
    
    /* Side navigation */
    #sandwich {
        width: 2rem;
        height: 2rem;
        left: var(--spacing-sm);
        top: var(--spacing-sm);
    }
    
    .sidenav {
        width: 280px;
        padding-top: 50px;
    }
    
    /* Spacing adjustments */
    .c-log, .c-log-sensor {
        padding: var(--spacing-sm);
    }
    
    .risk-rate {
        font-size: 0.8rem;
        padding: var(--spacing-sm);
    }
    
    .control-line {
        flex-direction: column;
        gap: var(--spacing-xs);
    }
    
    .control-line span {
        position: relative;
    }
}

/* Tablet Devices (768px - 1024px) */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .container {
        padding: var(--spacing-sm);
        gap: var(--spacing-sm);
    }
    
    .c-charts {
        padding-left: var(--spacing-md);
    }
    
    .graph {
        max-height: 280px !important;
        min-height: 220px !important;
    }
    
    .date-controllers {
        flex-wrap: wrap;
    }
    
    .console-main {
        height: 30vh;
    }
    
    .nv-bot li a {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
    
    /* Status page tablet layout */
    .sidebar-section {
        flex: 0 0 550px;
    }
    
    .console-infoE-table,
    .consoleE-statement {
        grid-template-columns: 2.5fr 1fr 2.5fr 1.5fr 5fr 1.5fr;
        font-size: 0.75rem;
    }
}

/* Large Desktop (> 1024px) - Already handled by default styles */