/*
|--------------------------------------------------------------------------
| Page Loader
|--------------------------------------------------------------------------
*/

.page-loader{

    position:fixed;

    inset:0;

    background:rgba(255,255,255,.85);

    z-index:999999;

    display:flex;

    justify-content:center;

    align-items:center;

    transition:opacity .25s ease;

}

.page-loader.hidden{

    opacity:0;

    visibility:hidden;

}

<style>
/* ============================================================
   APPLICATION MODAL - SCROLLABLE
============================================================ */

#applicationModal .modal-dialog {
    max-height: calc(100vh - 2rem);
}

#applicationModal .modal-content {
    max-height: calc(100vh - 2rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#applicationModal .modal-header {
    flex-shrink: 0;
}

#applicationModal .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 1rem;
}

#applicationModal .modal-footer {
    flex-shrink: 0;
    background: var(--bs-body-bg);
    border-top: 1px solid var(--bs-border-color);
}

/* Slightly tighter on smaller screens */
@media (max-height: 800px) {

    #applicationModal .modal-dialog {
        margin-top: .5rem;
        margin-bottom: .5rem;
        max-height: calc(100vh - 1rem);
    }

    #applicationModal .modal-content {
        max-height: calc(100vh - 1rem);
    }
}
</style><style>
/* ============================================================
   APPLICATION MODAL - SCROLLABLE
============================================================ */

#applicationModal .modal-dialog {
    max-height: calc(100vh - 2rem);
}

#applicationModal .modal-content {
    max-height: calc(100vh - 2rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#applicationModal .modal-header {
    flex-shrink: 0;
}

#applicationModal .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 1rem;
}

#applicationModal .modal-footer {
    flex-shrink: 0;
    background: var(--bs-body-bg);
    border-top: 1px solid var(--bs-border-color);
}

/* Slightly tighter on smaller screens */
@media (max-height: 800px) {

    #applicationModal .modal-dialog {
        margin-top: .5rem;
        margin-bottom: .5rem;
        max-height: calc(100vh - 1rem);
    }

    #applicationModal .modal-content {
        max-height: calc(100vh - 1rem);
    }
}
</style>

/*==================================================
  Settings Cards
==================================================*/

.settings-card{
    transition:all .25s ease;
    cursor:pointer;
}

.settings-card:hover{

    transform:translateY(-6px);

    box-shadow:0 .75rem 1.5rem rgba(0,0,0,.12)!important;

}

/* Sidebar Brand */

.sidebar-brand .brand-text{

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    max-width: 170px;

    display: inline-block;

    vertical-align: middle;

}

.modal-backdrop.show{

    background:

        linear-gradient(

            rgba(0,0,0,.55),

            rgba(0,0,0,.55)

        ),

        url('<?= ASSETS_URL ?>/images/backgrounds/login-bg.jpg')

        center center/cover no-repeat;

    opacity:1;

}

.modal-content{

    border:0;

    border-radius:12px;

    box-shadow:
        0 20px 50px rgba(0,0,0,.25);

}

#generatedPassword{

    font-family:Consolas, monospace;

    font-size:15px;

    font-weight:600;

    letter-spacing:.5px;

}