/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
Created on : 30 Aug 2023, 11:18:13
Author     : watternaiv
*/

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-text-size-adjust: 100%; font-family: sans-serif; outline: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
body { background: #f4f4f4; color: #222; display: flex; flex-direction: column; font-size: 12px; height: 100% }
footer { flex-shrink: 0; margin-top: auto; }
header { flex: 0 0 auto; position: relative }
header, main {background-color: #fff} 
header, main, footer { max-width: 480px; width: 100%; margin: auto;}
main, footer {padding:0 20px}
html { overflow-y: scroll; text-align: center; cursor: default; height: 100% }
img { width: 100%; max-width: 480px; vertical-align: bottom; }
main { flex: 1 0 auto; position: relative }
main > div > div, footer { padding: 2px 4px }
footer { background-color: #fff; color: #333; }
#agecheck { display: none }
#close { position: absolute; top: 0; right: 0; padding: 0 6px; font-weight: bold; cursor: pointer; font-size: 22px }
.btn { width: 96%; border-radius: 3px; cursor: pointer; display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 1px; line-height: 100%; margin: 10px 0; outline: 0; padding: 18px 0; position: relative; text-transform: uppercase; white-space: nowrap; border: none; text-decoration: none; }
.content { color: #999 }
.content { font-size: 20px }
.left { text-align: left; }
.prelanding #close { background: transparent; color: #111; }
.prelanding .btn.operator { background: #5cb85c; color: #fff; }
.prelanding .no { background: #e01429; color: #fff; }
.prelanding .yes { background: #8abe35; color: #fff; }
.prelanding header, .prelanding main { background: #ffffff }
.price { font-size: 15px; font-weight: bold; }
.qst { font-size: 22px; font-weight: bold }
.right { text-align: right; }
.underline { text-decoration: underline }
.text-nowrap {white-space: nowrap}

body.valid [name="msisdn"]{border: .25rem solid #2cb873; color: #2cb873;}
body.valid [type="submit"]{background-color: #2cb873;}
body.valid .mobilephone{color: #2cb873;}
body.invalid .invalid-phonenumber{display: block;}
body.invalid [name="msisdn"], body.invalid.valid [name="msisdn"]{border: .25rem solid red; color: red;}

.fallback-check {border-top: 3px solid #CCC ;}
.operator{width:32%;}

p{padding:8px;}
#page1, .mtel, .eronet, .ero, .mtel, .bhtel, .telecom{display:none;}
.hidden{display: none !important;}

.highlight{
color: #4bbc00;
font-size: 45px;
font-weight: bold;
line-height: 50px;
margin: 0 0 30px;
text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff000, 1px 1px 0 #fff;
}

/* Loader */

body:not(.submitted) .overlay {display: none;}
.overlay,.overlay__inner{left:0;top:0;width:100%;height:100%}.overlay{position:fixed;background:#222;opacity:.5}.overlay__inner{position:absolute}.overlay__content{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.spinner{width:75px;height:75px;display:inline-block;border-width:4px;border-color:rgba(255,255,255,.05);border-top-color:#fff;animation:1s linear infinite spin;border-radius:100%;border-style:solid}@keyframes spin{100%{transform:rotate(360deg)}}