/**
 * Floating label nad .form-control — šírka/pás sú relatívne k obalu .floating-label (nad konkrétnym inputom).
 * Voliteľné: data-fl-rail="24" (px výška horného pásu), data-fl-mid="22" (polovica „stredu“ textu v poli pri prázdne).
 */
.form-group.floating-label {
    position: relative;
    box-sizing: border-box;
    --fl-rail-height: 24px;
    --fl-input-mid: 22px;
    /* zarovnanie s bežným .form-control (Bootstrap): */
    --fl-label-left: 12px;
    --fl-rest-font-size: 14px;
    --fl-rest-color: #999;
    --fl-rest-font-weight: 400;
    --fl-float-font-size: 12px;
    --fl-float-font-weight: 400;
    --fl-float-color: #888;
    --fl-input-height: 34px;
    --fl-feedback-box: 34px;
}

.form-group.floating-label::before {
    content: '';
    display: block;
    height: var(--fl-rail-height);
    width: 100%;
}

.form-group.floating-label > .form-control,
.form-group.floating-label > input.form-control,
.form-group.floating-label > textarea.form-control,
.form-group.floating-label > select.form-control {
    position: relative;
    z-index: 1;
    background-color: #fff;
}

.floating-label__text {
    position: absolute;
    left: var(--fl-label-left);
    z-index: 2;
    pointer-events: none;
    line-height: 1.2;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    transition: top 0.22s ease, transform 0.22s ease, font-size 0.22s ease, color 0.22s ease, font-weight 0.22s ease;
}

.floating-label--instant .floating-label__text {
    transition: none !important;
}

.floating-label__text--rest {
    top: calc(var(--fl-rail-height) + var(--fl-input-mid));
    transform: translateY(-50%);
    font-size: var(--fl-rest-font-size);
    font-weight: var(--fl-rest-font-weight);
    color: var(--fl-rest-color);
}

/*
 * Registrácia / .formGroup: customz dáva .form-group margin 10+30px; + rail 24px = ~64px medzi poľami.
 * Cieľ max ~40px medzi spodkom inputu a vrchom ďalšieho: menšie marginy + nižší rail.
 */
.formGroup .form-group.floating-label {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    --fl-rail-height: 16px;
    --fl-float-top: -3px;
    --fl-label-left: 20px;
    --fl-rest-font-size: 1.2em;
    --fl-input-mid: 25px;
    --fl-float-font-size: 16px;
    --fl-input-height: 50px;
    --fl-feedback-box: 34px;
}

.formGroup .base > .form-group.floating-label:first-child {
    margin-top: 0 !important;
}

.floating-label__text--float {
    top: var(--fl-float-top, 4px);
    transform: translateY(0);
    font-size: var(--fl-float-font-size);
    font-weight: var(--fl-float-font-weight);
    color: var(--fl-float-color);
    max-height: 1.4em;
    overflow: hidden;
}

/*
 * Glyphicon: customz má .form-control-feedback { top: 7px !important } pre pole od vrchu skupiny.
 * Pri floating-label je nad inputom ešte ::before (rail) — top musí zahrnúť --fl-rail-height.
 */
.form-group.floating-label .form-control-feedback {
    top: calc(var(--fl-rail-height) + (var(--fl-input-height) - var(--fl-feedback-box)) / 2) !important;
    z-index: 3;
}