.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top:0;
    left: 0;
    background-color: rgba(0,0,0,0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* ============================================================
   Fix AdminLTE 3 / Bootstrap 4 Card Flexbox Clearfix Bug
   ------------------------------------------------------------
   AdminLTE adds ::after { content: ""; display: block; clear: both; }
   to .card-header and .card-footer. In Flexbox, this pseudo-element
   acts as a phantom 3rd flex item, causing justify-content-between
   to push right-hand elements into the center rather than the far right.
   ============================================================ */
.card-header.justify-content-between,
.card-footer.justify-content-between {
    display: flex !important;
}

.card-header.d-flex::before,
.card-header.d-flex::after,
.card-footer.d-flex::before,
.card-footer.d-flex::after,
.card-header.justify-content-between::before,
.card-header.justify-content-between::after,
.card-footer.justify-content-between::before,
.card-footer.justify-content-between::after,
.card-header[class*="justify-content-"]::before,
.card-header[class*="justify-content-"]::after,
.card-footer[class*="justify-content-"]::before,
.card-footer[class*="justify-content-"]::after {
    display: none !important;
    content: none !important;
}

/* Reset float and negative margin on card-tools and card-title inside flex card headers */
.card-header.d-flex > .card-tools,
.card-header.justify-content-between > .card-tools,
.card-header[class*="justify-content-"] > .card-tools {
    float: none !important;
    margin-right: 0 !important;
}

.card-header.d-flex > .card-title,
.card-header.justify-content-between > .card-title,
.card-header[class*="justify-content-"] > .card-title {
    float: none !important;
    margin-bottom: 0 !important;
}