body{
	margin:0;
}

	.betatag{
		position:absolute;
		top:20px;
		left:calc(100vw - 150px);
		width:100px;
		height:100px;
		z-index:1000;
		border:3px solid;
		margin:auto;
	}
	.vertical-center {
	  margin: 0;
	  position: absolute;
	  top: 50%;
	  -ms-transform: translateY(-50%);
	  transform: translateY(-50%);
	  text-align:center;
	}
	.parent {
	  height: 90vh;
	  display: flex;
	}
	.enfant {
	  margin: auto;
	}
	.footer { 
		position:fixed;
		z-index:1000;
		left: 0 ; right: 0; bottom: 0; 
		height:[footer-height] ;
	}

	.sidebar { 
		position: absolute;
	}
	.login-content {
		margin: auto;
		position: relative;
		padding: 0;
		outline: 0;
		width: 600px;
		height:330px;
		border-radius: 3em;
	}

	.login-vert-bar {
		width:130px;
		height:inherit;
		border-radius: 2em;
		box-shadow: 0.2em 0em 1em black;
	}

	.logoOK{
		color: green;
	}

	.logomodif{
		color: darkorange;
	}

	.logoKO{
		color: red;
	}
	.deleteline{
	    max-height: 0 !important;
		transition: max-height 1s ease-in;
		overflow: hidden;
		background: #d5d5d5;	
	}
	
	.comment{
		background-color: #eee;
		border: 1px solid;
		padding: 0.2em;
	}
	
	th {
		background: grey;
		color: white;
		vertical-align: middle !important;
	}

	td{
		padding:2px 2px !important;
		vertical-align: middle !important;
	}
	
	.tablelargemax{
		white-space:normal; !important;
	}
	
	
	.BottomRightFixeButton {
		right: 0.225em;
		padding: 2px 2px;
		position: fixed;
		text-align: center;
		bottom: 0.225em;
		z-index: 9998;
		background-color: rgba(200,0,0, 0.7);
		height: 2em;
		width: auto;
		border: solid 1px #FFF;
	}

	.compact-btn{padding:6px 10px !important;}

	input:disabled, textarea:disabled {
		background: white;
	}
	textarea{
		resize: none;
	}
	table {
		
		overflow-x: auto;
		white-space: nowrap;
	}


	.sticky{
		position: -webkit-sticky;
		position: sticky;
	    top: 0;	
	}
	
	.cookiebox{
		position: -webkit-fixed;
		position: fixed;
	    bottom: 5px;
		right: 5px;
		background-color: #ccf;
		max-width: 50%;
		z-index: 999;
	}
	.paddingsticky::before {
	   content: "";
	   display: block;
	   margin-top: calc(-44.6px - 1em);
	   height: calc(44.6px + 1em);
	}
	
.BarMenu{
	position: sticky;
	z-index: 1000;
	padding: 0.5em;
	text-shadow: 1px 1px 2px #fff;
	background-color: #eee;/*#00000030;*/
}

.BarMenu>a:hover{
	text-shadow: 0px 0px 0px #fff;
}
.BarMenu>a{
	background-color: #00000000;
}

#presentation1{
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin: 2em;
}

#presentation2{
	display: block;
	position: relative;
}

.firstframe2 {
	z-index: 2;
	overflow: hidden;
}

.secondframe {
	width:95%;
	margin:auto;
	z-index: 12;
	background-color: #eee;
}

.fullscreen{
	width: 100vw;
	height: 100vh;	
}

.mainmessage{
	text-align: center;
	position: absolute;
	display: block;
	transform: translate3d(0, -50%, 0);
	-webkit-transform: translate3d(0, -50%, 0);
	top: 50%;
	z-index: 2;
	font-size: 7vw;
	line-height: 1.2em;
	margin: 15px 1em 0px;
}

.black{
	color: #000;
}

.white{
	color: #FFF;
}

.pink{
	color: #FF2FDF;
}

.preco{
	background-color: #00f3ff8c !important;
}

.achat{
	background-color: #00f3888c !important;
}

.horsstock{
	background-color: #ff8a8a !important
}

.message1bg{
	background: url(../img/photo4.jpg) 0 0;
	background-size: cover;
}

.message2bg{
	background: url(../img/photo6.jpg) 0 0;
	background-size: cover;
}

.message3bg{
	background: url(../img/photo8.jpg) 0 0;
	background-size: cover;
}

.tableft{
	margin-left:2em;
}

.centre-zone>img{
	margin-top:5px;
	margin-bottom:5px;
}
/* carousel */
/* https://css-tricks.com/css-only-carousel/ */

.showFrame{
	opacity:100% !important;
	z-index:10;
}
.framecarrousel{
	opacity:0%;
	width: 100vw;
	height: 100vh;	
	transition: opacity 1s;
	display: block;
	position: absolute;
}

.linkslider{
	z-index: 30;
	position: absolute;
	display: flex;
	width: 100vw;
	height: 100vh;
	align-items: end;
	justify-content: center;
	flex-wrap: wrap;
}
.linkslider > a {
  display: inline-flex;
  width: 1rem;
  height: 1rem;
  background: grey;
  text-decoration: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin: 10px 20px 5vh 0;
  position: relative;
  z-index:10;
  border: 1px solid black;
}
.linkslider > a:active {
  top: 1px;
}
.linkslider > a:focus {
  background: green;
}

.illustration{
	width: 30%;
}

.explication{
	width: 70%;
}
	
	.separ{
		border-top: 1px solid;
		width:80%;
		margin-left:10%;
	}
	
	a.menumodern{
		text-decoration: none;
		padding-top: 0 !important; 
		padding-bottom: 0 !important;
	}
	
	.menumodern:hover img {
		-webkit-filter: invert(100%);
	}
		
	.tooltip {
	  position: relative;
	  display: inline-block;
	}

	.tooltip .tooltiptext {
	  visibility: hidden;
	  width: 320px;
	  background-color: black;
	  color: #fff;
	  text-align: center;
	  border-radius: 6px;
	  padding: 5px 0;
	  position: absolute;
	  z-index: 1;
	  bottom: 100%;
	  left: 50%;
	  margin-left: 20px;
	  
	  /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
	  opacity: 0;
	  transition: opacity 1s;
	}

	.tooltip:hover .tooltiptext {
	  visibility: visible;
	  opacity: 1;
	}
	.alignleft {
	 float:left
	}
	.alignright {
	 float:right
	}
	
	.validbox{
		display: inline-block;
		padding: 8px 16px;
		vertical-align: middle;
	}
	
.dateinput{
	min-width: 16ch;
}

.clientinput{
	min-width: 20ch;
}

.paiementinput{
	width: 8ch;
}

.stockinput{
	width: 8ch;
}

.stocksurcommandeinput{
	min-width: 8ch;
}

.descriptioninput{
	min-width: 35ch;
}

.optioninput{
	text-transform: uppercase ;
	min-width: 12ch;
}

.inputref{
	text-transform: uppercase ;
}

.commentaireinput{
	min-width: 100ch;
}

/*the container must be positioned relative:*/
.autocomplete {
  position: relative;
  display: inline-block;
}

.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 0;
  right: 0;
}

.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff; 
  border-bottom: 1px solid #d4d4d4; 
}

/*when hovering an item:*/
.autocomplete-items div:hover {
  background-color: #e9e9e9; 
}

/*when navigating through the items using the arrow keys:*/
.autocomplete-active {
  background-color: DodgerBlue !important; 
  color: #ffffff; 
}

.warning{
	background-color: red !important; 
}

.graphresume{
	height: 250px;
	width: 100%;
}

#mapid { height: 550px; }

.messageperso{
	width: 100%;
}

.imageboutique{
	max-height:140px;
	max-width:100%;
}

body{
	background-color: gainsboro;
}

.tips {
  background-color: #e0f0e0cc;
  z-index: 999;
  position: absolute;
  border-radius: 0 0 1em 1em;
  border-top: #ffeb3b solid 2px;
  border-left: #ffeb3b solid 2px;
}  
.tipsymbolleft{
	padding: 0.2em;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 999;
}
.tipsymbolright{
	padding: 0.2em;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 999;
}

.tipsleft:after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 40px 40px 0 0;
  border-color: #ffeb3b transparent;
  position: absolute;
  left: 0;
  top: 0;
}

.tipsright:after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 40px 40px 0;
  border-color: transparent #ffeb3b transparent transparent;
  position: absolute;
  right: 0;
  top: 0;
}

.img_stock{
	max-width: 100px;
	max-height: 50px;
}

#logomagasin{
	max-width:40vw;
	height:auto;
	max-height:20vh;
	object-fit: scale-down;
}


#overlayloading {
  position: fixed; /* Sit on top of the page content */
  display: none; /* Hidden by default */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5); /* Black background with opacity */
  z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
  padding-top: calc(40vh - 15vw);
  padding-left: 35vw;
  font-size: 20vw;
  color: #00FF03;
}

.conversation{
	background-color: #666;
	border-radius:10px;
	height: 100vh;/*calc(100vh - 63px);*/
	overflow-y: scroll;
}

.inbubble{
	display: grid;
	gap: 5px;
	grid-template-columns: 50px 2fr 100px;
}

.bubble{	
	background:#eee;
	border-color:#353526;
	color:black;
	border-radius:10px;
	margin: 5px 5px 0px 5px;
}

.bubble-title{
	padding-right: 10px;
	text-transform: uppercase;
	color: #4f4f4f;
}

#nom{
	color:#222;
}

.achat>#nom{
	color:#fff;
}

.bubble-logo{
	padding-right: 5px;
	width: 32px;
	align-self: center;
	justify-self: center;
}

.bubble-logo>img{
	object-fit: scale-down;
	max-width: 40px;
	max-height: 40px;
	border-radius: 20px;
}

.bubble-message{
	display: flex;
	align-items: center;
	padding-left: 10px;
}

.bubble-flag{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	width: 100px;
	padding-left: 5px;
	border-left: 2px solid #666;
}

#btnreturndirect{
	bottom: 5px;
	right: 25px;
	position: absolute;
	opacity: 0;
	border-radius: 10px;
	background-color: red;
	color: white;
}

#previewStream{
}

.modalnopadding{
	padding-top: 0 !important;
}


.privatemessage{
	background-image: linear-gradient(45deg, #aaa5 20%, #fff5 20%, #fff5 30%, #aaa5 30%, #aaa5 70%, #fff5 70%, #fff5 80%, #aaa5 80%);
  /*background-image: radial-gradient(circle, #f005 15%, transparent 10%), radial-gradient(circle, #0f05 15%, transparent 10%);
	*/background-size: 30px 30px;
	background-position: 0 0, 45px 45px;
}

.listwithwithout{
	padding: 4ch;
}
.listwithwithout > ul > li > p{
	padding-left: 1ch;
}

.listwithout{
	padding-left : 1ch;
}
.listwithout > li::marker {
	content: "❌";
	font-size: 2ch;
}
.listwith{
	padding-left : 1ch;
}
.listwith > li::marker {
	content: "✅";
	font-size: 2ch;
}

@media only screen and (min-width: 800px) {
	.body{
		overflow-y: hidden;
	}
	
	.box {
		display: grid;
		gap: 5px;
		grid-template-columns: 3fr 6fr;
		height: 100vh;
	}

	.column1 {
		grid-column: 0;/*1 / span 1;*/
		margin: 5px;
		display: none;
	}

	.column3{
		grid-column: 1 / span 3;	
	}
	
	.column3.conversation {

	}
	
	#newlive{
		
	}

	.fullheight{
		display: flex;
	}

	.fullheight>div:first-child {
		margin-right: 5px;
	}

	.fullheight>div:last-child {
		margin-left: 5px;
	}
	
	.secondframe {
		width:80%;
		margin:auto;
		z-index: 12;
		background-color: #eee;
	}

}

.validanim {
  position: relative;
}

.validanimok {
  animation: explodeok 0.7s ease-out;
}

#missingparam{
	z-index: 10000;
}

@keyframes explodeok {
	 0% {box-shadow: 0 0 20px 10px #00ff00ff;}
	100% {box-shadow: 0 0 20px 10px #00000000;}
}
.validanimko {
  animation: explodeko 0.7s ease-out;
}

@keyframes explodeko {
	 0% {box-shadow: 0 0 20px 10px #ff0000ff;}
	100% {box-shadow: 0 0 20px 10px #00000000;}
}

/*
.inputimg{
    display: none;
}

.custom-inputimg{
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
}*/