* { margin: 0; padding: 0; }

body {
  overflow: auto; /* Enable scrolling on the page by default */
}

body.noScroll {
  overflow: hidden; /* Prevent scrolling on the page when the iframe is open */
}

#iframeContainer {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9998;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none; /* Disable pointer events by default */
}

#iframeContainer.visible {
  pointer-events: auto; /* Enable pointer events when visible */
  overflow: auto; /* Enable scrolling within the iframe container */
  padding: 10px; /* Adjust the padding as per your requirement */
  box-sizing: border-box; /* Include padding in the width and height calculations */
}

.iframeWrapper {
  width: calc(100% - 80px); /* Adjust the width based on the padding */
  height: calc(100% - 160px); /* Adjust the height based on the padding */
  border-radius: 10px;
  box-shadow: 0 0 40px 40px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  position: fixed;
}

iframe {
  width: 100%;
  height: 100%;
  border: none;
}

		.closeButton {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #24D898;
  color: #FFFFFF;
  box-shadow: rgb(0 0 0 / 50%) 0px 5px 10px;
  border-radius: 10px;
  padding: 7.5px 10px;
  cursor: pointer;
  font-size: 24px;
  z-index: 9999;
}




.simulateur .gibson {
    font-family: 'Gibson', sans-serif;
}

.simulateur .gibson.bold {
    font-family: 'Gibson SemiBold', Helvetica, Arial, Lucida, sans-serif;
}

.simulateur .color-orange {
    color: #FE6700;
}

.simulateur .uppercase {
    text-transform: uppercase;
}

.simulateur h3 {
    font-size: 18px;
}

.simulateur h2 {
    font-size: 40px;
}

.simulateur .title {
    font-size: 24px;
}

.simulateur .btn {
    border: 2px solid #133656;
    border-radius: 5px;
    text-transform: uppercase;
    color: #133656;
    font-weight: bold;
    font-size: 14px;
    padding: 8px 20px;
    letter-spacing: 1px;
    width: 200px;
    margin-bottom: 10px;
}

.simulateur .btn-achat {
   display: inline-block;
}

.simulateur .btn:hover {
    background-color: #133656;
    color: #F7F7F8;
}

.simulateur .btn.btn-orange {
    border-color: #FE6700;
    color: #FE6700;
}

.simulateur .btn.btn-orange:hover {
    background-color: #FE6700;
    color: #F7F7F8;
}

.simulateur .btn.btn-orange.btn-filled {
    background-color: #FE6700;
    color: #F7F7F8;
}

.simulateur .btn.btn-orange.btn-filled:hover {
    background-color: transparent;
    color: #FE6700;
}

.simulateur .btn.btn-next {
    width: 220px;
}

.simulateur #step1 .small-info {
    font-size: 12px;
    line-height: 14px;
}

.simulateur #step1 ul.images {
    position: relative;
    width: 100%;
    left: 0;
    z-index: 100;
    overflow: hidden;
    height: 600px;
}

.simulateur #step1 ul.images li.image-scooter {
    text-align: center;
    z-index: 150;
    width: 550px;
    margin: 0 auto;
    display: inline-block;
    overflow: hidden;
    position: absolute;
    left: 100%;
}

@media (max-width: 550px) {
    .simulateur #step1 ul.images li.image-scooter {
        width: 500px;
    }
}

@media (max-width: 500px) {
    .simulateur #step1 ul.images {
        height: 500px;
    }

    .simulateur #step1 ul.images li.image-scooter {
        width: 450px;
    }
}

@media (max-width: 450px) {
    .simulateur #step1 ul.images {
        height: 350px;
    }

    .simulateur #step1 ul.images li.image-scooter {
        width: 100%;
    }
}


.simulateur #step1 ul.images li.image-scooter.active {
    left: 0;
}


.simulateur #step1 .prix {
    font-size: 35px;
    margin-bottom: 9px;
}

.simulateur .prix sup {
    font-size: 50%;
}

.simulateur #step1 .unit-price {
    font-size: 16px;
    text-transform: uppercase;
    line-height: 30px;
    margin: 40px auto;
}

.simulateur #step1 .quantity {
    margin: 40px auto;
}

.simulateur #step1 .quantity button {
    background-color: #1D3054;
    width: 35px;
    display: inline-block;
    color: #ffffff;
    margin: 0;
    text-align: center;
    font-size: 20px;
    font-weight: 800;
    border: 1px solid #1D3054;
    line-height: 34px;
}

.simulateur #step1 .quantity button.less {
    border-radius: 5px 0 0 5px;
}

.simulateur #step1 .quantity button.more {
    border-radius: 0 5px 5px 0;
}

.simulateur #step1 .quantity input.with-buttons {
    border: 1px solid #1D3054;
    color: #1D3054;
    width: 50px;
    display: inline-block;
    margin: 0;
    text-align: center;
    font-size: 20px;
    font-weight: 800;
    line-height: 34px;
}

.simulateur #step1 .choix-couleur {
    text-transform: uppercase;
    font-size: 16px;
    margin: 40px auto;
}

.simulateur #step1 .vente-pack-batterie-chargeur {
    margin: 40px auto;
}

.simulateur #step1 .choix-couleur .around-color {
    border: 1px solid transparent;
    display: inline-block;
    border-radius: 30px;
    height: 30px;
    width: 30px;
    cursor: pointer;
}

.simulateur #step1 .choix-couleur .around-color.active,
.simulateur #step1 .choix-couleur .around-color:hover {
    border: 1px solid #8E8E8E;
}

.simulateur #step1 .choix-couleur .around-color .coloris {
    display: block;
    margin-top: 3px;
    margin-left: 3px;
}

/*
** COULEURS
** PINK ME PRO
*/

.simulateur #step1 .choix-couleur .color-noir-brillant {
	background-color: #000000;
}

.simulateur #step1 .choix-couleur .color-gris-mat {
	background-color: #C0C0C0;
}
/*
** COULEURS
** PINK ME
*/

.simulateur #step1 .choix-couleur .color-noir-bleu {
    background-color: #0099ff;
    border: #000000 6px solid;
}

.simulateur #step1 .choix-couleur .color-noir-orange {
    background-color: orange;
    border: #000000 6px solid;
}

.simulateur #step1 .choix-couleur .color-gris-vert {
    background-color: #00ff00;
    border: grey 6px solid;
}

.simulateur #step1 .choix-couleur .color-noir-vert {
    background-color: #00ff00;
    border: black 6px solid;
}

.simulateur #step1 .choix-couleur .color-gris-orange {
    background-color: orange;
    border: grey 6px solid;
}

.simulateur #step1 .choix-couleur .color-gris-bleu {
    background-color: #0099ff;
    border: grey 6px solid;
}

.simulateur #step1 .choix-couleur .color-gris-rouge {
    background-color: red;
    border: grey 6px solid;
}



/*
** COULEURS
** PINK POP
*/

.simulateur-pink-pop #step1 .choix-couleur .color-dark-blue {
    background-color: #7697AC;
}
.simulateur #step1 .choix-couleur .color-green {
     background-color: #229463;
}
.simulateur #step1 .choix-couleur .color-grey-blue {
     background-color: #7697AC;
}
.simulateur-pink-pop-plus #step1 .choix-couleur .color-dark-blue {
     background-color: #12284C;
}
.simulateur #step1 .choix-couleur .color-orange {
     background-color: #FF6B00;
}
.simulateur #step1 .choix-couleur .color-storm-grey {
    background-color: #586075;
}
.simulateur #step1 .choix-couleur .color-dark-blue-2 {
    background-color: #12284B;
}

/*
** COULEURS
** OVAO MCR M
*/

.simulateur #step1 .choix-couleur .color-azur {
    background-color: #00A6FF;
}
.simulateur #step1 .choix-couleur .color-foudre {
     background-color: #FFE800;
}
.simulateur #step1 .choix-couleur .color-volcan {
     background-color: #FF0000;
}
.simulateur #step1 .choix-couleur .color-jungle {
     background-color: #059D00;
}
.simulateur #step1 .choix-couleur .color-roi {
     background-color: #0026ff;
}
.simulateur #step1 .choix-couleur .color-eternel {
     background-color: #FFFFFF;
	border: 1px solid grey;
}
/*
** COULEURS
** PINK FLY
*/
.simulateur #step1 .choix-couleur .color-orange-jw45 {
    background-color: #fd6920;
}

.simulateur #step1 .choix-couleur .color-bleu-jw74 {
    background-color: #245a8b;
}

.simulateur #step1 .choix-couleur .color-blanc {
    background-color: #D9D9D9;
}

.simulateur #step1 .choix-couleur .color-gris-orage {
    background-color: #CCCCCC;
}

.simulateur #step1 .choix-couleur .color-noir-jw33 {
    background-color: #000000;
}

.simulateur #step1 .choix-couleur .color-noir,
.simulateur #step1 .choix-couleur .color-noirm,
.simulateur #step1 .choix-couleur .color-noirm {
    background-color: #2B3332;
}

.simulateur #step1 .choix-couleur .color-gris,
.simulateur #step1 .choix-couleur .color-grisorage,
.simulateur #step1 .choix-couleur .color-grisorage {
    background-color: grey;
}

.simulateur #step1 .choix-couleur .color-gris,
.simulateur #step1 .choix-couleur .color-grisanth-dh16 {
    background-color: grey;
}

.simulateur #step1 .choix-couleur .color-rouge-jw27 {
    background-color: #e7372d;
}

.simulateur #step1 .choix-couleur .color-rouge {
    background-color: #DF3421;
}

.simulateur #step1 .choix-couleur .color-vert-jw12 {
    background-color: #426024;
}

.simulateur #step1 .choix-couleur .color-diesel-mat,
.simulateur #step1 .choix-couleur .color-diesel-mat,
.simulateur #step1 .choix-couleur .color-bleud-dh28,
.simulateur #step1 .choix-couleur .color-bleud-dh28 {
    background-color: #2C4369;
}

.simulateur #step1 .choix-couleur .color-sable,
.simulateur #step1 .choix-couleur .color-sable-dh05 {
    background-color: #E7CFA1;
}

.simulateur .grey-bg {
    margin-top: 60px;
    background-color: #F7F7F8;
}

.simulateur #step3 {
    margin-top: 20px;
}

.simulateur #step3 .hide-products {
    display: none;
}

.simulateur #step3 .show-more-products {
    padding-top: 30px;
    text-transform: uppercase;
    color: #7E7E7E;
    font-size: 18px;
    text-align: center;
    text-decoration: underline;
    cursor: pointer;
}

.simulateur #step3 .show-more-products:hover {
    opacity: 0.8;
    text-decoration: none;
}

.simulateur #step3 .product-bloc {
    background-color: #ffffff;
    margin: 10px auto 10px;
    padding: 10px;
    cursor: pointer;
    position: relative;
    border-radius: 5px;
    border: 2px solid #ffffff;
}


.simulateur #step3 .product-bloc.selected {
    border: 2px solid #1D3054;
}

.simulateur #step3 .product-bloc .add-product {
    border: 2px solid #1D3054;
    color: #1D3054;
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    line-height: 24px;
    border-radius: 3px;
    text-align: center;
    font-size: 20px;
    background-color: #ffffff;
}

.simulateur #step3 .product-bloc.selected .add-product {
    color: #ffffff;
    background-color: #1D3054;
}

.simulateur #step3 .product-bloc .product-name {
    text-transform: uppercase;
    font-size: 16px;
    line-height: 18px;
    margin-bottom: 8px;
}

.simulateur #step3 .product-image {
    text-align: center;
}

.simulateur #step3 .product-image img {
    max-width: 100%;
    max-height: 200px;
}

.simulateur #step3 .prix {
    font-size: 22px;
    margin-bottom: 0px;
}

.simulateur #step3 .prix-ttc {
    font-size: 14px;
    margin-left: 12px;
}

.simulateur #step3,
.simulateur #step4 {
    margin-top: 80px;
}

.simulateur #step2 div.aide {
    text-align: center;
    margin-top: 20px;
    padding: 60px 20%;
    font-size: 20px;
    border-radius: 5px;
    min-height: 280px;
}

.simulateur #step2 div.aide.aide-tous {
    background: rgb(69, 216, 26);
    background: -moz-linear-gradient(180deg, rgba(69, 216, 26, 1) 0%, rgba(73, 186, 160, 1) 100%);
    background: -webkit-linear-gradient(180deg, rgba(69, 216, 26, 1) 0%, rgba(73, 186, 160, 1) 100%);
    background: linear-gradient(180deg, rgba(69, 216, 26, 1) 0%, rgba(73, 186, 160, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#45d81a", endColorstr="#49baa0", GradientType=1);
    color: #ffffff;
}

.simulateur #step2 div.aide.aide-pro-idf {
    background: rgb(61, 97, 129);
    background: -moz-linear-gradient(180deg, rgba(61, 97, 129, 1) 0%, rgba(19, 54, 86, 1) 100%);
    background: -webkit-linear-gradient(180deg, rgba(61, 97, 129, 1) 0%, rgba(19, 54, 86, 1) 100%);
    background: linear-gradient(180deg, rgba(61, 97, 129, 1) 0%, rgba(19, 54, 86, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#3d6181", endColorstr="#133656", GradientType=1);
    color: #ffffff;
    padding: 30px 20%;
}


.simulateur #step2 div.aide h4 {
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: 20px;
    font-size: 20px;
    line-height: 25px;
}


.simulateur label {
    width: 100%;
    font-weight: 800;
}

.simulateur input[type=text],
.simulateur input[type=password],
.simulateur input[type=tel],
.simulateur input[type=email],
.simulateur input.text,
.simulateur input.title,
.simulateur textarea,
.simulateur select {
    display: block;
    width: 100%;
    margin-bottom: 20px;
    border: 0;
    border-bottom: 1px solid #ADADAD;
    background-color: transparent;
    padding: 2px 0;
    min-height: 30px;
}

.simulateur #step4 {
    padding-bottom: 50px;
}

.simulateur #step4 .required-field {
    color: #ADADAD;
    font-weight: bold;
    margin: 20px 0 0;
}

.simulateur #step4 form {
    margin-top: 20px;
}

.simulateur #step4 .field_type {
    display: inline-block;
    width: auto;
    margin-right: 30px;
    margin-bottom: 20px;
}

.simulateur #step4 .business-fields {
    display: block;
}

.simulateur #step4 label {
    font-size: 15px;
}

.simulateur #step4 .error_detail {
    font-size: 14px;
    color: #e7372d;
    font-weight: 400;
}

.simulateur #step4 .error_detail {
    font-size: 14px;
    color: #e7372d;
    font-weight: 400;
    float: right;
}

.simulateur #step4 label.error {
    color: #e7372d;
}

.simulateur #step4 .waiting-message-block {
    height: 30px;
    text-align: right;
    margin-top: 10px;
}

.simulateur #step4 .waiting-message {
    display: none;
}