.App {
    text-align: center;
}

.App-logo {
    height: 40vmin;
    pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
    .App-logo {
        animation: App-logo-spin infinite 20s linear;
    }
}

.App-header {
    background-color: #282c34;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: calc(10px + 2vmin);
    color: white;
}

.App-link {
    color: #61dafb;
}

@keyframes App-logo-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

body {
    background: rgb(214,212,212);
    text-align: center;
}

.RegistrationForm {
    font-size: 20px;
    border-radius: 15px;
    box-shadow: 0 0 20px rgba(0,0,0,0.2);
    padding: 10px 20px;
    transition: transform 0.2s;
    width: 65%;
    text-align: center;
    margin: auto;
    margin-top: 20px;
    font-family: Lato, "Helvetica Neue", Arial, "Lucida Grande", Tahoma, Verdana, sans-serif;
    background-color: #fff;
}


label {
    font-size: 16px;
    width: 100%;
    text-align: center;
    font-family: Lato, "Helvetica Neue", Arial, "Lucida Grande", Tahoma, Verdana, sans-serif;
    color: rgb(89, 93, 100);
}

p {
    font-size: 16px;
    color: rgb(89, 93, 100);
    font-family: Lato, "Helvetica Neue", Arial, "Lucida Grande", Tahoma, Verdana, sans-serif;
}

input {
    display: block;
    width: 100%;
    padding: 5px;
    box-sizing: border-box;
    border: 1px solid #ddd;
    border-radius: 3px;
    margin: 0px 0px 0px 0px;
    font-size: 16px;
    color: rgb(89, 93, 100);
    font-family: Lato, "Helvetica Neue", Arial, "Lucida Grande", Tahoma, Verdana, sans-serif;
}

    input[type="radio"] {
        display: inline;
        accent-color: #61dafb;
        width: 50%;
        text-align: left;
    }

    input[type="checkbox"] {
        display: inline;
        width: auto;
        accent-color: #61dafb;
        text-align: left;
    }

button {
    padding: 10px 20px;
    border-radius: 6px;
    margin: 15px;
    border: none;
    color: white;
    cursor: pointer;
    background-color: #004080;
    width: 40%;
    font-size: 16px;
}

.disclousure {
    color: rgb(89, 93, 100);
    font-family: Lato, "Helvetica Neue", Arial, "Lucida Grande", Tahoma, Verdana, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size:17px;
    text-align:justify
}

.overlay {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 999;
    background: rgba(255,255,255,0.8) url("/Images/loading.gif") center no-repeat;
}

body.loading {
    overflow: hidden;
}

body.loading .overlay {
    display: block;
}
/* Container to hold all form fields in a single line */
.form-group-inline {
    display: flex;
    align-items: center;
    gap: 10px; /* Adjusts spacing between elements */
    flex-wrap: wrap; /* Ensures elements don't overflow */
    margin-top: 10px;
    border: 1px solid grey;
    color: rgb(89, 93, 100)
}

    /* Style the labels */
    .form-group-inline label {
        margin-right: 10px; /* Space between label and input */
        white-space: nowrap; /* Prevent label from breaking into multiple lines */
        color: rgb(89, 93, 100);
        font-family: Lato, "Helvetica Neue", Arial, "Lucida Grande", Tahoma, Verdana, sans-serif;
        font-style: normal;
        font-weight: 400;
    }

    /* Style the inputs */
    .form-group-inline input.form-field {
        /*flex: 1; /* Makes input fields grow to fill available space */
        min-width: 100px; /* Set a minimum width */
        margin-right: 2px;
        color: rgb(89, 93, 100);
        font-family: Lato, "Helvetica Neue", Arial, "Lucida Grande", Tahoma, Verdana, sans-serif;
    }

        .form-group-inline input.form-field[type="checkbox"] {
            /*Space between checkbox and text */
            margin-right: 2px;
        }

        .form-group-inline input.form-field[type="radio"] {
            /*Space between checkbox and text */
            margin-right: 3px;
        }

    .form-group-inline input[type="text"] {
        min-width: 200px;
        margin-right: 5px; /* Set a minimum width */
        width: 100%;
    }
/* Optional: Style error messages */
.error {
    color: red;
    border: 2px solid red;
}

.error-box {
    width: 95%;
    border: 1px solid rgb(255, 60, 60);
    background-color: rgb(250, 233, 233);
    color: rgb(21, 35, 43);
    padding: 7px 12px;
    margin-bottom: 7px;
    border-radius: 0px;
    display: none;
    word-break: break-all;
}

.error-text {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    font-size: 12px;
    color: rgb(89, 93, 100);
    text-decoration: none;
    margin-bottom: 0px;
    font-weight: normal;
}

.error-icon {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB3aWR0aD0iMTAwMHB4IiBoZWlnaHQ9IjEwMDBweCIgdmlld0JveD0iMCAwIDEwMDAgMTAwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTAwMCAxMDAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHBhdGggZmlsbD0iI2ZmM0MzQyIgZD0iTTQ5OS43LDBDMjIzLjYsMCwwLDIyMy42LDAsNDk5LjdDMCw3NzUuOCwyMjMuNiwxMDAwLDQ5OS43LDEwMDBTMTAwMCw3NzYuNCwxMDAwLDQ5OS43QzEwMDAsMjIzLjYsNzc2LjQsMCw0OTkuNywwegoJIE01MDAuMyw3NzVjLTQxLjYsMC03NS0zMy40LTc1LTc1czMzLjQtNzUsNzUtNzVzNzUsMzMuNCw3NSw3NVM1NDEuOSw3NzUsNTAwLjMsNzc1eiBNNTc0LDQ4OGMwLDQxLjQtMzMuNiw3NS03NSw3NWgwCgljLTQxLjQsMC03NS0zMy42LTc1LTc1VjI2M2MwLTQxLjQsMzMuNi03NSw3NS03NWgwYzQxLjQsMCw3NSwzMy42LDc1LDc1VjQ4OHoiLz4KPC9zdmc+Cg==);
    background-size: cover;
    min-width: 14px;
    height: 14px;
    display: block;
    margin-right: 7px;
    vertical-align: middle; /* Aligns the icon vertically with the text */

}

ul {
    list-style-type: disc;
}

li {
    display: list-item;
    unicode-bidi: isolate;
    padding: 0; /* Removes extra padding */
}
.required {
    padding:4px;
    color: red;
    font-weight: bold;
}


/* ===== Phone row layout (single definition) ===== */
/* Phone row becomes 2 fixed-height cells */
.phone-row {
    display: flex;
    gap: 8px;
    width: 99%;
}

/* Both cells lock height and center their content */
.cc-cell,
.phone-cell {
    height: 38px;
    display: flex;
    align-items: center;
}

/* Width control */
.cc-cell {
    flex: 0 0 120px;
}
/* collapsed width */
.phone-cell {
    flex: 1 1 auto;
}



/* Ensure Select2 + input fill the cell height */
.cc-cell .select2-container,
.cc-cell .select2-selection--single,
.phone-cell #phone {
    height: 38px !important;
}

/* Make phone input not force 100% width weirdness */
.phone-cell #phone {
    width: 100% !important;
    box-sizing: border-box;
    margin: 0 !important;
}

/* Ensure Select2 container respects the cell width */
.cc-cell .select2-container {
    width: 100% !important;
}


    .phone-row > * {
        min-width: 0; /* important for Select2 inside flex */
    }

    /* Country dropdown: collapsed by default */
    .phone-row .select2-container {
        flex: 0 0 90px; /* small width */
        max-width: 90px;
        transition: flex-basis .15s ease, max-width .15s ease;
    }

    /* Expand only while dropdown is open */
    .phone-row.cc-open .select2-container {
        flex: 0 0 38%;
        max-width: 38%;
    }

    /* Phone input: stable size, never slips */
    .phone-row #phone {
        flex: 1 1 auto;
        width: auto !important; /* override global input { width:100% } */
        height: 38px;
        box-sizing: border-box;
        margin: 0 !important;
        padding: 5px !important;
    }

/* ===== Select2 should match your input look ===== */
.select2-container--default .select2-selection--single {
    height: 38px;
    border: 1px solid #ddd;
    border-radius: 3px;
    display: flex;
    align-items: center;
    font-size: 16px;
    font-family: Lato, "Helvetica Neue", Arial, "Lucida Grande", Tahoma, Verdana, sans-serif;
    color: rgb(89, 93, 100);
}

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 38px;
        padding-left: 8px;
        padding-right: 28px;
    }

/* Fix your global ul/li styles breaking Select2 dropdown */
.select2-results__options {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 16px;
    font-family: Lato, "Helvetica Neue", Arial, "Lucida Grande", Tahoma, Verdana, sans-serif;
    color: rgb(89, 93, 100);
}
}

.select2-results__option {
    display: block;
}

/* Keep dropdown above other elements */
.select2-dropdown {
    z-index: 99999;
}

/* Keep selected value on one line inside the small select box */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
/* Make dropdown options one-line for clean list */
.select2-results__option {
    white-space: nowrap !important;
}
/* Let the dropdown be wider than the collapsed select if needed */
.select2-dropdown {
    min-width: 320px !important;
}
.phone-row .select2-container {
    flex: 0 0 120px !important;
    max-width: 120px !important;
}

.phone-row:not(.cc-open) .select2-selection__rendered {
    padding-right: 18px !important;
    padding-left: 8px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

/* 2-column rows */
.two-col {
    display: flex;
    gap: 16px;
    width: 99%;
    align-items: flex-start;
}

    .two-col .col {
        flex: 1 1 0;
    }

/* Responsive: stack on small screens */
@media (max-width: 900px) {
    .two-col {
        flex-direction: column;
    }
}

/* Compact checkbox spacing ONLY in these sections */
.checklist label {
    display: flex;
    align-items: center;
    gap: 6px; /* checkbox-to-text spacing */
    margin: 0;
    font-size: 17px;
    color: rgb(89, 93, 100);
    font-family: Lato, "Helvetica Neue", Arial, "Lucida Grande", Tahoma, Verdana, sans-serif;
    font-weight: normal;
    white-space: nowrap; /* prevents wrapping */
}

/* Override your global checkbox/radio widths inside these columns */
.two-col .col input[type="checkbox"],
.two-col .col input[type="radio"] {
    width: auto !important;
    display: inline-block !important;
    margin: 0 !important;
}

/* Make the internal checkbox container not artificially narrow */
.two-col .col > div[style*="width:50%"] {
    width: 100% !important;
}

/* Make the checkbox list tighter */
.checklist {
    display: flex;
    gap: 24px; /* space between options */
    align-items: center;
    margin-top: 8px;
    max-width: 420px;
}

/* Tighter label spacing */
.two-col .col label {
    margin: 0 !important;
    line-height: 1.2;
    max-width: 340px;
}

/* Align wrapped checkbox text nicely */
.two-col .col label {
    align-items: flex-start !important;
}

.two-col .col input[type="checkbox"] {
    margin-top: 3px !important; /* aligns box with first line of text */
}

.two-col {
    gap: 24px;
}
    /* slightly more breathing room */
    .two-col .col {
        padding-right: 6px;
    }

/* Inline radio buttons (Yes / No / Unknown) */
.radio-inline-group {
    display: flex;
    gap: 24px; /* space between options */
    align-items: center;
    margin-top: 8px;
    max-width: 420px;
}

    .radio-inline-group label {
        display: flex;
        align-items: center;
        gap: 6px; /* radio-to-text spacing */
        margin: 0;
        font-size: 17px;
        color: rgb(89, 93, 100);
        font-family: Lato, "Helvetica Neue", Arial, "Lucida Grande", Tahoma, Verdana, sans-serif;
        font-weight: normal;
        white-space: nowrap; /* prevents wrapping */
        
    }

    /* Override global radio width ONLY here */
    .radio-inline-group input[type="radio"] {
        width: auto !important;
        display: inline-block !important;
        margin: 0 !important;
    }

.address-row {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap; /* 🔑 allow wrapping */
}

    /* default input behavior */
    .address-row .form-field {
        flex: 1 1 180px; /* grow | shrink | minimum */
        min-width: 180px;
        width: auto !important;
    }

/* Optional fine-tuning */
#zip {
    max-width: 200px; /* postal codes don’t need huge width */
}

.user-agreement-box {
    text-align: left;
    border: 1px solid #ddd;
    background: #fafafa;
    border-radius: 6px;
    padding: 12px 14px;
    margin-top: 8px;
    max-height: 220px; /* scroll if long */
    overflow-y: auto;
}

.user-agreement-box {
    text-align: left;
    border: 1px solid #ddd;
    background: #fafafa;
    border-radius: 6px;
    padding: 12px 14px;
    margin-top: 8px;
    max-height: 220px;
    overflow-y: auto;
    padding-left: 22px;
}

 
    .user-agreement-box ul {
        margin: 0;
        padding-left: 18px; /* controls bullet indent */
        list-style-position: outside; /* bullet inside visible area */
    }

    /* spacing */
    .user-agreement-box li {
        margin: 6px 0;
        line-height: 1.45;
    }


    .user-agreement-box a {
        color: #004080;
        text-decoration: underline;
    }
.agreeCheckBox {
    display: flex;
    gap: 10px;
}
#lblCaptcha {
    width : 20% !important;
}
#txtCaptcha
{
    flex : 0 0 180px;
}