/*
    Jussi - Brastemp-next.
    Autor: Vinícius Pereira Zebral (vinicius.pereira@jussi.com.br).
    Data: 14/05/2018.
    Descrição: Component Button - CSS.
*/


.box-error{
    width: 100%;
}

.input-container .input-text{
    width: 100%;
    margin: 0;
}

.input-text {
    width: 100%;
    height: 50px;
    background-color: var(--white-two);
    border: 1px solid transparent;
    transition: 0.45s ease-in-out;
    cursor: text;
    position: relative;
    -o-object-fit: contain;
       object-fit: contain;
    font-family: Soleto;
    font-size: 14px;
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: left;
    color: var(--black);
    margin: .67em 0;
    padding: 0 20px;
    outline: none;
}

::-webkit-input-placeholder {
    color: var(--slate-grey);
}

:-ms-input-placeholder {
    color: var(--slate-grey);
}

::-ms-input-placeholder {
    color: var(--slate-grey);
}

::placeholder {
    color: var(--slate-grey);
}

.input-text:hover,
.input-text:focus,
.input-text:active {
    background-color: var(--white);
    border: 1px solid var(--squash);
}

.input-text:focus,
.input-text:active {
    cursor: auto;
}

.input-text::-webkit-input-placeholder {
    object-fit: contain;
    font-family: Soleto;
    font-size: 14px;
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: left;
    color: var(--slate-grey);
    opacity: 1;
    transition: 0.45s linear;
}

.label-input-text {
    font-family: Soleto;
    font-size: 12px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: left;
    color: var(--slate-grey);
    position: relative;
    top: 25px;
    opacity: 0;
    transition: 0.45s cubic-bezier(0.13, 1.43, 1, 1);
    padding: 0;
    margin: 0 0 -10px;
}

.input-container {
    display: grid;
    padding: 5px 0;
    position: relative;
    margin: .67em 0;
}

.input--has-error {
    border-bottom: 2px solid #ff0000!important;
}

.input__error-message {
    color: #ff0000;
    margin: 0;
    font-size: 12px;
    text-align: left;
    margin-top: 5px;
}

.input__error-icon {
    position: absolute;
    top: 50%;
    right: 22px;
    margin-top: -15px;
    z-index: 1;
}