.tw-bg-main {
    --tw-bg-opacity: inherit !important;
    background-color: inherit !important;
}

html {
    font-size: 10px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {

    font-size: 14px;
    line-height: 1.5;
    color: #000;
    background-color: #fff;
    font-weight: 300;
    letter-spacing: 0;
    /* Margin bottom by footer height */
    margin-bottom: 60px;
}

.footertext {
    color: #000 !important;
margin-top: 2rem;  }

p {
    margin: 0 0 10.5px;
}

b, optgroup, strong {
    font-weight: 700
}

a {
    color: #ec068d;
    text-decoration: none;
}

p a { 
  text-decoration: underline;
}
    a:hover,
    a:focus {
        color: #a10460;
        text-decoration: underline;
    }

    a:focus {
        outline: 5px auto -webkit-focus-ring-color;
        outline-offset: -2px;
    }


.h1, .h2, .h3, h1, h2, h3 {
    margin-top: 21px;
    margin-bottom: 10.5px;
   line-height:30px;
}

    .h1 .small, .h1 small, .h2 .small, .h2 small, .h3 .small, .h3 small, h1 .small, h1 small, h2 .small, h2 small, h3 .small, h3 small {
        font-size: 65%
    }

.h4 .small, .h4 small, .h5 .small, .h5 small, .h6 .small, .h6 small, .label, h4 .small, h4 small, h5 .small, h5 small, h6 .small, h6 small {
    font-size: 75%
}

h4, h3,  h5, h6 {
      margin-top:10.5px;
      margin-bottom:10.5px;

}
 
.h1, h1 {
    font-size: 36px;
}

.h2, h2 {
    font-size: 30px;
margin:3.5rem 0rem;
font-weight: 400;
    font-size: 3.5rem;
    line-height: 4rem;
}



.h3, h3 {
    font-size: 24px;
}

.h4, h4 {
    font-size: 18px;
   margin:3.5rem 0rem 2rem;
line-height: normal;
}

.well-white-noborder h4 {
margin-top:0px;
}

.h5, h5 {
    font-size: 14px
}

.h6, h6 {
    font-size: 12px
}

/* BTNS  */

.sifo-steps__link, .btn {
  margin-top: auto; text-decoration: none; 
  padding: 8px 12px; border-radius: 6px; border: 1px solid var(--sifo-brand); color:#000;
  background:#fff;
}

.sifo-steps__link:hover, .btn:hover { 
background: var(--sifo-brand); color: #fff !important;  /* fallback */
background: linear-gradient(to bottom, #5492f5, #0060FF); }


.add-unit a::after, .add-unit a, .more-unit a, .unit-back a, .choose-primary a  { 
  color:#000 !important;
}
.add-unit a:hover::after, .add-unit a:hover, 
.more-unit a:hover, .unit-back a:hover, .choose-primary a:hover { 
  color:#fff !important;  
}

/* End of BTNS  */



.listWithStyle {
display: block;
list-style-type: decimal;
margin:1rem 0rem;
padding-left: 1rem;
}

.listWithStyle li {
    padding: 1rem;
}

ol { 
   list-style-type: decimal; 
   list-style-position: inside; 
}

.twoBlockFlexDesk { 
    --gap: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
}

.alert-warning {
    color: #5A3E00;
    background-color: #FFF3CD;
    border-color: #ebca65;
    text-align: left;
    border-radius: 6px;
    padding: 12px 16px;
 display: flex;
  align-items: center;   
  gap: 2.5rem;                 
}

.iconAlert {
  flex-shrink: 0;            
  font-size: 1.4rem;       
}

/* 2025-09-25 Startpage block */


/* ===== SIFO Steps (unika klasser, ingen numrering) ===== */
:root{
  --sifo-radius: 5px;
  --sifo-gap: clamp(14px, 2.2vw, 24px);
  --sifo-brand: #1032CF;
  --sifo-ink: #111827;
  --sifo-muted:#4b5563;
  --sifo-card:#ffffff;
  --sifo-bg: #fff;
  --sifo-ring: rgba(16, 50, 207);
  --sifo-shadow: 0 6px 24px rgba(0,0,0,.08);
}
@media (prefers-color-scheme: dark){
  :root{
    --sifo-ink:#e5e7eb; --sifo-muted:#a3a9b6;
    --sifo-card:#0f172a; --sifo-bg:#0b1220; 
    --sifo-shadow: 0 10px 30px rgba(0,0,0,.45);
  }
}

.sifo-steps{ background: #ffff; 
padding:2rem; border-radius: var(--sifo-radius); }
.sifo-steps__wrap{  background: #ffff;  max-width: 1100px; margin: 0 auto; }
.sifo-steps__title{ 
  margin: 2rem 1rem; text-align:center; 
}

/* Flexbox-layout */
.sifo-steps__list{
  display: flex; flex-wrap: wrap; gap: var(--sifo-gap);
  margin: 0; 
padding: clamp(12px, 2.2vw, 18px); 
background:#fff;
  /* background: color-mix(in srgb, var(--sifo-card) 88%, transparent); */
  border: 0px solid rgba(17,24,39,.08); border-radius: var(--sifo-radius);
  justify-content: center; 
}

.sifo-steps__card{
  flex: 1 1 280px;     /* 1 kolumn (mobil), 2 (iPad), 3 (desktop) */
  min-width: 240px;
   display:grid;
     grid-template-rows: auto auto 1fr auto;
    justify-items:center;     /* centrera horisontellt */
  align-content:start;      /* börja från toppen */
  text-align:center;  
   gap: 10px;
  padding: clamp(16px, 2.2vw, 20px);
  background: #fff;
 border-radius: var(--sifo-radius);
  box-shadow: var(--sifo-shadow);
  border: 1px solid rgba(17,24,39,.06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;

  
}

.sifo-steps__card:hover{
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(0,0,0,.12);
  
}

/* Ikon */

.sifo-steps__icon{
  width: 56px; height: 56px; border-radius: 14px;
  display: grid; place-items: center;
  background: var(--sifo-ring); /* fallback */
background: linear-gradient(to bottom, #5492f5, #0060FF);
  color: #fff; /* styr ikonens linjefärg */

}
.sifo-steps__svg{ width: 34px; height: 34px; }


/* Text och länkar */
.sifo-steps__cardTitle{ margin: 2px 0 0; font-size: clamp(16px,1.8vw,18px); color: #000; }
.sifo-steps__text{ margin: 0 0 6px; color: var(--sifo-muted); line-height: 1.55; }

.sifo-steps__inlineLink{ color: var(--sifo-brand); text-decoration: underline; }

/* Footer-yta längst ned i kortet */
.sifo-steps__footer{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;     /* ≈ höjden på knappen */
  width: 100%;
}


.borderLeftSide, borderRightSide  {  
border-style: solid; margin:2rem;  }

.borderLeftSide {
  border-width: 0 0 0 1rem; /* endast vänster */
  border-image: linear-gradient(to bottom, #9f51cf, #802AB7) 1;
}

.borderRightSide {
  border-width: 0 1rem 0 0rem; /* endast höger*/
  border-image: linear-gradient(to bottom, #00E5BA, #019076) 1;
 }


/* Breakpoints (valfria, flex löser det mesta ändå) */
@media (max-width: 500px){  
 .sifo-steps{ padding:2rem 0rem; } 
.borderLeftSide { margin: 2rem 0rem; } 
}
@media (min-width: 600px){ .sifo-steps__card{ flex-basis: 320px; } }
@media (min-width: 1024px){ .sifo-steps__card{ flex-basis: 300px; } }

/* End of startpage block */


/* About mesurement */

ul.aboutMeasurementList { 
list-style:none; 
padding:0.5rem;
}

ul.aboutMeasurementList li {
   padding: 1rem;
   box-shadow: 0 2px 5px rgba(0,0,0,.12);
margin: 0.8rem;
}

ul.aboutMeasurementList:hover{
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(0,0,0,.12);
}

.aboutMesurmentBlockList { 
justify-content: start;
}
.aboutMesurmentBlockList section  {  
 min-width: 240px;
flex: 1 1 100%; 
background:#fff;
}

.aboutMesurmentBlockList > section:nth-child(-n+2) {
  flex: 1 1 28rem;
}

    /* 3PC Block Style */
  .faq3pcBlock .panel-default>.panel-heading {  background-color: #fff; }
  .faq3pcBlock .panel-group .panel { border-radius: 5px; }

 .faq3pcBlock   .panel-default>.panel-heading:hover {   border:2px solid #0060FF; }

@media (max-width: 768px) {
    .faq3pcBlock {
       display:none;
    }
}

/* 3pc instruction style  */

  /* Layout & typografi */

#notCompatibleBrowser .alert-warning { 
justify-content: center;
}
  .pc-h1{margin:0 0 8px;line-height:1.2}
  .pc-intro{margin:0 0 16px;color:#000}

  /* Select */
  .pc-field{margin:12px 0 16px}
  .pc-label{display:block;margin:0 0 6px;font-weight:600}
  .pc-select{
    width:100%;max-width:520px;appearance:none;
    padding:12px 14px;border:1px solid #e6e6ea;border-radius:12px;
    background:#ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23888' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center/14px 9px;
    font-size:16px;color:#0b0b10;
  }
  .pc-select:focus{outline:2px solid #0060FF;outline-offset:2px}

  /* Paneler & kort */
  .pc-panels{margin-top:8px}
  .pc-panel{margin:12px 0}
  .pc-panel[hidden]{display:none!important}
  .pc-panel h2,.pc-panel h3{margin:0 0 12px;line-height:1.25}
 .pc-panel h3  { font-size: 2rem; }
  .pc-card{
    background:#ffffff;
    border:1px solid #e6e6ea;
    padding:18px 16px;
    box-shadow:0 8px 24px rgba(0,0,0,.06);
    border-radius:16px;
  }

  /* Chunkade steg */
  .pc-steps{list-style:none;margin:8px 0 0;padding:0;counter-reset:pc-step}
  .pc-step{
    position:relative;display:flex;gap:12px;
    padding:14px 0;border-top:1px dashed #e6e6ea;
    flex-wrap:nowrap;align-items:center;
  }
  .pc-step:first-child{border-top:none}
  .pc-step::before{
    counter-increment:pc-step;content:counter(pc-step);
    flex:0 0 28px;height:28px;display:flex;justify-content:center;align-items:center;
    border-radius:5px;
    background:linear-gradient(to bottom, #5492f5, #0060FF);
    color:#ffffff;font-weight:700;font-size:13px;margin-top:2px;
  }
  .pc-step__head{font-size:16px;font-weight:600;color:#0b0b10}
  .pc-step__sub{margin:6px 0 0;padding-left:16px; list-style: disc; }
  .pc-step__sub li{margin:4px 0}
  .pc-step__sub em{color:#6a6b72;font-style:normal;font-size:.95em}

  /* Actions */
  .pc-actions{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap;align-items:center}
  .pc-btn{appearance:none;border:0;border-radius:12px;padding:10px 14px;font-weight:400;cursor:pointer;text-decoration:none;display:inline-block}
  .pc-btn--primary{background:#ffffff;color:#000000;border:1px solid #0060FF}
  .pc-btn--primary:hover{background:#0060FF;color:#ffffff}
  .pc-btn--link{background:transparent;color:#0060FF}
  .pc-btn--link:hover{text-decoration:underline}

  @media (max-width:480px){
    .pc-step{padding:10px 0}
    .pc-step::before{flex-basis:26px;height:26px;font-size:12px}
    .pc-step__head{font-size:15px}
  }

/* end of 3pc */
