/* 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:table-cell; /* 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;
      padding:0; margin:0; border:0px solid black;  /* No extra spaces */
      width: 100vw; /* height: Updated in modals.js */

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

   .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(--border_colour);
      border-radius: 10%;
      background-color:var(--light_colour);
      background-color:white;
   }

   .modal-header
   {
      padding: 2px 16px;
      background-color: var(--border_colour);
      color:var(--light_colour);
      border-radius:20px;
   }