/* Add your css code here */
/*
Variable Definitions:
  --r-bg: Sets the background color.
  --r-tx: Sets the text color.
  --r-h1: Sets the color for h1, h2, and h3 headings.
  --r-lk: Sets the link text color.
  --r-lk-h: Sets the hover color for link text.
  --r-br: Sets the border color.
  --r-bg-fr: Sets the background color for input forms.
  --r-tx-lk: Sets the menu link text color.
  --r-tx-lk-h: Sets the hover color for menu link text.
  --r-bg-lk: Sets the background color for menu links.
  --r-bg-lk-h: Sets the hover background color for menu links.
  --r-tx-bt: Sets the button text color.
  --r-tx-bt-h: Sets the hover color for button text.
  --r-bg-bt: Sets the button background color.
  --r-bg-bt-h: Sets the hover background color for buttons.
*/
/*
Regions Names, each region has an ID and a Class with the same name.
You can use .page-wrapper or #page-wrapper
#page-wrapper {}
#primary-sidebar-menu {}
#fixed-search-block {}
#popup-login-block {}
#header {}
#primary-menu {}
#welcome-text {}

#top-container {}
#top-box-first {}
#top-box-second {}
#top-box-third {}

#system-messages {}
#breadcrumb {}
#page-title {}

#main-container {}
#sidebar-box-first {}
#sidebar-box-main {}
#sidebar-box-second {}

#bottom-container {}
#bottom-box-first {}
#bottom-box-second {}
#bottom-box-third {}
#bottom-box-fourth {}

#footer-container {}
#footer-box-first {}
#footer-box-second {}
#footer-box-third {}

#footer-menu {}
#copyright {}

Examples:

#page-wrapper {
  background-color: var(--r-bg);
  color: var(--r-tx);
  border-color: var(--r-br);
}

h1, h2, h3 {
  color: var(--r-h1);
}

a:not(li.nav__menu-item a) {
  color: var(--r-lk);
  color: var(--r-lk-h);
}

input:not(.button) {
  background-color: var(--r-bg-fr);
}

li.nav__menu-item a {
  color: var(--r-tx-lk);
  background-color: var(--r-bg-lk);
}

li.nav__menu-item a:hover {
  color: var(--r-tx-lk-h);
  background-color: var(--r-bg-lk-h);
}

button:not(li.nav__menu-item button) {
  color: var(--r-tx-bt);
  background-color: var(--r-bg-bt);
}

button:not(li.nav__menu-item button):hover {
  color: var(--r-tx-bt-h);
  background-color: var(--r-bg-bt-h);
}
https://www.drupal.org/docs/extending-drupal/themes/contributed-themes/solo/instructions-for-developers-on-using-colors-in-solo-theme
*/
/* Grid-inställningar (oförändrade) */
.path-view-kunskapstester .views-view-responsive-grid {
  display: grid;
  padding-bottom: 10px;
}
/* Grundläggande stil för varje grid-item */
.path-view-kunskapstester .views-view-responsive-grid__item {
  position: relative;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.path-view-kunskapstester .views-view-responsive-grid__item:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
/* Halvgenomskinlig bakgrund för textinnehåll */
.path-view-kunskapstester .views-view-responsive-grid__item-inner {
  padding: 15px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 5px;
}
/* Titel- och beskrivningsstil (oförändrade) */
.path-view-kunskapstester .views-field-title .quiz-titel {
  font-size: 1.2em;
  font-weight: bold;
  color: #0056b3;
  text-decoration: none;
}
.path-view-kunskapstester .views-field-body__value .quiz-beskrivning {
  font-size: 0.9em;
  color: #555;
  margin-top: 10px;
  line-height: 1.4;
}
/* Responsivitet för små skärmar (oförändrad) */
@media (max-width: 600px) {
  .path-view-kunskapstester .views-view-responsive-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
}
/* Diskret stil för Ämnesområde */
.path-view-kunskapstester .amnesomrade {
  display: inline-block;
  padding: 3px 8px;
  font-size: 0.9em;
  color: #0056b3; /* Mjuk blå textfärg */
  background-color: #f0f8ff; /* Ljus bakgrundsfärg */
  border: 1px solid #cce4f6; /* Ljusblå ram */
  border-radius: 5px; /* Smått rundade hörn */
  margin-top: 8px;
}
/* Ökad kontrast vid hover */
.path-view-kunskapstester .amnesomrade:hover {
  background-color: #e6f3fb; /* Lite mörkare bakgrund vid hover */
  border-color: #b3d9f2;
}
/* Grundläggande layoutinställningar för sidan */
.path-view-fragor-svar .solo-responsive {
  margin: 0 auto;
  overflow-x: auto;
  padding: 15px;
  background: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}
/* Tabellinställningar */
.path-view-fragor-svar .solo-table-all {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}
.path-view-fragor-svar .solo-table-all thead {
  background-color: #333;
  color: #fff;
  text-align: left;
}
.path-view-fragor-svar .solo-table-all th,
.path-view-fragor-svar .solo-table-all td {
  padding: 12px;
  border: 1px solid #ddd;
}
.path-view-fragor-svar .solo-table-all th {
  font-weight: bold;
  font-size: 1em;
}
.path-view-fragor-svar .solo-table-all tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}
.path-view-fragor-svar .solo-table-all tbody tr:nth-child(odd) {
  background-color: #fff;
}
/* Stil för Fråga, Svar och Ämnesområde */
.path-view-fragor-svar .fraga p {
  font-weight: bold;
  color: #000;
  margin: 0;
}
.path-view-fragor-svar .ui-state-active .fraga p {
  font-weight: bold;
  color: #FFF;
  margin: 0;
}
.path-view-fragor-svar .svar {
  display: block;
  font-style: italic;
  color: #666;
  margin-top: 8px;
}
.path-view-fragor-svar .amnesomrade {
  display: block;
  font-size: 0.9em;
  font-weight: bold;
  color: #999;
  margin-top: 4px;
}
/* Responsivitet för mindre skärmar */
@media (max-width: 600px) {
  .path-view-fragor-svar .solo-table-all th,
  .path-view-fragor-svar .solo-table-all td {
    padding: 8px;
  }

  .path-view-fragor-svar .solo-responsive {
    padding: 10px;
  }
}
/* Stil för headern */
.path-view-fragor-svar .view-header {
  max-width: 800px;
  margin: 0 auto 20px auto;
  padding: 15px 20px;
  background-color: #f0f8ff; /* Ljus bakgrund för att markera introduktion */
  border-left: 4px solid #333; /* Vertikal linje för att framhäva header */
  border-radius: 5px;
  color: #444;
  font-size: 1.1em;
  line-height: 1.6;
}
.path-view-fragor-svar .view-header strong {
  font-weight: bold;
}

.path-view-fragor-svar .view-header br {
  margin-bottom: 10px; /* Utrymme mellan paragrafer */
}
.path-view-fragor-svar .form-checkboxes {
  display: block;
}
/* Grundläggande stil för alla knappar */
#edit-navigation .solo-button {
  display: inline-block;
  padding: 10px 20px;
  margin: 5px;
  font-size: 1em;
  font-weight: bold;
  color: #333;
  background-color: #e6e6e6; /* Ljusare bakgrundsfärg */
  border: 2px solid #ddd;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
}
/* Hover-effekt */
#edit-navigation .solo-button:hover {
  background-color: #d1d1d1;
  color: #000;
  transform: translateY(-2px); /* Liten upphöjning vid hover */
}
/* Aktiv / Fokus-stil */
#edit-navigation .solo-button:active {
  background-color: #ccc;
  color: #000;
  transform: translateY(0); /* Neutraliserar upphöjningen */
}
/* Tillbaka-knapp - anpassad stil */
#edit-navigation-actions-return-back {
  background-color: #f7b4b4; /* Mjuk röd ton för att indikera "Tillbaka" */
  border-color: #e28a8a;
}
#edit-navigation-actions-return-back:hover {
  background-color: #f29494;
  color: #000;
}
/* Nästa-knapp - anpassad stil */
#edit-navigation-actions-proceed-submit {
  background-color: #b4d8b4; /* Mjuk grön ton för "Nästa" */
  border-color: #8aba8a;
}
#edit-navigation-actions-proceed-submit:hover {
  background-color: #a0caa0;
  color: #000;
}
/* Hoppa över-knapp - anpassad stil */
#edit-navigation-actions-proceed-skip {
  background-color: #f2e2b4; /* Mjuk gul ton för "Hoppa över" */
  border-color: #d3c78a;
}
#edit-navigation-actions-proceed-skip:hover {
  background-color: #e6d89c;
  color: #000;
}
/* Flexbox-layout för att centrera och rada upp knapparna */
#edit-navigation-actions {
  display: flex;
  justify-content: center;
  gap: 10px; /* Mellanrum mellan knapparna */
  margin-top: 20px;
}
/* Säkerställer att varje knapp tar upp jämnt med utrymme om det behövs */
#edit-navigation-actions .solo-button {
  flex: 1;
  max-width: 150px; /* Anpassad maxbredd för att förhindra att de blir för stora */
}
/* Stil för Next question-knappen */
#edit-actions .button#edit-next {
  display: inline-block;
  padding: 10px 20px;
  font-size: 1em;
  font-weight: bold;
  color: #fff;
  background-color: #6ec1e4; /* Glad, mjuk blå färg */
  border: 2px solid #5aafc8;
  border-radius: 8px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}
/* Hover-effekt */
#edit-actions .button#edit-next:hover {
  background-color: #5aaed0;
  transform: translateY(-2px); /* Upphöjning vid hover */
}
/* Aktiv / Fokus-stil */
#edit-actions .button#edit-next:active {
  background-color: #4b9dbd;
  transform: translateY(0); /* Neutraliserar upphöjningen */
}
/* Stil för Starta Kunskapstest-knappen */
.quiz-start-link.button {
  display: inline-block;
  padding: 10px 20px;
  font-size: 1em;
  font-weight: bold;
  color: #fff;
  background-color: #6ec1e4; /* Glad, mjuk blå färg */
  border: 2px solid #5aafc8;
  border-radius: 8px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}
/* Hover-effekt */
.quiz-start-link.button:hover {
  background-color: #5aaed0;
  transform: translateY(-2px); /* Upphöjning vid hover */
}
/* Aktiv / Fokus-stil */
.quiz-start-link.button:active {
  background-color: #4b9dbd;
  transform: translateY(0); /* Neutraliserar upphöjningen */
}
h1.page-title-text {
  font-size: 32px !important;
  text-align: center !important;
  padding: 0;
}
/* Grundläggande layout för ordlistan */
.path-view-ordlista .solo-responsive {
  margin: 0 auto;
  padding: 2px;
  background-color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}
.path-view-ordlista .solo-table-all {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}
.path-view-ordlista .solo-table-all thead {
  background-color: #333;
  color: #fff;
  text-align: left;
}
.path-view-ordlista .solo-table-all th,
.path-view-ordlista .solo-table-all td {
  border-bottom: 1px solid #ddd;
}
/* Stil för ord och definition */
.path-view-ordlista .ord {
  display: block;
  font-size: 1.1em;
  font-weight: bold;
  color: #0056b3;
  margin-bottom: 5px;
}
.path-view-ordlista .definition {
  display: block;
  font-size: 0.95em;
  color: #555;
  line-height: 1.5;
}
/* Radstil för växlande bakgrundsfärg */
.path-view-ordlista .solo-table-all tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

.path-view-ordlista .solo-table-all tbody tr:nth-child(odd) {
  background-color: #fff;
}
/* Responsivitet */
@media (max-width: 600px) {
  .path-view-ordlista .solo-responsive {
    padding: 10px;
  }
  
  .path-view-ordlista .solo-table-all th,
  .path-view-ordlista .solo-table-all td {
    padding: 8px;
  }
}
/* Grundläggande layout */
.path-view-lankar .region-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}
.path-view-lankar .view-header {
  font-size: 1.2em;
  color: #444;
  margin-bottom: 20px;
  text-align: center;
}
/* Grid för länkkort */
.path-view-lankar .views-view-responsive-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
/* Länkkort design */
.path-view-lankar .views-view-responsive-grid__item {
  padding: 15px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s, box-shadow 0.2s;
}
.path-view-lankar .views-view-responsive-grid__item:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
/* Länktext och källa */
.path-view-lankar .lank_namn a {
  font-size: 1.1em;
  font-weight: bold;
  color: #0056b3;
  text-decoration: none;
}
.path-view-lankar .lank_namn a:hover {
  text-decoration: underline;
}
.path-view-lankar .kalla {
  display: block;
  font-size: 0.9em;
  color: #777;
  margin-top: 5px;
  font-style: italic;
}
/* Responsivitet */
@media (max-width: 600px) {
  .path-view-lankar .views-view-responsive-grid {
    grid-template-columns: 1fr;
  }

  .path-view-lankar .region-inner {
    padding: 10px;
  }
}
/* Block Title Styling */
.page-node-type-article #block-delegering22-page-title {
  text-align: center;
  margin: 20px 0;
  padding: 20px;
  background-color: #f4f7fa;
  border-radius: 8px;
}
.page-node-type-article .page-title-text {
  font-size: 2rem;
  font-weight: bold;
  color: #005b9a;
}
.page-node-type-article .page-title-text span {
  display: inline-block;
  border-bottom: 3px solid #007cc1;
  padding-bottom: 5px;
}
/* Blog Image Styling */
.page-node-type-article .solo-image {
  display: block;
  margin: 0 auto;
  border-radius: 10px;
  max-width: 100%;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease;
}

.page-node-type-article .solo-image:hover {
  transform: scale(1.02);
}
/* Content Styling */
.page-node-type-article .solo-clear.node__content {
  max-width: 800px;
  margin: 20px auto;
  font-family: 'Helvetica Neue', sans-serif;
  line-height: 1.6;
  color: #333;
  padding: 0 20px;
}
.page-node-type-article .field--name-body {
  margin-top: 20px;
  font-size: 1rem;
}
.page-node-type-article .field--name-body p {
  margin-bottom: 1.2em;
}
/* Last Updated Styling */
.field--name-field-senast-uppdaterat,
.field--name-field-senaste-uppdaterad {
  font-size: 0.9rem;
  color: #555;
  text-align: right;
  margin-top: 30px;
}
.field--name-field-senast-uppdaterat label.field__label,
.field--name-field-senaste-uppdaterad label.field__label {
  font-weight: bold;
  color: #005b9a;
}
.field--name-field-senast-uppdaterat .field__item time,
.field--name-field-senaste-uppdaterad .field__item time {
  color: #777;
  font-style: italic;
}
/* Blog Page Title */
.path-blog #block-delegering22-page-title {
  text-align: center;
  margin: 10px 0;
  background-color: #f4f7fa;
  border-radius: 8px;
}
.path-blog .page-title-text {
  font-size: 2.5rem;
  color: #005b9a;
  font-weight: bold;
  margin-bottom: 0;
}
/* Blog List Container */
.path-blog .view-blog .view-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 1000px;
  margin: 0 auto;
}
/* Blog List Items */
.path-blog .item-list .solo-clear {
  display: flex;
  flex-direction: column;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  background-color: #ffffff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
  margin-bottom: 5px;
}
.path-blog .item-list .solo-clear:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
/* Blog Title and Date */
.path-blog .views-field-title .field-content a {
  font-size: 1.6rem;
  color: #007cc1;
  font-weight: bold;
  text-decoration: none;
}
.path-blog .views-field-title .field-content a:hover {
  text-decoration: underline;
}
.path-blog .views-field-created .field-content time {
  font-size: 0.9rem;
  color: #888888;
  margin-top: 5px;
  display: block;
}
/* Blog Image */
.path-blog .views-field-field-image .field-content img {
  width: 100%;
  max-width: 250px;
  height: auto;
  border-radius: 8px;
  margin: 15px 0;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
/* Blog Excerpt Text */
.path-blog .views-field-body .field-content {
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
  margin-top: 10px;
}
/* Read More Link */
.path-blog .views-field-view-node .field-content a {
  display: inline-block;
  margin-top: 15px;
  font-size: 1rem;
  color: #005b9a;
  font-weight: bold;
  text-decoration: none;
  transition: color 0.2s;
}
.path-blog .views-field-view-node .field-content a:hover {
  color: #007cc1;
  text-decoration: underline;
}
/* Feed Subscription Link */
.path-blog .feed-icons {
  text-align: right;
  margin-top: 20px;
}
.path-blog .feed-icons .feed-icon {
  font-size: 1rem;
  color: #005b9a;
  text-decoration: none;
}
.path-blog .feed-icons .feed-icon:hover {
  color: #007cc1;
}
.path-node-2 #welcome-text-inner img.align-center {
  margin:0 !important;
}
.annonsbanner {font-size: x-small; float: left;}
.annonsliten {font-size: x-small;}
#block-delegering22-senasteundersokningen .w3-block-title {font-size: 20px !important; }
/* Basstil för Poll-modulen */
#block-delegering22-senasteundersokningen {
    background-color: #f0f8ff; /* Ljus blå bakgrund för att särskilja från faktarutan */
    border-left: 5px solid #2c3e50; /* Mörk kantlinje för variation */
    padding: 15px;
    border-radius: 8px; /* Rundade hörn för en enhetlig känsla */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Lätt skugga */
    font-size: 1.1em;
    color: #333; /* Mörk text för kontrast */
}
/* Stil för frågetiteln */
#block-delegering22-senasteundersokningen h2 {
    font-size: 1.3em;
    color: #2c3e50; /* Matchar kantlinjen */
    margin-bottom: 10px;
    font-weight: bold;
}
/* Stil för svarsalternativ */
#block-delegering22-senasteundersokningen .form-type-radio label {
    background-color: #ffffff;
    padding: 8px 10px;
    border-radius: 5px;
    margin-bottom: 5px;
    display: block;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
#block-delegering22-senasteundersokningen .form-type-radio label:hover {
    background-color: #d0e6f6; /* Lättare blå ton vid hovring */
}
/* Stil för knappar */
#block-delegering22-senasteundersokningen {margin-top: 10px;}
#block-delegering22-senasteundersokningen input[type="submit"] {
    background-color: #3498db;
    color: #fff;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 10px;
}
/* Stil för svarsalternativ */
#block-delegering22-senasteundersokningen .form-type-radio {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}
#block-delegering22-senasteundersokningen .form-type-radio input[type="radio"] {
    margin-right: 10px; /* Skapar utrymme mellan kryssrutan och texten */
}
#block-delegering22-senasteundersokningen .form-type-radio label {
    background-color: #ffffff;
    padding: 8px 10px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    flex-grow: 1; /* Gör så att texten tar hela bredden */
}

#block-delegering22-senasteundersokningen input[type="submit"]:hover {
    background-color: #2980b9; /* Mörkare blå ton vid hovring */
}
.frontvisning {
    position: relative;
    width: 100%;
}
.frontvisning img {
    width: 100%;
    height: auto;
    display: block;
}
.dags {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 50%;
    padding: 20px;
    background: rgba(255, 255, 255, 0.6); /* Lite mer genomskinlig bakgrund */
    color: #333;
    text-align: left;
    font-size: 1.2rem;
}
.ratt {
    font-size: 1rem;
    margin-top: 10px;
}
/* Döljer textrutan på mindre skärmar */
@media (max-width: 915px) {
    .dags {
        display: none;
    }
}
/* Basstil för Visste du att?-rutan */
#block-delegering22-views-block-faktarutor-block-1 {
  background-color: #f9f9f9; /* Ljus bakgrundsfärg för att skapa kontrast */
  border-left: 5px solid #3498db; /* En färgglad kantlinje för visuell intresse */
  padding: 15px; /* Extra utrymme runt texten */
  border-radius: 8px; /* Rundade hörn för en mjukare känsla */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Lätt skugga för djup */
  font-size: 1.1em; /* Gör texten något större för bättre läsbarhet */
  font-style: italic; /* Ger en citat-känsla */
}
/* Justering av textfärg */
#block-delegering22-views-block-faktarutor-block-1 .view-content {
  color: #333; /* Använd en mörkare grå för bättre kontrast */
}
/* Citat-stil för att rama in texten */
#block-delegering22-views-block-faktarutor-block-1::before {
  content: "“"; /* Citattecken före text */
  font-size: 2em;
  color: #3498db;
  vertical-align: top;
  margin-right: 5px;
}
#block-delegering22-views-block-faktarutor-block-1::after {
  content: "”"; /* Citattecken efter text */
  font-size: 2em;
  color: #3498db;
  vertical-align: bottom;
  margin-left: 5px;
}
/* Blockets bakgrund och styling */
#block-delegering22-views-block-1-mina-h5p-poang-block-1 {
  background-color: #f9f9f9; /* Ljusskuggad bakgrund */
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.kategoribild {
  display: block;
}
.kategoribild img {
 display: block;
 margin: auto;
}
/* Label-stil för Beskrivning och Ämnesområde */
.path-quiz .field__label {
  font-size: 1em;
  font-weight: bold;
  color: #333;
  margin-bottom: 8px;
  display: block;
}
/* Beskrivningens text */
.path-quiz .field--name-body .field__item p {
  font-size: 1.55em;
  color: #555;
  line-height: 1.6;
  margin: 0;
}
/* Stil för Ämnesområden */
.path-quiz .field--name-field-amnesomrade .field__items {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.path-quiz .field--name-field-amnesomrade .field__item {
  display: inline-block;
  font-size: 0.9em;
  border-radius: 12px;
  text-decoration: none;
}
/* Hover-effekt för ämnesområdeslänkar */
.path-quiz .field--name-field-amnesomrade .field__item:hover {
  
}
/* Justering för mobil och mindre skärmar */
@media (max-width: 600px) {
  .path-quiz .field--name-body, .field--name-field-amnesomrade {
    padding: 10px;
  }
  
  .path-quiz .field--name-field-amnesomrade .field__items {
    gap: 5px;
  }
}
/* Bildens positionering */
.img_right  {
  float:right;
}
/* Grundläggande layout för boknavigeringen */
#block-delegering22-boknavigering {
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#block-delegering22-boknavigering .solo-block-title {
  font-size: 1.5em;
  color: #0056b3;
  font-weight: bold;
  margin-bottom: 15px;
  text-align: center;
}
/* Stil för huvudnivå och undermenyer */
.book-menubar {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.book-menubar .menu-item {
  padding: 10px;
  border-bottom: 1px solid #ddd;
}
.book-menubar .menu-item a {
  text-decoration: none;
  font-size: 1em;
  color: #333;
  font-weight: 500;
  transition: color 0.3s ease;
}
.book-menubar .menu-item a:hover {
  color: #0056b3;
}
/* Stil för aktiva och expanderade menyer */
#block-delegering22-boknavigering .menu-item--expanded > a,
.menu-item--active-trail > a,
.is-active {
  font-weight: bold;
  color: #0056b3;
}
#block-delegering22-boknavigering .is-active {
  background-color: #e6f3ff;
  padding: 5px 10px;
  border-radius: 5px;
  display: inline-block;
}
.book-menubar .menu-item--collapsed::after {
    content: "▼";
    font-size: 12px; /* Justera storleken */
    color: #333; /* Färg på pilen */
    margin-left: 5px; /* Ge lite mellanrum från texten */
}
/* Undermeny stil */
.book-menu {
  list-style-type: none;
  padding-left: 20px;
  margin: 10px 0;
}
.book-menu .menu-item {
  padding: 8px 0;
  margin-left: 20px;
}
.book-menu .menu-item a {
  font-size: 0.9em;
  color: #666;
  transition: color 0.3s ease;
}
.book-menu .menu-item a:hover {
  color: #0056b3;
}
/* Grundläggande stil för informationsrutan */
#block-delegering22-skapakontoinformation {
  padding: 20px;
  background-color: #f0f9ff; /* Ljusblå bakgrund för ett lugnande och pålitligt intryck */
  border-left: 5px solid #4a90e2; /* Mörkare blå kant för framträdande effekt */
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Mjuk skugga */
  display: flex;
  align-items: center;
  gap: 15px;
  font-family: Arial, sans-serif;
}
/* Ikon för att ge en vänlig känsla */
#block-delegering22-skapakontoinformation::before {
  content: "ℹ️"; /* Info-ikon */
  font-size: 1.5em;
  color: #4a90e2;
}
/* Textstil för informationsrutan */
#block-delegering22-skapakontoinformation p {
  margin: 0;
  font-size: 1em;
  color: #333;
  line-height: 1.5;
}
#block-delegering22-skapakontoinformation strong {
  color: #4a90e2;
  font-weight: bold;
}
.path-user-register #main-container-inner, .path-user-login #main-container-inner {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Lätt skugga med en mjuk, diffus effekt */
  border-radius: 8px; /* Valfritt, men rundade hörn kan göra skuggan mer harmonisk */
  max-width: 800px;
}
.node--unpublished {background-color: #f9f9f9;}
.path-view-kunskapstester .views-field-title {text-align: center;}
.path-view-kunskapstester .views-field-view-quiz {
  text-align: center; /* Gör att innehållet centreras horisontellt */
}
/* Grundstil för knappen */
.path-view-kunskapstester .views-field-view-quiz .field-content a {
  display: inline-block;
  padding: 10px 20px;
  background-color: #4caf50; /* Grön färg för att skapa en positiv känsla */
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  border-radius: 5px; /* Rundade hörn för en vänlig look */
  transition: background-color 0.3s ease, transform 0.2s ease; /* Smidiga övergångar */
  margin-bottom: 5px;
}
/* Hover-effekt */
.path-view-kunskapstester .views-field-view-quiz .field-content a:hover {
  background-color: #45a049; /* Mörkare grön vid hover */
  transform: translateY(-2px); /* Liten lyft-effekt för interaktiv känsla */
}
/* Aktiv/Fokus-stil */
.path-view-kunskapstester .views-field-view-quiz .field-content a:active {
  background-color: #3d8b41; /* Ännu mörkare grön vid klick */
  transform: translateY(0); /* Återställer lyftet */
}
#quiz-question-answering-form .js-form-type-radio .form-radio {width: 35px;height: 35px;}
#quiz-question-answering-form .js-form-type-checkbox .form-checkbox {width: 35px;height: 35px;}
/* Blockets bakgrund och styling */
#block-delegering22-views-block-1-nya-min-score-block-1 {
    background-color: #f9f9f9; /* Ljusskuggad bakgrund */
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 10px;
}
/* Rubriken (h2) styling */
#block-delegering22-views-block-1-nya-min-score-block-1 h2 {
    font-size: 2.8em;
    color: #665d5d;
    margin-bottom: 15px;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
}
/* Poängens styling (.score) */
#block-delegering22-views-block-1-nya-min-score-block-1 .score {
    font-size: 2.5em;
    color: #4CAF50; /* Grön färg för att signalera framsteg */
    font-weight: 700;
    margin-top: 10px;
    display: inline-block;
    padding: 10px 20px;
    background-color: #e8f5e9;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 15px;
}
/* Grundläggande stil för blocket */
#block-delegering22-googletranslator {
  display: flex;
  justify-content: center; /* Centrerar länken horisontellt */
  align-items: center; /* Centrerar länken vertikalt */
  padding: 15px;
  margin-bottom: 10px; /* Lägger till mellanrum nedanför blocket */
}
/* Stil för länken som knapp */
.google-translator-switch {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  background-color: #3164b9; /* Google-blå färg för association med översättning */
  color: #fff !important; /* Tvingar vit textfärg */
  font-weight: bold;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease, transform 0.2s ease;
  font-size: 1em;
}
/* Ikon bredvid texten */
.google-translator-switch::before {
  content: "🌐"; /* Ikon för jorden */
  margin-right: 8px;
  font-size: 1.2em;
}
/* Hover-effekt */
.google-translator-switch:hover {
  background-color: #3367d6; /* Lätt mörkare blå vid hover */
  transform: translateY(-2px); /* Liten lyft-effekt */
}
/* Ge hela blocket en lätt skugga och padding */
#block-delegering22-arbetsplats {
    background-color: #f9f9f9;  /* Ljus bakgrund för att ge kontrast */
    border-radius: 8px;          /* Rundade hörn för en modern känsla */
    padding: 15px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);  /* Lätt skugga för att lyfta blocket */
}
/* Rubrikens stil */
#block-delegering22-arbetsplats-menu {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
    text-transform: uppercase;
    border-bottom: 2px solid #0055a5;  /* Linje under rubriken för att ge en stilren känsla */
    padding-bottom: 5px;
}
/* Första div-elementet som omsluter hela menyn */
#block-delegering22-arbetsplats-menu .solo-menu {
    margin: 0;
}
/* Menylista */
#block-delegering22-arbetsplats .navigation__menubar {
    list-style: none;  /* Tar bort standardlistpunkt */
    padding: 0;
    margin: 0;
}
/* Styling av varje menyitem */
#block-delegering22-arbetsplats-menu .nav__menu-item {
    margin-bottom: 10px;
    border-radius: 5px;  /* Rundade hörn på varje menyobjekt */
    overflow: hidden;
    transition: background-color 0.3s ease, transform 0.3s ease;
}
/* Hover-effekt på menylänkar */
#block-delegering22-arbetsplats-menu .nav__menu-link {
    display: block;
    padding: 10px 15px;
    color: #333;
    text-decoration: none;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
}
#block-delegering22-arbetsplats-menu .nav__menu-link:hover,
#block-delegering22-arbetsplats-menu .nav__menu-link:focus {
    background-color: #0055a5;  /* Förändrar bakgrund på hover */
    color: #ffffff;             /* Textfärg på hover */
    border-color: #0055a5;      /* Ändrar kantfärg på hover */
    transform: translateX(5px);  /* Liten förskjutning för dynamik */
}
/* Första texten i varje menyobjekt */
#block-delegering22-arbetsplats-menu .menu__url-title {
    font-size: 16px;
    font-weight: normal;
    color: #333;
    display: inline-block;
    padding-right: 5px;
}
/* Fokusläge på länkar */
#block-delegering22-arbetsplats-menu .nav__menu-link:focus {
    outline: none;  /* Tar bort standardfokusram */
    box-shadow: 0 0 0 3px rgba(0, 85, 165, 0.5);  /* Ljusblå ram när länk är i fokus */
}
/* Anpassa för små skärmar */
@media (max-width: 768px) {
    #block-delegering22-arbetsplats {
        padding: 10px;  /* Minska padding på små skärmar */
    }

    #block-delegering22-arbetsplats-menu .nav__menu-link {
        padding: 8px 12px;  /* Minska padding på små skärmar */
    }
}
.page-wrapper h2.hero-title {color: #fff !important;}
.hero-text {color: #fff;}
.liten {font-size: small;}
.webbplatsoversikt {
    background: linear-gradient(135deg, #e3f2fd, #bbdefb); /* Mjuk gradient */
    border: 2px solid #90caf9; /* Tunn, matchande ram */
    border-radius: 12px; /* Lite mjukare hörn */
    padding: 20px; /* Lite mindre padding */
    margin: 15px auto; /* Mindre marginal för små skärmar */
    max-width: 600px; /* Begränsad bredd */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Starkare skugga */
    font-family: 'Arial', sans-serif; /* Läsbar font */
    color: #1a237e; /* Mörkare text för kontrast */
    text-align: center; /* Centrerad text */
}
.webbplatsoversikt h2 {
    color: #0d47a1; /* Djupare blå färg för rubriken */
    font-size: 1.8em; /* Justerad storlek */
    margin-bottom: 10px;
    display: flex; /* Flexbox för att justera ikon och text */
    align-items: center; /* Vertikal centrering */
    justify-content: center; /* Horisontell centrering */
    gap: 10px; /* Mellanrum mellan ikon och text */
}
.webbplatsoversikt .icon {
    font-size: 1.3em; /* Anpassad ikonstorlek */
}
.webbplatsoversikt p {
    font-size: 1em; /* Mindre textstorlek */
    line-height: 1.6; /* Bra avstånd för läsbarhet */
    margin: 0;
}
/* Responsiv design för små skärmar */
@media (max-width: 480px) {
    .webbplatsoversikt {
        padding: 15px; /* Mindre padding på små skärmar */
        border-radius: 8px; /* Mindre rundning */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Lättare skugga */
    }
    .webbplatsoversikt h2 {
        font-size: 1.5em; /* Mindre rubrikstorlek */
    }
    .webbplatsoversikt .icon {
        font-size: 1.1em; /* Mindre ikonstorlek */
    }
    .webbplatsoversikt p {
        font-size: 0.9em; /* Kompakt textstorlek */
        line-height: 1.4; /* Tightare avstånd */
    }
}
.page-node-type-bok .views-field-field-bild {width: 200px;}
.poang_100, .poang_90, .poang_91, .poang_92, .poang_93, .poang_94, .poang_95, .poang_96, .poang_97, .poang_98, .poang_99 {font-size: larger; color: #68c84e;}

/* Ge hela blocket en lätt skugga och padding */
#block-delegering22-views-block-meny-arbetsplatser-block-1 {

}
/* Rubrikens stil */
#block-delegering22-views-block-meny-arbetsplatser-block-1 .solo-block-title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
    text-transform: uppercase;
    border-bottom: 2px solid #0055a5;  /* Linje under rubriken för att ge en stilren känsla */
    padding-bottom: 5px;
}
/* Menylista */
#block-delegering22-views-block-meny-arbetsplatser-block-1 .item-list.solo-ul {
    list-style: none;  /* Tar bort standardlistpunkt */
    padding: 0;
    margin: 0;
}
/* Styling av varje menyitem */
#block-delegering22-views-block-meny-arbetsplatser-block-1 .solo-ul li.solo-clear {
    margin-bottom: 10px;
    border-radius: 5px;  /* Rundade hörn på varje menyobjekt */
    overflow: hidden;
    transition: background-color 0.3s ease, transform 0.3s ease;
}
/* Hover-effekt på menylänkar med snygg underline */
#block-delegering22-views-block-meny-arbetsplatser-block-1 .solo-ul li.solo-clear a {
    display: block;
    padding: 10px 15px;
    color: #333;
    text-decoration: none; /* Ingen standard-understrykning */
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    position: relative; /* För att lägga underline som en pseudo-element */
}
/* Lägg till en snygg underline vid hover */
#block-delegering22-views-block-meny-arbetsplatser-block-1 .solo-ul li.solo-clear a::after {
    content: '';
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 5px;
    height: 2px;
    background-color: #0055a5; /* Färgen för underline */
    transform: scaleX(0); /* Starta med ingen underline */
    transition: transform 0.3s ease;
    transform-origin: left;
}
/* Aktivera underline vid hover eller fokus */
#block-delegering22-views-block-meny-arbetsplatser-block-1 .solo-ul li.solo-clear a:hover::after,
#block-delegering22-views-block-meny-arbetsplatser-block-1 .solo-ul li.solo-clear a:focus::after {
    transform: scaleX(1); /* Gör underline synlig */
}
/* Hover-effekt på länkar */
#block-delegering22-views-block-meny-arbetsplatser-block-1 .solo-ul li.solo-clear a:hover,
#block-delegering22-views-block-meny-arbetsplatser-block-1 .solo-ul li.solo-clear a:focus {
    background-color: #ffffff; /* Ingen ändring av bakgrundsfärg */
    color: #0055a5; /* Ändrar färg på texten */
}
/* Stil för hela blocket */
#block-delegering22-views-block-prov-block-1 {
  background-color: #f9f9f9; /* Ljus bakgrund */
  border: 1px solid #85a4e1; /* Mjukare blå kant */
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Lättare skugga */
  margin-bottom: 20px;
}
/* Stil för rubriken */
#block-delegering22-views-block-prov-block-1 h2 {
  font-size: 1.5rem;
  font-weight: bold;
  color: #444;
  text-align: center;
  margin-bottom: 15px;
}
/* Stil för listan */
#block-delegering22-views-block-prov-block-1 ul.solo-ul {
  list-style: none; /* Ta bort punktlistan */
  padding: 0;
  margin: 0;
}
/* Stil för varje knapp */
#block-delegering22-views-block-prov-block-1 .prov-lank {
  margin: 10px 0;
  background-color: #ffffff; /* Vit bakgrund */
  border: 1px solid #85a4e1; /* Mjukare blå kant */
  border-radius: 5px;
  padding: 10px;
  transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
/* Gör hela knappen till en länk */
#block-delegering22-views-block-prov-block-1 .prov-lank a {
  display: block; /* Gör länken till blocknivå */
  color: #0056b3; /* Mjukare blå färg */
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  padding: 10px; /* Lägg padding så länken fyller hela knappen */
}
/* Hover-effekt för knappar */
#block-delegering22-views-block-prov-block-1 .prov-lank:hover {
  background-color: #e8f0fe; /* Ljusblå bakgrund vid hover */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Mer markerad skugga */
  transform: scale(1.02);
}
#block-delegering2-views-block-prov-block-1 .prov-lank:hover a {
  color: #003d82; /* Mörkare blå färg för texten vid hover */
}
/* Centrera och stila hela resultatområdet */
#quiz_score_possible,
#quiz_score_percent {
    text-align: center; /* Centrera texten */
    font-family: 'Arial', sans-serif; /* Välj en tydlig font */
    font-size: 1.5em; /* Gör texten större */
    color: #fff; /* Ge en mörk färg för bra kontrast */
    margin: 10px 0; /* Lägg till mellanrum mellan rader */
}
/* För att ge en bakgrund och padding */
#quiz_score_possible,
#quiz_score_percent {
    background-color: #739f91; /* Ljus bakgrund för kontrast */
    border: 2px solid #ccc; /* En tunn ram för att separera */
    border-radius: 10px; /* Rundade hörn */
    padding: 15px; /* Inre marginal */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Lätt skugga */
    max-width: 400px; /* Begränsa bredden */
    margin: 20px auto; /* Centrerar div */
}
/* Gör poängprocenten lite mer framträdande */
#quiz_score_percent {
    color: #f2edd3; /* Färga blå för visuell effekt */
    font-weight: bold; /* Fetstil för att framhäva */
}
.user-profile-page #block-delegering2-content {
  background-color: #f9f9f9; /* Subtil ljusgrå bakgrund */
  border: 1px solid #ddd; /* Lätt kantlinje */
  border-radius: 8px; /* Rundade hörn */
  padding: 16px; /* Lite utrymme runt innehållet */
  max-width: 300px; /* Begränsa bredden */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtil skugga */
  margin: 20px auto; /* Centrerar blocket och lägger till utrymme ovan och nedan */
  text-align: center;
}
.user-profile-page #block-delegering2-content h4.label {
  font-size: 1.2rem; /* Gör texten lite större */
  font-weight: bold; /* Markerar texten */
  color: #333; /* Mörkare färg för texten */
  margin-bottom: 8px; /* Lite utrymme under rubriken */
}
.user-profile-page #block-delegering2-content .js-form-item {
  font-size: 1rem; /* Normal textstorlek */
  color: #555; /* Mjukare färg för innehållet */
  line-height: 1.5; /* Bättre läsbarhet */
}
.user-profile-page #block-delegering2-content:hover {
  background-color: #f0f8ff; /* Ändra bakgrunden vid hover för att få det att poppa */
  border-color: #cce7ff; /* Ändra kantlinjefärg vid hover */
}
.klart {color: #1BB812;}
.pagar {color: #B84312;}

/* Grundstil för diplomet */
#diplom1 {
  position: relative; /* Gör att texten kan placeras i förhållande till bilden */
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

/* Bilden för diplomet */
#diplom1 img {
  display: block;
  width: 100%;
  height: auto;
}

/* All text som tillhör diplomet */
.views-field-field-namn .diplom-namn,
.views-field-nothing .diplom_text,
.views-field-field-quiz-name .diplom-kunskapsprov,
.views-field-field-time-end .diplom-datum {
  position: absolute; /* Placera texten ovanpå diplomet */
  left: 50%; /* Centrera horisontellt */
  transform: translateX(-50%); /* Justera för exakt centrering */
  color: #333;
  text-align: center;
}

/* Namnet */
.views-field-field-namn .diplom-namn {
  top: 35%; /* Vertikal placering */
  font-size: 28px;
  font-weight: bold;
  margin-top: 50px;
}

/* Texten "har med godkänt resultat..." */
.views-field-nothing .diplom_text {
  top: 50%; /* Vertikal placering */
  font-size: 18px;
  line-height: 1.5;
}

/* Kunskapsprovets namn */
.views-field-field-quiz-name .diplom-kunskapsprov {
  top: 65%; /* Vertikal placering */
  font-size: 22px;
  font-weight: bold;
  color: #0073e6;
}

/* Datum */
.views-field-field-time-end .diplom-datum {
  top: 80%; /* Vertikal placering */
  font-size: 16px;
  color: #555;
}

/* Anpassningar för mindre skärmar */
@media (max-width: 768px) {
  .views-field-field-namn .diplom-namn {
    font-size: 24px;
    margin-top: 0px;
  }
  .views-field-nothing .diplom_text {
    font-size: 16px;
  }
  .views-field-field-quiz-name .diplom-kunskapsprov {
    font-size: 18px;
  }
  .views-field-field-time-end .diplom-datum {
    font-size: 14px;
  }
}



/* Blocket för "Nytt i bloggen" */
#block-delegering2-views-block-nytt-i-bloggen-block-1 {
  background-color: #f9f9f9; /* Ljus bakgrund för att skilja blocket från resten av sidan */
  border: 2px solid #e0e0e0; /* En diskret ram */
  border-radius: 8px; /* Rundade hörn för ett mjukare utseende */
  padding: 20px; /* Utrymme runt innehållet */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* En subtil skugga för djup */
  max-width: 800px; /* Begränsar bredden för bättre läsbarhet */
  margin: 20px auto; /* Centrerar blocket */
}
/* Rubriken */
#block-delegering2-views-block-nytt-i-bloggen-block-1 .solo-block-title {
  font-size: 1.8rem; /* Större textstorlek */
  color: #333; /* Mörk text för bra kontrast */
  font-weight: bold;
  text-align: center; /* Centrerad rubrik */
  margin-bottom: 15px; /* Utrymme under rubriken */
  text-transform: uppercase; /* Versaler för att göra den framträdande */
}
/* Listan */
#block-delegering2-views-block-nytt-i-bloggen-block-1 .item-list {
  list-style: none; /* Tar bort standardpunktlistan */
  padding: 0; /* Tar bort extra utrymme */
  margin: 0;
}
/* Enskilda listobjekt */
#block-delegering2-views-block-nytt-i-bloggen-block-1 .item-list li {
  padding: 10px 15px; /* Utrymme runt varje artikel */
  margin-bottom: 10px; /* Utrymme mellan artiklar */
  background-color: #fff; /* Vit bakgrund för kontrast */
  border: 1px solid #ddd; /* Tunn ram runt varje objekt */
  border-radius: 4px; /* Rundade hörn */
  transition: transform 0.2s, box-shadow 0.2s; /* Animation för hover-effekt */
}
/* Hover-effekt för listobjekt */
#block-delegering2-views-block-nytt-i-bloggen-block-1 .item-list li:hover {
  transform: scale(1.02); /* Lätt zoom-effekt */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Mer skugga för framhävning */
}
/* Länkar */
#block-delegering2-views-block-nytt-i-bloggen-block-1 .views-field-title a {
  color: #007acc; /* Blå länkfärg */
  text-decoration: none; /* Tar bort understrykning */
  font-size: 1.2rem; /* Lagom storlek */
  font-weight: 500; /* Mellanvikt */
  display: block; /* Gör länken klickbar över hela objektet */
}
/* Länkhover */
#block-delegering2-views-block-nytt-i-bloggen-block-1 .views-field-title a:hover {
  text-decoration: underline; /* Understrykning vid hover */
  color: #005b99; /* Mörkare blå nyans */
}
/* "Mer"-länken */
#block-delegering2-views-block-nytt-i-bloggen-block-1 .more-link a {
  display: inline-block;
  margin-top: 15px;
  text-align: center;
  color: #fff; /* Vit text */
  background-color: #007acc; /* Blå bakgrund */
  padding: 10px 20px;
  border-radius: 4px;
  text-transform: uppercase; /* Versaler */
  font-weight: bold;
  text-decoration: none;
  transition: background-color 0.2s;
}
/* Hover för "Mer"-länken */
#block-delegering2-views-block-nytt-i-bloggen-block-1 .more-link a:hover {
  background-color: #005b99; /* Mörkare blå */
}
/* Container för hela definitionen */
.page-node-type-ord .field--name-field-definition {
  background-color: #f9f9f9; /* Ljus bakgrund */
  border: 1px solid #ddd; /* Lätt grå kant */
  border-radius: 8px; /* Rundade hörn */
  padding: 20px; /* Inre marginaler för utrymme */
  margin-bottom: 20px; /* Utrymme mellan definitioner */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* Lätt skugga för upphöjd effekt */
}
/* Rubrik för definitionen */
.page-node-type-ord .field__label {
  font-size: 1.2em; /* Lite större text för rubriken */
  color: #007bff; /* Blå färg för rubriken */
  font-weight: bold; /* Fet stil för rubriken */
  margin-bottom: 10px; /* Utrymme under rubriken */
}
/* Texten i definitionen */
.page-node-type-ord .field__item {
  font-size: 1em; /* Standardstorlek på text */
  color: #333; /* Mörkare textfärg för bättre läsbarhet */
  line-height: 1.6; /* Ökat radavstånd för lättläst text */
  margin: 0; /* Ta bort onödig marginal */
}
/* Blockets container */
.path-quiz #block-delegering2-views-block-fler-kunskapstester-block-1 {
    background-color: #f9f9f9; /* Ljus bakgrund */
    border: 1px solid #ddd; /* Tunn ram */
    border-radius: 8px; /* Mjuka hörn */
    padding: 20px;
    margin: 20px 0; /* Luft mellan block */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Lätt skugga */
}
/* Rubriken */
.path-quiz #block-delegering2-views-block-fler-kunskapstester-block-1 .solo-block-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: #0074d9; /* Anpassa efter din färgpalett */
    margin-bottom: 10px;
    border-bottom: 2px solid #0074d9;
    padding-bottom: 5px;
}
/* Text under rubriken */
.path-quiz #block-delegering2-views-block-fler-kunskapstester-block-1 .fler_tester {
    font-size: 1.2rem;
    font-weight: 600;
    color: #555; /* Neutral ton */
    margin-bottom: 15px;
    display: block;
}
/* Länkar till tester */
.path-quiz #block-delegering2-views-block-fler-kunskapstester-block-1 .prova-fler a {
    font-size: 1rem;
    color: #0074d9; /* Primär färg */
    text-decoration: none;
    display: block;
    margin: 8px 0; /* Luft mellan länkar */
    transition: color 0.3s, transform 0.2s;
}
.path-quiz #block-delegering2-views-block-fler-kunskapstester-block-1 .prova-fler a:hover {
    color: #0056a3; /* Mörkare blå vid hover */
    transform: translateX(5px); /* Små rörelser för effekt */
}
/* "Fler"-knapp */
.path-quiz #block-delegering2-views-block-fler-kunskapstester-block-1 .more-link a {
    display: inline-block;
    font-size: 0.9rem;
    color: #fff;
    background-color: #0074d9;
    padding: 8px 15px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
    margin-top: 15px;
    transition: background-color 0.3s;
}
.path-quiz #block-delegering2-views-block-fler-kunskapstester-block-1 .more-link a:hover {
    background-color: #0056a3; /* Mörkare blå vid hover */
}
/* För huvudsektionen */
.path-quiz-question #region-box-main {
    margin: 20px auto;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    max-width: 800px;
}
/* Rubrikens styling */
.path-quiz-question .page-title-text {
    font-size: 2rem;
    font-weight: bold;
    color: #333;
    text-align: center;
    margin-bottom: 20px;
}
/* Styling för fråga */
.path-quiz-question .field--type-text-long .field__label {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 8px;
    color: #444;
}
.path-quiz-question .field--type-text-long .field__item {
    font-size: 1rem;
    color: #555;
    line-height: 1.5;
    padding: 10px;
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 20px;
}
/* Styling för ämnesområdet */
.path-quiz-question .field--type-entity-reference {
    font-size: 0.9rem;
    color: #888;
    font-style: italic;
    text-align: right;
    margin-top: -10px;
}
/* Länk till svaret */
.path-quiz-question #block-delegering2-sesvaret .field__item {
    text-align: center;
    font-size: 1rem;
    margin-top: 20px;
}
.path-quiz-question #block-delegering2-sesvaret .field__item a {
    color: #0073e6;
    text-decoration: none;
    font-weight: bold;
}
.path-quiz-question #block-delegering2-sesvaret .field__item a:hover {
    text-decoration: underline;
    color: #005bb5;
}
/* Generella förbättringar */
.path-quiz-question .hidden {
    display: none !important;
}
.path-quiz-question a {
    transition: color 0.3s, text-decoration 0.3s;
}
/* Sektionens styling */
.path-node-683 #block-delegering2-views-block-lagsnuttar-block-1 {
    margin: 20px auto;
    padding: 20px;
    background-color: #f4f4f4;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    max-width: 800px;
}
/* Textstyling för lagutdrag */
.path-node-683 .lagtext {
    font-size: 1rem;
    color: #333;
    line-height: 1.6;
    margin-bottom: 15px;
    padding: 15px;
    background-color: #ffffff;
    border-left: 4px solid #0073e6;
    border-radius: 4px;
}
/* Källa till lagtexten */
.path-node-683 .kalla-lag {
    font-size: 0.9rem;
    color: #555;
    font-style: italic;
    text-align: right;
    margin-top: 10px;
}
/* Förbättringar för länkar (om det finns några i texten) */
.path-node-683 .lagtext a {
    color: #0073e6;
    text-decoration: none;
    font-weight: bold;
}
.path-node-683 .lagtext a:hover {
    text-decoration: underline;
    color: #005bb5;
}
.path-node-683 .field--name-field-amnesomrade {display: none;}
/* För hela blockets responsivitet */
@media (max-width: 768px) {
    .path-node-683 #block-delegering2-views-block-lagsnuttar-block-1 {
        padding: 15px;
    }path-node-683-sjukskoterska .lagtext {
        font-size: 0.9rem;
    }
    .path-node-683 .kalla-lag {
        font-size: 0.8rem;
    }
}
.center {text-align: center;}
#block-delegering2-views-block-antal-anvandare-block-1 {
    background-color: #f9f9f9; /* Ljus bakgrund */
    border: 1px solid #ddd;  /* Lätt kant */
    border-radius: 8px;      /* Rundade hörn */
    padding: 15px;          /* Inre marginal */
    margin: 20px auto;      /* Yttre marginal, centrerat */
    text-align: center;     /* Centrera texten */
    max-width: 600px;       /* Begränsad bredd */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Skugga för djup */
}
#block-delegering2-views-block-antal-anvandare-block-1 .antal_anv {
    font-size: 18px;          /* Lite större text */
    color: #333;             /* Primär textfärg */
}
#block-delegering2-views-block-antal-anvandare-block-1 .antal_anv strong {
    font-size: 24px;         /* Lyft fram siffran */
    color: #007bff;          /* Blå färg för siffran */
}
@media (max-width: 768px) {
    #block-delegering2-views-block-antal-anvandare-block-1 {
        padding: 10px;
        margin: 15px auto;
        font-size: 16px;
    }

    #block-delegering2-views-block-antal-anvandare-block-1 .antal_anv strong {
        font-size: 20px;
    }
}
.page-node-type-bok .page-wrapper h2.hero-title {color: #fff !important;}
.page-node-type-bok .hero-text {color: #fff;}
blockquote {
  border-left: 4px solid #007ACC; /* Blå färg som kan signalera professionalitet */
  padding: 10px 15px;
  background-color: #f9f9f9; /* Ljusgrå bakgrund */
  font-style: italic;
  color: #333; /* Mörk textfärg för god läsbarhet */
  margin: 15px 0;
}
blockquote p {
  margin: 0; /* Tar bort extra marginaler från p-elementet */
  font-size: 1.1em; /* Lite större text för att framhäva citatet */
}
blockquote {
  border-left: 4px solid #007ACC; /* Blå färg som kan signalera professionalitet */
  padding: 10px 15px;
  background-color: #f9f9f9; /* Ljusgrå bakgrund */
  font-style: italic;
  color: #333; /* Mörk textfärg för god läsbarhet */
  margin: 15px 0;
}
blockquote p {
  margin: 0; /* Tar bort extra marginaler från p-elementet */
  font-size: 1.1em; /* Lite större text för att framhäva citatet */
}
.page-node-type-bok .komihag {
  border: 2px solid #4CAF50; /* Grön färg för lugn och positiv signal */
  background-color: #F0FFF4; /* Ljusgrön bakgrund för subtil framtoning */
  padding: 15px;
  border-radius: 5px; /* Mjuka hörn för modern och vänlig känsla */
  font-weight: bold; /* Markerar vikten av texten */
  color: #2E7D32; /* Mörkare grön text för tydlighet */
  margin: 20px 0; /* Avstånd ovanför och under */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Liten skugga för djupkänsla */
}
.page-node-type-bok .komihag:before {
  content: "💡 "; /* Glödlampa för att signalera "kom ihåg" eller "tips" */
  font-size: 1.2em; /* Gör ikonen något större */
  color: #4CAF50; /* Samma gröna nyans som kanten */
}
#block-delegering2-diplom {
  background-color: #fdfdfd; /* Ljusare bakgrund för kontrast */
  border: 2px solid #3498db; /* Färgglad ram */
  border-radius: 15px; /* Rundade hörn */
  padding: 20px; /* Generöst med padding */
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.1); /* Lite djupare skugga */
  max-width: 600px; /* Begränsa bredden */
  margin: 20px auto; /* Centrera blocket */
  position: relative; /* För dekoration */
}
#block-delegering2-diplom::before,
#block-delegering2-diplom::after {
  content: '';
  position: absolute;
  border: 3px dashed #74b9ff; /* Dekorativ kantlinje */
  border-radius: 10px;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  z-index: -1; /* Placera bakom blocket */
}
#block-delegering2-diplom h2.solo-block-title {
  color: #2c3e50; /* Mörkblå textfärg */
  font-family: 'Arial', sans-serif;
  font-size: 24px; /* Stor rubriktext */
  margin-bottom: 15px; /* Utrymme under rubriken */
  text-align: center; /* Centrera rubriken */
}
#block-delegering2-diplom p {
  font-size: 16px;
  color: #34495e;
  margin-bottom: 15px;
  text-align: center;
}
#block-delegering2-diplom .field__item {
  text-align: center; /* Centrera innehåll */
}
#block-delegering2-diplom a {
  display: inline-block;
  color: #ffffff;
  background-color: #3498db;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  font-size: 16px;
  font-family: 'Arial', sans-serif;
  transition: background-color 0.3s ease;
  margin: 5px; /* Litet mellanrum mellan knappar */
  white-space: nowrap; /* Förhindra radbrytning i knapparna */
}
#block-delegering2-diplom a:hover {
  background-color: #2980b9; /* Mörkare blå vid hover */
}
#block-delegering2-diplom a + a {
  margin-left: 10px; /* Litet avstånd mellan knappar */
}
#block-delegering2-diplom a:hover {
  background-color: #2980b9; /* Mörkare blå vid hover */
}
/* Hela regionen */
.path-view-kurser .region-inner.main-box-inner {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
/* Rubriken */
.path-view-kurser #block-delegering2-page-title .page-title-text {
    font-size: 2rem;
    font-weight: bold;
    color: #333;
    text-align: center;
    margin-bottom: 20px;
}
/* Introduktionstexten */
.path-view-kurser #kurs_rubrik {
    font-size: 1.5rem;
    font-weight: 600;
    color: #444;
    text-align: center;
    margin-bottom: 10px;
}
.path-view-kurser .view-header p {
    font-size: 1rem;
    color: #555;
    line-height: 1.6;
    text-align: center;
    max-width: 800px;
    margin: 0 auto 20px auto;
}
/* Kurslistan */
.path-view-kurser .view-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}
/* Individuella kurskort */
.path-view-kurser .kurser {
    background: #ffffff;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.path-view-kurser .kurser:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
/* Kursnamn */
.path-view-kurser .kurser .kursnamn a {
    font-size: 1.25rem;
    font-weight: bold;
    color: #0056b3;
    text-decoration: none;
}
.path-view-kurser .kurser .kursnamn a:hover {
    color: #003d80;
    text-decoration: underline;
}
/* Kursbeskrivning */
.path-view-kurser .kurser .kursbeskrivning {
    font-size: 1rem;
    color: #666;
    line-height: 1.5;
    margin-top: 10px;
}
/* Glossify-länkar */
.path-view-kurser .kurser .kursbeskrivning .glossify-tooltip-link {
    color: #007bff;
    text-decoration: underline;
}
.path-view-kurser .kurser .kursbeskrivning .glossify-tooltip-link:hover {
    color: #0056b3;
    text-decoration: none;
}
/* För mindre skärmar */
@media (max-width: 768px) {
    .path-view-kurser #kurs_rubrik {
        font-size: 1.25rem;
    }
    .path-view-kurser .view-header p {
        font-size: 0.95rem;
    }
    .path-view-kurser .kurser {
        padding: 10px;
    }
    .path-view-kurser .kurser .kursnamn a {
        font-size: 1.1rem;
    }
    .path-view-kurser .kurser .kursbeskrivning {
        font-size: 0.95rem;
    }
}
/* Allmän styling för hela sidan */
.path-view-ovningar .region-inner.main-box-inner {
    background-color: #f9f9f9; /* Ljus bakgrund för bättre läsbarhet */
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    font-family: 'Arial', sans-serif;
}
/* Rubrik-styling */
.path-view-ovningar .page-title-text {
    font-size: 2rem;
    color: #333;
    margin-bottom: 20px;
    text-align: center;
    font-weight: bold;
}
/* Stylar varje övning (row) */
.path-view-ovningar .views-row {
    margin-bottom: 20px;
    padding: 15px;
    background-color: #ffffff; /* Vit bakgrund för kontrast */
    border: 1px solid #ddd;
    border-radius: 8px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.path-view-ovningar .views-row:hover {
    transform: translateY(-5px); /* Lyfter elementet lite vid hover */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* Rubriklänkar till övningar */
.path-view-ovningar .quiz-rubrik a {
    font-size: 1.5rem;
    color: #007bff; /* Länkfärg */
    text-decoration: none;
    font-weight: bold;
}
.path-view-ovningar .quiz-rubrik a:hover {
    color: #0056b3; /* Mörkare nyans vid hover */
    text-decoration: underline;
}
/* Beskrivning av övningar */
.path-view-ovningar .quiz-beskrivning {
    font-size: 1rem;
    color: #555;
    margin-top: 10px;
    line-height: 1.5;
}
/* Länkar i beskrivningarna */
.path-view-ovningar .quiz-beskrivning a {
    color: #007bff;
    text-decoration: none;
    border-bottom: 1px dotted #007bff;
}
.path-view-ovningar .quiz-beskrivning a:hover {
    color: #0056b3;
    border-bottom: 1px solid #0056b3;
}
/* Anpassning för mobila enheter */
@media (max-width: 768px) {
    .path-view-ovningar .views-row {
        padding: 10px;
    }

    .path-view-ovningar .quiz-rubrik a {
        font-size: 1.25rem;
    }

    .path-view-ovningar .quiz-beskrivning {
        font-size: 0.9rem;
    }
}
.field--name-field-iframe .iframe_title {display: none;}
#block-delegering2-iframeavvikelser {text-align: center;}
#block-delegering2-iframebasalahygienrutiner {text-align: center;}
#block-delegering2-iframesbar {text-align: center;}
#block-delegering2-iframelakemedel {text-align: center;}
#block-delegering2-iframedelegering2 {text-align: center;}
#block-delegering2-iframeforandrathalsotillstand {text-align: center;}
#block-delegering2-iframediabetes {text-align: center;}
#block-delegering2-iframekateter {text-align: center;}
#block-delegering2-iframeblodtryck {text-align: center;}
#block-delegering2-iframeblodprov {text-align: center;}
#block-delegering2-iframetemp {text-align: center;}
#block-delegering2-iframesarvard {text-align: center;}
#block-delegering2-iframestomivard {text-align: center;}
#block-delegering2-iframelindaben {text-align: center;}
#block-delegering2-iframesondmatning {text-align: center;}
.field--type-iframe {text-align: center;}
/* Grundstil för formuläret */
.path-user-reset .user-pass-reset {
  max-width: 400px;
  margin: 50px auto;
  padding: 20px;
  background: #f9f9f9;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  font-family: Arial, sans-serif;
  color: #333;
}
/* Stil för texten */
.path-user-reset .user-pass-reset p {
  margin: 10px 0;
  line-height: 1.5;
  font-size: 16px;
  color: #555;
}
.path-user-reset .user-pass-reset em.placeholder {
  font-style: normal;
  color: #007acc;
  font-weight: bold;
}
/* Stil för knappen */
.path-user-reset .solo-button {
  display: inline-block;
  width: 100%;
  padding: 10px 15px;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  background: linear-gradient(135deg, #007acc, #005999);
  border: none;
  border-radius: 5px;
  cursor: pointer;
  text-align: center;
  text-transform: uppercase;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.path-user-reset .solo-button:hover {
  background: linear-gradient(135deg, #005999, #007acc);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.path-user-reset .solo-button:active {
  transform: translateY(1px);
  box-shadow: none;
}
/* Stil för elementens layout */
.path-user-reset .element-container-wrapper {
  margin-top: 20px;
}
.fraga {
    display: flex;
    align-items: center;
    gap: 8px; /* Justera avståndet mellan bilden och texten */
}
.vfrg {
    width: 20px; /* Justera storleken på bilden */
    height: auto; /* Behåll proportionerna */
}
#blogg-las-mer {
  background-color: #ffffff;
  border: 2px solid #007bff;
  border-radius: 12px;
  padding: 20px;
  margin-top: 24px;
  margin-bottom: 24px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  position: relative;
}
#blogg-las-mer::before {
  content: "✨";
  position: absolute;
  top: -12px;
  left: 20px;
  font-size: 1.5rem;
  color: #007bff;
}
#blogg-las-mer .field__label {
  font-size: 1.4rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 12px;
  border-bottom: 2px solid #007bff;
  padding-bottom: 4px;
  display: inline-block;
}
#blogg-las-mer .field__items {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#blogg-las-mer .field__item a {
  text-decoration: none;
  color: #007bff;
  font-weight: 600;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
}
#blogg-las-mer .field__item a:hover {
  background-color: #007bff;
  color: #ffffff;
  border-color: #0056b3;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
#blogg-las-mer .field__item a:focus {
  outline: 2px solid #0056b3;
  outline-offset: 2px;
}
#utb-las-mer {
  background-color: #f3f7ff;
  border: 2px solid #28a745;
  border-radius: 12px;
  padding: 20px;
  margin: 24px auto; /* Centrera på sidan */
  max-width: 800px; /* Begränsar bredden */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  position: relative;
}
#utb-las-mer::before {
  content: "📘";
  position: absolute;
  top: -12px;
  left: 20px;
  font-size: 1.5rem;
  color: #28a745;
}
#utb-las-mer .field__label {
  font-size: 1.4rem;
  font-weight: bold;
  color: #155724;
  margin-bottom: 12px;
  border-bottom: 2px solid #28a745;
  padding-bottom: 4px;
  display: inline-block;
}
#utb-las-mer .field__items {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#utb-las-mer .field__item a {
  text-decoration: none;
  color: #28a745;
  font-weight: 600;
  padding: 8px 0px;
  border: 1px solid transparent;
  border-radius: 6px;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
}
#utb-las-mer .field__item a:hover {
  background-color: #28a745;
  color: #ffffff;
  border-color: #1c7430;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
#utb-las-mer .field__item a:focus {
  outline: 2px solid #1c7430;
  outline-offset: 2px;
}
.flag-markera-for-repetition {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 1rem;
  font-weight: bold;
  border-radius: 8px;
  text-decoration: none;
  margin-bottom: 10px; /* Marginal under varje knapp */
  position: relative;
  margin-left: auto; /* Centrera */
  margin-right: auto; /* Centrera */
  transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
}
/* Markera för repetition */
.flag-markera-for-repetition.action-flag {
  background-color: #fff3cd; /* Ljusgul bakgrund */
  border: 1px solid #ffc107; /* Gul kant */
  color: #856404; /* Matchande textfärg */
}
.flag-markera-for-repetition.action-flag:hover {
  background-color: #ffe8a1; /* Ljusare gul */
  color: #5a3e01; /* Starkare textfärg */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.flag-markera-for-repetition.action-flag::before {
  content: "🔖"; /* Bokmärke-ikon */
  font-size: 1.2rem;
}
/* Ta bort från repetitionslistan */
.flag-markera-for-repetition.action-unflag {
  background-color: #f8d7da; /* Ljus röd bakgrund */
  border: 1px solid #f5c6cb; /* Röd kant */
  color: #721c24; /* Matchande textfärg */
}
.flag-markera-for-repetition.action-unflag:hover {
  background-color: #f1b0b7; /* Ljusare röd */
  color: #491217; /* Starkare textfärg */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.flag-markera-for-repetition.action-unflag::before {
  content: "🗑️"; /* Soptunneikon */
  font-size: 1.2rem;
}
.flag-markera-for-repetition a {
  text-decoration: none;
  color: inherit; /* Ärva färg från föräldern */
}
.flag-markera-for-repetition a:hover {
  text-decoration: underline; /* Understrykning för tydligare interaktion */
}
.gast_markera {
  background-color: #eaf5ff; /* Ljusblå bakgrund för att fånga uppmärksamhet */
  border: 2px solid #007bff; /* Blå kant för att matcha temat */
  border-radius: 8px; /* Rundade hörn */
  padding: 12px 16px; /* Bekväm inre marginal */
  margin-bottom: 16px; /* Avstånd under blocket */
  text-align: center; /* Centrera texten */
  font-size: 1.1rem; /* Lite större text */
  font-weight: bold; /* Gör texten mer framträdande */
  color: #004085; /* Matchande mörkblå textfärg */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Mjuk skugga */
  position: relative;
}
.gast_markera::before {
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
  font-size: 1.4rem;
  color: #007bff; /* Matchar kanten */
}
.gast_markera:hover {
  background-color: #d4edff; /* Ljusare blå vid hovring */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Starkare skugga */
}
/* Gemensam stil för bokmärkesknappar */
.flag-bookmark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 1rem;
  font-weight: bold;
  border-radius: 8px;
  text-decoration: none;
  margin-bottom: 10px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  text-align: center;
  transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
  max-width: 250px; /* Begränsar bredden */
}
/* Stil för "Spara som bokmärke" */
.flag-bookmark.action-flag {
  background-color: #fff5e6; /* Ljus orange bakgrund */
  border: 2px solid #ffa502; /* Orange kant */
  color: #cc7a00; /* Matchande textfärg */
}
.flag-bookmark.action-flag:hover {
  background-color: #ffe0b3; /* Ljusare orange vid hover */
  color: #b36b00; /* Starkare text */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Skugga */
}
.flag-bookmark.action-flag::before {
  content: "🔖"; /* Bokmärke-ikon */
  font-size: 1.2rem;
  color: #ffa502; /* Orange ikon */
}
/* Stil för "Ta bort bokmärke" */
.flag-bookmark.action-unflag {
  background-color: #fbe9e9; /* Ljus röd bakgrund */
  border: 2px solid #ff6b6b; /* Röd kant */
  color: #c0392b; /* Mörkröd textfärg */
}
.flag-bookmark.action-unflag:hover {
  background-color: #f8d7da; /* Ljusare röd vid hover */
  color: #a93226; /* Starkare text */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Skugga */
}
.flag-bookmark.action-unflag::before {
  content: "❌"; /* Kryssikon för borttagning */
  font-size: 1.2rem;
  color: #ff6b6b; /* Matchande ikonfärg */
}
/* Stil för länkar i flaggorna */
.flag-bookmark a {
  text-decoration: none;
  color: inherit; /* Ärva färgen från föräldern */
}
.flag-bookmark a:hover {
  text-decoration: underline; /* Understrykning för interaktivitet */
}
.ui-accordion-header-active {
  color: #fff !important;
}
.badges {
  display: flex;
  justify-content: center;
  align-items: center;
}
.lasacontainer {
  max-width: 885px;
  margin: 0 auto; /* Detta centrerar blocket horisontellt */
}
/* Grundläggande stil för nav-blocket */
#block-delegering2-kategori {
  background-color: #f9f9f9; /* Lätt bakgrundsfärg */
  border: 1px solid #ddd; /* Tunn ram */
  border-radius: 8px; /* Mjuka hörn */
  padding: 20px; /* Avstånd inuti blocket */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Lätt skugga */
  max-width: 348px; /* Begränsar bredden */
  margin: 20px auto; /* Centrerar blocket på sidan */
}
/* Titelstil */
#block-delegering2-kategori .block__title {
  font-size: 1.5em;
  font-weight: bold;
  margin-bottom: 15px;
  text-align: center; /* Centrera titeln */
  color: #333;
}
/* Navigationens huvudlista */
.navigation__menubar {
  list-style: none; /* Ta bort standardpunktlista */
  padding: 0;
  margin: 0;
}
/* Navigationslänkar */
.nav__menu-link {
  display: block;
  padding: 10px 15px;
  margin: 5px 0;
  text-decoration: none;
  font-size: 1em;
  font-weight: 500;
  color: #007bff; /* Blå färg */
  background-color: #fff; /* Vit bakgrund */
  border: 1px solid #ddd;
  border-radius: 5px;
  transition: all 0.3s ease;
}
.nav__menu-link:hover {
  background-color: #007bff; /* Blå bakgrund vid hovring */
  color: #fff; /* Vit text vid hovring */
}
/* Aktiv länk */
.nav__menu-link.is-active {
  background-color: #0056b3;
  color: #fff;
  font-weight: bold;
}
/* Undermenyer */
.sub__menu {
  margin: 10px 0 0;
  padding-left: 15px;
  border-left: 2px solid #ddd;
  display: none; /* Dölj undermenyn som standard */
}

.nav__menu-item:hover .sub__menu {
  display: block; /* Visa undermenyn vid hovring */
}
/* Undermenylänkar */
.sub__menu .nav__menu-link {
  font-size: 0.9em;
  padding: 8px 12px;
  margin: 3px 0;
}
/* Responsiv stil */
@media (max-width: 600px) {
  #block-delegering2-kategori {
    max-width: 100%;
    padding: 15px;
  }

  .nav__menu-link {
    font-size: 0.9em;
    padding: 8px 10px;
  }

  .block__title {
    font-size: 1.2em;
  }
}
.new-full-width-area {
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: #f8f8f8; /* valfritt */
}
#block-delegering2-userwelcome {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    max-width: 600px;
    margin: 20px auto;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.welcome-heading {
    font-size: 1.8rem;
    margin-bottom: 10px;
    color: #333;
}
.welcome-message {
    font-size: 1.2rem;
    margin-bottom: 20px;
    color: #666;
}
.quick-links {
    list-style-type: none;
    padding: 0;
    margin: 20px 0;
}
.quick-links li {
    margin-bottom: 10px;
}
.quick-links li a {
    text-decoration: none;
    color: #007BFF;
    font-weight: bold;
}
.quick-links li a:hover {
    text-decoration: underline;
}
.tips {
    background-color: #fff8e1;
    padding: 10px;
    border-left: 4px solid #ffc107;
    font-style: italic;
    margin-bottom: 20px;
}
.recommendations {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.recommendation-link {
    display: block;
    text-decoration: none;
    color: #333; /* Mörkgrå text */
    background-color: #f0f0f0; /* Ljusgrå bakgrund */
    padding: 10px;
    border-radius: 5px;
    text-align: center;
    font-weight: normal; /* Mindre framträdande text */
    border: 1px solid #ccc; /* Tunn kant för definition */
    transition: background-color 0.3s, color 0.3s; /* Mjuk hover-effekt */
}
.recommendation-link:hover {
    background-color: #e0e0e0; /* Lite mörkare grå vid hover */
    color: #000; /* Svart text vid hover */
}
.contact-message {
    margin-top: 20px;
    font-size: 1rem;
    color: #555;
}
#quiz-progress {text-align: right;}
#block-delegering2-valkommen .field--name-body {margin-bottom: 0px;}
#block-delegering2-bookeditlinks ul {
    list-style-type: none; /* Tar bort prickarna */
    margin: 0; /* Tar bort standardmarginaler */
    padding: 0; /* Tar bort standardindrag */
}
#block-delegering2-bookeditlinks li {
    margin: 0; /* Tar bort eventuell marginal runt listobjekten */
    padding: 0; /* Tar bort eventuell padding */
    margin-right: 10px; /* Justera värdet för att få önskat utrymme */
}
#block-delegering2-bookeditlinks .book-blocks-toc__link-wrapper {
    padding-left: 5px;
    padding-right: 5px;
}
#block-delegering2-bookeditlinks .element-container-wrapper {margin-top: 1px;}
.path-quiz .field--name-body {font-size: larger;}
.kat-gyllene {display: none;}

/* Centrera hela annonsblocket */
#block-delegering2-simpleads {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 0 auto;
}
/* Ta bort list-styling för ul och li */
#block-delegering2-simpleads .simpleads-slider {
  list-style: none; /* Ta bort prickarna */
  padding: 0; /* Ta bort eventuella standardavstånd */
  margin: 0; /* Ta bort eventuella standardavstånd */
}
#block-delegering2-simpleads .simpleads-slider li {
  display: inline-block; /* Visa innehållet i li horisontellt */
}
/* Bildjustering (valfritt, om bilder behöver centreras eller anpassas) */
#block-delegering2-simpleads img {
  display: block;
  margin: 0 auto;
  max-width: 100%; /* Se till att bilder inte blir för stora */
  height: auto;
}
/* Justera länken om nödvändigt */
#block-delegering2-simpleads a {
  text-decoration: none; /* Ingen understrykning för länkar */
  display: inline-block; /* Behåll blocknivå för länken */
}
.info-div {
  background-color: #e6f2f7; /* Ljus bakgrund för behaglig kontrast */
  border: 2px solid #007acc; /* Tydlig blå kant */
  border-radius: 8px; /* Rundade hörn för ett mjukare intryck */
  padding: 20px;
  margin: 20px 0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Diskret skugga för lyft */
  color: #333; /* Tydlig och lättläst text */
  display: flex;
  flex-direction: column; /* Gör innehållet vertikalt för enkel layout */
  font-family: Arial, sans-serif; /* Läsbar font */
}
.info-div .views-field-body {
  margin-bottom: 10px; /* Skapar lite utrymme mellan meddelandet och flagglänken */
}
.info-div .views-field-body .field-content {
  font-size: 1.1em; /* Lättförstorad text för bättre läsbarhet */
  line-height: 1.6; /* Mer luft mellan rader */
}
.info-div a {
  color: #0056b3; /* Mörkblå länkfärg */
  text-decoration: underline; /* Understrykning för synlighet */
  font-weight: bold; /* Gör länken framträdande */
}
.info-div a:hover {
  color: #003d7a; /* Mörkare blå färg på hover */
  text-decoration: none; /* Ta bort understrykning vid hover */
}
.info-div .views-field-link-flag {
  text-align: right; /* Högerjusterar flagglänken */
  margin-top: 10px; /* Skapar lite avstånd mellan meddelandet och länken */
}
.info-div .views-field-link-flag a {
  background-color: #f0f0f0; /* Ljusgrå bakgrund för flagglänken */
  color: #666; /* Neutral färg för länken */
  font-size: 0.9em; /* Gör länken lite mindre än huvudtexten */
  padding: 5px 10px;
  border-radius: 4px; /* Liten rundning för en knappkänsla */
  text-decoration: none; /* Ingen understrykning */
  transition: background-color 0.3s ease, color 0.3s ease; /* Smidig övergång vid hover */
}
.info-div .views-field-link-flag a:hover {
  background-color: #d9d9d9; /* Mörkare grå vid hover */
  color: #333; /* Mörkare textfärg vid hover */
}
/* Förklaring fält - wrapper */
.field--name-field-forklaring {
    background-color: #f9f9f9; /* Ljus bakgrund */
    border: 1px solid #e0e0e0; /* Tunn ram */
    border-radius: 5px; /* Mjuka hörn */
    padding: 10px 15px; /* Utrymme inuti */
    margin: 15px 0; /* Avstånd runt */
    font-size: 1rem;
    line-height: 1.5;
    color: #333333;
}
/* Förklaring - label */
.field--name-field-forklaring .field__label {
    font-weight: bold; /* Fetstil */
    font-size: 1.1rem; /* Lite större text */
    margin-bottom: 8px; /* Avstånd till innehåll */
    color: #444444; /* Mörkgrå färg för en neutral look */
    text-transform: uppercase; /* Gör texten versal för att framhäva den */
    letter-spacing: 0.5px; /* Lite mer mellanrum mellan bokstäver */
}
/* Förklaring - innehåll */
.field--name-field-forklaring .field__item {
    font-size: 1rem;
    color: #555555; /* Ljusare grå för innehållet */
}
.page-node-type-bild .field--name-field-bild {max-width: 400px;}
@media (max-width: 768px) {
  #main-container-inner {
    padding: 2px;
  }
}
@media (max-width: 1270px) {
  #primary-menu {
    display: none;
  }
}
/* För att få alla views-row på samma rad */
.path-view-symtom .solo-clear, .path-view-sjukdomar .solo-clear {
    display: inline-block; /* Gör att varje rad ligger bredvid varandra */
    margin-right: 10px; /* Utrymme mellan knappar */
    margin-bottom: 10px;
    vertical-align: top; /* Justerar höjden om de har olika innehåll */
}
/* Stil för själva länken som knapp */
.viktiga-symtom a {
    display: inline-block;
    padding: 10px 15px;
    background-color: #324888; /* Bakgrundsfärg */
    color: white !important; /* Textfärg */
    text-decoration: none; /* Ingen understrykning */
    border-radius: 5px; /* Rundade hörn */
    font-weight: bold; /* Gör texten fet */
    text-align: center;
    transition: background-color 0.3s ease, transform 0.2s ease;
}
/* Hover-effekter för knappen */
.viktiga-symtom a:hover {
    background-color: #0056b3; /* Mörkare blå vid hover */
    transform: scale(1.05); /* Gör knappen större vid hover */
}
/* Aktivt klick-effekt */
.viktiga-symtom a:active {
    background-color: #003f7f; /* Ännu mörkare vid klick */
    transform: scale(0.95); /* Tryck-effekt vid klick */
}
/* Ta bort sista marginalen (valfritt) */
.path-view-symtom .solo-clear:last-child, .path-view-sjukdomar .solo-clear:last-child {
    margin-right: 0;
}
.field--name-field-viktiga-symtom {
    background-color: #ffe9e9; /* Ljus röd bakgrund för att signalera varning */
    border: 2px solid #ff5c5c; /* Röd ram för att framhäva */
    border-radius: 8px; /* Rundade hörn för en modern look */
    padding: 16px; /* Utrymme runt texten för läsbarhet */
    margin: 16px auto; /* Centrerar elementet horisontellt */
    font-family: 'Arial', sans-serif; /* Läsbar och professionell font */
    color: #a00; /* Mörkröd text för kontrast */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Lätt skugga för en lyft effekt */
    max-width: 450px; /* Begränsar bredden till högst 450px */
    text-align: center; /* Centrerar texten inuti boxen */
}
.field--name-field-viktiga-symtom .field__label, .views-label-field-viktiga-symtom {
    font-size: 18px; /* Något större text för etiketten */
    font-weight: bold; /* Markerad text för tydlighet */
    margin-bottom: 8px; /* Avstånd mellan etikett och innehåll */
    display: block; /* Separat rad för etiketten */
}
.field--name-field-viktiga-symtom .field__item {
    font-size: 16px; /* Lättläst storlek på innehåll */
    line-height: 1.5; /* Bra radavstånd för läsbarhet */
}
#block-delegering2-popupdelgato {
  display: none;
}
/* Huvudpopup-styling */
#block-delegering2-popupdelgato {
    background: #ffffff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    overflow: hidden;
}
/* Modal klass */
.block-delegering2-popupdelgato-modal {
    font-family: Arial, sans-serif;
    color: #333333;
    text-align: center;
}
/* Rubrik */
.block-delegering2-popupdelgato-modal h2 {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: #007bff;
}
/* Stäng-knapp */
.block-delegering2-popupdelgato-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    background: transparent;
    border: none;
    font-size: 1.2rem;
    color: #999999;
    transition: color 0.3s;
}
.block-delegering2-popupdelgato-modal-close:hover {
    color: #ff0000;
}
/* Minimeringsknapp */
.block-delegering2-popupdelgato-modal-minimize {
    position: absolute;
    top: 10px;
    right: 40px;
    cursor: pointer;
    background: transparent;
    border: none;
    font-size: 1.2rem;
    color: #999999;
    transition: color 0.3s;
}

.block-delegering2-popupdelgato-modal-minimize:hover {
    color: #007bff;
}
/* Minimerat läge */
.block-delegering2-popupdelgato-modal-minimized {
    position: fixed;
    bottom: 10px;
    right: 10px;
    background: #007bff;
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 0.9rem;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.path-quiz .quiz-report-score-container {float: none !important;}
.view-forkortningar, .view-ordlista, .view-lagar, .view-lankar {
  max-width: 45rem;
  margin-inline: auto;
  margin-block: 0;
}
#punktlista {
    background-color: #f9f9f9; /* Ljus bakgrundsfärg */
    border: 1px solid #ddd; /* Tunn kant för avgränsning */
    border-radius: 5px; /* Rundade hörn */
    padding: 15px; /* Luft runt innehållet */
    margin: 20px auto; /* Centrerar blocket horisontellt */
    max-width: 600px; /* Begränsar bredden till 600px */
    font-size: 16px; /* Tydlig textstorlek */
    line-height: 1.6; /* Bättre avstånd mellan rader */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Lätt skugga för att ge djup */
}
#punktlista .field__label {
    font-weight: bold; /* Markerar rubriken */
    font-size: 18px; /* Förstorar rubriken */
    margin-bottom: 10px; /* Avstånd till innehållet nedanför */
    display: block;
    text-align: center; /* Centrerar rubriken */
}
#punktlista .field__item ul {
    margin: 0;
    padding-left: 20px; /* Indrag för huvudlistor */
}
#punktlista .field__item ul ul {
    margin-top: 5px; /* Mindre avstånd mellan undermenyer */
    padding-left: 15px; /* Extra indrag för tydlig hierarki */
}
#punktlista .field__item li {
    margin-bottom: 8px; /* Luft mellan listpunkter */
}
#punktlista .field__item li strong {
    color: #333; /* Viktig text är tydlig men inte skrikig */
    font-weight: bold; /* Markerar huvudpunkter */
}
#punktlista .field__item li ul li {
    font-style: italic; /* Kursiv stil för undermenyer */
    margin-bottom: 5px; /* Lite luft mellan undermenyer */
}
h1.page-title-text span {
  text-align: center;
  display: inline-grid !important;
}
/* Styla länken Företag */
.solo-menu .nav__menu-link[href="/foretag"] {
    font-weight: bold; /* Gör texten fet */
    color: #0073e6; /* Exempel på en annan färg */
    background-color: #f0f8ff; /* Exempel på en ljus bakgrundsfärg */
    padding: 5px 10px; /* Lägg till lite extra utrymme */
    border-radius: 5px; /* Rundade hörn */
}
/* Styla när Företag-länken är aktiv */
.solo-menu .nav__menu-link[href="/foretag"].is-active {
    color: #ffffff; /* Vit text */
    background-color: #005bb5; /* Mörkare blå bakgrundsfärg */
    border: 2px solid #003f7f; /* Lägg till en tydlig kant */
}
.views-field.views-field-label.mer-statistik .field-content a {
    display: inline-block; /* Gör länken till en blocknivå */
    padding: 10px 20px; /* Inre marginaler för att skapa en knappkänsla */
    font-size: 16px; /* Textstorlek */
    font-weight: bold; /* Fetstil */
    text-align: center; /* Centrerad text */
    text-decoration: none; /* Ta bort understrykning */
    color: #ffffff; /* Textfärg */
    background-color: #007BFF; /* Bakgrundsfärg */
    border: 2px solid #0056b3; /* Kantfärg */
    border-radius: 5px; /* Rundade hörn */
    transition: all 0.3s ease; /* Mjuk övergång för hover-effekt */
}
.views-field.views-field-label.mer-statistik .field-content a:hover {
    background-color: #0056b3; /* Mörkare bakgrund vid hover */
    border-color: #003f7f; /* Mörkare kant vid hover */
    color: #ffffff; /* Behåll vit text */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Lätt skugga vid hover */
}
.views-field.views-field-label.mer-statistik .field-content a:active {
    background-color: #003f7f; /* Ännu mörkare bakgrund vid klick */
    transform: scale(0.95); /* Liten intryckningseffekt vid klick */
}
/* Stil för 'Markera som klar' */
.flag-markera-som-klar.action-flag a {
  padding: 10px 20px;
  font-size: 16px;
  font-weight: bold;
  color: #fff !important;
  background-color: #28a745; /* Grön bakgrund för att indikera klart */
  border: 2px solid #218838;
  border-radius: 5px;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.flag-markera-som-klar.action-flag a:hover {
  background-color: #218838; /* Mörkare grön vid hovring */
  border-color: #1e7e34;
  font-weight: bold;
}
/* Stil för 'Markera som "Ej klar"' */
.flag-markera-som-klar.action-unflag a {
  padding: 10px 20px;
  font-size: 16px;
  font-weight: bold;
  color: #fff !important;
  background-color: #dc3545; /* Röd bakgrund för att indikera ej klart */
  border: 2px solid #c82333;
  border-radius: 5px;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.flag-markera-som-klar.action-unflag a:hover {
  background-color: #c82333; /* Mörkare röd vid hovring */
  border-color: #bd2130;
  font-weight: bold;
}
.media--type-video {text-align: center;}
/* Grundläggande styling för andelklart-blocket */
.andelklart {
    font-family: Arial, sans-serif;
    background-color: #f9f9f9;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    padding: 16px;
    max-width: 400px;
    margin: 20px auto;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
/* Styling för varje rad */
.andelklart .views-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #e0e0e0;
}
/* Ta bort sista radens underlinje */
.andelklart .views-row:last-child {
    border-bottom: none;
}
/* Titeltexten */
.andelklart .views-field-type .field-content {
    font-size: 14px;
    font-weight: bold;
    color: #333;
}
/* Framsteg (antal klara delmoment) */
.andelklart .views-field-flagged .field-content {
    font-size: 18px;
    font-weight: bold;
    color: #007bff;
    background-color: #e7f3ff;
    padding: 4px 8px;
    border-radius: 4px;
}
/* Gör blocket responsivt */
@media (max-width: 480px) {
    .andelklart {
        padding: 12px;
    }

    .andelklart .views-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .andelklart .views-field-flagged .field-content {
        font-size: 16px;
    }
}
/* Grundläggande layout */
.startboxen-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* Enskild box */
.startboxen {
  flex: 1 1 calc(33.333% - 40px);
  max-width: 360px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0;
}

/* Toppfärg för varje box */
.startboxen::before {
  content: "";
  display: block;
  height: 6px;
  width: 100%;
}

.startboxen.plugga::before {
  background-color: #0077cc;
}

.startboxen.undervisa::before {
  background-color: #28a745;
}

.startboxen.delegera::before {
  background-color: #ff8800;
}

/* Innehållet i boxarna */
.startboxen-content {
  display: flex;
  flex-direction: column;
  padding: 20px;
  height: 100%;
  justify-content: space-between;
}

.startboxen .text h2 {
  margin: 0;
  font-size: 1.5rem;
}

.startboxen .text p {
  margin: 10px 0 0;
  font-size: 1rem;
  line-height: 1.4;
}

/* Hovereffekt */
.startboxen:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

/* Knappar */
.btnny {
  display: inline-block;
  margin-top: 16px;
  padding: 10px 20px;
  font-size: 1rem;
  border-radius: 8px;
  text-decoration: none;
  color: #fff !important;
  transition: background-color 0.3s, transform 0.2s;
}

.btnny:hover {
  transform: translateY(-2px);
}

/* Färger på knappar */
.btnny-plugga {
  background-color: #0077cc;
}

.btnny-plugga:hover {
  background-color: #005fa3;
}

.btnny-undervisa {
  background-color: #28a745;
}

.btnny-undervisa:hover {
  background-color: #208b38;
}

.btnny-delegera {
  background-color: #ff8800;
}

.btnny-delegera:hover {
  background-color: #e27000;
}

/* Responsiv layout */
@media (max-width: 900px) {
  .startboxen {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

.kursbild {
  text-align: center;
}
.kursbild img {
  display: inline-block;
}
.field-content.kursbild {
  text-align: center;
}

.field-content.kursbild img {
  display: inline-block;
}
/* Stil för hela vyn checklistor*/
.path-view-checkilstor .view-content {
  padding: 2rem;
  background: #f9f9f9;
  border-radius: 12px;
}

/* Gridlayout */
.path-view-checkilstor .views-view-responsive-grid__item {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease;
}

.path-view-checkilstor .views-view-responsive-grid__item:hover {
  transform: scale(1.01);
}

/* Inre innehåll */
.path-view-checkilstor .views-view-responsive-grid__item-inner {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 0.5rem;
}

/* Titel (länk till checklista) */
.path-view-checkilstor .checklista-titel a {
  display: block;
  font-size: 1.2rem;
  font-weight: 600;
  color: #40687d;
  text-decoration: none;
  margin-bottom: 0.5rem;
}

.path-view-checkilstor .checklista-titel a:hover {
  text-decoration: underline;
}

/* Beskrivning */
.path-view-checkilstor .checklista-beskrivning {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #333;
  flex-grow: 1;
}

/* Justera grid för mobil */
@media (max-width: 600px) {
  .path-view-checkilstor .views-view-responsive-grid--horizontal {
    --views-responsive-grid--column-count: 1 !important;
  }

  .path-view-checkilstor .views-view-responsive-grid__item-inner {
    padding: 1rem;
  }
}
.checklista-lasmer {
  margin-top: 1rem;
}

.checklista-lasmer a {
  font-size: 0.95rem;
  color: #40687d;
  text-decoration: none;
  font-weight: 500;
  display: inline-block;
  padding: 0.3em 0.8em;
  border: 1px solid #40687d;
  border-radius: 6px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.checklista-lasmer a:hover {
  background-color: #40687d;
  color: #fff !important;
  text-decoration: none;
}
/* Gäller bara kontaktformuläret på sidan med id block-delegering2-fraga */
#block-delegering2-fraga {
  background: #fff;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.06);
  max-width: 750px;
  margin: 2rem auto;
  font-size: 1rem;
  line-height: 1.6;
}

/* Rubrik i huvudinnehållet */
#block-delegering2-page-title h1.page-title-text {
  text-align: center;
  margin-top: 1rem;
  font-size: 1.8rem;
  color: #333;
}

/* Själva formuläret */
#block-delegering2-content form.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Fält */
#block-delegering2-content input[type="text"],
#block-delegering2-content input[type="email"],
#block-delegering2-content textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-family: inherit;
  font-size: 1rem;
  background-color: #fdfdfd;
  transition: border-color 0.2s;
}

#block-delegering2-content textarea {
  resize: vertical;
  min-height: 160px;
}

#block-delegering2-content input:focus,
#block-delegering2-content textarea:focus {
  border-color: #c66300;
  outline: none;
}

/* Checkbox */
#block-delegering2-content .form-type-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
}

/* Knappar */
#block-delegering2-content .form-actions input[type="submit"] {
  background-color: #c66300;
  border: none;
  color: white;
  padding: 0.7rem 1.4rem;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s ease;
}

#block-delegering2-content .form-actions input[type="submit"]:hover {
  background-color: #a95200;
}
/* === Kontaktformulär allmänt === */
form.contact-form {
  max-width: 750px;
  margin: 2rem auto;
  padding: 2rem;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  font-family: inherit;
}

/* === Formulärfält === */
form.contact-form input[type="text"],
form.contact-form input[type="email"],
form.contact-form input[type="tel"],
form.contact-form textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
  font-family: inherit;
  background-color: #fefefe;
  transition: border-color 0.2s, box-shadow 0.2s;
}

form.contact-form textarea {
  resize: vertical;
  min-height: 150px;
}

form.contact-form input:focus,
form.contact-form textarea:focus {
  border-color: #c66300;
  box-shadow: 0 0 0 2px rgba(198, 99, 0, 0.2);
  outline: none;
}

/* === Etiketter === */
form.contact-form label {
  font-weight: 600;
  margin-bottom: 0.3rem;
  display: block;
  color: #333;
}

/* === Checkbox (skicka kopia) === */
form.contact-form .form-type-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
}

/* === Knappar === */
form.contact-form .form-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: flex-start;
}

form.contact-form input[type="submit"] {
  background-color: #c66300;
  color: white;
  border: none;
  padding: 0.7rem 1.5rem;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s ease;
}

form.contact-form input[type="submit"]:hover {
  background-color: #a95200;
}

form.contact-form input[type="submit"]:disabled {
  background-color: #ddd;
  cursor: not-allowed;
}
/* Gäller endast på tack-sidan med node-id 9079 */
.path-node-9079 .solo-clear.node__content > .field--name-body {
  background: #fefefe;
  border-radius: 12px;
  padding: 2rem 2.5rem;
  max-width: 750px;
  margin: 3rem auto;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
  font-size: 1.1rem;
  line-height: 1.7;
  color: #333;
}

/* Rubriken "Tack för din fråga" */
.path-node-9079 .solo-clear.node__content > .field--name-body h2 {
  font-size: 1.8rem;
  color: #2f5e2f;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Länkar i listan */
.path-node-9079 .solo-clear.node__content > .field--name-body a {
  color: #c66300;
  font-weight: 600;
  text-decoration: none;
}

.path-node-9079 .solo-clear.node__content > .field--name-body a:hover {
  text-decoration: underline;
}

/* Lista med tips */
.path-node-9079 .solo-clear.node__content > .field--name-body ul {
  list-style-type: "📌 ";
  padding-left: 1.5rem;
  margin-top: 1rem;
}

.path-node-9079 .solo-clear.node__content > .field--name-body li {
  margin-bottom: 0.6rem;
}
.path-node-9079 .page-title-text {display: none;}

/* Gäller endast på sidan /ovningar */
.path-ovningar {
  background: #f9f9f9;
  padding-bottom: 2rem;
}

/* Introduktionsruta */
.path-ovningar .scenario-intro, .path-view-kunskapstester .scenario-intro{
  background: #ffffff;
  border-left: 5px solid #c66300;
  padding: 1.5rem;
  margin-bottom: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.path-ovningar .scenario-intro h2, .path-view-kunskapstester .scenario-intro h2{
  font-size: 1.6rem;
  margin-bottom: 1rem;
  color: #333;
}

.path-ovningar .scenario-intro p,
.path-ovningar .scenario-intro ul, .path-view-kunskapstester .scenario-intro p,
.path-view-kunskapstester .scenario-intro ul{
  font-size: 1rem;
  color: #555;
  line-height: 1.5;
}

/* Grid-styling för varje övning */
.path-ovningar .views-view-responsive-grid__item-inner, .path-view-kunskapstester .views-view-responsive-grid__item-inner{
  background: #fff;
  padding: 1rem;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.path-ovningar .views-view-responsive-grid__item-inner:hover, .path-view-kunskapstester .views-view-responsive-grid__item-inner:hover{
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Titel på övningen */
.path-ovningar .scenario-titel a, .path-view-kunskapstester .scenario-titel a{
  font-size: 1.2rem;
  font-weight: 600;
  color: #c66300;
  text-decoration: none;
}

.path-ovningar .scenario-titel a:hover, .path-view-kunskapstester .scenario-titel a:hover{
  text-decoration: underline;
}

/* Beskrivning */
.path-ovningar .scenario-beskrivning, .path-view-kunskapstester .scenario-beskrivning{
  margin: 0.8rem 0;
  color: #444;
  font-size: 0.95rem;
}

/* Länk till övningen */
.path-ovningar .scenario-lank a, .path-view-kunskapstester .scenario-lank a{
  display: inline-block;
  margin-top: 0.5rem;
  font-weight: bold;
  color: #fff;
  background-color: #c66300;
  padding: 0.4rem 1rem;
  border-radius: 5px;
  text-decoration: none;
  font-size: 0.9rem;
}

.path-ovningar .scenario-lank a:hover, .path-view-kunskapstester .scenario-lank a:hover{
  background-color: #a45200;
  color: #ffffff !important;
}
/* Bildstil för scenariolistan */
.path-ovningar .scenario-bild img, .path-view-kunskapstester .scenario-bild img{
  display: block;
  width: 100%;
  max-width: 180px;
  height: auto;
  margin: 0 auto 1rem auto;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: transform 0.2s ease;
}

/* Hovereffekt (lite zoom) */
.path-ovningar .views-view-responsive-grid__item-inner:hover .scenario-bild img, .path-view-kunskapstester .views-view-responsive-grid__item-inner:hover .scenario-bild img{
  transform: scale(1.03);
}
/* Mobilanpassa grid-layouten */
@media (max-width: 700px) {
  .path-ovningar .views-view-responsive-grid--horizontal, .path-view-kunskapstester .views-view-responsive-grid--horizontal{
    --views-responsive-grid--column-count: 1 !important;
  }
}
.path-view-fragor-och-svar .faq-intro {
  background-color: #f9f9f9;
  border-left: 4px solid #c66300;
  padding: 1rem 1.5rem;
  margin-bottom: 2rem;
  font-size: 1.1rem;
  line-height: 1.6;
  border-radius: 4px;
}

.path-view-fragor-och-svar .faq-intro p {
  margin-bottom: 1rem;
}

.path-view-fragor-och-svar .fragorochsvar-fraga a {
  font-size: 1.1rem;
  font-weight: 600;
  color: #333;
}

.path-view-fragor-och-svar .fragorochsvar-svar {
  font-size: 1rem;
  line-height: 1.7;
  padding: 1rem 0;
  color: #222;
}

.path-view-fragor-och-svar .fragorochsvar-svar strong {
  color: #000;
}

.path-view-fragor-och-svar .fragorochsvar-svar p:last-child {
  margin-bottom: 0;
}

.path-view-fragor-och-svar .fragorochsvar-svar p:has(strong:contains("Källa")) {
  font-size: 0.95rem;
  color: #555;
  border-top: 1px dashed #ccc;
  padding-top: 0.5rem;
  margin-top: 1.2rem;
}
.path-view-fragor-och-svar .views-accordion-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #f8f8f8;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.path-view-fragor-och-svar .views-accordion-header:hover {
  background-color: #f0f0f0;
}

.path-view-fragor-och-svar .views-accordion-header.ui-state-active {
  background-color: #003366;
  color: #fff;
}

.path-view-fragor-och-svar .views-accordion-header.ui-state-active a {
  color: #fff;
}

.path-view-fragor-och-svar .views-accordion-header a {
  text-decoration: none;
  font-weight: bold;
  font-size: 1.05rem;
  color: #222;
}

.path-view-fragor-och-svar .views-accordion-header .ui-accordion-header-icon {
  order: -1; /* Flyttar ikonen till vänster om texten */
  margin-right: 0.5rem;
  flex-shrink: 0;
  transform: translateY(0); /* Hindrar ikonen från att "hoppa" uppåt */
}

.path-view-fragor-och-svar .ui-accordion-content {
  padding: 1rem 1.2rem;
  background-color: #fff;
  border: 1px solid #ddd;
  border-top: none;
  border-radius: 0 0 4px 4px;
}
#block-delegering2-googletranslator {
margin-top: 20px;
  text-align: center;
}
#block-delegering2-kortsagt {
  display: none;
}

@media (max-width: 767px) {
  #block-delegering2-kortsagt {
    display: block;
    background-color: #f9f9f9;
    border-left: 4px solid #007B7F;
    padding: 1rem;
    border-radius: 8px;
    font-family: system-ui, sans-serif;
  }

  #block-delegering2-kortsagt h2 {
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
    color: #007B7F;
  }

  #block-delegering2-kortsagt p {
    font-size: 1rem;
    line-height: 1.5;
    margin: 0.3rem 0;
    color: #333;
  }
}

.cc-banner.cc-top {
  top: 0 !important;
  background: "#fff8e1", text: "#000";
  position: fixed;
  z-index: 9999;
}

@media (max-width: 600px) {
  .cc-window {
    font-size: 0.85rem;
    padding: 1em;
  }
}
.cc-btn .cc-allow {background: "#f57c00", text: "#fff";}

  .cc-window {
    background-color: #fff8e1 !important;
    color: #000 !important;
    border-top: 3px solid #f57c00;
    font-size: 1rem;
    box-shadow: 0 -2px 5px rgba(0,0,0,0.2);
  }

  .cc-btn.cc-allow {
    background-color: #f57c00 !important;
    color: #fff !important;
    font-weight: bold;
    border: none;
    padding: 0.6em 1em;
  }

  .cc-btn.cc-deny {
    background-color: #ccc !important;
    color: #000 !important;
    border: none;
  }

  .cc-link {
    color: #0066cc !important;
    text-decoration: underline;
  }
/* Grundstil för hela sektionen */
#block-delegering2-content {
  padding: 2rem;
  background: linear-gradient(to right, #f9f9f9, #ffffff);
  border-radius: 1rem;
  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
  font-family: 'Segoe UI', sans-serif;
}

/* Header döljs om den är tom */
.node__header.header-is-empty {
  display: none;
}

/* Textinledning */
.field--name-body {
  font-size: 1.1rem;
  margin-bottom: 2rem;
  color: #444;
}

#block-delegering-views-block-prov-arbetsplats-block-1 {
    background: #f9f9f9; /* Ljus bakgrund */
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 16px;
    max-width: 500px; /* Begränsar bredden */
    margin: 20px auto;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
#block-delegering-views-block-prov-arbetsplats-block-1 .solo-block-title {
    font-size: 1.4rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 12px;
    color: #333;
}
#block-delegering-views-block-prov-arbetsplats-block-1 .solo-ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
#block-delegering-views-block-prov-arbetsplats-block-1 .solo-li-list {
    padding: 8px 12px;
    border-bottom: 1px solid #e0e0e0;
}
#block-delegering-views-block-prov-arbetsplats-block-1 .solo-li-list:last-child {
    border-bottom: none;
}
#block-delegering-views-block-prov-arbetsplats-block-1 .solo-li-list a {
    text-decoration: none;
    color: #007bff;
    font-weight: 500;
    transition: color 0.2s ease-in-out;
}
#block-delegering-views-block-prov-arbetsplats-block-1 .solo-li-list a:hover {
    color: #0056b3;
    text-decoration: underline;
}
@media (max-width: 600px) {
    #block-delegering-views-block-prov-arbetsplats-block-1 {
        max-width: 100%;
        padding: 12px;
    }
    #block-delegering-views-block-prov-arbetsplats-block-1 .solo-block-title {
        font-size: 1.2rem;
    }
    #block-delegering-views-block-prov-arbetsplats-block-1 .solo-li-list {
        padding: 6px 10px;
    }
}
.h5p-iframe #progressbar-part-2 .h5p-course-presentation .h5p-progressbar .h5p-progressbar-part-show {
  background-image: -webkit-linear-gradient(top,#0085FF,#1a73d9) !important;
  background-image: -moz-linear-gradient(top,#0085FF,#1a73d9 !important);
  background-image: linear-gradient(to bottom,#597EA2,#153559) !important;
}
/* Stil för hela datumblocket */
.field--type-datetime {
  background-color: #f5f9fc;
  border-left: 4px solid #0074d9;
  padding: 0.75rem 1rem;
  margin: 1rem 0;
  border-radius: 6px;
  font-family: 'Segoe UI', sans-serif;
}

/* Etiketten ("Gällande från" / "Uppdaterat datum") */
.field--type-datetime .field__label {
  font-weight: bold;
  display: block;
  color: #333;
  margin-bottom: 0.25rem;
  font-size: 0.95rem;
}

/* Datumet */
.field--type-datetime .field__item {
  font-size: 0.9rem;
  color: #555;
}

/* Extra justering för att jämna ut marginaler */
.field--type-datetime time {
  display: inline-block;
  padding-top: 2px;
}
/* Wrapper-stil för hela blocket */
#block-delegering2-views-block-sakerhetscenter-block-1 {
  background: #f8fbfd;
  border: 1px solid #d1e3f0;
  border-radius: 8px;
  padding: 1.5rem;
  margin-top: 2rem;
  box-shadow: 0 2px 6px rgba(0, 60, 90, 0.05);
}

/* Rubriken "Innehåll" */
#block-delegering2-views-block-sakerhetscenter-block-1 h2.solo-block-title {
  font-size: 1.4rem;
  margin-bottom: 1rem;
  color: #004080;
  font-weight: 600;
  border-bottom: 2px solid #0074d9;
  display: inline-block;
  padding-bottom: 4px;
}

/* Rader med länkar */
#block-delegering2-views-block-sakerhetscenter-block-1 .views-row {
  padding: 0.5rem 0;
  border-bottom: 1px solid #e4edf4;
  transition: background-color 0.2s ease;
}

#block-delegering2-views-block-sakerhetscenter-block-1 .views-row:last-child {
  border-bottom: none;
}

/* Länkstil */
#block-delegering2-views-block-sakerhetscenter-block-1 a {
  color: #005fa3;
  text-decoration: none;
  font-size: 1rem;
}

#block-delegering2-views-block-sakerhetscenter-block-1 a:hover {
  text-decoration: underline;
  color: #003f6b;
}

/* Responsivt stöd (valfritt) */
@media (max-width: 600px) {
  #block-delegering2-views-block-sakerhetscenter-block-1 {
    padding: 1rem;
  }

  #block-delegering2-views-block-sakerhetscenter-block-1 h2.solo-block-title {
    font-size: 1.2rem;
  }

  #block-delegering2-views-block-sakerhetscenter-block-1 a {
    font-size: 0.95rem;
  }
}
.nyatesterna a {
  display: inline-block;
  padding: 10px 20px;
  background-color: #4caf50;
  color: #fff !important;
  font-weight: bold;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease, transform 0.2s ease;
}
.path-view-kunskapstester .views-field-nothing {text-align: center;}
.responsive-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.responsive-table-wrapper table {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px;
}

.responsive-table-wrapper th,
.responsive-table-wrapper td {
  padding: 0.5rem;
  text-align: left;
  white-space: nowrap;
}
.field--name-field-checklista li {display: inherit;}

.block-field-blocknodehuvudsidafield-block-1, .block-field-blocknodehuvudsidafield-block-2, .block-field-blocknodehuvudsidafield-block-3, .block-field-blocknodehuvudsidafield-botten, .block-field-blocknodehuvudsidafield-resurser {
padding: 5px;
  border-radius: 10px;
  border: solid #73a3ce;
  margin-bottom: 10px;
}
@media screen and (min-width: 1280px) {
  #welcome-text {
    width: 1280px;
    margin-left: auto;
    margin-right: auto;
  }
}
.tb_under {background-color: #eaeaea;}
@media (min-width: 768px) {
  .visayoutube .media-oembed-content {
    width: 600px;
    height: 400px;
  }
}
@media (max-width: 767px) {
  .visayoutube .media-oembed-content {
    width: 100%;
    height: auto;
  }
}
.gggr {
  background-color: #2A9D8F !important;
  padding-left: 5px !important;
  margin-bottom: 5px;
  color: white !important;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.gggt {
  padding-left: 5px !important;
}
.gggd {
  background-color: #E9C46A !important;
  padding-left: 5px !important;
  margin-bottom: 5px;
  color: white !important;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.gggo {
  background-color: #E76F51 !important;
  padding-left: 5px !important;
  margin-bottom: 5px;
  color: white !important;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.gggs {
  background-color: #264653 !important;
  padding-left: 5px !important;
  margin-bottom: 5px;
  color: white !important;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.ggg {
  background-color: #E2D7F2 !important;
  border-radius: 8px;
  padding-left: 5px !important;
  margin-bottom: 5px;
  color: white !important;
  text-align: center !important;
}
/* På skärmar mindre än 768px (mobil) */
@media (max-width: 767px) {
  .gggr, .gggd, .gggo, .gggs {
    padding-left: 0px !important;
  }
}