@charset "utf-8";
/* CSS Document */
#cardbtnevnt
{
	/*position:fixed;
	top:0;
	bottom:0;*/
	display:flex;
	justify-content: center;
	vertical-align: middle;
	align-items: center;
	width:100%;
	height:100%;
	margin:auto;
	background:#fff;
	/*z-index: 1000;*/
}
.box {
	
	width:100%;
	height:70vh;
	
	font-size: 30px;
	
	position: relative;
	
	vertical-align: middle;
	transition: .3s color, .3s border, .3s transform, .3s opacity;
	/*z-index: 1200;*/
}
.load_p 
{
	position: absolute;
    left: 0;
    right: 0;
    top: 55%;
    
    margin: auto;
    /*z-index: 1200;*/
}
.load_p span
{
     display: inline-block;
    white-space: nowrap;
    animation: example 4s infinite;
    overflow: hidden;
	color:red;
	font-size:16px;
	font-weight: bold;
	padding:5px;
}

@keyframes example {
  from {
    width: 0;
  }
  to {
    width: 350px;
  }
}

[class*="loader-"] {
	
	position: absolute;
	width: 1em;
	height: 1em;
	top:0;left:0;right:0;bottom:0;
	margin: auto;
	color: inherit;
	vertical-align: middle;
	pointer-events: none;
}
.loader-30
{
	border: .2em solid transparent;
	border-top-color: red;
	border-bottom-color:red;
	border-radius: 50%;
	/*position: relative;*/
	animation: 1s loader-30 linear infinite;
	&:before,
	&:after {
		content: '';
		display: block;
		width: 0;
		height: 0;
		position: absolute;
		border: .2em solid transparent;
		border-bottom-color: red;
	}
	&:before {
		transform: rotate(135deg);
		right: -.3em;
		top: -.05em;
	}
	&:after {
		transform: rotate(-45deg);
		left: -.3em;
		bottom: -.05em;
	}
}

@keyframes loader-30 {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

.paypal-button-container {
    border-radius: 5px;
    background-color: #FFFFFF;
    padding: 10px 0 0;
    max-width: 760px;
    width: 100%;
    margin: 0 auto;
}
.card_container {
    border-radius: 5px;
    /*background-color: #FFFFFF;*/
    padding: 20px 0;
    max-width: 760px;
    width: 100%;
    margin: 0 auto ;
}
.card_field{
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
   /* margin-bottom: 16px;*/
    resize: vertical;
    height:40px;
    background:white;
    font-size:17px;
    color:#3a3a3a;
    font-family:helvetica, tahoma, calibri, sans-serif;
}
.mbottom
{
margin-bottom: 16px;	
}
.p-20
{
	/*padding:0 20px;*/
}
.to_f_cap
{
	text-transform: capitalize;
	
}
.card_field_50{
    width: 50%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
    height:40px;
    background:white;
    font-size:17px;
    color:#3a3a3a;
    font-family:helvetica, tahoma, calibri, sans-serif;
}
.card_field_75{
    width: 75%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
    height:40px;
    background:white;
    font-size:17px;
    color:#3a3a3a;
    font-family:helvetica, tahoma, calibri, sans-serif;
}
.paypal-button.paypal-button-color-gold, .paypal-button-row .paypal-button-color-gold .menu-button
{
	    background: purple!important;
	
}

.col-25 {
    -ms-flex: 25%; /* IE10 */
    flex: 25%;
}
.col-50 {
    -ms-flex: 50%; /* IE10 */
    flex: 50%;
}
#card-form input[type=text], select, textarea {
    width: 100%;padding: 12px;
	 
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
    height:40px;
    background:white;
    font-size:17px;
    color:#3a3a3a;

}

.message_container {
    border-radius: 5px;
    background:#FFFFFF;
    font-size:13px;
    font-family:monospace;
    padding: 20px;
}
#loading {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: fixed;
    display: block;
    opacity: 0.7;
    background-color: #fff;
    z-index: 99;
    text-align: center;
}
#loading-image {
    position: absolute;
    z-index: 15;
    top: 50%;
    left: 50%;
    margin: -100px 0 0 -150px;
}
.spinner {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -50px; /* half width of the spinner gif */
    margin-top: -50px; /* half height of the spinner gif */
    text-align:center;
    z-index:1234;
    overflow: auto;
    width: 100px; /* width of the spinner gif */
    height: 102px; /* height of the spinner gif +2px to fix IE8 issue */
}
.button_container {
    display: flex;
    justify-content: center;
}



.img_method,.span_method
{
	width:auto;
	height:20px;
	padding-left:8px;
}
.checkout_container
{
	background: #f2f2f2;
	padding:3rem ;
    border-radius: 10px;
}
@media (max-width: 500px) {
  .checkout_container
{
	background: #f2f2f2;
	padding:1.5rem ;
    border-radius: 10px;
}
}
.card-submit {
    
    font-family: inherit;
    font-size: 1rem;
    font-weight: bold;
    line-height: inherit;
    cursor: pointer;
   
    height: auto;
    padding: 0.65rem 1.25rem;
    border: none;
    outline: none;
    border-radius: 4px;
    color: #fff;
    background: var(--primary-color);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -1px rgb(0 0 0 / 6%);
    text-transform: capitalize;
    text-rendering: optimizeLegibility;
}
.to_cap
{
text-transform: uppercase;	
}
.card-submit:hover{
	opacity:.9;
	color: #fff;
	outline:none;
}
#cancelpay
{
text-decoration: none;
	 margin-left: 8px;
}
.paypal-button-container
{
	background: #f2f2f2!important;
}
.lblcard
{
	justify-content: center;
    vertical-align: middle;
    color:#fff;
    align-items: center;
	background: var(--primary-color);
	padding:10px 0;
	font-size:15px;
	font-weight:bold;
	
	margin: auto;
	
}
.lblcard:hover{
	/*//opacity:.9;*/
}
.lblcard-img
{
	width:auto;
	height:35px;
}
#lblor
{
	font-size:20px;
	font-weight:bold;
	color:var(--primary-color);
	justify-content: center;
    vertical-align: middle;
}
.span-card
{
	/*padding:8px;*/
	
}
.color-err
{
	color:red;
}
.color-success
{
	color:green;
}