.container, .page-container, .half-container {
    float: left;
    width: 100%;
}

.mobileOnly {
    display: block;
}

.mobileSpacer {
    padding-top: 20px;
}

@media (min-width: 700px) {
    .page-container {
        padding-bottom: 70px;
    }
}

@media (min-width: 900px) {
    .page-container {
        padding-bottom: 40px;
    }

    .half-container {
        width: 50%;
    }

    .mobileOnly {
        display: none;
    }

    .mobileSpacer {
        padding-top: 0px;
    }
}

.field-wrapper {
    width: 100%;
    float: left;
}

.field-wrapper-half {
    width: 50%;
    float: left;
}

.phone-field-row {
    width: 100%;
    float: left;
    display: flex;
    flex-wrap: wrap;
}

.phone-col-phone {
    width: 38%;
    box-sizing: border-box;
    padding-right: 5px;
}

.phone-col-ext {
    width: 24%;
    box-sizing: border-box;
    padding-right: 5px;
}

.phone-col-type {
    width: 38%;
    box-sizing: border-box;
    padding-right: 0;
}

.field-label-third {
    float: left;
    width: 100%;
    text-align: left;
    padding-right: 10px;
}

.field-control-third {
    float: left;
    width: 100%;
}

.form-spacer {
    height: 15px;
}

@media (max-width: 900px) {
    .field-wrapper-half {
        box-sizing: border-box;
        padding-right: 5px;
    }
}

.field-label, .field-label-half {
	float: left;
    width: 100%;
    text-align: left;
    padding-right: 10px;
}

.field-control, .field-control-half {
    float: left;
	width: 100%;
}

@media (min-width: 900px) {
    /* Full-width row: 25% label, 75% control */
    .field-label {
        width: 25% !important;
        text-align: right;
    }

    .field-control {
        width: 75%;
    }

    /* Half-width row: 50%/50% inside a 50% wrapper = 25%/25% of half-container */
    .field-label-half {
        width: 50% !important;
        text-align: right;
    }

    .field-control-half {
        width: 50%;
    }

    .field-wrapper-half {
        padding-right: 0;
    }

    /* Phone row: phone col is 50% of half-container, same 50%/50% split inside */
    .phone-field-row {
        flex-wrap: nowrap;
    }

    .phone-col-phone {
        width: 50%;
        padding-right: 0;
    }

    .phone-col-phone .field-label-third {
        width: 50% !important;
        text-align: right;
    }

    .phone-col-phone .field-control-third {
        width: 50%;
        padding-right: 15px;
        box-sizing: border-box;
    }

    /* Ext col: narrow, label and input side by side */
    .phone-col-ext {
        width: 15%;
        padding-right: 10px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
    }

    .phone-col-ext .field-label-third {
        text-align: right;
        width: auto !important;
        float: none;
        padding-right: 5px;
    }

    .phone-col-ext .field-control-third {
        width: 70px;
        float: none;
    }

    /* Type col: fills remaining space, right edge aligns with other controls */
    .phone-col-type {
        flex: 1;
        padding-right: 0;
        display: flex;
        align-items: center;
    }

    .phone-col-type .field-label-third {
        text-align: right;
        width: auto !important;
        float: none;
        white-space: nowrap;
        padding-right: 5px;
    }

    .phone-col-type .field-control-third {
        flex: 1;
        float: none;
    }

    .phone-col-type .field-control-third select {
        width: 100%;
    }
}

.error-message {
    text-align: center;
    color: red;
}