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

CSN Utfällbara ytor

Styling som tillämpas på utfällbara ytor.

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

/******************************************************
Utfällbara ytor
******************************************************/
.sv-editing-mode .csn-formatmall-utfallbar-yta-rubrik-h2:before,
.sv-editing-mode .csn-formatmall-utfallbar-yta-rubrik-h3:before,
.sv-editing-mode .csn-formatmall-utfallbar-yta-rubrik-h4:before,
.sv-classic-edit-mode .csn-formatmall-utfallbar-yta-rubrik-h2:before,
.sv-classic-edit-mode .csn-formatmall-utfallbar-yta-rubrik-h3:before,
.sv-classic-edit-mode .csn-formatmall-utfallbar-yta-rubrik-h4:before {
   content: '';
   position: absolute;
   left: 0;
   top: 0;
   background: url('/images/18.54b831c515a2299b52015bc/ic_add_circle_outline_black_24px.svg');
   width: 22px;
   height: 22px;
   background-size: 22px;
   margin: 9px 0 0 -2px;
}

.csn-formatmall-utfallbar-yta-rubrik-h4 ~ .csn-utfallbar-yta-wrapper ul li a{
    line-height: 1.6 !important;
}

.csn-formatmall-utfallbar-yta-rubrik-h2,
.csn-formatmall-utfallbar-yta-rubrik-h3,
.csn-formatmall-utfallbar-yta-rubrik-h4 {
   padding: 0.45em 0.75em 0.45em 1.5em;
   position: relative;
   box-sizing: border-box;
   margin-left: 0 !important;
   border: 0 !important;
   padding-left: 28px !important;
   color: #333;
}

.sv-collapsible-content .csn-utfallbar-yta-h2:last-child,
.sv-collapsible-content .csn-utfallbar-yta-h3:last-child,
.sv-collapsible-content .csn-utfallbar-yta-h4:last-child {
   margin-bottom: 0;
}

.csn-utfallbara-ytor-grupp-normal,
.csn-utfallbara-ytor-grupp-dragspel,
.csn-utfallbar-yta-h2:last-child,
.csn-utfallbar-yta-h3:last-child,
.csn-utfallbar-yta-h4:last-child {
   margin-bottom: 1em;
}

.csn-formatmall-utfallbar-yta-rubrik-h2 a:hover,
.csn-formatmall-utfallbar-yta-rubrik-h3 a:hover,
.csn-formatmall-utfallbar-yta-rubrik-h4 a:hover {
   opacity: 1;
}

.csn-formatmall-utfallbar-yta-rubrik-h2:hover,
.csn-formatmall-utfallbar-yta-rubrik-h3:hover,
.csn-formatmall-utfallbar-yta-rubrik-h4:hover {
   text-decoration: underline;
}

.csn-formatmall-utfallbar-yta-rubrik-h2.hover,
.csn-formatmall-utfallbar-yta-rubrik-h3.hover,
.csn-formatmall-utfallbar-yta-rubrik-h4.hover {
   text-decoration: underline;
}




.csn-formatmall-utfallbar-yta-rubrik-h2.hover:before,
.csn-formatmall-utfallbar-yta-rubrik-h3.hover:before,
.csn-formatmall-utfallbar-yta-rubrik-h4.hover:before {
   content: '';
   position: absolute;
   top: 0;
   bottom: 0;
   left: -1rem;
   right: -1rem;
   background: rgba(255, 209, 100, 0.2);
}

.csn-formatmall-utfallbar-yta-rubrik-h2 > div:first-child,
.csn-formatmall-utfallbar-yta-rubrik-h2 > div:first-child a,
.csn-formatmall-utfallbar-yta-rubrik-h3 > div:first-child,
.csn-formatmall-utfallbar-yta-rubrik-h3 > div:first-child a,
.csn-formatmall-utfallbar-yta-rubrik-h4 > div:first-child,
.csn-formatmall-utfallbar-yta-rubrik-h4 > div:first-child a {
   display: block;
   float: none !important;
   text-align: left;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   line-height: 1.5 !important;
   text-decoration: none;
   border: none;
}


.csn-formatmall-utfallbar-yta-rubrik-h2 > div:empty,
.csn-formatmall-utfallbar-yta-rubrik-h3 > div:empty,
.csn-formatmall-utfallbar-yta-rubrik-h4 > div:empty {
   display: none;
}


.csn-formatmall-utfallbar-yta-rubrik-h2 .halflings-icon,
.csn-formatmall-utfallbar-yta-rubrik-h3 .halflings-icon,
.csn-formatmall-utfallbar-yta-rubrik-h4 .halflings-icon {
   background: url('/images/18.54b831c515a2299b52015bc/ic_add_circle_outline_black_24px.svg');
   width: 22px;
   height: 22px;
   /* position: absolute !important; */
   /* position: absolute; */
   background-size: 22px;
/*   margin: 0.15em 0 0 -30px !important; */
   margin: 1px 8px 0 -30px !important;
   line-height: 1 !important;
   /* margin: 0 10px 0 -30px; */
   transition: transform 0.2s ease;
   backface-visibility: hidden;
}

.csn-formatmall-utfallbar-yta-rubrik-h2 .chevron-down,
.csn-formatmall-utfallbar-yta-rubrik-h3 .chevron-down,
.csn-formatmall-utfallbar-yta-rubrik-h4 .chevron-down {
   transform: rotate(45deg)
}

/* Ge faktarutan i en utfällbar-yta lite luft till innehållet ovanför */
.sv-collapsible-content .sv-decoration-faktaruta {
	margin-top: 1rem;
   padding: 1rem;
}

.sv-collapsible-content .csn-utfallbar-yta-h2 > div:not(.sv-decoration-faktaruta),
.sv-collapsible-content .csn-utfallbar-yta-h3 > div:not(.sv-decoration-faktaruta),
.sv-collapsible-content .csn-utfallbar-yta-h4 > div:not(.sv-decoration-faktaruta) {
   padding: 0;
}

/* Kolla om detta kan tas bort? Känns inte som att det används, särskilt inte efter vi implementerade nya
utfällbara ytorna. Isåfall går ovanstående också att ta bort. */
.csn-utfallbar-yta-h2 > div,
.csn-utfallbar-yta-h3 > div,
.csn-utfallbar-yta-h4 > div {
   padding-left: 1.2em;
   padding-right: 0.75em;
   padding-top: 1em;
   padding-bottom: 0.25em;
}

.csn-utfallbar-yta-wrapper {
   padding-left: 13px;
   border-left: 2px solid #ee7c7d;
   margin-left: 7px;
   margin-bottom: 16px;
}

.csn-utfallbar-yta-wrapper > div:last-child *:last-child {
   margin-bottom: 0;
}

.csn-utfallbar-yta-h2 .csn-utfallbar-yta-wrapper > a,
.csn-utfallbar-yta-h3 .csn-utfallbar-yta-wrapper > a,
.csn-utfallbar-yta-h4 .csn-utfallbar-yta-wrapper > a {
   font-size: 16px;
   text-decoration: none;
   border-bottom: 1px solid;
   padding-bottom: 1px;
}

.csn-utfallbar-yta-stang {
   display: inline-block;
   margin-top: 1rem;
}

/******************************************************
Språk
******************************************************/
html[lang="ar"] .csn-utfallbar-yta-h2 .halflings-icon,
html[lang="ar"] .csn-utfallbar-yta-h3 .halflings-icon,
html[lang="ar"] .csn-utfallbar-yta-h4 .halflings-icon,
html[lang="ckb"] .csn-utfallbar-yta-h2 .halflings-icon,
html[lang="ckb"] .csn-utfallbar-yta-h3 .halflings-icon,
html[lang="ckb"] .csn-utfallbar-yta-h4 .halflings-icon,
html[lang="fa"] .csn-utfallbar-yta-h2 .halflings-icon,
html[lang="fa"] .csn-utfallbar-yta-h3 .halflings-icon,
html[lang="fa"] .csn-utfallbar-yta-h4 .halflings-icon,
html[lang="prs"] .csn-utfallbar-yta-h2 .halflings-icon,
html[lang="prs"] .csn-utfallbar-yta-h3 .halflings-icon,
html[lang="prs"] .csn-utfallbar-yta-h4 .halflings-icon,
html[lang="ps"] .csn-utfallbar-yta-h2 .halflings-icon,
html[lang="ps"] .csn-utfallbar-yta-h3 .halflings-icon,
html[lang="ps"] .csn-utfallbar-yta-h4 .halflings-icon,
html[lang="yi"] .csn-utfallbar-yta-h2 .halflings-icon,
html[lang="yi"] .csn-utfallbar-yta-h3 .halflings-icon,
html[lang="yi"] .csn-utfallbar-yta-h4 .halflings-icon,
html[lang="yid"] .csn-utfallbar-yta-h2 .halflings-icon,
html[lang="yid"] .csn-utfallbar-yta-h3 .halflings-icon,
html[lang="yid"] .csn-utfallbar-yta-h4 .halflings-icon {
   float: right;
   margin: 3px -27px 0 -30px !important;
}

html[lang="ar"] .csn-utfallbar-yta-h2 .sv-toolbar-title,
html[lang="ar"] .csn-utfallbar-yta-h4 .sv-toolbar-title,
html[lang="ckb"] .csn-utfallbar-yta-h2 .sv-toolbar-title,
html[lang="ckb"] .csn-utfallbar-yta-h3 .sv-toolbar-title,
html[lang="ckb"] .csn-utfallbar-yta-h4 .sv-toolbar-title,
html[lang="fa"] .csn-utfallbar-yta-h2 .sv-toolbar-title,
html[lang="fa"] .csn-utfallbar-yta-h3 .sv-toolbar-title,
html[lang="fa"] .csn-utfallbar-yta-h4 .sv-toolbar-title,
html[lang="prs"] .csn-utfallbar-yta-h2 .sv-toolbar-title,
html[lang="prs"] .csn-utfallbar-yta-h3 .sv-toolbar-title,
html[lang="prs"] .csn-utfallbar-yta-h4 .sv-toolbar-title,
html[lang="ps"] .csn-utfallbar-yta-h2 .sv-toolbar-title,
html[lang="ps"] .csn-utfallbar-yta-h3 .sv-toolbar-title,
html[lang="ps"] .csn-utfallbar-yta-h4 .sv-toolbar-title,
html[lang="yi"] .csn-utfallbar-yta-h2 .sv-toolbar-title,
html[lang="yi"] .csn-utfallbar-yta-h3 .sv-toolbar-title,
html[lang="yi"] .csn-utfallbar-yta-h4 .sv-toolbar-title,
html[lang="yid"] .csn-utfallbar-yta-h2 .sv-toolbar-title,
html[lang="yid"] .csn-utfallbar-yta-h3 .sv-toolbar-title,
html[lang="yid"] .csn-utfallbar-yta-h4 .sv-toolbar-title {
   text-align: right !important;
}

html[lang="ar"] .csn-formatmall-utfallbar-yta-rubrik-h2 > div:first-child a,
html[lang="ar"] .csn-formatmall-utfallbar-yta-rubrik-h3 > div:first-child a,
html[lang="ar"] .csn-formatmall-utfallbar-yta-rubrik-h4 > div:first-child a,
html[lang="ckb"] .csn-formatmall-utfallbar-yta-rubrik-h2 > div:first-child a,
html[lang="ckb"] .csn-formatmall-utfallbar-yta-rubrik-h3 > div:first-child a,
html[lang="ckb"] .csn-formatmall-utfallbar-yta-rubrik-h4 > div:first-child a,
html[lang="fa"] .csn-formatmall-utfallbar-yta-rubrik-h2 > div:first-child a,
html[lang="fa"] .csn-formatmall-utfallbar-yta-rubrik-h3 > div:first-child a,
html[lang="fa"] .csn-formatmall-utfallbar-yta-rubrik-h4 > div:first-child a,
html[lang="prs"] .csn-formatmall-utfallbar-yta-rubrik-h2 > div:first-child a,
html[lang="prs"] .csn-formatmall-utfallbar-yta-rubrik-h3 > div:first-child a,
html[lang="prs"] .csn-formatmall-utfallbar-yta-rubrik-h4 > div:first-child a,
html[lang="ps"] .csn-formatmall-utfallbar-yta-rubrik-h2 > div:first-child a,
html[lang="ps"] .csn-formatmall-utfallbar-yta-rubrik-h3 > div:first-child a,
html[lang="ps"] .csn-formatmall-utfallbar-yta-rubrik-h4 > div:first-child a,
html[lang="yi"] .csn-formatmall-utfallbar-yta-rubrik-h2 > div:first-child a,
html[lang="yi"] .csn-formatmall-utfallbar-yta-rubrik-h3 > div:first-child a,
html[lang="yi"] .csn-formatmall-utfallbar-yta-rubrik-h4 > div:first-child a,
html[lang="yid"] .csn-formatmall-utfallbar-yta-rubrik-h2 > div:first-child a,
html[lang="yid"] .csn-formatmall-utfallbar-yta-rubrik-h3 > div:first-child a,
html[lang="yid"] .csn-formatmall-utfallbar-yta-rubrik-h4 > div:first-child a {
   text-align: right !important;
}

html[lang="ar"] .csn-utfallbar-yta-h2 > div,
html[lang="ar"] .csn-utfallbar-yta-h3 > div,
html[lang="ar"] .csn-utfallbar-yta-h4 > div,
html[lang="ckb"] .csn-utfallbar-yta-h2 > div,
html[lang="ckb"] .csn-utfallbar-yta-h3 > div,
html[lang="ckb"] .csn-utfallbar-yta-h4 > div,
html[lang="fa"] .csn-utfallbar-yta-h2 > div,
html[lang="fa"] .csn-utfallbar-yta-h3 > div,
html[lang="fa"] .csn-utfallbar-yta-h4 > div,
html[lang="prs"] .csn-utfallbar-yta-h2 > div,
html[lang="prs"] .csn-utfallbar-yta-h3 > div,
html[lang="prs"] .csn-utfallbar-yta-h4 > div,
html[lang="ps"] .csn-utfallbar-yta-h2 > div,
html[lang="ps"] .csn-utfallbar-yta-h3 > div,
html[lang="ps"] .csn-utfallbar-yta-h4 > div,
html[lang="yi"] .csn-utfallbar-yta-h2 > div,
html[lang="yi"] .csn-utfallbar-yta-h3 > div,
html[lang="yi"] .csn-utfallbar-yta-h4 > div,
html[lang="yid"] .csn-utfallbar-yta-h2 > div,
html[lang="yid"] .csn-utfallbar-yta-h3 > div,
html[lang="yid"] .csn-utfallbar-yta-h4 > div {
   padding-left: 0.75em;
   padding-right: 1.75rem;
}

html[lang="ar"] .csn-formatmall-utfallbar-yta-rubrik-h2,
html[lang="ar"] .csn-formatmall-utfallbar-yta-rubrik-h3,
html[lang="ar"] .csn-formatmall-utfallbar-yta-rubrik-h4,
html[lang="ckb"] .csn-formatmall-utfallbar-yta-rubrik-h2,
html[lang="ckb"] .csn-formatmall-utfallbar-yta-rubrik-h3,
html[lang="ckb"] .csn-formatmall-utfallbar-yta-rubrik-h4,
html[lang="fa"] .csn-formatmall-utfallbar-yta-rubrik-h2,
html[lang="fa"] .csn-formatmall-utfallbar-yta-rubrik-h3,
html[lang="fa"] .csn-formatmall-utfallbar-yta-rubrik-h4,
html[lang="prs"] .csn-formatmall-utfallbar-yta-rubrik-h2,
html[lang="prs"] .csn-formatmall-utfallbar-yta-rubrik-h3,
html[lang="prs"] .csn-formatmall-utfallbar-yta-rubrik-h4,
html[lang="ps"] .csn-formatmall-utfallbar-yta-rubrik-h2,
html[lang="ps"] .csn-formatmall-utfallbar-yta-rubrik-h3,
html[lang="ps"] .csn-formatmall-utfallbar-yta-rubrik-h4,
html[lang="yi"] .csn-formatmall-utfallbar-yta-rubrik-h2,
html[lang="yi"] .csn-formatmall-utfallbar-yta-rubrik-h3, 
html[lang="yi"] .csn-formatmall-utfallbar-yta-rubrik-h4,
html[lang="yid"] .csn-formatmall-utfallbar-yta-rubrik-h2,
html[lang="yid"] .csn-formatmall-utfallbar-yta-rubrik-h3,
html[lang="yid"] .csn-formatmall-utfallbar-yta-rubrik-h4 {
   padding: 0.45em 1.5em 0.45em 0.75em;
   padding-left: 0.75rem !important;
}

html[lang="ar"] .csn-utfallbar-yta-wrapper,
html[lang="ckb"] .csn-utfallbar-yta-wrapper,
html[lang="fa"] .csn-utfallbar-yta-wrapper,
html[lang="prs"] .csn-utfallbar-yta-wrapper,
html[lang="ps"] .csn-utfallbar-yta-wrapper,
html[lang="yi"] .csn-utfallbar-yta-wrapper,
html[lang="yid"] .csn-utfallbar-yta-wrapper {
   overflow: hidden;
   border-left: none;
   margin-left: 0;
   border-right: 2px solid #ee7c7d;
   margin-right: 10px;
   padding-right: 15px !important;
}

html[lang="ar"] .csn-utfallbar-yta-stang,
html[lang="ckb"] .csn-utfallbar-yta-stang,
html[lang="fa"] .csn-utfallbar-yta-stang,
html[lang="prs"] .csn-utfallbar-yta-stang,
html[lang="ps"] .csn-utfallbar-yta-stang,
html[lang="yi"] .csn-utfallbar-yta-stang,
html[lang="yid"] .csn-utfallbar-yta-stang {
   float: right;
}