.modal-dialog-centered-poppin
{
  max-width: 400px;
}
.modal-content-custom
{
  border: solid 10px #00664f !important;
}
.modal-header-custom
{
  border: none;
  margin: 30px;
  padding: 0;
}
.popin-box-text
{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.btn-close-poppin
{
  box-sizing: content-box;
  width: 24px;
  height: 24px;
  padding: 0.2em;
  background: url("https://jules.it.com/on/demandware.static/-/Sites/default/jules-sfcc/POPIN/navigation-cancel.svg") 50%/1em auto no-repeat;
  border: 0;
  border-radius: 100%;
  opacity: 0.9;
  font-size: 20px;
}
.text-green
{
  color: #00664f !important;
}
.drapeau-belgium::after
{
  content: " ";
  width: 20px;
  height: 25px;
  position: relative;
  margin-left: 2px;
  background: url("https://jules.it.com/on/demandware.static/-/Sites/default/jules-sfcc/POPIN/flag-belgium.svg") 50%/1em auto no-repeat;
  vertical-align: middle;
  display: inline-block;
  right: 0;
}
.text-size-poppin
{
  font-size: 14px !important;
}
.ui-jules-pdp .modal-body
{
  padding: 0 2em !important;
}
.ui-jules-pdp .modal-body .bandeau__inclusion--title
{
  font-size: 16px;
  margin: 0;
  font-weight: 600;
  color: #000;
}
.ui-jules-pdp .modal-body .bandeau__inclusion--listeMagasin
{
  padding: 1.5em;
  list-style: none;
}
.ui-jules-pdp .modal-body .bandeau__inclusion--listeMagasin li
{
  list-style-type: disc;
  color: #000;
}
.ui-jules-pdp .modal-body .bandeau__inclusion--listeMagasin li a
{
  text-decoration: underline;
}
/* Modal Jules Centered */
.modalJules
{
  position: fixed;
  z-index: 5;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .7);
  display: none;
  justify-content: center;
  align-items: center;
  transition: opacity 0.3s ease;
  opacity: 0;
  padding: .5em;
}
.modalJules.active
{
  display: flex;
  opacity: 1;
}
.modalJules .modalJulesContent
{
  position: relative;
  width: 100%;
  max-width: max-content;
  box-shadow: 0 4px 8px rgba(0, 0, 0, .2);
  transition: transform 0.3s ease;
  transform: translateY(20px);
}
.modalJules.active .modalJulesContent
{
  transform: translateY(0);
}
.modalJules .modalJulesClose
{
  color: #000;
  float: right;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
  padding: .25em;
  z-index: 6;
  line-height: 1;
  background-color: #ffffffa6;
  margin: .5em;
  border-radius: 50px;
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
}
.modalJules .modalJulesClose:hover,
.modalJules .modalJulesClose:focus
{
  color: black;
  text-decoration: none;
  background-color: #ffffff;
}
.modalJules video
{
  width: 100%;
  display: block;
}
.modalJules img
{
  width: 100%;
  max-width: 100%;
  display: block;
}
/* Bouton dans les modales */
.modalJulesButton
{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: auto;
  border: .15em solid #000;
  background: -webkit-linear-gradient(left, #000 50%, rgba(255, 255, 255, .6) 50%);
  background: -o-linear-gradient(left, #000 50%, rgba(255, 255, 255, .6) 50%);
  background: linear-gradient(to left, #000 50%, rgba(255, 255, 255, .6) 50%);
  background-size: 250%;
  background-position: right;
  color: #fff;
  height: 37px;
  border-radius: 50px;
  cursor: pointer;
  transition: .5s ease-out;
  margin: 0;
  padding: .5em 1em;
  position: absolute;
  left: calc((100% / 2) / 2);
  bottom: calc(100% / 5);
  transform: translateX(calc((-100% / 2)));
}
.modalJulesButton:hover
{
  background-position: left;
  color: #000
}
/* Gestion des boutons dans la modale anniversaire */
#modalAnniversaire .modalJulesButton
{
  display: none;
}
#modalAnniversaire[data-status="connected"] .modalJulesButton[data-button-type="connected"]
{
  display: inline-flex;
}
#modalAnniversaire[data-status="not-connected"] .modalJulesButton[data-button-type="not-connected"]
{
  display: inline-flex;
}
/* Gestion des boutons dans la modale Op 10 */
#modalOp10 .modalJulesButton
{
  border: .15em solid #A8E63F;
  background: -webkit-linear-gradient(left, rgba(255, 255, 255) 50%, #A8E63F 50%);
  background: -o-linear-gradient(left, rgba(255, 255, 255) 50%, #A8E63F 50%);
  background: linear-gradient(to left, rgba(255, 255, 255) 50%, #A8E63F 50%);
  background-size: 250%;
  color: #A8E63F;
  background-position: right;
  position: absolute;
  left: 50%;
  bottom: 15%;
  transform: translateX(-50%);
}
#modalOp10 .modalJulesButton:hover
{
  background-position: left;
  color: #fff;
}