._dash-undo-redo {
  display: none;
}

* {
    margin: 0px;
    padding: 0px;
    line-height: 160%;
    font-family: 'Open Sans', sans-serif;
    font-size-adjust: 0.56;
}
/*
body {
    margin: 0;
    padding: 0;
    min-height:100%;
}

.container {
    min-height:100%;
    position: relative;
}

green #2ECC40
blue #0074D9
red #FF4136
*/

.content {
    width: 74.88%; /* 720px */
    margin: 0 auto;
    /*padding-bottom: 90px;  Height of the footer*/
}

.footer {
    clear:both;
    /*position: absolute;*/
    /*bottom:0px;*/
    width: 100%;
    /*height: 90px;*/
    background-color: rgb(50,50,50);
    color: white;
    /*border-style: solid;
    border-color: pink;*/
}
.footer-content {
    /*border-style: solid;
    border-color: pink;*/
    padding-top: 20px;
    padding-bottom: 20px;
    width:60%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.default--img {
    width: 30%;
}

.schema--img {
    width:45vw;
}

/*TEST*/
.drop123 {
  background-color: white;
  color: black;
  box-sizing: border-box;
}

.Select-value-label {
    background-color: White;
    color: black;
}

.Select-value-icon {
    background-color: WhiteSmoke;
}

.Select-control {
    background-color: white;
    border-radius: 0px;
    color: black;
}

/*item in dropdown*/
.VirtualizedSelectFocusedOption {
  background-color: WhiteSmoke;
}

.Select-menu-outer {
  border-radius: 0px;
}
/*
.rc-slider-step {
    color: LightGrey;
}*/

.slider-freq {
  --color-track: #FF851B;
  --color-rail: #e9e9e9;
  --color-handle-fill: white;
  --color-handle-border: #FF851B;
  --height: 4px;
  --margin-top: 0px;
  --handle-width: 14px;
  --handle-border: 2px;
}

.slider-cons-garden {
  --color-track: #33a936;
  --color-rail: #e9e9e9;
  --color-handle-fill: white;
  --color-handle-border: #33a936;
  --height: 14px;
  --margin-top: -5px;
  --handle-width: 0px;
  --handle-border: 0px;
}

.slider-cons-indus {
  --color-track: #e9e9e9;
  --color-rail: #33a936;
  --color-handle-fill: white;
  --color-handle-border: #33a936;
  --height: 14px;
  --margin-top: -5px;
  --handle-width: 0px;
  --handle-border: 0px;
}

.rc-slider {
    background-color: white;
}

.rc-slider-rail {
    background-color: var(--color-rail);
    height: var(--height);
    margin-top: var(--margin-top);
    border-radius: 0px;
}


.rc-slider-rail:disabled {
    background-color: var(--color-rail) !important;
}

.rc-slider-track {
    background-color: var(--color-track) !important;
    height: var(--height);
    margin-top: var(--margin-top);
    border-radius: 0px;
}

.rc-slider-track:disabled {
    background-color: var(--color-track) !important;
}

.rc-slider-handle, .rc-slider-handle:disabled {
    background-color: var(--color-handle-fill) !important;
    border-color: var(--color-handle-border) !important;
    height: var(--handle-width);
    border-width: var(--handle-border);
}

.rc-slider-handle:hover {
    background-color: var(--color-handle-border);
    border-color: var(--color-handle-fill);
}

.rc-slider-dot {
    border-color: grey;
}

/*INDEX PAGE*/
.div-tool {
    display: grid;
    margin: auto;
    width: 80%;
    justify-items: center;
    grid-template-columns: 1fr 1fr 1fr;
    grid-row-gap: 10px;
    grid-template-areas: "mesure potager infos";
}

.block-tool {
    grid-area: potager;
    margin: 20px;
    width: 24vw;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.3);
}

.block-tool-info {
    grid-area: infos;
    margin: 20px;
    width: 24vw;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.3);
}

.block-tool-mes {
    grid-area: mesure;
    margin: 20px;
    width: 24vw;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.3);
}

.block-tool--img {
    width: 100%;
    height: auto;
}

.block-tool--img-block {
    position: relative;
}

.block-tool--img-title {
    position: absolute;
    top: 20%;
    box-sizing: border-box;
    width: 100%;
    color: white;
    text-shadow: 0 2px 4px rgba(0,0,0,1);
    font-weight: bold;
    font-size: large;
    text-align:center;
    background-color: rgba(0,0,0,.5);
    padding: 10px;
}

.link-block {
    text-decoration: none;
    color: black;
}


.tab-custom {
    display: inline-block;
    padding: 1% 6% 1% 6%;
    font-size: large;
    font-weight: bold;
    background-color: #96BB54;
    color: white;
}

/*CONTEXT TAB*/
.grid-container-sol {
    display: grid;
    grid-template-columns: 160px 100px 160px 20px 1fr;
    grid-row-gap: 10px;
    margin: 30px 0px 30px 60px;
    grid-template-areas:
      "labelFe inFe unitFe . meanFe"
      "labelMO inMO unitMO . meanMO"
      "labelpH inpH .      . meanpH";
}

.grid-item {
    align-self: center;
}

.grid-item-unit {
    justify-self: center;
    align-self: center;
}

.grid-container-etm {
    display: grid;
    grid-template-columns: 160px 100px 130px 200px 160px 100px 130px;
    grid-row-gap: 10px;
    margin: 30px 0px 30px 60px;
    grid-template-areas:
      "labelAs inAs unitAs . labelHg inHg unitHg"
      "labelCd inCd unitCd . labelMo inMo unitMo"
      "labelCr inCr unitCr . labelNi inNi unitNi"
      "labelCu inCu unitCu . labelPb inPb unitPb"
      "labelMn inMn unitMn . labelZn inZn unitZn";
}


.row {
    padding-top: 15px;
    padding-bottom: 15px;
}

.column-metal {
    float: left;
    padding-left: 20px;
    padding-right: 20px;
}

.input-age {
    float: left;
    padding-left: 20px;
    padding-right: 20px;
}

.div-util {
    padding-left: 10px;
    padding-bottom: 10px;
}

.column-dropdown {
    float: left;
    width: 200px;
    padding-left: 20px;
    padding-right: 20px;
}
/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

.column-radio {
    float: left;
    text-align: center;
    padding-left: 15px;
}

table, th, td {
    border: 1px solid #ddd;
    border-collapse: collapse;
    text-align: right;
    padding: 2px 5px 2px 5px;
    margin-left: 20px;
    margin-bottom: 30px;
}

.btn-next {
    float: right;
    margin: 20px;
    margin-top:40px;
    margin-bottom:50px;
    margin-right: 15%;
    padding: 10px 20px 10px 20px;
    background-color: #96BB54;
    color: white;
    border-style: none;
    font-size: 1.2em;
}

.btn-prev {
    float: left;
    margin: 20px;
    margin-top:40px;
    margin-bottom:50px;
    margin-left: 15%;
    padding: 10px 20px 10px 20px;
    background-color: #96BB54;
    color: white;
    border-style: none;
    font-size: 1.2em;
}

.btn-next:hover, .btn-prev:hover {
    opacity: 0.7;
    cursor: pointer;
}

.btn-valid {
    margin: 10px 10px 10px 0px;
    padding: 5px 10px 5px 10px;
    background-color: #2ECC40;
    color: white;
    border-style: none;
    font-size: medium;
}

.btn-valid:hover {
    opacity: 0.7;
    cursor: pointer;
}

.btn-2 {
    margin: 20px;
    padding: 10px;
}

.input-float {
    -webkit-locale: "fr-FR";
    -moz-locale: "fr-FR";
    width: 90%;
    text-align: right;
    font-size: medium;
    border-style: solid;
    border-width: 1px;
    border-color: darkGrey;
    padding: 2px;
    resize: none;
}
/*NOT WORKING vs input-float... Div issue???*/
.input-int {
    width: 40px;
    text-align: right !important;
    font-size: medium;
    border-style: solid;
    border-width: 1px;
    border-color: darkGrey;
    padding: 2px;
    resize: none;
}

.input-txt {
    width: 40px;
    text-align: left !important;
    font-size: medium;
    border-style: solid;
    border-width: 1px;
    border-color: darkGrey;
    padding: 2px;
    resize: none;
    margin-left: 15px;
    margin-bottom: 5px;
    margin-top: 3px;
}

/*CHECKOUT FORM*/
.form-popup {
  display: none;
  position:fixed;
  bottom: 0;
  height: 100%;
  width: 100%;
  overflow: auto;
  /*border: 3px solid pink;*/
  z-index: 9;
  background-color: rgb(0,0,0);
  background-color: rgb(0,0,0,0.8);
}
/* The popup form - hidden by default */
.form-popupOG {
  display: none;
  position:fixed;
  bottom: 0;
  right: 15%;
  /*border: 3px solid pink;*/
  z-index: 9;
}
/* Add styles to the form container */
.form-container {
  max-width: 1000px;
  margin: 2% auto;
  padding: 40px 60px 60px 60px;
  background-color: white;
}

.grid-container-form-sol {
    display: grid;
    width: 100%;
    grid-template-columns: 15% 5% 15% 65%;
    grid-row-gap: 10px;
    grid-column-gap: 20px;
    margin: 20px 20px 20px 20px;
}

.grid-container-form-util {
    display: grid;
    width: 100%;
    grid-template-columns: 25% 70%;
    grid-row-gap: 10px;
    grid-column-gap: 20px;
    margin: 20px 20px 20px 20px;
}

.grid-container-form-user {
    display: grid;
    grid-template-columns: auto auto;
    grid-row-gap: 10px;
    grid-column-gap: 20px;
    margin: 10px 10px 10px 20px;
}

.grid-item-form-util {
    align-self: center;
}

.grid-item-form-unit {
    align-self: center;
    justify-self: start;
}

.btn-run {
    float: right;
    margin-right: 15%;
    padding: 10px 20px 10px 20px;
    background-color: #2ECC40;
    color: white;
    border-style: none;
    font-size: 1.2em;
}

.btn-back {
    float: left;
    margin-left: 15%;
    padding: 10px 20px 10px 20px;
    background-color: #FF4136;
    color: white;
    border-style: none;
    font-size: 1.2em;
}

.btn-back:hover, .btn-run:hover {
    opacity: 0.7;
    cursor: pointer;
}

/* Tooltip container */
.tooltip-error {
  position: relative;
  display: inline-block;
}

/* Tooltip text */
.tooltip-error .tooltiptext-error {
  visibility: hidden;
  top: -60%;
  left: 150%;
  background-color: white;
  width: 300px;
  color: #FF4136;
  text-align: center;
  padding: 5px 5px;
  border-width: 2px;
  border-style: solid;
  border-color: #FF4136;

  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip-error:hover .tooltiptext-error {
  visibility: visible;
}

/* Left arrow*/
.tooltip-error .tooltiptext-error::after {
  content: " ";
  position: absolute;
  top: 50%;
  right: 100%; /* To the left of the tooltip */
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent #FF4136 transparent transparent;
}

/* remove spinners: up/down arrows in input */
input[type='number'] {
    -moz-appearance:textfield;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}


td {
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 1px solid #ddd;
  padding: 8px;
}

th {
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 2px solid black;
  padding: 8px;
}

tr {
  border: none;
  padding: 4px;
}

.block-vg {
  display: inline-block;
  margin: 10px;
}

.img-vg {
  width: 150px;
  display: block;
  padding-bottom: 2px;
}

.img-preview {
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.3)
}

.grid-info-lab {
  display: grid;
  grid-template-columns: 3fr 1fr;
  margin: 20px;
  padding: 20px;
  border: solid 1px black;
  column-gap:50px;
  grid-row-gap:20px;
  grid-template-areas:
    "info-title  ."
    "info-txt1   info-img"
    "info-txt2   info-img"
    "info-txt3   info-img"
    "info-txt4   info-img";
}

.grid-info {
  display: grid;
  grid-template-columns: 3fr 1fr;
  margin: 20px;
  padding: 20px;
  border: solid 1px black;
  column-gap:50px;
  row-gap:20px;
  grid-template-areas:
    "info-title info-img"
    "info-txt   info-img";
}

.btn-fiches {
    padding: 10px 20px 10px 20px;
    background-color: black;
    color: white;
    border-style: none;
}
.btn-fiches:hover {
    cursor: pointer;
    opacity: 0.7;
}

.grid-fiches {
  display: grid;
  grid-template-columns: 1fr 5fr;
  justify-items: left;
  margin: 20px;
  padding: 20px;
  border: solid 1px black;
  column-gap:50px;
  row-gap:20px;
  grid-template-areas:
    "info-title info-title"
    "info-img0 info-txt0"
    "info-img0 info-btn0"
    "info-img1 info-txt1"
    "info-img1 info-btn1"
    "info-img3 info-txt3"
    "info-img3 info-btn3";
}

.grid-fiches-res {
  display: grid;
  grid-template-columns: 5fr 1fr;
  justify-items: left;
  margin: 20px;
  padding: 20px;
  border: solid 1px black;
  column-gap:50px;
  grid-template-areas:
    "info-txt info-img"
    "info-btn info-img";
}

.big-grid-info {
  display: grid;
  grid-template-columns: 3fr 1fr;
  margin: 20px;
  padding: 20px;
  border: solid 1px black;
  column-gap:50px;
  row-gap:20px;
  grid-template-areas:
    "info-title ."
    "info-txt1  info-img1"
    "info-txt2  info-img1"
    "info-txt3  info-img2"
    "info-txt4  info-img2";
}

.tabs-bar {
  width: 80%;
  margin: auto;
  text-align: center;
  background-color: #96BB54;
}

.vg_res_table {
  border: none;
}

.rec-gen {
  display: grid;
  grid-template-columns: 4fr 1fr;
  column-gap: 50px;
  row-gap:20px;
  grid-template-areas:
  "title1 title1"
  "info1  img1     "
  "info2  img1  "
  "info3  img1  "
  "info4  img1     "
  "title2 title2"
  "info5  img2  "
  "info6  img2  "
  "info7  img2  "
  "info8  img2     "
  "info9  img3  "
  "info10 img3  "
  "info11 img3  "
  "title3 title3"
  "info12 img4  "
  "info13 img4  "
  "info14 img4  ";
}

tr {
  border: none;
}
th {
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 2px solid black;
}
td {
  border: 2px solid white;
}

.res-title-btn {
  display:inline-block;
  border-style: none;
  text-decoration: none;
  box-sizing: border-box;
  width: 100%;
  padding: 10px;
  margin: 0;
  border: 0;
  text-align: left;
  cursor: pointer;
  text-transform: none;
  text-indent: none;
  color: black;
  background-color: LightGrey;
}

.res-title-btn:hover {
  color: white;
  background-color: Grey;
}

.faq-title-btn {
  display:inline-block;
  border-style: none;
  text-decoration: none;
  box-sizing: border-box;
  width: 100%;
  padding: 10px;
  margin-top: 20px;
  border: 0;
  text-align: left;
  cursor: pointer;
  text-transform: none;
  text-indent: none;
  color: white;
  background-color: #2ca0ff;
}

.faq-title-btn:hover {
  color: #2ca0ff;
  background-color: LightGrey;
}

.upload-link {
  text-decoration: underline;
}

.upload-link:hover {
  background-color: LightGrey;
  cursor: pointer;
}

button:hover {
  cursor: pointer;
}

/*SMALL SCREEN SETUP*/

@media screen and (max-width: 1366px) {
  .grid-container-etm {
      display: grid;
      grid-template-columns: 160px 100px 130px 160px 160px 100px 130px;
      grid-row-gap: 10px;
      margin: 30px 0px 30px 60px;
      grid-template-areas:
        "labelAs inAs unitAs . labelHg inHg unitHg"
        "labelCd inCd unitCd . labelMo inMo unitMo"
        "labelCr inCr unitCr . labelNi inNi unitNi"
        "labelCu inCu unitCu . labelPb inPb unitPb"
        "labelMn inMn unitMn . labelZn inZn unitZn";
  }
  .content {
    width: 92%;
  }
  .img-vg {
    width: 140px;
  }
  .block-vg {
    margin: 5px;
  }
  .tab-custom {
    padding: 1% 4% 1% 4%;
    font-size: large;
  }
  .tabs-bar {
    width: 90%;
  }
  .div-tool {
      width: 90%;
  }
  .block-tool {
      margin: 10px;
      width: 28vw;
  }
  .block-tool-info {
      margin: 10px;
      width: 28vw;
  }
  .block-tool-mes {
      margin: 10px;
      width: 28vw;
  }
  .schema--img {
      width:60vw;
  }
}

@media screen and (max-width: 1200px) {
  .grid-container-etm {
      display: grid;
      grid-template-columns: 160px 100px 130px 100px 160px 100px 130px;
      grid-row-gap: 10px;
      margin: 30px 0px 30px 30px;
      grid-template-areas:
        "labelAs inAs unitAs . labelHg inHg unitHg"
        "labelCd inCd unitCd . labelMo inMo unitMo"
        "labelCr inCr unitCr . labelNi inNi unitNi"
        "labelCu inCu unitCu . labelPb inPb unitPb"
        "labelMn inMn unitMn . labelZn inZn unitZn";
  }
  .schema--img {
      width:70vw;
  }
}

@media screen and (max-width: 1000px) {
  .grid-container-etm {
    display: grid;
    grid-template-columns: 160px 100px 120px;
    grid-row-gap: 10px;
    margin: 30px 20px 30px 60px;
    grid-template-areas:
      "labelAs inAs unitAs"
      "labelCd inCd unitCd"
      "labelCr inCr unitCr"
      "labelCu inCu unitCu"
      "labelMn inMn unitMn"
      "labelHg inHg unitHg"
      "labelMo inMo unitMo"
      "labelNi inNi unitNi"
      "labelPb inPb unitPb"
      "labelZn inZn unitZn"
  }
  .tab-custom {
    padding: 1% 2% 1% 2%;
    font-size: large;
  }
  .tabs-bar {
    width: 100%;
  }
  .schema--img {
      width:80vw;
  }
}

@media screen and (max-width: 900px) {
  .grid-container-sol {
      display: grid;
      grid-template-columns: 160px 100px 160px;
      grid-row-gap: 10px;
      margin: 30px 0px 30px 60px;
      grid-template-areas:
        "labelFe inFe   unitFe"
        ".       meanFe meanFe"
        "labelMO inMO   unitMO"
        ".       meanMO meanMO"
        "labelpH inpH   .     "
        ".       meanpH meanpH";
  }
}