/* (A) errababu BOX */
.errababu {
    /* (A1) FONT & COLORS */
    font-size: 14px;
    color: #fff;
    background: #ee583b;
    /* (A2) DIMENSIONS */
    padding: 5px;
    border-radius: 5px;
    max-width: 600px;
    z-index: 10001;
    text-align:center;
}

    /* (B) USE ::AFTER TO CREATE THE "CALLOUT" */
    .errababu::after {
        display: block;
        width: 0;
        content: "";
        border: 15px solid transparent;
        right: -13px !important
    }

    /* (C) "CALLOUT" DIRECTIONS */
    .errababu.up::after {
        border-bottom-color: #ee583b;
        border-top: 0;
    }

    .errababu.down::after {
        border-top-color: #ee583b;
        border-bottom: 0;
    }

    .errababu.left::after {
        border-right-color: #ee583b;
        border-left: 0;
    }

    .errababu.right::after {
        border-left-color: #ee583b;
        border-right: 0;
    }

/* (D) POSITION THE CALLOUT */
.errababu {
    position: relative;
    margin: 5px;
}

    .errababu::after {
        position: absolute;
    }

    .errababu.up::after {
        top: -15px;
        left: calc(50% - 15px);
    }

    .errababu.down::after {
        bottom: -15px;
        left: calc(50% - 15px);
    }

    .errababu.left::after {
        left: -15px;
        top: calc(50% - 15px);
    }

    .errababu.right::after {
        right: -15px;
        top: calc(50% - 15px);
    }