/*!
 * This file is part of con4gis, the gis-kit for Contao CMS.
 * @package con4gis
 * @version 8
 * @author con4gis contributors (see "authors.txt")
 * @license LGPL-3.0-or-later
 * @copyright (c) 2010-2022, by Küstenschmiede GmbH Software & Design
 * @link https://www.con4gis.org
 */

@font-face {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-style: normal;
}

.ol-control button:before {
  font-family: 'Font Awesome 5 Free';
}


.mod_c4g_maps input[type='checkbox'] + label,
.c4g-layertree a:after,
.c4g-baselayertree a:before,
.c4g-control button,
.c4g-icon {
  display: inline-block;
  outline: none;
  font-family: 'Font Awesome 5 Free';
  /*font-size: inherit;*/
  /*font-weight: 900;*/
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* General icons */
.c4g-spinner span.c4g-icon:before {
  content: "\f01e";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: inherit;
}

.mod_c4g_maps input[type='checkbox'] {
  display: none;
}
.mod_c4g_maps input[type='checkbox'] + label:before {
  content: "\f204";
  margin-right: 5px;
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: inherit;
}
.mod_c4g_maps input[type='checkbox']:checked + label:before {
  content: "\f205";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: inherit;
}

/* Viewport controls */
.c4g-permalink-control button:before {
  content: "\f0c1";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: inherit;
}
.c4g-permalink-content button.c4g-copy:before {
  content: "\f0ea";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: inherit;
}
.c4g-permalink-content button.c4g-refresh:before {
  content: "\f021";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: inherit;
}
button.c4g-permalink-close:before{
  content: "\f00d";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: inherit;
}
.c4g-graticule button:before {
  content: "\f84c";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: inherit;
}
.c4g-graticule.c4g-enabled button:before {
  content: "\f850";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: inherit;
}
.ol-attribution button:before {
  content: "\f1f9";
  font-family: 'Font Awesome 5 Free';
  font-weight: 100;
  font-size: inherit;
}
.ol-attribution.ol-collapsed button:before {
  content: "\f1f9";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: inherit;
}
span.ol-compass:before {
  content: "\f021";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: inherit;
}
.ol-full-screen > button:before,
button.ol-full-screen-false:before {
  content: "\f31e";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: inherit;
}
button.ol-full-screen-true:before {
  content: "\f78c";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: inherit;
}
span.c4g-active ul li:before{
  content:"\f111";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: 14px;
}
span.c4g-active ul li.c4g-active:before{
  content:"\f192";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: 14px;
}
.ol-control > button {
  span:not(.ol-compass) {
    visibility: hidden;
    display: none;
    transition: visibility 0.1s, opacity 0.5s linear;
  }
  &:hover {
    white-space: nowrap;
    padding-left: 5px;
    width: fit-content;
    min-width: var(--button-size-pixel);
    span {
      padding-left: 5px;
      visibility: visible;
      display: inline;
    }
  }
}

.c4g-measuretools-control > button:before {
  content: "\f545";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: inherit;
}
.c4g-measuretools-control.c4g-close > button:before {
  content: "\f545";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: inherit;
}
.c4g-export.c4g-open > button:before {
  content: "\f02f";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: inherit;
}
.c4g-export.c4g-close > button:before {
  content: "\f02f";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: inherit;
}
.c4g-infopage-control > button:before {
  content: "\f129";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: inherit;
}
.c4g-infopage-control .c4g-open > button:before {
  content: "\f129";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: inherit;
}
.c4g-starboard-control.c4g-open button:before {
  content: "\f005";
  font-family: 'Font Awesome 5 Free';
  font-weight: 100;
  font-size: inherit;
}
.c4g-starboard-control.c4g-close button:before {
  content: "\f005";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: inherit;
}
.c4g-starboardscope-control.c4g-open button {
  @extend %fa-icon;
  @extend .fas;

  &:before {
    //content: "\f277";
    //font-family: 'Font Awesome 5 Free';
    //font-weight: 100;
    //font-size: inherit;
    //@include fa-icon($fa-var-map-signs);
    content: fa-content($fa-var-map-signs);
  }
}
.c4g-starboardscope-control.c4g-close button:before {
  content: "\f277";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: inherit;
}
button.ol-zoom-in:before {
  content: "\f067";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: inherit;
}
button.ol-zoom-out:before {
  content: "\f068";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: inherit;
}
.ol-zoom-extent button:before,
button.ol-zoom-extent:before {
  content: "\f7a2";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: inherit;
}

.ol-zoom-home button:before,
button.ol-zoom-home:before {
  content: "\f015";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: inherit;
}

.ol-zoom-position button:before,
button.ol-zoom-position:before {
  content: "\f05b";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: inherit;
}

/*  Starboard */

button.c4g-starboard-close:before{
  content: "\f00d";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: inherit;
}

button.c4g-measure-select:before {
  content: "\f245";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: inherit;
}

button.c4g-measure-line:before {
  content: "\f1e0";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: inherit;
}
button.c4g-measure-polygon:before {
  content: "\f5ee";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: inherit;
}
button.c4g-measure-circle:before {
  content: "\f111";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: inherit;
}

button.c4g-measure-freehand:before {
  content: "\f303";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: inherit;
}
button.c4g-print:before {
  content: "\f302";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: inherit;
}
button.c4g-infopage-view-trigger:before {
  content: "\f129";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: inherit;
}
button.c4g-account-view-trigger:before {
  content: "\f007";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: inherit;
}
button.c4g-starboard-view-trigger-starboardplugin:before {
  content: "\f0ea";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: inherit;
}
/* Geosearch */
.c4g-geosearch button:before, button.c4g-geosearch-start:before {
  content: "\f689";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: inherit;
}

/* editor control */
.c4g-editor-control button:before {
  content: "\f303";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: inherit;
}

/*
.c4g-geosearch.c4g-open button.c4g-geosearch-trigger:before {
  content: "\f689";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: inherit;
}
.c4g-geosearch.c4g-close button.c4g-geosearch-trigger:before {
  content: "\f002";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: inherit;
}
*/

button.c4g-geosearch-results-close:before {
  content: "\f00d";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: inherit;
}

/* Overviemap */
.c4g-overviewmap button:before {
  content: "\f0ac";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: inherit;
}
.c4g-overviewmap span.c4g-icon {
  width: 1em;
  margin-top: -1px;
}
.c4g-overviewmap.c4g-close span.c4g-icon {
  margin-top: 0;
  transform: rotate(180deg);
}

button.c4g-starboard-view-trigger-baselayerswitcher:before {
  content: "\f279";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: inherit;
}
button.c4g-starboard-view-trigger-layerswitcher:before {
  content: "\f5fd";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: inherit;
}

.c4g-baselayertree-content>ul>li.without-image>a.c4g-active:before {
  font-weight: 100;
  content: "\f192";
  font-family: 'Font Awesome 5 Free';
  font-size: inherit;
}

.c4g-baselayertree-content>ul>li.with-image>a.c4g-active span:before {
  font-weight: 100;
  content: "\f058";
  font-family: 'Font Awesome 5 Free';
  font-size: inherit;
  position: absolute;
  left: .4em;

}

.c4g-baselayertree-content>ul>li.without-image a.c4g-inactive:before {
  font-weight: 100;
  content: "\f111";
  font-family: 'Font Awesome 5 Free';
  font-size: inherit;
}


.c4g-baselayertree-content>ul>li.with-image > a.c4g-inactive span:before {
  font-weight: 100;
  content: "\f35a";
  font-family: 'Font Awesome 5 Free';
  font-size: inherit;
  position: absolute;
  left: .4em;
  opacity: 0;
  transition: .3s;
}

.c4g-baselayertree-content>ul>li.with-image:hover > a.c4g-inactive span:before {
  opacity: 1;
}


.c4g-layertree span.c4g-icon:before ,
.c4g-baselayertree-content span.c4g-icon:before {
  content: "\f054";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: inherit;
}

.c4g-baselayertree-content input[type=range]{
  -webkit-appearance: none;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  height: 5px;
  width: 100px;
 }

.c4g-baselayertree-content input[type=range]::-webkit-slider-runnable-track {
  width: 300px;
  height: 5px;
/*  background: #ddd;*/
  border: none;
  border-radius: 3px;
}

.c4g-baselayertree-content input[type=range]::-webkit-slider-thumb{
  -webkit-appearance: none;
  border: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
/*background: rgba(0,60,136,.7);*/
  margin-top: -4px;
}

.c4g-baselayertree-content input[type=range]:focus {
  outline: none;
}

.c4g-baselayertree-content input[type=range]:focus::-webkit-slider-runnable-track {
/*  background: #ccc;*/
}
.c4g-layertree .c4g-open > span.c4g-icon,
.c4g-baselayertree-content .c4g-open > span {
  transform: translateX(-75%) translateY(-25%) rotate(90deg);
}
input.c4g-starboard-layerswitcher-filter-field,
input.c4g-baselayer-filter-field {
  font-family: 'Font Awesome 5 Free', sans-serif;
  font-weight: 900;
}

/* PopUp */
button.c4g-popup-close:before {
  content: "\f00d";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: inherit;
}
.c4g-layertree a.c4g-active:after,
.c4g-starboard-headline-link.c4g-active:after {
  font-family: 'Font Awesome 5 Free', sans-serif;
  content: "\f205";
  float:right;
  font-weight: 900;
  font-size: inherit;
}
.c4g-layertree a.c4g-inactive:after,
.c4g-starboard-headline-link.c4g-inactive:after {
  font-family: 'Font Awesome 5 Free', sans-serif;
  content: "\f204";
  float:right;
  font-weight: 900;
  font-size: inherit;
}
.c4g-geojson-button{
  cursor: pointer;
}
.c4g-geojson-button:after {
  content: "\f59f";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: inherit;
}

button.c4g-titlebar-close:before {
  content: "\f00d";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: inherit;
}

button.c4g-beach-options:before {
  content: "\f03a";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: inherit;
}

.c4g-baselayer-control button:before{
  content: "\f279";
  font-family: "Font Awesome 5 Free";
  font-weight: 600;
}

.c4g-sideboard > div div[class*=filter].without-button:after {
  content: "\f0b0";
}
.c4g-starboard-locstyle > img {
  vertical-align: middle;
}

.c4g-feature-filter button.c4g-feature-filter-reset:after{
  content: "\f1f8";
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  margin-left: 10px;
}

.c4g-active.c4g-starboard-checkbox-icon,
.c4g-inactive.c4g-starboard-checkbox-icon {
  justify-content: end;
}