/***********************/
/*** INTERFACE BASE STYLES ***/
/* Base styles for all public interface microsites */
/* Team-specific CSS overrides these variables */

:root {
    --color-body: #27282A;
    --color-primary: #00A1BE;
    --color-secondary: #646464;
    --color-tertiary: #FF4A11;
    --color-rfv: #FF4A11;
    --color-icons: #FF4A11;
    --color-links: #00A1BE;
    --color-links-hover: #0789A0;
    --font-primary: muli, sans-serif;
    --font-secondary: gotham, sans-serif;
    --font-headings: gotham, sans-serif;
    --font-subheadings: muli, sans-serif;
    --font-controls: normal 1em muli, sans-serif;
    --color-buttons: #00A1BE;
    --color-buttons-hover: #0789A0;
    --color-buttons-text: #FFFFFF;
    --color-buttons-text-hover: #FFFFFF;
    --font-buttons: muli, sans-serif;
    --shadow: 0 2px 12px 0 rgba(40,40,40,.09);
}

/* Layout */
.interface-layout {font-family: var(--font-primary); color: var(--color-body); min-height: 100vh; background-color: #F7F7F7}

/* Header — fixed header, body-scrolling main (no overflow:auto so dropdowns aren't clipped) */
@media (max-width: 576px) {
.interface-header {position: fixed; top: 0; left: 0; right: 0; height: 7em; background-color: #FFF; border: 0; box-shadow: none; display: flex; align-items: center; justify-content: center; padding: .5em; z-index: 7000}
.interface-main {padding-top: 7em; width: 100%}
.interface-main .container {width: 100% !important; max-width: 100% !important; padding: 2em !important; border: none !important; box-shadow: none; margin: 0 !important}
}

@media (min-width: 576.1px) and (max-width: 992px) {
.interface-header {position: fixed; top: .1em; left: 1em; right: 1em; height: 9em; padding: .5em; background-color: #FFF; border: 1px solid #DEE2E6; border-radius: 0.375rem; box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; z-index: 7000}
.interface-header img {max-height: 125px !important}
.interface-main {padding-top: 10em; padding-left: .25em; padding-right: .25em}
.interface-main .container {width: 100% !important; max-width: 100% !important; border: 1px solid #DEE2E6; border-radius: 0.375rem; box-shadow: var(--shadow); padding: 2em; background-color: #FFF; margin: 0 !important}
}

@media (min-width: 992.1px) {
.interface-header {position: fixed; top: .1em; left: 1em; right: 1em; height: 9em; padding: .5em; background-color: #FFF; border: 1px solid #DEE2E6; border-radius: 0.375rem; box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; z-index: 7000}
.interface-header img {max-height: 125px !important}
.interface-main {padding-top: 10.5em; margin: .5em}
.interface-main .container {border: 1px solid #DEE2E6; border-radius: 0.375rem; box-shadow: var(--shadow); padding: 2em; background-color: #FFF}
}

.interface-logo {padding: 1em; max-height: 125px}

/* Typography */
h1 {font-family: var(--font-headings); font-size: 150%}
h2 {font-family: var(--font-headings); font-size: 120%}
a {font-family: var(--font-buttons); color: var(--color-links); text-decoration: none}
a:hover {color: var(--color-links-hover); text-decoration: none}

/* Form Controls */
.interface-layout .form-control {font-family: var(--font-primary) !important; font-weight: 700 !important; font-size: 1rem !important; color: #464646 !important}
.interface-layout .form-control::placeholder {font-weight: 400 !important; color: #999 !important}
/* All form-control elements share the same visible height - inputs, selects, date pickers, custom selects */
.interface-layout input.form-control,
.interface-layout select.form-control {height: 48px !important; min-height: 48px !important}
.interface-layout textarea.form-control {min-height: 48px !important}
.interface-layout input.form-control:focus, .interface-layout select.form-control:focus, .interface-layout textarea.form-control:focus {box-shadow: none !important; border-color: #ccc !important}
.interface-layout .form-title {font-size: 1.05rem; margin-bottom: .35rem}
.interface-layout .ptb-input {height: 48px !important; min-height: 48px !important; font-size: 1rem !important}

/* Custom Dropdown (interfaces only - grays only, no primary blue anywhere) */
.interface-layout .interface-select {position: relative; width: 100%}
.interface-layout .interface-select-btn {display: flex; align-items: center; justify-content: space-between; width: 100%; height: 48px; padding: 0 .75rem; background: #FFF; border: 1px solid #ced4da; border-radius: .375rem; font-family: var(--font-primary); font-size: 1rem; font-weight: 700; color: #464646; cursor: pointer; text-align: left}
.interface-layout .interface-select-btn:hover {border-color: #adb5bd}
.interface-layout .interface-select-btn:focus {outline: none; border-color: #adb5bd; box-shadow: none}
.interface-layout .interface-select-btn .interface-select-placeholder {color: #999; font-weight: 400; background: transparent; opacity: 1}
.interface-layout .interface-select-btn i {color: #999; font-size: .8rem; margin-left: .5rem}
.interface-layout .interface-select-panel {position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: #FFF; border: 1px solid #ced4da; border-radius: .375rem; box-shadow: 0 4px 12px rgba(0,0,0,.12); max-height: 300px; overflow-y: auto; z-index: 9000; padding: .25rem 0; list-style: none; margin: 0}
.interface-layout .interface-select-option {padding: .6rem .75rem; cursor: pointer; color: #464646; font-size: 1rem; font-weight: 700; background: #FFF}
.interface-layout .interface-select-option:hover {background: #F1F1F1}
.interface-layout .interface-select-option.selected {background: #646464; color: #FFFFFF}
.interface-layout .interface-select-backdrop {position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 8999; background: transparent}

/* Buttons */
.interface-layout .btn-primary {background: var(--color-buttons); color: var(--color-buttons-text); font-family: var(--font-buttons); outline: none; box-shadow: none; border: none}
.interface-layout .btn-primary:hover {background: var(--color-buttons-hover); color: var(--color-buttons-text-hover)}
.interface-layout .btn-primary:focus, .interface-layout .btn-primary:active {background: var(--color-buttons-hover); color: var(--color-buttons-text-hover); box-shadow: none; outline: none}

/* Utility */
.interface-layout .form-title {font-family: var(--font-primary); font-size: 1.0rem; font-weight: bold}
.interface-layout .form-field {font-family: var(--font-primary); font-weight: bold; margin-bottom: 1.25rem}
.interface-layout .rfv {font-size: .5rem; margin-right: .25rem; vertical-align: text-top; margin-bottom: .25rem; padding-top: .30rem; color: var(--color-rfv)}
.interface-layout .border-card {display: block; border: 1px solid #DEE2E6; border-radius: 0.375rem; box-shadow: var(--shadow); padding: 1rem; background-color: #FFF; overflow: visible}
.interface-layout .error {color: #CC3333 !important; font-weight: bold}

/* Session Cards */
.session-list {margin-top: 1rem}
.date-group-header {font-family: var(--font-headings); font-size: 1.1rem; font-weight: 700; color: var(--color-primary); padding: .75rem 0 .25rem; border-bottom: 1px solid #eee; margin-bottom: .5rem; margin-top: 1rem}
.date-group-header:first-child {margin-top: 0}

.session-card {display: flex; align-items: center; justify-content: space-between; padding: .75rem 1rem; border: 2px solid #DEE2E6; border-radius: .5rem; margin-bottom: .5rem; cursor: pointer; transition: all .2s; background: #FFF}
.session-card:hover {border-color: var(--color-buttons); background: rgba(0,0,0,.02)}
.session-card.selected {border-color: var(--color-buttons); background: var(--color-buttons); color: #FFF}
.session-card.selected .session-time {color: #FFF}
.session-card.selected .session-name {color: rgba(255,255,255,.85)}
.session-card.selected .session-location {color: rgba(255,255,255,.7)}

.session-time {font-family: var(--font-primary); font-weight: 700; font-size: 1.05rem}
.session-name {font-size: .9rem; color: #666; margin-top: .15rem}
.session-location {font-size: .8rem; color: #999; margin-top: .15rem}

.session-check {display: none; font-size: 1.5rem}
.session-card.selected .session-check {display: block; color: #FFF}

/* Selected Session Summary (Step 2) */
.selected-session-summary {display: flex; align-items: center; gap: .75rem; padding: .5rem 0; border-bottom: 1px solid #f0f0f0}
.selected-session-summary:last-child {border-bottom: none}
.session-name-small {font-size: .85rem; color: #999; margin-left: .5rem}

/* Confirmed Session (Step 3) */
.confirmed-session {display: flex; align-items: flex-start; gap: .75rem; padding: .75rem 0; border-bottom: 1px solid #f0f0f0}
.confirmed-session:last-child {border-bottom: none}
.confirmed-session i {font-size: 1.25rem; margin-top: .15rem}

/* Wizard Progress Bar (matches WebForms .wizard-nav) */
.interface-layout .wizard-steps {display: flex; align-items: center; justify-content: center; margin-bottom: 2rem; position: relative}
.interface-layout .wizard-step {display: flex; flex-direction: column; align-items: center; position: relative; z-index: 1; flex: 1}
.interface-layout .wizard-step-circle {width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .9rem; font-weight: 700; color: #FFF; background: #CCC; transition: background .3s}
.interface-layout .wizard-step.active .wizard-step-circle {background: var(--color-buttons)}
.interface-layout .wizard-step.completed .wizard-step-circle {background: var(--color-buttons)}
.interface-layout .wizard-step-label {margin-top: .35rem; font-size: .75rem; color: #CCC; font-weight: 600; transition: color .3s; text-align: center}
.interface-layout .wizard-step.active .wizard-step-label {color: var(--color-buttons); font-weight: 700}
.interface-layout .wizard-step.completed .wizard-step-label {color: var(--color-buttons)}
.interface-layout .wizard-line {position: absolute; top: 18px; left: 0; right: 0; height: 3px; background: #CCC; z-index: 0}
.interface-layout .wizard-line-fill {height: 3px; background: var(--color-buttons); transition: width .4s}

/* Checkbox groups (Accessibility, Communication, Sensory) */
.interface-layout .check-group {display: flex; flex-wrap: wrap; gap: .5rem .75rem}
.interface-layout .check-group label {display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .75rem; border: 1px solid #DEE2E6; border-radius: .375rem; background: #FFF; cursor: pointer; font-weight: 600; font-size: .9rem; color: #464646; margin-bottom: 0}
.interface-layout .check-group label:hover {border-color: #adb5bd; background: #F1F1F1}
.interface-layout .check-group input[type="checkbox"] {accent-color: var(--color-buttons); width: 1rem; height: 1rem; cursor: pointer}
.interface-layout .check-group label.checked {border-color: var(--color-buttons); background: var(--color-buttons); color: #FFF}
.interface-layout .check-group label.checked input[type="checkbox"] {accent-color: #FFF}

/* Radio group (Photo Release) */
.interface-layout .radio-group {display: flex; gap: .75rem}
.interface-layout .radio-group label {flex: 1; display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .75rem 1rem; border: 1px solid #DEE2E6; border-radius: .375rem; background: #FFF; cursor: pointer; font-weight: 600; color: #464646; margin-bottom: 0}
.interface-layout .radio-group label:hover {border-color: #adb5bd; background: #F1F1F1}
.interface-layout .radio-group label.checked {border-color: var(--color-buttons); background: var(--color-buttons); color: #FFF}
.interface-layout .radio-group input[type="radio"] {accent-color: var(--color-buttons); cursor: pointer}
.interface-layout .radio-group label.checked input[type="radio"] {accent-color: #FFF}

/* Toggle inline */
.interface-layout .toggle-inline {display: inline-flex; align-items: center; gap: .5rem; font-weight: 600}
.interface-layout .toggle-inline input[type="checkbox"] {accent-color: var(--color-buttons); width: 1.1rem; height: 1.1rem}

/* Required Documents (open-to-unlock pattern from WebForms booking) */
.interface-layout .doc-card {border: 2px solid var(--color-icons); background: #FFF8F5; border-radius: .5rem; padding: 1rem; margin-bottom: 1.5rem}
.interface-layout .doc-card.docs-complete {border-color: var(--color-secondary) !important; background: rgba(0,204,120,.04) !important; transition: all .3s}
.interface-layout .doc-btn {display: flex; align-items: center; justify-content: space-between; padding: .85rem 1.25rem; border: 2px solid var(--color-buttons); border-radius: .5rem; margin-bottom: .75rem; cursor: pointer; transition: all .2s; background: #FFF}
.interface-layout .doc-btn:hover {background: var(--color-buttons); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,.1)}
.interface-layout .doc-btn:hover .doc-btn-label, .interface-layout .doc-btn:hover .doc-btn-icon, .interface-layout .doc-btn:hover .doc-btn-arrow {color: #FFF}
.interface-layout .doc-btn-opened {border-color: #00CC78 !important; background: rgba(0,204,120,.03) !important}
.interface-layout .doc-btn-opened:hover {background: rgba(0,204,120,.08) !important}
.interface-layout .doc-btn-opened:hover .doc-btn-label, .interface-layout .doc-btn-opened:hover .doc-btn-icon, .interface-layout .doc-btn-opened:hover .doc-btn-arrow {color: var(--color-body)}
.interface-layout .doc-btn-left {display: flex; align-items: center; gap: .65rem}
.interface-layout .doc-btn-icon {font-size: 1.3rem; color: var(--color-buttons); transition: color .2s}
.interface-layout .doc-btn-opened .doc-btn-icon {color: var(--color-secondary)}
.interface-layout .doc-btn-label {font-size: .95rem; font-weight: 700; color: var(--color-buttons); transition: color .2s}
.interface-layout .doc-btn-opened .doc-btn-label {color: var(--color-body)}
.interface-layout .doc-btn-arrow {font-size: .7rem; color: var(--color-buttons); opacity: .6; transition: color .2s}
.interface-layout .doc-btn-opened .doc-btn-arrow {color: var(--color-secondary)}
.interface-layout .doc-btn-right {flex-shrink: 0; margin-left: .75rem}
.interface-layout .doc-badge {display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .75rem; border-radius: 2rem; font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase}
.interface-layout .doc-badge-pending {background: #FEF2F2; color: #CC3333; border: 1px solid #FECACA}
.interface-layout .doc-badge-opened {background: #F0FDF4; color: #16A34A; border: 1px solid #BBF7D0}

/* Waiver/Photo agreement sections (locked until document opened) */
.interface-layout .waiver-section {position: relative; background: #F8F9FA; border: 1px solid #DEE2E6; border-radius: .5rem; padding: 1rem; margin-bottom: 1.5rem}
.interface-layout .waiver-locked-overlay {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(248,249,250,.9); border-radius: .5rem; display: flex; align-items: center; justify-content: center; z-index: 10; font-size: .9rem; font-weight: 600; color: #999; gap: .5rem; cursor: not-allowed}
.interface-layout .waiver-locked-overlay i {font-size: 1rem; color: #CCC}
.interface-layout .waiver-section.waiver-unlocked .waiver-locked-overlay {display: none}
.interface-layout .waiver-title {font-size: .9rem; font-weight: 700; color: var(--color-body); margin-bottom: .5rem}
.interface-layout .waiver-text {font-size: .8rem; color: var(--color-secondary); line-height: 1.5; margin-bottom: .75rem}
.interface-layout .waiver-check {display: flex; align-items: flex-start; gap: .5rem}
.interface-layout .waiver-check input[type="checkbox"] {width: 18px; height: 18px; margin-top: 2px; accent-color: var(--color-buttons); cursor: pointer; flex-shrink: 0}
.interface-layout .waiver-check input[type="checkbox"]:focus {outline: none; box-shadow: none}
.interface-layout .waiver-check label {font-size: .85rem; color: var(--color-body); cursor: pointer}
.interface-layout .radio-option {display: flex; align-items: flex-start; gap: .5rem; margin-bottom: .5rem; padding: .6rem .75rem; border: 1px solid #DEE2E6; border-radius: .375rem; background: #FFF; transition: all .2s; cursor: pointer}
.interface-layout .radio-option:hover {border-color: #CCC; background: #F1F1F1}
.interface-layout .radio-option.checked {border-color: var(--color-buttons); background: rgba(0,161,190,.04)}
.interface-layout .radio-option input[type="radio"] {-webkit-appearance: none; -moz-appearance: none; appearance: none; width: 18px; height: 18px; border: 2px solid #CCC; border-radius: 50%; margin: 0; margin-top: 2px; cursor: pointer; position: relative; transition: all .2s; flex-shrink: 0}
.interface-layout .radio-option input[type="radio"]:checked {border-color: var(--color-buttons); border-width: 2px}
.interface-layout .radio-option input[type="radio"]:checked::after {content: ''; position: absolute; top: 3px; left: 3px; width: 8px; height: 8px; border-radius: 50%; background: var(--color-buttons)}
.interface-layout .radio-option input[type="radio"]:focus {outline: none; box-shadow: none}
.interface-layout .radio-option label {font-size: .85rem; color: var(--color-body); cursor: pointer; margin-bottom: 0}

/* Waiver/Photo document pages */
.interface-layout .waiver-doc {font-size: .9rem; line-height: 1.7}
.interface-layout .waiver-doc h3 {font-family: var(--font-headings); font-size: 1rem; font-weight: 700; margin: 1.5rem 0 .5rem; text-transform: uppercase}
.interface-layout .waiver-doc p {margin-bottom: 1rem}
.interface-layout .waiver-doc ul, .interface-layout .waiver-doc ol {margin: 0 0 1rem 1.5rem; padding: 0}
.interface-layout .waiver-doc ul li, .interface-layout .waiver-doc ol li {margin-bottom: .75rem; padding-left: .25rem}
.interface-layout .photo-release-doc {font-size: .9rem; line-height: 1.7}
.interface-layout .photo-release-doc p {margin-bottom: 1rem}

/* Review summary rows */
.interface-layout .review-row {display: flex; gap: .75rem; padding: .4rem 0; border-bottom: 1px solid #F0F0F0}
.interface-layout .review-row:last-child {border-bottom: none}
.interface-layout .review-label {flex: 0 0 40%; font-weight: 700; color: #646464; font-size: .9rem}
.interface-layout .review-value {flex: 1; color: #464646; font-size: .9rem}
.interface-layout .review-section-heading {font-family: var(--font-headings); font-size: 1.05rem; font-weight: 700; color: var(--color-buttons); margin-top: 1rem; margin-bottom: .25rem}
.interface-layout .review-edit-link {font-size: .85rem; font-weight: 600; color: var(--color-buttons); text-decoration: none; cursor: pointer; white-space: nowrap}
.interface-layout .review-edit-link:hover {color: var(--color-buttons-hover); text-decoration: underline}
.interface-layout .review-edit-link i {margin-right: .25rem}

/* Age Gate — 18+ confirmation before the participant form is revealed */
.interface-layout .age-gate {background: #FFF; border: 1px solid #DEE2E6; border-radius: .75rem; box-shadow: var(--shadow); padding: 2.5rem 2rem; text-align: center; max-width: 640px; margin: 0 auto 1.5rem; animation: age-gate-in .35s ease-out both}
.interface-layout .age-gate-icon {display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; background: color-mix(in srgb, var(--color-secondary) 28%, #FFF); color: var(--color-tertiary); font-size: 2rem; margin-bottom: 1.1rem}
.interface-layout .age-gate-title {font-family: var(--font-headings); color: var(--color-primary); font-size: 1.75rem; font-weight: 700; margin: 0 0 .5rem; letter-spacing: .01em}
.interface-layout .age-gate-question {font-family: var(--font-primary); font-size: 1.1rem; color: var(--color-body); margin: 0 0 .5rem; line-height: 1.45}
.interface-layout .age-gate-question strong {color: var(--color-tertiary); font-weight: 700}
.interface-layout .age-gate-sub {font-family: var(--font-primary); font-size: .9rem; color: #6B6B6B; margin: 0 auto 1.75rem; max-width: 460px; line-height: 1.55}
.interface-layout .age-gate-actions {display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center}
.interface-layout .age-gate-btn {min-width: 210px; padding: .85rem 1.5rem; font-family: var(--font-buttons); font-weight: 600; font-size: 1rem; letter-spacing: .01em; border-radius: .5rem; transition: all .2s ease}
.interface-layout .age-gate-btn-yes {box-shadow: 0 2px 8px rgba(0,0,0,.08)}
.interface-layout .age-gate-btn-yes:hover {transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.14)}
.interface-layout .age-gate-btn-no {background: transparent; color: #6B6B6B; border: 1.5px solid #D9D9D9}
.interface-layout .age-gate-btn-no:hover {background: #F5F5F5; color: #464646; border-color: #BFBFBF}

.interface-layout .age-gate-confirmed {display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .65rem 1rem; background: rgba(0,204,120,.08); border: 1px solid rgba(0,204,120,.25); border-radius: .5rem; color: #1b8d54; font-family: var(--font-primary); font-size: .88rem; font-weight: 600; margin-bottom: 1rem; animation: age-gate-in .3s ease-out both}
.interface-layout .age-gate-confirmed i {font-size: 1rem}

@keyframes age-gate-in {
    from {opacity: 0; transform: translateY(8px)}
    to {opacity: 1; transform: translateY(0)}
}

/* Under-18 apology modal */
.age-modal-backdrop {position: fixed; inset: 0; z-index: 10000; background: rgba(32,32,36,.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 1.5rem; animation: age-modal-fade .25s ease-out both}
.age-modal {background: #FFF; border-radius: .85rem; box-shadow: 0 20px 60px rgba(0,0,0,.35); max-width: 480px; width: 100%; padding: 2.25rem 1.75rem 1.75rem; text-align: center; font-family: var(--font-primary, muli, sans-serif); color: var(--color-body, #27282A); animation: age-modal-pop .3s cubic-bezier(.2,.9,.3,1.15) both}
.age-modal-icon {display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: color-mix(in srgb, var(--color-secondary, #F9CB9C) 40%, #FFF); color: var(--color-tertiary, #FF4A11); font-size: 1.75rem; margin-bottom: 1rem}
.age-modal-title {font-family: var(--font-headings, optima-lt-pro, sans-serif); font-size: 1.65rem; font-weight: 700; color: var(--color-primary, #27282A); margin: 0 0 .85rem}
.age-modal-body {font-size: .95rem; line-height: 1.6; margin: 0 auto .75rem; max-width: 420px; color: #464646}
.age-modal-body strong {color: var(--color-tertiary, #FF4A11); font-weight: 700}
.age-modal-body-soft {color: #6B6B6B; font-size: .9rem; margin-bottom: 1.5rem}
.age-modal-btn {min-width: 180px; padding: .8rem 1.5rem; font-weight: 600; border-radius: .5rem}

@keyframes age-modal-fade {
    from {opacity: 0}
    to {opacity: 1}
}
@keyframes age-modal-pop {
    from {opacity: 0; transform: scale(.92) translateY(6px)}
    to {opacity: 1; transform: scale(1) translateY(0)}
}

/* Responsive */
@media (max-width: 576px) {
    .session-card {flex-direction: column; align-items: flex-start; gap: .35rem}
    .selected-session-summary {flex-direction: column; gap: .25rem}
    .session-name-small {margin-left: 0}
    .interface-layout .wizard-step-label {display: none}
    .interface-layout .review-row {flex-direction: column; gap: .15rem}
    .interface-layout .review-label {flex: 0 0 auto}
    .interface-layout .age-gate {padding: 1.75rem 1.25rem}
    .interface-layout .age-gate-title {font-size: 1.4rem}
    .interface-layout .age-gate-btn {min-width: 100%; width: 100%}
    .age-modal {padding: 1.75rem 1.25rem 1.25rem}
    .age-modal-title {font-size: 1.35rem}
}