/* shp panel */
#shp-cancel-curtain {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background-color: #263E5080 !important;
  backdrop-filter: blur(4px);
  z-index: 1000;
}

.shp-panelv2 {
  --grey-text: #8D92A5;
  --focus-border: #FFA600;
  --focus-bg: #FFF8DD;
  --bg: #F4F5F7; /* taust? */
  --bold-text: #101010;
  --white: #FFFFFF;
  --box-border: #E8EAED;
  --tag-green: #1e9f22;
  --tag-yellow: #ffc800;
  --tag-orange: #ffa600;
  --grey-text: #9498aa;
  --color-gray-light: #c1c1c1;
  --color-gray-light2: #ccc;
  --color-gray-lighter: #f1f1f1;
  --color-gray-medium: #a8a8a8;
  --color-gray-soft: #d9dadb; 
  --color-gray-blue: #979cad;
  --color-light-gray-blue: #e1e4ea;
  --color-gray-lightest: #e0e0e0;
  --eye-yes: #4860a9;
  --eye-no: #d3d5db;  
  --tag-red: #e43c3c;

  width: 961px; /*864*/
  animation: fadeInOpacity ease .3s;
  box-sizing: border-box;
  border: 1px solid var(--pl-platinum);
  border-radius: .5em;
  background-color: var(--bg) !important;
  display: flex;
  flex-direction: row;

  #shpcount-container {
    position: absolute;
    width: 961px;
    margin-top: 715px;
    text-align: center;

    #shpcount {
      display: inline-block;
      background-color: var(--bg);
      border: 1px solid var(--border-box);
      border-radius: 6px;
      padding: .3em .75em;
      font-size: .9em;

      span:first-child { font-weight: bold }
      span:last-child { color: var(--grey-text); }
      span:last-child::before { content: ' / '; }
    }
  }

  &.dragging .drop-here { border: 1px solid var(--pl-brownish); font-weight: bold; }
  .msymbol { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24 }
  .title { font-weight: bold; }
  .panel {
    flex: 1 1 50%;
    padding: 1.5em .875em 1em;

    .msymbol.close {
      font-size: 1.2em; 
      background-color: var(--box-border); 
      padding: .25em; 
      border-radius: 4px; 
      cursor: pointer;
    }
  }

  [data-before-sym]::before {
    content: attr(data-before-sym);
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline flow-root;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    text-decoration: none;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    user-select: none;
  }

  .up::before   { color: var(--a-color); }
  .down::before { color: var(--b-color);  }

  .border-block {
    border: 1px solid var(--box-border);
    border-radius: .35em;
    padding: .5em;
    margin-bottom: 1em;
    background-color: var(--white);
  }

  .block2 {
    display: flex;
    flex-direction: row;

    .title { user-select: none }
    &.up::before, &.down::before { font-size: 1.5em }
    .a { flex: 1 1 10%; }
    .b { flex: 1 1 60%; padding-left: .45em; }
    .c { flex: 1 1 30%; text-align: right; }
  }

  .block1 {
    word-wrap: break-word;
    width: 450px;
  }
  .block1 .info:not(:empty), .block2 .info:not(empty) { margin-top: 1em; }
  .two-side { display: flex; flex-direction: row; justify-content: space-between; }

  .tag-button {
    display: inline-flex; 
    align-items: center;
    border: 1px solid var(--white);
    border-radius: 6px;
    padding: 2px 5px;
    font-size: .9em;
    span { padding-right: .25em; }
    user-select: none;
    &.cancelled { color: var(--white); background-color: var(--tag-red); }
  }

  .head {
    padding-bottom: 2em;

    .flex {
      font-size: 14px;
      font-weight: bold;
      display: flex;
      align-items: center;
      gap: .3em;
      user-select: none;
      .shpno { color: var(--pl); user-select: all; padding-right: .2em; }
    }
  }

  .panel:first-child .head { padding-right: 1em; }
  .body { overflow: hidden; height: 570px; }
  .cancelled { color: var(--grey-text); }

  .goods {
    padding: .5em 0 1em;
    display: grid;
    .header, .row, .footer {
      display: grid;
      grid-template-columns: 2em 6em 3.5em 3.5em 3.5em 3.5em 10.8em;
      .cell {
        padding: .5em .5em;
        text-align: right;
        &:nth-child(2) { text-align: left; }
      }
    }

    .header { font-weight: bold; }
    .row {
      border-top: 1px solid var(--color-gray-soft);
      .notes { grid-column: 2 / span 6; text-align: left; padding-top: 0; }
      .container { display: flex; flex-direction: row; justify-content: space-between; padding: .5em 0; }
    }
    .footer {
      padding-left: .5em;
      border-top: 1px solid var(--color-gray-soft);
      .cell {
        &:nth-child(2) { text-align: right; }
      }
      .amount-txt { grid-column: span 2; font-weight: bold; text-align: left; }
      .sum { font-weight: bold; }
      .waybill-note {
        text-align: left;
        grid-column: 1 / span 9;
        padding-top: 0;
      }
    }
  }

  .files {
    .two-side > strong { user-select: none }
    button { background-color: var(--box-border); padding: 0 .45em; border-radius: 4px; cursor: pointer; text-align: center; }
    .row {
      display: grid;
      grid-template-columns: 1em 1em 12em 7em 8em;
      align-items: center;
      justify-content: space-between;
      gap: .25em;
      padding: .25em 0;

      div:nth-child(3), div:nth-child(4) { text-align: right; }
      .client_visible { display: block; }
      .driver_visible { display: block; }
      .client_visible .no, .driver_visible .no { color: var(--eye-no); }
      .client_visible .yes, .driver_visible .yes { color: var(--eye-yes); }
      .filename {
        display: flex; 
        gap: .25em;

        a {
          display: block; 
          text-overflow: ellipsis; 
          white-space: nowrap; 
          overflow: hidden; 
          width: 230px; 
        }

        &:hover a { width: 20em; }
      }
      .delete_file { display: none; }
      .client_visible .msymbol, .driver_visible .msymbol, .filename .delete_file { cursor: pointer; }
      &:has(.filename:hover) span.delete_file { display: block; width: 1em; }
      &:has(.filename:hover) span.delete_file:hover { color:var(--traffic-red); }
    }
  }

  .button {
    cursor: pointer;
    width: auto;
    border: 1px solid var(--box-border);
    border-radius: .5em;
    box-shadow: 1px 1px var(--box-border);
    padding: .2em 1em;
    color: var(--pl-dark-grey);
    background-color: var(--white);
  }

  .buttons {
    margin-top: 1em;
    padding-right: 1em;
    button { margin: .25em; font-weight: 500; padding: .3em 1.5em; }
  }

  .button-bar { display: flex; gap: .5em; align-items: center; user-select: none; }  
  a.button { display: block; text-decoration: none; }

  .tabs {
    gap: 1em;

    a {
      font-weight: bold;
      cursor: pointer;
      border-bottom: 2px solid transparent;
      &:active, &:hover, &.active { border-color: var(--pl); } 
    }
  }

  .price {
    label { padding-right: 1em }
  }

  .sellprice { text-align: right; }

  input.price {
    outline: none;
    background: transparent;
    width: 5em;
    text-align: right;
    font-weight: bold;
    border: 1px solid transparent;
    border-radius: 4px;

    &::placeholder { color: var(--grey-text); font-weight: normal; text-align: center; }
    &:focus { border-color: var(--focus-border); background-color: var(--focus-bg); }
  }

  .undef { color: var(--color-gray-blue); }

  .placeholder { color: var(--grey-text); font-weight: normal; margin-left: 4px; }
  [contenteditable] {
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    padding: .1em 0;
  }
  .inline-suggest.waybill_note [contenteditable] { width: 410px; max-width: fit-content; }
  .container .inline-suggest, .seal .inline-suggest { max-width: fit-content }

  [contenteditable]:focus {
    background-color: var(--focus-bg);
    border: 1px solid var(--focus-border);
  }

  [contenteditable]:hover, .inline-suggest:hover, .inline-choice:hover, .price:hover {
    background-color: var(--focus-bg);
    cursor: pointer;
  }

  .inline-choice.waybill_note, .inline-suggest.waybill_note, .input-suggest.waybill_note, .container .inline-suggest, .seal .inline-suggest {
    [contenteditable] {
      border-radius: 4px;
      min-width: 100px;
      padding-left: .25em;
      padding-right: .25em;
    }
  }

  .carrier_block {
    padding-bottom: 1em;
    display: flex;
    flex-direction: row;
    gap: .25em;
    justify-content: space-between;

    .inline-choice.company, 
    .inline-suggest.company, 
    .input-suggest.company {
      [contenteditable] {
        border-radius: 4px;
        min-width: 80px;
        padding-left: .25em;
        padding-right: .25em;
      }
    }

    div.carrier, div.buyprice {
      display: flex; 
      gap: 2em;        
      div.label { width: 5em; }
    }

    div.buyprice input { text-align: left; }
  }

  .freight {
    table.tbl {
      width: 100%;
      margin-bottom: 1em;
      border-bottom: 1px solid var(--color-gray-lightest);
      empty-cells: show;

      td { padding: .15em .25em; align-content: center }
      td:first-child { padding-left: 0 };
      td:last-child { padding-right: 0 };
      .right { text-align: right; }

      .header {
        span {
          border: 1px solid var(--color-light-gray-blue);
          border-radius: 4px;
          background-color: var(--color-light-gray-blue);
          display: block;
          padding: .15em .5em;
          text-align: left;
          color: var(--color-gray-blue);
        }
        td { padding-bottom: .5em; }
        td.b span { display: inline-block; }
        td.d { color: var(--grey-text); }
      }

      .content {
        td { vertical-align: middle; }
        .notok { color: var(--tag-yellow) }
        .ok { color: var(--tag-green) }
        .tag {
          display: inline-block;
          padding: .1em .2em;
          border: 1px solid var(--box-border);
          border-radius: 4px;
          width: auto;
          text-align: center;
          font-size: .9em;
        }
        .tag.done {
          background-color: var(--tag-green);
          border-color: var(--tag-green);
          color: #fff;
        }
        .tag.undone {
          background-color: var(--tag-orange);
          border-color: var(--tag-orange);
          color: #fff;
        }

        td.a {
          width: 3.5em;
          font-weight: 500;
          &::first-letter { color: var(--grey-text); }
        }
        td.b {
          width: 2em;
          span.tag { width: 2em; }
        }

        td.c { 
          width: 1em;
          a { color: var(--grey-text) }
        }

        td.e { width: 4em }
        td.f { width: 4em; color: var(--grey-text); }
        td.g {
          width: 1em; 
          color: var(--grey-text); 
          span { color: var(--traffic-red); }
        }
      }
    }
  }

  .timeline-container {
    /*height: 60vh;*/ /* if scrollbar exist, then remove it */
    overflow-y: auto;
    padding-right: .75em;
    scrollbar-width: auto;
    &::-webkit-scrollbar { width: 6px }
    &::-webkit-scrollbar-track { background: var(--color-gray-lighter); border-radius: 3px; }
    &::-webkit-scrollbar-thumb { background: var(--color-gray-light); border-radius: 3px; }
    &::-webkit-scrollbar-thumb:hover { background: var(--color-gray-medium); }

    .timeline { position: relative; max-width: 100%; }
    .timeline::before {
      content: '';
      position: absolute;
      left: 113px;
      top: .5em;
      bottom: 0;
      width: 2px;
      background: var(--color-gray-light2);
      z-index: 1;
      /*margin-bottom: 70px*/ /* hide line from last content */
    }
    .timeline .item { position: relative; display: flex; margin-bottom: 30px; }
    .timeline .dt {
      width: 90px;
      flex-shrink: 0;
      text-align: right;
      padding-right: 1.2em;
    }
    .timeline .marker {
      position: relative;
      color: var(--color-gray-light2);
      z-index: 2;
      flex-shrink: 0;
    }
    .timeline .marker.has-issue { color: var(--tag-yellow); }
    .timeline .marker.issue { color: var(--traffic-red); }
    .timeline .marker.pass-done { color: var(--tag-green); }
    .timeline .content {
      flex: 1;
      margin-left: 1.2em;

      .title span { padding-right: .25em; }
      .coords, a {
        color: var(--pl); 
        font-weight: normal; 
        text-decoration: none;

        &:hover { text-decoration: underline; }
      }

      .description {
        width: 250px;
        word-wrap: break-word;
      }

      .images {
        padding: .5em 0 1em;
        display: flex;
        flex-direction: row;
        gap: .5em;
        flex-wrap: wrap;

        a { display: inline-block; }

        img {
          border: 1px solid var(--bg);
          border-radius: 10px;
          width: 75px;
          height: 75px;
          object-fit: cover;
        }

        &:is(:empty) { display: none }
      }

      .files {
        margin-top: 1em;

        &:is(:empty) { display: none }
      }
    }
  }

  .panel:first-child .body, .timeline-container {
    height: 570px;
    overflow-y: auto;
    padding-right: .75em;
    scrollbar-width: auto;
    &::-webkit-scrollbar { width: 6px }
    &::-webkit-scrollbar-track { background: var(--color-gray-lighter); border-radius: 3px; }
    &::-webkit-scrollbar-thumb { background: var(--color-gray-light); border-radius: 3px; }
    &::-webkit-scrollbar-thumb:hover { background: var(--color-gray-medium); }    
  }

  button:not(:disabled):hover, a.button:hover, .reasons .tag-button:hover, .msymbol.close:hover {
    border-color: #feb01f;
    background-color: var(--focus-border);
    color: var(--white);
    transition: border-color .6s, background-color .6s;
  } 
  button:disabled { color: var(--grey-text); }
  
}

.cancel-shp {
  --bg: #F4F5F7;
  --focus-border: #FFA600;
  --focus-bg: #FFF8DD;
  --color-light-gray-blue: #e1e4ea;

  width: 500px;
  animation: fadeInOpacity ease .3s;
  box-sizing: border-box;
  border: 1px solid var(--pl-platinum);
  border-radius: .5em;
  background-color: var(--bg) !important;
  display: flex;
  flex-direction: column;
  gap: .75em;
  padding: 1.5em .875em 1em;

  .msymbol.close { font-size: 1.2em; background-color: var(--box-border); padding: .25em; border-radius: 4px; cursor: pointer; }

  .head { padding-bottom: 0 }

  .input {
    input {
      width: 100%; 
      box-sizing: border-box; 
      background-color: transparent; 
      outline: none; 
      border: 1px solid var(--color-gray-blue);
      border-radius: 6px;
      height: calc(2.2em - 2px); 
      padding-left: 8px;
      padding-right: 8px;

      &:focus {
        border-color: var(--focus-border);
        background-color: var(--focus-bg);
        transition: border-color .6s, background-color .6s;
      }
    }
  }

  .reasons {
    .tag-button {
      background-color: var(--color-light-gray-blue);
      border-color: var(--color-light-gray-blue);
      justify-content: center;
      min-width: 1.5em;
      margin-right: .5em;
      cursor: pointer;
      font-weight: bold;

      /*&:hover, &.selected { border-color: var(--pl); background-color: var(--pl); color: var(--white); }*/
    }
  }
}

.shp-panel {
  /* display: flex; flex-direction: column; */
  /* min-height: 400px; max-height: 70%; */
  width: 820px;
  border: 1px solid var(--pl-brownish);
  border-radius: 8px;
  animation: fadeInOpacity ease .3s;
  box-sizing: border-box;
  /* min-height: 400px; height: 400px; max-height: 60%; */
  max-height: 90vh;
  line-height: 1.3;

  display: flex; flex-wrap: wrap;
  .head, .foot { flex: 1 1 100%; }
  .canceled-message { flex: 1 1 100% }
  .main, .details { flex: 1 1 47%; overflow: auto; padding-top: 12px; padding-bottom: 22px; max-height: 800px; }
  .main { padding-left: 12px; padding-right: 6px; }
  .details { padding-right: 12px; padding-left: 6px; }
/*
  grid-template-rows: 2.6em 0em min-content 2.1em;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "head head"
    "alarma alarma"
    "main details"
    "foot foot";
*/


  a { text-decoration: none; }

  .canceled-message {
    font-size: 20px;
    text-align: center;
    padding: 6px 0;
    color: var(--pl-brownish);
    .reason { font-size: 14px; }
  }
  &.canceled { filter: grayscale(100%) blur(.4px); grid-template-rows: 2.6em 2em 1fr 2.1em; }
  &.canceled .alarma { display: block; }

  .details { grid-area: details; padding-right: 12px; overflow-y: auto; padding-bottom: 8px; }
  .foot {
    grid-area: foot;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 12px;
    border-top: 1px solid var(--pl-platinum);
    background-color: var(--pl-eggshell);
    vertical-align: middle;
    box-sizing: border-box;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    a { margin-right: 14px; user-select: none; }
    a:link { color: var(--pl-cocoa); text-decoration: none; }
    a:hover { color: var(--pl-cocoa); text-decoration: none; text-shadow: var(--pl-fuzzy-brown) 0px 0 0px; }
    a:visited { color: var(--pl-cocoa); text-decoration: none; }
    .created {
      color: var(--pl-otter-brown);
      font-style: italic;
      font-size: 95%;
      padding-right: 12px;
    }
  }


  .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    background-color: var(--pl-eggshell);
    padding: 2px 4px 2px 12px;
    color: var(--pl-irish-coffee);
    font-weight: 500;
    font-family: "PT Sans";
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }

  .adr[data-before-sym]::before  { font-weight: bold; transform: scale(1.7) translate(-11px, 3px); }
  .up::before   { color: var(--a-color); }
  .down::before { color: var(--b-color);  }

  .adr {
    border: 1px solid var(--pl-eggshell);
    margin: 12px 6px 12px 0;
    padding: 8px 6px 8px 26px;
    border-radius: 6px;
    box-shadow: 1px 4px 4px var(--pl-eggshell);
    line-height: 160%;
  }
  .adr label { font-style: italic; }
  .close {
    font-size: 18px;
    padding: 7px 12px;
  }
  .close:hover { color: var(--pl-salmon-pink); }
  h2 { font-size: 14px; font-weight: normal;  }
  div.goods {
    max-height: 170px;
    overflow-y: auto;
    margin: 18px 0;
    width: calc(100% - 6px);
    table {
      width: 100%;
      th, td { padding: 2px 3px; }
      td { border: 0 none; border-top: 1px solid var(--pl-platinum); border-bottom: 1px solid var(--pl-platinum); }
      th { border: 0 none; border-top: 1px solid var(--pl-platinum); border-bottom: 1px solid var(--pl-platinum); font-weight: normal; }
      td:first-child { border-left: 1px solid var(--pl-platinum); }
      th:first-child { border-left: 1px solid var(--pl-platinum); }
      td:last-child { border-right: 1px solid var(--pl-platinum); }
      th:last-child { border-right: 1px solid var(--pl-platinum); }
      th { background-color: var(--pl-platinum); filter: brightness(112%); }
      .xyz { font-size: 86%; }
      .notes { font-size: 86%; }
    }
  }

  .links a { margin-left: 12px; }
  .links a:first-child { margin: 0; }
  .undef { font-style: italic; font-size: 95%; color: var(--pl-gray-olive); }

  &.dragging .drop-here { border: 1px solid var(--pl-brownish); font-weight: bold; }
  .help { font-size: 9; font-style: italic; color: var(--pl-gray-olive); }
  .drop-here {
    border: 1px solid var(--pl-eggshell);
    border-radius: 8px;
    display: flex;
    height: 3em;
    justify-content: center;
    align-items: center;
    background-color: var(--pl-champagne);
  }

  .files {
    width: 100%;
    
    td { border-bottom: 1px solid var(--pl-eggshell); padding: 4px 4px; color: var(--pl-dark-sand); white-space: nowrap; text-overflow: ellipsis; }
    td a:link { color: var(--pl-deep-sea); }
    .client_visible.yes { color: var(--pl-tree2); font-weight: bold; }
    .client_visible.no  { color: var(--pl-gray-olive); }
  }

  .issues {
    /* & > div { border: 1px solid var(--pl-eggshell); border-radius: 4px; } */
    .h { font-size: 110%; margin-top: 12px;  }
    .small { font-size: 80%; margin: 4px 0; }
  }

  .waybill_note { margin-bottom: 12px; }

  table.pass {
    width: 100%;
    margin-bottom: 24px;
    td { padding: 6px 0px 4px 0; border-bottom: 1px solid var(--pl-eggshell); white-space: nowrap; overflow: hidden; }
    .msymbol.up, .msymbol.down { font-size: 16px; font-weight: bold; vertical-align: bottom; }
    .msymbol.up { color: var(--a-color); }
    .msymbol.down { color: var(--b-color); }
    .done { text-align: right }
    a { color: var(--pl-gray-olive); }
    a:hover { color: var(--pl-teal-green); }
    .plandate { font-size: 90%; }
    .car { font-size: 90%; }
  }

  input.price {
    border: 0 none;
    text-align: right;
    color: inherit;
    width: 3.5em;
    font-family: inherit;
    margin-left: 6px; padding: 0; margin-right: 4px; font-size: inherit; border-bottom: 1px dashed var(--pl-platinum); box-sizing: border-box; }
  input.price:focus { outline: none; }

  .fwd {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-right: 6px;
    gap: 24px; 
    .carrier { flex-grow: 1 }
    .carrier input {
      border: 1px solid var(--pl-eggshell);
      outline: none;
      padding: 4px;
      min-width: 160px;
      border-radius: 4px;
      width: 100%;
      box-sizing: border-box;
    }
    .input-choice.company {
      li.unknown { display: flex; justify-items: space-between; width: 100%; }
      li :first-child { flex-grow: 1 }
      li.unknown .regnr { font-size: 90%; color: var(--pl-aluminium); }
    }
  }

  [data-before-sym]::before {
    content: attr(data-before-sym);
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline flow-root;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    text-decoration: none;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    user-select: none;
  }
  .adr::before {
    position: absolute;
    transform: translate(-20px, 5px);
  }

  .cancel-box {
    background-color: #eaeaea;
    padding: 8px 6px;
    border-radius: 4px;
    border: 1px solid var(--pl-gray-olive);
    width: 22em;
    .input-suggest { flex-grow: 1; display: flex; align-items: stretch; gap: 8px; }
    input { box-sizing: border-box; flex-grow: 1; outline: none; border: 1px solid var(--pl-aluminium); padding-left: 6px; border-radius: 3px; }
    input:focus { border-color: var(--pl-bluish-green); }
  }

/*
  .suggestions {
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: absolute;
    background-color: white;
    border: 1px solid var(--pl-eggshell);
    min-width: 200px;
    max-height: 370px;
    overflow-y: auto;
    background-color: #FDFDFF;
    cursor: default;
    user-select: none;
    box-shadow: 3px 3px 6px var(--pl-eggshell);
    border-radius: 5px;
    z-index: 100;
    white-space: nowrap;
    &:empty { display: none; }
    li {
      display: flex;
      padding: 4px 2px 4px 4px;
    }
    li.sel { background-color: var(--pl-champagne); }

    .msymbol { margin: 0 2px; }

    .in-db { color: var(--pl-beetle-green);  line-height: 20px; }
    .in-db .msymbol { vertical-align: center; }
    .in-db .adr { text-decoration: underline;  margin: 6px; }
    .in-db .comp { margin-left: 6px; color: var(--pl-gray-olive); text-decoration: none; font-size: 90%; display: inline-block; }
    .in-db .cont {
      margin-left: 6px;
      color: var(--pl-gray-olive);
      text-decoration: none;
      font-size: 90%;
      max-width: 9em;
      text-overflow: ellipsis;
      overflow: hidden;
      display: inline-block;
      vertical-align: bottom;
      white-space: nowrap;
    }
    .compitem {
      display: flex;
      width: 100%;
      gap: 8px;
      font-size: 13px;
      color: var(--pl-dark-sand);
      .name { flex-grow: 1 }
      .regnr { color: var(--pl-aluminium); font-size: 85%; vertical-align: bottom; }
    }
  }
*/
}


.test-box {
  position: fixed;
  z-index: 9999;
}