﻿/* Utilities
------------------------*/
.fa-user-circle:before {
    font-size: 20px;
    margin-left: 5px;
}
#signInDiv {
    border: 1px solid;
    width: 90px;
    padding: 5px;
    -webkit-border-radius: 10px;    
    border-radius: 10px; 
    -moz-border-radius:10px;
    -khtml-border-radius:10px;
}
.donation-hand {
    margin-top: 4em;
}
/* Typography
------------------------*/
.home {
    text-align:center;
    margin-top:5em;
    margin-bottom:3em;
    color:#2D587F;
    font-style:italic;
}
div.selected {
    background: #000000; /*#154879;*/
    color:white;
}
.float-container {
    border: 3px solid #fff;
    padding: 0;
    margin-top:3em;
    margin-bottom:4em;
}
.float-child {
    width: 48%;
    float: left;
    padding: 20px;
    margin-right:10px;
    text-align:center;
    font-size: 1.2em;
    -webkit-border-radius: 10px;    
    border-radius: 10px; 
    -moz-border-radius:10px;
    -khtml-border-radius:10px;
    background-color: #ECECEC ; /*#EAF0F6;*/
    color: #000000; /*#194983;*/
    cursor: pointer;
}
.float-child.onetime {
    margin-right: 20px;
}  
.container-main {
    width: 100%;
    max-width:1100px;
    margin: 0 auto;
    display:block;
}
.tblMain {
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
}
#donation,
#donationplus {
    width: 193px !important;
    margin-left: -1em;
}
#grandtotal_donation {
    width: 193px !important;
}
#rgCC {
    visibility: hidden !important;
}
#moduleHdr_donation,
#moduleHdr_donationplus {
    padding-top: 1em;
    border-top: none;
    text-align:center
}
#module_grandtotal {
    margin-bottom: 3em;
}
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}
#rbldonation,
#rbldonationplus {
    display: inline-block;
}

#module_donation_wrapper,
#module_donationplus_wrapper {
    text-align: center;
}
#rbldonation td,
#rbldonationplus td {
    padding-top:0%;
    clear:both;
    float:left;
    display:block;
    white-space:nowrap;
    content: "";
}
#lbl_donation_1 {
    margin-left:5.70em;
}
.cbxRecurDonation {
    padding-top:2%;
    display:block;
}
.cbxRecurDonationPlus {
    padding-top:1%;
    display:block;
}
#donateor_blurb_7,
#module_grandtotal {
    display: flex;
    justify-content: center;
    align-items: center;
}
.rbldonation,
.rbldonationplus {
    margin-top:1em;
}
#lbl_donation_4,
#lbl_donationplus_4 {
margin-left:4px;
}
#module_donation td,
#module_donationplus td {
    margin-right: 1em;
}

/* Turn the table row into a 3-column grid */
#rbldonation tr,
#rbldonationplus tr {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px; /* spacing between items */
}

/* Make each radio wrapper behave nicely */
.radio-1 {
    display: flex;
    align-items: center;
    gap: 6px;
}
.radio-1 {
    line-height: 1em;
}
.radio-1 input:checked+label {
	background-color: #000000; /*#154879  !important;*/
	color: white !important;
    border: 1px solid transparent !important;
}
.radio-1 label {
    width: 193px;
	background-color: white;
	color: #000000; /*#545454;*/
    border: 1px solid #AAAAAA;
    border-radius: .25em;
    cursor: pointer;
    display: inline-block;
    font-weight: 400;
    font-size: 1.1em;
    line-height: 1.1em;
    padding: 0.4em 4em .425em;
    transition: all .3s ease;
    margin-bottom: 0.3em;
}
.radio-1 label:focus, .radio-1 label:hover {
	background-color: #000000; /*#154879;*/
    color: white;
}
/*Media Query*/
@media (max-width: 600px) {
    #module_donationplus_wrapper {
        width: 96%;
    }
    #rbldonation td label, #rbldonationplus td label {
		display: inline-block;
		width: 90%;
		padding-left: 1em; /* optional spacing */
	}  
	#rbldonation tr,
	#rbldonationplus tr {
		justify-items: center;   /* centers the content inside each grid cell */
	}		
	.module_blurb {
		white-space: normal;
		overflow-wrap: break-word;
		word-wrap: break-word;
		display: block;
		padding-left: 8px;
		padding-right: 6px;
	}	 
	#submit_btn {
		max-width: 300px;
	}
}
@media (max-width: 768px) {
    #rbldonation tr,
    #rbldonationplus tr {
        grid-template-columns: repeat(2, 1fr);
    }
    .float-child {
        margin-bottom: 1em;
    }
    #moduleHdr_donation,
    #moduleHdr_donationplus {
        display: flex;
    }
    #TrustedSecure {
        float: none;
        clear: none;
        width: 100%;
        position: static;
        margin: 0 auto;
        display: block;
        top: 0;
    }
    #TrustedSecure img {
        margin: 0 auto;
        display: block;
    }
}