:root {
    --checkin-color: #7B927D;
    --checkout-color: #916C79;
    --pause-color: #6C7691;
    --user-checkin-background-color: #151715;
    --user-checkin-text-color:#cecece;
    --user-checkin-error-color : #a26464;
    --navbar-background-color : #151715;
    --time-text-color : #b9b9b9;
    --main-background-color: #151715;
    --pin-helper-color:#cecece;
    --pin-numbers-color:#cecece;
    --entered-pin-color:#a4a4a4;
    --login-button-background:#151715;
    --login-button-text:#cecece;
    --login-container-color: #ffffff;
}

.card-body {
    background: #f4ebe8;
}

body {
    background-color: var(--main-background-color);
    overflow-y: hidden; /* Hide vertical scrollbar */
    overflow-x: hidden; /* Hide horizontal scrollbar */
}

.navbar {
    background-color: var(--navbar-background-color);
}

.employerBox {
    margin-bottom: 2em;
}
.loginContainer{
    background-color: var(--login-container-color);
    margin:0;
    padding: 20px!important;
    padding-top:30px!important;
}

.currentObject{
    font-size: 3vw;
}
.loginCard{
    background-color: var(--login-container-color);
}
.employerContainer {
    margin-top: 2em;
    margin-bottom: 2em;
}

.card-title {
    text-align: center;
}

.pinHelper {
    font-style: italic;
    color: var(--pin-helper-color);
}

.card {
    width: 100% !important;
}

.time {
    text-align: center !important;
}

.offcanvas-end {
    width: 100% !important;
}

.userCheckInWindow {
    background-color: var(--user-checkin-background-color);
}

.checkin svg, .pause svg, .checkout svg {
    transition: 0.5s;
}

.checkin svg {
    color: var(--checkin-color);
}

.actionHelper {
    text-align: center;
    font-size: 2vw;
    font-style: italic;
}

.checkin .actionHelper {
    color: var(--checkin-color);
    text-align: left;
}

.pause .actionHelper {
    color: var(--pause-color);
    text-align: center;
}

.checkout .actionHelper {
    color: var(--checkout-color);
    text-align: right;
}

.pause svg {
    color: var(--pause-color);
    transform: scale(0.85);
}

.checkout svg {
    color: var(--checkout-color);
}

.checkin svg:hover {
    transform: scale(0.9);
}

.pause svg:hover {
    transform: scale(0.75);
}

.checkout svg:hover {
    transform: scale(0.9);
}

.checkinGreeting {
    font-size: 4vw;
    margin-bottom: 0.5rem;
    color: var(--user-checkin-text-color);
    font-style: italic;
}

.actionButtons {
    margin-left: 200px;
    margin-right: 200px;
}

.offcanvas-body {
    overflow-x: hidden;
    overflow-y: hidden;
}

@media only screen and (max-width: 700px) {
    .checkinGreeting {
        font-size: 6vw;
        margin-bottom: 1rem;
    }


    .actionButtons {
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 50%;
    }

    .actionHelper {
        font-size: 4vw;
    }

    .pinNumbers td {
        font-size: 7vw !important;
    }

    .pinNumbers svg {
        width: 7vw !important;
        height: 7vw !important;
    }

    .pinNumbers {
        position: fixed;
        bottom: 50px;
        left: 0px;
    }

    #enteredPin {
        font-size: 7vw !important;
        margin-top: 50vw;
        color:var(--entered-pin-color);
    }

    #time {
        font-size: 4vw;
        color: var(--time-text-color);
    }

    .exitCheckin {
        height: 10vw;
        color: var(--user-checkin-text-color);
        margin-top: 30px;
    }
    .checkInActionError p {
        text-align: center;
        font-size: 1em;
        font-style: italic;

        color: var(--user-checkin-error-color);
    }
    }


.checkInSubInfo {
    font-style: italic;
    color: var(--user-checkin-text-color);
    text-align: center;
    margin-bottom: 2rem;
}

.error {
    color: #8f4a57;
}
.errorMessage{
    color: #a81818;
    margin-top:20px;
}
.btn:focus {
    outline: none;
    box-shadow: none;
}

.spinner-border {
    width: 10rem;
    height: 10rem;
    margin: auto;
    color: #7B927D;
}

.loadingMessage{
    color:var(--user-checkin-text-color);
}
.checkInActionError{
    margin-top: 20px;
}
.checkInActionError p {
    text-align: center;
    font-size: 1em;
    font-style: italic;
    color: var(--user-checkin-error-color);
}


.pinNumbers {
    margin: auto;
    color:var(--pin-numbers-color);
}

#time {
    color: var(--time-text-color);
}
.remember{
    color: var(--login-button-text);
}
.pinNumbers svg {
    width: 2.5vw;
    height: 2.5vw;
    transform: scale(1);
    margin-bottom: 8px;
}

.pinNumbers td {
    /*height: 50px!important;*/
    /*width: 50px!important;*/
    width: calc(100% / 3);
    border-color: rgba(128, 128, 128, 0.06);
    font-size: 3vw;
    user-select: none;
    transition: 0.4s;
    border-style: unset !important;
}

.pinNumbers td:hover {
    background: rgba(211, 211, 211, 0.37);
}

.pinEntered {
    margin-bottom: 5vw;
}

.pinEntered td, tr {
    border: none;
}

.pinEntered td {
    user-select: none;
    font-size: 3vw;
    font-weight: 600;
}

.pinEntered td input {
    width: 50%;
    border: none;
    background-color: transparent;
    text-align: center;
}
.loginButton{
    background-color: var(--login-button-background);
    color: var(--login-button-text);
}

.loginButton:hover{
   color: white;
}
.logoFont{
    color: white;
    font-weight: 300;
    font-size: 40px;
    margin-bottom: 20px;
}

.mainLogo{
    width:100%;
    margin-bottom: 10px;
}
.logout{
    color:#eda919;
    display: flex;
    margin-right: 20px;
    margin-left: -30px;
}