/*
=========================================================
SKR
=========================================================
 * Innehåller styling för underwebben SKR
 * 
 * Copyright (C) Limepark AB.
 * https://limepark.se/licensvillkor
=========================================================*/

/*
---------------------------------------------------------
GENERELLT
--------------------------------------------------------- */

/* Dölj sekundär logotypyta  */

.lp-header__top-bar .lp-secondary-logo-column {
  display: none;
}

/* Dölj toggling för nivå 2 i desktop/tablet  */

div:not(.lp-overlay__content) > .sv-custom-module .lp-app-submenu__menu-item--level-1.lp-app-submenu__menu-item--is-active:not(.lp-app-submenu__menu-item--is-current) .lp-app-submenu__menu-item--level-2.lp-app-submenu__menu-item--is-active .lp-app-submenu__menu-item__toggler--level-2 {
  display: none;
}


/*
---------------------------------------------------------
SKR:S STARTSIDA - Etiketter
--------------------------------------------------------- */

.lp-startpage .lp-puff-headline {
  margin-bottom: 4rem;
}

/*
---------------------------------------------------------
SKR:S STARTSIDA - I fokus
--------------------------------------------------------- */

.lp-startpage *[class*='lp-app-blurbs-list__item--bildpuff'] {
  width: 25%;
}


/*
---------------------------------------------------------
SKR:S STARTSIDA - Nyheter & debatt
--------------------------------------------------------- */

/* Lika höga kolumner */
.lp-startpage .lp-start-news-debate-wrapper {
  display: flex;
  margin-bottom: 6rem;
}

.lp-startpage .lp-start-news-debate-wrapper > .sv-column-6 > .lp-news-list {
  display: flex;
  flex-direction: column;
  height: calc(100% - 122px);
}


/* Se fler-länk */
.lp-startpage .lp-start-news-debate-wrapper > .sv-column-6 > .lp-news-list > .sv-layout > .sv-text-portlet a:before {
  background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D\'0%200%2032%2032\'%20xmlns%3D\'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg\'%20fill%3D\'%23222\'%3E%3Cpath%20%20d%3D%22M16%203C8.832%203%203%208.832%203%2016s5.832%2013%2013%2013%2013-5.832%2013-13S23.168%203%2016%203zm0%202c6.086%200%2011%204.914%2011%2011s-4.914%2011-11%2011S5%2022.086%205%2016%209.914%205%2016%205zm-1.781%204.281L12.78%2010.72%2018.062%2016l-5.28%205.281%201.437%201.438%206-6%20.687-.719-.687-.719z%22%2F%3E%3C%2Fsvg%3E');
  height: 24px;
  margin-top: 0;
  width: 24px;
}


/* Toppnyheter / Toppdebatter */
.lp-startpage .lp-start-news-debate-wrapper > .sv-column-6 > .lp-news-list > .sv-archive-portlet li {
  border: none;
}

.lp-startpage .lp-start-news-debate-wrapper > .sv-column-6 > .lp-news-list > .sv-archive-portlet img {
  margin-right: 2.5rem;
  max-width: 22rem !important;
}

.lp-startpage .lp-start-news-debate-wrapper > .sv-column-6 > .lp-news-list > .sv-archive-portlet .heading3 {
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 2.2rem;
  font-weight: normal;
}

.lp-startpage .lp-start-news-debate-wrapper > .sv-column-6 > .lp-news-list > .sv-archive-portlet .normal {
  margin-bottom: 0.5rem;
}

/* Nyheter */
.lp-startpage .lp-start-news-debate-wrapper > .sv-column-6:nth-child(1) > .lp-news-list {
  justify-content: space-between;
}

.lp-startpage .lp-start-news-debate-wrapper > .sv-column-6:nth-child(1) > .lp-news-list > .sv-archive-portlet {
  border: none;
  margin: 0 -1rem 2rem;
  padding: 0;
}

/* Debatt */
.lp-startpage .lp-start-news-debate-wrapper > .sv-column-6:nth-child(2) > .lp-news-list {
  background-color: #f5f4f1;
  border-radius: 6px;
  margin-top: 3rem;
  padding: 1rem 1rem 0;
}

.lp-startpage .lp-start-news-debate-wrapper > .sv-column-6:nth-child(2) > .lp-news-list > .sv-layout {
  display: flex;
  flex-direction: column;
  height: 100%;

  justify-content: space-between;
}

.sv-edit-mode .lp-startpage .lp-start-news-debate-wrapper > .sv-column-6:nth-child(2) > .lp-news-list > .sv-layout {
  height: initial; /* Fix i redigeringsläge */
}

.lp-startpage .lp-start-news-debate-wrapper > .sv-column-6:nth-child(2) > .lp-news-list .sv-archive-portlet,
.lp-startpage .lp-start-news-debate-wrapper > .sv-column-6:nth-child(2) > .lp-news-list .sv-text-portlet a {
  border: none;
}

.lp-startpage .lp-start-news-debate-wrapper > .sv-column-6:nth-child(2) > .lp-news-list > .sv-archive-portlet li:last-child::after {
  display: block;
}


/* Se fler debattinlägg */
.lp-startpage .lp-start-news-debate-wrapper > .sv-column-6:nth-child(2) > .lp-news-list .sv-text-portlet a {
  border-top: 1px solid #d7d6d2;
  margin-left: -1rem;
  margin-right: -1rem;
  padding-left: 2rem;
  padding-right: 2rem;
}


/* Mobilanpassning */
@media only screen and (min-width: 801px) and (max-width: 1280px) {
  .lp-startpage .lp-start-news-debate-wrapper > .sv-column-6 > .lp-news-list > .sv-archive-portlet img {
    width: 30% !important;

    align-self: flex-start;
  }
}

@media only screen and (max-width: 800px) {
  .lp-startpage .lp-start-news-debate-wrapper {
    display: block;
    margin-bottom: 0;
  }

  .lp-startpage .lp-start-news-debate-wrapper > .sv-column-6 > .lp-news-list > .sv-archive-portlet img {
    display: none;
  }
}


/*
---------------------------------------------------------
NYHET/PRESS, DEBATT & PRESSINBJUDNING
--------------------------------------------------------- */

.lp-content-type {
  display: block;
  font-size: 1.1rem;
  margin: 0 0 1rem;
  text-transform: uppercase;
}

.lp-pressjour {
  margin-bottom: 2.5rem;
}

.lp-pressjour a {
  display: flex;
  margin-bottom: 0.5rem;
}

.lp-pressjour a:hover {
  text-decoration: none;
}

.lp-pressjour a:before {
  background-repeat: no-repeat;
  content: '';
  display: inline-block;
  height: 20px;
  margin-right: 10px;
  margin-top: 3px;
  width: 20px;

  flex: 0 0 auto;
}

.lp-pressjour a[href^='tel']:before {
  background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D\'0%200%2032%2032\'%20xmlns%3D\'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg\'%20fill%3D\'%23000\'%3E%3Cpath%20%20d%3D%22M8.656%203c-.523%200-1.039.188-1.469.531l-.062.031-.031.032-3.125%203.219.031.03a3.134%203.134%200%200%200-.844%203.376c.004.008-.004.023%200%20.031.848%202.426%203.016%207.11%207.25%2011.344%204.25%204.25%208.996%206.332%2011.344%207.25h.031a3.59%203.59%200%200%200%203.469-.688L28.406%2025c.828-.828.828-2.266%200-3.094l-4.062-4.062-.032-.063c-.828-.828-2.296-.828-3.125%200l-2%202a16.176%2016.176%200%200%201-4.093-2.812c-1.637-1.563-2.473-3.36-2.781-4.063l2-2c.84-.84.855-2.238-.032-3.062l.031-.032-.093-.093-4-4.125-.031-.031-.063-.032A2.356%202.356%200%200%200%208.656%203zm0%202a.35.35%200%200%201%20.219.094l4%204.093.094.094c-.008-.008.058.098-.063.219l-2.5%202.5-.469.438.22.624s1.148%203.075%203.562%205.376l.219.187C16.261%2020.746%2019%2021.906%2019%2021.906l.625.282%202.969-2.97c.172-.171.14-.171.312%200L27%2023.314c.172.171.172.109%200%20.28l-3.063%203.063c-.46.395-.949.477-1.53.282-2.266-.891-6.669-2.825-10.595-6.75-3.957-3.958-6.023-8.446-6.78-10.625-.153-.407-.044-1.008.312-1.313l.062-.063%203.032-3.093A.35.35%200%200%201%208.655%205z%22%2F%3E%3C%2Fsvg%3E');
}

.lp-pressjour a[href^='mailto']:before {
  background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D\'0%200%2032%2032\'%20xmlns%3D\'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg\'%20fill%3D\'%23000\'%3E%3Cpath%20%20d%3D%22M3%207v18h26V7zm4.313%202h17.375L16%2014.781zM5%209.875l6.75%204.5L5%2019.094zm22%200v9.219l-6.75-4.719zm-13.5%205.688l1.938%201.28.562.345.563-.344%201.937-1.282L27%2021.5V23H5v-1.5z%22%2F%3E%3C%2Fsvg%3E');
}

/*
---------------------------------------------------------
APP: STEGNAVIGATION
--------------------------------------------------------- */

body {
  /* Pilnavigation - Knappnavigation för Start, Föregående och Nästa  */
  --lp-app-stepper-navigation__direction-button-background-color: #fdc800;
  --lp-app-stepper-navigation__direction-button-hover-background-color: #ffeeb2;
  --lp-app-stepper-navigation__direction-button-hover-text-color: #222;
  --lp-app-stepper-navigation__direction-button-text-color: #222;
  /* Grafik - Cirkelillustration som indikerar hur långt man har kommit. */
  --lp-app-stepper-navigation__graphic-hole-color: transparent;
  --lp-app-stepper-navigation__graphic-ring-color: #222;
  --lp-app-stepper-navigation__graphic-segment-color: #fdc800;
  /* Guider - Tabbnavigation med guider som innehåller stegnavigationer. */
  --lp-app-stepper-navigation__guides-background-color: #fdc800;
  --lp-app-stepper-navigation__guides-current-background-color: #f2f0eb;
  --lp-app-stepper-navigation__guides-current-text-color: #222;
  --lp-app-stepper-navigation__guides-hover-background-color: rgba(0, 0, 0, 0.15);
  --lp-app-stepper-navigation__guides-hover-text-color: var(--lp-app-stepper-navigation__guides-text-color);
  --lp-app-stepper-navigation__guides-text-color: #222;
  --lp-app-stepper-navigation__steps-dots-color: var(--lp-app-stepper-navigation__steps-index-background-color);
  --lp-app-stepper-navigation__steps-index-background-color: #fdc800;
  --lp-app-stepper-navigation__steps-index-current-background-color: #ffeeb2;
  --lp-app-stepper-navigation__steps-index-current-text-color: #222;
  --lp-app-stepper-navigation__steps-index-text-color: #222;
  /* Steg - Stegnavigation med prickade linjer mellan varje steg. */
  --lp-app-stepper-navigation__steps-name-text-color: inherit;
}


/*
=========================================================
DIAGRAM THEME CSS
=========================================================
 * Innehåller temasättning av diagram
 *
 * Copyright (C) Limepark AB.
 * https://limepark.se/licensvillkor
=========================================================*/

/*
---------------------------------------------------------
FÄRG 0
--------------------------------------------------------- */

body .sv-limepark-webapp-diagram .highcharts-color-0 {
  fill: #005a69;
  stroke: #005a69;
}

body .sv-limepark-webapp-diagram .highcharts-color-0 .highcharts-data-label-color-0 text {
  fill: #222;
}

/* Tar bort mönster (Krävs för att ändra färg) */
body .sv-limepark-webapp-diagram .highcharts-bar-series .highcharts-color-0,
body .sv-limepark-webapp-diagram .highcharts-column-series .highcharts-color-0,
body .sv-limepark-webapp-diagram .lp-webapp-diagrams--chart-bar .highcharts-legend-item.highcharts-color-0 {
  fill: inherit;
}

/*
---------------------------------------------------------
FÄRG 1
--------------------------------------------------------- */

/* Bakgrundsfärg */
body .sv-limepark-webapp-diagram .highcharts-color-1 {
  fill: #e06c00;
  stroke: #e06c00;
}

/* Texfärg */
body .sv-limepark-webapp-diagram .highcharts-color-1 .highcharts-data-label-color-1 text {
  fill: #222;
}

/* Tar bort mönster (Krävs för att ändra färg) */
body .sv-limepark-webapp-diagram .highcharts-bar-series .highcharts-color-1,
body .sv-limepark-webapp-diagram .highcharts-column-series .highcharts-color-1,
body .sv-limepark-webapp-diagram .lp-webapp-diagrams--chart-bar .highcharts-legend-item.highcharts-color-1 {
  fill: inherit;
}

/*
---------------------------------------------------------
FÄRG 2
--------------------------------------------------------- */

/* Bakgrundsfärg */
body .sv-limepark-webapp-diagram .highcharts-color-2 {
  fill: #3a6e31;
  stroke: #3a6e31;
}

/* Texfärg */
body .sv-limepark-webapp-diagram .highcharts-color-2 .highcharts-data-label-color-2 text {
  fill: #222;
}

/* Tar bort mönster (Krävs för att ändra färg) */
body .sv-limepark-webapp-diagram .highcharts-bar-series .highcharts-color-2,
body .sv-limepark-webapp-diagram .highcharts-column-series .highcharts-color-2,
body .sv-limepark-webapp-diagram .lp-webapp-diagrams--chart-bar .highcharts-legend-item.highcharts-color-2 {
  fill: inherit;
}

/*
---------------------------------------------------------
FÄRG 3
--------------------------------------------------------- */

/* Bakgrundsfärg */
body .sv-limepark-webapp-diagram .highcharts-color-3 {
  fill: #0071a1;
  stroke: #0071a1;
}

/* Texfärg */
body .sv-limepark-webapp-diagram .highcharts-color-3 .highcharts-data-label-color-3 text {
  fill: #222;
}

/* Tar bort mönster (Krävs för att ändra färg) */
body .sv-limepark-webapp-diagram .highcharts-bar-series .highcharts-color-3,
body .sv-limepark-webapp-diagram .highcharts-column-series .highcharts-color-3,
body .sv-limepark-webapp-diagram .lp-webapp-diagrams--chart-bar .highcharts-legend-item.highcharts-color-3 {
  fill: inherit;
}

/*
---------------------------------------------------------
FÄRG 4
--------------------------------------------------------- */

/* Bakgrundsfärg */
body .sv-limepark-webapp-diagram .highcharts-color-4 {
  fill: #7d5740;
  stroke: #7d5740;
}

/* Texfärg */
body .sv-limepark-webapp-diagram .highcharts-color-4 .highcharts-data-label-color-4 text {
  fill: #222;
}

/* Tar bort mönster (Krävs för att ändra färg) */
body .sv-limepark-webapp-diagram .highcharts-bar-series .highcharts-color-4,
body .sv-limepark-webapp-diagram .highcharts-column-series .highcharts-color-4,
body .sv-limepark-webapp-diagram .lp-webapp-diagrams--chart-bar .highcharts-legend-item.highcharts-color-4 {
  fill: inherit;
}

/*
---------------------------------------------------------
FÄRG 5
--------------------------------------------------------- */

/* Bakgrundsfärg */
body .sv-limepark-webapp-diagram .highcharts-color-5 {
  fill: #7a5589;
  stroke: #7a5589;
}

/* Texfärg */
body .sv-limepark-webapp-diagram .highcharts-color-5 .highcharts-data-label-color-5 text {
  fill: #222;
}

/* Tar bort mönster (Krävs för att ändra färg) */
body .sv-limepark-webapp-diagram .highcharts-bar-series .highcharts-color-5,
body .sv-limepark-webapp-diagram .highcharts-column-series .highcharts-color-5,
body .sv-limepark-webapp-diagram .lp-webapp-diagrams--chart-bar .highcharts-legend-item.highcharts-color-5 {
  fill: inherit;
}

/*
---------------------------------------------------------
FÄRG 6
--------------------------------------------------------- */

/* Bakgrundsfärg */
body .sv-limepark-webapp-diagram .highcharts-color-6 {
  fill: #7d2b40;
  stroke: #7d2b40;
}

/* Texfärg */
body .sv-limepark-webapp-diagram .highcharts-color-6 .highcharts-data-label-color-6 text {
  fill: #222;
}

/* Tar bort mönster (Krävs för att ändra färg) */
body .sv-limepark-webapp-diagram .highcharts-bar-series .highcharts-color-6,
body .sv-limepark-webapp-diagram .highcharts-column-series .highcharts-color-6,
body .sv-limepark-webapp-diagram .lp-webapp-diagrams--chart-bar .highcharts-legend-item.highcharts-color-6 {
  fill: inherit;
}

/*
---------------------------------------------------------
FÄRG 7
--------------------------------------------------------- */

/* Bakgrundsfärg */
body .sv-limepark-webapp-diagram .highcharts-color-7 {
  fill: #4f5859;
  stroke: #4f5859;
}

/* Texfärg */
body .sv-limepark-webapp-diagram .highcharts-color-7 .highcharts-data-label-color-7 text {
  fill: #222;
}

/* Tar bort mönster (Krävs för att ändra färg) */
body .sv-limepark-webapp-diagram .highcharts-bar-series .highcharts-color-7,
body .sv-limepark-webapp-diagram .highcharts-column-series .highcharts-color-7,
body .sv-limepark-webapp-diagram .lp-webapp-diagrams--chart-bar .highcharts-legend-item.highcharts-color-7 {
  fill: inherit;
}

/*
---------------------------------------------------------
FÄRG 8
--------------------------------------------------------- */

/* Bakgrundsfärg */
body .sv-limepark-webapp-diagram .highcharts-color-8 {
  fill: #204e4a;
  stroke: #204e4a;
}

/* Texfärg */
body .sv-limepark-webapp-diagram .highcharts-color-8 .highcharts-data-label-color-8 text {
  fill: #222;
}

/* Tar bort mönster (Krävs för att ändra färg) */
body .sv-limepark-webapp-diagram .highcharts-bar-series .highcharts-color-8,
body .sv-limepark-webapp-diagram .highcharts-column-series .highcharts-color-8,
body .sv-limepark-webapp-diagram .lp-webapp-diagrams--chart-bar .highcharts-legend-item.highcharts-color-8 {
  fill: inherit;
}

/*
---------------------------------------------------------
FÄRG 9
--------------------------------------------------------- */

/* Bakgrundsfärg */
body .sv-limepark-webapp-diagram .highcharts-color-9 {
  fill: #9db4ab;
  stroke: #9db4ab;
}

/* Texfärg */
body .sv-limepark-webapp-diagram .highcharts-color-9 .highcharts-data-label-color-9 text {
  fill: #222;
}

/* Tar bort mönster (Krävs för att ändra färg) */
body .sv-limepark-webapp-diagram .highcharts-bar-series .highcharts-color-9,
body .sv-limepark-webapp-diagram .highcharts-column-series .highcharts-color-9,
body .sv-limepark-webapp-diagram .lp-webapp-diagrams--chart-bar .highcharts-legend-item.highcharts-color-9 {
  fill: inherit;
}


/*
---------------------------------------------------------
QUIZ
--------------------------------------------------------- */

/*
Som standard hämtar modulen färger ifrån webbplatsens tema, dessa värden att byta
ut mot HEX-färger eller andra variabler med koppling mot temat. */

.sv-limepark-quiz .limepark-quiz__app {
  /* Fråga & beskrivning */
  --lp-quiz-block-background-color: var(--lp-background-color-section); /* Bakgrundsfärg */
  --lp-quiz-block-font-color: var(--lp-font-color); /* Textfärg */
  /* Svar/Knapp */
  --lp-quiz-element-background-color: #f8f8f7; /* Bakgrundsfärg */
  --lp-quiz-element-border-color: #222; /* Kantlinje */
  /* Fel svar */
  --lp-quiz-element-danger-background-color: #f8f8f7;
  --lp-quiz-element-danger-border-color: #ff7d5c;
  --lp-quiz-element-danger-font-color: #222;
  /* Svar - hover/fokus */
  --lp-quiz-element-hover-background-color: #ffeeb2; /* Bakgrundsfärg */
  --lp-quiz-element-hover-border-color: #222; /* Kantlinje */
  --lp-quiz-element-hover-text-color: #222; /* Textfärg */
  /* Rätt svar */
  --lp-quiz-element-success-background-color: #f8f8f7;
  --lp-quiz-element-success-border-color: #fdc800;
  --lp-quiz-element-success-font-color: #222;
  --lp-quiz-element-text-color: #222;
}