*, *::after, *::before {
  box-sizing: border-box;
}

div.modal {
  cursor:move;     
}

.close-button{
  color:white;
  background:#333;
  float:right;  
}

.modal { 
  position: absolute; 
  display:inline-block;
  vertical-align:top;  
  transform: translate(-50%, -50%) scale(0);
  transition: 200ms ease-in-out;
  border: 2px solid #666;
  border-radius:6px; 
  z-index: 10;  
  background:#333;
  color:white;   
  padding:0px 15px;  
}

.modalhelp { /* HELP 50% wide*/
  position: absolute; 
  display:inline-block;  
  vertical-align:top;  
  transform: translate(-50%, -50%) scale(0);
  transition: 200ms ease-in-out;  
  left: 50%;
  top: 50%; 
  height:40vh;
  width:50%;      
  resize: both;
  overflow: auto;     
}

.modalhelp2 { /* HELP INTERFACE 100% wide*/ 
  position: absolute; 
  display:inline-block;  
  vertical-align:top; 
  transform: translate(-50%, -50%) scale(0);
  transition: 200ms ease-in-out;  
  background:#333; 
  color:white;  
  padding: 15px 70px;
  left: 50%;
  top: 78%;
  height:40vh;
  width:100%; 
  resize: both;
  overflow: auto;         
}

/* EACH MODAL REQUIRES A UNIQUE Modal-Dialog css for proper placement on screen */

.modal1 { /* USERS */  
  left: 8%;
  top: 7%; 
  height:120px;
  width:280px;  
  background:#333;
  color:white;    
}
.modal-dialog1{
  position:absolute;
  left: 8%;
  top: 7%;        
}

.modal2 { /* MINI MAPS */  
  left: 8%;
  top: 43%; 
  height:120px;
  width:280px;  
  background:#333;
  color:white; 
  overflow:hidden;      
}
.modal-dialog2{
  position:absolute;
  left: 8%;
  top: 43%;
}

.modal3 { /* STRAT MAPS */  
  left: 8%;
  top: 25%; 
  height:150px;
  width:280px;  
  background:#333;
  color:white;        
}
.modal-dialog3{
  position:absolute;
  left: 8%;
  top: 25%;        
}

.modal4 { /* CHARACTER WINDOW */  
  left: 8%;
  top: 66%; 
  height:250px;
  width:280px;  
  background:#333;
  color:white; 
  overflow:hidden;      
}
.modal-dialog4{
  position:absolute;
  left: 8%;
  top: 66%;        
}

.modal5 { /* DM SCREEN */  
  left: 50%;
  top: 50%;
  width:70vw;    
  height:46vh;
  background:#333;
  color:white;
  overflow:auto;     
}
.modal-dialog5{
  position:absolute;
  left: 50%;
  top: 50%;
}

.modal6 { /* PC RECORDS WINDOW */  
  background-image: url('img/parchment_dark.png');
  background-repeat: no-repeat;
  background-size:auto;
  background-position:center;
  background-size: 100%;
  color:black;  
  padding: 15px 70px;
  left: 50%;
  top: 50%;
  height:90vh;
  width:40vw;       
}
.modal-dialog6{
  position:absolute;
  left: 50%;
  top: 50%;        
}

.modal7 { /* DM OPTIONS WINDOW */ 
  background:#333;   
  color:white;  
  padding: 15px 70px;
  left: 45%;
  top: 10%;
  height:20vh;
  width:55vw;  
  background:#333;
  color:white;  
}
.modal-dialog7{
  position:absolute;
  left: 45%;
  top: 10%;        
}

.modal.active {
  transform: translate(-50%, -50%) scale(1);  
}

.modal-header {
  padding: 0px 5px; /*was 10px 15px */
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid black;
}

.modal-header .title {
  font-size: 15px;
  font-weight: bold;
}

.modal-header .close-button {
  cursor: pointer;
  border: none;
  outline: none;
  background: none;
  font-size: 1.25rem;
  font-weight: bold;
}

.modal-body {
  padding: 2px 5px;
}

#overlay {
  position: fixed;
  opacity: 0;
  transition: 200ms ease-in-out;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, .5);
  pointer-events: none;
}

#overlay.active {
  opacity: 0; /*changed from 1 */
  pointer-events: all;
}


/*addons */
/*
.modal-content{   
    background-color:#333;
    color:white;           
}
*/

/*
.modal-dialog{
    -webkit-transition:-webkit-transform .3s ease-out;
    -o-transition:-o-transform .3s ease-out;
    transition:transform .3s ease-out;
    -webkit-transform:translate(0,-25%);
    -ms-transform:translate(0,-25%);
    -o-transform:translate(0,-25%);
    transform:translate(0,-25%)
}

.modal-dialog{
    -webkit-transform:translate(0,0);
    -ms-transform:translate(0,0);
    -o-transform:translate(0,0);
    transform:translate(0,0)
}

*/
/* DISPLAY - Corrects modals for older screens or smaller resolutions less than 1367 pixels */
@media screen and (max-width: 1367px) {
 
  .modal1 { /* USERS */  
  left: 8%;
  top: 8%; 
  height:100px;
  width:200px;  
  }
  .modal-dialog1{
  position:absolute;
  left: 8%;
  top: 8%;        
  }

  .modal2 { /* MINI MAPS */  
  left: 8%;
  top: 54%; 
  height:120px;
  width:200px;       
  }
  .modal-dialog2{
  position:absolute;
  left: 8%;
  top: 54%;        
  }

  .modal3 { /* STRAT MAPS */  
  left: 8%;
  top: 30%; 
  height:150px;
  width:200px;        
  }
  .modal-dialog3{
  position:absolute;
  left: 8%;
  top: 30%;        
  }

  .modal4 { /* CHARACTER SHEET */  
  left: 8%;
  top: 78%; 
  height:170px;
  width:200px;       
  }  
  .modal-dialog4{
  position:absolute;
  left: 8%;
  top: 78%;        
  }

  .modal-header .title {
  font-size: 12px;
  font-weight: bold;
  }
  
}

/* DISPLAY - Differently for small screens and devices less than 1024 pixels */
@media screen and (max-width: 1024px){ 

  .modal1 { /* USERS */  
  left: 12%;
  top: 8%; 
  height:100px;
  width:200px;  
  float: left; 
  }
  .modal-dialog1{
  position:absolute;
  left: 12%;
  top: 8%;        
  }

  .modal2 { /* MINI MAPS */  
  left: 12%;
  top: 54%; 
  height:120px;
  width:200px;
  float: left;       
  }
  .modal-dialog2{
  position:absolute;
  left: 12%;
  top: 54%;        
  }

  .modal3 { /* STRAT MAPS */  
  left: 12%;
  top: 30%; 
  height:150px;
  width:200px;
  float: left;        
  }
  .modal-dialog3{
  position:absolute;
  left: 12%;
  top: 30%;        
  }

  .modal4 { /* CHARACTER WINDOW */  
  left: 12%;
  top: 78%; 
  height:150px;
  width:200px; 
  float: left;      
  }
  .modal-dialog4{
  position:absolute;
  left: 12%;
  top: 78%;        
  }

  .modal5 { /* DM SCREEN */  
  left: 50%;
  top: 50%;
  width:90vw;
  height:30vh; /* this must stay this size or the zoom can't get to the corners of the image*/
  resize: both;
  overflow: auto;
  background:#333;
  color:white;       
  }
  .modal-dialog5{
  position:absolute;
  left: 50%;
  top: 50%;        
  }

  .modal6 { /* PC RECORDS WINDOW */  
  background-image: url('img/parchment_dark.png');
  background-repeat: no-repeat;
  background-size:auto;
  background-position:center;
  background-size: 100%;
  color:black;  
  padding: 15px 70px;
  left: 50%;
  top: 50%;
  height:60vh;
  width:50vw;      
  }
  .modal-dialog6{
  position:absolute;
  left: 50%;
  top: 50%;        
  }

  .modal-header .title {
  font-size: 12px;
  font-weight: bold;
  }  

}