<div id="demo" class="md-flight-booking" style="display:none" mbsc-form>

    <div class="md-header">Book a flight</div>

    <div class="md-ftype-cont">
        <label>
            Round trip
            <input type="radio" data-role="segmented" value="round" name="triptype" class="md-flight-type" checked />
        </label>
        <label>
            One way
            <input type="radio" data-role="segmented" value="oneway" name="triptype" class="md-flight-type md-one-way" />
        </label>
    </div>

    <label>
        Origin
        <select class="md-place-select md-origin">
            <option value="LTN">London Luton</option>
        </select>
    </label>
    <label>
        Destination
        <select class="md-place-select md-destination">
            <option>Please select a city</option>
        </select>
    </label>
    <div class="md-time-range">
        <label>
            Leaving
            <input type="text" class="md-leaving-date" />
        </label>

        <label>
            Returning
            <input type="text" class="md-return-date" />
        </label>
    </div>

    <div>
        <label for="md-flight-adults">Adults</label>
        <span class="mbsc-desc">From 14 years</span>
        <input id="md-flight-adults" type="number" data-role="stepper" min="1" value="1" max="15" data-val="left" />
    </div>

    <div>
        <label for="md-flight-children">Children</label>
        <span class="mbsc-desc">2-14 years</span>
        <input id="md-flight-children" type="number" data-role="stepper" max="15" data-val="left" />
    </div>

    <div>
        <label for="md-flight-infant">Infant</label>
        <span class="mbsc-desc">0-2 years</span>
        <input id="md-flight-infant" type="number" data-role="stepper" max="10" data-val="left" />
    </div>

    <label>
        Economy
        <input type="radio" data-role="segmented" name="flight_type" checked />
    </label>
    <label>
        Comfort
        <input type="radio" data-role="segmented" name="flight_type" />
    </label>
    <label>
        Business
        <input type="radio" data-role="segmented" name="flight_type" />
    </label>

    <div class="mbsc-padding">
        <button class="mbsc-btn-block">Find Flights</button>
    </div>

</div>

.md-flight-booking {
    padding: 0!important;
}

.md-filter-cont {
    padding: .5em;
}


/* header */

.md-flight-booking .md-ftype-cont {
    padding-top: 1.15em;
}

.md-flight-booking .md-header {
    background: #4ECCC4;
    padding: 1em;
    color: #fff;
    text-align: center;
}

.mbsc-material .md-header {
    background: #009688;
}

.mbsc-android-holo .md-header {
    background: #31c6e7;
}

.mbsc-ios .md-header {
    background: #1272dc;
    color: #fff;
}

.mbsc-ios-dark .md-header {
    background: #ff8400;
    color: #1a1a1a;
}

.mbsc-wp .md-header {
    background: #1a9fe0;
    color: #000;
}

.mbsc-material-dark .md-header {
    color: #303030;
    background: #81ccc4;
}

.mbsc-android-holo-light .md-header {
    color: #000;
}

.mbsc-mobiscroll-dark .md-header {
    color: #263238;
}


/*select*/

.md-airports-booking .mbsc-sc-itm,
.md-airports-booking .dw-li {
    text-align: center;
}

.md-airports-booking .md-airport {
    width: 100%;
    display: inline-block;
    vertical-align: middle;
    letter-spacing: normal;
}

.md-airports-booking .md-airport-name {
    height: 18px;
    line-height: 18px;
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.md-airports-booking .md-airport-location {
    height: 12px;
    line-height: 12px;
    font-size: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.md-airports-booking #filter_input {
    width: 100%;
    padding: 6px;
    box-sizing: border-box;
}


/* range inputs */

.md-flight-booking .md-time-range {
    overflow: hidden;
    width: 99%;
}

.md-flight-booking.mbsc-ios .md-time-range {
    background: #fff;
}

.md-flight-booking .md-time-range .mbsc-input {
    float: left;
    width: 50%;
    box-sizing: border-box;
}

.md-flight-booking.mbsc-ios .md-time-range .mbsc-input {
    display: block;
}

.md-flight-booking.mbsc-ios .md-time-range .mbsc-input .mbsc-label {
    font-size: 14px;
    padding-left: 1.14285em;
    padding-top: 0.75em;
    line-height: 22px;
}

.md-flight-booking.mbsc-ios .md-time-range .mbsc-input .mbsc-label {
    width: 100%;
}

.md-time-range .mbsc-input:first-child {
    padding-right: .5em;
}

.md-time-range .mbsc-input:last-child {
    padding-left: .5em;
}


/* Stepper */

.md-flight-booking.mbsc-form .mbsc-stepper-cont {
    padding-top: 1.125em;
    padding-bottom: 1.125em;
}