/* -------------------------- */
/* --------- ALERTS --------- */
/* -------------------------- */  

.alert-flash {
    position: fixed;
    z-index: 100;
    top: 1rem;
    left: 50%;
    transform: translate(-50%, 0%);
    z-index: 100;
}

.alert-persist {
    display: inline-block;
    font-size: 1rem;
    color: var(--light-alpha);
    background-color: var(--dark-alpha) !important;
    border-color: var(--light-trans) !important;
    margin-bottom: 0;
}

/* ---------------------------- */
/* --------- TABLES ----------- */
/* ---------------------------- */  

.admin-element-list {
    width: 100%;
    th, td {
        text-align: center;
        padding: 0.5rem;
    }
    th {
        background-color: var(--secondary-pastel-darker);
        color: var(--lightest);
    }
    td {
        background-color: var(--white);
        border: 1px solid var(--lightest);
    }
}

/* -------------------------- */
/* --------- ASIDES --------- */
/* -------------------------- */  

.aside {
    float: right;
    border-color: transparent;
    border-style: double;
    border-width: 24px 24px 140px 24px;
    border-image: url('/assets/img/ui/bg-aside.png') 24 24 140 24 fill repeat;

    &>p { font-size: var(--small); }
}

/* ----------------------------- */
/* --------- VIGNETTES --------- */
/* ----------------------------- */  

.vignette {
    position: relative;
    margin: 0;
    padding: 0 0.5rem;
    white-space: nowrap;

    img {
        border-top-left-radius: 1rem;
        border-bottom-right-radius: 1rem;
    }

    .label {
        color: var(--primary-darker-more);
        font-weight: bold;
        text-align: center;
        line-height: 1.4;
    }

    .text-small { font-size: 1rem; }
}

/* ---------------------------------- */
/* ------ BANNER WITH SUB-MENU ------ */
/* ---------------------------------- */  

#element-banner > div {
    display: flex;
    flex-direction: column;
    justify-content: end;
    position: relative;
    min-height: 60vh;
    margin: 0;
    padding: 0;
    text-align: center;
    background-blend-mode: multiply, soft-light;
    background-position: 50% 10%;

    nav {
        margin: 0;
        padding: 0;
    }

    #left-part, #right-part { margin-top: auto; }
}

/* ---------------------- */
/* ------ TOOL TIP ------ */
/* ---------------------- */  

.hover-tooltip {
    position: absolute;
    visibility: hidden;
    z-index: 100;
    white-space: nowrap;
    color: #fff;
    text-align: center;
    font-size: var(--small);
    padding: 0.2rem 0.5rem;
    border-radius: 0.5rem;
    background-color: var(--primary-darker-more);
}

/* -------------------------------------- */
/* ------ CHARACTER PORTAITS ICONS ------ */
/* -------------------------------------- */  

.character-portrait {
    &.small { width: 28px; }
    &.medium {
        width: 48px;
        border-radius: 4px;
    }
    &.large {
        width: 64px;
        border-radius: 5px;
        box-shadow: 1px 1px 8px 2px var(--dark-alpha);
    }
}