@font-face {
      font-family: 'Font Awesome 6 Free';
      font-style: normal;
      font-weight: 700;
      font-display: swap;
      src: url('/download/18.1f9c4ac818f50f5856613181/1680075772584/fa-solid-900.woff2') format('woff2')
   }

   @font-face {
      font-family: 'Poppins-Regular';
      font-style: normal;
      font-display: swap;
      src: url('/download/18.1f9c4ac818f50f5856613327/1684315252079/Poppins-Regular.woff2') format('woff2');
   }

   @font-face {
      font-family: 'Poppins-SemiBold';
      font-style: normal;
      font-display: swap;
      src: url('/download/18.1f9c4ac818f50f5856613326/1684315242179/Poppins-SemiBold.woff2') format('woff2');
   }


.sv-defaultlist {
	  list-style-type: disclosure-closed;
   padding: 0;
    margin: 0;
    border-color: #aaa!important;
}


   .keyboard-focus:focus {
      outline: 2px solid black;
   }

   .tabindex1 {
      font-family: poppins-regular, sans-serif;
      font-size: 1.5em;
      display: none;
      width: 100%;
      text-align: center;
      position: absolute;
      background-color: rgba(0, 102, 175, 0.8);
      /* Här använder vi rgba() för att göra bakgrunden genomskinlig */
      color: #ffffff!important;
      z-index: 1000;
      padding-top: 10px;
      padding-bottom: 10px;
      height: 55px;
      /* Centrering och justering i höjdled */
      align-items: center;
      justify-content: center;
   }

   .tabindex1 a {
      text-decoration: none;
      color: #ffffff;
      padding-top: 10px;
      padding-bottom: 10px;
      height: 55px;
      /* Centrering och justering i höjdled */
      text-align: center;
   }

   img {
      border: 0;
      max-width: 100%;
      height: auto;
      position: relative;
    	z-index: 999;
   }

   .search-box-text {
      border-radius: 20px;
      outline: none;
      padding: 10px 25px;
      box-sizing: border-box;
      border: 1px solid var(--color-grey);
      font-family: poppins-regular, sans-serif;
      width: 360px;
      font-size: 15px;
      font-weight: 400;
      min-height: 43px;
   }

   #searchicon-toggle-button {
      width: 40px;
      height: 40px;
      background-image: url(/images/18.1f9c4ac818f50f585666dd6/1691412802001/icon-search-black.svg);
      background-repeat: no-repeat;
      background-position: center center;
      background-size: 35px;
      border: 0;
      background-color: transparent;
      cursor: pointer;
   }

   #searchicon-toggle-button[aria-expanded="true"] {
      background-image: url(/images/18.1f9c4ac818f50f58566f4d0/1691413160798/icon-close-black.svg);
      z-index: 99999;
   }

   #search-box {
      display: none;
      /* Set it to none by default */
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 80px;
      background-color: rgba(241, 241, 241, 0.8);
      /* Här använder vi rgba() för att göra bakgrunden genomskinlig */
      font-family: poppins-regular, sans-serif;
      font-weight: 400;
      /* Poppins Regular */
      font-size: 16px;
      color: #333;
      padding: 20px;
      box-sizing: border-box;
      z-index: 9998;
      align-items: center;
      justify-content: center;
   }

   #search-box p {
      margin: 0;
   }

  
 

  
   .fa-minus:after {
      display: block;
      font-size: 1em;
      font-family: "Font Awesome 6 Free";
      font-weight: 600;
      color: #FFFFFF;
      content: "\f068";
   }

   .fa-plus:after {
      display: block;
      font-size: 1em;
      font-family: "Font Awesome 6 Free";
      font-weight: 600;
      color: #FFFFFF;
      content: "\2b";
   }

   a.rek-link.normal {
      text-decoration: none!important;
      border: 2px solid #005095;
      border-radius: 3rem;
      height: 2rem;
      background: transparent!important;
      align-items: center;
      margin-right: 0.625rem;
      margin-top: 0.625rem;
      display: inline-flex;
      padding-left: 15px;
      padding-right: 15px;
      font-size: 1.5em;
      font-weight: bold;
      color: #005095;
   }

   a.rek-link.normal:hover {
      text-decoration: none!important;
      background-color: #005095!important;
      color: #FFFFFF!important;
      border-radius: 3rem;
      height: 2rem;
      align-items: center;
      margin-right: 0.625rem;
      margin-top: 0.625rem;
      display: inline-flex;
      padding-left: 15px;
      padding-right: 15px;
      font-size: 1.5em;
      font-weight: bold;
   }

   

   .env-form-input {
      background-color: var(--env-form-input-background-color);
      background-image: none;
      border: 1px solid #555;
      border-radius: var(--env-form-input-border-radius);
      box-sizing: border-box;
      color: #000000;
      display: block;
      font-size: 140%;
      line-height: 1.375;
      margin: 0;
      padding: 0.625em 0.75em;
      transition: box-shadow .2s ease-in-out;
      width: 100%;
   }

   <!--Plusbox-->.sol-expandable__header {
      appearance: none;
      background: 0 0;
      border: none;
      position: relative;
      padding: 18px 60px 18px 20px;
      font-size: 1.125rem;
      font-weight: 700;
      font-family: poppins-regular, sans-serif;
      cursor: pointer;
      width: 100%;
      text-align: left;
      margin-bottom: -1px
   }

   .sol-expandable {
      border: 1px solid #ced4da;
      position: relative;
      margin-bottom: 10px;
      background: #fff;
      border-radius: 10px
   }

   .sol-expandable__header--active::after {
      content: "\f068";
      border-bottom-right-radius: 0
   }

   .sol-expandable .sv-decoration-content,
   .sol-expandable__content {
      padding: 10px 20px;
      display: none
   }

   .sol-expandable__header {
      appearance: none;
      background: 0 0;
      border: none;
      position: relative;
      padding: 18px 60px 18px 20px;
      font-size: 1.125rem;
      font-weight: 700;
      font-family: poppins-regular, sans-serif;
      cursor: pointer;
      width: 100%;
      text-align: left;
      margin-bottom: -1px
   }

   .sol-expandable__header::after {
      display: inline-block;
      font-size: 1.25rem;
      font-family: "Font Awesome 6 Free";
      font-weight: 300;
      content: "\f067";
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      width: 55px;
      background-color: #0067af;
      display: flex;
      color: #fff;
      align-items: center;
      justify-content: center;
      border-radius: 0 10px 10px 0
   }

   .sol-expandable__header--active::after {
      font-family: "Font Awesome 6 Free";
      font-weight: 300;
      content: "\f068";
      border-bottom-right-radius: 0
   }

   .sol-expandable .sv-decoration-content,
   .sol-expandable__content {
      padding: 10px 20px;
      display: none
   }

/* Media query för mobilläge */
@media (max-width: 800px) {
  .sol-top-action-links {
    flex-direction: column; /* Ställ om till att stapla raderna på varandra */
    align-items: center; /* Centrera innehållet vertikalt */
  }
  
  .sol-top-action-row {
    flex-direction: column; /* Stapla även dessa element på varandra */
  }
   
   .sol-top-action-button {
	text-align: center;
	width: 100%!important;
   
	}
}

.sol-top-action-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.sol-top-action-row {
  display: flex;
  justify-content: space-between; /* Sprid ut elementen jämnt över raden */
  align-items: center; /* Centrera vertikalt */
  width: 100%;
  max-width: 800px;
  margin: 0 auto 10px;
}

.sol-top-action-button {
	text-align: center;
	width: calc(25% - 20px);
   font-size: 1rem!important;
      
      font-family: poppins-regular, sans-serif;
      font-weight: 400;
      cursor: pointer;
      text-decoration: none;
   
}

.sol-top-action-image {
  max-width: 100%;
  height: auto;
   padding:1em;
   
}

   mark {
      background-color: YELLOW!IMPORTANT;
      color: marktext;
   }

   .sol-expandable h2 {
      margin: 0px;
   }

   .c4714 {
      width: 80%!important;
      border: none;
      background-color: transparent;
   }

   .env-dropdown__menu {
      max-width: 25em!important;
      z-index: 99999;
   }

   .env-button-menu {
      align-items: center;
      -webkit-appearance: none;
      appearance: none;
      background-color: transparent!important;
      border: none;
      color: #555555;
      cursor: pointer;
      display: inline-flex;
      font-family: poppins-regular, sans-serif;
      font-size: 140%;
      font-weight: 400;
      justify-content: center;
      margin: 0;
      min-height: 2.75em;
      padding: 0 1.3125em;
      text-align: center;
      text-decoration: none;
      transition: box-shadow .2s ease-in-out;
      -webkit-user-select: none;
      user-select: none;
      vertical-align: middle;
   }

   .env-button-menu:active,
   .env-button-menu:focus,
   .env-button-menu:hover {
      color: #3a71aa;
   }

   .env-icon-menu {
      color: #555555;
      height: 0.8em;
      width: 0.8em;
      margin-left: 1em;
      margin-top: 0.2em;
   }

   .env-button,
   .env-button>div:not([class]):not([style]),
   .env-button>span:not([class]):not([style]) {
      line-height: 1;
      font-size:1rem;
   }

/* Media query för mobila enheter */
@media (max-width: 768px) {
  .herobanner {
    background-size: cover!important;
    max-height: 70vh; /* Justera höjden efter behov */
    width: 100%; /* Elementet tar upp hela bredden av sitt förälderelement */
  	 aspect-ratio: 16 / 9!important; /* Exempel på en aspect ratio (16:9) */
  	 min-height: calc(100vw * 9 / 16)!important; /* Kalkylerad min-height baserat på aspect ratio */
    
  }
   
   .herobanner-undermeny {
    min-height: 30vh!important;

 }
}

.herobanner {
    max-height: 100vh;
    min-height: 70vh;
    background-position: top left;
    background-repeat: no-repeat;
   background-size: cover;
    }

.herobanner-undermeny {
    max-height: 100vh;
    min-height: 40vh;
    background-position: top left;
    background-repeat: no-repeat;
   background-size: cover;
    }
  

   .herobanner-bottom:after {
      background-image: url(/images/18.1f9c4ac818f50f5856612470/1684328570458/slider-bottom.svg);
      background-position: bottom;
      background-size: cover;
      background-repeat: no-repeat;
      bottom: -3.5vw;
      content: '';
      display: block;
      height: 13vw;
      left: 0;
      position: absolute;
      width: 100%;
      z-index: 101;
   }

   .bg-overlay {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 10vw;
      overflow: hidden;
      -o-transform: translateZ(0);
      -ms-transform: translateZ(0);
      -moz-transform: translateZ(0);
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
   }

   .blurb-section:after {
      background-image: url(/images/18.1f9c4ac818f50f58566127f2/1686321158777/blue-section.svg);
      background-position: bottom;
      background-size: cover;
      background-repeat: no-repeat;
      bottom: -6.4vw;
      content: '';
      display: block;
      height: 6.4vw;
      left: 0;
      position: absolute;
      width: 100%;
      z-index: 101;
   }

   .blurb-section:before {
      background-image: url(/images/18.1f9c4ac818f50f58566127fa/1686319327492/section-shape.svg);
      background-position: bottom;
      background-size: cover;
      background-repeat: no-repeat;
      content: '';
      display: block;
      height: 6vw;
      left: 0;
      position: absolute;
      top: -1px;
      width: 100%;
      z-index: 101;
   }

   .news-section:before {
      background-image: url(/images/18.1f9c4ac818f50f58566127f5/1686320280037/barn-header.svg);
      background-position: bottom;
      background-size: cover;
      background-repeat: no-repeat;
      content: '';
      display: block;
      height: 6.3vw;
      left: 0;
      position: absolute;
      top: 0;
      width: 100%;
      z-index: 11;
   }

   .image-grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      /* Skapar tre lika breda kolumner */
      grid-gap: 0px;
      /* Mellanrum mellan bilderna */
   }

   .image-grid img {
      max-width: 100%;
      /* Begränsa bildernas bredd till 100% av förälderelementets bredd */
      height: auto;
      /* Säkerställ att höjden justeras proportionellt */
      width: auto;
      /* Säkerställ att bredden justeras proportionellt */
   }

/* Mobilspecifik CSS */
.mobile .image-grid  {
    grid-template-columns: 1fr; /* Ändrar till en kolumn på skärmar som är högst 600px breda */
}

.mobile .hide-in-mobile  {
	display:none
}



@media screen and (max-width: 600px) {
  .image-grid {
    grid-template-columns: 1fr; /* Ändrar till en kolumn på skärmar som är högst 600px breda */
  }
   
	.button-grid {
     grid-template-columns: 1fr!important; /* Ändrar till en kolumn på skärmar som är högst 600px breda */
     top: 50%!important;
      height: 50vh; /* Justera höjden efter behov */
     z-index:50;
    }
 
  

   .hide-in-mobile  {
	display:none
	}
   
.FW-header:before {
    background-image: url(/images/18.1f9c4ac818f50f58566127e2/1691569336970/foraldrawebben-footer.svg);
    background-position: top;
    background-size: 100%;
    background-repeat: no-repeat;
    content: '';
    display: block;
    height: 5.6vw;
    left: 0;
    position: absolute;
    top: 137px!important;
    width: 100%;
    z-index: 11;
}
   
   
}/*slut på mobilvy*/

.button-grid-container {
  position: relative;
  max-width: 100%;
  width: auto;
  height: 70vh;
}

.button-grid {
     display: grid;
  		grid-template-columns: 1fr 1fr 1fr;
  		grid-gap: 10px; /* Justera gap efter behov */
  		max-width: 100%!important;
   	min-width: 100%!important;
      /* Begränsa bildernas bredd till 100% av förälderelementets bredd */
      height: auto;
      /* Säkerställ att höjden justeras proportionellt */
      width: auto;
      /* Säkerställ att bredden justeras proportionellt */
   	position: relative;
  		/*top: 65%;
  		left: 50%;
  		transform: translate(-50%, -50%);*/
  }

  


   .PN3kf117vgdDbNBzt8nU {
      font-size: 1em!important;
      color: var(--env-font-color);
      display: block;
      padding: var(--env-spacing-medium) 1.6em;
      text-decoration: none;
      border-bottom: 4px solid #0063a8!important;
   }

   .env-dropdown__item,
   .env-dropdown__menu {
      font-family: var(--env-font-family);
      margin: 0;
      font-size: small!important;
   }

   .flex-holder {
      display: flex;
      flex-wrap: wrap;
      align-items: stretch;
      justify-content: flex-start;
   }



.EijGg3DD7AMrv4ryC3tj {
      color: #ffffff!important;
      display: block;
      padding: var(--env-spacing-small) 48px var(--env-spacing-small) 10px;
      text-decoration: none;
      line-height: 1.5;
      font-size:1rem!important;
      min-height: 0px!important;
   }

/* Gemensamma regler för båda lägen */
.xezF9ru3TE5SSITf2YSh {
    position: fixed;
    z-index: 2147483647;
    background-color: transparent!important;
    top: 2vh!important;
    padding-top: 50px!important;
    padding-left: 0px!important;
    padding-right: 0px!important;
    overflow-x: hidden;
    overflow-y: auto;
}

/* För desktop-läge */
@media (min-width: 768px) {
    .xezF9ru3TE5SSITf2YSh {
      
        right: 0;
        bottom: 0;
        left: auto!important;
        width: 100vh!important;
    }
}

/* Centrera i mobil-läge */
@media (max-width: 767px) {
    .xezF9ru3TE5SSITf2YSh {
        top: 12vh!important;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%!important;
    }
}

   .SBnE8X_5uU5yUCP4RBVU {
      color: #ffffff!important;
      text-decoration: none;
      line-height: 1.5;
      background: #0067af;
		
      min-height: 0px!important;
   }

   .SBnE8X_5uU5yUCP4RBVU ul {
      padding-left: 0px!important;
      font-size: 1rem!important;
      background: #0180d9;
   }

   .SBnE8X_5uU5yUCP4RBVU ul li {
      font-size: 1rem!important;
      background: #0180d9;
   }

   .SBnE8X_5uU5yUCP4RBVU ul li a {
      margin-left: 16px;
     font-size: 1rem!important;
   }

   .SBnE8X_5uU5yUCP4RBVU ul li li a {
      margin-left: 32px;
		font-size: 1rem!important;
   }

   .SBnE8X_5uU5yUCP4RBVU ul li li li a {
      margin-left: 48px;
      font-size: 1rem!important;
   }

   .SBnE8X_5uU5yUCP4RBVU ul li li {
		font-size: 1rem!important;
      background: #0491f3;
   }

   .SBnE8X_5uU5yUCP4RBVU ul li li li {
      font-size: 1rem!important;
      background: #29a2f7;
   }

/* Media query för mobila enheter */
@media (max-width: 440px) {
  .FW-logo {
     padding-top:1em;
    display: flex;
    justify-content: center;
    align-items: center;
    width:100%;
  }
    .FW-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    width:100%;
  }
 
   
   .search-box-text {  
      width: 40vh;  
   }



}

#svid10_4c7dae8b189d300fe3810f {
    width: 100%!important;
    max-width: fit-content;
    
}


.c6177 {
  
    /* Centrera bilden och täcka hela elementet */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

}

.FW-header:before {
    background-image: url(/images/18.1f9c4ac818f50f58566127e2/1691569336970/foraldrawebben-footer.svg);
    background-position: top;
    background-size: 100%;
    background-repeat: no-repeat;
    content: '';
    display: block;
    height: 5.6vw;
    left: 0;
    position: absolute;
    top: 124px;
    width: 100%;
    z-index: 11;
}

@media (max-width: 770px) {
.fixed-mobile{
		display: none;
}
}

.env-p-around--xx-small {
    padding: 1em!important;
}

.sv-newslist .sv-newslist__gallery-item__image {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-color: rgba(0, 0, 0, 0.5); /* Här är 0.5 genomskinlighetsvärdet */
    border-radius: 20px 20px 0px 0px;
}

.sv-newslist .sv-newslist__gallery-item article {
    position: relative;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    word-break: break-word;
    border-radius: 20px;
}

.sv-buddy-icon, .sv-corner-all {
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -khtml-border-radius: 20px;
    border-radius: 20px;
    padding: 1em;
}


   .env-button.o_XegxhHZgYUckszFIwq.env-button--large.env-button--icon.env-button--link {
      position: fixed;
      top: 1%;
      right: 1%;
      color:#ffffff;
      background-color: var(--env-element-background-color);
   }


@media (prefers-color-scheme: dark) {
    .c1000 {
        background-color: #252525 !important; /* Mörkare blå för dark mode */
    }
    .news-section::before {
        background: none !important;  /* Tar bort bakgrundsbilden */ 
    }
   
   .blurb-section:before {
      background-image: none !important;  /* Tar bort bakgrundsbilden */ 
	}
       
}