/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

 .row{

	margin-top:20px;
}
.donation-form-section{

	padding:10px;
}
.col-12{

	margin-top:20px;

}
.col-6{
	margin-top:20px;
}
.form-heading{
	font-size:22px;
}
.btn-warning{
color: #fff !important;
background-color: #ff9e18 !important;
border-color: #ff9e18 !important;
}
.btn-warning:hover{
color: #fff !important;
background-color: #e68b0d !important;
border-color: #e68b0d !important;
font-style:bold;
cursor: pointer;
}
.btn{

display: inline-block;
font-weight: 400;
color: #212529;
text-align: center;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: transparent;
border: 2px solid transparent;
padding: 1rem 2rem;
font-size: 1rem;
line-height: 1.5;
border-radius: 0;
-webkit-transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;

}
 .loader {
      border: 16px solid #f3f3f3;
      border-radius: 50%;
      border-top: 16px solid #3498db;
      width: 120px;
      height: 120px;
      -webkit-animation: spin 2s linear infinite;
      /* Safari */
      animation: spin 2s linear infinite;
      margin: 0px 0px auto 0% !important;
  }

  /* Safari */
  @-webkit-keyframes spin {
      0% {
          -webkit-transform: rotate(0deg);
      }

      100% {
          -webkit-transform: rotate(360deg);
      }
  }

  @keyframes spin {
      0% {
          transform: rotate(0deg);
      }

      100% {
          transform: rotate(360deg);
      }
  }

/* =========13-06-22=========== */

	.required-s{
		color:#ff0000;bottom: 0;
	}

 .col-12 {
    margin-top: 20px;
    width: 48%;
    display: inline-block;
    margin-right: 10px;
}

.col-12.col-row input{padding-left: 10px;border-color: #253052;border-width: 1px;}

select {
    padding: 7px 12px !important;
    border-radius: 10px;
    height: 36px;
    border-color: #253052 !important;
    border-width: 1px !important;
}
.switch-btn {
    display: flex;
    width: 44%;
    border-radius:10px;
}

.switch-btn .col-12{margin-top:0;}
select#monthly_exp_month,select#oneoff_exp_month {
    width: 19%;
}

select#monthly_exp_year, select#oneoff_exp_year {
    width: 18.5%;
}
.loader {
    position: absolute;
    top: 70%;
    left: 50%;
}


@media screen and (max-width: 992px) {
	.switch-btn{
		width:40%;
	}
}
	@media screen and (max-width: 768px) {
		.switch-btn {
    width: 45%;
}
}
		@media screen and (max-width: 600px) {
			.col-12 {
				width: 100%;}
			.switch-btn {width: 90%;}
			select#monthly_exp_month, select#oneoff_exp_month,select#monthly_exp_year, select#oneoff_exp_year{width:100%;margin: 10px 0px !important;}
			.loader {position: absolute; top: 80%;left: 32%;}
			.switch-btn label{
				    white-space: nowrap;
			}
			.form-heading {margin-top: 50px;}
			.col-12.submit {text-align: center;}
		}
 @media screen and (min-device-width: 1200px) {
        #secure3d-frame {
            display: none;
            position: fixed;
            top: 30%;
            left: 19%;
            width: 62%;
            height: 43%;
            margin: 0 auto;
            background-color: rgba(0, 0, 0, 0.5);
        }
    }

    @media screen and (min-device-width: 600px) {
        #secure3d-frame {
            display: none;
            position: fixed;
            top: 16%;
            left: 7%;
            width: 86%;
            height: 64%;
            margin: 0 auto;
            background-color: rgba(0, 0, 0, 0.5);
        }
    }

    #secure3d-frame.text {
        color: black;
    }
 /*pay now button gray out*/
    .PaynowInactive{
    background-color: #c1bebc !important;
    cursor: not-allowed !important;
    }