#macchine {
	text-align: left;
	margin-left: 40px;
}

A.link_macchina {
	color: #29314e;
	text-decoration: none;
}

DIV.macchina {
	display: inline-block;
	width: 200px;
	vertical-align: top;
	text-align: left;
	color: #333;
    position: relative;
} 
DIV.box.macchina.bg_red {
	background: #ac3737;
}
DIV.box.macchina.bg_yellow {
	background: #c8be6c;
}
DIV.box.macchina.bg_green {
	background: #8eae8e;
}

DIV.icons {
	position: absolute;
	right: 5px;
	top: 5px;
}
DIV.icons I {
	padding: 5px;
	margin-left: 1px;
	display: inline-block;
	width: 1em;
	text-align: center;
}
DIV.icons I.red_inverse {
	color: white;
	background: red;
}
DIV.icons .idle {
	opacity: .2;
}

DIV.macchina.read_only {
	background: gray;
}
DIV.macchina.read_only A {
	cursor: default;
}
DIV.macchina.read_only A.new_button {
	display: none; 
}

DIV.macchina DIV.nome {
	margin-bottom: 2px;
	overflow: hidden;
	height: 22px;		
	cursor: pointer;
}
DIV.macchina DIV.nome DIV.lavorazione {
	position: absolute;
	margin: -24px 0 0 -9999px;
	background: #fff;
	padding: 2px 5px;
	z-index: 3;
	border: solid 1px #aaa;
	border-radius: 5px;
	opacity: 0;
	transition: 1s opacity;	
}
DIV.macchina DIV.nome:hover DIV.lavorazione {
	margin-left: 0px;
	opacity: 1;
}
	
DIV.macchina LABEL {
	margin-top: 4px;
	font-size: 11px;
	display: block;
	text-align: left;
}
DIV.macchina DIV.risorse,
DIV.macchina DIV.commesse {
	background: #000;
	color: #FFF;
	padding: 2px;
	border-radius: 3px;
	text-align: left;
	position: relative;
	font-size: 12px;
	height: 68px;
	overflow-y: scroll;
	overflow-x: hidden;
}
DIV.macchina DIV.risorse {
	height: 40px;
}

DIV.macchina DIV.risorse A.risorsa,
DIV.macchina DIV.commesse A.commessa {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	background-color: black;
	padding: 2px 0 1px 18px;	
	color: #aaa;
}
DIV.macchina DIV.risorse A.risorsa:hover,
DIV.macchina DIV.commesse A.commessa:hover {
	overflow: visible;
	text-decoration: none;
	background: #006; 
}
DIV.macchina DIV.commesse A.commessa.pausa {
	background-image: url('../img/pausa.png');
	background-position: top left;
	background-repeat: no-repeat;
	color: #fff;
}
DIV.macchina DIV.commesse A.commessa.open {
	background-image: url('../img/gear.gif');
	background-position: top left;
	background-repeat: no-repeat;
	color: #fff;
}
DIV.macchina DIV.risorse A.risorsa.open {
	background-image: url('../img/gear.gif');
	background-position: top left;
	background-repeat: no-repeat;
	color: #fff;
}


DIV.macchina A.new_button {
	background: #008000;
	display: inline-block;
	position: absolute;
	margin-left: 175px;
	margin-top: -13px;
	font-size: 9px;
	text-align: center;
	padding: 1px 10px;
	border-radius: 2px;
}
DIV.macchina A.new_button:hover {
	text-decoration: none;
	background: lime;
}

#popup {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,.8);
	z-index: 1; 
	display: none;
	padding-top: 5%;
}

DIV.button {
	display: inline-block;
	margin: 3px;
	background: #000;
	border-radius: 5px;
	border: solid 1px #808080;
	padding: 2px 5px;
	width: 250px;
}
DIV.button:hover {
	color: white;
	cursor: pointer;
}

DIV.buttons {
/*	text-align: center; */
	margin-top: 10px;
}

DIV.title {
	width: 300px;
	margin-bottom: 10px;
}
DIV.title B {
	font-size: larger;
}

#info_risorsa,
#info_commessa {
	margin: 6px 1px 6px 180px;
	font-size: 12px;
	text-align: left;
}

.box FORM LABEL {
	display: inline-block;
	width: 170px;
	text-align: right;
	margin-right: 10px;
}
#show_ending {
	font-size: 12px;
	color: black;
}
DIV.hidden {
	display: none;
}

DIV#zone {
	margin-bottom: 1em;
}

DIV#zone A {
	display: inline-block;
	margin: 3px;
	background: #161737;
	border-radius: 5px;
	border: inset 1px #615E7B;
	padding: 2px 5px;
	width: 10em;
	color: #6C7291;
}
DIV#zone A:hover {
	text-decoration: none;
}

DIV#zone A.selected {
	color: white;
	background: black;
}

IMG.wrench {
	position: absolute;
	right: 15px;
	top: 9px;
	transition: .5s;
}
IMG.wrench.idle {
	opacity: 0.2;	
}
IMG.wrench.admin {
	cursor: pointer;
}
IMG.wrench.admin:hover {
	opacity: 1;
}

DIV.data.docs {
	overflow: hidden;
	padding-left: 3px;
	width: 205px;
	text-align: left;
}
DIV.data.docs A {
    color: rgb(0, 0, 255);
}

DIV.macchina.guasta {
    border-color: #444; 
    background-color: #686868;
}
DIV.macchina.guasta::after {
    content:'';
    position: absolute;
    right: 33px;
    top: 21px;
    transform: translate(-50%,-50%);
    width: 24px;
    height: 24px;
    background: url('../img/guasto.png');
    background-size: contain;
}