@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;}
body.login {}    
body.page {position:relative;} 
.div{width:800px; max-width:100%;margin:0px auto;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:#fff;text-align:left;width:100%;padding:0;}
.logo img {max-width:30%;padding:0;}
.logo1 {text-align:center}
.logo1 h1{position:absolute;z-index:2;top:72%;width:20%;right:40%; background:#066CAE;padding:2px 10px; cursor:default;
color:#fff !important;font-size:2.5vmin;border-radius:10px;}
.form{background:#fff;padding:20px;border-radius:8px;border:1px solid #545555;max-width:340px;height:250px;font-weight:bold;margin:40px auto;}
.formlogin{background:#fff;padding:20px;border-radius:8px;border:0px solid #00000000;max-width:340px;height:250px;font-weight:bold;margin:40px auto; line-height:40px;}
.formreset{background:#fff;padding:20px;border-radius:8px;border:0px solid #00000000;max-width:640px;height:250px;font-weight:bold;margin:40px auto; line-height:30px; text-align:justify;}
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;}
.submit{float:right;background:url(../img/logout.png) left center no-repeat #545555; margin-top:10px; 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; background:url(../img/logout.png)} 
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;}
} 
@media only screen and (min-width: 1921px) {
.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);z-index:9;}
a.tablebutton, span.tablebutton {cursor:pointer;background:#008ec1!important;color:#fff!important; border: 1px solid transparent!important; border-radius: 4px!important; text-decoration:none;margin-right:40px;display:inline;padding:3px 8px;}
a.tablebutton:hover, span.tablebutton:hover {background:#001937!important;color:#fff!important;}
span.topuser {color:#000;margin-right:4px;display:inline;padding:3px 8px;}
a.topbutton, span.topbutton {cursor:pointer;color:#000;text-decoration:none;margin-right:4px;display:inline;padding:3px 8px;}
a.topbutton:hover, span.topbutton:hover {background:#fff;color:#008ec1;}

.sidenav {height: 100%;width: 350px;transform:translateX(390px);position: fixed;z-index: 999;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;}
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:0px;}
em {font-size:1.4em;font-weight:bold;font-style:normal !important;}
img {max-width:100%;}
section {border:#ddd solid 1px}                                             
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!important;background:#e8e8e8!important;width:90%!important;padding:10px!important;border-radius:4px!important; margin:30px auto!important;}
table.datatable td {width: 150px!important; border: 1px solid #e8e8e8!important;margin:4px!important;background:#fff!important;padding:6px!important;}
table.datatable th {padding:10px!important;}
table.datatable input[type=text] {width:100%;}
.pagination {text-align:center!important;color:#c0c0c0!important;font-weight:bold!important;}
form.actions {white-space: nowrap;}
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;}
ul {list-style-type: none;}
input.tablebutton {float:right;cursor:pointer;background:#008ec1!important;color:#fff!important; border: 1px solid transparent!important; border-radius: 4px!important; text-decoration:none;display:inline;padding:3px 8px; font-size:16px; font-weight:bold;}
input.tablebutton:hover {background:#001937!important;color:#fff!important;}
input.email {width:100%;padding:6px 25px;border:1px solid #c0c0c0;}
.tablebutton {cursor:pointer;background:#008ec1!important;color:#fff!important; border: 1px solid transparent!important; border-radius: 4px!important; text-decoration:none;display:inline;padding:3px 8px; font-size:16px; font-weight:bold; margin-top:10px;}
.tablebutton:hover {background:#001937!important;color:#fff!important;}
.page footer { z-index:99999; }