html
{
  height:100%;
  width:100%;
  background:white ;
//  --couleurbouton:rgb(187,135,50) ;
//  --couleurbouton:rgb(166,166,166) ;
  --couleurbouton:rgb(0,0,0) ;
  --police:'segoe ui', 'Roboto', sans-serif ;
}

body
{
  background:url(/img2/logo-DS.png) no-repeat top 8px right 24px ;
  background-size:30% auto !important ;
  font-family: var(--police);
  padding:0;
  margin:0;
  min-height:100%;
  position:relative;
  -webkit-overflow-scrolling:touch;
}

body.socYSEAL
{
	background-image:url(/img2/logo-YSEAL.png) ;
	background-size:auto 100px !important ;
}

input, textarea
{
  font-family:  var(--police);
}

#mainDiv
{
  position:absolute;
  left:0 ;
  top:0 ;
  right:0 ;
  bottom:0 ;
  padding:0;
  margin:0;
  overflow:hidden;
}

h1[onclick]
{
	cursor:pointer ;
}

h1
{
  font-size:40px ;
  font-weight:100 ;
  text-transform:uppercase ;
  padding-left:4rem ;
  position:relative ;
  cursor:pointer ;  
}

h1::after
{
	position:absolute ;
	left:0.5rem ;
	width:3rem ;
	height:3rem ;
	top:0rem ;
	background-repeat:no-repeat ;
	background-position:center center ;
	background-size:contain ;
	background-image:url(/img/arrow-left-solid.svg) ;
	content:'' ;
}

h1 span
{
  font-size:25px;
}

div.btm
{
  position:absolute ;
  left:0 ;
  bottom:0 ;
}

div.text
{
  margin-left:375px ;
  margin-top:80px ;
  font-size:24px ;
}

div.textAbs
{
  position:absolute;
  left:0px;
  top:120px;
  right:0;
  bottom:90px;
  font-size:24px ;
  overflow:hidden;
  text-align:center;
}

span.identite
{
	font-size:1.3em ;
}

div.textAbs table
{
  width:100%;
  margin:auto;
}

div.planning
{
  display:inline-block;
  margin:auto;
  text-align:left;
}

div.planning a
{
  display:block;
  text-decoration:none;
  padding:10px;
  cursor:pointer ;
  margin:0;
  background-color:var(--couleurbouton) ;
  border-radius:10px ;
  color:white;
  min-width:300px;
}

.btm a
{
  display:inline-block ;
  background-color:var(--couleurbouton) ;
  border-radius:10px ;
  text-align:center;
//  background:url(/img2/fin_de_parcours.png) no-repeat ;
  width:369px ;
  height:80px ;
  margin:4px ;
  color:white ;
  line-height:80px ;
//  padding-left:8px ;
  font-size:28px ;
  text-decoration:none ;
//  border-radius:0 0 20px 0;
}

.btm a.bt2
{
  background-image:url(/img2/retour_criteres.png) ;
  width:329px ;
  height:81px ;
  margin:0;
}

.btm .bt2 span
{
  margin-left:80px ;
}

div.photoProd
{
  width:100px;
  height:100px;
  border:1px solid var(--couleurbouton);
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center center;
}

div.photoProd:hover
{
  cursor:pointer;
}

div.divcommande
{
  display:inline-block;
  vertical-align:top;
  width:calc(50% - 2px);
  height:100%;
  overflow:auto;
}

div.piedcommande
{
  vertical-align:top;
  width:calc(50% - 12px);
  display:inline-block;
  margin:0;
  padding:0 0 0 10px;
}

div.piedcommande table td
{
  padding: 5px 0;
  text-align:left;
}

div.piedcommande textarea
{
  width:calc(100% - 10px);
  height:100px;
}

table.tblProduit
{
  width:100%;
  border-collapse: collapse
}

table.tblProduit th
{
  background-color:var(--couleurbouton) ;
  color:white;
  padding:5px 15px;
  text-align:left;
}

table.tblProduit th:last-child
{
  xborder-bottom-right-radius: 20px ;
  
}

table.tblProduit td
{
  padding:10px;
  text-align:left;
}

table.tblProduit td:last-child
{
  text-align:center;
}

table.tblProduit tr:hover td
{
  background-color:#F2F2F2;
}

#btnLog
{
  border:none;
  color:white;
  background-color:var(--couleurbouton) ;
  width:100%;
  height:50px;
  margin:5px 0;
  font-size:18px;
  border-radius:10px ;
  text-align:center;
//  border-radius:0 0 20px 0;
}

div.btnform 
{
  position:absolute ;
  left:3px ;
  bottom:3px ;
  right:3px;
  height:81px;
}

.btnform input[type=submit]
{
  width:329px ;
  height:81px ;

  background-color:var(--couleurbouton) ;
  border-radius:10px ;
  text-align:center;

  position:absolute;
  bottom:0;
  right:0;
  padding-right:10px;
  border:none;
  color:white;
  font-size:28px;
}

.btnform input[type=submit]:hover
{
  cursor:pointer;
}

.mainPopup
{
  position:absolute ;
  left:0px ;
  top:0px ;
  bottom:0px ;
  right:0px ;
  z-index:2 ;
  background:white;
  overflow:hidden ;
  opacity:0.9;  
}

.mainPopup > div
{
  position:absolute ;
  left:4px ;
  top:4px ;
  bottom:4px ;
  right:4px ;
  overflow:hidden ;
  box-shadow:0 0 4px 2px rgba(0,0,0,0.5) ;
}

#frmProduit
{
  padding:20px;
}

#frmProduit #mainDiv
{
  background:yellow;
}

.mainPopup iframe
{
  width:100% ;
  height:100% ;
}

.unproduit
{
  margin:0;
  margin:auto;
  border:2px solid black;
  border-collapse: collapse
  padding:40px 20px 20px 20px;
  background:white;
  opacity:1;
}

.unproduit td
{
  vertical-align:top;
  padding:5px;
}

div.photoProduit
{
  width:350px;
  height:350px;
  border:1px solid var(--couleurbouton);
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center center;
}

div.lstOld
{
  display:inline-block;
  vertical-align:top;
  width:200px;
  text-align:center;
  height:100%;
  overflow:auto;
  border-right:1px solid black;
}

iframe
{
  width:100% ;
  height:100% ;
}

div.lstOld a,
div.employe a
{
  display:block;
  text-decoration:none;
  color:black;
  margin:3px;
  background-color:var(--couleurbouton) ;
  border-radius:10px ;
  text-align:center;
//  border-radius:0 0 20px 0;
  padding:10px 0;
  color:white;
  background:var(--couleurbouton);
}

div.employe a
{
  text-align:left;
  padding-left:5px;
}

div#commande
{
  display:inline-block;
  width:calc(100% - 201px);
  height:calc(100% - 8px);
  position:relative;
  padding:0;
}

div#temps
{
  display:inline-block;
  width:calc(100% - 261px);
  height:calc(100% - 8px);
  position:relative;
  padding:0;
}
.detail
{
  position:absolute ;
  left:0px ;
  top:0px ;
  bottom:0px ;
  right:0px ;
  z-index:2 ;
  background:white;
  overflow:auto ;
}

.detail h2
{
  font-size:28px;
  text-align:center;
  margin:5px 0;
  border-bottom:1px solid black;
}

.employe
{
  display:inline-block;
  vertical-align:top;
  width:250px;
  text-align:center;
  height:100%;
  overflow:auto;
  border-right:1px solid black;
}

table.tbldetailTPS
{
  border-collapse: collapse;
}

table.tbldetailTPS td:first-child
{
  padding:0 0 0 5px;
}

table.tbldetailTPS td
{
  text-align:right;
  padding:5px 20px;
}

table.tbldetailTPS td input
{
  text-align:right;
  width:55px;
}

table.tbldetailTPS td span
{
  margin-left:5px;
}

table.tbldetailTPS td:nth-child(2)
{
  width:80px;
}

.detail input[type=submit]
{
  width:320px ;
  height:41px ;
  background-color:var(--couleurbouton) ;
  background-color:var(--couleurbouton) ;
  border-radius:10px ;
  text-align:center;
  margin:auto;
  border:none;
  color:white;
  font-size:28px;
}

.detail input[type=submit]:hover
{
  cursor:pointer;
}

.lstDer
{
  margin:5px 0;
}

.lstDer select
{
  font-size:20px;
  font-family:  var(--police);
}

.lstDer select:first-child
{
  margin-right:5px; 
}

table.tblDocSalon tr td
{
  padding:10px 30px; 
}

table.tblDocSalon tr:first-child td
{
  text-align:center;
}

table.tblDocSalon tr:last-child td
{
  text-align:right;
}

table.tblFicheComptable
{
  border-collapse: collapse;
}

table.tblFicheComptable td,
table.tblFicheComptable th
{
  border:1px solid black;
  padding:2px 5px;
  vertical-align:top;
}

table.tblFicheComptable td:nth-child(3),
table.tblFicheComptable td:nth-child(6),
table.tblFicheComptable td:nth-child(8),
table.tblFicheComptable td:nth-child(9)
{
  text-align:right;
}


body:not(.coding) .numpad #keys
{
	display:none ;
}

body.coding .numpad #keys
{
	display:block ;
}
body.coding form
{
	display:none ;
}

@media (max-width:1024px)
{
body
{
	background-size:50% auto ;
}
}

@media (max-width:500px)
{

body
{
	background-size:30% auto ;
}

div.text
{
	margin-left:10px ;
	margin-right:10px ;
	font-size:18px ;
	margin-top:0px ;
}

h1
{
	font-size:26px ;
	margin-left:10px ;
	margin-right:10px ;
}
h1::after
{
	left:0.5rem ;
	width:2rem ;
	height:2rem ;
	top:0rem ;
}

.btm a
{
	max-width:80% ;
	max-height:50px ;
	line-height:50px ;
	font-size:20px ;
}

input
{
	font-size:18px ;	
}

#mainDiv
{
	overflow:visible ;
}

div.btm.btnform
{
	width:42px ;
	height:42px ;
	right:50% ;
	margin-right:2px ;
	top:0 ;
	bottom:initial ;
	left:initial ;
}

form table input:not([type=submit])
{
	width:70% ;
	padding:0.25rem 0.5rem ;
}
form table td
{
	white-space:nowrap ;
}

div.btm.btnform a.bt2
{
	background-size: auto 40px ;
	overflow:hidden ;
}

.btm a.bt2
{
	background-size:contain ;
	max-height:52px ;
}

}

a.changePhoto
{
	display:inline-block ;
	border:solid 1px #C0C0C0 ;
	padding:10px ;
	margin-left:10px ;
}

a.changePhoto div
{
	width:160px ;
	height:160px ;
	display:block ;
	background-image:url(/img/smile-regular.svg) ;
	background-image:url(/img/no-profile.png) ;
	background-size:cover ;
	background-repeat:no-repeat ;
	background-position:center center ;
	cursor:pointer ;
}

a.changePhoto:hover
{
	background:navy ;
}
a.changePhoto div form
{
	display:inline-block ;
	width:100% ;
	height:100% ;
	overflow:hidden ;
}

a.changePhoto input[type=file]
{
	background:red ;
	witdh:100% ;
	opacity:0 ;
	height:100% ;
	cursor:pointer ;
	
}

#newcode
{
	position:fixed ;
	left:0px ;
	top:0px ;
	right:0px ;
	bottom:0px ;
	background:rgba(0,0,0,0.35) ;
	display:flex ;
	justify-content:center ;
	align-items:center ;
	z-index:12 ;
}

#newcode .newcode
{
	padding:20px ;
	display:inline-flex ;
	flex-direction:column ;
	width:90% ;
	max-width:500px ;
	background:white ;
	box-shadow:0 0 4px 2px #C0C0C0 ;
	justify-content:center ;
	align-items:center ;
	z-index:12 ;
}

#newcode input
{
	font-size:2rem ;
	padding:0.5rem 2rem ;
	width:5rem ;
	margin-bottom:1rem ;
}

#newcode button
{
	display: inline-block;
	background: #b88937;
	border-radius: 5px;
	font-size: inherit;
	border: none;
	padding: 0.25rem 2rem;
	margin: 0.25rem;
	margin-left: 0.25rem;
	color: white;
}