/** 
 *  Created on : Dec 1, 2022, 12:26:52 PM
 *  Author     : Peter J.J. Bakker <peter@antenna.nl>
 * 01-12-2022 (css moved from mapCooplin2.php to here)
 * 02-12-2022 ()
 * 05-12-2022 ()
 * 07-12-2022 ()
 * 08-12-2022 ()
 * 09-12-2022 ()
 * 11-01-2023 ()
 * 10-02-2023 ()
 * 24-02-2023 ()
 * 25-02-2023 ()
 * 03-03-2023 ()
 * 09-03-2023 ()
 * 10-03-2023 ()
 * 13-03-2023 ()
 * 14-03-2023 ()
 * 29-03-2023 ()
 * 03-04-2023 ()
 * 06-02-2025 ()
 */

/***** Style for all media *****/
body {
}

.closeMoreInfo {
  display: none;
  font-size: 3em;
  font-weight: bold;
  text-align: right;
  color: #C03810;
}

/***** Responsive Style for Mobiles *****/
@media screen and (max-width : 1000px) {
  body {
    max-width: 100%;
    margin: 0px auto 0px auto;
  }
  h1, h2 {
  }
  h2 {
    margin-top: 20px;
    margin-bottom: 20px;
    overflow-wrap: break-word;
  }
  h3, h4 {
  }
  #overallContainerHeader,
  #overallContainer {
    width: 100%;
  }
  #overallContainerHeader {
    max-height: 100px;
  }
  header h2,
  #informationAreaHeader h2,
  #informationAreaHeader p {
    display: inline;
  }

  #filterButton, #mapButton, #listButton {
    font-size: 1.5em;
    font-weight: bold;
    cursor: pointer;
  }
  #filterButton {
    color: #413c39;
  }
  #mapButton {
    color: #C03810;
  }
  #listButton {
    color: #413c39;
  }
  #overallContainer {
  }
  #filterAreaHeader,
  #filterArea {
    display: none;
  }
  #filterAreaHeader {
    width: 20%;
  }
  #filterArea {
    width: 100%;
  }
  #filterForm {
    width: 100%;
  }
  #filterArea label {
  }
  #filterArea input {
  }
  #filterArea input[type="checkbox"] {
    /*padding: 3em;*/
  }
  #filterForm input[type="text"] {
    padding: 0 5px;
  }
  #filterArea h4 {
    margin-bottom: 0;
  }
  .getHelpText {
    color: #C03810;
    font-weight: bold;
    cursor: pointer;
  }
  .searchField {
    width: 80%;
  }
  #filterForm input {
    cursor: pointer;
  }
  #informationAreaHeader,
  #informationArea {
    flex: auto;
  }
  #informationAreaHeader h2 {
    display: none;
  }
  #informationArea {
    max-width: 100%;
  }
  #mapAndShortDetailsPart {
    display: inline-flex;
    width: 100%;
  }
  #mapBlock {
    z-index: 2;
    width: 100%;
    height: 600px;
    max-height: 70vh;
    margin: 0;
  }
  #shortDetailsBlock {
    display: flex;
    flex-direction: column;
    padding: 10px;
    width: 100%;
    background-color: #F6F2EB;
    display: none;
 }
  #shortDetailsBlock td {
    vertical-align:top;
  }
  .closeMoreInfo {
    display: block;
  }
  #fullDetailsPart {
    display: none;
    flex-direction: column;
    width: 100%;
    overflow-y: auto;
    height: 100%;
  }
  .fullAddress {
    background-color: #F6F2EB;
    margin: 5px 0px 10px 0px;
  }
  .communityInfo {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    background-color: #F6F2EB;
    margin: 15px;
  }
  .communityImage img {
    width: 100%;
    height: auto;
  }
  .communityName {
  }
  .someCommunityDetails {
    margin-top: -5px;
    flex: 70%;
  }
  .someCommunityDetails p {
    margin-top: 0em;
    margin-bottom: 0.5em;
  }
  .clearFilters {
    background-color: #C03810;
    color: white;
    border: none;
    font-size: 1.1em;
    height: 48px;
    width: 75%;
    cursor: pointer;
  }
  .clearFilters:hover {
    border: 0.5px solid #413c39;
  }
  .moreInfo {
    color: #C03810;
    font-style: italic;
    border: none;
    cursor: pointer;
  }
  .heremoreInfo {
    margin: 15px;
  }
  .flex-container, 
  .flexContainer {
    display: flex;
    flex-wrap: nowrap;
  }
  .flex-container > div, 
  .flexContainer > div {
    margin: 0 0 0 10px;
  }

} /* Style for Mobiles */

/***** Responsive Style for Computers *****/
@media screen and (min-width : 1001px) {
  body {
  }
  h1, h2 {
  }
  h2 {
    font-size: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    overflow-wrap: break-word;
  }
  h3, h4 {
  }
  #overallContainerHeader,
  #overallContainer {
    width: 100%;
    font-size: 18px;
    line-height: 22.58px;
  }
  #overallContainerHeader {
    max-height: 100px;
  }
  header h2,
  #informationAreaHeader h2,
  #informationAreaHeader p {
    display: inline;
  }

  #filterButton, #mapButton, #listButton {
    font-weight: bold;
    cursor: pointer;
  }
  #filterButtonSpan {
    display: none;
  }
  #mapButton {
    color: #C03810;
  }
  #listButton {
    color: #413c39;
  }
  
  #overallContainer {
    max-height: 600px;
  }
  #filterAreaHeader,
  #filterArea {
    width: 20%;
  }
  #filterArea h4 {   
    margin-bottom: 0;
    margin-top: 0;
  }
  .getHelpText {
    color: #C03810;
    font-weight: bold;
    cursor: pointer;
  }
  .searchField {
    width: 80%;
  }

  #filterForm {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
  }
  #filterForm h4 {
    margin-bottom: 0;
    margin-top: 1.5em;
  }
  #filterForm p {
    margin-bottom: 1em;
    margin-top: 1em;
  }
  #filterForm label {
    display: initial;
  }
  #filterForm input[type="text"] {
    padding: 0 5px;
  }
  #filterForm input:first-of-type {
    /*cursor: pointer;*/
  }
  #filterForm div:first-of-type {
    margin-top: 1em;  
  }

  #informationAreaHeader,
  #informationArea {
    flex: auto;
  }
  #informationArea {
    max-width: 950px; /* TIJDELIJK, BETER: % */
  }
  #mapAndShortDetailsPart {
    display: inline-flex;
    width: 100%;
  }
  #shortDetailsBlock {
    margin: 0 0 0 10px;
    padding: 0 10px;
    max-width: 450px;
    background-color: #F6F2EB;
    overflow-y: auto;
  }
  #shortDetailsBlock td {
    vertical-align:top;
  }
  #mapBlock {
    z-index: 2;
    width: 500px;
    height: 600px;
    margin: 0;
  }
  #fullDetailsPart {
    display: none;
    flex-direction: column;
    width: 100%;
    overflow-y: auto;
    height: 100%;
  }
  .fullAddress {
    background-color: #F6F2EB;
    margin: 5px 0px 10px 0px;
  }
  .communityInfo {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    background-color: #F6F2EB;
    margin: 15px;
  }
  .communityImage img {
    width: 200px;
    height: auto;
  }
  .communityName {
    text-align: left;
    padding-left: 20px;
    padding-right: 10px;
    margin-top: -25px;
    flex: 25%;
  }
  .someCommunityDetails {
    margin-top: -5px;
    flex: 50%;
  }
  .someCommunityDetails p {
    margin-top: 0em;
    margin-bottom: 0.5em;
  }
  .clearFilters {
    background-color: #C03810;
    color: white;
    border: none;
    font-size: 1.1em;
    height: 48px;
    width: 75%;
    cursor: pointer;
  }
  .clearFilters:hover {
    border: 0.5px solid #413c39;
  }
  .moreInfo {
    color: #C03810;
    font-style: italic;
    border: none;
    cursor: pointer;
  }
  .heremoreInfo {
    margin: 15px;
  }
  #overallContainerHeader,
  #overallContainer, 
  #informationArea,
  #mapAndShortDetailsPart {
    /*display: flex;*/
    display: inline-flex;
    flex-wrap: nowrap;
  }
  
  #overallContainerHeader div,
  #overallContainer div {
    /*margin: 0 0 0 10px;*/
  }

} /* Style for computers */

/* ** icon dimensions ** */
.pin {
  width: 20px;
  height: 20px;
  border-radius: 50% 50% 50% 0;
  position: absolute;
  transform: rotate(-45deg);
  left: 50%;
  top: 50%;
  margin: -7px 0 0 -15px;
}
/* icon colors */
.cooplinkRed   {
  background: #C03810;
  border: 1px solid #413C39
}
.cooplinkGreen {
  background: #267474;
  border: 1px solid #413C39
}
.cooplinkBrown {
  background: #413C39;
  border: 1px solid #F4EEE1
}
.cooplinkWhite {
  background: #F4EEE1;
  border: 1px solid #413C39
}
.cooplinkYellow {
  background: yellow;
  border: 1px solid #F4EEE1
}

/* tooltip (mouseover) text style */
.tooltip {
  font-family: 'lato', sans-serif;
  color: #413c39;
}

/* ** modal with help text ** */
  .modal {
    z-index: 3;
    display: none;
    padding-top: 100px;
    position: fixed;
    left: 200px;
    top: 0;
    overflow: auto;
  }
  .modal-content {
    margin: auto;
    position: relative;
    outline: 0;
    width: 600px;
    padding: 0.01em 16px;
  }
  .display-topright {
    position: absolute;
    right: 10px;
    top: 0;
    cursor: pointer;
  }