select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}

a:focus,
a:active,
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
select::-moz-focus-inner,
input[type="file"]>input[type="button"]::-moz-focus-inner {
    border: 0;
    outline: 0;
}

textarea,
input,
input[type="text"],
input[type="button"],
input[type="submit"],
input[type="image"] {
    -webkit-appearance: none;
    opacity: 1;
    outline: 0;
}

button {
    -webkit-appearance: none;
    outline: none;
    border: none;
}

a {
    text-decoration: none;
}

.wrappers {
    margin: 0 auto;
    text-align: center;
}

.show {
    display: block;
}

.hide {
    display: none;
}

.clear {
    clear: both;
}

.ltr {
    direction: ltr;
    display: inline-block;
}

.rtl {
    direction: rtl;
    display: inline-block;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    /*height: 100%;*/
    background: #c0d9e0;
    font-family: 'Noto Sans Arabic', Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #333;
    direction: ltr;
}

.errorBox {
    padding: 5px 0;
    color: #ff0000;
    font-size: 12px;
}

#header {
    margin: 0 auto;
    max-width: 900px;
}

.langbtnwrap {
    float: right;
    margin: 8px 15px 8px auto;
    direction: ltr;
}

.langbtn {
    max-width: 290px;
    width: 100%;
    display: inline-block;
    cursor: pointer;
    color: #626262;
    font-size: 12px;
    line-height: 12px;
    font-weight: normal;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    border: 1px solid #bfbfbf;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -khtml-border-radius: 3px;
    background: #eeeeee;
    background: -moz-linear-gradient(top, #fff 0%, #e7e7e7 100%);
    background: -webkit-linear-gradient(top, #fff 0%, #e7e7e7 100%);
    background: -o-linear-gradient(top, #fff 0%, #e7e7e7 100%);
    background: -ms-linear-gradient(top, #fff 0%, #e7e7e7 100%);
    background: linear-gradient(to bottom, #fff 0%, #e7e7e7 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#e7e7e7', GradientType=0);
    padding: 5px 10px;
}

.wrapy {
    background-color: #e8f2f5;
    padding: 30px 0 100px;
}

.icons img {
    width: 100%;
    max-width: 292px;
    margin: 10px auto;
}

.pict img {
    width: 100%;
    max-width: 200px;
    margin: 15px auto;
}

.bannerTitle {
    font-size: 2.4em;
    line-height: 35px;
    font-weight: bold;
    color: #00a44e;
    text-align: center;
    padding: 8px 10px;
}

.service_title {
    font-size: 1.5em;
    line-height: 25px;
    text-align: center;
    color: #686868;
    padding: 8px 10px;
    text-transform: uppercase;
}

.contentsection {
    padding: 20px 10px;
}

.pntxt,
.pintxt {
    padding: 0 0 10px;
    font-size: 15px;
    line-height: 20px;
    font-weight: bold;
}

.egtxt {
    font-size: 12px;
    line-height: 14px;
    direction: ltr;
}

.pintxt2 {
    padding: 8px 0 0;
    font-size: 12px;
    line-height: 14px;
}

.pintxt2 a {
    color: #ff0000;
}

.pintxt2 span {
    color: #ff0000;
    text-decoration: underline;
}

.ptqtxt {
    padding: 60px 0;
    font-size: 20px;
    line-height: 22px;
    font-weight: bold;
}

.tqtxt0 {
    font-size: 19px;
    line-height: 21px;
    font-weight: bold;
}

.tqtxt {
    padding: 20px 0;
    font-size: 19px;
    line-height: 28px;
}

.tqtxtbold {
    font-size: 30px;
    line-height: 32px;
    font-weight: bold;
    color: #ef2542;
}

.btnpn,
.btnpin,
.btntq {
    margin: 10px auto;
    max-width: 230px;
}

.button {
    width: 100%;
    display: inline-block;
    cursor: pointer;
    padding: 6px 0;
    position: relative;
    color: #fff;
    font-weight: 600;
    font-size: 18px;
    font-family: 'Noto Sans Arabic', Arial, Helvetica, sans-serif;
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: 30px;
    -moz-border-radius: 30px;
    -webkit-border-radius: 30px;
    background: -moz-linear-gradient(90deg, #358bea 0%, #07c575 100%);
    background: -webkit-linear-gradient(90deg, #358bea 0%, #07c575 100%);
    background: linear-gradient(90deg, #358bea 0%, #07c575 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#358bea", endColorstr="#07c575", GradientType=1);
    background-color: #358bea;
    animation: btnanimate 2s linear infinite;
    -webkit-animation: btnanimate 2s linear infinite;
    -moz-animation: btnanimate 2s linear infinite;
    transition: 0.3s ease-in-out;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
}

@keyframes btnanimate {
    0% {
        transform: scale(1.2);
        border-radius: 50px;
        box-shadow: 0 0 0 0 rgba(135, 220, 255, 0.7), 0 0 0 0 rgba(48, 195, 214, 0.7);
    }

    40% {
        box-shadow: 0 0 0 50px rgba(135, 220, 255, 0), 0 0 0 0 rgba(112, 226, 226, 0.7);
    }

    80% {
        box-shadow: 0 0 0 50px rgba(135, 220, 255, 0), 0 0 0 30px rgba(48, 195, 214, 0);
    }

    100% {
        box-shadow: none;
    }
}

@-webkit-keyframes btnanimate {
    0% {
        -webkit-transform: scale(1.2);
        -webkit-border-radius: 50px;
        -webkit-box-shadow: 0 0 0 0 rgba(135, 220, 255, 0.7), 0 0 0 0 rgba(48, 195, 214, 0.7);
    }

    40% {
        -webkit-box-shadow: 0 0 0 50px rgba(135, 220, 255, 0), 0 0 0 0 rgba(112, 226, 226, 0.7);
    }

    80% {
        -webkit-box-shadow: 0 0 0 50px rgba(135, 220, 255, 0), 0 0 0 30px rgba(48, 195, 214, 0);
    }

    100% {
        -webkit-box-shadow: none;
    }
}

@-moz-keyframes btnanimate {
    0% {
        -moz-transform: scale(1.2);
        -moz-border-radius: 50px;
        -moz-box-shadow: 0 0 0 0 rgba(135, 220, 255, 0.7), 0 0 0 0 rgba(48, 195, 214, 0.7);
    }

    40% {
        -moz-box-shadow: 0 0 0 50px rgba(135, 220, 255, 0), 0 0 0 0 rgba(112, 226, 226, 0.7);
    }

    80% {
        -moz-box-shadow: 0 0 0 50px rgba(135, 220, 255, 0), 0 0 0 30px rgba(48, 195, 214, 0);
    }

    100% {
        -moz-box-shadow: none;
    }
}

.button:hover {
    background: -moz-linear-gradient(20deg, #3d84d1 15%, #28ffa4 100%);
    background: -webkit-linear-gradient(20deg, #3d84d1 15%, #28ffa4 100%);
    background: linear-gradient(20deg, #3d84d1 15%, #28ffa4 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#3d84d1", endColorstr="#28ffa4", GradientType=1);
    background-color: #3d84d1;
}

.button:active {
    transform: scale(0.95);
    -webkit-transform: scale(0.95);
    -moz-transform: scale(0.95);
}

.button:disabled,
.disabled_btn {
    pointer-events: none;
    cursor: default;
    background: linear-gradient(90deg, #c0c0c0 0%, #c0c0c0 100%);
    background: -moz-linear-gradient(90deg, #c0c0c0 0%, #c0c0c0 100%);
    background: -webkit-linear-gradient(90deg, #c0c0c0 0%, #c0c0c0 100%);
    background: -o-linear-gradient(90deg, #c0c0c0 0%, #c0c0c0 100%);
    background: -ms-linear-gradient(90deg, #c0c0c0 0%, #c0c0c0 100%);
    background-color: #c0c0c0;
    animation: none;
    -webkit-animation: none;
    -moz-animation: none;
}

.disabled_txt {
    opacity: 0.2;
}

.submitload {
    position: absolute;
    top: 5px;
    left: 0;
    right: 0;
}

// .lds-dual-ring {
//     margin: 0 auto;
//     position: relative;
//     content: " ";
//     width: 35px;
//     height: 35px;
//     border-radius: 50%;
//     -webkit-border-radius: 50%;
//     -moz-border-radius: 50%;
//     border: 6px solid #fff;
//     border-color: #fff transparent #fff transparent;
//     animation: lds-dual-ring 1.2s linear infinite;
//     -webkit-animation: lds-dual-ring 1.2s linear infinite;
//     -moz-animation: lds-dual-ring 1.2s linear infinite;
// }

@keyframes lds-dual-ring {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes lds-dual-ring {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@-moz-keyframes lds-dual-ring {
    0% {
        -moz-transform: rotate(0deg);
    }

    100% {
        -moz-transform: rotate(360deg);
    }
}

.securewrap {
    display: inline-flex;
    display: -webkit-inline-flex;
    display: -moz-inline-flex;
    display: -ms-inline-flex;
    align-items: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    margin: 16px auto 0;
    max-width: 345px;
}

.securewrap img {
    width: 100%;
    max-width: 14px;
}

.securewrap div {
    font-size: 11px;
    color: #858788;
    padding-left: 4px;
    text-align: left;
}

#footer {
    margin: 20px auto 14px;
    max-width: 800px;
    width: 92%;
    color: #333;
    font-weight: 400;
    font-size: 12px;
    line-height: 14px;
}

.terms,
.closetnc {
    cursor: pointer;
    font-size: 14px;
}

.closetnc {
    text-align: center;
    text-decoration: underline;
    font-weight: 700;
}

.copyright {
    padding: 10px 0;
    font-size: 12px;
    line-height: 14px;
    text-align: center;
    color: #333;
}

@media (min-width:576px) {
    .wrapy {
        padding: 30px 0 120px;
    }

    .bannerTitle {
        font-size: 2.8em;
    }

    .service_title {
        font-size: 1.6em;
    }

    .pict img {
        max-width: 216px;
    }

    .pntxt,
    .pintxt {
        font-size: 18px;
    }
}

@media (max-width:768px) {

    .instructions,
    .pin_instruction {
        font-size: 15px;
    }
}

*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.mobileBox,
.pinBox {
    margin: 0 auto;
    max-width: 260px;
    padding: 10px;
    direction: ltr;
    border: 1px solid #ccc;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    background: #fff;
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    align-items: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
}

.prefixbox,
.mobileBox input,
.pinBox input {
    color: #555;
    font-weight: bold;
    font-size: 24px;
    font-family: Arial, Helvetica, sans-serif;
}

.mobileBox input,
.pinBox input {
    width: 100%;
    border: transparent;
    background-color: transparent;
    padding: 0;
}

.pinBox input {
    text-align: center;
}

::-webkit-input-placeholder {
    padding-left: 5px;
    text-align: left;
    color: #ccc;
    font-size: 20px;
}

:-moz-placeholder {
    padding-left: 5px;
    text-align: left;
    color: #ccc;
    font-size: 20px;
}

::-moz-placeholder {
    padding-left: 5px;
    text-align: left;
    color: #ccc;
    font-size: 20px;
}

:-ms-input-placeholder {
    padding-left: 5px;
    text-align: left;
    color: #ccc;
    font-size: 20px;
}

input:focus::-webkit-input-placeholder {
    opacity: 0;
}

input:focus:-moz-placeholder {
    opacity: 0;
}

input:focus::-moz-placeholder {
    opacity: 0;
}

input:focus:-ms-input-placeholder {
    opacity: 0;
}

/* ADDED */
.langBtn {
    max-width: 290px;
    width: 100%;
    display: inline-block;
    cursor: pointer;
    color: #626262;
    font-size: 12px;
    line-height: 12px;
    font-weight: normal;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    border: 1px solid #bfbfbf;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -khtml-border-radius: 3px;
    background: #eeeeee;
    background: -moz-linear-gradient(top, #fff 0%, #e7e7e7 100%);
    background: -webkit-linear-gradient(top, #fff 0%, #e7e7e7 100%);
    background: -o-linear-gradient(top, #fff 0%, #e7e7e7 100%);
    background: -ms-linear-gradient(top, #fff 0%, #e7e7e7 100%);
    background: linear-gradient(to bottom, #fff 0%, #e7e7e7 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#e7e7e7', GradientType=0);
    padding: 5px 10px;
}

.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: 70%;
    background-repeat: no-repeat;
    background-color: #ececec;
    margin-right: .5em;
}

.phone-input {
    max-width: 260px;
    height: 50px;
    margin: 10px auto;
    background-color: #fff;
    background-size: 40px auto;
    border-radius: 5px;
    display: flex;
    border: 1px solid #ccc;
    align-items: center;
    direction: ltr;
}

.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: 100%;
    height: 50px;
    margin: 10px auto;
    background-color: #ffffde;
    background-size: 40px auto;
    border-radius: 25px;
    display: flex;
    align-items: center;
    direction: ltr;
    -webkit-animation: heartbeat 1.75s ease-in-out infinite both;
    animation: heartbeat 1.75s ease-in-out infinite both;
}

.prefixCode {
    outline: none;
    font-size: 24px;
    background-color: rgba(0, 0, 0, 0);
    font-family: arial;
    color: #555;
    font-weight: bold;
    margin-left: 0.6rem;
}

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

.instructions,
.pin_instruction {
    font-size: 18px;
    text-align: center;
    margin: 16px auto;
    padding: 0 0 10px;
    font-weight: bold;
    line-height: 20px;
}

.msisdn {
    width: 65%;
    outline: none;
    border: none;
    font-size: 24px;
    font-weight: bold;
    color: #555;
    background-color: rgba(0, 0, 0, 0);
    flex: 1;
}

.msisdn::placeholder {
    font-size: 1.4ch
}


.msisdn:not(.pin) {
    margin-left: -2px;
}

.pin {
    max-width: 260px;
    height: 50px;
    margin: 10px auto;
    background-color: #fff;
    background-size: 40px auto;
    border-radius: 5px;
    display: flex;
    border: 1px solid #ccc;
    align-items: center;
    direction: ltr;
    text-align: center;
}

.pin::placeholder {
    font-size: 1.4ch;
    text-align: center;
}

.button {
    font-size: 18px !important;
    height: 50px;
    color: #fff;
    max-width: 230px;
    margin: 10px auto;
}

/*.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: 30px;
    height: 30px;
    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;
}

.text_below_button {
    font-size: 11px;
    text-align: center;
    /*margin: 16px auto;*/
    /*padding: 0 0 10px;*/
    font-weight: bold;
    line-height: 20px;
}

select#select {
    margin: 10px auto;
    width: 100%;
    max-width: 280px;
    margin-bottom: 15px;
    height: fit-content;
    min-height: 40px;
    border-radius: 10px;
    text-align: center;
    font-size: 20px;
}

.tnc {
    text-align: left;
}

/* 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;
    }
}