/* HBB Prepaid data plans (Mauri style) */
.PaySec #internetPrepaidCardBlockId{display: none!important;}
.HBBPrePlan {  display: none;  }
.HBBPrePlan .bline{ padding-bottom:5px;}
.HBBDataCon .bar-value{ color:#7c7c7c;}
.HBBDataCon .progress-bar{ height:100%; border-radius:5px;}
.HBBDataCon .box .gray-bar{ height:15px;border-radius:5px;}
.HBBDataCon h3{ font-weight:600;    padding: 0 15px;}
.HBBDataCon .boxBline{border-bottom: 2px solid #bbbbbb; box-shadow: 0px 2px 0px 0px #bbbbbb7a;padding: 0 15px;}
.HBBDataCon .bar-text{ text-align:center; font-weight:600; font-size:85%; padding-top:20px}
.HBBDataCon .box .bar-heading{ margin-bottom:0px;}
 .HBBPrePlan .plan-tab .nav-tabs > li{border: 1px solid #dcdcdc;border-radius: 3px; margin-right: 5px;text-align: center;min-width: 180px;}
/*.HBBPrePlan .plan-tab .nav-tabs > li{border: 1px solid #dcdcdc;border-radius: 3px; margin-right: 5px;text-align: center;min-width: 240px;} */
.HBBPrePlan .plan-tab .nav-tabs > li > a,.HBBPrePlan .plan-tab .nav-tabs > li > a:hover{ color:#000;}
.HBBPrePlan .plan-tab .nav-tabs > li{ background-color:#f6f6f6;}
.HBBPrePlan .plan-tab .nav-tabs > li > a:hover,.HBBPrePlan .plan-tab .nav-tabs .active, .HBBPrePlan .plan-tab .nav-tabs > li:hover{ background-color:#fff;}
.HBBPrePlan .plan-tab .nav-tabs { border-bottom: 5px solid #dcdcdc;}
.HBBPrePlan .plan-tab .tab-content{ overflow:hidden}
.HBBPrePlan .plan-tab .planDetails{border: 1px solid #dcdcdc;border-radius: 3px;margin-bottom: 20px; position:relative}
.HBBPrePlan .plan-tab .planDetails .font30{ font-size:30px;font-weight: 400;}
.HBBPrePlan .plan-tab .planDetails .borderL{border-left: 1px solid #eeeeee;}
.HBBPrePlan .plan-tab .planDetails .planLabel{background-color: #f6f6f6;padding: 2px 5px; margin:0; position: absolute; right:0}
.HBBPrePlan .plan-tab .planDetails .activatedLabel{background-color: #8ec53f;padding: 2px 5px;color: #fff; position:absolute}
.HBBPrePlan .plan-tab .planDetails .grey-text{ color:#777777;}
.HBBPrePlan .plan-tab .plan-list{ list-style: none;padding: 0;}
.HBBPrePlan .plan-tab .activatedPkg{ border:1px solid #8ec53f;}
.HBBPrePlan .btn-primary{padding-left: 25px;padding-right: 25px;}
.HBBPrePlan .plan-cond{ margin:15px 25px; border-top:1px solid #bacad2; padding-top:15px}
.HBBPrePlan .preplanModal .close{ padding-left:0px;}
.HBBPrePlan .preplanModal .fa-check-circle{font-size: 25px;color: #77aa32;}
.HBBDataCon .wrap{ padding:0 !important;}

.HBBPrePlan .plan-list .planDetailCont{width: 100%;float: inherit;margin: 3px 0 15px 0;display: block;overflow: hidden;}
.HBBPrePlan .planDetails{overflow: hidden;width: 100%;float: left;}
.HBBPrePlan .planDetails .data{float: left; width: 20%;padding: 40px 20px 20px;}
.HBBPrePlan .planDetails .rental{width: 28%;float: left;padding: 20px; margin:15px 0; }
/* .HBBPrePlan .planDetails .rental{width: 28%;float: left;padding: 20px; margin:10px 0; } */
.HBBPrePlan .planDetails .actionBtn{width: 28%;float: left;padding: 30px;}

.PaymentCMSOffers{ list-style: none; clear: both; margin: 0; padding: 0 10px; }
.PaymentCMSOffers li{ background: #f7f6f6; padding: 10px 15px; border-radius: 3px; display: inline-block; margin-right: 10px; }

/*Menu- fixed line section hide
.menu-box>ul li:nth-child(2){ display:none;}*/

@media(max-width:1199px){
.HBBPrePlan .plan-tab .nav-tabs > li{ min-width:120px;padding-left: 5px; padding-right: 5px;}
}
@media(max-width:767px){
.HBBPrePlan .plan-tab .nav-tabs > li{ min-width:auto;}
.HBBDataCon h3, .HBBDataCon .boxBline{ padding:0;}
.HBBPrePlan .xs_push_t20{ margin-top:20px;}
}
@media(max-width:600px){
.HBBPrePlan .plan-tab .nav-tabs > li {width: 23%;/*min-height: 90px;*/}
.HBBPrePlan .search .col-xs-4{width: 50%;padding-bottom: 15px;}
.HBBPrePlan .planDetails .data { width: 23%;padding: 40px 10px 0;}
.HBBPrePlan .planDetails .rental {width: 33%; padding: 25px 10px 0;margin: 10px 0;}
.HBBPrePlan .planDetails .actionBtn { width: 100%; padding: 0 10px 10px 10px;margin-top: -15px; text-align:right}
.HBBPrePlan .plan-cond { margin: 15px 10px;}
}
@media(max-width:500px){
.HBBPrePlan .plan-tab .planDetails .planLabel {margin-bottom:0;}
.HBBPrePlan .plan-cond {margin: 15px 15px;}
.HBBPrePlan .plan-tab .nav-tabs > li {width: 23%;font-size: 12px;}
.HBBPrePlan .plan-tab .planDetails .font30{ font-size:20px;}
.HBBPrePlan .planDetails .data {width: 28%;}
.HBBPrePlan .planDetails .rental {width: 40%;}
.HBBPrePlan .plan-tab .planDetails .planLabel, .HBBPrePlan .plan-tab .planDetails .activatedLabel{font-size: 11px;}
}
@media(max-width:400px){
.HBBPrePlan .modal-body{padding: 30px 8px;}
}
/* End HBB Prepaid data plans (Mauri style) */

/*Bill Payment - bulk*/
.postMyplan .PaySec{ clear: both }
  .postMyplan .ProcessContainer{ margin: 20px 0 0 28px; }
  .postMyplan .Amounts, .postMyplan .InternetCards { list-style: none; overflow: hidden; margin-left: 0; padding-left: 0; }
  .postMyplan .Amounts li{ font-size: 1.5em!important; width: 22%; float: left; margin-right: 3%;}
  .postMyplan .InternetCards li{ font-size: 1.2em!important; width: 17%; float: left; margin-right: 3%;}


  .postMyplan .select-control {display: block; width: 100%; height: 40px; padding: 10px 10px; font-size: 14px; line-height: 1.42857143; color: #1d2429; background-color: #ffffff; background-image: none; border: 2px solid #63717a; border-radius: 2px;}
   .postMyplan .ConnectionCol { list-style: none; margin:0 0 20px 0; padding:0; display: block; overflow: hidden;}
   .postMyplan .ConnectionCol li{padding: 5px 0;  border-bottom: 1px solid #eee; display: block; overflow: hidden;}
   .postMyplan .ConnectionCol li div{ float: left; width: 25%;  }
   .postMyplan .LargeTxt{ font-size: 1.5em; }
   .postMyplan .GreenBorderBtn{ border:1px solid #8dc63f; background: #fff; color: #8dc63f; }
   .postMyplan .smalllinehight{ line-height: 14px; margin-bottom: 5px; }
   .postMyplan .MobileFixed6{ float: right; }
    .postMyplan .paymentMethod li{float: left;  padding: 10px; margin-right: 20px; border:1px solid #b1b1b1; border-radius: 3px; text-align: center; display: block; overflow: hidden; font-size: 14px; min-width: 110px; }
     .postMyplan .paymentMethod li:hover,  .postMyplan .paymentMethod li.active{ background:#efffda; cursor: pointer;  }
     .postMyplan .PayHalf{ width: 50%; float: right; }
     .postMyplan .PayInstantly{ width: 38%; float: right }
     .postMyplan .PayNormal{ width: 58%; float: left }
     .changeAmt{width: 100px!important; float: left}
    .PaySec .PaybleAmounts li{ float: left; border-radius:3px; border:1px solid #8dc63f; padding:8px 15px; margin-right: 15px; font-size: 1.5em;   }
    .PaySec .PaybleAmounts li input , .PaySec .PaybleAmounts li p{ float: left }
    .PaySec .PaybleAmounts li input { margin:8px 5px 0 0; }
    .PaySec .PaybleAmounts li p{ margin-bottom: 0; }
 @media (max-width: 640px)
{
   .postMyplan .mobile-MargB{ margin-bottom: 10px; }
   .postMyplan .PayHalf{ width: 100%; }
   .postMyplan .MobileFixed6 .col-md-4{ width: 33%; float: left } 
     .postMyplan .PayNormal .col-md-7{ width: 50%; float: left } 
     .postMyplan .PayNormal .col-md-5{ width: 50%; float: left } 
     .postMyplan .PayInstantly .col-md-2{ width: 20%; float: left } 
     .postMyplan .PayInstantly .col-md-10{ width: 80%; float: left } 
     .postMyplan .ConnectionCol .header{ font-size: 10px; }
     .postMyplan .ConnectionCol .paytype{ width: 40%; float: left; font-size: 0.9em; }
   .postMyplan .ConnectionCol li div{  width: 30%; float: left}
    /*.postMyplan .ConnectionCol li .MobileEdit{ width: 100%; text-align: right; clear: both; }*/
     .changeAmt{width: 70px!important; float: left}
    .postMyplan .ConnectionCol input[type="number"]{width: 50px!important; float: left}
    .postMyplan .MobileFixed6 .pull-right{ margin-right: 8px; }
  .postMyplan .GreenBorderBtn{ border:1px solid #8dc63f; background: #fff; color: #8dc63f; font-size: 12px; }
  .postMyplan .Amounts li{ font-size: 1.2em!important; width: 43%; float: left; margin-right: 2%;}
  .postMyplan .Amounts{ margin-bottom: 0; }

  .postMyplan .paymentMethod li{float: left; margin-right: 10px; }
  .postMyplan .InternetCards li{ font-size: 0.9em!important; width: 48%; float: left; margin-right: 2%;}

 }
/* iCheck plugin Line skin, green
----------------------------------- */
.Amounts .icheckbox_line-green,.Amounts .iradio_line-green {position: relative; display: block; line-height: 17px; color: #333;background: #fff; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; cursor: pointer; border:1px solid #b1b1b1; border-radius: 3px; padding: 11px 20px 11px 5px; margin:0 3% 10px 0; }
.InternetCards .icheckbox_line-green,.InternetCards .iradio_line-green {position: relative; display: block; line-height: 30px; color: #333;background: #fff; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; cursor: pointer; border:1px solid #b1b1b1; border-radius: 3px; padding: 11px 20px 11px 5px; margin:0 3% 10px 0; }
.icheckbox_line-green .icheck_line-icon, .iradio_line-green .icheck_line-icon { position: absolute; top: 50%; right: 13px; width: 13px; height: 11px; margin: -5px 0 0 0; padding: 0; overflow: hidden; background: url(../img/line.png) no-repeat;  border: none;}
.icheckbox_line-green.hover, .icheckbox_line-green.checked.hover, .iradio_line-green.hover { background: #efffda; border:1px solid #8dc63f;}
.icheckbox_line-green.checked, .iradio_line-green.checked { background: #efffda; border:1px solid #8dc63f;}
.icheckbox_line-green.checked .icheck_line-icon, .iradio_line-green.checked .icheck_line-icon { background-position: -15px 0;}
.icheckbox_line-green.disabled, .iradio_line-green.disabled { background: #89E6C4; cursor: default;}
.icheckbox_line-green.disabled .icheck_line-icon, .iradio_line-green.disabled .icheck_line-icon { background-position: -30px 0;}
.icheckbox_line-green.checked.disabled, .iradio_line-green.checked.disabled {background: #89E6C4;}
.icheckbox_line-green.checked.disabled .icheck_line-icon, .iradio_line-green.checked.disabled .icheck_line-icon {background-position: -45px 0;}
/* HiDPI support */
@media (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi), (min-resolution: 1.25dppx) {.icheckbox_line-green .icheck_line-icon, .iradio_line-green .icheck_line-icon {background-image: url(../img/line@2x.png);-webkit-background-size: 60px 13px; background-size: 60px 13px;}}

/*Bill Payment - bulk*/

/****** Postpaid Myplan Process *******/
.postMyplan input[type="file"]{width: 130px;float: right;padding-top: 20px;}
.postMyplan .billing{ float:none !important; padding-top:0px !important;width: 150px !important;}
.postMyplan .saveBtn{    background-color: #000;color: #fff;padding:3px 5px 0px;;margin-top: 20px;font-size: 15px;}
.postMyplan input[type="file"], .OnlineOrder input[type="file"] {display: block !important; visibility:hidden}
.custom-file-upload {display: inline-block;padding: 6px 8px;cursor: pointer;background-color: #000;color: #fff;border-radius: 3px;margin-top: 12px; font-weight:normal}
.postMyplan .wordBreak	{word-wrap: break-word;}		
.postMyplan .payment-card p {text-align: center; float: left;border: 1px solid #ccc;border-radius: 3px;padding: 15px;margin-right: 20px;}
.postMyplan .payment-card p:hover{background-color: #f7f7f7;border: none; border:1px solid #f7f7f7;}
.postMyplan .highlight-box {width: 300px;}
.postMyplan .tblbg {background-color: #f7f7f7;padding: 0 10px 1px 10px;}
.postMyplan .tblbg tr>td { padding-left:8px}
.postMyplan .tick .fa {color: #fff;}
@media(max-width:500px){.postMyplan .padding_l50 {padding-left: 0px;}.postMyplan .push_l60{ margin-left:15px;}/*.postMyplan .payment table {width: 100%;}*/ .postMyplan .payment-card img{ width:50%;}.postMyplan .payment-card p{padding: 10px;margin-right: 10px;}.postMyplan .highlight-box {width: 250px;}}
@media(max-width:767px){.postMyplan .push_l60{ margin-left:15px;}.postMyplan .push_r10p {margin-right: 0;}.postMyplan .Slide-Cont {padding-left: 10px;}.postMyplan input[type="number"] {width: 120px !important;}.postMyplan .push_l40 {margin-left: 20px !important;}}
@media(max-width:860px){.postMyplan  input[type="file"]{ float:none;}}
@media(min-width:1199px){.custom-file-upload{margin-left: -30px;}}
/****** Postpaid Myplan Process *******/


.no-padding-l{ padding-left:0px !important;}
.padding_b50{padding-bottom: 50px;}
.OnlineOrder .refreshbtn{border: 1px solid #1d719c; border-radius: 3px;color: #1d719c;}
.OnlineOrder .borderR{border-right: 1px solid #ccc;}
.OnlineOrder .custumNo{background-color: #f3f3f3;padding: 9px; width:100%!important; font-size: 12px!important;}
.font25{ font-size:25px;}
.no-margin-b{ margin-bottom:0px;}
.OnlineOrder input[type="file"]{width: 130px;float: right;padding-top: 20px;}
.OnlineOrder .billing{ float:none !important; padding-top:0px !important;width: 150px !important; }
.OnlineOrder .billing::before {content: 'Upload Billing Proof';}
.OnlineOrder .nicUpload::before {content: 'Upload Back Side';}
.OnlineOrder .custom-file-input::-webkit-file-upload-button {display:none;}
.OnlineOrder .custom-file-input::before {display: inline-block;/*background: -webkit-linear-gradient(top, #f9f9f9, #e3e3e3);*/border: 1px solid #000; border-radius: 3px;padding: 5px 8px;outline: none;white-space: nowrap;-webkit-user-select: none;cursor: pointer;font-size: 10pt;color:#fff; background-color:#000;}
.OnlineOrder .custom-file-upload {margin-left: 0;}
.OnlineOrder .graybg{background-color:#f3f3f3;padding: 10px;}
.OnlineOrder  .payment p{/*width: 13%;*/ text-align: center;float: left;border: 1px solid #ccc;border-radius: 3px;padding: 5px 15px 15px;margin-right: 20px;}
.OnlineOrder .payment a, .OnlineOrder .paymentbank a{ color:#000;}
.OnlineOrder .payment p:hover{background-color: #eff6e5;border: none; border:1px solid #f7f7f7; cursor:pointer}
.simMyprofile h2{ color:#fff;}
.simMyprofile .collapse-content .panel-title a{color: #3a444b;font-size: 15px; font-weight:normal}
.simMyprofile  .floatL{ float:left;}
.text-grey{ color:#A8A8A8;}
.simMyprofile .collapse-content .panel-title a{ background-color:transparent;;}
.simMyprofile .panel-collapse{    border-top: 1px solid #e2e6e8;}
.simMyprofile .panel-default{background-color: rgba(226, 235, 240, 0.4);    border-bottom: 2px solid #bacad2;}
.simMyprofile .basic-table tbody tr td{ border:none;}
.simMyprofile .width20 tbody tr td{ width:20%}
.simMyprofile .smalltxt{ font-size:75%;}
.simMyprofile .errorbg{background-color: #e9e9e9;}
.prepaidPlan .mconnect{background-color: #5c5578;color: #fff;}
 .prepaidPlan .cart-summary .bline{  border-bottom: 1px solid #bacad2;}
.push_l10{ margin-left:10px;}
.floatL{ float:left;}
.push_l20{ margin-left:20px;}.push_r20{ margin-right:20px;}
.prepaidPlan .greyborder{border: 1px solid #bacad2;border-radius:3px;margin-right: 10px;}

.prepaidPlan .offers table{margin:5px 0}
.prepaidPlan .offers tr>td{border-right: 1px solid #ccc;padding: 0 10px;line-height: 0.9;}
.prepaidPlan table .small {font-size: 75%;}
.prepaidPlan #more p{border-bottom: 1px solid #bacad2;}

.prepaidPlan table #faDown,.prepaidPlan table #faUp{margin-left: 15px; cursor:pointer;}
.prepaidPlan .offers tr>td:last-child{border-right:none;}

/* Accordion styles - Prepaid Packages Offer Section */
.displayNone{ display:none; cursor:pointer}
.prepaidPlan .DetailrightBox{/*width: 70%;*/width: 97.2%;float: right;border: 1px solid #ccc; padding: 10px 10px;/*margin:0 -16px 15px 0 !important; */border-top:0px;border-top: none !important;background-color: #fff; margin-left:-1px !important;}
.prepaidPlan #more{/*width: 70%;float: right; margin-right: 10px; border: 1px solid #ccc; padding: 10px 10px;*/border-radius: 3px;}
.prepaidPlan .offers .collapse-content .panel-title a{color: #4e555a; padding:0px;background-color: transparent;    border-top: none !important;padding-top: 10px;}
.prepaidPlan .offers .collapse-content .panel-title a.collapsed {color: #4e555a;background-color: transparent;padding-top: 10px;}
.prepaidPlan .offers .collapse-content .panel-title a:after{left: 0;right: 10px;}
.prepaidPlan .offers .collapse-content { border-bottom: none !important;}
.prepaidPlan .offers .collapse-content .panel-body {    margin-top: 15px; border: 1px solid #bacad2;padding-top: 10px;    margin-left: -11px !important;margin-right: 10px !important;}
.prepaidPlan .offers .collapse-content .panel-body { position: absolute; z-index: 1000;background-color: #fff;}
.prepaidPlan .offers .collapse-content .panel-default{padding: 10px 10px 10px 10px;min-height: 60px;}
.prepaidPlan .offers .accordionRadio{float: left; border-right: 1px solid #ccc; margin-right: 10px;padding-right: 10px; min-height: 40px;padding-top: 10px;}
.prepaidPlan .offers{font-size:15px;}
/*.collapsing{ width:100%;}*/
@media (max-width:500px){.displayNone{ display:block;} #displayMobile{ display:none;}.prepaidPlan .accordionRadio{margin-right: 10px;} .offers #displayMobile{ display: block!important; }}
/* Accordion styles */

.prepaidPlan .padding_r10{padding-right: 10px; }
.prepaidPlan .borderL{border-left: 1px solid #ccc;padding: 10px 5px;}
.prepaidPlan .offers table{ height:50px;}
.prepaidPlan .reloadamt{border-bottom: 1px solid #999;border-left: none;border-right: none;border-top: none; font-weight:600; color:#000}
.push_lr15{ margin:0px 15px;}

.OnlineOrder .viewPrint{ display:none;}
.OnlineOrder #input_calender, .input-fixedNo  {position:relative;}
.OnlineOrder #input_img {position:absolute;bottom:7px;right:5px;width:24px;height:24px;}
.OnlineOrder #input_Num {position: absolute;left: 38%; background-color: #999; padding: 9px;}
.OnlineOrder .bline { padding-bottom: 5px !important;}
.OnlineOrder .highlight-box {width: 300px;}
.OnlineOrder .tblbg {background-color: #f7f7f7;padding: 0 10px 1px 10px;}
.OnlineOrder .whitebg {background-color: #fff;}
.OnlineOrder  .padding_l10{ padding-left:10px;}
.OnlineOrder .totalTbl{width: 270px;float: right;}
.OnlineOrder  hr{ border-top:none;}
.OnlineOrder a{cursor: pointer;}
.OnlineOrder .confirmation-page .order-info-wrap{ border-top:0;}
.green-text {color: #8dc63f !important;}
.OnlineOrder .confirmation-page .order-info-wrap{ margin-top:0px;}
.OnlineOrder .ds-t .item-cell .cart-product .cart-product-img{ height:auto;}
.OnlineOrder .col5{width:20%; float:left;}
.prepaidPlan .graybg, .simMyprofile .graybg{background-color: #f5f5f5;}
.simMyprofile hr{    border-top: 1px solid #e2e6e8;}
.prepaidPlan .graybg p{ padding:5px 0;}
.prepaidPlan .mConcenter{padding-left: 30%;}
.Onlinemodal .modal-content .close{ width:50px;}


/*local - sri lanka icon call icons*/
.LocalIcon {margin-top: 10px;}
.LocalIcon .icon {background: url(../img/sri-lanka-icon.png) no-repeat; background-size: 10px 17px; margin-top: 5px; width: 10px; height: 30px; display: block; float: left; margin-right: 25px}
.LocalIcon .labels{display: inline-block;}
.LocalIcon .localcalls{margin-bottom: 0; font-size: 1rem; font-weight: normal;}
.LocalIcon .price{font-weight: 500;}
/*Carousal changes for the card pkgs*/
.Plan-In-Detail .slides li .card {width: 300px; margin: 0 auto; display: table; padding: 8px 12.5px;}
.Plan-In-Detail .card-action{ margin-left: -12px; }
.Plan-In-Detail .slides li .card {width: 300px; height: 350px; }
.Plan-In-Detail .slides li .card h3{ margin-top: 10px!important; }

/*Annonymous Order Status*/
.Order-Box{ background: #f4f7f9; overflow: hidden; border-bottom: 2px solid #ccc;}
.Order-Box .Header{ overflow: hidden; border-bottom: 1px solid #ccc; }
.Order-Box .Item{ padding:20px 0; border-bottom: 1px solid #ccc; overflow: hidden;  }
.Order-Box .Order-Status{ list-style: none; margin:0; padding: 0;  }
.Order-Box .Order-Status li{ float: left; margin-right: 30px; padding-left:60px;  }
.Order-Box .Order-Status li:first-child{ background: url(images/tick.png) no-repeat left 5px; padding-left: 30px; }
.Order-Box .Order-Status li.Success{ background: url(images/tick-line.png) no-repeat left 5px; }
.Order-Box .Order-Status li.Failed{ background: url(images/cross-line.png) no-repeat left 5px; }
.Order-Box .Order-Status li.Process{ background: url(images/empty-line.png) no-repeat left 5px; }
.Order-Box .Error{ background: #e9e9e9; padding:5px; text-align: center;  }

@media (max-width: 768px) {
.Order-Box{ padding: 5px; margin-top: 20px; }
.Order-Box .col-md-3{ width: 50%; float: left }
.Order-Box .Order-Status li{ float: inherit; margin-right: 0; padding:0 0 0px 30px; display: block;  }
.Order-Box .Order-Status li.Success{ background: url(images/tick-vline.png) no-repeat left 5px; }
.Order-Box .Order-Status li.Failed{ background: url(images/cross-vline.png) no-repeat left 5px; }
.Order-Box .Order-Status li.Process{ background: url(images/empty-vline.png) no-repeat left 5px; }
.Order-Box .Order-Status li:first-child p{ padding-top: 0; }
.Order-Box .Order-Status li p{ padding-top: 15px; }
}
/****/


.OnlineOrder .input-group{position: relative;display: table;border-collapse: separate;border: 2px solid #63717a;border-radius:3px}
.OnlineOrder .input-group-addon:first-child ,.OnlineOrder .input-group input{border: 0;}
.OnlineOrder .input-group-addon {padding: 10px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    color: #555;
    text-align: center;
	background-color: #999;
    border: 2px solid #63717a;
    border-right: none;}
.OnlineOrder .input-group-addon, .input-group-btn {
   /* width: 1%;*/
    white-space: nowrap;
    vertical-align: middle;
}
.OnlineOrder .input-group .form-control, .input-group-addon, .input-group-btn {
    display: table-cell;
}
.OnlineOrder .input-group .form-control, .input-group-addon, .input-group-btn {
    display: table-cell;
}
.simMyprofile .active a{ color:#ed1c24;}
.simMyprofile .col2{ width:10%; float:left;}
.simMyprofile .col10{ width:87%; float:left;}
.simMyprofile .collapse-content .panel-title a:after{ font-size:35px; top:-30px;}
.simMyprofile .floatR{ float:right;}
.simMyprofile .gradientBg{background: linear-gradient(#a9aaae, #fff);}
.simMyprofile .whitebtn {background-color: #fff; border-radius: 3px;}
.simMyprofile .borderB{ border-bottom: 1px solid #3a444b;padding: 15px;}
.simMyprofile .borderB h2{padding: 10px 0;}
.push_t15{ margin-top:15px;}
.push7{ margin:7px;}
.simMyprofile .circle{ font-size:12px;}
.hiddensm{ display:block}
.visiblesm{ display:none}
.simMyprofile .collapse-content .panel-body{ padding-bottom:30px;}
.simMyprofile .collapse-content .panel-title a{    border-top:none; margin-top:7px;}

@media(min-width:767px){
.prepaidPlan .fixedWidth input{ width:300px; margin:0 auto;}
}
@media(max-width:1199px) and (min-width:767px){
.simMyprofile .col10{ width:100%;}
}
@media(max-width:1199px) and (min-width:992px){
.OnlineOrder #input_Num {left: 39%;padding: 10px;}
}
@media(max-width:851px) and (min-width:767px){.OnlineOrder .col5{width:25%;}}
@media(max-width:767px){
/*.simMyprofile .mobiletblWidth{width: 700px;}*/
.simMyprofile .col10 {width: 100%;}
.simMyprofile .col2{ width:12%;}
/*.simMyprofile .col10{ width:85%;}*/
.OnlineOrder .push_l60{ margin-left: 15px;}
.prepaidPlan .offers input[type="radio"]{ margin-left:8px;}
.OnlineOrder #input_Num {left: 0;top: 45%;    padding: 10px;}
.OnlineOrder .borderR {border-right: none;}
.OnlineOrder .xsClear{ clear:both;}
.OnlineOrder .totalTbl { width: 60%;}
.simMyprofile .imgHalf{ width:40%;}
}
@media(max-width:600px){
.OnlineOrder .col5{width:33.33%;}
.hiddensm{ display:none}
.visiblesm{ display:block}
}
@media(max-width:500px){
.prepaidPlan .xsFull{ width:100%;}
.prepaidPlan  .push_lr15{margin:15px 0;} 
.OnlineOrder .xsimg{ width:100%; }
}
@media(max-width:400px){
.simMyprofile .xsFull h2, .simMyprofile .xsFull p{ width:100%; text-align:center}
.simMyprofile .xsFull img{ width:30%}
.OnlineOrder .col5,  .simMyprofile .xshalf{width:50%;}
.OnlineOrder .highlight-box {width: 250px;}
.xsFont11, .simMyprofile .xsFont11 p{ font-size:11px;}
.OnlineOrder .totalTbl{ width: 100%;}
.OnlineOrder .push_l40 {margin-left: 20px !important;}
.simMyprofile .collapse-content .panel-title a:after {top: -70px; padding-right: 10px;}
}


/*My Plan Prepaid*/
/*some public classes used for myplan and O2A classes*/
.font18{font-size:18px;}
.myplan-footer {position: fixed;bottom: 0; width: 100%;z-index: 1000;}
.myplan-data { background-color: #f8f8f8;border-top: 1px solid #ccc;padding-top: 20px;padding-bottom: 10px;}
.paddingb20{ padding-bottom:20px;}
.push_t15{ margin-top:15px;}
.push_l10{ margin-left:10px;}
.padding_l50{ margin-left:50px;}
.push_l28{ margin-left:28px;}
.paymentbank li:last-child span{padding: 32px !important;}
.PreMyplan .PreMyplan-confirm .paymentbank span:hover{ background-color:#fffce0; border:1px solid #fcf40f !important; border-radius:3px; width:100%;padding: 15px}
.PreMyplan-pay{ background-color:#f8f8f8; border-top:1px solid #ccc; padding-top:20px; padding-bottom:20px}
.padding_l50{ padding-left:50px;}
.blue-text{ color:#55b1ff;}
.footer{position: fixed;bottom: 0; width: 100%;z-index: 1000;}
.float-none{float:none;}
.break{ display:none;}

.myplan-footer .btn{white-space: normal;}
.prepaid-myplan .table > thead > tr > th{    border-bottom: 1px solid #e5eef2;}
.prepaid-myplan .table > tbody > tr:last-child{    border-bottom: 1px solid #63717a;}
.prepaid-myplan  .Float-Right{ float:right;}
.prepaid-myplan .tabImg{width:45px; float:left;}
.prepaid-myplan .nav-tabs > li a{background-color: #fff;border: 2px solid #f0f0f0;padding: 10px 40px; font-weight:bold;color: #000;}
.prepaid-myplan .nav-tabs > li.active > a,.prepaid-myplan  .nav-tabs > li.active > a:hover,.prepaid-myplan  .nav-tabs > li.active > a:focus, .prepaid-myplan .nav-tabs > li a:hover{background-color: #f0f0f0 !important;border: 2px solid #f0f0f0;}
.prepaid-myplan .nav-tabs {border-bottom: 2px solid #f0f0f0;color: #000;}
.prepaid-myplan input[type="text"], .prepaid-myplan input[type="number"], select{    width: 60% !important;display: inline-block;}
/* Prepaid Myplan */
.PreMyplan .stepNo{ color:#fff;  background-color:#8dc63f;border-radius: 50%; padding: 5px 10px;margin-right: 15px;margin-left: -17px;}
.PreMyplan .push_l60{  margin-left:60px;}
.PreMyplan .borderLeft{border-left: 5px solid #8dc63f;}
.PreMyplan .paddingt20{ padding-top:20px;}
.PreMyplan .PreMyplan-info .push_R30 span{ margin-right:30px;}
.PreMyplan .FloatR{ float:right;}
.PreMyplan .col-md-4 input[type="text"], .PreMyplan .col-md-4 select, .PreMyplan .col-md-4 input[type="number"]{ width:80% !important;}
.PreMyplan .push_r10p{margin-right: 10%;}
.PreMyplan .floatL{ float:left;}
.PreMyplan .PreMyplan-delivery select{ width:33.333%}
.PreMyplan .PreMyplan-confirm table{ width:60%;}
.PreMyplan .PreMyplan-confirm .payment p{/*width: 13%;*/ text-align: center;float: left;border: 1px solid #ccc;border-radius: 3px;padding: 15px;margin-right: 20px;}
.PreMyplan .PreMyplan-confirm .payment a, .PreMyplan .PreMyplan-confirm .paymentbank a{ color:#000;}
.PreMyplan .PreMyplan-confirm .payment p:hover{background-color: #f7f7f7;border: none; border:1px solid #f7f7f7;}
.PreMyplan .PreMyplan-confirm .paymentbank span{background-color: #f7f7f7;border-right: 1px solid #ccc !important; padding: 20px;    border: 1px solid #f7f7f7;width:100%;    padding: 15px;}
/*.PreMyplan .PreMyplan-confirm .paymentbank span img{width:100%;}*/
/*.PreMyplan .PreMyplan-confirm .paymentbank span:last-child{border-right:none;}*/
.prepaid-myplan .highlight-box{ width:300px;}
.PreMyplan .close{color: red;font-weight: 600;font-size: 15px; padding-left: 15px;}
.PreMyplan .custom-file-input::-webkit-file-upload-button {display:none;}
.PreMyplan .custom-file-input::before {display: inline-block;/*background: -webkit-linear-gradient(top, #f9f9f9, #e3e3e3);*/border: 1px solid #000; border-radius: 3px;padding: 5px 8px;outline: none;white-space: nowrap;-webkit-user-select: none;cursor: pointer;font-size: 10pt;color:#fff; background-color:#000;}
.PreMyplan .PreMyplan-per-info input[type="file"]{width: 130px;float: right;padding-top: 20px;}
.PreMyplan .bline{padding: 20px 0 10px 0;}
.PreMyplan .nicUpload::before {content: 'Upload Back Side';}
.PreMyplan .billing::before {content: 'Upload Billing Proof';}
.PreMyplan .tick{    padding: 5px 7px !important;}
.PreMyplan .PreMyplan-confirm .payment p img{ width:100%;}


@media(max-width:1199px){
  .PreMyplan .paymentbank img{width:85px;} .paymentbank li:last-child span{padding: 25px !important;}
}

@media(max-width:900px){
  .PreMyplan input[type="file"]{ float:none;}
}

@media(max-width:860px){
  .PreMyplan .PreMyplan-per-info input[type="file"]{ float:none;}
  .PreMyplan .paymentbank img{width:60px;} .paymentbank li:last-child span{padding: 18px !important;}
}

@media(max-width:767px){
  .clearXS{clear:both;}
  /*.PreMyplan input[type="text"], select , .PreMyplan .col-md-4 input[type="text"], .PreMyplan .col-md-4 select,.PreMyplan input[type="number"], .PreMyplan .col-md-4 input[type="number"]{width: 70% !important;}*/
  .PreMyplan-pay .padding_l50{padding-left:0px;}
  .PreMyplan .push_r10p {margin-right: 0;}
  .PreMyplan .PreMyplan-confirm table { width: 100%;}
  /*.PreMyplan .PreMyplan-confirm .paymentbank span:last-child {padding: 8%;}*/
  .PreMyplan .xs-pushR{    padding-right: 30%;}
  .footer{position:relative;padding: 15px;}
  .PreMyplan .PreMyplan-confirm .payment p img { width: 40px;}
  .PreMyplan ul li:hover ul.dropdown{ margin-top:50%;}
  .PreMyplan .Slide-Cont{ padding-bottom:20px; padding-left:10px;}
  .PreMyplan input[type="text"],.PreMyplan input[type="number"], .PreMyplan .col-md-4 input[type="number"]{width: 120px !important;}
  .PreMyplan .col-md-4 select{ width:250px !important;}
  .prepaid-myplan .Float-Right {float: none;}
}

@media(max-width:600px){
  .PreMyplan .PreMyplan-confirm .payment p img { width: 100%;}
  .PreMyplan .PreMyplan-confirm .payment p{font-size:10px;}
  
}

@media(max-width:500px){
  /*.PreMyplan .PreMyplan-info span{ width:100%;}*/
  .break{ display:block;}
  .PreMyplan .PreMyplan-confirm .payment p{width:50%;}
  .PreMyplan .paymentbank .col-xs-4{width:50%;}
  .prepaid-myplan .nav-tabs > li a{ padding:10px; font-size:12px;}
  .myplan-data .col-xs-3{width:50%;}
  /*.PreMyplan .PreMyplan-confirm .paymentbank span:last-child {padding: 12%;}*/
  .xs-font12 p,.xs-font12{ font-size:12px !important}
}

@media(max-width:400px){
  /*.PreMyplan input[type="text"], select, .PreMyplan .col-md-4 input[type="text"], .PreMyplan .col-md-4 select {width: 100% !important;}*/
  .PreMyplan .PreMyplan-confirm .payment p{width:80%; font-size:8px;}
  .PreMyplan .push_l60{margin-left: 20px;}
  .PreMyplan .PreMyplan-pay .btn-primary{font-size:14px;}
  .PreMyplan .xs-pushR{    padding-right: 0;}
  .PreMyplan .payment .paymentbank li{width:20%;}
  .myplan-footer .btn{font-size:12px;}
}

@media(max-width:350px){
  .prepaid-myplan .nav-tabs > li a{ width:100px;}
  .myplan-footer .btn{ width:100px;}
  .myplan-footer .push_t20 {margin-top: 0px;}
  .prepaid-myplan .highlight-box {width: 250px;}
  .PreMyplan .col-md-4 select {width: 200px !important;}
}

/* Token Reservation */

#token .no-padding-l{ padding-left:0px;}
#token .BorderR{ border-right:1px solid #bacad2;    min-height: 200px;}
#token .padding_l30{ padding-left:30px;}
#token .bline{padding-bottom: 0;}
#token .chart select{font-size: 25px;padding: 5px 25px;}
#token .greyBg{ background-color:#c1c1c1;}
#token .highlight-box{background: transparent; border: 1px solid #8dc63f;border-radius: 3px;}
#token .width30{ width:30%;}
#token .width70{ width:70%;}
#token .font30{ font-size:30px;}
#token .underline{border-bottom: 2px solid;padding-bottom: 5px;}
#token .fa-check-circle{ font-size:3rem; color:#8dc63f;}
#token .fa-map-marker{ color:#0272bb;    font-size: 1.6rem;}
#token .padding_t10{ padding-top:10px;}
#token .padding_t20{ padding-top:20px;}
#token .srcApp{background-color: #f5f7fa;    padding: 5px;}
#token .srcApp .bline{margin: 10px 5px;padding-top: 15px;}
#token .highcharts-title{ font-weight:600;}
#token .highcharts-color-1,#token .highcharts-color-0{width: 25px;}
#token .highcharts-color-1{fill: #f69497;}
#token .highcharts-series-1{
	transform: translate(55px,53px); 
-webkit-transform: translate(55px,53px);
-moz-transform: translate(55px,53px);
-ms-transform: translate(55px,53px);
-o-transform: translate(55px,53px);}
#token .highcharts-series-0{transform: translate(73px, 53px);
-webkit-transform: translate(73px,53px);
-moz-transform: translate(73px,53px);
-ms-transform: translate(73px,53px);
-o-transform: translate(73px,53px);}
#token .highcharts-legend-item{ display:none;}
#token .chartdot {height: 13px;width: 13px;background-color: #7cb5ec;border-radius: 50%; display: inline-block; margin-right: 6px;}
#token .charttext{margin-top: -40px;z-index: 1002;position: absolute;left: 50%; font-size:14px; font-weight:600}
#token .chartContainer{min-width: 310px; height: 400px; margin: 0 auto; z-index:0}
#token .slider-box{border: 1px solid #ccc;border-radius: 3px; width:140px;padding: 3px 3px 15px 0;margin: 0 5%;text-align: center;}
#token .font25{ font-size:25px;} #token .carouselSlider{ background-color:transparent;margin: 30px 0;}#token .carouselSlider .flex-control-nav{ display:none;}
#token .carouselSlider .flex-direction-nav a {background-color: transparent;color: #3a444b;top: 80%;}
#token .flex-direction-nav .flex-next { right: 0 !important; margin-right: -30px; 
   opacity: 1 !important; }
#token .flex-direction-nav .flex-prev { left: 0 !important; opacity: 1 !important; 
   margin-left: -30px; }
#token .flexslider { width: 90%; margin: 0 auto; }
#token .FloatRight{ float:right; padding-right:15%;}
#token .slides a{ color:#000;}
#token .slides a:hover .slider-box{background-color: #8dc63f;border-color: #8dc63f;color: #fff;}
#token .blue-text{ color:#3178ca;}

@media(max-width:767px){#token .BorderR{ border-right:none;}#token .padding_l30{ padding-left:0;}#token h2{ font-size:25px;}#token .sx_push_t30{ margin-top:30px;}#token .width30{width: 80%;}#token .srcApp{padding: 5px 10px;}}
@media(max-width:500px){#token .width30, #token .width70{width: 100%;}#token .srcApp .col-xs-4{ width:100%}}

/* Token Reservation */

/* facebook login option*/
.fbLogin .graybox{background-color: #e7e7e7;padding: 10px;border-radius: 3px;font-weight: bold;}
.fbLoginpopover .bline{ border-bottom:1px solid #bacad2;margin: 10px 15px;}
.fbLoginpopover .push_t6p{ margin-top:6%;}
.fbLoginpopover .btn-sm {width: auto;padding: 0 30px;}
.fbLoginpopover .fbconnectbtn{display: inline-block; background-image:url(http://www.dialog.lk/dialogdocroot/content/css/images/fbloginbtn.png);margin-bottom: 0; text-align: center;vertical-align: middle;cursor: pointer;border: none;border-bottom: none;background-color: inherit; width: 171px;height: 40px;background-size: 171px 40px;}
.fbaccRemove .fa-times-circle{ color:#ED0E11; font-size:16px}
.fbaccRemove .push_l10{ margin-left:10px;}
@media(max-width:767px){.fbLoginpopover .bline {margin: 20px 0px;}}
/* facebook login option*/

/*Tourist offer pages*/
 .TouristSIMPromo img{height:auto;  max-width: 100%; _max-width:inherit; _height:100%;}
  .TouristSIMPromo .Banner{ background: #f7f7f7; overflow: hidden; width: 100%; }
  .TouristSIMPromo .Div50{ width: 50%; float: left; }
  .TouristSIMPromo .bannertext img{ float: right; width: 200px; margin-top:20%;   }
  .TouristSIMPromo .BannerImg img{ height: 350px; }
  .TouristSIMPromo .RedeemTourOffer{ background: #64717a; padding: 20px 10px 30px 10px; margin-top: 20px; color: #fff; overflow:hidden; display: block   }
  .TouristSIMPromo .RedeemScroll ul{ list-style: none; margin-top: 20px;  }
  .TouristSIMPromo .RedeemScroll ul li{ float: left; width: 30%; margin-right: 3%; background: url(https://www.dialog.lk/dialogdocroot/content/images/promotions/tourist/black-arrow.png) no-repeat right center; text-align: center;  }
  .TouristSIMPromo .RedeemScroll ul li:last-child{background:none;}
  .TouristSIMPromo .RedeemScroll ul li img{ margin-bottom: 10px; }
  .TouristSIMPromo .success{ margin:80px 0;  }

  /*Roam banner*/
  .TouristSIMPromo .RoamBanner{ background: #000; overflow:hidden; width: 100%;  }
  .TouristSIMPromo .RoamBanner .BannerImg img{ height: 300px; float: right }
   .TouristSIMPromo .RoamBanner .bannertext{ color: #eee; margin-top: 80px; font-size: 1.5em; padding-left:20px; }
   .Outlined{ padding: 20px 0; border-top: 1px solid #eee;  border-bottom: 1px solid #eee; }

  @media screen and (max-width: 600px){
    .TouristSIMPromo .bannertext img{ width: 100px; margin-top:30%;   }
    .TouristSIMPromo .BannerImg img{ height: 200px; }
    .TouristSIMPromo .RedeemScroll{ overflow-x: scroll; min-width: 300px; }
    .TouristSIMPromo .RedeemScroll ul{ width: 600px; }

    .TouristSIMPromo .RoamBanner .BannerImg img{ height: 300px; float: right; }
    .TouristSIMPromo .RoamBanner .bannertext{  margin-top: 50px; font-size: 1.3em;   padding-left:5px;}

  }
  /*tourist offer pages*/
  /* HBB O2A new styles (Mauri styles) */
.HBB .HBB-Pkg .frame{ height:auto;}
.HBB .HBB-Pkg .frame ul li .plans-box{ min-height:auto; border-radius:3px;    min-height: 510px;}
.HBB .bold{ font-weight:600;}
.HBB .HBB-Pkg .login-block{ width:350px; margin:0 auto;}
.HBB .ad-des{ font-weight:bold; padding:15px}
.HBB .ad-img{ padding-right:15px; float:left;}
.HBB .HBB-Pkg .packages{ padding-top:10px;}
.HBB .HBB-Pkg .heading-block h2{ margin-bottom:60px; margin-top:30px;}
.HBB .HBB-Pkg .plans-box .pkgname{background-color: #f0f0f0;padding: 3px 10px;font-size: 10px;color: #000;right: 0;position: absolute;top: 0;}
.HBB .HBB-Pkg .greenBor{ border:1px solid #8dc63f;}
.HBB .HBB-Pkg .redBor{border:1px solid #ff2b00;}
.HBB .HBB-Pkg .plans-box .planBoxHgt{    min-height: 270px;}
.HBB .HBB-Pkg .plans-box .spltag{padding: 3px 10px;font-size: 12px;color: #fff;left: 0;position: absolute;top: 0;}
.HBB .HBB-Pkg .plans-box .greenBg{ background-color:#8dc63f;}
.HBB .HBB-Pkg .plans-box .redBg{ background-color:#ff2b00;}
.HBB .HBB-Pkg .plans-box{ color:#000; font-size:1.1428571428571428rem}
.HBB .data-quota{ padding:40px 20px 30px;;}
.HBB .data-quota .font40{ font-size:40px;}
.HBB .data-quota .borderR{ border-right:1px solid #ccc;}
.HBB .data-quota div{ width:45%;line-height: 0.9; float:left;}
.HBB .HBB-Pkg .plans-box .pb-lwer {padding: 60px 20px 20px;}
.HBB .HBB-Pkg .offer .ad-des, .HBB .pack-detail .ad-des {font-weight: normal;padding: 0;}
.HBB .offer{padding: 20px 0;border-top: 1px solid #ccc;margin: 0 20px;}
.HBB .HBB-Pkg .link .moreInfo{font-size: 12px;color: #999999;text-decoration: underline;}
.HBB .HBB-Pkg .link .moreInfo:hover{ color:#8DC63F;}
.HBB .HBB-Pkg .link .purch{ display:inline-block;    padding: 5px 20px 6px 20px;}
.HBB .HBB-Pkg .link{ padding:20px;}
.HBB .offer .line-through{ text-decoration:line-through;}
.HBB .offer input[type="radio"]{margin-right: 5px;}
.HBB .pack-detail .purchesBox{ padding:20px;text-align: left;}
.HBB .italic{ font-style:italic;}
.HBB .pack-detail .offer{ margin:0;}
.HBB .purch{background-color: #8dc63f;color: #FFF;font-size: 14px;font-weight: 400;border: 0;padding:5px 20px 6px 20px;}
.HBB .pack-detail .data-quota {padding: 0;}
.HBB .pack-detail .hbbAccordion{border-top: 1px solid #bacad2; border-bottom:0}
.HBB .pack-detail .hbbAccordion .panel-title{ text-align:right;}
.HBB .pack-detail .offer ul{ display:table;}
.HBB .pack-detail .pull-top{ margin-top:-90px;}
.HBB .editNum{ padding-left:10px; background-color:transparent;border: none; font-weight:bold;    width: 110px; }
.HBB .inputBor{ border:1px solid #ccc;}
.HBB .push7 {margin: 7px 5px 0 0;}
.HBB  .collapse-content .panel-body { padding: 10px 0px 10px 10px;}
.HBB  tr td:first-child { padding-right: 0;}
.HBB .box{ padding:0 12.5px;}
.HBB input[type="radio"], .HBB input[type="checkbox"]{margin-right: 5px;}
.HBB .push_l15{ margin-left:15px;}
.HBB .border_box{border: 1px solid #ccc;border-radius: 3px;padding: 5px 10px;}
.HBB .arrowlink{float: right;margin-top: -20px;font-size: 25px;}
.HBB .ad_box{border: 2px solid #8dc63f;border-radius: 5px;}
.HBB .ad_box .selected{background-color: #8dc63f;padding: 3px 10px; font-size: 15px;color: #fff;left: 0;position: absolute;top: 0;}
.HBB .ad_box .ad_detail{padding-top: 60px;}
.HBB .offerOption{border: 1px solid #ccc;border-radius: 3px; padding: 15px 15px 5px;}
.OnlineOrder .push_b5{ margin-bottom:5px;}
.HBB .areacode input[type="number"]{width: 50px;padding: 5px 0px 5px 10px;background-color: #f7f7f7;border: 1px solid #f7f7f7; border-radius:3px}
.HBB .postMyplan .PayHalf { width: 70%;}
.HBB .postMyplan .PayNormal { width: 60%;}
.HBB .editNumWidth{float: left;width: 28%;padding: 5px 0px 5px 10px; }
.HBB .areacode{ float:left;}
.HBB .gray-text{ color:#9c9c9c;}
/*.HBB .hideContent{pointer-events:none;}*/
.HBB .transbox {pointer-events:none;background-color: #ffffff;opacity:0.5;filter: alpha(opacity=60); /* For IE8 and earlier */}
@media screen and (max-width: 992px){
.HBB .swiper-button-next, .HBB .swiper-button-prev { top:40%;}
}
@media(max-width:767px){
#numStep #information{ margin-left:25px;}
.HBB .postMyplan .PayHalf { width: 100%;}
.HBB .postMyplan .PayNormal { width: 100%;}
.HBB .postMyplan .PayNormal .col-md-4{ width:33.3333%; float:left}
.HBB .scrollmobile{overflow-x: scroll; overflow-y: hidden;min-width: 320px;display: block;}
.HBB .scrollmobile .panel-body{ width:700px}
.HBB .border_box{ margin:5px 0;}
.HBB .ad_box img{width:100%;}
.HBB .ad_box{ padding:10px;}
.HBB .ad_box .xs_pushL10{ padding-left:10px;}
.HBB .selectDev .xs-floatL{width: 30%;float: left;}.HBB .selectDev .col-md-3{ clear:both;}.HBB .selectDev .xs-floatL img{ width:70%;}
.HBB .pack-detail .pull-top { margin-top: -30px;margin-bottom: 40px;}
}
@media(max-width:400px){
/*.HBB .PayNormal div:last-child{ width:100% !important;}*/
.HBB .PayNormal .btn{ font-size:12px;}
}
/* HBB O2A new styles (Mauri styles) */  
/* HBB Prepaid data plans (Mauri style) */ 
.HBBPrePlan .bline{ padding-bottom:5px;}
.HBBDataCon .bar-value{ color:#7c7c7c;}
.HBBDataCon .progress-bar{ height:100%; border-radius:5px;}
.HBBDataCon .box .gray-bar{ height:15px;border-radius:5px;}
.HBBDataCon h3{ font-weight:600;    padding: 0 15px;}
.HBBDataCon .boxBline{border-bottom: 2px solid #bbbbbb; box-shadow: 0px 2px 0px 0px #bbbbbb7a;padding: 0 15px;}
.HBBDataCon .bar-text{ text-align:center; font-weight:600; font-size:85%; padding-top:20px}
.HBBDataCon .box .bar-heading{ margin-bottom:0px;}
/*.HBBPrePlan .plan-tab .nav-tabs > li{border: 1px solid #dcdcdc;border-radius: 3px; margin-right: 5px;text-align: center;min-width: 240px;} */
.HBBPrePlan .plan-tab .nav-tabs > li{border: 1px solid #dcdcdc;border-radius: 3px; margin-right: 5px;text-align: center;min-width: 180px;}
.HBBPrePlan .plan-tab .nav-tabs > li > a,.HBBPrePlan .plan-tab .nav-tabs > li > a:hover{ color:#000;}
.HBBPrePlan .plan-tab .nav-tabs > li{ background-color:#f6f6f6;}
.HBBPrePlan .plan-tab .nav-tabs > li > a:hover,.HBBPrePlan .plan-tab .nav-tabs .active, .HBBPrePlan .plan-tab .nav-tabs > li:hover{ background-color:#fff;}
.HBBPrePlan .plan-tab .nav-tabs { border-bottom: 5px solid #dcdcdc;}
.HBBPrePlan .plan-tab .tab-content{ overflow:hidden}
.HBBPrePlan .plan-tab .planDetails{border: 1px solid #dcdcdc;border-radius: 3px;margin-bottom: 20px; position:relative}
.HBBPrePlan .plan-tab .planDetails .font30{ font-size:30px;}
.HBBPrePlan .plan-tab .planDetails .borderL{border-left: 1px solid #eeeeee;}
.HBBPrePlan .plan-tab .planDetails .planLabel{background-color: #f6f6f6;padding: 2px 5px; margin:0; position: absolute; right:0}
.HBBPrePlan .plan-tab .planDetails .activatedLabel{background-color: #8ec53f;padding: 2px 5px;color: #fff; position:absolute}
.HBBPrePlan .plan-tab .planDetails .grey-text{ color:#777777;}
.HBBPrePlan .plan-tab .plan-list{ list-style: none;padding: 0;}
.HBBPrePlan .plan-tab .activatedPkg{ border:1px solid #8ec53f;}
.HBBPrePlan .btn-primary{padding-left: 25px;padding-right: 25px;}
.HBBPrePlan .plan-cond{ margin:15px 30px; border-top:1px solid #bacad2; padding-top:15px}
.HBBPrePlan .preplanModal .close{ padding-left:0px;}
.HBBPrePlan .preplanModal .fa-check-circle{font-size: 25px;color: #77aa32;}
.HBBDataCon .wrap{ padding:0 !important;}

.HBBPrePlan .plan-list .planDetailCont{width: 100%;float: inherit;margin: 3px 0 15px 0;display: block;overflow: hidden;}
.HBBPrePlan .planDetails{overflow: hidden;width: 100%;float: left;}
.HBBPrePlan .planDetails .data{float: left; width: 20%;padding: 40px 20px 20px;}
.HBBPrePlan .planDetails .rental{width: 28%;float: left;padding: 20px; margin:10px 0; }
.HBBPrePlan .planDetails .actionBtn{width: 20%;float: left;padding: 30px;}

@media(max-width:1199px){
.HBBPrePlan .plan-tab .nav-tabs > li{ min-width:120px;padding-left: 5px; padding-right: 5px;}
}
@media(max-width:767px){
.HBBPrePlan .plan-tab .nav-tabs > li{ min-width:auto;}
.HBBDataCon h3, .HBBDataCon .boxBline{ padding:0;}
.HBBPrePlan .xs_push_t20{ margin-top:20px;}
.HBBPrePlan .btn-primary,.HBBPrePlan .btn-success{ font-size:14px;}
}
@media(max-width:600px){
.HBBPrePlan .plan-tab .nav-tabs > li {width: 23%;/*min-height: 90px;*/}
.HBBPrePlan .search .col-xs-4{width: 50%;padding-bottom: 15px;}
.HBBPrePlan .planDetails .data { width: 33%;padding: 40px 10px 0;}
.HBBPrePlan .planDetails .rental {width: 33%; padding: 25px 10px 0;margin: 10px 0;}
.HBBPrePlan .planDetails .actionBtn { width: 100%; padding: 0 0 10px 10px;    margin-top: -15px;}
}
@media(max-width:500px){
.HBBPrePlan .plan-tab .planDetails .planLabel {margin-bottom:0;}
.HBBPrePlan .plan-cond {margin: 15px 15px;}
.HBBPrePlan .plan-tab .nav-tabs > li {width: 23%;font-size: 12px;}
.HBBPrePlan .plan-tab .planDetails .font30{ font-size:20px;}
.HBBPrePlan .planDetails .data {
    width: 28%;}
.HBBPrePlan .planDetails .rental {
    width: 36%;}
.HBBPrePlan .plan-tab .planDetails .planLabel, .HBBPrePlan .plan-tab .planDetails .activatedLabel{font-size: 11px;}
}
/* End HBB Prepaid data plans (Mauri style) */ 

/* Postpaid voice package (Mauri style) */ 
.postpaidVoice .fa-check-circle{color: #8dc63f;font-size: 30px;margin-right: 10px;    margin-top: -3px;}
.postpaidVoice .font30 {font-size: 30px; font-weight:400}
.postpaidVoice .planDetails {border: 1px solid #dcdcdc;border-radius: 3px;margin-bottom: 40px;position: relative;overflow: hidden;width: 100%;float: left;padding: 20px 20px 10px;}
.postpaidVoice .rental{float: left; width: 20%;margin-right: 20px;padding-right: 10px;border-right: 2px solid #dcdcdc;}
.postpaidVoice .planCont{border-left: 2px solid #dcdcdc; padding-left:10px}
.postpaidVoice .borderB{ border-bottom:1px solid #dcdcdc;}
.postpaidVoice .call{float: left;width: 20%; }
.postpaidVoice .borderL{border-right: 1px solid #dcdcdc;    height: 60px; }
.postpaidVoice .call p, .postpaidVoice .callrate p{ margin:0}
.postpaidVoice .callrate{float: left;padding-left: 20px;width: 20%;}
.postpaidVoice .data{float: left;padding-left: 20px;width: 20%;  }
.postpaidVoice .actionBtn{ text-align:right}.postpaidVoice .push_r20p{ margin-right:20%;}
.postpaidVoice .call, .postpaidVoice .callrate, .postpaidVoice .data{ min-height: 110px; }
@media(max-width:1199px){
.postpaidVoice .font30{ font-size:20px}
.postpaidVoice .rental,.postpaidVoice .callrate,.postpaidVoice .call, .postpaidVoice .data{ width:20%;padding-left: 5px;}
.postpaidVoice .rental{ margin-right:5px;}
}
@media(max-width:767px){
.postpaidVoice .modal-body{    padding: 20px;}
.postpaidVoice .xs_borB{border-bottom: 1px solid #dcdcdc;}
.postpaidVoice .rental{ border-right:none;}
.postpaidVoice .borderL{border-right:none;height: auto; }
.postpaidVoice .rental{ width:48%;}
.postpaidVoice .planCont{width: 48%; float: left; margin-top:0px}
.postpaidVoice .callrate,.postpaidVoice .call, .postpaidVoice .data{ width:100%; clear:both}
.postpaidVoice .actionBtn {text-align: right; width: 100%;clear: both;}
.postpaidVoice .call p, .postpaidVoice .callrate p, postpaidVoice .rental p { margin: 5px 0;}
.postpaidVoice .call, .postpaidVoice .callrate, .postpaidVoice .data{ min-height: inherit; }
}
@media(max-width:500px){
.postpaidVoice .actionBtn {text-align: center;}
}
/* End Postpaid voice package (Mauri style) */ 
/*Roam Game*/
.RoamGame .FormCenter{ max-width: 600px; display: block; margin: auto; }
   .RoamGame .disable img{ opacity: .5; }
.RoamGame #buttons #play {position:absolute;bottom:10px;left:30px;right:30px;text-align: center;height: 40px;line-height: 40px;font-size: 24px;border-radius:10px;background-size:auto 62px;}
.RoamGame #reels{display:block;position:relative;height: 230px; overflow: hidden;text-align: center;background: #333;border-radius:3px;max-width: 800px;margin: auto auto 20px auto;}
.RoamGame #reels canvas{height: 300px;position: relative; }
.RoamGame #overlay { width: 100%;height: 100%;position: absolute;top: 0px;opacity: 0.3;background-image: -moz-linear-gradient(#555,#fff,#fff,#555);background-image: -webkit-gradient(linear, 0 25%, 0 100%, from(grey), color-stop(0.5, white), to(grey));display: none;}
.RoamGame #overlay #winline { width: 100%;height: 5px;background: red;  position: relative;top: 50%;}
.RoamGame #reels #results{display: none;background: white;border: 3px solid gold;height: 180px;width: 250px;left: 35%;top: 20px;position: absolute;font-size: x-large; border-radius: 3px;}
.RoamGame #results #score {margin: 5px; overflow: hidden;}
.RoamGame #results #score img {vertical-align: middle;}
.RoamGame ul li {width: 31%;float: left;border-right: 1px solid #eee;padding: 20px 2%;}
.RoamGame ul li:last-child {border-right:none;}
.RoamGame .PlayBtn{ display: block; margin: auto; width: 100px; overflow: hidden; }
  @media (max-width: 768px){  
    .RoamGame ul{ width: 100%; margin: 0 0 0 10px; padding: 0; } 
    .RoamGame .FormCenter{ max-width:100%;}
    .RoamGame #reels #results{left: 10%;}}
    /*Roam Game*/