/*
Links
*/

.overlay-wrapper a{
  color:#1d7e05;
  text-decoration:none;
}
 
.overlay-wrapper a{
  text-decoration:underline;
}



  /* 
  
  Overlays
  
  */
  
  
  .overlay-wrapper {
    -webkit-animation: fadeIn 0.5s;
      animation: fadeIn 0.5s;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000;
  
    display: flex;
  
    justify-content: center;
    align-items: center; 
  
    /*pointer-events: none;*/
    cursor: default;
  
    
  }
  
  .overlay-innerwrap {
    max-width:  468px; /* 468px;  use media tags here? 468 is too big for iphone */
    width: 100%;
    border-radius: 0.3rem;
    font-family:arial;
    font-size:1em;
  
    border:solid 1px white;
    background-color: #343434;
    color:white;
    padding:1rem;
  }
  
  /* make an adjustment for very narrow devices */
  @media (max-width:475px)  { 
    .overlay-innerwrap {
      max-width:  340px; /* should do this different probably */
      width: 90%;
    }
  
    .left-content{
      flex: 0.4 0  0px;
    }
  
    
  }
  
  
  
  .overlay-header {
    display:flex;
    justify-content: space-evenly;
    align-items: center;
    border-bottom:solid 1px white;
    margin-bottom:1rem;
    padding-bottom:1rem;
  }
  
  .overlay-title {
    flex-grow:6;
    text-transform: uppercase;
    letter-spacing: 0.2em;
  
    font-weight: 600;
    font-size: 1.3rem;
    line-height: 1.25rem;
    text-align: center;
    text-indent:1.75rem;
  
    color:rgb(143, 143, 143);
  
  
  }
  
  .overlay-close{
    flex-grow:1;
    justify-self: end;
    display: flex;
    height: 1.75rem;
    justify-content:center;
  
  }
  
  .overlay-close svg {
    cursor: pointer;
  
  }
  
  
  .overlay-body {
  
  }

  .overlay-body>div {
    margin:0.8rem 0.5rem;
  } 



  

/* 
hidden for flex
with fade in
*/

@-webkit-keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
  }
  
  @keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
  }
  
  .hidden {
    display:none !important;
  
  }
  

  
  
  /*
  message -- temp
  */
  
  
  .message-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
  
    display: flex;
  
    justify-content: center;
    align-items: center; 
  
    cursor: default;
  
    
  }
  
  .message-innerwrap {
    max-width:  468px; /* 468px;  use media tags here? 468 is too big for iphone */
    width: 100%;
    border-radius: 0.3rem;
    font-family:arial;
    font-size:1em;
  
    border:solid 1px white;
    background-color: #343434;
    color:white;
    padding:1rem;
    text-align: center;
  
  
  }