﻿
.account__login--input {
    outline: none;
    border: none;
    border-bottom: 1px solid #333;
    color: #333;
    padding: 10px 5px 0 0;
    font-weight: 500;
    font-size: 1.2em;
    border-radius: 0;
}

label.error {
    display: block;
    font-weight: 500;
    padding: 0px 20px;
    font-size: 1em;
}
label {
    position: relative;
}

/*.account__login--input::before {
    content:'';
    position:absolute;
    left:0;
    top:12px;
    width:24px;
    height:24px;
    background:url(../img/other/invalid.png);
    background-size:cover;
}*/
     
.account__login--input.error {
    border-color: #e74c3c;
}
.account__login--input.noError {
    border-color: #2ecc71;
}
/*
.input_error {
    border-color: #e74c3c;
}

.input_noError {
    border-color: #2ecc71;
}

.floating-label-group {
    position: relative;
    margin-top: 15px;
    margin-bottom: 25px;
}

    .floating-label-group .floating-label {
        font-size: 13px;
        color: #cccccc;
        position: absolute;
        pointer-events: none;
        top: 9px;
        left: 12px;
        transition: all 0.1s ease;
    }

    .floating-label-group input:focus ~ .floating-label,
    .floating-label-group input:not(:focus):valid ~ .floating-label {
        top: -15px;
        bottom: 0px;
        left: 0px;
        font-size: 11px;
        opacity: 1;
        color: #404040;
    }
    */


.account__login--input.error ~ label.error {
    /*border:1px solid red;*/
}

label.error::before {
    content: '';
    position: absolute;
    right: 0;
    top: 3px;
    width: 15px;
    height: 15px;
    background: url(../img/other/invalid.png);
    background-size: cover; 
}