/*
.region-top-bar {
    font-size: .875rem;
    height: 7.5rem;
    z-index: 1046;
}n
*/
.linklove-color {
	color: #892bdf;
}

.question-list-scrollable {
  /* Du musst diesen Wert ggf. anpassen, bis er perfekt für 3 Karten passt */
  max-height: 25rem; 
  overflow-y: auto;
  padding-right: 15px; /* Verhindert, dass der Scrollbalken den Inhalt überlappt */
}

.accordion-item .col-md-4 button.active
 {
    color: #6c757d;
    background-color: #ccc;
}

.accordion-item .col-md-4 button.nav-link {
    color: #6c757d;
}

/* ==========================================================================
   Custom Styles for TextLOVE Analysis View
   ========================================================================== */

/* Style for the scrolling content inside the "Simple Advice" cards */
.textlove-card__tab-pane {
  max-height: 150px;
  overflow-y: auto;
}

/* Style for the main article preview box in the "Assets" section */
.textlove-article-preview {
  max-height: 400px;
  overflow-y: auto;
  font-family: monospace, "Courier New", Courier;
  font-size: 0.9rem;
}

/* Custom height for the progress bar in the context block */
.textlove-progress {
  height: 8px;
}
/* ==========================================================================
   Custom Styles for TextLOVE Analysis View
   ========================================================================== */


/* Small visual improvement for copy-to-clipboard buttons */
.copy-question-btn:hover {
  background-color: #e9ecef; /* Ein leichtes Grau */
  cursor: pointer;
}

.copy-question-btn:hover {
  background-color: #e9ecef; /* Ein leichtes Grau */
  cursor: pointer;
}

.view-websiteplan-linklove-lri .views-field-nothing
 {
    min-width: 1rem;
    max-width: unset;
}

/* changes in the textlove wizward step3 bootstrap table START */
.view-display-id-block_6 .views-field-keywords {
    min-width: 3rem;
    max-width: 3rem;
}


.view-display-id-block_6 .views-field-kw-type
 {
    min-width: 5rem;
    max-width: 5rem;
}

/* changes in the textlove wizward step3 bootstrap table END */

span.position-absolute.mt-2.mx-3.top-0.start-100.translate-middle.badge.rounded-pill.bg-danger {
    background-color: #8a2be2 !important;
}


/* ==========================================================================
   LINK LOVE Widget - 
   ========================================================================== */
   
   /* ==========================================================================
   Status Bar Component
   ========================================================================== */
.status-bar {
  display: flex;
  width: 100%;
  height: 40px;
  background-color: transparent;
  border-radius: var(--bs-border-radius);
  border: 1px solid var(--bs-border-color-translucent);
  overflow: hidden;
}

.status-segment {
  flex: 1; /* Alle Segmente sind standardmäßig gleich breit */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.75rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--bs-secondary-color);
  border-right: 1px solid var(--bs-border-color-translucent);
  transition: all 0.3s ease;
}
.status-segment:last-child {
  border-right: none;
}

.status-segment .badge-count {
  font-weight: bold;
  margin-right: 0.4rem;
}

/* Zustand: Hervorgehoben (nimmt mehr Platz ein) */
.status-segment.is-highlighted {
  flex: 2; /* Nimmt doppelt so viel Platz ein wie die anderen */
  font-weight: bold;
}

/* Farb-Styling für die verschiedenen Zustände */
.status-segment.is-good { background-color: transparent; color: var(--bs-success-text-emphasis); }
.status-segment.is-bad { background-color: transparent; color: var(--bs-danger-text-emphasis); }
.status-segment.has-suggestions { background-color: transparent; color: var(--bs-info-text-emphasis); }
   

/* END LINKLOVE Progress  */
/* ==========================================================================
   Final Segmented Stepper (V2)
   ========================================================================== */

.segmented-stepper-final {
  display: flex;
  width: 100%;
  height: 40px; /* Reduzierte Höhe für Kompaktheit */
  background-color: transparent;
  border-radius: var(--bs-border-radius);
  border: 1px solid var(--bs-border-color-translucent);
  overflow: hidden;
}

.step-item {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  height: 100%;
  padding: 0 0.75rem;
  border-right: 1px solid var(--bs-border-color-translucent);
}
.step-item:last-child {
  border-right: none;
}

/* --- ZUSTÄNDE --- */

/* Erledigter Schritt (Grüner Kreis mit Haken) */
.step-item.is-complete {
  flex: 0 0 45px;
  color: var(--bs-success);
}
.step-item.is-complete .step-icon-complete {
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #9d9a99;
  color: white;
}

/* Zukünftiger Schritt (Grauer Kreis mit Zahl) */
.step-item.is-upcoming {
  flex: 0 0 45px;
  color: var(--bs-secondary-color);
  opacity: 0.7;
}
.step-item.is-upcoming .step-icon-upcoming {
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  border: 2px solid var(--bs-border-color-translucent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 0.8rem;
}

/* Aktiver Schritt (Groß, mit Text, eckig) */
.step-item.is-active {
  flex: 1 1 auto;
  background-color: var(--bs-primary-bg-subtle);
  color: var(--bs-primary-text-emphasis);
  font-weight: bold;
  font-size: 0.85rem;
  border-radius: 0; /* Kein Radius */
}
.step-item.is-active .step-icon {
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 0.9rem;
  margin-right: 0.75rem;
  background-color: #00c1b2;
  color: white;
  flex-shrink: 0;
}

/* Aktiver Schritt mit Handlungsbedarf (WARNUNG) */
.step-item.is-active.has-suggestions {
  background-color: var(--bs-warning-bg-subtle);
  color: var(--bs-warning-text-emphasis);
}
.step-item.is-active.has-suggestions .step-icon {
  background-color: var(--bs-warning);
  color: white;
}


/* Konnektor-Linie */
.breadcrumb-connector {
  flex-grow: 1;
  height: 2px;
  background-color: var(--bs-border-color-translucent);
  margin: 1rem 0.5rem 0;
}

/* Styling für die verschiedenen Zustände */
.breadcrumb-step.is-active .step-icon {
  background-color: var(--bs-primary-bg-subtle);
  border-color: var(--bs-primary);
  color: var(--bs-primary);
}
.breadcrumb-step.is-active .step-label {
  color: var(--bs-primary);
  font-weight: bold;
}

.breadcrumb-step.is-complete .step-icon {
  background-color: var(--bs-success-bg-subtle);
  border-color: var(--bs-success);
  color: var(--bs-success);
}
.breadcrumb-step.is-complete .step-icon span {
  display: none; /* Verstecke die Zahl, wenn erledigt */
}
.breadcrumb-step.is-complete .step-icon .fa-check {
  display: inline-block; /* Zeige das Häkchen an */
}
.breadcrumb-connector.is-complete {
    background-color: var(--bs-success);
}

/* END TEXTLOVE Progress  */

.tab-content-wrapper .card {
  /* Fügt der Inhalts-Karte einen passenden oberen Rahmen hinzu */
  border-top: 4px solid var(--active-tab-color);
}

.connector-card {
  /* Zentriert den Pfeil in der Mitte */
  display: flex;
  justify-content: center;
  align-items: center;
  border-color: var(--active-tab-color);
  color: var(--active-tab-color);
  border-top: none; 
  border: 2px solid;

  /* Gibt der Karte ein Aussehen, das zur aktiven Tab-Karte passt */
  background-color: rgba(var(--bs-body-bg-rgb), 0.8);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  
  width: 60px;  /* Eine kleine, feste Breite */
  height: 30px; /* Eine kleine, feste Höhe */
  margin: -1px auto 0; /* Positioniert die Karte mittig und schließt die Lücke zur oberen Reihe */
  
  /* Rundet nur die unteren Ecken ab */
  border-radius: 0 0 var(--bs-card-border-radius) var(--bs-card-border-radius);
  
  /* Rahmen passend zur aktiven Karte, aber ohne oberen Rahmen */
  border-top: none; 
  
  box-shadow: var(--bs-box-shadow-sm);
  font-size: 1.2rem;
}

/* Styling für die neuen Dashboard-Tab-Karten */

.dashboard-tabs-row {
  position: relative; 
}

a.dashboard-tab {
  color: var(--bs-body-color);
  transition: all 0.2s ease-in-out;
  border: 2px solid transparent;
  background-color: rgba(var(--bs-body-bg-rgb), 0.8);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
a.dashboard-tab:hover {
  transform: translateY(-4px);
  box-shadow: var(--bs-box-shadow-lg) !important;
}

/* Der aktive Tab wird hervorgehoben UND als Positionierungskontext für den Pfeil definiert */
a.dashboard-tab.active {
  /* Nutzt jetzt die dynamische Farbe für den Rahmen */
  border-color: var(--active-tab-color); 
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--active-tab-color) 25%, transparent) !important;
}

/* Der Verbindungs-Pfeil, der nur beim aktiven Tab erscheint */
a.dashboard-tab.active::after {
  content: '';
  position: absolute;
  /* Positioniert den Pfeil zentriert unter der Karte */
  bottom: -17px; /* (Höhe des Pfeils + 2px Abstand) */
  left: 50%;
  transform: translateX(-50%);
  /* Erzeugt die Dreiecks-Form */
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid var(--active-tab-color); /* Die Farbe passt sich an den aktiven Rahmen an */
}

.dashboard-tab .tab-status {
  min-height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}


/* New TAB Design for the websiteplan pages.  */

.view-website-rankings .view-content {
    border: 5px solid;
    border-radius: 15px;
    border-color: white;
    opacity: 80%;
}

.compact-trend {
  position: relative; /* Wichtig für die Positionierung des Popups */
  display: inline-flex;
  align-items: center;
}

.trend-details-popup {
  display: none; /* Standardmäßig versteckt */
  position: absolute;
  bottom: 110%; /* Positioniert das Popup über dem Icon */
  left: 50%;
  transform: translateX(-50%);
  z-index: 1050; /* Stellt sicher, dass es über anderen Inhalten liegt */
  width: max-content; /* Passt die Breite automatisch an den Inhalt an */
  border-color: var(--bs-primary);
}

/* Zeige das Popup an, wenn man über den Container fährt */
.compact-trend:hover .trend-details-popup {
  display: block;
}

/* Stellt sicher, dass das aufklappende Menü einen soliden Hintergrund hat
   und über anderen Elementen liegt, um Lesbarkeitsprobleme zu beheben. */
.ranking-nav-bar .dropdown-menu {
  background-color: var(--bs-body-bg); /* Nutzt die Standard-Hintergrundfarbe des Themes */
  opacity: 1 !important; /* Stellt sicher, dass der Inhalt nicht durchsichtig ist */
  box-shadow: var(--bs-box-shadow-lg); /* Fügt einen stärkeren Schatten für die Tiefe hinzu */
}

/* Stellt sicher, dass die Ranking-Navigationsebene über dem Seiteninhalt liegt,
   damit die Dropdowns nicht verdeckt werden. */
.ranking-nav-bar {
  position: relative;
  z-index: 20; 
}

.view-website-rankings a:hover, .view-website-rankings a:focus, .view-website-rankings .btn-link:hover, .view-website-rankings .btn-link:focus {
	    color: #f16532;
}

.btn-rankings {

   font-size: 0.575rem;

}

.kpi-main-value {
  position: relative;
  display: inline-block; /* Wichtig für die Positionierung */
}

.kpi-change {
  position: absolute;
  top: 0;
  right: -2em; /* Positioniert den Indikator rechts neben der großen Zahl */
  font-size: 0.9rem;
  font-weight: bold;
  line-height: 1;
  text-align: left;
}

.kpi-change .fa-solid {
  display: block; /* Stellt das Icon über die Zahl */
  margin-bottom: 2px;
}

/* ==========================================================================
   Ranking Dashboard - Tab Navigation Redesign
   ========================================================================== */

.ranking-tabs-container {
  border-bottom: 1px solid var(--bs-border-color-translucent);
  padding: 0 1rem;
}

.ranking-tabs-container .nav-link {
  color: var(--bs-secondary-color);
  font-weight: 500;
  padding: 0.75rem 1rem;
  border: 0;
  border-bottom: 3px solid transparent; /* Wichtig für den Schwebe-Effekt */
  transition: all 0.2s ease-in-out;
}

.ranking-tabs-container .nav-link:hover {
  background-color: var(--bs-tertiary-bg);
  border-bottom-color: var(--bs-secondary-border-subtle);
}

.ranking-tabs-container .nav-link.active {
  color: var(--bs-primary);
  font-weight: bold;
  background-color: transparent;
  border-bottom-color: var(--bs-primary);
}

/* Optional: Badge-Styling etwas anpassen */
.ranking-tabs-container .nav-link .badge {
  font-size: 0.75em;
  padding: 0.3em 0.6em;
}


/* ==========================================================================
   Helper for Budget form
   ========================================================================== */

#edit-field-budget-category--wrapper legend {
  display: none;
}

#edit-field-budget-costs--wrapper legend {
  display: none;
}
#edit-field-commerce-price-0-number {
  width: 30%;
}

/* Styling für die nummerierte "Top Anchors"-Liste */
.top-anchor-list .rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  background-color: var(--bs-light-bg-subtle);
  border: 1px solid var(--bs-border-color-translucent);
  color: var(--bs-body-color);
  font-weight: bold;
  margin-right: 1rem;
  flex-shrink: 0; /* Verhindert, dass der Kreis bei langem Text gequetscht wird */
}

.top-anchor-list .anchor-text {
  font-weight: 500;
}


/* Styling für ein <details>-Element, das sich wie ein Popover verhält */
.details-as-popover {
  position: relative;
}
.details-as-popover > summary {
  list-style: none;
  cursor: pointer;
}
.details-as-popover > summary::-webkit-details-marker {
  display: none;
}

/* Positioniert den Inhalt als aufklappendes Menü */
.details-as-popover[open] > .details-content {
  display: block;
}
.details-as-popover .details-content {
  display: none; /* Standardmäßig versteckt */
  position: absolute;
  z-index: 100;
  width: 400px;
  max-width: 90vw;
  right: 0; /* Richtet das Popover rechtsbündig am Button aus */
  background-clip: padding-box; /* Wichtig für Bootstrap-Cards */
}

/* Kleiner Hover-Effekt für die Links in der Liste */
.hover-bg-light:hover {
    background-color: var(--bs-light-bg-subtle);
}

/* ==========================================================================
   Decision Helper Dropdown (in Tabellen)
   ========================================================================== */

.decision-helper {
  position: relative; /* Wichtig für die Positionierung des Inhalts */
}

/* Versteckt den Standard-Pfeil des <details>-Elements */
.decision-helper > summary {
  list-style: none;
}
.decision-helper > summary::-webkit-details-marker {
  display: none;
}

/* Positioniert den Inhalt als aufklappendes Menü */
.decision-helper[open] > .decision-helper-content {
  display: block;
}

.decision-helper-content {
  display: none; /* Standardmäßig versteckt */
  position: absolute;
  z-index: 100;
  width: 350px; /* Breite des Popovers */
  max-width: 90vw;
  right: 0; /* Richtet das Popover rechtsbündig am Button aus */
  background-clip: padding-box; /* Wichtig für Bootstrap-Cards */
}

/* ==========================================================================
   Rocket Science - Translucent Card for Navigation
   ========================================================================== */

.card-translucent {
  /* Nimmt die Hintergrundfarbe deines Themes und macht sie zu 80% deckend */
  background-color: rgba(var(--bs-body-bg-rgb), 0.8) !important;

  /* Erzeugt einen "Glas"-Effekt, der den Hintergrund leicht verschwimmen lässt */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ==========================================================================
   Rocket Science - Vertical Tabs
   ========================================================================== */

.rocket-science-tabs .nav-link {
  text-align: left;
  font-weight: 500;
  color: var(--bs-body-color);
  margin-bottom: 0.25rem; /* Kleiner Abstand zwischen den Links */
  border-left: 3px solid transparent;
}

.rocket-science-tabs .nav-link:hover {
  background-color: var(--bs-tertiary-bg);
  border-left-color: var(--bs-gray-400);
}

.rocket-science-tabs .nav-link.active {
  background-color: var(--bs-primary-bg-subtle);
  color: var(--bs-primary-text-emphasis);
  border-left: 3px solid var(--bs-primary);
}


/* ==========================================================================
   Report Placeholder (Empty State) with High Specificity
   ========================================================================== */

/* The main card gets a dashed border to indicate it's a placeholder */
.report-placeholder .card {
  border: 2px dashed var(--bs-border-color-translucent);
  background-color: var(--bs-tertiary-bg);
}

/* Constrains the paragraph width for better readability */
.report-placeholder .card-body p {
  max-width: 500px;
}

/* Styles the progress bar container */
.report-placeholder .progress {
  height: 6px;
  max-width: 200px;
  background-color: var(--bs-tertiary-bg);
}

/* Sets the width of the animated bar inside */
.report-placeholder .progress-bar {
  width: 75%;
}

/* Style für Font Awesome Icons (bleibt unverändert) */
.menu-item .menu-icon {
  width: 24px;
  margin-right: 0.75rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 1.25rem;
  color: var(--bs-primary);
}

/* NEU: Eigener Style für die PNG-Badges */
.menu-item .menu-image-badge {
  margin-right: 0.75rem;
  display: inline-flex;
  align-items: center;
  height: 28px; /* Eine feste Höhe für alle Badges */
}

.menu-item .menu-image-badge img {
  height: 80%; /* Das Bild füllt die Höhe des Containers aus */
  width: 80%;  /* Die Breite passt sich automatisch an, um das Seitenverhältnis beizubehalten */
}


.rocket-science-menu {
  /* ... deine bisherigen Grid-Styles ... */
  position: relative; /* Notwendig, damit z-index funktioniert */
  z-index: 10;      /* Hebt das gesamte Menü über den Standard-Content */
}

.link-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem; /* This creates the visual space of mb-2, but without the dead zone */
}


.rocket-science-menu {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  background-color: var(--bs-secondary-bg);
  padding: 1rem;
  border-radius: var(--bs-border-radius);
}

.menu-item .hover-box {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  background-color: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color-translucent);
  border-radius: var(--bs-border-radius);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.menu-item .menu-icon {
  width: 24px; /* Feste Breite für Icons/Bilder */
  margin-right: 0.75rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 1.25rem;
  color: var(--bs-primary);
}
.menu-item .menu-icon img {
  max-height: 24px;
  width: auto;
}

/* Desktop Hover-Verhalten */
@media (min-width: 992px) {
  .hover-wrapper {
    position: relative;
  }
  .hover-wrapper .hover-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    padding: 1rem;
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: var(--bs-border-radius);
    box-shadow: var(--bs-box-shadow-lg);
    width: 300px; /* Breite des Pop-ups */
  }
  .hover-wrapper:hover .hover-links {
    display: block;
  }
  .hover-wrapper:hover .hover-box {
    background-color: var(--bs-primary-bg-subtle);
    border-color: var(--bs-primary);
  }
}

/* Mobile Accordion-Styling */
.menu-item details[open] > summary {
  background-color: var(--bs-primary-bg-subtle);
  border-color: var(--bs-primary);
}
.menu-item details > summary {
  list-style: none; /* Pfeil des Browsers entfernen */
}
.menu-item details > summary::-webkit-details-marker {
  display: none; /* Pfeil des Browsers entfernen (Chrome/Safari) */
}
.menu-item .details-content {
  padding: 1rem;
  border: 1px solid var(--bs-border-color-translucent);
  border-top: none;
  border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius);
}


.readable-width {
  max-width: 500px;
}
/* ==========================================================================
   UserLOVE Customer Journey
   ========================================================================== */

.customer-journey-flow {
  display: flex;
  align-items: stretch; /* Sorgt dafür, dass alle Karten gleich hoch sind */
  justify-content: space-between;
  gap: 1.5rem; /* Abstand zwischen den Elementen */
}

.journey-card-wrapper {
  flex: 1 1 0; /* Erlaubt den Karten, den Raum gleichmäßig aufzuteilen */
  min-width: 220px;
}

.journey-card {
  border-width: 1px;
  border-top-width: 4px; /* Dicker oberer Rand für die Farbe */
  transition: all 0.2s ease-in-out;
}

.journey-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--bs-box-shadow-lg) !important;
}

/* Farbige Ränder für die Phasen */
.border-top-yellow { border-top-color: var(--bs-warning); }
.border-top-green { border-top-color: var(--bs-success); }
.border-top-blue { border-top-color: var(--bs-primary); }

.journey-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin: 0 auto; /* Zentriert das Icon horizontal */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

.journey-arrow {
  flex-grow: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Macht das Layout auf kleineren Bildschirmen responsiv (vertikal) */
@media (max-width: 992px) {
  .customer-journey-flow {
    flex-direction: column;
    gap: 0.5rem;
  }
  .journey-arrow {
    transform: rotate(90deg);
    margin: 1.5rem 0;
  }
}


/* ==========================================================================
   Data Tab - Status Grid
   ========================================================================== */

.status-card {
  border-width: 1px;
  border-left-width: 5px; /* Dicker linker Rand zur Farbkennzeichnung */
  transition: all 0.2s ease-in-out;
}

.status-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--bs-box-shadow-lg) !important;
}

/* Standard-Farbe (grau) */
.status-card.status-grey {
  border-left-color: var(--bs-secondary);
}
.status-card.status-grey .fa-solid {
  color: var(--bs-secondary);
}

/* Grün */
.status-card.status-green {
  border-left-color: var(--bs-success);
}
.status-card.status-green .fa-solid {
  color: var(--bs-success);
}

/* Gelb */
.status-card.status-yellow {
  border-left-color: var(--bs-warning);
}
.status-card.status-yellow .fa-solid {
  color: var(--bs-warning);
}

/* Rot */
.status-card.status-red {
  border-left-color: var(--bs-danger);
}
.status-card.status-red .fa-solid {
  color: var(--bs-danger);
}

.status-message-item {
  font-size: 0.9rem;
  padding-bottom: 0.5rem;
}


/* ==========================================================================
   LinkLOVE Dashboard
   ========================================================================== */

/* Entfernt den unnötigen Außenabstand von Views, die jetzt in Cards platziert sind,
   damit sie bündig mit dem Card-Body abschließen. */
#link-love .card-body .view {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Entfernt die "Card"-Struktur innerhalb der Views, da wir jetzt äußere Cards verwenden.
   Das verhindert doppelte Rahmen, Schatten und Abstände. */
#link-love .card-body .view .card {
  border: none !important;
  box-shadow: none !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Spezifische Anpassung, damit die Header der inneren Cards nicht stören. */
#link-love .card-body .view .card-header {
  background-color: transparent !important;
  border-bottom: 1px solid var(--bs-border-color-translucent);
  padding-left: 0;
  padding-right: 0;
}

/* ==========================================================================
   Wizard Card - Step 4: Paywall Overlay
   ========================================================================== */

/* Die Paywall-Überlagerung, die über der Ergebnis-Tabelle liegt */
.paywall-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10; /* Stellt sicher, dass die Ebene oben liegt */
  
  /* Der "Glasmorphismus"-Effekt */
  background-color: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px); /* Für Safari-Kompatibilität */

  /* Zentriert den Inhalt der Überlagerung */
  display: flex;
  justify-content: center;
  align-items: center;
  
  padding: 1.5rem;
  border-radius: var(--bs-card-inner-border-radius); /* Passt sich an die Card-Rundung an */
}

/* ==========================================================================
   Wizard Card - Step 4: Optimization
   ========================================================================== */

/* Gestrichelter Rahmen für die "Start"-Box, um sie als Aktionsbereich zu kennzeichnen */
.start-optimization-box {
  background-color: var(--bs-tertiary-bg);
  border: 2px dashed var(--bs-primary);
}

/* Styling für die Upgrade-Aufforderung */
.upgrade-prompt-card {
  border: 1px solid;
}

/* Stellt sicher, dass die Tabelle bündig in der neuen Card sitzt */
.optimization-history .card {
  border: none;
  box-shadow: var(--bs-box-shadow-sm);
}
.optimization-history .card table {
  margin-bottom: 0; 
}


/* ==========================================================================
   Wizard Card - Step 3: Keyword Selection
   ========================================================================== */

.selection-status-box {
  padding: 1rem 1.25rem;
  border: 1px solid;
  border-radius: var(--bs-border-radius);
}

.selected-keywords-list .view-kwpool-checked-count {
  /* Stellt sicher, dass die Liste der ausgewählten Keywords gut aussieht */
  border: 1px solid var(--bs-border-color-translucent);
  border-radius: var(--bs-border-radius);
  padding: 0.75rem;
}

/* Entfernt das unnötige Styling von der Keyword-Pool-View,
   damit sie sich nahtlos in den Wizard einfügt. */
.keyword-pool-wrapper .view-website-keywordpool {
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin-top: 0 !important;
}


/* ==========================================================================
   Wizard Card - Step 2: Keyword Suggestions
   ========================================================================== */

.keyword-suggestions-box {
  background-color: var(--bs-tertiary-bg);
}

.keyword-list {
  display: flex;
  flex-wrap: wrap; /* Erlaubt den Badges, in die nächste Zeile zu springen */
  gap: 0.65rem;    /* Abstand zwischen den Badges */
  padding-top: 1rem;
  border-top: 1px solid var(--bs-border-color-translucent);
  margin-top: 1rem;
}

.keyword-badge {
  background-color: var(--bs-primary-bg-subtle, #cfe2ff);
  color: var(--bs-primary-text-emphasis, #052c65);
  padding: 0.5em 0.85em;
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: var(--bs-border-radius-pill); /* Macht die Badges rundlich */
  border: 1px solid transparent;
  transition: all 0.2s ease-in-out;
  cursor: default; /* Zeigt an, dass man nicht klicken kann */
}

.keyword-badge:hover {
  transform: translateY(-2px); /* Leichter Schwebe-Effekt */
  box-shadow: var(--bs-box-shadow-sm);
  border-color: var(--bs-primary-border-subtle, #9ec5fe);
}


.location-status-box {
  background-color: var(--bs-success-bg-subtle, #d1e7dd);
  border: 1px solid var(--bs-success-border-subtle, #a3cfbb);
}

.location-status-box .location-data .views-field {
  font-weight: 600; /* Macht den Namen des Landes fett */
}

/* Verhindert, dass der Drupal-View-Wrapper einen Zeilenumbruch erzwingt */
.location-status-box .views-element-container {
    display: inline;
}

.heatmap-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 2px;
  max-width: 500px;
}
.heatmap-cell {
  aspect-ratio: 1;
  text-align: center;
  font-size: 0.75rem;
  border: 1px solid #ccc;
  line-height: 1.8;
}

/* Farbstufen (von hell nach dunkelblau) */
.heatmap-level-0 { background-color: #f8f9fa; }
.heatmap-level-1 { background-color: #cfe2ff; }
.heatmap-level-2 { background-color: #9ec5fe; }
.heatmap-level-3 { background-color: #6ea8fe; }
.heatmap-level-4 { background-color: #3d8bfd; }
.heatmap-level-5 { background-color: #0d6efd; color: white; }


.timeline {
  position: relative;
  margin-left: 1rem;
  padding-left: 1rem;
  border-left: 2px solid #dee2e6;
}
.timeline-item::before {
  content: '';
  position: absolute;
  left: -9px;
  top: 0.65rem;
  width: 10px;
  height: 10px;
  background-color: #6c757d;
  border-radius: 50%;
}


summary.card-header.bg-light
 {
    background-color: #cccccc !important;
}
.item-list.ranking-distri ul li {
    display: inline;
}

.view.view-domain-rank-overview.view-id-domain_rank_overview.view-display-id-block_4 .views-field.views-field-y2 {
    padding: 1rem;
}

.js-flag-message {
    color: #e8383a;
    font-size: small;
}
ul.list-group.mt-3 .list-item {
    display: inline;
}
.view-id-status_quo_sgrang td.views-field.views-field-link-flag {
    max-width: 200px !important;
    width: 50%;
}

input#edit-keywords {
    height: 50px;
}
.keywordspage div#edit-actions {
    float: left;
    margin-top: 3rem;
}
.form-item-keywords {
    float: left;
}
.form-item-items-per-page {
    float: left;
    margin-left: 2rem;
    margin-right: 2rem;
}
.form-item-wordcount {
    float: left;
    margin-left: 2rem;
    margin-right: 2rem;
}
input#edit-field-budget-money-0-number {
    height: 60px;
}
.photoswipe-gallery.field.field--name-field-screenshot-image.field--type-entity-reference.field--label-hidden.field__items a {
    float: left;
    margin: 1rem;
}
a.az-button-content.btn.btn-sm.btn-success.btn-block {
    width: 100%;
    color: white;
}

a.btn.btn-primary {
    color: white;
}

#nav-tabContent table.table.table-striped.table-sm {
    margin-top: 2rem;
}
input#edit-phone {
    margin-left: 3rem;
}

section#block-views-exposed-filter-block-website-keywordpool-page-1 {
    margin-top: 2rem;
}

.flag.flag-kw-pool-prio {
    height: 20px;
    width: 200px;
}
a.btn.btn-outline-dark.btn-sm.todo-link {
    margin-left: 1rem;
}
.form-item-field-website-category-target-id label {
    font-size: x-large;
    font-weight: 600;
}

.block-forms-steps li.previous-step {
    text-decoration-line: line-through;
}

.js-form-item.form-item.js-form-type-radio.form-type-radio.js-form-item-field-website-type.form-item-field-website-type {
    margin-top: 2rem;
    margin-left: 1rem;
}
section#block-forms-steps-progress-bar-yourwebsite--2 li {
    margin-bottom: 1rem;
}

div#alert-todo-desc {
    height: fit-content;
    min-height: 100px;
}

.btn:not(:disabled):not(.disabled) {
    cursor: pointer;
}
.btn-a-brc-tp:not(.disabled):not(:disabled).active, .btn-brc-tp, .btn-brc-tp:focus:not(:hover):not(:active):not(.active):not(.dropdown-toggle), .btn-h-brc-tp:hover, .btn.btn-f-brc-tp:focus, .btn.btn-h-brc-tp:hover {
    border-color: transparent;
}
.btn-outline-blue {
    color: #0d6ce1;
    border-color: #5a9beb;
    background-color: transparent;
}
.btn {
    cursor: pointer;
    position: relative;
    z-index: auto;
    border-radius: .175rem;
    transition: color .15s,background-color .15s,border-color .15s,box-shadow .15s,opacity .15s;
}
.border-2 {
    border-width: 2px!important;
    border-style: solid!important;
    border-color: transparent;
}
.bgc-white {
    background-color: #fff!important;
}


.text-green-d1 {
    color: #277b5d!important;
}
.letter-spacing {
    letter-spacing: .5px!important;
}
.font-bolder, .text-600 {
    font-weight: 600!important;
}
.text-170 {
    font-size: 1.7em!important;
}

.text-purple-d1 {
    color: #6d62b5!important;
}

.text-primary-d1 {
    color: #276ab4!important;
}
.text-secondary-d1 {
    color: #5f718b!important;
}
.text-180 {
    font-size: 1.8em!important;
}
.text-150 {
    font-size: 1.5em!important;
}
.text-danger-m3 {
    color: #e05858!important;
}
.rotate-45 {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.position-l {
    left: 0;
}
.position-b, .position-bc, .position-bl, .position-br, .position-center, .position-l, .position-lc, .position-r, .position-rc, .position-t, .position-tc, .position-tl, .position-tr {
    position: absolute!important;
    display: block;
}
.mt-n475, .my-n475 {
    margin-top: -2.5rem!important;
}
.ml-35, .mx-35 {
    margin-left: 1.25rem!important;
}

.text-dark-l1 {
    color: #56585e!important;
}
.text-90 {
    font-size: .9em!important;
}
.text-left {
    text-align: left!important;
}

.mt-25, .my-25 {
    margin-top: .75rem!important;
}

.text-110 {
    font-size: 1.1em!important;
}

.deleted-text{
text-decoration:line-through;;    
}

h2.title.comment-form__title {
    display: none;
}
form#node-todo-todo-online-form {
    margin: 1.4rem;
}
.node-website-keyword-research-form .js-form-item.form-item.js-form-type-textarea.form-type-textarea label {
    margin-bottom: 1rem;
}

div#edit-field-kw-research-decide {
    margin-bottom: 7%;
}
.node-todo-todo-online-form .js-form-item.form-item.js-form-type-vertical-tabs.form-type-vertical-tabs.js-form-item-.form-item-.form-no-label {
    display: none;
}
.node-todo-todo-online-form label.js-form-required.form-required {
    display: none;
}
fieldset#edit-group-col2-2 legend {
    display: none;
}
.body--dxpr-theme-nav-desktop .dxpr-theme-header--top .nav>li>a {
    font-size: 16px;
    display: table-cell;
    vertical-align: middle;
    height: 100px;
    padding: 0 15px 0 15px;
}
.footer-margin {
    margin-top: 200px !important;
}

.js-form-item.form-item.js-form-type-password.form-item-pass.js-form-item-pass {
  margin-bottom: 1rem;
  margin-top: 1rem;
}

 #login_box input[type="text"], #login_box input[type="password"] {
    border: 1px #ccc solid;
    border-radius: 3px;
    font-size: 15px;
    width: 75% !important;
    font-family: sans-serif;
    
}
#login_box {
  width: 25%;
  margin: 0 auto;
  padding: 50px 0 0;
  font-family: sans-serif;
}


.ribbon {
  width: 150px;
  height: 150px;
  overflow: hidden;
  position: absolute;
}
.ribbon::before,
.ribbon::after {
  position: absolute;
  z-index: -1;
  content: '';
  display: block;
  border: 5px solid #2980b9;
}
.ribbon span {
  position: absolute;
  display: block;
  width: 225px;
  padding: 15px 0;
  background-color: #3498db;
  box-shadow: 0 5px 10px rgba(0,0,0,.1);
  color: #fff;
  font: 700 18px/1 'Lato', sans-serif;
  text-shadow: 0 1px 1px rgba(0,0,0,.2);
  text-transform: uppercase;
  text-align: center;
}

/* top left*/
.ribbon-top-left {
  top: -10px;
  left: -10px;
}
.ribbon-top-left::before,
.ribbon-top-left::after {
  border-top-color: transparent;
  border-left-color: transparent;
}
.ribbon-top-left::before {
  top: 0;
  right: 0;
}
.ribbon-top-left::after {
  bottom: 0;
  left: 0;
}
.ribbon-top-left span {
  right: -25px;
  top: 30px;
  transform: rotate(-45deg);
}

/* top right*/
.ribbon-top-right {
  top: -10px;
  right: -10px;
}
.ribbon-top-right::before,
.ribbon-top-right::after {
  border-top-color: transparent;
  border-right-color: transparent;
}
.ribbon-top-right::before {
  top: 0;
  left: 0;
}
.ribbon-top-right::after {
  bottom: 0;
  right: 0;
}
.ribbon-top-right span {
  left: -25px;
  top: 30px;
  transform: rotate(45deg);
}

/* bottom left*/
.ribbon-bottom-left {
  bottom: -10px;
  left: -10px;
}
.ribbon-bottom-left::before,
.ribbon-bottom-left::after {
  border-bottom-color: transparent;
  border-left-color: transparent;
}
.ribbon-bottom-left::before {
  bottom: 0;
  right: 0;
}
.ribbon-bottom-left::after {
  top: 0;
  left: 0;
}
.ribbon-bottom-left span {
  right: -25px;
  bottom: 30px;
  transform: rotate(225deg);
}

/* bottom right*/
.ribbon-bottom-right {
  bottom: -10px;
  right: -10px;
}
.ribbon-bottom-right::before,
.ribbon-bottom-right::after {
  border-bottom-color: transparent;
  border-right-color: transparent;
}
.ribbon-bottom-right::before {
  bottom: 0;
  left: 0;
}
.ribbon-bottom-right::after {
  top: 0;
  right: 0;
}
.ribbon-bottom-right span {
  left: -25px;
  bottom: 30px;
  transform: rotate(-225deg);
}
section.pricing {
  background: #007bff;
  background: linear-gradient(to right, #0062E6, #33AEFF);
}

.pricing .card {
  border: none;
  border-radius: 1rem;
  transition: all 0.2s;
  box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1);
}

.pricing hr {
  margin: 1.5rem 0;
}

.pricing .card-title {
  margin: 0.5rem 0;
  font-size: 0.9rem;
  letter-spacing: .1rem;
  font-weight: bold;
}

.pricing .card-price {
  font-size: 3rem;
  margin: 0;
}

.pricing .card-price .period {
  font-size: 0.8rem;
}

.pricing ul li {
  margin-bottom: 1rem;
}

.pricing .text-muted {
  opacity: 0.7;
}

.pricing .btn {
  font-size: 80%;
  border-radius: 5rem;
  letter-spacing: .1rem;
  font-weight: bold;
  padding: 1rem;
  opacity: 0.7;
  transition: all 0.2s;
}

/* Hover Effects on Card */

@media (min-width: 992px) {
  .pricing .card:hover {
    margin-top: -.25rem;
    margin-bottom: .25rem;
    box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.3);
  }

  .pricing .card:hover .btn {
    opacity: 1;
  }
}
.card-horizontal {
    display: flex;
    flex: 1 1 auto;
}

/* ==========================================================================
   Wizard Card mit "Finn dem Helfer"
   ========================================================================== */

/* NEU: Gibt der gesamten Wizard-Karte mehr Abstand nach außen */

#myPages .img-square-wrapper {
  margin-top: 1rem;   /* Zusätzlicher Abstand nach oben */
  margin-left: 1rem;    /* Abstand nach links */
  margin-right: 0rem;   /* Abstand nach rechts für ein symmetrisches Layout */
  width: 100px;          /* Stellt sicher, dass die horizontalen Abstände korrekt funktionieren */
}

.card-horizontal {
  display: flex; /* Haupt-Container wird zur Flexbox */
  flex-direction: row; /* Elemente ordnen sich nebeneinander an */
  align-items: flex-start; /* Vertikale Ausrichtung am Anfang (gut für unterschiedlich hohe Inhalte) */
  gap: 1.5rem; /* Schafft einen schönen Abstand zwischen Bild und Text-Bereich */
}

.card-horizontal .img-square-wrapper {
  flex-shrink: 0; /* Verhindert, dass der Bild-Container schrumpft */
  width: 120px;   /* Gibt dem Bild-Container eine feste Breite */
  text-align: center; /* Zentriert den Badge-Text unter dem Bild */
}

.card-horizontal .img-square-wrapper img {
  border-radius: 50%; /* Macht das Bild rund, was bei Avataren super aussieht */
  border: 3px solid #dee2e6; /* Fügt einen dezenten Rahmen hinzu */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Ein leichter Schatten hebt das Bild hervor */
}

.card-horizontal .card-body {
  padding-left: 0; /* Optional: Setzt den linken Abstand zurück, da wir 'gap' verwenden */
}

/* Anpassungen für kleinere Bildschirme (optional, aber empfohlen) */
@media (max-width: 768px) {
  #text-love .card {
    /* Auf Mobilgeräten die horizontalen Abstände ggf. reduzieren oder entfernen */
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }
  
  .card-horizontal {
    flex-direction: column; /* Auf kleinen Bildschirmen alles untereinander anordnen */
    align-items: center; /* Alles zentrieren für einen sauberen Look */
  }
  
  .card-horizontal .card-body {
    width: 100%; /* Der Body soll die volle Breite einnehmen */
    text-align: center; /* Texte ebenfalls zentrieren */
  }
}


.red {
    color: red;
}
.blue {
  font-size: 1.5em;
}
.yellow {
    color: #f5de34;
}
.green{
      color: green;
    text-decoration: none;
}
.size-2{
    font-size: 1.5em;
}
.content-background2 {
    background-color: #f6f6f2;
    border-color: #f9f9f9;
    opacity: 0.9;
    margin-bottom: 1em;
    margin-left: 1em;
    margin-top: 1rem;
    border: white;
    border-radius: 15px;

}
.view-id-website_dashboard {
    margin-top: 2rem;
}
.main-container.container-fluid {
    background-image: url(https://app.marketingfuxx.com/sites/default/files/2021-06/texture-1516370_1920_min_3_0.jpg) !important;
    padding-bottom: 50rem;
}
.view-id-websiteplan .form-row {
    display: contents;
}
#edit-field-budget-range-0 .fieldset-wrapper {
    display: inline-flex;
}
div#edit-field-budget-range-0-value .js-form-item {
    display: inline;
}
div#edit-field-budget-range-0-end-value .js-form-item {
    display: inline;
}
fieldset#edit-field-budget-costs--wrapper legend {
    font-size: 1rem !important;
}
legend {
    font-size: 1rem;
    font-weight: 600;
}
fieldset#edit-field-budget-range-0 legend {
    font-size: 1rem;
}
form#views-exposed-form-group-budgets-page-1 .js-form-item, form#views-exposed-form-group-budgets-page-1 .js-form-wrapper  {
    display: inline-grid;
}
form#views-exposed-form-group-budgets-page-1 .js-form-wrapper {
  display: inline-grid;
    position: relative;
    bottom: 1em;
}
#main-wrapper-old {
    background-image: url(https://app.marketingfuxx.com/sites/default/files/2021-06/texture-1516370_1920_min_3_0.jpg) !important;
    padding-bottom: 10em;
}
.address-book__set-default-link, .btn-secondary {
    background-color: #a9afb5 !important;
    border-color: #a9afb5 !important;
    color: #fff;
}
.view-todo-edit-toolbar .flag {
    display: inline;
}
.field.field--name-field-todo-tags div {
    display: inline;
}
section#node-todo-field-todo-comments h2 {
    display: none;
}
span#cke_1_bottom {
    display: none;
}

.flag.flag-todo-bookmark {
    float: left;
    margin: 0 1em 0;
}
.flag.flag-todo-done {
    float: left;
}
.btn-todocountcircle {
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 6px 0;
  font-size: 12px;
  line-height: 1.428571429;
  border-radius: 15px;
}
.btn-circle.btn-lg {
  width: 50px;
  height: 50px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33;
  border-radius: 25px;
}
.btn-circle.btn-xl {
  width: 70px;
  height: 70px;
  padding: 10px 16px;
  font-size: 24px;
  line-height: 1.33;
  border-radius: 35px;
}
#block-marketingfuxx-content .card-block.card-body {
    float: left;
}
div#edit-field-phone-number-wrapper .form-group {
    display: inline;
}
div#edit-field-profile-links-wrapper .form-group {
    display: inline;
}



i.fa {
    margin-right: 0.3em;
}
span.badge.bg-light.text-dark.todocount {
    position: relative;
    float: right;
    top: 2px;
}
.view-todo .node--unpublished, .node--view-mode-teaser, .node.node--type-todo.node--unpublished, .node--unpublished  {
    padding: 0;
    border: none;
    margin: 0;
}
.view-todo .view-content, .view-group-todo .view-content, .view-websiteplan .view-content, .view-id-website_daily .view-content   {
    background-color: white;
    opacity: 90%;
}
a.btn.btn-secondary.btn-sm.todo-link {
    color: black;
}
div#block-views-block-todo-nav-block-1 {
    margin-top: 1rem;
}
.view-todo-nav {
    opacity: 90%;
}
.alert.alert-light.mt-3 {
    opacity: 90%;
}
#edit-submit {
  width: 100%;
}
div#group-accordion {
    opacity: 90%;
}
#block-views-block-user-blocks-block-1 {
  margin-top: 1rem;
}
.view-id-user_blocks {
  opacity: 90%;
}
.list-group-item.active {
  background-color: #ccc;
}
#block-views-block-user-nav-block-1 {
  opacity: 90%;
}
.region-navigation.offcanvas-end>div:first-child, .region-navigation.offcanvas-start>div:first-child {
    margin-top: 0.5rem;
}
/*
navbar-nav {
    display: flex;
    flex-direction: row !important;
    list-style: none;
    margin-bottom: 0;
    padding-left: 0;
}
ul.navbar-nav {
    flex-direction: row;
}
*/
.view-group-todo-nav, .view-id-your_personas {
    margin-top: 1rem;
    opacity: 90%;
}
.form-item-field-duration-0-duration.js-form-item-field-duration-0-duration .form-item {
    display: table-cell;
}
div#edit-field-choose-attachment .js-form-item {
    display: inline;
}
div#edit-field-files-0--description, div#edit-field-todo-pdf-0--description, div#edit-field-todo-image-1--description {
    display: none;
}
details#edit-field-todo-csv-file-0-settings summary {
    display: none;
}
div#edit-field-todo-image-wrapper .tabledrag-toggle-weight-wrapper, div#edit-field-todo-image-wrapper thead {
    display: none;
}
div#edit-field-todo-image-wrapper .btn-danger  {
    margin: 0 -30%;
    padding: 0;
}
div#edit-field-todo-image-wrapper .menu-item__link.button {
    background-color: steelblue;
}
details#edit-group-comment h2 {
    display: none;
}
.view-id-todo_nav_group {
  opacity: 90%;
}
.form-item-field-todo-csv-file-0 details {
  display: none;
}
.js-form-item.form-item.js-form-type-textarea.form-item-comment-body-0-value.js-form-item-comment-body-0-value label {
  display: none;
}
.horizontal-tabs.clearfix {
  background-color: #e2e3e5;
}
#edit-actions {
  /*float: left;
  margin: 0 0 1rem 1rem !important; */
}
.view-id-group_websiteplan_view, .view-id-website_rankings, .view-website-daily  {
    margin-top: 1rem;
}
.tabledrag-toggle-weight-wrapper {
    display: none;
}
table#field-text-sources-values {
    margin: 0;
}

div#edit-field-serious-funny .js-form-type-radio, div#edit-field-rational-or-emotion .js-form-type-radio, div#edit-field-technical-casual .js-form-type-radio {
    display: inline-flex;
}
td.field-multiple-drag {
    display: none;
}
th.field-label h4 {
    font-size: 1rem;
}
.field-add-more-submit.button {
    background-color: darkcyan;
    font-size: 0%;
}
div#block-views-block-group-menu-block-4 {
    opacity: 90%;
}
#node-text-briefing-form, #node-text-briefing-edit-form {
    margin-top: 1rem !important;
    opacity: 90%;
}
input#edit-field-text-draft-reference-add-more {
    display: none;
}
div#edit-field-text-draft-reference-wrapper h4 {
    display: none;
}
.col-md-3.col-xs-12.p-3, .col-md-3.col-xs-12.p-5, .col-md-3.col-xs-12.p-6 {
    opacity: 90%;
}
#node-persona-step1-form #edit-submit, #edit-submit {
 /*   background-color: darkgreen; */
}

input#edit-previous {
    background-color: seashell;
}
div#block-forms-steps-progress-bar-persona {
    opacity: 90%;
}
input#edit-url {
    width: 99%;
}

ul#mypages {
    margin-top: 1rem;
}
.address-book__add-link, .address-book__set-default-link, .btn, .button, .cart-block--offcanvas-contents__links a {
    text-transform: none !important;
}
.nav-tabs .nav-link.active {
    background-color: #41799d;
    color: white;
    font-weight: bold;
}
.nav-tabs .nav-link {
    background: white;
    border: 1px solid transparent;
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
    margin-bottom: 0.1rem;
    margin-left: 0.1rem;
}
.contextual-region.view.view-website-rankings-details.view-id-website_rankings_details.view-display-id-page_1 {
    margin-top: 1rem;
}
.view-website-dashboard.view-id-website_dashboard.view-display-id-page_1 .view-content {
    background-color: transparent;
}
fieldset#id-password-accounts-531 {
    display: none;
}
div#accounts-password-col1 {
    margin-top: 1rem;
}
ul#websiteplan-nav-tabs {
    margin-top: 1rem;
}
body.webform-share-page-body .page-title {
    display: none;
}
.js-form-item.form-item.js-form-type-textfield.form-item-field-current-persona-0-value.js-form-item-field-current-persona-0-value {
    display: none;
}
.node-type--text-briefing a.navigation-toggle.cursor-pointer {
    display: none;
}
div#edit-field-briefing-variant .js-form-item {
   /* display: inline-table; */
}
a.clipboardjs-button .tooltip img {
    opacity: 100%;
}
.shwpd {
  float: right;
  margin-left: -35px;
  margin-top: -25px;
  position: relative;
  z-index: 2;
}
span.badge.rounded-pill.bg-secondary .view-content {
    background-color: transparent;
}
#cke_2_bottom {
  display: none;
}
.required-fields.field-group-html-element.col.col-lg-4.offset-md-3.alert.alert-secondary.mt-3 {
    opacity: 90%;
}
.alert.alert-secondary.mt-3 {
    opacity: 90%;
}
#edit-o365-actions {
  display: none;
}
.view.view-website-data-pages.view-id-website_data_pages .view-content {
    background-color: transparent;
}
.view.view-website-data-pages.view-id-website_data_pages {
    margin-top: 1rem
}
.bs-bg-light._none {
    opacity: 90%;
}
div#block-forms-steps-progress-bar-yourwebsite {
    opacity: 90%;
}
.view-id-website_rankings .view-content, .view-id-group_member_manager .view-content {
    background: white;
    opacity: 90%;
}
.col-12.mt-3 .card, .view-group-overview-3-widgets {
    opacity: 90%;
}
.flag.btn.btn-xl.d-grid.gap-2.btn-secondary.flag-websitplan-aurora.action-unflag a {
    font-size: x-large;
    color: green;
}
.view.view-group-wsp-todo {
    background: white;
    margin-top: 1rem;
    opacity: 90%;
}
i.fa-solid.fa-circle.fa-3x {
    opacity: 90%;
}
ul#mypages .tab-content, ul#mypages, #mypages.card {
    opacity: 90%;
}
.field-content .list-group {
    opacity: 90%;
}
aside.col-lg-2.me-lg-3.order-first.region.region-sidebar-second .block-facets {
    opacity: 90%;
}
.view-id-website_ranking {
    background: white;
    margin-top: 1rem;
    opacity: 90%;
}
.view-id-website_rankings_details {
    opacity: 90%;
    background-color: white;
    margin-top: 1rem;
}
form#node-budget-form {
    margin-top: 1rem;
    opacity: 90%;
}
.view-id-your_personas {
    background-color: white;
    opacity: 90%;
}
.node--type-persona.node--view-mode-full.ds-1col {
    opacity: 90%;
}
div#block-views-block-group-overview-wq-block-4, #block-views-block-group-overview-wq-block-1  {
    margin-bottom: 3rem;
}
.card.border.shadow-0.mt-5 {
    opacity: 90%;
}
.card .card-text.text-muted {
    font-size: 85%;
}
div#help2-pages-advice {
    opacity: 90%;
}
.flag.flag-help2 .btn {
    display: block;
}
div#help3-onboarding {
    opacity: 90%;
}
td.table-secondary.text-wrap {
    max-width: 400px;
}
.text-center.col-sm-6.mb-5.mt-5.contextual-region.view.view-group-overview-wq.view-id-group_overview_wq.view-display-id-block_5 {
    margin-bottom: 5rem !important;
}
form#user-key-auth-form {
    background: white;
    opacity: 90%;
    padding: 1rem;
}
.layout.row.layout-builder__layout {
   /* width: 50%; */
}
.register .layout.row.layout-builder__layout, .login .layout.row.layout-builder__layout {
    width: 100%;
}
.user-form .layout.row.layout-builder__layout {
  width: 100%;
}
form#group-content-website-group-invitation-add-form {
    opacity: 90%;
}
.node-type--todo .layout.row.layout-builder__layout {
    width: 100%;
}
.node-form .layout.row.layout-builder__layout {
    width: 100%;
}
span.badge.bg-light.text-dark.todocount {
    color: #000000 !important;
}
img.no-image-style.img-fluid.image-style-author-32-32 {
    width: 2%;
}
.col-md-6.offset-md-3.alert.alert-secondary {
    opacity: 90%;
    margin-top: 2rem;
}
.col-md-6.offset-md-3.alert.alert-secondary, .col-md-8.offset-md-2.alert.alert-secondary {
    opacity: 90%;
    margin-top: 1rem;
}
.form-check.form-radios {
    display: inline-flex;
    margin-bottom: 0.125rem;
    min-height: 1.5rem;
    padding-left: 0; 
}
.toggle.btn.btn-info.off.btn-lg {
    width: 500px !important;
    height: 50px !important;
}
.node-website-keyword-research-form .field-group-fieldset {
    opacity: 100%;
}
.node-website-keyword-research-form .field-group-fieldset legend {
    display: none;
}
.node-website-keyword-research-form .form-type-vertical-tabs {
    display: none;
}


.field-group-fieldset {
    opacity: 90%;
}
aside.col-sm-2 {
    opacity: 90%;
    margin-top: 1rem;
}
.row.justify-content-around .col-md-3 {
    opacity: 90%;
}


.html .form-control, .html input[type=date], .html input[type=datetime-local], .html input[type=email], .html input[type=file], .html input[type=month], .html input[type=number], .html input[type=password], .html input[type=search], .html input[type=tel], .html input[type=text], .html input[type=time], .html input[type=url], .html input[type=week], .html textarea, .html select {
    box-shadow: none;
    border-radius: 3px;
    background: #ffffff;
    border: 1px solid #f3f3f3;
    height: auto;
    padding: 2px;
    line-height: inherit;
}
.background80 {
    opacity: 80%;
}
.top2 {
   margin-top: 2rem;
}

.alert.alert-secondary.background80 {
    opacity: 80%;
}
.table-background {
	  box-shadow: none;
    border-radius: 3px;
    background: #ffffff;
    border: 1px solid #f3f3f3;
    height: auto;
    padding: 2px;
    line-height: inherit;
    opacity: 90%;
}

ul.pagination.js-pager__items {
    background-color: white;
    padding: 0 5rem;
    border: white;
    border-radius: 5px;
}
td.views-field.views-field-link-flag {
    max-width: 200px !important;
    width: 100px;
}

body {
    background-image: url(/sites/default/files/dxpr_theme/images/background_01.jpg) !important;
}
.dxpr-theme-footer.clearfix {
  opacity: 90%;
      background-color: transparent !important;
}
#progress-bar {
  display: table;
  width: 100%;
  margin: 0;
  padding: 15px 15px 0;
  table-layout: fixed;
  width: 100%;
  counter-reset: step;
  li {
    list-style-type: none;
    display: table-cell;
    width: 20%;
    float: left;
    font-size: 16px;
    position: relative;
    text-align: center;
    &:before {
      width: 50px;
      height: 50px;
      color: #212121;
      content: counter(step);
      counter-increment: step;
      line-height: 50px;
      font-size: 18px;
      border: 1px solid #efefef;
      display: block;
      text-align: center;
      margin: 0 auto 10px auto;
      border-radius: 50%;
      background-color: #fff;
    }
    &:after {
      width: 100%;
      height: 10px;
      content: '';
      position: absolute;
      background-color: #fff;
      top: 25px;
      left: -50%;
      z-index: -1;
    }
    &:first-child:after {
      content: none;
    }
    &.step-done {
      color: #ff0000;
      &:before {
        border-color: #ff0000;
        background-color: #ff0000;
        color: #fff;
        content: "\f00c";
        font-family: "FontAwesome";
      }
      & + li:after {
        background-color: #ff0000;
      }
    }
    &.step-active {
      color: #ff0000;
      &:before {
        border-color: #ff0000;
        color: #ff0000;
        font-weight: 700;
      }
    }
  }
}