/* Welcome to Compass.
 * In this file you should write your main styles. (or centralize your imports)
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */

@import "compass" ;

$color1: #BB8757 ;
$color2: #F8F1DD ;

.clr {
	clear: both ;
}

a {
    color: $color1; 
    
    &:hover, &:focus, &:active {
        color: darken($color1, 10) ;
    }
}

.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
    background-color: $color1 ;
    border: solid 1px $color1 ;
}
.pagination > li > a, .pagination > li > span {
    color: $color1 ;
    &:hover {
        color: darken($color1, 10) ;
    }
}

.wrap {
    .btn-primary, 
    .btn-success {
        background-color: $color1 ;
        border: solid 1px $color1 ;

        &:hover, &:focus, &:active {
            background-color: darken($color1, 10) ;
            border: solid 1px darken($color1, 10) ;
        }
    }
}

.nav-header {
    .retour-site {
        border-left : solid 1px #9d9d9d ;
        padding: 10px 15px ;
    }
}

.navbar-brand {
    .logo {
        height: 40px ;
        position: relative ;
        top: -10px ;
    }
}

.container-body {
    padding-top: 117px ;
    padding-bottom: 50px ;
}

.nom-boulange {
    margin-bottom: 15px ;
    text-align: left ;
    position: fixed ;
    top: 51px ;
    left: 0px ;
    width: 100% ;
    background-color: $color1 ;
    color: white ;
    z-index: 100 ;
    font-size: 20px ;
    padding: 8px 15px ;
}

.table {
    thead {
        th.actions {
            width: 220px ;
        }
        th.order {
            width: 58px ;
        }
        th.actif {
            width: 75px ;
            text-align: center;
        }
    }
    tbody {
        td.center {
            text-align: center ;
        }
    }
}

#page-commande {

        #row2 {
            
        }
    
	h1 {
		.btn-group {
			float: right ;
		}
	}
	
	#jours-production {
		display: none ;
	}
	
	#calendar {
            
                h2 {
                    font-size: 20px ;
                    position: relative ;
                    top: 3px ;
                }
            
		.fc-header-title {
			margin-left: 10px ;
		}
		
		$back-day-with-event: lighten(#FDD44B,13) ; 
		//$back-day-with-event: #FDD44B ;
		.dayWithEvent { 
			background-color: $back-day-with-event ; 
			cursor: pointer;
		}
		.fc-event-container {display: none;}
		.fc-today {
			border-bottom: solid 1px #C9302C ;
			background-color: white ;
			
			&.dayWithEvent {
				background-color: $back-day-with-event ;	
			}
		}
		
		.fc-day {
			cursor: pointer ;
			text-align: center ;
			&:hover {
				@include box-shadow(0px 0px 2px black inset) ;
			}
		}
		
		.current-date {
			@include box-shadow(0px 0px 2px black inset) ;
		}
		
		.fc-day-number {
			float: none ;
			padding-top: 2px ;
		}
	}
	
	#produits-production {
            
            .overflow {
                //max-height: 400px ;
                //overflow-y: scroll ;
                
                table {
                    width: 100%;
                }

                thead, tbody, tr, td, th { display: block; }

                tr:after {
                    content: ' ';
                    display: block;
                    visibility: hidden;
                    clear: both;
                }

                thead th {
                    height: 30px;

                    /*text-align: left;*/
                }

                tbody {
                    height: 200px;
                    overflow-y: auto;
                }

                thead {
                    /* fallback */
                }

                thead th {
                    width: 32%;
                    float: left;
                }
                
                tbody td{
                    width: 33%;
                    float: left;
                }
            }
            
            input.quantite-max {
                background-color: white;
                border: 1px solid #e0e0e0;
                text-align: center;
                width: 50px;
            }

            td {
                label {
                    font-weight: normal ;
                }
            }
	}
	
	.form-commandes-point-vente {
	
		margin-top: 20px ;
                
                table {
                    border-bottom: solid 1px #e0e0e0 ;
                }
                
		.title-point-vente {
			background-color: lighten(#fdd44b, 30) ;
			border-left: solid 3px $color1 ;
			font-weight: bold ; 
                        text-align: left ;
                        padding: 10px ;
		}
                
                .title-totaux {
                    text-align: center ;
                }
                
                .border-left {
                    border-left: solid 1px #e0e0e0 ;
                }
                
                .border-right {
                    border-right: solid 1px #e0e0e0 ;
                }
	
		input.quantite {
			//width: 50px ;
                        width: 30px ;
			background-color: white ;
			border: solid 1px #e0e0e0 ;
			text-align: center ;
		}
		
		.td-produit {
			text-align: center ;
		}	
	
		.submit-pv {
			float: right ;
		}
		
		.select-user {
			background-color: #F9F9F9 ;
			border: solid 1px #e0e0e0 ;
		}
		
		.date-commande {
			font-size: 12px ;
		}
		
		.datepicker, .text {
			background-color: white ;
			border: solid 1px #e0e0e0 ;
			margin-top: 3px ;
			width: 100px ;
		}
		
		
		td.center {
			text-align: center ;
		}
                
                
	
		.depasse {
			color: #b32815 ;
		}
	
		.total strong span {
			font-weight: normal ;
			font-size: 13px ;
		}
		
		.vrac {
			display: none ;
		}
                
                td.client {
                    text-align: left ;
                    padding: 3px ;
                    .date-commande {
                        color: gray ;
                    }
                }
	
	}
        
        .table-header-rotated th.row-header{
            //width: auto;
          }

          .table-header-rotated td{
            width: 20px;
            padding: 0px ;
            border-top: 1px solid #dddddd;
            border-left: 1px solid #dddddd;
            border-right: 1px solid #dddddd;
            vertical-align: middle;
            text-align: center;
          }

          .table-header-rotated th.rotate-45{
            height: 80px;
            width: 20px;
            min-width: 20px;
            max-width: 20px;
            position: relative;
            vertical-align: bottom;
            padding: 0;
            font-size: 12px;
            line-height: 0.8;
          }

          .table-header-rotated th.rotate-45 > div{
            position: relative;
            top: 0px;
            left: 40px; /* 80 * tan(45) / 2 = 40 where 80 is the height on the cell and 45 is the transform angle*/
            height: 100%;
            -ms-transform:skew(-45deg,0deg);
            -moz-transform:skew(-45deg,0deg);
            -webkit-transform:skew(-45deg,0deg);
            -o-transform:skew(-45deg,0deg);
            transform:skew(-45deg,0deg);
            overflow: hidden;
            border-left: 1px solid #dddddd;
            border-right: 1px solid #dddddd;
            border-top: 1px solid #dddddd;
          }

          .table-header-rotated th.rotate-45 span {
            -ms-transform:skew(45deg,0deg) rotate(315deg);
            -moz-transform:skew(45deg,0deg) rotate(315deg);
            -webkit-transform:skew(45deg,0deg) rotate(315deg);
            -o-transform:skew(45deg,0deg) rotate(315deg);
            transform:skew(45deg,0deg) rotate(315deg);
            position: absolute;
            bottom: 30px; /* 40 cos(45) = 28 with an additional 2px margin*/
            bottom: 16px; // pour width 20px
            left: -25px; /*Because it looked good, but there is probably a mathematical link here as well*/
            left: 0px ;
            display: inline-block;
            // width: 100%;
            width: 85px; /* 80 / cos(45) - 40 cos (45) = 85 where 80 is the height of the cell, 40 the width of the cell and 45 the transform angle*/
            width: 43px ;
            text-align: left;
             white-space: nowrap; /*whether to display in one line or not*/
          }
	
	
	
}


#email-masse-form {
    #ids-users {
        line-height: 30px ;
        .label {
            text-transform: capitalize ;
        }
    }
}

.produit-create {
    #jours-production {
        .form-group {
            float: left ;
            margin-right: 15px ;
            
            label {
                font-weight: normal ;
            }
        }
    }
    .field-produit-id_etablissement {
        display: none; 
    }
}