html {
  font-size: 90%;
}

h1 {
  font-size: 2em;
}

h2 {
  font-size: 1.5em;
  border-bottom: 1px solid #e2e2e2;
  padding-bottom: 10px;
  margin-bottom: 30px;
}

header {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: auto 243px;
  grid-template-areas: "title logo";

  @supports not (display:grid){
    & {
      margin-bottom: 10px;
    }
  }


  @media only screen and (max-width: 500px)  {
    & {
        grid-template-columns: auto;
        grid-template-areas:
        "logo"
        "title";
    }
  }

  & h1 {
    grid-area: title;

    & a {
      color: #333;

      &:hover {
        text-decoration: none;
      }
    }
  }

  & img {
    grid-area: logo;
  }
}

.quote-form-wrapper {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr 1fr;

  @supports not (display:grid){
    & aside {
      margin-top: 10px;
    }
  }

  @media only screen and (max-width: 900px)  {
    & {
        grid-template-columns: 1fr;
    }
  }
}

.quote-summary-wrapper {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 3fr 1fr;
  grid-template-areas: "table filters";

  @media only screen and (max-width: 900px)  {
    & {
        grid-template-columns: 100%;
        grid-template-areas:
        "filters"
        "table"
        ;
    }
  }

  & article {
    grid-area: table;
  }

  & aside {
    grid-area: filters;
  }
}

nav#sub-menu {
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(6, 1fr);

  @supports not (display:grid) {
    & {
    margin-bottom: 10px;
  }

    & a {
      display: block;
    }
  }

  @media only screen and (max-width: 900px)  {
    & {
        grid-template-columns: repeat(3, 1fr);
    }
  }

  @media only screen and (max-width: 450px)  {
    & {
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 0;
    }
  }

  @media only screen and (max-width: 320px)  {
    & {
        grid-template-columns: 1fr;
    }
  }

  & a {
    text-align: center;
    background-color: #e4e4e4;
    padding: 10px;
    border-radius: 2px;
    color: grey;

    @media only screen and (max-width: 450px)  {
      border-radius: 0;
    }

    &:hover {
      text-decoration: none;
    }

    &.disabled:hover {
      cursor: default;
    }

    &.active {
      background-color: #286090;
      color: white;

      &:hover {
        background-color: #3682c3;
      }
    }

    &.visiting {
      background-color: #cc6a10;
      color: white;

      &:hover {
        background-color: #e87f1e;
      }
    }
  }
}


.amount {
  text-align: right;
}

.remiseCol {
  text-align: center;
}

td#instructions-text {
  width: 60%;
}

#filter-block {
  margin-top: 165px;
}

/*
 * Récapitulatif : options d'affichage de l'offre (voir quote_display_controller.js).
 * Les tarifs publics (.tarif) et remises (.remise) se retrouvent sur chaque ligne et
 * dans les sous-totaux (.sous-total) ; #total-ht est le total HT au tarif public.
 */
.quote-summary-wrapper[data-show-company-infos="0"] {
  & #company-infos {
    display: none;
  }

  & #filter-block {
    margin-top: 40px;
  }
}

.quote-summary-wrapper[data-show-prices="0"] :is(.tarif, .remise, .remiseCol),
.quote-summary-wrapper[data-presentation="1"] :is(.tarif, .remise):not(.sous-total, #total-ht),
.quote-summary-wrapper[data-presentation="1"] .total,
.quote-summary-wrapper[data-presentation="2"] :is(.tarif:not(#total-ht), .remise, .total, .sous-total) {
  display: none;
}

label.required::after
{
  content: ' *';
  color: red;
}

.background-orange
{
  & th, & td
  {
    background-color: orange;
  }
}

#company-infos {
    margin-top: 25px;
}