:root{
  --primary:#2563EB;
  --primary-light: #dbeafe;
  --secondary:#22C55E;
  --black:#17161b;

  --page-bg:#f1f5f9;
  --sidebar-bg:hsl(240, 5.3%, 96%);
  --radius:25px;
  --font-header:"Raleway", sans-serif;
  --font2: "IBM Plex Sans", sans-serif;
  --fs:15px;
  --bs-secondary-color:#17161b;

}


.text-muted {
    --bs-text-opacity: 1;
    color: var(ç)!important;
}

html, body { height:100%; }
body{
  font-family:var(--font2);
  font-size:var(--fs);
  background:var(--page-bg);
  color:var(--black);
}

/* Smooth font rendering */
html, body {
  -webkit-font-smoothing: antialiased;  /* Safari/Chrome (macOS/iOS) */
  -moz-osx-font-smoothing: grayscale;   /* Firefox (macOS) */
  text-rendering: optimizeLegibility;   /* Bedre kerning/ligaturer der støttet */
}

.h2, h2,
.h3, h3, 
.h4, h4,
.h5, h5,
.h6, h6 {

  font-size:24px;
  font-weight:800;
  font-family:var(--font-header);

}

.h2, h2  {font-size:30px;}
.h3, h3  {font-size:24px;}
.h6, h6  {font-size:18px;}

.small, small {
  font-size:16px;
}

.card, .btn, .form-control, .form-select{
  border-radius:var(--radius) !important;
}

.iconsidebar {
  margin-right:10px;
}
#item2.iconsidebar {
  margin-right:11.5px;
}

.sidebar{
  background:var(--sidebar-bg);
  box-shadow: 0px 0px 30px 0px rgba(200, 208, 216, 0.3);
  border-right: 1px solid #ddd;
}

.sidebar .btn{
  background:transparent;
  border:1px solid transparent;
  font-size: 14px;
}

.badge-pill{
  border-radius:999px;
  padding:.45rem .75rem;
  font-weight:600;
}

/* Step bubbles (matches your UI) */
.stepper-dot{
  width:34px;height:34px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:700;
  border:2px solid #e5e7eb;
  background:#fff;
}
.stepper-dot.is-done{ background:var(--secondary); border-color:var(--secondary); color:#fff; }
.stepper-dot.is-active{ background:var(--primary); border-color:var(--primary); color:#fff; }

.soft-shadow{
  box-shadow: 0 10px 25px rgba(15, 23, 42, .06);
}

.app-container{
  max-width: 1280px;
  margin: 0 auto;
}



.bp-hero{
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(37,99,235,1) 0%, rgba(67,56,202,1) 100%);
}
.bp-hero-inner{
  padding: 34px 34px;
}

.bp-stepper{
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  align-items: start;
  padding-top: 6px;
}

.bp-stepper-line{
  position:absolute;
  left: 8%;
  right: 8%;
  top: 26px;
  height: 3px;
  background: #e5e7eb;
  border-radius: 999px;
}

.bp-step{
  text-align: center;
  position: relative;
}

.bp-dot{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin: 0 auto 8px;
  font-weight: 700;
  border: 3px solid #e5e7eb;
  background: #fff;
}

.bp-step.is-done .bp-dot{
  background: var(--secondary);
  border-color: var(--secondary);
  color: #fff;
}

.bp-step.is-active .bp-dot{
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.bp-step-title{
  font-weight: 700;
  font-size: 16px;
  margin-top:20px;
}

.bp-step-desc{
  color: #6b7280;
  font-size: 14px;
  margin-top: 2px;
  max-width: 180px;
  margin-left: auto;
  margin-right: auto;
}

.text-purple{ color: #7c3aed !important; }

/* Mobile */
@media (max-width: 900px){
  .bp-stepper{
    grid-template-columns: 1fr;
    gap: 24px;                 /* mer luft mellom punktene */
    padding-top: 0;
  }

  .bp-stepper-line{ display:none; }

  /* Grid: 44px dot + tekst-kolonne */
  .bp-step{
    text-align:left;
    display:grid;
    grid-template-columns: 44px 1fr;
    column-gap: 14px;
    row-gap: 4px;
    align-items:start;
    position: relative;        /* for vertikal linje */
  }

  .bp-dot{
    margin:0;
    grid-column: 1;
    position: relative;
    z-index: 1;                /* over linjen */
  }

  /* Title + desc alltid i kolonne 2, stacked */
  .bp-step-title{
    grid-column: 2;
    margin: 0;
    margin-top: 2px;           /* finjuster alignment mot dot */
  }

  .bp-step-desc{
    grid-column: 2;
    margin: 0;
  }

  /* Ev. "Pay invoice"-knapp skal også ligge under teksten */
  .bp-step .mt-2{
    grid-column: 2;
  }

  /* Vertikal linje mellom stegene (bak dot) */
  .bp-step:not(:last-child)::after{
    content:"";
    position:absolute;
    left: 22px;                /* midten av 44px dot-kolonnen */
    top: 44px;                 /* starter under dot */
    bottom: -24px;             /* strekker seg gjennom gapet til neste */
    width: 3px;
    background: #e5e7eb;
    border-radius: 999px;
    z-index: 0;
  }
}
@media (max-width: 900px){
  .bp-step{
    row-gap: 2px; /* litt mindre enn før */
  }

  .bp-step-title{
    margin: 0 !important;
    margin-top: 2px !important; /* eller 0px om du vil enda tighter */
    line-height: 1.2;
  }

  .bp-step-desc{
    margin: 0 !important;
    margin-top: 4px !important; /* fin “luft” uten å se ualignet ut */
    line-height: 1.35;
  }
}



  .text-end {
      text-align: left!important;
  }


  .text-white-50 {
    --bs-text-opacity: 1;
    color: rgba(255,255,255,.8)!important;
}


/* Pulse animation for active step */
@keyframes bp-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.6);
  }
  70% {
    box-shadow: 0 0 0 14px rgba(37, 99, 235, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0);
  }
}

.bp-step.is-active .bp-dot{
  animation: bp-pulse 1.8s ease-out infinite;
}





.bp-icon-btn{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 0;
  background: #f1f5f9;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.bp-icon-btn.dropdown-toggle::after{ display:none; }

.bp-dot-badge{
  position:absolute;
  top: 6px;
  right: 7px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #ef4444;
  border: 2px solid #f1f5f9;
}

.bp-dd{
  border-radius: 18px;
  padding: 8px 0;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 30px rgba(0,0,0,.10);
}

.bp-dd-item{
  padding: 12px 14px;
  white-space: normal;
}

.bp-avatar{
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: #dbeafe;
  color: #1d4ed8;
  display:flex;
  align-items:center;
  justify-content:center;
}

.bp-avatar-sm{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: #e5e7eb;
  color: #111827;
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
}

.bp-mini-icon{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
  background: #e5e7eb;
  color: #111827;
}
.bp-mini-icon.success{ background:#dcfce7; color:#16a34a; }
.bp-mini-icon.warning{ background:#fef9c3; color:#ca8a04; }
.bp-mini-icon.danger { background:#fee2e2; color:#dc2626; }
.bp-mini-icon.info   { background:#dbeafe; color:#2563eb; }



.card, .btn, .form-control, .form-select {
    border-radius: var(--radius) !important;
    font-weight: 400;
    font-size: 16px;
}


.btn:hover {
    color: var(--primary);
    background-color: var(--primary-light);
    border-color: var(--primary);
}


.logout-button {
  background:transparent;
  border-radius:0;
  border:0;
}


/* Øk høyden på NProgress-baren */
#nprogress .bar {
  height: 3px !important; /* velg ønsket høyde */
}

/* (Valgfritt) hvis du bruker "peg" (glow-effekt) kan den se rar ut med tykk bar */
#nprogress .peg {
  box-shadow: 0 0 10px #29d, 0 0 5px #29d; /* evt juster/fjern */
}


.custom-breadcrumb {
    font-size: 18px;
    color: #FFF!important;
}

.custom-badge, .custom-badge  span {
  color: #FFF!important;
}

.spacer1 {margin-top:30px;}
.spacer2 {margin-top:10px;}


.card.soft-shadow {
  overflow: hidden;
}

input#js-msg-q {
    border-top-left-radius: 0!important;
    border-bottom-left-radius: 0!important;
}

input#js-msg-body {
    margin-right: 15px;
}



.card {
    padding: 20px 20px 20px 20px;
    background: #FFF;
    border-color: #eee;
    box-shadow: 0 .125rem .25rem rgba(var(--bs-body-color-rgb), .075) !important;
}

.bp-hero-inner {
    padding: 40px 20px 20px 40px;
}


.dropdown-menu.show {
  z-index:10000;
}




/* ===== Responsive sidebar (push-menu) ===== */
:root{
  --sidebar-width: 280px;
}

.app-shell{
  display:flex;
  min-height:100vh;
}

.app-shell > .sidebar{
  width: var(--sidebar-width);
  flex: 0 0 var(--sidebar-width);
}

.app-shell > .app-main{
  flex: 1 1 auto;
  min-width: 0;
}

/* Burger (3 spans) */
.bp-burger{
  width:44px;height:44px;
  border-radius:999px;
  border:0;
  background:#f1f5f9;
  display:none;                 /* vises kun <=1024 */
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:4px;
}
.bp-burger span{
  display:block;
  width:18px;height:2px;
  background:#111827;
  border-radius:999px;
  transition: transform .2s ease, opacity .2s ease;
}

/* Backdrop */
.sidebar-backdrop{
  position:fixed;
  inset:0;
  background: rgba(15,23,42,.35);
  z-index:1040;
  opacity:0;
  pointer-events:none;
  transition: opacity .2s ease;
}

@media (max-width: 1024px){
  .bp-burger{ display:inline-flex; }

  /* Sidebar blir panel */
  .sidebar{
    position:fixed;
    left:0; top:0; bottom:0;
    z-index:1050;
    width: var(--sidebar-width);
    max-width: 85vw;
    transform: translateX(-100%);
    transition: transform .25s ease;
    overflow-y:auto;
  }

  body.sidebar-open .sidebar{ transform: translateX(0); }

  /* Push main content */
  .app-main{ transition: transform .25s ease; min-height:100vh; }
  body.sidebar-open .app-main{ transform: translateX(min(var(--sidebar-width), 85vw)); }

  /* Backdrop on */
  body.sidebar-open .sidebar-backdrop{
    opacity:1;
    pointer-events:auto;
  }

  /* lås scroll */
  body.sidebar-open{ overflow:hidden; }

  /* Burger → X */
  body.sidebar-open .bp-burger span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
  body.sidebar-open .bp-burger span:nth-child(2){ opacity: 0; }
  body.sidebar-open .bp-burger span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }
}

@media (min-width: 1250px){
  .sidebar-backdrop{ display:none; }
  body.sidebar-open .app-main{ transform:none; }
}




  /* Dashboard chart wrapper */
  .bp-chart-wrap {
    height: 260px;
  }

  /* Make chart canvas fill the wrap */
  .bp-chart-wrap canvas {
    width: 100% !important;
    height: 100% !important;
  }

  /* Optional: nicer headings spacing inside cards */
  .bp-card-title {
    margin-bottom: 0;
  }



  img.logo-sidebar {
    margin: 0 auto;
    margin-bottom:30px;
    display: block;
    width: 130px;
}


.alert {

    border-radius: 25px!important;
}


/* Portal Article Cards hover */
.portal-article-card {
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease, opacity .22s ease;
  will-change: transform;
}

.portal-article-card:hover {
  transform: translateY(-6px) scale(1.02);
  filter: saturate(1.05);
}

/* Image zoom on hover (nice subtle) */
.portal-article-card .card-img-top {
  transition: transform .35s ease, opacity .22s ease;
}

.portal-article-card:hover .card-img-top {
  transform: scale(1.06);
  opacity: .95;
}

/* Optional: make title slightly emphasize */
.portal-article-card h6 {
  transition: transform .22s ease, opacity .22s ease;
}

.portal-article-card:hover h6 {
  transform: translateY(-1px);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .portal-article-card,
  .portal-article-card .card-img-top,
  .portal-article-card h6 {
    transition: none !important;
  }
  .portal-article-card:hover {
    transform: none !important;
  }
}



.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    margin-left: calc(var(--bs-border-width) * -1);
    /* border-radius: 0; */
    border-top-left-radius: 0!important;
    border-bottom-left-radius: 0!important;
}


  a.btn {
      white-space: nowrap;
  }

.login-logo {
  max-width:350px;
  justify-content: center;
  margin:0 auto;
  display:block;
}

.login-content-left {
  max-width:500px;
  margin: 0 auto;
}

@media (max-width: 991px){


  .w-100 {
      
      text-align: center;
  }

  .login-logo {
    max-width:200px;
    
  }
  .min-vh-100 {
      min-height: auto!important;
  }


}



@media (max-width: 550px){


  

  .bp-hero-inner {
    padding: 25px;
  }
  .card {
      padding: 10px;
      
  }
.p-4 {
    padding: 15px!important;
}

.card-body {
  
    padding: 5px;
    
}
.gap-3 {
    gap: 10px!important;
}


  .custom-breadcrumb {
    font-size: 16px;
  }
  .h2, h2, .h3, h3, .h4, h4, .h5, h5, .h6, h6 {
      font-size: 20px;
      
  }
    .bp-hero-inner .h2, h2 {
      font-size: 24px;
  }
  .card, .btn, .form-control, .form-select {
      font-size: 15px;
  }
  .small, small {
    font-size: 15px;
  }

}




/* Sidebar menu alignment */
.sidebar-nav .sidebar-link{
  display: flex;
  align-items: center;
  gap: .6rem;              /* avstand mellom ikon og tekst */
}

/* Fast ikon-kolonne -> perfekt alignment */
.sidebar-nav .iconsidebar{
  flex: 0 0 1.6rem;        /* låser bredden */
  width: 1.6rem;
  display: inline-flex;
  justify-content: center;
}

/* Lar teksten ta resten av plassen */
.sidebar-nav .sidebar-link span{
  flex: 1;
}