html,body{
    height:100%;
}
body{
    font-family: 'Open Sans', sans-serif;
    font-size: 1em;
    margin:0;
    padding:0;
    overflow-x: hidden;
    height: 100%;
}

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: #FFFFFF;
}

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

.navbar{
    overflow: hidden;
    list-style-type: none;
    position: fixed;
    bottom:0;
    width: 100%;
    background-color: #686565;
    padding: 0;
    margin:0;
    color: #FFFFFF;

}

.brand-container{
    width: 25%;
    display: flex;
    flex-direction: row;
    position: absolute;
    right: 0;
}

.brand-container span{
    flex:1;
}

.time-container{
    padding-top: 1.5rem;
}

.header-page-container{
    display: flex;
}

.header-status-breadcrumb, .time-logo-container{
    flex:1;
}

.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{
    padding-right: 2.8rem;
    right: 0;
    position: absolute;
    width: 35%;
    height: 7%;
    line-height: 5.5rem;
}

.logo-widget img{
    /* width: 150px; */
	height: 51px;
    float:right;
}
.time-widget{
    margin-left: -1rem;
}

.main-header{
    padding-left: 26px;
}

/*
==============================================================
                      Navigation Left
==============================================================
*/
#sandwich{
    font-size: 1.5rem;
    cursor:pointer;
    width: 1.6rem;
    height: 48rem;
    line-height: 48rem;
    text-align: center;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #FFF;
    background-color: #333333;
    z-index: 1;
    vertical-align: middle;
}

.sidenav {
    height: 95.5%;
    position: fixed;
    z-index: 1000;
    width: 0;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding: 50px 0 0 0;
    color: #DDDDDD;

}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover {
    color: #f1f1f1;
    transition: all 0.3s ease-out;
}

.sidenav div span:hover {
    color: #f1f1f1;
    transition: all 0.3s ease-out;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

.sidenav div {
    padding: 0px 8px 0px 8px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    /*display: block;*/
    transition: 0.3s;
    cursor: pointer;
}

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

.nav-item{
    display: block;
}

#global-options h4{
    margin: .5rem 0 .5rem 0;
    font-weight: normal;
    font-size: 1.4rem;
	padding-left: 0.4rem;
}

.nav-disabled:hover {
    color: #818181 !important;
}

#intal-options h4{
    margin: .5rem 0 .5rem 0;
    font-weight: normal;
    font-size: 1.4rem;
	padding-left: 0.4rem;
}

.instal-nav{
    display: flex;
    flex-direction: row;
}

.insta-name{
    text-align: left!important;
    flex:4;
    font-size: 1rem;
    padding: 13px 0 0 0!important;
}

.insta-info{
    flex:1;
}

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

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

.logout{
    font-size: 1rem!important;
}

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

.nv-bot{

}

.nv-bot li{
    float: left;
}

.nv-bot li a{
    color: #FFFFFF;
}

.nv-bot li a{
    display: block;
    text-align: center;
    padding: 10px 40px;
    text-decoration: none;
    font-weight: bold;
}

.nv-bot li a:hover {
    background-color: #333333;
    transition: all 0.8s ease-out;
}


@media screen and (max-width: 1490px){
	.nv-bot li a{
		padding: 10px 30px;
	}
}

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

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

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

.main-after{
    height: 96%;
}

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

.c-big {
    flex: 2;
    /*border: 1px solid darkred;*/
}

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

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

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

.real{
    padding: 0;

}
.risk{
    padding: 0;
}

.graph{
    flex: 8;
    max-height: 300px!important;
    min-height: 228px!important;
}


.info{
    flex:1;
    display: flex;
    flex-direction: column;
    padding: 10px 0 10px 20px;
    font-weight: bold;
    font-size: 1.2rem;
}


.info div{
    flex:1;
    width: 100%;
}

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

.c-log{
    flex:1;
    padding: 5px 5px 5px 30px;
}

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

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

.console-main{
    display: flex;
    flex-direction:column;
    margin-top: 10px;
    height: 28vh;
}

.console-sensors{
    margin-top: 2.2rem;
}

.console-head{
    padding:2px 16px 4px 2px;
    background-color: #CCCCCC;
    color: #333333;
    font-weight: bold;
    text-align: center;
    height: 17px
}


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

.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: 3px 0;
    /*text-align: center;*/
}

.log-title{
    display: inline-block;
    /*margin: 0 5px;*/
    padding: 5px 0;
    text-align: center;
}

.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%;
}

.console-statement{
    font-size: 0.7rem;
    margin: 0 0 2px 0;
    background-color: #eeeeee;
}

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

.console-infoE-table{
    display: grid;
    /* grid-template-columns: repeat(5, 1fr); */
    grid-template-columns: 1fr 1fr 1fr 2fr 1fr;
    font-size: 0.7rem;
}

.console-sensors-table{
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    /* grid-template-columns: 1fr 2fr 2fr 2fr 2fr 2fr 2fr; */
    font-size: 0.7rem;
}

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

.c-small{
    flex:1;
    width: 90%;
}

.c-map{
    flex:2;
}

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

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

.control-line{
    position: relative;
    flex:1;
    display:flex;
    margin: 0px 0px 4px 0px;
}

.control-line span{
    flex: 1;
    position: absolute;
    bottom: 0;
}

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

.map{
    flex:4;
    /*border: 1px solid #111111;*/
    width: 100%;
    height: 100%;
}

.details{
    flex:1;
}

.risk-rate{
    margin: 6px 0 0 0;
    text-align: center;
}

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

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

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

.low{
    background-color: #1FABDE;
}

.ok{
    background-color: #7BC240;
}

.warning{
    background-color: #FDF300;
}

.alert{
    background-color: #FF9900;
}

.danger{
    background-color: #FF0000;
}

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

.eir{
    background-color: #AfA0A4;
}

.measure{
    font-size: 0.7rem;
    font-weight: normal;
}


.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;
}

.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: 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);
}
@-webkit-keyframes load5 {
    0%,
    100% {
        box-shadow: 0em -2.6em 0em 0em #000000, 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.5), -1.8em -1.8em 0 0em rgba(0,0,0, 0.7);
    }
    12.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.7), 1.8em -1.8em 0 0em #000000, 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.5);
    }
    25% {
        box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.5), 1.8em -1.8em 0 0em rgba(0,0,0, 0.7), 2.5em 0em 0 0em #000000, 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.2);
    }
    37.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.5), 2.5em 0em 0 0em rgba(0,0,0, 0.7), 1.75em 1.75em 0 0em #000000, 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.2);
    }
    50% {
        box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.5), 1.75em 1.75em 0 0em rgba(0,0,0, 0.7), 0em 2.5em 0 0em #000000, -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.2);
    }
    62.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.5), 0em 2.5em 0 0em rgba(0,0,0, 0.7), -1.8em 1.8em 0 0em #000000, -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.2);
    }
    75% {
        box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.5), -1.8em 1.8em 0 0em rgba(0,0,0, 0.7), -2.6em 0em 0 0em #000000, -1.8em -1.8em 0 0em rgba(0,0,0, 0.2);
    }
    87.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.5), -2.6em 0em 0 0em rgba(0,0,0, 0.7), -1.8em -1.8em 0 0em #000000;
    }
}
@keyframes load5 {
    0%,
    100% {
        box-shadow: 0em -2.6em 0em 0em #000000, 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.5), -1.8em -1.8em 0 0em rgba(0,0,0, 0.7);
    }
    12.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.7), 1.8em -1.8em 0 0em #000000, 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.5);
    }
    25% {
        box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.5), 1.8em -1.8em 0 0em rgba(0,0,0, 0.7), 2.5em 0em 0 0em #000000, 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.2);
    }
    37.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.5), 2.5em 0em 0 0em rgba(0,0,0, 0.7), 1.75em 1.75em 0 0em #000000, 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.2);
    }
    50% {
        box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.5), 1.75em 1.75em 0 0em rgba(0,0,0, 0.7), 0em 2.5em 0 0em #000000, -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.2);
    }
    62.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.5), 0em 2.5em 0 0em rgba(0,0,0, 0.7), -1.8em 1.8em 0 0em #000000, -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.2);
    }
    75% {
        box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.5), -1.8em 1.8em 0 0em rgba(0,0,0, 0.7), -2.6em 0em 0 0em #000000, -1.8em -1.8em 0 0em rgba(0,0,0, 0.2);
    }
    87.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.5), -2.6em 0em 0 0em rgba(0,0,0, 0.7), -1.8em -1.8em 0 0em #000000;
    }
}


.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;
}

.login-title{
    flex:4;
    display: flex;
    flex-direction: row;
    background: #DDDDDD;
    padding: 20px;
    width: 44rem;
}

.title-test{
    flex:3;
    text-align: center;
}

.login-title form{
    flex:1;
    padding-right: 6rem;
}

.login-title h2{
    display: inline-block;
}

.login-logo{
    flex:1;
    padding: 1rem;
}

.login-logo img{
    /* width: 450px; */
	height: 153px;
}

.form-raw{
    padding: 10px;
    width: 10vw;
}

.form-raw input{
    margin-top: 5px;
    border: none;
    border-radius: 3px;
    color: #FFF;
    background: #555555;
    width: 100%;
}

.form-raw input:focus{
    outline: none;
    color: #000;
    background: none;
}

.sign-in{
    background-color: #333333;
    color: #FFF;
    width: 100%;
    border:none;
    padding: 5px 0;
    border-radius: 3px;
    outline: none;
}

.sign-in:hover{
    color: #000;
    background-color: #bfbfbf;
    transition: all 0.5s ease-out;
}

.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-raduis: 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: 300px!important;
    min-height: 228px!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;
}

#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;
}

#userSearch {
	background-image: url('../img/searchicon.png');
	background-position: 8px 8px;
	background-repeat: no-repeat;
	font-size: 14px;
	padding: 10px 20px 10px 40px;
	border: 1px solid #ddd;
	margin-bottom: 0px;
}

.users-read{
    background-color: #7BC240 !important;
}

.users-pending{
    background-color: #FDFD96 !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;
    /* margin-top: 10px; */
    width: 100%;
    max-height: 88%;
    /* height: 35rem; */
}

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

.users-head{
    padding: 2px 0px 4px 0px;
    background-color: #CCCCCC;
    color: #333333;
    font-weight: bold;
    text-align: center;
    /* height: 17px; */
}

.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: #eeeeee;
}

.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;
}

/* 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: #FFFFFF;*/
}

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

.view-block-notification{
    display: flex;
    flex-direction: row;
    height: 90%;
    padding: 2rem 12rem 2rem 12rem;
}

.view-block{
    display: flex;
    flex-direction: row;
    height: 80%;
    padding: 5rem 12rem 5rem 12rem;
}

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

.b-notification{
    background: #98B819;
}

.b-alert{
    background: #B71101;
}

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

.b-management{
    background: #B71101;
}

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

.b-cameras{
    background: #800080;
}

.b-vision{
    background: #802060;
}

.b-downloads{
    background: #DB7103;
}

.b-training{
    background: yellow;
}

.view-main{
    flex: 9;
    /*height: 80%;*/
    margin: 5px;
    width: 100%;
    background: #ABABAB;
}


.view-sublock{
    display: flex;
    flex-direction: column;
    height: 100%;
}

.risk-index-block{
    display: flex;
    flex-direction: row;
}

.risk-index-unit{
    flex: 1;
}

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

.notification-tab-header{
    border: none;
    background: none;
    padding: 15px 30px;
    font-size: 1rem;
    outline: none;
    background: #888888;
}

.tab-active{
    background-color: #ABABAB;
}

.tab-container{
    padding: 20px;
    height: 88%;
    display: flex;
    flex-direction: column;
}

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

.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;
}

.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: 5px 10px;
}

.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;
}
.vis_modal-downImage:hover {
	opacity: 0.6;
	height: 21px;
}

.vis_modal-ptz {
	height: 20px;
	/* filter: invert(100%); */
	margin-left: 10px;
	background-color: #FFF;
	border-radius: 4px;
	padding: 2px;
}
.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;
}


/*
=========================================================
                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%;
    /* height: 500px; */
    display: flex;
    /* flex-direction: row; */
}

.cameras-row{
    /* flex: 1; */
    background: #CCCCCC;
    padding: 8px 8px 8px 8px;
}

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

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

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

/*.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;
}

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

.management-row-2{
    flex: 2;
    display: flex;
    flex-direction: row;

    margin: 10px 0px 5px 0px;
    /* padding: 20px 40px; */
    /*max-height: 150px;*/
}

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

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

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

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

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



.activation-block{
    flex: 4;
    background: #AAAAAA;
    width: 100%;
    height: 100%;
    margin: 0 5px 5px 0;
    display: flex;
    flex-direction: row;
}

.block-handler{
    flex: 6;
    background: #DDDDDD;
    display: flex;
    flex-direction: row;
}

.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;
}

.activation-title button{
    flex: 1;
}

#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: #565656;
    text-align: center;
    padding: 20px 0;
    height: 100%;
    line-height: 50%;
    display: flex;
    flex-direction: column;
}

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

.status-off{
    color: #FFFFFF;
}

.status-on{
    background: #80BF42;
}

.status-training{
    background: #1FABDE;
}

.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;
}

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

#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, .btn-container-activate button{
    flex:1;
}

.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;
}


.send-row-1{
    flex: 5;
    background: #CCCCCC;
    margin: 0px 5px 5px 5px;
    padding: 20px 40px;
}


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


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

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

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


.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-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: 5px 10px;
}



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

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

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

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

.downloads-row{
    flex: 1;
    background: #CCCCCC;
    padding: 20px 40px 40px 40px;
}

.downloads-row h3{
    margin: 0;
}

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

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

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

/*.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;
}

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

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

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

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

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

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

.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;*/
}





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



.crow{
	overflow: auto;
}

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

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

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

.ccolumnF {
  float: right;
  width: 25%;
}
.ccolumnM {
  float: left;
  width: 75%;
}

/* 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 #7BC240;
  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;
}

/* 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%;
	}
	
	#camerasOUT, #camerasIN {
    width: 100%;
    box-sizing: border-box;
}
}

@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: 93%;
    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;
    }

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

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

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

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

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

    .send-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;
    }

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

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

    .btn-block-send{
        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;
    }

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

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

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

    .send-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;
    }

    .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;
    }

    /* 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;
    }

    .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: 5rem 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;
    }

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

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

    .btn-block-send{
        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;
    }

    .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;
    }

    .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;
    }

    .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;
    }

    /* 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;
    }

    .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;
    }

    /* Maintenance */

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

    .send-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;
    }


    #sms_body, #email{
        height: 3rem;
    }

    .alert-message-row{
        /*margin: .3rem 0!important;*/
    }
	
    .send-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;
    }

    .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;
    }

    .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;
    }

    .alert-row-3 div{
        top: 26%;
    }
	
	.management-row-3 div{
        top: 26%;
    }

    .send-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;
    }

    .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;
    }

    /* 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;
    }

    .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;
    }

    .alert-row-3 div{
        top: 26%;
    }
	
	.management-row-3 div{
        top: 26%;
    }

    .send-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;
    }

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

    .send-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;
    }

    /* 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;
    }

    .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;
    }

    /* Maintenance */



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

    .send-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;
    }

    .time-widget{
        margin-left: 0;
    }

    .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;
    }

    .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;
    }

    .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;
    }

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

    .alert-option-title h3{
        font-size: .7rem;
    }

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

    .btn-block-send 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;
    }

    /* 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;
    }

    .login-title{
        flex-direction: column;
    }

    .login-title form{
        padding: 0 40%;
    }

    .login-logo{
        padding: 1rem 40%;
    }

    .login-logo img {
		/* width: 225px; */
		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;
    }

    .time-widget{
        margin-left: 0;
    }

    .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;
    }

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

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

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

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

    .alert-message-row input[type=text]{
        margin-left: .8rem;
    }

    .send-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;
    }

    .login-title{
        flex-direction: column;
    }

    .login-title form{
        padding: 0 40%;
    }

    .login-logo{
        padding: 1rem 40%;
    }

    .login-logo img {
		/* width: 225px; */
		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;
    }

    .time-widget{
        margin-left: 0;
    }

    .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;
        }

        .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;
    }

    .alert-row-3{
        padding: .5rem 0 2rem 0;
    }
	
	.management-row-3{
        padding: .5rem 0 2rem 0;
    }
	
	.send-row-3{
        padding: .5rem 0 2rem 0;
    }

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

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

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

    .btn-block-send {
        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;
    }

    #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;
    }

    .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;
    }

    .time-widget{
        margin-left: 0;
    }

    .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;
    }

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

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

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

    .btn-block-send{
        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;
    }

    .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;
    }

    .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;
    }

    .alert-message-row input, .alert-message-row textarea{
        max-width: 10rem!important;
    }

    .send-message-row input, .send-message-row textarea{
        max-width: 10rem!important;
    }


    .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;
    }

    .login-title{
        flex-direction: column;
    }

    .login-title form{
        padding: 0 39%;
    }

    .login-logo{
        padding: 1rem 40%;
    }

    .form-raw input{
        width: 40vw;
    }

    .sign-in{
        width: 40vw;
    }

    .login-logo img {
		/* width: 225px; */
		height: 77px;
    }

    /* 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;
    }

    .time-widget{
        margin-left: 0;
    }

    .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;
        }

        .alert-row-1 {
            padding: 0!important;
        }

		.management-row-2{
            padding: 0!important;
		}

        .alert-message-row{
            /*flex-direction: column;*/
        }

        .send-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;
    }

    .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;
    }

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

    .btn-block-send{
        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;
    }

    .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%;
    }

    .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;
        }
    }

    .block-handler{
        display: none;
    }

    .activation-block{
        background: #AAAAAA;
        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;
    }

    /* 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;
    }


}