.treasurer-content{
color:#333;
}
.treasurer-content h1{
text-align:center;
padding:0;
border-bottom:2px solid #1f4b7a;
margin:0 0 0 30px;
color:#1f4b7a;
}
.treasurer-content h2{
color:#1f4b7a;
margin:20px 0 15px 0;
}
.treasurer-content h3{
color:#1f4b7a;
margin:15px 0 10px 0;
text-align: center;
}
.treasurer-alert{
background-color:#f5f5f5;
border-left:6px solid #f44336;
padding:15px;
margin-bottom:20px;
margin-top: 18px;
font-weight:640;
line-height: 30px;
font-size: 18px;
}
.treasurer-feature-buttons{
display:grid;
grid-template-columns:1fr 1fr;
gap:28px;
margin:28px 0;
}
.treasurer-button{
box-sizing:border-box;
background-color:#f7a900;
border:1px solid #333;
box-shadow:0 1px 4px 0px rgba(0,0,0,.4);
color:#000;
padding:15px 20px;
text-align:center;
text-decoration:none;
display:flex;
flex-direction:column;
height:100%;
}
.treasurer-button:hover{
background-color:#e39b00;
text-decoration:none;
}
.treasurer-button svg, img[src*="svg"]{
width:48px;
height:48px;
margin: 12px auto 0;
}
.treasurer-button h3{
margin:10px 0;
color:#000;
}
.treasurer-button p{
text-align: left;
margin: 0;
}
.treasurer-section{
margin-bottom:4px;
}
.treasurer-collapsible-header{
background-color:#1f4b7a;
color:#fff;
padding:19px;
cursor:pointer;
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:1px;
box-shadow:0 1px 3px rgba(0,0,0,0.3);
font-size: 18px;
user-select: none;
}
.treasurer-collapsible-header:hover{
background-color:#2c5d8f;
}
.treasurer-collapsible-header:after{
content:"+";
font-size:20px;
font-weight:bold;
}
.treasurer-collapsible-header.active:after{
content:"-";
}
.treasurer-collapsible-content{
display:none;
background-color:#fff;
border-top:none;
}
.treasurer-search-form{
background-color:#fff;
padding:20px;
border:1px solid #e0e0e0;
}
.treasurer-form-group{
margin-bottom:15px;
}
.treasurer-form-group label{
display:block;
margin-bottom:5px;
font-weight:bold;
}
.treasurer-form-group input[type="text"],
.treasurer-form-group select{
width:100%;
padding:10px;
border:1px solid #e0e0e0;
background-color:white;
}
.treasurer-form-note{
font-size:14px;
color:#757575;
margin-top:5px;
}
.treasurer-form-actions{
margin-top:20px;
margin-bottom:20px;
}
.treasurer-btn-primary,
.treasurer-btn-secondary{
padding:10px 20px;
border:none;
cursor:pointer;
margin-right:10px;
}
.treasurer-btn-primary{
background-color:#1f4b7a;
color:white;
}
.treasurer-btn-primary:hover{
background-color:#2c5d8f;
}
.treasurer-btn-secondary{
background-color:#e0e0e0;
color:#333;
}
.treasurer-btn-secondary:hover{
background-color:#bdbdbd;
}
.treasurer-download-note{
color:#f44336;
font-weight:bold;
margin-top:15px;
}
.treasurer-loading-message{
display:none;
position:fixed;
top:50%;
left:50%;
transform:translate(-50%, -50%);
padding:20px;
background-color:white;
border:1px solid #e0e0e0;
z-index:1000;
text-align:center;
width:90%;
max-width:400px;
}
.treasurer-close-btn{
display:block;
margin:15px auto 0;
padding:5px 15px;
background-color:#e0e0e0;
border:none;
cursor:pointer;
}
.treasurer-close-btn:hover{
background-color:#bdbdbd;
}
.treasurer-notice{
background-color:#e3f2fd;
padding:10px;
border-left:6px solid #1f4b7a;
margin-bottom:15px;
}
.treasurer-due-dates{
width:100%;
border-collapse:collapse;
margin-bottom:20px;
}
.treasurer-due-dates th,
.treasurer-due-dates td{
padding:10px;
text-align:left;
border-bottom:1px solid #e0e0e0;
}
.treasurer-due-dates th{
background-color:#f5f5f5;
font-weight:bold;
}
.treasurer-warning{
background-color:#ffebee;
border-left:6px solid #f44336;
padding:15px;
margin-bottom:20px;
}
.treasurer-payment-options{
gap:20px;
margin:30px 0;
}
.treasurer-payment-button{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
width:500px;
max-width: 100%;
margin:0 auto;
min-height:120px;
background-color:#77a5d7;
color:#000;
text-decoration:none;
text-align:center;
padding:30px 20px 20px 20px;
border:2px solid #333;
box-shadow:0px 1px 3px rgba(0,0,0,.4);
border-radius:8px;
font-weight:600;
cursor:pointer;
box-sizing: border-box;
}
.treasurer-payment-button:hover{
background-color: #6799d0;
}
.treasurer-payment-button svg{
fill:currentColor;
width:36px;
height:36px;
margin-bottom:10px;
}
.treasurer-payment-main{
font-size:28px;
font-weight:800;
color:#000;
margin-bottom:15px;
}
.treasurer-quick-links{
display:flex;
flex-wrap:wrap;
gap:15px;
margin:20px 0;
}
.treasurer-link{
display:table;
padding:10px 15px;
background-color:#e3f2fd;
border:1px solid #1f4b7a;
color:#1f4b7a;
text-decoration:none;
}
.treasurer-link:hover{
background-color:#1f4b7a;
color:#fff;
text-decoration:none;
}
.treasurer-phone-options{
margin:15px 0;
}
.treasurer-phone-options ul{
list-style-type:none;
margin-left:20px;
padding:0;
}
.treasurer-payment-methods{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:10px;
margin-top:20px;
}
.treasurer-payment-methods img{
margin:5px;
border:1px solid #e0e0e0;
}
.treasurer-disclaimer{
font-size:14px;
color:#757575;
margin-top:30px;
padding:14px 30px;
background-color:#f3f3f3;
border: 1px solid #ddd;
}
@media (max-width:768px){
.treasurer-feature-buttons{
grid-template-columns: 1fr;
}
.treasurer-payment-options{
flex-direction:column;
align-items:center;
}
.treasurer-payment-button{
width:100%;
max-width:300px;
}
.treasurer-payment-main{
font-size:24px;
}
.treasurer-payment-disclaimer{
font-size:13px;
}
}