/* Colour palette */
:root {
    --primarycolor: rgb(34, 40, 49);
    --secondarycolor: rgb(57, 62, 70);
    --tertiarycolor: rgb(0, 146, 202);
    --quaternarycolor: rgb(255, 255, 255);
    /* Copy and paste, so we can set opacity later */
    --primaryrgb: 34, 40, 49;
    --secondaryrgb: 57, 62, 70;
    --tertiaryrgb: 0, 146, 202;
    --quaternaryrgb: 255, 255, 255;
    --navbar-height: 5rem;
    --command-height: min(25vh, 15rem);
    --ltd-plot-height: calc(100vh - 2rem - var(--command-height) - var(--navbar-height));
}

.primary-color-style {
    color: var(--primarycolor);
}

.secondary-color-style {
    color: var(--secondarycolor);
}

.tertiary-color-style {
    color: var(--tertiarycolor);
}

.quaternary-color-style {
    color: var(--quaternarycolor);
}

.hidden {
    opacity: 0;
    visibility: hidden;
}

.main-app-style {
    position: absolute;
    background-color: var(--quaternarycolor);
    z-index: 10;
}

.command-style {
    margin: inherit;
    margin-top: 10px;
    padding: 10px;
    background-color: var(--secondarycolor);
    border-radius: 15px 15px 15px 15px;
}

.info-style {
    background-color: var(--primarycolor);
    border-radius: 15px 15px 15px 15px;
    padding: 10px;
    margin-right: 10px;
    margin-top: 10px;
    margin-left: 10px;
    height: 90vh;
    overflow: auto;
}

.sidebar-ltd-height {
    height: var(--ltd-plot-height) !important;
}

.sidebar {
    position: absolute;
    right: 0;
    width: 3vw;
    height: 80vh;
    overflow-x: hidden;
    /* Hide horizontal scrollbar */
    transition: width 0.5s;
    /* Transition effect for the width property */
    background-color: rgb(var(--primaryrgb), 0.9);
    padding-top: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 10px;
    border-radius: 15px 15px 15px 15px;
}

.sidebar-button {
    font-size: 20px;
    font-weight: bold;
    position: absolute;
    overflow-x: hidden;
    /* Hide horizontal scrollbar */
    transition: width 0.5s;
    /* Transition effect for the width property */
    padding: 10px;
    margin-bottom: 10px;
    margin-right: 10px;
    border-radius: 15px 15px 15px 15px;
}

.sidebar-plot {
    padding: 6vh;
    overflow-x: hidden;
    transition: opacity 0.5s ease-in-out;
}


.main-plot {
    height: 79.5vh;
    margin: .5rem;
}

.main-plot-ltd {
    height: var(--ltd-plot-height);
    margin: .5rem;
}

.command-style-ltd {
    min-height: var(--command-height);
}

.display-on-style {
    display: block;
}

.display-off-style {
    display: none;
}

.slider {
    color: black;
}

.table-title-style {
    padding-top: 20px;
    color: var(--quaternarycolor);
}

.navbar-item-style {
    background-color: var(--primarycolor);
    color: var(--quaternarycolor);
    border-color: var(--quaternarycolor);
}

.control-button-style {
    background: none;
    color: black;
    border: none;
    font-size: 25px;
    margin-right: 2px;
}

.disabled-button-style {
    background: none;
    color: grey;
    border: none;
    font-size: 25px;
    margin-right: 2px;
    opacity: 0.6;
    cursor: not-allowed;
}

.info-text-style {
    color: var(--quaternarycolor);
    width: 20vw;
}

.sidebar-text-style {
    color: var(--quaternarycolor);
    width: 43vw;
    margin-top: 10px;
    white-space: pre-wrap;
}

.table-entry-new-line {
    white-space: pre-line;
}

.mensa-sidebar-div-style {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.disabled-info-text-style {
    background: none;
    color: grey;
    border: none;
    opacity: 0.6;
    cursor: not-allowed;
}

.js-plotly-plot .plotly .main-svg .infolayer .legend :hover {
    cursor: default !important;
}

.w-80{
    width: 80% !important;
}

.sanity-check-checklist-style {
    column-count: 2;
}

.sanity-check-checklist-style label {
    color: var(--quaternarycolor) !important;
}

.dark-dropdown {
    margin-top: 0.2rem;
}

.dark-dropdown .Select-control {
    background-color: #212529 !important;
}

.dark-dropdown .Select.is-focused > .Select-control {
    background-color: #212529;
}

.dark-dropdown .Select-value-label {
    color: white !important;
}

.dark-dropdown .Select--single > .Select-control .Select-value, .Select-placeholder {
    border: 1px solid grey;
    border-radius: 4px;
}

.dark-dropdown .VirtualizedSelectOption {
    background-color: #212529;
    color: white;
 }

.dark-dropdown .VirtualizedSelectFocusedOption {
    background-color: #212529;
    opacity: .7;
}

.dark-dropdown .Select.is-focused:not(.is-open) > .Select-control {
    background-color: #212529;
    border-color: var(--primary);
    box-shadow: none;
}

.fixed-width-table td{
    width: 50%;
}

#ltd-plot .modebar-container {
    position: relative !important;
    margin-left: 75vw !important;
    width: 30% !important;
}

.ltd-approach-dropdown {
    min-width: 30rem;
}

.ltd-load-dropdown {
    min-width: 45rem;
}

.ltd-step-title {
    min-width: 12rem;
}