body * {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	}
    
    #opayoform {
    display: block;
    width: 100%;
    text-align:left !important;
     background-color: #f4f9fd; 
    border: none; 
       height: 400px;
       padding:20px; }
       
 #opayoformin {
 width:80%;
  margin:auto; 
}
          
       
.cardform-label 
 {   width: 100%;
    font-size:14px;
    margin-bottom:5px;}
    
.cardform-field {
	float: left;
     width: 100%;
     margin-bottom:10px;
 }
    
 .cardform-field input {
	font-size: 14px;
    padding: 10px 10px;
    border: 1px solid #83a0d2;
    border-radius: 5px;
     min-width: 100%;
    max-width: 100%;
    background-color:#fff !important;

    
}

.error_message {color:red; height:17px; font-size:12px; }

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color:#acb6be; 
  opacity: 1; /* Firefox */
}

.cardform-field-expiry {
float:left;
font-size:14px;
padding:3px;
     margin-bottom:10px;
 }
 
  .cardform-field-expiry select{
	font-size: 14px;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    width:auto;
    background-color:#fff !important;
}

 .cardform-field-expiry input{
	font-size: 14px;
    padding: 10px 10px;
    border: 1px solid #83a0d2;
    border-radius: 5px;
     min-width: 100%;
    max-width: 100%;
    background-color:#fff !important;
}

   
#button_save {
float: left;
         width:100%; 
}

#button_save .mybtnstart {  } 
	
#ccards { width:100%; margin:30px 0 20px 0;}
#ccards img {width:280px;height:auto;  margin-bottom: 0px; /* vertical-align: middle;*?}   




/*    
#nameoncard label {
	float: left;
    width: 100%;
}   
    
#nameoncard input {
	font-size: 14px;
	padding: 8px 10px;
	border: 1px solid #ccc;
	border-radius: 3px;
	width: 80%;
	}
    
    
    
	#_el_label_nameoncard {
		position: absolute;
		top: 30px;
		left: 12px;
	}
	#_el_label_nameoncard label {
	font-size: 14px;
	width: auto;
	}
	#_el_input_cardnumber {
	position: absolute;
	top: 83px;
	left: 137px;
	}
	#_el_input_cardnumber input {
	font-size: 14px;
	padding: 8px 10px;
	border: 1px solid #ccc;
	border-radius: 3px;
	width: auto;
	}
	#_el_label_cardnumber {
		position: absolute;
		top: 87px;
		left: 20px;
	}
	#_el_label_cardnumber label {
	font-size: 14px;
	width: auto;
	}
	#_el_input_expirationmonth {
		position: absolute;
		top: 147px;
		left: 137px;
	}
	#_el_input_expirationmonth input {
	font-size: 14px;
	padding: 8px 10px;
	border: 1px solid #ccc;
	border-radius: 3px;
	width: 50px;
	}
	#_el_input_expirationyear {
		position: absolute;
		top: 147px;
		left: 228px;
	}
	#_el_input_expirationyear input {
	font-size: 14px;
	padding: 8px 10px;
	border: 1px solid #ccc;
	border-radius: 3px;
	width: 60px;
	}
	#_el_label_expiration {
		position: absolute;
		top: 152px;
		left: 42px;
	}
	#_el_label_expiration label {
	font-size: 14px;
	width: auto;
	}
	#_el_label_expirationdivider {
		position: absolute;
		top: 152px;
		left: 194px;
	}
	#_el_input_cvc {
		position: absolute;
		top: 209px;
		left: 137px;
	}
	#_el_input_cvc input {
	font-size: 14px;
	padding: 8px 10px;
	border: 1px solid #ccc;
	border-radius: 3px;
	width: 60px;
	}
	#_el_label_cvc {
		position: absolute;
		top: 215px;
		left: 77px;
	}
	#_el_label_cvc label {
	font-size: 14px;
	width: auto;
	}
	#_el_tooltip_cvc {
		position: absolute;
		top: 215px;
		left: 233px;
	}
	.tooltip {
		display:inline-block;
		position:relative;
		text-align:left;
		  /*i used these margins to position tooltip around the conatainer so dont include them*/
		/*}
		
		.tooltip .tooltip-top {
		min-width:200px;
		top:-20px;
		left:50%;
		transform:translate(-50%, -100%);
		padding:10px 20px;
		  /*all of the tooltips tweaks the margins to fit you*/
		 /*  margin-top:10px;
		  color: #000000;
		  background-color: #f0f2f5;
		font-weight:normal;
		font-size:12px;
		border-radius:8px;
		position:absolute;
		z-index:99999999;
		box-sizing:border-box;
		box-shadow:0 1px 8px rgba(0,0,0,0.8);
		visibility:hidden; opacity:0; transition:opacity 0.8s;
		}
		
		.tooltip:hover .tooltip-top {
		visibility:visible; opacity:1;
		}
		.tooltip:focus .tooltip-top {
		visibility:visible; opacity:1;
		}
		
		.tooltip .tooltip-top i {
		position:absolute;
		top:100%;
		left:50%;
		margin-left:-12px;
		width:24px;
		height:12px;
		overflow:hidden;
		}
		
		.tooltip .tooltip-top i::after {
		content:'';
		position:absolute;
		width:12px;
		height:12px;
		left:50%;
		transform:translate(-50%,-50%) rotate(45deg);
		background-color:#EEEEEE;
		box-shadow:0 1px 8px rgba(0,0,0,0.8);
		}
	#_el_tooltip_cvc .tooltip {
		style: block;
		font-size: 14px;
		color: white;
		padding: 5px 10px;
		background-color: #ccc;
		border-radius: 14px;
		width: auto;
	}
	.tooltip {
		cursor: pointer;
	}
*/