/*! based on HTML5 Boilerplate v5.0 | MIT License | http://h5bp.com/ */

/**
 *  main.css
 *
 */

html body * {
    text-underline-position:under;
}


body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}


.main-container {
    flex: 1;
    margin-bottom: 20px;
}

html {
    color: #051f34;
    font-size: 1em;
    line-height: 1.3;
}

::-moz-selection {
    color: #f4f5f5!important;
    background: #051f34!important;
    text-shadow: none;
}

::selection {
    color: #f4f5f5!important;
    background: #051f34!important;
    text-shadow: none;
}

header{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*fieldset {*/
    /*border: 0;*/
    /*margin: 0;*/
    /*padding: 0;*/
/*}*/

textarea {
    resize: vertical;
}

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}


/* ===== Initializr Styles ==================================================
   Author: Jonathan Verrecchia - verekia.com/initializr/responsive-template
   ========================================================================== */

body {
    font: 16px/26px "Trebuchet MS"; /* Helvetica, Helvetica Neue, Arial;*/
}



.wrapper {


    margin: 0 5%;
    position: relative;
}

.widemap .main.wrapper{
    width:100%;
    padding:0;
    margin: 0;
}
.header-container {
    border-bottom: 10px solid #add8e6;
}


.footer-container,
.main aside {
    border-top: 10px solid #add8e6;
}

.header-container,
.footer-container,
.main aside {
    background: #027495;
}



.title, .title a,.title a:visited {
    display: inline-block;
    color: #f4f5f5;
}



nav{
    display: inline-block;;

}


/* ==============
    MOBILE: Menu
   ============== */

nav ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: right;
}



nav ul li a {
    height: 66px;
}

nav ul li {
    margin-left: 10px;
}

a {
    transition: all .5s ease-out;
    transition-property: color, background-color;
}

nav li{
    color: #fff;
    background: #add8e6;
}

nav a, nav a:visited {
    display: inline-block;
    padding: 15px 0;

    text-align: center;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.3em;


}

h2 a, h3 a{
    text-decoration: none;
}
h2 a:hover, h3 a:hover{
    text-decoration: underline;
}

.shadow3d, nav a, .title{
    text-shadow:   0 1px 0 hsl(174,5%,80%),
    1px 2px 0 hsla(174,5%,75%,1),
    2px 3px 0 hsla(174,5%,70%,.9),
    3px 4px 0 hsla(174,5%,66%,.6),
    4px 5px 0 hsla(174,5%,64%,.5),
    5px 6px 0 hsla(174,5%,62%,.4),
    6px 7px 0 hsla(174,5%,61%,.2);
    /*
    7px 8px 0 hsla(174,5%,60%,.1);

       0 0 5px rgba(0,0,0,.05),
       0 1px 3px rgba(0,0,0,.2),
       0 3px 5px rgba(0,0,0,.2)

       ,
       0 5px 10px rgba(0,0,0,.2),
       0 10px 10px rgba(0,0,0,.2),
       0 20px 20px rgba(0,0,0,.1);
    */

}

.lightbg .shadow3d,
.lightbg h1,
.lightbg h2,
.lightbg h3,
.lightbg h4,
.lightbg h5
{
    text-shadow:
    0 1px 0 hsla(174,5%,61%,1),
    1px 2px 0 hsla(174,5%,62%,.9),
    2px 3px 0 hsla(174,5%,64%,.7),
    3px 4px 1px hsla(174,5%,66%,.7),
    4px 5px 3px hsla(174,5%,70%,.6),
    5px 6px 4px hsla(174,5%,75%,.5),
    6px 7px 5px hsla(174,5%,80%,.4);
}

/*.any{*/
    /*color: #f4f5f5;*/
    /*color: #bad6db;*/
    /*color: #01a9c1;*/
    /*color: #027495;*/
    /*color: #051f34;*/
/*}*/


nav a{
    -webkit-transition-timing-function: ease-out;
    -moz-transition-timing-function: ease-out;
    -ms-transition-timing-function: ease-out;
    -o-transition-timing-function: ease-out;
    transition-timing-function: ease-out;

}
nav a img{
    padding: 5px;
}
nav a:hover,
nav a:active {
    color: white;
    background: transparent;
}

.latest-single-rtu , .latest-single-rtu td,.latest-single-rtu th{
    text-align: center;
    border: 2px solid lightblue;
    padding: 2px 10px;

}

table.exportable{
    position: relative;
    margin-top: 60px;
}
.table-export{
    color: green;
    font-weight: bold;
    text-decoration: none;
    position: absolute;
    display: inline;
    top: -44px;
    left: 16px;

}


.table-export.loading:after{
    content: " loading ";
    box-sizing: border-box;
    position: absolute;
    right: -100%;
    height: 20px;
    border-radius: 50%;
    border: 0px solid #ccc;
    border-top-color: #333;
    animation: spinner .7s ease infinite;
    transform-origin: 50% 100% 0;
}

@keyframes spinner {
    /*to {transform: rotate(360deg);}*/
    0%, 100%{ transform: rotate(-11deg);}
    50%{ transform: rotate(11deg); }
}


.op0{
    opacity: 0;
    transition: opacity 0.7s ease;
}

.op1{
    opacity: 1;
    transition: opacity 0.7s ease;
}


/* ==============
    sens table
   ============== */
table.senstable {


}
.senstable th  {
    line-height: 1.3;
}

h2 a,
h3 a,
article.lightbg h2 a,article.lightbg h2{
    color:#000;
}

h2 a:hover,
h3 a:hover,
article.lightbg h2 a:hover,
.blacktowhitea:hover
{
    color:#fff;
    text-shadow: 0 1px 4px hsla(174, 5%, 51%, 1),
         1px 2px 3px hsla(174, 5%, 42%, .9),
         2px 3px 4px hsla(174, 5%, 34%, .7),
         3px 4px 1px hsla(174, 5%, 36%, .7),
         4px 5px 3px hsla(174, 5%, 40%, .6),
         5px 6px 4px hsla(174, 5%, 25%, .5),
         6px 7px 5px hsla(174, 5%, 10%, .4);
}

.senstable th a, .blacktowhitea{
    color: black;
    text-decoration: none ;
    font-size: 1.1em;
    line-height: 1.3;
    font-weight: bold;
    display: inline-block;
    padding: 15px;
    padding-bottom: 5px;
}

.senstable th:hover a,
nav a:hover,
.blacktowhitea:hover
{
    text-decoration: underline;

}

.blacktowhitea-hoverwhite:hover,
.senstable th:hover a{
    color: white;
}



.senstable thead tr{
    background:lightblue;
}

.senstable th time{
    color:black;
    text-shadow:
            0 1px 0 hsla(174,5%,61%,1),
            1px 2px 0 hsla(174,5%,62%,.9),
            2px 3px 0 hsla(174,5%,64%,.7),
            3px 4px 1px hsla(174,5%,66%,.7),
            4px 5px 3px hsla(174,5%,70%,.6),
            5px 6px 4px hsla(174,5%,75%,.5),
            6px 7px 5px hsla(174,5%,80%,.4);
}

th,td{
    word-wrap: break-word;
}

.senstable th{
    text-align: center;

    color: white;
    border: 4px double white;
    text-shadow:
            0 1px 0 hsla(174,5%,61%,1),
            1px 2px 0 hsla(174,5%,62%,.9),
            2px 3px 0 hsla(174,5%,64%,.7),
            3px 4px 1px hsla(174,5%,66%,.7),
            4px 5px 3px hsla(174,5%,70%,.6),
            5px 6px 4px hsla(174,5%,75%,.5),
            6px 7px 5px hsla(174,5%,80%,.4);
    padding: 2px 10px;

    padding-bottom: 7px;
}
.senstable td{
    text-align: center;
    border: 2px solid lightblue;
    padding: 2px 10px;
}
.senstable td:first-child {
    text-align: left;
    padding-left: 6px;
    padding-right: 7px;
}



td .units {
    
    padding-left: 5px;
    padding-right: 5px;
}


.main{






}
article:first-of-type{
  /*  margin-left: 0px; */


}
article {
    display: inline-block;
    margin: 10px;
    margin-bottom: 40px;
    flex: 1 1;

}

.single-rtu article{
    display: block;
}

article.block{
    display:block;
    margin: 0px;
}

.error.error-box{

}

.error-container{

}



.main {
    margin: 10px auto;
}

.main article h1 {
    font-size: 2em;
    font-weight: bold;
}

.main aside {
    color: white;
    padding: 0px 5% 10px;
}

.main-container{
overflow: auto;

}
.footer-container{
    -webkit-box-shadow:0 -5px 10px #aaa,  inset 0 5px 15px  hsla(193, 97%, 20%,.7);

    box-shadow: 0 -5px 10px #aaa,  inset 0 5px 15px  hsla(193, 97%, 20%,.7);

;
}

.footer-container footer a:visited,
.footer-container footer a{
    color: white;
    text-decoration: none;
}
.footer-container footer a:hover{
    text-decoration: underline;
}
.footer-container footer {
    color: white;
    padding: 20px 0;
}

.footer-container{
    /*
    bottom: 0px;
    left:0; right: 0;
    */
    flex: 0;
}

/* ===============
    ALL: IE Fixes
   =============== */

.ie7 .title {
    padding-top: 20px;
}


footer H3 {
    margin: 0px;
}

body.nofooter .footer-container {
    display:none;
}



body.widemap{
    overflow: hidden;
}

body.widemap .map-container{
    /*width:100%;*/
    /*height: 100%;*/
    /*display: table;*/
    margin: -10px -10px -10px -10px;
}


body.widemap .map {
    width:100vw;
    height: 100vw;
    display:table-cell;

}

body.widemap .map-container, body.widemap .map{
    margin: 0px;
    padding: 0px;
}

h1.title{
    margin: 3px 0px;
    padding: 12px 0px;
    margin-top: -11px;
    margin-left:30px;
}

h2{
    margin-left: 30px;
    margin-top: 10px;
    margin-bottom: 5px;
}

/* ==========================================================================
   Media Queries
   ========================================================================== */


@media only screen and (max-width: 481px) {
    .senstable td {
        padding: 1px;
    }

    article, #main, .main, .wrapper {
        margin: 0 auto;
        padding: 0;
    }

    /*nav a[href="map/"]{*/
    /*font-size: 0px;*/
    /*}*/
     nav a[href="map/"] img {
         display:none;
    }



    body nav a {
        padding: 0px!important;
        margin: 0px!important;
        height: auto!important;
        line-height: 1.3em;
        padding: 0px !important;
    }

}

@media only screen and (max-width: 500px){
    .main-container .main.wrapper{

    }
    article{
        margin: 0;
    }
    .main .chart-container{
        width: calc(100% - 2px);

        margin-left:0;
        margin-right: 0;

    }
    table,tr,td,.latest-single-rtu, .latest-single-rtu td {
        padding: 0;
        margin:0;
    }
    thead th{
        padding: 4px;
        line-height: initial;
    }
    .latest-single-rtu, .latest-single-rtu td {
        text-align: center;
        border: 1px solid lightblue;

    }
    h2,h3,h4{
        text-align: center;
    }

}

@media only screen and (max-width: 600px){
    html body .updateable-form {
        min-width: auto;
        padding: 0;
    }
    body .updateable-form input, body .updateable-form label{
        width: 24%;
    }

}

@media only screen and (max-width: 799px) {
    header nav ul li,
    header nav ul li a {
        width: 100%;
    }
    header nav ul li a
    {
        padding: 2px 9px 7px 7px;
        margin: 0;
        height: auto;
        line-height: 1.3em;
    }

    nav a[href="map/"] img {
        display: none;
    }

}

@media only screen and (min-width: 481px) {

/* ====================
    INTERMEDIATE: Menu
   ==================== */

    nav a {
        line-height: 66px;
        margin: 0px;



        padding: 2px 9px 7px 7px;

        margin-bottom: 0px;
    }

    nav li:first-child a {
        margin-left: 0;
    }

    nav li:last-child a {
        margin-right: 0;
    }



/* ========================
    INTERMEDIATE: IE Fixes
   ======================== */

    nav ul li {
        display: inline-block;
    }

    .oldie nav a {
        margin: 0 0.7%;
    }
}




@media only screen and (min-width: 768px) {

/* ====================
    WIDE: CSS3 Effects
   ==================== */

    .senstable td {
        padding: 2px;
    }

    .header-container{

        -webkit-box-shadow: 0 5px 10px #aaa;

                box-shadow: 0 5px 10px #aaa;
    }
    .main aside {
        -webkit-box-shadow:0 -5px 10px #aaa,  inset 0 5px 15px  hsla(193, 97%, 20%,.7);

        box-shadow: 0 -5px 10px #aaa,  inset 0 5px 15px  hsla(193, 97%, 20%,.7);
    }
/* ============
    WIDE: Menu
   ============ */

    .title {

    }

    nav {

        min-width: 38%;
    }



/* ============
    WIDE: Main
   ============ */

    .wide .main article {
        float: left;
        width: 90%;
    }

    .main aside {
        float: right;

    }
}

@media only screen and (min-width: 1140px) {

/* ===============
    Maximal Width
   =============== */

    .main.wrapper{

    }

    .wrapper {
       /* width: 1137px;*/
        margin: 0 auto;
    }





}



body.widemap nav a img{
    display: none;
}
.widemap nav ul li a{
    height: 1.5em;
    line-height: 1.5em;
}

.widemap .header-container{
    border: 0;
    box-shadow: none;
}
.widemap  h1.title{
    font-size: 1.5em;
    margin: 0;
    padding:0;
    margin-top: -12px;
}

.map-container{
    position: relative;
    background: white;
}

.map{
    background: transparent;
}

/*noinspection ALL*/
.map-container .loading{
    position: fixed;
    display: inline-block;;
    top: 50%;
    left: 50%;
    transform: -webkit-translate(-50%, -50%);
    transform: -moz-translate(-50%, -50%);
    transform: -ms-translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-size: 6em;
    font-weight: bold;
    line-height: 1;
}


/*noinspection ALL*/
.cssload-loader{
    display: inline-block;
    width: 200px;
    line-height: 1.6;

    font-size: 1.6em;
    height: 66px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: -webkit-translate(-50%, -50%);
    transform: -moz-translate(-50%, -50%);
    transform: -ms-translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: #eee;
}
/*noinspection ALL*/
.cssload-loader:before{

    content: '\0000a0';
    font-size: 1.6em;
    height: 66px;
    display: inline-block;
    background-color: black;
    position: fixed;
    top: 50%;
    left: 0px;
    transform: -webkit-translate(-1%, -50%);
    transform: -moz-translate(-1%, -50%);
    transform: -ms-translate(-1%, -50%);
    transform: translate(-1%, -50%);
    width: 0px;
    z-index: 0;
    opacity: 1;
    animation: cssload-loader 5s ease-out infinite;
    -o-animation: cssload-loader 5s ease-out infinite;
    -ms-animation: cssload-loader 5s ease-out infinite;
    -webkit-animation: cssload-loader 5s ease-out infinite;
    -moz-animation: cssload-loader 5s ease-out infinite;
}
/*noinspection ALL*/
.cssload-loader:after{
    content: " Loading";
    display: inline-block;
    /*text-transform: uppercase;*/
    color: #fff;
    font-family:	Lato,"Helvetica Neue" ;
    font-weight: bold;
    font-size: 1.6em;
    height: 66px;
    position: fixed;
    width: 100%;
    transform-origin: 100% 0;
    transform: -webkit-translate(-48%, -50%);
    transform: -moz-translate(-48%, -50%);
    transform: -ms-translate(-48%, -50%);
    transform: translate(-48%, -50%);
    left: 50%;
    top: 50%;
}



@keyframes cssload-loader{
    0%{width: 0px;}
    70%{width: 100%; opacity: 1;}
    90%{opacity: 0; width: 100%;}
    100%{opacity: 0;width: 0px;}
}

@-o-keyframes cssload-loader{
    0%{width: 0px;}
    70%{width: 100%; opacity: 1;}
    90%{opacity: 0; width: 100%;}
    100%{opacity: 0;width: 0px;}
}

@-ms-keyframes cssload-loader{
    0%{width: 0px;}
    70%{width: 100%; opacity: 1;}
    90%{opacity: 0; width: 100%;}
    100%{opacity: 0;width: 0px;}
}

@-webkit-keyframes cssload-loader{
    0%{width: 0px;}
    70%{width: 100%; opacity: 1;}
    90%{opacity: 0; width: 100%;}
    100%{opacity: 0;width: 0px;}
}

@-moz-keyframes cssload-loader{
    0%{width: 0px;}
    70%{width: 100%; opacity: 1;}
    90%{opacity: 0; width: 100%;}
    100%{opacity: 0;width: 0px;}
}
/* end loader */





body .map div{
    font-family: sans-serif;
}

.map-container{
    margin: 20px 0;
}


/* ==========================================================================
   Helper classes
   ========================================================================== */

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

.align-right{
    text-align: right;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}


.latest-single-rtu tr td{
    position: relative;
    padding: 3px 5px;

}

.latest-single-rtu tr:hover > td,
.latest-single-rtu tr.active> td{
    background: lightblue;
    color: white;
    text-shadow:0 0 3px black, 0 0 2px black, 0 0 1px black;
    /*font-size: 19px;*/

    /*border-width: 1px 0px 1px 0px;*/
}
.latest-single-rtu tr > td:first-child::before{
    background: url("../img/pencil.png") hsl(194.7, 73.1%, 86.9%) center no-repeat no-repeat ;
    border-radius: 6px;
}
.latest-single-rtu tr:hover > td:first-child::before,
.latest-single-rtu tr.active> td:first-child::before {
    content: ' ';
    display: inline-block;
    position: absolute;
    left: -44px;
    top: -2px;
    width: 35px;
    height: 35px;
    background: url("../img/pencil.png") hsl(194.7, 73.1%, 86.9%) center no-repeat no-repeat ;
    color: white;
    line-height: 34px;
    padding: 0;
    font-size: 28px;
    font-weight: bold;
    border: 5px outset lightblue;

    text-shadow:
            0px 0px 4px rgba(0,0,0,1),
            2px 2px 3px rgba(0, 0, 0, 0.66);

    vertical-align: middle;
}

.latest-single-rtu tr.clickdown:hover > td:first-child::before,
.latest-single-rtu tr.clickdown.active> td:first-child::before {
    border-style: inset;
}

@media only screen and (max-width: 800px) {
    .latest-single-rtu tr:hover > td:first-child::before,
    .latest-single-rtu tr.active> td:first-child::before{
        top: -46px;
        left: 50%;
        margin-left: -35px;
        width: 60px;
    }
}

.tableexport-caption button{
    background: hsl(192.3, 100%, 91.4%);
    border: 3px outset lightblue;
    margin: 4px 6px 4px 6px;
}

.tableexport-caption{
    text-align: right;
    display: inline;
    position: absolute;
    left: 16px;
    top: -47px;
}

.disabled{
    pointer-events: none!important;
}
.disabled,[disabled=disabled]{
    cursor: not-allowed!important;

}
.tableexport-caption button.disabled{
    background-color: #027495;
    border-style: inset;
    color: white;
}

.chart-container{
    border: 1px solid #add8e6;
    margin-bottom: 60px;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
}


/*
 * Chrome hover render bug?
 * https://github.com/highcharts/highcharts/issues/7662#issuecomment-368862119
 */
.highcharts-series path {
    /*noinspection CssInvalidPropertyValue*/
    stroke-linecap: initial;
}

.all.range-button{

}

.highcharts-tooltip-box {
    stroke-width: 1px;
    fill: white;
    fill-opacity: 0.95;
}

.highcharts-tooltip-box .highcharts-label-box {
    fill: white;
    fill-opacity: 0.95;
}


.updateable-form{
    min-width:430px;
    padding: 10px;


    display: flex;
    flex-wrap: wrap;
    flex-grow: 1;
    text-align: center;
}


article > .updateable-form {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}


.updateable-form input,.updateable-form label{
    flex-grow: 1;
    width: 27%;
    margin: 5px;
    padding: 5px;
    /*height: 70px;*/
}

.updateable-form .btn-bot{
    margin-top:20px;
}

.btn,
.btn-bot{

    border-radius: 6px;
    -webkit-border-radius: 6px;

    -ms-border-radius: 6px;
    border-radius: 6px;
    text-shadow: 0 1px 1px rgba(0,0,0,1.50);
    color: white;
}

.btn{
    white-space: nowrap;
    transition-duration: 0.10s;

}

.btn:active{
    transform: translate(1px,1px);
    filter: brightness(1.3);
    text-shadow: 0 2px 2px rgba(0,0,0,1.50);

}

.btn-green,
.btn-bot.submit{
    border-color: #72a114;
    background: #72a114;
}
.btn-green[disabled],
.btn-bot.submit[disabled] {
    border-color: hsl(80, 11%, 45%);
    background: hsl(80, 11%, 45%);
}

 .btn-bot.cancel{
    border-color: hsl(344, 87.9%, 44.5%);
    background: hsl(344, 87.9%, 44.5%);


}

.btn-red {
    border-color: #EEEEEE;
    background: #F01414;
}


body .alertify .ajs-commands button.ajs-close{
    background-color: hsl(344, 87.9%, 44.5%);
    background-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxEAAAsRAX9kX5EAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMjHxIGmVAAAAP0lEQVQoU5XOMQ7AQAgDQf7/6UQiI59O0GQ61g31y4Mz5NPdTVpb0wbzzRbyZA/5ZhvMH61Ja0t0hry/sKt6Aajrn2EFa6qdAAAAAElFTkSuQmCC');
    background-repeat: no-repeat;
    border-color: rgb(213, 14, 67);


}


input.number{
    border-color: lightgray;
    -webkit-border-radius: 4px;

    border-radius: 4px;
    outline: none;
}
input.number:active,input.number:hover,input.number:focus{
    border: 2px solid black;
}


aside.picbox{
    display: inline-block;
}


#changeloginform{
    margin-top: 40px;
}
#changeloginform .toggleme{
    border: 1px outset #9f9f9f;
    padding: 0px 10px;
}


#changeloginform .toggleme *{
    cursor: pointer!important;
    pointer-events: auto;
}
.toggleme input[type=checkbox]{
    border-color: black;
    box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.350);
}

#changeloginform input.disabledbydef{
    padding-left:6px;
    padding-right: 6px;
}

@media screen and (max-width: 520px) {
    #changeloginform input.disabledbydef{
        display: block;
        width: 160px;
        padding-top:10px;
        padding-bottom: 10px;
        margin: 20px;
    }
    h1.title{
        margin: 3px 0px;
        padding: 12px 0px;
        margin-top: -11px;
        margin-left: 10px;

    }

    h2{
        margin :5px;
    }
}


button[disabled],input[disabled]{
    cursor:not-allowed;
}


.unselectable{

}

.first-page .main-container{
    display: flex;
    margin-left: auto;
    margin-right: auto;
    align-items: flex-start;
}
.first-page .main-container > *{
    flex:auto;
}

.first-page .picbox{
    margin-top: 25px;
}

.first-page .picbox .imgwrap{
    max-width: 600px;
    margin: 10px;
}
.picbox .imgwrap img{
    max-width: 600px;
}

.cams-page .imgwrap img{
    cursor:pointer;
}

.picbox{
    text-align: center;
    /*border: 2px solid lightblue;*/
}
.picbox >a {
    display: block;

}


.cams-page .cams-top{
    display: flex;
    padding: 25px 0;
}
.cams-page .cams-top .imgwrap{
    display: inline-block;
    flex: 1;
    text-align: center;
    overflow:visible;

}
.cams-page .cams-top .imgwrap img {
    width: 45vw;
    min-height: 25.312vw;


}

.imgwrap img{
    box-shadow: 2px 2px 10px rgba(0,0,0,0.8);
    background-color: rgba(0,0,0,0.3);
}


.blackcolor{
    color: black;

}

.cams-page{

}


.pictable{
    margin-left: 5px;
}

.piclink{
    display: inline-block;
    float: left;
    clear: both;
    padding: 3px;
    border: 1px solid lightblue;
    transition-duration:  0s;
}
.piclink:hover{
    background: lightblue;
}

.piclink.active,
.blackcolor.piclink:hover {

    color: white;
    background: #027495;
    border-color: #027495;
}



a.blackcolor{
    text-decoration: none;
}

a.blackcolor:hover{
    text-decoration: underline;
}

.jquery-datepick-fromto{
    width: 90px;
    text-align: center;
}

.from-to-form-date{
    margin-bottom: 20px;
    margin-left: 4px;
    display: inline-block;
    margin-right: 30px;
}

.datepick-popup *{
    line-height: 1.5em;
}

#fromdate{
    margin-right: 10px;
}

.force-disable-transition *{
    transition-duration: 0s!important;
}

.downloadpics{
    margin-bottom: 20px;
}

.dltracker{
    display: inline-block;
    padding-left: 18px;
    padding-right: 10px;
    border: 1px solid rgb(114, 161, 20);
    background: hsl(80, 55%, 53%);
    color: white;
    left: -7px;
    /*top: -2px;*/
    z-index: -1;
    position: relative;
    text-shadow:
            0 1px 1px rgba(0,0,0,0.7),
            1px 0px 5px rgba(0,0,0,0.7);
    font-weight: bold;
    line-height: 20px;
}

.cam-top-titles {
    display: flex;
}
.cam-top-titles div {
    flex: 1;
    text-align: center;
}

.cam-top-titles h3{
    display: inline-block;
    margin: 0;
}

.display-flex{
    display:flex;
}

.display-inline-block{
    display:inline-block;
}

.block{
    display: block;
}

.margin0{
    margin:0;
}

.flex-1{
    flex:1;
}

.flex-2{
    flex:2;
}

.flex-3{
    flex:3;
}

.flex-1-center{
    flex: 1;
    text-align: center;
}

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

.align-items-center{
    align-items:center;
}

.bold{
    font-weight: bold;
}

.bolder{
    font-weight: 900;
}

.italic{
    font-style: italic;
    opacity: 0.88;
}

.invertedbg{
    background: #027495;
    color: white;
}

.after-arrow,
.before-arrow{
    z-index: 9999;

    cursor:pointer;
    -moz-user-select: none;
    user-select: none;

    top: 50%;
    display: block;
    position: absolute;
    background: rgba(0,0,0,.5);
    color: white;

    padding: 14px;
    font-size: 2em;
    line-height: 1em;
    margin-top: -12px;
}

.after-arrow
{
    right: 0px;
    border-radius: 5px 0 0 5px;
}
.before-arrow
{
    left: 0px;
    border-radius: 0px 5px 5px 0px;
}

.after-arrow:hover,
.before-arrow:hover{
    filter:invert(1);
}


.lity-close:hover{
    filter:invert(1);
    background:rgba(0,0,0,0.5)!important;
    border-radius: 5px;
    padding:24px;

}

.control-is-not-ready .show-control,
.hide-control-interface .show-control
{
    display: none!important;
}


.flex-wrap{
    flex-wrap:wrap;
}

.flex-child-50{
    max-width:50vw;
}

.flex-row{
    flex-direction: row;
}

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

/* 640x480 */


.move-control-wrap{
    max-width:640px;
    margin: auto;
}

.videowrap{


    flex: 1;
    text-align: center;
    overflow: visible;
    display:block;
    width:640px;
    height:auto;
    max-width: 100vw;


    position: relative;
    margin: auto auto 10px;
}

.videowrap > iframe, .videowrap > img {

    display: block;;
    width: 100%;

    max-height: 100vh;

    cursor: pointer;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.8);

}
@media   (max-width: 1280px) or  (max-height: 900px)   {
    .videowrap > iframe, .videowrap > img {
        width: 640px;
        margin: 0;
        padding: 0;
    }
}

.move-control-wrap .btn{
    margin: 10px;
    font-size: 30px;
    padding: 5px;
    text-align: center;
    line-height: 1;
}

.move-control-wrap .btn,.move-control-wrap .btn:active,.move-control-wrap img{
    outline: 0;
    user-select: none;
    -webkit-user-drag: none;
    -moz-user-drag: none;
    user-drag: none;
}

.stopimg{

}

.move-control-wrap .arrow-up{
    margin: 0 -5px 0 -10px;
}
.move-control-wrap .arrow-down{
    margin: 0 -5px 0 -10px;
}

.move-control-wrap{
    overflow: hidden;
}

.move-control-wrap .btn.activeOn{
    background: #ee9200;
    border-color:#ee9200;
}

.move-control-wrap .btn.sendOn,
.move-control-wrap .btn.sendStop{
    background: #EDEE17;
    border-color:#EDEE17;
}


.move-control progress{
    height: 32px;
    width: 400px;
    margin: auto;

}

.progress-usilie-wrap{
    margin-bottom: 25px;
}

@media screen and (max-width: 1260px) {

     .column-master{
        flex-direction: column;
    }
    /* .column-master *{
        flex-direction: initial;
    }*/
     .move-control{
         flex-direction: column;
     }

    .btn-ctrl-up{
        margin-left: auto;
    }
    .btn-ctrl-down{
        margin-right: auto;
    }
    .move-control-wrap .btn{
        display: inline-block;
    }

    .button-master{
        flex-direction: row;
    }
    body .progress-usilie-wrap{
        margin-bottom: 0px;
    }
}

@media screen and (max-width: 505px) {
    body .move-control-wrap .btn{
        margin: 4px;
        font-size: 18px;
        padding: 4px;
    }
}


.progress-wrap{

}

.progress-wrap label{

    /* https://css-tricks.com/adding-stroke-to-web-text/ */
    position: relative;
    bottom: -29.5px;
    z-index: 99;


    color: white;
    text-shadow:
            1px 1px 1px #000,
            -1px -1px 1px #000,
            1px -1px 1px #000,
            -1px 1px 1px #000,
            1px 1px 1px #000;
}

.progress-wrap label span{
    font-family: monospace;
}







/* Firefox */
progress.progress-batt::-moz-progress-bar,
progress.progress-usilie::-moz-progress-bar {
    background: rgb(114,161,20);
    background: linear-gradient(180deg, rgb(114,161,20) 37%, rgb(79, 117, 18) 94%);
}

/* Webkit */
progress{
    -webkit-appearance: none;

    background: rgb(250,250,250);
    -moz-box-shadow:    inset 0 0 10px rgba(0, 0, 0,0.5);
    -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0,0.5);
    box-shadow:         inset 0 0 10px rgba(0, 0, 0,0.5);

    border-radius: 5px;
    border: 1px inset transparent;
}


progress.progress-batt::-webkit-progress-value ,
progress.progress-usilie::-webkit-progress-value {
    background: rgb(114,161,20);
    background: linear-gradient(180deg, rgb(114,161,20) 37%, rgb(79, 117, 18) 94%);

}

progress.progress-batt::-webkit-progress-bar,
progress.progress-usilie::-webkit-progress-bar {
    background: rgb(250,250,250);
    -moz-box-shadow:    inset 0 0 10px rgba(0, 0, 0,0.5);
    -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0,0.5);
    box-shadow:         inset 0 0 10px rgba(0, 0, 0,0.5);
}


h3{
    margin-top:0px;
    margin-bottom: 10px;
}