/*---------------------*/
/* Responsive Form CSS */
/*---------------------*/

/* Main classes: div.controls (flow layout), div.forms (flow layout), dl.form (fixed layout) */
/* Use div.group (inside div.controls or dl.form.dd) to keep controls together */

/* Form spacing CSS */
/* Set containers to use word spacing to separate controls */
/* Reset controls within containers to appear normally */
/* Add spacing for controls in control container */
/* Add spacing for label container (for vertical display) */

div.buttons, div.buttons > div, div.controls, div.controls div.group, div.forms, div.forms dl dt, div.forms dl dd, dl.form dt, dl.form dd, dl.form dd div.group
{
    margin: 0;
    word-wrap: break-word;
    word-spacing: 10px;
    font-size: 0.1px; /* Font-size zero prevents white space taking up ~3px but IE doesn't do word-spacing if font-size zero */
}
div.buttons > *, div.buttons > div > *, div.controls > *, div.controls div.group > *:not(.group), div.forms dl dt > *, div.forms dl dd > *, dl.form dt > *, dl.form dd > *, dl.form dd div.group > *:not(.group)
{
    word-spacing: normal;
}
div.buttons, div.controls > *, div.controls div.group > *:not(.group), div.forms dl dd > *, dl.form dd > *, dl.form dd div.group > *:not(.group)
{
    margin-bottom: 10px;
}
div.forms dl dt, dl.form dt
{
    margin-bottom: 5px;
}

/* Display containers and controls as inline-block (need to be top aligned to stay inline) */
/* Max-width prevents elements extending outside of dt/dd (used with word-wrap above for labels) */

div.forms dl, div.forms dl dt, div.forms dl dd, dl.form dt, dl.form dd, dl.form dd div.group,
div.buttons > div, div.buttons > span, div.buttons > table, div.buttons > label, div.buttons > a, 
div.buttons div.group > div, div.buttons div.group > span, div.buttons div.group > table, div.buttons div.group > label, div.buttons div.group > a, 
div.controls > div, div.controls > span, div.controls > table, div.controls > label, div.controls > a, 
div.controls div.group > div, div.controls div.group > span, div.controls div.group > table, div.controls div.group > label, div.controls div.group > a, 
div.forms dl dt > div, div.forms dl dt > span, div.forms dl dt > table, div.forms dl dt > label, div.forms dl dt > a, 
div.forms dl dd > div, div.forms dl dd > span, div.forms dl dd > table, div.forms dl dd > label, div.forms dl dd > a, 
dl.form dt > div, dl.form dt > span, dl.form dt > table, dl.form dt > label, dl.form dt > a, 
dl.form dd > div, dl.form dd > span, dl.form dd > table, dl.form dd > label, dl.form dd > a, 
dl.form dd div.group > div, dl.form dd div.group > span, dl.form dd div.group > table, dl.form dd div.group > label, dl.form dd div.group > a {
    vertical-align: top;
    display: inline-block;
    min-height: 1px;
    max-width: 100%;
}
div.buttons > table, div.buttons div.group > table, div.controls > table, div.controls div.group > table, div.forms dl dt > table, div.forms dl dd > table, dl.form dt > table, dl.form dd > table, dl.form dd div.group > table {
    display: inline-table;
}

/* Fixed width form needs precise pixels so cannot behave like containers */
/* Fixed form styles - standard label is 125px (incl. 5px padding); include margin for when full width */

dl.form
{
    font-size: 0px;
}
dl.form dt
{
    width: 125px;
    padding-right: 5px;
}
dl.form dd
{
    width: calc(100% - 125px);
}

/* Additionals styles: break (div.forms to display on new line), nospace (div.forms to reset white-space before), full (dl.form for full width), nowrap (keep dt & dd on same line) */

div.forms .break
{
    display: inline;
}
div.forms .break:before {
    content: '\A';
    white-space: pre;
}
div.forms .nospace
{
    margin-left: -10px;
}

/* Important needed if custom label size used (as more specific) */
dl.form.full dt, dl.form.full dd, dl.form dt.full, dl.form dd.full
{
    width: 100% !important;
}
@media screen and (max-width: 350px)
{
    dl.form:not(.l-30):not(.cols-2):not(.nowrap) dt:not(.nowrap), dl.form:not(.l-30):not(.cols-2):not(.nowrap) dd:not(.nowrap)
    {
        width: 100% !important;
    }
}

/* Custom styles - labels, other left/right form widths, multi-columns, button, label, hyperlink, sub */
dl.form.labels dt, dl.form.labels dt > span {
    font-weight: bold;
}
dl.form.labels dd > * {
    min-height: 17px;
}
dl.form.l-30 dt
{
    width: 25px;
}
dl.form.l-30 dd
{
    width: calc(100% - 30px);
}
dl.form.l-100 dt
{
    width: 95px;
}
dl.form.l-100 dd
{
    width: calc(100% - 100px);
}
dl.form.l-150 dt
{
    width: 145px;
}
dl.form.l-150 dd
{
    width: calc(100% - 150px);
}
dl.form.r-100 dt
{
    width: calc(100% - 100px);
}
dl.form.r-100 dd
{
    width: 95px;
}
dl.form.cols-2 dd:not(.colspan)
{
    width: calc(50% - 125px);
    padding-right: 10px;
}
dl.form.cols-2.l-100 dd:not(.colspan)
{
    width: calc(50% - 100px);
    padding-right: 10px;
}
@media screen and (max-width: 450px)
{
    dl.form.cols-2 dd:not(.colspan)
    {
        width: calc(100% - 125px);
        padding-right: 0;
    }
}
@media screen and (max-width: 400px)
{
    dl.form.cols-2.l-100 dd:not(.colspan)
    {
        width: calc(100% - 100px);
        padding-right: 0;
    }
}

/* Button alignment and size */
div.forms dd div.button
{
    margin-top: -3px;
}
dl.form dd div.button {
    margin-top: -3px;
    margin-bottom: 7px;
}
div.controls div.group.sub
{
    margin-top: 3px;
}
div.button > div {
    min-width: 50px;
} /* Need to use second div as Chrome doesn't calculate parent width correctly (div.buttons.centre > div) */

/* Standard label alignment (related to the font size and theme - override if not correct) */
div.forms dl dt > span, div.forms dl dt > a, div.forms dl dt > label, 
dl.form dt > span, dl.form dt > a, dl.form dt > label, 
dl.form dd .label, dl.form dd .hyperlink, dl.form.labels dd > *,
div.forms .label, div.forms .hyperlink, div.controls .label, div.controls .hyperlink {
    margin-top: 3px;
}