*{
    display:none;
}
    .button{}
.msisdn{}
select{}
.display_1{}
.display_2{}
.display_aoc{
}
.keyword{}{}
.tnc_1{}
.tnc_2{}
.smartphone {
            background: #fff;
            width: 18px;
            margin: 0px auto;
            height: 29px;
            border-top: 1px solid black;
            border-bottom: 1px solid black;
            border-left: 1px solid black;
            border-right: 1px solid black;
            border-radius: 2px;
            position: absolute;
            margin-left: 1px;
            top: -2px;
        }
        .smartphone:before {
            content: "";
            display: block;
            position: absolute;
            top: 3px;
            left: 50%;
            margin-left: -3px;
            height: 1px;
            width: 7px;
            border-radius: 4px;
            background: black;
        }
        
        .smartphone > div{
            height: 1px;
            width: 12px;
            background: black;
            position: absolute;
            bottom: 5px;
            left: 2px;
        }
        .smartphone:after {
            content: "";
            display: block;
            position: absolute;
            bottom: 1px;
            left: 50%;
            margin-left: -1px;
            width: 3px;
            height: 3px;
            background: black;
            border-radius: 50%;
        }
	.msisdnArrow,.slectArrow,.btnArrow {
	transform: scale(1.3);
	margin-top: -10px;
	color: #328cf6;
}
.gg-arrow-right-o {
	box-sizing: border-box;
	position: relative;
	display: block;
	width: 22px;
	height: 22px;
	border: 2px solid;
	transform: scale(var(--ggs,1));
	border-radius: 20px
}
.gg-arrow-right-o::after,
.gg-arrow-right-o::before {
	content: "";
	display: block;
	box-sizing: border-box;
	position: absolute;
	right: 4px
}
.gg-arrow-right-o::after {
	width: 6px;
	height: 6px;
	border-top: 2px solid;
	border-right: 2px solid;
	transform: rotate(45deg);
	bottom: 6px
}
.gg-arrow-right-o::before {
	width: 10px;
	height: 2px;
	bottom: 8px;
	background: currentColor
}
.prefixCode {
	top: 15px;
}
.smartphone {
	top: -6px;
}
.prefixCode span {
	padding-left: 25px;
}
/* ====== 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: [[ lang(cross_btn_position) ]] ;
            }
            .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: [[ lang(cross_btn_color) ]] ; 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;
            }
        }