.input{
    -moz-appearance: none; 
	-webkit-appearance: none; 
	appearance: none;
    color: var(--fore-color);
    background-color: var(--secondary-color);
    border-radius: 0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 1px solid #e5e5e5;
    caret-color: var(--main-color);
    display: block;
    min-height: 47px;
    outline: none;
    padding: 1rem;
    width: 100%;
    transition: border-color ease .25s, background-color ease .25s;
}

.input:not([readonly]):hover{
    border-color: var(--main-color);
}
.input:not([readonly]):focus{
    background-color: var(--bg-color);
    border-color: var(--main-color);
}

@media screen and (min-width: 778px) {
    .input{
        margin: 1rem 0 0;
    }
}