body {
	margin-top:50px; 
	background-color: #f7f7f7; 
}

body.login {
	margin-top:0px; 
	background-color: #3d3d3d;
}

body.tools {
	margin-top:0px; 
	background-color: #3d3d3d;
	padding: 10px 10px;
}

body.privacy {
	margin-top:0px; 
	background-color: #3d3d3d;
	color: #f7f7f7;
	padding: 10px 10px;
}

body.logs {
	margin-top:0px; 
	background-color: #f7f7f7; 
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 10px;
}

body.timb {
	margin-top:0px; 
	padding-left: 10px;
	padding-right: 10px;
	background-color: #f7f7f7; 
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

h1.privacy {
	font-size: 16px;
	font-weight: bold;
}

.login-form {
  min-width: 600px;
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
  max-width: 600px;	
}

.login-form form {
  margin-bottom: 15px;
  background: #f7f7f7;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
  padding: 30px;
}

.login-form h2 {
  margin: 0 0 15px;
}

.login-logo {
	text-align: center;
}

.tools h2 {
	color: #f7f7f7;
	text-align: center;
	font-size: 16px;
}

table.dashboard {
	width: 100%;
	padding: 3px;
	margin: 0px;
	border: 0px solid;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size : 12px;
	padding: 3px;
}

table.timb {
	width: 100%;
	padding: 3px;
	margin: 0px;
	border: 0px solid;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size : 12px;
	padding: 3px;
}

tr.timbeven {
  background-color: #ffffff;
}

tr.timbodd {
  background-color: #ececec;
}

table.timb th {
	padding: 5px;
	height: 20px;
	text-align: center;
	font-size : 12px;
	font-weight: bold;
	text-transform: uppercase;	
	background-color: #acacac;
}

table.timb td {
  padding-top: 2px;
  padding-bottom: 2px;
	padding-left: 3px;
	padding-right: 3px;	
}

td.timbl {
	text-align: left;
  padding-left: 3px;
  padding-top: 2px;
  padding-bottom: 2px;
}

td.timbr {
	text-align: right;
  padding-right: 3px;
  padding-top: 2px;
  padding-bottom: 2px;
}

td.timblnb {
	text-align: left;
  border-right: 0px;
  padding-left: 3px;
  padding-top: 2px;
  padding-bottom: 2px;
}

td.timbrnb {
	text-align: right;
  border-left: 0px;
  padding-right: 3px;
  padding-top: 2px;
  padding-bottom: 2px;
}

td.timbc{
	text-align: center;
  padding-top: 2px;
  padding-bottom: 2px;
}

td.timbh{
	text-align: center;
	font-size : 16px;
	font-weight: bold;
	text-transform: uppercase;
  padding-top: 3px;
  padding-bottom: 3px;
}

table.dddip {
	width: 100%;
	padding: 0px;
	margin: 0px;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size : 12px;
  border-color: #000;
  color: black;
  border-collapse: collapse;
  border: 1px solid;
	background-color: white;
}

th.dddiph {
  padding: 5px;
  margin: 0px;
  color: black;
	background-color: #acacac;
  font-size: 14px;
	font-weight: bold;
  text-align: center;
  vertical-align: middle;
	text-transform: uppercase;
  border: 1px solid;
  border-color: #000;
}


th.dddip {
  padding: 5px;
  margin: 0px;
  color: black;
  text-align: center;
  background-color: #acacac;
  vertical-align: middle;
  border: 1px solid;
  border-color: #000000;
}

table.dddip td {
  padding: 5px;
  margin: 0px;
  color: black;
  border: 1px solid;
  border-color: #000000;
}

td.dddipc {
  padding: 5px;
  margin: 0px;
  color: black;
  text-align: center;  
  border: 1px solid;
  border-color: #000000;
}


table.profile {
	width: 60%;
	padding: 3px;
	margin: 0px;
	border: 0px solid;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: black;
	font-size : 12px;
}

td.descr {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #9c9c9c;
  font-size : 10px;
}

td.descrc {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #9c9c9c;
  font-size : 10px;
  text-align: center;
  vertical-align: middle;
}

td.field_l {
  padding: 3px;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: black;
  font-size : 10px;
}

input.bottoni {
  width: 100px;
  font-size: 10px;
  font-weight: bold;
	border: 2px solid;
	border-color: white;
	background-color: #eeeeee;
  color: black;
	border-radius: 15px;
	min-height: 40px;
}


table.form {
	width: 100%;
	padding: 3px;
	margin: 0px;
	border: 0px solid;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #f7f7f7;
	font-size : 12px;
}

th.form {
	padding: 5px;
	height: 20px;
	text-align: center;
	font-size : 14px;
	font-weight: bold;
	text-transform: uppercase;	
}

td.formcal {
	color: black;
}


td.formc {
	text-align: center;
}

td.formr {
	text-align: right;
}

table.dataTable tbody td {
  padding: 3px 10px;
}

SELECT.form {
  font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size : 12px;
  background-color: #ffffff;
	color:black;
  width:100%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

INPUT.form {
  font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size : 12px;
  background-color: #eeeeee;
  width:100%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

textArea.misstimb {
	width:100%;
	height: 50px;
  font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size : 12px;
  background-color: #ffffff;
	color:black;
	resize: none;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

textArea.form {
	width:100%;
	height: 200px;
  font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size : 12px;
  background-color: #eeeeee;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.form-btn {
	width: 100px;
	font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 12px;
	padding: 4px;
	border-radius: 5px;
	color:black;
}

.form-control, .btn {
  min-height: 38px;
  border-radius: 2px;
}

.btn {        
  font-size: 15px;
  font-weight: bold;
}

.btn-green {        
  font-size: 15px;
  font-weight: bold;
	border: 2px solid;
	border-color: white;
	background-color: yellowgreen;
	border-radius: 15px;
	min-height: 40px;
}

.btn-yellow {
  font-size: 15px;
  font-weight: bold;
	border: 2px solid;
	border-color: white;
	background-color: yellow;
	border-radius: 15px;
	min-height: 40px;
}

.btn-orange {
  font-size: 15px;
  font-weight: bold;
	border: 2px solid;
	border-color: white;
	background-color: orange;
	border-radius: 15px;
	min-height: 40px;
}

.btn-red {
  font-size: 13px;
  font-weight: bold;
	border: 2px solid;
	border-color: white;
	background-color: crimson;
  color:whitesmoke;
	border-radius: 15px;
	min-height: 40px;
}


.register-form {
  width: 600px;
  max-width: 600px;
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}

.register-form form {
  margin-bottom: 15px;
  background: #f7f7f7;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
  padding: 30px;
}

th.dashboard {
	font-weight: bold;
	font-size: 16px;
	text-transform: uppercase;
}

th.dashboardh {
	font-weight: bold;
	font-size: 13px;
	text-transform: uppercase;
	text-align: center;
}

.dashwrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: minmax(40px, auto);
  gap: 40px;
}

div.dashboardaz {
	padding: 30px;
  font-size: 13px;
  font-weight: bold;
	border: 2px solid;
	border-color: black;
	background-color: #a6e1ec;
	border-radius: 15px;
}

div.dashboardor {
	padding: 30px;
  font-size: 13px;
  font-weight: bold;
	border: 2px solid;
	border-color: black;
	background-color: orange;
	border-radius: 15px;
}

div.dashboardgr {
	padding: 30px;
  font-size: 13px;
  font-weight: bold;
	border: 2px solid;
	border-color: black;
	background-color: darkseagreen;
	border-radius: 15px;
}

div.dashboardye {
	padding: 30px;
  font-size: 13px;
  font-weight: bold;
	border: 2px solid;
	border-color: black;
	background-color: #ffc;
	border-radius: 15px;
}


div.header {
  width: 100%;
  left: 0px;
  right: 0px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
}

div.toolheader {
  width: 100%;
  left: 0px;
  right: 0px;
	color: white;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
	padding-bottom: 10px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
}

div.notice {
  width: 90%;
  left: 0px;
  right: 0px;
  margin-left:auto;
  margin-right: auto;
  margin-top: 30px;
  padding: 10px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  border: 1px solid;
  border-radius: 10px;
  background-color: #ffc;  
}

div.buttonbar {
  width: 90%;
  left: 0px;
  right: 0px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 40px;
  font-size: 16px;
  font-weight: bold;
  text-align: left;
}

.content {
	position: absolute;
	left: 200px;
  right: 0px;
	margin-left:10px;
	margin-right:10px;
	padding-left: 30px;
	padding-right: 30px;
}

div.codice-app {
  font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size : 12px;
	font-weight: bold;
	color:#f7f7f7;
	width: 200px;
	position: absolute;
	bottom: 150px;
	left: 0px;
	text-align: center;
}


div.bottom-logo {
	width: 200px;
	position: absolute;
	bottom: 80px;
	left: 0px;
	text-align: center;
}
.onoffswitch {
	position: relative; width: 200px;
	-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
	position: absolute;
	opacity: 0;
	pointer-events: 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: 36px; padding: 0; line-height: 36px;
	font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
	box-sizing: border-box;
}
.onoffswitch-inner:before {
	content: "Visualizza solo attivi";
	padding-left: 10px;
	background-color: #000000; color: #FFFFFF;
}
.onoffswitch-inner:after {
	content: "Visualizza tutti";
	padding-right: 10px;
	background-color: #EEEEEE; color: #999999;
	text-align: right;
}
.onoffswitch-switch {
	display: block; width: 19px; margin: 8.5px;
	background: #FFFFFF;
	position: absolute; top: 0; bottom: 0;
	right: 160px;
	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; 
}

.collapse { padding-left:0px; }
.margin-top{margin-top: 20px;}
.navbar-header{float:none;text-align: center; position: absolute; left:0; right:0; background: #3d3d3d;}

/* top bar */
.navbar {text-transform: uppercase;background-color: #0c0c0c;border: none}
.navbar a  {color:#fff;font-weight: 300;text-decoration: none}
.navbar-default .navbar-brand {color:#fff;font-weight: bold;margin:0;line-height: 50px;float:none; margin-left: auto; margin-right: auto; width: 60px;}
.brand {color:#fff;font-weight: bold; margin:0;line-height: 50px; position: fixed; left: 50%; float: none;}

.logo{position: absolute;top:5px; left:15px; background-color: #3d3d3d;}

.icon{margin-bottom: 8px;margin:0;padding: 15px 15px; float:right;}


/* toggle button */
.navbar-toggle{border: none;color:#fff;margin:0;padding: 18px 15px; border-radius: 0px; position:absolute; left: 150px;}
.navbar-default .navbar-toggle,
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:active,
.navbar-default .navbar-toggle:focus {background-color: #3d3d3d;}
.navbar-default .navbar-toggle .icon-bar {background-color: #fff;}

/* Position where the element is fixed */
.affix {top: 50px; width: 200px; }
#affix {width: 200px;}

.nav li a {border-bottom: 1px solid #ddd; color:#7b7a7e;}
.nav li a:focus {background-color: #3d3d3d; color: #fff;}
.nav li a i {margin-right:10px;}

/* list */ 
.ux-mood{font-size: 18px; font-weight: 300;margin-bottom: 40px}
.ux-mood li{margin-bottom: 10px}
.upper{text-transform: uppercase; font-weight: bold}

.sidebar-offcanvas{-webkit-transition: all 0.3s ease-in-out;
									 -moz-transition: all 0.3s ease-in-out;
									 -ms-transition: all 0.3s ease-in-out;
									 -o-transition: all 0.3s ease-in-out;
									 transition: all 0.3s ease-in-out;

									 width:200px;
									 background-color: #3d3d3d;
									 z-index: 51;
									 margin: 0; padding: 0;
									 position: fixed;
									 top:50px;
									 left: 0px;
									 height:100%;
}
.sidebar-offcanvas ul li a{color:#fff;padding: 15px 20px;margin:0;font-size: 15px;border-bottom: 1px solid white;background:#3d3d3d;}
.sidebar-offcanvas ul li a.attivo{color:#fc575e;padding: 15px 20px;margin:0;font-size: 15px;font-weight:bolder;border-bottom: 1px solid white;background:#3d3d3d;}
.sidebar-offcanvas ul li a:hover{background:#ffffff; color: black;border:none; border-radius:0}


@media screen and (max-width: 1000px) {
	.dashwrapper {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		gap: 40px;
	}
}
/* collapsed sidebar styles */
@media screen and (max-width: 767px) {
	.affix {position: static;}
	#affix{width: 100%;}
	.sidebar-offcanvas{-webkit-transition: all 0.3s ease-in-out;
										 -moz-transition: all 0.3s ease-in-out;
										 -ms-transition: all 0.3s ease-in-out;
										 -o-transition: all 0.3s ease-in-out;
										 transition: all 0.3s ease-in-out;

										 width:200px;
										 background-color: #3d3d3d;
										 z-index: 51;
										 margin: 0; padding: 0;
										 position: fixed;
										 top:50px;
										 left: -70%;
	}
	.brand {display:none;}
	.sidebar-offcanvas ul li{margin:0}
	.sidebar-offcanvas ul li a{color:#fff;padding: 15px 20px;margin:0;font-size: 15px;border-bottom: 1px solid #ffffff}
	.sidebar-offcanvas ul li a:hover{background:#ffffff; color:black; border:none; border-radius:0}
	.nav{margin-top: 0px;}
	.nav > li > a:hover, 
	.nav > li > a:focus{background-color: #3d3d3d}
	.active {left: 0;}
	.content {position: absolute; left: 0px; padding-left: 5px; padding-right: 5px;}
  .logo{position: absolute;top:5px; left:20px; background-color: #3d3d3d;}
}

@media screen and (max-width: 600px) {
	.login-form {
		min-width: 340px;
		position:inherit;
		/* bring your own prefixes */
		border-radius: 5px;
		background-color: #f2f2f2;
		padding: 20px;
		max-width: 600px;	
		top: 0;
		left: 0;
		/* bring your own prefixes */
		transform: translate(0,0);
	}
}