/* page style */

html{
  height: 100%;
  margin:0px;
  padding:0px;
}

body {
  margin:0px;
  padding:0px;
  margin-top: var(--heather-height);
  height: calc(100% - var(--heather-height));  
}

/* search bar */

.map-search{
  display: grid;
  grid-template-columns: 80px 1fr 50px 5px 50px;
  padding-top: 10px;
  padding-left: 20px;
  padding-right: 20px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
.map-search .search-element{
  height: 40px;
  width: 100%;
  padding: 0 10px;
  margin: 0;
}
.map-search .user-position{
  height: 40px;
  width: 100%;
  padding: 0;
  padding-bottom: 2px;
  font-size: 19px;
  margin: 0;
}

/* map/list switcher */

.map-list-switch-button{
  position: fixed;
  width: 50px;
  height: 50px;
  top: 5px;
  right: 20px;
  border-radius: 50%;
  padding:0;
  border-style: none;
  font-size: 22px;
}

/* filters popup */

.map-filters-box{
  display: grid;
  grid-template-rows: 20px 30px 50px 70px 30px 50px 70px;
}

/* map container */

.map-style{
  height: 100%;
}

/* map popup */

.map-popup {
  position: absolute;
  background-color: white;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  outline: var(--input-color) solid 1px;
  padding: 0px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #cccccc;
  bottom: 12px;
  left: -130px;
  width: 260px;
}
.map-popup .closer {
  color:black;
  text-decoration: none;
  position: absolute;
  top: 4px;
  right: 8px;
}
.map-popup .closer:after {
  content: "✖";
}
.map-popup .content{

  padding: 0;
  
  grid-row-gap: 10px;
  grid-column-gap: 10px;

  color: inherit;
  text-decoration: inherit;
  text-align: center;
}
.map-popup .image-cont{
  background-color: var(--input-color);

  height: 80px;

  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
.map-popup .image-cont i{
  font-size: 30px;
  color:white;
}
.map-popup .image-cont img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.map-popup .info-cont-1{
  padding: 10px;
  padding-bottom: 0px;
}
.map-popup .info-cont-2{
  padding: 10px;
  font-size: small;
}

/* list container */

.map-list-style{
  height: 100%;
  overflow-X: scroll;
  overflow-y: scroll;
  padding-top: 5px;
  padding-bottom: 10px;
}

.map-list-style .no-results-msg{
  text-align: center;
  color: var(--highlight-text-color);
  font-size: large;
  margin: 50px 20px;
}

/* list */

.map-list-style .row-container{
  margin: 10px auto;
  padding: 0px 15px;

  width: 100%;
  max-width: 830px;
}

.map-list-style .a-row{
  color: inherit;
  text-decoration: inherit;
}
.map-list-style .row{
  height: 100%;

  background-color: var(--list-row-color);
  box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);

  outline: var(--input-color) solid 1px;
  border-radius: 10px;
  overflow: hidden;

  display: grid;
  grid-template-columns: 0.9fr 0.1px 2fr;

  padding: 0;
  padding-right: 20px;
  
  grid-row-gap: 10px;
  grid-column-gap: 10px;

}
.map-list-style .row:hover {
    background-color: var(--list-row-hover-color);
    transition: background-color var(--input-hover-transition-time);
}

.row .row-elem{
  padding: 0px ;

  display: flex;
  flex-direction: column;
  justify-content: space-evenly;

  text-align: center;
}

/* location image */

.row .img-elem{
  min-height:150px;

  display: flex;
  flex-direction: column;
  justify-content: space-evenly;

  position: relative;
  overflow: hidden;

  background-color: var(--input-color);
}
.row .img-elem i{
  font-size: 40px;
  color:white;
}
.row .img-elem img{
  width: 100%;
  height: 100%;
  object-fit: cover;

  position: absolute;
}

/* location name */

.row .name-elem{
  
  font-size: larger;

}

/* mobile header tweaks */

@media only screen and (max-height: 850px),
            screen and (max-width: 650px) { 
  
  body {

    --header-height-shorter:60px;

    margin-top: var(--header-height-shorter);
    height: calc(100% - var(--header-height-shorter));  
  }

  .header-fixed{

    height: var(--header-height-shorter);

  }
  .header-fixed h1{

    display: none;

  }

  .map-search{
    grid-template-columns: 60px 1fr 40px 3px 40px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .map-search .search-element, 
  .map-search .user-position{
    height: 35px;
    margin-top: 2.5px;
  }

  .ol-zoom {
    top:auto;
    bottom:40px;
 }

  @media only screen and (max-width: 830px) { 

    .back-button{
      top:55px;
      left:10px;
      height:45px;
      width:45px;
    }

    .map-list-switch-button{
      top:55px;
      right:10px;
      height:45px;
      width:45px;
    }
  }
}