@charset "utf-8";

/* Main Body */

input:focus {
    border-color:#00cc33;
    box-shadow:0 0 10px #d5d5d9;
    -webkit-box-shadow:outset 0 1px 9px #d5d5d9;
    -moz-box-shadow:outset 0 1px 9px #d5d5d9;
    color:  #676767;
}

/* min Jquery CSS elements for autocomplete */
.ui-autocomplete { position: absolute; cursor: default; }    
.ui-menu { list-style:none; padding: 2px; margin: 0; display:block; float: left; background-color:#f9f9f9; border: 1px solid #efefef; border-radius: 3px 3px 3px 3px; }

.ui-menu .ui-menu {
        margin-top: -3px;
}
.ui-menu .ui-menu-item {
        margin:0;
        padding: 0;
        zoom: 1;
        float: left;
        clear: left;
        width: 100%;
        font-family:arial;
}
.ui-menu .ui-menu-item a {
        text-decoration:none;
        display:block;
        padding:.1em .3em;
        line-height:1.5;
        zoom:1;
}
.ui-menu .ui-menu-item a.ui-state-hover, .ui-menu .ui-menu-item a.ui-state-active {
        font-weight: bold;
}

/*Ui Dialog*/
.ui-dialog, .ui-dialog-content {
 border: 2px solid #DDD;
 background-color: rgb(240,240,240);
 color: black;
 opacity: 1;
 height:108px;
 filter: Alpha(Opacity=1);
 border: none;
}
.ui-dialog-titlebar a{display:none;} 
.ui-dialog-titlebar {
 background-image: none;
 background-color: rgb(140,140,140);
 padding-left:10px;
}
#ui-dialog-title-dialog {
 color: yellow !important;
 text-shadow: none;
}
.ui-dialog{border:1px #cccccc solid;}
.ui-dialog-content{padding:10px;}

.ui-dialog-buttonset {text-align:right; margin-bottom:20px;}
.ui-dialog-buttonset button {
    border: 0 none !important;
    height: 25px;
    margin-bottom: 15px;
    margin-right: 20px;
    margin-top: 40px;
    width: 100px;
}

.ui-dialog-titlebar {
	background-color:transparent;
	padding:10px 0 0 10px;
}

.ui-dialog-title {
	color:rgb(81, 11, 54) !important;
	font-size:1.8em;
	fone-weight:bold;
}

.ui-dialog {
	border-width:0px;
}

.ui-dialog-bg {
	background-color:#000;
	opacity:.7;
	position:absolute;
	height:100%;
	width:100%;
	z-index:1001;
	top:0;
	left:0;
}
.ui-widget-overlay {display:none;}
.ui-dialog-bg {position:fixed;}


*{margin:0; padding:0;}
body{background:#FFFFFF; font-family:Gotham-Book; font-size:16px; color:#333333; }
#main{width:80%; margin:auto;}
a{color: #BBBBBB; text-decoration: none;}
a:hover{color:#333333;}
img{max-width:100%; border:none;}
a{color: #bbbbbb;}
a:hover{color: #333333;}
@font-face
{
font-family: CoBd;
src:url(../fonts/CoBd.eot);
src: url(../fonts/CoBd.ttf);
src: url(../fonts/CoBd.woff);
}
@font-face
{
font-family: ZwXbPl;
src:url(../fonts/ZwXbPl.eot);
src: url(../fonts/ZwXbPl.ttf);
src: url(../fonts/ZwXbPl.woff);
}
@font-face
{
font-family: Gotham-Black;
src:url(../fonts/Gotham-Black.eot);
src: url(../fonts/Gotham-Black.ttf);
src: url(../fonts/Gotham-Black.woff);
}
@font-face
{
font-family: Gotham-Book;
src:url(../fonts/Gotham-Book.eot);
src: url(../fonts/Gotham-Book.ttf);
src: url(../fonts/Gotham-Book.woff);
}

/*Header*/
#head{padding:20px; padding-left:0;}
#head .logo{float:left; padding: 10px;}
#head .logo img{float:left; height: 31px; }
#head .logo h1{font-size:24px; color:#333333;  float:left; margin-left:10px; }
#head .logo h1 span{font-size: 14px; font-weight: normal; display: block;}
#head .lang a{color:#BBBBBB; text-decoration:none; display:inline-block; margin-left:10px;}
#head .lang a:hover{color:#5F5F5F; }
#head .lang a.activeLang{color:#333333; font-weight:bold;}
.rtSec{float: right; color:#BBBBBB;}
.rtSec .lang{text-align:right;}
.rtSec a{ text-decoration: none; margin-left:5px; margin-right:5px;}
.logout{text-align: right; margin-top:10px;}
.yalloLogo{float:left;}
.changePass{float: right; margin-right: 20px;}
#head .lang a{color:#BBBBBB; text-decoration:none; display:inline-block; margin-left:10px;}
#head .lang a:hover{color:#5F5F5F; }

/*Common Form Section*/
.formGroup{margin-top:20px;}
.formSection{width:100%;}
input{ border:none; padding:10px; color:#333333; font-family:Gotham-Book; font-size:18px; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; background-color:#DEF }
input[type=button], input[type=submit]{cursor:pointer; background:#DDDDDD; color:#535353; }
label{color:#333333;}
input[type="checkbox"] {display:none;}
input[type=checkbox] + label span { display:inline-block; width:14px; height:14px;  margin:-1px 4px 0 0;
     background:url(../images/chkbox-unchecked-yallo.png) left top no-repeat; cursor:pointer;}
input[type=checkbox]:checked + label span {
    background:url(../images/checkbox-checked-yallo.png) left top no-repeat;}
    input[type=checkbox] + label{width:100%; }
    
    
input[type=checkbox] + input[type=hidden] + label span { display:inline-block; width:14px; height:14px;  margin:-1px 4px 0 0;
     background:url(../images/chkbox-unchecked-yallo.png) left top no-repeat; cursor:pointer;}
input[type=checkbox]:checked + input[type=hidden] + label span {
    background:url(../images/checkbox-checked-yallo.png) left top no-repeat;}
    input[type=checkbox] + label{width:100%; }    
    
/* Manage Customer*/
.manageCustmr h3{margin-top:30px;}
.manageCustmr .formGroup label{width:27%; display:inline-block;}
.manageCustmr .formGroup input.msisdn{padding:4px; width:39%;}
.manageCustmr .btns{margin-top:30px;}
.manageCustmr .btns input{width:46%; padding:5px;}
.manageCustmr .heads p{color:#333333;}
.manageCustmr .btns input.cancel{margin-left:40px;}

/*Login Section*/
.login label{width:120px; display:inline-block;}
.login .formGroup a{color:#AAAAAA; text-decoration:none; margin-left:10px;}
.login input.submitB{ background-color:#535353; padding:5px; color:#fff;  font-family:Gotham-Book; width:40%;}
.login .signUp{background:#DDDDDD; padding:5px; width:40%; margin-left:40px;}
.login .formGroup label{font-size:20px;  }
.login .formGroup .userName, .login .formGroup .password{width:30%;} 
.jserrors{color:red;  }
.err{color:red; position:absolute; margin-top:6px; margin-left:15px; }
.postcode_err{color:red; position:left !important;}
/*Partner Hotline*/
.hotLineNum{margin-top:40px;}
.helpActive{color:#8273e3!important;font-weight:bold;display: inline;float: right;}
/*Brand Selector*/
.brandSelect{margin-top:30px;}
.brandSelect .brands{text-align:center; margin-top:30px;}
.brandSelect .brands .selectBrnd{float:left;}
.brandSelect .btns{margin-top:30px; }
.brands div:first-child{margin-left:0; }
.brands img:first-child{margin-left:0;}
.brandYallo, .brandOrtel, .brandLebara{float:left; width:30%; margin-left:3%; font-family:Gotham-Book; font-size:14px;  }
.brandSelect .btns input.registerSim{width:47%; padding:5px;}
.brandSelect .btns input.manageCusmer{width:30%; padding:5px;}
.brandSelect .btns input.simSwap{width:20%; padding:5px;}

/* Brand Selector Postpaid */
.prepaidSec{margin-top:30px; margin-bottom: 10px;}
.prepaidSec .text{font-weight:900; margin-top:10px; color:#3B3B3B;}

.postpaidSec{margin-top:40px;}
.postpaidSec .text{font-weight:900; margin-top:10px; color:#3B3B3B;}
.postpaidSec .postpaidBtns input.width45{cursor:pointer; width:45%; margin-top:10px;}
.postpaidSec .postpaidBtns input.width35{cursor:pointer; width:35%; margin-top:10px;}
.postpaidSec .postpaidBtns input.width25{cursor:pointer; width:20%; margin-top:10px;}

/* Sim Swap*/
.simSwap h3{margin-top:30px;}
.simSwap .formGroup{margin-top:10px;}
.simSwap .formGroup label{width:27%; display:inline-block;}
.simSwap .formGroup input[type="text"]{width:392px; padding:5px;}
.simSwap .formGroup .day{width:100px;}
.simSwap .formGroup .month{width:150px;}
.simSwap .formGroup .year{width:139px;}
.simSwap .btns{margin-top:10px;}
.simSwap .btns input{width:46%; padding:5px;}
.simSwap .btns input.cancel{margin-left:40px;}
.simSwap .verified{margin-top:10px;}
.simSwap .verified label{width:100%;}

/* Add New SIM */
.addSim h3{margin-top:10px;}
.addSim .formGroup{margin-top:10px;}
.addSim .formGroup label{width:27%; display:inline-block;}
.addSim .formGroup input[type="text"]{width:409px; padding:5px;}
.addSim .formGroup .day{width:137px;}
.addSim .formGroup .month{width:137px;}
.addSim .formGroup .year{width:137px;}
.addSim .btns{margin-top:50px;}
.addSim .btns input{width:46%; padding:5px;}
.addSim .btns input.cancel{margin-left:40px;}

/* Change SIM */
.verified {margin-top: 20px; }
.custDetails{margin-bottom: 20px; margin-top: 20px; }
.changeSim .custDetails label span {width: 73% !important; }
.changeSim .backBtn {margin-top: 10px; margin-left: -4px; width: auto !important; }

/*Register SIM*/

input[type=radio] + label{  
        display: inline-block;  
        cursor: pointer;  
        position: relative;  
        padding-left: 25px;  
        margin-right: 15px;  
        font-size: 16px;  
    }  

input[type=radio] + label:before {content: "";  display: inline-block; width: 16px;  
        height: 16px; 
        margin-right: 10px;  
        position: absolute;  
        left: 0;  
        bottombottom: 1px;  
        background-color: #aaa;  
        box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);  
}  

input[type=radio] + label:before { border-radius: 8px;} 

input[type=radio]:checked + label:before { content: "\2022"; color: #f3f3f3; font-size: 30px;text-align: center;line-height: 18px;}  

.registerSim{margin-top:30px;}
.step1 h3{margin-top:20px;}
.registerSim label{width:400px; display:inline-block;}
.registerSim label.handsetlabel{width:23% !important; display:inline-block;}
.registerSim label.portinglabel{width:15% !important; display:inline-block;}
.registerSim label.currentInfolabel{margin-top: 10px; width:auto !important; display:inline-block; }
.registerSim label.swissDLLabel{margin-top: 5px; width:auto !important; display:inline-block; }
.registerSim label.pospaidPortingLabel{width:34% !important; display:inline-block;}
.registerSim label.pospaidBuySimLabel{width:45% !important; display:inline-block;}
.registerSim label.pospaidBillingAddressLabel{width:22% !important; display:inline-block;}
.registerSim input{padding:4px; width:413px;}
.registerSim .customSelect{width:420px;}
.registerSim .customSelectBox{width:420px;}
.registerSim .formGroup{margin-top:10px;}
.registerSim .formGroup .phoneDetails input.iccid{width:210px;}
/* .registerSim .formGroup .phoneDetails span{margin-left:5px;} */
.registerSim .formGroup .phoneDetails input.lstDgt{width:60px;}
/* .registerSim .phoneDetails span.mandate{margin-left:2px;} */
.registerSim .portingG .portingDetails{margin-top:20px;}
.registerSim .formGroup .dob .day{width:137px;}
.registerSim .formGroup .dob .month{width:137px;}
.registerSim .formGroup .dob .year{width:137px;}
.registerSim .formGroup .postpaid p{margin-top:20px;} 
.registerSim .portingG{margin-top:20px;}
.portingDetails .postpaid p{margin-top:10px;}
.registerSim .adress input.address{width:271px;}
/* .registerSim .adress span{margin-left:9px;} */
/* .registerSim .adress span.adjMargn{margin-left:0;} */
/* .registerSim .adress span.mandate{margin-left:2px;} */
.registerSim .adress input.hno{width:60px;}
.registerSim .pascode label{float:left; margin-top:8px; }
.registerSim .pascode label.cityNew{ width:26px; margin-left:7px; margin-right:7px; display:inline; }
.registerSim .pascode input.postcode{width:120px; float:left; margin-left:5px; height: 25px; }
/*.registerSim .pascode span{margin-left:12px; float:left;  margin-left:10px; margin-top:7px; }
.registerSim .pascode span.mandate{margin-left:5px;} */
.registerSim .pascode input.cty {height: 25px; margin-left: 10px; width: 234px; }
.registerSim .pascode .customSelect{width:243px; float:left; margin-left:10px;}
.registerSim .pascode .customSelectBox{width:100%;}
.registerSim .pascode span.adjMargn{margin-left:0;}
.registerSim .adress label.nrNew{ width:63px; text-align:center; }
.registerSim .seperator .nxt{width:100px;}
.registerSim .btns{margin-top:20px; margin-bottom:20px;}
.registerSim .btns input{width:45%;}
.registerSim .btns input.cancel{margin-left:16px;}
.registerSim .step5{margin-top:10px;}
.registerSim .services{width:1000px; overflow-x:auto;}
.registerSim .services .step6{width:100%;}
.registerSim .services .step6 tr td input{width:auto;}
.registerSim .formGroup span.readonly{border:0; background-color:#DDDDDD; background:none; border:1px #999999 solid; padding:4px; color:#999999; font-size:16px; display: inline-block; height:20px; width:392px;}
.swissDL_err {
    margin-bottom: 2px;
    margin-left: 0 !important;
    margin-top: 10px !important;
    position: relative !important;
}

.portingLabel {display: inline !important;}

#expList li{margin-left:0;}
#expList li ul li{margin-left:25px; list-style:none;}
#expList li ul li input{width:auto;}

/* for Postpaid*/
.registerSim .pascode input.postcodeDisabled{width:120px; float:left; margin-left:5px;background-color:#DDDDDD; height:25px; }
.registerSim .adress input.addressDisabled{width:271px;background-color:#DDDDDD;}
.registerSim .adress input.hnoDisabled{width:60px;background-color:#DDDDDD;}

.idInfo{display: flex; }
.idInfoRightSec {
    border: 1px solid #8273e3;
    float: right;
    height: auto;
    padding: 10px;
    width: 24%;
}
.idInfoLeftSec{float: left; width: 76%; }

/*Register SIM-- Buying another SIM*/
.registerSim .formGroup .userdob .day{width:137px;}
.registerSim .formGroup .userdob .month{width:137px;}
.registerSim .formGroup .userdob .year{width:137px;}


/*Confirmation*/
.confirmation{margin-top:30px;}
.confirmation p{margin-top:10px;}
.confirmation .btns{margin-top:20px;}
.confirmation .btns input{width:46%;}
.confirmation .btns input.print{margin-left:40px;}
.msibtns {width: 99px !important;background-color: rgb(221, 221, 221);border: none;margin: 2px; padding: 2px;height: 30px;font-weight:bold !important;font-family:Gotham-Black;color: #333333;}
.msibtnsearch {width: 266px !important;background-color: rgb(221, 221, 221);border: none;margin: 2px; padding: 2px;height: 30px;cursor: pointer;}
.wish {width: 50px !important;} 
.hintlabel {width: 10%;}
.msisdnlbl {font-weight:bold !important;}
.wishlabel {width: 6%;font-weight: bold;}
.backBtn {clear:both !important;padding:0 !important;background-color:transparent !important;display:block !important;color:#8273e3 !important;text-decoration:underline !important;}
.confirmCheck {padding:5px !important;background-color:#8273e3 !important;color:#fff !important;}

.heads{color:#8273e3;}
h3{color:#8273e3; font-weight:lighter; font-family:Gotham-Black; font-size:18px; display:inline-block;}
.logoAldi h1 {font-size:24px; color:#333333; margin-left:10px; float:left; }
select{  -moz-appearance: none; -webkit-appearance:none; appearance:none; background: #fff url(../images/arrow-down.png) no-repeat scroll 98% center ; border: 0 none !important;
    padding: 4px; text-indent: 0.01px; text-overflow: ""; color:#535353; font-family:Gotham-Book; font-size:18px;}
select.disabled{background: #fff url(../images/arrow-down-disable.png) no-repeat scroll 98% center;}
.regSIM label{width:27%; display:inline-block;}
.regSIM input{padding:4px;}
.regSIM .formGroup{margin-top:10px;}
.search{ background: #fff url(../images/search.png) right center no-repeat; }
.chkbox{border:0; background-color:#fff; }
.seperator .nxt{background-color:#8273e3; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; padding:2px 10px; color:#fff; font-family:Gotham-Black; font-weight:lighter; }
.teasers{width:300px; height:120px; background:#fff;  display:inline-block;}
.disabled{background-color:#DDDDDD;}
.mandate,.mandateStart{color: #FD2123; background: none!important; font-size: 18px; margin-left:0; position:absolute; margin-top:8px; margin-left:5px; }
.mandateStart{display: none;}
.step6 tr td{height:30px;}
.regSIM, regSIM p, .step6, .terms{color:#333333;}
.portHandset{width: 25%!important;}
.questStart{display: none;}
.quest{position:relative;}
.disabc{display:block; background-color:#cccccc; padding: 0 5px; position:absolute; right:120px; top:0;}
.disQuestion{display:block; background-color:#cccccc; padding: 0 5px; right:120px; top:0;}
.helpHover{display:block; background-color:#cccccc; padding: 0 5px; position:absolute; right:50px; top:0;}

/*selectbox*/
.selectdiv {font-size: 18px; height: 31px; line-height: 20px; padding-top:2px; position: relative; display: inline-block; background: url("../images/arrow-down.png") no-repeat scroll right 8px center #DEF;}
.selectdiv:hover, .selectdiv:focus {background: url("../images/arrow-down.png") no-repeat scroll right 8px center #DEF;}
.selectdiv div {z-index:-1; border:0px solid #000; height:20px; overflow:hidden; padding:1px 0px 0px 5px; cursor:pointer;}
.selectboxdiv {height: 31px; line-height: 32px; padding: 4px; margin-top: 0; position: absolute; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -khtml-opacity: 0; -moz-opacity: 0; -web-kit-opacity:0; opacity: 0; cursor:pointer;}
.selectboxdiv option{padding: 4px; padding-top: 0; color: #333333; font-size: 18px; font-family: Gotham-Book;}

.customSelect {font-size: 18px; height: 31px; line-height: 20px; padding-top:2px; position: relative; display: inline-block; background: url("../images/arrow-down.png") no-repeat scroll right 8px center #DEF; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px}
.customSelect:hover, .customSelect:focus {background: url("../images/arrow-down.png") no-repeat scroll right 8px center #DEF; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px}
.customSelect div {z-index:-1; border:0px solid #000; height:20px; overflow:hidden; padding:1px 0px 0px 5px; cursor:pointer;}
.customSelectBox {height: 31px; line-height: 32px; padding: 4px; margin-top: 0; position: absolute; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -khtml-opacity: 0; -moz-opacity: 0; -web-kit-opacity:0; opacity: 0; cursor:pointer;}
.customSelectBox option{padding: 4px; padding-top: 0; color: #333333; font-size: 18px; font-family: Gotham-Book;}

/* OverLay */
#shadow{display: none;  position: fixed; top:0;left: 0; width: 100%; height:100%; background-color: rgba(0,0,0,0.6);}
#popup{padding: 20px; position: absolute; top:50%; left: 50%; background-color: white; width:500px;  height:auto;  margin-top:-250px; margin-left:-250px; overflow:auto;
}

/*switch*/
.formSwitch {width:580px; float:left;}
.demo{display:inline-block; margin-left:50px;}
.switch-button-label {float: left; font-size: 10pt; cursor: pointer;}
.switch-button-label.off { color: #adadad;}
.switch-button-label.on { color: #0088CC;}
.switch-button-background { float: left; position: relative; background: #fff; margin: 1px 10px; cursor: pointer; border:1px #dddddd solid;	
}
.switch-button-button {position: absolute; width:25px!important; height:20px!important; background: #8273e3;}
/*Progress Bar*/
.meter{background:#fff;      position: relative;}
.meter > span{background-color: #8273e3; display: block;  overflow: hidden;  position: relative; font-size:14px; padding:5px; color:#fff; }

.bgLogo{display:none;}
.europe .switch-button-background .switch-button-button{background-color:#E93397;}
/*Error Page*/
.errorP{   background-color:#8273e3; color:#fff; height:200px; padding:10px; text-align:center; margin-top:200px; }
.errorP span{ display:block; height:200px; margin-top:80px;}

/*403 Page*/
.error403{   background-color:#8273e3!important; color:#fff!important; height:200px; padding:10px; text-align:center; margin-top:50px; }
.error403 span{ display:block; height:200px; margin-top:80px;}

/*SessionExpired Page*/
.sessionExpBlock{  background-color:#8273e3!important; color:#fff!important; height:200px; padding:10px; text-align:center; margin-top:50px; }
.sessionExpBlock span{ display:inline;}
.sessionExp{ margin-top:80px;}
.sessionExpUl{ text-decoration:underline;}

/* POSTPAID SIGNUP Confirmation */
.postpaidSignupBlock{color:#333333; height:200px; padding:10px; text-align:center; margin-top:50px; }
.postpaidSignupBlock span{ display:inline;}
.postpaidSignupExp{ margin-top:80px;}
.postpaidSignupExpUl{ text-decoration:underline;}

/*Misc*/
.clearfix{clear:both; overflow:hidden; height:1px; font-size:1px; }
.fltrt{float:right;}
.fltlft{float: left;}
.active{background:#8273e3!important; color:#fff!important; }
.activeColor{ background-color:#8273e3!important; color:#fff!important; font-family:Gotham-Black; font-weight:lighter;}
.blkDisp{display:block;}
.inlineBlock{display:inline-block;}
.colorGrey{color:#333333;}
.bgGreyLiteButton{background:#DDDDDD; color:#535353;}
.pink{ color:#E93397; font-weight:bold;}
.alert{color:red; margin-bottom: 10px; }
.seperator{ background:url(../images/seperator.png) repeat-x left center; text-align:center; margin-top:20px; margin-bottom:20px; }
.bold{font-weight:bold;}
.displayNon{display:none;}
.disabled{background-color:#DDDDDD;}
.sucess{color:green; margin-bottom: 10px; font-weight: bold; }

/*Margins*/
.marginTop10{margin-top:10px;}
.marginLeft2{margin-left:2px;}
.marginTop20{margin-top: 20px;}
.marginTop30{margin-top:30px;}
.marginTop40{margin-top:40px;}
.marginTop50{margin-top:50px;}
.marginBot40{margin-bottom:40px;}
.marginLeft15{margin-left:15px;}
.marginLeft16{margin-left:16px;}
.marginLeft12{margin-left:12px;}
.marginLeft40{margin-left:40px;}
.marginLeft5{margin-left: 5px;}
.marginLeft9{margin-left: 9px;}
.marginLeft28{margin-left:28px;}
.marginLeft10{margin-left:10px;}
.marginLeft23{margin-left:23px;}
/*Fonts*/
.font16{font-size:16px; color:#333333;}
.font20{font-size:20px;}

/*Width*/
.width30per{width:30%;}
.width47per{width:47%;}
.width20per{width:20%;}
.width40per{width:400px;}
.width39per{width:392px;}
.width25per{width:250px;}
.width11per{width:112px;}
.width28per{width:282px;}
.width12per{width:120px;}
.width21per{width:210px;}
.width10per{width:100px;}
.width16per{width:160px;}
.width60{width:60px;}
.width45per{width:45%;}
.width185{width:185px;}
.width80{width:80px;}
.width150{width:150px;}
.width139{width:139px;}
.width193{width:193px;}



@media (max-width: 800px) {
	.btns input{width:100%; margin-top:10px;}
	
	.portHandset{width: 100%!important;}
    .handsetName{margin-left:28%; }
    /*Brand Select*/
    .brandSelect .btns input.registerSim{width:100%;}
	.brandSelect .btns input.manageCusmer{width:100%; margin-top:10px;}
	.brandSelect .btns input.simSwap{width:100%; margin-top:10px;}
	/*Confirmation*/
	.confirmation .btns{margin-top:0px;}
	.confirmation .btns input{width:100%;}
	.confirmation .btns input.print{margin-left:0px;}
	}
@media (max-width: 720px) {
	#main{width:90%;}
	body{font-size:14px;}
	#head .logo h1{font-size:18px;}
	/*Login Section*/
	.login{position:relative;}
	.login label{display:block; }
	
	select{font-size:14px;}
	.login .formGroup a{font-size:12px; margin-left:0; position:absolute; }
	.login .formGroup a.noUsername{top:2px; right:0;}
	.login .formGroup a.forgotP{top:75px; right:0;}
	.login .signUp{margin-top:10px; }
	.login .formGroup .signUp{width:100%; margin-left:0;}
	.login .formGroup .submitB{width:100%; margin-left:0;}
	.lang{font-size:12px;}
	.changePass{float: none; display: block;}
	.login .formGroup label{font-size:14px;  }
	.login .formGroup .userName, .login .formGroup .password{width:94%; padding:10px;  }
	
	/*Brand Select*/
	.brands{margin-top:10px; text-align:center;}
	.brands img{margin-top: 10px;}
	.brands p{font-size:14px;}
	.brandYallo, .brandOrtel, .brandLebara{float:none; width:100%; margin-left:0; margin-top:10px; font-size:12px;}
	.brandYallo span, .brandOrtel span, .brandLebara span{display:block;}
	.brandYallo img, .brandOrtel img, .brandLebara img{width:100%;}
	
	/*Manage Customer*/
	.manageCustmr .btns input{width:100%; margin-top:10px;}
	.manageCustmr .btns input.cancel{margin-left:0; }
	.manageCustmr .formGroup label{width:100%;}
	.manageCustmr .formGroup input.msisdn{width:100%; margin-top:5px;}
	
	/* Sim Swap*/
	.simSwap .formGroup{margin-top:10px;}
	.simSwap .formGroup label{width:100%; display:block;}
	.simSwap .formGroup input[type="text"]{width:100%; }
	.simSwap .formGroup .day{width:100%;}
	.simSwap .formGroup .month{width:100%; margin-top:5px;}
	.simSwap .formGroup .year{width:100%; margin-top:5px;}
	.simSwap .btns input{width:100%;}
	.simSwap .btns input.cancel{margin-left:0;}
	.simSwap .verified label{width:100%;}
	
	/* Postpaid Add New Sim*/
	.addSim .formGroup{margin-top:10px;}
	.addSim .formGroup label{width:100%; display:block;}
	.addSim .formGroup input[type="text"]{width:100%; margin-top: 40px;}
	.addSim .formGroup .day{width:100%;}
	.addSim .formGroup .month{width:100%; margin-top:5px;}
	.addSim .formGroup .year{width:100%; margin-top:5px;}
	.addSim .btns input{cursor:pointer; width:100%;}
	.addSim .btns input.cancel{margin-left:0;}
	
	
	/*Register SIM*/
	.registerSim{margin-top:20px;}
	
	.step1 h3{margin-top:20px;}
	.registerSim label{width:100%; }
	.registerSim input{ width:98%;}
	.registerSim .customSelect{width:100%; font-size:14px;}
	.registerSim .customSelectBox{width:100%; font-size:14px;}
	.registerSim .formGroup{margin-top:10px;}
	.registerSim .formGroup .phoneDetails input.iccid{width:100%;}
	.registerSim .formGroup .phoneDetails span{margin-left:0;}
	.registerSim .formGroup .phoneDetails input.lstDgt{width:100%;}
	.registerSim .portingG .portingDetails{margin-top:20px;}
	.registerSim .formGroup .dob .day{width:100%;}
	.registerSim .formGroup .dob .month{width:100%; margin-top:5px;}
	.registerSim .formGroup .dob .year{width:100%; margin-top:5px;}
	.registerSim .adress input.address{width:100%;}
	/* .registerSim .adress span{margin-left:0;} */
	.registerSim .adress input.hno{width:100%;}
	.registerSim .pascode input.postcode{width:100%;}
	.registerSim .pascode span{margin-left:0;}
	.registerSim .pascode input.cty{width:100%;}
	.registerSim .seperator .nxt{width:100px;}
	.registerSim .btns input{width:100%;}
	.registerSim .btns input.cancel{margin-left:0;}
	
	/*Confirmation*/
	
	.confirmation .btns{margin-top:0px;}
	.confirmation .btns input{width:100%;}
	.confirmation .btns input.print{margin-left:0px;}
	
	
	.logoAldi h1{float: none;}
	.formGroup label{width:100%;}
	.formGroup input{width:98%;}
	.logoAldi{text-align: center;}
	.formGroup select{width:100%;}
	.formGroup label, .formGroup span{font-size:14px;}
	input{font-size:14px;}
	input[type=checkbox]{width:2%;}
	.adress input[type=text]{width:98%}
	.adress select{width:20%;}
	.adress .selectdiv {width: 20%; font-size: 14px; }
	 .adress .selectboxdiv{width: 100%;}
	.dob select{margin-left:0; margin-top:5px; width:32%;}
	.dob .selectdiv{width: 32%; margin-left: 0;}
	.dob .selectboxdiv{width: 100%;}
	.pascode span.marginLeft12{margin-left:0;}
	input.activePurple{width:100%; padding:5px;}
	input[value=Cancel]{width:100%; margin-left:0; padding:5px; margin-top:5px;}
	.teasers{width:280px;}
	.demo{margin-left:0;}
	.confirmation input[type=button]{width:100%; margin-left:0; margin-top:10px; padding:5px;}
	h3{font-size:16px;}
	.smLogo{display:none;}
	.bgLogo{display:block; margin:auto;}
	.logoYallo{text-align:center;}
	.logoYallo h1{margin-top:20px; float:none;}
	.mandateStart{display: inline-block; margin-left:0;}
	.mandate{display: none; margin-left:0;}
	.questStart{display:inline-block;}
	.questEnd{display: none;}
	.selectdiv{width: 100%; font-size: 14px; height: 29px; }
	.selectboxdiv{width: 100%;}
    .logoAldi{float: none; text-align: center;}
	.logoAldi h1{float: none;}
	#head .logo{float: none; text-align: center;}
	#head .logo img{float: none;}
	#head .logo h1{float: none;}

	}

@media (max-width: 760px) {
.handsetName{margin-left:0;}
}
@media (max-width: 320px) {

#head .logo h1 span{font-size: 12px;}
.rtSec{font-size: 12px;}
.details{font-size: 14px;}

}

@media screen and (-webkit-min-device-pixel-ratio:0) {
.selectboxdiv {height: 31px; line-height: 25px; padding: 4px;  margin-top: 0;  position: absolute; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=1.0); -khtml-opacity: 1.0; -moz-opacity: 1.0; opacity: 1.0; cursor:pointer;}
}

#custDetails label {
	text
}
#custDetails label span {
    width: 75%;
    float: right;
    background-color: #ccc;
    color: black;
}