/*div
{
float:left;
margin-left:0px;
width:auto;
background-color:#F0F0F0;
text-align:left;
}*/
body
{
    font-family: 'Roboto';
    width:1300px;
    height:600px;
    margin-left:15px;
    /*background-color:#F0F0F0;*/
    background-color:#5D5D5D;
    /*text-align:left;*/    
    font-size:20px;
}
ul
{
    list-style-type:none;
    margin: 0 auto;
    padding:0;
    overflow:hidden;
}
li
{
    float:left;
    margin-top:10px;
    margin-bottom:10px;
    margin-right:5px;
    margin-left:0px;
}
a
{
    display:block;
    width:100px;
    background-color:#F0F0F0;
}
a:link, a:visited
{
    text-decoration:none;
    color:#FFFFFF;
    background-color:#000000;
    display:block;
   /* font-weight:bold;*/
    height:40px;
    width:140px;
    text-align:center;
    padding:5px;
    border-radius:7px;
    border-style:solid;
    border-width:2px;
    border-color:#000000
}
a:hover, a:active
{
    text-decoration:underline;
    color:#000000;
    background-color:#F0F0F0;
    border-color:#000000;
}   
.center
{
    /*margin-left:15px;*/
    margin-right:0px;
    width:1300px;    
    background-color:#5D5D5D;
}
.clock {
    float: left;
    width: 500px;
    height: 100px;
    margin-left: 300px;
    padding-top: 20px;
    position: relative;
/*    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);*/
    color: #000000; /*#17D4FE;*/
    font-size: 80px;
    font-family: Orbitron;
    letter-spacing: 7px;
    text-align: center;
}
.wifi {
    float: left;
/*    width: 50px;
    height: 100px; */
    padding-top: 20px;
    position: absolute;
    top: 490px;
    left: 20px; 
}
.lightButton
{
    width:50px;
    height:50px;
    text-align:center;
    padding-top:10px;
    padding-bottom:10px;
    padding-right:10px;
    padding-left:10px;
    border-style:solid;
    border-width:2px;
    border-radius:7px;
    float:left;
    margin-right:10px;    
    background-color:#b2afaf;
}
.lightButtonON
{
    width:50px;
    height:50px;
    text-align:center;
    padding-top:10px;
    padding-bottom:10px;
    padding-right:10px;
    padding-left:10px;
    border-style:solid;
    border-width:2px;
    border-radius:7px;
    float:left;
    margin-right:10px;    
    background-color:#ffd800;
}
.lightButtonText
{    
    font-size:22px;
/*    font-weight:bold; */
    text-align:center;
    padding-top:10px;
    padding-bottom:10px;
    padding-right:10px;
    padding-left:10px;
    float:left;    
}
.statusButtonON
{
    width:10px;
    height:10px;
    text-align:center;
    padding-top:10px;
    padding-bottom:10px;
    padding-right:10px;
    padding-left:10px;
    border: 2px solid #999999;
/*    border-style:solid;
    border-width:2px;   */
    border-radius:20px;
    float:left;
    margin-right:10px;    
    background-color:#4AC234;
}
.statusButtonOFF
{
    width:10px;
    height:10px;
    text-align:center;
    padding-top:10px;
    padding-bottom:10px;
    padding-right:10px;
    padding-left:10px;
    border: 2px solid #999999;
/*    border-style:solid;
    border-width:2px;*/
    border-radius:20px;
    float:left;
    margin-right:10px;    
    background-color:#ED136A;
}
.tempTableLeft{
    float:left; 
    text-align:left; 
    max-width:200px; 
    font-size: 24px;
/*    font-weight: bold;    */
}

.tempTableRight{    
    float:left; 
    text-align:left; 
    max-width:200px; 
    font-size: 24px;
    font-weight: bold;
    margin-left:5px;
    margin-right:20px;
}
.mvdiv
{
    /*width:300px;*/
    padding-top:10px;
    padding-bottom:10px;
    padding-right:10px;
    padding-left:10px;
    border-style:solid;
    border-width:2px;
    border-radius:7px;
    float:left;
    margin:30px;
    margin-left:15px;
    margin-right:30px;
    background-color:#b2afaf;
}
.indiv
{
    padding-top:10px;
    padding-bottom:10px;
    padding-right:10px;
    padding-left:10px;
    float:left;
    margin:30px;
    margin-left:15px;
    margin-right:30px;
    background-color:#5D5D5D;
}
.slide
{
    position:relative;
    animation:mymove 5s infinite;
    margin-left:15px;
    width:950px;
    background-color:#F0F0F0;
}
#lightsSchema 
{
    width:400px;
    height: 20px;
    border: solid 2px #000000;
    background-color: #5D5D5D;
    float: left;
    position: relative;
}
#Car
{
    width:100px;
    border:solid;
    border-color:black;
    border-radius:5px;
    text-align:center;        
}
#DateTimePicker
{
    width:100px;
    border:solid;
    border-color:black;
    border-radius:5px;
    text-align:center;        
}
#HP_Temp
{
    text-align:center; 
    position:absolute;
    width:40px;
    height:17px;
    border:solid 2px #0F0F0F;
    border-radius:5px;
    font-size: 65%;
}
#HP_Save
{
    text-align:left; 
    position:absolute;
    width:220px;
    height:30px;
 /*   border:solid 2px #0F0F0F; */
    border-radius:5px;
    font-size: 100%;
}
#HP_Temp_Text
{
    text-align:left; 
    position:absolute;
    width:50px;
    height:35px;
    font-size: 45%;
}
#Pool_Temp
{
    text-align:center; 
    position:absolute;
    width:60px;
    height:17px;
    border:solid 2px #0F0F0F;
    border-radius:5px;
    font-size: 70%;
}
#Pool_Temp_Text
{
    text-align:left; 
    position:absolute;
    width:50px;
    height:35px;
    font-size: 45%;
}
#Pool_Lamp
{
    text-align:left; 
    position:absolute;
    width:50px;
    height:50px;
    top:273px;
    left:395px;
}
#Pool_Pump
{
    text-align:left; 
    font-size: 24px;
    position:absolute;
    width:45px;
    height:25px;
    top:640px;
    left:240px;
    border:solid 2px #000000;
    border-radius:3px;
}
#Pool_Level
{
    text-align:center; 
    position:absolute;
    width:100px;
    height:20px;
    border:solid 2px #FF0000;
    border-radius:5px;
    font-size: 75%;
    background-color:red;
}
#flip
{
    padding:5px;
    text-align:center;
    height:20px;
    width:300px;
    background-color:#F0F0F0;
    border:solid 2px #000000;
    border-radius:7px;
    float:left; 
    position: relative;
}
#mapTrace{
    position:absolute;
    margin-right:0px;
    border:4px;
    border-style:solid;
    border-color:black;
    border-radius:6px;
    height: 500px;
    width: 950px;
}
#mapTraceFullScreen{
    position:absolute;
    margin-right:0px;
    border:4px;
    border-style:solid;
    border-color:black;
    border-radius:6px;
    width: 1300px;
    height: 700px;
}
#mapTraceCarado{
    position:absolute;
    margin-right:0px;
    border:4px;
    border-style:solid;
    border-color:black;
    border-radius:6px;
    width: 1300px;
    height: 1500px;
}
#mapInfo{
    position:relative;
    margin-top:50px;
    margin-left:5px;
    padding-left:5px;
    padding-top:5px;
    border:4px;
    border-style:solid;
    border-color:black;
    border-radius:6px;
    background-color:whitesmoke;
    font-size:medium;
    height: 200px;
    width: 100px;    
}
#weather
{
    float:left; 
    text-align:center;
    width:832px;
    padding:3px;
    /*display:none;*/
    border:solid 2px #000000;
    border-radius:7px;
    background-color:#000000;
}
#webcamera
{
    /*text-align:center;*/
    margin-left:15px;
    /*width:832px;*/
    /*padding:3px;*/
    display:block;
    border:solid 2px #000000;
    border-radius:7px;
    background-color:#000000;
}
#login {
    padding:15px 15px 15px 15px;
    margin-left: auto;
    margin-right: auto;
    text-align:center;          
    font-weight: bold;
    font-size:large;
    border-radius:5px;
    background-color:grey;
    width:300px;
    float:left;
}
#userN {
    text-align:center;           
    font-weight: bold;
    background-color:grey;
}
#passW {
    text-align:center;            
    font-weight: bold;
    background-color:grey;
}
#submit {
    text-align:center;           
    font-weight: bold;
    background-color:grey;
}
#logg{
    width:1200px;

}
#trBody{
    background-color:grey;    
}
#tdEven {
    background-color:lightblue;
    text-align:center;
}
#tdOdd {
    background-color:lightgreen;
    text-align:center;
}
#thTemp {
    width:80px;
    text-align:center;
}

.onoffswitch {
    position: relative; width: 70px;    
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
    display: none;
}
.onoffswitch-label {
    display: block; overflow: hidden; cursor: pointer;
    border: 2px solid #999999; border-radius: 20px;
}
.onoffswitch-inner {
    display: block; width: 200%; margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
    display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px;
    font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
    box-sizing: border-box;
}
.onoffswitch-inner:before {
    content: "ON";
    padding-left: 10px;
    background-color: #4AC234; color: #FFFFFF;
}
.onoffswitch-inner:after {
    content: "OFF";
    padding-right: 10px;
    background-color: #ED136A; color: #FFFFFF;
    text-align: right;
}
.onoffswitch-switch {
    display: block; width: 18px; margin: 6px;
    background: #FFFFFF;
    position: absolute; top: 0; bottom: 0;
    right: 36px;
    border: 2px solid #999999; border-radius: 20px;
    transition: all 0.3s ease-in 0s; 
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: 0px; 
}

.slidecontainer {
    width: 200px; /* Width of the outside container */
    float: right;
    padding-right: 230px;
}

/* The slider itself */
.slider {
    -webkit-appearance: none;  /* Override default CSS styles */
    appearance: none;
    width: 100%; /* Full-width */
    height: 10px; /* Specified height */
    background: #d3d3d3; /* Grey background */
    outline: none; /* Remove outline */
    opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: .2s; /* 0.2 seconds transition on hover */
    transition: opacity .2s;
}

/* Mouse-over effects */
.slider:hover {
    opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */ 
.slider::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    width: 10px; /* Set a specific slider handle width */
    height: 20px; /* Slider handle height */
    background: #4CAF50; /* Green background */
    cursor: pointer; /* Cursor on hover */
}

.slider::-moz-range-thumb {
    width: 10px; /* Set a specific slider handle width */
    height: 20px; /* Slider handle height */
    background: #4CAF50; /* Green background */
    cursor: pointer; /* Cursor on hover */
}

#fade {
    display: none;
    position:absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: #ababab;
    z-index: 1001;
    -moz-opacity: 0.8;
    opacity: .70;
    filter: alpha(opacity=80);
}
#spinner {
    display: none;
    position: absolute;
    top: 45%;
    left: 45%;
    width: 64px;
    height: 64px;
    padding:30px 15px 0px;
    border: 3px solid #ababab;
    box-shadow:1px 1px 10px #ababab;
    border-radius:20px;
    background-color: white;
    z-index: 1002;
    text-align:center;
    overflow: auto;
}
#yr-varsel td.skilje {
	height: 1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	background: #63c6e3 !important;
}