/*sector_partners*/

.partners {
  width: 20%;
}

.partners img {
  width: 100%;
  max-width: 256px;
}

/* (product) carousel in front page */

.carousel-container {
  max-width: fit-content !important;
  overflow-x: scroll !important;
  -ms-overflow-style: none !important;  /* Internet Explorer 10+ */
  scrollbar-width: none !important;  /* Firefox */
}

.carousel-container::-webkit-scrollbar {
  display: none !important;  /* Safari and Chrome */
}

.carousel-wrapper {
  gap: 10px;
}

.carousel-wrapper div.product-details {
  position: absolute;
  bottom: 7px;
  padding: 8px 4px 4px 4px;
}

.carousel-item:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 8px;
  background: linear-gradient(207deg, rgba(0, 0, 0, 0.60) 0%, rgba(0, 0, 0, 0.20) 100%);
}


.carousel-item {
  position: relative;
  width: 280px !important;
  height: 390px !important;
  align-items: flex-start;
  border-radius: 8px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
  padding: 12px;
}

.carousel-wrapper .carousel-item div.right-text {
  position: relative;
  float: right;
  clear: right;
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
  font-style: normal;
}

.carousel-wrapper .carousel-item div.right-text.highlighted {
  color: var(--yellow-200, #FEF08A);
}

div.right-text:nth-of-type(3) {
  margin-top: 4px !important;
  margin-left: 3px !important;
}

.carousel-item:first-child {
  margin-left: 0 !important;
}

div.carousel-item div.product-details div.category {
  color: var(--yellow-200, #FEF08A);
  text-overflow: ellipsis;
}

div.carousel-item div.product-details div.product-name {
  max-width: 240px;
  text-overflow: ellipsis;
  font-size: 24px;
  line-height: 125%;
  margin-top: 6px;
  margin-bottom: 6px;
}

div.carousel-item div.product-details div.description {
  height: 72px;
  max-height: 72px;
  color: var(--gray-100, #F3F4F6);
  text-overflow: ellipsis;
}

div.carousel-item div.product-details div.read-more {
  margin-top: 12px;
}

div.carousel-item div.product-details div.read-more div.duration {
  color: var(--yellow-200, #FEF08A);
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

div.carousel-item div.product-details div.read-more div.duration,
div.carousel-item div.product-details div.read-more div.duration + a /* a is the read more section */ {
  gap: 4px;
}

div.carousel-item div.product-details div.read-more div.duration + a:hover {
  color: #fff !important;
  text-decoration: none;
}

div.carousel-item div.product-details div.read-more div.duration span.duration-icon {
  width: 20px;
  height: 20px;
}

div.carousel-item div.product-details div.read-more span.read-more-icon {
  width: 16px;
  height: 16px;
}

/*mega_menu*/
.dropbtn {
  color: #f5f5f5 !important;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropbtn:hover {
}

.dropdown {
  position: relative;
  display: block;
  margin-bottom: 15px;
}

.hamburger {
  display: none;
}

.cart {
  display: none;
}

.header_main {
  padding: 0px 8px !important;
}

/*PRODUKT SIDE*/

ol {
  counter-reset: item;
  margin: 20px 0 30px 0 !important;
  padding-left: 10px; /*   remove important to add more left padding in articles page*/
}

ol ol {
  margin: 20px 0 !important;
  padding-left: 70px !important;
}

ol li {
  margin-bottom: 20px;
}

ul {
  margin: 20px 0 30px 0; /* DevCss Remove !important to specify margin individual area */
  padding: 0px; /*DevCss Remove !important */
}

ul ul {
  margin: 20px 0 !important;
  padding-left: 70px !important;
}

ul li {
  margin-bottom: 20px;
}

.zoom-icon {
  position: relative;
  margin-top: 30px;
}

.zoom-icon input {
  margin: 0 !important;
}

.zoom-icon:after {
  content: "";
  width: 30px;
  height: 30px;
  position: absolute;
  top: 50%;
  margin-top: -15px;
  right: 20px;
  opacity: 0.1;
  background: url("/css/img_new/new-zoom.png") no-repeat center center;
}

.input-group {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.input-group input {
  position: relative;
  height: 45px;
  border-radius: 30px;
  min-width: 500px;
  box-shadow: none;
  border: 1px solid #eaeaea;
  padding-left: 160px;
}

.input-group label {
  position: absolute;
  left: 0;
  height: 48px;
  background: #55ccf2;
  padding: 0px 25px;
  border-radius: 30px;
  line-height: 48px;
  font-size: 18px;
  color: #fff;
  top: 0;
  width: 100px;
  font-weight: 100;
}

.sector_advantage .advantages {
  background: #fff;
  padding: 30px 0 30px 30px;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.44);
  -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.44);
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.44);
  text-align: left !important;
  margin-right: -15px;
}

.sector_advantage div.advantages.product_advantages {
  display: flex;
  justify-content: center;
  padding: 16px;
  margin-right: unset;
  flex-direction: row;
  gap: 16px;
  background: var(--white, #fcfefe);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.08);
}

@media screen and (min-width: 662px) and (max-width: 1030px) {
  section.sector_content.gray.mobile_sector_content {
    padding-top: 0;
  }
  div.mobile_toc_column {
    margin-top: -4px;
  }
  div.advantages.product_advantages {
    justify-content: space-evenly !important;
  }
  div.first_mobile_block {
    max-width: 400px !important;
  }
}

.sector_advantage div.advantages.product_advantages.mobile {
  flex-direction: row;
}

@media screen and (max-width: 568px) {
  .sector_advantage div.advantages.product_advantages.mobile {
    flex-direction: column;
  }
}

.sector_advantage .advantages p {
  text-align: left !important;
  margin: 0;
  line-height: 1.1;
}

.product_container {
  max-width: unset !important;
  padding-right: unset !important;
  padding-left: unset !important;
}

.myRow {
  margin-left: unset !important;
  margin-right: unset !important;
}

div.myCol {
  max-width: unset;
  padding-left: 0;
  padding-right: 0;
  flex: 0 0 100% !important;
}

.dk_container {
  display: flex;
  margin-bottom: -4px;
}

p.icon_title.advantages_title {
  margin-bottom: 2px !important;
  color: var(--primary-900, #3d3d52);
  font-family: Inter, sans-serif;
  font-size: 20px !important;
  font-weight: 600;
  line-height: 125%;
}

p.icon_title.product_price {
  display: inline;
}

@media screen and (min-width: 662px) and (max-width: 1030px) {
  p.icon_title.advantages_title.mobile_advantages_title {
    font-size: 20px !important;
  }
  p.icon_title.advantages_title.product_price {
    margin-top: 25px !important;
    line-height: 125% !important;
    font-family: Inter, sans-serif;
    font-size: 20px !important;
  }
  div.advantages_text.mobile_advantages_text:not(.isJurio) {
    margin-top: -17px !important;
  }
}

@media screen and (max-width: 568px) {
  section.mobile-main {
    margin-left: unset !important;
  }
  div.sidebar_left,
  div.mobile_toc_column {
    display: none;
  }
  div.dk_container {
    margin-top: -4px;
  }
  p.icon_title.advantages_title.product_price,
  p.icon_title.advantages_title.mobile_advantages_title {
    font-family: Inter, sans-serif;
    font-size: 18px !important;
    line-height: 125% !important;
  }
  p.icon_title.advantages_title.product_price {
    margin-top: 11px !important;
  }
  p.VAT_info.inline_text.mobile_VAT {
    font-family: Inter, sans-serif;
    font-size: 11px !important;
    margin-top: 17px !important;
    line-height: 125% !important;
  }
}

p.VAT_info {
  margin-bottom: 4px !important;
}

p.VAT_info.inline_text {
  display: inline;
  margin-top: 15px !important;
  margin-left: 5px !important;
  color: var(--gray-500, #6b7280);
  font-family: Inter, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 125%;
}

@media screen and (min-width: 662px) and (max-width: 1030px) {
  p.VAT_info.inline_text.mobile_VAT {
    font-size: 12px !important;
    margin-top: 30px !important;
    padding-top: 1px !important;
  }
}

p.advantages_extra {
  color: var(--gray-500, #6b7280) !important;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 125% !important;
}

div.block.jurio_first_block {
  max-width: 210px !important;
}

div.small_block_one {
  max-width: 210px !important;
}

div.small_block_two {
  max-width: 250px !important;
}

div.small_block_two.jurio_block_se {
  max-width: 290px !important;
}

div.small_block_two.jurio_block_no {
  max-width: 330px !important;
}

.sector_advantage .advantages img {
  float: left;
  margin-right: 20px;
  margin-top: 3px;
}

.sector_advantage .advantages .block {
  width: calc(100% / 3);
  display: inline-block;
  max-width: 340px;
}

.sector_advantage .advantages .block p {
  margin: 0;
}

.sector_advantage .advantages .block p.icon_title {
  margin-bottom: 5px;
  font-weight: 600;
  margin-top: 9px;
}

/*=== Developer Wizzard Css ===*/
.timeline-module span {
  color: #6a6a6a;
  font-size: 15px;
  font-weight: 400;
}

div.timeline-module_outer-container label.wizzard-subHeader span {
  font-weight: inherit;
}

.validationMessage {
  color: #f6603e !important;
  font-family: "Inter", sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  width: 340px;
}

.timeline-module .validationMessage span {
  color: #f6603e !important;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 500;
}

.successMessage {
  color: limegreen !important;
}

/* DS Autocomplete dropdown (Figma 5252:4286) — shared by address, company, country/commune. */
.suggestion-container {
  background-color: #fcfefe;
  border: 1px solid #e5e7eb;
  border-radius: 5px;
  padding: 2px 0;
  overflow: hidden;
  box-shadow:
    0 2px 6px -1px rgba(61, 61, 82, 0.06),
    0 1px 3px 0 rgba(61, 61, 82, 0.05);
}

.suggestion-container ul {
  padding-left: 0;
  margin-bottom: 0;
}

.suggestion-container ul.countries_list.suggestedAddresses {
  max-height: 240px;
  overflow: auto;
}

.suggestion-container a {
  color: #45494e !important;
}

.suggestion-container a:hover {
  text-decoration: none !important;
}

ul li.suggestion-item {
  border-bottom: 1px solid #e5e7eb;
  border-radius: 0;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: #111928;
  padding: 8px 16px;
  margin-bottom: 0;
  flex-direction: column;
  cursor: pointer;
  background-color: transparent;
}

.suggestion-item strong,
.suggestion-item strong span {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: #111928;
}

.suggestion-item.small {
  min-height: 40px;
  display: flex;
  justify-content: center;
}

.suggestion-container li.selected {
  background-color: #f9fafb;
}

/* Line 2: address .suggestion-details and company OpenData secondary <div>. */
li.suggestion-item > div,
li.suggestion-item div.suggestion-details,
li.suggestion-item div.suggestion-details span {
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
  color: #6b7280;
}

.suggestion-item:last-child {
  border-bottom: 0;
}

.timeline-module .documentelement label.wizzard-subHeader {
  font-size: 15px;
  font-weight: 500;
  font-family: "Inter", sans-serif !important;
}

.timeline-module .input-container {
  position: relative;
  font-size: 100% !important;
  line-height: 1.5 !important;
}

.timeline-module .input-container.large {
  width: 540px !important;
}

.timeline-module .input-container.medium {
  width: 350px !important;
}

.timeline-module .input-container.small {
  width: 180px !important;
}

.timeline-module .input-container i {
  position: absolute;
}

.timeline-module .textelement i.validated-input-icon {
  top: 8px;
  right: -23px;
  font-size: 1em;
  line-height: 0.6 !important;
  transition: all 0.2s;
  font-family: FontAwesome, sans-serif;
}

.timeline-module .textelement i.validated-input-icon:not(.fa-refresh) {
  color: #96db4b !important;
}

.timeline-module .extensions {
  position: absolute;
  right: 30px;
  top: 8px;
}

/* Home Trustpilot */
.home_trustpilot {
  position: absolute;
  bottom: 4px;
  width: 190px;
}

.homevideo {
  position: relative;
  display: inline-block;
}

.homevideo .video-hover {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 20;
}

.homevideo:hover .video-hover {
  display: inline;
  opacity: 0.9;
}

.home-icon {
  width: 80px;
  height: auto;
}

.home-mid-icon {
  width: 60px;
  height: 60px;
  margin-right: 5px !important;
}

a.edit-link {
  cursor: pointer;
  color: #f65734 !important;
}

/*New CSS*/

a,
button,
input,
textarea {
  outline: none;
}

a:focus,
button:focus,
input:focus,
textarea:focus {
  outline: none;
}

header {
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
}

/* Transitional My Documents measure. Reproduces the Figma frames exactly with one
   rule and no per-breakpoint width overrides: content is min(viewport, 864) - 64,
   i.e. 800px at desktop, 770px at the 834 tablet frame, 358px at the 390 mobile
   frame. Bypasses Bootstrap's container/row/col padding arithmetic deliberately —
   .mine_dokumenter is the GeneralPage section, used only by My Documents (DK/SE/NO)
   and Unsubscribe. */
/* Bootstrap's `:root { --white: #fff }` shadows the DS token, so every
   `var(--white, #fcfefe)` on the page silently resolved to pure #ffffff instead of
   Neutrals/white. Every other `--gray-*` / `--secondary-*` token in this file is
   undefined and resolves through its inline fallback, which is why only this one
   drifted. Re-pointed for this page's subtree rather than globally. */
.mine_dokumenter,
.my_dokumenter {
  --white: #fcfefe;
}

.mine_dokumenter .container {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

.mine_dokumenter .container > .row {
  margin-left: 0;
  margin-right: 0;
}

.mine_dokumenter .container > .row > .col-12 {
  box-sizing: border-box;
  width: 100%;
  max-width: 864px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 32px;
  padding-right: 32px;
}

@media screen and (max-width: 767px) {
  .mine_dokumenter .container > .row > .col-12 {
    padding-left: 16px;
    padding-right: 16px;
  }
}

.inner-box {
  max-width: 800px;
  margin: auto;
}
/* Transitional card treatment (Figma 4205:10605 > "Frame 29"): gray/50 fill, 1px
   gray/200 border on all four sides, 8px radius, 24px padding, 24px between cards.
   Replaces the old top/bottom-only #ddd hairlines. */
.product-container {
  background: var(--gray-50, #f9fafb);
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 24px;
}

.product-info {
  display: flex;
}

.product-info-right {
  display: block;
  width: 100%;
  /*padding-left: 60px;*/
  position: relative;
}

/* Still used by _ProductError.cshtml (Generic_product.svg). The document card's
   own icons were removed in the transitional pass; this sizes the error-state icon. */
.product-info .product-icon-complete {
  margin-right: 10px;
  width: 38px;
  height: 46px;
}

.product-info .product-title-icon {
  /*display: flex;*/
}

.product-info-right li p:first-child {
  margin: 0;
  /* Label column 116 + the row's 12px gap puts the value on 128 — the same column as
     the timeline step numbers (Figma 4205:10605, grid decided 2026-08-20). */
  width: 116px;
  color: var(--gray-600, #4b5563);
  font-family: Inter, sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 125%;
}

/* Values carry the emphasis: gray/800 + medium, against the gray/600 regular label.
   Neither side had a label/value hierarchy before. */
/* `div` prefix + child combinator is deliberate: `.sector_content ul li > p:not(:first-child)`
   sets gray/500 at (0,2,3) and appears later in the sheet, so a flatter selector loses. */
div.product-info-right ul li > p.product-created-date,
div.product-info-right ul li > p.product-modified-date {
  color: var(--gray-800, #1f2a37);
  font-weight: 500;
}

.product-info-right li p.product-created-date.date {
  margin-top: -2px;
}

/* 128px was a hard width with 0.4px of slack: the Danish "Din kladde udløber om" paints
   127.6px, so any font-rendering difference would have wrapped it. min-width keeps the
   128px column for alignment while letting a longer string grow instead of wrapping —
   there is only ONE of these rows per card, so an auto width cannot make anything jag
   (unlike the date column, where every row must share a width or the dots misalign).
   This also covers nb's "Utkastet ditt utløper om" at 135.6px, so the locale override
   that used to widen it is no longer needed. */
.product-info-right li p.draft-expiration-item-title {
  width: auto;
  min-width: 128px;
  white-space: nowrap;
}

.product-info-right li {
  list-style: none;
  margin: 0;
  font-size: 12px;
  /* Figma Frame 5 / Frame 15: 12px between label and value, and between the
     expiry label and its chip. Was 0. */
  gap: 12px;
}

.product-info-right li p {
  font-size: 12px;
  line-height: 1.3;
}

/* Vertical rhythm of the meta block, per Figma 4205:10605:
   Frame 22 stacks the two date rows at gap 8, then Frame 427319101 puts 12 between
   that group and the expiry row. The DOM is one flat <ul>, so: 8 between all rows,
   +4 on the expiry row to reach 12. */
.product-info-right > ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 0;
  padding-left: 0;
}

.product-info-right > ul > li.draft-expiration-item {
  margin-top: 4px;
  padding-top: 0;
}

/* Frame 6 is gap 8 (chip -> link) while Frame 15 inside it is gap 12 (label -> chip).
   One flex row can't carry two gaps, so the row is 8 and the chip adds the extra 4. */
.product-info-right > ul > li.draft-expiration-item {
  gap: 8px;
}

.product-info-right > ul > li.draft-expiration-item > p.expiration-badge {
  margin-left: 4px;
  /* the -4px nudge fought the flex centring below */
  margin-top: 0;
}

/* Figma Frame 5 / Frame 6 both use counterAxis CENTER; the rows were stretching, so
   the label, chip and link sat on three different centre lines. */
.product-info-right > ul > li {
  align-items: center;
}

/* Header -> card gap. The manchet's <p> carries margin-bottom: 3rem, which collapses
   out of .headline-section (no padding/border) and *becomes* the gap — 48px where the
   frame wants 24. Scoped to the My Documents manchet; .headline-section is shared. */
#myDocsManchet .headline-section p {
  margin-bottom: 1.5rem;
}

/* Completed timeline steps were #38BF26, a yellow-green that is not a DS step at all.
   Figma uses Semantic/green/400. Scoped to this page: timeline-bar is also consumed by
   LunarMaster, EstateProcess, LandingPage, _Timeline2 and _DraftTimeline, which are
   out of scope for this task. */
.my_dokumenter .timeline-bar-item.compltd .cercile,
.my_dokumenter .timeline-bar-item.compltd .cercile-link {
  background: var(--green-400, #31c48d);
}

/* T2 — type ramp from Figma 4205:10605. Sizes and line-heights only; colours are
   left as they are because the title colour (gray/900 vs slate/900) is unresolved.
   Selectors are deliberately id/class-heavy: the winning rules today are the broad
   `.sector_content h2` (24px) and `.sector_content h3` (17px), which a flatter
   selector loses to. */
#myDocsManchet .headline-section h2 {
  font-size: 30px;
  line-height: 1.2;
  /* was inheriting the body's #000; the frame binds Neutrals/gray/900. */
  color: var(--gray-900, #111928);
}

#myDocsManchet .headline-section p {
  font-size: 16px;
  line-height: 1.5;
  /* was inheriting the body's #000; the frame binds Neutrals/gray/500. */
  color: var(--gray-500, #6b7280);
}

.my_dokumenter .product-info-right h3.product-title-name {
  font-size: 20px;
  line-height: 1.5;
  /* The frame binds Neutrals/gray/900; the code painted Primary/900 slate (#3d3d52).
     !important only because the rule it overrides carries one — this selector already
     wins on specificity. Left scoped to this page so product pages keep slate. */
  color: var(--gray-900, #111928) !important;
}

.my_dokumenter div.product-info-right p.product-description {
  font-size: 14px;
  line-height: 1.5;
}

/* body/base 14 -> the timeline reads 15px/19.5 today; children inherit from the item. */
.my_dokumenter .timeline-bar-item {
  font-size: 16px;
  line-height: 1.5;
}

/* `.timeline-bar-item .time-right { line-height: 1.3 }` ties on specificity and comes
   later, so the item-level rule above loses on the label itself. */
/* Timeline geometry, Figma 4205:10631 / Frame 19 + Frame 10:
   step 24 tall on a 40 pitch; date column 77; 8px to the dot; dot 20x20; 8px to the
   label; the date column starts at the card's content edge (no indent). */
.my_dokumenter .timeline-bar-item {
  min-height: 40px;
}

/* the number and the date were line-height 1.3 while the label is 1.5, so they sat on
   different baselines — this is what made "3." look unaligned with its title */
.my_dokumenter .timeline-bar-item__count,
.my_dokumenter .timeline-bar-item__status {
  line-height: 1.5;
}

/* The number had no fixed width, so every title started wherever its own number ended
   — measured 143/146/144 across a single card. 26px holds a two-digit step ("13."
   measures 25.1px with tabular figures) so titles land on one column for every card,
   including the 13-step ones. tabular-nums stops "1." and "7." differing too.
   NOTE: Figma's number column is 18px, which only fits single digits — that puts its
   title column at 146 where the code lands on 154. The frame needs 26px to match. */
.my_dokumenter .timeline-bar-item__count {
  width: 26px;
  flex-shrink: 0;
  /* right-aligned so the gap to the title is the same for "1." and "13." — left-aligned,
     a single digit left an 11px hole while two digits left ~1px. */
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Figma says 77px, but that is sized to its placeholder "25.8.2023" (9 chars). Real
   dates are dd.mm.yyyy — "19.08.2026" measures 84.3px, overflowing the column and
   closing the 8px gap to the dot down to 0.8px. 88px fits the longest real string with
   headroom; tabular-nums keeps every date the same width so the dots stay aligned.
   Worth reflecting back into the frame. */
/* Figma's 77px column is sized to its placeholder "25.8.2023". Real content is
   dd.mm.yyyy: with tabular-nums every date measures 87px. The 8px gap to the dot is
   carried by padding-right here rather than by the dot's margin, so the text can never
   close it however long the string gets. tabular-nums also keeps all dates the same
   width, which is what stops the dots jagging. Worth reflecting 95px into the frame. */
.my_dokumenter .timeline-bar-item__status {
  box-sizing: border-box;
  /* Measured off the rendered text, not a probe: "19.08.2026" paints 91.7px at
     16px/tabular. 92 content + 10px gutter = 102. flex-shrink: 0 because this is a flex
     item and would otherwise be squeezed below the width, which is what let the text
     overflow and close the gap in the first place. */
  /* 92px of content + a 10px gutter. The gutter lives here as padding rather than on
     the dot's margin so a long date can never close it. It reads 10 and not 8 because
     the frame's gap is measured to the 16px dot GLYPH: while the mark column was 20px
     with the dot centred in it, 8px of padding plus 2px of centring came to the same
     10px. Shrinking the column to 16px removed that 2px, so it moves here. */
  width: 102px;
  flex-shrink: 0;
  /* Figma 4205:10605 sets the date node to textAlignHorizontal LEFT at x = the card's
     content edge (92px fixed). The legacy `.timeline-bar-item__status { text-align:
     right }` right-aligned it, which left the column's LEFT edge ragged — "19.08.2026"
     started at 1px, "Hvad nu?" at 21px — so the dates did not line up with each other,
     nor with the card title and the Oprettet/Sidst ændret labels above them. */
  text-align: left;
  padding-right: 10px;
  font-variant-numeric: tabular-nums;
}

/* The checkmark was placed with `left: 3.5px; top: 1.5px`, hand-tuned for the old 18px
   dot. Enlarging the dot to 20px left it off-centre. Centring the glyph properly instead
   of re-tuning the offsets, so it stays centred at any dot size. */
/* Icon sizing, per Figma 4127:3 ("Sheet" — Edit / Extend draft / Delete draft).
   The set was already right: heroicons-mini is the 20/solid set these were authored from.
   What was off is the render size and the fill — the frame places them at 18x18 in
   Neutrals/gray/500, and they were shipping 20x20 in #3D3D52. The fill is fixed in the
   assets themselves (edit / clock / trash / document-text / eye all moved to #6B7280,
   which chevron-down already used).
   Scoped inside the menu because `.arrow-down` is shared with the dropup button's own
   chevron, which stays 20px. */
.my_dokumenter #my-dropup div.dropdown-menu img {
  width: 18px;
  height: 18px;
}

/* The process icon renders at 14px from `.local-icon` — a size inherited from the 10x10
   viewBox of the LegalDesk glyph it replaced — while `document-text` and `edit` beside it
   in the same button row are 20px. Matched to its row. */
.my_dokumenter .show-sign-btn img.local-icon {
  width: 20px;
  height: 20px;
}

/* Dropdown open/close transition. Bootstrap only toggles display:none -> block, and
   display can't be transitioned, so the menu stays rendered and visibility carries the
   state instead. `visibility: hidden` (not just opacity) keeps it out of the tab order
   and the accessibility tree while closed, and pointer-events guards against clicks on
   an invisible menu. It rises 4px because this is a dropup — it reads as emerging from
   the button. No Popper here and no inline transform, so animating transform is safe. */
.my_dokumenter #my-dropup div.dropdown-menu {
  /* The existing `top: -6px !important` overrides Bootstrap's `.dropup` rule
     (`top: auto; bottom: 100%`). With both top and bottom set the box is
     over-constrained, the browser drops `bottom`, and the menu grows DOWNWARD from the
     button's top — covering the button and spilling 108px past it. Anchor it to the
     bottom instead so it opens upward with a 6px gap. */
  /* `bottom: 100%` is Bootstrap's own dropup anchor: it puts the menu's bottom edge
     exactly on the button's top. The 6px gap goes on margin-bottom rather than into the
     offset, because a calc() there resolves 100% against the containing block's HEIGHT
     and lifted the menu ~170px too high. `top: auto !important` is needed to defeat the
     existing `top: -6px !important`, which otherwise over-constrains the box. */
  margin-bottom: 6px;
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* Soft reveal only — no vertical movement. */
  transition: opacity 150ms ease, visibility 150ms ease;
}

.my_dokumenter #my-dropup div.dropdown-menu.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .my_dokumenter #my-dropup div.dropdown-menu {
    transition: none;
  }
}

/* Flere muligheder: the chevron flips when the menu opens. Driven off
   aria-expanded rather than the .show class so it can't drift from the real state.
   150ms ease matches the SiteFooter link transition. */
.my_dokumenter #my-dropup #dropup_btn .arrow-down {
  transition: transform 150ms ease;
}

.my_dokumenter #my-dropup #dropup_btn[aria-expanded="true"] .arrow-down {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .my_dokumenter #my-dropup #dropup_btn .arrow-down {
    transition: none;
  }
}

/* Active step, per Figma 4205:10646 > 4205:10647: a 16x16 solid gray/900 circle with a
   6x6 white dot centred in it — not the 20px white circle with a 5px black border the
   code had. The holder box stays 20px so the rail keeps centring on it; the dot is
   inset 2px horizontally and 4px vertically to sit centred on the 24px text row. */
.my_dokumenter .timeline-bar-item.actv .cercile {
  width: 16px;
  height: 16px;
  margin: 4px 0 0;
  background: var(--gray-900, #111928);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.my_dokumenter .timeline-bar-item.actv .cercile::before {
  content: "";
  position: static;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--white, #fcfefe);
}

/* Completed step, per Figma 4205:10641: the real heroicons-mini/check-circle at 20x20
   filled Semantic/green/400, replacing the green disc + FontAwesome glyph. The tick is a
   cut-out (fill-rule: evenodd), not a white shape — so the 2.23:1 white-on-green contrast
   problem does not exist in this construction. The hex is inline because an SVG data URI
   cannot reference a CSS custom property. */
.my_dokumenter .timeline-bar-item.compltd .cercile {
  width: 16px;
  height: 16px;
  margin: 4px 0 0;
  /* The card fill, NOT transparent: the connector rail is one continuous line running
     behind every dot (in the frame, Rectangle 2 is 2x116 spanning three steps), and the
     heroicons tick is a fill-rule: evenodd CUT-OUT. With a transparent box the rail
     showed straight through the tick. An opaque fill matching the card hides the rail
     behind the circle and lets the cut-out read as the card showing through, which is
     how the frame composites it. `.cercile` is border-radius: 100px, so only the circle
     masks the rail. */
  background: var(--gray-50, #f9fafb) no-repeat center/16px 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2331C48D'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z'/%3E%3C/svg%3E");
  border: none;
}

.my_dokumenter .timeline-bar-item.compltd .cercile::before {
  content: none;
}

/* Step text, per Figma 4205:10605: completed and pending rows are gray/600 regular,
   the active row gray/900 medium. The code inherited `.sector_content ul li > span`
   (gray/500) for completed and pending, and `.timeline-bar-item.actv span` painted the
   active row pure #000. Weights already match the frame, so colour only. */
.my_dokumenter .timeline-bar-item span {
  color: var(--gray-600, #4b5563);
}

.my_dokumenter .timeline-bar-item.actv span {
  color: var(--gray-900, #111928);
}

/* the unreached rail is gray/200 in the frame, not #ddd */
.my_dokumenter .timeline-bar-item .cercile-link {
  background: var(--gray-200, #e5e7eb);
}

/* The rail centres itself with `margin: auto`, so it only lands on the dot's centre when
   the wrapper is symmetric around the dot. Sizing the wrapper to exactly the dot width
   and moving the 8px gap onto the wrapper keeps them concentric — an asymmetric wrapper
   pushed the rail 4px right. flex-shrink: 0 so the 20px can't be squeezed. */
.my_dokumenter .timeline-bar-item > div {
  width: 16px;
  flex-shrink: 0;
  /* 10px to the step number, matching the frame's dot(118) -> number(128). Same 2px
     story as the date gutter above: this was 8 while the column was 20px wide. */
  margin-right: 10px;
}

/* The pending state is the DEFAULT, not `.await`: _DraftTimeline.cshtml binds the
   pending branch to an EMPTY class name (`'' : '@i' > '2'`), so pending rows carry no
   state class at all and were still rendering the legacy 20px #ddd disc. Styling the
   base gives them the frame's 16x16 gray/200 circle without touching the Knockout
   binding; `.compltd` and `.actv` both out-specify this and still win. */
.my_dokumenter .timeline-bar-item .cercile {
  width: 16px;
  height: 16px;
  /* 4px top offset centres the 16px dot in the 24px text row. */
  margin: 4px 0 0;
  background: var(--gray-200, #e5e7eb);
  border: none;
}

.my_dokumenter .timeline-bar-item .cercile::before {
  content: none;
}

.my_dokumenter .timeline-bar {
  padding-left: 0;
}

/* v1 leftover: timelineModule.css:8 offsets the module panel 146px from the left above
   1200px (`@media (max-width: 1200px) { margin-left: 0 }`, which is why it looks flush
   in the reference capture). That offset lined the panel up against the old 48px icon
   column inside the 877px col-xl-8 grid — both removed in this pass — so above 1200px it
   now sits 146px in from a card whose buttons and timeline start at the content edge.
   Left-aligned with the rest of the card. */
.my_dokumenter .timeline-module_outer-container .sector_content.wizzard.timeline-module {
  margin-left: 0;
  /* Figma: Fill Neutrals/white, Stroke Neutrals/gray/200, 1px inside. The module shipped
     `box-shadow: 2px 2px 8px rgba(0,0,0,.12)`, a 15px radius, pure #fff and a #dedede
     border — none of which are DS values, and the shadow is the only one on the page.
     `--white` resolves to #fcfefe inside this page's subtree (Bootstrap's :root sets it
     to #fff, which is re-pointed on .my_dokumenter). Radius matches the card's 8px.
     The base rule lives in css/custom/timelineModule.css, which also has .scss and
     .min.css copies — overridden here instead so all three stay untouched. */
  box-shadow: none;
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: 8px;
  background-color: var(--white, #fcfefe);
}

/* Same v1 leftover as the module panel above: the open-documents box is indented to clear
   the 48px product icon column (100px on the base rule), which this pass removed — so the
   box sat 48px in from a card whose timeline and buttons start at the content edge.
   Both rules are original and untouched; only my icon removal orphaned them. */
.my_dokumenter .showhide-sectionbox,
.my_dokumenter .show-hide-sec .showhide-sectionbox {
  padding-left: 0;
}

/* The card's bottom inset read 65px against its own 24px top padding whenever a section
   was open. 40px of that is `.product-timeline_complete { margin-top: 40px }` on a
   wrapper that is EMPTY in this state — it only holds the completed-process timeline,
   injected later — so the margin was spacing nothing and just inflated the card.
   `:empty` does not match it (it carries a whitespace text node), hence `:not(:has(*))`,
   which tests for element children only. When the wrapper is populated the 40px returns,
   so the completed-process layout is unaffected. */
/* ...and the same wrapper on a FINALIZED card is not empty — it holds the completed
   process timeline — but that timeline carries `.hide-process` until "Vis proces" is
   clicked. While it is hidden the wrapper is still 0 tall, so its 40px margin was adding
   40px of dead space under the card once any other section was open (the margin only
   folded into the row's reserve while everything was closed). */
.my_dokumenter .product-timeline_complete:not(:has(*)),
.my_dokumenter .product-timeline_complete:has(.hide-process) {
  margin-top: 0;
}

/* The 8px that separates the lifted button row from whatever opens beneath it. It lives
   here rather than in the row's own offset so that with nothing expanded the card ends at
   the row's bottom edge and its bottom inset equals its 24px top padding.
   It has to be PADDING on a state-gated selector, not a margin: every wrapper between
   these blocks and `.show-sign-section` is padding- and border-less, so a top margin
   collapses straight out and merges with the row's reserve above instead of opening a
   gap — measured as 0px. Gated on the classes the page's own JS toggles (`open-doc` on
   the documents box, `open-sign` on the module panel) so the padding only exists while
   something is actually expanded. */
.my_dokumenter .showhide-sectionbox:has(.document-in.open-doc) {
  padding-top: 8px;
}

.my_dokumenter .timeline-module_outer-container:has(.open-sign) {
  padding-top: 8px;
}

/* ...and the completed-process timeline, which expands in place under the row. Its own
   40px margin collapses into the row's reserve and opens no gap, so the 8px goes on as
   padding, matched only while a process timeline is actually visible inside. */
.my_dokumenter .product-timeline_complete:has(.timeline-bar:not(.hide-process)) {
  padding-top: 8px;
}

/* Very narrow widths (320px => a 225px content box). The step title is a flex item, so
   it carries the default `min-width: auto` and refuses to shrink below its longest word —
   at 320 the titles crossed the card's right border by 16px. `min-width: 0` lets it take
   the shrink that the date/dot/number columns refuse (they are all flex-shrink: 0 on
   purpose, so the dots stay aligned), and overflow-wrap handles a single word longer than
   the column. Only bites below ~360; 360/390/430 were already clean. */
.my_dokumenter .timeline-bar-item .time-right {
  min-width: 0;
  overflow-wrap: break-word;
}

/* Same width squeeze on the expiry row: label + chip + "Forlæng kladde" cannot fit a
   225px box, and the link overflowed by 2px. Allowed to wrap instead — it only wraps when
   there genuinely is not room. */
.my_dokumenter .product-info-right > ul > li.draft-expiration-item {
  flex-wrap: wrap;
}

/* --- Desktop: align the lifted button row's right edge to the panel below it ---------
   The legacy `right: 39px` left the row 40px short of the card's content edge, so the
   right-hand button never lined up with the module panel / documents box beneath it. */
.show-sign-btn.not_draft_buttons {
  right: 0;
}

/* --- Icon + label alignment inside the card's buttons -------------------------------
   The icon sat on the text BASELINE rather than centred on it.
   This must NOT touch the spans' `display`: each button holds TWO labels — `.show-opn` /
   `.show-cls` (and `.sign-opn` / `.sign-cls`) — and the open/closed state is switched by
   `display: none` on one of them at specificity (0,1,0). An earlier attempt here set
   `display: inline-flex` on `button > span` at (0,3,1), which out-specified that and made
   BOTH labels render at once ("Angiv personoplysningerSkjul"). Aligning the image itself
   leaves the toggle untouched.
   8px between the icon and its label, matching the card's other icon+label pairs. */
.my_dokumenter .show-sign-btn button img {
  vertical-align: middle;
  margin-right: 8px;
}

/* --- The inline "Redigér" link in the meta rows -------------------------------------
   `position: absolute; right: 5px` parked this link on top of the "Sidst ændret" value —
   at 312px they occupied 182-251 and 179-256, i.e. almost entirely overlapping, making
   both unreadable. It is revealed at <=767px, on finalized cards the member owns before
   the signature step, so real customers hit it. In flow on its own line instead.
   Pre-existing; not introduced by this pass. Moving it into the button row proper would
   be a markup change. */
/* --- One edit affordance, and it lives in the button group -------------------------
   The page shipped TWO, swapped at 767px by the same media query: above it, the
   `.show-btn.notDraftBtn.edit` button in the row; below it, that button is hidden
   (`display: none`) and a bare `<a class="edit-document">` appears inside the meta rows
   instead — absolutely positioned at `right: 5px`, which is what put it on top of the
   "Sidst ændret" value.
   Reversed: the inline link stays hidden at every width and the real button shows, so the
   edit action is a button and sits with the other buttons on mobile exactly as on desktop.
   One behavioural note: the two are gated differently. The link needs
   `IsFinalized && !SignatureStepPassed && ProductOwner == CurrentMember`; the button needs
   `CanBeEditedBy()`, which additionally requires `!PassedDisableDocumentEditModule`. So a
   finalized product whose timeline has passed the edit-disabling module used to still
   offer the inline link on mobile — an affordance for something `CanBeEditedBy` says is
   not allowed. That case now correctly shows nothing. */
@media screen and (max-width: 767px) {
  .my_dokumenter .product-info-right li a.edit-document {
    display: none;
  }

  .my_dokumenter button.show-btn.notDraftBtn.edit {
    display: flex;
  }

  .my_dokumenter .product-info-right > ul > li {
    flex-wrap: wrap;
  }
}

/* the row stacks full-width buttons at this width, so a left margin would misalign it */
@media screen and (max-width: 568px) {
  .my_dokumenter button.show-btn.edit {
    margin-left: 0;
  }

  /* Stacked buttons had no gap at all between them: only the primary carried a one-off
     `margin-bottom: 12px`, so it sat 12px clear while the secondaries below it touched at
     0px. A gap on the (column-reverse) row spaces all of them evenly, at the same 10px the
     desktop row uses between its two buttons; the one-off margin is zeroed so it does not
     add up to 22. */
  .my_dokumenter div.show-sign-btn ul li {
    gap: 10px;
  }

  .my_dokumenter div.show-sign-btn ul li button.sign-btn.notDraftBtn {
    margin-bottom: 0;
  }

  /* The draft card's stack carries its own 12px on the dropup WRAPPER rather than on a
     button, which added to the gap the same way (10 + 12 = 22). The rule that sets it is
     ID-based (specificity 114), so the override needs the id too — a class-only selector
     at 34 silently lost. */
  .my_dokumenter div.show-sign-btn ul li div#my-dropup {
    margin-top: 0;
  }
}

/* Allowing the meta rows to wrap (above) exposed the legacy mobile label width: at 568px
   and below `div.product-info-right ul li p:first-child` is 145px, which at the 11px
   mobile type is roughly double what the longest label needs. With nowrap it merely
   squeezed the value; with wrap it pushed every value onto its own line.
   100px, not the desktop 116: at 312px the content box is 217, and 116 + the 89px value +
   the 12px gap comes to exactly 217 — zero slack, so sub-pixel rounding still wrapped it.
   The longest label paints 70px here ("Sidst ændret:" at 11px), so 100 leaves headroom
   for the SE and NO strings too and keeps label + value on one line, with only the
   Redigér link taking its own. */
@media screen and (max-width: 568px) {
  .my_dokumenter div.product-info-right ul li p:first-child {
    width: 100px;
  }
}

/* --- The stray divider above the timeline -------------------------------------------
   `@media (max-width: 420px) { .product-timeline_in-progress .timeline-bar {
   border-top: 1px solid #ddd } }` draws a hard #DDD rule directly beneath the meta rows.
   No frame has a divider there, and next to the edit link above it reads as an artefact. */
@media screen and (max-width: 420px) {
  .my_dokumenter .product-timeline_in-progress .timeline-bar {
    border-top: 0;
  }
}

/* --- The module panel's side padding on mobile --------------------------------------
   timelineModule.css bleeds the panel edge-to-edge below 425px with
   `margin: 0 -15px`, so it sat 14px outside the card's content box on both sides while
   every section above it started at the content edge. Aligned with the rest of the card. */
@media screen and (max-width: 425px) {
  .my_dokumenter .timeline-module_outer-container {
    margin-left: 0;
    margin-right: 0;
  }
}

/* --- The expiry row on mobile -------------------------------------------------------
   Wrapping alone left three ragged lines starting at 41 / 45 / 43 because the chip and
   the link each carry a stray left margin from the legacy mobile rules. The label now
   takes its own line and the chip + "Forlæng kladde" share the next one, all flush with
   the content edge. Not drawn in any frame — a judgement call on the least-bad narrow
   layout. */
@media screen and (max-width: 568px) {
  .my_dokumenter .product-info-right li p.draft-expiration-item-title {
    flex: 1 0 100%;
  }

  .my_dokumenter .product-info-right > ul > li.draft-expiration-item > p.expiration-badge {
    margin-left: 0;
  }

  .my_dokumenter .product-info-right ul li.draft-expiration-item div.postpone-btn-container {
    margin-left: 0 !important;
    /* the legacy rule also pulls this up 4px, which ate half the row gap: 8px above the
       chip but only 4px below it */
    margin-top: 0 !important;
  }

  /* The link's own 1px/6px padding indented its TEXT to 47 while every label in the block
     paints at 41 — the box was flush but the words were not. It is not a filled control,
     so the padding buys nothing. */
  .my_dokumenter .product-info-right ul li.draft-expiration-item button.postpone-btn {
    padding-left: 0;
    padding-right: 0;
  }
}

/* --- The documents box ---------------------------------------------------------------
   Was `border: 1px solid #ddd; border-radius: 10px; padding: 40px` — an off-DS grey and a
   radius that matched nothing else on the card. Aligned to the card's own language:
   gray/200 at 8px. The 40px inset (and the 40/10/20 variant below 767px) is replaced by
   the card's 24px, so the box reads as part of the same system.
   #ddd is the same value flagged as an artefact on the timeline divider. */
.my_dokumenter .document-in {
  padding: 24px;
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: 8px;
}

@media screen and (max-width: 767px) {
  .my_dokumenter .document-in {
    padding: 16px;
  }
}

/* The document row carries `margin-bottom: 30px` to separate itself from the error panel
   that follows it (`li.document-failed-container`). That panel is display:none whenever
   there is no error — which is nearly always — so the margin collapsed out of the
   padding-less <ul> and was absorbed inside this box's padding as 31px of dead space
   under the last document.
   A flex column with a gap fixes it at the root: gaps are only generated BETWEEN rendered
   items, so a display:none panel produces none, while a visible one still gets its
   separation. 24px rather than the old 30 to sit on the card's 8px rhythm. */
.my_dokumenter .document-in > ul {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.my_dokumenter .document-in > ul > li {
  margin-top: 0;
  margin-bottom: 0;
}

/* On mobile the button row is in flow directly beneath this box with nothing between
   them, so they touched. (Above 568px the row is lifted out of flow and the 8px on
   .showhide-sectionbox already does this job.) */
@media screen and (max-width: 568px) {
  .my_dokumenter .showhide-sectionbox:has(.document-in.open-doc) {
    padding-bottom: 10px;
  }
}

/* The document row's icon is 30px with a 20px gap to its text — chunky against the
   15px/13px type once the box is only ~217px wide, and it pushes the title into two
   lines. 24px and a 12px gap on mobile. */
@media screen and (max-width: 767px) {
  .my_dokumenter .document-in .doc-item-logo,
  .my_dokumenter .document-in .doc-list-img {
    width: 24px;
    min-width: 24px;
  }

  .my_dokumenter .document-in .doc-content {
    margin-left: 12px;
  }
}

/* --- The pager must never overflow a narrow screen -----------------------------------
   `MaximumPageNumbersToDisplay = 5` is a server-side constant, so it cannot flex per
   breakpoint: 5 number cells at 40px plus two 44px arrows and the gaps comes to ~312px,
   wider than the ~280px column on a 320px phone — and the ellipsis cells the frame calls
   for can add more. Wrapping is the only thing that holds at every width and count. */
.sector_content .my_dokumenter .pagination-container ul {
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 4px;
}

/* SE / NO: the fixed columns above are sized to the DANISH strings, and two markets
   need more room. Measured at the real rendered fonts:
     - sv "Vad sker nu?" is 96.7px against the 92px content box that fits DK dates
       (the `?` is appended in markup, so it counts).
     - nb "Utkastet ditt utløper om" is 135.6px against the 128px expiry label.
   Both would wrap to a second line and break the row alignment. Scoped per locale via
   the document's lang attribute (da / sv / nb) so the DK geometry stays exactly on the
   Figma grid — dot at 102, number 128, title 158 — rather than widening every market to
   the longest string and pulling DK off the frame. If a single shared geometry is
   preferred instead, the frame needs updating to the wider column.
   Related content bug, not fixable here: nb's MyDocuments.LatestChanged value is
   "Sist endret:" WITH a colon, and the markup appends another, so Norwegian renders
   "Sist endret::". That belongs in the resx. */
html[lang="sv"] .my_dokumenter .timeline-bar-item__status {
  width: 108px;
}

@media screen and (max-width: 600px) {
  html[lang="sv"] .my_dokumenter .timeline-bar-item__status {
    width: 96px;
  }
}

/* Narrow widths: the stepper columns are sized to the type, and the type changes here.
   `@media (max-width: 600px) { .sector_content ul li { font-size: 14px !important } }`
   drops the timeline from 16px/24 to 14px/21 — and wins on !important — so the desktop
   column widths above (sized for 16px text) become 15px too wide each. On a 390px
   viewport that is a 295px content box, and it pushed the title column from 140 to 159,
   wrapping 7 of 8 step titles instead of 2 and growing the card by 93px.
   Measured at the 14px ramp: the widest real date paints 80.3px, and "13." with tabular
   figures is exactly 22.0px. So 81 + 8 gutter, and a 22px number column. This restores
   the pre-change wrap count (2/8) and card height (784px) while keeping the fixed
   columns, tabular figures and flush-left dates. Mobile is not drawn in the transitional
   frame, so this deliberately matches the legacy baseline rather than inventing a
   narrow-width design. */
@media screen and (max-width: 600px) {
  .my_dokumenter .timeline-bar-item__status {
    width: 89px;
    padding-right: 8px;
  }

  .my_dokumenter .timeline-bar-item > div {
    margin-right: 8px;
  }

  .my_dokumenter .timeline-bar-item__count {
    width: 22px;
  }

  /* the line box is 21px here, not 24, so the 16px dot centres 2px down */
  .my_dokumenter .timeline-bar-item .cercile {
    margin-top: 2px;
  }

  .my_dokumenter .timeline-bar-item.actv .cercile,
  .my_dokumenter .timeline-bar-item.compltd .cercile {
    margin-top: 2px;
  }
}

/* Two v1 leftovers put 32px of dead space between the last step and the button row,
   giving a 58.5px gap where the frame has 24 (last content row 748 -> button box 772).
   1. `.timeline-bar` is a flex row wrapping an INNER plain <ul>, which picks up
      Bootstrap's `ul { margin-bottom: 1rem }` — 16px of slack below the steps.
   2. The last step still carried `min-height: 40px`, the step PITCH, against its own
      24px line box — the trailing 16px only exists to space a following step, and
      there isn't one. `.time-right`'s padding-bottom is already zeroed on :last-child.
   With both gone the button row's own 24px margin-top is the whole gap. */
.my_dokumenter .timeline-bar > ul {
  margin-bottom: 0;
  /* `.timeline-bar` is a flex ROW container, so this inner list is a flex item and carries
     the default `min-width: auto` — it sized itself to its widest step row and pushed
     16px past the card's right edge at 320px, no matter how much the title inside was
     allowed to shrink. min-width: 0 lets it take the container's width, after which the
     title's own min-width: 0 does the rest. */
  min-width: 0;
}

.my_dokumenter .timeline-bar-item:last-child {
  min-height: 0;
}

.my_dokumenter .timeline-bar-item .time-right {
  line-height: 1.5;
  /* 4px sits between the right-aligned number and the title — a constant gap at any
     digit count, and close to the frame's ~3px visual gap. */
  padding-left: 4px;
  /* Figma 4213:10631 / Frame 19: steps are 24px tall with a 16px gap (40px pitch).
     There is no gap between steps in the build — the spacing IS this padding, and it
     was 27px, giving a 51px pitch. Kept as padding rather than a flex gap because the
     connector rail is drawn inside the step and stretches with its height; a gap would
     leave visible breaks in the rail. */
  padding-bottom: 16px;
}


/* Completed status, per Figma 4262:18244 — heroicons-solid/check-badge, a 24x24 box with
   a 20px glyph in Semantic/green/400.
   It was `content: url(status-completed.jpg)`: a 2.6KB RASTER, painted 28 x 31.6, on an
   absolutely positioned ::after. Absolute took it out of the flow so it never lined up
   with the 15.6px text line, and at 31.6px it was twice the line's height — which is the
   "a bit off" in the report. Now a real SVG in a flex row, so it centres on the text and
   the gap is a real gap instead of padding on an absolute box. */
.product-info-right li p.product-status-complete {
  display: flex;
  align-items: center;
  gap: 6px;
}

.product-info-right li .product-status-complete::after {
  content: "";
  position: static;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  padding-left: 0;
  background: url("/css/img_new/check-badge.svg") no-repeat center/24px 24px;
}

/* Figma 4266:19808 / 4266:19812 put this text in green beside the badge, at
   type/label/large/medium (12px Medium) — the weight it already had.
   ACCEPTED WCAG DEVIATION — do not "fix" this back. Semantic/green/500* #0E9F6E on the
   card's gray/50 measures 3.24:1, under the 4.5:1 that 12px text needs. Chosen by the
   design owner as the middle ground: the frame's own green/400 is 2.14:1, and the only
   DS green that passes is green/800 #03543F at 8.57:1 (what v2 uses for its "Complete"
   labels) which reads dark rather than green. The ladder has no 600 or 700, so there is
   no mid-green that both reads green and passes. The BADGE stays green/400 per the frame
   — it is decorative and redundant with this text, so WCAG 1.4.11 does not apply to it.
   Worth revisiting when this card is rebuilt in Vue. */
.my_dokumenter .product-info-right li p.product-status-complete {
  color: var(--green-500, #0e9f6e);
  font-weight: 500;
}
.product-info-right .product-title-icon span {
  color: #eb552c !important;
}

.product-info-right .product-title-icon span {
  padding-left: 5px;
}

.product-info-right li p.product-modified-date-mobile,
.product-info-right li p.product-created-date-mobile {
  display: none;
  color: var(--gray-500, #6b7280);
}

.product-info-right li a.edit-document {
  position: absolute;
  right: 5px;
  color: #2f3651;
  font-weight: 500;
  display: none;
}

.product-info-right li a.edit-document .fa {
  padding-right: 5px;
}

.showhide-sectionbox {
  padding-left: 100px;
}

.document-in {
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 40px;
  display: none;
}

.document-in ul {
  margin-bottom: 30px;
}

.document-in li {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}

.document-in ul:last-child {
  margin-bottom: 0;
}

.document-in li:last-child {
  margin-bottom: 0;
}

.document-in li .doc-list-img {
  min-width: 30px;
}

.doc-item-logo {
  width: 30px;
  position: relative;
}

.doc-item-logo .doc-item-logo {
  width: 100%;
}

.doc-list-img {
  position: relative;
}

.doc-list-img:after {
  background-size: cover;
  width: 20px;
  height: 20px;
  position: absolute;
  right: -8px;
  bottom: -8px;
}

.doc-list-img.awaiting:after {
    content: '';
    background-image: url("/css/img_new/Awating_signatures.svg");
    background-color: white;
}

.doc-list-img.processing:after {
    content: '';
    background-image: url("/css/img_new/Loader_spinning.gif");
}

.doc-list-img.signed:after {
    content: '';
    background-image: url("/css/img_new/check-icon.svg");
}

.doc-list-img.uploaded:after {
  content: "";
  background-image: url("/css/img_new/Document_uploaded.svg");
}

.doc-content {
  margin-left: 20px;
}

.doc-content h5 {
  font-size: 15px;
  margin: 0;
  font-weight: 400;
}

.doc-content p {
  font-size: 13px;
  margin: 0;
}

.show-doc {
  margin-left: auto;
}

.show-doc button {
  color: #2f3650;
  font-size: 13px;
  background: transparent;
  border: 1px solid #2f3650;
  padding: 7px 16px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.show-doc button svg {
  width: 16px;
  height: 16px;
}

.show-doc button:disabled {
  opacity: 0.3;
}

.document-failed-container {
  display: none;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.38rem;
  padding: 1rem;
  color: var(--yellow-700, #A16207);
  background-color: var(--yellow-100, #FEF9C3);
  font-family: Inter, sans-serif;
  border-radius: 0.375rem;
}

.document-failed-container__exclamation-icon {
  width: 1.125rem;
  height: 1.125rem;
}

.document-failed-container__title-container {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  align-items: center;
}

.document-failed-container__title {
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  line-height: 150%; /* 1.5rem */
}

.document-failed-container__description-container {
  display: flex;
  flex-direction: column;
  font-weight: 400;
  font-size: 0.875rem;
  font-style: normal;
  line-height: 150%;
}

.document-failed-container__description-container b {
  font-weight: 700;
}

.document-failed-container.failed {
  display: flex !important;
}

.headline-section h2 {
  font-size: 36px;
  font-family: "Inter", sans-serif !important;
  font-weight: 500;
  margin-top: 5rem;
}

.headline-section p {
  font-family: "Inter", sans-serif;
  font-size: 17px;
  margin-bottom: 3rem;
}

div.product-info-right p.product-description {
  color: var(--gray-500, #6b7280);
  margin-bottom: 0.5rem;
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 125%;
}

.product-info-right h3 {
  font-family: Inter, sans-serif;
  color: var(--primary-900, #3d3d52) !important;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
}

/* Figma 4205:10612 "Badge": 2/8 padding and a 999 pill radius, not 5px 7px / 5px. */
.product-info-right div.draft-badge {
  max-width: fit-content;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--secondary-100, #fee2d6);
  margin-bottom: 0.5rem;
}

.product-info-right div.draft-badge h3.product-draft-label {
  color: var(--secondary-800, #971517) !important;
  font-family: Inter, sans-serif !important;
  /* label/large — 12px, matching the Figma badge text */
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 125%;
  margin-bottom: 0;
}

.product-info-right h3.product-title-name {
  color: var(--primary-900, #3d3d52) !important;
  margin-bottom: 0;
}

.product-info-right p {
  font-size: 14px;
  font-family: "Inter", sans-serif;
}

.sign-up-in {
  background: #fafafa;
  padding: 40px;
  display: none;
}

.email-sec {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-family: "Inter", sans-serif;
  padding: 5px 0px 20px;
}

.em-sec {
  display: flex;
  width: 60%;
}

.email-sec input {
  background: #00000008;
  margin-right: 20px;
  padding: 8px 15px 8px 33px;
  border: none;
  width: 100%;
  box-shadow: 0 0 7px rgb(0 0 0 / 12%);
}

/* Wizard active state (TextItem / qbutton): blue ring, not the global
   Primary/900 slate outline in the :focus-visible rule above. */
.email-sec input[type="email"]:focus,
.email-sec input[type="email"]:focus-visible,
.email-sec input.party-email:focus,
.email-sec input.party-email:focus-visible,
.email-sec input[type="checkbox"]:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 1px #fcfefe, 0 0 0 3px #1c64f2;
}

.email-sec input[type="checkbox"] {
  padding: 0;
  border: none;
  margin: 0 20px;
  -webkit-appearance: none;
  background: #fff;
  width: 35px;
  height: 35px;
}

/* Was `position: absolute; top: -15px; right: 39px`. All three are gone:
   - `right: 39px` compensated for the old 877px column.
   - absolute positioning meant the row contributed no height, so the card's old
     `padding-bottom: 45px` was silently reserving space for it. With the card now
     owning a real 24px padding, the row overflowed the card by 28px.
   In flow it contributes its own height and sits at the card's bottom, per Figma. */
/* Restored to the original absolute row. This container is shared: the DRAFT card and
   the FINALIZED card both render `.show-sign-btn`, the finalized one inside
   `.show-sign-section > .showhide-section.pos` (which is position: relative). Making the
   base static moved BOTH — correct for the draft card, which the frame draws with the
   row in flow at the card's bottom, but it also dragged the finalized card's buttons out
   of the top-right corner they have always occupied, overlapping the module panel.
   So: original behaviour on the base, and the new in-flow layout scoped to the draft
   case. Position is deliberately NOT set on `.not_draft_buttons` — the legacy mobile
   rule `div.show-sign-btn { position: unset }` (0,1,1) has to keep winning over this
   base (0,1,0) at <=568px, and a class-based override would out-specify it and break
   the stacked mobile layout. */
.show-sign-btn {
  position: absolute;
  width: 100%;
  top: -15px;
  right: 39px;
  z-index: 0;
}

.show-sign-btn:not(.not_draft_buttons) {
  position: static;
  width: 100%;
  margin-top: 24px;
}

/* REVERT KEYWORD: "RESTORE OVERLAP" -> set top back to -22px here and the reserve below
   back to 46px / 24px. Patch also at
   ~/Projects/_archived-worktree-edits/mydocs-checkpoints/overlap-legacy-20260820.patch
   The legacy -22px lifted this 41px row so it straddled whatever sat below it, crossing
   that box's 1px top border and leaving the border visible through the 10px gaps between
   buttons. The lift is now exactly the row's own height, so the row's bottom edge lands
   on the anchor and the 8px separating it from the block below lives on that block
   instead (see .document-in / .timeline-module_outer-container). Carrying the gap in the
   lift instead left 8px of dead space under the row whenever nothing was expanded, which
   read as an 8px-too-deep card bottom.
   Height-dependent, like the -22px it replaces: if a longer SE/NO label ever wraps this
   row to two lines, the offset needs revisiting. */
.show-sign-btn.not_draft_buttons {
  width: unset;
  top: -41px;
}

/* The row's ul/li carry 16px/20px bottom margins that collapse out of .show-sign-btn
   (no padding, no border) and push the card's content box down, so the space under the
   buttons read 45px instead of the card's own 24px. */
.show-sign-btn > ul,
.show-sign-btn > ul > li {
  margin-bottom: 0;
}

/* The card owns the 24px inset now; py-5's 1.25rem/1.5rem would double it. */
.product-container > .product-timeline.py-5 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/*tablet*/
@media screen and (min-width: 662px) and (max-width: 1030px) {
  .show-sign-btn:not(.not_draft_buttons) {
    right: unset;
  }
  .sector_content
    .product-info-right
    ul
    li.draft-expiration-item
    div.postpone-btn-container {
    margin-left: 15px;
  }
}

/*mobile*/
@media screen and (max-width: 568px) {
  div.product-info-right div.product-title-icon h3 {
    margin: unset;
    font-size: 20px;
    line-height: 150%;
  }
  div.product-info-right p.product-description {
    font-size: 12px;
  }
  div.product-info-right ul li p {
    flex: unset !important;
    font-size: 11px !important;
  }
  div.product-info-right ul li p:first-child {
    width: 145px;
  }
  div.product-info-right
    ul
    li.draft-expiration-item
    p.expiration-badge.product-created-date {
    display: block;
    width: 164px;
    color: var(--gray-500, #6b7280);
  }
  div.product-info-right
    ul
    li.draft-expiration-item
    div.postpone-btn-container {
    margin-left: 2px !important;
    margin-top: -4px !important;
    width: 125px;
  }
  div.product-info-right
    ul
    li.draft-expiration-item
    div.postpone-btn-container
    button.postpone-btn {
    font-size: 12px;
  }
  div.show-sign-btn {
    position: unset;
  }
  div.show-sign-btn ul li {
    flex-direction: column-reverse;
  }
  div.show-sign-btn ul li div#my-dropup {
    height: 48px;
    margin-top: 12px;
  }
  div.show-sign-btn ul li div#my-dropup button#dropup_btn {
    height: 48px;
  }
  div.show-sign-btn ul li div#my-dropup,
  div.show-sign-btn ul li button.sign-btn {
    width: 100%;
    height: 48px;
    margin-left: unset;
  }
  div.show-sign-btn ul li button.sign-btn {
    padding: 12px 20px;
  }
  div.show-sign-btn ul li button.sign-btn.notDraftBtn {
    margin-bottom: 12px;
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
  }
}

/* Custom timeline dropup start */
#my-dropup {
  width: 50%;
  height: 48px;
  background-color: white !important;
}

#my-dropup #dropup_btn {
  width: 100%;
  height: 100%;
  background: var(--gray-100, #f3f4f6);
  border-radius: 5px;
  border: 1px solid var(--gray-200, #e5e7eb);
  color: var(--gray-600, #4b5563);
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
}

#my-dropup #dropup_btn:hover {
  background: var(--gray-200, #e5e7eb);
}

#my-dropup #dropup_btn span {
  margin-left: 10px;
}

#my-dropup #dropup_btn span img.arrow-down {
  width: 22px;
  height: 22px;
}

#my-dropup #dropup_btn:focus {
  box-shadow: none;
  border-radius: none;
}

#my-dropup #dropup_btn::after {
  display: none;
}

#my-dropup div.dropdown-menu {
  /* `top: -6px !important` removed: this is a .dropup, and Bootstrap positions it with
     `top: auto; bottom: 100%`. Forcing a top offset as well over-constrained the box and
     the menu landed ~170px above the button. The 6px gap is a margin-bottom instead. */
  width: 100%;
  padding-top: 0;
  padding-bottom: 0;
  border-radius: 8px;
  border: 1px solid var(--gray-200, #e5e7eb);
  background: var(--gray-50, #f9fafb);
  box-shadow: 0px 4px 6px -4px rgba(0, 0, 0, 0.05),
    0px 10px 15px -3px rgba(0, 0, 0, 0.05);
}

#my-dropup div.dropdown-menu div.dropdown-divider {
  border: 1px solid var(--gray-200, #e5e7eb);
  margin-top: 0;
  margin-bottom: 0;
}

#my-dropup div.dropdown-menu button.dropup-option {
  display: flex;
  padding: 14px 12px;
  gap: 12px;
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.5;
  color: var(--primary-900, #3d3d52);
  align-items: center;
  width: 100%;
  background: unset;
  border: unset;
}

#my-dropup div.dropdown-menu button.dropup-option:hover {
  background: var(--gray-100, #f3f4f6);
}

/* Custom timeline dropup end */

button.show-btn.notDraftBtn,
button.sign-btn.notDraftBtn {
  width: unset;
  padding-left: 16px;
  padding-right: 16px;
  font-size: 14px;
}

button.show-btn.notDraftBtn {
  color: var(--gray-500, #6b7280);
}

@media screen and (max-width: 568px) {
  button.show-btn.notDraftBtn {
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
  }
}

button.show-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50%;
  color: var(--gray-500, #6b7280);
  font-size: 14px;
  background: var(--gray-100, #f3f4f6);
  height: 41px;
  padding: 10px 20px 10px 19px !important;
  gap: 8px;
  border-radius: 5px;
  border: 1px solid var(--gray-200, #e5e7eb) !important;
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
}

button.notDraftBtn img.timeline-new-icon {
  width: 20px;
  height: 20px;
}

button.notDraftBtn img.timeline-new-icon.edit-icon {
  margin-top: 5px;
}

button.show-btn:hover {
  background: var(--gray-200, #e5e7eb);
}

button.sign-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  background: var(--gray-800, #1f2a37);
  border: none;
  color: var(--white, #fcfefe);
  font-size: 14px;
  padding: 10px 20px !important;
  border-radius: 5px;
  margin-left: 10px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
  font-family: "Inter", sans-serif;
}

button.sign-btn {
  color: var(--white, #fcfefe);
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  padding: 12px 24px;
}

button.sign-btn:hover {
  background: var(--gray-700, #374151);
}

/* The frame binds the draft card's primary button to Neutrals/gray/800, so
   `button.sign-btn`'s background was changed from Primary/900 slate (#3d3d52) to
   #1f2a37. That rule is shared with the finalized card's `currentStep_btn`, which lives
   in the timeline-wizard block — so the slate is restored here to keep that block's
   appearance byte-identical to before. Its secondary buttons never needed this: the
   `button.show-btn` rules are untouched. */
button.sign-btn.notDraftBtn {
  background: var(--primary-900, #3d3d52);
}

button.sign-btn.notDraftBtn:hover {
  background: var(--primary-700, #5d5c73);
}

/* NOTE — deliberately NOT restyled. The finalized card's buttons (`.show-btn.notDraftBtn`
   / `.sign-btn.notDraftBtn`) belong to the timeline-wizard block, which is legacy code
   due to be replaced by a Vue implementation. Per the design owner it must keep its
   current appearance exactly, so the earlier alignment here (16px labels, 48px height,
   gray/600 secondary text) was reverted and these buttons stay at their legacy 41px /
   14px / gray/500.
   Known deferred finding: gray/500 (#6b7280) on gray/100 (#f3f4f6) is 3.0:1, below the
   4.5:1 WCAG 1.4.3 AA threshold for body text. Left in place on purpose — raise it with
   the wizard rewrite, not here. */

/* Both card types render the SAME wrapper markup here —
   `.show-sign-section > .showhide-section.position-relative > .show-sign-btn` — and the
   only thing distinguishing them is `.not_draft_buttons` on the inner row. So the
   reserve below cannot be a plain descendant rule: on the draft card it collapses with
   the row's own 24px margin (no padding or border in between) and the larger value wins,
   which pushed the draft card's gap from 24 to 46.
   The draft card needs nothing here — its row is in flow and carries its own 24px. The
   finalized card's row is lifted 22px out of flow, so `.show-sign-section` collapses to
   zero height and the space has to be reserved here: 24px clear of the timeline + the
   22px lift. The timeline above is tighter than it used to be (the inner-ul margin and
   the last step's trailing 16px are both gone), so without it the lifted row collides
   with the final step.
   :has() is the only way to tell the two apart in CSS. If it is unsupported the rule is
   simply dropped and the finalized row sits tighter — it does not break the layout. */
.my_dokumenter .show-sign-section {
  margin-top: 0;
}

.my_dokumenter .show-sign-section:has(.show-sign-btn.not_draft_buttons) {
  /* 24px clear of the timeline + the 41px lift (the row's own height) */
  margin-top: 65px;
}

/* The finalized card ends in the Status row rather than the timeline, and 24px reads
   tight against it — the row carries a 24px badge, so it is visually heavier than a text
   line even though the gap measures a true 24px from the badge's bottom edge. Stepped to
   32px, the next value on the 8px rhythm this card already uses (8px between meta rows,
   24px between blocks). Scoped to cards that actually have a Status row, so the
   in-progress card keeps the frame's 24px from its timeline. 32 + the 41px lift. */
.my_dokumenter .product-container:has(.product-status-complete) .show-sign-section {
  margin-top: 73px;
}

/* At this width the legacy `div.show-sign-btn { position: unset }` puts the finalized
   card's row back into flow — matching the mobile reference, where the buttons sit
   full-width above the panel rather than overlapping it. With no 22px lift there is
   nothing to reserve, so the 46px above would read as a 46px gap. Just the 24px. */
@media screen and (max-width: 568px) {
  .my_dokumenter .show-sign-section:has(.show-sign-btn.not_draft_buttons) {
    margin-top: 24px;
  }
}

.show-sign-btn li {
  list-style: none;
  display: flex;
}

button.show-btn.timeline-process {
  margin-right: 10px;
}

button.show-btn.edit {
  margin-left: 10px;
}

button.show-btn i {
  margin-right: 6px;
}

.document-in.open-doc {
  display: block;
}

.sign-up-in.open-sign {
  display: block;
}

.show-cls {
  display: none;
}

.sign-cls {
  display: none;
}

.sign-btn-open span.sign-cls {
  display: block;
}

.sign-btn-open span.sign-opn {
  display: none;
}

.shw-btn-open span.show-opn {
  display: none;
}

.shw-btn-open span.show-cls {
  display: block;
}

img.local-icon {
  width: 1em;
  position: relative;
  bottom: 0.125em;
  margin-right: 6px;
}

.sign-up-in h3 {
  font-size: 17px;
}

.sign-up-in p {
  font-size: 14px;
  margin: 10px 0 20px;
  font-family: "Inter", sans-serif;
}

.em-sec span i {
  font-size: 18px;
  opacity: 0.65;
  color: #00000057;
}

.em-sec span {
  position: absolute;
  color: #dedede;
  left: 10px;
  top: 9px;
}

.em-sec {
  width: 60%;
  position: relative;
}

.show-hide-sec .showhide-sectionbox {
  padding-left: 48px;
}

.show-doc a {
  display: none;
}

.product-timeline.py-5 {
  padding-bottom: 1.5rem !important;
}

.product-timeline_mark {
  display: flex;
  flex-direction: column;
}

.product-timeline .book-mark {
  align-self: flex-end;
  background: #2f3651;
  color: white;
  margin: -10px 77px 10px;
  padding: 5px 35px 5px 45px;
  border-radius: 20px 0 0 20px;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  position: relative;
}

.product-related-to-cvr {
  margin-right: 77px;
  float: right;
}

@media screen and (max-width: 768px) {
  .product-timeline .book-mark {
    margin-right: 0;
  }
  .product-related-to-cvr {
    margin-right: 0;
  }
}

.product-timeline .book-mark:before {
  content: "";
  background: #2f3651;
  right: calc(-100% - 25px);
  width: 10px;
  height: 10px;
  display: block;
  margin-top: -15px;
  margin-bottom: 5px;
  clip-path: polygon(0% 25%, 100% 100%, 100% 100%, 0% 100%);
  position: relative;
}

.product-timeline .book-mark:after {
  content: "\f058";
  font-family: FontAwesome, sans-serif;
  font-size: 30px;
  color: white;
  left: 4px;
  top: -5px;
  position: absolute;
}

.comp-buttons {
  display: inline-flex;
}

.admin-area {
  text-align: right;
}

.admin-area a {
  padding-right: 10px;
}

/* Admin area select */
/* class applies to select element itself, not a wrapper element */
select.admin-area {
  display: block;
  /* 11167: positioning now belongs to the flex wrapper that holds this and the
     timeline multiselect (see mine_dokumenter.scss) — this hugs its own content. */
  width: fit-content;
  /* 11167: 12px keeps this admin-only control clear of the product title, and the
     weight/border/radius/line-height match the multiselect so the pair reads as one. */
  font-size: 12px;
  font-family: Inter, sans-serif;
  font-weight: 500;
  color: #444;
  line-height: 1.25;
  /* right padding clears the cog icon and leaves a gap between it and the text */
  padding: 0.3em 1.9em 0.3em 0.5em;
  box-sizing: border-box;
  margin: 0;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  -moz-appearance: none;
  -webkit-appearance: none;
  background-color: #fff;
  /* note: bg image below uses 2 urls. The first is an svg data uri for the arrow icon, and the second is the gradient. 
        for the icon, if you want to change the color, be sure to use `%23` instead of `#`, since it's a url. You can also swap in a different svg icon or an external image reference
        
    */
  background-image: url("/css/img_new/cog-solid.svg")
    /*, linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%)*/;
  background-repeat: no-repeat, repeat;
  /* arrow icon position (1em from the right, 50% vertical) , then gradient position*/
  background-position: right 0.6em top 50%, 0 0;
  /* icon size, then gradient */
  background-size: 0.65em auto, 100%;
}
/* Hide arrow icon in IE browsers */
select.admin-area::-ms-expand {
  display: none;
}
/* Hover style */
select.admin-area:hover {
  border-color: rgba(0, 0, 0, 0.35);
}
/* 11167: the focus style used to be commented out, so this control had no visible
   focus at all. #3b82f6 is the focus colour the PrimeVue theme already uses. */
select.admin-area:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 1px;
}

/* Set options to normal weight */
select.admin-area option {
  font-weight: normal;
}

/* Support for rtl text, explicit support for Arabic and Hebrew */
:root:lang(ar) select.admin-area,
:root:lang(iw) select.admin-area {
  background-position: left 0.7em top 50%, 0 0;
  padding: 0.6em 0.8em 0.5em 1.4em;
}

/* Disabled styles */
select.admin-area:disabled {
  color: graytext;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E"),
    linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%);
}

select.admin-area:disabled:hover {
  border-color: #aaa;
}
/*Admin area select -- End*/

@media screen and (max-width: 600px) {
  .sector_advantage .advantages .block {
    width: 100%;
    text-align: center;
    margin-bottom: 30px;
  }

  .sidebar_right {
    display: none;
  }
}
/*MINE DOKUMENTER*/
.documents_block {
  position: relative;
  padding: 50px 0;
  border-bottom: 1px solid #d8d8d8;
}

.documents_block img {
  float: left;
  margin-right: 20px;
  margin-top: 5px;
}

.documents_block img.basket-image {
  width: 57px;
  height: auto;
}

.documents_block p {
  margin-bottom: 5px;
}

.documents_block p.icon_title {
  margin: 0;
  text-align: left;
}

.documents_block p.date {
  color: #a0a0a0;
}

/*INDKOBSKURV*/

.sidebar_left ul li {
  list-style-type: none;
}

.sidebar_left ul li a {
  opacity: 0.25;
  color: #3d3d52 !important;
  font-family: "Inter", sans-serif;
  font-size: 20px;
}

.sidebar_left ul li a:hover {
  text-decoration: none;
  opacity: 0.5;
}

.sidebar_left ul li a.current {
  color: #3d3d52;
  font-family: "Inter", sans-serif;
  font-size: 20px;
  opacity: 1;
}
/*BRUGEROPLYSNINGER*/

h1.content_title {
  max-width: 600px;
}
/*CONDITIONAL1*/

.radiostyle {
  margin-bottom: 20px;
  color: #3d3d52;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.44px;
}

[type="radio"]:checked,
[type="radio"]:not(:checked) {
  position: absolute;
  left: -9999px;
}

[type="radio"]:checked + label,
[type="radio"]:not(:checked) + label {
  position: relative;
  padding-left: 40px;
  padding-right: 50px;
  cursor: pointer;
  display: block;
  color: #666;
}

[type="radio"]:checked + label:before,
[type="radio"]:not(:checked) + label:before {
  content: "";
  position: absolute;
  left: 0;
  top: -2px;
  width: 24px;
  height: 24px;
  border: 1px solid #2f3650;
  border-radius: 100%;
  background-color: #fff;
  background-color: var(--gray-50, #f9fafb);
}

[type="radio"]:checked + label:after,
[type="radio"]:not(:checked) + label:after {
  content: "";
  width: 12px;
  height: 12px;
  position: absolute;
  top: 4px;
  left: 6px;
  border-radius: 100%;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
  background-color: #38bf26;
}

[type="radio"]:not(:checked) + label:after {
  opacity: 0;
  -webkit-transform: scale(0);
  transform: scale(0);
}

[type="radio"]:checked + label:after {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}

input[type="submit"] {
  border: none;
  cursor: pointer;
}

fieldset {
  width: 100% !important;
}

input[type="submit"] {
  border: none;
  cursor: pointer;
}

.form_button {
  text-align: left;
}

.form_button .qbutton {
  display: inline-block;
  margin: 0 !important;
  max-width: 500px;
}
/*CUSTOM CHECKBOX*/
/* Base for label styling */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
  position: absolute;
  left: -9999px;
}

[type="checkbox"] + label {
  position: relative;
  padding-left: 30px;
  cursor: pointer;
}
/* checkbox aspect */
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 21px;
  height: 21px;
  border: 1px solid #2f3650;
  background: #fff;
}
/* checked mark aspect */
[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after {
  content: "\f00c";
  position: absolute;
  top: 0.2em; /* */
  left: 0; /* */
  font-size: 1.3em;
  line-height: 0.8;
  color: #38bf26;
  transition: all 0.2s;
  font-family: FontAwesome, sans-serif;
}
/* checked mark aspect changes */
[type="checkbox"]:not(:checked) + label:after {
  opacity: 0;
  transform: scale(0);
}

[type="checkbox"]:checked + label:after {
  opacity: 1;
  transform: scale(1);
}
/* disabled checkbox */
[type="checkbox"]:disabled:not(:checked) + label:before,
[type="checkbox"]:disabled:checked + label:before {
  box-shadow: none;
  border-color: #bbb;
  background-color: #ddd;
}

[type="checkbox"]:disabled:checked + label:after {
  color: #999;
}

[type="checkbox"]:disabled + label {
  color: #aaa;
}
/* accessibility */
[type="checkbox"]:checked:focus + label:before,
[type="checkbox"]:not(:checked):focus + label:before {
}
/*ARTIKEL*/
input[type="search"]:not(.flow_modal-input-field):not(
    .flow_modal_new-input-field
  ) {
  width: 100%;
  height: 53px;
  box-sizing: border-box;
  -webkit-box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.1);
  -webkit-appearance: none;
  -moz-box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.1);
  background-color: #ffffff;
  border: none;
  color: #4a4a4a !important;
  font-family: "Inter", serif;
  font-size: 18px;
  font-weight: 700;
  padding-left: 20px;
  margin-top: 30px;
}

::-webkit-input-placeholder {
  color: #d2d2d2;
}

::-moz-placeholder {
  color: #d2d2d2;
}

.separator {
  width: 100%;
  height: 0;
  border: 1px solid #d9d9d9;
  margin: 25px 0;
  opacity: 0.7;
}

.artikel_block {
  margin: 60px 0;
}

.artikel_block a {
  text-decoration: none !important;
}

.artikel_block h4 {
  color: #3d3d52;
  font-family: "Inter", serif;
  font-size: 18px !important;
  font-weight: 700;
  line-height: 26px !important;
  /* Text style for "Hvorfor sk" */
  letter-spacing: -0.37px;
  margin-bottom: 0 !important;
}

.artikel_block p {
  color: #848484;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: 23px;
}

.artikel_block .info {
  margin-bottom: 10px;
  color: #6c6c6c;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: 17px;
}

.artikel_block .info span.dot {
  margin: 0 10px;
}

.artikel_block .info img {
  margin-right: 15px;
  width: 25px;
}
/* [Added]  : Reduce margin space for first article result item*/
.artikel_block.firstArticle {
  margin: 36px 0;
}

/*ARTIKLE_STEP*/
.tags {
  margin: 30px auto;
  text-align: center;
}

.tag {
  border-radius: 6px;
  border: 1px solid #aebac6;
  color: #929eab !important;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 300;
  white-space: nowrap;
  padding: 5px 10px !important;
  line-height: 40px;
  text-decoration: none;
  transition: all 0.4s;
  margin: 5px !important;
}

.tag:hover {
  background: #f65734 !important;
  color: #fff !important;
  border: 1px solid #f65734;
  text-decoration: none;
}

html,
body {
  height: 100%;
  width: 100%;
}

.mobileBanner {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 10px;
  padding-bottom: 5px;
}

.mobileBanner div {
  width: 20em;
}

.mobileBanner div > img {
  width: 100%;
}

.sidebar_right .customerBusinessCommon {
  width: 16em;
}

.sidebar_right .customerBusinessCommon img {
  width: 100%;
}

.sidebar_right .tags a {
  padding: 5px;
  border-radius: 6px;
}

.sidebar_right .tags {
  margin: 0;
  margin-bottom: 50px;
}

.sidebar_right .plashka {
  background: #fff;
  padding: 30px;
  -webkit-box-shadow: 2px 2px 3px 1px rgba(0, 0, 0, 0.27);
  -moz-box-shadow: 2px 2px 3px 1px rgba(0, 0, 0, 0.27);
  box-shadow: 2px 2px 3px 1px rgba(0, 0, 0, 0.27);
  border-radius: 6px;
}

.sidebar_right .plashka .qbutton {
  margin-top: 30px !important;
  display: block;
}

.split-A + .site-body .sidebar_right .plashka {
  display: none;
}

.sidebar_right p {
  margin-bottom: 0;
}

p {
  line-height: 1.5;
}
/*LOG IND*/

/*Artikel video*/
.casework_modal .modal-body {
  padding: 0 !important;
}

.casework_modal .modal-dialog {
  max-width: 60% !important;
  margin-top: 100px !important;
}

.close {
  display: none !important;
}

.casework_modal .modal-content {
  background: transparent !important;
  border: none !important;
}

.adminBtnDisabled {
  border: 1px solid #999999 !important;
  background-color: #cccccc !important;
  color: #666666 !important;
  pointer-events: none;
}

.adminBtnDisabled:hover {
  cursor: not-allowed !important;
}

#adminUploadDocModal .modal-content {
  padding: 10px 10px !important;
  background: whitesmoke !important;
}

#adminUploadDocModal .modal-dialog {
  min-width: 40% !important;
  max-width: 50% !important;
  margin: auto;
}

#adminUploadDocModal {
  background: rgba(0, 0, 0, 0.3);
}
#adminUploadDocModal.show {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  align-items: flex-start;
  z-index: 1000000 !important;
}

@media (max-width: 768px) {
  #adminUploadDocModal .modal-dialog {
    min-width: 300px !important;
    margin: auto;
  }
}

/*WIZZARD*/
/* Style the buttons that are used to open and close the accordion panel */
.accordion {
  background-color: #edeef2;
  color: #444;
  cursor: pointer;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
  position: relative;
  color: #3d3d52;
  font-family: "Inter", sans-serif;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
  padding: 70px 50px 70px 50px;
  background-color: white;
  display: none;
  overflow: hidden;
}

input,
button,
select {
  outline: none !important;
}

/* WCAG 2.4.7: keyboard users get a visible ring; mouse clicks stay outline-free. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #3d3d52 !important;
  outline-offset: 2px;
}

/* Kill the site-wide Primary/900 slate outline. Wizard text/select/combobox
   focus is the 1px #1c64f2 border on the control (DS / Figma), not an offset
   ring. TextItem also sets tabindex="0", so the [tabindex] rule above would
   otherwise keep the black outline. CTA buttons keep their own ring. */
#wizard-page-vue :is(input, textarea, select, button, [tabindex]):focus-visible {
  outline: none !important;
}

#wizard-page-vue input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([aria-invalid="true"]):focus-visible,
#wizard-page-vue textarea:not([aria-invalid="true"]):focus-visible,
#wizard-page-vue select:not([aria-invalid="true"]):focus-visible,
#wizard-page-vue .ld-select-trigger:focus-visible {
  box-shadow: none !important;
}

/* Timeline module (Mine dokumenter): wizard-css bundle is not loaded; suppress the
   site-wide slate outline so focus is the 1px #1c64f2 border in timelineModule.css. */
.timeline-module_outer-container .timeline-module :is(input, textarea, select):focus,
.timeline-module_outer-container .timeline-module :is(input, textarea, select):focus-visible {
  outline: none !important;
}

/* Profile drawer (teleported Vue panel): border-only focus like wizard fields. */
.profile-settings-panel :is(input, textarea, select):focus,
.profile-settings-panel :is(input, textarea, select):focus-visible {
  outline: none !important;
}

.profile-settings-panel
  input:not([type="checkbox"]):not([type="radio"]):not([aria-invalid="true"]):focus,
.profile-settings-panel
  input:not([type="checkbox"]):not([type="radio"]):not([aria-invalid="true"]):focus-visible,
.profile-settings-panel textarea:not([aria-invalid="true"]):focus,
.profile-settings-panel textarea:not([aria-invalid="true"]):focus-visible,
.profile-settings-panel select:not([aria-invalid="true"]):focus,
.profile-settings-panel select:not([aria-invalid="true"]):focus-visible {
  box-shadow: none !important;
}

/* Mobile new-login modal (Knockout #newLogin_modal): border-only DS blue focus. */
#newLogin_modal :is(input, textarea, select):focus,
#newLogin_modal :is(input, textarea, select):focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Checkout rabatkode: composite .discount-container uses :focus-within for DS blue border. */
#checkout_modal .discount-container input:focus,
#checkout_modal .discount-container input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -6rem;
  z-index: 2147483647;
  padding: 0.5rem 1rem;
  background: #fff;
  color: #3d3d52;
  font-weight: 600;
}

.skip-link:focus,
.skip-link:focus-visible {
  top: 0.5rem;
}

input:disabled {
  opacity: 0.4 !important;
  cursor: default;
}

input:disabled:hover {
}

.panel h3 {
  color: #3d3d52 !important;
  font-size: 18px !important;
  /* Text style for "Hvilken or" */
  letter-spacing: -0.56px !important;
  font-weight: 400 !important;
}
.documents_block.acco {
  padding: 0 !important;
  border: none !important;
}

.acco12 {
  position: absolute;
  right: 70px;
  bottom: 45px; /*   Changed from 70 to 45 */
  width: 163px;
}

@media screen and (max-width: 662px) {
  .panel .panel {
    padding: 20px 0 !important;
  }

  .acco12 {
    position: static;
    max-width: 163px;
    margin: 0 auto;
  }
}

@media screen and (max-width: 662px) {
  .acco12 {
    margin-top: 28px;
  }
}

@media screen and (min-width: 662px) and (max-width: 1000px) {
  .acco12 {
    position: static;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
  }
}

/*MEGA MENU*/
.header_megamenu {
  max-width: 60%;
  display: flex;
  justify-content: flex-end;
}
/* Reset */
.nav,
.nav a,
.nav ul,
.nav li {
  margin: 0 !important;
  padding: 0 !important;
  border: none;
  outline: none;
}

.nav a {
  text-decoration: none;
}

.nav li {
  list-style: none;
}
/* Menu Container */
.nav {
  cursor: default;
  z-index: 500;
}

/* Menu List */
.nav > li {
  display: block;
  float: left;
}
/* Menu Links */
.nav > li > a {
  position: relative;
  z-index: 510;
}

.nav > li:hover > a {
}

.nav > li:first-child > a {
}
/* Menu Dropdown */
.nav > li > div.megamenu {
  border-radius: 0 0 15px 15px;
  position: absolute;
  z-index: 99999;
  opacity: 0;
  left: calc(100% - 42vw);
  width: 1105px;
  visibility: hidden;
  background: #ffffff;
  -webkit-transition: all 0.3s ease 0.15s;
  -moz-transition: all 0.3s ease 0.15s;
  -o-transition: all 0.3s ease 0.15s;
  -ms-transition: all 0.3s ease 0.15s;
  transition: all 0.3s ease 0.15s;
  /* this is so that the megamenu does not "scale" its width */
  transition: width 0s;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
}

@media screen and (min-width: 1800px) {
  .nav > li > div.megamenu {
    left: calc(100% - 25vw);
  }
}

@media screen and (min-width: 2300px) {
  .nav > li > div.megamenu {
    left: calc(100% - 20vw);
  }
}

.nav > li > div.megamenu.se {
  width: 500px;
  left: -50%;
}

.megamenu_inner {
  display: flex;
  cursor: default;
}

.menu-items {
  display: flex;
  flex-flow: column wrap;
  max-height: 600px;
}

.nav > li > div.megamenu .menu-items .level-one ul {
  background: white;
  width: 250px;
  overflow: auto;
  padding-top: 25px !important;
}

.nav > li > div.megamenu .menu-items ul.new_menu_products span.nav_title {
  padding-left: 15px;
  padding-bottom: 20px;
  font-weight: 500;
}

.nav > li > div.megamenu .menu-items .level-one.subcategory-item {
  padding-right: 10px !important;
  position: relative;
}
.nav > li > div.megamenu .menu-items .level-one.subcategory-item .arrow-right {
  align-self: center;
}
.nav > li > div.megamenu .menu-items .level-one.subcategory-item > a {
  display: flex;
  justify-content: space-between;
}

.megamenu * {
  text-align: left;
}

.header_megamenu ul.nav li.main_menu_link.arrow img {
  margin-left: 10px;
  margin-top: -2px;
}

.header_megamenu ul.nav li.main_menu_link {
  border-bottom: 3px solid transparent;
}

@media screen and (min-width: 1280px) and (max-width: 1550px) {
  .header_megamenu ul.nav li.main_menu_link:last-of-type {
    margin-right: 0px !important;
  }
}

.header_megamenu ul li.main_menu_link {
  height: 72px;
  padding: 0 16px !important; /*  : Reduce from 20 px to 16 px for main menu*/
  line-height: 72px;
}

@media screen and (max-width: 840px) {
  .header_megamenu ul li.main_menu_link {
    height: 72px;
    padding: 0 8px !important; /*  : Reduce from 20 px to 16 px for main menu*/
    line-height: 72px;
  }
}

.header_megamenu ul.nav li.main_menu_link > a {
  padding: 21px 0 !important;
  color: black !important;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 400;
}

.header_megamenu ul.nav li.main_menu_link > a > img {
  width: 30px;
}

.header_megamenu ul.nav li.main_menu_link:hover,
.header_megamenu ul.nav li.main_menu_link.selected {
  border-color: #f65734;
  cursor: pointer; /*   Add cursor pointer for Document main menu */
}

.menu-icon-img {
  width: 26px;
  margin-right: 5px;
}

.main_menu_link.dokumenter a span {
  /*background: #f65734;*/
  color: #fff;
  padding: 4px 9px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
}

.header_megamenu ul li:hover {
  border-color: #f65734;
}

header {
  padding: 0 15px 0 35px !important;
}

.nav > li > div.megamenu:hover + header {
  background: #000 !important;
}

/*  for mega menu*/
.nav > li:active > div {
  opacity: 1;
  visibility: visible; /*This one??*/
  overflow: visible;
}

.nav > li > div.megamenu .container {
  max-width: 1440px !important;
  margin: 0 auto !important;
}

.nav > li > div.megamenu ul li a {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 300;
}

span.open-slide {
  float: right;
}

/*sector_artikler*/
.sector_artikler {
  padding: 0px 20px 70px 20px;
  background: #fff;
}

.sector_artikler .artikler-meta {
  border-bottom: 1px solid #ccc;
  height: 28px;
  margin-bottom: 20px;
}

.sector_artikler h3 {
  font-size: 25px !important;
  color: #3d3d52 !important;
}

.sector_artikler p {
  font-size: 13px !important;
  color: #6a6a6a !important;
  line-height: 1.5;
}

.sector_artikler .artikler-meta .side-left {
  text-align: left;
  width: 50%;
  float: left;
  font-size: 12px;
  font-weight: 600;
  color: #f65734;
  padding-left: 20px;
}

.sector_artikler .artikler-meta .side-right {
  text-align: right;
  width: 50%;
  float: right;
  font-size: 12px;
  font-weight: 600;
  color: #f65734;
  padding-right: 20px;
}

.sector_artikler .slick-slide {
  padding: 0;
  margin: 0;
  box-shadow: none;
}

.sector_artikler .slick-slide img {
  width: 100%;
}

.sector_artikler .content-artikler {
  padding: 0 20px;
}

.sector_artikler .slick-dots {
  max-width: 200px !important;
}

.sector_artikler .slick-initialized .slick-slide {
  padding-bottom: 20px !important;
}

.sector_artikler .slick-dots {
  bottom: -13px !important;
}

.sector_artikler .buttons {
  text-align: right;
  margin-top: 30px;
  position: relative;
  z-index: 99999;
}

.sector_artikler .buttons a.qbutton {
  padding: 3px 15px !important;
  white-space: nowrap;
}

.sector_artikler .buttons a.qbutton img {
  margin-top: 5px;
  margin-left: 5px;
}

.sector_artikler .slick-track {
  padding: 0;
}

.sector_artikler .list-artikler ul {
  margin-top: 63px !important;
}

.sector_artikler .list-artikler ul li {
  list-style-type: none;
  clear: both;
  padding: 15px;
  border-bottom: 1px solid #ccc;
  height: 88px;
  margin: 0;
  position: relative;
}

.sector_artikler .list-artikler ul li:after {
  content: "";
  width: 8px;
  height: 17px;
  background: url("/css/img_new/artikler-arrow.png") no-repeat center center;
  position: absolute;
  top: 50%;
  margin-top: -8.5px;
  right: 0;
}

.sector_artikler .list-artikler ul li:nth-child(1) {
  border-top: 1px solid #ccc;
}

.sector_artikler .list-artikler ul li .date {
  width: 7%;
  float: left;
  font-size: 26px;
  color: #f65734;
  line-height: 0.9;
  font-weight: 600;
  font-family: "Inter", sans-serif;
  margin-top: 4px;
}

.sector_artikler .list-artikler ul li .date span {
  font-size: 26px;
}

.sector_artikler .list-artikler ul li .date span.month {
  font-size: 18px;
}

.sector_artikler .list-artikler ul li .artikler-title {
  width: 93%;
  float: right;
  color: #3d3d52;
  font-size: 19px;
  font-weight: 500;
  margin-top: 13px;
  font-family: "Inter", sans-serif !important;
}
/*sector_info*/
.sector_info {
  text-align: center;
  padding: 70px 20px;
  background: #fff; /*   change background to white for all sector-info*/
}

.sector_info.home {
  background: #f7f7f7;
}

.sector_info .section_excerpt {
  margin-bottom: 50px;
}

.sector_info .box p {
  max-width: 250px;
  margin: 0 auto;
}

.sector_info .box img {
  margin-bottom: 10px;
}

.sector_info p.icon_title {
  font-weight: 500;
  margin-bottom: 8px;
  font-size: 19px !important; /* */
  font-family: "Inter", sans-serif !important; /* */
}

p.icon_title {
  margin-bottom: 0px;
}

.sector_info .buttons {
  text-align: center;
  width: 100%;
  margin-top: 80px;
}

.buttons a {
  margin: 10px;
}

.info {
  border-bottom: 1px solid #d9d9d9;
  padding-bottom: 0px;
}

.info img {
  position: relative;
  top: -8px;
}

.info .date {
  float: right;
  position: relative;
  top: 2px;
}

.artikel_block .artikel-button {
  text-align: right;
}

.artikel_block .artikel-button .qbutton {
  display: inline-flex;
  padding-left: 8px;
  padding-right: 8px;
  border-radius: 4px;
  margin-top: 0 !important;
  white-space: nowrap !important;
  align-items: center;
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .artikel_block .artikel-button .qbutton {
    padding-top: 8px;
  }
}

.main_info {
  text-align: center !important;
}

.plashka.start a.qbutton {
  margin-top: 10px !important;
  cursor: pointer;
}

.artikel-button {
  margin-top: 15px;
}

.btn a {
  margin: 0 20px;
}

.sector_info.white {
  background: #fff;
}

.sidebar_right .tags {
  text-align: left;
}

.sidebar_right .tag {
  border-radius: 6px;
  border: 1px solid #aebac6;
  color: #929eab !important;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 300;
  white-space: nowrap;
  padding: 5px 5px !important;
  line-height: 35px;
  text-decoration: none;
  transition: all 0.4s;
  margin: 0px !important;
}

.sidebar_right .tag:hover {
  color: #fff !important;
}

.header_main {
  position: absolute;
  left: 0;
  right: 0;
  background: #fff !important;
  z-index: 30;
  min-height: 53px;
}

.stick-to-top {
  position: fixed;
  top: 0;
  background-color: #1c7430;
}

.header_main .container {
  max-width: 1280px !important;
  margin: 0 auto;
  height: 100%;
}

.header_main .container .row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  height: 100%;
  min-height: 53px;
}

@media screen and (max-width: 700px) {
  .header_main .container .info-ribbon .row {
    justify-content: flex-start;
  }
}

.header_main .container .row .new-logo {
  flex-basis: 0;
  width: 100%;
}

@media screen and (min-width: 1280px) {
  .header_main .container .row {
    display: flex;
    justify-content: space-between;
  }

  .header_main .container .row .new-logo {
    flex-grow: 0;
  }
}

ul.main_mobile_menu {
  margin: 0 !important;
}

.sector_info .icon_title {
  font-size: 19px; /*   Remove !important */
  font-weight: 700; /*   Remove !important */
}

header .container {
  max-width: 1440px !important;
}

.sidebar_right h3 {
  font-size: 21px !important;
}

.sidebar_right p.icon_title {
  font-size: 15px !important;
  font-family: "Inter", sans-serif !important;
  font-weight: 500;
  margin-bottom: 5px;
}

.sidebar_right p {
  line-height: 1.4;
}

.list-artikler .artikler-title a {
  color: #3d3d52 !important;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
}

.main_info .qbutton {
  border: 1px solid;
  border-color: #f65734 !important;
  margin-right: 10px; /*   add right margin to make space between buttons */
  cursor: pointer;
  display: block;
  min-width: 140px !important;
  min-height: 42px !important;
}

.main_info .qbutton:not(:first-child):hover {
  border-color: #fff !important;
}

a {
}

ul li.third-li a {
  font-size: 12px;
}

/* The container */
.filter .container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.filter .container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.filter label {
  font-size: 14px !important;
  max-width: 150px !important;
  display: inline !important;
}

.filter {
  text-align: left;
}

.filter form {
  margin-top: 15px;
  margin-left: 0px;
}

.filter [type="radio"]:checked + label:before,
.filter [type="radio"]:not(:checked) + label:before {
  background: #f65734;
  width: 14px;
  height: 14px;
  top: 2px;
  left: 0px;
  border: 0px;
}

.filter [type="radio"]:checked + label:after,
.filter [type="radio"]:not(:checked) + label:after {
  background: #fff;
  width: 6px;
  height: 6px;
  top: 6px;
  left: 4px;
}

.filter [type="radio"] + label {
  padding-left: 20px !important;
}

.filter [type="radio"]:checked + label,
.filter [type="radio"]:not(:checked) + label {
  padding-right: 30px;
}

.sector_advantage.mobile {
  display: none;
  padding: 0;
  margin: 0;
}

.sector_advantage.mobile p {
  color: #3d3d52;
  font-size: 14px !important;
}

.sector_advantage.mobile p.icon_title {
  font-weight: 600 !important;
}

.sector_advantage.mobile img {
  max-width: 35px;
}

.sector_advantage.mobile .advantages {
  max-width: 220px;
  float: right;
  min-width: auto;
}

.sector_info.mobile {
  display: none;
}

.mobile-contacts {
  text-align: center;
  font-size: 20px;
}

.mobile-contacts p {
  font-size: 20px;
}

a:not(.ui-state-default) {
  color: #f65734;
  text-decoration: none;
}

a:hover {
  color: #f65734 !important;
}

.header_megamenu ul.nav li.main_menu_link ul li a {
  color: black !important;
}

.header_megamenu ul.nav li.main_menu_link ul li a:hover {
  color: #f65734 !important;
}

.header_megamenu ul.nav li.main_menu_link .create-account {
  background: #f65734;
  color: #fff;
  padding: 4px 9px 5px 9px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
}

.header_megamenu ul.nav li.main_menu_link a.btn--login-status span {
  margin-right: 15px;
}
.header_megamenu ul.nav li.main_menu_link a.btn--login-status span:last-child {
  margin-right: 0;
}

.mobile-main {
  margin-top: -150px;
  display: none;
}

.mobile-main.partner-page {
  text-align: center;
}

.mobile-main .advantages {
  margin-bottom: 5px !important;
  margin-right: -10px;
}

.mobile-buttons a.qbutton.white {
  color: #f65734 !important;
  border-color: #f65734 !important;
}

.mobile-buttons a.qbutton {
  margin-right: 10px; /*   add right margin to make space between buttons */
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  min-width: 140px;
  min-height: 42px;
}

.list-artikler .artikler-title a:hover {
  color: #f65734 !important;
  text-decoration: none;
}

.artikel-button i {
  margin-left: 4px !important;
}

.sidebar_right .plashka {
  max-width: 240px;
  min-width: 240px;
}

/*HAMBURGER*/

:root {
  --hamburger-color: #f65734;
  --company-text-color: #f65734;
  --outline-color: #f65734;
}

html * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

header {
  position: relative;
}

.menu-button {
  /*position: absolute;*/
  /*right: 10px;*/
  /*top: -6px;*/
  cursor: pointer;
  padding: 0;
  width: 40px;
  height: 40px;
  z-index: 1000;
  border: none;
  background: none;
  font-size: 0;
  line-height: 0;
  -webkit-tap-highlight-color: transparent;
}

.menu-button:focus:not(:focus-visible),
nav ul li a:focus:not(:focus-visible) {
  outline: none;
}

.menu-button:focus-visible,
nav ul li a:focus-visible {
  outline: 2px solid #3d3d52;
  outline-offset: 2px;
}

.menu-button:focus::-moz-focus-inner,
nav ul li a:focus::-moz-focus-inner {
  border: none;
}

.menu-button span,
.menu-button span::before,
.menu-button span::after {
  display: inline-block;
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: grey;
  background: var(--hamburger-color);
}

.menu-button {
  text-align: right;
}

.menu-button span {
  width: 26px;
  position: relative;
  left: 0;
}

.menu-button span:after {
  width: 26px;
}

.menu-button span:before {
  width: 26px;
}

.menu-button span.hamburger-transition:before {
  width: 26px;
}

.menu-button span.hamburger-transition:after {
  width: 26px;
}

.menu-button span.hamburger-transition {
  background: rgba(0, 0, 0, 0);
}

.menu-button span {
  position: relative;
}

.menu-button span::before {
  content: "";
  background: grey;
  background: var(--hamburger-color);
  position: absolute;
  left: 0;
  bottom: 8px;
  -webkit-transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1),
    -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1),
    transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

.menu-button span.hamburger-transition::before {
  bottom: 0;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1),
    -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1),
    transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

.menu-button span::after {
  content: "";
  background: grey;
  background: var(--hamburger-color);
  position: absolute;
  left: 0;
  top: 8px;
  -webkit-transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1),
    -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1),
    transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

.menu-button span.hamburger-transition::after {
  top: 0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1),
    -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1),
    transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

.sidebar_right .plashka .qbutton .fa {
  margin-left: 6px !important;
}

.sidebar_left ul {
  margin-top: 0 !important;
}

/*   added articleContent to differentiate from my document page */
#articlePageBody ul li {
  list-style-type: none;
}
#articlePageBody ul:not(.pagination) li:before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f65734;
  position: absolute;
  top: 10px;
  left: -20px;
}

#articlePageBody #latest_articles ul li:before {
  display: none;
}

#articlePageBody:not(.articleContent) h3 {
  font-weight: 500;
}

.sidebar_right ul li:before {
  display: none;
}

.sidebar_left ul li:before {
  display: none;
}

.popup_container .popup_block {
  background: #fff;
  width: 700px;
  position: absolute;
  left: 50%;
  margin-left: -350px;
  top: 65px;
}

.popup_container .popup_block div {
  margin: 0 !important;
  padding: 0 !important;
}

.popup_container .popup_block {
  padding: 20px;
}

.popup_container .popup_block [type="radio"]:checked + label,
.popup_container .popup_block [type="radio"]:not(:checked) + label {
  display: inline-block !important;
  min-width: 170px;
  padding-right: 0 !important;
}

.popup_container .qbutton.border_button {
  background: transparent !important;
}

.popup_container .qbutton {
  width: 200px;
  text-align: center;
  font-size: 20px;
  padding: 6px 20px !important;
}

.popup_container .buttons {
  text-align: right;
}

.popup_container .popup_block .close-button {
  position: relative;
  top: -35px;
  left: 35px;
  text-align: right;
  max-width: 32px;
  float: right;
}

.popup_container .popup_block {
  border-radius: 5px;
}

.popup_container .popup_block .popup_content {
  text-align: center;
  clear: both;
  position: relative;
  top: -18px;
}

.popup_container .popup_block.thanks {
  width: 400px !important;
  margin-left: -150px;
  top: 50%;
  margin-top: -145px;
}

.popup_container .popup_block.thanks .popup_content h3 {
  color: #4a4a4a !important;
  font-family: Inter, sans-serif !important;
  font-size: 21px;
  font-weight: 500 !important;
  padding-bottom: 14px;
}

.popup_container .popup_block.thanks .popup_content p {
  font-size: 18px;
  padding-left: 10px !important;
  padding-right: 10px !important;
}

.popup_container .popup_block.thanks .popup_content a.qbutton {
  font-size: 11px !important;
}

.popup_container .popup_block.thanks .popup_content img {
  padding-bottom: 20px;
}

.popup_container .popup_block.thanks .popup_content .btnCancel,
.popup_container .popup_block.thanks .popup_content .confirmEdit {
  display: inline-block;
  margin-top: 0px !important;
}
.popup_container .popup_block.thanks .popup_content .btnCancel {
  width: 150px;
}

.casework_modal .modal-dialog {
  width: 400px !important;
}

.casework_modal .modal-dialog.popup_container .popup_block {
  position: unset !important;
}

.casework_modal .modal-dialog.popup_container .popup_block.thanks {
  width: unset !important;
  margin-left: unset !important;
  margin-top: unset !important;
}

.casework_modal {
  background: rgba(0, 0, 0, 0.3);
}
.casework_modal.show {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  align-items: flex-start;
  z-index: 1000000 !important;
}

#confirmEditModel {
  z-index: 1000000;
}

.audit_modal {
  z-index: 16777271 !important;
}

.grid-table {
  overflow-x: auto;
  white-space: nowrap;
  width: 100%;
  border: 1px #ccc solid;
}
.grid-table th {
  background: #2699fb;
  vertical-align: middle !important;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  color: #fff;
  padding: 8px 0 !important;
  vertical-align: middle !important;
  border: none !important;
  text-align: center;
}

.grid-table th img {
  margin-top: -2px;
}
.grid-table th a {
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

.grid-table td {
  font-size: 12px;
  padding: 5px;
  vertical-align: middle !important;
  border: 1px dotted gainsboro;
  color: #575555 !important;
}

textarea {
  padding: 10px;
  width: 100%;
  max-width: 600px;
  height: 100px;
  border: none;
  color: black;
  font-family: "Inter", sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 23px !important;
  border-radius: 6px;
  background-color: #f7f7f7;
}

[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before {
}

ol {
  list-style-position: outside !important;
}

/*TABS*/
/* Style the tab */
.tab {
  overflow: hidden;
  margin-top: 40px;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: transparent;
  float: left;
  border: 1px solid #f65734;
  outline: none;
  cursor: pointer;
  padding: 6px 16px;
  transition: 0.3s;
  font-size: 17px;
  border-radius: 14px;
  min-width: 250px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: transparent;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #f65734;
}

/* Style the tab content */

/*MOBILE*/
@media (min-width: 1920px) {
  .sector_advantage .advantages .block {
    max-width: 345px;
  }
}

@media screen and (max-width: 1500px) {
  .quality {
    display: none;
  }
}

@media screen and (max-width: 1415px) {
  .header-contact {
    display: none !important;
  }
}

@media (min-width: 992px) and (max-width: 1348px) {
  .sector_advantage .advantages .block {
    max-width: 335px;
  }
}

@media screen and (max-width: 1215px) {
  .hamburger {
    display: block;
    width: 100%;
    padding-top: 18px;
  }

  .cart {
    display: block;
    width: 10%;
    padding-top: 54px;
    text-align: center;
  }

  .cart img {
    margin-right: 0 !important;
  }
}

@media screen and (max-width: 1000px) {
  .sector_artikler .buttons {
    margin-top: 15px !important;
  }

  .sector_advantage .advantages .block {
    max-width: 300px;
  }
}

@media (min-width: 600px) and (max-width: 1000px) {
  .sector_advantage .advantages .block img {
    margin-right: 8px; /*   reduce right margin space */
  }

  .sector_advantage .advantages .block p.icon_title {
    white-space: nowrap;
  }

  .sector_advantage .advantages {
    padding: 15px 0 15px 15px;
  }
}

@media screen and (max-width: 990px) {
  .partners {
    width: 50%;
  }
}

@media (min-width: 860px) {
  .process {
    margin: 0 auto;
    text-align: center;
  }
}

@media screen and (max-width: 890px) {
  .sector_advantage .advantages .block {
    max-width: 240px;
  }
}

@media screen and (max-width: 860px) {
  .col-12 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 100% !important;
  }

  .sector_info img {
    margin-top: 30px;
  }

  .popup_container .popup_block {
    width: 350px !important; /*   to set popup width */
    margin-left: -175px !important;
    top: 40px;
  }

  .popup_container .popup_block [type="radio"]:checked + label,
  .popup_container .popup_block [type="radio"]:not(:checked) + label {
    max-width: 170px !important;
    min-width: 132px !important;
  }

  .popup_container .popup_block h1 {
    font-size: 23px !important;
    margin: 0 !important;
    line-height: 30px !important;
  }

  .popup_container .popup_block .qbutton {
    padding: 5px !important;
    font-size: 12px !important;
  }

  .popup_container .popup_block.thanks .popup_content .btnCancel {
    width: 84px !important;
    padding-top: 4px !important;
  }

  .popup_container .popup_block.thanks .popup_content .confirmEdit {
    width: 150px !important;
  }

  /* [Added]  */
  .popup_container .popup_block.thanks h3 {
    font-size: 18px !important;
  }

  /* [Added]  */
  .popup_container .popup_block.thanks p {
    font-size: 15px !important;
  }

  .popup_container .popup_block.thanks {
    width: 330px !important;
  }
}

@media screen and (max-width: 768px) {
  .sector_advantage .advantages .block {
    max-width: 200px;
  }
}

@media screen and (max-width: 767px) {
  .product-timeline.py-5 {
    padding-bottom: 1.5rem !important;
  }

  .sign-up-in {
    padding: 30px 20px;
  }

  .show-doc a {
    display: block;
  }

  .show-doc button {
    display: none;
  }

  .show-doc a {
    background: #2f3651;
    width: 30px;
    height: 30px;
    border-radius: 100px;
    text-align: center;
    color: #fff !important;
    padding: 4px 0 0 3px;
  }

  .show-doc a.disabled {
    opacity: 0.3;
  }

  .product-info-right {
    padding-left: 0;
  }

  /* error-state icon only (_ProductError.cshtml) */
  .product-info .product-info-icon {
    display: none;
  }

  .product-info-right h3 {
    margin-left: 10px;
  }

  .product-info-right .product-title-icon span,
  .product-info-right h3 {
    align-self: center;
    font-size: 16px;
    line-height: 1;
  }

  .product-info-right li p:first-child {
    flex: 1;
  }

  .product-info-right li p.product-modified-date,
  .product-info-right li p.product-created-date {
    display: none;
    color: var(--gray-500, #6b7280);
  }

  .product-info-right li p.product-modified-date-mobile,
  .product-info-right li p.product-created-date-mobile {
    display: inline-block;
    color: var(--gray-500, #6b7280);
  }

  .edit-document {
    display: flex;
  }

  .product-info-right li a.edit-document {
    display: block;
  }

  .showhide-sectionbox {
    padding-left: 0;
  }

  .document-in {
    padding: 40px 10px 20px;
  }

  .show-sign-btn {
    right: unset;
    width: 100%;
  }

  button.show-btn,
  button.sign-btn {
    font-size: 15px;
    padding: 7px 6px;
    /*flex: 1;*/
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  button.show-btn.edit {
    display: none;
  }

  .show-hide-sec .showhide-sectionbox {
    padding-left: 0;
  }

  .email-sec {
    display: block;
  }

  .em-sec {
    margin: 0 0 20px;
  }

  .email-sec input[type="checkbox"] {
    margin: 0 20px 0 0;
  }

  .em-sec {
    width: 100%;
  }
}

@media screen and (max-width: 700px) {
  .sector_advantage .advantages .block {
    max-width: 186px; /*   increase product price box */
  }
}

@media screen and (max-width: 600px) {
  /*   wizzard input for mobile */
  .timeline-module .input-container.large,
  .timeline-module .input-container.medium,
  .timeline-module .input-container.small {
    width: unset !important;
  }

  .timeline-module input.small,
  .timeline-module input.medium,
  .timeline-module input.large {
    width: 100% !important;
  }

  .timeline-module label.small,
  .timeline-module label.medium,
  .timeline-module label.large {
    width: 100% !important;
  }

  .sector_advantage .advantages .block {
    max-width: 100%;
  }

  /* DesCss */

  [type="checkbox"]:not(:checked) + label,
  [type="checkbox"]:checked + label {
    padding-left: 35px;
  }

  [type="radio"]:checked + label,
  [type="radio"]:not(:checked) + label {
    padding-right: 0 !important;
  }

  [type="radio"]:checked + label,
  [type="radio"]:not(:checked) + label {
    padding-right: 0 !important;
  }

  .filter [type="radio"] + label {
    padding-left: 30px !important;
  }

  div.comp-buttons:not(.partner-page) {
    display: none !important;
  }

  .mobile-main {
    display: block !important;
  }

  h1 {
    font-size: 25px !important; /*   reduce H1 font of mobile */
  }

  .sector_info.mobile {
    display: block !important;
    margin-top: 20px;
  }

  .sector_advantage {
    display: none !important;
  }

  .sector_advantage.mobile {
    display: block !important;
  }

  .artikel_block {
    margin: 30px 0 !important;
    background: #fff;
    padding: 20px 20px;
  }

  .filter [type="radio"]:checked + label,
  .filter [type="radio"]:not(:checked) + label {
    padding-right: 0px !important;
  }

  .filter form {
    margin-left: -12px !important;
  }

  .sector_advantage {
    margin-top: 0px;
    padding-top: 20px;
  }

  .sector_advantage .advantages {
    max-width: 100%;
    padding: 20px 0 0 20px;
    float: none;
  }

  .sector_advantage .advantages .block {
    margin-bottom: 0;
  }

  .sector_artikler .list-artikler ul li:after {
    width: 5px !important;
    height: 8px !important;
    margin-top: -4px !important;
    background: url("/css/img_new/blog-mobile-arrow.png") no-repeat center center !important;
  }

  .list-artikler ul {
    padding: 0 !important;
    margin-top: 0 !important;
  }

  .sector_artikler .list-artikler ul {
    margin-top: 0 !important;
  }

  .list-artikler ul li {
    padding: 0 !important;
    height: 27px !important;
  }

  .list-artikler ul li .date {
    display: none;
  }

  .list-artikler .artikler-title {
    margin: 0 !important;
    width: 100% !important;
    font-size: 14px !important;
    color: #f65734 !important;
  }

  .list-artikler .artikler-title a {
    color: #f65734 !important;
    line-height: 26px !important;
  }

  .partners {
    width: 33%;
    text-align: center;
    margin: 0 auto;
  }

  .sector_artikler .buttons {
    text-align: left;
    margin-top: 25px !important;
    padding-left: 10px;
  }

  .sector_artikler .content-artikler {
    padding: 0 13px;
  }

  .sector_artikler {
    padding: 50px 20px 15px 20px;
  }

  .sector_info {
    padding: 20px 0px 10px 0px; /*   reduce padding botton for mobile */
  }

  .sector_info img {
    margin-top: 30px;
  }

  .sector_info p.section_excerpt {
    margin-bottom: 10px;
  }

  .sector_info .buttons {
    margin-top: 40px;
  }

  .breadcrumbs {
    display: none;
  }

  .zoom-icon input {
    font-size: 17px;
  }

  input[type="search"] {
    height: 50px;
  }

  .sector_artikler .buttons a {
    margin: 0 !important;
  }

  h1 {
    line-height: 20px !important;
  }

  .zoom-icon:after {
    display: none;
  }

  .zoom-icon {
    margin-top: 30px;
  }

  h2 {
    font-size: 37px !important;
  }

  div.quality {
    display: none;
  }

  .section_title {
    font-size: 29px !important;
  }

  .artikel_block h4 {
    line-height: 26px !important;
  }

  h1 {
    line-height: 40px !important;
  }

  .filter [type="radio"]:checked + label:before,
  .filter [type="radio"]:not(:checked) + label:before {
    left: 10px;
  }

  .filter [type="radio"]:checked + label:after,
  .filter [type="radio"]:not(:checked) + label:after {
    left: 14px;
  }

  /*   Remove margin top for mobile to show white info box */
  .main_info.top_banner {
    margin-top: 0px !important;
  }

  /*   Media screen for forgot password */

  .validationMessage {
    max-width: 280px;
  }
}

@media screen and (max-width: 568px) {
  .partners {
    width: 100%;
  }

  [type="radio"]:checked + label,
  [type="radio"]:not(:checked) + label {
    padding-right: 0 !important;
  }

  .sector_artikler .content-artikler {
    padding: 0;
  }

  .sector_artikler .buttons a.qbutton {
    padding: 3px 10px !important;
  }

  .sector_artikler .buttons {
    padding-left: 0 !important;
  }

  .tab button {
    min-width: 230px !important;
  }
}

@media screen and (max-width: 500px) {
  .process {
    display: block;
  }
}

@media screen and (max-width: 490px) {
  .tab button {
    min-width: 210px !important;
  }
}

@media screen and (max-width: 450px) {
  .tab button {
    min-width: 180px !important;
  }
}

@media screen and (max-width: 430px) {
  .tab button {
    min-width: 109px !important;
    font-size: 14px !important;
  }
}

@media screen and (max-width: 423px) {
  .documents_block.acco {
    padding-bottom: 10px !important;
  }
}

@media screen and (max-width: 380px) {
  .popup_container .popup_block {
    width: 270px;
  }

  .popup_container .popup_block {
    margin-left: -135px;
  }

  .popup_container fieldset {
    margin-bottom: 10px;
  }

  .show-hide-sec button.show-btn {
    margin-left: 0;
  }
}

@media screen and (max-width: 371px) {
  .mobile-buttons a {
    margin-bottom: 10px;
    display: block;
  }

  /* */
  .mobile-buttons a.qbutton.small-mobile {
    float: left;
  }
}

tr.total td:nth-child(2) {
  font-weight: 600;
  text-align: right !important;
  padding: 5px !important;
}

tr.total td:nth-child(3) {
  font-size: 12px;
  /*font-weight: 600;*/ /*  */
  white-space: nowrap;
  padding: 5px;
}

/* Added CSS */
.completed > .accordion:after {
  content: "\f00c";
  width: 22px;
  height: 16px;
  position: absolute;
  right: 30px;
  top: 50%;
  margin-top: -20px;
  color: #96db4b;
  font-size: 26px;
  font-family: "FontAwesome", sans-serif;
}

.articleSearchResultCount {
  margin-top: 20px;
}

.input-element label {
  position: relative;
}

#homeBannerSearch input[type="search"] {
  box-sizing: border-box;
}

/*FAQ*/
.article-step {
  display: flex;
  padding-left: 15px;
  position: relative;
}

.article-step .step-number {
  padding-right: 18px;
  border-left: solid lightgray 4px;
}

.article-step .step-number p {
  border-radius: 100%;
  width: 34px;
  height: 34px;
  background: #ee5b38;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 0px;
  top: 0px;
}

.article-step .step-text {
  padding-left: 10px;
}

.article-step .step-text h3 {
  margin-top: 0px;
}
/* General page */
.general_page_summary {
  font-size: 20px;
  font-weight: 500;
}

/* Main menu login button*/
.btn--login-status {
  background: none !important;
  border: none;
  padding: 21px 0 !important;
  font-family: "Inter", sans-serif;
  color: #f65734;
  cursor: pointer;
  font-size: 15px;
  font-weight: 400;
}

/* Main menu login button*/

/* save draft popup */
.popup_container .popup_content .qbutton {
  font-size: 16px;
}

.required::after {
  content: "*";
  color: #f6603e !important;
}

.required_marker {
  color: #f6603e !important;
}

.sector_info.mobile p.icon_title {
  font-size: 15px !important;
  font-family: "Inter", sans-serif !important;
  font-weight: 500;
  margin-bottom: 5px;
}
/* end: find document mobile */

/* Start Article page content */
.articleContent ol {
  padding-left: 22px;
}

.articleContent ul {
  padding-left: 29px;
}

.articleContent ol li {
  font-family: "Inter", sans-serif !important;
  color: black;
  font-size: 15px;
  font-weight: 400;
  margin-bottom: 10px;
}

.articleContent ol li::marker {
  font-weight: 500;
}

.articleContent table {
  font-family: "Inter", sans-serif !important;
  color: #6a6a6a;
  font-size: 15px;
  font-weight: 400;
  width: 100% !important;
}

.articleContent table td,
.articleContent table td p {
  vertical-align: middle !important;
  margin: 0;
  padding-left: 5px;
  padding-right: 5px;
}

.articleContent table td:first-child,
.articleContent table td:first-child p {
  text-align: left;
}

.articleContent table td:first-child + td,
.articleContent table td:first-child + td p {
  text-align: right;
}

.articleContent .articleVideo {
  text-align: center;
}

.articleContent H3 {
  color: #6a6a6a;
  font-family: "Inter";
  font-weight: 500;
}

.articleContent H2 {
  margin-top: 30px;
  margin-bottom: 0.8rem;
}

/* End: Article page content */

/* Forgot password and resetForm */

/* End: Forgot password */
/* Copy from old main*/
.voucher-error {
  color: red;
}

#btnCancelConfirmLogin {
  cursor: pointer;
}

.header-company-email {
  color: #aaa !important;
}
.phone-opening-hours {
  color: #aaa !important;
}

.hidden {
  display: none;
}

.manual-signature-change-state {
  padding-top: 25px;
  text-align: center;
}

@media screen and (min-width: 767px) {
  .buttons.manual-signature {
    text-align: center;
  }
}

/* ── PE origin mark ────────────────────────────────────────────────────────
   Figma 4335:14861. Replaces the v1 .book-mark / .product-related-to-cvr pair
   with one element, so the label and the CVR cannot drift apart and the mark
   collapses to a single line when there is no related CVR.

   slate/50 ground with gray/700 ink = 9.2:1. The earlier orange treatment was
   5.3:1 at best and 3.17:1 with a light label, so this is a large improvement
   and it stops the mark competing with the orange "Udkast" status chip.

   Inset to the card's content margin rather than bled to the edge: this variant
   is a full pill, and a pill's right curve reads as broken against a card edge. */
.my_dokumenter .pe-mark {
  position: relative;
  /* float, not absolute: the mark must not add a row of its own height, but the
     card is position:static and .show-sign-btn anchors to an outer containing
     block, so making the card relative would move the card's own buttons.
     Floating removes it from flow height while leaving every anchor intact. */
  float: right;
  clear: both;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: fit-content;
  /* -24px escapes .product-container's 24px padding so the pill reaches the card
     edge. Deliberately a margin and not position:absolute — the card is static and
     .show-sign-btn anchors to an outer containing block, so making the card
     relative would move the card's own buttons. */
  margin: 0 -24px 8px auto;
  padding: 8px 20px 8px 38px;
  border-radius: 999px 0 0 999px;
  background-color: var(--slate-50, #f2f1ff);
  color: var(--gray-700, #374151);
  font-family: Inter, sans-serif;
  text-align: left;
}

/* magnifier, coloured from currentColor via a mask so it follows the ink */
.my_dokumenter .pe-mark::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 10px;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  background-color: currentColor;
  /* Longhands, not the `mask:` shorthand. The shorthand's `/ <size>` syntax parses
     inconsistently across engines, and a failed parse drops the whole declaration —
     which would remove the glyph entirely rather than degrade it. */
  -webkit-mask-image: url("/css/img_new/magnifying-glass.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 20px 20px;
  mask-image: url("/css/img_new/magnifying-glass.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 20px 20px;
}

/* type/label/tiny — 9px. Smallest token in the file; see note in the PR. */
.my_dokumenter .pe-mark__label {
  font-size: 9px;
  font-weight: 600;
  line-height: 1.3;
}

.my_dokumenter .pe-mark__cvr {
  font-size: 9px;
  font-weight: 400;
  line-height: 1.3;
}

/* Below 768px the desktop treatment cannot hold. The card is ~288px wide at 320px and
   the mark is ~156px, so a floated mark leaves too little room for the product title
   beside it — long titles collide with it — and the -24px bleed puts the mark over the
   card border. So at mobile the mark keeps its colours, type and icon but takes its own
   right-aligned row and closes back into a full pill. Appearance is preserved; only the
   flow and the right corner change, and both changes are forced by the width. */
@media (max-width: 568px) {
  .my_dokumenter .pe-mark {
    /* Per Figma 4341:14950 the mobile mark keeps the bleed and the square right edge
       but drops the float, so card content starts below it rather than beside it.
       Right padding is 12px here against 20px at desktop.

       Why the float has to go at mobile, and only at mobile: .product-info is a flex
       container, and flex layout ignores floats outright — content does not wrap
       around them. So a floated mark is overlapped by whatever text reaches its
       horizontal band. On a ~288px mobile card a long product title reaches it every
       time. From tablet up the card is wide enough that the left-aligned title ends
       well short of the mark, so the float is safe and costs no vertical space. */
    float: none;
    padding-right: 12px;
  }
}