/*
=========================================================
LAYOUT CSS
=========================================================
 * Innehåller styling för webbplatsens layout
 * 
 * Copyright (C) Limepark AB.
 * https://limepark.se/licensvillkor
=========================================================*/

/*
---------------------------------------------------------
FIX FÖR RADBRYTNING
--------------------------------------------------------- 

body * {
  hyphens: auto;
  word-wrap: break-word;

  overflow-wrap: break-word;
}

/*
---------------------------------------------------------
LÄNKAR VID HOVER
--------------------------------------------------------- */

.pagecontent .sv-text-portlet .normal a,
.pagecontent .sv-text-portlet a.normal,
.pagecontent .sv-text-portlet li a {
  transition: var(--lp-transition-default);
}

.pagecontent .sv-text-portlet .normal a:hover,
.pagecontent .sv-text-portlet a.normal:hover,
.pagecontent .sv-text-portlet li a:hover {
  background: rgba(0,0,0,0.1);
}

/*
---------------------------------------------------------
HOPPA TILL INNEHÅLL OCH MENY - Visas vid tabbning
--------------------------------------------------------- */

.lp-skip-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lp-skip-links a {
  background-color: var(--env-element-primary-background-color);
  border-radius: var(--env-button-border-radius);
  color: var(--env-element-primary-font-color);
  display: block;
  font-size: 1.6rem;
  height: 0;
  overflow: hidden;
  position: absolute;
  transform: translateY(-100%);
  transition: transform 0.5s ease, box-shadow 0.3s ease;
  width: calc(100% - 3rem);
}

.lp-skip-links a:focus {
  -webkit-box-shadow: 0 0 100px 100px rgba(0,0,0,0.4);
  box-shadow: 0 0 100px 100px rgba(0,0,0,0.4);
  height: auto;
  margin: 1.5rem;
  overflow: visible;
  padding: 1rem 0;
  text-align: center;
  transform: translateY(0);
  width: calc(100% - 3rem);
  z-index: 30000;
}

.lp-skip-links a.lp-skip-to-menu-smartphone {
  display: none;
}


/*
---------------------------------------------------------
GRUNDLAYOUT
--------------------------------------------------------- */

body {
  background-color: #fff;
}

.lp-content,
.lp-secondary-content,
.lp-submenu {
  margin: 2rem 0 0;
}

main {
  overflow-x: hidden;
}

/*
---------------------------------------------------------
FIX AV TYPOGRAFI
--------------------------------------------------------- */

.sv-text-portlet-content .subheading + .heading3 {
  margin-top: 0.8em;
}

.sv-text-portlet-content .heading3 + ul,
.sv-text-portlet-content .heading3 + ol {
  margin-top: 2rem;
}

.sv-text-portlet-content .normal + ul,
.sv-text-portlet-content .normal + ol {
  margin-top: -1.5rem;
}

/*
---------------------------------------------------------
MARKERING AV AKTIVT ANKARE
--------------------------------------------------------- */

.lp-content h2.subheading:target,
.lp-content h3.heading3:target,
.lp-related:target {
  position: relative;
}

.lp-content h2.subheading:target:after,
.lp-content h3.heading3:target:after {
  -webkit-animation: bounce-in-top 1.1s both;
  animation: bounce-in-top 1.1s both;
  border-color: transparent transparent transparent #006161;
  border-style: solid;
  border-width: 6px 0 6px 8px;
  content: '';
  display: block;
  height: 0;
  left: -15px;
  position: absolute;
  top: 12.5rem;
  transform: translateY(-50%);
  width: 0;
}

.lp-content h3.heading3:target:after,
.lp-content .lp-boxes h2.subheading:target:after {
  top: 12rem;
}

.lp-content *:target:before {
  content: '';
  display: block;
  height: 10rem;
  margin-top: -10rem;
  position: relative;
  width: 0;
  z-index: -10;
}

#page-top {
  margin-top: -10rem;
  padding-bottom: 10rem;
}

@-webkit-keyframes bounce-in-top {
  0% {
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
    transform: translateY(-500px);
  }

  38% {
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    opacity: 1;
    transform: translateY(0);
  }

  55% {
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    transform: translateY(-65px);
  }

  72% {
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    transform: translateY(0);
  }

  81% {
    -webkit-animation-timing-function: ease-in;
    transform: translateY(-28px);
  }

  90% {
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    transform: translateY(-50%);
  }

  95% {
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    transform: translateY(-8px);
  }

  100% {
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    transform: translateY(-50%);
  }
}

@keyframes bounce-in-top {
  0% {
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
    transform: translateY(-500px);
  }

  38% {
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    opacity: 1;
    transform: translateY(0);
  }

  55% {
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    transform: translateY(-65px);
  }

  72% {
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    transform: translateY(0);
  }

  81% {
    -webkit-animation-timing-function: ease-in;
    transform: translateY(-28px);
  }

  90% {
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    transform: translateY(-50%);
  }

  95% {
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    transform: translateY(-8px);
  }

  100% {
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    transform: translateY(-50%);
  }
}

/*
---------------------------------------------------------
INLOGGNING / 404
--------------------------------------------------------- */

.lp-login-404 {
  border: 1px solid #eee;
  box-shadow: 0 0 20px 0 #eee;
  margin: 10rem auto 0;
  max-width: 640px;
  padding: 3rem;
}

/*
---------------------------------------------------------
LÄNK-IKONER
--------------------------------------------------------- */

/* Ikon */
.pagecontent a[href^='http']:after,
.lp-search .sv-search-result a[href*='.pdf']:after,
.lp-search .sv-search-result a[href*='.jpg']:after,
.lp-search .sv-search-result a[href*='.jpeg']:after,
.lp-search .sv-search-result a[href*='.png']:after,
.lp-search .sv-search-result a[href*='.txt']:after,
.lp-search .sv-search-result a[href*='.doc']:after,
.lp-search .sv-search-result a[href*='.docx']:after,
.lp-search .sv-search-result a[href*='.xls']:after,
.lp-search .sv-search-result a[href*='.xlsx']:after,
.lp-search .sv-search-result a[href*='.ppt']:after,
.lp-search .sv-search-result a[href*='.pptx']:after,
.lp-search .sv-search-result a[href*='.css']:after,
.lp-search .sv-search-result a[href*='.js']:after,
.lp-search .sv-search-result a[href*='.vm']:after,
.lp-search .sv-search-result a[href^='/edit-fileresource/']:after,
.lp-related--links a:after,
.lp-related--links a[href^='http']:after,
.lp-related--links a[href*='.pdf']:after,
.lp-related--links a[href*='.jpg']:after,
.lp-related--links a[href*='.jpeg']:after,
.lp-related--links a[href*='.png']:after,
.lp-related--links a[href*='.txt']:after,
.lp-related--links a[href*='.doc']:after,
.lp-related--links a[href*='.docx']:after,
.lp-related--links a[href*='.xls']:after,
.lp-related--links a[href*='.xlsx']:after,
.lp-related--links a[href*='.ppt']:after,
.lp-related--links a[href*='.pptx']:after,
.lp-related--links a[href*='.css']:after,
.lp-related--links a[href*='.js']:after,
.lp-related--links a[href*='.vm']:after,
.lp-related--links a[href^='/edit-fileresource/']:after {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: '';
  display: inline-block;
  height: 0.8em;
  margin-bottom: -1px;
  margin-left: 0.2em;
  width: 0.8em;

  flex-shrink: 0;
}

/* Vanliga länkar i relaterade länkar */
.lp-related--links a:after {
  background-image: var(--lp-arrow-right-1);
}

/* PDF */
.lp-search .sv-search-result a[href*='.pdf']:after,
.lp-related--links a[href*='.pdf']:after {
  background-image: var(--lp-icon-pdf-dark);
}

/* Externa länkar */


.pagecontent a[href^='http']:after,
.lp-related--links a[href^='http']:after,
body a[href^='http'].env-button--secondary:after {
  background-image: var(--lp-icon-externallink-dark);
}

a[href^='http'].env-button:not(.env-button--link):after {
  background-image: var(--lp-icon-externallink-dark);
}

a[href^='http'].env-button:not(.env-button--link, .env-button--secondary, .env-button--warning):after {
  background-image: var(--lp-icon-externallink-light);
}


/* Bilder */
.lp-search .sv-search-result a[href*='.jpg']:after,
.lp-search .sv-search-result a[href*='.jpeg']:after,
.lp-search .sv-search-result a[href*='.png']:after,
.lp-related--links a[href*='.jpg']:after,
.lp-related--links a[href*='.jpeg']:after,
.lp-related--links a[href*='.png']:after {
  background-image: var(--lp-icon-image-dark);
}

/* Dokument */
.lp-search .sv-search-result a[href*='.txt']:after,
.lp-search .sv-search-result a[href*='.doc']:after,
.lp-search .sv-search-result a[href*='.docx']:after,
.lp-related--links a[href*='.txt']:after,
.lp-related--links a[href*='.doc']:after,
.lp-related--links a[href*='.docx']:after {
  background-image: var(--lp-icon-document-dark);
}

/* Excel */
.lp-search .sv-search-result a[href*='.xls']:after,
.lp-search .sv-search-result a[href*='.xlsx']:after,
.lp-related--links a[href*='.xls']:after,
.lp-related--links a[href*='.xlsx']:after {
  background-image: var(--lp-icon-excel-dark);
}

/* Övriga dokument-länkar */
.lp-search .sv-search-result a[href*='.ppt']:after,
.lp-search .sv-search-result a[href*='.pptx']:after,
.lp-search .sv-search-result a[href*='.css']:after,
.lp-search .sv-search-result a[href*='.js']:after,
.lp-search .sv-search-result a[href*='.vm']:after,
.lp-search .sv-search-result a[href^='/edit-fileresource/']:after,
.lp-related--links a[href*='.ppt']:after,
.lp-related--links a[href*='.pptx']:after,
.lp-related--links a[href*='.css']:after,
.lp-related--links a[href*='.js']:after,
.lp-related--links a[href*='.vm']:after,
.lp-related--links a[href^='/edit-fileresource/']:after {
  background-image: var(--lp-icon-document-dark);
}


/* Tar bort standardikonen */
.pagecontent a[href^='http'] img.sv-linkicon,
.lp-related--links a[href^='http'] img.sv-linkicon,
.lp-search .sv-search-result a[href*='.pdf'] img.sv-linkicon,
.lp-search .sv-search-result a[href*='.jpg'] img.sv-linkicon,
.lp-search .sv-search-result a[href*='.jpeg'] img.sv-linkicon,
.lp-search .sv-search-result a[href*='.png'] img.sv-linkicon,
.lp-search .sv-search-result a[href*='.txt'] img.sv-linkicon,
.lp-search .sv-search-result a[href*='.doc'] img.sv-linkicon,
.lp-search .sv-search-result a[href*='.docx'] img.sv-linkicon,
.lp-search .sv-search-result a[href*='.xls'] img.sv-linkicon,
.lp-search .sv-search-result a[href*='.xlsx'] img.sv-linkicon,
.lp-search .sv-search-result a[href*='.ppt'] img.sv-linkicon,
.lp-search .sv-search-result a[href*='.pptx'] img.sv-linkicon,
.lp-search .sv-search-result a[href*='.css'] img.sv-linkicon,
.lp-search .sv-search-result a[href*='.js'] img.sv-linkicon,
.lp-search .sv-search-result a[href*='.vm'] img.sv-linkicon,
.lp-search .sv-search-result a[href^='/edit-fileresource/'] img.sv-linkicon,
.lp-related--links a[href*='.pdf'] img.sv-linkicon,
.lp-related--links a[href*='.jpg'] img.sv-linkicon,
.lp-related--links a[href*='.jpeg'] img.sv-linkicon,
.lp-related--links a[href*='.png'] img.sv-linkicon,
.lp-related--links a[href*='.txt'] img.sv-linkicon,
.lp-related--links a[href*='.doc'] img.sv-linkicon,
.lp-related--links a[href*='.docx'] img.sv-linkicon,
.lp-related--links a[href*='.xls'] img.sv-linkicon,
.lp-related--links a[href*='.xlsx'] img.sv-linkicon,
.lp-related--links a[href*='.ppt'] img.sv-linkicon,
.lp-related--links a[href*='.pptx'] img.sv-linkicon,
.lp-related--links a[href*='.css'] img.sv-linkicon,
.lp-related--links a[href*='.js'] img.sv-linkicon,
.lp-related--links a[href*='.vm'] img.sv-linkicon,
.lp-related--links a[href^='/edit-fileresource/'] img.sv-linkicon {
  display: none;
}

/* Tar bort ikon i brödsmula i söken */
.lp-search-result__item__path a[href*='.pdf'] img.sv-linkicon,
.lp-search-result__item__path a[href*='.jpg'] img.sv-linkicon,
.lp-search-result__item__path a[href*='.jpeg'] img.sv-linkicon,
.lp-search-result__item__path a[href*='.png'] img.sv-linkicon,
.lp-search-result__item__path a[href*='.txt'] img.sv-linkicon,
.lp-search-result__item__path a[href*='.doc'] img.sv-linkicon,
.lp-search-result__item__path a[href*='.docx'] img.sv-linkicon,
.lp-search-result__item__path a[href*='.xls'] img.sv-linkicon,
.lp-search-result__item__path a[href*='.xlsx'] img.sv-linkicon,
.lp-search-result__item__path a[href*='.ppt'] img.sv-linkicon,
.lp-search-result__item__path a[href*='.pptx'] img.sv-linkicon,
.lp-search-result__item__path a[href*='.css'] img.sv-linkicon,
.lp-search-result__item__path a[href*='.js'] img.sv-linkicon,
.lp-search-result__item__path a[href*='.vm'] img.sv-linkicon,
.lp-search-result__item__path a[href^='/edit-fileresource/'] img.sv-linkicon {
  display: none;
}

/*
---------------------------------------------------------
INTRO STARTPAGE
--------------------------------------------------------- */
.lp-intro-startpage {
  align-items: center;
  background: var(--lp-color-1);
  border-radius: var(--lp-border-radius);
  display: flex;
  padding: var(--lp-spacing);

  flex-wrap: wrap;
  gap: var(--lp-spacing);
}

.lp-intro-startpage > .sv-text-portlet {
  min-width: 38rem;
  width: 35%;

  flex: 1 1 auto;
}

.lp-intro-startpage h1,
.lp-intro-startpage .heading {
  color: #fff;
  font-size: clamp(1.6rem,6vw,4.6rem);
  margin-bottom: 0 !important;
}

.lp-intro-startpage > .sv-layout {
  width: calc(65% - var(--lp-spacing));

  flex: 1 1 auto;
}

.lp-content-max-width {
  margin: 0 auto;
  max-width: 77rem;
}


.lp-intro-startpage .lp-search input[type='submit'],
.lp-intro-startpage .lp-search form button {
  align-items: center;
  background: var(--lp-color-3);
  border: 1px solid var(--lp-color-3);
  border-radius: var(--lp-button-border-radius);
  color: var(--lp-color-3-text);
  display: flex;
  flex-direction: row;
  margin: 0 0 0 2rem;
  padding: 0 3rem;
  transition: var(--lp-transition-default);

  gap: 1rem;
}

.lp-intro-startpage .lp-search input[type='submit']:hover,
.lp-intro-startpage .lp-search form button:hover {
  background: var(--lp-color-3-dark);
  border: 1px solid var(--lp-color-3-dark);
}

.lp-intro-startpage .lp-search form button .lp-icon {
  color: var(--lp-color-3-contrast);
}

.lp-intro-startpage .lp-search input[type='search'] {
  border: 1px solid var(--lp-color-3);
  border-radius: var(--lp-button-border-radius);
}

.lp-intro-startpage .lp-site-tools {
  display: flex;
  padding: var(--lp-spacing-small) 0 0 0;
  text-align: initial;

  flex-wrap: wrap;
  gap: 1em;
}

body .lp-intro-startpage .lp-site-tools a[href^='http']:after {
  content: none;
}

.lp-intro-startpage .lp-site-tools li {
  margin: 0;
}

.lp-intro-startpage .lp-site-tools .lp-icon {
  margin: 0 0 -0.1rem 0.6rem;
}