/*
 Theme Name:   Stowe Child for Institution Cemetery 
 Description:  Developed by DXG for CT Humanities
 Author:       Natalie Lacroix - https://dxgroup.core.uconn.edu
 Template:     cornerstone
 Version:      1
*/
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
 /* Map container */
 :root {
    --background-color: #163347;
}
#map {
    height:calc(100vh - 92px)!important;
    width:100%;
  }
  
  /* Map Popup */
  #map-popup {
    position: absolute;
    background-color: rgb(237, 240, 242);
    left: 0%;
    top: 0%;
    z-index: 20;
    width: 40%;
    height: 100%;
    translate: -50vw;
    box-shadow: 10px 0px 20px rgba(0, 0, 0, 0.25);
  }
  
  .mapboxgl-popup-content {
    padding: 0;
    margin: 0;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    max-width: 220px;
    border-radius: 10px !important;
    text-align: center !important;
    box-shadow: 0 0 7px rgba(0, 0, 0, .5) !important;
  }
  
  .mapboxgl-popup-content p, .mapboxgl-popup-content h3 {
    margin-bottom: 0px !important;
  }
  
  .pop-up-image {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-size: cover;
    background-position: center center;
    margin-bottom: 10px;
  }
  
  .mapboxgl-popup-content .mapboxgl-popup-close-button {
    font-size: 25px;
    color: #000;
    background: rgba(255,255,255,0.3);
    border-radius: 0px 10px 0px 30px;
  }

  .mapboxgl-popup-close-button {
    position: absolute !important;
    top: 5px !important;
    right: 5px !important;
    z-index: 9999 !important;
    padding:0px 8px;
}

    .mapboxgl-popup-content .mapboxgl-popup-close-button:hover{
    border:none;
    background: rgba(255,255,255,0.8);
    }
  
  .mapboxgl-popup-content a {
    color: #fff!important;
    background-color: #06141E;
    text-decoration: none;
    padding: 10px;
    border-radius: 5px;
    width: 100%;
    margin-top: 10px;
    letter-spacing:1px;
}

  .mapboxgl-popup {
    z-index: 100;
  }

  .mapboxgl-popup-content a:hover{
    text-decoration: underline;;
  }
  
  /* Filters */
  .filters {
    background-color: #fff;
    height: 100%;
    padding: 10px;
    border-radius: 10px;
  }
  
  .filter-tags {
    background-color: rgb(237, 240, 242);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 22;
    width: 100%;
    height: 100%;
    box-shadow: 10px 0px 20px rgba(0, 0, 0, 0.25);
  }
  
  #search-bar {
    width: 300px;
    padding: 10px;
    color: #6E6E6E;
    border: none;
    border-radius: 10px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, .25);
  }

  #search-form{
    margin-right:20px;
  }

  #search-bar::placeholder{
    color:#3d3d3d
  }
  
  .filter-button {
    background-color: white;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 5px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, .25);
  }

  .checkbox-contain {
    display: block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  input[type="text"] {
    font-size: 12px;
  }
  
  select {
    font-size: 14px;
  }
  
  input::placeholder {
    opacity: 0.5;
    color: #6E6E6E;
    font-size: 12px;
  }
  
  @media screen and (min-width: 960px) {
    .filters {
      position: sticky;
      top: 20px;
      min-width: 220px;
    }
  }
  
  @media screen and (max-width: 500px) {
    #map-popup {
      width: 100%;
    }
  }
  
  @media screen and (max-width: 700px) {
    .pop-up-container {
      flex-direction: column;
    }
  
    #search-bar {
      width: 200px;
    }
  }
  
  /*marker*/
  .marker-red {
    background-image: url('http://institution-cemeteries.dxgdev.info/wp-content/uploads/2025/05/mapbox-icon-beige.png');
    background-size: cover;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
}

.marker-red-clicked {
    filter: brightness(100);
    width: 50px;
    height: 50px;
}

/*affiliated cemetery*/
.affiliated-cemetery{
    background:#fff;
    border-radius:10px;
    text-align:center;
    color:#06141E;
    padding:10px;
    margin-bottom:15px;
    height:max-content;
}

.affiliated-cemetery a{
    background:#06141E;
    width:100%;
    border-radius:5px;
    color:#fff!important;
    letter-spacing:1px;
    display:block;
    padding:10px;
}

.affiliated-cemetery img{
    border-radius:5px 5px 0px 0px;
}

@media (min-width: 768px) {
    .related {
        width:100%;
        grid-template-columns: repeat(auto-fill, 49%);
        display: grid;
        justify-content: space-between;
    }
}

@media (min-width: 992px) {
    .related {
        grid-template-columns: repeat(auto-fill, 32%);
        display: grid;
        justify-content: space-between;
    }
}

/*single page*/
.story-category-wrap{
    border-radius:100px;
    padding:0px 10px;
    margin-bottom:10px;
    width:max-content;
    background-color:#A1C3DB;
    color:var(--background-color);
    font-style:italic;
    margin-right:10px;
}

.cemetery-numbers{
    display:flex;
    flex-wrap:wrap;
}

#prebuilt-area{
  color:#fff!important;
}

.cemetery-details h3{
	color:#000;
}

.cemetery-details p{
	margin-bottom:5px;
}