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


/*********
** Custom Properties
*********/
:root {
    --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-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;
}


/*********
** 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 td {
        padding: 0;
    }

p {
    margin: .25rem 0;
}


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

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

/****
** Login Page
****/
#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 Page
****/
#header {
    border-bottom: var(--border-medium);
    padding: .5rem 0;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

    #header > div {
        width: 25%;
    }

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

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

#considered-inactive-container {
    display: flex;
}

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

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

#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%;
    }


/*********
** 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);
}