/* style principal de stockManagement */

/* INITIALISATION DES BALISES COMPLEXE */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
  display: block;
}
audio,
canvas,
video {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}
audio:not([controls]) {
  display: none;
}
html {
  font-size: 1em;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
a{
	color: inherit;
	text-decoration: none;
}
a:focus {
  outline: thin dotted #333;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
a:hover,
a:active {
  outline: 0;
}
sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
img {
  /* Responsive images (ensure images don't scale beyond their parents) */

  max-width: 100%;
  /* Part 1: Set a maxium relative to the parent */

  width: auto;
  /* IE7-8 need help adjusting responsive images */

  height: auto;
  /* Part 2: Scale the height according to the width, otherwise you get stretching */

  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic;
}
#map_canvas img,
.google-maps img {
  max-width: none;
}
button,
input,
select,
textarea {
  margin: 0;
  font-size: 100%;
  vertical-align: middle;
  outline: none;
}
button,
input {
  *overflow: visible;
  line-height: normal;
  user-select: none;
}

input{
	background: #fff;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  padding: 0;
  border: 0;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}
label,
select,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
input[type="radio"],
input[type="checkbox"] {
  cursor: pointer;
  user-select: none;
  outline: none;
}
input[type="search"] {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  -webkit-appearance: textfield;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
textarea {
  overflow: auto;
  vertical-align: top;
}

label{
	font-style: italic;
}

hr {
    border: 0.5px solid #38d97b;
    margin: 20px 0 40px;
}

caption {
    color: #333;
    font-weight: bold;
    font-size: medium;
    padding: 10px;
}

@media print {
  * {
    text-shadow: none !important;
    color: #000 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  .ir a:after,
  a[href^="javascript:"]:after,
  a[href^="#"]:after {
    content: "";
  }
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  img {
    max-width: 100% !important;
  }
  @page  {
    margin: 0.5cm;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
}

::-webkit-input-placeholder {
  /* WebKit, Blink, Edge */
  color: #403f3e;
  font-weight: 300;
}

:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #403f3e;
  opacity: 1;
  font-weight: 300;
}

::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #403f3e;
  opacity: 1;
  font-weight: 300;
}

:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #403f3e;
  font-weight: 300;
}

::-ms-input-placeholder {
  /* Microsoft Edge */
  color: #403f3e;
  font-weight: 300;
}

th,td{
	vertical-align: bottom;
	padding: 6px;
	border-collapse: collapse;
	border: 1px solid #fcfcfc;
}

tr:nth-child(even){
	background: #fbf9fc;
}

input[type="image"]{
	width: 30px;
	display: inline-block;
	margin: auto 10px;
	background: #27ae60;
    border-radius: 3px;
    padding: 2px;
    vertical-align: super;
}

h1,h2,h3,h4,h5,h6, p{
	margin: 0;
	padding: 0;
}

em{
	font-style: normal;
}

a{
	text-decoration: none;
	color: inherit;
	line-height: 1.7em;
	cursor: pointer;
}

a.color{
	color: #7985c1;
}

a:hover{
	font-weight: 600; 
}


*{
	-webkit-transition: all 0.6s cubic-bezier(0.075,0.82,0.165,1);
	-moz-transition: all 0.6s cubic-bezier(0.075,0.82,0.165,1);
	-o-transition: all 0.6s cubic-bezier(0.075,0.82,0.165,1);
	transition: all 0.6s cubic-bezier(0.075,0.82,0.165,1);
}

body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  font-family: "Helvetica Neue", monospace, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #2F4F4F;
  overflow-x: hidden;
  
  background: url(../img/battle.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  
  background-image: -webkit-linear-gradient(45deg, rgb(22, 220, 55) 10%, #77d5f7 100%);
}

.main-container{
	position: relative;
	margin: 0;
	padding: 0;
}

.flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
}

.inline-flex {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -moz-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

.flex-grow {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -moz-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

.flex-wrap {
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.flex-left {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  -webkit-justify-content: flex-start;
  -moz-justify-content: flex-start;
  justify-content: flex-start;
}

.flex-middle {
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center;
}

.flex-right {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  -webkit-justify-content: flex-end;
  -moz-justify-content: flex-end;
  justify-content: flex-end;
}

.flex-top {
  -webkit-align-self: flex-start;
  -moz-align-self: flex-start;
  -ms-flex-item-align: start;
  align-self: flex-start;
}

.flex-center {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  justify-content: center;
}

.flex-bottom {
  -webkit-align-self: flex-end;
  -moz-align-self: flex-end;
  -ms-flex-item-align: end;
  align-self: flex-end;
}

.space-between {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between;
}

.space-around {
  -ms-flex-pack: distribute;
  -webkit-justify-content: space-around;
  -moz-justify-content: space-around;
  justify-content: space-around;
}

.flex-column {
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.flex-cell {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -moz-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

.display-table {
  display: table;
}

.display-grid {
  display: grid;
  gap: 20px;
}

.grid-2-column-auto {
	grid-template-columns: auto auto;
}

.grid-2-column-egal {
	grid-template-columns: 1fr 1fr;
}

.grid-3-column-auto {
	grid-template-columns: auto auto auto;
}

.grid-3-column-egal {
	grid-template-columns: 1fr 1fr 1fr;
}

.grid-4-column-auto {
	grid-template-columns: auto auto auto auto;
}

.grid-4-column-egal {
	grid-template-columns: 1fr 1fr 1fr 1fr;
}

.grid-2-column-panel{
	grid-template-columns: 1fr 3fr;
}

.grid-2-column-panel-content{
	grid-template-columns: 1fr 2fr;
}

.logo{
	width: 100px;
	height: auto;
	display: inline-block;
	margin: auto 10px;
	vertical-align: middle;
}

.colored-text{
	color: #0ea961;
}

.input-container {
    display: flex;
	height: 30px;
	margin: 10px 0;
	border: 1px solid #d7d0d0;
	padding: 10px 6px;
	border-radius: 5px;
	background: #fff;
}

.textarea-container {
    display: flex;
	height: 60px;
	margin: 10px 0;
	border: 1px solid #d7d0d0;
	padding: 10px 6px;
	border-radius: 5px;
	background: #fff;
	box-sizing: border-box;
}

.input-container > input, .input-container > select {
    flex: 1;
	border: none;	
	outline: none;
}

.textarea-container textarea {
	flex: 1;
	border: none;	
	outline: none;
	resize: none;
	height: 100%;
	width: 100%;
}

label.location {
	background: url(../icones/placeholder.png);
}
label.url {
	background: url(../icones/internet.png);
}
label.pays {
	background: url(../icones/worldwide.png);
}
label.search {
	background: url(../icones/icons8-rechercher-plus-100.png);
}
label.tel {
	background: url(../icones/icons8-téléphone-100.png);
}
label.mail {
	background: url(../icones/icons8-gmail-100.png);
}
label.hotel {
	background: url(../icones/icons8-société-100.png);
}
label.voiture {
	background: url(../icones/icons8-voiture-100.png);
}
label.password {
	background: url(../icones/icons8-mot-de-passe-100.png);
}
label.user {
	background: url(../icones/icons8-utilisateur-masculin-100.png);
}
label.date {
	background: url(../icones/icons8-heures-supplémentaires-100.png);
}
label.text {
	background: url(../icones/icons8-clavier-100.png);
}

.input-container > label{
    width: 30px;
	padding-left: 30px;
	box-sizing: border-box;
	overflow: hidden;
		background-position-x: 0%;
		background-position-y: 0%;
		background-repeat: repeat;
		background-size: auto;
	background-position: left;
	background-repeat: no-repeat;
	background-size: contain;
}


.btn, input[type="submit"], input[type="button"], button {
	position: relative;
	line-height: 20px;
	border: 1px solid #0ea961;
	background: transparent;
	padding: 10px;
	display: block;
	width: fit-content;
	max-width: 600px;
	color: #0ea961;
	margin: 10px 0;
	cursor: pointer;
	outline: none;
	overflow: hidden;
	z-index: 1;
}

.btn:focus, input[type="submit"]:focus, input[type="button"]:focus, button:focus{
	color: #fff;
	font-weight: 500;
	border-color: #0ea961;
	background: #0ea961;
}

.btn::before, input[type="submit"]::before, input[type="button"]::before, button::before{
	content: "";
	background: #0ea961;
	position: absolute;
	bottom:0;
	right: 0;
	left: 0;
	width: 100%;
	height: 0%;
	z-index: -1;
	border-radius: 80% 80% 0 0 ;
	transition: 0.4s ease-in-out;
}


.btn:hover, input[type="submit"]:hover, input[type="button"]:hover, button:hover{
	color: #fff;
	font-weight: 500;
	border-color: #0ea961;
	background: #0ea961;
}


.btn:hover ::before, input[type="submit"]:hover ::before, input[type="button"]:hover ::before, button:hover ::before{
	height: 180%;
}

.btn span {
	color: inherit;
}
.btn span {
	position: relative;
	z-index: 2;
}

.btn:hover span {
	color: #fff;
}

.login-form-container {
    position: absolute;
    width: 50%;
    height: 60vh;
    background: #fff;
    transform: translate(50%, 35%);
    box-shadow: 0px 2px 8px rgba(0,0,0,0.3);
	user-select: none;
}

.signin-form-container{
	position: absolute;
    width: 90%;
    height: 90vh;
    background: #fff;
    transform: translate(5%, 5%);
    box-shadow: 0px 2px 8px rgba(0,0,0,0.3);
	user-select: none;
}
	
	.notification-container{
		width: 50%;
		background: #38d97b;
		height: 100%;
		
		clip-path: polygon(0% 0%, 90% 0, 100% 50%, 90% 100%, 0% 100%);
	}
	
	.signin-form-container .notification-container{
		width: 30%;
	}
	
	.notification-container .fixed-text {
		padding: 40px;
		color: #fff;
		margin: 0 0 5%;
	}
	
	.notification-container .notification-content{
		padding: 0 40px;
		color: #fff;
		margin: 0 0 5%;
	}
	
	.result-notification {
		background: #f37322;
		border-radius: 4px;
		padding: 5px;
		text-align: left;
		/* box-shadow: 0 0px 8px rgb(109, 52, 16); */
		font-size: 0.8em;
		color: #fff;
		width: auto;
	}
	
	.form-container{
		padding: 50px;
		padding-top: 30px;
		box-sizing: border-box;
	}
	
	.signin-form-container .form-container{
		width: 60%;
	}
	
	.board-notification, .account-settings{
		z-index: 99;
		position: absolute;
		top: 60%;
		background: #fff;
		border: 0.5px solid #d00;
		max-width: 500px;
		overflow: hidden;
		display: none;
		box-sizing: border-box;
		padding: 10px;
	}
	
	.notifier-popup{
		margin-right: 5px;
		height: 30px;
		width: 30px;
		color: #fff;
		text-align: center;
		background: #d00;
		border-radius: 50%;
		display: inline-flex;
		place-items: center;
		justify-content: center;
		
	}
	
	.notifier-wrapper{
		position: relative;
	}
	
	.notification{
		background: #e2f1ea;
		color: #222;
		margin-bottom: 4px;
		padding: 2px 5px;
	}
	
	.notification:hover{
		background: #eeeeee;
	}
	
	#sms-notifier {
		width: 20px;
		height: 20px;
		font-size: 70%;
		position: absolute;
		left: 20px;
		top: 0px;
	}
	
	.chat-box {
		position: relative;
		height: 55vh;
		overflow: hidden;
		width: 100%;
	}
	.chat-wrapper {
		height: 20vh;
		overflow: hidden;
		overflow-y: auto;
		border-bottom: 1px solid #d3d3d3;
		margin-bottom: 5px;
		box-sizing: border-box;
	}
	.chat-avatar {
		width: 25px;
		margin: 0 5px 0;
	}
	
	.chat-container {
		border: 1px solid #f3f1f1;
		width: 70%;
		display: block;
		margin-bottom: 15px;
	}
	
	.chat-container-me {
		border: 1px solid rgb(207, 249, 214);
		width: 70%;
		margin-left: 25%;
		display: block;
		margin-bottom: 15px;
	}
	
	.chat-header{
		background: #f3f1f1;
		padding: 5px;
	}
	
	.chat-container-me .chat-header{
		background: rgb(207, 249, 214);
	}
	
	.chat-content {
		padding: 10px;
		color: #3c4c3c;
	}
	
	.expiries{
		background: #f7f7f7;
	}
	.empties{
		background: #f9f9f9;
	}
	
	
.board{
	position: absolute;
    width: 96%;
    height: 90vh;
	overflow: hidden;
	
    background: #fff;
    transform: translate(2%, 5%);
    box-shadow: 0px 2px 8px rgba(0,0,0,0.3);
}
	.board .headers{
		padding: 10px;
		position: relative;
		border-bottom: 0.5px solid #42d88e;
		box-shadow: 0px 2px 2px rgba(58, 217, 126, 0.25);
		margin: 10px auto;
	}
	
	.board-content {
		padding: 40px 20px;
	}
	
	.avatar-container{
		cursor: pointer;
		
	}
	.avatar, .avatar-container > img{
		width: 50px;
		border-radius: 50%;
		border: 1px solid #42d88e;
		margin: auto 5px;
		/* vertical-align: middle; */
	}
	
	.board > .container{
		position: relative;
		margin: 0;
		padding: 0;
		height: 75vh;
		
		overflow: hidden;
	}
	
	.container > .left-bar{
		border-right: 1px solid #42d88e;
		height: auto;
		padding: 10px;
	}
	
	.link{
		position: relative;
		border-radius: 4px;
		padding: 10px;
		height: 20px;
		background-image: -webkit-linear-gradient(-90deg, rgb(255, 255, 255) 0%, #3ada7e7a 200%);
		
		transition: 0.4s ease-in-out;
		cursor: pointer;
		overflow: hidden;
	}
	
	.link.activate{
		background-image: -webkit-linear-gradient(-90deg, rgb(255, 255, 255) 0%, #eeeeee 40%);
		font-weight: 600;
		height: unset;
	}
	
	.link .flesh {
		background: #7b7b7b;
		width: 10px;
		height: 10px;
		display: inline-block;
		vertical-align: middle;
		/* align-self: center; */
		clip-path: polygon(0% 0%, 0% 0, 100% 50%, 0% 100%, 0% 100%);
	}
	
	
	.link.activate .flesh {
		background: #27AE60;
		transform: rotate(90deg);
	}
	/*
	.link:hover > .submenu{
		transform: scaleY(1);
	}
	*/
	.link .submenu{
		list-style: none;
	}
	.link .submenu li{
		margin: 5px auto;
	}
	
	
	.work-zone {
		position: relative;
		overflow: auto;
	}
	.work-zone .content{
		transform: scale(0);
		display: none;
		position: relative;
	}
	
	.work-zone .content.active{
		display: block;
		transform: scale(1);
	}
	
	.work-zone table{
		width: 90%;
		margin: auto 5%;
		border-collapse: collapse;
	}
		table tr td,table tr th{
			border: 0.5px solid silver;
			text-align: left;
			padding: 5px;
		}
		
		table input{
			border: none;
		}
		tr:nth-child(even){
			background: white;
		}
		tr:nth-child(odd){
			background: #38d97b33;
		}
		
		th {
			background: #65d6d4;
			color: #333;
		}
		
	.frame{
		display: block;
		position: relative;
	}
		
	.steps-container .steps, .content .subcontent{
		transform: scale(0);
		opacity: 0;
		position: absolute;
	}
	
	.steps-container .steps.activate,  .content .subcontent.activate{
		transform: scale(1);
		opacity: 1;
	}
	
	.steps-btn-container {
		margin-bottom: 30px;
		overflow: hidden;
		text-align: center;
		
		counter-reset: step;
	}
	
	.steps-btn-container li{
		list-style: none;
		color: #666;
		text-transform: uppercase;
		width: 33.33%;
		float: left; 
		position: relative;
		cursor: pointer;
	}
	.steps-btn-container li.active, .submenu li.active{
		color: #27AE60;
	}
	.submenu li.active{
		position: relative;
		overflow: hidden;
	}
	
	.signin-form-container .steps-btn-container li{
		width: 25%;
	}
	
	.submenu li:before{
		content: "";		
		width: 0;
		height: 2px;
		background: #27AE60;
		position: absolute;
		bottom: 0;
		cursor: pointer;
		z-index: 1;
		
		transition: 0.4s ease-in-out;
	}
	
	.submenu li.active:before{
		width: 60%;
	}
	
	
	.steps-btn-container li:before{
		content: counter(step);
		counter-increment: step;
		
		width: 20px;
		line-height: 20px;
		display: block;
		font-size: 10px;
		color: #fff;
		background: #666;
		border-radius: 3px;
		margin: 0 auto 5px auto;
		text-align: center;
		cursor: pointer;
		
		transition: 0.4s ease-in-out;
	}
	.steps-btn-container li:after{
		content: "";		
		width: 100%;
		height: 2px;
		background: #666;
		position: absolute;
		left: -50%;
		top: 9px;
		cursor: pointer;
		z-index: -1;
		
		transition: 0.4s ease-in-out;
	}
	
	.steps-btn-container li.active:before,.steps-btn-container li.active:after{
		background: #27AE60;
	}
	
	
	
	.hide{
		transform: scale(0);
	}
	
	.btn.btn-default {
		display: inline-block;
	}
	
/* For smartphones */
@media screen and (max-width: 800px) {	
	.logo {
		width: 60px;
	}
	
	.login-form-container {
		display: block;
		position: absolute;
		width: 90%;
		height: 90vh;
		background: #fff;
		transform: translate(5%, 5vh);
		box-shadow: 0px 2px 8px rgba(0,0,0,0.3);
	}
	
	.notification-container {
		width: 100%;
		background: #38d97b;
		height: 35%;
		clip-path: none;
		font-size: 0.8em;
	}
	
	.notification-container .fixed-text {
		padding: 25px;
		color: #fff;
		margin: 0 0 10%;
	}

	.notification-container .notification-content {
		padding: 0 40px;
		color: #fff;
		margin: 0 0 5%;
		position: fixed;
		bottom: -40px;
		z-index: -1;
		left: 0;
		text-align: center;
		display: flex;
		place-content: center;
		place-items: center;
		place-self: center;
		width: 100%;
		box-sizing: border-box;
	}
	
	.form-container {
		padding: 25px;
	}
	
	.signin-form-container {
		/* position: absolute; */
		width: 90%;
		min-height: 100vh;
		height: auto;
		background: #fff;
		transform: translate(5%, 5%);
		box-shadow: unset;/*0px 2px 8px rgba(0,0,0,0.3);*/
		user-select: none;
		display: block;
	}
	.signin-form-container .notification-container {
		width: 100%;
	}
	.signin-form-container .form-container {
		width: 100%;
	}
}