html,body{
    font-size: 14px;
    background-color: #f0f0f0;
}

/* body */
body,h1,h2,h3,h4,h5,h6 {
    font-family: "Source Sans Pro", sans-serif;
    color:#333333;
}
body{padding-left: 180px;}

h1{font-weight: 300}
/* NAV */
.w3-bar-block .w3-bar-item {padding:1rem}
.w3-top{
    height: 59px;
}
.w3-sidebar{
    left:0;
    height:100%;
    width: 180px;
    padding-top:64px;
    background-color: #001216;
    color:#ffffff;
}

.w3-main{
    margin-top:64px;
}
.w3-container{
    max-width: 100%;
    padding-left: 64px;
    padding-right: 64px;
    margin:0 auto;
}
.w3-content{
    max-width: none;
}

.w3-half.w3-padding{
    padding:0 1rem !important;
}
.w3-half.w3-padding:first-child{
    padding-left: 0 !important;
}
.w3-half.w3-padding:last-child{
    padding-right: 0 !important;
}

.w3-padding-top{padding-top: 1rem;}
.padding-left{padding-left: 1rem;}
.padding-right{padding-right: 1rem;}
.margin-top{margin-top: 1rem;}
.margin-bottom{margin-bottom: 1rem;}
.margin-left{margin-left: 1rem;}
.vertical-padding-32{padding-top:32px;padding-bottom: 32px;}
.vertical-padding-64{padding-top:64px;padding-bottom: 64px;}
.bordered-list{border-top: dotted 1px #999999;}
.bordered-list:first-child{border-top: 0px;}
.rounded-box{border-radius: 16px;}
.rounded-box-4{border-radius: 4px;}
.inline{display: inline-block;}
pre.descrizione{font-family: inherit;}
.bordered-gray{border:solid 1px #cccccc;}


/* ALLINEAMENTI */
.sx{text-align: left;}
.dx{text-align: right;}
.center{text-align: center;}
.justified{text-align: justify;}

/* COLORI */
.main-bg{background-color: #77dede;}
.main-color{color:#77dede}
.dark-gray{color:#999999}
.light-gray{color:#cccccc}
.bg-light-gray{background-color:#cccccc}
.warning-row{
    background: #cc000033;
    margin: 0 -64px;
    padding: 1rem 64px;
}

/* lavoro fatturabile */
.stato-lavoro-0{border-left: solid 6px #990000;}
/* lavoro non fatturabile */
.stato-lavoro-1{border-left: solid 6px #999999;}
/* lavoro già fatturato */
.stato-lavoro-2{border-left: solid 6px #009900;}

/* TYPO */
.font-2x{font-size: 2rem;}
.font-3x{font-size: 3rem;}
.font-4x{font-size: 4rem;}

.bordered-list a{text-decoration: none;}

/* DataTables */
table.dataTable tbody th, table.dataTable tbody td{
    padding: 6px 12px;
}
table.dataTable thead th, table.dataTable thead td, table.dataTable.no-footer{border-bottom: none;}
table.dataTable td a{text-decoration: none;}
table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover{background-color: #eeeeee}

/* Modal */
.w3-modal{
    padding-top: 36px;
}
.w3-modal-content{
    padding:2rem
}
.w3-display-topright{
    font-size: 18px;
    font-weight: bold;
}
.w3-light{opacity:0.5}

.w3-container header.commessa .fa {
    color:#cccccc;
    margin:0 8px;
    float:right;
    cursor: pointer;
}

.topbar{
    background: #333333;
    color: #ffffff;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 2px 0px 2px 8px;
}

.close-button{
    float: right;
    margin-top: -2px;
    margin-bottom: -2px;
    padding: 0px 8px;
    cursor: pointer;
    font-size: 16px;
}
.close-button:hover{background-color: #cc0000;}

/* forms */
#loginForm{
    background: #ffff;
    border-radius: 8px;
    box-shadow: 2px 2px 10px #00000033;
    font-size: 18px;
}
.form-element{margin:2rem auto;}
label{
    font-size: 12px;
    font-weight: 400;
    color: #999999;
    text-transform: uppercase;
}

option[value=""] {
  display: none;
}
select:required:invalid {
  color: #999999;
}
option {
  color: initial;
}
/*RADIOBUTTON*/
.radio-toolbar{
    background: #eeeeee;
    width: fit-content;
    border-radius: 8px;
}
.radio-toolbar .radio-item{
    display: inline-block;
    position: relative;
    padding: 8px 0px;
}
.radio-item input[type="radio"] {
    position:absolute;
    visibility:hidden;
    padding: 8px 0px;
}
.radio-item input[type="radio"] + label{
    padding: 10px 16px;
    cursor: pointer;
}
.radio-toolbar input[type="radio"]:checked, .radio-toolbar input[type="radio"]:checked + label {
    background-color:#3f51b5;
    color:#ffffff;
}
.radio-item input[type="radio"]{
    outline:none;
    box-shadow: none;
}    


/* SEZIONI */
/* commesse */
.commesse header{position: relative;}
.commesse header button{
    position: absolute;
    top:0;
    right:0;
}
.note-lavoro{
    white-space: break-spaces;
    margin-top:0.5rem;
}
/* MANAGEMENT */
.stato{
    height:18px;
    border-left:solid 18px;
    padding-left: 4px;

}
.stato-chiuso{border-left-color:#00cc00;}
.stato-aperto{border-left-color:#cc0000;}
.stato-analisi{border-left-color: #0066cc;}
.stato-sospeso{border-left-color:#cccccc;}


DEBUG 
.error{
    width:480px;
    margin: 0 auto;
}
.error td{
    padding: 1rem;
    border: solid 1px #cc0000;
}
.error td:nth-child(2){
    background: #cc000033;
}

/* RESPONSIVE */
@media (max-width: 992px){
    body{padding-left: 0px}
    nav{display: none;}
    .w3-container{
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .w3-modal-content{width:calc(100% - 2rem);}
}

/*<!-- VECCHIO -->*/
/*
/* BOX-MODEL */
/*.inline{
	display: inline-block;
}
.full-center-conatiner{
    text-align: center;
    white-space: nowrap;
    position: absolute;
    top: -1rem;
    left: 0;
    height: 100%;
    width: 100%;
}
.full-center-conatiner:before{
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.full-center-content{
    display: inline-block;
    vertical-align: middle;
}

#loader{
	position:fixed;
	top:0;
	left:0;
	width:100vw;
	height:calc(100vh - 1rem);
	background-color: rgba(255,255,255,0.9);
	z-index: 99;
	padding-top: calc(50vh - 5rem);
	text-align:center;
	font-size:4rem;
}
nav ul li{
	padding: 1rem;
}
 TYPO 
.material-icons{font-size: 1rem;}
.font-2x{font-size: 200%;}
.font-3x{font-size: 300%;}
.font-4x{font-size: 400%;}
@media (max-width: 960px) {
	nav ul.inline{display:none;}
}
*/