html {
    height: 100%;
}

body {
    font-family: sans-serif;
    background: rgb(31, 31, 31);
    height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
    line-height: 1.42857143; /*added */
}

.container {
    text-align: center;
    /* width: 350px; */
    font-size: 16px;
    margin: 0 auto;
    padding: 2px;
}

.rtl-text .instructions,
.rtl-text .pin_instruction,
.rtl-text .disclaimer-text {
    direction: rtl;
    text-align: right;
}

.small {
    font-size: 10px;
    letter-spacing: -0.7px;
    text-align: center;
    color: #747474;
}

.topImg {
    width: 100%;
    max-width: 100%;
    z-index: 1;
}

/* .topImg2 {
    margin: -300px;
    width: 20%;
    max-width: 70%;
    align-items: center;
    z-index: 2;
  } */
.terms {
    font-size: 0.9em;
    letter-spacing: -0.7px;
    text-align: center;
    color: white;
}

.terms ul {
    list-style: circle inside;
    padding: 0;
    margin: 0;
}

.terms .small {
    margin-top: 500px;
    font-size: 12px !important;
    letter-spacing: -0.7px;
    text-align: center;
    /* color: rgb(255, 255, 255); */
}

.formHolder {
    background: transparent;
    padding: 0;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#eeeeee', GradientType=0);
    text-align: center;
    padding: 15px;
    color: #333;
    border-radius: 10px;
    width: 100%;
    box-sizing: border-box;
}

.right {

    width: 90%;
    font-size: 1em;
    line-height: 12px;
    border: 1px solid grey;


}

.formHolder input {
    /*padding: 15px 20px 10px 40px*/
}

.invisible {
    visibility: visible !important;
    display: none !important;
}

#header_enrichment_form,
.pin,
.loadingCard,
.pinText,
.somethingWrong,
.hidden,
.thankyou,
.inValidPhone,
.inValidPin,
.block,
.user_exist_form,
.error,
.MoMessage,
.user_exist_message_sent,
.redirectCard,
.corporate_number,
.not_enough_credit,
.something_went_wrong {
    display: none;
    font-weight: bold;
}

.validationCorrect input#mobile {
    border: green 2px solid;
    color: green;
}

#mobile {
    font-weight: 700;
    font-size: 22px !important;
    padding: 12px 20px 10px 100px;
}

/*#pin {*/
/*    font-weight: 700;*/
/*    padding: 15px 20px 10px 140px;*/
/*}*/

.validationError input#mobile {
    border: crimson 2px solid;
    color: red;
}

.imgDiv img {
    width: 100%;
    height: auto;
}

/* Fullwidth Body Layout */
body.fullwidth .container {
    width: 100%;
    padding: 0;
}

body.fullwidth .imageContainer {
    text-align: center;
}

body.fullwidth .formHolder {
    border-radius: 0;
}

body.fullwidth .terms,
body.fullwidth form,
body.fullwidth .loadingCard,
body.fullwidth img.topImg {
    width: 320px;
    margin: 0 auto;
}

body.fullwidth.prelander {
    width: 300px;
    max-width: 100%;
    margin: 0 auto;
}

/* Blue Body Layout */
body.blue {
    background-color: #019ee9;
}

body.blue .formHolder {
    background: #224687;
    color: white;
}

body.blue input {
    color: #333;
}

body.blue .loadingCard,
body.blue .invalidPin {
    color: white;
}

body.blue .button {
    background: rgb(245, 214, 58);
    background: -moz-linear-gradient(top, rgba(245, 214, 58, 1) 0%, rgba(247, 175, 59, 1) 50%, rgba(245, 214, 58, 1) 100%);
    background: -webkit-linear-gradient(top, rgba(245, 214, 58, 1) 0%, rgba(247, 175, 59, 1) 50%, rgba(245, 214, 58, 1) 100%);
    background: linear-gradient(to bottom, rgba(245, 214, 58, 1) 0%, rgba(247, 175, 59, 1) 50%, rgba(245, 214, 58, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5d63a', endColorstr='#f5d63a', GradientType=0);
}

/* Progress Bar CSS */
@-webkit-keyframes progress-bar-stripes {
    from {
        background-position: 40px 0;
    }

    to {
        background-position: 0 0;
    }
}

@keyframes progress-bar-stripes {
    from {
        background-position: 40px 0;
    }

    to {
        background-position: 0 0;
    }
}

.progress {
    height: 20px;
    margin-bottom: 20px;
    overflow: hidden;
    background-color: #f5f5f5;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
}

.progress-bar-striped,
.progress-striped .progress-bar {
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    -webkit-background-size: 40px 40px;
    background-size: 40px 40px;
}

.progress-bar {
    float: left;
    width: 0;
    height: 100%;
    font-size: 12px;
    line-height: 20px;
    color: #fff;
    text-align: center;
    background-color: #337ab7;
    -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
    -webkit-transition: width .6s ease;
    -o-transition: width .6s ease;
    transition: width .6s ease;
}

.progress-bar.active,
.progress.active .progress-bar {
    -webkit-animation: progress-bar-stripes 2s linear infinite;
    -o-animation: progress-bar-stripes 2s linear infinite;
    animation: progress-bar-stripes 2s linear infinite;
}

.bg-success {
    background-color: #28a745 !important;
}

.imgDiv {
    width: 45%;
    display: inline-block;
}

.imgDiv a {
    display: inline-block;
}

.imgDiv a img {
    width: 100%;
}

body.prelander .terms {
    display: none;
}

.top-text {
    /* margin-bottom: 10px; */
    font-weight: bold;
    /* font-size: 10px; */
}

.bottom-text {
    font-size: 10px;
    letter-spacing: -0.7px;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 0px;
    /* font-weight: bold; */
    color: #727272;
}

.steps-en {
    text-align: left;
    direction: ltr;
}

.disclaimer-text {
    margin: 50px auto 0 auto;
    font-size: 13px;
    letter-spacing: -0.5px;
    color: #bebebe;
    max-width: 1000px;
    width: 100%;
}

.bullet-text-ar {
    margin: 0;
    direction: rtl;
    text-align: right;
    padding-right: 14px;
}

.bullet-text-en {
    margin: 0;
    padding-left: 14px;
}

.disclaimer-ar {
    direction: rtl;
    text-align: right;
}

.disclaimer-en {
    direction: ltr;
    text-align: left;
}

.second-text {
    margin-bottom: 30px;
}

.formHolder {
    background: transparent;
    padding: 0;
}

.imageContainer {
    text-align: center;
}

.topImg {
    width: 100%;
}

#msisdn_form {
    color: rgb(0, 0, 0);
    font-size: 20px;
}

input {
    color: #333;
    border-radius: 5px;
}

.input-icons i {
    position: absolute;
    margin-top: -5px;
    /* margin-left: -5px;  */
}

.input-icons {
    width: 100%;
    margin-bottom: 0px;

}

.icon {
    padding: 10px;
    min-width: 0px;
}

input.disabled {
    background-color: rgb(224, 216, 216);
}

.jumboBg {
    background-repeat: no-repeat;
}

.thankyou {
    color: #000000;
    padding: 4%;
    font-weight: bold;
    font-size: 110%;
}

.error {
    color: red;
    padding: 4%;
}

.block {
    font-weight: bold;
    font-size: 110%;
    color: red;
    padding: 4%;
}

.inValidPhone {
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
    margin-top: 10px;
}

.translation-button {
    text-align: left;
    max-width: 1035px;
    margin: auto;
    padding-left: 10px;
}

.inner-container {
    width: 400px;
    background: rgb(233, 234, 238);
    padding: 1%;
    border-radius: 15px;
    position: absolute;
    top: -100%;
    text-align: center;
    left: 0;
    right: 0;
    margin: auto;
    margin-top: 80px;
    z-index: 6;
    animation: fadeInFromTop 2s ease 2s forwards;
}

.player-container {
    max-width: 1035px;
    width: 100%;
    /*height: 560.19;*/
    background-color: #000000;
    overflow: hidden;
    position: relative;
    margin: auto;
    margin-top: 25px;
}

.exit-button {
    margin: 10px;
    font-size: 15px;
    text-decoration-line: underline;
    color: #292929;
    cursor: pointer;
}

.left-side-player {
    margin-left: 2px;
    float: left;
    position: relative;
    z-index: 15;
}

.right-side-player {
    float: right;
    position: relative;
    z-index: 15;
}

.player-background-img {
    opacity: 0;
    /* Define animation properties: name, duration, timing function, and delay */
    animation: fadeIn 2s ease 1s forwards;
    z-index: 5;
    /* visibility: hidden; */
    display: block;
    width: 100%;
    margin: 0;
}

.steps-text {
    margin-left: 15px;
    margin-right: 30px;
    margin-bottom: 15px;
    /* text-align: right; */
}

.steps-text p {
    margin: 0;
}

.video-bar {
    position: relative;
    /* top: -11px; */
    display: block;
    overflow: hidden;
    min-height: 30px;
    margin: 0 auto;
}

.video-progress-bar {
    margin-top: 2px;
    position: absolute;
    top: 5px;
    left: 8px;
    /* z-index: 11; */
    max-width: 1024px;
    width: 100%;
    background-color: transparent;
    direction: ltr;
    background-color: #131313;
}

.inner-bar {
    width: 1%;
    height: 3px;
    background-color: #777777;

}

.clickable {
    cursor: pointer;
}

.under_line {
    margin-top: 15px;
    text-decoration: underline;
    font-size: x-small;
}

.player-disclaimer {
    font-size: small;
    color: rgb(180, 176, 167);
    position: absolute;
    text-align: center;
    left: 0;
    right: 0;
    margin: auto;
    margin-top: 400px;
    z-index: 10;
    width: 350px;
}

.prefix-input-wraper:before {
    position: absolute;
    padding: 0 10px 0 25px;
    /* border-right: 1px solid #bbb; */
    font-size: inherit;
    color: #000;
    transform: translateY(-50%);
    /* top: 50 */
    margin-top: 25px;
    margin-left: 17px;
    -webkit-transform: translateY(-50%);
    content: "(974)";
    z-index: 1;
    font-size: 22px !important;
    font-family: 'Roboto', sans-serif !important;
    font-weight: bold !important;
}

.price-text {
    font-size: 14px !important;
    font-weight: bold !important;
    color: #414141;
    letter-spacing: -0.2px;
    margin: 14px auto;
}

@media only screen and (max-width: 992px) {
    .inner-container {
        margin-top: 40px;
    }
}

@media only screen and (max-width: 700px) {
    .player-container {
        /* height: 600px; */
    }

    .player-background-img {
        height: 380px;
        object-fit: cover;
        margin-top: 25px;
    }

    .inner-container {
        margin-top: 35px;
        width: 300px;
        padding: 2.5%;
    }

    .steps-text {
        margin-right: 15px;
        margin-bottom: 15px;
        font-size: 16px;
        font-weight: bold;
    }

    .player-disclaimer {
        margin-top: 350px;
        font-size: x-small;
    }

    .inValidPhone,
    .inValidPin {
        font-size: 15px;
    }

    /*#pin {*/
    /*    font-weight: 700;*/
    /*    padding: 15px 20px 10px 90px;*/
    /*}*/
}

@keyframes fadeIn {

    /* At 0% keyframe (start of animation), set opacity to 0 (transparent) */
    0% {
        opacity: 0;
    }

    /* At 100% keyframe (end of animation), set opacity to 1 (fully opaque) */
    100% {
        opacity: 1;
    }
}

@keyframes fadeInFromTop {
    0% {
        top: -100%;
        /* At 0% keyframe (start of animation), set the top position to hide it */
    }

    100% {
        top: 0;
        /* At 100% keyframe (end of animation), set the top position to reveal it */
    }
}


.shakeMe {
    animation: shake 0.83s cubic-bezier(.36, .07, .19, .97);
    -webkit-animation: shake 0.83s cubic-bezier(.36, .07, .19, .97);
    -moz-animation: shake 0.83s cubic-bezier(.36, .07, .19, .97);
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000;
}

@keyframes shake {

    10%,
    90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%,
    80% {
        transform: translate3d(2px, 0, 0);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%,
    60% {
        transform: translate3d(4px, 0, 0);
    }
}

@-webkit-keyframes shake {

    10%,
    90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%,
    80% {
        transform: translate3d(2px, 0, 0);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%,
    60% {
        transform: translate3d(4px, 0, 0);
    }
}

@-moz-keyframes shake {

    10%,
    90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%,
    80% {
        transform: translate3d(2px, 0, 0);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%,
    60% {
        transform: translate3d(4px, 0, 0);
    }
}

@-o-keyframes shake {

    10%,
    90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%,
    80% {
        transform: translate3d(2px, 0, 0);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%,
    60% {
        transform: translate3d(4px, 0, 0);
    }
}

.pulseButton {
    animation: 1.5s ease 0s normal none infinite running pulse;
    -moz-animation: 1.5s ease 0s normal none infinite running pulse;
    -webkit-animation: 1.5s ease 0s normal none infinite running pulse;
    -o-animation: 1.5s ease 0s normal none infinite running pulse;
    display: block;
    position: relative;
    text-decoration: none;
    background: #0174d2 !important;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0174d2', endColorstr='#0174d2', GradientType=0);
}

@keyframes pulse {
    0% {
        transform: scale(0.95);
    }

    60% {
        transform: scale(1);
    }

    80% {
        transform: scale(1);
    }

    100% {
        transform: scale(0.95);
    }
}

@-moz-keyframes pulse {
    0% {
        transform: scale(0.95);
    }

    60% {

        transform: scale(1);
    }

    80% {
        transform: scale(1);
    }

    100% {
        transform: scale(0.95);
    }
}

@-webkit-keyframes pulse {
    0% {
        transform: scale(0.95);
    }

    60% {

        transform: scale(1);
    }

    80% {
        transform: scale(1);
    }

    100% {
        transform: scale(0.95);
    }
}

@-o-keyframes pulse {
    0% {
        transform: scale(0.95);
    }

    60% {

        transform: scale(1);
    }

    80% {
        transform: scale(1);
    }

    100% {
        transform: scale(0.95);
    }
}

.border {
    animation: 1.5s ease 0s normal none infinite running theBorder;
    -moz-animation: 1.5s ease 0s normal none infinite running theBorder;
    -webkit-animation: 1.5s ease 0s normal none infinite running theBorder;
    -o-animation: 1.5s ease 0s normal none infinite running theBorder;
}

@keyframes theBorder {
    0% {
        -webkit-box-shadow: 0px 0px 0px 1px rgba(255, 0, 0, 1);
        -moz-box-shadow: 0px 0px 0px 1px rgba(255, 0, 0, 1);
        box-shadow: 0px 0px 0px 1px rgba(255, 0, 0, 1);

    }

    60% {
        -webkit-box-shadow: 0px 0px 4px 5px rgba(255, 0, 0, 1);
        -moz-box-shadow: 0px 0px 4px 5px rgba(255, 0, 0, 1);
        box-shadow: 0px 0px 4px 5px rgba(255, 0, 0, 1);
    }

    100% {
        -webkit-box-shadow: 0px 0px 0px 1px rgba(255, 0, 0, 1);
        -moz-box-shadow: 0px 0px 0px 1px rgba(255, 0, 0, 1);
        box-shadow: 0px 0px 0px 1px rgba(255, 0, 0, 1);
    }
}

@-moz-keyframes theBorder {
    0% {
        -webkit-box-shadow: 0px 0px 0px 1px rgba(255, 0, 0, 1);
        -moz-box-shadow: 0px 0px 0px 1px rgba(255, 0, 0, 1);
        box-shadow: 0px 0px 0px 1px rgba(255, 0, 0, 1);

    }

    60% {
        -webkit-box-shadow: 0px 0px 4px 5px rgba(255, 0, 0, 1);
        -moz-box-shadow: 0px 0px 4px 5px rgba(255, 0, 0, 1);
        box-shadow: 0px 0px 4px 5px rgba(255, 0, 0, 1);
    }

    100% {
        -webkit-box-shadow: 0px 0px 0px 1px rgba(255, 0, 0, 1);
        -moz-box-shadow: 0px 0px 0px 1px rgba(255, 0, 0, 1);
        box-shadow: 0px 0px 0px 1px rgba(255, 0, 0, 1);
    }
}

@-webkit-keyframes theBorder {
    0% {
        -webkit-box-shadow: 0px 0px 0px 1px rgba(255, 0, 0, 1);
        -moz-box-shadow: 0px 0px 0px 1px rgba(255, 0, 0, 1);
        box-shadow: 0px 0px 0px 1px rgba(255, 0, 0, 1);

    }

    60% {
        -webkit-box-shadow: 0px 0px 4px 5px rgba(255, 0, 0, 1);
        -moz-box-shadow: 0px 0px 4px 5px rgba(255, 0, 0, 1);
        box-shadow: 0px 0px 4px 5px rgba(255, 0, 0, 1);
    }

    100% {
        -webkit-box-shadow: 0px 0px 0px 1px rgba(255, 0, 0, 1);
        -moz-box-shadow: 0px 0px 0px 1px rgba(255, 0, 0, 1);
        box-shadow: 0px 0px 0px 1px rgba(255, 0, 0, 1);
    }
}

@-o-keyframes theBorder {
    0% {
        -webkit-box-shadow: 0px 0px 0px 1px rgba(255, 0, 0, 1);
        -moz-box-shadow: 0px 0px 0px 1px rgba(255, 0, 0, 1);
        box-shadow: 0px 0px 0px 1px rgba(255, 0, 0, 1);

    }

    60% {
        -webkit-box-shadow: 0px 0px 4px 5px rgba(255, 0, 0, 1);
        -moz-box-shadow: 0px 0px 4px 5px rgba(255, 0, 0, 1);
        box-shadow: 0px 0px 4px 5px rgba(255, 0, 0, 1);
    }

    100% {
        -webkit-box-shadow: 0px 0px 0px 1px rgba(255, 0, 0, 1);
        -moz-box-shadow: 0px 0px 0px 1px rgba(255, 0, 0, 1);
        box-shadow: 0px 0px 0px 1px rgba(255, 0, 0, 1);
    }
}

/* ADDED */

.langBtn {
    text-decoration: none;
    color: #333;
    background: white;
    padding: 6px 14px;
    padding-inline: 6px;
    border-width: 2px;
}

.phone-input {
    width: 90%;
    height: 50px;
    margin: 0px auto;
    background: white;
    background-size: 40px auto;
    border-radius: 5px;
    display: flex;
    align-items: center;
    direction: ltr;
    line-height: 12px;
    border: 1px solid grey;
}

.phone-input .phone {
    background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDI3LjQ0MiAyNy40NDIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDI3LjQ0MiAyNy40NDI7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiPgo8Zz4KCTxwYXRoIGQ9Ik0xOS40OTQsMEg3Ljk0OEM2Ljg0MywwLDUuOTUxLDAuODk2LDUuOTUxLDEuOTk5djIzLjQ0NmMwLDEuMTAyLDAuODkyLDEuOTk3LDEuOTk3LDEuOTk3aDExLjU0NiAgIGMxLjEwMywwLDEuOTk3LTAuODk1LDEuOTk3LTEuOTk3VjEuOTk5QzIxLjQ5MSwwLjg5NiwyMC41OTcsMCwxOS40OTQsMHogTTEwLjg3MiwxLjIxNGg1LjdjMC4xNDQsMCwwLjI2MSwwLjIxNSwwLjI2MSwwLjQ4MSAgIHMtMC4xMTcsMC40ODItMC4yNjEsMC40ODJoLTUuN2MtMC4xNDUsMC0wLjI2LTAuMjE2LTAuMjYtMC40ODJDMTAuNjEyLDEuNDI5LDEwLjcyNywxLjIxNCwxMC44NzIsMS4yMTR6IE0xMy43MjIsMjUuNDY5ICAgYy0wLjcwMywwLTEuMjc1LTAuNTcyLTEuMjc1LTEuMjc2czAuNTcyLTEuMjc0LDEuMjc1LTEuMjc0YzAuNzAxLDAsMS4yNzMsMC41NywxLjI3MywxLjI3NFMxNC40MjMsMjUuNDY5LDEzLjcyMiwyNS40Njl6ICAgIE0xOS45OTUsMjEuMUg3LjQ0OFYzLjM3M2gxMi41NDdWMjEuMXoiIGZpbGw9IiMwMDAwMDAiLz4KCTxnPgoJPC9nPgoJPGc+Cgk8L2c+Cgk8Zz4KCTwvZz4KCTxnPgoJPC9nPgoJPGc+Cgk8L2c+Cgk8Zz4KCTwvZz4KCTxnPgoJPC9nPgoJPGc+Cgk8L2c+Cgk8Zz4KCTwvZz4KCTxnPgoJPC9nPgoJPGc+Cgk8L2c+Cgk8Zz4KCTwvZz4KCTxnPgoJPC9nPgoJPGc+Cgk8L2c+Cgk8Zz4KCTwvZz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K);
    width: 50px;
    height: 50px;
    background-position: center;
    background-size: 70%;
    background-repeat: no-repeat;
    background-color: rgba(0, 0, 0, 0);
}

/*.prefixCode {*/
/*    outline: none;*/
/*    font-size: 2.6ch;*/
/*    background-color: rgba(0, 0, 0, 0);*/
/*    font-family: arial;*/
/*    color: #000;*/
/*}*/
.prefixCode {
    outline: none;
    background-color: rgba(0, 0, 0, 0);
    font-family: arial;
    color: #000;
    font-size: 22px !important;
    font-weight: bold;
    bottom: 1px; /*added*/
    position: relative;
}

.phone-input .checkmark-container {
    margin-left: .5rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.instructions {
    margin-left: 15px;
    margin-right: 30px;
    margin-bottom: 15px;
    text-align: left;
    direction: ltr;
    color: black;
    font-size: 20px;
}

.instructions p {
    margin: 0 !important;
}

.pin_instruction{
    margin-left: 15px;
    margin-right: 30px;
    margin-bottom: 15px;
    text-align: left;
    direction: ltr;
    color: black;
    font-size: 20px;
}

@media only screen and (max-width: 768px) {
    .instructions {
        font-size: 16px !important;
        font-weight: bold;
    }
}


.msisdn{
    width: 65%;
    outline: none;
    border: none;
    background-color: rgba(0, 0, 0, 0);
    font-family: arial;
    color: #333;
    font-size: 22px !important;
    font-weight: bold;
}

.msisdn::placeholder {
    /*font-size: 1.4ch*/
    letter-spacing: 6px; 
    font-size: 13px; 
    font-weight: 700;
}


.msisdn:not(.pin) {
    /*margin-left: 10px;*/
}

.pin {
    width: 90%;
    height: 50px;
    margin: 0px auto;
    background: white;
    background-size: 40px auto;
    border-radius: 5px;
    display: flex;
    align-items: center;
    direction: ltr;
    line-height: 12px;
    border: 1px solid grey;
    text-align: center;
}

.pin::placeholder {
    font-size: 2ch;
}

.animate,
.is-valid.button span {
	animation: heartbeat 1.5s ease-in-out infinite both;
}

/*.button{*/
/*    cursor: pointer;*/
/*    position: relative;*/
/*    outline: none;*/
/*    border: none;*/
/*    background: #E6E6E6;*/
/*    height: 51px;*/
/*    text-align: center;*/
/*    border-left: 2px solid #B1B1B1;*/
/*    border-radius: 0 16px 16px 0;*/
/*    display: flex;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*    color: #087AF4;*/
/*    padding-left: 30px;*/
/*    font-family: 'Roboto';*/
/*    font-size: 22px;*/
/*    font-weight: 700;*/
/*    line-height: normal;*/
/*}*/
.button {
    background: #b3b3b3;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8b8b8b', endColorstr='#8b8b8b', GradientType=0);
    color: rgb(255, 255, 255);
    width: 100%;
    padding: 15px 0;
    margin: 15px 0 0;
    border: none;
    font-size: 1.2em;
    border: 4px solid #d1d7e4;
    border-radius: 15px;
    height: 72px;
}

.submit-animation {
    animation: highlight_animation_scale 2s infinite;
    background: #36c355;
    color: white;
    border: 1px solid #d1d1d6;
}

.main_instruction {
    width: 100%;
    padding: 5px;
    margin-block: 5px;
    font-size: 12px;
}

.pin-animation {
    animation: highlight_animation_horizontal 2s infinite;
}

.formElm {
    position: relative;
    display: inline;
}

.formElm::after {
    content: '';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Ccircle cx='256' cy='256' r='256' fill='%2334c759'/%3E%3Cpath d='M378 170L221 327l-87-87' fill='none' stroke='%23fff' stroke-width='40' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.formElm.valid::after {
    opacity: 1;
}

input::placeholder{
    color: black !important;
}

.phone-img{
    background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDI3LjQ0MiAyNy40NDIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDI3LjQ0MiAyNy40NDI7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiPgo8Zz4KCTxwYXRoIGQ9Ik0xOS40OTQsMEg3Ljk0OEM2Ljg0MywwLDUuOTUxLDAuODk2LDUuOTUxLDEuOTk5djIzLjQ0NmMwLDEuMTAyLDAuODkyLDEuOTk3LDEuOTk3LDEuOTk3aDExLjU0NiAgIGMxLjEwMywwLDEuOTk3LTAuODk1LDEuOTk3LTEuOTk3VjEuOTk5QzIxLjQ5MSwwLjg5NiwyMC41OTcsMCwxOS40OTQsMHogTTEwLjg3MiwxLjIxNGg1LjdjMC4xNDQsMCwwLjI2MSwwLjIxNSwwLjI2MSwwLjQ4MSAgIHMtMC4xMTcsMC40ODItMC4yNjEsMC40ODJoLTUuN2MtMC4xNDUsMC0wLjI2LTAuMjE2LTAuMjYtMC40ODJDMTAuNjEyLDEuNDI5LDEwLjcyNywxLjIxNCwxMC44NzIsMS4yMTR6IE0xMy43MjIsMjUuNDY5ICAgYy0wLjcwMywwLTEuMjc1LTAuNTcyLTEuMjc1LTEuMjc2czAuNTcyLTEuMjc0LDEuMjc1LTEuMjc0YzAuNzAxLDAsMS4yNzMsMC41NywxLjI3MywxLjI3NFMxNC40MjMsMjUuNDY5LDEzLjcyMiwyNS40Njl6ICAgIE0xOS45OTUsMjEuMUg3LjQ0OFYzLjM3M2gxMi41NDdWMjEuMXoiIGZpbGw9IiMwMDAwMDAiLz4KCTxnPgoJPC9nPgoJPGc+Cgk8L2c+Cgk8Zz4KCTwvZz4KCTxnPgoJPC9nPgoJPGc+Cgk8L2c+Cgk8Zz4KCTwvZz4KCTxnPgoJPC9nPgoJPGc+Cgk8L2c+Cgk8Zz4KCTwvZz4KCTxnPgoJPC9nPgoJPGc+Cgk8L2c+Cgk8Zz4KCTwvZz4KCTxnPgoJPC9nPgoJPGc+Cgk8L2c+Cgk8Zz4KCTwvZz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K);
    width: 50px;
    height: 50px;
    background-position: center;
    background-size: 90%;
    background-repeat: no-repeat;
    /*margin-right: .5em;*/
}

select#select{
    display: flex;
    align-items: center;
    text-align: center;
    letter-spacing: 2px;
    font-size: 13px;
    font-weight: 700;
    direction: ltr;
    padding: 8px 10px;
    width: 90%;
    min-width: 250px;
    color: #000;
    margin: 18px auto;
    height: 47px;
    margin-top: 13px;
    border-radius: 11.319px;
    border: 1px solid #80808066;
    background: #FFF;
}

/* ADDED */
/* ====== INPUT CSS ====== */

        @supports (-webkit-appearance: none) or (-moz-appearance: none) {

            input[type=checkbox],
            input[type=radio] {
                --active: #275EFE;
                --active-inner: #fff;
                --focus: 2px rgba(39, 94, 254, .3);
                --border: #BBC1E1;
                --border-hover: #275EFE;
                --background: #fff;
                --disabled: #F6F8FF;
                --disabled-inner: #E1E6F9;
                -webkit-appearance: none;
                -moz-appearance: none;
                height: 21px;
                outline: none;
                display: inline-block;
                vertical-align: top;
                position: relative;
                margin: 0;
                cursor: pointer;
                border: 1px solid var(--bc, var(--border));
                background: var(--b, var(--background));
                transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
            }

            input[type=checkbox]:after,
            input[type=radio]:after {
                content: "";
                display: block;
                left: 0;
                top: 0;
                position: absolute;
                transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
            }

            input[type=checkbox]:checked,
            input[type=radio]:checked {
                --b: var(--active);
                --bc: var(--active);
                --d-o: .3s;
                --d-t: .6s;
                --d-t-e: cubic-bezier(.2, .85, .32, 1.2);
            }

            input[type=checkbox]:disabled,
            input[type=radio]:disabled {
                --b: var(--disabled);
                cursor: not-allowed;
                opacity: 0.9;
            }

            input[type=checkbox]:disabled:checked,
            input[type=radio]:disabled:checked {
                --b: var(--disabled-inner);
                --bc: var(--border);
            }

            input[type=checkbox]:disabled+label,
            input[type=radio]:disabled+label {
                cursor: not-allowed;
            }

            input[type=checkbox]:hover:not(:checked):not(:disabled),
            input[type=radio]:hover:not(:checked):not(:disabled) {
                --bc: var(--border-hover);
            }

            input[type=checkbox]:focus,
            input[type=radio]:focus {
                box-shadow: 0 0 0 var(--focus);
            }

            input[type=checkbox]:not(.switch),
            input[type=radio]:not(.switch) {
                width: 21px;
            }

            input[type=checkbox]:not(.switch):after,
            input[type=radio]:not(.switch):after {
                opacity: var(--o, 0);
            }

            input[type=checkbox]:not(.switch):checked,
            input[type=radio]:not(.switch):checked {
                --o: 1;
            }

            input[type=checkbox]+label,
            input[type=radio]+label {
                font-size: 14px;
                line-height: 21px;
                display: inline-block;
                vertical-align: top;
                cursor: pointer;
                margin-left: 4px;
            }

            input[type=checkbox]:not(.switch) {
                border-radius: 7px;
            }

            input[type=checkbox]:not(.switch):after {
                width: 5px;
                height: 9px;
                border: 2px solid var(--active-inner);
                border-top: 0;
                border-left: 0;
                left: 7px;
                top: 4px;
                transform: rotate(var(--r, 20deg));
            }

            input[type=checkbox]:not(.switch):checked {
                --r: 43deg;
            }

            input[type=checkbox].switch {
                width: 38px;
                border-radius: 11px;
            }

            input[type=checkbox].switch:after {
                left: 2px;
                top: 2px;
                border-radius: 50%;
                width: 15px;
                height: 15px;
                background: var(--ab, var(--border));
                transform: translateX(var(--x, 0));
            }

            input[type=checkbox].switch:checked {
                --ab: var(--active-inner);
                --x: 17px;
            }

            input[type=checkbox].switch:disabled:not(:checked):after {
                opacity: 0.6;
            }

            input[type=radio] {
                border-radius: 50%;
            }

            input[type=radio]:after {
                width: 19px;
                height: 19px;
                border-radius: 50%;
                background: var(--active-inner);
                opacity: 0;
                transform: scale(var(--s, 0.7));
            }

            input[type=radio]:checked {
                --s: .5;
            }

        }
/* ====== EXTRA DEFAULT CSS ====== */

        
        .lds-dual-ring {
            display: inline-block;
            width: 80px;
            height: 80px;
        }
        .lds-dual-ring:after {
            content: " ";
            display: block;
            width: 64px;
            height: 64px;
            margin: 8px;
            border-radius: 50%;
            border: 6px solid #fff;
            border-color: #fff transparent #fff transparent;
            animation: lds-dual-ring 1.2s linear infinite;
        }
        @keyframes lds-dual-ring {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }
            
        .button_tnc{
            padding: 8px 15px;
            font-weight: bold;
            color: rgb(127, 127, 127);
            text-align: center;
            margin: auto;
            display:flex;
            flex-wrap: nowrap;
            justify-content: center;
            align-items: center;
        }
        // =============== CHECKBOX INPUT =========================
        @supports (-webkit-appearance: none) or (-moz-appearance: none) {

            input[type=checkbox],
            input[type=radio] {
                --active: #275EFE;
                --active-inner: #fff;
                --focus: 2px rgba(39, 94, 254, .3);
                --border: #BBC1E1;
                --border-hover: #275EFE;
                --background: #fff;
                --disabled: #F6F8FF;
                --disabled-inner: #E1E6F9;
                -webkit-appearance: none;
                -moz-appearance: none;
                height: 21px;
                outline: none;
                display: inline-block;
                vertical-align: top;
                position: relative;
                margin: 0;
                cursor: pointer;
                border: 1px solid var(--bc, var(--border));
                background: var(--b, var(--background));
                transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
            }

            input[type=checkbox]:after,
            input[type=radio]:after {
                content: "";
                display: block;
                left: 0;
                top: 0;
                position: absolute;
                transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
            }

            input[type=checkbox]:checked,
            input[type=radio]:checked {
                --b: var(--active);
                --bc: var(--active);
                --d-o: .3s;
                --d-t: .6s;
                --d-t-e: cubic-bezier(.2, .85, .32, 1.2);
            }

            input[type=checkbox]:disabled,
            input[type=radio]:disabled {
                --b: var(--disabled);
                cursor: not-allowed;
                opacity: 0.9;
            }

            input[type=checkbox]:disabled:checked,
            input[type=radio]:disabled:checked {
                --b: var(--disabled-inner);
                --bc: var(--border);
            }

            input[type=checkbox]:disabled+label,
            input[type=radio]:disabled+label {
                cursor: not-allowed;
            }

            input[type=checkbox]:hover:not(:checked):not(:disabled),
            input[type=radio]:hover:not(:checked):not(:disabled) {
                --bc: var(--border-hover);
            }

            input[type=checkbox]:focus,
            input[type=radio]:focus {
                box-shadow: 0 0 0 var(--focus);
            }

            input[type=checkbox]:not(.switch),
            input[type=radio]:not(.switch) {
                width: 21px;
            }

            input[type=checkbox]:not(.switch):after,
            input[type=radio]:not(.switch):after {
                opacity: var(--o, 0);
            }

            input[type=checkbox]:not(.switch):checked,
            input[type=radio]:not(.switch):checked {
                --o: 1;
            }

            input[type=checkbox]+label,
            input[type=radio]+label {
                font-size: 14px;
                line-height: 21px;
                display: inline-block;
                vertical-align: top;
                cursor: pointer;
                margin-left: 4px;
            }

            input[type=checkbox]:not(.switch) {
                border-radius: 7px;
            }

            input[type=checkbox]:not(.switch):after {
                width: 5px;
                height: 9px;
                border: 2px solid var(--active-inner);
                border-top: 0;
                border-left: 0;
                left: 7px;
                top: 4px;
                transform: rotate(var(--r, 20deg));
            }

            input[type=checkbox]:not(.switch):checked {
                --r: 43deg;
            }

            input[type=checkbox].switch {
                width: 38px;
                border-radius: 11px;
            }

            input[type=checkbox].switch:after {
                left: 2px;
                top: 2px;
                border-radius: 50%;
                width: 15px;
                height: 15px;
                background: var(--ab, var(--border));
                transform: translateX(var(--x, 0));
            }

            input[type=checkbox].switch:checked {
                --ab: var(--active-inner);
                --x: 17px;
            }

            input[type=checkbox].switch:disabled:not(:checked):after {
                opacity: 0.6;
            }

            input[type=radio] {
                border-radius: 50%;
            }

            input[type=radio]:after {
                width: 19px;
                height: 19px;
                border-radius: 50%;
                background: var(--active-inner);
                opacity: 0;
                transform: scale(var(--s, 0.7));
            }

            input[type=radio]:checked {
                --s: .5;
            }

            //=========================================

            //== TOP POSITION ==
            .top_left{
                position:absolute;top:10px;left:10px;
            }

            .top_middle{
                position:relative;top:10px;left:50%;transform: translateX(-50%);bottom:10px;
            }

            .top_right{
                position:absolute;top:10px;right:10px;
            }

            .top_left_text {
                font-size: 10px;
            }

            .top_right_text {
                font-size: 10px;
            }

            .top_middle_text {
                font-size: 10px;
            }


            //== CROSS BUTTON ==
            .close {
                width: 100%; max-width: 780px; margin: 0 auto; padding: 0 25px; text-align:  ;
            }
            .cross_btn {
                position: absolute; top: 0; height: 24px; overflow: hidden; padding: 15px; cursor: pointer; z-index: 100; margin: 0;
            }
            .cross_btn::before,
            .cross_btn::after {
                 content: ""; position: absolute; height: 4px; width: 80%; top: 50%; left: 0; margin-top: -1px; background:  ; border-radius: 5px;
            }
            .cross_btn::before {
                 -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);
            }
            .cross_btn::after {
                 -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); }
            .cross_btn::before,
            .cross_btn::after {
                height: 4px; margin-top: -4px;
            }
            //================

            .disabled_btn{background: #C0C0C0 !important;}

            .rate_above_instructions {
                font-size: 11px;
            }

            .instructions {
                font-size: 15px;
                font-weight: bold;
            }

            .tnc_above_btn {
                font-size: 11px;
            }

            .checkbox_above_btn {
                font-size: 10px;
            }

            .rate_above_btn {
                font-size: 11px;
            }

            .exit_above_btn {
                font-size: 11px;
            }

            .exit_below_btn {
                font-size: 11px;
            }

            .checkbox_below_btn {
                font-size: 10px;
            }

            .rate_below_btn {
                font-size:11px;
                font-weight: normal;
            }

            .tnc_below_btn {
                font-size: 11px;
            }

            .tnc_text {
                cursor : pointer;
                display: inline-block;
                padding: 15px;
                vertical-align: middle;
            }
            .tnc_btm {
                color: white;
                width: 100%;
                padding:10px;
                display: block;
                max-width: 780px;
                text-align: center;
            }

            .lds-dual-ring {
                display: inline-block;
                width: 80px;
                height: 80px;
            }
            .lds-dual-ring:after {
                content: " ";
                display: block;
                width: 64px;
                height: 64px;
                margin: 8px;
                border-radius: 50%;
                border: 6px solid #fff;
                border-color: #fff transparent #fff transparent;
                animation: lds-dual-ring 1.2s linear infinite;
            }
            @keyframes lds-dual-ring {
                0% {
                    transform: rotate(0deg);
                }
                100% {
                    transform: rotate(360deg);
                }
            }
            .error {
                color: red;
            }
            .check_box_text{
                font-size: 10px;
                color: rgb(0 0 0 / 30%);
                max-width: 600px;
                margin: auto;
                margin-top: -20px;
                text-align: center;
                margin: auto;
            }
        }