#preview_container_out {
  position: absolute;
  z-index: 4;
  display: none;
  margin-top: 10px;
  margin-bottom: 7px;
}
#preview_container_in {
  padding: 5px;
  position: absolute;
  right: 0;
  text-align: center;
  background-color: #f5f5f5;
  border-color: #a9a9a9;
  box-shadow: inset 0 1px 3px rgba(169, 169, 169, 70 / 100);

  // screenshot
  canvas {
    max-width: 100%;
    border: #ddd 1px solid;
  }
  pre {
    text-align: left;
    margin-bottom: 0;
    padding-bottom: 1rem;
    border: none;
    background-color: inherit;
  }
  audio {
    width: calc(100% - 20px);
  }
  #audiodiv {
    padding-top: 10px;
    margin-bottom: 0;
    border: none;
    background-color: inherit;
  }
}
[data-bs-theme='dark'] #preview_container_in {
  background-color: #0a0a0a;
}
#preview_container_in > * {
  max-width: 100%;
}
[data-bs-theme='dark'] #preview_container_in > * {
  color: $default-font-color-dark;
  background-color: $default-bg-color-dark;
}
.links > div {
  display: inline-block;
  margin-top: 3px;
}
.links [class*='fa-caret-up'] {
  display: none;
  position: absolute;
  color: #a9a9a9;
  bottom: -25px;
  left: 21px;
  font-size: 35px;
}
.current_preview {
  position: relative;
  [class*='fa-caret-up'] {
    display: inline-block;
  }
}
#step_view {
  margin: 1em;
}
#needle_diff {
  margin: 5px;
}
#canholder {
  position: relative;
  text-align: center;
  width: 100%;
  margin-top: 10pt;

  // live view
  canvas {
    max-width: 100%;
    border: #ddd 1px solid;
  }
}
#liveview-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10; /* Ensure it's above the canvas */
}
.needle-info-table {
  display: table;
  & > div {
    display: table-row;
    span {
      display: table-cell;
    }
    span:first-child {
      text-align: right;
      padding-right: 0.5em;
    }
  }
}
.candidates-selection {
  min-width: 50%;
  #screenshot_button {
    border-width: 1px 0 1px 1px;
    border-style: solid;
    border-color: #d8d9da;
  }
  #candidatesMenu {
    font-weight: 400;
    border-radius: 4px;
    box-shadow: 0 0 0 1px rgba(34, 36, 38, 15 / 100) inset;
    padding: 8pt;
    width: 100%;
    text-align: left;
  }
  .dropdown-menu {
    padding: 0;
    min-width: 300pt;
    max-height: 80vh;
    overflow-x: hidden;
  }
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    & > li {
      table {
        padding: 3pt;
        line-height: 100%;
        border: none;
        width: 100%;
        thead {
          th {
            padding: 5pt;
            padding-top: 10pt;
            padding-bottom: 7pt;
            border-radius: unset !important;
            background-image: linear-gradient(to bottom, #fff 0%, #eee 100%) !important;
          }
          [class*='fa-'] {
            padding-left: 3pt;
            padding-right: 3pt;
          }
        }
        tbody {
          td {
            border: none !important;
            padding: 5pt;
            &:nth-child(1), &:nth-child(3) {
              text-align: right;
              white-space: nowrap;
            }
            &:nth-child(1)::after {
              content: '%';
            }
            &:nth-child(3) i {
              padding: 1pt;
              font-size: 120%;
            }
          }
          tr {
            cursor: pointer;
          }
          tr:hover {
            background-color: #eee;
          }
          tr.selected {
            color: #fff;
            background-color: #4582ec;
          }
        }
      }
    }
  }
}
[data-bs-theme='dark'] {
  .candidates-selection {
    #candidatesMenu, #candidatesMenu.dropdown-toggle {
      box-shadow: 0 0 0 1px rgba(231, 229, 227, 15 / 100) inset;
      background-color: $default-bg-color-dark;
      color: $default-font-color-dark;
    }
    #screenshot_button {
      border-color: #272625;
    }
  }
}
