﻿.custom-authentication {
    position: relative;
    margin-bottom: 1.8rem;
}

    .custom-authentication input,
    .custom-authentication textarea {
        width: 100%;
        border: none;
        border-bottom: 2px solid #EC1C24;
        outline: none;
        padding: 16px 0 3px 0;
        background: transparent;
        transition: border-color 0.3s;
        box-shadow: none;
        font-size: 1.35rem;
        font-weight: 500;
        resize: none;
        line-height: 1.5;
    }

        .custom-authentication input:focus,
        .custom-authentication textarea:focus {
            border-color: black;
            outline: none !important;
            box-shadow: none !important;
        }

    .custom-authentication label {
        position: absolute;
        left: 0;
        top: 16px;
        font-size: 1.35rem;
        font-weight: 500;
        color: #666;
        pointer-events: none;
        transition: all 0.2s ease;
    }

    .custom-authentication input:focus ~ label,
    .custom-authentication input:valid ~ label,
    .custom-authentication textarea:focus ~ label,
    .custom-authentication textarea:valid ~ label {
        top: -12px;
        font-size: 1.25rem;
        color: #000;
        font-weight: 500;
    }

input::selection,
textarea::selection,
label::selection {
    background: #F7F7F7;
    color: inherit;
}

input:-webkit-autofill {
    background-color: #e0f7fa !important;
    transition: background-color 5000s ease-in-out 0s;
    color: #000 !important;
}
