/* FC Academy Registration Form Styles */

/* .fc-registration-form-wrapper {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
} */

.fc-form-title {
    font-size: 28px;
    margin-bottom: 30px;
    text-align: center;
    color: #333;
}

.fc-registration-form {
    display: flex;
    flex-wrap: wrap;
    column-gap: 20px;
}

.fc-main-student-info-group {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.fc-form-field {
    display: flex;
    flex-direction: column;
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 20px;
}

.fc-pricing-details,
.fc-submit-button-wrapper,
.fc-form-messages,
.fc-tryout-sales-notice,
.fc-tryout-efir-box {
    flex: 0 0 100%;
    max-width: 100%;
}

.fc-form-field label {
    font-weight: 600;
    margin-bottom: 8px;
    color: #333;
    font-size: 14px;
}

.fc-form-field label .required {
    color: #e74c3c;
}

.fc-form-field input[type="text"],
.fc-form-field input[type="email"],
.fc-form-field input[type="tel"],
.fc-form-field select,
.fc-form-field textarea,
.fc-camp-form-field input[type="text"],
.fc-camp-form-field select {
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    transition: border-color 0.3s;
    width: 100%;
    box-sizing: border-box;
}

.fc-form-field textarea {
    font-family: inherit;
    resize: vertical;
}

/* intl-tel-input's flag + dial-code box is absolutely positioned over the
   left edge of the field (see .iti--separate-dial-code input's own
   padding-left: 52px in intlTelInput.css) — the shorthand `padding: 12px`
   above has higher selector specificity and was clobbering that back down,
   causing the dial code to overlap the typed number. */
.fc-form-field input[type="tel"] {
    padding-left: 52px;
}

.fc-form-field select,
.fc-camp-form-field select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #fff;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path fill="%23333" d="M1.41 0L6 4.58 10.59 0 12 1.42l-6 6-6-6z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    padding-right: 40px;
    cursor: pointer;
}

.fc-form-field input[type="text"]:focus,
.fc-form-field input[type="email"]:focus,
.fc-form-field input[type="tel"]:focus,
.fc-form-field select:focus,
.fc-form-field textarea:focus,
.fc-camp-form-field input[type="text"]:focus,
.fc-camp-form-field select:focus {
    outline: none;
    border-color: #3498db;
}


/* An ID inside :not() still counts toward specificity even though it's
   excluding, not matching — ":not(#fc_dob)" made this rule ID-strength,
   strong enough to silently override Elementor's own generated styles
   (e.g. a custom Input Background Color) for every readonly field in any
   widget, not just the one #fc_dob belonged to. The exclusion is dropped
   here (muting every readonly field, including date pickers) and instead
   the "should look clickable" rule below — which now also matches the
   Tryout widget's DOB field via its .fc-field-dob wrapper class, which
   the old #fc_dob id (from the Academy Registration widget) never did —
   wins it back for date pickers purely through normal, class-level
   specificity, no :not() needed. */
.fc-form-field input[readonly] {
    background-color: #e9ecef;
    cursor: not-allowed;
}

/* Date picker inputs should look clickable */
.fc-form-field input[readonly]#fc_dob,
.fc-form-field input[readonly].fc-sibling-dob,
.fc-field-dob input[readonly],
input[readonly].fc-sibling-dob {
    background-color: #fff;
    cursor: pointer;
}

.fc-form-field select:disabled {
    background-color: #e9ecef;
    cursor: not-allowed;
}

/* Custom Select Dropdown Styles */
.fc-custom-select-wrapper {
    position: relative;
    width: 100%;
}

/* Hide the original select element */
.fc-select-hidden {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

.fc-custom-select-display {
    position: relative;
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
    padding: 12px 40px 12px 12px;
    font-size: 14px;
    cursor: pointer;
    transition: border-color 0.3s, box-shadow 0.3s;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.fc-custom-select-display:hover {
    border-color: #3498db;
}

.fc-custom-select-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fc-custom-select-arrow {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: #666;
    transition: transform 0.3s;
    pointer-events: none;
}

.fc-custom-select-dropdown.is-open + .fc-custom-select-display .fc-custom-select-arrow,
.fc-custom-select-display:has(+ .fc-custom-select-dropdown.is-open) .fc-custom-select-arrow {
    transform: translateY(-50%) rotate(180deg);
}

.fc-custom-select-dropdown {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    z-index: 1000;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    max-height: 240px;
    overflow-y: auto;
    display: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.fc-custom-select-dropdown.is-open {
    display: block;
    animation: fcDropdownSlide 0.2s ease-out;
}

@keyframes fcDropdownSlide {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fc-custom-select-option {
    padding: 12px 15px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    transition: background-color 0.2s;
    font-size: 14px;
}

.fc-custom-select-option:last-child {
    border-bottom: none;
}

.fc-custom-select-option:hover {
    background-color: #d32f2f;
    color: #fff;
}

.fc-custom-select-option.is-selected {
    background-color: #d32f2f;
    color: #fff;
    font-weight: 600;
}

.fc-custom-select-option.is-selected:hover {
    background-color: #b71c1c;
}

/* Scrollbar styling for dropdown */
.fc-custom-select-dropdown::-webkit-scrollbar {
    width: 8px;
}

.fc-custom-select-dropdown::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 0 4px 4px 0;
}

.fc-custom-select-dropdown::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.fc-custom-select-dropdown::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Pricing Details */
.fc-pricing-details {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 2px solid #3498db;
}

.fc-pricing-breakdown h4 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #333;
    font-size: 18px;
}

.fc-pricing-table {
    width: 100%;
    border-collapse: collapse;
}

.fc-pricing-table tr {
    border-bottom: 1px solid #eee;
}

.fc-pricing-table tr:last-child {
    border-bottom: none;
}

.fc-pricing-table td {
    padding: 10px 0;
}

.fc-pricing-table td:first-child {
    color: #666;
}

.fc-pricing-table td:last-child {
    text-align: right;
    font-weight: 600;
}

.fc-pricing-total td {
    font-size: 18px;
    padding-top: 15px;
    color: #3498db;
}

/* Submit Button */
.fc-submit-button {
    width: 100%;
    padding: 15px;
    background: #3498db;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s;
}

.fc-submit-button:hover {
    background: #2980b9;
}

.fc-submit-button:disabled {
    background: #95a5a6;
    cursor: not-allowed;
}

/* Messages */
.fc-form-messages {
    margin-top: 20px;
}

.fc-form-messages p {
    padding: 15px;
    border-radius: 4px;
    margin: 0;
}

.fc-form-messages .success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.fc-form-messages .error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Responsive */
@media (max-width: 768px) {
    .fc-form-title {
        font-size: 24px;
    }
}

/* Admin Styles */
.fc-pricing-table td {
    font-size: 14px;
}

/* intl-tel-input country dropdown — scoped to .fc-tryout-form-wrapper only
   so this doesn't affect FunnelKit's own use of the same shared library
   elsewhere (e.g. checkout). JS pins the list's width to the field's own
   width (see tryout-form.js); this is the safety net so a country name
   that still doesn't fit truncates cleanly instead of overflowing. */
.fc-tryout-form-wrapper .iti__country-name {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
}

/* The Tryout popup's dropdownParent: document.body fix (needed so the
   list floats correctly instead of being clipped by the popup's overflow)
   moves the country list to a direct child of <body>, sibling to the
   Elementor popup overlay itself. Elementor's popup overlay
   (.dialog-type-lightbox) uses z-index: 9999, which is higher than
   intl-tel-input's own detached-list z-index: 1060 — so the popup was
   painting over the list, making it invisible on click. */
.iti--detached-country-selector {
    z-index: 100000 !important;
}

/* Air Datepicker Enhancements */
.fc-form-field .air-datepicker {
    z-index: 1000;
}

/* Make sure datepicker is properly positioned */
.air-datepicker {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-radius: 8px;
}

/* Date input field icon indicator */
.fc-form-field input[readonly]#fc_dob,
.fc-form-field input[readonly].fc-sibling-dob,
input[readonly].fc-sibling-dob {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>');
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px;
    padding-right: 40px;
}

/* Button Alignment Styles */
/* Desktop */
.fc-camp-align-left .fc-camp-form-actions { text-align: left; }
.fc-camp-align-left .fc-camp-submit-button { width: auto; display: inline-block; }

.fc-camp-align-center .fc-camp-form-actions { text-align: center; }
.fc-camp-align-center .fc-camp-submit-button { width: auto; display: inline-block; }

.fc-camp-align-right .fc-camp-form-actions { text-align: right; }
.fc-camp-align-right .fc-camp-submit-button { width: auto; display: inline-block; }

.fc-camp-align-justify .fc-camp-submit-button { width: 100%; display: block; }

.fc-form-align-left .fc-submit-button-wrapper { text-align: left; }
.fc-form-align-left .fc-submit-button { width: auto; display: inline-block; }

.fc-form-align-center .fc-submit-button-wrapper { text-align: center; }
.fc-form-align-center .fc-submit-button { width: auto; display: inline-block; }

.fc-form-align-right .fc-submit-button-wrapper { text-align: right; }
.fc-form-align-right .fc-submit-button { width: auto; display: inline-block; }

.fc-form-align-justify .fc-submit-button { width: 100%; display: block; }

/* Tablet */
@media (max-width: 1024px) {
    .fc-camp-align-tablet-left .fc-camp-form-actions { text-align: left; }
    .fc-camp-align-tablet-center .fc-camp-form-actions { text-align: center; }
    .fc-camp-align-tablet-right .fc-camp-form-actions { text-align: right; }
    
    .fc-camp-align-tablet-justify .fc-camp-submit-button { width: 100%; }
    
    /* Reset width if switching from Justify to others on Tablet */
    .fc-camp-align-tablet-left .fc-camp-submit-button,
    .fc-camp-align-tablet-center .fc-camp-submit-button,
    .fc-camp-align-tablet-right .fc-camp-submit-button {
        width: auto;
    }

    .fc-form-align-tablet-left .fc-submit-button-wrapper { text-align: left; }
    .fc-form-align-tablet-center .fc-submit-button-wrapper { text-align: center; }
    .fc-form-align-tablet-right .fc-submit-button-wrapper { text-align: right; }
    
    .fc-form-align-tablet-justify .fc-submit-button { width: 100%; }
    
    /* Reset width if switching from Justify to others on Tablet */
    .fc-form-align-tablet-left .fc-submit-button,
    .fc-form-align-tablet-center .fc-submit-button,
    .fc-form-align-tablet-right .fc-submit-button {
        width: auto;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .fc-camp-align-mobile-left .fc-camp-form-actions { text-align: left; }
    .fc-camp-align-mobile-center .fc-camp-form-actions { text-align: center; }
    .fc-camp-align-mobile-right .fc-camp-form-actions { text-align: right; }
    
    .fc-camp-align-mobile-justify .fc-camp-submit-button { width: 100%; }

    /* Reset width if switching from Justify to others on Mobile */
    .fc-camp-align-mobile-left .fc-camp-submit-button,
    .fc-camp-align-mobile-center .fc-camp-submit-button,
    .fc-camp-align-mobile-right .fc-camp-submit-button {
        width: auto;
    }

    .fc-form-align-mobile-left .fc-submit-button-wrapper { text-align: left; }
    .fc-form-align-mobile-center .fc-submit-button-wrapper { text-align: center; }
    .fc-form-align-mobile-right .fc-submit-button-wrapper { text-align: right; }
    
    .fc-form-align-mobile-justify .fc-submit-button { width: 100%; }

    /* Reset width if switching from Justify to others on Mobile */
    .fc-form-align-mobile-left .fc-submit-button,
    .fc-form-align-mobile-center .fc-submit-button,
    .fc-form-align-mobile-right .fc-submit-button {
        width: auto;
    }

    /* All fields in .fc-main-student-info-group are one flex container, so
       swapping just two of them via `order` requires pinning every sibling
       to its normal position too — otherwise the unpinned ones (default
       order 0) would jump ahead of/behind the pinned pair. Desktop/tablet
       markup order is Gender then Date of Birth; on mobile only, Date of
       Birth should appear first. */
    .fc-main-student-info-group .fc-field-kid-first-name { order: 1; }
    .fc-main-student-info-group .fc-field-kid-last-name { order: 2; }
    .fc-main-student-info-group .fc-field-dob { order: 3; }
    .fc-main-student-info-group .fc-field-gender { order: 4; }
    .fc-main-student-info-group .fc-field-age-category { order: 5; }
    .fc-main-student-info-group .fc-field-location { order: 6; }
    .fc-main-student-info-group .fc-field-term { order: 7; }
    .fc-main-student-info-group .fc-field-sessions { order: 8; }
    .fc-main-student-info-group .fc-field-siblings { order: 9; }
    .fc-main-student-info-group #fc_siblings_wrapper { order: 10; }
    .fc-main-student-info-group .fc-pricing-details { order: 11; }
    .fc-main-student-info-group .fc-submit-button-wrapper { order: 12; }
    .fc-main-student-info-group .fc-form-messages { order: 13; }
}

/* ==========================================================================
   Low Slots Warning
   ========================================================================== */

.fc-low-slots-warning {
    display: inline-block;
    background-color: #dc3545;
    color: #ffffff;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 10px;
    vertical-align: middle;
}

/* Zoom in/out animation */
.fc-low-slots-warning.fc-low-slots-animated {
    animation: fc-pulse-zoom 1.5s ease-in-out infinite;
}

@keyframes fc-pulse-zoom {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

/* Session label styling */
.fc-session-label {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.fc-session-label.fc-session-full {
    background-color: #f8f8f8;
}

/* Mobile responsive */
@media screen and (max-width: 480px) {
    .fc-low-slots-warning {
        display: block;
        margin-left: 0;
        margin-top: 8px;
        text-align: center;
    }
}

/* Checkbox size and padding are controlled via the widget's own "Checkbox
   Size" / "Checkbox Padding" controls (Style > Sessions Table),
   responsive per breakpoint — this just stops it from being squished by
   the flex layout, regardless of whatever values are chosen there. */
.fc-session-checkbox {
    flex-shrink: 0;
}

/* form.js sets the label to display:block inline, so the checkbox and
   its text just flowed one after another with no shared vertical
   alignment — barely noticeable at the checkbox's old ~13px native size,
   but obvious once it's sized larger. The !important is needed to beat
   that inline style. */
.fc-session-label {
    display: flex !important;
    align-items: center;
}

/* ==========================================================================
   Sibling Form Fields
   Wraps a sibling's "always visible" fields (name/gender/dob/age/term) the
   same way .fc-main-student-info-group wraps the main kid's own — without
   this, the .fc-form-field children (added by addSiblingForm() in form.js)
   have nothing establishing a flex row to lay out into, so any per-field
   Width control set on the widget's Style tab has no visible effect for a
   sibling row (they'd all just stack full-width regardless).
   ========================================================================== */
.fc-sibling-info-group {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

/* ==========================================================================
   "View Size Chart" button
   ========================================================================== */
.fc-view-size-chart-btn {
    display: block;
    width: 100%;
    text-align: right;
    margin-top: 8px;
    padding: 0;
    background: none;
    border: none;
    color: #3498db;
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

/* Overrides the theme's generic button:hover/:focus rule (background-color
   + white text), which otherwise wins on specificity against this button's
   own un-suffixed color rule above — this is a plain text link styled as a
   button, not meant to flash a background color on hover. Elementor's own
   "View Size Chart Hover Color" control (see the widget's Style tab) still
   wins over this when an admin sets one — {{WRAPPER}}-prefixed selectors
   carry higher specificity than the two-class selector here. */
.fc-view-size-chart-btn:hover,
.fc-view-size-chart-btn:focus {
    background: none;
    color: #3498db;
}

/* ==========================================================================
   Size Chart slide-in panel ("View Size Chart")
   Shared by every "View Size Chart" button on the page (main Kit Size
   field + every sibling row) — one panel, not styled per Elementor widget
   instance, see class-registration-form-widget.php's render_size_chart_canvas().
   ========================================================================== */
.fc-size-chart-canvas {
    position: fixed;
    inset: 0;
    z-index: 100000;
    visibility: hidden;
    pointer-events: none;
}

.fc-size-chart-canvas.is-open {
    visibility: visible;
    pointer-events: auto;
}

.fc-size-chart-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.fc-size-chart-canvas.is-open .fc-size-chart-overlay {
    opacity: 1;
}

.fc-size-chart-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 420px;
    max-width: 92vw;
    background: #fff;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

.fc-size-chart-canvas.is-open .fc-size-chart-panel {
    transform: translateX(0);
}

.fc-size-chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}

.fc-size-chart-header h3 {
    margin: 0;
    font-size: 17px;
    color: #333;
}

.fc-size-chart-close {
    background: none;
    border: none;
    font-size: 26px;
    line-height: 1;
    color: #999;
    cursor: pointer;
    padding: 0 4px;
}

.fc-size-chart-close:hover {
    color: #333;
}

.fc-size-chart-body {
    padding: 20px;
    overflow-y: auto;
}

.fc-size-chart-body h4 {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 700;
    color: #333;
}

.fc-size-chart-body table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 24px;
    font-size: 12px;
}

.fc-size-chart-body th,
.fc-size-chart-body td {
    border: 1px solid #ddd;
    padding: 6px 4px;
    text-align: center;
}

.fc-size-chart-body th {
    background: #f5f5f5;
    font-weight: 700;
    color: #333;
}

.fc-size-chart-body th:first-child {
    text-align: left;
    text-transform: uppercase;
    font-size: 11px;
}

@media (max-width: 480px) {
    .fc-size-chart-panel {
        width: 100%;
        max-width: 100%;
    }
}

/*
 * Tryout Form — Sales Team notice / WhatsApp button, and EFIR Access
 * Permit fields (see class-tryout-form-widget.php's "Sales Team Notice"
 * and "EFIR Access Permit" Style sections for the admin-facing controls
 * that override these). Bare fallbacks only, scoped to
 * .fc-tryout-form-wrapper so they never leak onto the Academy
 * Registration Form widget, which shares this same stylesheet.
 */
.fc-tryout-form-wrapper .fc-tryout-sales-notice {
    background-color: #FCF3E3;
    color: #8A6D3B;
    border: 1px solid #F0DCA6;
    border-radius: 6px;
    padding: 12px 16px;
    margin: 0 0 18px;
    font-size: 14px;
    line-height: 1.5;
}

.fc-tryout-form-wrapper .fc-tryout-sales-notice-text {
    margin: 0;
}

.fc-tryout-form-wrapper .fc-submit-button.is-whatsapp-mode {
    background-color: #25D366;
    color: #FFFFFF;
}

.fc-tryout-form-wrapper .fc-submit-button.is-whatsapp-mode:hover {
    background-color: #1EBE57;
}

.fc-tryout-form-wrapper .fc-tryout-efir-box {
    background-color: #FFF8F0;
    border: 1px solid #F0D9B5;
    border-radius: 6px;
    padding: 18px;
    margin: 0 0 18px;
}

.fc-tryout-form-wrapper .fc-tryout-efir-note {
    margin: 0 0 16px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #B02A00;
}

.fc-tryout-form-wrapper .fc-tryout-accompanying-intro {
    font-size: 13px;
    line-height: 1.5;
    color: #555;
    margin: 4px 0 14px;
}

.fc-tryout-form-wrapper .fc-tryout-accompanying-rows {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 14px;
}

.fc-tryout-form-wrapper .fc-tryout-accompanying-row {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    background-color: #FFFFFF;
    border: 1px solid #E4E7EB;
    border-radius: 6px;
    padding: 14px;
    padding-right: 40px;
}

.fc-tryout-form-wrapper .fc-tryout-accompanying-row .fc-form-field {
    flex: 1 1 160px;
    max-width: 100%;
    margin-bottom: 0;
}

.fc-tryout-form-wrapper .fc-tryout-remove-person-button {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
    line-height: 22px;
    text-align: center;
    padding: 0;
    border: none;
    background: transparent;
    color: #B02A00;
    font-size: 18px;
    cursor: pointer;
}

.fc-tryout-form-wrapper .fc-tryout-add-person-button {
    display: inline-block;
    background: transparent;
    border: 1px dashed #999;
    border-radius: 4px;
    padding: 10px 16px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
}

.fc-tryout-form-wrapper .fc-tryout-add-person-button:hover {
    background-color: #F5F5F5;
}