/* NAVIGATION */
@media (min-width: 701px)
{
    BODY:has(#u27-form-menu)
    {
        MARGIN-BOTTOM: calc(40 * var(--cms-factor) + 2 * var(--cms-separator-width));
    }

    #u27-form-menu
    {
        BACKGROUND: var(--cms-background);
        DISPLAY: flex;
        GAP: var(--cms-separator-width);
        INSET: auto 0 0;
        JUSTIFY-CONTENT: center;
        PADDING: var(--cms-separator-width);
        POSITION: fixed;
        Z-INDEX: 50000;
    }

    #u27-form-menu A
    {
        COLOR: var(--cms-color);
        FLEX: 1;
        HEIGHT: calc(40 * var(--cms-factor));
        LINE-HEIGHT: calc(40 * var(--cms-factor));
        PADDING: 0 var(--cms-hpadding);
        TEXT-ALIGN: center;
        TRANSITION: background-color 0.5s, color 0.5s;
        WHITE-SPACE: nowrap;
        WILL-CHANGE: background-color, color;
    }

    #u27-form-menu A.active
    {
        COLOR: var(--cms-color-alt2);
    }

    #u27-form-menu A:nth-child(1) { BACKGROUND: rgba(212,  94,  54, 0.2); }
    #u27-form-menu A:nth-child(2) { BACKGROUND: rgba( 50, 151,  41, 0.2); }
    #u27-form-menu A:nth-child(3) { BACKGROUND: rgba(  0, 147, 182, 0.2); }
    #u27-form-menu A:nth-child(4) { BACKGROUND: rgba(177, 100, 213, 0.2); }
    #u27-form-menu A:nth-child(1).active { BACKGROUND: #d45e36; }
    #u27-form-menu A:nth-child(2).active { BACKGROUND: #329729; }
    #u27-form-menu A:nth-child(3).active { BACKGROUND: #0093b6; }
    #u27-form-menu A:nth-child(4).active { BACKGROUND: #b164d5; }

    BODY:has(#u27-form-section1 DIV.response-error) A.u27-form-section1:after,
    BODY:has(#u27-form-section2 DIV.response-error) A.u27-form-section2:after,
    BODY:has(#u27-form-section3 DIV.response-error) A.u27-form-section3:after,
    BODY:has(#u27-form-section4 DIV.response-error) A.u27-form-section4:after
    {
        BACKGROUND: var(--cms-error-color);
        BORDER: var(--cms-separator-width) solid var(--cms-background);
        BORDER-RADIUS: 50%;
        COLOR: var(--cms-error-background);
        CONTENT: "!";
        DISPLAY: inline-block;
        FONT-WEIGHT: 700;
        HEIGHT: calc(20 * var(--cms-factor));
        LINE-HEIGHT: calc(20 * var(--cms-factor));
        MARGIN-LEFT: 1ch;
        TEXT-ALIGN: center;
        WIDTH: calc(20 * var(--cms-factor));
    }
}

@media (max-width: 700px)
{
    #u27-form-menu
    {
        DISPLAY: none;
    }
}

/* SECTIONS */
.u27-form SECTION
{
    CONTAIN: content;
    MARGIN-BOTTOM: var(--cms-vspacing);
    PADDING: var(--cms-hpadding);
    SCROLL-MARGIN-TOP: 25vh;
}

.u27-form SECTION FIELDSET:last-child
{
    MARGIN-BOTTOM: 0;
}

#u27-form-section1 { BACKGROUND: rgba(212,  94,  54, 0.05); BORDER: var(--cms-separator-width) solid #d45e36; }
#u27-form-section2 { BACKGROUND: rgba( 50, 151,  41, 0.05); BORDER: var(--cms-separator-width) solid #329729; }
#u27-form-section3 { BACKGROUND: rgba(  0, 147, 182, 0.05); BORDER: var(--cms-separator-width) solid #0093b6; }
#u27-form-section4 { BACKGROUND: rgba(177, 100, 213, 0.05); BORDER: var(--cms-separator-width) solid #b164d5; }

/* TITLE / DESCRIPTION */
.u27-form H1:has(+ H2),
.u27-form .description
{
    MARGIN-BOTTOM: var(--cms-vspacing);
}

/* FIELDSET */
.u27-form FIELDSET LABEL,
.u27-form FIELDSET .label,
.u27-form FIELDSET .like-label
{
    BACKGROUND-COLOR: rgba(0, 0, 0, 0.05);
    BOX-SIZING: border-box;
    FONT-WEIGHT: 500;
    PADDING: var(--cms-vpadding) var(--cms-hpadding);
}

.u27-form FIELDSET .label
{
    DISPLAY: flex;
    FLEX-DIRECTION: column;
    GAP: var(--cms-vpadding);
    PADDING-BOTTOM: var(--cms-hpadding);
}

.u27-form FIELDSET .label LABEL
{
    BACKGROUND: transparent;
    MARGIN: calc(-1 * var(--cms-vpadding)) calc(-1 * var(--cms-hpadding));
}

.u27-form FIELDSET DIV:not([class])
{
    DISPLAY: flex;
    FLEX-WRAP: wrap;
    GAP: var(--cms-vpadding);
    MAX-HEIGHT: min(35vh, 350 * var(--cms-factor));
    OVERFLOW-X: clip;
    OVERFLOW-Y: scroll;
}

.u27-form FIELDSET DIV:not([class]) > *
{
    FLEX: 0 0 calc(25% - var(--cms-vpadding) * 4 / 3);
    MIN-WIDTH: min(100%, 325 * var(--cms-factor));
}

.u27-form FIELDSET DIV:not([class]) > *:first-child:last-child
{
    FLEX-BASIS: 100%;
}

/* NESTED FIELDSET */
.u27-form FIELDSET FIELDSET
{
    BACKGROUND: transparent;
    BORDER: none;
    BORDER-LEFT: var(--cms-separator-border);
    BORDER-RIGHT: var(--cms-separator-border);
    MARGIN-BOTTOM: 0;
    PADDING: calc(var(--cms-hpadding) / 2) var(--cms-hpadding) var(--cms-hpadding);
}

.u27-form FIELDSET FIELDSET:not(FIELDSET + FIELDSET)
{
    BORDER-TOP: var(--cms-separator-border);
}

.u27-form FIELDSET FIELDSET:not(:has(+ FIELDSET:not([style*="none" i])))
{
    BORDER-BOTTOM: var(--cms-separator-border);
}

/* INPUT */
.u27-form INPUT[type=date],
.u27-form INPUT[type=text],
.u27-form TEXTAREA
{
    MARGIN: 0;
}

/* HIGHLIGHT SELECTED */
.u27-form LABEL:has(:checked),
.u27-form .label:has(:checked)
{
    BACKGROUND: rgba(18, 163, 229, 0.1);
}

/* GROUP SELECTOR */
.u27-form FIELDSET DIV.u27-display-input-group
{
    BORDER: var(--cms-separator-width) solid var(--cms-color);
    DISPLAY: flex;
    FLEX-WRAP: wrap;
    GAP: 1ch;
    MARGIN-TOP: calc(25 * var(--cms-factor) + var(--cms-vpadding));
    PADDING: var(--cms-vpadding) var(--cms-hpadding);
}

.u27-form FIELDSET DIV.u27-display-input-group SPAN
{
    BACKGROUND: var(--cms-background-alt2);
    COLOR: var(--cms-color-alt2);
    DISPLAY: inline-block;
    HEIGHT: calc(25 * var(--cms-factor));
    LEFT: calc(-1 * var(--cms-separator-width));
    LINE-HEIGHT: calc(25 * var(--cms-factor));
    PADDING: 0 var(--cms-vpadding) 0 calc(var(--cms-vpadding) / 2);
    POSITION: absolute;
    TOP: calc(-25 * var(--cms-factor));
}

.u27-form FIELDSET DIV.u27-display-input-group SPAN:before
{
    CONTENT: "\25b4\00a0";
    FONT-FAMILY: "Entypo";
    SPEAK: none;
}

/* IMAGE */
.u27-form .u27-form-image-select IMG
{
    BACKGROUND: #808080 url(../../../nuos/image/ifc/bg_iframe.png) center no-repeat;
    MAX-HEIGHT: calc(250 * var(--cms-factor));
    MAX-WIDTH: min(100%, 250 * var(--cms-factor));
    OBJECT-FIT: contain;
}

.u27-form .u27-form-image-select BUTTON
{
    ALL: unset;
    CURSOR: pointer;
}

.u27-form .u27-form-image-select SPAN + SPAN,
.u27-form .u27-form-image-select INPUT,
.u27-form .u27-form-image-select BUTTON:last-child
{
    DISPLAY: none;
}

.u27-form .u27-form-image-select INPUT[data-u27-flag="1"] + BUTTON
{
    BACKGROUND: var(--cms-background);
    DISPLAY: block;
    HEIGHT: calc(25 * var(--cms-factor));
    LINE-HEIGHT: calc(25 * var(--cms-factor));
    MARGIN-TOP: calc(-25 * var(--cms-factor));
    POSITION: relative;
    TEXT-ALIGN: center;
    WIDTH: calc(25 * var(--cms-factor));
}

.u27-form FORM > :last-child
{
    TEXT-ALIGN: right;
}

/* ERROR MARKER */
@keyframes u27-form-wiggle
{
      0% { TRANSFORM: translateX(0);     }
     50% { TRANSFORM: translateX(2.5px); }
    100% { TRANSFORM: translateX(0);     }
}

.u27-form .response-error + FIELDSET > LEGEND:before
{
    ANIMATION: u27-form-wiggle 1s infinite;
    COLOR: var(--cms-color-highlight);
    CONTENT: "\27a1";
    DISPLAY: inline-block;
    FONT-FAMILY: "Entypo";
}

/* KEYWORDS */
#u27-form-tag
{
    OVERFLOW: visible;
}

#u27-form-tag > DIV
{
    DISPLAY: block;
    OVERFLOW: visible;
}

.u27-form INPUT[name="u27_set[tag][]"]
{
    BACKGROUND-IMAGE: url(../../../design/u27/hash.png);
    BACKGROUND-POSITION: left center;
    BACKGROUND-REPEAT: no-repeat;
    BACKGROUND-SIZE: auto 100%;
    PADDING-LEFT: calc(27.5 * var(--cms-factor));
}

.u27-form-tag-suggestion
{
    BACKGROUND: var(--cms-background-alt2);
    DISPLAY: none;
    MAX-HEIGHT: calc(250 * var(--cms-factor));
    OVERFLOW-X: clip;
    OVERFLOW-Y: auto;
    POSITION: absolute;
    TOP: 100%;
    WIDTH: 100%;
    Z-INDEX: 30000;
}

#u27-form-tag > DIV:focus-within .u27-form-tag-suggestion
{
    DISPLAY: block;
}

.u27-form-tag-suggestion BUTTON
{
    ALL: unset;
    BOX-SIZING: border-box;
    COLOR: var(--cms-color-alt2);
    CURSOR: pointer;
    DISPLAY: block;
    OVERFLOW: hidden;
    PADDING: 0 calc(var(--cms-hpadding) / 3 * 2);
    TEXT-OVERFLOW: ellipsis;
    WHITE-SPACE: nowrap;
    WIDTH: 100%;
}

.u27-form-tag-suggestion BUTTON:is(:focus, :hover)
{
    TEXT-DECORATION: underline;
}

.u27-form-tag-suggestion BUTTON:last-child
{
    PADDING-BOTTOM: var(--cms-vpadding);
}

/* INFO BOX */
.u27-form .u27-form-info SPAN:first-child
{
    BACKGROUND-COLOR: var(--cms-button-background);
    BORDER-RADIUS: 100%;
    COLOR: var(--cms-button-color);
    DISPLAY: inline-block;
    HEIGHT: calc(20 * var(--cms-factor));
    LINE-HEIGHT: calc(20 * var(--cms-factor));
    MARGIN-LEFT: 1ch;
    TEXT-ALIGN: center;
    TEXT-DECORATION: none;
    VERTICAL-ALIGN: baseline;
    USER-SELECT: none;
    WIDTH: calc(20 * var(--cms-factor));
}

.u27-form .u27-form-info SPAN:last-child
{
    DISPLAY: none;
}

.u27-form .u27-form-info:focus SPAN:last-child
{
    BACKGROUND: var(--cms-background);
    BORDER: var(--cms-separator-border);
    COLOR: var(--cms-color);
    DISPLAY: inline-block;
    PADDING: var(--cms-vpadding) var(--cms-hpadding);
    TEXT-DECORATION: none;
}

/* SUCCESS */
.u27-success + *
{
    MARGIN-TOP: 20px;
}

/* DATA */
.u27-form-data
{
    MARGIN-BOTTOM: var(--cms-vspacing);
}

.u27-form-data > DIV
{
    BORDER-BOTTOM: var(--cms-separator-border);
    DISPLAY: flex;
    FLEX-WRAP: wrap;
    GAP: 0 var(--cms-hpadding);
}

.u27-form-data > DIV > DIV
{
    FLEX: 1 1 calc(225 * var(--cms-factor));
    MIN-WIDTH: min(100%, 225 * var(--cms-factor));
}

.u27-form-data > DIV > DIV:first-child
{
    FONT-WEIGHT: 700;
}

.u27-form-data > DIV > DIV:first-child:after
{
    CONTENT: ":";
}

.u27-form-data > DIV > DIV:last-child
{
    FLEX-BASIS: calc(100% - calc(225 * var(--cms-factor)) - var(--cms-hpadding));
}

.u27-form-data IMG
{
    MAX-WIDTH: 100%;
}

.u27-form-data-print
{
    FLOAT: right;
}