/*********      ref: https://www.florin-pop.com/blog/2017/08/css3-floating-label/                   *********/

.form-group {
    position: relative;
    padding: 20px 0;
    max-width: 100%;
}


    .form-group .FixInput {
        border: none;
        color: #333;
        display: block;
        font-size: 14px;
        padding: 10px 0 0 0;
        width: 100%;
    }

    .form-group .inputDDL,
    .form-group input[type=text],
    .form-group input[type=password] {
        border: none;
        border-bottom: 1px solid #9e9e9e;
        color: #333;
        display: block;
        font-size: 14px;
        margin: 10px 0 0 0;
        width: 100%;
        height: 20px;
        background: none;
    }


    .form-group label {
        color: #9e9e9e;
        font-size: 14px;
        position: absolute;
        top: 0;
        left: 0;
        pointer-events: none;
        transform: translateY(30px);
        transition: all 0.2s ease-in-out;
        font-weight: 600;
    }

    .form-group .form-check label {
        color: #9e9e9e;
        font-size: 14px;
        position: absolute;
        top: 0;
        left: auto;
        pointer-events: auto;
        transform: none;
        font-weight: 600;
    }

    .form-group input:valid,
    .form-group .inputDDL,
    .form-group input:focus {
        border-bottom-color: #9e9e9e;
        outline: none;
    }

        .form-group input:valid + label,
        .form-group .FixLabel,
        .form-group input:focus + label {
/*            color: #9e9e9e;*/
            font-size: 14px;
            transform: translateY(0);
            color: #1D1D1B;
/*            font-size: 12px;*/
        }