/***********
1. Colors
***********/

:root {
    --color-nice-blue       : #0f70af;
    --color-pale-olive-green: #a3cb93;
    --color-blue-grey       : #6b95b0;
    --color-light-grey-green: #afd69e;
    --color-light-grey      : #d9edd1;
    --color-turtle-green    : #6db74e;
    --color-faded-red       : #de444b;
    --color-white           : #ffffff;
    --color-steel           : #738896;
    --color-twilight-blue   : #084e7c;
    --color-box-shadow      : rgba(145, 147, 160, 0.25);
    --color-soft-olive-green: #ebf6e7;

    --font-400: 'Poppins-Regular', sans-serif;
    --font-500: 'Poppins-Medium', sans-serif;
    --font-600: 'Poppins-SemiBold', sans-serif;
    --font-700: 'Poppins-Bold', sans-serif;
}

.custom-entry {
    width: 100%;
    height: 50px;
    overflow: hidden;
    position: relative;
    font-size: 14px;
    font-family: var(--font-500);
}
.custom-entry__input {
    width: 100%;
    height: 100%;
    border-radius: 5px;
    border: 1px solid var(--color-steel);
    padding: 4px 20px;
    outline: none;
    color: var(--color-steel);
    font-weight: inherit;
    transition: all ease-out 300ms;
    background-color: var(--color-white);
    font-family: inherit;
}
.custom-entry__input:focus {
    padding: 4px 19px;
    border-width: 2px;
}
.custom-entry__input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: var(--color-blue-grey);
    opacity: 1; /* Firefox */
}
.custom-entry__input:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: var(--color-blue-grey);
}
.custom-entry__input::-ms-input-placeholder { /* Microsoft Edge */
    color: var(--color-blue-grey);
}
.custom-entry__label {
    position: absolute;
    left: 20px;
    top: calc(50% - 9px);
    color: var(--color-nice-blue);
    opacity: 0;
    pointer-events: none;
    transition: all ease-out 300ms;
}


.custom-entry--fill .custom-entry__input{
    padding-top: 20px;
}
.custom-entry--fill .custom-entry__label{
    opacity: 1;
    top: 6px;
}


.custom-entry--error .custom-entry__input{
    border-color: var(--color-faded-red);
    padding: 4px 19px;
    border-width: 2px;
}
.custom-entry--error.custom-entry--fill .custom-entry__input{
    padding-top: 20px;
}
.custom-entry--error .custom-entry__label{
    color: var(--color-faded-red);
}
.custom-entry--error .custom-entry__input::placeholder {
    color: var(--color-faded-red);
    opacity: 0.8;
}
.custom-entry--error .custom-entry__input:-ms-input-placeholder {
    color: var(--color-faded-red);
}
.custom-entry--error .custom-entry__input::-ms-input-placeholder {
    color: var(--color-faded-red);
}

/* PASSWORD TYPE */

.custom-entry--password {
    position: relative;
}
.custom-entry--password .custom-entry__input {
    padding-right: 42px;
}
.custom-entry--password .custom-entry__visibility {
    width: 30px;
    height: 30px;
    position: absolute;
    top: 10px;
    right: 12px;
    border: none;
    background-color: transparent;
    border-radius: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    cursor: pointer;
}
.custom-entry--password .custom-entry__visibility::after {
    content: "";
    width: 25px;
    height: 17px;
    display: block;
    background-color: transparent;
    background-image: url('/img/svg/eye.svg');
}

/* TEXTAREA */
.custom-entry.custom-entry__textarea {
    height: 120px;
}
.custom-entry.custom-entry__textarea .custom-entry__input {
    padding: 16px 20px;
}
.custom-entry--fill.custom-entry__textarea .custom-entry__input {
    padding-top: 20px;
}
.custom-entry.custom-entry__textarea .custom-entry__label {
    top: 18px;
}
.custom-entry--fill.custom-entry__textarea .custom-entry__label{
    top: 6px;
}
.custom-entry__counter {
    position: absolute;
    right: 8px;
    bottom: 4px;
    font-size: 12px;
    background: rgba(255, 255, 255, 0.3);
    user-select: none;
    pointer-events: none;
}