/* pagespeed-insights.css */

/* Farben */
:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --success-color: #28a745;
  --warning-color: #ffc107;
  --danger-color: #dc3545;
}

/* Überschriften */
h2 {
  color: var(--primary-color);
  font-weight: bold;
}

/* Tabellen */
table {
  border-collapse: collapse;
  width: 100%;
}
th,
td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}
th {
  background-color: #f2f2f2;
}

/* Formular */
.uc-form {
  background: rgba(0, 0, 0, 0.5);
  font-family: Orbitron;
}

/* Fortschrittsanimation */
.progress {
  height: 30px;
  background-color: #e0e0e0;
}
.progress-bar {
  background-color: var(--success-color);
}

/* Ergebnis-Container */
.hl {
  color: #fff;
}

.results {
  font-family: Orbitron;
  background: rgba(0, 0, 0, 0.5);
  padding: 5% !important;
  margin-top: 4vh;
}

.headline {
  font-size: 30px;
}

.cxheader {
  font-size: 22px;
  margin: 2vh 0 2vh 0 !important;
}

.llheader {
  font-size: 22px;
  margin: 2vh 0 2vh 0 !important;
}

/* Diagramme */
/* Hier fügst du das CSS für deine Diagrammbibliothek hinzu */

/* Anpassungen an die originale Gestaltung */
.my-custom-class {
  /* Füge hier die CSS-Eigenschaften hinzu, die du anpassen möchtest */
  background-color: var(--secondary-color);
  border-radius: 5px;
}
.lmkey-text {
  font-size: 20px;
}
.lmkey {
  font-size: 28px;
  font-weight: bold;
}

.cmkey-text {
  font-size: 20px;
}
.cmkey {
  font-size: 28px;
  font-weight: bold;
}

.pagespeed-results {
  background-color: #f9f9f9;
  padding: 20px;
  border: 1px solid #ddd;
}

.pagespeed-score {
  font-size: 24px;
  font-weight: bold;
}

.spinner {
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-left-color: #fff;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin: 20px auto;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.text-success {
  color: green;
}

.text-warning {
  color: orange;
}

.text-danger {
  color: red;
}

.loading-container {
  text-align: center;
}

.loading-container p {
  margin-top: 10px;
  font-size: 16px;
  color: #fff;
}

.iframe-container {
  margin-top: 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden;
}

.iframe-container iframe {
  width: 40%;
  height: 300px;
  border: none;
}