/*
 Anpassungen Corporate Design für Stadt Aachen

 Die Einstellungen überschreiben die Standard masterportal.css
*/
/* --- Global Farbeinstellungen --- */
:root {
  --bs-black: #000;
  --bs-white: #ffffff;
  --bs-gray: #eeeeee;
  --bs-yellow:#bcfd08;
  --bs-primary: #363636;
  --bs-secondary: #323232;
  --bs-success: #198754;
  --bs-info: #363636;
  --bs-info-rgb: 54,54,54;
  --bs-warning: #ffc107;
  --bs-danger: #E10019;

  --bs-border-radius: 0;
  --bs-border-radius-pill: 0;
}

/* --- verwendete Fonts --- */
/* TheMixBlack */
@font-face {
  font-family: 'MasterPortalHeader';
  src: url('webfonts/themix/TheMix_900_.eot');
  src: url('webfonts/themix/TheMix_900_.eot?#iefix') format('embedded-opentype'),
  url('webfonts/themix/TheMix_900_.woff') format('woff'),
  url('webfonts/themix/TheMix_900_.svg#TheMix_900_') format('svg');
  font-weight: 700;
}
/* FF Transit Regular */
@font-face {
  font-family: 'MasterPortalFont';
  src: url('webfonts/transit/2F8289_1_0.eot');
  src: url('webfonts/transit/2F8289_1_0.eot?#iefix') format('embedded-opentype'),
  url('webfonts/transit/2F8289_1_0.woff2') format('woff2');
}
/* FF Transit Regular */
@font-face {
  font-family: 'MasterPortalButtonDescription';
  src: url('webfonts/transit/2F8289_1_0.eot');
  src: url('webfonts/transit/2F8289_1_0.eot?#iefix') format('embedded-opentype'),
  url('webfonts/transit/2F8289_1_0.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* FF Transit Regular */
@font-face {
  font-family: 'MasterPortalButtonText';
  src: url('webfonts/transit/2F8289_0_0.eot');
  src: url('webfonts/transit/2F8289_0_0.eot?#iefix') format('embedded-opentype'),
  url('webfonts/transit/2F8289_0_0.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

/* TheMixLight */
@font-face {
  font-family: 'MasterPortalButtonTitle';
  src: url('webfonts/themix/TheMix_300_.eot');
  src: url('webfonts/themix/TheMix_300_.eot?#iefix') format('embedded-opentype'),
  url('webfonts/themix/TheMix_300_.woff') format('woff'),
  url('webfonts/themix/TheMix_300_.svg#TheMix_300_') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* FF Transit Regular */
@font-face {
  font-family: 'MasterPortalFont Italic';
  src: url('webfonts/transit/2F8289_1_0.eot');
  src: url('webfonts/transit/2F8289_1_0.eot?#iefix') format('embedded-opentype'),
  url('webfonts/transit/2F8289_1_0.woff2') format('woff2');
}
/* FF Transit Regular */
@font-face {
  font-family: 'MasterPortalFont Bold';
  src: url('webfonts/transit/2F8289_1_0.eot');
  src: url('webfonts/transit/2F8289_1_0.eot?#iefix') format('embedded-opentype'),
  url('webfonts/transit/2F8289_1_0.woff2') format('woff2');
}

/* --- Überschriften --- */
h1,h2,h3,h4 {
  font-family: 'MasterPortalHeader', sans-serif;
}
h5 {
  font-family: 'MasterPortalButtonTitle  ', sans-serif;
  font-size: 1rem;
  font-weight:normal;
}
h6 {
  font-family: 'MasterPortalFont Bold', sans-serif;
}

/* --- Buttons --- */
.btn-primary {
font-family: 'MasterPortalFont', sans-serif;
font-weight: 500;
border-radius: var(--bs-border-radius);
background-color: var(--bs-primary) !important;
color: var(--bs-white);
}
.btn-primary:hover {
background-color: var(--bs-gray) !important;
border-color: var(--bs-gray) !important;
color: var(--bs-black);
}
.btn-secondary {
font-family: 'MasterPortalFont', sans-serif;
border-radius: var(--bs-border-radius);
background-color: var(--bs-primary);
color: var(--bs-white);
}
.btn-secondary:hover {
background-color: var(--bs-gray);
color: var(--bs-black);
border-color: var(--bs-gray);
}
.btn-light {
font-family: 'MasterPortalFont', sans-serif;
border-radius: var(--bs-border-radius);
background-color: var(--bs-white);
color: var(---bs-black);
}
.btn-light:hover {
border-radius: var(--bs-border-radius);
background-color: var(--bs-gray);
border-color: var(--bs-gray) !important;
color: var(--bs-black);
}

.btn-info {
font-family: 'MasterPortalFont', sans-serif;
border-radius: var(--bs-border-radius);
background-color: var(--bs-primary);
color: var(--bs-white);
}
.btn-title {
font-family: 'MasterPortalButtonTitle', sans-serif;
line-height: 1.2;
}
.btn-description {
font-family: 'MasterPortalFont', sans-serif;
line-height: 1.4;
}
.bg-info {
background-color: var(--bs-primary);
color: var(--bs-white);
}
#mainMenu-toggle-button:hover {
border-radius: 0 50% 50% 0;
}
#secondaryMenu-toggle-button:hover {
border-radius: 50% 0 0 50%;
}
.layer-tree-select-all:hover {
  background-color: var(--bs-gray)!important; 
  border-radius: var(--bs-border-radius)!important;
}

/* --- Suchfeld Adresse --- */

#search-button {
border-radius: var(--bs-border-radius);
background-color: var(--bs-primary);
color: var(--bs-white);
}
#search-button:hover {
  background-color: var(--bs-gray);
  color: var(--bs-black);
}
#searchInput {
font-family: 'MasterPortalButtonDescription', sans-serif;
}

/* ---- Werkzeuge ---*/
.accordion-button {
  font-family: 'MasterPortalButtonDescription', sans-serif;
  background-color: var(--bs-white);
}
.accordion-button collapsed {
  font-family: 'MasterPortalButtonDescription', sans-serif;
  background-color: var(--bs-warning);
}
.btn-texts {
  font-family: 'MasterportalFont Bold', sans-serif;
}

/* Baustellenfilter */
.geometryFilter {
font-family: 'MasterPortalFont', Arial, sans-serif;
font-size: 1rem;
}
.geometryFilter .form-floating {
font-size: 1rem;
}
.geometryFilter .form-select {
 font-size: .875rem;   /*Korrektur der Schriftgröße für die Selektion, da zu groß geerbt*/
}
.form-select {
  font-size: 1rem !important;
}
.form-text {
  font-size: 1rem !important;
}
.geometryFilter .form-text {
  font-family: 'MasterPortalButtonTitle', sans-serif;
}
#geometryFilter .btn-check:checked + .btn {
background-color: var(--bs-primary) !important;
color: var(--bs-white) !important;
}
#geometryFilter .btn-check + .btn:hover {
background-color: var(--bs-gray) !important;
color: var(--bs-black) !important;
}
.filter-select-box-container .multiselect .multiselect__placeholder {
color: var(--bs-black) !important;
opacity: 1;
}
.filter-select-box-container .multiselect .multiselect__tag {
  background-color: var(--bs-primary) !important;
  color: var(--bs-white) !important;
  border-radius: var(--bs-border-radius) !important;
}
.filter-select-box-container .multiselect .multiselect__tag:hover {
  background-color: var(--bs-gray) !important;
  color: var(--bs-black) !important;
  border-radius: var(--bs-border-radius) !important;
}
/* Selektiertes Feld in Dropdown */
.filter-select-box-container .multiselect .multiselect__option--highlight {
  background-color: var(--bs-primary) !important; 
  border-radius: var(--bs-border-radius) !important;
}
.snippetTagContainer button {
  background-color: var(--bs-secondary) !important;
  color: var(--bs-white);
  border-radius: var(--bs-border-radius) !important;
}
.snippetTagContainer button:hover{
  background-color: var(--bs-gray) !important;
  color: var(--bs-black) !important;
}
.snippetTagContainer button .snippetTagLabel {
  color: var(--bs-white) !important;
}
.snippetTagContainer button:hover .snippetTagLabel {
  color: var(--bs-black) !important;
}
/* Filterintervall */
#inputDateRangeFrom-2 {
  font-family: 'MasterPortalFont', Arial, sans-serif;
}
#inputDateRangeUntil-2 {
  font-family: 'MasterPortalFont', Arial, sans-serif;
}
/* Schiebeleiste */
.sliderWrapper .measure {
  background-color: var(--bs-gray) !important;
  accent-color: var(--bs-secondary) !important;
}
.snippetDateRangeContainer .sliderWrapper .track {
  background-color: var(--bs-primary) !important;
}
.mouseHover {
font-family: 'MasterPortalFont', sans-serif !important;
.title {
    font-family: 'MasterPortalFont Bold', sans-serif !important;
}
.info {
    font-family: 'MasterPortalFont', sans-serif !important;
}
}
#baselayer-switcher {
.preview, .preview:hover, .preview:focus {
    border: 2px solid rgba(66, 66, 66, 0.3);
    border-radius: 35px;
}
}
.footerUrl {
color: var(--bs-primary) !important;
}
.footerUrl:hover {
color: var(--bs-primary) !important;
background-color: var(--bs-gray) !important;
border-radius: var(--bs-border-radius) !important;
}
.imprintLink {
color: var(--bs-primary) !important;
}
.imprintLink:hover {
color: var(--bs-primary) !important;
background-color: var(--bs-gray) !important;
border-radius: var(--bs-border-radius) !important;
}
.form-select label {
color: var(--bs-yellow) !important;
}
.form-select:focus {
border-color: var(--bs-primary);
}
.form-select:focus label {
border-color: var(--bs-primary);
}
.form-control:focus {
border-color: var(--bs-primary);
}
.form-floating > .form-select {
border-color: var(--bs-primary);
}
.form-floating > .form-select:focus ~ label {
color: var(--bs-primary);
}
.form-floating > .input-label:focus ~ label {
color: var(--bs-primary);
}
.form-floating > .form-control:focus ~ label {
color: var(--bs-primary);
}
.form-floating > label {
  font-size: 0.875rem
}
.form-switch .form-check-input:checked {
  --bs-form-switch-bg:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23ffffff'/%3E%3C/svg%3E");
}
.form-switch .form-check-input:focus {
  --bs-form-switch-bg:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23999'/%3E%3C/svg%3E");
}
/* --- Werkzeug Koordinaten --*/
.nav-tabs .nav-link.active {
  background-color: var(--bs-white) !important;
  color: var(--bs-black) !important;
}
.nav-tabs .nav-link.active:hover {
  background-color: var(--bs-gray) !important;
  color: var(--bs-black) !important;
}
.nav-tabs .nav-link {
  background-color: var(--bs-white) !important;
  color: var(--bs-primary)!important;
}
.nav-tabs .nav-link:hover {
  background-color: var(--bs-gray)!important;
  color: var(--bs-primary)!important;
}
/* --- Filter --- */
.snippetTagContainer .tag {
border-radius: var(--bs-border-radius) !important;
}
.snippetCheckbox:checked {
accent-color: var(--bs-primary) !important;
}
input[type="checkbox"]:checked {
accent-color: var(--bs-primary) !important;
}
#geometryFilter .button-wrapper .btn {
border-radius: var(--bs-border-radius) !important;
}
.float-end {
color: var(--bs-primary)!important;
}
.filter-result {
color: var(--bs-primary)!important;
}

/* --- Werkzeug Zeichnen ---*/
#tool-draw-drawInteraction:disabled  {
background-color: var(--bs-secondary);
color: var(--bs-white);
}
#tool-draw-undoInteraction:disabled  {
background-color: var(--bs-secondary);
color: var(--bs-white);
}
#tool-draw-redoInteraction:disabled  {
background-color: var(--bs-secondary);
color: var(--bs-white);
}
#tool-draw-editInteraction:disabled   {
background-color: var(--bs-secondary);
color: var(--bs-white);
}
#tool-draw-deleteInteraction:disabled   {
background-color: var(--bs-secondary);
color: var(--bs-white);
}
#tool-draw-deleteAllInteraction:disabled {
background-color: var(--bs-secondary);
color: var(--bs-white);
}
#downloadBtn {
background-color: var(--bs-secondary);
color: var(--bs-white);
}
#tool-bufferAnalysis-saveButton {
background-color: var(--bs-secondary);
color: var(--bs-white);
}
/* --- Flurstueckssuche --- */
#module-wfsSearch-button-search {
background-color: var(--bs-secondary);
color: var(--bs-white);
}
#module-wfsSearch-button-resetUI {
background-color: var(--bs-secondary);
color: var(--bs-white);
}
#shared-slider.slider {
accent-color: var(--bs-secondary);
}
.slider {
accent-color: var(--bs-secondary);
}
.slider-item .slider::-webkit-slider-thumb {
background-color: var(--bs-secondary) !important;
}
.slider-item .input-item .input .slider-dots .dot  {
background-color: var(--bs-secondary) !important;
}
.form-check-input {
accent-color: var(--bs-secondary) !important;
border-radius: var(--bs-border-radius) !important;
}
.form-check-input:focus {
accent-color: var(--bs-secondary) !important;
border-radius: var(--bs-border-radius) !important;
}
.form-check-input:checked {
accent-color: var(--bs-secondary) !important;
background-color: var(--bs-secondary) !important;
border-radius: var(--bs-border-radius) !important;
}
/* --- GFI --- */
.table{
  --bs-table-hover-bg: var(--bs-gray);
}
.border-primary {
  border-color: var(--bs-gray) !important;
}
/* --- layer-slider-player --- */
#module-layer-slider-player .active-button {
  background-color: var(--bs-gray-100) !important;
  border-radius: var(--bs-border-radius) !important;
  border-color: var(--bs-gray) !important;
}
#module-layer-slider-player .active-button:hover{
  background-color: var(--bs-gray-300) !important;
}
/* --- accordion --- */
.accordion-button:not(.collapsed) {
  background-color: var(--bs-gray) !important;
  border-radius: var(--bs-border-radius) !important;
}