:root {
  --font-color: rgba(255,255,255,.9);
  --main-color: rgba(24, 61, 93,.8);
  --shadow-color: rgba(0,155,222,.5);
  --pu-font-color: rgba(255,255,255,.9);
  --pu-main-color: rgba(24, 61, 93,.8);
}

.ol-control button,
.c4g-permalink-popup button {
  color: var(--font-color);
  background-color: var(--main-color);
  background-image: none;
}

.ol-control button:focus,
.ol-control button:hover,
.c4g-permalink-popup button:focus,
.c4g-permalink-popup button:hover,
.c4g-permalink.c4g-open button {
  background-color: var(--shadow-color);
  outline: none;
}

/*
 *  Tooltips
 */

/*
 *  Spinner
 */
.c4g-spinner span {
  color: rgba(0,60,136,.7);
}


/*
 *  Control-container-bl & Scale-Line
 */
.c4g-control-container-bottom-left-sub,
.ol-scale-line {
  background: var(--main-color);
}
.ol-scale-line-inner {
  border-color: var(--font-color);
  color: var(--font-color);
}
.c4g-control-container-bottom-left-sub {

  color: var(--font-color);
}

.c4g-feature-filter button.c4g-feature-filter-reset {
  background: var(--main-color);
  color: var(--font-color);
}

/*
 *  Starboard
 */

g-starboard-headline-link{
  color: var(--font-color);
}

.c4g-editor-draw-options {
  border-color: var(--shadow-color);
  color: var(--font-color);
  background-color: var(--main-color);
}

.c4g-starboard-content-container {
  background: transparent;/*var(--font-color);*/
}

.c4g-starboard-buttonbar {
  border-color: var(--font-color);
}

.c4g-starboard-titlebar .c4g-starboard-buttonbar button {
  color: var(--main-color);
  border-color: var(--shadow-color);
  background-color: var(--font-color);
}

.c4g-starboard-container button[title]:after {
  color: var(--font-color);
  border-color: var(--font-color);
  background-color: transparent;
}

button.c4g-draw-trigger {
  background-color: transparent;
  border: 0px solid transparent;
}
button.c4g-draw-trigger:focus,
button.c4g-draw-trigger:hover {
  background-color: transparent;
  border-color: transparent;
}
button.c4g-draw-trigger.c4g-active {
  background-color: transparent;
  border-color: transparent;
}


.c4g-starboard-content-container .contentHeadline a {
    color: inherit;
    border-color: inherit;
}

.c4g-starboard-content-container p {
  color: var(--font-color);
}

span.c4g-active ul {
  background-color: var(--main-color);
  color: var(--font-color);
}
span.c4g-active ul li{
  background-color: var(--main-color);
}
span.c4g-active ul li.c4g-active{
  background-color: var(--shadow-color);
}

.c4g-content-select input:focus {
  color: var(--main-color);
  border-color: var(--main-color);
  background-color: var(--font-color);
}

.c4g-starboard-statusbar {
  border-color: var(--shadow-color);
  background-color: transparent;
  color: transparent;
}

.c4g-starboard-viewtriggerbar {
  border-color: var(--shadow-color);
}
.c4g-starboard-viewtriggerbar button {
  color: var(--font-color);
  border-color: var(--shadow-color);
  background-color: var(--main-color);
}

.c4g-starboard-viewtriggerbar button.c4g-active {
  color: var(--main-color);
  background-color: var(--font-color);
}

.c4g-layertree a,
.c4g-layertree span{
  color: var(--font-color)!important;
}
.c4g-baselayertree-content  a.c4g-active {
  background-color: var(--shadow-color);
  cursor: not-allowed;
}
.c4g-layertree li a:hover,
.c4g-baselayertree-content > ul > li.without-image > a:hover {
  background-color: var(--font-color);
  color: var(--main-color)!important;
}

.c4g-baselayertree-content  li.without-image a.c4g-active:hover{
  background: var(--shadow-color);
  color: var(--font-color)!important;
  cursor: not-allowed;
}

.c4g-layertree a:after,
.c4g-baselayertree-content  a:before {
  border-color: var(--main-color);
}
.c4g-layertree span:hover {

  color: var(--shadow-color);
}
/*.c4g-starboard-filter-match > a {*/
  /*color: var(--main-color);*/
/*}*/
.c4g-starboard-filter input[type=text]{
  border-color: var(--shadow-color);
  background-color: var(--font-color);
}

.c4g-starboard-filter input[type=text]:focus{
  border-color: var(--main-color);
  /*box-shadow:0 0 8px 0 var(--main-color);*/
}

.c4g-feature-filter button.c4g-btn-nav-previous, .c4g-feature-filter button.c4g-btn-nav-next {
  background: var(--main-color);
  color: var(--font-color);
}

.c4g-starboard-filter i{
  color:var(--shadow-color);
}

.c4g-starboard-filter input[type=text]:focus + i{
  color:var(--main-color);
}

/*
 *  Geosearch
 */


.c4g-geosearch input {
  color: var(--main-color);
  background-color: var(--font-color);
  border-color: var(--shadow-color);
}

/*
 *  Overview-map
 */

.ol-overviewmap-box {
  color: var(--main-color);
}


div.c4g-tooltip-popup,
div.c4g-active.c4g-popup-wrapper {
  color: var(--pu-font-color);
  background-color: var(--pu-main-color);
  border-color: var(--shadow-color);

  -webkit-filter: drop-shadow(0 1px 4px var(--shadow-color));
  filter: drop-shadow(0 1px 4px var(--shadow-color));
}

div.c4g-active.c4g-popup-wrapper * {
  color: var(--pu-font-color);
}
/*div.c4g-tooltip-popup:before,*/
.ol-selectable div.c4g-popup-wrapper:before{
  border-top-color: var(--pu-main-color);
}
.c4g_popup_header_featurename {
  color: var(--pu-font-color);
}

.c4g_popup_header_featuretype {
  color: var(--shadow-color);
}

.c4g_brick_popup_button a {
  color: var(--pu-main-color);
  background-color: var(--pu-font-color);
  border-color: var(--pu-font-color);
}

/*div.c4g-horizontal.c4g-tooltip-popup:before {*/
  /*border-top-color: transparent;*/
  /*border-right-color: var(--main-color);*/
/*}*/

button.c4g-popup-close {
  color: var(--pu-font-color);
  background-color: transparent;
}

/*
 * Panel
 */
.c4g-top-panel-container {
  background: var(--main-color);
}

.c4g-panel-button {
  background-color: var(--main-color);
}

.c4g-panel-content-wrapper {

  background: var(--main-color);
  color: var(--font-color);
}

.c4g-panel-slidebutton {

  background-color: var(--main-color);
}

.ol-control button:hover{
  background: var(--shadow-color);
}

.c4g-control-container-top-left::-webkit-scrollbar-track {
  background-color: var(--font-color);
}
.c4g-control-container-top-left::-webkit-scrollbar-thumb {
  background-color: var(--shadow-color);
}
.c4g-control-container-top-left::-webkit-scrollbar-thumb:hover {
  background-color: var(--shadow-color);
}

.c4g-baselayertree-content .c4g-overlay-toggle::-webkit-slider-runnable-track {
  background: var(--font-color)!important;
  border: 0px solid var(--shadow-color);
}

ul.c4g-overlays input[type=range]::-webkit-slider-thumb {
  background: var(--font-color);
  border: 1px solid var(--shadow-color);
  box-shadow: none;
}

.c4g-baselayertree-content .c4g-overlay-toggle::-moz-range-thumb {
  box-shadow: 0px 0px 0px var(--shadow-color);
  border: 1px solid var(--shadow-color);
  background: var(--shadow-color);
}
.c4g-baselayertree-content .c4g-overlay-toggle::-ms-track {
  background: transparent;
  border-color: transparent;
  color: transparent;
}
.c4g-baselayertree-content .c4g-overlay-toggle::-ms-fill-lower {
  background: var(--shadow-color);
  border: 0px solid var(--shadow-color);
  box-shadow: 1px 1px 1px var(--shadow-color);
}
.c4g-baselayertree-content .c4g-overlay-toggle::-ms-fill-upper {
  background: var(--shadow-color);
  border: 0px solid var(--shadow-color);
  box-shadow: 1px 1px 1px var(--shadow-color);
}
.c4g-baselayertree-content .c4g-overlay-toggle::-ms-thumb {
  box-shadow: 0px 0px 0px var(--shadow-color);
  border: 1px solid var(--shadow-color);
  background: var(--shadow-color);
}
.c4g-baselayertree-content .c4g-overlay-toggle:focus::-ms-fill-lower {
  background: var(--shadow-color);
}
.c4g-baselayertree-content .c4g-overlay-toggle:focus::-ms-fill-upper {
  background: var(--shadow-color);
}



ul.c4g-feature-filter-list {  background: linear-gradient(var(--main-color) 45px, #fff0 0px); }
ul.c4g-feature-filter-list li { color: var(--font-color); }
ul.c4g-feature-filter-list li span.sum {
  background: var(--shadow-color);
  border: 1px solid var(--font-color);
}
/*--------Geosearch-------------*/


.c4g-horizon-content input {
  color: var(--main-color);
  background-color: var(--font-color);
  border-color: var(--font-color);
}

button.c4g-geosearch-start {
  background: var(--shadow-color);
  color: var(--font-color);
}


.c4g-geosearch-results-content li:nth-child(2n) button.searchResultButton {
  color: var(--main-color);
  background-color: var(--font-color);
}



.c4g-geosearch-results-content li:nth-child(2n + 1) button.searchResultButton {
  color: var(--font-color);
  background-color: var(--main-color);
}
/*------------------------------------*/
/*------------Pop Up-------------------*/

.c4g-sideboard > div > div[class*=content]::-webkit-scrollbar-track {
  background: var(--main-color);
}

.c4g-sideboard > div > div[class*=content]::-webkit-scrollbar-thumb {
  background: var(--font-color);
}

.c4g-sideboard > div > div[class*=content]::-webkit-scrollbar-thumb:hover {
  background: var(--shadow-color);
}

.c4g-popup-route-wrapper button:first-child {
  border-right: 1px solid var(--font-color);
  border-left: 1px solid var(--font-color);
}
/*-------------*/

/*--------------------baselayertree-----------*/
.c4g-baselayertree-content li.with-image > a  span{
  background: var(--font-color);
  color: var(--main-color)!important;
}


button.c4g-baselayer-close:before,
button.c4g-starboard-close:before{
  color: var(--font-color);
}

.ol-zoomslider button {
  background-color: var(--shadow-color);
}

.ol-zoomslider button:hover, .ol-zoomslider button:focus{
  background-color: var(--main-color);
}

c4g-infopage-container {
  background-color: var(--main-color);
}



.c4g-infopage-content * {
  color: var(--font-color);
}

.c4g-measuretools-content *:not(input) {
  color: var(--font-color);
}

.c4g-measuretools-content input {
  color: var(--main-color);
}

.c4g-measuretools-mode-switcher button.c4g-inactive{
  background-color: var(--font-color);
  color: var(--main-color);
}

.c4g-measuretools-mode-switcher button.c4g-inactive:hover{
  border: 1px solid var(--shadow-color);
}

.c4g-measuretools-mode-switcher button.c4g-active {
  color: var(--font-color);
  background: none;
  cursor: not-allowed;
}

/*-------------------sideboard-------------*/

.c4g-sideboard {
  background-color: var(--main-color);
}

.c4g-sideboard > div div[class*=header] *{
  color: var(--font-color);
}

.c4g-sideboard > div > div[class*=content] *:not(button):not(input):not(textarea):not(select):not(output):not(option):not(.ol-overviewmap-box):not(svg):not(path) {
  color: var(--font-color);
}

.c4g-geosearch-form input, .c4g-sideboard > div div[class*=filter] input {
  background-color: var(--font-color);
}

.c4g-sideboard > div div[class*=filter].without-button:after   {
  background: var(--shadow-color);
  color: var(--font-color);
}

.c4g-geosearch-form input, .c4g-sideboard > div div[class*=filter] input::placeholder{
  color: var(--main-color);
}

.c4g-sideboard > div[class*=wrapper] {
  background: none;
}

.c4g-sideboard > div > div[class*=content] input {
  color: var(--main-color);
}

.c4g-sideboard > div > div[class*=content] textarea {
  color: var(--font-color);
}

.c4g-sideboard > div > div[class*=content] input ~ button {
  background: var(--font-color);
  color: var(--main-color);
}

.c4g-sideboard > div > div[class*=content] input ~ button:hover{
  border: 1px solid var(--shadow-color);
}

.c4g-sideboard > div > div[class*=content] input ~ button:active{
  background: none;
  color: var(--font-color);
  border: none;
}

.c4g-sideboard > div > div[class*=content] textarea ~ button {
  background: var(--font-color);
  color: var(--main-color);
}

.c4g-sideboard > div > div[class*=content] textarea ~ button:hover{
  border: 1px solid var(--shadow-color);
}

.c4g-sideboard > div > div[class*=content] textarea ~ button:active{
  background: none;
  color: var(--font-color);
  border: none;
}

/*-------------*/


/*------------external-------------*/

.c4g-external {
  background-color: var(--main-color);
}

.c4g-external > div div[class*=header] * {
  color: var(--font-color);
}

.c4g-external input {
  color: var(--main-color);
}

.c4g-external > div > div[class*=content] *:not(button):not(input):not(textarea):not(select):not(output):not(option) {
  color: var(--font-color);
}

/*-----external-permalink--------*/


.c4g-external .c4g-permalink-content textarea {
  color: var(--font-color);
}

.c4g-external .c4g-permalink-content button {
  color: var(--main-color);
  background-color: var(--font-color);
}

.c4g-external .c4g-permalink-content button:hover {
  border: 1px solid var(--shadow-color);
}

.c4g-external .c4g-permalink-content button:active {
  color: var(--font-color);
  background: none;
  border-color: transparent;
}
/*-------------*/
/*-------------*/