/* logo */

.logo {
 
}

.vsi-left-side-bar-header-company-title {
    display:none;
}

.above-table-select {
    float:right;
}

.loginLogo {
    content: url("/images/largeLogo.png")
}



/* general */

.vsi-menu-item {
    font-size: 1.5em;
}

.bigFont {
    font-size: 2em;
}
.mediumFont {
    font-size: 1.5em;
}
.smallFont {
    font-size: 0.75em;
}

.backgroundColor {
    background: lightblue;
}

.center {
    display: flex;
    flex-flow: column;
    align-items: center;
}

.largeMargin {
    margin: 2em;
}

.smallPadding {
    padding: 0.5em;
}
.mediumPadding {
    padding: 1em;
}
.largePadding {
    padding: 2em;
}

.transitionAllFast {
    transition: all 0.25s ease 0s;
}
.transitionAll {
    transition: all 0.5s ease 0s;
}


/* general touch screen specific */
.touchScreen .bigFont {
    font-size: 3em;
}
.touchScreen .mediumFont {
    font-size: 2em;
}
.touchScreen .smallFont {
    font-size: 1em;
}

.touchScreen .largeMargin {
    margin: 1.75em;
}

.touchScreen .smallPadding {
    padding: 0.5em;
}
.touchScreen .mediumPadding {
    padding: 1em;
}
.touchScreen .largePadding {
    padding: 2em;
}

.touchScreen .rankAndUnit {
    font-size: 0.6em;
}






/* Alcohol Assignment */

.successBackgroundColor {
    background: lightgreen;
}

.failBackgroundColor {
    background: pink;
}

.successText {
    color: #144a75; /* dark blue */
    font-weight: bold
}

.failText {
    color: red;
    font-weight: bold;
}

.mainServerNotice {
    color: #484848; /* dark grey */
    font-weight: bold;
}

.submitButton {
    background: white;
    color: black;
    border-radius: 10px;
    border-color: black;
    padding: 5px 10px 5px 10px;
}

.fontAwesomeButton {
    background: transparent;
    border-color: transparent;
    font-size: 3em;
}

.validButtonColor {
    background: lightgreen;
    border-color: #2cda2c; /* lime green */
}

.invalidButtonColor {
    background: pink;
    border-color: #ff95a7; /* dark pink */
}

.closeErrorButton {
    background: pink;
    border-color: #ff95a7; /* dark pink */

    margin: 0.5em;
    border-radius: 0.5em;
}

/* server status icon */

.statusIconContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    position: absolute;
    bottom: 4em;
    left: 2em;
}

.statusIconBackground {
    width: 128px;
    height: 128px;
    border-radius: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
}
    .statusIconBackground.inactive {
        background: transparent;
    }
    .statusIconBackground.waiting {
        background: darkgray;
    }


.statusIconForeground {
    background: lightGray;
    color: white;

    width: 75%;
    height: 75%;
    border-radius: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
}
    .statusIconForeground.success {
        background: green;
    }
    .statusIconForeground.mainServerFail {
        background: darkOrange;
    }
    .statusIconForeground.clientServerFail {
        background: darkRed;
    }
    .statusIconForeground.mainServer {
        background: #484848; /* dark gray */
    }

.statusIconLabel {
    min-height: 3em;
    overflow-wrap: break-word;
    text-align: center;
}




/* Sync */

.syncLabelBackground {
    border-radius: 32px;
    padding: 1em; /* the width of the background */
}
    .syncLabelBackground.inactive {
        background: transparent;
    }
    .syncLabelBackground.waiting {
        background: lightGray;
    }


.syncLabelForeground {
    border-radius: 32px;
    color: white;
    padding: 0.5em; /* add padding around the text */
}
    .syncLabelForeground.success {
        background: #090; /* green */
    }
    .syncLabelForeground.mainServerFail {
        background: orange;
    }
    .syncLabelForeground.clientServerFail {
        background: #a70000; /* dark red */
    }
    .syncLabelForeground.mainServer {
        background: #484848; /* dark gray */
    }





/**/

.dayEditor {
    display: flex;
    flex-direction: row;
}
    .dayEditor > div {
        margin-right: 0.5em;
        background-color: #d4d3d3;
        border-radius: 0.5em;
        padding: 0.5em;
        display: flex;
        flex-direction: column;
        text-align: center;
    }
        .dayEditor > div > input {
            scale: 1.5;
            margin: 0.25em;
        }