@charset "utf-8";
/* CSS Document */
body{font-family: 'Segoe UI',Tahoma;font-size:14px;line-height:18px;background-color:#f0f0f0;}
:focus{
	outline:none;
	border-color: #999;
}
.cusel:focus { outline:none; border-color: #999;}

   .textpaddingleft{ border-top-width: 0px; border-top-style: solid; padding-top: 8px;}  
input,select{
	padding:5px;
	border: 1px solid #e3ddd7;
}
.formwidth{width: 45% !important;
    padding-bottom: 5px;
    padding-top: 5px;}
.formwidthforOtpResend{width: 50% !important;
    padding-bottom: 5px;
    padding-top: 5px;}
 .keyformwidth{width: 100% !important;
 margin-left:23%;
 margin-right:23%;
    padding-bottom: 5px;
    padding-top: 5px;}
    .keyformwidth-AR{width: 70% !important;
 margin-right:26.5%;
    padding-bottom: 5px;
    padding-top: 5px;}
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {float: left;	display:inline-block;}	
.col-lg-12 {width: 100%;}
  .col-lg-11 {width: 91.66666667%;}
  .col-lg-10 {width: 83.33333333%;}
  .col-lg-9 {width: 75%;}
  .col-lg-8 {width: 66.66666667%;}
  .col-lg-7 {width: 58.33333333%;}
  .col-lg-6 {width: 50%;padding-bottom: 5px;padding-top: 5px;}
  .col-lg-5 {width: 41.66666667%;}
  .col-lg-4 {width: 33.33333333%;}
  .col-lg-3 {width: 25%;}
  .col-lg-2 {width: 16.66666667%;}
  .col-lg-1 {width: 8.33333333%;}	
.wrapper{max-width:960px;margin:10px auto;border:1px solid #d8d8d8;}
.float-right{float:right;padding-top: 16px;}
.body-container{background-color:#fff;}	
header{display:inline-block;width:100%;background-color:#fff;}
header img{padding:5px;}
.container {width: 98%;display: inline-block;padding: 1%;}
.sub-title-line {font-size: 125%;font-weight: bold;margin-top: 10px;margin-bottom: 10px;padding-top: 10px;padding-bottom: 5px;border-bottom: 2px solid #f1f1f1;}
.sub-title-line .col-lg-12{height: 29px;}		
/* Accordion */	
.accordion h2,.accordion2 h2{background: url(../images/paypage-images/heading-bg.jpg) 0 0 repeat-x;line-height:29px;padding:0 5px;font-weight: normal;font-size:14px;color:#333;margin:0;cursor:pointer;}	
.accordion2 h2.open{cursor:default;}
.accordion2 h2.close{opacity: 1;width: 100%;}	
.accordion .group,.accordion2 .group{padding:2px;margin-bottom:3px;}	
.accordion .group .content,.accordion2 .group .content{padding:5px;}	
.cvv-card{margin-top: 60px;}	
.captcha-field{float: left;margin: 5px 8px 5px 0;}
.captcha{margin: 18px 5px 18px 0;}
#reload:hover{cursor:pointer;}
.btn{border: 0;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;color: #fff;padding: 7px 15px;border: 0; -webkit-appearance: none;}
.pbtn{width:80px !important;}
.btnwidth{width:65px !important;}
.gray-btn{background: #555;border: 0;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;color: #fff;padding: 7px 15px;border: 0;}
 .gray-btn:hover{background: #333;cursor:pointer;}	  
footer img{padding: 10px 5px 10px 0;vertical-align: middle;}	
.tooltip {display:none;position:absolute;border:1px solid #333;background-color:#161616;border-radius:5px;padding:5px 10px;color:#fff;max-width:300px;}	
.help{width: 24px;height: 34px;padding: 5px 12px;margin-left:5px;}	
.note{color:#aeaeae;font-size:75%;font-weight: normal;}
input[type="radio"]{margin: 0;}
.radio-txt{vertical-align: top;line-height: 13px;padding: 0 5px;}
.progress-page {height: 100%;width: 100%;position: fixed;background-color: rgba(0,0,0,0.5);  z-index: 9999;  top: 0;left: 0;}
.progress-insidepage {text-align:left;left:38%;top:30%;position: absolute;background-color:#fff;padding:10px;}
.labelstyle{color: #fff;font-size: 20px;padding-left:350px;	padding-top : 550px }
.sucess{color: rgb(13,167,138);font-size: 16px;}
.error{color: red;font-size: 16px;}
.textstyle{font-size:20px}
.labeltext{color: #0f0f0f;font-size: 16px;}
.tickimg{display: block;margin-left: auto; margin-right: auto;}
 textarea{
		resize:none;
		border: 1px solid #e3ddd7;
		}


@media(min-width:980px){
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  position: relative;
  min-height: 1px;
 /* padding-right: 15px;
  padding-left: 15px;*/
}
}
@media(min-width:980px){
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
  float: left;
  display:inline-block;
}
.col-xs-12 {
  width: 100%;
}
.col-xs-11 {
  width: 91.66666667%;
}
.col-xs-10 {
  width: 83.33333333%;
}
.col-xs-9 {
  width: 75%;
}
.col-xs-8 {
  width: 66.66666667%;
}
.col-xs-7 {
  width: 58.33333333%;
}
.col-xs-6 {
  width: 50%;
}
.col-xs-5 {
  width: 41.66666667%;
}
.col-xs-4 {
  width: 33.33333333%;
}
.col-xs-3 {
  width: 25%;
}
.col-xs-2 {
  width: 16.66666667%;
}
.col-xs-1 {
  width: 8.33333333%;
}

}
.wordbreak{
	display: block;
    word-wrap:break-word;
    width: 150px;
}
.textcenter{margin-left:32%;margin-right:auto;}
.retrytextcenter{margin-right:auto;}
.retrytextcenter span{font-size:16px}
.overlay-container {
    display: block;
    width: 100%;
    height: 100%;
   /* position: fixed;*/
    top: 0;
    z-index: 10000;
    overflow: auto;
}
.black-overlay {
    display: block;
    position: fixed;
    top: 0%;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 1000;
}
.overlay-container .popup {
    display: block;
    position: absolute;
    top: 50%;
    left:50%;
    width: 82%;
    max-width: 450px;
    min-height: 268px;
    height: auto;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    padding: 10px;
   /*  text-align: center; */
    z-index: 1000;
    background-color: #fff;
    /* border: 2px dashed #c5c5c5; */
    box-shadow: 0 0 0 7px #fff;
}

.overlay-container .popup .popupClose {
    font-size: 3.5em;
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 0px;
}

@media (min-width: 320px) and (max-width: 750px) {
	.keyformwidth{width: 300px !important;margin-left:5px !important; margin-right:3% !important;}
	.retrytextcenter{margin-right:auto;}
	
div .textcenter .col-lg-4{width:33%;}
.textcenter{margin-left:10%;}
}

@media (min-width: 320px) and (max-width: 750px) {
div #debitExpDate .col-lg-4{width:33%;}
}

@media (min-width: 320px) and (max-width: 750px) {
div #creditExpDate .col-lg-4{width:33%;}
}
@media (min-width: 320px) and (max-width: 750px) {
div #prepaidExpDate .col-lg-4{width:33%;}
}

@media (min-width: 375px) and (max-width: 750px) {
	.retrytextcenter{margin-right:auto;}
	.formwidth{width: 50% !important;
    padding-bottom: 5px;
    padding-top: 5px;}
    .formwidthforOtpResend{width: 55% !important;
    padding-bottom: 5px;
    padding-top: 5px;}
	.keyformwidth{width: 300px !important;margin-left:5px !important; margin-right:0% !important;}
	
.keypad_container .col-lg-6{width:85%;}
.keypad_container .keypadbtnalignment{margin-left:10% !important;margin-right: 10% !important;}
.keypad_container .btn{border: 0;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;color: #fff;padding: 7px 15px;border: 0;background: #d7181f;margin-right: 8px;margin-bottom: 8px;width: 45px;-webkit-appearance: none;}
.btnwidth{width: 82px !important;margin-right: 8px !important;margin-left: 0px !important;margin-top: 5px;}

#captcha_image{
	margin-top:12px;
	
}

}



.hgt-normal{
	line-height: normal;
}

.textcenter{margin-left:32%;margin-right:auto;}


@media screen and (max-width: 1280px) {
.textcenter .col-lg-10{width:350px;}
.textcenter .col-lg-5{width:175px;}
.textcenter{margin-left:30%;}
}
@media screen and (max-width: 600px) {
.textcenter .col-lg-10{width:350px;}
.textcenter .col-lg-5{width:175px;}
.textcenter{margin-left:20%;}
}
@media screen and (max-width: 414px) {
.textcenter .col-lg-10{width:350px;}
.textcenter .col-lg-5{width:145px;}
.textcenter{margin-left:10%;}
}

@media screen and (max-width: 350px) {

.textcenter .col-lg-10{width:350px;}
.textcenter .col-lg-5{width:350px;}
.textcenter{margin-left:28%;}
.col-lg-6{width:80%;}

}
/* .bank-logo{margin-top:20px;} */
.headingalignment{ margin:20px 5%;}

.retrylogo {
	margin-left: 18px;
	margin-right: 6px;
	vertical-align: bottom;
	margin-top:36px;
}

/* Benefit Payment Pages  */


#bannerDiv table
{
    margin-left: auto;
    margin-right: 0em;
    padding: .5em 0em;
}

body{
direction: ltr;
}

body.EN {
   direction: ltr;
}


body.AR {
   direction: rtl; 
}

.text_AR
{
    font-family:Tahoma;
}


#contentDiv.AR
{
    text-align:right;
}

#contentDiv.AR input[name="debitCardNumber"]
{
    direction:ltr;
}

#contentDiv.AR input[name="debitCardholderName"]
{
    direction:ltr;
}

#contentDiv.AR input
{
    text-align:left;
}


#contentDiv.AR input[type="button"]{text-align:center; font-family: Tahoma;}
#contentDiv.EN input[type="button"]{text-align:center}

#language_Button
{
    cursor:pointer;
}

.aWithItems
{
    cursor:pointer;
}

.AR .button
{
	font-family:Tahoma;
}

#footerDiv a, #bank_list
{
    text-decoration:underline;
}

#footerDiv,#viewContent 
{
	background-color:white;	
}

#languageDiv a:hover, #footerDiv a:hover, #bank_list:hover
{
    color:black;
}

#footerDiv.AR
{
    text-align:right;
}


a:hover
{
    color:#64c2f4;
	cursor:pointer;
}

.EN_field, .card_no_TextBox, .PIN_no_TextBox, .name_TextBox
{
    direction:ltr !important;
	text-align:left !important;
}

#headerDiv
{
    direction:ltr;
    padding:0.5em;
}



#contentDiv .parent_div, #footerDiv .parent_div
{
    padding:0em;
}

#Ecom_Payment_Card_Number_ID td.paymentlabel
{
	vertical-align:top;
}
#keypad_div_card_number
{
	z-index:1;
}
#keypad_div, #keypad_div_card_number
{
    padding-top:.5em;
}
#keypad_div_top_text_TD, #keypad_div_top_text_card_number_TD
{
    text-align:center;
    padding:0em;
    cursor:default;
}
#keypad_div #numbers, #keypad_div_card_number #numbers_card_number
{
    /* padding:.15em .5em; */
}
#keypad_div #numbers, #keypad_div_card_number
{
    display:none;
}
#keypad_div #numbers td, #keypad_div_card_number #numbers_card_number td
{
    text-align:center;
}

/* #keypad_div #numbers, #keypad_div_card_number #numbers_card_number
{
    border:.1em solid silver;
    border-radius:.5em;
    background-color:#eeeeee;
} */

#headerDiv, #contentDiv
{
    background-color:White;
}


.website_title_text , website_URL_text {
	display: initial !important;
}

#websiteTitleDiv
{
    text-align:right;
    font-size:2em;
    color:#0c4c6e;
	padding: 10px;
}


#mainDiv
{
    width:1000px;
}

#contentDiv .parent_div, #footerDiv .parent_div
{
    padding:0em;
}


#hostedBanner{
	display: initial !important;
}

#hostedBannerMbl{
	display: none !important;
}

#footerDiv table tr, #keypad_div #numbers table tr
{
	background-color:transparent !important;
}

.otpPageformwidth
{
	width: 75% !important;
    padding-bottom: 5px;
    padding-top: 5px;
    
}

/* mobile Version //////////////////////////////////////////////////////////*/
@media screen and (max-width:660px) and (orientation: landscape)
{
#mainDiv
{
    width:96%;
}

#hostedBannerMbl{
	display: initial !important;
}

#hostedBanner{
	display: none !important;
}

#banner_content_div
{
	top:-1.25em;
	padding-right:0em;
}
#banner_parent_div
{
	text-align:center;
	margin:0em auto;
	display:table;
}
#banner_img_div
{
	display:block;
	border-left:0em;
	padding-left:0em;
	padding-bottom:1em;
	float:inherit;
}
#websiteTitleDiv
{
    position:relative;
    top:.3em;
    font-size:1.4em;
	padding-bottom:.5em;
	text-align:center;
}

.tranformwidth
{
	width: 70% !important;
    padding-bottom: 5px;
    padding-top: 5px;
    
}




}

@media screen and (max-width:660px) and (orientation: portrait)
{
#mainDiv
{
    width:94%;
}
#hostedBannerMbl{
	display: initial !important;
}

#hostedBanner{
	display: none !important;
}

#banner_content_div
{
	padding-right:0em;
}
#banner_parent_div
{
	text-align:center;
	margin:0em auto;
	display:table;
}
#banner_img_div
{
	display:block;
	border-left:0em;
	padding-left:0em;
	padding-bottom:1em;
	float:inherit;
}
#websiteTitleDiv
{
    position:relative;
    top:.3em;
    font-size:1.4em;
	padding-bottom:.5em;
	text-align:center;
}
#Ecom_Payment_Card_Verification_ID
{
	display:none;
}
#Ecom_Payment_Card_Number_ID input.paymentinput, #Ecom_Payment_Card_Name_ID input.paymentinput, #Ecom_Payment_Pin_ID input.paymentinput
{
	width:11.37em;
}
#keypad_div, #keypad_div_card_number
{
	position: relative;
	left:0em;
	width:100%;
	text-align: center;
	padding:0em;
	padding-top:.5em;
}
#keypad_div #numbers, #keypad_div_card_number #numbers_card_number
{
	width:100%;
	padding:.5em 0em;
	border-left:0em;
	border-right:0em;
}
#keypad_div #numbers, #keypad_div #numbers table, #keypad_div_card_number #numbers_card_number, #keypad_div_card_number #numbers_card_number table
{
    margin:0em auto;
}
#keypad_div .button, #keypad_div_card_number .button
{
	font-size:1.15em;
}

.otpPageformwidth
{
	width: 100% !important;
    padding-bottom: 5px;
    padding-top: 5px;
    
}


}
/* tablet Version //////////////////////////////////////////////////////////*/
@media screen and (min-width:661px) and (max-width:1260px) and (orientation: portrait)
{
#mainDiv
{
    width:96%;
}
#hostedBannerMbl{
	display: initial !important;
}

#hostedBanner{
	display: none !important;
}
#banner_content_div
{
	top:-1.25em;
	padding-right:0em;
}
#websiteTitleDiv
{
    position:relative;
    top:.3em;
    font-size:1.8em;
	padding-bottom:1.25em;
}

.keypad_container .keypadbtnalignment{
	margin-left:49% !important;margin-right: 49% !important;
 }


}

@media screen and (min-width:768px) and (orientation: portrait)
{
	.keypad_container .keypadbtnalignment{
	margin-left:22% !important;margin-right: 22% !important;
 }
}

@media only screen 
    and (min-device-width : 375px) // or 213.4375em
    and (max-device-width : 667px) // or 41.6875em
    and (width : 375px) // or 23.4375em
    and (height : 559px) // or 34.9375em
    and (orientation : portrait) 
    and (device-aspect-ratio : 375/667)
    and (aspect-ratio : 375/559)
    and (device-pixel-ratio : 2)
    and (-webkit-min-device-pixel-ratio : 2)
{ 
  .keyformwidth{width: 300px !important;margin-left:5px !important; margin-right:3% !important;} //here you can call pin pad class
}


 .pinfiledlength{
	 width:70%;
} 

.tranformwidth
{
	width: 60% !important;
    padding-bottom: 5px;
    padding-top: 5px;
    
}


 .otpPageformwidth label {
    width: 38% !important;
} 
.disabled {
    pointer-events: none;
    background: gray !important;
    opacity: 0.7;
    cursor: no-drop !important;
}


#contentDiv.AR input[name="otpinput"]
{
    direction:ltr;
}

#Retry{
	min-width:186px;
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 30%; /* Could be more or less, depending on screen size */
}


/* ApplePay changes starts */
.apple-pay-button {
    -webkit-appearance: -apple-pay-button; 
    -apple-pay-button-type: plain;
    visibility: hidden;  /* button is hidden by default */ 
    display: inline-block;
    width: 200px;
    min-height: 30px;
    border: 1px solid black;
    background-image: -webkit-named-image(apple-pay-logo-white);
    background-size: 100% calc(60% + 2px);
    background-repeat: no-repeat;
    background-color: black;
    background-position: 50% 50%;
    border-radius: 5px;
    padding: 0px;
    margin: 5px auto;
}

.apple-pay-button.visible {
	visibility: visible;
	
}
/* ApplePay changes ends */


#otpinput{
  -webkit-text-security: disc;
    -moz-text-security:circle;
     text-security:circle;
}


/*  input[type='password']:focus, 
 input[type='number']:focus, 
 textarea:focus { 
 font-size: 16px; 
 } */ 
  
 /* disable auto-zoom on iphone input field focus */ 
/*  @media screen and (-webkit-min-device-pixel-ratio:0) { 
  
 select:focus, 
 textarea:focus, 
 input:focus { 
 font-size: 16px; 
 } 
 } */ 

 

/* 
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1) { 
  .web-captcha{
	width:46% !important;
}

#contentDiv.AR .web-captcha{
	width:29% !important;
}

.web-captcha-savedcard{
	width: 30.8% !important;
} 

}

@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (min-resolution: 192dpi) { 
  .web-captcha{
	width:30.555555% !important;
}

#contentDiv.AR .web-captcha{
	width:29% !important;
}

.web-captcha-savedcard{
	width: 39.8%;
} 


} */

/* @media screen 
  and (min-device-width: 593px) 
  and (max-device-width: 1024px) {
  
  .web-captcha{
	width:39% !important;
}

#contentDiv.AR .web-captcha{
	width:29% !important;
}
  } */
 

/* .pininput-bg{
	background: url(../images/bg.png) no-repeat right center;	
} */

/* input[type=password]:focus #cardPin{
	background-color:lightGreen;
	outline:none;
	font-size:16px;
	
} */

/* .input_container {
    position:relative;
    padding:0 0 0 0px;
    margin:0 20px;
    background:#ddd;
    direction: rtl;
    width: 200px;
} */
/* #cardPin {
    height:20px;
    margin:0;
    padding-right: 30px;
    width: 100%;
} */
/* #input_img {
    position:absolute;
    bottom:2px;
    right:5px;
    width:24px;
    height:24px;
} */