@charset "utf-8";
/* CSS Document */
body
{
	background:#0d68ae;
}
.mobile_view
{
	display:none;
}
.logo
{
	float:left;
	margin:-10px 0 0 29px;
	border-bottom-left-radius:15px;
	border-bottom-right-radius:15px;
}
.text
{
	display:none;
}
.mobile_banner
{
	float:left;
	width:87%;
	/*height:100%;*/
}
/* for IE 10 Only */
html[data-useragent*='MSIE 10.0']
 .border_bottom
{
	display:none;
}
/* TOP UP PANEL */

.navbar-default
{
	background:#000;
	width:100%;
	border:none;
}
.navbar-default .navbar-nav > li > a
{
		color:#999;
		text-align:right;
}
.navbar-default .navbar-nav>li>a:hover
{
	color:#FFF;
}
.panel_register
{
	/*margin:30px 0 0 0;*/
	height:40%;
	width:80%;
	background:#ffffff;
	border-top-left-radius:8px;
	border-top-right-radius:8px;
	/*border-radius:8px;*/
	padding:5% 5% 3% 5%;
	
}
.npay_img
{
	float:right;
	background:url(../../images/nPay_80x60.png) no-repeat top;
	margin-top:-14px;
	width:76px;
	height:75px;
}
.input-group .form-control
{
	z-index:0;
}
.help_desk
{
	 float:left;
	 color:#EEE;
	 font-size:12px;
	 padding-right:30px; 
	font-family:Verdana, Geneva, sans-serif;
	 list-style:none;
	 margin-left:60px; 
	padding-top:15px;
}
.label_register
{
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	color:#6C7A89;
	float:left;
}
.btn_pay
{
	width:35%;
	float:left;
	font-weight:bold;
	margin-left:35px;
}
.btn_cancel
{
	margin-left:15px;
	width:35%;
	font-weight:bold;
}
.formset
{
	padding:10px;
}
#btn_submit
{
	float:right;
	margin:-36px 3px 0 0;
	width:30%;
	font-weight:bold;
}
.dropdown
{
	height:30px;
}

select
{
	padding-left:5px;
}
/* About Us - content space */
.top_up_panel {
	clear: both;
	width:80%;
	/*height:100%; */
	/*margin-top:10px;*/

	background: #fff;


	z-index: 90; /* the stack order: displayed under ribbon rectangle */
	border-radius:8px;

}

/* Ribbon header */
.rectangle {
	background: #5C97BF;
	height: 50px;
	width: 106%;
	position: relative;
	left: -15px;
	top: -1px;
	padding:9px;
	float: left;
	text-align:center;
	color:#34495E;
	-moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
	-khtml-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
	-webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
	border-top-left-radius:5px;
	/*border-top-right-radius:5px;*/
	border:none;
}
/* Ribbon text */
.rectangle h2 {
	font-family: 'Shadows Into Light Two', cursive;
	font-size: 42px;
	color: #fff;
	margin-top: 5px;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
	text-align: center;
}

/* Left side-fold ribbon */
.triangle-l {
	border-color: transparent #5C97BF transparent transparent;
	border-style: solid;
	border-width: 15px;
	height: 0px;
	width: 0px;
	position: relative;
	left: -30px;
	top: 34px;
	z-index: -1; /* displayed under bubble */
}

/* Right side-fold ribbon */
.triangle-r {
	display:none;
	border-color: transparent transparent transparent #5C97BF;
	border-style: solid;
	border-width: 15px;
	height: 0px;
	width: 0px;
	position: relative;
	left: 361px;
	top:5px;
	z-index: -1; /* displayed under bubble */
}
.panel_register_label
{
	float:left;
	color:#C0392B;
	padding:0 0 0 5px;
		font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
}
/* About Us - content padding */
.info {
	padding:40px 0 0 25px;
}
.input-group .form-control
{
	width:90%;
}
/* Chrome Browser Hack */
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
.input-group .form-control
{
	width:100%;
}
.info
{
	padding-left:35px;
}
}
.info h2 {
	font-size: 20px;
}

.info p {
	padding-top: 10px;
	font-size: 14px;
	line-height: 22px;
}

#submitbtn
{

	text-align:center;
	font-weight:bold;
}
#username
{
	/*width:100%;*/
}
#password
{
	width:65%;
	margin-bottom:5px;
}
.form-control
{
	padding-top:0px;
	padding-bottom:0;
	height:30px;
}
.input-group-addon
{
	padding:1px 8px;
}
a
{
	text-decoration:none;
}
.border_bottom
{
	border-bottom:36px solid #5C97BF;
	width:100%
	max-width:100%;
	margin-top:-5px;
}
.payment_panel
{
	height:50%;
	width:50%;
	margin:0 auto;
	background:#FFF;
}
.footer
{
	position:fixed;
	bottom:0;
	text-align:center;
	background:#000;
	color:#FFF;
	width:100%;
	height:5%;
	font-size:12px;
	font-family:Verdana, Geneva, sans-serif;
	padding:8px 0 0 0;
}
.ie_label
{
	display:none;
}
.ie_footer
{
	display:none;
}
/* Response Page css */
.btnPrint
{
	background:url(../../img/print-icon.jpg) no-repeat;
	float:right;
	width:40px;
	height:45px;
	outline:none;
	border:none;
	border-radius:8px;
}
.btnPrint:hover
{
	-webkit-transition: all 1s ease; /* Safari and Chrome */
    -moz-transition: all 1s ease; /* Firefox */
    -ms-transition: all 1s ease; /* IE 9 */
    -o-transition: all 1s ease; /* Opera */
    transition: all 1s ease;
}
.receipt_panel
{
	background:#FFF;
	width:100%;
	height:100%;
	border-radius:8px;
	margin-top:45px;
	margin-bottom:40px;
}
.PnoticeNote
{
	float:left;
	text-align:center;
	padding-left:15px;
	font-size:11px;
	color:#F62459;
}
.btn_continue
{
	float:right;
	margin-right:10px;
	margin-top:5px;
}
/* Error Page Css */
#content
{
	height:auto;
	width:40%;
	background:#faebd7;
	border-radius:8px;
}
.error_label
{
	padding:20px 0 0 0;
	text-align:center;
	text-wrap:normal;
}
#button_btn
{
	width:40%;
	float:left;
	text-align:center;
	margin:15px 0 0 30%;
}
/* Customer Register Page CSS */
.register_panel
{
	float:left;
	background:#FFF;
	height:100%;
	width:100%;
	padding:10%;
	border-radius:8px;
	margin:20% 0 0 0;
}
/* Verification Page */
#verfication_div {
	height: 100%;
	width: 100%;
	background: #FFF;
	color: #000;
	margin:30% 0 0 0;
	border-radius: 8px;
	font-family: Verdana, Geneva, sans-serif;
	padding: 10px;
}
/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {

}
/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
}


/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
.mobile_banner
{
	display:none;
}
.border_bottom
{
	display:none;
}
.panel_register
{
	width:100%;
}
.top_up_panel
{
	width:100%;
	margin-bottom:50px;
}
.rectangle
{
	width:107%;
}
.info
{
	padding-top:50px;
}
.navbar-default .navbar-nav > li > a 
{
	text-align:right;
}
.footer
{
	padding:1px;
}
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
.mobile_banner
{
	padding-top:2%;
	width:100%;
	/*height:100%;*/
}

.border_bottom
{
	margin-top:-17px;
	border-bottom:25px solid #5C97BF;
}
.panel_register
{
	width:100%;
}
.top_up_panel
{
	width:100%;
	margin-bottom:50px;
}
.triangle-r
{
	left: 289px;
}
.panel
{
	margin-top:40%;
}
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {


}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
 .mobile_banner
{
	display:none;
}

}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
.panel
{
	margin-top:40px;
}
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {

}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
.mobile_banner
{
	display:none;
}
}

@media only screen 
and (min-device-width : 360px) 
and (max-device-width : 640px) 
{
	.mobile_banner
{
	display:none;
}
.rectangle {
width:105%;
}
}

@media only screen and (max-width: 800px) and (min-width: 320px){
.mobile_banner
{
	display:none;
}
.banner_2
{
	margin:1% !important;
	border-radius:10px;
	width:100% !important;
	margin-bottom:5% !important;
	font-size:13px !important;
}
.logo
{
	margin-top:-8%;
}
.top_up_panel
{
	margin-left:5%;
}
}

@media only screen and (max-width: 1007px) and (min-width: 780px){
#list
{
	width:240px;
}
}
@media only screen and (max-width: 505px) and (min-width: 249px){
	#list
	{
		width:240px;
	}
	#verfication_div
	{
		width:250%;
		margin:100% 0 0 0;
	}
}