@media screen {
    .better-validity-tooltip {
        cursor: pointer;

        color: #FF3329;
        background: #FFF;

        font-weight: bold;
        text-transform: uppercase;
        font-size: 0.75em;
        line-height: 1;

        padding: 0.5em;

        border: 1px solid;
        border-radius: 0.25em;

        user-select: none;

        opacity: 0.9;
        transform: translateY(1px);

        transition: 0.3s ease-out;
        transition-property: transform, opacity;
        transform-origin: 1em 0;
    }

    .better-validity-tooltip[aria-hidden=true] {
        opacity: 0;
        transform: translateY(1em);
    }

    .better-validity-tooltip:before,
    .better-validity-tooltip:after {
        content: '';
        width: 0;
        height: 0;
        display: block;
        position: absolute;
        bottom: 100%;
    }

    .better-validity-tooltip:before {
        border: 6px solid transparent;
        border-bottom-color: inherit;
    }

    .better-validity-tooltip:after {
        border: 5px solid transparent;
        border-bottom-color: #FFF;
        margin-left: 1px;
    }
}
