:root {
  --button-radius-percent: 0%;
  --button-radius-pixel: 0px;
  --button-size-pixel: 36px;
  --button-fontsize-pixel: 16px;
  --font-size: 16px;
}

.c4g_map .ol-viewport {
  font-size: var(--font-size);
}

.ol-unsupported {
  display: none;
}

/*
 *  Controls - general
 */

.ol-control button,
.c4g-control button {
  display: block;
  padding: 0;
  font-size: var(--button-fontsize-pixel);
  text-decoration: none;
  text-align: center;
  height: var(--button-size-pixel);
  width: var(--button-size-pixel);
  border: none;
  outline: none;
  cursor: pointer;
}

.ol-control button {
  margin-top: inherit;
}

.ol-control:not(.ol-attribution) button:not(.ol-zoom-in):not(.ol-zoom-out),
.c4g-control button {
  border-radius: var(--button-radius-percent);
}

.ol-control button.ol-zoom-in {
  border-top-left-radius: var(--button-radius-percent);
  border-top-right-radius: var(--button-radius-percent);
}
.ol-control button.ol-zoom-out {
  border-bottom-left-radius: var(--button-radius-percent);
  border-bottom-right-radius: var(--button-radius-percent);
}




.ol-control button::-moz-focus-inner {
  border: none;
  padding: 0;
  margin: 0;
}

.ol-control button:focus,
.ol-control button:hover {
  text-decoration: none;
}

/*
 *  Control-container
 */

.c4g-control-container-top-right {
  position: absolute;
  top: .2em;
  /* do not change "right"-value! */
  right: 0;
  margin-right: .2em;
  margin-left: 48px;
}
.c4g-control-container-top-right > div {
  margin-bottom: 3px;
}
.c4g-control-container-bottom-right {
  position: absolute;
  bottom: 0;
  /* do not change "right"-value! */
  right: 0;
  margin-right: .2em;
  white-space: nowrap;
}
.c4g-control-container-bottom-right > div {
  display: inline-block;
  margin-left: .2em;
  vertical-align: bottom;
}

.ol-rotate {
  transition: opacity .25s linear,
              visibility 0s linear;
}
.ol-rotate.ol-hidden {
  transition: opacity .25s linear,
  visibility 0s linear;
}
.ol-compass {
  display:block;
}

.ol-scale-line {
  display: inline-block;
  padding: 2px;
}
.ol-scale-line-inner {
  margin: 1px;
  padding: 0 2px;

  font-size: 10px;
  text-align: center;

  border: 1px solid;
  border-top: none;
}

.c4g-control-container-bottom-left-sub {
  padding: 0 .4em;
  font-size: 12px;
}

.c4g-zoom-level:before {
  content: ' Zoom: ';
  font-weight: bold;
}
.ol-mouse-position:before {
  content: ' Lat/Lon: ';
  font-weight: bold;
}

/*
 *   Starboard
 */
.c4g-starboard-titlebar .c4g-starboard-buttonbar button {
  display: inline-block;
}

.c4g-starboard-viewtriggerbar {
  width: 100%;
  vertical-align: bottom;
  border-top: 2px solid;
  margin-bottom: 10px;
  text-align: left;
}
.c4g-starboard-viewtriggerbar {
  text-align: right;
}
.c4g-starboard-viewtriggerbar button {
  height: 2.2em;
  width: 2.2em;
  margin-top: 0px;
  border-radius: 0 0 3px 3px;
  border: 0;
  font-size: 1.1em;
}
/*.c4g-starboard-viewtriggerbar {*/
  /*text-align: right;*/
/*}*/

.c4g-editor-draw-options {
  margin-left: 5px;
  margin-right: 5px;
  /*padding: 10px 5px;*/
  font-size: 1.25em;
}

.c4g-starboard-content-container .contentHeadline span {
  font-weight: normal;
}

.c4g-editor-draw-options {
  padding: 5px;
  font-weight: normal;
}

.c4g-content-select {
  display: block;
  margin-left: 8px;
  margin-right: 8px;
  justify-content: flex-start;
}
.c4g-content-select input {
  box-sizing: border-box;
  width: 100%;
  padding: 5px;
  border: 1px solid;
  outline: none;
}

.c4g-content-select .contentHeadline input {
  width: 200px;
}
.c4g-starboard-filter input[type=text]{
  width:100%;
  border:2px solid;
  border-radius: 4px;
  margin:8px 0;
  outline:none;
  padding:8px;
  box-sizing:border-box;
  transition:.3s;
}

.c4g-starboard-filter input[type=text]{
  padding-left:40px;
}

.c4g-starboard-filter{
  position:relative;
}

.c4g-starboard-filter i{
  position:absolute;
  left:0;
  top:8px;
  padding:9px 8px;
  transition:.3s;
}

.c4g-layertree li > span.c4g-icon + span[class*=locstyle] + a + ul {
  margin-left: 35px;
}

.c4g-layertree li > span.c4g-icon + a + ul {
  margin-left: 21px;
}

.c4g-layertree li ul li,
.c4g-baselayertree-content li ul li {
  border-bottom: none;
}

ul.c4g-overlays li {
  position: relative;
}

ul.c4g-overlays li a{
  display: block;
}

.c4g-baselayertree-content > ul> li.without-image > a, .c4g-baselayertree-content ul.c4g-overlays > li > a{
  display: block;
  text-decoration: none;
  padding: 10px 1.75em 10px .2em;
  cursor: pointer;
  position: relative;
}

.c4g-layertree span + a, .c4g-layertree a {
  display: inline-block!important;
  width: calc(100% - 1.75em - .2em);
  text-decoration: none;
  padding: 0 1.75em 0 .2em;
  cursor: pointer;
  position: relative;
}

.c4g-layertree li > a:first-child {
  display: inline-block!important;
  width: calc(100% - 1.75em - .2em - 24px);
  text-decoration: none;
  padding: 0 1.75em 0 .2em;
  cursor: pointer;
  position: relative;
  margin-left: 24px;
}

span.c4g-icon + a {
  width: calc(100% - 21px - 1.75em - .2em);
}

.c4g-content-layertree span[class*=locstyle] + a {
  width: calc(100% - 35px - 1.75em - .2em);
}

.c4g-content-layertree span[class*=geojson] + a {
  width: calc(100% - 70px - 1.75em - .2em);
}

span.c4g-icon + span[class*=locstyle] + a {
  width: calc(100% - 35px - 21px - 1.75em - .2em);
}



.c4g-content-layertree span[class*=locstyle] {
  width: 25px;
  line-height: 43px;
}

.c4g-content-layertree span[class*=locstyle]:not(.c4g-starboard-locstyle-triangle):not(.c4g-starboard-locstyle-square):not(.c4g-starboard-locstyle-point) {
  text-align:center;
}

.c4g-layertree a.c4g-disabled,
.c4g-baselayertree-content a.c4g-disabled {
  opacity: .5;
}

.c4g-baselayertree-content a:after {
  display: inline-block;
  float: right;
  margin-right: 5px;
  position: absolute;
  right: 0;
  top: 15px;
  margin-top: -6px;
}

.c4g-layertree a:after {
  display: inline-block;
  float: right;
  margin-right: 5px;
  position: absolute;
  right: 0;
  bottom: 0;
  margin-top: -6px;
}

.c4g-starboard-headline-link:after {
  margin-right: 5px;
}

.c4g-starboard-headline-link {
  line-height: calc(32px + .4em);
  height: calc(32px + .4em);
  margin: 0;
  display: block;
  cursor: pointer;
}

.c4g-starboard-headline-link{
  font-size: 20px;
}

.c4g-layertree .c4g-closeable > a {
  padding-left: 10px;
}
.c4g-layertree span{
  float: left;
  padding: 8px 5px;
  position: relative;
  z-index: 1;
}

.c4g-layertree li, .c4g-layertree span, .c4g-layertree a {
  min-height: 43px;
  padding-top: 0;
  padding-bottom: 0;
  display: block;
}

.c4g-layertree span:not(.c4g-starboard-locstyle), .c4g-layertree a {
  height: 43px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  line-height: 43px;
}

.c4g-layertree li {
  line-height: 0;
}

.c4g-baselayertree-content span {
  z-index: 1;
}

.c4g-baselayertree-content a:before {
  display: inline-block;
  margin-right: 5px;
}

/*
 *  Geosearch
 */
.c4g-geosearch {
  border-radius: var(--button-radius-percent);
}
.c4g-geosearch input {
  outline-style: none;
  height: 32px;
  padding-top: 2px;
  padding-left: 5px;
  padding-right: 5px;
  border: 2px;
  margin-left: 2px;
  margin-right: 2px;
  height: 32px;
  display: block;
  float: left;
  border-radius: 4px;
  border-style: solid;
  text-align: center;
  vertical-align: middle;
  width: calc(100% - 57px);
}
.c4g-geosearch button.c4g-geosearch-start{
  display: inline-block;
  border-radius: var(--button-radius-percent);
  display: block;
}
.c4g-geosearch.c4g-open, .c4g-geosearch.c4g-open:hover {
  background: none;
}
.c4g-geosearch.c4g-open button.c4g-geosearch-trigger{
  border-radius: 0%;
  border-radius: var(--button-radius-percent);
  float: right;
}

/*
 *  Overview-map
 */

.c4g-overviewmap .ol-overviewmap-box {
  border: 1px solid;
  border-radius: var(--button-radius-percent);
}


/*
 *  Attributions
 */
.ol-attribution {
  border-radius: 2px;
  position: static;
  max-width: calc(100% - .2em);
}

.ol-attribution.ol-collapsed {
  border-radius: var(--button-radius-percent);
}

.ol-attribution img {
  margin-top: -.2em;
  max-height: 1.6em;
}

.ol-attribution.ol-collapsed ul,
.ol-attribution:not(.ol-collapsed) button:hover:after {
  display: none;
}

.ol-attribution.ol-uncollapsible button {
  display: none;
}

/*
 * Permalink
 */

/*
 *  Popups
 */
.ol-selectable div.c4g-popup-wrapper {
  display: none;
}
.ol-selectable div.c4g-active.c4g-popup-wrapper {
  display: block;
  min-width: 100px;
  margin-bottom: 10px;
  border-radius: 15px;
  border: 1px solid;
  padding: 20px .4em .4em;
  z-index: 92;
  margin-right: 20px;
}

.ol-selectable div.c4g-active.c4g-popup-wrapper img {
  max-height: calc((var(--map-height) - .4em) - (32px + .4em) - .4em);
}

.ol-selectable div.c4g-popup-wrapper:before {
  pointer-events: none;
  content: " ";
  position: absolute;
  bottom: -30px;
  left: 48px;
  height: 0;
  width: 0;
  margin-left: -10px;
  margin-bottom: 10px;
  border: 10px solid transparent;
}
.ol-selectable div.c4g-popup-wrapper-nonose:before {
  display:none;
}
.ol-selectable button.c4g-popup-close {
  width: 1.4em;
  border: none;
  cursor: pointer;
  outline: none;
}

div.c4g-tooltip-popup {
  pointer-events: none;
  padding:.2em;
  border-radius: 5px;
  border: 1px solid;
}
div.c4g-horizontal.c4g-tooltip-popup {
  margin-left: 10px;
}

div.c4g-tooltip-popup:before {
  pointer-events: none;
  content: " ";
  position: absolute;
  bottom: -17px;
  left: 10px;
  height: 0;
  width: 0;
  border: 8px solid transparent;
}
/*div.c4g-horizontal.c4g-tooltip-popup:before {*/
  /*bottom: -5px;*/
  /*left: -4px;*/
/*}*/

.c4g-tooltip-popup.c4g-horizontal.c4g-closeable button.c4g-popup-close {
  position: absolute;
  top: 0;
  right: 0;
  pointer-events: all;
}

.c4g_brick_popup_button {
  margin-top: 8px;
}

.c4g_brick_popup_button a {
  border: 1px solid;
  padding: 6px 10px;
  cursor: pointer;
  outline: none;
}

/*
 *  General
 */
.c4g-spinner {
  position: absolute;
  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);
}
.c4g-spinner span {
  display: inline-block;
  font-size: 1.14em;
}
.c4g-spinner.c4g-small span {
  font-size: .5em;
}
.c4g-spinner.c4g-large span {
  font-size: 2em;
}

.c4g-control-container-top-left::-webkit-scrollbar-track,
.c4g-starboard-content-container::-webkit-scrollbar-track,
.c4g-popup-wrapper .c4g-popup-content::-webkit-scrollbar-track{
  border-radius: var(--button-radius-pixel);
}
.c4g-control-container-top-left::-webkit-scrollbar-thumb,
.c4g-starboard-content-container::-webkit-scrollbar-thumb,
.c4g-popup-wrapper .c4g-popup-content::-webkit-scrollbar-thumb{
  border-radius: var(--button-radius-pixel);
}

.c4g-baselayertree-content .c4g-overlay-toggle::-webkit-slider-runnable-track {
  border-radius: var(--button-radius-pixel);
}

.c4g-baselayertree-content .c4g-overlay-toggle:focus::-webkit-slider-runnable-track {
  background: var(--font-color);
}
.c4g-baselayertree-content .c4g-overlay-toggle::-moz-range-track {
  border-radius: var(--button-radius-percent);
}
.c4g-baselayertree-content .c4g-overlay-toggle::-moz-range-thumb {
  height: var(--button-size-pixel);
  width: var(--button-size-pixel);
  border-radius: var(--button-radius-percent);
}
.c4g-baselayertree-content .c4g-overlay-toggle::-ms-fill-lower {
  border-radius: var(--button-radius-pixel);
}
.c4g-baselayertree-content .c4g-overlay-toggle::-ms-fill-upper {
  border-radius: var(--button-radius-pixel);
}
.c4g-baselayertree-content .c4g-overlay-toggle::-ms-thumb {
  height: var(--button-size-pixel);
  width: var(--button-size-pixel);
  border-radius: var(--button-radius-percent);
}


/*
 *  Media-querys
 */
@media print {
  .ol-control {
    display: none;
  }
}

.c4g-horizontal-panel-button-top > button, .c4g-horizontal-panel-button-bottom > button {
  width: 68px;
  height: 23px;
}

.c4g-feature-filter button.c4g-btn-nav-previous, .c4g-feature-filter button.c4g-btn-nav-next {
  position: absolute;
  height: 45px;
  width: 45px;
  border: 0;
  padding: 0;
  outline: 0;
  cursor: pointer;
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  font-size: 30px;
  z-index: 1;
}

.c4g-feature-filter button.c4g-btn-nav-previous:active:before, .c4g-feature-filter button.c4g-btn-nav-next:active:before {
  font-size: 20px;
  vertical-align: middle;
  transition: .1s;
}

button.c4g-btn-nav-previous {
  left: 0;
}

button.c4g-btn-nav-previous:before {
  content: "\f359";
}

button.c4g-btn-nav-next {
  right: 0;
}

button.c4g-btn-nav-next:before {
  content: "\f35a";
}

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

.c4g-control-container-bottom-left {
  width: calc(100% - var(--button-size-pixel) - .6em);
  left: calc(var(--button-size-pixel) + .8em);
  position: absolute;
  bottom: 1.2em;
  pointer-events: none;
}

.c4g-control-container-bottom-left > a {
  display: table-row;
}

.c4g-control-container-bottom-left a, .c4g-control-container-bottom-left button {
  pointer-events: all;
}

.c4g-control-container-bottom-left.ol-unselectable div {
  width: max-content;
  margin: .2em 0 0;
}

button.c4g-sideboard-hide {
  width: 32px;
  height: 32px;
  position: absolute;
  right: calc(32px + .2em);
  top: .2em;
  margin: 0;
  border: none;
  background: none;
  outline: none;
  cursor: pointer;
}

button.c4g-sideboard-hide:after {
  content: "\f068";
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  vertical-align: text-bottom;
  position: absolute;
  bottom: 6px;
  right: 6px;
}