/******************************************************
csn-brytpunkt-telefon.css

CSN Brytpunkt telefon

Styling som appliceras vid brytpunkten Telefon.

PS. Denna fil ligger i grundmallen och aktiveras bara på brytpunkt: Telefon (0-768)

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

/*
.sv-theme-csn-standard .csn-sidcontainer {
   padding-inline: 1rem;
}
*/

/******************************************************
Cookiebar
******************************************************/
.csn-cookiebar {
   padding-top: 1.2em;
}

.csn-cookiebar .csn-formatmall-kakor-rubrik {
   font-size: 20px;
}

.csn-cookiebar .csn-formatmall-kakor-brodtext {
   font-size: 15px;
}

.csn-cookiebar .csn-formatmall-kakor-lank {
   font-size: 16px;
}

/******************************************************
Betabar
******************************************************/
html .csn-betabar {
   color: #fff;
   color: rgba(255, 255, 255, 0.76);
   font-size: 14px;
}

/******************************************************
Slogan
******************************************************/
a.csn-slogan.csn-formatmall-rubrik-1 {
   font-size: 27px;
}

/******************************************************
Cookiebar
******************************************************/
.csn-cookiebar {
   padding-bottom: 1.3em;
}

.csn-cookiebar .csn-cookiebar__stang {
   position: inherit;
   margin-top: 1em;
}

/******************************************************
Puffar
******************************************************/
.csn-puffar .sv-row > .sv-layout {
   margin-top: 2em;
}

.csn-puffar .sv-row > .sv-layout:first-child {
   margin-top: 0;
}

/******************************************************
Meny
******************************************************/
.csn-toppmeny .csn-meny .csn-knapp-rod {
   display: block;
   background: transparent;
   height: auto;
   padding-top: 0.5rem;
   margin: 0;
   font-size: 0.9rem;
}

.csn-toppmeny .csn-meny .csn-knapp-rod:before {
   display: block;
   margin: auto;
   width: 24px;
   height: 24px;
   background-size: 24px 24px;
   margin-bottom: 5px;
}

html .csn-login-meny {
   border-top-right-radius: 3px;
}
   
/******************************************************
Sök
******************************************************/
.csn-formular-sok.focus .csn-formular-sokknapp {
   background-color: #e4022d;
   color: white;
   opacity: 1 !important;
}


.csn-breadcrumbs li a,
.csn-breadcrumbs li span {
   white-space: nowrap;
   max-width: 250px;
   overflow: hidden;
   text-overflow: ellipsis;
}

/******************************************************
Taggar
******************************************************/
.csn-tags-container {
   height: 38px;
   margin-bottom: 24px;
}

.csn-tags-container--scroll-left-hint:before,
.csn-tags-container--scroll-right-hint:after {
   width: 16px !important;
}

.csn-tags-container:before {
   content: '';
   position: absolute;
   top: 0;
   bottom: 0;
   width: 0;
   z-index: 1;

   -webkit-transition: width 0.2s ease;
   -moz-transition: width 0.2s ease;
   -o-transition: width 0.2s ease;
   transition: width 0.2s ease;

   /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+0,0+100 */
   background: -moz-linear-gradient(left,  rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
   background: -webkit-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
   background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
}

.csn-tags-container:after {
   content: '';
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   width: 0;
   z-index: 1;

   -webkit-transition: width 0.2s ease;
   -moz-transition: width 0.2s ease;
   -o-transition: width 0.2s ease;
   transition: width 0.2s ease;

   /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,1+100 */
   background: -moz-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
   background: -webkit-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
   background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
}

.csn-tags {
   overflow-x: scroll;
   overflow-y: hidden;
   white-space: nowrap;
   height: 57px;
   -webkit-overflow-scrolling: touch;
}

.csn-tags a,
.csn-tags span {
   font-size: 0.875rem;
   line-height: 30px;
}

.csn-tags a:last-child {
   margin-right: 3px !important;
}

/******************************************************
Sidfot
******************************************************/
.csn-sidfot-bottenlankar p {
   width: 100%;
   padding-top: 0.5rem;
}

.csn-sidfot-bottenlankar-fnul {
   width: 9em !important;
   background-size: 9em 13em !important;
   right: 0 !important;
}

.csn-sidfot-bottenlankar-fnul:before {
   display: none !important;
}

/******************************************************
Frågor & svar
******************************************************/
.csn-fragorochsvar-rubrik .sv-text-portlet {
   float: none;
   clear: both;
   padding-left: 1.75em;
}

/******************************************************
Hjälpbubbla
******************************************************/
.csn-hjalpbubbla__ikon {
   height: 21px !important;
}

/******************************************************
Menylista
******************************************************/
.csn-menylista {
   padding-left: 1em;
   margin: 0;
}

.csn-menylista.hover {
   background-color: rgba(255, 209, 100, 0.2);
}

.csn-menylista .csn-formatmall-brodtext {
   max-width: none;
}

.csn-menylista-container--kompakt .csn-menylista .csn-formatmall-rubrik-3-rod {
   border: 0 !important;
}

/******************************************************
Feedbackknapp
******************************************************/
html .csn-feedback {
   left: 16px;
   right: inherit;
   bottom: 0;
   transform: rotate(0deg);
}

html .csn-feedback--flash {
   transform: rotate(0deg) scale(3) translateZ(0);
   background: #624186;
}

/******************************************************
Rubriker
******************************************************/
.csn-formatmall-rubrik-1 {
   font-size: 2rem;
}

.csn-formatmall-rubrik-1:last-child {
   margin-bottom: 1.5rem;
}

.csn-formatmall-rubrik-2 {
   font-size: 1.5rem;
}

.csn-formatmall-rubrik-2:last-child {
   margin-bottom: 1.25rem;
}

.csn-formatmall-rubrik-3 {
   font-size: 1.25rem;
}

.csn-formatmall-rubrik-3:last-child {
   margin-bottom: 1rem;
}

html .csn-formatmall-ingress {
   font-size: 1.125rem;
}

/** Footer **/

.csn-formatmall-stor-gul {
    font-size: 1.5rem;  
}

.csn-formatmall-rubrik2-vit {
    font-size: 1.25rem;  
}

/* Mindre typsnittstorlekar i mobil */

.csn-formatmall-brodtext {
    font-size: 18px;  
}

.csn-formatmall-rubrik-1 {
    font-size: 32px;  
}

.csn-formatmall-rubrik-2,
html .sv-toc-portlet:before {
    font-size: 24px;  
}

.csn-formatmall-rubrik-3-rod {
   font-size: 22px;
}

.csn-formatmall-utfallbar-yta-rubrik-h2,
.csn-formatmall-utfallbar-yta-rubrik-h3,
.csn-formatmall-utfallbar-yta-rubrik-h4 {
   font-size: 18px;
}

.csn-formatmall-utfallbar-yta-rubrik-h2 .halflings-icon,
.csn-formatmall-utfallbar-yta-rubrik-h3 .halflings-icon,
.csn-formatmall-utfallbar-yta-rubrik-h4 .halflings-icon {
   margin-top: 8px !important;
}

.csn-formatmall-liten-vit,
.csn-formatmall-liten-svart,
.csn-formatmall-liten-gul {
   font-size: 15px;
}

.csn-breadcrumbs .csn-formatmall-brodsmulemeny {
   font-size: 14px;
}

.csn-breadcrumbs li img {
   padding-top: 15px;
}

/******************************************************
Blänkare
******************************************************/
.csn-formatmall-blankare-rubrik,
.csn-formatmall-blankare-brodtext {
   font-size: 14px !important;
}

/******************************************************
Tabell (this is a monster)
******************************************************/
.sv-text-portlet table.csn-tabell-standard td,
.sv-text-portlet table.csn-tabell-standard th,
.sv-text-portlet table.csn-tabell-standard td a,
.sv-text-portlet table.csn-tabell-standard td p,
.sv-text-portlet table.csn-tabell-standard th p,
.sv-text-portlet table.csn-tabell-standard td span,
.sv-text-portlet table.csn-tabell-standard--scroll td,
.sv-text-portlet table.csn-tabell-standard--scroll th,
.sv-text-portlet table.csn-tabell-standard--scroll td a,
.sv-text-portlet table.csn-tabell-standard--scroll td p,
.sv-text-portlet table.csn-tabell-standard--scroll th p,
.sv-text-portlet table.csn-tabell-standard--scroll td span,
.sv-text-portlet table.csn-tabell-standard--text td,
.sv-text-portlet table.csn-tabell-standard--text th,
.sv-text-portlet table.csn-tabell-standard--text th p,
.sv-text-portlet table.csn-tabell-standard--text td a,
.sv-text-portlet table.csn-tabell-standard--text td p,
.sv-text-portlet table.csn-tabell-standard--text td span,
.sv-text-portlet table.csn-tabell-standard--text--scroll td,
.sv-text-portlet table.csn-tabell-standard--text--scroll th,
.sv-text-portlet table.csn-tabell-standard--text--scroll th p,
.sv-text-portlet table.csn-tabell-standard--text--scroll td a,
.sv-text-portlet table.csn-tabell-standard--text--scroll td p,
.sv-text-portlet table.csn-tabell-standard--text--scroll td span {
  font-size: 0.875rem;
}

html body .sv-text-portlet .csn-tabell-standard--scroll td,
html body .sv-text-portlet .csn-tabell-standard--scroll th{
   min-width: 3.45rem;
}

/******************************************************
Extern film
******************************************************/
html p.csn-extern-film-titel {
   font-size: 1.5rem;
}

html .csn-extern-film__knapp--banner > .csn-extern-film__textbehallare > p.csn-formatmall-brodtext {
   font-size: 0.65rem;
}

html .csn-extern-film__startknapp--banner{
   height: 3.5rem;
   background-size: 3.5rem;
   margin-top: 0.25rem;
}

/******************************************************
Sökresultat
******************************************************/
html .csn-formatmall-sokresultat-rubrik {
   font-size: 18px;
}

html .csn-formatmall-sokresultat-utdrag {
   font-size: 16px;
}

html .csn-formatmall-sokresultat-datum,
html .csn-formatmall-sokresultat-brodsmulor,
html .csn-formatmall-sokresultat-brodsmulor a {
   font-size: 12px;
}

/******************************************************
Webbkarta
******************************************************/
.csn-sitemap ul {
   font-size: 16px;
}

/******************************************************
Formulärknappar
******************************************************/
.csn-knapp-container--mobile-fill .csn-knapp {
   margin-left: 0;
   width: 100%;
}

.csn-knapp-container--mobile-fill .csn-knapp {
   margin-bottom: 1rem;
}

.csn-knapp-container--mobile-fill .csn-knapp:last-child {
   margin-bottom: 0;
}

/******************************************************
Arkivlistning
******************************************************/
.csn-arkivlistning li a:hover:before {
    display: none !important;
}

.csn-arkivlistning li a.hover {
   background-color: rgba(255, 209, 100, 0.2);
}

.csn-arkivlistning-filter a {
   float: left;
}

/******************************************************
Sidmeny
******************************************************/
html .csn-formatmall-horisontell-meny {
   font-size: 17px;
}

/******************************************************
Punktlista i utfällbar yta
******************************************************/
.csn-utfallbar-yta-wrapper .sv-text-portlet ul {
    padding-left: 21px !important;
}

/******************************************************
Padding i utfällbar yta
******************************************************
html .csn-utfallbar-yta-h2 > div,
html .csn-utfallbar-yta-h3 > div,
html .csn-utfallbar-yta-h4 > div {
   padding-left: 0.75em;
}
utkommenterad 240924*/
/******************************************************
HTML-banner
******************************************************/
html body .csn-HTML-banner__text {
   padding-left: 1rem;
}
html body .csn-HTML-banner--htv .csn-HTML-banner__text {
   padding-right: 1rem;
}

/******************************************************
CSN Brytpunkt liten telefon

Styling som appliceras vid brytpunkten liten telefon.

******************************************************/
@media screen and (max-width: 320px) {
   .csn-formatmall-rubrik-3 {
      font-size: 18px;
   }
   
   .csn-formatmall-brodtext {
      font-size: 16px;
   }

   .csn-formatmall-rubrik-1 {
      font-size: 28px;
   }

   .csn-formatmall-rubrik-2,
   html .sv-toc-portlet:before {
      font-size: 22px;  
   }

   .csn-formatmall-rubrik-3-rod {
      font-size: 20px;
   }

   .csn-formatmall-rubrik-4 {
      font-size: 14px;
   }

   .csn-formatmall-utfallbar-yta-rubrik-h2,
   .csn-formatmall-utfallbar-yta-rubrik-h3,
   .csn-formatmall-utfallbar-yta-rubrik-h4 {
      font-size: 16px;
   }

   html .csn-formatmall-utfallbar-yta-rubrik-h2 .halflings-icon,
   html .csn-formatmall-utfallbar-yta-rubrik-h3 .halflings-icon,
   html .csn-formatmall-utfallbar-yta-rubrik-h4 .halflings-icon {
      margin-top: 6px !important;
   }

   .csn-breadcrumbs .csn-formatmall-brodsmulemeny {
      font-size: 13px;
   }

   .csn-breadcrumbs li img {
      padding-top: 14px;
   }

   html .csn-betabar {
      font-size: 13px;
   }

   .sv-text-portlet table.csn-tabell-standard td,
   .sv-text-portlet table.csn-tabell-standard th,
   .sv-text-portlet table.csn-tabell-standard td a,
   .sv-text-portlet table.csn-tabell-standard td p,
   .sv-text-portlet table.csn-tabell-standard th p,
   .sv-text-portlet table.csn-tabell-standard td span,
   .sv-text-portlet table.csn-tabell-standard--scroll td,
   .sv-text-portlet table.csn-tabell-standard--scroll th,
   .sv-text-portlet table.csn-tabell-standard--scroll td a,
   .sv-text-portlet table.csn-tabell-standard--scroll td p,
   .sv-text-portlet table.csn-tabell-standard--scroll th p,
   .sv-text-portlet table.csn-tabell-standard--scroll td span,
   .sv-text-portlet table.csn-tabell-standard--text td,
   .sv-text-portlet table.csn-tabell-standard--text th,
   .sv-text-portlet table.csn-tabell-standard--text th p,
   .sv-text-portlet table.csn-tabell-standard--text td a,
   .sv-text-portlet table.csn-tabell-standard--text td p,
   .sv-text-portlet table.csn-tabell-standard--text td span,
   .sv-text-portlet table.csn-tabell-standard--text--scroll td,
   .sv-text-portlet table.csn-tabell-standard--text--scroll th,
   .sv-text-portlet table.csn-tabell-standard--text--scroll th p,
   .sv-text-portlet table.csn-tabell-standard--text--scroll td a,
   .sv-text-portlet table.csn-tabell-standard--text--scroll td p,
   .sv-text-portlet table.csn-tabell-standard--text--scroll td span {
     font-size: 0.75rem;
   }
   
   html body .sv-text-portlet .csn-tabell-standard--scroll td,
    html body .sv-text-portlet .csn-tabell-standard--scroll th {
     min-width: 3rem;
    }

   html p.csn-extern-film-titel {
    font-size: 1.3rem;
   }

   html .csn-extern-film__startknapp--banner{
    height: 3rem;
    background-size: 3rem;
   }
   
   .csn-modal-feedback--content[data-final='true'] {
       padding: 4em 4px !important; /*Important på grund av inline-style attribut*/
    }
}