@font-face {
  font-family: teen;
  src: url(teen.ttf);
}
@font-face {
  font-family: teenit;
  src: url(teenit.ttf);
}
@font-face {
  font-family: teenltit;
  src: url(teenltit.ttf);
} 
 body {
  
    background-color:#fff;
    color:#001937;
    font-family:Arial, Helvetica, sans-serif;
    margin:40px auto;
   max-width: 1280px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

 }
body.login {


}    
body.page {



} 


.div{




width:800px; max-width:100%;margin:0px auto;
margin-top:200px;
padding:0;

}
 .div1
    {
      width: 50%;
    
      float:left;
      margin-top:120px;
    }
    .div2
    {
      width: 50%;

      float:left;
    }
    
    
 .center, .logocenter{
 text-align:center;
 }
 .left{
 text-align:left;
 }
 .logo {position:relative;
     background-color:#e8e8e8;
     
}

.logo h1 {position:absolute;top:calc(50% - 3vw);left:calc(50% - 25vw);color:#E8E8E8;width:50vw;height:3.5vw;line-height:3.5vw;background:#001937;white-space: nowrap;}
.logo h1 span b{width:24vw;display:inline-block;text-align:right;padding-right:1vw;font-family:teen;font-size:2.1vw;}
.logo h1 span i{width:calc(24vw - 2px);padding-left:1vw;display:inline-block;text-align:left;border-left:2px solid #fff;font-family:teenltit;font-size:1.8vw;}
 .logo img{padding:0;margin:0;width:100%;overflow:hidden;}
 .form {
 background:#e3e3e3;
 padding:20px;
 border-radius:30px;
 border:1px solid #545555;
 width:340px;
 height:250px;
 font-weight:bold;
 
 margin:40px auto;

 }
 input#password {
 background:url(../img/password.png) left center no-repeat #fff;
 width:100%;padding:6px 25px;
 border:1px solid #c0c0c0;
 }
  input#username {
 background:url(../img/user.png) left center no-repeat #fff;
 width:100%;padding:6px 25px;
 border:1px solid #c0c0c0;
 }
 input#submit{
 float:right;
  background:url(../img/logout.png) left center no-repeat #545555;
 color:#fff;
 border:1px solid #545555;
 padding:6px 6px 6px 25px;
 cursor:pointer;
 }

button#logout {
 color:#000;
 border:1px solid #545555;
 padding:0 30px;
 cursor:pointer;
 } 
 a#setup {
     position:absolute;top:10px;right:200px;
 }

 
 
  .form label {
  display:block;margin:10px auto;
  }
  .form span{padding-left:10px;}
img.graphic {
width:400px; padding:0px;vertical-align:middle;

}


#name {
margin:40px auto;
display:block;
width:200px;
padding:10px;
background-color:#dedede;
}





    @media only screen and (max-width: 799px) {
.div2 {display:none;}

   .div1
    {
      width: 100%;
     margin-top:0 !important;
      float:none !important;
     
    }
     .form { margin:0 auto;}
    .logoleft {padding-top:60px !important;text-align:center !important;padding-left:0 !important;}
} 

nav{width:100%;text-align:right;position:fixed;top:0;right:0;left:0;background:#e8e8e8;padding:2px 0;box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.2);}
a.topbutton, span.topbutton {cursor:pointer;color:#000;text-decoration:none;margin-right:40px;display:inline;padding:3px 8px;}
a.topbutton:hover, span.topbutton:hover {background:#fff;color:##008ec1;}
span.topuser {color:#000;margin-right:40px;display:inline;padding:3px 8px;}
.sidenav {
  height: 100%;
  width: 350px;
  transform:translateX(390px);
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  background-color: #fff;
  border-left:1px solid #E8E8E8;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;

  box-shadow: -10px 0px 10px 1px rgba(0, 0, 0, 0.19);
}

.sidenav a {
  padding: 20px 10px 20px 80px;
  text-decoration: none;
  font-size: 20px;
  color: #777;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #008ec1;
}
a.menugraphs {
    
    background:url(../img/graph.png) 10px center no-repeat;font-weight:bold;
}
a.menuhome {
    
    background:url(../img/home2.png) 10px center no-repeat;font-weight:bold;
}
a.customers {
    background:url(../img/customers.png) 10px center no-repeat;font-weight:bold;
}
a.team {
    
    background:url(../img/team.png) 10px center no-repeat;font-weight:bold;
}
a.media {
    
    background:url(../img/media.png) 10px center no-repeat;font-weight:bold;
}
a.devices{
    background:url(../img/devices.png) 10px center no-repeat;font-weight:bold;
}
a.list{
    background:url(../img/list.jpg) 50px center no-repeat;
}
a.export{
    background:url(../img/export.jpg) 50px center no-repeat;
}
a.radiostreams{
    background:url(../img/radiostreams.png) 10px center no-repeat;font-weight:bold;
}
a.submenu {font-style:italic;padding-left:90px}
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 30px;
  margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
a {text-decoration:none !important;}
a img {border:none !important;}
img {max-width:100%;}





footer{
background:#545655; text-align:center;color: #fff;
}

footer img {vertical-align:middle;margin:4px;}

footer.page {

   position:fixed;bottom:0;left:0;width:100%; 
}
.container {padding-bottom:200px;}
 em {font-size:1.4em;font-weight:bold;font-style:normal !important;}

    img {max-width:100%;}
 section h1 {background:#545655;display:block;width:100%; padding:20px 0;text-transform:uppercase;text-align:center;color:#fff;
 }
  section h2 {display:block;width:100%;text-align:center;
 }
   section h3 {display:block;width:100%;text-align:center;transform: scaleX(0.9);font-weight:300;
 }
hr {width:28%;margin:30px auto;}




.download {text-align:center;}
.download img {display:inline;padding:20px;}

table.datatable {
border: solid 1px #e8e8e8;background:#e8e8e8;width:90%;padding:10px;border-radius:4px; margin:30px auto; 
}
table.datatable td {
width: 150px; border: 1px solid #e8e8e8;margin:4px;background:#fff;padding:6px;
}
table.datatable th {
padding:10px;    
}
table.datatable input[type=text] {width:100%;}
.pagination {text-align:center;color:#c0c0c0;font-weight:bold;}
form.actions {white-space: nowrap;}

table.mediatable {
border: solid 1px #e8e8e8;background:#e8e8e8;width:90%;padding:10px;border-radius:4px; margin:30px auto; 
}
table.mediatable td {
   widtH:	border: 1px solid #e8e8e8;margin:4px;background:#fff;padding:10px;
}
table.mediatable th {
padding:10px;    
}
table.mediatable input[type=text] {width:100%;}
.pagination {text-align:center;color:#c0c0c0;font-weight:bold;}
form.actions {white-space: nowrap;}



input.button, a.button {background:#008ec1;padding:4px 8px;margin:4px;text-decoration:none;color:#fff;border-radius:4px;border:1px solid #008ec1;cursor:pointer;font-size:1em;text-transform:uppercase;}
a.circle {color:#008ec1;text-decoration:none;cursor:pointer;font-size:140%;}
a.circle:hover {color:#000;}
input.button:hover, a.button:hover{background:#001937;color:#fff;border:1px solid #001937;}
span.button {background:#c0c0c0;padding:4px 8px;margin:4px;color:#000;border-radius:4px;border:1px solid #c0c0c0;cursor:default;}
label.date{margin:0 10px 0 30px;font-weight:bold;color:#fff;}
.white {color:#fff;}
.nobr {white-space: nowrap;}
a.href{color:#008ec1;text-decoration:none;}
span.special {font-size:120%;line-height:100%;min-width:34px;display:inline-block;}