@charset "utf-8";

* {
margin: 0;
padding: 0;
font-size: 1em;
font-family: 'Trebuchet MS', Verdana, 'Lucida Grande', Arial, Sans-Serif;
outline: none;
box-sizing: border-box;
}

noscript {
font-size: 0.8em;
color: #008F3B;
}
noscript div {
margin: 10px;
padding: 5px 10px;
background-color: #E8F7EE;
}
noscript a {color: #008F3B;}
noscript a:hover {
text-decoration: none;
color: BLACK;
}

body {background: #F5F5F5;}
.back {background: #F5F5F5 url(back.png) repeat-x scroll 0 42px;}
.mask {
z-index: 5;
opacity: 0.6;
filter: alpha(opacity = 60);
background-color: black;
}

#boxMsg {
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: WHITE;
z-index: 100;
text-align: center;
font-size: 0.9em;
}
#boxMsgTxt {
width: 500px;
margin: 0 auto;
border: 3px solid #2070CF;
padding: 10px 20px;
background-color: #D8E6F7;
position: relative;
}
#boxMsgProgress {
width: 0;
position: absolute;
bottom: 20px;
left: 0;
height: 40px;
background-color: #D8E6F7;
}

#logininfo {
color: #008F3B;
font-size: 0.8em;
position: absolute;
left: 15px;
top: 15px;
z-index: 0;
}

#splash {
color: #1b9416;
letter-spacing: 0.1em;
background: url(startup.gif) no-repeat 0 0;
width: 220px;
padding: 30px 0 0 0;
text-align: center;
font-size: 0.8em;
position: absolute;
top: 50%;
left: 50%;
margin: -15px 0 0 -110px;
overflow: auto;
}

#alert {
position: absolute;
width: 500px;
height: 140px;
top: 50%;
left: 50%;
margin: -75px 0 0 -250px;
overflow: auto;
opacity: 0;
filter:alpha(opacity=0);
z-index: 25;
}

#alert div {
background-color: #FFE7E7;
border: 3px solid #D71A1A;
color: #AF363B;
line-height: 1.5em;
padding: 20px;
text-align: center;
}

/* Header */
#header {
display: flex;
height: 52px;
align-items: center;
padding: 8px 5px 0 18px;
gap: 10px;
}
#h1 {
flex-grow: 1;
font-size: 1.5em;
color: #888887;
letter-spacing: 0.05em;
font-weight: normal;
}
.updating {background: url(refresh.gif) no-repeat scroll 95% 50%;}
#header a {
width: 32px;
height: 32px;
overflow: hidden;
display: block;
color: #00923F;
padding: 3px;
}
#header a:hover {background-color: #FFEA87;}
#btnsettings {background: transparent url(butt.png) no-repeat scroll 50% 0;}
#btnminimal {background: transparent url(butt.png) no-repeat scroll 50% -32px;}
#btnmobile {background: transparent url(butt.png) no-repeat scroll 50% -64px;}

/* Settings */
#boxSettings {
    width: 700px;
    height: 550px;
    overflow: auto;
    overflow-x: hidden;
    overflow-y: auto;
    border: 3px solid #163382;
    background-color: #E8ECF7;
    z-index: 30;
    opacity: 0;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    top: 20px;
}
#setLoadingStatus {
font-size: 0.9em;
color: #2a3b64;
width: 100%;
text-align: center;
display: block;
margin-top: 220px;
}
#setMenu {
text-align: center;
background-color: #163382;
padding: 1px 0 5px 0;
line-height: 1.3em;
position: relative;
width: 100%;
}
#setMenu a {
font-size: 0.9em;
text-decoration: none;
color: #ffffff;
background-color: #527ee3;
padding: 4px 12px;
margin: 0 2px;
white-space: nowrap;
}
#setMenu a:hover {
background-color: #F7D57B;
color: #2a3b64;
}
#setMenu a.selected {
background-color: #E8ECF7 !important;
color: #2a3b64 !important;
position: relative;
top: 4px;
}
#setMenu .disabled, #setMenu .disabled:hover {
background-color: #D7D7D7;
color: #7F7F7F;
}

#setPanel {
width: 100%;
height: 322px;
opacity: 0;
}
#boxSettings p {
font-size: 0.8em;
line-height: 1.6em;
margin: 2px;
padding-right: 5px;
background-color: #D1DAEF;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 15px;
}
.snsheader {
    background-color: transparent !important;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 15px;
    padding-right: 5px;
}
.snsheader span {
    color: #7d7d7d;
    font-size: 0.9em;
    letter-spacing: 0.1em;
    text-align: center;
}
#boxSettings p.info {
color: #2a3b64;
padding: 3px 8px;
line-height: 1.3em !important;
justify-content: left;
gap: 5px;
}
#boxSettings p.info .file {
color: #396f2d;
}
#boxSettings p.info .file:hover {
text-decoration: none;
}
#boxSettings span.n {
margin-left: 8px;
color: #2a3b64;
padding: 2px 0;
flex-grow: 1;
}
#boxSettings .select, #boxSettings input {
    width: 220px;
    height: 1.5em;
    padding-left: 3px;
    background-color: #fff;
}
#boxSettings input.text {
color: #2a3b64;
border: 1px solid #687EAF;
}
#boxSettings input.notok {
background-color: #FFDFDF !important;
}
.snstemp, .snshum, .snsdew {width: 100px !important;}
.snstemp {right: 252px !important;}
.snshum {right: 132px !important;}
.snsdew {right: 12px !important;}
#boxSettings #lentext {
position: absolute;
right: 10px;
top: 2px;
padding-left: 3px;
color: #2a3b64;
text-align: right;
}

.chand {cursor: hand;}
#boxSettings .textarea {
margin: 3px 5px;
color: #2a3b64;
width: 90%;
}
#boxSettings input.hover {
color: red;
}
#boxSettings input.checkbox {
height: 1.2em;
}
#boxSettings .select, #boxSettings .selectitem {
font-size: 1em;
color: #2a3b64;
border: 1px solid #687EAF;
}
#setbuttons {
position: absolute;
bottom: 0;
right: 0;
height: 33px;
padding: 2px;
width: 100%;
}
#setbuttons a {
cursor: pointer;
border: 1px solid #687EAF;
color: #2a3857;
background-color: #FFEA87;
padding: 2px 15px;
margin: 0 10px;
text-decoration: none;
float: right;
}
#setbuttons a:hover, #autodetect:hover {
color: #42506F;
border: 1px solid #506187;
background-color: #F7D57B;
}
#resultbox {
color: RED;
font-size: 0.9em;
position: absolute;
left: 10px;
bottom: 5px;
}
#boxSettings h2 {
letter-spacing: 0.1em;
padding: 10px 0 0 10px;
font-size: 1.3em;
font-weight: normal;
color: #38914B;
}
#boxSettings h3 {
letter-spacing: 0.1em;
padding: 5px 0 0 10px;
font-size: 1em;
font-weight: normal;
color: #38914B;
flex-grow: 1;
}
#autodetect {
    cursor: pointer;
    border: 1px solid #687EAF;
    color: #2a3b64;
    background-color: #FFEA87;
    padding: 0px 10px;
    text-decoration: none;
    /*! position: absolute; */
    /*! right: 220px; */
    /*! top: 2px; */
    line-height: 1.4em;
}

/* seznam senzoru */
#snscontent {
font-size: 0.8em;
padding: 5px 0 5px 10px;
}
#snscontent span {
color: #6377A7;
font-style: italic;
}
#snscontent a {
text-decoration: none;
padding: 2px 6px;
margin: 5px;
background-color: #D1DAEF;
color: #2a3b64;
}
#snscontent a:hover {
background-color: #F7D57B;
}

/* Tipy */
.popisek, .vetsipopisek, .extremtip {z-index: 50;}
.popisek .tip .tip-title, .vetsipopisek .tip .tip-title {
color: WHITE;
font-size: 0.75em;
background-color: #506187;
padding: 6px 10px;
border: 1px solid WHITE;
line-height: 1.4em;
word-wrap: break-word;
}
.popisek .tip .tip-title {width: 220px;}
.vetsipopisek .tip .tip-title {width: 450px;}
.popisek .tip-top, .popisek .tip-bottom, .popisek .tip .tip-text, .vetsipopisek .tip-top, .vetsipopisek .tip-bottom, .vetsipopisek .tip .tip-text, .extremtip .tip .tip-text {
display: none;
}
.tinfo {
font-size: 13px;
font-weight: bold;
padding: 2px;
color: #7588BB;
position: relative;
bottom: 5px;
}
.extremtip {
font-size: 0.8em;
background-color: #B5DDC7;
padding: 2px 5px;
border: 1px solid WHITE;
color: #00923F;
}


/* Displays */
#displays {
width: 410px;
margin: 40px auto 0 auto;
}
#main {
padding: 0 8px 8px;
background-color: #fff;
display: flex;
flex-flow: column;
gap: 8px
}
.minimal .rowsub {display: none;}
.notwebinfo {
background: #F4C1A5 url(over.png) no-repeat scroll 95% 50%;
font-size: 0.9em;
padding: 10px 55px 10px 15px;
}
.snsbox {
display: flex;
flex-flow: column;
gap: 2px;
}
.row {
padding: 0 10px 0 20px;
}
.rowmain {
height: 60px; 
background-color: #B2D37D;
display: flex;
align-items: center;
justify-content: space-between;
}
.rownone {
height: 60px;
background-color: #e6e6e6;
text-align: center;
line-height: 60px;
font-size: 0.8em;
color: grey;
}
.rowmain .title, .rowmain .value {
font-size: 1.6em;
font-weight: bold;
padding-right: 0 20px;
}
.rowmain .value, .rowsub .value {
width: 140px;
text-align: center;
}
.rowsub {
height: 32px;
background-color: #DDEBCA;
display: flex;
align-items: center;
justify-content: space-between;
}
.maxval, .minval {height: 30px;}
.maxval .value, .minval .value {display: flex; flex-direction: column;}
.rowsub .value {font-weight: bold;}
.rowsub .value span:first-of-type {font-weight: bold;}
.rowsub .value span:last-of-type {font-weight: normal; font-size: 0.8em;}
.rowsub .title, .rowsub .value {font-size: 0.8em;}
.rowsub .title {padding: 0 0 0 32px;}
.topceil {background: url(rowsub.png) #DDEBCA no-repeat scroll 14px -2px;}
.bottceil {background: url(rowsub.png) #DDEBCA no-repeat scroll 14px -26px;}
.maxval {background: url(rowsub.png) #DDEBCA no-repeat scroll 14px -62px;}
.minval {background: url(rowsub.png) #DDEBCA no-repeat scroll 14px -88px;}
.over {background-color: #F4C1A5;}
.mover {background: #EA8E5F url(over.png) no-repeat scroll 99% 50%;}

/* Status */
#footer {
font-size: 0.7em;
text-align: right;
padding: 8px 8px 8px 0;
color: #888887;
line-height: 1.6em;
background: url(logo.png) no-repeat scroll 20px 80%;
position: relative;
}
.notweb #foovals {
position: absolute;
bottom: 5px;
right: 8px;
}
.minimal #footer {
font-size: 0.6em !important;
padding: 3px 8px 0 0 !important;
line-height: 1.3em !important;
height: 55px !important;
}
#footer, #footer .file, #footer .file:visited {color: #888887;}
#footer .file {text-decoration: none;}
#footer .file:hover {text-decoration: underline;}
.toodiff {color: RED;}

@media only screen and (max-width: 850px), only screen and (max-device-width: 850px) {

	.back {background: #F5F5F5 url(back.png) repeat-x scroll 0 10px;}
	#displays {
        margin-top: 0;
        width: 100%;
        max-width: 480px;
    }
	#splash {margin-top: 79px;}
	#boxSettings {
		top: 0;
		left: 0;
	}
	#setMenu #dragMenu {display: none;}
	#boxSettings {width: 799px;}
	#setMenu a {padding: 4px 6px;}
	.mask {opacity: 1;}

}