/**
 * 	CSS productionSreen - main.css
 *
 *  @author   Fabien BELLANGER
 *  @date		  2012/08/08
 *  @version	1.0
 */

/* GENERIQUES */
body {
    width: 						100%;
    height: 					100%;
    padding: 					0px;
    margin: 					0px;
    background-color: #333;
    color:						#eee;
    font-family:      Arial, Helvetica, sans-serif;
    font-size:				16px;
}
.clr {
    clear: both;
}
.bleu {
    color: #00ffff;
}
.jaune {
    color: #ffff00
}
.grisClair {
    color: #eee;
}
.orange {
    color: #c03000;
}
.vert {
    color: #02d511;
}
.orange {
    color: #fe9a2e;
}
.rose {
    color: #FF0080;
}

/* https://codepen.io/sosuke/pen/Pjoqqp */
.onSiteImg
{
    vertical-align: text-bottom; 
    filter: invert(68%) sepia(61%) saturate(1867%) hue-rotate(313deg) brightness(100%) contrast(97%);
}
.deliveryImg
{
    vertical-align: text-bottom; 
    filter: invert(85%) sepia(55%) saturate(2950%) hue-rotate(168deg) brightness(100%) contrast(85%);
}
.takeawayImg
{
    vertical-align: text-bottom; 
    filter: invert(87%) sepia(11%) saturate(1564%) hue-rotate(64deg) brightness(103%) contrast(97%);
}
.driveImg
{
    vertical-align: text-bottom; 
    filter: invert(99%) sepia(40%) saturate(4252%) hue-rotate(212deg) brightness(88%) contrast(96%);
}

.blueImg
{
    vertical-align: text-bottom; 
    filter: invert(85%) sepia(86%) saturate(7126%) hue-rotate(100deg) brightness(106%) contrast(101%);
}

#main_content {
    margin:		0px;
    padding:	0px;
}

/* ================ */
/* ZONE UTILISATEUR */
/* ================ */
#nav_zone {
    /*position: 					fixed;*/
    z-index: 						10;
    top:								0px;
    left:								0px;
    right:							0px;
    /*height: 						30px;*/
    padding:						4px;
    border-top-width: 	0px;
    border-bottom:			1px solid #aaa;
    background:         -webkit-linear-gradient(bottom, #222, #444);
    background:				  linear-gradient(to top, #222, #444);
    font-size:					15px;
    box-shadow: 				0px 0px 3px #eee;
    overflow: 					hidden;
}
#nav_zone #user_zone {
    float: 			right;
    width: 			40%;
    text-align: right;
}
#nav_zone #user_zone_name {
    display: 				inline-block;
    padding:				0px;
    margin:     		0px 5px 0px 0px;
    vertical-align:	middle;
    font-variant: 	small-caps;
}
#nav_zone #user_zone_logout {
    display: 				inline-block;
    background:			url('../images/logout_24x24.png') no-repeat center left;
    height: 				30px;
    width: 					26px;
    padding:				0px;
    margin:     		0px 0px 0px 5px;
    vertical-align:	middle;
}
#nav_zone #link_zone {
    float: 			left;
    width: 			59%;
    text-align: left;
}
#nav_zone #link_zone #link a.default, #nav_zone #link_zone #link a.activate {
    display: 				 inline-block;
    line-height: 		 28px;
    padding:				 0px 10px;
    margin:     		 1px 1px;
    vertical-align:	 middle;
    border-radius: 	 4px;
    border-width:		 0px;
    background:      -webkit-linear-gradient(bottom, #0e9c0e, #27c227);
    background:			 linear-gradient(to top, #0e9c0e, #27c227);
    font-size:			 16px;
    text-decoration: none;
    color:  				 #eee;
}
#nav_zone #link_zone #link a.activate {
    background: 	-webkit-linear-gradient(bottom, #e88100, #e88e3b);
    background: 	linear-gradient(to top, #e88100, #e88e3b);
    color:  			#eee;
}
#nav_zone #link_zone #link a.default:hover {
    background:     -webkit-linear-gradient(top, #0e9c0e, #27c227);
    background:			linear-gradient(to bottom, #0e9c0e, #27c227);
}
#nav_zone #link_zone #link a.activate:hover {
    background:     -webkit-linear-gradient(top, #e88100, #e88e3b);
    background:			linear-gradient(to bottom, #e88100, #e88e3b);
}
/* ============ */
/* MODULE SALES */
/* ============ */
#sales {
    padding: 0px 5px 5px 5px;
}
#sales .sale_container {
    position: 							relative;
    min-height:							80px;
    border: 								1px solid #eee;
    -moz-border-radius: 		6px;
    -o-border-radius: 			6px;
    -webkit-border-radius: 	6px;
    border-radius: 					6px;
    padding:								5px;
    margin-top: 						5px;
    background-color: 			#3a3a3a;
}
#sales .sale_container .sale_title {
    margin-bottom: 	5px;
    padding:				0px;
    margin:					0px;
}
#sales .sale_container .sale_title .sale_number {
    display: 				inline-block;
    width:					50%;
    text-align: 		left;
    vertical-align: middle;
    padding:				0px;
    margin:					0px;
}
#sales .sale_container .sale_title .sale_time {
    display: 				inline-block;
    width:					49%;
    text-align: 		right;
    vertical-align: middle;
    padding:				0px;
    margin:					0px;
}
#sales .sale_container .sale_customerNumber {
    display: inline-block;
    margin-top: 4px;
    padding: 3px 5px;
    margin-left: 20px;
    color: #FF80E4;
    border: 1px solid #FF80E4;
    border-radius: 3px;
    width: auto;
}
#sales .sale_container .sale_productsList,
#sales .sale_container .sale_composedProduct,
#sales .sale_container .sale_composedProduct .productsList {
    margin-left: 0px;
}
#sales .sale_container .sale_productsList .sale_product .sale_product_quantity,
#sales .sale_container .sale_composedProduct .sale_composedProduct_quantity {
    display: 				inline-block;
    text-align: 		right;
    vertical-align: middle;
    width: 					60px;
}
#sales .sale_container .sale_productsList .sale_product .sale_product_x,
#sales .sale_container .sale_composedProduct .sale_composedProduct_x {
    display: 				inline-block;
    text-align: 		center;
    vertical-align: middle;
    width: 					20px;
}
#sales .sale_container .sale_productsList .sale_product .sale_product_name,
#sales .sale_container .sale_composedProduct .sale_composedProduct_name {
    display: 				inline-block;
    text-align: 		left;
    vertical-align: middle;
}
#sales .sale_container .sale_productsList .sale_product .sale_subproductsList {
    display: 				inline-block;
    text-align: 		left;
    vertical-align: middle;
}
#sales .sale_container .sale_productsList .sale_product .sale_supplementsList {
    margin-left:		90px;
    text-align: 		left;
    vertical-align: middle;
}
#sales .sale_container .sale_productsList .sale_product .sale_supplementsList .add {
    padding-left: 20px;
    background: 	url("../images/add_16x16.png") no-repeat 0px 4px;
}
#sales .sale_container .sale_productsList .sale_product .sale_supplementsList .del {
    padding-left: 20px;
    background: 	url("../images/close_16x16.png") no-repeat 0px 4px;
}

#sales .sale_container .sale_productsList .sale_product .sale_product_comment {
    margin-left:		90px;
    text-align: 		left;
    vertical-align: middle;
}

#sales .sale_container .sale_productsList .sale_product .sale_product_comment .comment {
    padding-left: 20px;
    background: 	url("../images/info_32x32.png") no-repeat 0px 4px;
    background-size: 16px 16px;
}

.add_grid {
    padding-left: 20px;
    background: url("../images/add_16x16.svg") no-repeat 0px 4px;
    padding-top: 0.15em;
}

.del_grid {
    padding-left: 20px;
    background: url("../images/close_16x16.svg") no-repeat 0px 4px;
    padding-top: 0.15em;
}

#sales .sale_container .buttonsContainer {
    position: 							absolute;
    bottom: 								10px;
    right: 									10px;
}
#sales .sale_container .buttonState {
    display: 								inline-block;
    padding: 								5px;
    border-width:						0px;
    -moz-border-radius: 		5px;
    -o-border-radius: 			5px;
    -webkit-border-radius: 	5px;
    border-radius: 					5px;
    color: 									#eee;
    font-size: 							18px;
    text-decoration: 				none;
    background-color: 			#999;
  background:             -webkit-linear-gradient(top, #e62e2e, #c41818);
    background:				      linear-gradient(to bottom, #e62e2e, #c41818);
    cursor: 								pointer;
}
#sales .sale_container .buttonState:hover {
    background:             -webkit-linear-gradient(bottom, #e62e2e, #c41818);
    background:				      linear-gradient(to top, #e62e2e, #c41818);
}

.font22 {
    font-size: 22px;
}

.italic {
    font-style: italic;
}

.supp-del {
    border: solid 1px #fa8072;
    border-radius: 10px;
    padding: 5px;
    color: #fa8072;
    margin-bottom: 5px;
}

.supp-add {
    border: solid 1px #ACE18B;
    border-radius: 10px;
    padding: 5px;
    color: #ACE18B
}

/* --------- MEDIA QUERIES --------- */

@media screen and (max-width: 1400px)
{
    body
    {
        font-size: 14px !important;
    }
}

.salesGrid .saleGrid_container.late
{
    border: 3px solid red !important;
    border-left: 15px solid red !important;
}

.hour.late {
    color:red;
    font-weight: bold;
    font-size: 20px;
}