@charset "utf-8";
*, *::before, *::after {
  box-sizing: border-box;
}
 .container {
    display: flex;       /* This activates Flexbox */
    gap: 0px;  
	 
  height: 100dvh; /* Takes up 100% of the viewport (screen) height */        /* This puts space between the columns */
  }

  .column {
    flex: 1;            /* This makes both columns equal width */
   	
    /* Optional: adds a light background color */
  }
  html, body {
  height: 100%;
  margin: 0;
}
  .col2 {
	   background-color: #800;
	    
	   justify-content: center; /* Centers horizontally */
  align-items: center;
  display:flex;
  
  }
  .wpwl-button-pay {
	  float:none !important;
	  background:none !important;
	  border:2px solid #800;
	  border-radius:90px;
	  color:#800;
	  padding:8px 28px !important;
	  font-size:14px;
	font-weight:bold;
	letter-spacing:1px;
	text-transform:uppercase;
  }
   .wpwl-button-pay:hover {
	   background:#800 !important;
	   border:2px solid #800 !important;
	   color:#fff !important;
   }
   
   .processedby {
	   text-align:center;
	   font-size:14px;
	   color:#666;
   }
  .wpwl-wrapper-submit {
	  text-align:center;
	  margin-top:25px;
  }
  .col1 {
	 justify-content: center; /* Centers horizontally */
  align-items: center;     /* Centers vertically */ 
	display:flex;  
	flex-direction:column;
  }
  body {
	  margin:0px;
	 font-family: "Questrial", sans-serif;
  font-weight: 400;
  font-style: normal;
  }
  .footer {
	  background:#000;
	  color:#fff;
	  width: 100%;
	  bottom:0px;
	  height:40px;
	  position:absolute;
	  z-index:2;
	  text-align:center;
  }
  .introtext {
	  text-align:center;
	  padding:20px 90px;
  }
 .returnbutton a {
	 text-transform:uppercase;
	 font-size:12px;
	 color:#fff;
	  text-decoration: none;
	 padding:10px 30px;
	 background:#800;
	 box-shadow:0px 0px 5px #777;
	 border-radius:10px;
	
	 
 }
 .returnbutton a:hover {
	 background:#222;
 }
 .returnbutton {
	 position:absolute;
	 top:4px;
	  
 }
 .donordetails {
	 color:#222;
 }
 .donatetitle {
	  
	 font-size:24px;
	 padding-bottom:0px;
	 text-transform:uppercase;
	 color:#800;
	 font-weight:bold;
	 letter-spacing:1px;
 }
 .donatetext {
	 margin-bottom:20px;
	 color:#777;
 }
 .inputrow2 {
	 display:flex;
	 gap:15px;
 }
 .inputrow {
	 width:100% !important;
 }
 .inputrow input {
	 width:95% !important;
	 1min-height:100px !important;
 }
 .inputcol {
    flex: 1;            /* This makes both columns equal width */
   	
    /* Optional: adds a light background color */
  }
 

 .col2inner {
	 background:#fff;
	 padding:30px;
	 box-shadow:0px 0px 10px #444;
	 width:80%;
	 border-radius:10px;
 }
/* Container box for each form item */
.inputcol {
  position: relative;
  margin:7px 0;
  width: 300px;
}

/* Beautiful custom input boxes */
.inputcol input {
  font-size: 14px;
  padding: 10px 10px 10px 21px;
  display: block;
  width: 90%;
  border: none;
  border-bottom: 2px solid #ccc;
  background: transparent;
  outline: none;
  font-weight:bold;
  letter-spacing:0.8px;
}

/* Default state of the label inside the input box */
.inputcol label {
  color: #666;
  font-size: 14px;
  font-weight: normal;
  position: absolute;
  pointer-events: none; /* Allows user to click right through the text */
  left: 5px;
  top: 10px;
  transition: 0.2s ease all; /* Makes the slide effect super smooth */
}

/* --- THE FANCY EFFECT --- */
/* If the user clicks into the box (:focus) OR if text is typed (placeholder is NOT shown) */
.inputcol input:focus ~ label,
.inputcol input:not(:placeholder-shown) ~ label {
  top: -6px;
  font-size: 12px;
  color: #800; /* Changes label to a fancy purple color */
  font-weight: bold;
}

/* Decorative bottom line that expands on click */
.inputcol .bar {
  position: relative;
  display: block;
  width: 100%;
}

.inputcol .bar:before {
  content: '';
  height: 2px;
  width: 0;
  bottom: 0px;
  position: absolute;
  background: #800;
  transition: 0.2s ease all;
  left: 0;
}

/* Expand the purple bottom accent line when clicked */
.inputcol input:focus ~ .bar:before {
  width: 100%;
}

.inputrow .fa:before, .inputrow2 .fa:before {
	padding-right:5px;
	color:#800 !important;
}
.pamount {
	width:100%;
}

.pamount input::-webkit-outer-spin-button,
.pamount input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
.pamount input[type=number] {
  -moz-appearance: textfield;
}
.proceedmain {
	justify-content:center;
	display:flex;
	margin-top:20px;
}
.proceedmain button {
	background:none !important;
	padding:10px 30px;
	border:2px solid #800;
	color:#800;
	font-size:14px;
	font-weight:bold;
	letter-spacing:1px;
	text-transform:uppercase;
	border-radius:90px;
	transition: background-color 0.3s ease; 
}
.xx1 {
	font-size:13px;
}

.xx1 .inputcol, .xx1 {
	margin:0px !important;
}
.proceedmain a {
	padding:10px 30px;
	border:2px solid #800;
	color:#800;
	border-radius:90px;
	transition: background-color 0.3s ease; 
	 text-decoration: none;
}

.proceedmain button:hover {
	background:#800 !important;
	color:#fff;
}

.proceedmain a:hover {
	background:#800 !important;
	color:#fff;
}
.titleb {
	color:#800;
}
.introtexttitle {
	text-transform:uppercase;
	font-weight:bold;
}/* CSS Document */
.editdetails a {
	font-size:8px;
	color:#800;
	border:1px solid #800;
	padding:6px 10px;
	border-radius:90px;
	text-decoration:none;
	position:relative;
	margin-left:15px;
	top:-7px;
}
.xborder {
  width: 100%;
  height: auto;
  background: 
    /* Top Left Corner */
    linear-gradient(to right, #800 1px, transparent 1px) 0 0,
    linear-gradient(to bottom, #800 1px, transparent 1px) 0 0,
    /* Top Right Corner */
    linear-gradient(to left, #800 1px, transparent 1px) 100% 0,
    linear-gradient(to bottom, #800 1px, transparent 1px) 100% 0,
    /* Bottom Left Corner */
    linear-gradient(to right, #800 1px, transparent 1px) 0 100%,
    linear-gradient(to top, #800 1px, transparent 1px) 0 100%,
    /* Bottom Right Corner */
    linear-gradient(to left, #800 1px, transparent 1px) 100% 100%,
    linear-gradient(to top, #800 1px, transparent 1px) 100% 100%;
  
  background-repeat: no-repeat;
  background-size: 20px 20px; /* Controls how long the corner lines are */
  padding:20px;
  margin-top:20px;
}
.wpwl-form {
	 
	 
	box-shadow:none !important;
	 width: 100%;
	 max-width:100% !important;
	 margin:15px 0px 0px 0px !important;
  height: auto;
  border:none !important;
  background: 
    /* Top Left Corner */
    linear-gradient(to right, #800 1px, transparent 1px) 0 0,
    linear-gradient(to bottom, #800 1px, transparent 1px) 0 0,
    /* Top Right Corner */
    linear-gradient(to left, #800 1px, transparent 1px) 100% 0,
    linear-gradient(to bottom, #800 1px, transparent 1px) 100% 0,
    /* Bottom Left Corner */
    linear-gradient(to right, #800 1px, transparent 1px) 0 100%,
    linear-gradient(to top, #800 1px, transparent 1px) 0 100%,
    /* Bottom Right Corner */
    linear-gradient(to left, #800 1px, transparent 1px) 100% 100%,
    linear-gradient(to top, #800 1px, transparent 1px) 100% 100% !important;
  
  background-repeat: no-repeat !important;
  background-size: 20px 20px !important; /* Controls how long the corner lines are */
  padding:20px;
  margin-top:20px;
  border-radius:0px !important;
	
}
.wpwl-wrapper-brand,  .wpwl-label-brand {
	display:none !important;
}

.cardform .wpwl-label {
	font-size:13px;
	font-weight:bold;
	color:#800;
}

.wpwl-control {
	border-top:none !important;
	border-bottom:1px solid #800 !important;
	border-left:none !important;
	border-right:none !important;
	border-radius:0px !important;
}

.successlogo {
	text-align:center;
}
.xx2 {
	margin-top:30px;
	color:#999;
	text-align:center;
	font-size:12px;
}
.successtitle {
	text-align:center;
	font-size:32px;
	color:#2A9013;
	font-weight:bold;
}
.successtext {
	text-align:center;
}


@media (max-width: 768px) {
.container {
    flex-direction: column !important; /* Converts columns into rows */
}
.col2inner {
	margin-top:50px;
	margin-bottom:50px;
}
.inputrow2 {
	flex-direction:column;
}
..inputcol {
	width:100%;
}
.inputcol input {
	width:80%;
}

}