/* Main CSS rules */

/* ---- Main ---- */

/* couleur menu #004C79 */
/* couleur menu lien hover #014d7a */

@font-face {
  font-family: 'Quicksand';
  src: url('/app/hammel/fonts/Quicksand/Quicksand-VariableFont_wght.ttf');
  font-style: normal;
  font-display: swap;
}

:root {
  --primary: #E20613;
  --main-blue-color: #004C79;
  --notification-background-color: #1D2139;
  --legend: #6E7881;
  --black: #000;
  --red-color: #E20613;
  --green-color: #82C062;
  --orange-color: #ff9900;
  --blue-color: #009FE3;
  --dark-green-color: #198919;
  --gray-color: #6E7881;
}

/* ---- Helper ---- */
.cursor-pointer{ cursor: pointer; }

.text-main-blue {color: var(--main-blue-color) ;}

.color-green {color: #07C700 !important;}
.color-main-blue {color: var(--main-blue-color);}
.color-dark-green {color: var(--dark-green-color) !important;}
.color-gray {color: var(--gray-color) !important;}
.background-main-blue {background-color: var(--main-blue-color) !important;}
.background-dark-blue {background-color: #1D2139;}
.background-light-grey {background-color: #FAFAFA;}
.background-none {background: none !important;}
.border-grey {border-color: var(--legend) !important;}
.border-none {border: none !important;}
.light-grey {color: #ADB5BD !important;}
.txt-black {color: var(--black) !important;}

.ff-quicksand {font-family: Quicksand !important;}
.ft-default {font-size: 16px !important;}
.font-size-normal{ font-size: 14px !important; }
.font-size-small{ font-size: 12px !important; }
.font-weight-semi-bold {font-weight: 600;}
.font-weight-bold {font-weight: 700;}
.font-size-small{ font-size: 12px !important; }

.border-light{ border: 1px solid #F1F1F1 !important; }
.mx-n4{ margin: 0 -15px !important; }
.dark-blue {color: #1D2139; }
.dark { color:#0C0707; }

@media screen and (min-width: 1200px) {
  .container-lg { max-width: calc(100vw - 200px); margin: auto; }
}

/* ---- Main ---- */
html{
  font-size: 14px; /*1vw;*/
}
body {
  font-family: 'Quicksand', Arial, sans-serif;
  color: #414141;
  text-align: center;
}
a{
  color: inherit;
  text-decoration: underline;
}
a:hover{
  color: #000;
}
h1{
  font-size: 1.5rem;
  font-weight: bold;
  margin: 2rem 0;
  color: #000000;
}

@media (max-width: 768px) {
  h1{
    font-size: 1.25rem;
  }
}
.col-sm-9 h1, .col-sm-6 h1{
  margin-top: 0;
}
h2, .h2{
  font-size: 1.25rem;
  font-weight: bold;
  margin: 1rem 0;
  color: #000000;
}
@media (max-width: 768px) {
  h2, .h2{
    font-size: 1.1rem;
  }
}
h3{
  font-size: 1rem;
  font-weight: bold;
  margin: 1rem 0;
  color: black;
}
h4{
  font-family: 'Century Gothic', sans-serif;
  font-size: 1rem;
  margin: 1rem 0;
  color: black;
}
strong{
  font-weight: 600;
}
.access-panel {
  display: none;
}
table{
  width: 100%;
}
.hidden-submit{
  display: none;
}
.availability::before {
  display: inline-block;
  margin-right: 0.5rem;
  content: "";
  border-radius: 50%;
  width: 10px;
  height: 10px;
}
.availability-ok::before,
.availability-complicated::before {
  background-color: var(--green-color);
}
.availability-ok2::before{
  background-color: var(--orange-color);
}
.availability-ok3::before{
  background-color: var(--blue-color);
}
.availability-ko::before {
  background-color: var(--red-color);
}
.modal-content{
  border: none;
}
.color-primary, .text-primary{
  color: #E20613 !important;
}
.color-secondary, .text-secondary{
  color: var(--main-blue-color) !important;
}
.bg-primary{ background-color: #E20613 !important; color: white; }
.bg-secondary{ background-color: #004C79 !important; color: white; }
.bg-ternary{ background-color: #eaf1f4 !important; }
.bg-quaternary{ background-color: #FCFCFC !important; }
.navbar{
  padding: 0;
}
.btn-secondary.focus, .btn-secondary:focus{
  box-shadow: none;
}
.text-decoration-none{
  text-decoration: none !important;
}
.open-sans{
  font-family: 'Open Sans', sans-serif;
}

.color-grey {color: #212529 !important;}
.legend {color: #6E7881;}
.border-left-primary{
  border-left: 2px solid #E20613;
  display: block;
  padding-left: 1rem;
}
.border-left-secondary{
  display: block;
  padding-top: 0.8rem;
  padding-left: 1rem;
  border: 1px solid #F0F3FC;
  border-left: 4px solid #4FBCC0;
  border-radius: 5px 0px 0px 6px;
}

/* ---- Badges ---- */

.badge{
  border-radius: 0;
  box-shadow: none;
  line-height: normal;
}
.badge.badge-primary{
  background: #E20613;
}
.badge.badge-rounded{
  border-radius: 5px;
}
.badge.badge-search{
  border-radius: 23px;
  padding: 0.5rem 1rem;
  margin: 0 1rem 1rem 0;
  font-size: inherit;
  color: #23263B;
  background-color: #f5f5f5;
  font-weight: 600;
  text-decoration: none;
}
.badge.badge-search a{
  text-decoration: none;
}
.badge.badge-search i{
  cursor: pointer;
  margin-left: 1.5rem;
}
.badge.badge-order{
  cursor: pointer;
  border-radius: 3px;
  padding: 5px;
  position: relative; /* fixes tooltip on mobiles with overflow */
}
.badge.badge-order.badge-info{
  color: #009add;
  background-color: #e2f5fb;
}
.badge.badge-order.badge-success{
  color: #19b18a;
  background-color: #e4f6f2;
}
.badge.badge-stock{
  background: #E5F5FC;
  color: #009CE1;
}
[data-toggle="tooltip"]{
  cursor: pointer;
}


/* ---- Cards ---- */

.bg-notification {
  background-color: #5487FF;
}
.card{ background: #F6F9FC 0% 0% no-repeat padding-box; border: 1px solid #E3F0F6; margin-bottom: 1rem; border-radius: 0; }
.card.card-secondary{ background: white; }
.card.card-ternary{ background: #FAFAFA; border: none; }
#cart .row.row-header .col-4,
.card .card-title{
  background: #1D2139;
  color: white;
  text-transform: none;
  font-weight: normal;
  text-align: center;
  margin: 0;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  line-height: normal;
}
.card .card-body .remind-id {
  text-transform: none;
  font-size: 14px;
}
.card .card-body .p-space {
  margin-bottom: 1rem;
}
.card a:not(.btn){ color: #004C79; }

.card.card-cart-verify .card-body {
  font-weight: 500;
}
.card.card-cart-verify .card-body .fa-circle-exclamation {
  color: #2196F3;
  font-size: 24px;
}
.card.card-cart-verify .card-body a:not(.btn){ color: #9AA0A6; }
.card.card-encours p{ color: #6E7881; font-size: 10px; }

.snippet-link {color : inherit; font-weight: 600;}

/* ---- Checkboxes / Radios buttons ---- */

label.radio{
  padding-left: 30px;
}
label.radio > input[type=radio]{
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border: none;
  display: block;
  float: none;
  margin: 0 0 0 -30px;
  position: absolute; /* Fixes bug on ie and iphone */
  background: transparent; /* Fixes a bug on Safari */
}
label.radio > input[type=radio]::before{
  border: 1px solid #0D3887;
  border-radius: 50%;
  box-sizing: border-box;
  content: '';
  height: 18px;
  left: 0;
  margin: 1px 4px;
  position: absolute;
  top: 0;
  width: 18px;
}
label.radio > input[type=radio]::after{
  border-radius: 50%;
  content: '';
  display: block;
  height: 12px;
  left: 7px;
  position: absolute;
  top: 4px;
  width: 12px;
}
label.radio > input[type=radio]:checked::before{
}

/* ---- Checkboxes / Radios buttons ---- */

label.radio{
  padding-left: 30px;
}
label.radio > input[type=radio]{
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border: none;
  display: block;
  float: none;
  margin: 0 0 0 -30px;
  position: absolute; /* Fixes bug on ie and iphone */
  background: transparent; /* Fixes a bug on Safari */
}
label.radio > input[type=radio]::before{
  border: 1px solid #0D3887;
  border-radius: 50%;
  box-sizing: border-box;
  content: '';
  height: 18px;
  left: 0;
  margin: 1px 4px;
  position: absolute;
  top: 0;
  width: 18px;
}
label.radio > input[type=radio]::after{
  border-radius: 50%;
  content: '';
  display: block;
  height: 12px;
  left: 7px;
  position: absolute;
  top: 4px;
  width: 12px;
}
label.radio > input[type=radio]:checked::after{
  background-color: #1D2139;
}
@media screen and (max-width: 768px) {
  label.radio > input[type=radio] {
    transform: scale(1.3);
  }
}

/* ---- Cookie Bar ---- */
div#cookie-bar { background-color: #d1d3d4; border-top-color: #d1d3d4; color: #000000; width: 15%; margin: 15px; padding-bottom: 15px; }
div#cookie-bar, #cookie-bar-prompt-content, #cookie-bar-prompt-content a, #cookie-bar a, #cookie-bar-prompt-content a:hover, #cookie-bar a:hover, #cookie-bar-prompt-content span { color: #000000!important; font-weight: normal!important; }
p#cookie-bar-buttons { float: none!important; text-align: right; }
a#cookie-bar-button { float: none; background-color: #ffffff; border-radius: 5px; }
#cookie-bar-text { text-align: left; font-size: 1em; }

/* ---- Structure ---- */
#global { margin:0 auto; text-align:left; }
#wrapper { background-color:#fff; }
#header-wrapper { padding: 15px; text-align:left; }
@media (min-width: 1200px) {
  .container{
    max-width: calc(100vw - 200px);
  }
}
.container-secondary{ background-color: #004C79; color: white; }
.container-ternary{ background-color: #eaf1f4; }

/* ---- Header ---- */
#header{
  position: relative; /*fixed;*/
  z-index: 99;
  top: 0;
  width: 100%;
  /*overflow: auto;*/
  background: white;
}
#header .container-fluid{
  font-size: 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
@media (max-width: 1440px) {
  #header .container-fluid{
    font-size: 0.8rem;
  }
}
#header > .container{
  background: white;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
#header > .container > .row{
  padding: 1rem 0;
}
#header .col-logo{
  color: #000;
}
#header .col-logo a{
  text-decoration: none;
  white-space: nowrap;
}
#header .col-logo a img{
  max-width: 170px;
}
#header .col-logo a .text{
  font-size: 0.71rem;
  vertical-align: bottom;
  margin-left: 0.25rem;
}
@media (min-width: 1200px) and (max-width: 1440px) {
  #header .col-logo a .text{
    display: block !important;
  }
}
#header .col-auth .navbar-collapse ul li:not(:last-child){ border-bottom: 1px solid #E0EFF8; }
#header .col-auth .navbar-toggler{
  color: #004C79;
  display: flex;
  font-size: 1rem;
  border-radius: 0;
  align-items: center;
  padding: 0;
  max-width: 100%;
}
#header .col-auth .navbar-toggler .text{
  white-space: nowrap;
  font-size: 0.857rem;
  text-align: left;
  margin-left: 0.5rem;
  line-height: 1rem;
  max-width: 100%;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 768px) and (max-width: 1440px) {
  #header .col-auth .navbar-toggler .text{
    font-size: 0.8vw;
  }
}
#header .col-auth .navbar-toggler:hover{
  color: #E20613;
}
#header .col-auth .navbar-collapse{
  margin-top: 5px;
  position: absolute;
  background: white;
  padding: 0 1rem;
  z-index: 2;
  box-shadow: 0px 3px 6px #00000029;
  color: #004c79;
  border-radius: 5px;
}

#header .col-auth .navbar-collapse ul li:not(:last-child) {
  border-bottom: 1px solid #E0EFF8;
}

#header .col-auth .navbar-collapse ul li a {
  display: block;
  padding: 1rem 0;
}

#header .col-auth .navbar-collapse i { font-size: 16px; }

@media screen and (max-width: 1478px) {
  #header .col-auth .navbar-collapse { min-width: 250px; font-size: 0.9rem; }
  #header .col-auth .navbar-collapse p:first-of-type { color: #000000; }
}

#header .col-auth .navbar-collapse a {
  text-decoration: none;
}

#header .col-auth .navbar-collapse ul li a {
  display: block;
  padding: 1rem 0;
}

#header .col-auth .navbar-collapse i {
  margin-right: 1rem;
}

#header .col-auth .navbar-collapse p:last-child {
  margin-bottom: 0;
}

#header .col-auth .navbar-collapse a:not(.btn){
  color: #004C79;
}
#header .col-cart{
  color: #004C79;
}
#header .col-cart a.cart{
  display: inline-block;
  position: relative;
  text-decoration: none;
}
#header .col-cart a.cart:hover{
  color: #E20613;
}
#header .col-cart a.cart i.fa.fa-cart-shopping{
  font-size: 2rem;
}
#header .col-cart a.cart .badge{
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  border-radius: 50%;
  color: white;
  background: #E20613;
  line-height: 1;
}
@media screen and (max-width: 480px) {
  #header .col-logo{
    order: 1;
  }
  #header .col-search{
    order: 3;
    margin-top: 1rem;
  }
  #header .col-auth-cart{
    order: 2;
  }
}

/* ---- Menu ---- */
#header .col-menu{
  box-shadow: 0px 3px 3px -3px #0000001A;
}
#header .col-menu .navbar{
  padding: 0;
}
#header .col-menu ul.menu{
  display: flex;
  width: 100%;
  margin: 0;
  padding-bottom: 10px;
}
#header .col-menu ul.menu li{
  margin-right: 3rem;
}
#header .col-menu ul.menu li a.a-back{
  display: none;
}

@media (max-width: 768px) {
  #header .col-menu ul.menu > li{
    position: relative;
  }
}

#header .col-menu ul.menu > li.spacer{
  flex: 0 0 40%;
}
@media (max-width: 1600px) {
  #header .col-menu ul.menu > li.spacer{
    flex: 0 0 30%;
  }
}
#header .col-menu ul.menu > li > a{
  display: block;
  width: 100%;
  text-decoration: none;
  color: #004C79;
  font-weight: 600;
}
#header .col-menu ul.menu li.li-services.active {
  background-color: #EAF1F4;
}
@media (max-width: 768px) {
  #header .col-menu ul.menu li.li-services a i {
    display: none;
  }
}
#header .col-menu ul.menu > li.li-destockage {
  position: static;
}

@media (min-width: 576px) and (max-width: 768px) {
  #header .col-auth-cart {
    display: flex;
    align-items: center;
  }
}

#header .col-menu ul.menu li.li-services {
  position: relative;
}

#header .col-menu ul.menu li.li-services.active ul{
  position: absolute;
  height: auto;
  min-height: auto;
  top: 2.4rem;
}

#header .col-menu ul.menu li.li-services .submenu-header {
  display: none !important;
}

#header .col-menu ul.menu li.li-services > ul li {
  position: relative;
  border-bottom: 1px solid #f3f3f4;
}

#header .col-menu ul.menu li.li-services > ul li {
  color: #2A313D;
  padding-bottom: 0.5rem;
  margin-top: 0.7rem;
}

@media (max-width: 768px) {
  #header .col-menu ul.menu li.li-services > ul li {
    color: #004C79;
    padding-bottom: initial;
    margin-top: initial;
    border-bottom: initial;
  }

  #header .col-menu ul.menu li.li-services > ul {
    padding-top: 1rem;
  }
}

#header .col-menu ul.menu > li.li-produits > a > i.fa-bars{
  display: inline-block;
}
#header .col-menu ul.menu > li.li-produits > a > i.fa-times{
  display: none;
}

#header .col-menu ul.menu > li.li-produits.active > a > i.fa-times{
  display: inline-block;
}
#header .col-menu ul.menu > li.li-promo > a{
  color: white;
  background-color: #004C79;
  padding: 0 5px;
}
/* any level */
#header .col-menu ul.menu > li ul{
  visibility: hidden;
  opacity: 0;
  position: fixed;
  width: 21rem;
  min-height: 45rem;
  top: 0rem;
  left: 0rem;
  z-index: 0;
  padding: 1rem;
  transition: left 0.5s, top 0.5s, opacity 0.5s;
}
#header .col-menu ul.menu li.active > ul{
  visibility: visible;
  opacity: 1;
}
#header .col-menu ul.menu li.active > ul::before{
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: white;
  box-sizing: inherit;
  left: 0;
  top: 0;
  border: 1px solid #e5e5e5;
  z-index: 0;
}

#header .col-menu ul.menu li.active > a .fa-caret-right {
  color: white !important;
  z-index: 1;
}

#header .col-menu ul.menu li.active > a .li-hover {
  color: white !important;
  z-index: 1;
  visibility: visible;
}

ul.menu li.active > a > span::before {
  visibility: visible;
  content: "";
  border-left: 1px solid white;
  display: block;
  width: 1px;
  height: 1.4rem;
  float: left;
  margin-right: 0.4rem;
}

ul.menu li > a > span::before {
  visibility: hidden;
  content: "";
  border-left: 1px solid white;
  display: block;
  width: 1px;
  height: 1.4rem;
  float: left;
  margin-right: 0.4rem;
}

ul.menu li.active ul li.active ul li.submenu-header a span::before {
  content: none;
}

#header li.header{
  height: 9rem;
  padding-left: calc(1rem - 2px);
}

#header .col-menu ul.menu > li ul li {
  /* margin: 1rem 0; */
  color: #004C79;
}

#header .col-menu .menu a span {
  margin-left: 8px;
}

#header .col-menu .menu .submenu-header a span {
  margin-left: 0px;
}

#header .col-menu ul.menu > li ul li a {
  position: relative;
  display: flex;
  text-decoration: none;
  padding: 0.4rem 1rem;
  margin: 0 -1rem;
  line-height: 1.4rem;
  justify-content: space-between;
  align-items: center;
}

#header .col-menu ul.menu > li ul li.header a {
  display: inline-block;
}

#header .col-menu ul.menu > li ul li a {
  cursor: pointer;
}

#header .col-menu ul.menu > li ul li a span{
  font-size: 96%;
  position: relative;
  z-index: 1;
}
#header .col-menu ul.menu > li ul li .red {
  color:red;
}
#header .col-menu ul.menu > li ul li a::before{
  content: "";
  position: absolute;
  height: 100%;
  width: 0;
  background: #014d7a;
  z-index: 0;
  left: 0;
  top: 0;
  transition: width 0.5s;
}

#header .col-menu ul.menu > li ul li a .li-hover {
  visibility: hidden;
  transition: visibility 0.5s;
}

#header .col-menu ul.menu > li ul li a:hover .li-hover {
  visibility: visible;
}

#header .col-menu ul.menu > li ul li:not(.header) a:hover{
  color: white !important;
}

#header .col-menu ul.menu > li ul li:not(.header) a:hover .fa-caret-right{
  color: white !important;
  z-index: 1;
}

#header .col-menu ul.menu > li ul li:not(.active):not(.header) a:hover::before{
  width: 100%;
}
#header .col-menu ul.menu > li ul li.li-back{
  visibility: hidden;
}
#header .col-menu ul.menu > li ul li.li-back{
  margin-bottom: 1rem;
}
#header .col-menu ul.menu > li ul li.li-back > a{
  font-size: 0.6rem;
  color: #666;
}
#header .col-menu ul.menu > li ul li.li-back > a i{
  margin-right: 0.5rem;
}
#header .col-menu ul.menu > li ul li.active > a{
  background: #004C79;
  color: white;
}
#header .col-menu ul.menu > li ul li > a i.fa.fa-angle-right{
  visibility: hidden; /*display: none;*/
  float: right;
  color: white;
  line-height: 1.4rem;
}
/* 1st level */

/* refonte menu */

p.titre-menu {
    color: initial;
    position: relative;
    text-transform: uppercase;
    margin-top: 1rem;
}

#header .col-menu .menu .subheader {
  border-top: 1px solid #e5e5e5;
  position: relative;
  padding-left: calc(1rem - 2px);
}

#header .col-menu .menu .subheader p {
    color: initial;
    position: relative;
    text-transform: uppercase;
    margin-top: 1rem;
}

.spacer-submenu {
  position: relative;
}

#header .col-menu ul.menu > li ul > li a.link-back {
  font-weight: normal;
  color : #004C79;
  text-decoration: underline;
}

#header .submenu-header {
  padding-left: calc(1rem - 2px);
  padding-top: 2rem;
  height: 9rem;
}

#header .header p {
  color: initial;
  position: relative;
  text-transform: uppercase;
  margin-top: 1rem;
}

#header .submenu-header p {
  color: initial;
  position: relative;
  text-transform: uppercase;
}

#header .col-menu ul.menu > li > ul{
  top: -50rem;
}
#header .col-menu ul.menu > li.active > ul{
  position: fixed;
  top: 0rem;
}
#header .col-menu ul.menu > li > ul > li > a{
  font-size: 96%;
  /* font-weight: bold; */
}
#header .col-menu ul.menu > li > ul > li > a i:not(.fa){
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

#header .col-menu ul.menu > li > ul > li.active > a i.hover,
#header .col-menu ul.menu > li > ul > li > a:hover i.hover{
  display: inline-block;
}
#header .col-menu ul.menu > li > ul > li > ul{
  left: 0;
  top: 0;
}
#header .col-menu ul.menu > li > ul > li.active > ul{
  position: absolute;
  left: 100%;
  z-index: -1;
}
/* nth level */
#header .col-menu ul.menu > li > ul > li ul > li > ul{
  left: 0;
  top: 0;
}
#header .col-menu ul.menu > li > ul > li ul > li.active ul{
  position: absolute;
  left: 100%;
  z-index: -2;
}
#header .col-menu ul.menu > li > ul > li ul > li.li-back{
  visibility: visible;
}

/* refonte menu mobile */

@media (max-width: 768px) {
  #header .col-menu ul.menu > li {
    padding: 0.5rem 0;
    box-sizing: initial;
    background-color: white;
  }

  .hide {
    display: none !important;
  }

  #header .col-menu .collapse.navbar-collapse.show{
    padding: 2.5rem 4rem;
    display: block;
    position: absolute;
    left: 0;
    z-index: 999;
    font-size: 1rem;
    top: 50px;
    min-height: 350px;
    background-color: white;
    width: 100%;
  }

  #header .col-menu ul.menu li.active{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    z-index: 1;
    background: white;
    padding: 2.5rem 4rem;
    box-sizing: border-box;
  }
  #header .col-menu ul.menu > li > ul > li.active{ z-index: 2; }
  #header .col-menu ul.menu > li > ul > li > ul > li.active{ z-index: 3; }

  #header .col-menu ul.menu li.active li.submenu-header {
    padding-top: 0;
    padding-left: 0;
    height: 3rem;
  }

  #header .col-menu ul.menu li.active > a{
    position: relative;
    z-index: 1;
  }
  #header .col-menu ul.menu > li > ul > li.active > a{ z-index: 2; }
  #header .col-menu ul.menu > li > ul > li > ul > li.active > a{ z-index: 3; }

  #header .col-menu ul.menu li.active > ul{
    position: static !important;
  }
  ul.menu li > a > span::before {
    display: none;
    content: none;
  }

  ul.menu li.active > a > span::before {
    content: none;
  }

  #header .col-menu ul.menu > li ul li a::before {
    display: none;
  }

  #header .col-menu ul.menu > li.active ul > li a.link-back {
    margin-top: 1rem;
  }

  #header .col-menu ul.menu li.active > a:not(.a-back) {
    display: none;  
  }

  #header .col-menu ul.menu li.active > a.a-back {
    display: block;  
  }

  #header .col-menu ul.menu > li ul{
    padding: 0;
  }

  #header .col-menu ul.menu > li ul li a{
    margin: 0;
  }

  #header .col-menu ul.menu > li ul li.active > a{
    background: none;
    color: #175c85 !important;
  }

  #header .col-menu .menu a span{
    margin-left: 0;
  }

  #header .col-menu ul.menu > li > a {
    padding-bottom: 1rem;
  }

  #header .col-menu ul.menu > li ul li a {
    padding:0 0 1rem 0;
  }

  #header .col-menu ul.menu > li ul li.active .a-back {
    border-bottom: 1px solid #e5e5e5 !important;
  }

  #header .col-menu ul.menu > li ul li.active .a-back span {
    font-size: 14px;
  }

  #header .col-menu ul.menu > li.active a i:not(.fa) {
    width: 1rem;
  }

  #header .col-menu ul.menu > li.active.li-produits ul {
    padding-top: 1rem;
  }
}

/* ---- Search ---- */

#header .col-search form{
  position: relative;
}
#header .col-search form .control-group{
  width: 100%;
}
#header .col-search form input.search-text{
  box-shadow: 0px 6px 6px #B2B8D433;
  border: 1px solid #DFE1E5;
  border-radius: 20px;
  width: 100%;
  height: 2.6rem;
  padding: 0.3rem 0 0.3rem 2.3rem;
  background: none;
}
#header .col-search form input.search-text:focus{
  border-color: #2196F3;
}
#header .col-search form button{
  cursor: pointer;
  height: 30px;
  border: none;
  background: none;
  font-size: 1.2rem;
  color: #9AA0A6;
  padding: 0;
  position: absolute;
  top: 3px;
  left: 2px;
  width: 30px;
  border-radius: 50%;
}
#header .col-search form button.btn-close{
  display: none;
  right: 5px;
  color: #000;
  background: #eee;
  left: auto;
}
#header .col-search form button.btn-back{
  display: none;
  background: white;
  color: #000;
}
#header .col-snippet{
  margin-top: 1rem;
}

/* ---- Promo menu ---- */
#promo-menu ul { display: table; width: 100%; }
#promo-menu ul li { display: table-cell; padding: 0 2em; }
#promo-menu ul li img { width: 100%; max-width: 300px; }

/* ---- Buttons ---- */

.btn{
  border: none;
  border-radius: 0;
  text-decoration: none;
  font-weight: bold;
  padding: 0.4rem 1.5rem;
}
.btn.btn-sm{
  padding: 0.4rem 0.8rem;
}
.btn.btn-primary{
  color: white;
  background-color: #E20613;
  border: 1px solid #E20613;
}
.btn.btn-quaternary{
  color: #E20613;
  background-color: white;
  border: 1px solid #E20613;
}
.btn-primary.disabled{
  background-color: #ebebeb !important;
  color: #777 !important;
  border-color: #777 !important;
  opacity: 1 !important;
}
.btn.btn-secondary{
  color: white;
  background-color: var(--main-blue-color);
  border: 1px solid var(--main-blue-color);
}
.btn.btn-ternary{
  color: #414141;
  background-color: #EDDBDD;
  border: 1px solid #EDDBDD;
}
.btn.btn-dark{
  color: white;
  background-color: #000000;
  border: 1px solid #000000;
}
.btn.btn-light{
  color: #414141;
  background-color: #F5F5F5;
  border: 1px solid #F5F5F5;
}
.btn.btn-border{
  color: #323232;
  background-color: #FFFFFF;
  border: 1px solid #DEE2E6;
}
.btn.btn-primary:hover,
.btn.btn-border.btn-primary{
  background: transparent;
  border-color: #E20613;
  color: #E20613;
}
.btn.btn-border.btn-secondary{
  border-color: #004C79; /*#0D3887;*/
  color: #0D3887;
}

.btn-quantity {
  background-color: #F0F3FC;
  border-radius: 10px;
  padding: 5px 9px !important;
}

.cart-add-box{
  position: relative;
  font-size: 0;
  white-space:nowrap;
}

.cart-add-box .cart-qty-wrapper { display: inline-block; border: 1px solid #B2B8D4; background: white; }
.cart-add-box form a, .cart-add-box form input { border: none; }
.cart-add-box .btn.btn-sm:not(.btn-border) { padding: 0.7rem; }
.cart-add-box .btn.btn-sm:not(.btn-primary) { background-color: #F0F3FC; padding: 10px 1rem; }
.cart-add-box .btn.btn-sm i { font-size: 20px; }
.cart-add-box a.cart { margin-left: 1rem; }

@media (min-width: 1200px) and (max-width: 1440px){
  .cart-add-box .btn-primary{
    margin-left: 0.5rem;
  }
}
.cart-add-box .product-stock {
  position: absolute;
  display: inline-block;
  font-size: 10px;
  left: 0;
  bottom: 0;
  transform: translateY(120%);
}
.cart-add-box .product-stock br {
  display: none;
}

/* ---- Breadcrumb ---- */
#breadcrumb{
  margin: 2rem 0;
  color: black;
  font-size: 1rem;
}
#breadcrumb .sep{
  margin: 0 1rem;
}
#breadcrumb a {
  text-decoration: none;
}
#breadcrumb .text{
  font-weight: bold;
}
.breadcrumb-wrapper{
  margin: 0 -15px;
  padding: 15px;
}
.breadcrumb-wrapper #breadcrumb{
  margin: 0;
}

@media screen and (max-width: 768px) {
  #breadcrumb {
    margin: 1rem 0 0 0;
  }
}

/* ---- Footer ---- */
#footer h2 {
  font-size: 36px;
  color:white;
  text-transform: none;
  margin-bottom: -5px;
}
#footer h3 {
  color: white;
  font-size: 1.3rem;
}
#footer span.century-gothic {
  font-size: 10px;
}
#footer .btn-footer {
  display: inline-block;
  border: 1px solid white;
  padding: 0.5rem 0.8rem;
  cursor: pointer;
  margin-bottom: 1.5rem;
}
#footer .container-fluid{
  padding: 1rem 0;
}
#footer .container-newsletter{
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  background-color: white;
}
#footer .certified {
  font-weight: normal;
  font-size: 1rem;
  color:#000000;
  font-family: 'Quicksand';
}
#footer .container-newsletter .col-newsletter p{
  font-size: 0.857rem;
}
#footer .container-newsletter .col-newsletter form input.text{
  border: none;
}
#footer .container-newsletter .col-certified ul{
  display: flex;
  justify-content: space-between;
  max-width: 260px;
}
#footer .container-footer a {
  text-decoration: none;
}
#footer .container-footer span {
  margin-right: 20px;
}
#footer .container-links .col-social ul{
  width: 100%;
  display: flex;
  margin: 0;
  justify-content: end;
}
#footer .container-links .container-footer {
  border-top: 1px solid white;
  padding-top: 0.7rem;
}
#footer .container-links .col-social ul li:not(:last-child){
  margin-right: 1.5rem;
}
#footer .container-links .col-social li a{
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: #ffffff;
}
#footer .col-logo{
  color: #2A313D;
}
#footer .col-logo a{
  text-decoration: none;
  white-space: nowrap;
}
#footer .col-logo a img{
  max-width: 170px;
}
#footer .col-logo a .text{
  font-size: 0.857rem;
  vertical-align: bottom;
  margin-left: 0.25rem;
}
#footer .container-menu{
  padding-bottom: 1rem;
  background-color: #004C79;
}
.col-copyright span {
  font-size: 12px;
}
#footer .container-footer {
  max-width: calc(100vw - 300px);
  color: white;
  margin: auto;
}
@media (max-width: 768px){
  #footer .container-footer {
    max-width: calc(100vw - 50px);
    margin: 0 auto;
  }
  #footer .menu-footer h3 {
      margin: 1rem auto;
      display: flex;
      justify-content: space-between;
      padding-bottom: 1rem;
  }
  #footer .menu-footer div:not(:last-child) .menu-mobile {
    border-bottom: 1px solid white;
  }
  #footer .menu-mobile i {
    font-size: 1.5rem;
  }
  #footer .container-footer .col-copyright{
    order: 2;
  }
  #footer .container-footer .col-social {
    margin-bottom: 2rem;
  }
}
@media (min-width: 769px) {
  #footer #navbar-footer-collapse-1, #footer #navbar-footer-collapse-2, #footer #navbar-footer-collapse-3, #footer #navbar-footer-collapse-4{
    display: block;
  }
}


#footer .container-menu .navbar-expand-lg{
  align-items: flex-start;
}
#footer .container-menu .navbar-expand-lg .navbar-collapse{
  flex-direction: column;
  align-items: flex-start;
}
#footer .container-menu p{
  font-size: 12px;
}
#footer .container-menu ul li{
  margin-bottom: 1.5rem;
}
#footer .container-menu ul li a{
  text-decoration: none;
}
#footer a:hover {
  text-decoration: underline !important;
  color: white;
}
#footer a.btn-footer:hover {
  text-decoration: none !important;
}
#footer .container-links{
  font-size: 1rem;
}
#footer .footer-top{
  position: fixed;
  bottom: 3.5rem;
  right: 1rem;
}
#footer .footer-top a{
  color: #0D3887;
  text-transform: uppercase;
  text-decoration: none;
}
#footer .footer-top a:hover{
  color: #E20613;
}
#footer .footer-chat{
  position: fixed;
  bottom: 6rem;
  right: 1rem;
  background: #FFFFFF;
  box-shadow: 3px 3px 6px #0000006B;
  border: 5px solid #0D3887;
  color: #C03342;
  border-radius: 50%;
  padding: 1rem;
}

/* ---- Forms ---- */
form .req { color:#C50C29; }
form li { margin:0 0 12px 0; }
form td { padding:0 0 12px 0; }
form label { display:block; margin:0 0 2px 0; }
form.inline label { display: inline; }
form input.text, form textarea.text { width:200px; border:1px solid #707070; font-size:11px; color:#808080 !important; padding:4px; }
form input.text{ line-height: 1.5rem; }
form input.text:focus, form textarea.text:focus, form .kwo-captcha-box input:focus { border-color:#4D4D4D; }
select { border:1px solid #ccc; font-size:11px; padding:3px 4px; background:#fff; padding: 0.7rem;}
form .kwo-captcha-box input { width: 120px; display: inline-block; margin-right: 0.5rem;}
form input.cart-qty, input.cart-qty { width:50px; border: none; font-size:12px; color:#808080; padding:2px 4px; text-align:center; vertical-align:middle; background:#fff; outline: none; }
.elt-wide input.text, .elt-wide textarea.text { width:100%!important; }
.form-group{ margin-bottom: 1rem; }
.form-control{ border-radius: 0; }
form input.text:disabled, form textarea.text:disabled, form select:disabled { background: white; cursor: not-allowed; }
form input.text.secondary{ background: #F3F3F3; color: #7A7A7A; border-color: #F3F3F3; }
form input.text.secondary:focus{ background: #FFFFFF; border-color: #7A7A7A; }

/* ---- Filters ---- */
.price-box .input { margin: 20px 0 0 0; display: flex; justify-content: space-between; }
/*.price-box .input .filter-track { background-color:#ccc; position:relative; height: 1px; z-index:0; }
.price-box .input .filter-range { background-color:#C50C29; position:absolute; height:1px; z-index:1; left:0; width:100%; }
.price-box .input .filter-handle { position:absolute; height:25px; width:25px; top:-13px; cursor:move; z-index:2; }
.price-box .input #price-min-handle { background-image:url(/app/hammel/pix/btn-next.png) }
.price-box .input #price-max-handle { background-image:url(/app/hammel/pix/btn-prev.png) }*/
.price-box .input input { border:1px solid #B2B8D4; background:none; width:45%; height: 40px; margin:0 0 20px 0; padding: 0 15px; }

/* ---- Produit box ---- */
.produit-box { position: relative; padding: 10px; text-align: left; }
.produit-box > a { text-decoration: none; }
.produit-box > a:hover { color: inherit; }
.produit-box > a:hover .name { color: black; }
.produit-box .image { margin:0; padding:0; height:140px; text-align:center; overflow:hidden; /*position:relative;*/ }
.produit-box .image .img { height:140px; line-height:140px; }
.produit-box .image .img img { padding:0; margin:auto; line-height:0; vertical-align:middle!important; }
.produit-box .image .brand{ position: absolute; top: 2px; right: 2px; max-width: 60px; max-height: 30px; }
.produit-box .image .brand img{ max-width: 100%; max-height: 30px; }
.produit-box .price { font-size: 13px; display: inline-block; vertical-align: middle; /*width: 100%;*/ color: #0c0707; }
.produit-box .price br { display: none; }
.produit-box .price .discounted{ font-weight: bold; color: #E20613; }
.produit-box .price .undiscounted { color:#000000; }
.produit-box .price .public { color:#808080; font-weight: normal; }
.produit-box .availability { font-size: 1rem; font-weight: normal; margin-bottom: 0.5rem; }
.produit-box .name { font-size: 1rem; line-height: 1rem; height: 3rem; overflow: hidden; margin-bottom: 0.5rem; text-decoration: underline; }
.produit-box .desc { color:#808080; font-size:10px; height:10px; line-height:10px; margin-bottom: 1rem; }
.produit-box a.btn { font-size: 0.7rem; }
.produit-box .cart-add-box { vertical-align:middle; display:inline-block; }
.produit-box .cart-add-box a { display:inline-block; }
.produit-box .cart-add-box a.btn.btn-primary { margin-left: 0.5rem; }
@media (min-width: 768px) and (max-width: 1024px){
  .produit-box .cart-add-box .btn.btn-sm:not(.btn-border){ padding: 0.5rem; }
  .produit-box .cart-add-box .btn.btn-sm:not(.btn-primary){ padding-left: 0.8rem; padding-right: 0.8rem; }
  .produit-box .cart-add-box form input.cart-qty { width: 40px; }
}
@media (min-width: 768px) and (max-width: 1440px){
  .produit-box .availability { font-size: 10px; }
}

/* produit badge */
.produit-box span.badge, span.badge.main-badge { min-width: 106px; text-transform: uppercase; position: absolute; max-height: 20px; font-size: 10px; top: 0; left: 0; z-index: 1; }
.produit-box span.badge .title, span.badge.main-badge .title { display: block; font-weight: bold; color: white; }
.produit-box span.badge .title img, span.badge.main-badge .title img { margin: 0 0 0 -3px; display: flex; }
.produit-box span.badge .description,  span.badge.main-badge .description { display: block; margin-left: 0.5rem;}

/* ---- Best-sellers ---- */
.bestsellers { position:relative; margin:0 0 10px 0; }
.bestsellers .foot { padding:5px 0; text-align:center; width:100%; /*top:282px; position:absolute;*/}
.bestsellers .slide-bestseller { overflow:hidden; position:absolute; width:100%; z-index:0; }
.bestsellers .slide-bestseller div.slide { background-color:inherit; position:absolute; left:0; top:0; width:100%; z-index:1; }
.bestsellers .slide-prev, .bestsellers .slide-next { display: none; position: absolute; top: calc(50% - 3.5rem); font-size: 1rem; cursor: pointer; background:#f3f3f3; color: #a4c1ce; padding: 2rem 0.5rem; }
.bestsellers:hover .slide-prev, .bestsellers:hover .slide-next { display: block; }
.bestsellers .slide-prev:hover, .bestsellers .slide-next:hover { opacity: 1; background:#004C79; color: #ffffff; }
.bestsellers .slide-prev { left: 0; }
.bestsellers .slide-next { right: 0; }
.bestsellers .slide-nav{ display: none; }
.bestsellers .bestseller { height:330px; overflow:hidden; position:relative; }
.bestsellers .bestseller .slide-bestseller { height:330px; }
.bestsellers .bestseller .item { float:left; height:330px; background: white; border: 1px solid #E3F0F6; display:inline-block; margin:0 1rem 0 0; box-sizing: border-box; }
.bestsellers .bestseller .item.last { margin-right: 0; }
.bestsellers.small { border: none; }
.bestsellers.small .bestseller { height: 80px; }
.bestsellers.small .bestseller .slide-bestseller { height: 80px; }
.bestsellers.small .bestseller .item { position: relative; height: 80px; border: none; }
.bestsellers.small .bestseller .image { width: 60px; float: left; }
.bestsellers.small .bestseller .image a { height: 60px; line-height:normal; }
.bestsellers.small .bestseller .image img { width: 100%; }
.bestsellers.small .bestseller a.button { display: none; }
.bestsellers.small .bestseller .price { margin: -0.8em 0 0 30px !important; float: left; width: 100%; position: relative; }
.bestsellers.small .bestseller .cart-add-box { position: absolute; bottom: 0.5em; right: 0.5em; }
.bestsellers.small .foot { padding: 0; margin: 1em 0; }
.bestsellers.columns-3 .bestseller .item { width: calc(33.33% - 0.67rem); }
.bestsellers.columns-4 .bestseller .item { width: calc(25% - 0.857rem); }
.bestsellers.columns-5 .bestseller .item { width: calc(20% - 0.857rem); }
.dialog-support .bestsellers .bestseller .slide-bestseller { height:340px; }
.dialog-support .bestsellers .bestseller .item { height:340px; }
.dialog-support .bestsellers .bestseller .item .produit-box .name{ height: 3rem; }
.dialog-support .bestsellers .bestseller .item .produit-box .price { font-size: 0.857rem; width: 45%; margin-bottom: 0.7rem; }
.dialog-support .bestsellers .bestseller .item .produit-box .price br { display: none; }
@media (hover: none) {
  .bestsellers .slide-prev, .bestsellers .slide-next { display: block; }
}
@media (max-width: 768px) {
  .container .bestsellers .slide-prev { left: -15px; }
  .container .bestsellers .slide-next { right: -15px; }
  .bestsellers .bestseller .item { width: 100% !important; margin-right: 0 !important; }
  .action-home #main > .container-fluid.container-banners .slider .slide-prev{ left: 0; }
  .action-home #main > .container-fluid.container-banners .slider .slide-next{ right: 0; }
}
@media (max-width: 1550px) {
  .bestsellers .bestseller .item {height: 350px};
  .bestsellers .bestseller { height:350px; overflow:hidden; position:relative; }
  .bestsellers .bestseller .slide-bestseller { height:350px; }
}

/* ---- Profil - Listes d'achats ---- */
.cart-list .date { width:20%; }
.cart-list .reference { width:20%; }
.cart-list .listes {width:30%; }
.cart-list .action { width:30%; text-align:right; }
.cart-list.spec-table td { font-size:1.2em; line-height:30px; }
.cart-list.spec-table td .button { vertical-align:middle; }
.cart-list #cart_name { max-width: 300px; }

/* ---- Slider ---- */
.slider { position: relative; }
.slider .foot { text-align:center; width:100%; }
.slider .slide { overflow:hidden; position:absolute; width:100%; z-index:0; }
.slider .slide .slide-inner { background-color:inherit; position:absolute; left:0; top:0; width:100%; z-index:1; }
.slider .slide-prev, .slider .slide-next { display: none; position: absolute; top: calc(50% - 3.5rem); font-size: 1rem; cursor: pointer; background:#f3f3f3; color: #a4c1ce; padding: 2rem 0.5rem; }
.slider:hover .slide-prev, .slider:hover .slide-next { display: block; }
.slider .slide-prev:hover, .slider .slide-next:hover { opacity: 1; background:#004C79; color: #ffffff; }
.slider .slide-prev { left: 0; }
.slider .slide-next { right: 0; }
.slider .slide-nav { display: none; }
.slider .slider-inner { overflow:hidden; position:relative; }
.slider .slider-inner .item { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; }
.slider .slider-inner .item a { display: block; width:100%; }
.slider .slider-inner .item img { width:100%; margin:0 auto; vertical-align:middle; height: auto; }
.slider .slider-inner .item.last { margin-right: 0; }
.slider.columns-3 .slider-inner .item { width: calc(33.33% - 0.67rem); }
.slider.columns-4 .slider-inner .item { width: calc(25% - 0.857rem); }
@media (max-width: 768px) {
  .slider .slide-prev, .slider .slide-next { display: block; }
  .container > .slider .slide-prev { left: -15px; }
  .container > .slider .slide-next { right: -15px; }
  .slider .slider-inner .item { width: 100% !important; margin-right: 0 !important; }
}

/* ---- Home ---- */
.action-home #main > .container-fluid{
  padding: 1rem 0;
  overflow: hidden;
}
.action-home #main > .container-fluid.container-banners{
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 1rem;
}

.action-home #main .col-caroussel .item {
  padding: 0 !important;
}

.action-home #main > .container-fluid.container-banners .col-caroussel:not(.col-12){
  padding-right: 0;
}
.action-home #main > .container-fluid.container-banners .col-caroussel .item{
  background: white;
}
.action-home #main > .container-fluid.container-home2{
  padding-top: 0;
}
.action-home .container-home2 h2.hr{
  margin: 0 0 2rem;
  position: relative;
}
.action-home .container-home2 h2.hr span{
  background: white;
  position: relative;
  z-index: 1;
  padding: 0 1rem;
}
.action-home .container-home2 h2.hr::before{
  content: '';
  display: block;
  border-bottom: 1px solid #eee;
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  z-index: 1;
}
@media (max-width: 1024px) {
  .action-home .container-home2 ul{
    overflow: auto;
  }
}
.action-home .container-home2 ul li{
  flex: 0 0 7vw;
}
@media (max-width: 1024px) {
  .action-home .container-home2 ul li{
    flex: 0 0 120px;
  }
}
.action-home .container-home2 ul li a{
  font-size: 0.857rem;
  color: #2A313D;
  text-decoration: none;
  line-height: normal;
  display: inline-block;
}
.action-home .container-home2 ul li a:hover{
  color: #004C79;
}
.action-home .container-home2 ul li a img{
  display: block;
  margin: 0 auto 0.5rem;
  height: 30px;
  filter: invert(16%) sepia(9%) saturate(1436%) hue-rotate(179deg) brightness(100%) contrast(91%);
}
.action-home .container-home2 ul li a:hover img{
  filter: invert(19%) sepia(94%) saturate(1126%) hue-rotate(175deg) brightness(99%) contrast(104%);
}
.action-home #main > .container-fluid.container-services{
  padding-bottom: 2rem;
}
.action-home .container-services .item{
  box-shadow: 3px 3px 15px #0000000D;
  display: block;
  margin: 0 1rem 0 0;
  background: white;
  padding: 1rem 1rem 4rem;
  position: relative;
}
.action-home .container-services .item .title{
  margin: 1rem 0;
  font-weight: bold;
}
.action-home .container-services .item .more{
  position: sticky;
  bottom: 0;
}
.action-home .container-reinsurance{
  font-size: 0.857rem;
}
@media (max-width: 1440px) {
  .action-home .container-reinsurance{
    font-size: 0.76vw;
  }
}
@media (max-width: 768px){
  .action-home .container-reinsurance{
    font-size: 0.71rem;
  }
}
.action-home .container-reinsurance .row{
  margin: 0;
}
.action-home .container-reinsurance .row .col-6{
  /*white-space: nowrap;*/
  display: flex;
  align-items: center;
}
@media (max-width: 768px){
  .action-home .container-reinsurance .row .col-6{
    white-space: initial;
    margin: 0.5rem 0;
  }
}
.action-home .container-reinsurance .row .col-6 i,
.action-home .container-reinsurance .row .col-6 em{
  margin-right: 0.5rem;
}
.action-home #main > .container-fluid.container-testimonials{
  padding-bottom: 2rem;
}
.action-home .container-testimonials .pre{
  margin-top: 1rem;
}
.action-home .container-testimonials .slide{
  background: white !important;
}
.action-home .container-testimonials .item{
  border-right: 2px solid #eee;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  margin: 0 1rem 0 0;
  background: white;
  padding: 1rem;
}
.action-home .container-testimonials .item .title{
  margin: 1rem 0;
  font-weight: bold;
}
.action-home .container-testimonials .item img{
  width: 64px;
  border-radius: 50%;
  border: 1px solid #eee;
  margin-top: -75px;
  float: right;
}
.action-home .container-articles .articles { 
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.action-home .container-articles .article {
  width: 32%;
  margin: 1rem 0 1rem 2%;
  box-shadow: 3px 3px 15px #0000000D;
}
.action-home .container-articles .article:nth-child(3n+1){
  margin-left: 0;
}
@media (max-width: 768px) {
  .action-home .container-articles .article {
    width: 100%;
    margin-left: 0;
  }
}

/* ---- Signin / Signup ----*/
.action-signup-complete .card, .action-account .card{ border: none; }
.card p, .action-account .card p{ color: #000; }
form .card label, .action-account form .card label{ font-family: 'Quicksand'; color: #292D43; font-weight: bold; font-size: 12px; }
form .card input.text, .action-account form .card input.text{ border-color: #ccc; border-right-color: #ccc !important; }
form .card .form-group > input.text, .action-account form .card .form-group > input.text{ width: 100%; }
form .card .kwo-captcha-box input.text{ width: calc(100% - 90px); }
a.back, .action-account a.back{ cursor: pointer; position: absolute; color: #004C79 !important; text-decoration: underline; }
a.back i{ margin-right: 0.5rem; }
@media (max-width: 768px) {
  a.back{ position: static; display: block; float: none !important; margin-top: 1rem; text-align: center; }
}
.card #search-results ul.search-results-items li label input{ margin-right: 1rem; }
.card .signup-error{ background-color: #004C79; color: white; padding: 1rem; margin: 0 0 1rem 0; }
.card .signup-error p{ color: inherit; margin-left: 1rem; }
.card .signup-error p i{ color: yellow; }
.card .signup-error p a{ color: inherit; text-decoration: none; }
.card .signup-error p a i{ font-size: 10px; color: white }
.card .required-fields{ position: absolute; right: 45px; top: 2.25rem; font-size: 12px; }
@media (max-width: 768px) {
  .card .required-fields{ bottom: 0; left: 1rem; top: auto; }
}

.btn-cancel-verify {
  color: white;
  background-color: black;
  border: 1px solid black;
}
.btn-cancel-verify:hover {
  color: black;
  background-color: white;
}

.link-toogle-password{ position: absolute; display: flex; align-items: center; justify-content: center; right: 2%; height: 100%; z-index: 999; }
.card .form-group .link-toogle-password a, .action-account .card .form-group .link-toogle-password a{ color: #000; text-decoration: underline; cursor: pointer; font-weight: 600; }
.card .form-group input::placeholder{ color: #B2B8D4; }
.form-group small.valid{ color: #008D12 !important; }
.card .form-group input[type="password"]:focus:invalid{ border-color: #F44336; }
.form-group .form-text-invalid-password.valid { display: none !important; }
.form-group .form-text-invalid-password.text-muted{ display: block; color: #F44336 !important; }


/* ---- Pagination ---- */
.empty-list { height:100px; line-height:100px; background:#fff; font-weight:bold; text-align:center; }
.hammel-pagination { clear: right; padding: 1rem; background:#fff url(/app/hammel/pix/bg-pagination.png) top left repeat-x; text-align:center; }
.hammel-pagination.bottom { border-top:1px solid #e6e6e6; border-width:1px 0 0 0; }
.hammel-pagination .pagination{ display: inline; }
.hammel-pagination .pagination-page { color:#808080; }
.hammel-pagination .pagination-selected { color:#c50c29; font-weight:bold; text-decoration:none; }
.hammel-pagination .pagination-prev,
.hammel-pagination .pagination-next { visibility: hidden; height:25px; line-height:25px; text-decoration:underline; color:#808080; }
.hammel-pagination .pagination-prev { float:left; text-align:left; }
.hammel-pagination .pagination-next { float:right; text-align:right; }
.hammel-pagination img { vertical-align:middle; }
.hammel-pagination .pagination-first, .hammel-pagination .pagination-last { visibility: hidden; }
.hammel-pagination .visible { visibility: visible !important; }
.produits .hammel-pagination { clear: both; border: none; background: none; padding: 2em 0 0; }
.produits .hammel-pagination .pagination { font-size: 0; }
.produits .hammel-pagination .pagination-page { display: none; }
.produits .hammel-pagination .pagination-prev { display: none; }
.produits .hammel-pagination .pagination-next { visibility: hidden; float: none; height: auto; width: auto; text-align: center; background: none; text-decoration: none; padding: 0.375rem 0.857rem; color: #000; margin: 1rem 0; }
@media (max-width: 768px) {
  .action-order-list .hammel-pagination .pagination-prev { font-size: 0; }
  .action-order-list .hammel-pagination .pagination-prev::before { font-size: 12px; content: '<<'; }
  .action-order-list .hammel-pagination .pagination-next { font-size: 0; }
  .action-order-list .hammel-pagination .pagination-next::before { font-size: 12px; content: '>>'; }
}

/* ---- Articles ---- */

.navbar.navbar-themes{ margin: 2rem 0; }
.navbar.navbar-themes ul.nav li{ display: flex; margin-right: 1rem; }
.navbar.navbar-themes ul.nav li a{ font-family: 'Century Gothic', sans-serif; text-decoration: none; padding: 0.2rem 0.5rem; }
.navbar.navbar-themes ul.nav li.active a{ background: #0D3887; color: white; }

#articles .search-form, #article .search-form { border: 1px solid #000000; padding-left: 0.5rem; }
#articles .search-form .search-input, #article .search-form .search-input { border: none; }
#articles .article { margin:1rem 0; position:relative; }
#articles .article img.image { float:left; display:block; border:1px solid #e6e6e6; padding:1px; margin:0 2rem 0 0; max-width: 40%; }
#articles .article .theme { float: right; font-family: 'Century Gothic', sans-serif; }
#articles .article .name { margin: 1rem 0; }
#articles .article .name a{ text-decoration: none; }
#articles .article .desc { margin: 1rem 0; }

#article .button.back { position:absolute; right:10px; top: 5px; }
#article .page-content { padding: 0 10px; }
#article .hammel-pagination { border:1px solid #e6e6e6; border-width:1px 0 0 0; }
#article .article h2 { margin-bottom:10px; }
#article .article .date { margin: 1rem 0; font-family: 'Century Gothic', sans-serif; }
#article .article img.image { float:left; display:block; border:1px solid #e6e6e6; padding:1px; margin:0 12px 8px 0; max-width: 100%; }
#article .article ul { list-style-type:square; margin:0 0 0 20px; }
#article .tags { padding: 20px 0; }
#article .tags .label{ display: inline-block; font-weight: bold; }
#article .tags .tag{ display: inline-block; margin: 0 10px; }
#article .share-buttons{ float: right; padding-top: 20px; }
#article .comment-compose .elt-wide input.text { width: 200px !important; }
#article .comment-compose .button{ float: right; background:#002f64; color: #fff; border-radius:5px; padding: 3px 40px; font-weight: bold; border: none; cursor: pointer; }
#article #callback_msg { font-weight: bold; color: #c91c37; margin: 20px 0; }
#article .comments .comment { border-bottom: 1px solid #e6e6e6; margin-bottom: 10px; }
#article .comments-footer { text-align: center; font-size: 1.2em; margin-bottom: 10px; }
#article iframe { max-width: 100%; }

/* ---- Produits / liste ---- */
#produits-list .total-message{ text-align: center; color: #707070; margin: 1rem 0; }
.produits .item { float: left; border:1px solid #E3F0F6; text-align:center; margin:1rem 1rem 0 0; padding:0; }
.produits.columns-4 .item { width:calc(25% - 0.857rem); }
.produits.columns-4 .item:nth-child(4n) { margin-right: 0; }
.produits.columns-5 .item { width:calc(20% - 0.857rem); }
.produits.columns-5 .item:nth-child(5n) { margin-right: 0; }
.produits.columns-6 .item { width:calc(16.66% - 0.857rem); }
.produits.columns-6 .item:nth-child(6n) { margin-right: 0; }

.navbar-toggler.btn.btn-border.btn-secondary{width: 100%; display: flex; justify-content: space-between; margin: 1rem 0; color: black; font-size: 1rem;}
.navbar-toggler.btn.btn-border.btn-secondary i.fa{ margin-left: 2rem; }
.navbar-toggler.btn.btn-border.btn-secondary:not(.collapsed) i.fa.fa-chevron-up{ display: none; }
.navbar-toggler.btn.btn-border.btn-secondary:not(.collapsed) i.fa.fa-chevron-down{ display: inline-block; }
.navbar-toggler.btn.btn-border.btn-secondary.collapsed i.fa.fa-chevron-up{ display: inline-block; }
.navbar-toggler.btn.btn-border.btn-secondary.collapsed i.fa.fa-chevron-down{ display: none; }


.dialog-shadow.dialog-shadow-filter { height: 100vh !important; top: 0 !important; bottom: auto !important; }
.dialog-filter {height: 100% !important;}
.form-filter.navbar-collapse{
  flex-direction: column;
  align-items: initial;
}
.form-filter.open{
  display: block;
}
.filter-box {
  margin-bottom: 1rem;
  border-bottom: 1px solid #E9ECEF;
}
.dialog-filter .filter-box, .dialog-sort .filter-box{
  padding: 0 1rem;
}
.filter-box > label{
  color: black;
  font-size: 14px;
  font-weight: 700;
}
.filter-box > .filter-container{
  margin-bottom: 1rem;
}
.filter-box img{
  max-width: 50px;
  max-height: 50px;
}
.filter-box .filter-search {
  position: relative;
}
.filter-box .filter-search .fa{
  position: absolute;
  top: 0.8rem;
  left: 0.6rem;
}
.filter-box .filter-search input{
  width: 100%;
  padding: 0.5rem 1rem 0.5rem 2rem;
  border: 1px solid #B2B8D4;
  margin-bottom: 1rem;
}
.filter-box .filter-list {
  max-height: 115px; /* display ~5 lines */
  overflow-y: auto;
}

/* ---- Produits Grid ---- */



/* ---- Familles / liste ---- */

.action-produits .familles .list .item h3 a { text-decoration:none; color:inherit; }
.action-produits .familles .list .item ul li a { text-decoration:none; }
.action-produits .familles .list .item .image { text-align:center; margin-bottom: 1em; height: 200px; align-items: center; display: flex !important; justify-content: center; }
.action-produits .familles .list .item .image img { max-width: 200px; max-height: 200px; }
.action-produits .famille-encart { margin: 10px 0; padding:10px; }
.action-produits .famille-encart ul { list-style:disc; padding-left:15px; }

/* ---- Produits / détail ---- */

#produit .col-12.col-lg-4 { border-left: 1px solid #ddd; }
#produit .col-12.col-lg-4:first-of-type { border-left: none; }
#produit .col-price{background: #F5F5F5; padding: 1rem; margin-bottom: 1rem; }
#produit .main-image { position: relative; text-align:center; height: 20rem; }
#produit .main-image .zoom{ line-height:20px;}
#produit .main-image .zoom .icon{ display:block; width:18px; height:20px; background:url(/app/hammel/pix/ico-zoom-article.png);float:left;}
#produit .main-image #article-img{ display:block; width:100%; height:20rem; cursor:url(/app/hammel/pix/ico-zoom-article.png),default;}
#produit .brand-logo{ display:inline-block; max-width:180px; height:25px; }
#produit .brand-logo img{ max-width: 100%; max-height: 100%; }
#produit .brand-logo + .tags { padding-left:1rem; border-left:1px solid #ddd; margin-left:1rem; }
#produit .tags{ display:inline-block; }
#produit .tags .tag{ display:inline-block; margin:0 1rem 0 0; max-width:40px; height:25px;}
#produit .tags .tag img{ max-width: 100%; max-height: 100%; }
#produit .card.card-substitution{ position: absolute; z-index: 1; top: 16rem; left: 0; width: 200px; border: none; background: #ECEEEC 0% 0% no-repeat padding-box; box-shadow: 0px 2px 2px #00000029; opacity: 1; color: #82C062; text-align: center; padding: 7px 12px; font-weight: 600;}
#produit .content{ overflow: hidden; max-height: 4.3rem; }
#produit .content.show{ max-height: none; }
#produit div[itemprop=description]{ margin: 1rem 0; }
#produit .content-toggle{ color: #0D3887; text-decoration: underline; text-align: center; display: block; }
#produit .content-toggle:not(.collapsed) .more{ display: inline; }
#produit .content-toggle:not(.collapsed) .less{ display: none; }
#produit .content-toggle.collapsed .more{ display: none; }
#produit .content-toggle.collapsed .less{ display: inline; }
#produit .price .p-price {  }
#produit .price .p-price .notax{ font-weight: bold; font-size: 1.2rem; }
#produit .price .p-price .notax.discounted{ color: #E20613; }
#produit .price .p-price .ati, #produit .price .p-price .ecotax{ display: block; font-size: 0.9rem; color: #6E7881; }
#produit .price .badge.badge-stock { float: right; margin-top: -1.3rem; }
#produit .price-pro{ text-decoration: underline; }
#produit .cart-tags{ position: relative; cursor: pointer; }
#produit .cart-tags .text{ opacity: 0; transition: opacity 0.5s; position: absolute; background: #FAFAFA; padding: 1rem; border-radius: 2rem; box-shadow: 0 5px 5px #ccc; top: -0.5rem; left: 0; font-size: 0.5rem; color: #999; width: 100%; }
#produit .cart-tags:hover .text{ opacity: 1; }
#produit .cart-tags .text ul{ margin: 0; column-count: 2; column-gap: 1em; }
#produit .buttons-box p{ margin-top: 1rem; }
#produit .buttons-box p .btn i{ color: #E20613; margin-right: 0.5rem; }

.action-produit .thumbnails { position:relative; margin: 10px 0; width: 100%; height: 102px; }
.action-produit .thumbnails .slides { overflow:hidden; position:absolute; width:100%; z-index:0; height: 100%;}
.action-produit .thumbnails .slides .slide { background-color: white; position:absolute; left:0; top:0; width:100%; height: 100%; z-index:1; display: flex; justify-content: center;}
.action-produit .thumbnails .slides .slide .item { border: 1px solid #e1e1e0; margin: 0 5px; max-width: 67px; max-height: 67px; display: flex; justify-content: center; align-items: center;}
.action-produit .thumbnails .slides .slide .item img {max-width: 65px; max-height: 65px;}
.action-produit .thumbnails .slides .slide .item.video {position: relative;}
.action-produit .thumbnails .slides .slide .item.video img {opacity: 0.2;}
.action-produit .thumbnails .slides .slide .item.video i {position: absolute; top:50%; left: 50%; transform: translate3d(-50%, -50%, 0);}
.action-produit .thumbnails .slides .slide .item.video a,
.action-produit .thumbnails .slides .slide .item a { text-decoration: none; background: #fff; width: 65px; height: 65px; display: flex; justify-content: center; align-items: center; }
.action-produit .thumbnails .slides .slide .item.active { border-color: #000000; }
.action-produit .thumbnails .slide-prev, .action-produit .thumbnails .slide-next {position: absolute; top: calc(50%); transform: translateY(-50%); font-size: 1rem; cursor: pointer; }
.action-produit .thumbnails .slide-prev { left: 0; }
.action-produit .thumbnails .slide-next { right: 0; }
.action-produit.body-prospect #header .container-secondary .container,
.action-produit.body-new-user #header .container-secondary .container { display: none !important; }
@media (max-width: 768px) {
  .action-produit .thumbnails .slide-prev, .action-produit .thumbnails .slide-next { display: block; }
}

.action-produit .dialog-zoom .image.main-image {width: 100%; }
.action-produit .dialog-zoom .image.main-image > div {height: 500px; display: flex; justify-content: center; align-items: center;}
.action-produit .dialog-zoom .image.main-image > iframe {height: calc(100vh - 180px);}

.dialog-magasins .no-result-more { color: #6E7881; text-align: left; }
.dialog-magasins form { width: 100%; color: #6E7881; margin-top: 1rem; }
.dialog-magasins a.btn.btn-border { border-color: #ced4da; }
.dialog-magasins input#magasin-description { display: inline-block; width: calc(100% - 70px); height: 35px; vertical-align: bottom; }
.dialog-magasins .magasins-results { width: 100%; overflow-y: auto; margin-bottom: 1rem; }
.dialog-magasins .card-magasin { display: block; padding: 10px; background: none; border: none; border-bottom: 1px solid #E9ECEF; }
.dialog-magasins .card-magasin h3 { margin: 0; }
.dialog-magasins .card-magasin .badge{ background: #84bf61; font-weight: normal; border-radius: 12px; padding: 4px 20px; margin-left: 10px; font-weight: bold; }
.dialog-magasins .card-magasin .more { color: inherit; }
.dialog-magasins .card-magasin .google-maps { color: #3D82F4; }
@media (min-width: 768px) {
  .dialog-magasins .no-result-more { width: 80%; }
  .dialog-magasins form { width: 80%; }
  .dialog-magasins .magasins-results { width: 80%; }
}

.palier .available{}
.palier .not-available{ display: none; }
.palier .card{ cursor: pointer; border: none; display: inline-block; margin: 0 10px 10px 0; }
.palier .card .palier-quantity-wrapper{ display: inline-block; background: var(--red-color); color: white; padding: 6px 7px; }
.palier .card .palier-price-wrapper{ display: inline-block; background: white; padding: 6px 7px; }
.palier .card .badge{ display: block; background: var(--green-color); border-radius: 0; font-weight: normal; }
.palier .card.disabled{ cursor: default; border: none; }
.palier .card.disabled .palier-quantity-wrapper{ background: #ADB5BD; }
.palier .card.disabled .badge{ }
.palier.disabled .available{ display: none; }
.palier.disabled .not-available{ display: block; }
.row-palier .palier .available{ color: var(--red-color); font-size: 12px; text-align: center; text-decoration: underline; font-weight: 600; }
.row-palier .palier .not-available{ font-size: 12px; text-align: center; }
@media (max-width: 768px) {
  .row-palier .palier .available{ text-align: left; }
}

.stock-alert a{ text-decoration: none; font-size: 12px; font-weight: 600; }
.stock-alert a:hover{ text-decoration: underline; }
.stock-alert a i{ margin-right: 0.5rem; }

.specs { margin:2rem 0; }
.specs .tabs { height:30px; font-size:1.2em; }
.specs .tabs li { display:block; float:left; margin:0 1rem 0 0; }
.specs .tabs li a { display:block; text-decoration:none; height: 2rem; line-height: 2rem; padding:0 2rem; color:#707070; border: 1px solid #707070; }
.specs .tabs li a.selected { color:#F5F5F5; background:#0D3887; border:none;  }
.spec-table { margin-bottom: 1rem; background: #F5F5F5; }
.spec-table thead tr { background:#F5F5F5; color:#000000; }
.spec-table tbody tr { vertical-align:middle; }
.spec-table tbody tr:nth-child(odd) { background:#FFFFFF; }
/*.spec-table tbody tr.unavailable { background:#FFEFF2; }*/
.spec-table thead tr th { font-size: 0.9rem; padding: 1rem 0.5rem; font-weight: bold; }
.spec-table tbody tr td { font-size: 1rem; padding: 0.5rem; vertical-align: middle; }
.spec-table tfoot tr td, .spec-table tfoot tr th { font-size: 1rem; padding: 0.5rem; vertical-align: middle; }
.spec-table .standard { text-align:center; }
.spec-table .price { text-align:right; white-space:nowrap; font-weight: bold; }
.spec-table .price .discounted{ color: #E20613; }
.spec-table .price .undiscounted{ display: block; font-weight: normal; font-size: 0.9rem; }
.spec-table .cart { text-align:center; white-space:nowrap; }
.spec-table .standard img,
.spec-table .cart img { vertical-align: middle; }
.spec-table .description { width:400px; }
/*.spec-table .availability { text-align: center; }*/
.spec-table .image img { max-width: 50px; max-height: 50px;}

/* ---- Packs ---- */

/*.container-pack > h2{ background-color: #E6AF60; color: white; font-weight: normal; text-transform: uppercase; white-space: nowrap; padding: 5px; position: relative; top: 2rem; z-index: 1;}*/
.container-pack .col-6 .image{ border: 1px solid #E3E4E8; height: 105px; display: flex; align-items: center; justify-content: center; }
.container-pack .btn.btn-secondary { white-space: initial; background: transparent linear-gradient(180deg, #008BDF 0%, #005D94 100%) 0% 0% no-repeat padding-box; border-radius: 5px; border: none; text-align: left; font-weight: normal; }
.container-pack .btn.btn-secondary::before { position: absolute; content: "+"; color: #6E7881; background: #d5d3d9; padding: 2px 5px; left: -0.7rem; top: calc(50% - 1rem); border-radius:5px; font-family: "Font Awesome Pro 6"; }
#form-pack .articles .item { position: relative; float: left; width: 16%; height:310px; border: 1px solid #E3F0F6; display:inline-block; margin:0 3rem 0 0; box-sizing: border-box; }
#form-pack .articles .item::before { position: absolute; content: "+"; color: #6E7881; background: #d5d3d9; padding: 2px 5px; left: -2.3rem; top: calc(50% - 1rem); border-radius:5px; font-family: "Font Awesome Pro 6"; }
#form-pack .articles .item:first-of-type::before { display: none; }
#form-pack .articles .item .checkbox-wrapper{ position: absolute; right: 0.5rem; top: 0.5rem; z-index: 1; }
#form-pack .articles .item .produit-box .image .brand{ display: none; }
#form-pack .total .price-pro{ font-weight: bold; font-size :0.9rem; }
@media (max-width: 768px) {
  /* TODO Add class .modal-content to .articles and remove this ? */
  #form-pack .articles{ text-align:left; padding:0 1rem; margin:0; height: calc(100% - 220px); overflow:auto; border: none; align-items: center; max-height: calc(100vh - 220px); }
  #form-pack .articles .item { float: none; width: 100%; height: auto; margin: 1rem 0 0; }
  #form-pack .articles .item::before { content: none; }
  #form-pack .articles .item .produit-box .image{ float: left; width: 50%; }
  #form-pack .articles .item input[type="checkbox"]{  }
  #form-pack .articles .item .checkbox-wrapper{ right: auto; left: 0; top: 0; height: 100%; padding: 0 10rem 0 0.5rem; display: flex; align-items: center; justify-content: center; }
  #form-pack .total { position: absolute; background: white; bottom: env(safe-area-inset-bottom, 80px); left: 0; width: 100%; text-align: center; border-top: 1px solid #E9ECEF; z-index: 1; box-shadow: 0 0 10px #ccc; }
}

/* ---- Promos ---- */

.action-promo h3.text-main-blue{ border-bottom: 1px solid var(--main-blue-color); }
.row-promos a.promo{ display: block; position: relative; margin-bottom: 3rem; }
.row-promos a.promo .name{ position: absolute; top: 1rem; left: 0; width: 100%; text-align: center; color: white; font-weight: 600; }
.row-promos a.promo .text2{ position: absolute; bottom: 5rem; left: 0; width: 100%; text-align: center; color: white; font-weight: 600; }
.row-promos a.promo .text3{ position: absolute; bottom: -3rem; left: 0; background: #004C79; color: white; width: 100%; height: 3rem; text-align: center; }
.row-promos a.promo .text4{ position: absolute; bottom: 1rem; left: 0; width: 100%; text-align: center; font-weight: 600; }
@media (max-width: 768px) {
  /* Horizontal scroll on mobiles */
  .row-promos{ overflow-x: auto; flex-wrap: initial; }
  .row-promos .col-2{ min-width: 80%; }
}

/* ---- Catalogues ---- */
#catalogues li{ padding:0.5rem 0; }
#catalogues li i{ margin-right: 1rem; float: left; padding: 0.3rem 0 0.5rem; }
body.auth-no .blur-unless-authenticated{ filter: blur(4px); }

/* ---- Favorites ---- */
.favorites tr { border-bottom:1px solid #e6e6e6; }
.favorites td { padding:10px; vertical-align:top; }
.favorites .icon { width:60px; }
.favorites .actions { width:160px; }
td.identity-image { padding-right:10px; }

/* ---- SHOP : Cart ---- */
table.addtocart { width: auto; }
table.addtocart td, table.addtocart th { padding:0 1rem 0 0; }
@media (max-width: 768px) {
  table.addtocart td, table.addtocart th { padding:0 0.5rem 0 0; }
}
table.addtocart input.text { max-width: 135px; width: 40vw !important; }
table.addtocart input.reference { max-width: 190px; width: 40vw !important; }

#cart .row.row-validate .col-total{ font-size: 0.8rem; }
#order .row.row-validate .col-total{ font-size: 0.8rem; }
@media (max-width: 768px) {
  #cart .row.row-header .century-gothic{ font-size: 0.85rem; }
}
#cart .row.row-header .col-4{ border-left: 1px solid #E8E8E8; }
#cart .row.row-purchases{ border: 1px solid #F0F3FC; }
@media (max-width: 768px) {
  #cart .row.row-purchases{ border: none; }
}
#cart .row.row-purchases .row.row-purchase{ border-top: 1px solid #F0F3FC; }
#cart .row.row-purchases .row.row-purchase:first-of-type{ border-top: none; }
@media (max-width: 768px) {
  #cart .row.row-purchases .row.row-purchase{ border: 1px solid #dedede !important; }
}
#cart .row.row-purchases .row-purchase .name{ margin-bottom: 0.3rem;}
#cart .row.row-purchases .row-purchase .cond,
#cart .row.row-purchases .row-purchase .weight,
#cart .row.row-purchases .row-purchase .stock,
#cart .row.row-purchases .row-purchase .ecotax{ color: #7A7A7A; }
#cart .row.row-purchases .row-purchase .delete{ position: absolute; left: 50%; top: 0; }
@media (max-width: 768px) {
  #cart .row.row-purchases .row-purchase .delete{ position: static; }
}
#cart .row.row-purchases .row-purchase .palier .available{ cursor: pointer; }
#cart .row.row-purchases .row-purchase .undiscounted{ display: block; color: #6E7881; }

#cart .row.row-purchases .row-commercial label{ font-weight: normal; color: #143250; font-size: 0.8rem; }
#cart .comment{ margin-bottom: 1rem; }

.card-summary .row{ padding-top: 0.5rem; padding-bottom: 0.5rem; }
.card-summary .row.coupon input.text{ width: 100%; }
.card-summary .row.total{ border-top: 1px solid #707070; font-weight: bold; }
.card-summary .row .text-bigger{ font-size: 1.143rem; }
.card-summary .row.promo a{ color: inherit; font-style: italic; }
.card-summary .palier{ font-size: 0.9rem; margin-bottom: 1rem; display: flex; align-items: flex-start; }
.card-summary .palier img{ margin: 0.2rem 0.5rem 0 0; }

.dialog-cart-share form{ margin: 0 1em; }
.dialog-cart-share form textarea{ width: 100%; }

.actions-icon .tooltip-cart i{ padding: 0.4rem 0.5rem; border-radius: 5px; }
.actions-icon .tooltip-cart i:hover{ background-color: #B2B8D4; }

@media screen and (max-width: 578px) {
  .action-cart .cart-add-box a { padding: 0.25rem 0.5rem; }
}

.action-cart .actions-icon i {font-size: 23px;}

/* ---- SHOP : Order ---- */
.order form input.text, .order form textarea.text { width:100%; }
.order .order-summary .purchases .purchase { margin-bottom:8px; }
.order .order-summary .amounts { width:50%; }
.order .order-summary .amounts table { float:right; }
.order .order-summary .amounts td { border-bottom:1px solid #eee; padding:2px; }
.order .order-summary .amounts label { display:block; text-align:right; padding-right:10px; }
/*.order .order-summary .amounts .lowcost.shipping { color:#fdeb00; }*/
.order table.layout-checkboxes { table-layout:fixed; width:100%; }
.order table.layout-checkboxes .left { width:36px; text-align:center; vertical-align:top; }
.order table.layout-checkboxes td { border-bottom:1px dotted #ccc; padding:3px 0; }
.order table.layout-checkboxes tr:last-child TD { border-bottom:none; }
.order table.layout-checkboxes label { display:block; cursor:pointer; margin-top:2px; font-weight:normal; }
.order table.layout-checkboxes label:hover { background:#f6f6f6; }
.order table.layout-checkboxes small { font-size:0.8em; }
.order table.layout-checkboxes .link td { padding:4px 0 6px 0; }


.order-steps { display: block; }
.order-step { color: #ADBDC9; padding: 8px 0; position: relative; font-weight: bold;}
.order-step-square { height: 36px; width: 36px; display: flex; justify-content: center; align-items: center; border: 1px solid #ADBDC9; color: #ADBDC9; }
.order-step:not(.visited) a {pointer-events: none;}
.order-step .ligne { position: absolute; width: 70%; height: 1px; background-color: #ADBDC9; left: 65%; top: 40%; }
.order-step a { text-decoration: none; color: #ADBDC9; display: flex; flex-direction: column; align-items: center;}
.order-step.active a {color: var(--main-blue-color); }
.order-step.visited .order-step-square { border: 1px solid var(--main-blue-color); background-color: #fff; color: var(--main-blue-color); }
.order-step.active .order-step-square { background-color: var(--main-blue-color); color: #fff; border: 1px solid #ADBDC9; }
.order-step-square:hover { background-color: var(--main-blue-color) !important; color: #fff !important; border: 1px solid #ADBDC9 !important; }
.order-step.visited a { color: var(--main-blue-color); }
.order-step.visited .ligne { background-color: var(--main-blue-color); }
.order-section .order-section-navigation { text-align:right; padding: 1rem 0; margin: 1rem 0; border: 1px solid #ddd; border-left: 0; border-right: 0; }
.order-section .order-section-navigation .btn.btn-border { float:left; }
.subtitle-shop{ font-size: 32px; font-weight: 500; }
@media (max-width: 768px) {
  .card-shipping .float-right{
    float: none !important;
  }
  .subtitle-shop{ font-size: 20px; }
  .order-step{ padding: 7px; }
  .order-steps .nav{ background-color: #F0F3FC; }
  .order-step.visited, .order-step.active{ background-color: var(--main-blue-color); }  
}

.dialog-addressee .layout-inline li.drop-off-points div.elt .elt-control { width:auto; }
.dialog-addressee .layout-hbox-content { width: 100%; }
.dialog-addressee .layout-hbox-content select[name="record[country_id]"]{ width: 100%; }
.dialog-addressee .autocomplete{ max-height: 180px; overflow: auto; width: calc(100% - 40px); border-color: #666; }
@media (max-width: 768px) {
  /* Nested scroll does not work with virtual keyboards see https://github.com/angular/components/issues/28290 */
  .dialog-addressee .autocomplete{
    max-height: none;
  }
}
.dialog-addressee form > ul > li.drop-off-search,
.dialog-addressee form > ul > li.drop-off-points,
.dialog-addressee form > ul > li.drop-off-shown-field { display: none; }
.dialog-addressee form.drop-off > ul > li.drop-off-search,
.dialog-addressee form.drop-off > ul > li.drop-off-points,
.dialog-addressee form.drop-off > ul > li.drop-off-shown-field { display: block; }
.dialog-addressee form.drop-off > ul > li.drop-off-hidden-field,
.dialog-addressee form.drop-off > ul > li.events { display: none; }
.dialog-addressee form.drop-off > ul > li.drop-off-points div#drop-off-points li { clear: left; overflow: auto; margin-bottom: 1em; }
.dialog-addressee form.drop-off > ul > li.drop-off-points div#drop-off-points li input{ float: left; }
.dialog-addressee form.drop-off > ul > li.drop-off-points div#drop-off-points li label{ float: left; }

#shipping-addressees{ display: flex; width: 100%; position: relative; min-height: 153px; }
#shipping-addressees a.btn{ order: 2; background-color: #004C79; position: absolute; right: 0; height: 100%; padding: 0.5rem; color: white; display: flex; align-items: center; z-index: 3; }
#shipping-addressees a.btn i.fa-chevron-up{ display: none; }
#shipping-addressees a.btn i.fa-chevron-down{ display: inline; }
#shipping-addressees a.btn.collapsed i.fa-chevron-up{ display: inline; }
#shipping-addressees a.btn.collapsed i.fa-chevron-down{ display: none; }
#shipping-addressees a.btn:hover{ filter: brightness(1); }
#shipping-addressees .list{ border: 1px solid #eee; width: calc(100% - 24px); max-height: 440px; overflow: hidden; background: white; top: 0; z-index: 2; }
#shipping-addressees .list .addressee{ display: none; }
#shipping-addressees .list .addressee input{ display: none; }
#shipping-addressees .list .addressee.selected{ display: table-row; }
#shipping-addressees .list table.layout-checkboxes .addressee td{ border-bottom: none; }
#shipping-addressees .list.show{ position: absolute; height: auto; overflow: auto; }
#shipping-addressees .list.show .addressee{ display: table-row; }
#shipping-addressees .list.show .addressee.selected,
#shipping-addressees .list .addressee:hover{ background: #f6f6f6; }
#shipping-addressees .list table.layout-checkboxes .addressee td{ border-bottom: 1px dotted #ccc; }

form .card .carrier.disabled label{ color: #757575; }
form .card .carrier.disabled label.radio  > input[type="radio"]::before { border-color: #757575; }
.wished-on-container{ margin: 0 0 1rem 2rem; }
.carrier:not(.active) small{ overflow: hidden; display: block; max-height: 2rem; }

.card-ternary.card-package{ background-color: white; border: none }
.card-ternary.card-package h3.card-title{ background-color: #E0EFF8; font-weight: bold; cursor: pointer; text-align: left; padding: 0.7rem 1rem; color: #0C0707;}
.card-ternary.card-package h3.card-title small{ font-weight: normal; }
.card-ternary.card-package h3.card-title i.fas{ float: right; }
.card-ternary.card-package h3.card-title i.fas.fa-caret-up{ display: inline; }
.card-ternary.card-package h3.card-title i.fas.fa-caret-down{ display: none; }
.card-ternary.card-package h3.card-title.collapsed{ color: #fff; background: #004C79; }
.card-ternary.card-package h3.card-title.collapsed i.fas.fa-caret-up{ display: none; }
.card-ternary.card-package h3.card-title.collapsed i.fas.fa-caret-down{ display: inline; }
.card-ternary.card-package .date{ color: #07C700; }

/* --- Profil --- */
.card3-color {background-color: #E0EFF8;}

.scope-account h1{ margin-top: 0; font-size: 24px; font-weight: bold; }
.scope-account h2{ border-bottom: 0; font-size: 18px; text-transform: none; }
.scope-account h2.font-size-24 { font-size: 24px; }
.scope-account h2#user-code { font-size: 14px; line-height: 18px; font-weight: 600; }
.scope-account h2::before{ content: none; }
.scope-account h3 {font-size: 16px;}
.scope-account .col-3{ font-size: 1rem; }
.scope-account .col-3 .btn{ font-size: 1em; }
.scope-account .card .btn.btn-dark{ background: #707070; }
.scope-account .card i.fa.fa-user{ color: #E20613; }
.scope-account .navbar.navbar-menu{ margin-bottom: 1rem; }
.scope-account .navbar.navbar-menu .navbar-toggler{ width: 100%; }
.scope-account .navbar.navbar-menu .card { padding: 0; margin-bottom: 0; }
.scope-account .navbar.navbar-menu .card ul.nav{ display: block; width: 100%; }
.scope-account .navbar.navbar-menu .card ul.nav li a{ display: flex; padding: 0.5rem 0; text-decoration: none; justify-content: space-between; align-items: center; background-color: transparent; }
.scope-account .navbar.navbar-menu .card ul.nav li a.selected{ color: #004C79; font-weight: bold; }
.scope-account .navbar.navbar-menu .card ul.nav li a:not(.selected) { color: var(--legend); }
.scope-account .navbar.navbar-menu .card ul.nav .submenu li a.selected {border: none;}
.scope-account .card.bg-secondary{ display: block; }
.scope-account .card.bg-secondary i.fa.fa-info{ margin-right: 1rem; }
.scope-account .card.bg-secondary a:hover{ color: white; }
.scope-account .notification-content a, .scope-account .order a {color : #0c0707 !important; }
.scope-account .navbar.navbar-submenu{ padding: 0; }
.scope-account .navbar.navbar-submenu ul.nav{ width: 100%; justify-content: space-between; }
.scope-account .navbar.navbar-submenu ul.nav li { width: 25%; }
.scope-account .navbar.navbar-submenu ul.nav li a{ text-decoration: none; border-bottom: 8px solid #F5F5F5; width: 100%; display: block; }
.scope-account .navbar.navbar-submenu ul.nav li a.selected{ border-color: #E8B5BA; }
.scope-account .card.bg-white {border-color: #E3F0F6;}
.scope-account #user-list .separateur {background-color: var(--main-blue-color);}

.bg-dark-blue {background-color: #004c79 !important;}

.scope-account .card.card-documents{ border: none;}
.scope-account .dialog-support-documents { padding: 1rem; background: #F0F3FC; }
.scope-account .dialog-support-documents form{ padding: 1rem; }

/* --- Espace Client Menu --- */
.selected ~.dropdown-content { display: block; }
.dropdown-content li:last-child { border-bottom: 1px solid #E0EFF8; }
.dropdown .dropdown-content {margin-left: 2rem;}

/* --- Espace Client Compte --- */
.scope-account #user-list .card { display: flex; flex-direction: row; padding: 1rem 0;}
.scope-account #user-list h2 { margin-top: 0;}
 
/* --- Profil : Cadeaux --- */

/* --- Profil : Users --- */
.action-user-infos .table { display: table; width: 100%; background:#fff; font-size:12px; }
.action-user-infos .table .tr{ display: table-row; }
.action-user-infos .table .th, .action-user-infos .table .td{ display: table-cell; padding:10px; }
.action-user-infos .table .thead { display: table-row-group; }
.action-user-infos .table .thead .th { color:#666; line-height:14px; background:#fff url(/app/hammel/pix/bg-th-cart.png) no-repeat left top; }
.action-user-infos .table .tbody { display: table-row-group; }
.action-user-infos .table .tbody .td { border-top:1px solid #e6e6e6; }
.action-user-infos .flags label, .action-user-infos .order_max_amount label{ font-weight: normal; }
.action-user-infos .order_max_amount input{ width: 75px; }

/* --- Profil : Tableau de Bord --- */

.action-user-dashboard .adz .slide-prev, .action-user-dashboard .adz .slide-next { padding: 1rem 0.5rem; top: 50%; transform: translateY(-50%); background-color: white; }

.change-account i {color: #004C79}
.sub-title-customer-area {background-color: #1D2139; color: white; padding: 7px 0;}
.scope-account .dot {height: 10px; width: 10px; border-radius: 50%; background-color: var(--main-blue-color); margin-top: 6px;}
.scope-account .notification {width: 90%; display: flex;}
.scope-account .notification-content {display: flex; width: 100%; justify-content: space-between;}
.scope-account .notification:not(:last-child) .notification-content {border-bottom: 1px solid white; padding-bottom: 10px;}
.account-notice {background: #5487FF; border-radius: 20px; color:white;}
/*.col-sm-6 i {font-size: 20px;}*/
.order {width: 90%; margin: 0 0 1rem 1rem; padding-bottom: 0.5rem; font-family: 'Quicksand';}
.order:not(:last-child) {border-bottom: 1px solid #F1F1F1;}
.order .statut { background: #999; color: white; padding: 0.3rem 1rem; border-radius: 12px 0 12px 0;}
.order .statut.blocked, .order .statut.deleted {background-color: var(--red-color);}
.order .statut.validated {background-color: var(--green-color);}
.order .statut.preparation {background-color: #EBB23A;}
.order .statut.sent {background-color: #07AA7C;}
.order .statut.delivered {background-color: #048970;}
@media (max-width: 768px) {
  .order { width: 100%; margin: 0; padding: 0; }
  .order .col-order .help {  margin: 0 15px; }
}

.user-cart {background-color: #FCFCFC;}
.user-cart .user-cart-purchase:not(:last-child) { border-bottom: dashed 1px; }
.user-preference img {width: 40%; height: auto;}
.close-notification i { font-size: 18px; color: var(--main-blue-color);  }

/* Espace client > Factures */
/* TODO generalize ? */
.nav-tabs#nav-invoices .nav-item.show .nav-link, .nav-tabs#nav-invoices .nav-link.active{ border-color: transparent; }
.nav-tabs#nav-invoices a.nav-link{ color: #000; text-decoration: none; text-transform: uppercase; font-weight: bold; }
.nav-tabs#nav-invoices .nav-link.active{ color: #E20613; border-bottom-color: #E20613; }

body.action-invoice-list form#search-invoices h2{ font-size: 12px; }
body.action-invoice-list table.cart-list thead th{ font-size:12px; }
body.action-invoice-list table.cart-list td { vertical-align: top; }
body.action-invoice-list #search-invoices .form-group .fa-light{ position: absolute; margin-left: 0.5rem; }
body.action-invoice-list #search-invoices .form-group .fa-light + input[type=text].form-control{ padding-left: 2rem; }
@media (max-width: 768px) {
  body.action-invoice-list #search-invoices .form-group{ text-align: left; }
  body.action-invoice-list #search-invoices .form-group .fa-light{ margin-top: 0.7rem; }
}

/* --- Recherche Avancée --- */
#form-make-filter li { width:100%;overflow:hidden; }
#form-make-filter label { display:block;font-weight:normal;float:left;width:100px; }
.hammel-search-filter { border:1px solid #E6E6E6;-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius:5px; margin:5px; padding:5px 5px 8px 5px; }
.hammel-search-filter-delete { float:right;border:1px solid #E6E6E6;-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius:5px;padding:2px 2px 0px 2px; }
.hammel-rappel-filtres { border-bottom:1px solid #E6E6E6; }
.hammel-rappel-filtres p { padding: 5px 10px 0 10px;  margin:0; }

#recherche .famille { margin:10px; }
#recherche .famille a.title { color:#4D4D4D; display:block; font-size:14px; margin-bottom:2px; }
#recherche .famille a.title:hover { color:#c50c29; }
#recherche .famille a.result { color:#808080; font-size:12px; }
#recherche .famille a.result:hover { color:#c50c29; }
#recherche .famille p { margin:0px; }
#recherche .famille span { display:block; margin-bottom:10px; }

/* --- F.A.Q. --- */
#faq .faq-questions { padding:0 0 20px 0; border-bottom:1px solid #e6e6e6; }
#faq .faq-questions .faq-category { margin:0 0 20px 0; }
#faq .faq-questions ul { list-style-type:square; margin-left:18px; }
#faq .faq-questions ul li { margin:6px 0; }
#faq .faq-components { padding:20px 0 0 0; }
#faq .faq-components .faq-component {margin:0 0 20px 0;}
#faq .faq-components .faq-component .faq-question {color:#404040; margin:0 0 8px 0;}

/* --- FileDialog --- */
#kwo-file-dialog #toolbar { padding:5px; background:#f3f3f3; border:1px solid #e6e6e6; }
#kwo-file-dialog #toolbar a { font-weight:bold; }
#kwo-file-dialog #files { margin-top:15px; }
#kwo-file-dialog #files #listing { padding-right:5px; border-right:1px solid #e6e6e6; }
#kwo-file-dialog #files #listing .file { padding:5px; border-bottom:1px solid #e6e6e6; }
#kwo-file-dialog #files #preview { width:40%; padding-left:20px; }
#kwo-file-dialog #upload { margin-top:15px; padding:12px 8px; border:1px solid #e6e6e6; }

/* --- Dialog --- */
.dialog-overlay { overflow:auto; }

/* --- Plan --- */
#plan ul { margin:5px 0 10px 0; }
#plan li { margin:5px 0; }
#plan ul ul { margin:10px 0 0 20px; }
#plan a.root { font-size:14px; font-weight:bold; }
#plan a.lvl1 { font-weight:bold; }
#plan li.root {margin:20px 0 5px 0;}
#plan ul.ul-1 {margin:10px 0 10px 20px;}
#plan ul.ul-2 {margin:10px 0 10px 20px;}

/* --- Autocomplete --- */
.autocomplete{
  position: absolute;
  background-color: white;
  color: #333;
  border: 1px solid #0D3887;
  overflow: hidden;
  z-index: 1000;
  width: 400px;
  max-width: calc(100vw - 2px);
}
.autocomplete > ul{
  margin-bottom: 0;
}
.autocomplete > ul.algolia::before{
  position: absolute;
  content: "Algolia";
  top: 0.5rem;
  right: 0.5rem;
  font-size: 0.8rem;
}
.autocomplete > ul > li{
  margin: 0;
  padding: 0.5rem 1rem;
  cursor:pointer;
}
.autocomplete > ul > li:nth-child(odd){
  background: #f5f5f5;
}
.autocomplete > ul > li.cart {
  cursor: unset;
}
.autocomplete > ul > li.cart > .row{
  align-items: center;
}
.autocomplete > ul > li.cart > .row > .col-image a{
  display: flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  background: white;
}
.autocomplete > ul > li.cart > .row > .col-image a img.img-fluid{
  max-height: 100%;
}
.autocomplete > ul > li.cart > .row > .col-code{
  font-size: 0.9rem;
}
.autocomplete > ul > li.cart > .row > .col-name > a{
  font-size: 0.9rem;
  text-decoration: none;
}
.autocomplete > ul > li.cart > .row > .col-price{
  font-weight: bold;
}
.autocomplete > ul > li.cart > .row > .cart-add-box .btn.btn-sm{
  padding: 10px !important; /* Avoids overflow bug when zoom is enabled */
}
.autocomplete > ul > li.nav{
  color: #E20613;
  background: white;
  justify-content: center;
}
.autocomplete ul li.nav.prev{ width: 50%; float: left; }
.autocomplete ul li.nav.prev + li.nav.next{ width: 50%; float: right; }
.q-indicator{ position:absolute;  z-index: 10; left: 8px; top: 6px; }
.q-indicator img{ width:18px; }

/* --- Search dialog --- */

.dialog-body-search #header .col-auth,
.dialog-body-search #header .col-cart,
.dialog-body-search #header .col-toggler{
  display: none !important;
}
.dialog-body-search #header .col-search form button.btn-back{
  display: inline;
}
.dialog-overlay.dialog-overlay-search{
  top: 123px !important;
}
.dialog-shadow-search.dialog-shadow.dialog-shadow-fullscreen{
  height: auto !important;
  max-height: calc(100vh - 123px);
  overflow-y: auto;
  top: 123px !important;
}
.dialog-close-search{
  display: none;
}
.dialog-search.dialog-support.fullscreen{
  height: auto !important;
}
.dialog-search{
  padding: 0 55px;
  text-align: left;
  font-size: 16px;
}
@media (max-width: 768px) {
  .dialog-search{
    padding: 10px;
  }
}
.dialog-search h2{
  font-size: 1rem;
  font-weight: 500;
}
.dialog-search .autocomplete{
  position: static;
  width: 100% !important;
  border: none;
}
@media (max-width: 768px) {
  .dialog-search .autocomplete{
    padding-bottom: 20vh; /* Fixes mobile virtual keyboard hiding pagination bug */
  }
  .dialog-search .badges{
    white-space: nowrap;
    overflow-x: auto;
  }
}
@media (max-width: 768px) {
  .dialog-search #search-history-results{
    white-space: nowrap;
    overflow-x: auto;
  }
}
.dialog-search .search-suggestions a{
  display: block;
  text-decoration: none;
}
.dialog-search .search-suggestions a i{
  border-radius: 50%;
  padding: 0.5rem;
}
@media (min-width: 769px) {
  .dialog-search .produits .item{
    margin-top: 0;
  }
}
.dialog-search a.nav{
  display: inline-block;
  color: #e20613;
  text-decoration: none;
}

/* --- Cart confirm --- */
.dialog-cart-confirm h1 { margin: 2rem 0 1rem; }
.dialog-cart-confirm h1 .fa-circle-check { color: black; }
.dialog-cart-confirm .container-fluid > p > strong { color: black; }
.dialog-cart-confirm .bestsellers { background: #FAFAFA; margin: 1rem -15px 0; min-height: 384px; padding: 1rem; }
.dialog-cart-confirm .bestsellers .foot { padding: 0; }
.dialog-cart-confirm .bestsellers h2 { margin-top: 0; text-transform: capitalize; }
.dialog-cart-confirm .bestsellers .slide-bestseller div.slide{ background: #FAFAFA; }
@media (max-width: 768px) {
  .dialog-support.dialog-cart-confirm .btn{ width: 210px; }
  .dialog-support.dialog-cart-confirm .bestsellers{ min-height: 0; }
  .dialog-support.dialog-cart-confirm .bestsellers .bestseller .item { height: 255px; }
  .dialog-support.dialog-cart-confirm .bestsellers .bestseller .item .price { display: flex; justify-content: space-between; width: 100%;}
  .dialog-support.dialog-cart-confirm .bestsellers .bestseller .item .price br { display: none;}
  .dialog-support.dialog-cart-confirm .bestsellers .bestseller .item .cart-add-box { display: none; }
}

/* --- Share buttons --- */
.fb-share-button {
	display: -moz-inline-block;
	display:inline-block;
	padding:0 16px 0 0;
	height:16px;
	border:1px solid #d8dfea;
	background:url(/app/hammel/pix/facebook_share_icon.gif) no-repeat top right;
	text-decoration:none;
}
.fb-share-button span{
	display:none;
}
.fb-share-button:hover {
	color:#fff;
	border-color:#295582;
	background:#3b5998 url(/app/hammel/pix/facebook_share_icon.gif) no-repeat top right;
}
.tw-share-button {
	display: -moz-inline-block;
	display:inline-block;
	padding:0 16px 0 0;
	height:16px;
	border:1px solid #d8dfea;
	background:url(/app/hammel/pix/twitter_share_icon.gif) no-repeat top right;
	text-decoration:none;
}
.tw-share-button:hover {
	color:#fff;
	border-color:#51bee9;
	background:#51bee9 url(/app/hammel/pix/twitter_share_icon.gif) no-repeat top right;
}
.tw-share-button span{
	display:none;
}

/* Tooltips */
/* DEPRECATED Use bootstrap tooltip-inner instead */
span.tooltip{padding:2px;position:absolute;background:#ffffff;border:1px solid #ccc;z-index:2;top:-25px;left:-25px;}
span.tooltip img{width:100px;height:100px;}

.tooltip-inner{ background: #1D2139; color: white; font-size: 11px; padding: 10px; border-radius: 5px; box-shadow: 0 5px 5px #ccc; min-width: 160px; }

/* Professionnels */
.professionnel{margin:0 0 16px 0; border-bottom:1px solid #e6e6e6;float:left; width:33%;height:132px;}
.professionnel h3{margin-bottom:5px;}

/* Hammel & Vous */
@font-face {
  font-family: erwin;
  src: url('fonts/erwin.eot');
  src: url('fonts/erwin.eot?#iefix') format('embedded-opentype'),
       url('fonts/erwin.woff') format('woff'),
       url('fonts/erwin.ttf') format('truetype'),
       url('fonts/erwin.svg#erwin') format('svg');
  font-weight: normal;
  font-style: normal;
}
.page-hammel-et-vous #page h2{
  font-size:1.8em;
}
.page-hammel-et-vous #page h2.frame{
  color:#fff;
  background:#C50C29;
  height:auto;
  line-height:auto;
}
.page-hammel-et-vous #page h3,
.page-hammel-et-vous #page .h3{
  font-size:1.6em;
}
.page-hammel-et-vous #page h3.frame{
  background:url(/var/docs/visuels/hammel-et-vous/bg-hv-h3.png) no-repeat;
  text-align:center;
  font-family: erwin;
  line-height:51px;
}
.page-hammel-et-vous #page h3.frame strong{
  color:#fff;
  font-weight: normal;
}
.page-hammel-et-vous #page h4{
  font-family: erwin;
  color:#C50C29;
  background:url(/var/docs/visuels/hammel-et-vous/bg-hv-h4.png) no-repeat;
  padding:0 0 0 36px;
  margin:0 0 0 -36px;
  min-height:50px;
  font-size:1.4em;
  font-weight: normal;
}
.page-hammel-et-vous #page p.frame{
  background:url(/var/docs/visuels/hammel-et-vous/bg-hv-frame.png);
  width:532px;
  height:67px;
  padding:10px 10px 10px 100px;
  letter-spacing:-0.8px;
  font-size:1.6em;
  line-height:1.6em;
  color:#fff;
  text-align:center;
}
.page-hammel-et-vous  #page #reglement .image{
  display:block;
  background:url(/var/docs/visuels/hammel-et-vous/reglement.png);
  height:96px;
}
.page-hammel-et-vous img.small{
  height:20px;
}

/* Banner RHammel */
#banner { margin: 10px; }
#banner a{ display:block; height:97px; background-image:url(/app/hammel/pix/site_rhammel.jpg); background-size: 100% auto; background-repeat: no-repeat; }
#banner a span{ position:absolute; top:0; left:-1000px; }

/* Community cart */
.dialog-cart-edit .scroller { height: 460px; overflow-y: auto; }
.dialog-cart-edit .spec-table th { font-size: 12px!important; }

/* PCBT */
.action-pcbt #main .page-cms { padding: 2em 0 0;  }
.action-pcbt #main .well { background: linear-gradient(to bottom, #fe9402 0%,#fff 100%); color: black; font-family: impact; font-size: 1.5rem; line-height: 1.6em; border-radius: 10px; text-align: center; max-width: 380px; margin: 0 auto 0.5em; padding: 0.5em 1em; }
.action-pcbt #main form { background: url(/app/hammel/pix/bg-pcbt.jpg) no-repeat; padding: 0 2em; overflow: auto; background-size: cover; }
.action-pcbt .step { clear: left; padding: 3em 0; }
.action-pcbt .step > label { background: #a8a8a8; color: white; border-radius: 10px; text-align: center; display: block; min-width:300px; float:left; width: 40%; font-size:1.4rem; line-height: 1.7rem; margin: 0; }
.action-pcbt .step > label .number { float: left; display: inline-block; border-radius: 50%; border:2px solid #a8a8a8; font-size: 1.6rem; margin:-0.9rem -0.5rem; }
.action-pcbt .step > label .number span { display: inline-block; border-radius: 50%; background: #a8a8a8; border:2px solid white !important; line-height: 2.5rem; width: 3rem; height: 3rem; }
.action-pcbt .step.enabled > label, .action-pcbt .step.enabled > label .number, .action-pcbt .step.enabled > label .number span { background: #ff9909; border-color: #ff9909; }
.action-pcbt .step.done > label, .action-pcbt .step.done > label .number, .action-pcbt .step.done > label .number span { background: #009f00; border-color: #009f00; }
.action-pcbt .step .controls { margin-left: 50%; }
.action-pcbt .step.disabled .controls, .action-pcbt .step .controls input:disabled, .action-pcbt .step .controls input:disabled ~ label { opacity: 0.5; }
.action-pcbt .step.enabled .controls { opacity: 1; }
.action-pcbt #main .page-cms .step .controls ul.checkboxes { padding: 0; }
.action-pcbt .step .controls li { float: left; width: 50%; text-align: center; margin: 0; background: white; }
.action-pcbt .step .controls li input { display: none; }
.action-pcbt .step .controls li label { margin: 0; border:1px solid white; }
.action-pcbt .step .controls li label img { pointer-events: none; } /* Fixes IE11 bug */
.action-pcbt .step.enabled .controls li label { cursor: pointer; }
.action-pcbt .step .controls li input:checked + label,.action-pcbt .step.enabled .controls li label:hover { border-color: black; }
.action-pcbt .step .controls li label .article_name  { display: none; }
.action-pcbt .step button { background: #a8a8a8; color: white; font-weight: bold; border-radius: 10px; text-align: center; border: 2px solid #a8a8a8; padding: 1em; cursor: pointer; display: block; margin:0 auto; font-size: 1.2rem; }
.action-pcbt .step.enabled button { background: linear-gradient(to bottom, #febd63 0%,#ff9909 100%); border-color: #ff9909; }
.action-pcbt .step#step0 .controls { font-size: 1.6rem; text-align: center; }
.action-pcbt .step#step0 .controls input { font-size: 1.6rem; width: 3em; text-align: center; }
.action-pcbt .step#step1 .controls li { width: 33%; }
.action-pcbt .step#step3 .controls li.li-dalle-lisse { float: left; }
.action-pcbt .step#step3 .controls li.li-dalle-a-plots { float: right; }
.action-pcbt .step#step3 .controls li input { display: inline; }
.action-pcbt .step#step3 .controls li label { display: inline; border-color: white !important; }
.action-pcbt .step#step3 .controls li label .article_name  { display: inline; }
.action-pcbt .step#step3 .controls li label .name { display: none; }
.action-pcbt .step#step3 .controls li label .image { display: none; }
.action-pcbt .step#step4 .controls li label .name { height: 2.6em; }
.action-pcbt-results .debug{ border: 1px dotted #333; background: #eee; padding: 1em; }

.dialog-support .big.button.v3 { margin: 3em 2em; }
.dialog-support label.label-cgu { position: absolute; left: 50%; bottom: 1.5rem; }
.dialog-support label.label-cgu > input { vertical-align: middle; }

/* sponsoring */
.action-sponsoring #main .page-cms{ padding:0; }

/* Animations */
.pulse { animation-name: pulse_animation; animation-duration: 1000ms; transform-origin:70% 70%; animation-iteration-count: infinite; animation-timing-function: linear; }

@keyframes pulse_animation {
    0% { filter: brightness(100%); }
    50% { filter: brightness(120%) }
    100% { filter: brightness(100%) }
}

/* Simulator */
.form-simulator { padding: 2em; }
.form-simulator table tr td { padding-bottom: 0; }
.form-simulator table tr.separator { border-top: 1px solid #ccc; }
.form-simulator table tr.spacer { height: 0.5em; }
.form-simulator table tr.important { font-size: 2em; }
.form-simulator table tr.hidden { display: none; }
form.form-simulator table tr.important th { line-height: 1em; }
form.form-simulator table tr.important td input.text { font-size: inherit; color: #c50c29 !important; border: none; background: none; padding: 0; }

/* Politique de confidentialité */
.page-politique-de-confidentialite .page-cms ul{ list-style: disc; margin: 1rem; }

/* Order list */
form#search-orders h2{ font-size: 12px; }
form#search-orders .btn.btn-light{ background: white; color: var(--main-blue-color); border: none; }
form#search-orders .btn.btn-light.disabled{ color: #999; }
form#search-orders{ border: 1px solid #e6e6e6; }
table#orders{ width:100%; border-collapse:collapse; border:1px solid #e6e6e6; color:#4d4d4d; }
table#orders thead th, table#orders tbody td{ padding: 1rem; border-bottom:1px solid #e6e6e6; }
table#orders thead th{ font-weight:bold; font-size:12px; }
table#orders tbody td{  }
table#orders tbody td.col-order{ background-color: #f8f8f8; font-size:11px; }
table#orders tbody td.col-purchases .statutcommande{ flex-wrap: wrap; }
table#orders tbody td.col-purchases .purchase{ font-size:11px; }
@media (max-width: 768px) {
  table#orders thead th, table#orders tbody td { white-space: nowrap; }
}

/* btn recap */
.btn.btn-recap{
  background-color: #fff;
  color: var(--main-blue-color);
  display: flex;
  border: none;
  justify-content: space-between;
  align-items: center;
  margin: 0.5rem;
  border-bottom: 1px solid #E0EFF8;
  padding-bottom: 0.5rem;
}

/* hide collapse on desktop */
@media (min-width: 768px) {
  .collapse.dont-collapse-sm {
    display: block;
    height: auto !important;
    visibility: visible;
  }
}

/* Hide header on order */
.action-order #header>div.container-fluid,
.action-order #header .row:not(:first-child),
.action-order #header div.container .col-search,
.action-order #header div.col-auth-cart {
  display: none !important;
}

.action-order #header,
.action-order #header .container {
  background-color: #FAFAFA;
}

/* tooltips help mobile shop */
#kwo-amounts-box .tooltiptext {
  width: 300px;
  transform: none;
  left: 0;
  padding: 0.5rem 0.8rem;
}
#kwo-amounts-box .tooltiptext:after {
  left: 16%;
}

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

  .action-order #header div.col-toggler,
  .action-order #header .container-familles {
    display: none !important;
  }

  .action-order #header .container {
    background: #fff;
    margin-bottom: 1rem;
  }

  #header .container .row {
    justify-content: center;
  }
}

/* float button */
.action-order .float-btn {
  position : fixed;
  bottom : 0%;
  background: #fff;
  z-index: 999;
  padding: 1rem;
  width: 100%;
  left: 50%;
  transform: translate(-50%);
  margin: 0 !important;
}

/* Reclamation */
.action-reclamation-list .cart-list.spec-table tr.header{ border-top: 1px solid #ccc; }
.action-reclamation-list .cart-list.spec-table tr.line{ border-top: 1px solid #eee; }
.action-reclamation-list .cart-list.spec-table tr td{ line-height:normal; }
.action-reclamation .reclamation-line:first-of-type .delete{ display: none; }
.action-reclamation .reclamation-line{
  border-bottom: 1px solid #eee;
  margin-bottom: 15px;
}
@media screen and (max-width: 768px) {
  .action-reclamation .dialog-shadow {
    top: 50% !important;
  }
}
.action-reclamation #main .btn-collapse{
  display: block;
  background: #F7F8FA 0% 0% no-repeat padding-box;
  box-shadow: 0px 2px 2px #00000029;
  text-align: left;
  margin-bottom: 20px;
  font-weight: normal;
  padding: 10px 10px 10px 0;
  white-space: initial;
}
.action-reclamation #main .btn-collapse i{
  float: right;
}
.action-reclamation #main .btn-collapse:not(.collapsed) i.fa-caret-up,
.action-reclamation #main .btn-collapse.collapsed i.fa-caret-down{
  display: none;
}
.action-reclamation #main .btn-collapse h3,
.action-reclamation #main .btn-collapse p{
  margin: 0;
}
.action-reclamation .reclamation-line h3{
  font-size: 14px;
}
.action-reclamation .form-group.attachments ul{
  border: 1px dashed #B2B8D4;
  padding: 1rem 1rem 0;
}
.action-reclamation .form-group.attachments ul li:last-of-type .js-delete{
  display: none;
}

/* Tooltips */
.js-tooltip{
  position: absolute;
  background: white;
  border: 1px solid #333;
  padding: 0.5em;
  color: #333;
  width: 200px;
  z-index: 9999;
  text-align: left;
}

/* Offres */
.action-offre-list table.cart tfoot td a.button { height: 21px; box-sizing: content-box;}
.action-offre-list table.cart tfoot th.price:first-of-type{ width: 63px; text-align: right; font-weight: bold;}
.action-offre-list table.cart tfoot th.price:last-of-type{ width: 67px; font-weight: bold;}

/* Offres commerciaux */
.background-couloir-p10 { color: white; background-color: #545454; }
.background-couloir-p30 { color: white; background-color: #FF5B3F; }
.background-couloir-p50 { color: white; background-color: #FCCD5C; }
.background-couloir-p70 { color: white; background-color: #5CD79E; }
.background-couloir-p90 { color: white; background-color: #72BDA3; }
.badge-couloir{ border-radius: 10px; width: 100%; }
.action-offre table tr { border-bottom: 1px solid white; }
.action-offre table tr.background-light { background-color: #F5F5F5; }
.action-offre table tr.background-dark { background-color: #DEE2E6; }
.action-offre table tr.background-white { background-color: #FFF; }
.action-offre table tr th, .action-offre table tr td{ text-align: center; font-size: 0.8rem; }
.action-offre table tr td{ padding: 0.5rem 0 !important; font-size: 0.9rem; }
.action-offre table tr .cell-article-code{ width: 200px; }
.action-offre table tr .cell-quantity{ width: 100px; vertical-align: top; }
.action-offre table tr .cell-quantity input{ display: inline-block; width: calc(100% - 3rem); margin-right: 0.3rem; }
.action-offre table tr .cell-total-wished{ width: 130px; }
.dialog-support.dialog-offre-validate .modal-content {overflow-x:hidden;}
.action-offre .form-group.attachments ul{
  border: 1px dashed #B2B8D4;
  padding: 1rem 1rem 0;
}
.action-offre .form-group.attachments ul li:last-of-type .js-delete{
  display: none;
}

/* Marques */
.action-marques .col-filtres h2{ background: #0D3887; color: white; border: none; padding: 0.5rem 1rem; margin: -1rem -1rem 0; }
.action-marques .col-filtres h2::before{ content: none; }
.action-marques .col-filtres .navbar.navbar-expand-lg .form-filter.navbar-collapse{ border: 2px solid #707070; background: #fafafa; padding: 1rem; margin-bottom: 2rem; }
.action-marques .col-filtres ul li label{ font-weight: normal; }
.action-marques .col-marques h1{ margin-top: 0; margin-bottom: 0.5rem; }
.action-marques .col-marques form{ margin: 1rem 0; }
.action-marques .col-marques form label{ margin-bottom: 0.5rem; }
.action-marques .col-marques form input.text{ line-height: 1.3rem; min-width: 20vw; }
.action-marques .col-marques form .btn.btn-primary{ border-radius: 0; border: 1px solid #000; }
.action-marques .col-marques .navbar.navbar-lettres{ padding: 0; margin: 2rem 0; }
.action-marques .col-marques .navbar.navbar-lettres ul.nav li a{ font-size: 1.5rem; font-style: italic; margin: 0 1rem 0 0; text-decoration: none; }
.action-marques .col-marques .lettre{ border-top: 1px solid #707070; padding-top: 1rem; padding-bottom: 5rem; display: flex; }
.action-marques .col-marques .lettre h2{ font-size: 3rem; font-weight: bold; border: none; margin-top: 0;width: 3rem; text-align: center; margin-right: 7%; }
.action-marques .col-marques .lettre h2::before{ content: none; }
.action-marques .col-marques .lettre ul.marques{ columns: 3 15rem; }
.action-marques .col-marques .lettre ul.marques li a{ text-decoration: none; color: #707070; }


/* espace client */
h1.title-customer-space{ font-size: 2.4rem;font-weight: bold; }

.export-help{ color: var(--main-blue-color); }

.export-help a{ text-decoration: none; }

label.line-height{ line-height: 27px; font-weight: lighter; }

input[type="checkbox"], input[type="radio"]{ width: 18px; height: 18px; }

input#export-submit{ background-color: var(--primary); color: white; }

table.columns .elt-control label{ display: flex; align-items: center; width: 100%; }

#btn-copy {color: #004C79;}

/* cart mobile */
.page-box .cart-btn{ font-size: 15px; }

.cart-shadow{ box-shadow: 0 3px 6px #00000029; }

/* Notification */
.callback-container.node-updated{ display: inline-flex; margin-bottom: 1rem; }
.callback-container.node-updated{ background-color: var(--notification-background-color); color: white; }
.callback-container.node-updated i { color: white; margin-right: 0.8rem; }

/* Profil */

.border-blue { border: 1px solid #E3F0F6; }

#user-list .callback-container.node-updated i{ color:white; }
.border-bottom-blue{ border-bottom: 1px solid var(--main-blue-color); }
.bg-color-light-blue{ background-color: #F6F9FC; }

#user-list .del-user i { color: white; padding: 10px; background-color: var(--main-blue-color); }
#user-list .card.card-documents { padding: 0; margin-bottom: 0; }
#user-list .card.card-documents .legend { color: var(--legend); }
#user-list .card.card-documents p:first-child { margin-bottom: 0; }
#user-list .card .order_max_amount i { font-size: 20px; }
#user-list .card .order_max_amount a, #user-list .card .flags ~ p a, #user-list h2 {color: #0c0707;}
#user-list .card span.autostore-yes, #user-list .card span.autostore-yes i {color : #008D12 !important;}
#user-list .card span.autostore-no, #user-list .card span.autostore-no i {color : #E20613 !important;}

#navbar-auth {width: 210px;}

/* tooltip */
/* TODO remove specific cases, use only .tooltip, .tooltip.show, .tooltip-hover */ 
.tooltip-profil, .tooltip-cart { position: relative; display: inline-block ; }
.tooltip-profil .tooltiptext, .tooltiptext, .tooltip-cart .tooltiptext {
  width: 100%;
  visibility: hidden;
  background-color: #1D2139;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s;
  font-size: 12px;
  font-weight: 400;
  left: 50%;
  transform: translateX(-50%);
}

.tooltip-cart .tooltiptext {
  width: 152px;
}

.tooltip-cart:hover .tooltiptext {
  visibility: visible; opacity: 1; 
}

.tooltip-qty{ width: 130px; top: -30px; }
.tooltip-qty.show .tooltiptext{ visibility: visible; opacity: 1;  }

.btn-copy{ cursor: pointer; }

#btn-copy .tooltiptext{ font-family: 'Quicksand' ; width: 70px; transition: all 0.2s; top: 130%;}
#btn-copy .tooltiptext::after { content: ""; position: absolute; bottom: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: transparent transparent #1D2139 transparent; }

.tooltiptext.tooltip-show{ visibility: visible; opacity: 1; }

.tooltip-top::after{ content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #1D2139 transparent transparent transparent; }

.tooltip-top{ bottom: 125%; left:50%; }

/* checkbox toggle switch */
.switch { display: inline-block; position: relative; width: 49px; height: 24px; cursor: pointer; margin: 0; }
.switch input { position: absolute; top: -30px; left: -30px; width: 0; height: 0; display: none;}
.switch input + span { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: transparent; border-radius: 20px; border: 1px solid var(--main-blue-color); }
.switch input:checked + span { background: var(--main-blue-color); }
.switch input + span:before { 
  content: ""; 
  display: inline-block;
  position: absolute; 
  top: 50%;
  width: 24px; 
  height: 24px;
  background: white; 
  border-radius: 50%; 
  transform: translateY(-50%);
	transition: all .5s;
  border: 1px solid var(--main-blue-color);
}

.switch-actif, .switch-inactif { position: absolute; top: 100%; font-weight: 400; font-size: 12px; }

.switch input:checked + span:before{ left: 25px; }
.switch input:checked ~ .switch-actif{ display: block; }
.switch input:checked ~ .switch-inactif{ display: none; }
.switch input ~ .switch-actif{ display: none; }
.switch input ~ .switch-inactif{ display: block; }

.switch.switch-yes-no{ height: 33px; min-width: 68px; }
.switch.switch-yes-no input + span { background-color: white; }
.switch.switch-yes-no input + span:before {
  color: white;
  content: "Non"; 
  display: inline-block; 
  position: absolute; 
  top: 50%;
  width: 32px; 
  height: 32px;
  background: var(--main-blue-color); 
  border-radius: 50%; 
  transform: translateY(-50%);
	transition: all .5s;
  border: 1px solid var(--main-blue-color);
  text-align: center;
  padding-top: 4px;
  left: 34px;
}

.switch.switch-yes-no input:checked + span:before{ left: 0px; content: "Oui"; }
.switch.switch-yes-no input + span:after{color: lightgrey; }
.switch.switch-yes-no input:checked + span:after{ position: absolute; left: 34px; content: "Non"; }
.switch.switch-yes-no input + span:after{ position: absolute; left: 2px; content: "Oui"; padding-top: 5px; }

/* User informations */

/* User edit */
#max-amount form input{ width: 80px; }
.checkbox-blue:checked {accent-color: #1D2139}

/* Profil adresse */
.user-address p{ margin: 0; }

/* PWA */

.pwa-install{ position: fixed; z-index: 999; bottom: 0; width: 100%; background: white; padding: 1rem; border-top-left-radius: 10px; border-top-right-radius: 10px; }
.pwa-install .pwa-close{ position: absolute; right: 1rem; top: 1rem; }
.pwa-install#pwa-install-android{ text-align: left; }
.pwa-install#pwa-install-android img{ width: 100px; }
.pwa-install#pwa-install-android .btn{ margin-right: 3rem; }
.pwa-install#pwa-install-ios{ text-align: center; }
.pwa-install#pwa-install-ios h2{ text-transform: none; }

/* Inscription / Connexion */
.action-signup p.login-p { font-size: 18px; font-weight: 600; color: #6E7881 !important; }
.action-signup h2.login-h2 { font-size: 22px; }
.action-signup .col-signin .btn-disabled { background-color: #ADB5BD; color: white; border-color: #ADBDC9;}