@charset "UTF-8";
/* CSS Document */

body {line-height:22px !important;}
.red {color:#ed0700;}
.green {color:#7ABA06;}
.white {color:#fff;}
label, input, button, select, textarea {
	font-family:Arial, Helvetica, sans-serif;
}

.navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top {
    margin-left: 0px !important;
    margin-right: 0px !important;
}
.nav-collapse .nav > li > a, .nav-collapse .dropdown-menu a { font-weight:normal !important; font-size:13px;}
.nav-collapse .lang {
    border-top: 1px dotted #333333;
    margin: 5px 10px 20px;
    padding-top: 15px;
    text-align: center;
}
.nav-collapse .lang a {
    margin-right: 10px;
}
a:hover,
a:focus {
  color: #005580;
  text-decoration: none !important;
}
.caret2 {
  display: inline-block;
  width: 0;
  height: 0;
  vertical-align: top;
  border-top: 7px solid #CDCDCD !important;
  border-right: 7px solid transparent !important;
  border-left: 7px solid transparent !important;
  color:#3F454F !important;
  content: "";
  margin:12px 0 0 0;
}
.modal-backdrop, .modal-backdrop.fade.in {
    opacity: 0.8;
}

.banner-hl {width:990px; margin:0px;}
.bg-grey {background-color:#f6f6f6; background-image:url(../images/hlife/bg1-iconall.png); background-position:bottom left; background-repeat:no-repeat; padding:0 0 100px 0;}
.mainmenu {margin:0px; float:left; width:330px;}
.mainmenu-hlife {margin:0; text-align:center; font-size:16px; font-family:'true_lightregular'; height:auto; display:block;}
.menu-hlife-red {background-color:#ed0700; color:#fff; padding:10px 0;font-size:14px; font-family:'true_lightregular';}
.menu-hlife-grey{background-color:#40454f; color:#fff; padding:10px 0;font-size:14px; font-family:'true_lightregular';}
.menu-hlife-grey:hover {background-color:#ed0700;font-size:14px; font-family:'true_lightregular';}

.arrow-down {width: 0px;
height: 0px;
border-style: solid;
border-width: 15px 40px 0 40px;
border-color: #ed0800 transparent transparent transparent;
line-height: 0px;
_border-color: #ed0800 #000000 #000000 #000000;
_filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000'); margin:0 auto;}

.box-margin {margin:20px;}
#info .box-personalid {background-color:#fff; 
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0px 1px 5px 0px rgba(135, 135, 135, 0.4);
-moz-box-shadow:    0px 1px 5px 0px rgba(135, 135, 135, 0.4);
box-shadow:         0px 1px 5px 0px rgba(135, 135, 135, 0.4);}
#info .title { font-size:16px; font-family:'true_mediumregular'; text-align:center; padding:20px 0 10px 0;}
#info .phonenumber {background-color:#3F454F; color:#fff; padding:10px; font-size:13px; text-align:center; margin:10px 0 0 0; border-bottom-left-radius:6px; border-bottom-right-radius:6px;}

.box-notice-sms {margin:30px 0;background-color:#fff; padding:10px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;}
.title-hlife {font-size:14px; font-family:'true_mediumregular'; color:#40454f;}
.sms-bar {font-family:Arial, Helvetica, sans-serif; font-size:12px; background-color:#ddd; padding:5px; margin:5px 0;}
.sms-bar2 {font-family:Arial, Helvetica, sans-serif; font-size:12px; background-color:#eee; padding:5px; margin:5px 0; color:#666;}

.reload-data {margin:0 0 20px 0;}
#data .box-data {background-color:#fff; padding:20px 0; margin:0 0 20px 0 ;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0px 1px 5px 0px rgba(135, 135, 135, 0.4);
-moz-box-shadow:    0px 1px 5px 0px rgba(135, 135, 135, 0.4);
box-shadow:         0px 1px 5px 0px rgba(135, 135, 135, 0.4);}
#data .title { font-size:16px; font-family:'true_mediumregular';  padding:10px 20px;}
#data .iconbar {padding:0 20px;}
#data .bgtitle:hover {cursor: pointer;}
#data .bgtitle {width:100%; display:block;
background: #eeeeee; /* Old browsers */

background: -moz-linear-gradient(left,  #eeeeee 0%, #ffffff 52%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, right top, color-stop(0%,#eeeeee), color-stop(52%,#ffffff)); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(left,  #eeeeee 0%,#ffffff 52%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(left,  #eeeeee 0%,#ffffff 52%); /* Opera 11.10+ */

background: -ms-linear-gradient(left,  #eeeeee 0%,#ffffff 52%); /* IE10+ */

background: linear-gradient(to right,  #eeeeee 0%,#ffffff 52%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */


}
#data .box-datain {padding:0 20px;}
#data .text-datain {border-bottom:solid 1px #ededed; margin-right:80px;}
.form-horizontal {font-family:Arial, Helvetica, sans-serif; font-size:14px;}

.form-horizontal .control-label {
  float: left;
  width: 280px !important;
  padding-top: 0px !important;
  text-align: right;
  font-family:Arial, Helvetica, sans-serif;
}

.form-horizontal .controls {
  *display: inline-block;
  *padding-left: 20px;
  margin-left: 300px !important;
  *margin-left: 0;
  font-family:Arial, Helvetica, sans-serif;
  color:#000;
}
.form-horizontal .control-label2 {
  float: left;
  width: 100%;
  padding-top: 0px !important;
  text-align: right;
  font-family:Arial, Helvetica, sans-serif;
}
.form-horizontal .controls2 {
  *display: inline-block;
  *padding-left: 20px;
  margin-left:55% !important;
  *margin-left: 0;
  font-family:Arial, Helvetica, sans-serif;
  color:#000;
}

.btn-grey {
  display: inline-block;
  *display: inline;
  padding: 4px 16px;
  margin-bottom: 5px;
  *margin-left: .3em;
  font-size: 14px;
  line-height: 20px;
  color: #fff;
  font-family:'true_mediumregular';
  text-align: center;
  
  vertical-align: middle;
  cursor: pointer;
  background: #6b788c; /* Old browsers */

background: -moz-linear-gradient(top,  #6b788c 0%, #505968 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6b788c), color-stop(100%,#505968)); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top,  #6b788c 0%,#505968 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top,  #6b788c 0%,#505968 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top,  #6b788c 0%,#505968 100%); /* IE10+ */

background: linear-gradient(to bottom,  #6b788c 0%,#505968 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6b788c', endColorstr='#505968',GradientType=0 ); /* IE6-9 */


  border: 1px solid #cccccc;
  *border: 0;
  border-color: #e6e6e6 #e6e6e6 #bfbfbf;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  border-bottom-color: #b3b3b3;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  *zoom: 1;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
     -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}

	
.btn-grey:hover,
.btn-grey:focus,
.btn-grey:active,
.btn-grey.active,
.btn-grey.disabled,
.btn-grey[disabled] {
  color: #fff;
  background: #505968; /* Old browsers */

background: -moz-linear-gradient(top,  #505968 0%, #505968 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#505968), color-stop(100%,#505968)); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top,  #505968 0%,#505968 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top,  #505968 0%,#505968 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top,  #505968 0%,#505968 100%); /* IE10+ */

background: linear-gradient(to bottom,  #505968 0%,#505968 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#505968', endColorstr='#505968',GradientType=0 ); /* IE6-9 */


}

.btn-red {
  display: inline-block;
  *display: inline;
  padding: 4px 16px;
  margin-bottom: 5px;
  *margin-left: .3em;
  font-size: 14px;
  line-height: 20px;
  color: #fff;
  font-family:'true_mediumregular';
  text-align: center;
  
  vertical-align: middle;
  cursor: pointer;
  background: #6b788c; /* Old browsers */

background: #ed0700; /* Old browsers */

background: -moz-linear-gradient(top,  #ed0700 0%, #c40000 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ed0700), color-stop(100%,#c40000)); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top,  #ed0700 0%,#c40000 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top,  #ed0700 0%,#c40000 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top,  #ed0700 0%,#c40000 100%); /* IE10+ */

background: linear-gradient(to bottom,  #ed0700 0%,#c40000 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed0700', endColorstr='#c40000',GradientType=0 ); /* IE6-9 */

  border: 1px solid #cccccc;
  *border: 0;
  border-color: #e6e6e6 #e6e6e6 #bfbfbf;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  border-bottom-color: #b3b3b3;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  *zoom: 1;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
     -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}

	
.btn-red:hover,
.btn-red:focus,
.btn-red:active,
.btn-red.active,
.btn-red.disabled,
.btn-red[disabled] {
  color: #fff;
background: #c40000; /* Old browsers */

background: -moz-linear-gradient(top,  #c40000 0%, #c40000 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c40000), color-stop(100%,#c40000)); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top,  #c40000 0%,#c40000 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top,  #c40000 0%,#c40000 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top,  #c40000 0%,#c40000 100%); /* IE10+ */

background: linear-gradient(to bottom,  #c40000 0%,#c40000 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c40000', endColorstr='#c40000',GradientType=0 ); /* IE6-9 */

}

.box-data2 {margin:10px 0; border-top:solid 1px #ededed; padding:10px 0 0 0 ;}

.alert {
	padding: 15px 15px !important;
  background-color: #ff6464;
  border: 1px solid #fbeed5;
  font-family:'true_mediumregular';
  text-align:center;
  color:#fff;
}
.alert .close {
 right: 0px !important;}
.box-privil {margin:40px 0; font-size:13px;}
.box-privil-l { text-align:right; width:50%}
.box-privil-r { width:50%; margin:15px 0 0 -10px;}

.box-iservice {margin:0 20px 20px 20px; text-align:center; background-color:#ededed; padding:20px;}
.nav-tabs > li > a { color:#929497; font-size:13px;}
.nav > li > a:hover,
.nav > li > a:focus {
  background-color: #ed0700 !important;
  color:#fff;
}
.bar-data {margin:0 0 20px 0;}
.bar-data-l {width:15%; float:left; text-align:right;}
.bar-data-r {float:left; width:80%; margin-left:20px;}
.bar-green {-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background-color:#b0c438; padding:5px; width:95%; height:20px;}
.text-unlimited {font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#fff; text-align:center; vertical-align:middle; padding:5px 10px;}
.text-normal {font-family:Arial, Helvetica, sans-serif; font-size:12px;  vertical-align:middle; padding:5px 10px; white-space:nowrap;}
.progress {
  height: auto !important;}
.progress .bargreen {
  float: left;
  width: 0;
  height: 100%;
  font-size: 12px;
  text-align: center;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background: #b0c438; /* Old browsers */

background: -moz-linear-gradient(top,  #b0c438 0%, #aabf09 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b0c438), color-stop(100%,#aabf09)); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top,  #b0c438 0%,#aabf09 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top,  #b0c438 0%,#aabf09 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top,  #b0c438 0%,#aabf09 100%); /* IE10+ */

background: linear-gradient(to bottom,  #b0c438 0%,#aabf09 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b0c438', endColorstr='#aabf09',GradientType=0 ); /* IE6-9 */


  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
     -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
          box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-transition: width 0.6s ease;
     -moz-transition: width 0.6s ease;
       -o-transition: width 0.6s ease;
          transition: width 0.6s ease;
}

.progress .barred {
  float: left;
  width: 0;
  height: 100%;
  font-size: 12px;
  text-align: center;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background: #ed0700; /* Old browsers */

background: -moz-linear-gradient(top,  #ed0700 0%, #c60000 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ed0700), color-stop(100%,#c60000)); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top,  #ed0700 0%,#c60000 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top,  #ed0700 0%,#c60000 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top,  #ed0700 0%,#c60000 100%); /* IE10+ */

background: linear-gradient(to bottom,  #ed0700 0%,#c60000 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed0700', endColorstr='#c60000',GradientType=0 ); /* IE6-9 */




  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
     -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
          box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-transition: width 0.6s ease;
     -moz-transition: width 0.6s ease;
       -o-transition: width 0.6s ease;
          transition: width 0.6s ease;
}
.progress { margin-bottom:5px !important;}
.choose-vas { background-color:#ececec; padding:10px 15px; width:220px; margin:0 auto; text-align:center;-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;}
.line-l {border-right: solid 1px #929497; margin:2px 10px 2px 7px; width:2px;}
.text-note {font-family:Arial, Helvetica, sans-serif; font-size:11px;}
a.accordion-toggle {color:#40454f;}
.accordion-toggle:hover{color:#ed0700;}
.accordion-group {
    margin-bottom: 10px !important;
}
.bar-buyvas {background-color:#ededed; padding:10px 0 10px 10px; font-family:Arial, Helvetica, sans-serif; font-size:14px; margin:0 0 5px 0;}
.tooltipaction {font-family:Arial, Helvetica, sans-serif; width:70%;}
.bar-buyvas a{color:#40454f;text-decoration:underline !important; }
.bar-buyvas a:hover,a:focus {text-decoration:underline; color:#ed0700;}
a.btn-vas { background-color:#ed0700; color:#fff; font-size:14px; width:20%; text-align:center; padding:10px 30px; text-decoration:none !important;}
a.btn-vas:hover {color:#fff; text-decoration:underline; background-color:#dd0303;}
.table-modal {width:100%;}
.modal-body table,tr,td {font-family:Arial, Helvetica, sans-serif; text-align:center;}
.box-rate {font-family:Arial, Helvetica, sans-serif; width:230px; margin:0 auto; margin-top:10px; margin-bottom:10px;}
.more-info {width:100%;}
.more-info textarea{
    width: 98% !important;
}
.box-3gconnect {width:100%; text-align:center;}
.banner-medium {margin:0 auto; width:685px;}
.carousel-control {
    background: none repeat scroll 0 0 #222222;
    border: 3px solid #FFFFFF;
    border-radius: 23px;
    color: #FFFFFF;
    font-size: 40px !important;
    font-weight: normal !important;
    height: 30px !important;
    left: 15px;
    line-height: 22px !important;
    margin-top: -10px;
    opacity: 0.5;
    position: absolute;
    text-align: center;
    top: 50% !important;
    width: 30px !important;
}
.btn-otp { width:300px; margin:0 auto; margin-top:20px; margin-bottom:10px;}	
.btn-otp2 { width:200px; margin:0 auto; margin-top:20px; margin-bottom:10px;}	
.box-modal { background-color:#F5F5F5; padding:40px 10px; display:block;}
.box-addmoney {border:solid 1px #ededed; padding:20px; width:400px; margin:0 auto; -webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;}
.modal-body {
  max-height:none !important;
  padding: 30px 15px !important;
}
.modal2 {
    background-clip: padding-box;
    background-color: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
    left: auto !important;
    margin-left: auto !important;
    outline: medium none;
    position:relative !important;
    top: 10%;
    width: auto !important;
    z-index: 1050;
    max-height: 500px;
    overflow-y: scroll;
}



/*desktop*/
@media (min-width: 992px) {	


}

/*tablet*/
@media (max-width: 992px) {
 .box-data { font-size: 18px !important; }
 .controls { font-size: 16px !important; }
.banner-hl {width:100%;}
.content {
    height: auto;
    margin: 0 auto;
    width: 100%;
}
#content_wrapper {padding: 0px !important;} 
.navbar .btn, .navbar .btn-group {
    margin-top: 13px !important;
}
.mainmenu {margin:0px; float:left; width:33.33%;}
.mainmenu-hlife {font-size:14px;}
.arrow-down {border-width: 8px 20px 0 20px;}
.bg-grey {background-color:#f6f6f6; padding:0; background-image:none;}
.form-horizontal .control-label2 { text-align:left;}
.box-addmoney { width:auto;}
}

/*mobile ธรรมดา*/
@media (max-width: 767px) {
 .navbar-fixed-top {
    margin-bottom: 0px !important;
}
#data .text-datain {margin-right:0px !important;}
.form-horizontal .control-label {
 width: 100% !important;
  float:none !important;
  text-align:left !important;
}
.form-horizontal .controls {
  *padding-left: 20px;
  margin-left: 0px !important;
  float:none !important;
}
.bar-data-l {width:100%; float:left; text-align:left; margin-bottom:5px;}
.bar-data-r {float:left; width:100%; margin-left:0px;}	
.tooltipaction {width:60%;}
.banner-medium {margin:0 auto; width:auto;}

}

/*mobile  แนวตั้ง*/
@media (max-width: 388px) {
.mainmenu-hlife {
    font-size: 12px;
	font-family:Arial, Helvetica, sans-serif !important;
}
.box-privil {margin:20px 0;}
.box-privil-l { width:40%;}
.box-privil-r { width:60%; margin:5px 0 0 -10px; }
 #data .title { font-size:14px;}
.box-iservice {
   margin:0 0 10px 0; !important;
}
.nav-tabs > li > a {font-size:12px; font-family:Arial, Helvetica, sans-serif;}
.nav-tabs > li > a, .nav-pills > li > a {
    margin-right: 0px !important;
    padding-left: 1px !important;
    padding-right: 1px !important;
}
.progress {
  margin-bottom:0px !important;}
.text-normal {padding:5px;}
a.btn-vas { font-size:12px; width:20%; text-align:center; padding:10px 10px; min-height:30px;}
.box-rate { font-size:11px;}

}