/*Denna fil är tillfällig sålånge gula menyn ska ligga
231208*/
  
.csn-languages {
   font-family: "Source Sans Pro", system, -apple-system, "san francisco", roboto, "segoe ui", "helvetica neue", arial, sans-serif;
   display: flex !important;
   align-items: center;
   color: #fff;
   text-decoration: underline;
   text-decoration-color: transparent !important;
   text-decoration-thickness: 14%;
   text-underline-offset: 3px;
   transition: text-decoration-color .1s;
   margin-right: 2rem;
}
.csn-languages:hover {
   text-decoration-color: #fff !important;
}

.csn-languages span {
   margin-left: 6px;
}

/* Genvägar fyrkanten som syns för inloggade användare i SV */

.csn-shortcut-link {
   position: fixed;
   right: 3em;
   bottom: 0.5em;
   z-index: 1000;
	display: flex;
   justify-content: center;
   align-items: center;
   padding: 0.4em 1em;
  	height: 2.5em;
   background-color: #FFB536;
   border-radius: 4px;
}

.csn-shortcut-link:hover {
	background-color: #FFD164;
}

.csn-shortcut-link div {
   background: url('/images/18.7ceb52b315ad72aa59e38390/ic_apps_black_24px.svg');
   width: 24px;
   height: 24px;
}
   
/******************************************************

CSN Sidhuvud

Styling för element som tillhör sidhuvudet, som
systemmeddelande, logotyp, och mobilmeny.

******************************************************/

/******************************************************
Sidhuvud
******************************************************/
.csn-sidhuvud {
   position: relative;
}

/******************************************************
Konfetti vid release
******************************************************/
.csn-konfetti {
   position: absolute;
   width: 100%;
   height: 100%;
   opacity: 1;

   -webkit-transition: opacity 1.5s linear;
   -moz-transition: opacity 1.5s linear;
   -o-transition: opacity 1.5s linear;
   transition: opacity 1.5s linear;
}

.csn-konfetti.fadeout {
   opacity: 0;
}

/******************************************************
Hoppa till innehåll
******************************************************/
.csn-skip {
   position: absolute;
   top: 16px;
   left: -9999px;
   z-index: 1;   
   display: inline-block;
   opacity: 1 !important;
   text-decoration: none;
   background: #719dde;
   outline-offset: 0 !important;
}

.csn-skip div {
   background: #fff;
   padding: 12px 8px;
   border-radius: 2px;
}

.csn-skip:focus {
   left: 16px;
}

/******************************************************
Cookiebar
******************************************************/
.csn-cookiebar {
   padding: 2.2em 1em 1.7em 1em;
   overflow: hidden;
   position: relative;
   display: none;
}

.csn-cookiebar .csn-cookiebar__text {
   color: #221;
   margin-bottom: 0.4em;
}

.csn-cookiebar .csn-cookiebar__lank {
   color: #221;
   display: inline-block;
   text-decoration: none;
   border-bottom: 1px solid;
}

.csn-cookiebar .csn-cookiebar__stang {
   position: absolute;
   bottom: 1.5em;
   right: 1em;
   float: right;
   border-radius: 4px;
   color: #110;
   background: #e2b95b;
}

html .csn-cookiebar {
   position: fixed;
   z-index: 999998;
   left: 0;
   right: 0;
   bottom: 0;
   padding-bottom: 44px !important;
   box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.15);
   opacity: 1;

   background: #ffd164;
   background: -moz-linear-gradient(top,  rgba(250,209,100,0.97) 0%, rgba(250,209,100,1) 50%, rgba(250,209,100,1) 100%);
   background: -webkit-linear-gradient(top,  rgba(250,209,100,0.97) 0%,rgba(250,209,100,1) 50%,rgba(250,209,100,1) 100%);
   background: linear-gradient(to bottom,  rgba(250,209,100,0.97) 0%,rgba(250,209,100,1) 50%,rgba(250,209,100,1) 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebffd164', endColorstr='#ffd164',GradientType=0 );
}

html .csn-cookiebar-content {
   max-width: 928px;
   margin: auto;
   position: relative;
}

html .csn-cookiebar .csn-cookiebar__rubrik,
html .csn-cookiebar .csn-cookiebar__text,
html .csn-cookiebar .csn-cookiebar__lank {
   color: #333;
}

html .csn-cookiebar .csn-cookiebar__stang {
   bottom: 0;
   right: 0;
}


/******************************************************
Cookiebar
******************************************************/
.csn-betabar {
   color: rgba(255, 255, 255, 0.87);
   font-size: 15px;
   line-height: 1.3;
   padding: 0.5em 1em;
}

/******************************************************
Javascript varning
******************************************************/
.csn-javascript-varning {
   display: block;
}

/******************************************************
Toppmeddelande
******************************************************/
.csn-toppmeddelande {
   padding: 0 16px 8px 16px;
   word-wrap: break-word;
   font-size: 16px;
   color: #333;
}

.csn-toppmeddelande:first-child {
   padding-top: 8px;
}

.csn-toppmeddelande--driftinfo,
.csn-toppmeddelande--driftinfo a {
   color: #fff;
}

.csn-toppmeddelande__utfallbar {
   display: none;
   padding: 0 40px 8px 0;
}

html .csn-toppmeddelande__rubrik {
   position: relative;
   font-weight: bold;
   font-weight: 600;
   padding: 6px 32px 8px 7px;
   display: block;
   opacity: 1 !important;
   text-decoration: none;
   border-radius: 3px;
   margin: 0 -0.5rem;
}

.csn-toppmeddelande__rubrik span {
   display: block;
   margin-left: 34px;
}
   
.csn-toppmeddelande__rubrik:hover {
   background: rgba(0, 0, 0, 0.08);
}

.csn-toppmeddelande__rubrik:before {
   content: '';
   display: block;
   background-size: 24px;
   width: 24px;
   height: 24px;
   position: absolute;
}

.csn-toppmeddelande--driftinfo .csn-toppmeddelande__rubrik:before {
   background-image: url('/webdav/files/System/Grafik/Material%20icons/ic_warning_white_24px.svg');
}

.csn-toppmeddelande--viktiginfo .csn-toppmeddelande__rubrik:before {
   background-image: url('/webdav/files/System/Grafik/Material%20icons/ic_info_outline_black_24px.svg');
   opacity: 0.6;
}

.csn-toppmeddelande__rubrik:after {
   content: '';
   display: block;
   position: absolute;
   top: 6px;
   right: 6px;
   background-size: 24px;
   width: 24px;
   height: 24px;
   margin-left: 8px;
   transition: transform 0.2s;
   -ms-transform: rotate(90deg);
   -moz-transform: rotate(90deg);
   -o-transform: rotate(90deg);
   -webkit-transform: rotate(90deg);
   transform: rotate(90deg);
}

.csn-toppmeddelande--driftinfo .csn-toppmeddelande__rubrik:after {
   background-image: url('/webdav/files/System/Grafik/Material%20icons/ic_keyboard_arrow_right_white_24px.svg');
}   

.csn-toppmeddelande--viktiginfo .csn-toppmeddelande__rubrik:after {
   background-image: url('/webdav/files/System/Grafik/Material%20icons/ic_keyboard_arrow_right_black_24px.svg');
   opacity: 0.6;
}   

.csn-toppmeddelande__rubrik[aria-expanded="true"]:after {
   -ms-transform: rotate(270deg);
   -moz-transform: rotate(270deg);
   -o-transform: rotate(270deg);
   -webkit-transform: rotate(270deg);
   transform: rotate(270deg);
}

.csn-toppmeddelande__text {
   display: block;
}

.csn-toppmeddelande__lank {
   display: inline-block;
   margin-top: 6px;
}

/******************************************************
Logotyp
******************************************************/
.csn-logo {
   position: relative;
   opacity: 1 !important;
   height: 64px;
}

.csn-logo__link {
   opacity: 1 !important;
   display: inline-block;
}

.csn-logo__image {
   width: 64px;
   height: 64px;
   float: left;
   border: 0;
   color: #ffffff;
}

.csn-logo__text {
   display: inline-block;
   position: absolute;
   top: 38px;
   padding-left: 6px;
   font-family: arial;
   font-size: 23px;
   color: #f1f1f1;
   text-decoration: none;
}

.csn-logo {
   padding-left:1.5rem;
}

@media screen and (min-width: 914px) {
   .csn-responsive-marginal {
      padding-left: 3.625rem 0 !important;
   }
}

/******************************************************
Slogan
******************************************************/
a.csn-slogan.csn-formatmall-rubrik-1 {
   color: #fff;
   text-decoration: none;
   opacity: 1 !important;
}

.csn-slogan--red {
   color: #ee7c7d;
}

.csn-slogan.csn-formatmall-rubrik-4 {
   font-size: 1rem;
   margin: 33px 0 0 0;
   line-height: 1.5;
}
/******************************************************
Toppmeny
******************************************************/
.csn-toppmeny {
  /* padding-top: 29px;
   position: absolute;
   right: 0;
   max-width: 100%;
   padding-bottom: 12px;
   padding-left: 12px;
   padding-right: 12px;
   margin-right: -12px;
   */
}

.csn-toppmeny .csn-knapp,
.csn-mobilmeny .csn-knapp {
   box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
   transition: opacity 0.1s ease-out;
}

.csn-toppmeny .csn-knapp span,
.csn-mobilmeny .csn-knapp span {
   border: none !important;
   padding-bottom: 3px;
   border-color: rgba(0, 0, 0, 0.6);
}

.csn-toppmeny .csn-knapp--lila-alt span,
.csn-mobilmeny .csn-knapp--lila-alt span {
   border-color: rgba(255, 255, 255, 0.6);
}

.csn-toppmeny-genvagar div {
   background: url('/images/18.7ceb52b315ad72aa59e38390/ic_apps_black_24px.svg');
   width: 24px;
   height: 24px;
}
.csn-meny-link{
	color: #fff;
   display: inline-block;
   text-decoration: NONE;
   border-bottom: 1px solid;
   padding: 0.625rem 0 1px;
   margin: 0 .5rem;
   float: left;
}

/******************************************************
Logga in knapp/meny
******************************************************/
.csn-login-toggle.csn-knapp {
   padding-right: 28px;
   position: relative;
   white-space: nowrap;
}

.csn-login-toggle--open {
   border-bottom-left-radius: 0 !important;
   border-bottom-right-radius: 0 !important;
   opacity: 1 !important;
}

.csn-login-toggle:after {
   content: '';
   position: absolute;
   -ms-transform: rotate(90deg);
   -webkit-transform: rotate(90deg);
   -moz-transform: rotate(90deg);
   -o-transform: rotate(90deg);
   transform: rotate(90deg);
   width: 18px;
   height: 18px;
   background: url('/images/18.7ceb52b315ad72aa59eb4292/ic_keyboard_arrow_right_black_24px.svg');
   background-size: 18px;
   margin-top: 3px;
   right: 8px;
   transition: transform 0.15s;
   opacity: 0.75;
}

.csn-login-toggle.csn-login-toggle--open:after {
   -ms-transform: rotate(270deg);
   -webkit-transform: rotate(270deg);
   -moz-transform: rotate(270deg);
   -o-transform: rotate(270deg);
   transform: rotate(270deg);
}

.csn-login-meny {
   position: relative;
   top: -1px;
   clear: both;
   background: #ffd164;
   width: 343px;
   max-width: 100%;
   border-radius: 3px;
   border-top-right-radius: 0;
   z-index: 65537;
   padding: 24px 16px;
   box-sizing: border-box;      
   box-shadow: 0 5px 4px rgba(0, 0, 0, 0.1);
   font-family: -apple-system,"san francisco","segoe ui",roboto,"helvetica neue",system,arial,sans-serif;
   display: none;
   float: right;
}
@media only screen and (max-width: 914px) {
   .csn-login-meny {
      position: absolute;
      right: 0;
      top:3rem;
      clear: both;
      background: #ffd164;
      width: 382px;
      min-width: 145%;
      border-radius: 3px;
      border-top-right-radius: 0 !important;
      z-index: 65537;
      padding: 24px 16px;
      box-sizing: border-box;
      box-shadow: 0 5px 4px rgba(0, 0, 0, 0.1);
      font-family: -apple-system,"san francisco","segoe ui",roboto,"helvetica neue",system,arial,sans-serif;
      display: none;
      float: right;
   }
}

.csn-login-meny__lankar {
   margin-top: 1rem;
}

.csn-login-meny__lankar a {
   line-height: 1.6;
   font-size: 15px;
}

.csn-login-meny__sektion-nopadlock {
   position: relative;
   color: #222;
   background: #edc25d;
   padding: 0.75rem;
   margin-bottom: 8px;
   border-radius: 3px;
}

.csn-login-meny__sektion-nopadlock:last-child {
   margin-bottom: 0;
}

a.csn-login-meny__sektion-nopadlock {
   display: block;
}

.csn-login-meny__sektion {
   position: relative;
   color: #222;
   background: #edc25d;
   padding: 0.75rem;
   margin-bottom: 8px;
   border-radius: 3px;
}

.csn-login-meny__sektion:last-child {
   margin-bottom: 0;
}

a.csn-login-meny__sektion {
   display: block;
}

a.csn-login-meny__sektion:after {
   content: '';
   position: absolute;
   right: 8px;
   background: url('/images/18.2bc92e1f15a2288a5b669/ic_lock_outline_black_24px.svg');
   width: 18px;
   height: 18px;
   background-size: 18px;
   opacity: 0.6;
}

.csn-login-meny__titel {
   font-size: 15px;
   font-weight: 600;
   text-decoration: none;
}

.csn-login-meny__namn {
   font-size: 14px;
   overflow: hidden;
}

/******************************************************
Logga in partnermeny
******************************************************/
.csn-login-meny__partner {
   position: relative;
   border-radius: 3px;
   background: #edc25d;
}

.csn-login-meny__partner a.csn-login-meny__utf {
   display: block;
   position: relative;
   color: #222;
   background: #edc25d;
   padding: 0.75rem;
   margin-bottom: 0;
   border-radius: 3px;
   margin-bottom: 0;
   text-decoration: none;
}

.csn-login-meny__partner a.csn-login-meny__sektion-nopadlock {
   background: #dab35c;
}

.csn-login-meny__partner a.csn-login-meny__sektion {
   background: #dab35c;
}

.csn-login-meny__partner a.csn-login-meny__sektion--pil:after {
   background-image: url('/images/18.448c6fa015890d2c81f471/ic_arrow_forward_black_24px.svg');
}

.csn-login-meny__partner a.csn-login-meny__utf:after {
   content: '';
   position: absolute;
   right: 8px;
   width: 18px;
   height: 18px;
   background: url('/images/18.7ceb52b315ad72aa59eb4292/ic_keyboard_arrow_right_black_24px.svg');
   background-position: center;
   background-size: 22px 22px;
   opacity: 0.6;
   transform: rotate(90deg);
   transition: transform 0.2s ease;
}

.csn-login-meny__partner.csn-login-meny__partner--oppen a.csn-login-meny__utf:after {
   transform: rotate(-90deg);
}

.csn-login-meny__partner-content {
   display: none;
   padding: 0.75rem 0.75rem 1.5rem 0.75rem;
}

.csn-login-meny__eller {
   text-align: center;
   margin-bottom: 8px;
}

/******************************************************
Mobilmeny
******************************************************/
.csn-modal-fader {
   position: fixed;
   top: 0;
	bottom: 0;
   left: 0;
   right: 0;
   /*z-index: 65538;  buggfix 2018-09-11*/
   z-index: 14;
   background: #746289;
   background: rgba(255, 255, 255, 0.8);
   display: none;
}

.csn-mobilmeny {
   padding: 1em;
   position: fixed;
   top: 0;
   bottom: -1px;
   right: -272px;
   width: 220px;
   background: #3c1e5f;
   z-index: 65539;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
   
   -webkit-transition: right 0.2s ease;
   -moz-transition: right 0.2s ease;
   -o-transition: right 0.2s ease;
   transition: right 0.2s ease;
}

.csn-mobilmeny--oppen {
   right: 0;
}

/******************************************************
Sökförslag
******************************************************/
.awesomplete [hidden] {
   display: none;
}

.awesomplete .visually-hidden {
   position: absolute;
   clip: rect(0, 0, 0, 0);
   top: 0;
   left: 0;
}

.awesomplete {
   position: relative;
}

.awesomplete > ul {
   position: absolute;
   left: 0;
   z-index: 1;
   min-width: 100%;
   box-sizing: border-box;
   list-style: none;
   padding: 0;
   margin: 0;
   background: #fff;
}

.awesomplete > ul:empty {
   display: none;
}

.awesomplete > ul {
   border-radius: 0.3em;
   margin: .2em 0 0;
   background: #fff;
   border: 1px solid #777;
   border: 1px solid rgba(0, 0, 0, 0.3);
   box-shadow: .05em .2em .6em rgba(0, 0, 0, 0.2);
   text-shadow: none;
}

@supports (transform: scale(0)) {
   .awesomplete > ul {
      transition: .3s cubic-bezier(0.4, 0.2, 0.5, 1.4);
      transform-origin: 1.43em -0.43em;
   }

   .awesomplete > ul[hidden],
   .awesomplete > ul:empty {
      opacity: 0;
      transform: scale(0);
      display: block;
      transition-timing-function: ease;
   }
}

/* Pointer */
.awesomplete > ul:before {
   content: '';
   position: absolute;
   top: -0.43em;
   left: 1em;
   width: 0;
   height: 0;
   padding: 0.4em;
   background: white;
   border: inherit;
   border-right: 0;
   border-bottom: 0;
   -webkit-transform: rotate(45deg);
   transform: rotate(45deg);
}

.awesomplete > ul > li {
   position: relative;
   padding: 0.5em;
   cursor: pointer;
}

.awesomplete > ul > li:hover {
   background: #f2f2f2;
   color: black;
}

.awesomplete > ul > li[aria-selected="true"] {
   background: #ebebeb;
   color: black;
}

.awesomplete mark {
   background: transparent;
}

.awesomplete li:hover mark {
   background: #f2f2f2;
}

.awesomplete li[aria-selected="true"] mark {
   background: #ebebeb;
   color: inherit;
}