#app-form-wrapper {
max-width: 600px;
margin: 20px auto;
padding: 20px;
background: #fff;
border: 1px solid #e1e1e1;
border-radius: 5px;
}
#application-form {
display: flex;
flex-wrap: wrap;
margin: 0 -5px;
}
#application-form button[type="submit"] {
display: block;
width: 100%;
}
div.radio-group .radio-group-options {
display: flex;
}
div#family-members-container {
width: 100%;
}
.form-group {
margin-bottom: 15px;
width: 100%;
padding: 0 5px;
box-sizing: border-box;
}
.form-group.af-width-1 {
width: 100%;
}
.form-group.af-width-1-2 {
width: 50%;
}
.form-group.af-width-1-3 {
width: 33.33%;
}
.form-group.af-width-1-4 {
width: 25%;
}
.form-group.af-width-1-5 {
width: 20%;
}
.form-group.af-width-1-6 {
width: 16.66%;
}
#total-registration-fee-display {
font-weight: bold;
}
.annual-contribution-info {
font-weight: bold;
margin-bottom: 5px;
}
.fees-info-section {
margin: 0;
border-top: 1px solid #eee;
padding: 15px 0;
border-bottom: 1px solid #eee;
}
.form-group label {
display: block;
margin-bottom: 5px;
font-weight: 600;
}
.form-control {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
}
.radio-group label {
display: inline-block;
margin-right: 15px;
cursor: pointer;
font-weight: normal;
}
.required {
color: red;
}
.button-primary {
background: #1d9c43;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.button-primary:disabled {
background: #ccc;
cursor: not-allowed;
}
.family-member-card {
background: #fdfdfd;
}
.field-error-message {
margin-top: 5px;
font-weight: normal;
} .app-form-messages {
width: 100%;
margin-bottom: 20px;
padding: 0 5px;
}
.notice {
padding: 15px;
border-radius: 4px;
border-left: 4px solid;
margin-bottom: 15px;
}
.notice p {
margin: 0;
font-weight: 500;
}
.notice-success {
background-color: #f0fdf4;
border-color: #22c55e;
color: #166534;
}
.notice-error {
background-color: #fef2f2;
border-color: #ef4444;
color: #991b1b;
}
#application-form .fee-calculation-display {
font-size: 14px;
color: #1d9c43;
font-weight: bold;
margin: 0 0 15px;
padding: 0 10px;
font-family: sans-serif;
}
#application-form .sub-fields-wrapper-frontend {
display: flex;
flex-flow: wrap;
}
@media (max-width: 720px) {
.form-group.af-width-1-2,
.form-group.af-width-1-3,
.form-group.af-width-1-4,
.form-group.af-width-1-5,
.form-group.af-width-1-6 {
width: 100% !important;
}
}