mark.im-caret {
    animation: 1s blink step-end infinite !important;
}

mark.im-caret-select {
    background-color: #f5f5f5;
}

@keyframes blink {
    from, to {
        border-right-color: black;
    }

    50% {
        /*border-right-color: transparent;*/
        border-right-color: #f5f5f5;
    }
}

span.im-static {
    color: grey;
}

div.im-colormask {
    padding-left: 5px;
    display: inline-block;
    border-style: groove;
    border-width: 1px;
    appearance: textfield;
    cursor: text;
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

div.im-colormask:focus-within {
    background-color: white;
}

    div.im-colormask > input, div.im-colormask > input:-webkit-autofill {
        position: absolute !important;
        display: inline-block;
        background-color: transparent;
        color: transparent;
        -webkit-text-fill-color: transparent;
        transition: background-color 5000s ease-in-out 0s;
        caret-color: transparent;
        text-shadow: none;
        appearance: textfield;
        /*border-style: none;*/
        left: 0; /*calculated*/
    }

        div.im-colormask > input:focus {
            background: white;
            outline: none;
        }

        div.im-colormask > input::selection {
            background: transparent;
        }

        div.im-colormask > input::-moz-selection {
            background: transparent;
        }

        div.im-colormask > input:-webkit-autofill ~ div {
            background-color: #f5f5f5;
        }

    div.im-colormask > div {
        color: black;
        display: inline-block;
        width: 100px; /*calculated*/
    }