@font-face {
  font-family: 'WuerthBold';
  src: url('Fonts/WuerthBold.ttf');
  src: url('Fonts/WuerthBold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'WuerthBook';
  src: url('Fonts/WuerthBook.ttf');
  src: url('Fonts/WuerthBook.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

*{
    box-sizing: border-box;
    margin: 0;
    font-family: "Wuerthbook", sans-serif;
}

h1{
  margin-bottom: 20px;
}

body{
  text-align: center;
}

.bold, td strong{
  font-family: "Wuerthbold", sans-serif;
  font-weight: normal;
}

p.date{
  margin-bottom: 20px;
}

.wrapper{
  width: 100%;
  max-width: 1680px;
  margin: 0 auto;
  padding: 10px;
}

/*#stock{
    display: none;
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    border: solid 1px #000;
}*/

#stockhead{
  border-collapse: separate;
  border-spacing: 0;
  border: solid 1px #000;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  overflow: hidden;
  border-bottom: 0;
  width: 100%;
  overflow-y: auto;
  /*height: 300px;*/
}

#stockhead thead{
  position: sticky;
  top: 0;
}

#stockhead tr{
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}


#stock td, #stockhead th {  
  padding: 16px;
  font-family: "Wuerthbook", sans-serif;
  font-weight: normal;
}

#stock tr{
  border: none;
  transition: 0.3s;
  /*flex-flow: wrap row;
  display: flex;*/
}

tbody{
  /*display: block;*/
  width: 100%;
}

#stock tbody tr:nth-child(even){opacity: 0.8;}

#stockhead th {
  border-right: solid #000 1px;
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: center;
  background-color: #818a8f;
  color: white;
  width: 14%;
}


#stockhead th[colspan="3"]{
  border-bottom: solid 1px #000;
  border-top-right-radius: 14px;
}

#stockhead th:last-child{
  border-right: none;
}

.fixed{
  position: fixed;
  top: 0;
  z-index: 99;
}

#stock tr.red{
    color: #410E0B;
    background: #ffdad6;
    border-color: #410E0B;
}

#stock tr.red td{
  border-color: #410e0b36;
}

#stock tr.red:hover{background: rgb(255, 226, 230);}

#stock tr.green{
    color: #000;
    background: #efefef;
    border-color: rgba(94, 94, 94, 0.37);
}

#stock tr.green:hover{background: #e0e0e0;}

#stock td{
  border-right: 1px solid #dcdcdc;
  border-bottom: 1px solid #dcdcdc;
  font-size: 14px;
  text-align: left;
  width: 14%;
  /*display: block;*/
}

#stockhead tr:first-child th:nth-child(2), #stockhead tr:first-child  th:nth-child(3), #stock td:nth-child(2), #stock td:nth-child(3){
  width: 6%;
}

#stockhead tr:first-child th:nth-child(4), #stock td:nth-child(4){
  width: 6%;
}

#stock td:last-child{
  border-right: none;
}

#stock td:nth-child(1), #stockhead th.first{
  width: 32%;
}


#stock td small{
  display: none;
}

.ACHATS #stock td small{
  display: inline;
}

#stockhead th.first{
  border-top-left-radius: 15px;
}

#formulaire{
  width: 300px;
  margin: 0 auto;
}

#formulaire label{
    font-size: 15px;
}

#formulaire p.book{
    font-size: 16px;
    margin-bottom: 6px;
}

#formulaire .Input {
    position: relative;
    padding: 5px 0;
    width: 100%;
  }
  
  #formulaire .Input-text {
    display: block;
    margin: 0;
    padding: 16px 16px;
    color: inherit;
    width: 100%;
    font-family: inherit;
    font-size: 16px;
    font-weight: inherit;
    line-height: 24px;
    border: 1px solid #c3c8c8;
    margin: 0;
    border-radius: 28px;
    height: 56px;
    background-image: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_52977_33953)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M26.76 25.27L32.49 31L31 32.49L25.27 26.76C24.2 27.53 22.91 28 21.5 28C17.91 28 15 25.09 15 21.5C15 17.91 17.91 15 21.5 15C25.09 15 28 17.91 28 21.5C28 22.91 27.53 24.2 26.76 25.27ZM21.5 17C19.01 17 17 19.01 17 21.5C17 23.99 19.01 26 21.5 26C23.99 26 26 23.99 26 21.5C26 19.01 23.99 17 21.5 17Z' fill='%2349454F'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_52977_33953'%3E%3Crect x='4' y='4' width='40' height='40' rx='20' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: right 4px center;
  }

  #formulaire .Input-text::placeholder {
    color: #B0BEC5;
  }
  
#formulaire  .Input-text:focus {
    outline: none;
    border-color: #818a8f;
  }
  
#formulaire .Input-label {
    display: block;
    position: absolute;
    bottom: 50%;
    left: 0.5rem;
    color: #818a8f;
    background: #ffffff;
    padding: 0px 5px;
    font-family: inherit;
    font-size: 14px;
    font-weight: inherit;
    line-height: 14px;
    opacity: 0;
    transform: 
    translate3d(0, 50%, 0)
    scale(1);
    transform-origin: 0 0;
    transition: opacity 0.3s, transform 0.3s, visibility 0ms 0.3s, z-index 0ms 0.3s;
  } 
  
#formulaire  .Input-text:placeholder-shown + .Input-label {
    visibility: hidden;
    z-index: -1;
  }
/*
  #formulaire .Input::after {
    content: '';
    background-image: url(https://www.modyf.fr/skin/frontend/modyf/SalesFunnel/images/icons-s10c0b4168a.png);
    background-position: -2733px 0;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.5;
}

  
#formulaire  .Input-text:not(:placeholder-shown) + .Input-label,
#formulaire  .Input-text:focus:not(:placeholder-shown) + .Input-label {
    visibility: visible;
    z-index: 1;
    opacity: 1;
    transform: translate3d(0, calc(50% - (10px * 0.8) - 10px), 0) scale(0.8);
    transition:
      transform 0.3s,
      visibility 0ms,
      z-index 0ms;
  }

  */

  .hidden{
    display: none;
  }

  form{
    display: block;
    margin: 0 auto;
    width: 300px;
    text-align: center;
  }

  form input{
    display: block;
    width: 100%;
    margin: 10px 0;
    padding: 10px;
    font-family: Arial, sans-serif;
  }

  form input[type=text],form input[type=password]{
    border: solid 1px #818a8f;
  }

  form input[type=submit]{
    border: none;
    background: #cc0000;
    color: #ffffff;
    text-transform: uppercase;
    cursor: pointer;
    transition: 0.3s;
  }

  form input[type=submit]:hover{
    background: #aa0000;
  }


@media screen and (max-width:767px){

  h1{
    font-size: 20px;
  }

  html, body{
    width: 100%;
    height: 100%;
  }

  .top{
  }

  .tables{
    width: 100%;
    height: 60vh;
    overflow: scroll;
    box-shadow: inset black 0px -8px 10px;
  }

  #stock, #stockhead{
    width: 900px;
  }

  #stock td, #stockhead th{
    font-size: 12px;
  }

  tbody{
    max-height: 80vh;
    
    overflow: scroll;
  }
}