body {
    margin:0;
    padding:0;
    font-family:apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;
}

#site-title {
    /*text-decoration-line: none;*/
}

#section-buttons-bar {
    padding-top: 3px;
}

#site-title-bar {
    background: #1288af;
    padding-top: 3px;
    padding-bottom: 3px;
}

#site-title {
    color: white;
    font-weight: 600;
    margin-left: 2px;
}

#side-panel { position:absolute; top:52px; bottom:0; left: 0;}

.marker {
  background-image: url('location-icon-png-3.png');
  background-size: cover;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
}

.mapboxgl-popup {
  max-width: 200px;
}

#attractions {
    height: 100%;
    overflow-y: auto;
}

#whats-on {
    height: 100%;
    overflow-y: auto;
}

#attractionsTable tr:nth-child(odd)  {background: #dcfbe4}
#attractionsTable tr:nth-child(even) {background: #FFF}

.sidepanel {
    height: 100%;
    overflow-y: auto;
}

.clickable {
    cursor:pointer;
}

#eventsTable .whatsOnRow {background: #def7e2}
#eventsTable .dateRow    {background: #cac0c0}

#eventsTable td {
  padding-bottom: 6px;
  padding-top: 6px;
}

#attractionsTable td {
  padding-bottom: 6px;
  padding-top: 6px;
}

.attraction-name {
    font-weight: 600;
    padding-bottom: 2px;
}

.attraction-location{
    font-style: italic;
    font-weight: 300;
}

.section-header {
    font-weight: 600;
    font-size: 21px;
    width: 200px;
    margin-right: 10px;
    margin-left: 2px;
    text-decoration: underline;
    text-decoration-color: blue;
    color: blue;
}

#map-container {position:absolute;}

.poidetails-title {
    font-size: 28px;
    font-weight: 600;
}

.poidetails-subtitle {
    font-size: 18px;
    font-weight: 600;
}

#poidetails-desc {
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 8px;
}

.poidetails-eventUrlDiv {
    margin-bottom: 6px;
}


#poidetails-website {

}

#poi-details-box {
    background: white;
    overflow-y: auto;
}

#this-is-inse9 {
    font-weight: 600;
    padding-top: 8px;
}

.price {
    padding: 1px;
    background-color: white;
    display:inline-block;
    border: black;
    border-width: 1px;
    border-style: dashed;
}


.event-time {
    float:right;
    padding-right: 10px;
    font-weight: 600;
}

.event-desc {
    padding-right: 20px;
    padding-bottom: 4px;
}
/* MOBILE Styles */
@media only screen and (max-width: 500px) {
    #map-container, #side-panel {
        top:90px; bottom:0; left:0; right: 0;
    }

    #map {
        height: 70%;
    }
    #poi-details-box {
        height: 30%;
        background: white;
    }
}

/* Tablet and Desktop Styles */
@media only screen and (min-width: 501px)  {
    #map-container {
        top:52px; bottom:0; left:360px; right: 0;
    }
    .sidepanel{
        max-width: 360px;
    }

    #map {
        height: 80%;
    }
    #poi-details-box {
        height: 20%;
        background: white;
    }
}