: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-editor-draw-options {
    margin-left: 5px;
    margin-right: 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: 14px;
}

.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 li > a:first-child {
    display: inline-block;
    width: calc(100% - 1.75em - .2em - 24px);
    text-decoration: none;
    padding: 0 1.75em 0 .2em;
    cursor: pointer;
    position: relative;
}

.c4g-content-layertree span[class*=locstyle] + .c4g-starboard-text {
    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;
    right: 0;
    bottom: 0;
}

.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,
.c4g-layertree span:not(.c4g-starboard-locstyle), .c4g-layertree .c4g-starboard-text {
    height: 43px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    line-height: 43px;
}

.c4g-starboard-list-element .c4g-starboard-text {
    float: left;
    cursor: pointer;
}

span.c4g-starboard-locstyle {
    box-sizing: unset;
}

.c4g-layertree .c4g-starboard-locstyle img {
    cursor: pointer;
}

.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;
}

.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 {
    border-right: 1px solid #ffffff;
}

.c4g-feature-filter button.c4g-btn-nav-next {
    border-left: 1px solid #ffffff;
}

.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;
}

/* minimize sideboard icon */
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:before {
    content: "\f068";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: inherit;
}