
/** SURPASSPORT.com - FindMySport embedded Stylesheet
 *
 *  Copyright (c) 2021 Adrian Geissel. All Rights Reserved.
 *  Unauthorised use prohibited without written Licence Agreement
 */

.findmysport {
  --color-accent: #8dc73f;
  --color-calltoaction: #21894c;
  --color-grey: #9b9b9b;
  --color-off-white: #f5f5f5;
  font-size: 12pt;
}

.findmysport main>.cell { padding-right:0; }
.findmysport .multi-column { padding-left:0; }

.promo.slider { overflow-x: scroll; white-space: nowrap; }
.promo.slider::-webkit-scrollbar { height: 0; }
.promo.slider > .row { height: 60vw; white-space: nowrap; }

.promo.slider >.row>.cell.listing { width: 90%; height: 90%; display: inline-block; position: relative; margin: 0 0.5em; overflow: hidden; border-radius: 0.1em; box-shadow: 0.5em 0.5em 0.75em -0.5em #ccc; background:var(--secondary-color-10pc); }
.promo.slider >.row>.cell.listing:first-child { margin-left: 0.25em; }
.promo.slider >.row>.listing>img.banner { object-fit: cover; min-width:100%; min-height:100%; }
.promo.slider >.row>.listing>.leaflet-container { padding:0; margin:0; position: absolute; top:0; right:0; bottom:0; left:0; z-index:0; }
.promo.slider >.row>.cell.listing>h4 { position: absolute; top: 0; left: 0; padding: 0.2em 0.5em; margin:0; right: 0; white-space: nowrap; overflow-x: hidden; text-overflow: ellipsis; width: unset; color: #333; font-size: 0.85em; font-weight: normal; }
.promo.slider >.row>.cell.listing>.organiser { position: absolute; bottom: -1px; left: 0; right: 0; padding: 0.25em; height: 2.5em; white-space: nowrap; overflow: hidden; }

.promo.slider >.row>.cell.listing>h4,
.promo.slider >.row>.cell.listing>.organiser {
    background: linear-gradient(90deg, #FFF, #fff8 55%, transparent); backdrop-filter: blur(5px);
  }

.promo.slider >.row>.cell.listing>h4,
.promo.slider >.row>.cell.listing>.organiser {
  background: linear-gradient(90deg, var(--secondary-color), var(--secondary-color-40pc) 55%, transparent);
  color: white;
}

.promo.slider >.row>.cell.listing>.organiser>img.logo { background: white; height: 3em; margin: -0.25em 0.25em -0.25em -0.25em; float: left; }
.promo.slider >.row>.cell.listing>.organiser>.location { }

.promo.slider >.row>.cell.listing.yellow>img { filter: sepia(1) saturate(2) brightness(0.9) hue-rotate(20deg); }
.promo.slider >.row>.cell.listing.yellow h4 { background: linear-gradient(90deg, #FDF734, #FDF73480 75%, transparent); color: #1a1a1a; }
.promo.slider >.row>.cell.listing.yellow>.organiser { background: linear-gradient(90deg, #FDF734, #FDF73488 55%, transparent); color: #1a1a1a; }

.promo.slider >.row>.cell.listing.orange>img { filter: sepia(1) saturate(2) brightness(0.9) hue-rotate(345deg); }
.promo.slider >.row>.cell.listing.orange h4 { background: linear-gradient(90deg, #F28B31, #F28B3180 75%, transparent); color: #1a1a1a; }
.promo.slider >.row>.cell.listing.orange>.organiser { background: linear-gradient(90deg, #F28B31, #F28B3188 55%, transparent); color: #1a1a1a; }

.promo.slider >.row>.cell.listing.red>img { filter: sepia(1) saturate(2) brightness(0.9) hue-rotate(310deg); }
.promo.slider >.row>.cell.listing.red h4 { background: linear-gradient(90deg, #ED462F, #ED462F80 75%, transparent); color: white; }
.promo.slider >.row>.cell.listing.red>.organiser { background: linear-gradient(90deg, #ED462F, #ED462F88 55%, transparent); color: white; }



.modal .dialogbox.findmysport .entry>p.details { max-height: 30vh; }

.findmysport main>.cell { padding-right: 0.5em; }
.findmysport main .multi-column { padding-left: 0; }
.findmysport main .multi-column .column { padding-right: 0; }

.view-map:not(.expanded) { padding-bottom: 1em; }
.view-list { padding-left: 2em; font-size: 0.8em; }

.findmysport .controls { font-size: 0.9em; margin-top: 0.5em; transition: all 0.445s ease-in-out; }
.findmysport .controls.hidden { max-height: 0; overflow: hidden; margin: 0 0 0.5em 0; padding: 0; }
.findmysport .controls :is(.search) { font-size: 0.8em; }
.findmysport .controls :is(.filter) { font-size: 0.9em;  background: var(--secondary-color-10pc); max-height: 70vh; overflow: auto; }
.findmysport .controls .ag-form.button { border-radius: 1em; }
.findmysport .controls :is(.filter) .ag-form.button { border-radius: 1em; margin-left: 0; margin-right: 0.5em; margin-bottom: 0.25em; }
.findmysport .controls :is(.filter) .ag-form.button:last-child { margin-right: 0; }

.leaflet-control:is(.zoom,.trails) { font-size:1em !important; margin: 5px !important; line-height: 1em; }
.leaflet-control.zoom { background: white; }
.leaflet-control.zoom .ag-form.button { background: transparent; margin:0.2em; }
.leaflet-container .leaflet-control-attribution, .leaflet-container .leaflet-control-scale { font-size:0.75em; opacity: 0.6; }
