/********************
	Style général des modals
********************/
.modal,
.modal-open {
  overflow : hidden
}

.modal {
  position   : fixed;
  top        : 0;
  right      : 0;
  bottom     : 0;
  left       : 0;
  z-index    : 1050;
  display    : none;
  outline    : 0;
  background : transparent;
  opacity    : 0;
  transition : all .3s;
}

.modal.in {
  opacity     : 1;
  background  : rgba(0, 0, 0, 0.5);
  display     : flex !important;
  align-items : center;
}

.modal p + p {
  margin-top : .25em
}

.modal.fade .modal-dialog {
  transition        : -webkit-transform .3s ease-out;
  transition        : transform .3s ease-out;
  transition        : transform .3s ease-out, -webkit-transform .3s ease-out;
  -webkit-transform : translateY(-25%);
  transform         : translateY(-25%)
}

.modal.in .modal-dialog {
  -webkit-transform : translate(0);
  transform         : translate(0)
}

.modal-open .modal {
  overflow-x : hidden;
  overflow-y : auto
}

.modal-dialog {
  position : relative;
  width    : auto;
  margin   : 10px
}

.modal-content {
  position         : relative;
  background-color : #fff;
  background-clip  : padding-box;
  border-radius    : .3rem;
  outline          : 0
}

.modal-backdrop {
  position         : fixed;
  top              : 0;
  right            : 0;
  bottom           : 0;
  left             : 0;
  z-index          : 1040;
  background-color : #000;
  display          : none;
}

.modal-backdrop.fade {
  opacity : 0
}

.modal-backdrop.in {
  opacity : .5
}

.modal-header {
  background    : var(--color-primary);
  padding       : 1em;
  border-bottom : 1px solid #e5e5e5
}

.modal-header:after {
  content : "";
  display : table;
  clear   : both
}

.modal-title {
  font-size   : 1em;
  margin      : 0;
  line-height : 1.5;
  font-weight : 600;
  color       : var(--color-white-default);
}

.modal-body {
  position  : relative;
  color     : var(--color-grey-font-default);
  font-size : var(--font-size-300);
  padding   : 1em;
}

.modal-body__info-value {
  display         : flex;
  justify-content : space-between;
}

.modal-footer {
  padding    : 15px;
  text-align : right;
  border-top : 1px solid #e5e5e5
}

.modal-footer:after {
  content : "";
  display : table;
  clear   : both
}

.modal-scrollbar-measure {
  position : absolute;
  top      : -9999px;
  width    : 50px;
  height   : 50px;
  overflow : scroll
}


.cdpcp-compare-modal__dialog.modal-dialog {
  max-width   : 600px;
  margin      : auto auto 30px !important;
  padding-top : 30px;
}

.modal.loaded_crossell .modal-dialog {
  max-width : 600px;
  margin    : auto !important;
  padding   : 30px 0;
}

.modal.loaded_crossell .ets_crosssell_block {
  grid-column : 1/3;
}

.modal.loaded_crossell .ets_crosssell_block ul.ets_cs_sub_categories {
  margin-top : 0;
}

.modal .featured-products.product_list {
  max-width : 100%;
  padding   : 0 15px;
}

.modal.loaded_crossell .swiper-wrapper.added_popup_page.product_list {
  display        : flex;
  flex-direction : row;
  flex-wrap      : nowrap;
}

.ets_crosssell_tab_content .slick-track {
  width : auto !important;
}

.crosssell_product_list_wrapper.layout-slide article.product-miniature.slick-slide {
  width        : 100% !important;
  margin-right : 20px;
}


@media (min-width : 576px) {
  .modal-dialog {
    max-width : 600px;
    margin    : 30px auto
  }

  .modal-sm {
    max-width : 300px
  }
}

@media (min-width : 992px) {
  .modal-lg {
    max-width : 900px
  }
}

@media (max-width : 767px) {
  .modal-header {
    font-size : var(--font-size-100);
  }
}

@media (min-width : 768px) {
  .modal-header {
    font-size : var(--font-size-400);
  }
}

@media (min-width: 1199px) {
  #product-modal .modal-dialog {
    display: block;
    width: 1000px;
    margin: 0 auto;
  }
}