/* https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal2 */

/* The Modal (background) 
   Layer to cover the original page. Partially transparent.  */

  .viewport-cover-grayed-out
  {
    display:block; /* default:block or table-cell or inline-block but not flex. Since default is block, this is not needed. */
    position: absolute; /*Essential. fixed or absolute but not relative or static */
    z-index: 1; /* On top of other elements */
    left: 0; top: 0; 
    width: 100vw; 
    height: calc(100vh - (var(--titlebar_height) + var(--headerbar_height) + var(--footerbar_height) + var(--buttonbar_height))); /* Covers content area  */
    padding:0; margin:0; border:0;  /* No extra spaces */

    align-content: center; /* Vertical align - needed */
    text-align:center; /* Center is default - so not needed */
    /* Extra formatting */
    background-color: rgb(0,0,0); /* Fallback color */ 
    background-color: rgba(0,0,0,0.2); /* Black w/ opacity. Creates feedback that the background content is disabled. */
  } /* End: viewport-cover-grayed-out */

  .centred-box-with-borders
  {
    display: inline-block; /* Needed. Default is block which fills the entire width. */ 
    
    /* Extra formatting */
    padding: 12px;
    border:8px; 
    border-style: solid; 
    border-color: var(--dark_colour);
    border-radius: 10%;
    background-color:var(--light_colour);          
    max-width: 90vw;  
  }
   
  .modal-header 
  {
    padding: 2px 16px;
    background-color: var(--dark_colour);
    color:var(--light_colour);
    border-radius:20px;
  }