@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.mainadmin {background:url(../img/home2.png) 10px center no-repeat;font-weight:bold;}
a.maincustomer {background:url(../img/homecustomer.png) 10px center no-repeat;font-weight:bold;}
a.mainoperator {background:url(../img/homecustomer.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.playlist {background:url(../img/playlist.png) 10px center no-repeat;font-weight:bold;}
a.schedule {background:url(../img/schedule.png) 10px center no-repeat;font-weight:bold;}
a.layouts {background:url(../img/layout.png) 10px center no-repeat;font-weight:bold;}
a.libadmin {background:url(../img/library.png) 10px center no-repeat;font-weight:bold;}
a.libcustomer {background:url(../img/library.png) 10px center no-repeat;font-weight:bold;}
a.pos {background:url(../img/pos.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;}


/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}
.tab button:hover {
  background-color: #ddd;
}
.tab button.active {
  background-color: #ccc;
}
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}
/* End style the tab */
/*lightbox caricamento */
.lightbox {
  z-index:99999999;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: none;
  justify-content: center;
  align-items: center;
  padding:0px;
  border-radius: 0px;
}
.lightbox-content {
  background-color: #fefefe;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 600px;
  position: relative;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
.btnLightBox{
	background-color:#09f;
	border:0;
	right:10px;
	bottom:10px;
	padding:10px 40px;
	color:#FFF;
	border-radius:4px;
	outline:none;
	display:inline;
	align-self: flex-end;
	}
.btnLightBox:hover{
	background-color:#05f;
	}
.rounded {
			border-radius: 0.25rem;
		}
.m-0 {
  margin: 0 !important;
}

.m-1 {
  margin: 0.25rem !important;
}

.m-2 {
  margin: 0.5rem !important;
}

.m-3 {
  margin: 1rem !important;
}

.m-4 {
  margin: 1.5rem !important;
}

.m-5 {
  margin: 3rem !important;
}

.m-auto {
  margin: auto !important;
}
.btn {
	display: inline-block;
	font-weight: 400;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	user-select: none;
	border: 1px solid transparent;
	padding: 0.375rem 0.75rem;
	font-size: 1rem;
	line-height: 1.5;
	border-radius: 0.25rem;
	transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
	text-decoration:none;
}
.btn-primary {
  color: #fff;
  background-color: #0d6efd;
  border-color: #0d6efd;
}
.btn-primary:hover {
  color: #fff!important;
  background-color: #0b5ed7;
  border-color: #0a58ca;
}
.btn-secondary {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}
.btn-secondary:hover {
  color: #fff;
  background-color: #5c636a;
  border-color: #565e64;
}
.btn-success {
  color: #fff;
  background-color: #198754;
  border-color: #198754;
}
.btn-success:hover {
  color: #fff;
  background-color: #157347;
  border-color: #146c43;
}
.btn-info {
	color: #fff;
	background-color: #0dcaf0;
	border-color: #0dcaf0;
}
.btn-info:hover {
	color: #fff;
	background-color: #0aa5c9;
	border-color: #0992b5;
}
.btn-warning {
  color: #212529;
  background-color: #ffc107;
  border-color: #ffc107;
}
.btn-warning:hover {
  color: #212529;
  background-color: #e0a800;
  border-color: #d39e00;
}
.btn-danger {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}
.btn-danger:hover {
  color: #fff;
  background-color: #bd2130;
  border-color: #b21f2d;
}

.btn-light {
  color: #212529;
  background-color: #f8f9fa;
  border-color: #f8f9fa;
}
.btn-light:hover {
  color: #212529;
  background-color: #e2e6ea;
  border-color: #dae0e5;
}
.btn-dark {
  color: #fff;
  background-color: #343a40;
  border-color: #343a40;
}

.btn-dark:hover {
  color: #fff;
  background-color: #23272b;
  border-color: #1d2124;
}


/*lightbox download*/
.lb_container {width:86vw; height:calc(100vh - 140px); margin: auto; margin-top:40px; text-align:left; background:#fff; border-radius:9px; display:flex; padding:10px;}

table#file-list {color: #333;display:block;width:calc(86vw - 20px);background-color:#fff;overflow:auto;}
table#file-list tr th{ background:#5BAEE5;text-align:center;font-weight:bold;color:#fff;}
table#file-list tr th.th_titolo{width:60vw}
table#file-list tr th.th_artista{width:26vw}
table#file-list tr td{ background:#CAE0E8;padding:2px 10px;margin:3px;}
#invia-file, #salva-download{position:absolute;bottom:30px;right:180px;height:30px;width:160px}
#chiudi-lightbox-load, #chiudi-lightbox-insert {position:absolute;bottom:30px;right:10px;height:30px;width:160px}