/*
	Theme Name: bbs
	Description: Biobank Sverige styles
	Version: 1.2
	Author: Byrå4
	Author URI: https://byra4.se
	Tags: HTML5, CSS3
*/
/*
font-vikter: 400 / 700
*/
/*
Användbara fa-ikoner:
<i class="fa-solid fa-arrow-right-long"></i>
<i class="fa-solid fa-arrow-up-right-from-square"></i>
*/




html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin: 0; padding: 0; border: 0; font-family: inherit; vertical-align: baseline;} header, section, footer, aside, nav, main, article, figure {display: block;} /*För att få HTML5 element att funka i äldre browsers*/ h1 strong, h2 strong, h3 strong, h4 strong, h5 strong {font-weight: inherit;} h1 em, h2 em, h3 em, h4 em, h5 em {font-style: inherit;}
html, body {height: 100%;}

/*************************************************************/
/* variabler */
/*************************************************************/

html { /* här anges vilket scope variablerna ska gälla i */
    --farg-lila: #493b80;
    --farg-lila-kontrast: #36295e;
    --farg-ljuslila: #9184be;
    --farg-ljuslila-60: #bcb5da;
    --farg-ljuslila-30: #dddaee;

    --farg-rosa: #f6bcd7;
    --farg-rosa-60: #f9d7e7;
    --farg-rosa-30: #fcecf3;
    --farg-rosa-kontrast: #eea4c6;
    
    --farg-gul: #fed575;
    --farg-gul-60: #ffe6b1;
    --farg-gul-30: #fff2da;
    --farg-gul-kontrast: #f3c357;
    
    --farg-turkos: #71c4c0;
    --farg-turkos-60: #b4dddb;
    --farg-turkos-30: #dbeeed;
    --farg-turkos-kontrast: #49b4b1;
    
    --farg-morkgra: #484848;
    
    --text-storlek-h1: 34px;
    --text-storlek-h2: 24px;
    --text-storlek-h2-kol2: 20px;
    --text-storlek-h3: 19px;
    --text-storlek-normal: 16px;
    --text-storlek-mindre: 14px;
    --text-storlek-mini: 11px;

    --text-familj-alt: 'courier-std', monospace;

}
@media all and (min-width: 540px){
    html {
        --text-storlek-h1: 42px;
        --text-storlek-h2: 30px;
        --text-storlek-h2-kol2: 23px;
        --text-storlek-h3: 22px;
        --text-storlek-normal: 17px;
        --text-storlek-mindre: 15px;
        --text-storlek-mini: 12px;
    }
}
@media all and (min-width: 1024px){
    html {
    --text-storlek-h1: 46px;
    --text-storlek-h2: 32px;
    --text-storlek-h2-kol2: 24px;
    --text-storlek-h3: 22px;
    --text-storlek-normal: 19px;
    --text-storlek-mindre: 16px;
    --text-storlek-mini: 12px;
    }
}
/*************************************************************/


/*************************************************************/
/* standardformatering */
/*************************************************************/



html {
    font-family: 'PT Sans', sans-serif;
    font-size: var(--text-storlek-normal);
    font-weight: 200;
    line-height: 1.5;
    color: black;
}
p {
    margin-bottom: 1.2em;
}
h1 {
    font-size: var(--text-storlek-h1);
    line-height: 1.2;
    margin-bottom: .1em;
    font-weight: bold;
    letter-spacing: -1px;
}
h2 {
    font-size: var(--text-storlek-h2);
    font-weight: bold;
    margin-top: 1.2em;
    margin-bottom: .1em;
    line-height: 1.1;
    letter-spacing: -.5px;
}
/*
.kol1 h2 {
    letter-spacing: -.5px;
}
*/
h3 {
    font-size: var(--text-storlek-h3);
    font-weight: bold;
    margin-top: 1.2em;
    margin-bottom: 0.1em;
    line-height: 1.2;
}
h4 {
    font-size: var(--text-storlek-normal);
    font-weight: bold;
    line-height: 1.2;
    /*font-style: italic;*/
}
img {max-width: 100%;}
ul {
    list-style-position: outside;
    padding-left: 1em;
    margin-bottom: 1em;
}
ol {
    list-style-position: outside;
    padding-left: 1.5em;
    margin-bottom: 1em;
}
ul ul, ol ol {
    margin-bottom: 0;
}
li + li {margin-top: .4em;}
#huvudmeny li + li {margin-top: 0;}

p + ul, p + ol {margin-top: -.5em;}
details p + ul, details p + ol {margin-top: 0;}
h1 + ul, h1 + ol, h2 + ul, h2 + ol, h3 + ul, h3 + ol, h4 + ul, h4 + ol {margin-top: .5em;}

div.wrapper>h2:first-child{margin-top: 0;;}


address {font-style: normal;}
a {text-decoration: underline; text-underline-offset: 3px; cursor: pointer; color: var(--farg-lila); text-decoration-color: var(--farg-turkos); text-decoration-thickness: 2px;}
a:hover {text-decoration: underline; text-decoration-thickness: 4px; text-decoration-color: var(--farg-lila); color: black;}
section {box-sizing: border-box;}
code {font-family: courier; background: lightgray; font-size: var(--text-storlek-mindre);}
.wp-block-code {margin-bottom: 10px;}
::-moz-selection /* Firefox */ {color:  var(--farg-rosa); background: var(--farg-lila-kontrast);}
::selection {color:  var(--farg-rosa); background: var(--farg-lila-kontrast);}



input, textarea {
    font-family: 'PT sans', sans-serif;
    font-size: 16px;
    font-weight: 200;
    line-height: 1.6;
    color: black;
    resize: none;
}

input[type=search]:focus, textarea:focus {
    outline: none !important;
    
    /*border:1px solid red;
    box-shadow: 0 0 10px #719ECE;*/
  }

/* för att checkboxar och radioknappar ska linjera med labels */
input[type=checkbox], input[type=radio] {vertical-align: middle; position: relative; bottom: .10em;}

/* design checkbox */
input[type=checkbox] {-webkit-appearance: none; background-color: none; border: 2px solid black; width: 20px; height: 20px; border-radius: 0px; display: inline-block; position: relative;}            
input[type=checkbox]:active, input[type=checkbox]:checked:active {}
input[type=checkbox]:checked, input[type=checkbox]:hover {background-color: black;}      
input[type=checkbox]:checked:after {content: '\2714'; font-size: 17px; position: absolute; top: -5px; left: 1px; color: var(--farg-ljuslila-60);}
.rosa input[type=checkbox]:checked:after {color: var(--farg-rosa);}
.turkos input[type=checkbox]:checked:after {color: var(--farg-turkos);}


/* om stilarna inte ska tillämpas på alla checkboxar görs en klass istället: 
.regular-checkbox {-webkit-appearance: none; background-color: none; border: 2px solid black; width: 20px; height: 20px; border-radius: 0px; display: inline-block; position: relative;}            
.regular-checkbox:active, .regular-checkbox:checked:active {}
.regular-checkbox:checked, .regular-checkbox:hover {background-color: black;}      
.regular-checkbox:checked:after {content: '\2714'; font-size: 17px; position: absolute; top: -5px; left: 1px; color: var(--farg-ljuslila-60);}
.rosa .regular-checkbox:checked:after {color: var(--farg-rosa);}
.turkos .regular-checkbox:checked:after {color: var(--farg-turkos);}
*/

/* Firefox fix */
strong {font-weight: bold;}

/* Tabeller */
figure.wp-block-table.is-style-stripes{border-bottom: 0;}
figure.wp-block-table.is-style-stripes table{border-collapse: collapse; border-spacing: 0; width: 100%;}
.wp-block-table td, .wp-block-table th {font-size: var(--text-storlek-mindre);}
.wp-block-table.is-style-stripes tbody tr:nth-child(odd of :not(.gomd)){background-color: var(--farg-ljuslila-30);}
.wp-block-table.is-style-stripes tbody tr:nth-child(even of :not(.gomd)){background-color: var(--farg-ljuslila-60);}

.wp-block-table tfoot td {font-weight: bold;}
.wp-block-table.is-style-stripes thead {border-color: var(--farg-lila); border-width: 6px;}
.wp-block-table.is-style-stripes tfoot {border-color: var(--farg-lila); border-top: 0px;}
.wp-block-table.is-style-stripes td, .wp-block-table.is-style-stripes th {border: 0;}
.wp-block-table figcaption {text-align: left; font-size: var(--text-storlek-mini); font-style: italic; margin-top: 5px;}
.wp-block-table.is-style-stripes tr:last-of-type {border-bottom: 2px solid var(--farg-lila);}
.wp-block-table.is-style-stripes tfoot tr:last-of-type {border-bottom: .5px solid var(--farg-lila);}
.wp-block-table td, .wp-block-table th {padding: .8em;}
.wp-block-table th, .wp-block-table tfoot td {padding-top: 0.5em; padding-bottom: 0.5em; text-align: left;}

table.has-profilrosa-background-color, table.has-profilrosa-30-background-color, table.has-profilrosa-60-background-color, table.has-profilrosakontrast-background-color, table.has-profilgul-background-color, table.has-profilgul-30-background-color, table.has-profilgul-60-background-color, table.has-profilgulkontrast-background-color, table.has-profilturkos-background-color, table.has-profilturkos-30-background-color, table.has-profilturkos-60-background-color, table.has-profilturkoskontrast-background-color {background-color: transparent;}
.wp-block-table.is-style-stripes .has-profilrosa-background-color tbody tr:nth-child(odd of :not(.gomd)), .wp-block-table.is-style-stripes .has-profilrosa-30-background-color tbody tr:nth-child(odd of :not(.gomd)), .wp-block-table.is-style-stripes .has-profilrosa-60-background-color tbody tr:nth-child(odd of :not(.gomd)), .wp-block-table.is-style-stripes .has-profilrosakontrast-background-color tbody tr:nth-child(odd of :not(.gomd)) {background-color: var(--farg-rosa-30);}
.wp-block-table.is-style-stripes .has-profilrosa-background-color tbody tr:nth-child(even of :not(.gomd)), .wp-block-table.is-style-stripes .has-profilrosa-30-background-color tbody tr:nth-child(even of :not(.gomd)), .wp-block-table.is-style-stripes .has-profilrosa-60-background-color tbody tr:nth-child(even of :not(.gomd)), .wp-block-table.is-style-stripes .has-profilrosakontrast-background-color tbody tr:nth-child(even of :not(.gomd)) {background-color: var(--farg-rosa-60);}

.wp-block-table.is-style-stripes .has-profilgul-background-color tbody tr:nth-child(odd of :not(.gomd)), .wp-block-table.is-style-stripes .has-profilgul-30-background-color tbody tr:nth-child(odd of :not(.gomd)), .wp-block-table.is-style-stripes .has-profilgul-60-background-color tbody tr:nth-child(odd of :not(.gomd)), .wp-block-table.is-style-stripes .has-profilgulkontrast-background-color tbody tr:nth-child(odd of :not(.gomd)) {background-color: var(--farg-gul-30);}
.wp-block-table.is-style-stripes .has-profilgul-background-color tbody tr:nth-child(even of :not(.gomd)), .wp-block-table.is-style-stripes .has-profilgul-30-background-color tbody tr:nth-child(even of :not(.gomd)), .wp-block-table.is-style-stripes .has-profilgul-60-background-color tbody tr:nth-child(even of :not(.gomd)), .wp-block-table.is-style-stripes .has-profilgulkontrast-background-color tbody tr:nth-child(even of :not(.gomd)) {background-color: var(--farg-gul-60);}

.wp-block-table.is-style-stripes .has-profilturkos-background-color tbody tr:nth-child(odd of :not(.gomd)), .wp-block-table.is-style-stripes .has-profilturkos-30-background-color tbody tr:nth-child(odd of :not(.gomd)), .wp-block-table.is-style-stripes .has-profilturkos-60-background-color tbody tr:nth-child(odd of :not(.gomd)), .wp-block-table.is-style-stripes .has-profilturkoskontrast-background-color tbody tr:nth-child(odd of :not(.gomd)) {background-color: var(--farg-turkos-30);}
.wp-block-table.is-style-stripes .has-profilturkos-background-color tbody tr:nth-child(even of :not(.gomd)), .wp-block-table.is-style-stripes .has-profilturkos-30-background-color tbody tr:nth-child(even of :not(.gomd)), .wp-block-table.is-style-stripes .has-profilturkos-60-background-color tbody tr:nth-child(even of :not(.gomd)), .wp-block-table.is-style-stripes .has-profilturkoskontrast-background-color tbody tr:nth-child(even of :not(.gomd)) {background-color: var(--farg-turkos-60);}

.wp-block-table.is-style-stripes a {text-decoration-color: var(--farg-lila);}

.wp-block-table:has(+ p.has-small-font-size), .wp-block-quote p:has(+ p.has-small-font-size) {margin-bottom: .3em;}


blockquote, .wp-block-quote {
    font-size: var(--text-storlek-h2-kol2);
    border: 0px solid black;
    margin: 40px 0 40px 70px;
    padding: 0;
}
.kol2 blockquote, .kol2 .wp-block-quote {
    font-size: var(--text-storlek-h3);
    border: 0px solid black;
    margin: 40px 0 40px 60px;
    padding: 0;
}

.xxxxxxblockquote::first-letter {
  color: #A52A2A;
  float: left;
  font-size: 5em;
  margin: 0 .1em 0 0;
  line-height: 0.85;
}

blockquote:before {
  float: left;
    font-size: 187px;
    line-height: 1px;
    content: '\201D';
    border: 0px solid red;
    padding-top: 67px;
    margin-left: -70px;
    color: var(--farg-lila);
}

.kol2 blockquote:before {
    font-size: 157px;
    line-height: 1px;
    content: '\201D';
    border: 0px solid red;
    padding-top: 57px;
    margin-left: -60px;
    color: var(--farg-lila);
}


hr {border: .5px solid black; margin: 20px 0;}
button {font-family: 'PT Sans', sans-serif;}

/* wp standardklasser */
.has-profillila-color {color: var(--farg-lila);}
.has-profillilakontrast-color {color: var(--farg-lila-kontrast);}
.has-profilljuslila-color {color: var(--farg-ljuslila);}
.has-profilljuslila-60-color {color: var(--farg-ljuslila-60);}
.has-profilljuslila-30-color {color: var(--farg-ljuslila-30);}
.has-profilrosa-color {color: var(--farg-rosa);}
.has-profilrosa-60-color {color: var(--farg-rosa-60);}
.has-profilrosa-30-color {color: var(--farg-rosa-30);}
.has-profilrosakontrast-color {color: var(--farg-rosa-kontrast);}
.has-profilgul-color {color: var(--farg-gul);}
.has-profilgul-60-color {color: var(--farg-gul-60);}
.has-profilgul-30-color {color: var(--farg-gul-30);}
.has-profilgulkontrast-color {color: var(--farg-gul-kontrast);}
.has-profilturkos-color {color: var(--farg-turkos);}
.has-profilturkos-60-color {color: var(--farg-turkos-60);}
.has-profilturkos-30-color {color: var(--farg-turkos-30);}
.has-profilturkoskontrast-color {color: var(--farg-turkos-kontrast);}
.has-morkgra-color {color: var(--farg-morkgra);}
.has-svart-color {color: black;}
.has-vit-color {color: white;}

.has-profillila-background-color {background-color: var(--farg-lila);}
.has-profillilakontrast-background-color {background-color: var(--farg-lila-kontrast);}
.has-profilljuslila-background-color {background-color: var(--farg-ljuslila);}
.has-profilljuslila-60-background-color {background-color: var(--farg-ljuslila-60);}
.has-profilljuslila-30-background-color {background-color: var(--farg-ljuslila-30);}
.has-profilrosa-background-color {background-color: var(--farg-rosa);}
.has-profilrosa-60-background-color {background-color: var(--farg-rosa-60);}
.has-profilrosa-30-background-color {background-color: var(--farg-rosa-30);}
.has-profilrosakontrast-background-color {background-color: var(--farg-rosa-kontrast);}
.has-profilgul-background-color {background-color: var(--farg-gul);}
.has-profilgul-60-background-color {background-color: var(--farg-gul-60);}
.has-profilgul-30-background-color {background-color: var(--farg-gul-30);}
.has-profilgulkontrast-background-color {background-color: var(--farg-gul-kontrast);}
.has-profilturkos-background-color {background-color: var(--farg-turkos);}
.has-profilturkos-60-background-color {background-color: var(--farg-turkos-60);}
.has-profilturkos-30-background-color {background-color: var(--farg-turkos-30);}
.has-profilturkoskontrast-background-color {background-color: var(--farg-turkos-kontrast);}
.has-morkgra-background-color {background-color: var(--farg-morkgra);}
.has-svart-background-color {background-color: black;}
.has-vit-background-color {background-color: white;}

/* Latest-posts block i WP */
.wp-block-latest-posts li {margin: 0 0 20px 0;}
.wp-block-latest-posts__post-title {font-size: var(--text-storlek-h3); font-weight: bold; margin-right: 20px;}
.wp-block-latest-posts__post-date {display: inline-block; font-size: var(--text-storlek-mini);}
.wp-block-latest-posts__post-excerpt {font-size: var(--text-storlek-mindre); margin-top: 0.2em;}





/* wp anpassningar */
.wp-block-separator {border-bottom: 1px solid;}
.wp-block-image img {height: auto;}
.size-auto, .size-full, .size-large, .size-medium, .size-thumbnail {max-width: 100%; height: auto;}
.post-edit-link {color: red; padding-bottom: 20px; display: block;}
.post-edit-link:before {content: '\00BB\00A0';}
:root :where(.wp-block-image figcaption) {text-align: left;}

/* pagination links */
.pagination_con {border-top: 3px solid black; margin: 50px 0 20px 0; padding-top: 10px;}
.page-numbers {margin-right: 10px;}
.page-numbers.current {font-weight: bold;}



/* DETAILS

details.has-background:has(> .has-background)
= förälder med ".has-background" som också har ett barn med den klassen

p:not(.has-background)
= p element som inte har ".has-background"
*/
details summary {color: var(--farg-lila); margin-bottom: 2px;}
details summary:hover {text-decoration: underline; text-decoration-thickness: 4px; text-decoration-color: var(--farg-lila); color: black;}
.is-style-faktaruta details summary {color: var(--farg-ljuslila-60);}
.is-style-faktaruta details summary:hover {color: var(--farg-ljuslila-30); text-decoration-color: var(--farg-turkos);}

details p, details ul, details ol {font-size: var(--text-storlek-mindre); margin-bottom: .5em!important;}
details p.has-background {margin-bottom: 0!important;}
details {margin-bottom: 1em;}
details.has-background {padding: 1em;}
details summary {transition: margin 150ms ease-out;}
details[open] summary {margin-bottom: 10px;}
details.has-background:has(> .has-background) p:not(.has-background) {background: white; margin-bottom: 0!important; padding-top: .5em; padding-bottom: .5em;}
details.has-background:has(> .has-background) {padding: 0;} /* om både details containern (förälder) och innehållet (barn) har bakgrund ska det inte vara padding på containern eftersom det redan är padding på barn med bakgrund */
details.has-background:has(> .has-background) summary {padding: 1em;} /* summaryn (rubriken) behöver däremot ha padding */
h1 + details, h2 + details, h3 + details {margin-top: .8em;}
details details {padding: 0 25px;}
details details summary {font-size: var(--text-storlek-mindre);}
details[open] details summary { margin-bottom: 0;}
details[open] details[open] summary { margin-bottom: 10px;}



/* WP-KOLUMNER */
.wp-block-columns {margin-bottom: 1em;}
.wp-block-columns.has-background {padding: 1.25em 2.375em;}
h1 + .wp-block-columns, h2 + .wp-block-columns {margin-top: .5em;}
.wp-block-columns + h1, .wp-block-columns + h2 {margin-top: 1.5em;}

/* om en heading ligger i ett kolumnblock ska den första headingens toppmarginal tas bort och istället sättas på kolumnblocket */
.wp-block-heading + .wp-block-columns .wp-block-column .wp-block-heading:first-of-type {margin-top: 0;}
.wp-block-heading + .wp-block-columns:has( .wp-block-column>.wp-block-heading:first-child ){margin-top: 1.2em;}


.wp-block-column.has-background p.has-background {margin-bottom: 0;}
.wp-block-column.has-background p.has-background:last-of-type {margin-bottom: 7px;}

/* Contact form 7 anpassning */
.wpcf7 form .wpcf7-not-valid-tip {margin-bottom: 30px;}
.wpcf7 form .wpcf7-response-output {margin: 0px;}

/* Recaptcha */
.grecaptcha-badge { visibility: hidden; }

/* standardklasser */
.clear {clear: both; border: 0px solid green;}
.dotted {background-image: linear-gradient(to right, var(--farg-ljusgra) 25%, rgba(255,255,255,0) 0%); background-position: top; background-size: 7px 2px; background-repeat: repeat-x;}
.hallihop {display: inline-block;} /*sätts på <span> för att undvika radbrytning */
.altfont { font-family: var(--text-familj-alt); }
.gray_tone {color: white; background-image: linear-gradient(#3e3e3e, #000000);}
.nopadding {padding: 0;}
.hide {display: none!important;}
.filtyp.bla_bakgrund {background: #2c5bb8;}
.filtyp.rod_bakgrund {background: #a42416;}
.filtyp {font-size: 11px; font-weight: bold;  padding: 2px 4px; margin-right: 5px; background: black; color: white; border-radius: 4px;}
.sticky_symbol {color: var(--farg-lila); padding-right: 5px;}
.gomd {display:none;}
.ingenmarginal, .nomargin, .ingenmarginal figure {margin: 0!important; column-gap: 0!important;}
.no_bottom_margin {margin-bottom: 0;}

.stangknapp{position: absolute; right: 15px; top: 0px; font-size: 30px; color: var(--farg-turkos);}
.stangknapp:hover{ color: white;}

/* alternativa länkpilar
.lankpil {margin-right: 5px; width: 22px;} - png-bild
.lank_med_pil::before {content: "\2192\00A0";} - html-pil
*/

/* Font awesome icons */
.fa-arrow-right-long, .fa-arrow-up-right-from-square {margin-right: 5px;}

/* SCROLLBAR width */
::-webkit-scrollbar { width: 10px;}

/* SCROLLBAR Track */
::-webkit-scrollbar-track { background: black;}

/* SCROLLBAR Handle */
::-webkit-scrollbar-thumb { background: #505050; }

/* SCROLLBAR Handle on hover */
::-webkit-scrollbar-thumb:hover {background: #6c6c6c;}


/* iframe embeds */
.wp-block-embed__wrapper {padding:56.25% 0 0 0;position:relative;}
.wp-block-embed__wrapper iframe {border: 0px solid pink;position:absolute;top:0;left:0;width:100%;height:100%;}





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






/* //////////////////////////////////////// MENY /////////////////////////////////////// */

/*______________ MENYKNAPP ______________ */
#menyknapp {display: inline-block; border: 0px solid red;}

#text_meny {display: inline-block;}
.change #text_meny {display: none;}
#text_stang {display: none;}
.change #text_stang {display: inline-block; color: white;}

.bar1, .bar2, .bar3 {width: 24px; height: 2px; background-color: black; margin: 3px 0; transition: 0.4s;}
#menyknapp_wrapper:hover .bar1, #menyknapp_wrapper:hover .bar2, #menyknapp_wrapper:hover .bar3 {background-color: var(--farg-lila);}
.change .bar1 { -webkit-transform: rotate(-45deg) translate(-6px, 6px); transform: rotate(-45deg) translate(-3px, 3px); background-color: white;}
.change .bar2 {opacity: 0;}
.change .bar3 {-webkit-transform: rotate(45deg) translate(-8px, -8px); transform: rotate(45deg) translate(-4px, -4px); background-color: white;}
#menyknapp_wrapper.change:hover .bar1, #menyknapp_wrapper.change:hover .bar2, #menyknapp_wrapper.change:hover .bar3 {background-color: var(--farg-turkos);}
#menyknapp_wrapper.change:hover #text_stang {color: var(--farg-turkos);}
/*_______________________________________ */

/*______________ MENYLAGER ______________ */
#menylager {color: white; border: 0px solid red; transition: left .4s; width: 100%; height: 100%; overflow-y: scroll; overflow-x: hidden; background-image: linear-gradient(#272727, #000000); z-index: 90; position: fixed; top: 0px; left: 100%;}
#menylager.change {display: block; left: 0%;}
.sprakval_sok_mobil_wrapper {margin: -13px 0 50px 0; /*border-style: solid; border-color: white; border-width: 1px 0;*/}
@media all and (min-width: 500px){
    .sprakval_sok_mobil_wrapper {display: none;}
}
.sprakval_sok_mobil_wrapper div {display: inline-block;vertical-align: middle;}
#sok_mobil {font-size: 15px; letter-spacing: 3px; text-transform: uppercase; color: white; box-sizing: border-box;}
#sok_mobil img {width: 18px; margin-left: 5px;}
#sok_mobil * {vertical-align: middle;}
#sok_mobil:hover {cursor: pointer;}
.sprakval_sok_mobil_wrapper .sprakvaljare {margin-left: 15px;}
/*_______________________________________ */

/* ta bort bodyns scroll när menyn togglas */
body.noscrolling::-webkit-scrollbar {display: none;}

/* width */
#menylager::-webkit-scrollbar {width: 7px;}

/* Track */
#menylager::-webkit-scrollbar-track {border-radius: 10px; background: transparent;}
 
/* Handle */
#menylager::-webkit-scrollbar-thumb {background: var(--farg-turkos); border-radius: 10px;}

/* Handle on hover */
#menylager::-webkit-scrollbar-thumb:hover {background: white; }



/*______________ MENYLÄNKAR _____________ */
.menywrapper {width: 90%; max-width: 1600px; margin: 0 auto; border: 0px dashed white; margin-top: 10%; }
.extrawrapper {overflow: hidden; padding: 0 0 40px 10px;}
@media all and (min-width: 768px){
    .menywrapper {margin-top: 6%;}
}
#menylager a {color: var(--farg-turkos); text-decoration: none;}
#menylager a:hover {color: white; text-decoration: underline; text-decoration-color: var(--farg-turkos);}
#menylager .current-menu-item>a {color: white; text-decoration: none; cursor: auto;}
#menylager .current-menu-item li a:hover {text-decoration: underline; cursor: pointer;}

#huvudmeny4 {margin-top: -20px; border: 0px dashed red; box-sizing: border-box; column-width: 300px;}
#huvudmeny4 ul {list-style-type: none; box-sizing: border-box; position: relative; padding-left: 0;}
#huvudmeny4 li { line-height: 1.2em;}                    
                    
/* GRÖN hela menyn: */
#huvudmeny4>ul {border: 0px solid green; width: 100%;}

/* GUL  huvudsidornas länkar: */
#huvudmeny4>ul>li {border-top: 1px solid white; width: 100%; margin: 20px 0 0px 0; padding: 15px 0 0px 0; vertical-align: top; font-weight: 600; font-size: 20px; box-sizing: border-box; break-inside: avoid-column;}
#huvudmeny4>ul>li:first-of-type {margin-top: 0;}                    
@media all and (min-width: 540px){
    #huvudmeny4>ul>li {margin: 25px 2% 0px 2%; padding-top: 20px;}
}
@media all and (min-width: 1024px){
    #huvudmeny4>ul>li {margin: 35px 0 0px 0; padding-top: 30px; padding-right: 10px; font-size: 24px;}
}

/* BLÅ  varje undermeny: */
#huvudmeny4 ul ul {border: 0px solid blue; margin-top: 7px;}

/* ROSA undersidornas länkar */
#huvudmeny4 li li {border: 0px solid pink; font-weight: 300; font-size: 14px; margin-bottom: 10px;}
@media all and (min-width: 1024px){
    #huvudmeny4 li li {font-size: 16px;}
}

/* Tredje länknivån */
#huvudmeny4 ul ul ul {padding-left: 20px; margin-top: 5px;}
#huvudmeny4 ul ul ul li {font-size: 12px; margin-bottom: 5px;}
@media all and (min-width: 1024px){ #huvudmeny4 ul ul ul li {font-size: 13px;} }

/* Fjärde länknivån */
#huvudmeny4 ul ul ul ul {padding-left: 20px;}
#huvudmeny4 ul ul ul ul li {font-size: 10px;}


/*_______________________________________ */

/*_______________ MENYFOT ________________*/
.menyfot {border-top: 0px solid white; width: 100%; padding-top: 40px; margin-top: 30px; font-size: 14px; line-height: 22px;}
.fotdel1-1, .fotdel1-2 {float: none; width: 100%;}
.fotdel1, .fotdel2, .fotdel3 {margin-bottom: 30px;}
.fotdel3 img {width: 40px; margin: 0 5px;}
.fotdel3 img:hover {-webkit-filter: drop-shadow(0px 0px 3px white); filter: drop-shadow(0px 0px 3px white);}
.menyfot ul {list-style-type: none;}
.menyfot ul ul {display: none;}
.menyfot li {margin-bottom: 5px;}
/*.menyfot ul a::before{content: '\000BB\00a0';}*/
.knapp-gava {display: inline-block; padding: 8px 15px; background: #db617d; color: white; font-weight: bold; border-radius: 50px; margin: 10px 0;}
@media all and (min-width: 768px){ .fotdel1, .fotdel2, .fotdel3 {float: left; width: 33%;} }
@media all and (min-width: 1024px){ .fotdel1{width: 51%;} .fotdel2{width: 22%;} .fotdel3{width: 27%;} .fotdel1-1, .fotdel1-2 {float: left; width: 45%; max-width: 240px;} }
@media all and (min-width: 1280px){ .fotdel3 img {width: 50px;} }
/*_______________________________________ */







/*************************************************************/
/* toppmeny */
/*************************************************************/

.topmeny-con {border: 0px solid orange; overflow: visible; display: none; width: calc(100% - 310px); box-sizing: border-box;}
.topmeny-con a {display: block; text-decoration: none; color: var(--farg-morkgra);}
.topmeny-con a:hover {color: var(--farg-lila); cursor: pointer; text-decoration: underline;}
.topmeny-con .current-menu-item a {cursor: text; text-decoration: underline; color: var(--farg-lila);}
.topmeny-con li li.current-menu-item a {color: var(--farg-ljuslila-30);}

.topmeny-con ul {position: relative; list-style-type: none; padding-left: 20px; margin-bottom: 0;}
/* första nivåns list-items: */
.topmeny-con li {border: 0px solid red; margin: 0 15px 0 0; display: inline-block; position: relative; padding: 2px 0 2px 2px; text-align: left;}
.topmeny-con li.menu-item-has-children {padding-left: 12px;}
/* andra nivåns list-items: */
.topmeny-con li li {border: 0px solid red; font-family: var(--text-font-normal); font-size: 15px;letter-spacing: 0; display: block; padding-left: 0; text-transform: none; padding: 8px 15px; margin: 0; min-width: 200px;}
.topmeny-con li li:first-of-type {padding-top: 13px;}
.topmeny-con li li:last-of-type {padding-bottom: 13px;}
.topmeny-con li li a {color: white;}
.topmeny-con li li a:hover {color: var(--farg-ljuslila-30);}
/* länkarna: */
.topmeny-con  li.menu-item-has-children a.min::before {content: '\25B8'; position: absolute; left: 0px;}
.topmeny-con  li.menu-item-has-children:hover a.min::before {opacity: 1;}
.topmeny-con  li.menu-item-has-children a.exp::before {content: '\25BE'; position: absolute; left: 0px;}
.topmeny-con li.menu-item-has-children li a.min::before, .topmeny-con li.menu-item-has-children li a.exp::before,  {content: '';}/* andra nivån ska inte ha en bullet */
/* andra nivån i menyn: */
.topmeny-con ul ul {max-height: 0px; overflow: hidden; list-style-image: none; list-style-type: none; border: 0px solid green; list-style-position: outside; position: absolute; z-index: 10; margin-top: 5px; padding: 0px 0 0px 0; background-color: var(--farg-morkgra);}
.topmeny-con ul ul {max-height: 0px; overflow: hidden; list-style-image: none; list-style-type: none; border: 0px solid green; list-style-position: outside; position: absolute; z-index: 10; margin-top: 5px; padding: 0px 0 0px 0; background-color: var(--farg-morkgra);}

/* tredje nivån i menyn ska döljas: */
.topmeny-con ul ul li.menu-item-has-children a.min::before {content: '';}
.topmeny-con ul ul ul {display: none;}

/* aktuell sida markeras i menyn */
ul ul .current_page_item a {text-decoration: underline; cursor: text; color: var(--farg-ljuslila-60);}
/* det här vet jag inte varför jag lagt in, tas bort om det rullar bra
ul ul .current_page_item a:hover {text-decoration: underline; cursor: text; color: var(--farg-ljuslila-60);}
*/
@media all and (min-width: 414px){
    .topmeny-con li {}
    .topmeny-con ul {}
}

@media all and (min-width: 1200px){
    .topmeny-con {display: inline-block;}
}

/*animerad meny*/
.topmeny-con ul a.exp+ul {transition: max-height 1s;}
.topmeny-con ul a.min+ul {transition: max-height .2s;}

.xxmin+ul a {display: none;}



/* ///////////////////////////////////// SLUT MENY ///////////////////////////////////// */

/* ///////////////////////////////////// GLOBALT ///////////////////////////////////// */
main, section, footer {width: 100%; padding: 0; }

/* ---------- GENERELLT ----------- */
.linje {height: 1px; background-color: var(--farg-morkgra); border: 0;}
.bevara_whitespace {white-space: pre-line;}


/* ------------------------------- */

/* ---------- WRAPPER & SEKTIONER ----------- */
.sec1 {padding: 65px 0; min-height: 400px;}
.sec1.kalendarium {padding: 65px 0 0 0; min-height: 0;}
.sec2 {padding: 95px 0;}

.wrapper {width: calc(100% - 40px); margin: 0 auto; /*overflow: hidden;*/  border: 0px solid blue;}
.wrapper2 {width: calc(100% - 40px); margin: 0 auto; /*overflow: hidden;*/ border: 0px solid green; max-width: 2300px;}
.section_normal {padding: 40px 0; position: relative;}
.section_normal.kalendarium {padding-top: 20px;}

@media all and (min-width: 450px){
    .wrapper {width: calc(100% - 60px);}
    .wrapper2 {width: calc(100% - 60px);}
    .section_normal {padding: 60px 0;}
}
@media all and (min-width: 768px){
    .wrapper2 {width: calc(100% - 120px);}
    .section_normal {padding: 60px 0;}
    .sec1 {min-height: 500px;}
}
@media all and (min-width: 1024px){
    .wrapper2 {width: calc(100% - 160px);}
    .section_normal {padding: 80px 0;}
    .sec1 {min-height: 500px;}
}
.section_normal.turkos, .sec2.turkos {background-color: var(--farg-turkos-30);}
.section_normal.rosa, .sec2.rosa {background-color: var(--farg-rosa-30);}
.section_normal.gul, .sec2.gul {background-color: var(--farg-gul-30);}
.section_normal.morkgra {background-color: var(--farg-morkgra); color: white;}
/* ------------------------------- */


/* ___ SIDHUVUD ___ */


/* ___ COOKIEMEDDELANDE ___ */
#cookiemeddelande {position: fixed; top: 0; width: 100%; min-height: 100px; background: var(--farg-lila-kontrast); z-index: 200; box-shadow: 0px 50px 350px 350px rgba(20,20,20,.9); padding: 3em; display: flex; flex-direction: column; box-sizing: border-box;}
#cookiemeddelande h2 {margin: 0 0 5px 0; color: white; font-size: var(--text-storlek-h3);}
#cookiemeddelande p {margin: 0; color: white;}
#cookiemeddelande p a {color: var(--farg-ljuslila-60);}
#cookiemeddelande p a:hover {text-decoration-color: var(--farg-turkos);color: var(--farg-ljuslila-30);}
.cookie_kol1 {flex: 1 0; padding-bottom: 1em;}
.cookie_kol2 {flex: 0 0 auto; align-self: auto; padding: 0;}
.cookie_kol2 a {margin: 5px;}
@media all and (min-width: 980px) {
    #cookiemeddelande {flex-direction: row;}
    .cookie_kol1 {padding-right: 2em; padding-bottom: 0;}
    .cookie_kol2 {flex: 0 0 400px; align-self: center;}
}



/* //////////////////////////////////////// TOPLIST /////////////////////////////////////// */
.header_wrapper {border: 0px solid red; margin-top: 15px; overflow: visible; padding-bottom: 15px;}
.logo_wrapper{border: 0px solid black; display: inline-block; width: 125px; vertical-align: middle; box-sizing: border-box; }
.header_logo {width: 100%; display: block; border: 0px solid orange;}

.resten_wrapper {font-size: 15px; letter-spacing: 3px; text-transform: uppercase; color: var(--farg-morkgra); display: inline-block; width: calc(100% - 125px); vertical-align: middle; text-align: right; box-sizing: border-box;}
.resten_wrapper * {vertical-align: middle;}
#xxcookiemeddelande {position: fixed; top: 0; width: 100%; height: 100px; background: gray; z-index: 200; box-shadow: 0px 0px 350px 350px rgba(0,0,0,.8);}


/* sökruta i header */
#inner_wrapper {border: 0px solid blue; display: inline-block; box-sizing: border-box; padding-right: 120px;}
#sok_wrapper {/*width: 80px;kolla om detta får nån oönskad effekt innan jag raderar*/ border: 0px solid green; display: none; vertical-align: middle; cursor: pointer;}
#sok_wrapper img {width: 28px;}
#form_wrapper {margin-bottom: -1px; background: black; color: white; text-align: center; position: absolute; width: 100%; height: 0px; transition: height .3s; overflow: hidden; z-index: 10;}
.sok_con {display: flex; height: 130px;}
.sok_con input {border: 0; margin: 0; text-align: center; font-size: var(--text-storlek-h2); color: white;}
.sok_con button {border: 0; margin: 0;}
.sok_textinput_con {flex: 1; display: flex; align-items: center; justify-content: center;}
.sok_knapp_con {flex: 0; display: flex; align-items: center; justify-content: center;}
.sok_con input::-webkit-search-cancel-button{ -webkit-appearance: none; height: .7em; width: .7em; background-size: contain; opacity: 0; pointer-events: none;}
.sok_con input[type="search"]:focus::-webkit-search-cancel-button { opacity: .7; pointer-events: all;}
#sok_stang {position: absolute; top: 10px; right: 10px; opacity: .7;}
#sok_stang:hover {opacity: 1;}
#form_wrapper .bar1{ -webkit-transform: rotate(-45deg) translate(-6px, 6px); transform: rotate(-45deg) translate(-3px, 3px); background-color: white;}
#form_wrapper .bar2{opacity: 0;}                
#form_wrapper .bar3{ -webkit-transform: rotate(45deg) translate(-8px, -8px); transform: rotate(45deg) translate(-4px, -4px); background-color: white; }




/*
#flagga {display: none; margin-left: 30px;}
#flagga img {width: 38px;}
#flagga:hover img {opacity: .8;}
*/
.sprakvaljare {display: none; margin-left: 30px; width: 34px; max-height: 20px; overflow: visible;}
.sprakvaljare img {width: 100%; display: block;}
.sprakvaljare:hover img, .sprakvaljare a:focus img {opacity: .8;}
.sprakvaljare ul {list-style-type: none; position: relative; margin: 0; padding: 0;}
.sprakvaljare li {margin: 0; padding: 0; display: none;}
.sprakvaljare>ul>li:first-of-type {display: block;}


#menyknapp_wrapper {border: 0px solid white; display: inline-block; position: fixed; z-index: 100; cursor: pointer; top: 20px; right: 25px; padding: 0px 5px 2px 5px; background-color: rgba(255,255,255,.8);}
#menyknapp_wrapper:hover span, #sok_wrapper:hover span {text-decoration: underline; text-underline-offset: 3px; color: var(--farg-lila);}
#menyknapp_wrapper.change {background: none; right: 25px;}
@media all and (min-width: 500px){
    .sprakvaljare/*#flagga*/, #sok_wrapper {display: inline-block;}
    #menyknapp_wrapper {top: auto;}
    #inner_wrapper {width: 300px;}
}

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



/* ________________ */

/* ___ FORMULÄR ___ */
/*
.kontaktformular {position: relative;}
.kontaktformular input, .kontaktformular textarea {
    background: transparent;
    display: block;
    padding: 5px 0 5px 0;
    margin-bottom: 20px;
    border-width: 0;
    background-image: linear-gradient(to right, black 35%, rgba(255,255,255,0) 0%); background-position: bottom; background-size: 8px 1px; background-repeat: repeat-x;
    }
.kontaktformular input[type="text"], .kontaktformular textarea {min-width: 240px; max-width: 550px;}

.kontaktformular textarea {width: 100%; border: 0px solid black; box-sizing: border-box; overflow: hidden; overflow-wrap: break-word;}
.kontaktformular input[type="submit"] {border-radius: 100px; border: 0px solid var(--farg-lila); background: var(--farg-lila); color: white; font-size: 18px;  display: block; padding: 8px 20px; margin-bottom: 0; margin-top: 30px;}
.kontaktformular input[type="submit"]:hover {background: var(--farg-rosa); cursor: pointer;}
*/
/* ________________ */
/* ____ SIDFOT ____ */

.sidfot {border: 0px solid black; color: white; background-image: text-align: center; background: rgb(52,52,52); background: radial-gradient(circle, rgba(52,52,52,1) 0%, rgba(14,14,14,1) 60%); padding-top: 95px;}
.sidfot_content { display: flex; flex-direction: column; margin: 0 auto 95px auto; max-width: 1200px; border: 0px solid red; font-size: 14px;}
.sidfot_content>div {flex: 1; border: 0px solid yellow; margin: 0 0 70px 0;}
.sidfot_content>div:last-of-type {margin: 0;}
.sidfot_content>div p:last-of-type {margin: 2px; overflow: visible;}
.sidfot_content, .sidfot_content * {box-sizing: border-box;}
.sidfot_content h2 {margin: 0 0 17px 0; padding: 0 0 8px 0; border-bottom: 1px solid white; font-weight: normal; font-size: 16px; text-transform: uppercase; letter-spacing: 3px;}
.sidfot_content .some_ikon {margin-right: 15px; margin-bottom: 15px;}
.sidfot_content .some_ikon img {width: 40px;}
.sidfot_content .some_ikon:hover {opacity: 1; -webkit-filter: drop-shadow(0px 0px 3px white); filter: drop-shadow(0px 0px 3px white);}
.sidfot_adress {text-align: center; font-size: var(--text-storlek-mini); letter-spacing: 2px; text-transform: uppercase; margin: 0 auto 15px auto;}
.sidfot_adress span {display: none;}
@media all and (min-width: 900px){
    .sidfot {padding-top: 160px;}
    .sidfot_content {flex-direction: row; margin: 0 auto 160px auto;}
    .sidfot_content>div {margin: 0 3% 0 0;}
    .sidfot_adress br {display: none;}
    .sidfot_adress span {display: inline;}
}
@media all and (min-width: 1350px){
    .sidfot_content>div {margin: 0 6% 0 0;}
}
.footer_menu ul {list-style: none; margin: 0; padding: 0;}
.footer_menu ul ul {padding-left: 20px; margin-bottom: 10px; margin-top: 5px;}
.footer_menu li {margin-bottom: 5px;}
.sidfot a {text-decoration: none; color: var(--farg-turkos);}
.sidfot a:hover {text-decoration: underline; color: white; text-decoration-thickness: 2px; text-decoration-color: var(--farg-turkos);}
.profil_linje {width: 100%; height: 77px; background-color: var(--farg-ljuslila); border-bottom: 20px solid var(--farg-lila); box-sizing: border-box;}

/* ________________ */

/* -------------------- FORMULÄR ---------------------- */
.wpcf7-form input[type=text], .wpcf7-form input[type=email], .wpcf7-form input[type=tel], .wpcf7-form select {width: 400px; max-width: 100%; background: var(--farg-rosa-30); line-height: 2.4; border-width: 0 0 2px 0; border-color: var(--farg-lila); padding: 0px 10px;}                    
.wpcf7-form textarea {width: 400px; max-width: 100%; background: var(--farg-rosa-30); line-height: 1.5; border-width: 0 0 2px 0; border-color: var(--farg-lila); padding: 10px;}                    
.wpcf7-checkbox {display: inline-block; margin-top: 10px;}
.wpcf7-form input[type=checkbox]{margin-right: 8px;}
.wpcf7-form select {height: 42px; line-height: 1.2; font-family: 'PT Sans'; font-size: var(--text-storlek-normal); appearance: none; background-repeat: no-repeat; background-position: right 0.5rem center; background-size: 18px; border-radius: 2px; padding: 0.25rem 2rem 0.25rem 0.75rem;}

.wpcf7-form inout:focus {border: 1px solid blue;}

.wpcf7-list-item.first {margin-left: 0;}

.wpcf7 form.sent .wpcf7-response-output {
    background: #006d1a; color: white; padding: 1.5em 1em; font-size: var(--text-storlek-h3); border: 0;
} 


/*testar att göra allmänt form css, får se om det sabbar specialformulären på startsidan*/

input[type=text], input[type=email], input[type=tel], select {width: 400px; max-width: 100%; background: var(--farg-rosa-30); line-height: 2.4; border-width: 0 0 2px 0; border-color: var(--farg-lila); padding: 0px 10px;}                    
textarea {width: 400px; max-width: 100%; background: var(--farg-rosa-30); line-height: 1.5; border-width: 0 0 2px 0; border-color: var(--farg-lila); padding: 10px;}                    
input[type=checkbox]{margin-right: 8px;display: inline-block; margin-top: 5px; margin-bottom: 5px;}
select {height: 42px; line-height: 1.2; font-family: 'PT Sans'; font-size: var(--text-storlek-normal); appearance: none; background-repeat: no-repeat; background-position: right 0.5rem center; background-size: 18px; border-radius: 2px; padding: 0.25rem 2rem 0.25rem 0.75rem;}






/* ---------------------------------------------------- */

/* ////////////////////////////////// SLUT GLOBALT /////////////////////////////////// */

/* ///////////////////////////////////// STARTSIDAN ///////////////////////////////////// */

/* -------- INLEDANDE TEXT + PUFF FRONTPAGE ----------- */
.mySlides{opacity: 0;}
.flexbox_front {display: flex; margin: 0 auto; flex-direction: column; justify-content: center;}
.flexbox_front * {box-sizing: border-box;}
.inledande_text {flex: auto; background: var(--farg-ljuslila-30); padding: 30px 30px;}
.inledande_text p:last-of-type {margin: 0;}
.puffar_bildspel {flex: auto; background: var(--farg-lila); border: 0px solid red; overflow: hidden; display: flex; position: relative; height: 230px; flex-direction: column;}
.puffcontainer {display: flex; border: 0px solid black; flex: 1; position: relative;}
.puff_front {flex: 1; border: 0px solid yellow; display: flex; flex-direction: column; position: absolute; width: 100%; height: 100%;background: var(--farg-lila); transition: opacity .5s; text-decoration: none; color: white;}

.flexbox_front .puff_bild {flex: 1; position: relative;}
.flexbox_front .puff_bild img {position: absolute;}
.flexbox_front .puff_text {padding: 15px 20px; border: 0px solid orange;/* style="flex: 0;"*/}
.flexbox_front .puff_text img {width: 100px; position: absolute; left: 10px; bottom: auto; top: -84px;}
.xxxxxxxxxxflexbox_front:hover .puff_text img {border-radius: 500px; border: 2px solid var(--farg-turkos);}
.flexbox_front .puff_text p {margin: 0;}

@media all and (min-width: 414px){
    .flexbox_front .puff_text img {bottom: 20px; top: auto;}
    .flexbox_front .puff_text img + p {padding-left: 95px;}
}
@media all and (min-width: 600px){
    .flexbox_front {flex-direction: row;}
    .inledande_text {width: 70%; min-height: 280px; padding: 3% 5%;}
    .puffar_bildspel {height: auto; width: 30%; max-width: 500px;}
    .flexbox_front .puff_text img {bottom: auto; top: -84px;}
    .flexbox_front .puff_text img + p {padding-left: 0px;}
}
@media all and (min-width: 1024px){
    .inledande_text {min-height: 230px;}
    .flexbox_front .puff_text img {bottom: auto; top: -84px;}

}
@media all and (min-width: 1280px){
    .flexbox_front .puff_text {padding: 15px 4%;}
    .flexbox_front .puff_text img {width: 120px; top: auto; bottom: 20px;}
    .flexbox_front .puff_text img + p {padding-left: 120px;}
}
@media all and (min-width: 1500px){
    .inledande_text {padding: 50px 60px;}
    .flexbox_front .puff_text img {width: 140px;}
    .flexbox_front .puff_text img + p {padding-left: 140px;}
}
@media all and (min-width: 1700px){
    .inledande_text {padding: 60px 80px;}
}
/* ---------------------------------------------------- */

/* ------- De två stora rutorna i sektion 2 ----------- */
.front_block_flexbox {display: flex; flex-direction: column; height: 700px; border-top: 10px solid white;}
.front_block_flexbox * {box-sizing: border-box;}
.front_block {border: 0px solid red; flex: 1;  min-height: 10px; position: relative;}
.front_block_link {display: block; border-bottom: 7px solid var(--farg-ljuslila); background-color: transparent; color: white; text-decoration: none; position: absolute; padding: 23px; margin: auto 20px 20px 20px; bottom: 0; font-size: var(--text-storlek-mindre);}
.front_block_link h2 {margin-top: 0;}
.front_block_link p {margin: 0;}
.front_block_link:hover {color: white;}
.front_block_link::before {content: ""; display: block; height: 100%; position: absolute; top: 0; left: 0; width: 100%; background-color: var(--farg-lila-kontrast); mix-blend-mode: multiply;}            
.front_block_link:hover::before {opacity: 1; background-color: var(--farg-lila);}            
.shield {position:relative;}
a.front_block_link:hover {text-decoration: none;}
a.front_block_link:hover h2 {text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: white;}
@media all and (min-width: 400px){
    .front_block_flexbox {height: 700px;}
    .front_block_link {position: absolute; width: 310px; bottom: 20px; left: 20px; margin: 0;}
}
@media all and (min-width: 450px){
    .front_block_link {position: absolute; width: 310px; bottom: 30px; left: 30px; margin: 0;}
}
@media all and (min-width: 768px){
    .front_block_flexbox {height: 515px; flex-direction: row;}
    .front_block_link {bottom: 30px; left: 30px;}
}
/* ---------------------------------------------------- */

/* -------------------- SEC 4 FORSKARINLÄGG --------------------- */
/* sektionens stora flexbox*/
.front_sec_4_flexbox {display: flex; margin: 0 auto; flex-direction: column; justify-content: center;}
.front_sec_4_flexbox * {box-sizing: border-box;}
.section_normal h2:first-child {margin-top: 0;}
.front_sec_4_flex_item_1 {flex: 1; border: 0px solid pink;}
.front_sec_4_flex_item_2 {flex: 1; border-style: solid; border-color: black; border-width: 1px 0 0 0; margin: 40px 0 0 0; padding: 60px 0 0 0;}

@media all and (min-width: 1024px){
.front_sec_4_flexbox {flex-direction: row;}
.front_sec_4_flex_item_1 {flex: 6;}
.front_sec_4_flex_item_2 {flex: 4;  border-width: 0 0 0 1px; margin: 0px 0 0 40px; padding: 0px 0 0 40px; max-width: 660px;}
}
/* ----------------------- */
.forskarinlagg {border-style: solid; border-width: 0px 0px 1px 0px; border-color: black; flex: 1; box-sizing: border-box; overflow: visible; margin: 0 auto 15px auto; padding: 0 0 15px 0;}
.forskarinlagg:last-of-type {border: 0; padding: 0;}
.flexbox_forskare {display: flex; margin: 0; flex-direction: column-reverse; justify-content: center; /*overflow: hidden;*/ max-width: 640px;}
.flexbox_forskare * {box-sizing: border-box;}
.forskarinlagg h2 {margin-top: 5px; margin-bottom: 15px; font-size: var(--text-storlek-h3);}
.forskarinlagg p {font-size: var(--text-storlek-mindre);}
.forskare_text_del {flex: 1 1 auto; border: 0px solid blue; padding: 10px 0px 0px 0px; position: relative;}
.forskare_bild_del {flex: 0 1 auto; border: 0px solid brown; height: 180px;}
.forskare_bild_del img { height: 180px; width: 100%; object-fit: cover; border-radius: .1px;/*för att häva object-fit bugg i Chrome*/ margin: 0; max-height: 1180px; max-width: 1180px; display: block;}
.forskarnamn {font-size: var(--text-storlek-mini); letter-spacing: 3px; text-transform: uppercase; margin-bottom: 5px; padding-bottom: 5px; border-bottom: 1px solid black; display: inline-block;}

@media all and (min-width: 450px){
    .flexbox_forskare {flex-direction: row;}
    .forskare_text_del {padding: 10px 10px 0px 0px;}
    .forskare_bild_del {height: auto;}
    .forskare_bild_del img {height: 120px; width: 120px;}
}
@media all and (min-width: 1200px){
    .forskare_bild_del img {height: 120px; width: 120px;}
}
@media all and (min-width: 1400px){
    .forskare_bild_del img {height: 160px; width: 160px;}
}
/* endast med på startsidan i nuläget */
.centrerad_lank {position: relative; border: 0px solid black; text-align: center; padding-top: 0px; font-size: var(--text-storlek-mindre); display: block;}
@media all and (min-width: 450px){
}
@media all and (min-width: 768px){
    .centrerad_lank {margin-top: 20px; margin-bottom: -40px; overflow: visible; height: 20px;}
}
@media all and (min-width: 1024px){
    .centrerad_lank {margin-top: 25px; margin-bottom: -50px; overflow: visible; height: 25px;}
}
/* ---------------------------------------------------- */


/* ------------------ SEC 5 KALENDER ------------------ */

.front_sec_5_flexbox {display: flex; border: 0px solid black; flex-direction: column; gap: 16px; margin-bottom: 35px;}
.front_sec_5_flex_item_1 {flex: 0; width: 95px; border: 0px solid orange; align-self: center;}
.front_sec_5_flex_item_2 {flex: 1; border: 0px solid red; justify-content: center; align-self: center;}
.front_sec_5_flex_item_2 p {margin: 0;}

@media all and (min-width: 400px){
    .front_sec_5_flexbox {flex-direction: row; gap: 20px;}
    .front_sec_5_flex_item_1 {width: 95px; align-self: flex-start;}
}
@media all and (min-width: 500px){
    .front_sec_5_flex_item_2 {margin-top: 35px;}
}
@media all and (min-width: 1024px){
    .front_sec_5_flexbox {flex-direction: row; gap: 26px;}
    .front_sec_5_flex_item_1 {width: 109px;}
    .front_sec_5_flex_item_2 {margin-top: 25px;}
}

.kalender_flexbox {justify-content: center; display: flex; border: 0px dashed pink; row-gap: 50px; column-gap: 20px; flex-wrap: wrap; box-sizing: border-box;}
.kalender_flexitem {max-width: 400px; flex: 0 0 calc((100% - 0 * 25px) / 1);  aspect-ratio: 340 / 545; overflow: hidden; text-decoration: none; color: initial; /*padding: 35px;*/ box-sizing: border-box; position: relative; border-style: solid; border-width: 0 0 9px 0; border-color: var(--farg-lila-kontrast);}
.kalender_flexitem:hover {border-color: var(--farg-ljuslila);}
    .kalender_flexitem:nth-of-type(2), .kalender_flexitem:nth-of-type(6), .kalender_flexitem:nth-of-type(10), .kalender_flexitem:nth-of-type(14), .kalender_flexitem:nth-of-type(18), .kalender_flexitem:nth-of-type(22) {border-color: var(--farg-rosa-kontrast);}
    .kalender_flexitem:nth-of-type(2):hover, .kalender_flexitem:nth-of-type(6):hover, .kalender_flexitem:nth-of-type(10):hover, .kalender_flexitem:nth-of-type(14):hover, .kalender_flexitem:nth-of-type(18):hover, .kalender_flexitem:nth-of-type(22):hover {border-color: var(--farg-rosa);}
    .kalender_flexitem:nth-of-type(3), .kalender_flexitem:nth-of-type(7), .kalender_flexitem:nth-of-type(11), .kalender_flexitem:nth-of-type(15), .kalender_flexitem:nth-of-type(19), .kalender_flexitem:nth-of-type(23) {border-color: var(--farg-gul-kontrast);}
    .kalender_flexitem:nth-of-type(3):hover, .kalender_flexitem:nth-of-type(7):hover, .kalender_flexitem:nth-of-type(11):hover, .kalender_flexitem:nth-of-type(15):hover, .kalender_flexitem:nth-of-type(19):hover, .kalender_flexitem:nth-of-type(23):hover {border-color: var(--farg-gul);}
    .kalender_flexitem:nth-of-type(4), .kalender_flexitem:nth-of-type(8), .kalender_flexitem:nth-of-type(12), .kalender_flexitem:nth-of-type(16), .kalender_flexitem:nth-of-type(20), .kalender_flexitem:nth-of-type(24) {border-color: var(--farg-turkos-kontrast);}
    .kalender_flexitem:nth-of-type(4):hover, .kalender_flexitem:nth-of-type(8):hover, .kalender_flexitem:nth-of-type(12):hover, .kalender_flexitem:nth-of-type(16):hover, .kalender_flexitem:nth-of-type(20):hover, .kalender_flexitem:nth-of-type(24):hover {border-color: var(--farg-turkos);}


.kalender_flexitem.sista_boxen {flex: 1; aspect-ratio: auto; padding: 30px; text-align: center; max-width: none; background-color: var(--farg-lila-kontrast); border-color: var(--farg-ljuslila);}
.kalender_flexitem.sista_boxen:hover {background-color: var(--farg-lila); border-color: var(--farg-ljuslila-60);}

/*
.kalendarium .kalender_flexitem:last-of-type, .ingen_kalenderlank .kalender_flexitem:last-of-type {max-width: 400px; flex: 0 0 calc((100% - 0 * 25px) / 1);  aspect-ratio: 340 / 545; color: initial; padding: 0px; text-align: left;}
*/



.kalender_flexitem:hover {text-decoration: none;}
.kalender_bildcon {background: var(--farg-ljuslila-30); height: 42%; overflow: hidden; border: 0px solid black; position: relative;}
    .kalender_flexitem:nth-of-type(2) .kalender_bildcon, .kalender_flexitem:nth-of-type(6) .kalender_bildcon, .kalender_flexitem:nth-of-type(10) .kalender_bildcon {background: var(--farg-rosa-30);}
    .kalender_flexitem:nth-of-type(3) .kalender_bildcon, .kalender_flexitem:nth-of-type(7) .kalender_bildcon, .kalender_flexitem:nth-of-type(11) .kalender_bildcon {background: var(--farg-gul-30);}
    .kalender_flexitem:nth-of-type(4) .kalender_bildcon, .kalender_flexitem:nth-of-type(8) .kalender_bildcon, .kalender_flexitem:nth-of-type(12) .kalender_bildcon {background: var(--farg-turkos-30);}
.kalender_bildcon img {width: 100%; height: 100%; object-fit: cover; border-radius: .1px;/*för att häva object-fit bugg i Chrome*/ position: absolute;}
.kalender_bildcon>* {position: absolute;}

.kalender_nedrecon {display: flex; flex-direction: column; height: 58%; border: 0px solid yellow; box-sizing: border-box; padding: 10%;}
    .kalender_flexitem .kalender_nedrecon {background-color: var(--farg-ljuslila-60);}
    .kalender_flexitem:nth-of-type(2) .kalender_nedrecon, .kalender_flexitem:nth-of-type(6) .kalender_nedrecon, .kalender_flexitem:nth-of-type(10) .kalender_nedrecon {background-color: var(--farg-rosa-60);}
    .kalender_flexitem:nth-of-type(3) .kalender_nedrecon, .kalender_flexitem:nth-of-type(7) .kalender_nedrecon, .kalender_flexitem:nth-of-type(11) .kalender_nedrecon {background-color: var(--farg-gul-60);}
    .kalender_flexitem:nth-of-type(4) .kalender_nedrecon, .kalender_flexitem:nth-of-type(8) .kalender_nedrecon, .kalender_flexitem:nth-of-type(12) .kalender_nedrecon {background-color: var(--farg-turkos-60);}



.kalender_textcon {border: 0px solid pink; flex: 1; font-size: var(--text-storlek-mindre); overflow: hidden; position: relative;}
.kalender_textcon h3 {margin: 0 0 5px 0;}
.blur-box {position: absolute; left: 0; bottom: -1px; width: 100%; height: 1px; box-shadow: 0px 0 15px 15px yellow;}
.kalender_flexitem .blur-box {box-shadow: 0px 0 15px 15px var(--farg-ljuslila-60);}
.kalender_flexitem:nth-of-type(2) .blur-box, .kalender_flexitem:nth-of-type(6) .blur-box, .kalender_flexitem:nth-of-type(10) .blur-box {box-shadow: 0px 0 15px 15px var(--farg-rosa-60);}
.kalender_flexitem:nth-of-type(3) .blur-box, .kalender_flexitem:nth-of-type(7) .blur-box, .kalender_flexitem:nth-of-type(11) .blur-box {box-shadow: 0px 0 15px 15px var(--farg-gul-60);}
.kalender_flexitem:nth-of-type(4) .blur-box, .kalender_flexitem:nth-of-type(8) .blur-box, .kalender_flexitem:nth-of-type(12) .blur-box {box-shadow: 0px 0 15px 15px var(--farg-turkos-60);}

.kalender_datumcon {border-top: 1px solid black; flex: 0; text-transform: uppercase; font-size: 14px; line-height: 1.6em; display: flex; margin-top: 10px; padding-top: 7px;}
.kalender_datumcon p {flex: 1; margin: 0 0 0 0; border: 0px solid blue;}
.kalender_datumcon div {flex: 0 1 25px; border: 0px solid red; position: relative;}
.kalender_datumcon span {position: absolute; bottom: 0; font-size: 25px;}

.hoverplatta {display: none; position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,.82); border: 0px solid red; z-index: 10; box-sizing: border-box; justify-content: center; align-items: center; text-align: center; color: white; padding: 20px}
.kalender_flexitem:hover .hoverplatta {display: flex;}
.hoverplatta h3 {font-size: 26px; margin-top: .2em;}
.hoverplatta p {font-size: 14px; text-transform: uppercase; line-height: 1.6em;}
.hoverplatta span {font-size: 50px;}
.se_alla_event {display: flex; justify-content: center; align-items: center; text-align: center; height: 100%; color: white;}
.se_alla_event h3 {margin-top: 0;}
.kalender_flexitem:hover .se_alla_event h3 {text-decoration: underline;}

.kalender_etikett {background: var(--farg-lila); color: white; text-transform: uppercase; font-size: 14px; font-weight: bold; padding: 2px 8px; position: absolute; top: 10px; left: 10px;}
.kalender_datumbubbla {background: var(--farg-lila); color: white; font-weight: bold; border-radius: 200px; width: 137px; height: 137px; text-align: center; position: absolute; right: 15px; top: 15px; display: flex; align-items: center; justify-content: center; font-size: 20px; overflow: hidden;}
.kalender_datumbubbla_con {border: 0px solid red; text-align: center; width: 115px; line-height: 1.1em; padding-top: 14px;}
.kalender_datumbubbla_con_datum {font-size: 58px;}
.kalender_datumbubbla_con_ar {width: 80px; border-top: 1px solid white; display: inline-block; font-weight: normal; letter-spacing: 2px; font-size: 16px; padding-top: 2px; margin-top: 8px;}
.kalender_datumbubbla_baratext {font-size: 28px; line-height: 1.1em;}

.kalender_ikon {width: 100%; height: 100%; box-sizing: border-box; padding: 20px;}
.kalender_ikon_con {height: 100%; position: relative; aspect-ratio: 1 / 1}




@media all and (min-width: 700px){/*här blir det 2 boxar per rad*/
    .kalender_flexbox {row-gap: 40px; column-gap: 20px;}
    .kalender_flexitem {flex: 0 0 calc((100% - 1 * 20px) / 2);}
}
@media all and (min-width: 1024px){/*här blir det 3 boxar per rad*/
    .kalender_nedrecon {padding: 5%;}
    .kalender_flexitem {flex: 0 0 calc((100% - 2 * 20px) / 3); max-width: none;}
}
@media all and (min-width: 1140px){/*här blir det 3 boxar per rad*/
    .kalender_nedrecon {padding: 10%;}
}
@media all and (min-width: 1400px){/*här blir det 4 boxar per rad*/
    .kalender_flexbox {row-gap: 50px; column-gap: 25px;}
    .kalender_flexitem {flex: 0 0 calc((100% - 3 * 25px) / 4);}
}
@media all and (min-width: 1920px){/*här blir det 5 boxar per rad*/
    .kalender_flexitem {flex: 0 0 calc((100% - 4 * 25px) / 5);}
}

/* ---------------------------------------------------- */
/* -------------------- SEC 7 SOK --------------------- */
.sok_flexbox {flex-direction: column-reverse; display: flex;}
.sok_flexitem_1 {flex: 1; padding-right: 20px; display: flex; flex-direction: column;}
.sok_flexitem_1 div {flex: 0;}
.sok_flexitem_1 div:first-of-type {flex: 1;}
.sok_flexitem_2 {flex-grow: 0; flex-shrink: 0; display: flex;}
.sok_textinput {width: 100%; border-width: 0 0 1px 0; border-style: dashed; border-color: black; background: transparent; padding: 6px 6px 6px 0px; margin-top: 20px;}
.sok_knapp {margin: 17px 17px 0px 0; line-height: 1.4em; border: 0; padding: 4px 45px; display: inline-block; background-color: var(--farg-lila); border-radius: 50px;font-weight: bold; font-size: var(--text-storlek-mindre); color: white;}
.sok_knapp:hover {background-color: var(--farg-ljuslila-60); color: var(--farg-lila-kontrast);}
@media all and (min-width: 600px){
    .sok_flexbox {flex-direction: row;}
    /*.sok_stycke {margin-bottom: .5em;}*/
}
/* ---------------------------------------------------- */

/* ////////////////////////////////// SLUT STARTSIDAN /////////////////////////////////// */
/* ///////////////////////////////////// CONTENTSIDA ////////////////////////////////////// */

.brodsmulor {font-size: var(--text-storlek-mini); margin-bottom: 15px;}
.sidor_update_con {border-top: 1px dotted black; font-size: var(--text-storlek-mindre); text-align: right; font-style: italic; padding-right: 3px;}
/* --- UTVALD BILD PAGES/POSTS --- */
.utvald_bild_con {aspect-ratio: 16 / 9; width: 100%; margin-bottom: 4%;}
.utvald_bild_con img {height: 100%; width: 100%; object-fit: cover; border-radius: .1px;/*för att häva object-fit bugg i Chrome*/ object-position: center; display: block;}

/* ---------- KOLUMNER ----------- */
.bredd_normal {max-width: 885px;}/*var 865px*/
.bredd_full {max-width: 100%;}

.flexbox {display: flex; margin: 0 auto; flex-direction: column; justify-content: /*var: center* - ändrade för intranätets skull, kolla om det blir biverkningar på övriga sajten*/flex-start;}
.flexbox * {box-sizing: border-box;}
.flexbox>.kol1 {
    box-sizing: border-box;
    padding: 0;
    overflow: hidden;
}
.flexbox>.kol2 {
    box-sizing: border-box;
    overflow: hidden;
}
.kol2_content{
    padding: 0;
    /*border-top: 1px solid black;*/
    margin-top: 50px;
}
@media all and (min-width: 768px){
    .flexbox {flex-direction: row;}
    .kol2 .flexbox {flex-direction: column;}
    .flexbox>.kol1 {padding-right: 15px; width: 70%; /*flex: 7;*/}
    .flexbox>.kol1.bred {padding: 0; width: 90%; margin-left: auto; margin-right: auto;}
    .flexbox>.kol2 {width: 30%; /*flex: 3;*/}
    .kol2_content {padding-left: 15px; border-top: 0; margin-top: 0; border-left: 1px solid black; }
}
@media all and (min-width: 1024px){
    .flexbox>.kol1 {padding-right: 25px;}
    .kol2_content {padding-left: 25px;}
}    
.kol2 {font-size: var(--text-storlek-mindre);}
.kol2 h2 {font-size: var(--text-storlek-h2-kol2); letter-spacing: -.5px;}
.kol2 h3 {font-size: var(--text-storlek-normal);}
/* ------------------------------- */


/* -------------------- NYHETSBOXAR --------------------- */

.nyhetsinlagg {border-style: solid; border-width: 0px 0px 1px 0px; border-color: black; flex: 1; width: 100%; /* LAGT TILL WIDTH, kolla denna om det blir buggigt */max-width: 450px; box-sizing: border-box; overflow: visible; margin: 0 auto 30px auto; padding: 0 0 30px 0;}
.nyhetsinlagg:last-of-type {border-width: 0; padding: 0;}
.nyhetsinlagg time {display: block; width: 100%; border: 0px solid red; font-size: var(--text-storlek-mini);}

.kol2 .nyhetsinlagg h2 {font-size: var(--text-storlek-normal);}
.nyhetsinlagg h2 {margin-top: 5px; margin-bottom: .3em; font-size: var(--text-storlek-h3);}
.nyhetsinlagg p {font-size: var(--text-storlek-mindre);}

.flexbox_nyheter {display: flex; border: 0px solid pink; margin: 0 auto; flex-direction: column-reverse; justify-content: center; /*overflow: hidden;*/}
.flexbox_nyheter * {box-sizing: border-box;}
.tonad {border: 0px solid lime; width: 100%; height: 100%;
    -webkit-mask-image: linear-gradient(rgba(0,0,0,1) 55%, rgba(0,0,0,.15) 80%, rgba(0,0,0,0) 95%); 
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: left top;
}
.text_del {flex: 1 1 auto; border: 0px solid blue; padding: 10px 10px 10px 0px; height: 200px;  position: relative;}
.bild_del {flex: 1 1 auto; border: 0px solid brown; height: 180px;}
.bild_del img { height: 180px; width: 100%; object-fit: cover; border-radius: .1px;/*för att häva object-fit bugg i Chrome*/ margin: 0;                                                                                                           max-height: 1180px; max-width: 1180px;}

@media all and (min-width: 375px){
    .bild_del, .bild_del img {height: 250px;}
}
@media all and (min-width: 768px){
    .bild_del, .bild_del img {height: 220px;}
    .nyhetsinlagg {max-width: 550px; margin: 0 1.5% 0 0; padding: 0 1.5% 0 0; border-width: 0px 1px 0px 0px;}
    .nyhetsinlagg:last-of-type {padding: 0; margin: 0;}
}
@media all and (min-width: 1024px){
    .bild_del, .bild_del img {height: 250px;}
}
@media all and (min-width: 1200px){
    .flexbox_nyheter {flex-direction: row;}
    .bild_del {height: 200px;}
    .bild_del img {height: 120px; width: 120px; object-fit: cover; margin: 10px 0px 10px 10px;}
}
@media all and (min-width: 1400px){
    .bild_del img {height: 160px; width: 160px;}
}
@media all and (min-width: 1600px){
    .bild_del img {height: 180px; width: 180px;}
}


/* ---------------------------------------------------- */
/* ---------- NYHETSBOXAR, AVVIKELSER KOL 2 ----------- */
.container_kol2 {margin: 50px auto 0px auto;}

.kol2 .nyhetsinlagg {border-width: 0px 0px 1px 0px; margin: 0 auto 30px auto; padding: 0 0 30px 0;}
.kol2 .nyhetsinlagg:last-of-type {border: 0; padding: 0;}
.kol2 .text_del {flex: 0; padding: 10px 0px 0px 0px;}
.kol2 .bild_del {flex: 0;}
.kol2 .bild_del img { height: 180px; width: 100%; object-fit: cover; border-radius: .1px;/*för att häva object-fit bugg i Chrome*/ margin: 0;                                                                                                           max-height: 1180px; max-width: 1180px;}
@media all and (min-width: 375px){
    .kol2 .bild_del, .kol2 .bild_del img {height: 250px;}
}
@media all and (min-width: 768px){
    .kol2 .bild_del, .kol2 .bild_del img {height: 180px;}
    .kol2_content>*:first-child {margin-top: 0;}
}
/* ----------------------------------------------------- */

/* ----------- KNAPPAR ----------- */
.knapp, .is-style-faktaruta a.knapp, .wp-block-button__link, input[type=submit], button {display: inline-block; background-color: var(--farg-ljuslila-30); border-radius: 50px; padding: 4px 20px; font-weight: bold; font-size: var(--text-storlek-mindre); text-decoration: none; color: var(--farg-lila); border: 0;}
/* override för formulär-knappar: */ input[type=submit], form button{padding: 6px 24px; font-size: var(--text-storlek-normal);}
.knapp:hover, .is-style-faktaruta a.knapp:hover, .wp-block-button__link:hover, input[type=submit]:hover, button:hover {background-color: var(--farg-ljuslila-60); text-decoration: none; color: black;}


.has-profilturkos-60-background-color .knapp, .is-style-faktaruta.has-profilturkos-60-background-color a.knapp, .has-profilturkos-60-background-color .wp-block-button__link, .has-profilturkos-60-background-color input[type=submit], .has-profilturkos-60-background-color button
,
.has-profilgul-60-background-color .knapp, .is-style-faktaruta.has-profilgul-60-background-color a.knapp, .has-profilgul-60-background-color .wp-block-button__link, .has-profilgul-60-background-color input[type=submit], .has-profilgul-60-background-color button
,
.has-profilrosa-60-background-color .knapp, .is-style-faktaruta.has-profilrosa-60-background-color a.knapp, .has-profilrosa-60-background-color .wp-block-button__link, .has-profilrosa-60-background-color input[type=submit], .has-profilrosa-60-background-color button
,
.has-profilljuslila-60-background-color .knapp, .is-style-faktaruta.has-profilljuslila-60-background-color a.knapp, .has-profilljuslila-60-background-color .wp-block-button__link, .has-profilljuslila-60-background-color input[type=submit], .has-profilljuslila-60-background-color button

{background-color: var(--farg-lila); color: var(--farg-ljuslila-30); border: 0;}

.has-profilturkos-60-background-color .knapp:hover, .is-style-faktaruta.has-profilturkos-60-background-color a.knapp:hover, .has-profilturkos-60-background-color .wp-block-button__link:hover, .has-profilturkos-60-background-color input[type=submit]:hover, .has-profilturkos-60-background-color button:hover
,
.has-profilgul-60-background-color .knapp:hover, .is-style-faktaruta.has-profilgul-60-background-color a.knapp:hover, .has-profilgul-60-background-color .wp-block-button__link:hover, .has-profilgul-60-background-color input[type=submit]:hover, .has-profilgul-60-background-color button:hover
,
.has-profilrosa-60-background-color .knapp:hover, .is-style-faktaruta.has-profilrosa-60-background-color a.knapp:hover, .has-profilrosa-60-background-color .wp-block-button__link:hover, .has-profilrosa-60-background-color input[type=submit]:hover, .has-profilrosa-60-background-color button:hover
,
.has-profilljuslila-60-background-color .knapp:hover, .is-style-faktaruta.has-profilljuslila-60-background-color a.knapp:hover, .has-profilljuslila-60-background-color .wp-block-button__link:hover, .has-profilljuslila-60-background-color input[type=submit]:hover, .has-profilljuslila-60-background-color button:hover

{background-color: var(--farg-ljuslila-60); color: var(--farg-lila-kontrast); border: 0;}

.turkos .knapp {background-color: var(--farg-turkos-60);}
.turkos .knapp:hover {background-color: var(--farg-turkos);}

.lasmer {padding-left: 10px;}
.nyhetsinlagg .lasmer {position: absolute; bottom: 0;}
/*.lasmer:hover {background-color: var(--farg-turkos); text-decoration: none;}*/
.lasmer img {margin-right: 5px; width: 22px;}
/* ------------------------------- */

/* ------ RÖSTNINGSKNAPPAR ------- */
.vote-con {background: var(--farg-ljuslila-30); padding: 20px; margin: 20px 0;}
#poll {font-size: var(--text-storlek-mindre);}
.fa-thumbs-up:hover, .fa-thumbs-down:hover {}
.aktiv_ja {color: var(--farg-lila); font-size: var(--text-storlek-h3);}
.aktiv_nej {color: var(--farg-lila); font-size: var(--text-storlek-h3);}
.aktiv_ja:hover, .aktiv_nej:hover {color: var(--farg-ljuslila); cursor: pointer;}
.inaktiv_ejvald {color: var(--farg-ljuslila);}
.inaktiv_ja {color: green;}
.inaktiv_nej {color: red;}
/* ------------------------------- */

/* -------------- REKOMMENDERADE SIDOR ---------------- */  /* -- ANVÄNDS ÄVEN PÅ FRONTPAGE -- */
.rek_wrapper {max-width: 870px; margin: 0 auto;}     /* bara nedtill, ej i sidebar */
.rek_sidor {display: flex; flex-direction: row; margin-top: 30px; column-gap: 20px; flex-wrap: wrap;}
.rek_sidor p {margin-bottom: 10px; font-size: var(--text-storlek-mindre);}
.rek_sidor h3 {margin-top: 5px;}
.rek_sida {margin-bottom: 40px; flex: 1; min-width: 190px; max-width: 1000px;}
.rek_wrapper .rek_sida {max-width: 420px;}
.rek_bild {width: 100%; aspect-ratio: 2.2 / 1;}/* aspect ratio buggar i chrome, kan ej ha 2 / 1 */
.rek_bild img {height: 100%; width: 100%; object-fit: cover; border-radius: .1px;}
@media all and (min-width: 768px) {
    .kol2 .rek_sidor {flex-direction: column;}
    .rek_sidor {column-gap: 35px;}
}
/* ---------------------------------------------------- */

/* -------------------- FAKTARUTA --------------------- */
.is-style-faktaruta {background: var(--farg-lila-kontrast); color: white; padding: 25px 20px 15px 20px; border-bottom: 9px solid var(--farg-ljuslila);font-size: var(--text-storlek-mindre); max-width: 700px;}
.kol1 .is-style-faktaruta {margin: 20px 0;}
.is-style-faktaruta h2 {font-weight: normal; text-transform: uppercase; letter-spacing: 3px; font-size: var(--text-storlek-mindre); border-bottom: 1px solid white; margin: 4px 0 15px 0; padding: 0 0 4px 0;}
.is-style-faktaruta a {color: var(--farg-ljuslila-60);}
.is-style-faktaruta a:hover {text-decoration-color: var(--farg-turkos);color: var(--farg-ljuslila-30);}
.is-style-faktaruta p:last-of-type {margin-bottom: 0;}
.sec2 .is-style-faktaruta {margin: 0 auto; }
.max320 {max-width: 320px; margin-left: 0;}


.is-style-faktaruta.has-profilturkos-60-background-color {background: var(--farg-turkos-60); color: black; border-bottom: 9px solid var(--farg-turkos-kontrast);}
.is-style-faktaruta.has-profilturkos-60-background-color h2 {border-bottom: 1px solid black;}

.is-style-faktaruta.has-profilgul-60-background-color {background: var(--farg-gul-60); color: black; border-bottom: 9px solid var(--farg-gul-kontrast);}
.is-style-faktaruta.has-profilgul-60-background-color h2 {border-bottom: 1px solid black;}

.is-style-faktaruta.has-profilrosa-60-background-color {background: var(--farg-rosa-60); color: black; border-bottom: 9px solid var(--farg-rosa-kontrast);}
.is-style-faktaruta.has-profilrosa-60-background-color h2 {border-bottom: 1px solid black;}

.is-style-faktaruta.has-profilljuslila-60-background-color {background: var(--farg-ljuslila-60); color: black; border-bottom: 9px solid var(--farg-lila);}
.is-style-faktaruta.has-profilljuslila-60-background-color h2 {border-bottom: 1px solid black;}

/* ---------------------------------------------------- */
/* ---------------------- PUFF ------------------------ */

.puff {display: flex; flex-direction: column; background: var(--farg-lila); color: white; text-decoration: none; font-size: var(--text-storlek-normal); height: 280px; max-width: 500px;}
.puff:hover, .puff_front:hover {color: white; text-decoration: underline; text-decoration-color: var(--farg-turkos); text-decoration-thickness: 2px; background: var(--farg-lila);}
.puff_bild {overflow: hidden; height: 100%;}
.puff_bild img {width: 100%; height: 100%; object-fit: cover; border-radius: .1px;/*för att häva object-fit bugg i Chrome*/ mix-blend-mode: screen; opacity: .6;}
.puff:hover .puff_bild img, .puff_front:hover .puff_bild img {opacity: .7;}
.puff_text {padding: 20px 12px; border: 0px solid green; position: relative;}

.puff_text img {position: absolute; width: 100px; top: -84px;}

.sec2 .puff {height: 250px; margin: 20px;}
.puff_wrapper {display: flex; flex-direction: row; border: 0px solid black; justify-content: center; flex-wrap: wrap;}
.is-style-faktaruta h1, .is-style-faktaruta h2 {display: none;}
.is-style-faktaruta h2:first-child {display: block;}
/* ---------------------------------------------------- */


/* -------------------- GRUPP(div) -------------------- */
.wp-block-group.has-background {padding: 30px;}
/* ---------------------------------------------------- */

/* ///////////////////////////////////// SLUT CONTENTSIDA ////////////////////////////////////// */

time.single_nyhet_date {margin-bottom: 5px; font-size: var(--text-storlek-mini); display: block; width: 100%;}

/* ----------------------- FAQ ------------------------ */
details.faq details summary {font-weight: bold;}
.faq_update_con {font-size: var(--text-storlek-mini); border-bottom: 1px solid var(--farg-lila); padding: 15px 0 10px 0; margin-bottom: 10px; text-align: right;}
details details:last-of-type .faq_update_con, main>details>.faq_update_con {border-bottom: 0px solid var(--farg-lila); margin-bottom: 0;}
/*
få bort strong från faq
main>details>summary>strong
*/
.sidomeny {list-style-position: inside; padding-left: 0px; margin-top: 15px; margin-bottom: 30px;}
.sidomeny ul {margin-bottom: 10px;}
.sidomeny li {list-style-type: none;  text-transform: uppercase; font-weight: bold; letter-spacing: 1px;}
.sidomeny li li {padding-left: 0px; text-transform: none; font-weight: normal; letter-spacing: normal;}
.sidomeny a {text-decoration: none;}
.sidomeny a:hover {text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--farg-lila);}
.sidomeny li + li {margin-top: 0;}
/* ---------------------------------------------------- */

/* ------------------ DOKUMENTSIDA -------------------- */
.flex-container {display: flex; flex-wrap: nowrap; background-color: none; flex-direction: column; justify-content: center;}
.bara_en_lista .flex-container {justify-content: flex-start;}
.flex-container > div {background-color: transparent; margin-bottom: 30px;}

@media (min-width: 1024px) {
    .flex-container {flex-direction: row;}
    .flex-container > div {width: 33%;  margin-right: 15px;}
    .bara_en_lista .flex-container > div {width: 100%;}
}
.dokumentlista {list-style-type: none; border: 0px solid blue; padding: 0; margin: 20px 10px 10px 10px;}
.dokumentlista li {border-bottom: 1px solid black; padding:  0 0 15px 0; margin: 0 0 15px 0; }
.dokumentlista li:last-of-type {border-bottom: 0; margin-bottom: 0; padding-bottom: 0;}
.dokumentlista a {text-decoration: none;}
.dokumentlista a:hover {text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--farg-lila);}
.filtyp.bla_bakgrund {background: #2c5bb8;}
.filtyp.rod_bakgrund {background: #a42416;}
.filtyp.gra_bakgrund {background: var(--farg-morkgra);}
.filtyp {font-size: 11px; font-weight: bold;  padding: 2px 4px; margin-right: 5px; background: black; color: white; border-radius: 4px;}
/* ---------------------------------------------------- */

/* ------------------ SÖKRESULTAT --------------------- */
.sidangivelse {background: lightgray; padding: 5px; margin-left: 20px; border-radius: 4px;}
.sidangivelse.filtyp {margin-left: 5px;}
.soktraff_con{border-bottom: 1px solid black; padding: 20px 0; display: flex;}
.soktraff_link{flex: 1;}
.soktraff_data{flex: 0 0 auto;}
/* ---------------------------------------------------- */
/* -------------------- FEED-SIDA --------------------- */
.feed {border-top: 1px solid black; margin-top: 30px; padding-top: 30px;}    
.feed .flexbox_nyheter * {box-sizing: content-box;}
.feed .nyhetsinlagg {max-width: none;}
.feed .bild_del {padding-bottom: 10px;}
.feed .text_del {padding: 0px 10px 0px 0px; height: 180px;}
@media all and (min-width: 768px){
    .feed .flexbox_nyheter {flex-direction: row;}
    .feed .nyhetsinlagg {margin: 0 auto 30px auto; padding: 0 0 30px 0; border-width: 0px 0px 1px 0px;}
    .feed .bild_del, .feed .bild_del img {height: 180px; width: 180px;}
}
/* ---------------------------------------------------- */
/* -------------------- FEED-SIDA PUBLIKATIONER --------------------- */
.feed_pub {margin-top: 30px; padding-top: 30px;}    
.feed_pub .nyhetsinlagg {max-width: none;}
.feed_flexbox {display: flex; flex-direction: column; column-gap: 5%; row-gap: 5px; }
.feed_bilddel { flex: 0 0 auto; }
.feed_bilddel_inner { width: 120px; aspect-ratio: 1 / 1.41; overflow: hidden; }
.feed_bilddel img { object-fit: cover; border-radius: .1px;/*för att häva object-fit bugg i Chrome*/ width: 100%; height: 100%; display: block; }
.feed_textdel { flex: 1; }
@media all and (min-width: 375px){
    .feed_flexbox {flex-direction: row;}
    .feed_pub .nyhetsinlagg {margin: 0 auto 30px auto; padding: 0 0 30px 0; border-width: 0px 0px 1px 0px;}
    .feed_bilddel {flex: 0 0 90px;}
    .feed_bilddel_inner {width: 100%;}
}
@media all and (min-width: 410px){
    .feed_bilddel {flex: 0 0 120px;}
}
/* ---------------------------------------------------- */
/* ----------------- API-KONTAKTLISTA ----------------- */
#sok_api, #sok_ordlista, #sok_ordlista_statisk, #sok_forkortningar_statisk, .sok_ordlista {box-sizing: border-box; width: 100%; border: 0; background: var(--farg-turkos-60); height: 70px; padding: 20px; margin: 30px 0 20px 0; font-size: var(--text-storlek-normal);}
#kontaktlista, #fortkortningar_statisk {font-size: var(--text-storlek-mindre); text-align: left;}
@media all and (min-width: 1024px){
    #kontaktlista td {min-width: 130px;}
}
/* ---------------------------------------------------- */
/* ------------------ API-DRIFTSTATUS ----------------- */
.driftstatus_con {margin-top: 20px; margin-bottom: 50px; padding: 30px; border-bottom: 0px solid black; background: var(--farg-turkos-30);}
.api_bullet {width: 30px; height: 30px; border-radius: 100px; display: inline-block; vertical-align: middle; margin-right: 10px;}
.api_bullet.red {background: red;}
.api_bullet.orange {background: orange;}
.api_bullet.green {background: green;}
/* ---------------------------------------------------- */
/* --------------------- ORDLISTA --------------------- */
.ordlista_popup {z-index:110; border: 0px solid black; position: fixed; background: white; top: 8%; left: 8%; right: 8%; bottom: 8%; box-shadow: 0px 0px 180px 50px gray;/*box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;*/ overflow-y: auto; overflow-x: auto; display: none; color: black;}
.knappcontainer {width: 84%; position: fixed; text-align: right; padding: 12px 12px 0 0; box-sizing: border-box;}
.ordlista_forklaring {font-size: var(--text-storlek-mini);}
.ordlista_knapp {position: relative;  display: inline-block;}
.ordlista_knapp:hover {opacity: .7;}
.ordlista_knapp .bar1 { -webkit-transform: rotate(-45deg) translate(-6px, 6px); transform: rotate(-45deg) translate(-3px, 3px); background-color: black;}
.ordlista_knapp .bar2 {opacity: 0;}
.ordlista_knapp .bar3 {-webkit-transform: rotate(45deg) translate(-8px, -8px); transform: rotate(45deg) translate(-4px, -4px); background-color: black;}
/* ---------------------------------------------------- */

/* --------- KONTAKTLISTA (SÖKBAR TABELL) ------------- */
.kontaktlista p {margin-bottom: .8em;}
.kontaktlista p.kontaktlisterubrik {margin-bottom: 0px; margin-top: 1.5em; font-weight: bold;}
.kontaktlista p.kontaktlisterubrik:first-of-type {margin-top: .8em;}
/* ---------------------------------------------------- */

/* ------------------- KONTAKTSIDA -------------------- */
.popupruta{display: none; position: fixed; z-index: 999999; width: 30%; min-width: 300px;box-sizing: border-box; min-height: 20%; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgb(50, 50, 50); background-color: rgba(50, 50, 50, 1); color: white; overflow: hidden; padding: 30px; font-size: 20px;}
.popupruta span.stang {font-size: 30px; position: absolute; top: 0; right: 20px; color: white;z-index: 99999999; cursor: pointer;}/*använd i popuprute-taggn: <span class="stang">x</span>*/
.popupruta span.stang:hover {color: lightgray;}/*använd i popuprute-taggn: <span class="stang">x</span>*/
.popupruta a {color: #9184be;}
/* ---------------------------------------------------- */
/* ---------------- KALENDARIUM-SIDA ------------------ */
.under_listning {margin: -10px auto 30px auto; padding: 20px 0px 20px 0px; text-align: center; border-style: solid; border-color: black; border-width: 1px 0 1px 0;}
/* ---------------------------------------------------- */
/* -------------- KALENDER-SINGEL-SIDA ---------------- */
/* overrides */
.kalender_singel_sida .kalender_datumcon {margin: 0px 0 30px 0; padding: 20px 15px; background: var(--farg-rosa-60);}
.kalender_singel_sida .kalender_datumcon div {flex: initial;}
.kalender_singel_sida .kalender_datumcon div a {margin-top: 10px;}
.kalender_singel_sida .utvald_bild_con {background: var(--farg-ljuslila-60); position: relative; margin-bottom: 0;}
.kalender_singel_sida .utvald_bild_con img {display: block;}
/* ---------------------------------------------------- */
/* --------------------- TABINDEX --------------------- */

/*
.sprakvaljare a:focus img {border: 5px solid black;}
*:focus {border: 3px solid blue !important;}
*/
/*
a:focus {border: 3px solid red;}
.topmeny-con a:focus {border: 3px solid green;}
#sok_wrapper:focus, #menyknapp_wrapper:focus {border: 3px solid green;}
*/
/* ---------------------------------------------------- */

/* -------------- DIREKT TILL INNEHÅLL ---------------- */
nav.skip{position: absolute; width : 100%;border: 0px solid red; box-sizing: border-box;}
#skip-link {background: black; color: white; border: 2px solid black; padding: 10px; position: absolute; transform: translateY(-150%); left: 5%; z-index: 101;}
#skip-link:focus {transform: translateY(0%);}
/* ---------------------------------------------------- */

/* -------------------- UTSKRIFT ---------------------- */
@media print {
    footer, .resten_wrapper, .post-edit-link {display: none;}
    html {height: 98%;}
}
/* ---------------------------------------------------- */