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

CSN Labb

Styling för element i laborativt stadie.

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

/******************************************************
Dölj tyck till knapp inför demo (labb)
******************************************************/
.csn-feedback {
   display: none !important;
}

/******************************************************
Mina sidor sekretessmarkering (kom ihåg width på pagebar)
******************************************************/
.csn-sekretess .csn-sida {
   position: relative;
}

.csn-sekretess .csn-sida > div:after {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: -2rem;
   border: 8px solid #e4032d;
   z-index: 10;
   pointer-events: none;
   max-width: 960px;
   box-sizing: border-box;
   margin: auto;
}

.csn-sekretess .csn-sida > div {
   position: relative;
   padding-top: 3rem;
}

.csn-sekretess .csn-sida > div:before {
   content: 'SEKRETESS';
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   z-index: 10;
   background: #e4032d;
   padding: 1rem;
   font-weight: 600;
   color: #fff;
}

.csn-sekretess .csn-login-meny__sektion.csn-login-meny__topp {
   border: 4px solid #e4032d;
   margin: 0 0.5rem 1.5rem 0.5rem;
   padding-top: 0.75rem !important;
}

.csn-sekretess .csn-login-meny__sektion.csn-login-meny__topp:before {
   content: 'SEKRETESS';
   color: #e4032d;
   font-weight: 600;
   display: block;
   padding-bottom: 0.5rem;
}


/******************************************************
Ikonrubrik (h1 med prefixad ikon)
******************************************************/
.csn-iconheading {
   position: relative;
   margin-bottom: -1.5rem;
}

.csn-iconheading__icon {
   display: none;
   width: 64px;
   height: 64px;
   position: absolute;
   top: -7px;
   left: 0;
   background-color: #75c5c9;
   background-size: 32px 32px;
   background-repeat: no-repeat;
   background-position: center;
   border-radius: 50%;
}

.csn-iconheading--hasicon .csn-iconheading__icon {
   display: table;
}

.csn-iconheading--hasicon .csn-iconheading__icon span {
   display: table-cell;
   vertical-align: middle;
   text-align: center;
   font-family: "akkurat pro",system,-apple-system,"san francisco",roboto,"segoe ui","helvetica neue",arial,sans-serif;
   font-size: 20px;
   font-weight: bold;
}

.csn-iconheading--hasicon .csn-iconheading__text {
   margin-left: 80px;
}

@media (max-width:768px) {
   .csn-iconheading {
      margin-bottom: 0;
   }
   
   .csn-iconheading__icon {
      top: -11px;
      width: 54px;
      height: 54px;
      background-size: 28px 28px;
   }
   
   .csn-iconheading--hasicon .csn-iconheading__text {
      margin-left: 66px;
      hyphens: auto;
      -webkit-hyphens: auto;
      -ms-hyphens: auto;
   }
}


/******************************************************
Miljöåtgärder (labb)
******************************************************/
.csn-import table  {
   width: 100%;
   border-spacing: 0;
   border-collapse: collapse;
   color: #333;
   margin-top: 1rem;
}

.csn-import table td {
   background: #eee;
   padding: 0.5em;
   height: 49px;
}

.csn-import table tr:first-child td,
.csn-import table td:last-child {
   background: #ddd;
}

.csn-import table tr td {
   border-bottom: 2px solid #fff;
   border-right: 2px solid #fff;
}   

.csn-import table tr:last-child td {
   border-bottom: 0;
}

.csn-import table tr td:last-child {
   border-right: 0;
   width: 130px;
}

.csn-import .csn-knapp {
   width: 100%;
}

.csn-import__status {
   font-size: 15px;
   color: #888;
}

.csn-import__status--error {
   color: #e4022d;
}

/******************************************************
Färgsida (labb)
******************************************************/
.csn-swatches > div {
   font-size: 0;
}

.csn-swatch {
   height: 80px;
   border-radius: 0 64px 64px 0;
   margin-top: 8px;
   display: inline-block;
   padding-right: 16px;
   overflow: hidden;
}

.csn-swatch__spec {
   color: #000;
   float: left;
   text-align: center;
   width: 96px;
   height: 48px;
   line-height: 48px;
   margin: 16px 0 0 16px;
   border-radius: 24px;
}

.csn-swatch__spec--dark {
   color: #fff;
}

.csn-swatch__spec span {
   display: inline-block;
   font-size: 16px;
}

/******************************************************
Länkomskrivning (labb)
******************************************************/
.sv-editing-mode .csn-linkrewriter input[type="submit"] {
   display: none;
}

.csn-linkrewriter .csn-message {
   margin-bottom: 1em;
}

.csn-linkrewriter__listcontainer ul {
    padding: 0;
    margin: 0 0 1em 0;
}

.csn-linkrewriter__listcontainer ul li {
    display: block;
    border: 1px solid transparent;
    border-radius: 3px;
    padding: 0.5em 0.5em;
    margin-top: 6px;
    text-decoration: none;
    transition: none;
    -moz-transition: none;
    -o-transition: none;
    -webkit-transition: none;

    border-color: #e4e4e4;
    background-color: #f4f4f4;
}

.csn-linkrewriter__listcontainer ul li:first-child {
    margin-top: 0;
}

.csn-linkrewriter-list__title {
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: bold;
    color: #333;
}

.csn-linkrewriter-list__data {
    margin-top: 2px;
    font-size: 11px;
    color: #333;
}

.csn-linkrewriter-list__data--hidden {
    display: none;
}

.csn-linkrewriter-list__data a {
    color: #2365a3;
    text-decoration: none;
}

.csn-linkrewriter-list__data a:hover {
    text-decoration: underline;
}

.csn-message {
   border: 1px solid transparent;
	border-radius: 3px;
   padding: 0.5em 0.5em;
}

.csn-message--normal {
   color: #666666;
   border-color: #e4e4e4; 
	background-color: #f4f4f4
}

.csn-message--info {
   color: #777668;
   border-color: #e4dea5; 
	background-color: #fbf5bc
}

.csn-message--success {
   color: #586f52;
   border-color: #b8d6af; 
	background-color: #d5f3cd
}

.csn-message--error {
   color: #775b4e;
   border-color: #eabcb0; 
	background-color: #ffdab6
}

.csn-message--error a {
   color: #775b4e;
}

.csn-messagetemplate {
	display: none;
}

/******************************************************
Vektorbild/infografik (labb)
******************************************************/
.vektorbild {
   width: 100%;
   height: auto;
}

.csn-infografik-fullbred {
   width: 100%;
}

.csn-infografik-tre-fjardedelar {
   width: 75%;
}

.csn-infografik-halvbred {
   width: 47%;
}

.csn-infografik-tredjedel {
   width: 29%;
}

/******************************************************
E-postformulär SV
******************************************************/
.csn-formular-labb > div > span {
   font-size: 20px;
   background: #def1ca;
   display: block;
   padding: 1rem;
}

.csn-formular-labb .sv-formFieldRow {
   min-height: 74px;
}

.csn-formular-labb input[type="submit"] {
   color: #fff !important;
   background-color: #3c1e5f !important;
   transition: opacity 0.1s ease-out;
   padding: 0.625rem 1rem;
   border: 0;
   border-radius: 4px;
   margin-top: 1rem;
}

.csn-formular-labb input[type="submit"]:hover {
   opacity: 0.8;
}

.csn-formular-labb .sv-formFieldRow .sv-form-singleselectionfield > div {
   margin: 0.5rem 0 1rem 0;
}

.csn-formular-labb .sv-formFieldRow .sv-form-field-message,
.csn-formular-labb > form > div > div > table {
   background: #fff0df;
   margin: 8px 0 16px;
   padding: 0.75rem 1rem;
   border-radius: 4px;
}

.csn-formular-labb .sv-formFieldRow .sv-form-field-message span,
.csn-formular-labb > form > div > div > table span {
   color: #a9330d;
   font-size: 16px;
}

.csn-formular-labb > form > div > div > table {
   width: 100%;
}

.csn-formular-labb > form > div > div > table span {
   color: #a9330d;
   font-size: 20px;
}

.csn-formular-labb .sv-formFieldRow .sv-form-singleselectionfield + .sv-form-field-message {
   margin-top: -1rem;
}