:root{
    --octave-black: #1a1a1f;
    --octave-white: #ffffff;
    --octave-white-transparent: #ffffff44;
    --octave-gray-1: #e7ebf2;
    --octave-gray-2: #cbd0d8;
    --octave-gray-3: #b2b8c4;
    --octave-gray-4: #6f7480;
    --octave-gray-5: #3e4047;
    --octave-orange-transparent: #f4660044;
    --octave-blue: var(--octave-gray-5);
    --octave-aqua: #00ffff;
    --octave-green: #4fff00;
    --octave-pink: #ff00c7;
    --octave-yellow: #fff500;
    --octave-orange: #f46600;
    --octave-blue-transparent: #0000ff44;
    --primary-accent-color: var(--octave-blue);
    --primary-accent-color-dark: var(--octave-aqua);
    --sidenav-width: 50px;
    --legend-group-menu-width: 120px;
    --legend-group-menu-height: 72px;
    --legend-group-menu-max-count: 7;
    --loader-height: 8px;
	--gpw-orange: var(--octave-gray-5);
	--gpw-orange-light: var(--octave-gray-4);
	}

/* Header */
.app-header,
.report-header,
.link-header,
.action-header,
.function-header {
  background-color: var(--octave-gray-5);
  color: white;
}

.app-logo {
  height: 28px;
  padding-left: 10px;
}

/* Info Banner */
.banner-iframe {
  min-height: 35px;
}

/* Projekt Info*/
.info-critical {
  color: #dc6b2f;
}

.info-important {
  color: #ed8b00;
}

.info-info {
  color: #f1c400;
}

/* Buttons */
.hxgn-primary-button:enabled {
  background-color: var(--gpw-orange);
  color: white;
}

.hxgn-primary-button.mat-accent {
  background-color: var(--gpw-orange-light);
  color: white;
}

.hxgn-primary-button-invert {
  color: var(--gpw-orange) !important;
}

.hxgn-user-button:enabled {
  background-color: var(--gpw-orange-light);
  color: white;
}

.hxgn-selected-slider-step {
  color:var(--gpw-orange)
}

.legend-button {
  color: #666666 !important;
}

.legend-selected-icon {
  color: var(--gpw-orange);
}

.about-button-color {
  color: var(--gpw-orange);
}

.password-button:enabled {
  color: var(--gpw-orange) !important;
}

.logout-button {
  background-color: var(--gpw-orange) !important;
}

/* input Fields*/
.mat-mdc-form-field.mat-focused .mat-mdc-floating-label {
 color: var(--gpw-orange) !important;
}
.mat-mdc-form-field .mdc-line-ripple::after {
 border-bottom-color: var(--gpw-orange);
}

/* Dropdown*/
.mat-primary .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--
disabled) .mdc-list-item__primary-text {
 color: var(--gpw-orange);
}

/* checkbox */
.mat-mdc-checkbox-checked .mdc-checkbox__background {
 background-color: var(--gpw-orange) !important;
 border-color: var(--gpw-orange) !important;
}

/* radio button*/
.mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:enabled:not(:checked)+.mdc-radio__background .mdc-radio__outer-circle {
 border-color: var(--gpw-orange) !important;
}

.mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle {
 border-color: var(--gpw-orange) !important;
}

.mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__inner-circle {
 border-color: var(--gpw-orange) !important;
}

/*Slider*/
.mat-mdc-slider.mat-primary {
 --mdc-slider-handle-color: var(--gpw-orange);
 --mdc-slider-focus-handle-color: var(--gpw-orange);
 --mdc-slider-hover-handle-color: var(--gpw-orange);
 --mdc-slider-active-track-color: var(--gpw-orange);
}

/*Slider Infra3D */


.mdc-switch.mdc-switch--selected:enabled .mdc-switch__icon {
  fill: var(--gpw-orange);
}

/* Progressbar */

.mdc-linear-progress__bar-inner {
 border-color: var(--gpw-orange-light) !important;
}
.mat-mdc-progress-bar .mdc-linear-progress__buffer-bar {
 border-color: var(--gpw-orange-light) !important;
}
.mat-progress-bar {
  height: 3px;
}

/* Scale-Bar */
.scaleLine-inner {
  border: 3px solid var(--gpw-orange);
  border-left: none;
  border-right: none;
  border-top: none;
}

/* Box-zoom*/
.ol-dragzoom {
  background-color: rgba(255, 255, 255, 0.4);
  border-color: var(--gpw-orange);
}

/* Spinner */
.mat-mdc-progress-spinner circle {
 stroke: var(--gpw-orange);
}

/* Map-Tooltip */
.map-tooltip {
  width: 170px;
}

/* Mat-Toggle */
.mat-mdc-slide-toggle .mdc-switch {
    --mat-slide-toggle-disabled-selected-handle-color: var(--primary-accent-color);
    --mat-slide-toggle-disabled-selected-icon-color: var(--primary-accent-color);
    --mat-slide-toggle-selected-focus-handle-color: var(--primary-accent-color);
    --mat-slide-toggle-selected-handle-color: var(--primary-accent-color);
    --mat-slide-toggle-selected-hover-handle-color: var(--primary-accent-color);
    --mat-slide-toggle-selected-icon-color: var(--primary-accent-color);
    --mat-slide-toggle-selected-pressed-handle-color: var(--primary-accent-color);
    --mat-slide-toggle-disabled-unselected-handle-color: var(--octave-white);
    --mat-slide-toggle-disabled-unselected-icon-color: var(--octave-white);
    --mat-slide-toggle-unselected-focus-handle-color: var(--octave-white);
    --mat-slide-toggle-unselected-handle-color: var(--octave-white);
    --mat-slide-toggle-unselected-hover-handle-color: var(--octave-white);
    --mat-slide-toggle-unselected-icon-color: var(--octave-white);
    --mat-slide-toggle-unselected-pressed-handle-color: var(--octave-white);
    --mat-slide-toggle-disabled-selected-track-color: var(--octave-gray-2);
    --mat-slide-toggle-selected-focus-track-color: var(--octave-gray-2);
    --mat-slide-toggle-selected-hover-track-color: var(--octave-gray-2);
    --mat-slide-toggle-selected-pressed-track-color: var(--octave-gray-2);
    --mat-slide-toggle-selected-track-color: var(--octave-gray-2);
    --mat-slide-toggle-disabled-unselected-track-color: var(--octave-gray-2);
    --mat-slide-toggle-unselected-focus-track-color: var(--octave-gray-2);
    --mat-slide-toggle-unselected-hover-track-color: var(--octave-gray-2);
    --mat-slide-toggle-unselected-pressed-track-color: var(--octave-gray-2);
   --mat-slide-toggle-unselected-track-color: var(--octave-gray-2);
  --mat-slide-toggle-selected-handle-color: var(--gpw-orange);
  --mat-slide-toggle-selected-hover-handle-color: var(--gpw-orange);
}

/* Radio Button*/
.mat-radio-button.mat-primary .mat-radio-inner-circle,
.mat-radio-button.mat-primary .mat-radio-ripple .mat-ripple-element:not(.mat-radio-persistent-ripple),
.mat-radio-button.mat-primary.mat-radio-checked .mat-radio-persistent-ripple,
.mat-radio-button.mat-primary:active .mat-radio-persistent-ripple {
  background-color: var(--gpw-orange-light);
}

.mat-radio-button.mat-primary.mat-radio-checked .mat-radio-outer-circle {
  border-color: var(--gpw-orange-light);
}

.mat-mdc-fab.mat-accent {
  --mdc-fab-small-container-color: var(--gpw-orange);
  --mdc-fab-container-color: var(--gpw-orange-light);
  --mdc-fab-icon-color: #fff;
  --mat-mdc-fab-color: #fff;
  --mat-fab-small-ripple-color: var(--gpw-orange);
}

.mat-mdc-mini-fab.mat-accent {
  --mdc-fab-small-container-color: var(--gpw-orange);
  --mat-fab-small-foreground-color: #FFF;
  --mat-fab-small-state-layer-color: var(--gpw-orange-light);
  --mat-fab-small-ripple-color: var(--gpw-orange-light);
}

.mat-mdc-fab.mat-primary {
  --mdc-fab-container-color: var(--gpw-orange);
  --mdc-fab-icon-color: #fff;
  --mat-mdc-fab-color: #fff;
} 

.mat-mdc-mini-fab.mat-primary {
  --mdc-fab-container-color: var(--gpw-orange);
  --mdc-fab-icon-color: #fff;
  --mat-mdc-fab-color: #fff;
}

.mat-mdc-slide-toggle .mdc-switch .mdc-switch__ripple {
  height:var(--mdc-switch-state-layer-size, 48px);
  width:var(--mdc-switch-state-layer-size, 48px);
}

.mat-toolbar.mat-accent {
  background:var(--gpw-orange);
  color:#fff;
}

.app-search-result-toc-hint-more-result {
 color: var(--gpw-orange) !important;
 font-size: 14px !important;
}

.app-search-result-toc-title-more-result {
 color: var(--gpw-orange-light) !important;
 font-size: 12px !important;
}

.app-search-result-hint-for-more-result-items {
 color: var(--gpw-orange) !important;
}

.app-about {
color: var(--gpw-orange) ;
}

/*Eigene Tabs*/

.mat-primary.hxgn-Filter.HED.ABSP.iFrame {
 background-color: var(--gpw-orange) !important;
}

.mat-accent.hxgn-Filter.HED.ABSP.iFrame {
 background-color: var(--gpw-orange-light) !important;
 color:white;
}

/*Slider bei Legende/Layerkonfiguration*/

.mat-accent {
  --mat-slider-ripple-color: var(--gpw-orange) !important;
  --mat-slider-hover-state-layer-color: rgba(240, 160, 130, .05) !important;
  --mat-slider-focus-state-layer-color: rgba(240, 160, 130, .2) !important;
  --mdc-slider-handle-color: var(--gpw-orange) !important;
  --mdc-slider-focus-handle-color: var(--gpw-orange) !important;
  --mdc-slider-hover-handle-color: var(--gpw-orange) !important;
  --mdc-slider-active-track-color: var(--gpw-orange) !important;
  --mdc-slider-inactive-track-color: var(--gpw-orange) !important;
  --mdc-slider-with-tick-marks-inactive-container-color: var(--gpw-orange) !important;
  --mdc-slider-with-tick-marks-active-container-color: white !important;
}

/*Hintergrundkarten*/

.legend-group-menu-container {
  display: flex;
  max-width: calc(var(--legend-group-menu-width) * var(--legend-group-menu-max-count));
  max-height: calc(var(--legend-group-menu-height) * var(--legend-group-menu-max-count));
  overflow: auto;
  scrollbar-color: #ffffff75 #248c9166;
  background-color: transparent;
  border-radius: 5px;
}

.legend-group-menu-item-image {
  width: 100%;
  height: 100%;
  border-radius: 3px;
}

.legend-group-menu-item:hover {
  border: 2px solid var(--gpw-orange-light);
  background-color: #FFFFFF80;
}
.legend-group-menu-item-selected {
  border: 2px solid var(--gpw-orange);
  background-color: #FFFFFF80;
}

.legend-group-menu-item-title {
  position: relative;
  left: 0px;
  top: calc(-1 * var(--legend-group-menu-height));
  max-width: var(--legend-group-menu-width);
  word-wrap: break-word;
  font-size: 8;
  /*font-weight: bold;*/
  color: #666;
  text-shadow: -1px -1px 0 #FFFFFF,
                1px -1px 0 #FFFFFF,
               -1px  1px 0 #FFFFFF,
                1px  1px 0 #FFFFFF;
  box-sizing: border-box;
  background-color: rgba(255, 255, 255, 0.7); /* Light background with slight transparency */
  padding: 2px 2px;                          /* Space around the text */
  /*border: 1px solid #ccc;                    /* Subtle border */
  border-radius: 2px;                        /* Rounded corners */
  /*box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);  /* Optional: soft shadow for depth */
  z-index: 10; 
}

/*skizieren, digitalisieren*/
.mat-button-toggle-appearance-standard.mat-button-toggle-checked {
  color: var(--octave-black) !important;
  background-color: var(--octave-white) !important;
  border-bottom: 2px solid var(--gpw-orange) !important;
  font-weight: 500;
}

/* Zeitreise Anfang*/

input[type=range] {
  -webkit-appearance:none
}
input[type=range]:focus {
  outline:none
}
input[type=range]::-webkit-slider-runnable-track {
  -webkit-appearance:none;
  height:5px;
  background:#ddd;
  border:none;
  border-radius:3px
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background:#ccc
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none;
  border:2px solid var(--gpw-orange);
  height:15px;
  width:15px;
  border-radius:25px;
  background:rgba(255,255,255,.98);
  margin-top:-5px
}
input[type=range]:focus:-webkit-slider-thumb {
  outline:none
}
input[type=range] {
  background:transparent
}
input[type=range]::-moz-range-track {
  -webkit-appearance:none;
  height:5px;
  background:#ddd;
  border:none;
  border-radius:3px
}
input[type=range]::-moz-range-thumb {
  -webkit-appearance:none;
  border:2px solid var(--gpw-orange);
  height:15px;
  width:15px;
  border-radius:25px;
  background:rgba(255,255,255,.98);
  margin-top:-5px
}


/* Zeitreise Ende*/