input::-ms-reveal,
input::-ms-clear {
    display: none;
}

input::-webkit-contacts-auto-fill-button,
input::-webkit-credentials-auto-fill-button {
    visibility: hidden;
    display: none !important;
    pointer-events: none;
}

input[type="password"]::-ms-reveal {
    display: none;
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active {

    -webkit-box-shadow: 0 0 0 1000px var(--white) inset !important;
    -webkit-text-fill-color: var(--dark-gray) !important;
    caret-color: #ffffff;
}

.custom-input {
    position: relative;
    width: 100%;
    box-sizing: border-box;

    .revelar-senha,
    .revelar-confirmar-senha {
        position: absolute;
        top: .875rem;
        right: 1rem;
        background: transparent;
        border: none;
        color: var(--gray);
        cursor: pointer;

        i {
            font-size: 1.25rem;
        }
    }

    .alerta {
        margin: 0;

        &.error {
            font-size: .875rem;
            color: var(--red);
            margin: .25rem;
        }
    }

    &.disabled {
        background-color: var(--light-grey);
        color: var(--grey);
        opacity: .5;
    }

    label {
        display: block;
        position: absolute;
        top: -8px;
        left: 4px;
        padding: 0 8px;
        background-color: var(--white);
        color: var(--gray);
    }

    textarea {
        height: auto;
        min-height: 3rem;
        padding-top: 16px;
        resize: vertical;
        min-height: 100px;
    }

    input, select {
        height: 48px;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background: none;
    }

    input, select, textarea {
        border: 1px solid var(--gray);
        border-radius: 4px;
        padding-left: 8px;
        outline: none;
        width: 100%;
        box-sizing: border-box;
        box-shadow: 0 0 2px var(--gray);

        &.valid {
            border: 1px solid var(--green);
            box-shadow: 0 0 2px var(--green);
        }

        &.invalid {
            border: 1px solid var(--red);
            box-shadow: 0 0 2px var(--red);
        }

        &::placeholder {
            color: rgb(200, 200, 200);
        }
    }
}

.custom-input-image {
    position: relative;
    width: 100%;
    max-width: 200px;
    /* aspect-ratio: 1 / 1; */
    border-radius: 50%;
    cursor: pointer;
    /* overflow: hidden; */
    margin: 0 auto;

    label {
        display: flex;
        flex-direction: column;
        row-gap: .5rem;
        align-items: center;
        justify-content: center;
        
        img {
            object-fit: cover;
            object-position: center;
            width: 100%;
            height: 100%;
            clip-path: circle();
            cursor: pointer;
        }
    
        span {
            cursor: pointer;
        }
    }

}

.custom-image-upload {
    position: relative;
    width: 100px;
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    cursor: pointer;
    overflow: hidden;
    transition: all .3s ease;
    opacity: 1;

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    &:hover {
        opacity: .8;
    }

    &::after {
        content: "Clique para enviar";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        transform: translate(-50%, -50%);
        color: var(--grey);
        font-size: 12px;
    }
}