



/* -------------------------------------------------------------------------------- */







.alert-dismissible .btn-close
{
    padding-top: 1rem;
    padding-right: 1rem;
    padding-bottom: 1rem;
    padding-left: 1rem;

    margin-top: .25rem;
}


/*
Thanks ChatGPT.

Prompt> 
    Using just CSS, I want to create a "toast" style message DIV that adheres to the following:

    * Appears at the top of the visible window, regardless of scroll position of the page.
    * Content can scroll below it.
    * Has a width of 500px;
    * Is horizontally centred.
*/
.custom-toast 
{
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 500px;
    z-index: 99000; /* Needs to be greater than #full-overlay */

    /* background: #333;
    color: white;
    padding: 1em;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    border-radius: 4px; */
}

.is-mobile .custom-toast
{
    width: 95%;
}











/* -------------------------------------------------------------------------------- */





/* (A) FULLSCREEN OVERLAY */
#full-overlay
{
    /* (A1) COVER ENTIRE WINDOW */
    position: fixed;
    
    top: 0; 
    left: 0; 
    
    z-index: 9999;  /* Needs to be high enough to overlay the slide in menu. */
    
    width: 100vw; 
    height: 100vh;

    /* (A2) BACKGROUND */
    /* background: rgb(255, 255, 255, 0.3); */
    background: rgb(173, 216, 230, 0.3);
    backdrop-filter: blur(5px);

    /* (A3) CENTER CONTENT */
    display: flex;
    justify-content: center;
    align-items: center;

    /* (A4) HIDE OVERLAY BY DEFAULT */
    opacity: 0; visibility: hidden;
    transition: opacity 0.2s;
}


#full-overlay-inner-text
{
    font-size: 2em;
    font-weight: bold;
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    min-width: 500px;
    text-align: center;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/* (B) SHOW OVERLAY */
#full-overlay.show 
{
    opacity: 1; 
    visibility: visible;
}




/* (X) NOT IMPORTANT */
#full-overlay-test /*button*/
{
    color: #fff; background: #1a5fe1; 
    padding: 10px; border: 0; cursor: pointer;
}

/* (X) NOT IMPORTANT */
/* body{background: url(https://images.unsplash.com/photo-1546523766-d3847411d9eb?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDIyNzk4Njl8&ixlib=rb-4.0.3&q=85)}
#cbwrap{background:rgba(255,255,255,.9);width:600px;padding:30px;border-radius:10px}
*{box-sizing:border-box;font-family:arial,sans-serif}
body{padding:0;margin:0;border:0;min-height:100vh;display:flex;justify-content:center;align-items:center;background-size:cover;background-position:center;backdrop-filter:blur(10px)}
#cbtitle{margin:0 0 30px;padding:0;text-transform:uppercase}
#cbinfo{margin-top:30px;padding-top:15px;border-top:1px solid #ddd;font-size:13px;font-weight:700}
#cbinfo a{text-decoration:none;padding:5px;color:#fff;background:#a91616} */





















/* -------------------------------------------------------------------------------- */



.standard-management-modal
{
    width: 800px;
}
