/*
    Apply the ui-field-contain class responsive design principle for label and
    label ~ [class*="ui-"] elements on three elements: label, label ~ [class*="ui-"]
    and .yalst-field-tail-icon

    Example:
    <div class="ui-field-contain yalst-field-contain-with-tail-icon yalst-borderless">
        <label for="email">Email:</label>

        <input type="email" id="email" name="email" maxlength="120" required="required"/>

        <div class="yalst-field-tail-icon">
            <a href="#popupInfo" data-rel="popup" data-transition="pop"
                class="yalst-clean-tooltip-btn ui-btn ui-alt-icon ui-nodisc-icon
                 ui-icon-info ui-btn-inline ui-btn-icon-notext"></a>
        </div>
        <div data-role="popup" id="popupInfo" class="ui-content">
            Please state the kind and nature of the medical emergency!
        </div>
    </div>
*/

.ui-field-contain .yalst-field-tail-icon-pair {
	display: flex;
}

.ui-field-contain .yalst-field-tail-icon-pair .ui-textinput,
.ui-field-contain .yalst-field-tail-icon-pair .ui-selectmenu,
.ui-field-contain .yalst-field-tail-icon-pair .ui-checkboxradio-label {
	flex-grow: 2;
}

.popup-placeholder
{
    display: none;
}

/**** adaptive checkbox ****/
/* without separate label i.e. legend text */

.yalst-checkbox-with-tail-icon
{
    display: table;
    width: 100%;
}

.yalst-checkbox-with-tail-icon > .ui-checkbox
{
    display: table-cell;
    width: 100%;
}

.yalst-checkbox-with-tail-icon > .yalst-field-tail-icon
{
    display: table-cell;
    vertical-align: middle;
}