/* ============================= */
/* DYNAMICS FORM → GRID OVERRIDE */
/* ============================= */
/* FORCE FONT ACROSS ENTIRE FORM */
html, body,
.form-container,
.form-horizontal,
input,
textarea,
select,
button,
.k-widget,
.k-input,
.k-dropdown {
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important;
}

html, body {
    background-color: #f6f6f6 !important;
}

/* Make the form act like row-holder */
.form-horizontal {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 15px;
    margin: 0 !important;
}

/* Each field = column (like col-6) */
.form-horizontal .control-group {
    width: calc(50% - 10px) !important;
    box-sizing: border-box;
    margin-bottom: 15px !important;
}

/* Make certain fields full width (like col-12) */
.form-horizontal .control-group.full,
.form-horizontal .control-group:has(textarea),
.form-horizontal .control-group:has(input[type="file"]) {
    width: 100% !important;
}

/* Labels: LEFT aligned + BLUE (fixed) */
.form-horizontal .control-label {
    float: none !important;
    width: 100% !important;
    margin: 0 0 5px 0 !important;
    display: block !important;

    text-align: left !important;
    color: #1363a4 !important;   /* blue */
    font-weight: 600;
    font-size: 15px;
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important;
}

/* ensure inner label inherits correctly */
.form-horizontal .control-label label {
    display: block;
    text-align: left;
    color: inherit;
    font-weight: inherit;
}

/* Make inputs full width */
.form-control,
.k-numerictextbox,
select,
textarea {
    width: 100% !important;
    box-sizing: border-box;
}

/* Fix wrapper issues */
.control-div {
    width: 100% !important;
    display: block !important;
}

/* Remove fixed widths that break layout */
.control-group > .control-div-checkbox > label {
    width: auto !important;
}

/* Match your site container */
.form-container {
    max-width: 1200px !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    top: 0 !important;
}

/* Better spacing */
.control-group {
    padding-bottom: 0 !important;
}

/* Mobile: stack to 1 column */
@media (max-width: 768px) {
    .form-horizontal .control-group {
        width: 100% !important;
    }
}

/* ============================= */
/* OPTIONAL: HIDE LABELS (if using placeholders) */
/* ============================= */

.form-horizontal .control-label {
    /* Uncomment if you use the JS below */
    /* display: none !important; */
}

/* === TWO COLUMN LAYOUT FIX === */
.form-horizontal {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

/* Each field becomes half width */
.form-horizontal .control-group {
    width: 48%;
    display: inline-block;
    vertical-align: top;
}

/* Full width for special sections */
.form-horizontal .control-group.full-width,
.acknowledgement-formatting,
.consent-formatting,
.captcha-formatting {
    width: 100%;
}

/* Fix label/input stacking inside each field */
.form-horizontal .control-label,
.form-horizontal .control-div {
    display: block;
    width: 100%;
}

/* Inputs take full width of their column */
.form-control,
.k-numerictextbox,
.control-div input,
.control-div select,
.control-div textarea {
    width: 100% !important;
}

/* Mobile fallback */
@media (max-width: 768px) {
    .form-horizontal .control-group {
        width: 100%;
    }
}
/* ============================= */
/* OVERRIDE ALL BUTTON STYLES */
/* ============================= */

#formSubmit,
#formSubmit.k-button,
#formSubmit.k-primary,
button.btn {
    background: #37afe2 !important;   /* your theme blue */
    border: 1px solid #37afe2 !important;

    color: #ffffff !important;

    /* override the pill shape */
    border-radius: 20px !important;

    /* override sizing */
    padding: 8px 18px !important;
    min-width: auto !important;
    line-height: normal !important;

    font-size: 15px !important;
    font-weight: 500 !important;
    text-transform: none !important;

    text-align: center;

    box-shadow: none !important;
}

/* Hover state */
#formSubmit:hover,
button.btn:hover {
    background: #005a9e !important;
    border-color: #005a9e !important;
}

/* Active state */
#formSubmit:active,
button.btn:active {
    background: #004a82 !important;
    border-color: #004a82 !important;
}

/* Focus state */
#formSubmit:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(0,113,197,0.25);
}

/* New Code */
/* ============================= */
/* STYLE KENDO FILE UPLOAD BUTTON */
/* ============================= */

.k-upload .k-upload-button,
.k-upload .k-button {
    background: #37afe2 !important;
    border: 1px solid #37afe2 !important;
    color: #fff !important;

    border-radius: 20px !important;

    font-size: 15px;
    font-weight: 500;

    padding: 8px 16px !important;
    line-height: normal !important;

    text-transform: none;

    box-shadow: none !important;
}

/* Hover */
.k-upload .k-upload-button:hover,
.k-upload .k-button:hover {
    background: #2f96c6 !important;
    border-color: #2f96c6 !important;
}

/* Focus */
.k-upload .k-upload-button:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(55,175,226,0.25);
}

/* ============================= */
/* SUBMIT BUTTON SPACING FIX */
/* ============================= */

#formSubmit,
button[type="submit"],
.k-button.k-primary {
    margin-top: 25px !important;
}

/* Inject label into Kendo upload container */
.k-upload {
    display: flex !important;
    align-items: center;
    gap: 15px;
}

/* Left-side label */
.k-upload::before {
    content: "Upload your Resume:";
    font-size: 28px;
    font-weight: 600;
    padding-left: 10px; 
    padding-right: 10px; 
    color: #0071C5;
    white-space: nowrap;
}

.file-upload-footer span {
    color: #0071C5 !important;
}

.file-upload-footer span b {
    color: #0071C5 !important;
    font-weight: 700;
}
/* ============================= */
/* MESSAGE FIELD - FULL WIDTH + HEIGHT */
/* ============================= */

/* Entire message group width */
.questionContent {
    width: 98.5% !important;
    max-width: 500px;
}

/* Span both columns */
.form-horizontal .control-group-cr720_websitemessage {
    width: 98.5% !important;
}

/* Style the textarea */
.form-horizontal .control-group-cr720_websitemessage textarea {
    width: 98.5% !important;
    min-height: 120px !important;

    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;

    padding: 10px !important;
    resize: vertical !important;

    box-sizing: border-box !important;
}