/*
 *  Controls - general
 */
.ol-control,
.c4g-control button {
  background-color: #eee;
  background-color: rgba(255,255,255,.4);
}
.ol-control:hover,
.c4g-control button:focus,
.c4g-control button:hover {
  background-color: rgba(255,255,255,.6);
}
.ol-control button,
.c4g-permalink-popup button {
  color: #fff;
  background-color: #7b98bc;
  background-color: rgba(0,60,136,.5);
  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,
.c4g-portside-control.c4g-open button,
.c4g-portside-wrapper,
.c4g-starboard-wrapper {
  background-color: #4c6079;
  background-color: rgba(0,60,136,.7);
}


/*
 *  Tooltips
 */
.ol-control button[title]:after {
  text-shadow: 0 0 2px #fff;
}
.ol-control button[title]:focus:after,
.ol-control button[title]:hover:after {
  background: #fff;
  background: rgba(255,255,255,.6);
  color: #000;
  border: 3px solid transparent;
}

/*
 *  Spinner
 */
.c4g-spinner span {
  color: rgba(0,60,136,.7);
  text-shadow: 0 0 2px white, 0 0 5px rgba(0,60,136,.7);
}


/*
 *  Control-container-bl & Scale-Line
 */
.c4g-control-container-bottom-left-sub,
.ol-scale-line {
  background: #95b9e6;
  background: rgba(0,60,136,.3);
}
.ol-scale-line-inner {
  border-color: #eee;
  color: #eee;
}
.c4g-control-container-bottom-left-sub {
  color: #fff;
}


/*
 *  Portside & Starboard
 */
.c4g-portside-container,
.c4g-starboard-container {
  background-color: rgba(255,255,255,.9);
}
.c4g-portside-headline,
.c4g-starboard-headline {
  color: #fff;
  text-shadow: 0 0 1px black;
}
.c4g-starboard-headline a{
  color: rgba(0,60,136,.7);
  font-family: FontAwesome;
}
.c4g-portside-top-toolbar {
  border-color: rgba(255,255,255,.3);
  box-shadow: 0 -1px 0 0 rgba(0,0,0,.3);
}
.c4g-portside-content-container,
.c4g-starboard-content-container {
  background: #fff;
  background: rgba(255,255,255,.9);

  box-shadow: inset 0 0 0 1px white;
}
.c4g-portside-container button,
.c4g-starboard-container button {
  color: #4c6079;
  color: rgba(0,60,136,.7);
  border-color: white;
  background-color: #eee;
  background-color: rgba(255,255,255,.4);
}
.c4g-portside-container button:focus,
.c4g-portside-container button:hover,
.c4g-starboard-container button:focus,
.c4g-starboard-container button:hover {
  color: #fff;
  text-shadow: 0 0 1px rgba(0,60,136,.7);
  background-color: rgba(255,255,255,.6);
}
.c4g-portside-container button[title]:after,
.c4g-starboard-container button[title]:after {
  color: rgba(0,60,136,.7);
  text-shadow: 0 0 1px white;
  border-color: white;
  background-color: #eee;
  background-color: rgba(255,255,255,.8);
}
button.c4g-draw-trigger {
  background-color: transparent;
  border: 1px solid transparent;
}
button.c4g-draw-trigger:focus,
button.c4g-draw-trigger:hover {
  background-color: white;
  border-color:#789;
  border-color: rgba(0,60,136,.3);
  box-shadow: 0 0 0 1px white;
}
button.c4g-draw-trigger.c4g-active {
  background: rgba(0,60,136,.7);
  border-radius: 0;
}

.c4g-editor-draw-options,
.c4g-portside-content-container h4,
.c4g-starboard-content-container h4 {
  color: rgba(0,60,136,.7);
  text-shadow: 0 0 1px white;
  border-color: rgba(0,60,136,.3);
  background-color: rgba(255,255,255,.5);
  box-shadow: 0 1px 0 0 white;
}
.c4g-portside-container h4 button:hover {
  background-color: #4c6079;
  background-color: rgba(0,60,136,.7);
}
.c4g-portside-content-container p,
.c4g-starboard-content-container p {
  color: rgba(0,60,136,.7);
  text-shadow: 0 0 1px white;
}
.c4g-content-select input {
  color: rgba(0,60,136,.7);
  text-shadow: 0 0 1px white;
  border-color: rgba(0,60,136,.3);
  background-color: rgba(255,255,255,.5);
  box-shadow: inset 1px 1px 0 0 white,
              1px 1px 0 0 white;
}
.c4g-content-select input:hover {
  background-color: rgba(255,255,255,.9);
}
.c4g-content-select input:focus {
  border-color: rgba(0,60,136,.6);
  background-color: rgba(255,255,255,.9);
}

.c4g-portside-statusbar,
.c4g-starboard-statusbar {
  border-color: #abc;
  border-color: rgba(255,255,255,.3);
  box-shadow: 0 -1px 0 0 rgba(0,0,0,.3);
}

.c4g-portside-viewtriggerbar button.c4g-active,
.c4g-starboard-viewtriggerbar button.c4g-active {
  color: #4c6079;
  color: rgba(0,60,136,.7);
  background-color: white;
  /*background-color: rgba(255,255,255,.9);*/
}

.c4g-layertree li,
.c4g-baselayertree li {
  border-color: rgba(0,60,136,.3);
  box-shadow: 0 1px 0 0 white;
}
.c4g-layertree li ul li,
.c4g-baselayertree li ul li {
  border-color: rgba(0,60,136,.3);
  box-shadow: inset 1px 1px 0 0 white;
}
.c4g-layertree a,
.c4g-layertree span,
.c4g-baselayertree a,
.c4g-baselayertree span {
  color: #4c6079;
  color: rgba(0,60,136,.7);
}
/*.c4g-layertree a.c4g-active,*/
.c4g-baselayertree a.c4g-active,
.c4g-layertree a:hover,
.c4g-baselayertree a:hover {
  background-color: rgba(255,255,255,.5);
}
.c4g-layertree a:after,
.c4g-baselayertree a:before {
  border-color: #4c6079;
  border-color: rgba(0,60,136,.3);
}
.c4g-baselayertree a:before {
  box-shadow: 1px 0 0 white;
}
.c4g-layertree span:hover {
  color: white;
  text-shadow: 0 0 1px #4c6079;
  text-shadow: 0 0 1px rgba(0,60,136,.7);
}
.c4g-starboard-filter-match > a {
  color: rgb(0,60,136);
}

/*
 * Router
 */
.c4g-router-input-wrapper {
  color: white;
  text-shadow: 0 0 1px black;
}
.c4g-router-input-wrapper > input {
  color: rgb(0,60,136);
  text-shadow: 0 0 1px white;
  border-color: rgba(0,60,136,.3);
  background-color: rgba(255,255,255,.3);
  box-shadow: inset 1px 1px 0 0 rgba(0,0,0,.3),
              1px 1px 0 0 rgba(255,255,255,.3);
}
.c4g-router-input-wrapper > button,
.c4g-router-input-wrapper > button:hover {
  background-color: transparent;
}
.c4g-router-input-wrapper > input:hover,
.c4g-router-input-wrapper > input:active,
.c4g-router-input-wrapper > input:focus {
  background-color: rgba(255,255,255,.5);
}
.c4g-router-instruction-table {
  color: rgba(0,60,136,.7);
  text-shadow: 0 1px white;
}
.c4g-router-instruction-table td {
  border-color: rgba(0,60,136,.3);
  box-shadow: 0 1px 0 0 white;
}
.c4g-router-attribution-wrapper {
  color: white;
  text-shadow: 0 0 1px black;
}
.c4g-router-attribution-wrapper a {
  color: white;
}


/*
 *  Geosearch
 */
.c4g-geosearch input {
  color: rgba(0,60,136,.6);
  background-color: rgba(255,255,255,.3);
  box-shadow: inset 0 0 3px rgba(0,60,136,.9);
}
.c4g-geosearch input:hover,
.c4g-geosearch input:focus {
  background-color: white;
}

/*
 *  Overview-map
 */
.c4g-overviewmap .ol-overviewmap-box {
  border-color: rgba(255,255,255,.5);
  box-shadow: 0 0 10px rgba(0,60,136,.9);
}


/*
 *  Attribution
 */
.ol-attribution ul {
  color: #000;
  text-shadow: 0 0 2px #fff;
}
.ol-attribution:not(.ol-collapsed) {
  background: rgba(255,255,255,.8);
}

/*
 * Permalink
 */
div.c4g-permalink-popup {
  background: rgba(255,255,255,.4);
}
div.c4g-permalink-popup:hover {
  background: rgba(255,255,255,.6);
}
.c4g-permalink-popup button.c4g-copy {
  border-radius: 0;
}
.c4g-permalink-popup button.c4g-refresh {
  border-radius: 0 3px 3px 0;
}
.c4g-permalink-popup input {
  color: rgba(0,60,136,.6);
  background-color: rgba(255,255,255,.3);
  box-shadow: inset 0 0 3px rgba(0,60,136,.9);
}
.c4g-permalink-popup input:hover,
.c4g-permalink-popup input:focus {
  background-color: white;
}

/*
 *  Popup
 */
div.c4g-tooltip-popup,
div.c4g-active.c4g-popup-wrapper {
  color: black;
  background-color: rgba(255,255,255,1);
  border-color: #ccc;

  box-shadow: inset 0 0 0 1px white;
  -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
}
div.c4g-tooltip-popup:before,
div.c4g-popup-wrapper:before {
  border-top-color: rgba(255,255,255,1);
}
div.c4g-horizontal.c4g-tooltip-popup:before {
  border-top-color: transparent;
  border-right-color: rgba(255,255,255,1);
}

button.c4g-popup-close {
  color: rgba(0,60,136,.6);
  background-color: transparent;
}
button.c4g-popup-close:hover {
  color: white;
  text-shadow: 0 0 3px rgba(0,60,136,.6);
  background-color: transparent;
}
button.c4g-popup-route-from,
button.c4g-popup-route-to {
    color: #333;
    background-color: #f9f9f9;
    border-color: #ccc;
}
button.c4g-popup-route-from:hover,
button.c4g-popup-route-to:hover {
    background-color: white;
    box-shadow: 0 0 3px #ccc;
}

/*
 * Panel
 */
.c4g-top-panel-container {
  background: rgba(0,60,136,0.7);
}

.c4g-panel-button {
  background-color: rgba(0,60,136,.7);
}

.c4g-panel-left-wrapper {
  /*background: rgba(255,255,255,.9);*/
}
.c4g-panel-mid-wrapper {
  /*background: rgba(255,255,255,.9);*/
}
.c4g-panel-right-wrapper {
  /*background: rgba(255,255,255,.9);*/
}

.c4g-panel-main-form {
  /*background: rgba(255,255,255,.9);*/
}

.c4g-panel-content-wrapper {
  background: rgba(255,255,255,.9);
}
.c4g-panel-button-wrapper {
  /*background: rgba(255,255,255,.9);*/
}

.c4g-panel-slidebutton {
  background-color: rgba(0,60,136,1.0);
}