
/** SURPASSPORT.com - Client Portal
 *
 *  Copyright (c) 2022 Adrian Geissel. All Rights Reserved.
 *  Unauthorised use prohibited without written Licence Agreement
 */

 :root {
   --primary-color: #126f43;
   --secondary-color: #283b8f;
   --accent-color: #008ece;
 }


.portal {
  background: white;
}
.portal .sign-in {
    padding-top: 4em;
    font-size: 1.15rem;
}

.dropzone { text-align: center; border: 2px dashed #CCC; background: #fffff4; margin-bottom: 0.5em;  }
.dropzone p { font-style: italic; font-size: smaller; padding: 0.5em 0; margin:0; }

.image-uploader .thumbnail { position:relative; text-align: center; }
.image-uploader .thumbnail img { max-height: 70px;  }
.image-uploader .thumbnail .ag-form.button { position: absolute; z-index: 100; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1.1); }
.image-uploader .thumbnail.hovering { background: #008ece80; }
.image-uploader .thumbnail.hovering img { opacity: 0.4;  }
.image-uploader .thumbnail.hovering .ag-form.button { color: #800; }
.image-uploader .thumbnail.removed { background: #80808080; }
.image-uploader .thumbnail.removed img { opacity: 0.2;  }
.image-uploader .thumbnail.removed .ag-form.button { color: #111; }

.with-heatmap .leaflet-tile-pane { filter: saturate(0.5); opacity: 0.6; }

.grid.list-view .list-item.completed {
  background: #283b8f1a !important;
}

.map-view { height: 100%; }
.findmysport { font-size: 10pt !important; }
.findmysport h2 { text-decoration: none; }
.findmysport .modal>.inner {
  position:fixed; z-index: 2000 !important; top:50%; left:50%; max-height:100vh; z-index:550; transform: perspective(1px) translate(-50%,-50%) translateZ(0); transform-style: flat; -webkit-font-smoothing: subpixel-antialiased;
}

.dialogbox>.grid>.searchbar { background: #eee; padding: 1em 1em 0.5em 1em; margin: -1em -1em 0.5em -1em; }
.dialogbox>.grid>.searchbar>.cell:first-child { font-size: 2em; text-align: center; }

.dialogbox .map-view.editor {
    height: 65vh;
}
.dialogbox .map-view.editor .leaflet-div-icon.leaflet-editing-icon {
    border-radius: 50%;
    width: 10px !important;
    height: 10px !important;
    margin-top: -5px !important;
    margin-left: -5px !important;
}
