/* 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) )); /* 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. */
    background-color: rgba(255,255,240, 0.6); /* Ivory 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(--darker_background);
    max-width: 90vw;  
  }

@media screen and (max-width: 768px) 
{
    .centred-box-with-borders 
    {
        position: fixed;

        left: 5vw;
        top: 5vh;

        width: 90vw;
        max-width: 90vw;

        height: 80vh;
        max-height: 80vh;

        box-sizing: border-box;
        overflow: hidden;
    }  
  }    
   
  .modal-header 
  {
    padding: 2px 16px;
    background-color: var(--dark_colour);
    color:var(--light_colour);
    border-radius:20px;
  }

  /* Extra */

          .small-button
        {
            position: absolute; 
            top: 40px; 
            right: 10px; 
            height: 30px;
            width: 30px;
            background-color:rgba(255, 255, 255, 0.7);
            border: 2px solid; 
            border-radius: 10px;
            cursor: pointer;
            padding: 4px;
        }

  .photo-modal
  {
    /* max-height: 80vh; */
    height: 80vh; 

    display: flex;
    flex-direction: column;

    overflow: hidden;
    /* background-color:blueviolet; */
  }    
  
  #photoContainer
  {
    flex: 1;                 /* Takes remaining space */
    overflow-y: auto;        /* Vertical scrollbar */
    overflow-x: hidden;
    /* background-color: aqua; */
    /* border: 1px solid; */

    margin: 10px 0;
    padding-right: 8px;
  }