/**
* 2007-2022 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to license@prestashop.com so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
*  @author    PrestaShop SA <contact@prestashop.com>
*  @copyright 2007-2022 PrestaShop SA
*  @license   http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*
* Don't forget to prefix your containers with your own identifier
* to avoid any conflicts with others containers.
*/
.changesim-page {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.changesim-form {
    /*border: 1px solid #d1cfcf;*/
    /*padding: 15px 50px;*/
    /*border-radius: 20px;*/
    width: 100%;
}
.changesim-form .form-control-label {
    color: #263238;
    font-size: 16px;
    font-weight: 600;
}


.changesim-form #steps-ul {
    display: flex;
    list-style: none;
    flex-direction: row;
    padding-left: 0;
    margin-top: 0;
    justify-content: center;
    border-bottom: 1px solid #d1cfcf;
    margin-bottom: 50px;

}
#steps-ul .nav-item {
    text-align: center;
    margin-bottom: 10px;
}
#steps-ul .nav-item .nav-link {
    padding: 10px 40px;
}

#steps-ul .nav-item .nav-link .dot  {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 39px;
    text-align: center;
    border-radius: 50%;
    background-color: #d1d3e2;
    color: #fff;
    font-size: 20px;
}
#steps-ul .nav-item .active .dot {
    background-color: #ed1c24;
}


#steps-ul .nav-item .nav-link .label {
    display: block;
    font: normal normal bold 16px Nunito;
    letter-spacing: 0px;
    color: #263238;
}
#steps-ul .nav-item .active .label {
    color: #ed1c24;
}

.label-condition {
    text-align: left;
    display: initial;
}

/*.changesim-form input[type="number"]   {*/
/*    height: unset;*/
/*}*/
.changesim-form .changesim-submit-button {
    padding: 20px 80px;
    border-radius: 50px;
}
.changesim-form  .info-txt  {
    color: #ed1c24;
    text-align: center;
    font-weight: 700;
}

.changesim-form .info-txt-left {
    text-align: left;
}

.changesim-form .modal-compatible-link {
    text-decoration: underline;
    color: #00baf2;
}
.changesim-form .form-control {
    height: 50px !important;
}

.modalCompatibleDevices .modal-dialog {
    margin-top: 0;
    margin-bottom: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.modalCompatibleDevices.fade {
    opacity: 1 !important;
}
.modalCompatibleDevices.modal.fade .modal-dialog {
    transform: translate(0, -100%);
}

.modalCompatibleDevices.modal.in .modal-dialog {
    transform: translate(0, 0);
}
.modalCompatibleDevices .modal-header {
    padding: 5px 15px;
    border-bottom: none;
}
.modalCompatibleDevices .modal-content {
    border: none;
    border-radius: 10px;
}
.modalCompatibleDevices .modal-footer {
    border: none;
    border: none;
}
.modalCompatibleDevices button.close {
    opacity: 1;
    position: relative;
    top: 0.5rem;
    right: 0.5rem;
    background: none;
    padding: 0;
}
.modalCompatibleDevices .modal-body {
    padding: 10px 35px 60px 35px;
}
.modalCompatibleDevices .modal-body h1 {
    text-align: center;
    letter-spacing: 0px;
    color: #ed1c24;
    font-size: 22px !important;
    font-family: "Nunito";
    font-weight: 800;
    margin-bottom: 10px;
}
.modalCompatibleDevices .modal-body p {
    text-align: center;
    color: #B0B0B0;
    font-family: "Nunito";
    font-weight: 600;
    margin-top: 2rem;
}

.modalCompatibleDevices .information-modal-div {
    display: block;
    margin-bottom: 25px;
}
.modalCompatibleDevices .information-modal-div span {
    display: block;
    text-align: center;
}

.modalCompatibleDevices  .form-control-label {
    padding-top: 0.625rem;
    color: #263238;
    font-size: 16px;
    font-weight: 800;
}
.modalCompatibleDevices  .phone-type {
    text-align: center;
    letter-spacing: 0px;
    color: #263238;
    font-size: 20px !important;
    font-family: "Nunito";
    font-weight: 700;
    padding: 30px;
    margin: 40px 40px 0px 40px;
    background: #FAFAFA;
    border: 3px solid #1F8F13;
    border-radius: 10px;
    background: #1F8F131A 0% 0% no-repeat padding-box;
}

.modalCompatibleDevices  .phone-type-content {
    text-align: center;
    letter-spacing: 0px;
    color: #263238;
    font-size: 20px !important;
    font-family: "Nunito";
    font-weight: 700;
    padding: 30px;
    margin: 40px 100px 0px 100px;
    background: #FAFAFA;
    border: 3px solid #E4E8E4;
    border-radius: 10px;
}


.select-devices .form-control {
    padding: 2px;
    font-size: 13px;
}
.select-devices .form-control:focus {
    border: solid 1px #ed1c24;
    color: #333333;
}

/*.select-devices::before {*/
/*    content: '';*/
/*    display: block;*/
/*    border: 15px solid transparent;*/
/*    border-top-color: #ed1b24;*/
/*    position: absolute;*/
/*    right: 17px;*/
/*    top: calc(75% - 2px);*/
/*}*/
.confirmation-page h1  {
    padding: 45px 0px 0px 0px;
    font-size: 26px !important;
    text-decoration: underline;
    /* border-bottom: 1px solid black; */
    text-underline-offset: 15px;
    text-transform: uppercase;
}
.confirmation-page .info-order {
    background-color: #FAFAFA;
    padding: 45px;
}

.confirmation-page .btn-primary {
    border-radius: 25px;
    padding: 10px 50px;
}



#change-sim-loader, #change-sim-code-loader {
    display: none;
}
#OtpCheckModal .modal-info-text {
    color: #ED1C24;
    margin-top: 1px;
}
#OtpCheckModal .info-text {
margin-top: 0px;
    padding-left: 10px;
    padding-top: 10px;
}
    /*float: left;*/
#OtpCheckModal .resend-sms {
    background: transparent;
    border: none;
    padding: 15px 0px;
    text-decoration: underline;
    color: #039BE2;

}
#OtpCheckModal .fa-check:before {

}

#OtpCheckModal .resend-sms:not([disabled]):hover {
    color: #ed1c24;
}

#OtpCheckModal .resend-sms:disabled,
#OtpCheckModal .resend-sms[disabled]{
cursor: not-allowed;
}


.is-invalid {
    border: solid 1px red !important;
}
.invalid-feedback {
    display: block;
    font-size: 13px;
    color: red;
}

@media (max-width: 767px) {
    .changesim-form .label-condition  {
        font-size: 15px;
    }
    .changesim-form .changesim-submit-button {
        padding: 15px 70px;
    }

}

.changesim-title  {
    margin-bottom: 40px;
    text-align: center;
    margin-top: 25px;
}
 .changesim-info {
    margin-bottom: 50px;
}
.changesim-info p, .confirmation-page p {
    font-family: "Nunito", sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #000;
    margin-bottom: 5px;
    font-weight: 600;
}

  .changesim-form-title {
    text-align: left;
}
.info-esim-left-bloc {
    padding: 40px 0px 0px 15px;
}
  .changesim-form-subtitle {
      text-align: center;
    margin-bottom: 10px;
      font-family: "Nunito", sans-serif;
      font-size: 16px;
      line-height: 1.5;
      color: #000;
      font-weight: 700;
}
.confirmation-page {
    text-align: center;
}
.recap-conf {
    color: #ed1c24;
}
.bloc-img-esim {
    text-align: center;
}
.fail-page {
    text-align: center;
}


/***** update design for changesim ****/
.steps_div {
    padding: 30px 0px;
    background-color: #eaeaea;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
}


.vcv-steps {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 500px;
    margin: 0 auto;
    padding: 0;
    list-style-type: none;
    color: #a7a7a7;
}
.vcv-steps-item {
    display: flex;
    align-items: center;
    flex: 1 0 auto;
    padding: 0;
}
.vcv-steps-item::before,
.vcv-steps-item::after {
    content: '';
}

.vcv-step-title {
    min-width: 135px;
    font: normal normal bold 16px Nunito;
    font-family: "Nunito", sans-serif;
}
.vcv-steps-item::before {
    content: attr(data-step);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 32px;
    height: 32px;
    margin: 0 10px 0 0;
    border-radius: 50%;
    border: 2px solid #a7a7a7;
    color: #a7a7a7;
}
.vcv-steps-item::after {
    height: 2px;
    background: #a7a7a7;
    width: 100%;
    margin: 0 25px;
}
.vcv-steps-item:last-of-type {
    flex: 0 0 120px;
}
.vcv-steps-item:last-of-type::after {
    display: none;
}
.vcv-steps-item.vcv-step-active .vcv-step-title {
    color: #ed1c24;
}
.vcv-steps-item.vcv-step-active::before {
    /*content: '';*/
    color: #ed1c24;
    border-color: #ed1c24;
    background: #d5242b61;
    background-size: 40%;
}
.vcv-steps-item.vcv-step-active::after {
    background: #ed1c24;
}
.vcv-steps-item.vcv-step-done .vcv-step-title {
    color: #008000;
}
.vcv-steps-item.vcv-step-done::before {
    content: '';
    border-color: #008000;
    background: #51bf51a8 url("data:image/svg+xml,%0A%3Csvg width='14px' height='11px' viewBox='0 0 14 11' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Activation-Theme-to-Premium' transform='translate(-827.000000, -183.000000)' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cg id='Activation-02' transform='translate(342.000000, 172.000000)'%3E%3Cg id='Navigation' transform='translate(44.000000, 0.000000)'%3E%3Cg id='check' transform='translate(441.000000, 11.000000)'%3E%3Cpolygon id='Path' points='11.8606017 0 4.86058121 6.82615443 2.13952103 4.17292819 0 6.25973131 4.8606221 11 14 2.08684301'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center;
    background-size: 40%;
}
.vcv-steps-item.vcv-step-done::after {
    background: #008000;
}
@media screen and (max-width: 768px) {
    .vcv-steps{
        margin-bottom: 50px;
    }
    .vcv-steps-item {
        position: relative;
    }
    .vcv-steps-item span {
        text-align: left;
        margin: 10px 0 0;
        position: absolute;
        top: 30px;
        width: 100%;
        left: 2px;
    }
    .vcv-steps-item:last-of-type {
        flex: 0 0 auto;
        margin: 0 30px 0 0;
    }
    .vcv-steps-item::before {
        margin: 0;
    }
    .vcv-steps-item::after {
        flex: 0 1 auto;
    }
}

.div-form {
    padding: 30px 30px;
    background-color: #eaeaea2b;
}
#OtpCheckModal .code-block {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 1px 11px 14px #00000017;
    border-radius: 10px;
    padding: 30px;
    margin: 0px 50px;
}
#OtpCheckModal #changesim-code {
    background: #F2F2F2 0% 0% no-repeat padding-box;
    text-align: center;
    font-size: 16px;
    height: 65px !important;
    border: none;
}


#OtpCheckModal  .info-text-block {
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (max-width: 575px) {
    .modalCompatibleDevices .modal-body {
        padding: 15px;
    }
    .modalCompatibleDevices .phone-type-content , .modalCompatibleDevices .phone-type {
        margin: 30px 10px;
    }
    #module-changesim-changesim .card-block ,  #module-changesim-confirmation .card-block{
        padding: 0px !important;
    }
    .vcv-steps {
        max-width: 220px;
    }
    .vcv-steps-item span {
        left: -30px;
    }
   .changesim-form .row-form-mobile  {
       display: flex;
       flex-direction: column-reverse;
   }
    .row-form-mobile  .resp-img {
        margin-top: 30px;
        width: 50%;
    }
    .confirmation-page  .resp-img   {
        width: 50%;
    }
    #changesimform .text-left {
        text-align: center !important;
    }
    #OtpCheckModal .info-text-block {
        flex-direction: column;
    }
    #OtpCheckModal .code-block {
        margin: 0px;
    }
}

@media (min-width: 576px) {
    .changesim-form .resp-img {
        width: 56%;
    }

}

.tooltip-info {
    position: relative;
    display: inline-block;
    color: #ed1c24;
}

.tooltip-info .tooltiptext {
    visibility: hidden;
    width: 200px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 150%;
    left: 50%;
    margin-left: -60px;
}
.tooltip-info .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}
.tooltip-info:hover .tooltiptext {
    visibility: visible;
}
.modalCompatibleDevices .modal-content {
    margin-top: 70px;
}