/* ==========================================================================
   Floating labels, shared by the auth pages (.gr-auth) and the signed-in
   pages (.gr-dash). The label rests inside the field and lifts on focus or
   once the field has a value.
   ========================================================================== */

.gr-auth .gr-float,
.gr-dash .gr-float { position: relative; }

.gr-auth .gr-float > label,
.gr-auth .gr-float .input-group > label,
.gr-dash .gr-float > label,
.gr-dash .gr-float .input-group > label {
    position: absolute;
    left: 16px;
    top: 15px;
    margin: 0;
    padding: 0;
    z-index: 4;
    pointer-events: none;
    transform-origin: left top;
    color: var(--gr-muted, #6b7a91) !important;
    font-size: .98rem !important;
    font-weight: 500;
    letter-spacing: 0;
    white-space: nowrap;
    max-width: calc(100% - 32px);
    overflow: hidden;
    text-overflow: ellipsis;
    transition: transform .16s cubic-bezier(.22, .8, .3, 1), color .16s ease;
}

.gr-dash .gr-float > label,
.gr-dash .gr-float .input-group > label { color: var(--d-muted, #6b7a91) !important; }

.gr-auth .gr-float .form-control,
.gr-auth .gr-float .form-control-solid,
.gr-dash .gr-float .form-control,
.gr-dash .gr-float .form-control-solid,
.gr-dash .gr-float select.form-control-sm {
    padding: 23px 16px 8px;
}

.gr-auth .gr-float.is-filled > label,
.gr-auth .gr-float:focus-within > label,
.gr-auth .gr-float.is-filled .input-group > label,
.gr-auth .gr-float:focus-within .input-group > label,
.gr-dash .gr-float.is-filled > label,
.gr-dash .gr-float:focus-within > label,
.gr-dash .gr-float.is-filled .input-group > label,
.gr-dash .gr-float:focus-within .input-group > label {
    transform: translateY(-9px) scale(.76);
    font-weight: 600;
}

.gr-auth .gr-float:focus-within > label,
.gr-auth .gr-float:focus-within .input-group > label { color: var(--gr-navy-600, #2456a0) !important; }

.gr-dash .gr-float:focus-within > label,
.gr-dash .gr-float:focus-within .input-group > label { color: var(--d-navy-600, #2456a0) !important; }

/* the eye button sits beside a taller field now */
.gr-auth .gr-float--group .input-group-append .btn,
.gr-dash .gr-float--group .input-group-append .btn { padding-top: 0; padding-bottom: 0; }

.gr-auth .gr-float .error,
.gr-dash .gr-float .error { margin-top: 6px; }

@media (prefers-reduced-motion: reduce) {
    .gr-auth .gr-float > label, .gr-dash .gr-float > label,
    .gr-auth .gr-float .input-group > label, .gr-dash .gr-float .input-group > label { transition: none; }
}