/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
 /* Styling for modal window parcel shops*/
#modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 80px; /* Location of the box */
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0, 0, 0); /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
  }
  
  /* Modal-content grid container */
  #modal-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 20px 0.5fr 1.5fr 40px;
    gap: 0px 25px;
    grid-template-areas:
        ". close"
        "map1 shop"
        "map2 list"
        "map3 save";
    background-color: #ffffff;
    margin: auto;
    margin-top: 10px;
    padding: 10px 20px 20px 20px;
    border: 1px solid #353535;
    /* height: 500px; */
    width: 95%;
    max-width: 1200px;
  }
  
  /* Grid elements */
  #map {
    /* grid-area: map; */
    grid-row-start: map1;
    grid-column-start: map1; /* Start at d */
    grid-row-end: map3;
    grid-column-end: map1; /* End at e */
    height: 100%;
    width: 100%;
    max-width: 1200px;
  }

  #shop {
    grid-area: shop;
  }

  #map:empty ~ #list {
    grid-row-start: map2;
    grid-column-start: map2; /* Start at d */
    grid-row-end: map2;
    grid-column-end: list; /* End at e */
  }
  
  #list {
    grid-area: list;
    /* overflow: auto; */
    overflow-y: auto;
    max-height: 50vh;
  }
  
  #map:empty ~ #shop {
    grid-area: map1;
  }
  
  
  /* Other */
  p#selected-parcelshop {
    font-weight: bold;
  }
  
  #close {
    grid-area: close;
  }

  #save {
    grid-area: save;
  }
  
  button#close-button-modal {
    padding: 5px 12px;
    float:right;
  }

  button#save-button-modal {
    padding: 5px 12px;
    float:right;
    margin-top: 5px;
  }
  
  button#ajax-shops-search {
    margin-top: 5px;
  }
  
  .shop-name {
    font-weight: bold;
    margin: 0;
  }
  
  /* Styling for 'input' elements (parcelshop radio buttons)  in modal*/
  input.shops[type="radio"] {
    margin-right: 10px;
    transform: translateY(-12px);
  }
  
  label.shops[type="radio"] {
    display: flex;
    align-items: center;
   }
  
  input.shops[type="radio"] + label {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 5px;
    border: 2px solid #ccc;
    color: #666;
    width: 90%;
    /* height: 60px; */
    margin-bottom: 10px;
  }

  input.shops[type="radio"] + label p, input.shops[type="radio"] + label ul{
    margin: 0;
  }

  input.shops[type="radio"] + label ul{
    list-style: none;
  }
  
  input.shops[type="radio"]:hover + label {
    color: #555;
    background-color: #eee;
  }
  
  input.shops[type="radio"]:checked + label {
    background-color: #10acef;
    border-color: #10acef;
    color: #fff;
  }
  
  #input-zipcode-div {
    float:right;
  }
  input#input-zipcode {
    width: 50%;
  }
  
  table#search-field-table {
    padding-top: 0px;
  }
  
/* Mobile view */
@media all and (max-width: 600px) {
  /* Modal-content grid container */
  #modal-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 20px 0.5fr 0.15fr 0.5fr 40px;
    gap: 10px 0px;
    grid-template-areas:
        ". close"
        "map map"
        "shop shop"
        "list list"
        ". save";
    background-color: #ffffff;
    margin: auto;
    margin-top: 10px;
    padding: 10px 20px 20px 20px;
    border: 1px solid #353535;
    /* height: 500px; */
    width: 95%;
    max-width: 1200px
  }
}