#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, 0.7);

    // 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 .fa-caret-up {
    display: none;
    position: absolute;
    color: #a9a9a9;
    bottom: -22px;
    left: 21px;
    font-size: 35px;
}

.current_preview {
    position: relative;

   .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 0px 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) inset;
        padding: 8pt;
        width: 100%;
        text-align: left;
    }

    .dropdown-menu {
        padding: 0pt;
        min-width: 300pt;
        max-height: 80vh;
        overflow-x: hidden;
    }

    ul {
        list-style-type: none;
        margin: 0pt;
        padding: 0pt;

        & > 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;
                    }

                    .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) inset;
            background-color: $default-bg-color-dark;
            color: $default-font-color-dark;
        }
        #screenshot_button {
            border-color: #272625;
        }
    }
}
