@CHARSET "ISO-8859-1";

/* Reset CSS */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0;margin: 0 auto;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
body{line-height:1;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:none;}
table{border-collapse:collapse;border-spacing:0;}
p{font-size:12px;}

h1 {margin: 1em 0;font-size:28px;font-weight:bold;}
h2 {margin: 0.8em 0.4em;font-size:24px;font-weight:bold;}
h3 {margin: 0.6em 0.6em;font-size:20px;font-weight:bold;}

/* Base */
body {
    font-family: Calibri, Myriad Pro, Helvetica, sans-serif;
    letter-spacing: 0.012em;
    font-size: 14px;
    color: #000000;
    text-align: center;
    margin: 0 auto;
    background-color: #f2f2f2;
    height: 100%;
}
:lang(ar) {
    font-family: "Traditional Arabic", "Al Bayan", serif;
}

a:link, a:visited, a:active, a:hover {
    text-decoration: none;
    color: #ffffff;
}

.clear { clear: both; }

/* Header */
#header {
    /*background-color: #1d1d1b;*/
    padding: 0px;
    margin: 0px;
}

/* Container */
.container{
    margin: 0 auto;
    width: 100%;
    color: #595959;
    font-size: 12px;
    max-width: 640px;
    background: white;
}

#header_generico {
    width: 100%;
    background: #1d1d1b;
}

.logo {
    padding-left:5px;
    padding-top: 1px;
}
.change_lang {
    padding: 7px 5px 0px 0px;
    font-size: 16px;
    color:#fafafa;
}

#body-img {
    width: 100%;
    margin-top: 0px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 0;
}

#welcome {
    padding: 25px 0px;
    text-align:center;
    background: #fff;
}

#web-payment {
    padding-top: 12px;
    text-align:center;
    background: #fff;
}

#form-subscription {
    display:block;
}

#web-operator-select, #web-payment-telefono, #web-payment-code, .web-msisdn, .web-pin {
    background: #f9f9f9;
    border: medium none;
    border-radius: 5px;
    color: #595959;
    align-content: center;
    font-size: 18px;
    font-weight: bold;
    height: 38px;
    line-height: 26px;
    margin-right: auto;
    margin-left: auto;
    width: 75%;
    max-width: 440px;
    border: #aaaaaa solid 1px;
    box-shadow: 1px 0px 3px #000;
    -webkit-appearance: none;
    appearance: none;
    margin-top: 6px;
    display: block;
    text-align: left !important;
}

#web-operator-select {
    background-image: url(../img/opr.png);
    background-repeat: no-repeat !important;
    background-position: left; padding-left:45px;
    text-align: left !important;
}

#web-msisdn {
    background-image: url(../img/tlf.png);
    background-repeat: no-repeat !important;
    background-position: left; padding-left:45px;
    text-align: left !important;
    width: 61%;
}

.web-pin {
    padding-left:15px;
    text-align: left !important;
}

#error, #error-phone, #error-code{
    color:red;
    font-size: 18px;
    padding-top:5px;
}

.text-right {
    text-align: right;
}

.title-welcome {
    font-size: 34px;
    color: green;
}
.title-payment {
    font-size: 34px;
}
.title_1 {
    font-size: 24px;
}
.title_2 {
    font-size: 20px;
}
.title_3,
.title_31 {
    font-size: 16px;
}

.content {
    margin: 0 10px;
    text-align: justify;
}

.push {
    height: 50px;
}

#footer {
    font-size: 12px;
    text-align: center;
    padding: 0px;
    background: #ffffff; /*#ededed*/;
}

.footer-right {
    text-align: right !important;
    padding-right:10px;
    max-width: 540px;
}
.footer-left {
    text-align: left !important;
    padding-left: 10px;
    max-width: 540px;
}

.terms {
    text-align: center;
    font-size:11px;
    padding: 3px 0px 5px 0px;
}

.terms a {
    color: #595959;
}
.bold {
    font-weight: bold !important;
}

/* BTN */
.group-btn-confirm {
    padding: 5px 0px 0px 0px;
}

.button_one{
    background: #84e054;
    background: -moz-linear-gradient(top,  #84e054 0%, #61b32d 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#84e054), color-stop(100%,#61b32d));
    background: -webkit-linear-gradient(top,  #84e054 0%,#61b32d 100%);
    background: -o-linear-gradient(top,  #84e054 0%,#61b32d 100%);
    background: -ms-linear-gradient(top,  #84e054 0%,#61b32d 100%);
    background: linear-gradient(to bottom,  #84e054 0%,#61b32d 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#84e054', endColorstr='#61b32d',GradientType=0 );
    border: medium none;
    border-radius: 6px 6px 6px 6px;
    color: #FFFFFF;
    font-size: 32px;
    /*	font-weight: bold;*/
    height: 44px;
    line-height: 26px;
    text-shadow: 1px 1px 2px #000000;
    width: 75%;
    max-width: 440px;
    border: #008A02 solid 1px;
    box-shadow: 1px 0px 3px #000;
    -webkit-appearance: none;
    appearance: none;
    margin-top:10px;
    cursor: hand;
}

/*2 tbn */
.btn-payment{
    background: #61b32d;
    border-radius: 6px 6px 6px 6px;
    color: #FFFFFF;
    font-size: 22px;
    font-weight: bold;
    height: 44px;
    line-height: 20px;
    margin-right: auto;
    margin-left: auto;
    text-shadow: 1px 1px 2px #000000;
    width: 50%;
    max-width: 440px;
    border: #008A02 solid 1px;
    box-shadow: 1px 0px 3px #000;
    -webkit-appearance: none;
    appearance: none;
    margin-top: 3px;
    cursor: hand;
}

.button_exit {
    background: #555;
    border-radius: 6px 6px 6px 6px;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: bold;
    height: 24px;
    line-height: 16px;
    margin-right: auto;
    margin-left: auto;
    text-shadow: 1px 1px 2px #000000;
    width: 25%;
    max-width: 140px;
    cursor: hand;
}

.btn-align-left{
    display: block; float:left
}

.btn-cancelar {width: 38%; margin-right:1%; margin-left:1%; max-width: none;}
.btn-continuar{width: 38%; margin-right:1%; margin-left:1%; max-width: none;}
#btn-resend-cre{font-size:24px;!important;}

.hide {
    display: none;
}

.left {
    float: left;
}

.right {
    float: right;
}

.header_plus_etisalat, .header_plus {
    margin:0;
    padding: 1px 3px;
    height: 18px;
    background-color: #1d1d1b !important;
    color: #f5f5f5;
}

.disc1{
    color:#999999;
}
.disc2{
    color:#bbbbbb;
}
.disc2 .terms a {
    color: #bbbbbb;
}
.disc1 .terms a {
    color: #999999;
}
.disc3{
    padding-top: 330px;
    display: inline-block; /* or block */
}
.disc3G{
    padding-top: 230px;
    display: inline-block; /* or block */
}
.disc4{
    display:none;
}
.footer-color{
    color: #d0c8c8!important;
}

.header_plus .head_disc1, .header_plus .head_disc2, .header_plus .head_disc3, .header_plus .head_disc4 {
    color: #1b1b1b;
}

.textOperatorAE, .head_disc{
    font-size: 15px;
}

#resend-pin{
    color: #000;
    display: block;
    text-decoration: underline;
}

#btn-check-pin{
    width: 80%;
    margin: 10px 10%;
}


#send-cre-success{
    margin: 5px auto;
}



/* MEDIA */

@media (max-width: 630px) {
    p{font-size:16px;}
    .title-payment{font-size: 24px;}
    .title-welcome {font-size: 30px}
    .terms {font-size: 10px}
    #btn-resend-cre{font-size:20px;!important;}
    .button_one{font-size:30px;}
    #footer{padding:2px 8px;}
    #web-msisdn { width: 63%; }
    .title_3 { height: 34px; }
    #web-payment { padding-top: 8px; }
    .title_31 { height: 19px; }
}


@media (max-width: 490px) {
    p{font-size:15px;}
    .title-payment{font-size: 22px;}
    .title-welcome {font-size: 28px}
    .terms {font-size: 9px}
    #btn-resend-cre{font-size:18px;!important;}
    .button_one{font-size:28px;}
    #footer{padding:1px 4px;}
    .title_3 { height: 33px; }
    #web-payment { padding-top: 6px; }
    .title_31 { height: 18px; }
}


@media (max-width: 360px) {
    p{font-size:14px;}
    .title-payment{font-size: 20px;}
    .title-welcome {font-size: 26px}
    .terms {font-size: 8px}
    #btn-resend-cre{font-size:16px;!important;}
    .button_one{font-size:26px;}
    #footer{padding:0px 2px;}
    .title_3 { height: 32px; }
    #web-payment { padding-top: 4px; }
    .title_31 { height: 17px; }
}


/* for image AE */
@media (max-width: 426px) {
    .img-adjustment { height: 220px; }
}
@media (max-width: 406px) {
    .img-adjustment { height: 210px; }
}
@media (max-width: 386px) {
    .img-adjustment { height: 200px; }
}
@media (max-width: 366px) {
    .img-adjustment { height: 190px; }
}
@media (max-width: 346px) {
    .img-adjustment { height: 180px; }
}


.header_disc p{
    font-size: 13px !important;
}

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance:textfield;
}

@media(orientation: portrait) and (min-height:480px){

    .text_footer_ar{
        font-size: 16px;
    }

    .text_footer_ar_2{
        font-size: 15px;
    }

}

@media(orientation: portrait) and (min-height:533px){

    #web-operator-select{
        margin: 5px auto;
    }

    #exit-btn{
        margin-bottom: 1px;
    }

}


@media(orientation: portrait) and (min-height:568px){

    #web-operator-select{
        margin: 7px auto;
    }

    #exit-btn{
        margin-bottom: 2px;
    }

    #subscribed-submit{
        margin-top: 7px;
    }

    .img-adjustment {
        height: 195px;
    }

}

@media(orientation: portrait) and (min-height:600px){

    #web-operator-select, #subscribed-submit, #web-msisdn{
        height: 44px;
    }

}

@media(orientation: portrait) and (min-height:640px){

    #web-operator-select{
        margin: 10px auto;
    }

    #subscribed-submit{
        margin-top: 10px;
    }

    .img-adjustment {
        height: 220px;
    }

    #send-cre-success {
        margin: 20px auto 15px 0;
    }

    #btn-check-pin {
        margin: 20px 10%;
    }

    #body-img{
        height: 250px;
    }
}

@media(orientation: portrait) and (min-height:660px){

    .img-adjustment {
        height: 240px;
    }

    .web-pin {
        height: 50px;
    }
    #btn-check-pin {
        height: 50px;
    }

    #body-img {
        height: 260px;
    }

}

@media(orientation: portrait) and (min-height:732px){

    .img-adjustment {
        height: 265px;
    }
    #exit-btn {
        margin-bottom: 2px;
    }

    .title-payment {
        font-size: 22px;
    }
    #body-img {
        height: 310px;
    }

    #web-operator-select, #subscribed-submit, #web-msisdn {
        height: 40px;
        margin: 4px auto;
    }


}


@media(orientation: portrait) and (min-width:768px){
}

@media(orientation: landscape) and (min-height:600px){

    .text_footer_ar{
        font-size: 16px;
    }

}

@media(orientation: landscape) and (min-width:1024px){
    #web-operator-select{
        margin: 15px auto;
    }
    
    #body-img{
        height: 300px;
    }

    #subscribed-submit{
        margin-top: 15px;
    }

    #exit-btn{
        margin-bottom: 1px;
    }
}

@media(orientation: landscape) and (min-width:1200px){
    .title-payment {
        font-size: 30px;
    }
}

@media(orientation: landscape) and (min-width:1366px) and (min-height: 768px){
}

@media(orientation: landscape) and (min-width:1600px){
}

@media(orientation: landscape) and (min-width:1800px){


}