body {font-family: 'Arial', sans-serif; margin:0;}
h1 { font:700 21px Arial; color:#150836;}
h2 { font:700 18px Arial; color:#150836; margin:20px;text-align:center;}
input[type=text],[type=password] {margin:0px; color:#000; border: none;border-bottom: 2px solid #250e62;}
input[type=button] {padding:5px; background:#250e62;color:#fff;border:0px; margin-top:5px;font-weight: bold;width:183px;cursor:pointer;}
input[type=button]:hover {transition: background linear 0.1s;background:#160642;}
input[type=button]:disabled {background:#250e62; opacity: 0.4;cursor: default;}

div#div_system_off {/*background: linear-gradient(#fff, #f0f0f4);*/ padding: 5%; margin-top: 30vh;}
p#system_off {text-align: center; font: 500 21px Arial;}
p#dots {font:700 32px Arial; width: 50px; margin: auto;}

div#logo {position:absolute; top:10px; left:10px;background:url(logo.png) no-repeat; z-index:9999999; width:130px; height:15%; background-size:100%; }
@media only screen and (orientation: landscape) {
	div#window {position:relative; /*min-width: 790px; width: calc(98vh / 0.75);*/ width: 650px; min-height: 650px; height: 98vh; top:1vh; overflow:hidden; box-shadow:0px 0px 2px 2px;; font-size:10px; margin:auto;} 
}

@media only screen and (orientation: portrait) {
    div#window {position:relative; /*min-width: 790px; width: 55vw;*/ width: 650px; min-height: 650px; height: calc(55vw * 0.75); top:1vh; overflow:hidden; box-shadow:0px 0px 2px 2px;; font-size:10px; margin:auto;}
}


div#header {position:absolute;z-index:9999;height: 80px;width:100%;background:#fff;}
div#header h2 {text-align:center;}

div#bedsheet {position:relative;width:400%;height:87.5%;transition:all linear 0.4s;top: 90px;}
div#bedsheet div.content{background:#fff; width:25%; height: 100%; float:left;}

div#login{background-color:#fff;width: 100%;height: 100%;margin: auto;transition: all 0.8s;transform: scale(1);opacity:1;z-index:2;position:absolute;z-index:100000;}
div#login_input{width:280px;margin:auto;margin-top: 40%; height: 30%;}
div#login_input input {width:89%;margin:5px;box-sizing: content-box; padding: 10px;}
div#login_input p#login_error {color:#250e62;margin-left:20px;margin-bottom:0px;width:95%; margin:auto;text-align:center;}

div#logout img{width:30px;vertical-align:middle;position:absolute; right:15px;top:15px;}
div#logout:hover{cursor:pointer;}

div#map {text-align:center;position:absolute; bottom:0;width:100%;cursor:pointer;}
div#map div {width:24%; display:inline-block;transition: color linear 0.3s; text-transform:uppercase; font: 500 12px Arial;}
div#map div:hover {transition:color linear 0.3s;}
div#map div.sel {font-weight:500; font-size: 21px;} 

div#service {
    background-color: white;
    width: 25%;
    height: 100%;
    margin: auto;
    transition: all 0.8s;
    transform: scale(0.5);
    opacity: 0;
    z-index: -1;
    position: absolute;
    overflow: auto;
    padding-top: 30px;
}

div#service ul {padding:0px;padding-left:10px;margin:0px;}
div#service ul li{padding:0px; list-style:none;}
div#service ul li span {width:200px;display:inline-block;}
div#service textarea {width:97%; height:12%;margin-left:1%;}
div#service input {font:500 12px Arial; margin: 10px;}
div#service select {margin:10px;}
div#service	span {margin: 10px;}

div.arrow-down {
  width: 0; 
  height: 0; 
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #666;
	float:right;
	margin:-5px  0px;
	transform: rotate(0deg);
	transition: all linear 0.2s;
}
div.arrow-down.up {transform: rotate(180deg); transition: all linear 0.2s;}

div#settings {
    overflow-y: auto;
	height: 96%;
	padding-top: 20px;
}
div.category {margin:10px;padding:10px; cursor:pointer; font-size: 14px;border-left: 5px solid #250e62;margin-bottom: 0px;box-shadow: 1px -0.5px 0.5px 0.5px;}
span.category_name{}
div.category_plus{float: right;cursor: pointer;width: 0;height: 0;border-left: 6px solid transparent;border-right: 6px solid transparent;border-top: 6px solid #333;transform: rotate(0deg);transition: all linear 0.2s;margin-top:4px;margin-right:5px;}
div.category_plus.open{transform: rotate(-180deg); transition: all linear 0.2s;}
div.category_details{margin:10px;height:0px;font-size:13px;transform:scaleY(0);transform-origin: top;transition:all linear 0.3s;overflow:hidden;}
div.category_details.open{margin:10px;height:auto;transform:scaleY(1);transform-origin: top;transition:all linear 0.3s;overflow:visible;}
table.category_table{margin: auto;}
table.category_table tr {height: 30px;}
table.category_table td {vertical-align: bottom;padding-right: 15px;}
table.category_table td input[type=button] {}
table.category_table td select {padding:5px;border: 2px solid #250e62;color: #000;width: 100%;background-color: white;}
table.category_table td input[type=file] {width:100%}
table.category_table td input {padding: 5px; padding-left: 0px;}

input#reboot_btn, #reset_btn, #db_update_btn, #db_reset_btn, #ocpp16authorizationkey {float: left; margin-top: -50px;}

input#save_logs {margin-top:40px; margin-left:20px; padding:5px;}

input#exit_service{cursor: pointer; border-radius:5px; float:right; padding:9px; margin:5px;width: 30px;}

i {border: solid black;border-width: 0 3px 3px 0;display: inline-block;padding: 3px;}
.right {transform: rotate(-45deg);}

div.arrow-left {border: solid black;border-width: 0 2px 2px 0;margin-right: 4px;display: inline-block;padding: 3px;transform: rotate(-224deg);}
div.arrow-left:hover{cursor:pointer;}

div.updateInProgress {background-color: white;width: 25%;height: 100%;position: absolute;text-align: center;padding-top: 7%;font-size: 25px;}

div#waitingscreen {top: 0px; background-color: #fff; opacity:.7; width: 100%;height: 100%; padding-top:50%; position: absolute;text-align: center;font-size: 25px; z-index: 99999999999;}