: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,
.ol-control button,
.c4g-permalink-popup button {
  color: rgba(255,255,255,.9);
  color: var(--font-color);
  background-color: rgba(24, 61, 93,.8);
  background-color: var(--main-color);
  background-image: none;
}

.ol-control:hover,
.ol-control button:focus,
.ol-control button:hover,
.c4g-permalink-popup button:focus,
.c4g-permalink-popup button:hover,
.c4g-permalink.c4g-open button,
.c4g-portside-control.c4g-open button {
  background-color: rgba(0,155,222,.5);
  background-color: var(--shadow-color);
}

.c4g-portside-wrapper,
.c4g-starboard-wrapper {
  background-color: rgba(24, 61, 93,.8);
  background-color: var(--main-color);
  color: rgba(255,255,255,.9);
  color: var(--font-color);
}


/*
 *  Tooltips
 */
.ol-control button[title]:after {
  display: none;
}
.ol-control button[title]:focus:after,
.ol-control button[title]:hover:after {
  display: none;
  background: rgba(255,255,255,.9);
  background: var(--font-color);
  color: inherit;
  border: 3px solid transparent;
}

/*
 *  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-color: rgba(24, 61, 93,.8);
  background: var(--main-color);
}
.ol-scale-line-inner {
  border-color: rgba(255,255,255,.9);
  border-color: var(--font-color);
  color: rgba(255,255,255,.9);
  color: var(--font-color);
}
.c4g-control-container-bottom-left-sub {
  color: rgba(255,255,255,.9);
  color: var(--font-color);
}


/*
 *  Portside & Starboard
 */
.c4g-portside-container,
.c4g-starboard-container {
  background-color: transparent;/*var(--shadow-color);*/
}
.c4g-portside-headline,
.c4g-starboard-headline {
  color: rgba(255,255,255,.9);
  color: var(--font-color);
  background-color: transparent;/*var(--main-color);*/
}
.c4g-starboard-headline-link{
  color: rgba(255,255,255,.9);
  color: var(--font-color);
}
.c4g-portside-top-toolbar {
  border-color: rgba(255,255,255,.9);
  border-color: var(--font-color);
}
.c4g-starboard-content-container .contentHeadline,
.c4g-portside-content-container .contentHeadline {
  border-color: rgba(24, 61, 93,.8);
  border-color: var(--main-color);
  color: rgba(255,255,255,.9);
  color: var(--font-color);
}
.c4g-editor-draw-options {
  border-color: rgba(0,155,222,.5);
  border-color: var(--shadow-color);
  color: rgba(255,255,255,.9);
  color: var(--font-color);
  background-color: rgba(24, 61, 93,.8);
  background-color: var(--main-color);
}
.c4g-portside-content-container,
.c4g-starboard-content-container {
  background: transparent;/*var(--font-color);*/
}
.c4g-portside-container button,
.c4g-starboard-container button {
  color: rgba(255,255,255,.9);
  color: var(--font-color);
  border-color: rgba(0,155,222,.5);
  border-color: var(--shadow-color);
  background-color: rgba(24, 61, 93,.8);
  background-color: var(--main-color);
}
.c4g-starboard-buttonbar,
.c4g-portside-buttonbar {
  border-color: rgba(255,255,255,.9);
  border-color: var(--font-color);
}

.c4g-starboard-titlebar .c4g-starboard-buttonbar button,
.c4g-portside-titlebar .c4g-portside-buttonbar button {
  color: rgba(24, 61, 93,.8);
  color: var(--main-color);
  border-color: rgba(0,155,222,.5);
  border-color: var(--shadow-color);
  background-color: rgba(255,255,255,.9);
  background-color: var(--font-color);
}
.c4g-portside-container button:focus,
.c4g-portside-container button:hover,
.c4g-starboard-container button:focus,
.c4g-starboard-container button:hover {
  color: rgba(0,155,222,.5);
  color: var(--shadow-color);
  background-color: rgba(24, 61, 93,.8);
  background-color: var(--main-color);
}
.c4g-portside-container button[title]:after,
.c4g-starboard-container button[title]:after {
  color: rgba(255,255,255,.9);
  color: var(--font-color);
  border-color: rgba(255,255,255,.9);
  border-color: var(--font-color);
  background-color: transparent;
}
.c4g-portside-container .c4g_brick_dialog input {
  color: rgba(24, 61, 93,.8);
  color: var(--main-color);
}
.c4g-portside-container .c4g_brick_dialog #send-dialog,
.c4g-portside-container .c4g_brick_dialog #cancel-dialog{
  color: rgba(24, 61, 93,.8);
  color: var(--main-color);
  border-color: rgba(0,155,222,.5);
  border-color: var(--shadow-color);
  background-color: rgba(255,255,255,.9);
  background-color: var(--font-color);
}

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-portside-content-container .contentHeadline,
.c4g-starboard-content-container .contentHeadline {
  color: rgba(255,255,255,.9);
  color: var(--font-color);
  border-color: rgba(24, 61, 93,.8);
  border-color: var(--main-color);
  background-color: transparent;/*var(--font-color);*/
}
.c4g-starboard-content-container .contentHeadline a {
    color: inherit;
    border-color: inherit;
}
.c4g-portside-container .contentHeadline button:hover {
  background-color: rgba(24, 61, 93,.8);
  background-color: var(--main-color);
}
.c4g-portside-content-container p,
.c4g-starboard-content-container p {
  color: rgba(255,255,255,.9);
  color: var(--font-color);
}

span.c4g-active ul {
  background-color: rgba(24, 61, 93,.8);
  background-color: var(--main-color);
  color: rgba(255,255,255,.9);
  color: var(--font-color);
}
span.c4g-active ul li{
  background-color: rgba(24, 61, 93,.8);
  background-color: var(--main-color);
}
span.c4g-active ul li.c4g-active{
  background-color: rgba(0,155,222,.5);
  background-color: var(--shadow-color);
}

.c4g-content-select input:focus {
  color: rgba(24, 61, 93,.8);
  color: var(--main-color);
  border-color: rgba(24, 61, 93,.8);
  border-color: var(--main-color);
  background-color: rgba(255,255,255,.9);
  background-color: var(--font-color);
}

.c4g-portside-statusbar,
.c4g-starboard-statusbar {
  border-color: rgba(0,155,222,.5);
  border-color: var(--shadow-color);
  background-color: transparent;
  color: transparent;
}

.c4g-starboard-viewtriggerbar,
.c4g-portside-viewtriggerbar {
  border-color: rgba(0,155,222,.5);
  border-color: var(--shadow-color);
}
.c4g-starboard-viewtriggerbar button,
.c4g-portside-viewtriggerbar button {
  color: rgba(255,255,255,.9);
  color: var(--font-color);
  border-color: rgba(0,155,222,.5);
  border-color: var(--shadow-color);
  background-color: rgba(24, 61, 93,.8);
  background-color: var(--main-color);
}

.c4g-portside-viewtriggerbar button.c4g-active,
.c4g-starboard-viewtriggerbar button.c4g-active {
  color: rgba(24, 61, 93,.8);
  color: var(--main-color);
  background-color: rgba(255,255,255,.9);
  background-color: var(--font-color);
}

.c4g-layertree a,
.c4g-layertree span,
.c4g-baselayertree a,
.c4g-baselayertree span {
  color: rgba(255,255,255,.9);
  color: var(--font-color);
}
.c4g-baselayertree a.c4g-active {
  background-color: rgba(0,155,222,.5);
  background-color: var(--shadow-color);
  color: rgba(255,255,255,.9);
  color: var(--font-color);
}
.c4g-layertree a:hover,
.c4g-baselayertree a:hover {
  background-color: rgba(255,255,255,.9);
  background-color: var(--font-color);
  color: rgba(24, 61, 93,.8);
  color: var(--main-color);
}
.c4g-layertree a:after,
.c4g-baselayertree a:before {
  border-color: rgba(24, 61, 93,.8);
  border-color: var(--main-color);
}
.c4g-layertree span:hover {
  color: rgba(0,155,222,.5);
  color: var(--shadow-color);
}
/*.c4g-starboard-filter-match > a {*/
  /*color: var(--main-color);*/
/*}*/
.c4g-starboard-filter input[type=text]{
  border-color: rgba(0,155,222,.5);
  border-color: var(--shadow-color);
}

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

.c4g-starboard-filter i{
  color: rgba(0,155,222,.5);
  color:var(--shadow-color);
}

.c4g-starboard-filter input[type=text]:focus + i{
  color: rgba(24, 61, 93,.8);
  color:var(--main-color);
}

/*
 *  Geosearch
 */
.c4g-geosearch input {
  color: rgba(24, 61, 93,.8);
  color: var(--main-color);
  background-color: rgba(255,255,255,.9);
  background-color: var(--font-color);
  border-color: rgba(0,155,222,.5);
  border-color: var(--shadow-color);
}

/*
 *  Overview-map
 */

.c4g-overviewmap .ol-overviewmap-box {
  border-color: rgba(24, 61, 93,.8);
  border-color: var(--main-color);
}

.ol-overviewmap-map .ol-viewport {
  box-shadow: 0px 0px 8px 2px var(--main-color);
  border: 1px solid var(--main-color);
}

/*
 *  Attribution
 */
.ol-attribution ul {
  color: rgba(255,255,255,.9);
  color: var(--font-color);
}
.ol-attribution a {
  color: rgba(255,255,255,.9);
  color: var(--font-color)!important;
  text-decoration: none;
}
.ol-attribution:not(.ol-collapsed) {
  background: rgba(24, 61, 93,.8);
  background: var(--main-color);
}

/*
 * Permalink
 */
.c4g-permalink-popup input {
  color: rgba(255,255,255,.9);
  color: var(--font-color);
  background-color: rgba(24, 61, 93,.8);
  background-color: var(--main-color);
}
.c4g-permalink-popup input:hover,
.c4g-permalink-popup input:focus {
  background-color: rgba(24, 61, 93,.8);
  background-color: var(--main-color);
}

/*
 *  Popup
 */
div.c4g-tooltip-popup,
div.c4g-active.c4g-popup-wrapper {
  color: rgba(255,255,255,.9);
  color: var(--pu-font-color);
  background-color: rgba(24, 61, 93,.8);
  background-color: var(--pu-main-color);
  border-color: rgba(0,155,222,.5);
  border-color: var(--shadow-color);

  -webkit-filter: drop-shadow(0 1px 4px rgba(0,155,222,.5));
  -webkit-filter: drop-shadow(0 1px 4px var(--shadow-color));
  filter: drop-shadow(0 1px 4px rgba(0,155,222,.5));
  filter: drop-shadow(0 1px 4px var(--shadow-color));
}
/*div.c4g-tooltip-popup:before,*/
div.c4g-popup-wrapper:before {
  border-top-color: rgba(24, 61, 93,.8);
  border-top-color: var(--pu-main-color);
}
.c4g_popup_header_featurename {
  color: rgba(255,255,255,.9);
  color: var(--pu-font-color);
}

.c4g_popup_header_featuretype {
  color: rgba(0,155,222,.5);
  color: var(--shadow-color);
}

.c4g-popup-wrapper a {
  color: rgba(255,255,255,.9);
  color: var(--pu-font-color);
}

.c4g_brick_popup_button a {
  color: rgba(24, 61, 93, .8);
  color: var(--pu-main-color);
  background-color: rgba(255, 255, 255, .9);
  background-color: var(--pu-font-color);
  border-color: rgba(255, 255, 255, .9);
  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: rgba(255,255,255,.9);
  color: var(--pu-font-color);
  background-color: rgba(24, 61, 93,.8);
  background-color: var(--pu-main-color);
}
button.c4g-popup-close:hover {
  color: rgba(255,255,255,.9);
  color: var(--pu-font-color);
  background-color: rgba(24, 61, 93,.8);
  background-color: var(--pu-main-color);
}
/*
 * Panel
 */
.c4g-top-panel-container {
  background: rgba(24, 61, 93,.8);
  background: var(--main-color);
}

.c4g-panel-button {
  background-color: rgba(24, 61, 93,.8);
  background-color: var(--main-color);
}

.c4g-panel-content-wrapper {
  background: rgba(24, 61, 93,.8);
  background: var(--main-color);
  color: rgba(255,255,255,.9);
  color: var(--font-color);
}

.c4g-panel-slidebutton {
  background-color: rgba(24, 61, 93,.8);
  background-color: var(--main-color);
}
.c4g-portside-wrapper .formbody label {
  color: rgba(255,255,255,.9);
  color: var(--font-color);
}

.c4g-portside-wrapper .formbody input {
  background-color: rgba(255,255,255,.9);
  background-color: var(--font-color);
  border-color: rgba(0,155,222,.5);
  border-color:  var(--shadow-color);
  color: rgba(24, 61, 93,.8);
  color:  var(--main-color);
}

.c4g-portside-wrapper .formbody .submit {
  background-color: rgba(24, 61, 93,.8);
  background-color: var(--main-color);
  border-color: rgba(0,155,222,.5);
  border-color:  var(--shadow-color);
  color: rgba(255,255,255,.9);
  color:  var(--font-color);
}

.c4g-control-container-top-left::-webkit-scrollbar-track,
.c4g-starboard-content-container::-webkit-scrollbar-track,
.c4g-portside-content-container::-webkit-scrollbar-track,
.c4g-popup-wrapper .c4g-popup-content::-webkit-scrollbar-track {
  background-color: rgba(255,255,255,.9);
  background-color: var(--font-color);
}
.c4g-control-container-top-left::-webkit-scrollbar-thumb,
.c4g-starboard-content-container::-webkit-scrollbar-thumb,
.c4g-portside-content-container::-webkit-scrollbar-thumb,
.c4g-popup-wrapper .c4g-popup-content::-webkit-scrollbar-thumb {
  background-color: rgba(0,155,222,.5);
  background-color: var(--shadow-color);
}
.c4g-control-container-top-left::-webkit-scrollbar-thumb:hover,
.c4g-starboard-content-container::-webkit-scrollbar-thumb:hover,
.c4g-portside-content-container::-webkit-scrollbar-thumb:hover,
.c4g-popup-wrapper .c4g-popup-content::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0,155,222,.5);
  background-color: var(--shadow-color);
}

.c4g-baselayertree .c4g-overlay-toggle::-webkit-slider-runnable-track {
  box-shadow: 1px 1px 1px rgba(0,155,222,.5);
  box-shadow: 1px 1px 1px var(--shadow-color);
  background: rgba(255,255,255,.9)!important;
  background: var(--font-color)!important;
  border: 0px solid rgba(0,155,222,.5);
  border: 0px solid var(--shadow-color);
}
.c4g-baselayertree .c4g-overlay-toggle::-webkit-slider-thumb {
  box-shadow: 0px 0px 0px rgba(0,155,222,.5);
  box-shadow: 0px 0px 0px var(--shadow-color);
  background: rgba(0,155,222,.5);
  background: var(--shadow-color);
}
.c4g-baselayertree .c4g-overlay-toggle:focus::-webkit-slider-runnable-track {
  background: rgba(255,255,255,.9);
  background: var(--font-color);
}
.c4g-baselayertree .c4g-overlay-toggle::-moz-range-track {
  box-shadow: 1px 1px 1px rgba(0,155,222,.5);
  box-shadow: 1px 1px 1px var(--shadow-color);
  background: rgba(255,255,255,.9);
  background: var(--font-color);
  border: 0px solid rgba(0,155,222,.5);
  border: 0px solid var(--shadow-color);
}
.c4g-baselayertree .c4g-overlay-toggle::-moz-range-thumb {
  box-shadow: 0px 0px 0px rgba(0,155,222,.5);
  box-shadow: 0px 0px 0px var(--shadow-color);
  border: 1px solid rgba(0,155,222,.5);
  border: 1px solid var(--shadow-color);
  background: rgba(0,155,222,.5);
  background: var(--shadow-color);
}
.c4g-baselayertree .c4g-overlay-toggle::-ms-track {
  background: transparent;
  border-color: transparent;
  color: transparent;
}
.c4g-baselayertree .c4g-overlay-toggle::-ms-fill-lower {
  background: rgba(0,155,222,.5);
  background: var(--shadow-color);
  border: 0px solid rgba(0,155,222,.5);
  border: 0px solid var(--shadow-color);
  box-shadow: 1px 1px 1px rgba(0,155,222,.5);
  box-shadow: 1px 1px 1px var(--shadow-color);
}
.c4g-baselayertree .c4g-overlay-toggle::-ms-fill-upper {
  background: rgba(0,155,222,.5);
  background: var(--shadow-color);
  border: 0px solid rgba(0,155,222,.5);
  border: 0px solid var(--shadow-color);
  box-shadow: 1px 1px 1px rgba(0,155,222,.5);
  box-shadow: 1px 1px 1px var(--shadow-color);
}
.c4g-baselayertree .c4g-overlay-toggle::-ms-thumb {
  box-shadow: 0px 0px 0px rgba(0,155,222,.5);
  box-shadow: 0px 0px 0px var(--shadow-color);
  border: 1px solid rgba(0,155,222,.5);
  border: 1px solid var(--shadow-color);
  background: rgba(0,155,222,.5);
  background: var(--shadow-color);
}
.c4g-baselayertree .c4g-overlay-toggle:focus::-ms-fill-lower {
  background: rgba(0,155,222,.5);
  background: var(--shadow-color);
}
.c4g-baselayertree .c4g-overlay-toggle:focus::-ms-fill-upper {
  background: rgba(0,155,222,.5);
  background: var(--shadow-color);
}
.c4g-portside-content-container p {
  color: rgba(255,255,255,.9);
  color: var(--font-color);
}
.c4g_maps_portside_measure_paragraph {
  color: rgba(255,255,255,.9);
  color: var(--font-color);
}
.c4g_maps_portside_measure_paragraph_surfacearea {
  color: rgba(255,255,255,.9);
  color: var(--font-color);
}