/* ==========================================================
   COMMON SHADOW
========================================================== */

.shadow-box,
.box-div,
.div-header,
.div-panel {
    border-radius: .25rem;
    box-shadow: 0 0 .5em #d9d9d9;
}

/* ==========================================================
   GENERIC BOXES
========================================================== */

.shadow-box {
    text-align: center;
}

.box-div {
    text-align: center;
    background-color: ghostwhite;
    border: 1px solid powderblue;
}

/* ==========================================================
   FLEX WRAPPERS
========================================================== */

.div-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

/* ==========================================================
   HEADER PANEL
========================================================== */

.div-header {
    text-align: center;
    color: ghostwhite;
    padding: .5rem;
    margin: auto;
    border: 1px solid powderblue;
}

/* ==========================================================
   CONTENT PANEL
========================================================== */

.div-panel {
    text-align: center;
    background-color: white;
    overflow: auto;
    padding: .5rem;
    margin: auto;
    border: 1px solid darkkhaki;
}

/* ==========================================================
   ABSOLUTE CENTER CONTAINER
========================================================== */

.container4 {
    position: relative;
}

    .container4 p {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: yellow;
    }

/* ==========================================================
   CENTERING UTILITIES
========================================================== */

.center-it {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* ==========================================================
   ALERTS
========================================================== */

.failed {
    background-color: #f44336;
    color: #fff;
}

.success {
    background-color: #006600;
    color: #fff;
}

.alert-data {
    color: ghostwhite;
    letter-spacing: .03em;
}

/* ==========================================================
   WRAPPERS
========================================================== */

.wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* ==========================================================
   CLOSE BUTTON
========================================================== */

.closebtn {
    float: right;
    color: #fff;
    cursor: pointer;
    transition: color .3s ease;
}

    .closebtn:hover {
        color: #000;
    }

/* ==========================================================
   LABELS
========================================================== */

.mod-label {
    text-align: center;
}