/* MAIN */
@font-face {
	font-family: "Lato";
	src: url('fonts/Lato-Light.ttf') format('tryuetype');
	font-weight:300;
}
@font-face {
	font-family: "Lato";
	src: url('fonts/Lato-Regular.ttf') format('tryuetype');
	font-weight:400;
}
@font-face {
	font-family: "Lato";
	src: url('fonts/Lato-Bold.ttf') format('tryuetype');
	font-weight:700;
}

:root {
	--bg-color: #EBF1F5;
	--menu-width-desktop: 220px;
	--menu-width-tablet: 90px;
	--menu-width-smartphone: 230px;
	--main-width-desk:77%;
	--menu-min-width-desktop:900px;
}


html, body {
	background:var(--bg-color);
	margin:0;
	font-weight:300;
	font-family: 'Lato', sans-serif;
	font-size:14px;
	color:#333;
	height:100%;
}

.strong {
	font-weight:700;
}

a {
	color:#656565;
	text-decoration: none;
}

.sep { 
	float:none; 
	font-size:0px; 
	height:0px; 
	line-height:0px; 
	margin:0; 
	padding:0; 
	clear:both;
}

.bb {
	border-bottom:1px solid #eaeaea;
}

.mtb10 {
	margin-top:10px;
	margin-bottom:10px;
}

HR {
	color:#ccc;
	margin:10px 0 10px 0;
	padding:0;
}

.FL {
	float:left;
}
.FR {
	float:right;
}

.ac {
	text-align:center;
}

.white {
	color:#F8F8FF;
}

.green {
	color:green;
}
.red {
	color:darkred;
}

.w_50 {
	width:50px !important;
}

.w_100 {
	width:100px !important;
}

.w_150 {
	width:150px !important;
}

.mr_10 {
	margin-right:10px;
}
.mr_30 {
	margin-right:30px;
}
.mr_50 {
	margin-right:50px;
}
.ml_10 {
	margin-left:10px;
}

.ml_30 {
	margin-left:30px;
}

.ml_50 {
	margin-left:50px;
}

.mt_10 {
	margin-top:10px;
}

.h_10 {
	height:10px;
}

.h_20 {
	height:20px;
}

.main {
	width:90%;
}

.main h1 {
	text-align: center;
	margin-top:0;
	padding-top:20px;
}


.left_col {
	position: fixed;
	top: 0;
	left: 0;
	width:var(--menu-width-desktop);
	height:auto !important;
	min-height:100%;
	color:white;
	background-color: #222d32;
}

.right_col {
	margin-left:var(--menu-width-desktop);
	width:var(--main-width-desk);
	min-width:var(--menu-min-width-desktop);
	background-color: #EBF1F5;
	min-height:100%;
	height:auto !important;
	padding:20px;
}


/* MENU */

@media screen and (max-width:900px) and (min-width:400px){
	body{
		padding-left:@menu-width-tablet;
	}
}

@media screen and (max-width:400px){
	body{
		padding-left:0;
	}
}


/* FORMULAIRE */

.brand_desc input[type=text], 
.customer_desc input[type=text], 
.customer_desc input[type=email] {
	font-size:14px;
	background-color:#fff;
	padding: 10px;
	border:1px solid #e7e7e7;
	border-bottom: solid 1px #999;
	transition: border 0.3s;
	color:#5a5350;
	margin-bottom:10px;
	width:250px;
}

.box input[type="password"] {
	font-size:14px;
	background-color:#fff;
	padding: 10px;
	border:1px solid #e7e7e7;
	border-bottom: solid 1px #999;
	transition: border 0.3s;
	color:#5a5350;
	margin-bottom:10px;
	width:250px;
}

.brand_input{
	padding:8px;
	display:block;
	border:none;
	border-bottom:1px solid #ccc;
	width:100%;
}

.brand_input_area{
	padding:8px;
	display:block;
	border:1px solid #ccc;
	width:95%;
}

.product_input_spec{
	padding:8px;
	display:block;
	border:none;
	border-bottom:1px solid #ccc;
	width:50%;
}


textarea {
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding:10px;
}

select {
	padding: 5px;
	border-radius: 4px;
}

/* NAV */

.search {
	margin-top:20px;
}
input[type="text"], input[type="email"], input[type="password"]   {
	font-size:14px;
	padding: 5px;
	border: solid 1px #183152;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus {
  border-bottom: solid 1px #183152;
  background-color:white;
}

.nav_header {
	background-color: #183152;
	width:100%;
	color:white;
	padding:10px;
	position: relative;
	height:50px;
}

.top_menu_btn {
	position: absolute; 
	top:15px;
	right:1%;
}



/* LEFT MENU */
.navigation {
  width: 220px;
}

.user_name {
	font-size:28px;
}
/* reset our lists to remove bullet points and padding */
.mainmenu, .submenu {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* make ALL links (main and submenu) have padding and background color */
.mainmenu a {
  display: block;
  background-color: #222d32;
  text-decoration: none;
  padding: 10px;
  color: #fff;
}

/* add hover behaviour */
.mainmenu a:hover {
    background-color: #C5C5C5;
}


/* when hovering over a .mainmenu item,
  display the submenu inside it.
  we're changing the submenu's max-height from 0 to 200px;
*/

.mainmenu li:hover .submenu {
  xdisplay: block;
  Xmax-height: 400px;
}

/*
  we now overwrite the background-color for .submenu links only.
  CSS reads down the page, so code at the bottom will overwrite the code at the top.
*/

.submenu a {
  xbackground-color: #999;
}

.submenu a i {
  font-size:9px;
  margin:0 5px 5px 10px;
}



/* hover behaviour for links inside .submenu */
.submenu a:hover {
  background-color: #666;
}

/* this is the initial state of all submenus.
  we set it to max-height: 0, and hide the overflowed content.
*/
.submenu {
  overflow: hidden;
  max-height: 0;
  -webkit-transition: all 0.5s ease-out;
}

.submenu.active {
  display: block !important;
  max-height: 400px !important;
}

.submenu.active li.active i {
	color:#3c8dbc;
}

li.active a {
	color:#3c8dbc;
}

.a_active {
	background-color: #11181c !important;
	border-left:2px solid #3c8dbc;
	color:#3c8dbc;
}


/* PAGES */

.flex {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.flex_box {
	width:250px;
	height:150px;
	background-color:white;
	border-radius:5px;
	flex-basis:25%;
	margin-right:20px;
	position:relative;
}

.flex_box_200 {
	max-width:200px;
	height:100px;
	background-color:white;
	border:solid 1px #cecece;
	border-radius:5px;
	flex-basis:25%;
	margin:20px;
	position:relative;
	padding:10px;
}

.flex_box_300 {
	min-width:200px;
	max-width:225px;
	height:100px;
	background-color:white;
	border:solid 1px #cecece;
	border-radius:5px;
	flex-basis:25%;
	margin:10px;
	position:relative;
	padding:10px;
}

.first {
	margin-left:35px;
}

.last {
	margin-right:0 !important;
}
.flex_box_300 > .cont {
	text-align:center;
}

.flex_box_300 > .cont > h2 {
	font-size:26px;
	margin-left:10px;
}

.flex_box_300 svg, .flex_box_300 i {
	margin:20px 0 0 20px;
	font-size:52px;
	color:#999;
}

.flex_box_400 {
	min-width:320px;
	max-width:320px;
	height:210px;
	background-color:white;
	border:solid 1px #cecece;
	border-radius:5px;
	flex-basis:25%;
	margin:20px;
	position:relative;
}

.flex_box_400 .img {
	float:left;
	width:105px;
	height:105px;
	margin:10px;
	padding:10px;
}

.flex_box_400 .img i {
	color:#efefef;
}

.flex_box_400 .content {
	float:right;
	padding:10px;
	max-width:155px;
	min-width:155px;
	line-height:1.5em;
}

.flex_box_400 .content H2 {
	font-size:20px;
	text-transform:lowercase;
	padding:0;
	margin:0;
	/*color:#e86a32;*/
	color:#999;
}

.flex_box_400 .links a {
	margin:10px;
}

.flex_box_400 .links i {
	color:#c2c2c2;
	font-size:19px;
}



.brand_action {
	text-align:center;
	width:120px;
	height:80px;
	margin:5px;
	padding-top:5%;
	color:white;
}

.brand_action {
	background-color:#183152;
	color:white;
	float:left;
}

.brand_action a {
	color:white;
}

.flex_box_300 > .cont {
	width:170px;
	position:absolute;
	top:10px;
	right:0;
}


button {
	font-size: 85%;
	background: #3c8dbc;
	border: none;
	padding: 6px;
	color: #fff;
	letter-spacing: 1px;
	text-transform: uppercase;
	cursor: pointer;
	display: inline-block;
	border-radius: 2px;
	font-weight: 400;
	outline: none;
	margin-top:-5px;
}

button i {
	color:white !important;
	font-size:15px !important;
}
button:hover,
button:active {
	background: #1e6893;
}

i:hover {
	color: #1e6893;
}

.brand_logo {
	width:45%;
	height:400px;
	margin:0 40px 0 40px;
	float:left;
	background-color:white;
	text-align:center;
	border:1px solid #cecece;
}

.brand_big_stat {
	width:45%;
	height:400px;
	margin-left:20px;
	float:left;
	background-color:white;
	border:1px solid #cecece;
}

.brand_desc, .product_desc {
	max-width:94%;
	margin:20px 0 0 40px;
	float:left;
	background-color:white;
	padding:10px;
	border:1px solid #cecece;
	position:relative;
}

.brand_desc h2 {
	text-align:center;
	width:150px;
	background-color:#cecece;
	padding:5px;
	position:absolute;
	top:-30px;
	left:10px; 
	color:white;
}

.brand_box {
	max-width:94%;
	margin:20px 20px 0 40px;
}

.brand_desc_col h3, .customer_desc > .brand_desc_col > h3 {
	text-align:center;
	font-size:18px;
}


.brand_desc_col, .customer_desc > .brand_desc_col {
	width:32%;
	float:left;
}

.product_desc h2 {
	text-align:center;
	width:550px;
	background-color:#cecece;
	padding:5px;
	position:absolute;
	top:-30px;
	left:10px; 
	color:white;
}

.product_img {
	float:left;
	width:580px;
	margin-right:20px;
	text-align: center;
}
.product_details {
	float:left;
	width:55%;
}

.product_stats {

}

/* TABLEAU */
.light-table-filter {
	height:50px;
	font-size:1.5em;
}
th {
  cursor: pointer;
}

tr:nth-child(2n+1) {
	background-color: #f2f2f2;
}

.customer_desc tr:nth-child(2n+1), .right_col tr:nth-child(2n+1) {
	background-color: #fff !important;
}

table {
	border-collapse:collapse;
	background-color:white;
}

tr#indextable {
	border-bottom:1px solid #f5f5f5;
}
tr#indextable:hover {
	background-color: #f5f5f5;
}

TD {
	padding:15px;
}

#upd_customer td, #upd_invoice td, #upd_shipping td {
	padding:5px;
}

.table thead th {
  position: sticky;
  top: 0;
}

.ligne2 {  
	background-color: #f2f2f2;
}
.ligne1 {
	background-color: #fff;
}

.blackTD {
	background-color:#222d32;
	color:#fff;
	font-size:15px;
	font-weight:500;
	padding:10px;
	text-align: left;
}

.bold {
	font-weight:bold;
}

#to_show {
	display:none;
}

.show_me:hover #to_show {
	display:block;
	width:100px;
	height:100px;
	z-index:100;
}

.sort {
	float:left;
	margin-right:10px;
}
.sort a {
	color:white;
}
.c_list_cont {
	padding: 20px;
    border-radius: 3px;
    display:none;
}

.customer_flex_box {
	min-width:250px;
	max-width:260px;
	height:100px;
	background-color:white;
	border:solid 1px #cecece;
	border-radius:5px;
	flex-basis:10%;
	margin:12px;
	padding:10px;
}

.customer_flex_box h2 {
	margin-top:5px;
}
.customer_flex_box i {
	font-size:14px;
}
.c_stats {
	font-size:26px;
}
.c_next {
	min-width:30px;
	max-width:30px;
}
.c_next i {
	margin:20px 0 10px 0;
}

th.blackTD a {
	color:white;
}


.customer_flag {
	width:100%;
	text-align:center;
}

.customer_nav {
	position:relative;
	margin:0 auto;
	width:90%;
}

.customer_header {
	float:left;
}

.search_client {
	float:left;
	margin:5px 0 0 150px;
}

.customer_menu {
	float:right;
	padding:10px;
}


/* FICHE CLIENT */
.c_card {
	width:94%;
	margin:0 auto;
	position:relative;
}

.c_card h1 {
	text-align:left;
	color:black;
}

.c_left_col {
	width: 25%;
	float:left;
}

.c_right_col {
	width: 69%;
	margin-left:40px;
	float:left;
}

.c_name {
	text-align:center;
	padding-bottom:10px;
	border-bottom:1px solid #ccc;
}

.customer_desc {
	width:100%;
	padding:10px;
}

.customer_desc h2 {
	text-align: center;
}

.box {
	width:100%;
	background-color: white;
	padding:10px;
	border-top:2px solid #3c8dbc;
	line-height: 1.5em;
}

.box ul {
	list-style-type: none;
	margin-left:-38px;
}

.box li {
	line-height: 3em;
	border-bottom:1px solid #eaeaea;
}

.history {
	height:400px;
	overflow: auto;
}

.hist_box_l {
	float:left;
	width:45%;
	margin-right:40px;
}

.hist_box_r {
	float:left;
	width:45%;
}

.pull-right {
	float:right;
}

.boxed_date {
	text-align:center;
	background-color: #459070;
	color:white;
	border-bottom:1px solid white;
}




/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 50px; /* Location of the box */
  left: 0px;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin-left: 300px;
  padding: 20px;
  border: 1px solid #888;
  width: 70%;
}

/* The Close Button */
.close, .close2 {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus,
.close2:hover,
.close2:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}