@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');


/*********
** Custom Properties
*********/
:root {
    --background-colour-very-light: #f0f0f0;
    --background-colour-light: #e0e0e0;
    --background-colour-medium: #cfcfcf;
    --background-colour-dark: #adadad;
    --background-colour-very-dark: #6F6F6F;
    --border-medium: 1px solid #909090;
    --border-radius-medium: .3rem;
    --text-colour-primary: #111;
    --text-colour-secondary: #666;
    --text-colour-disabled: #aaa;
    --text-colour-green: #42a542;
    --text-colour-blue: #4242c5;
    --text-colour-red: #a54242;
    --background-colour-pp-GW: #ebae34;
    --background-colour-pp-M: #34eb9c;
    --background-colour-pp-MNS: #34ebeb;
    --background-colour-pp-MBWS: #787cfa;
    --background-colour-pp-HOV: #f54242;
    --background-colour-pp-NS: #ff866b;
    --background-colour-pp-BWSNS: #bd78fa;
    --background-colour-pp-SBWS: #60d1f7;
    --background-colour-pp-S: #ef60f7;
    --background-colour-pp-SG: #afa0f7;
    --background-colour-pl-Line_1: #e63939;
    --background-colour-pl-Line_2: #e68739;
    --background-colour-pl-Line_3: #e6d439;
    --background-colour-pl-Line_4: #a9e639;
    --background-colour-pl-Line_5: #5ce639;
    --background-colour-pl-Line_6: #39e667;
    --background-colour-pl-Line_7: #39e6b5;
    --background-colour-pl-Line_8: #39c9e6;
    --background-colour-pl-Line_9: #397be6;
    --background-colour-pl-Line_10: #4539e6;
    --background-colour-pl-Line_11: #9539e6;
    --background-colour-pl-Line_12: #e339e6;
    --background-colour-pl-Line_13: #e6399b;
}


/*********
** Browser Styles
*********/
::-webkit-scrollbar {
    width: .75rem;
    height: .75rem;
}

::-webkit-scrollbar-track {
    background: var(--background-colour-dark);
}

::-webkit-scrollbar-thumb {
    background: var(--background-colour-very-dark);
}

    ::-webkit-scrollbar-thumb:hover {
        background: var(--background-colour-very-dark);
    }


/*********
** Tag Styles
*********/
* {
    box-sizing: border-box;
}

html, body {
    font-family: 'Roboto', sans-serif;
    background: var(--background-colour-light);
    margin: 0;
}

h3 {
    font-weight: normal;
    margin: .5rem;
    text-align: center;
}

table {
    border-spacing: 0;
}

    table.spaced {
        border-spacing: .2rem;
    }

    table th {
        font-weight: normal;
    }

    table td {
        padding: 0;
    }

p {
    margin: .25rem 0;
}

button {
    padding: .2rem .4rem;
    font-size: 1rem;
}

button:disabled {
    color: var(--text-colour-disabled);
}

input {
    background-color: var(--background-colour-very-light);
    border: var(--border-medium);
    border-radius: var(--border-radius-medium);
    padding: .2rem .25rem;
}

    input[type=range] {
        -webkit-appearance: none;
        width: 100%;
        height: .3rem;
        border-radius: var(--border-radius-medium);
        background: var(--background-colour-dark);
        outline: none;
        margin-top: .5rem;
    }

        input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: .5rem;
            height: 1rem;
            border-radius: var(--border-radius-medium);
            background: var(--background-colour-very-dark);
            cursor: pointer;
        }

        input[type=range]::-moz-range-thumb {
            width: .5rem;
            height: 1rem;
            border-radius: var(--border-radius-medium);
            background: var(--background-colour-very-dark);
            cursor: pointer;
        }

canvas {
    min-width: 250px;
    min-height: 250px;
    background-color: var(--background-colour-medium);
}


/*********
** Component Styles
*********/
#app {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.text-error {
    color: var(--text-colour-red);
}

.popup-background {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
}

#header {
    border-bottom: var(--border-medium);
    padding: .5rem 0;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

    #header > div {
        width: fit-content;
    }

    #header .section-header {
        margin-left: .25rem;
    }

    #header button {
        width: 100%;
    }

/****
** Considered Inactive
****/
#considered-inactive-container {
    display: flex;
}

    #considered-inactive-container p {
        text-wrap: nowrap;
        margin-right: .5rem;
    }

    #considered-inactive-container input {
        width: 4rem;
    }

/****
** Date Time Picker
****/
.date-time-picker {
    background-color: var(--background-colour-very-light);
    width: fit-content;
    padding: .2rem .4rem;
    border: var(--border-medium);
    border-radius: var(--border-radius-medium);
    user-select: none;
}

    .date-time-picker:hover {
        background-color: var(--background-colour-medium);
    }

.date-time-picker-context-container {
    position: relative;
}

.date-time-picker-context {
    width: fit-content;
    background-color: var(--background-colour-very-light);
    border: var(--border-medium);
    border-radius: var(--border-radius-medium);
    padding: 1rem;
    z-index: 1001;
    position: absolute;
}

    .date-time-picker-context table {
        padding: .75rem 0;
    }

        .date-time-picker-context table th {
            color: var(--text-colour-secondary);
            min-width: 2rem;
            text-align: center;
            font-size: .9rem;
        }

        .date-time-picker-context table td {
            text-align: center;
            height: 2rem;
            font-size: .9rem;
        }

        .date-time-picker-context table button {
            width: 100%;
            height: 100%;
            background-color: transparent;
            border: none;
        }

            .date-time-picker-context table button:not(:disabled):hover {
                background-color: var(--background-colour-medium);
            }

.date-time-picker-header {
    display: flex;
}

    .date-time-picker-header div {
        display: inline-block;
        margin: auto;
    }

    .date-time-picker-header button {
        padding: .3rem .5rem;
        background-color: transparent;
        border: none;
    }

        .date-time-picker-header button:not(:disabled):hover {
            background-color: var(--background-colour-medium);
        }

        .date-time-picker-header button:first-child {
            float: left;
        }

        .date-time-picker-header button:last-child {
            float: right;
        }

.date-time-picker-footer {
    display: flex;
    justify-content: space-between;
}

/****
** Selects
****/
.custom-select {
    display: flex;
    padding: .2rem .4rem;
    width: 15rem; /* multiselects need a fixed width to force the inner text to not use ellipse instead of stretching it out */
    color: var(--text-colour-primary);
    background-color: var(--background-colour-very-light);
    border: var(--border-medium);
    border-radius: var(--border-radius-medium);
}

    .custom-select:hover {
        background-color: var(--background-colour-medium);
    }

    .custom-select span:nth-child(1) { /* currently selected values */
        user-select: none;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        flex-grow: 1;
    }

    .custom-select span:nth-child(2) { /* up/down arrow icon */
        float: right;
        margin: 0 .4rem;
    }

.custom-select-context {
    background-color: var(--background-colour-very-light);
    border: var(--border-medium);
    border-radius: var(--border-radius-medium);
    z-index: 1001;
    position: absolute;
    max-height: 25rem;
    overflow-y: scroll;
}

.custom-select-option {
    padding: .25rem .5rem;
    user-select: none;
    border: none;
}

    .custom-select-option:hover, .custom-select-option:focus {
        background-color: var(--background-colour-medium);
    }


/*********
** Page Styles
*********/
/****
** Login
****/
#login-form {
    margin: auto;
}

    #login-form form {
        margin-bottom: 5rem;
    }

    #login-form h3 {
        font-size: 1.5rem;
        margin: .5rem 0;
    }

    #login-form input {
        padding: .25rem .5rem;
        background-color: var(--background-colour-light);
        border: var(--border-medium);
        border-radius: var(--border-radius-medium);
    }

    #login-form button {
        width: 100%;
        margin-top: .3rem;
        font-size: 1rem;
    }

/****
** Overview
****/
#process-path-legend-section tr td:first-child {
    text-align: center;
    padding: .05rem .25rem;
    margin-right: .5rem;
    display: block;
}

#pack-head-count-section td {
    padding-left: .5rem;
}

#pack-line-containers-wrapper {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

    #pack-line-containers-wrapper > input {
        position: absolute;
        right: 1rem;
        width: 8rem;
        z-index: 100;
    }

#pack-line-containers {
    overflow: auto;
}

.pack-line-container {
    display: flex;
    flex-direction: row;
    margin: 1rem 0;
}

.pack-line {
    margin: 0 1rem;
}

    .pack-line tr {
        height: 3rem;
    }

    .pack-line .centre {
        min-width: 3rem;
        font-size: 2rem;
        background: var(--background-colour-medium);
        border: var(--border-medium);
        text-align: center
    }

.last-hour-slams {
    text-align: center;
    padding: 1rem 0;
}

.pack-station-container {
    display: flex;
}

.pack-station {
    position: relative;
    width: 3.6rem;
    height: 3rem;
    background: var(--background-colour-medium);
    border: var(--border-medium);
}

    .pack-station div {
        height: 50%;
        line-height: 1.5rem;
        text-align: center;
    }

.station-number {
    line-height: 3rem;
    padding: 0 .25rem;
}

.pack-station-overlay {
    background: white;
    opacity: 0%;
    position: absolute;
    width: 100%;
    height: 100% !important;
    pointer-events: none;
}

    .pack-station-overlay.inactive {
        opacity: 50%;
    }


/*********
** Icon Styles
*********/
.up-arrow-icon::after {
    content: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' focusable='false' height='12' width='12' viewBox='0 0 14.7 8.1' fill='black'><path d='M0 7.4 L7.4 0 14.7 7.4 14 8.1 7.4 1.5 .7 8.1Z'></path></svg>");
}

.down-arrow-icon::after {
    content: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' focusable='false' height='12' width='12' viewBox='0 0 14.7 8.1' fill='black'><path d='M.7 0 L7.4 6.6 14 0 14.7 .7 7.4 8.1 0 .7Z'></path></svg>");
}


/*********
** Colour Styles
*********/
.connection-connected {
    color: var(--text-colour-green);
}

.connection-connecting {
    color: var(--text-colour-blue);
}

.connection-disconnected {
    color: var(--text-colour-red);
}

.pp-GW {
    background: var(--background-colour-pp-GW);
}

.pp-M {
    background: var(--background-colour-pp-M);
}

.pp-MNS {
    background: var(--background-colour-pp-MNS);
}

.pp-MBWS {
    background: var(--background-colour-pp-MBWS);
}

.pp-HOV {
    background: var(--background-colour-pp-HOV);
}

.pp-NS {
    background: var(--background-colour-pp-NS);
}

.pp-BWSNS {
    background: var(--background-colour-pp-BWSNS);
}

.pp-SBWS {
    background: var(--background-colour-pp-SBWS);
}

.pp-S {
    background: var(--background-colour-pp-S);
}

.pp-SG {
    background: var(--background-colour-pp-SG);
}