@import url('../css/fontawesome/fontawesome.css');

html {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    position: relative;
    min-height: 100%;
}

body {
    font-size: 0.8rem !important;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    /* margin-bottom: 30px;*/ /* Margin bottom by footer height */
}

#btn-back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
}

#blazor-error-ui {
    display: none !important;
}

.center-on-top-of-each-element {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    align-content: center;
    flex-direction: column;
}

.modal-center-position {
    position: absolute;
    top: 200px;
}

#G8Toast {
    position: absolute !important;
    top: 30px !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1051 !important;
}
#G8Toast div:nth-child(1) div:nth-child(1) {
    height: 100vh !important;
}
#G8ToastModal {
    position: absolute !important;
    top: 30px !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1051 !important;
}
#G8ToastModal div:nth-child(1) div:nth-child(1) {
    height: 160px !important;
}

hr {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}

[id^="tippy-"] {
    /*width: 300px;*/
    overflow-wrap: break-word;
}

.btn {
    font-size: 0.8rem !important;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}

.btn.dropdown-toggle {
    color: #d7d7d7 !important;
}

.btn-light {
    border-color: grey !important;
}

.table-warning-custom {
    background-color: #ffe8a4 !important;
    color: black;
}

.table-success-custom {
    background-color: #c8efc8 !important;
    color: black;
}

.table-danger-custom {
    background-color: #f5c6cb !important;
    color: black;
}

.table-primary-custom {
    background-color: #007bff !important;
    color: black;
}

.table-info-custom {
    background-color: #17a2b8 !important;
    color: black;
}

.person-visitor-custom {
    background-color: #D0EC9E !important;
    color: black;
}

.person-contractor-custom {
    background-color: #F6BA85 !important;
    color: black;
}

.person-trucks-custom {
    background-color: #9EECC1 !important;
    color: black;
}

.person-disabled-custom {
    background-color: orange !important;
    color: black;
}

.person-deleted-custom {
    background-color: salmon !important;
    color: black;
}

.person-expired-custom {
    background-color: #fa8255 !important;
    color: black;
}

.sidebar .nav-item {
    font-size: 0.8rem !important;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}

.dropdown-menu {
    font-size: 0.8rem !important;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}

.b-bar-mobile-toggle {
    height: 36px !important;
    padding: 0 !important;
}

.form-control {
    font-size: 0.8rem !important;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}

th > input {
    height: 24px !important;
}

th > div {
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
}

.custom-select {
    font-size: 0.8rem !important;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}

.content {
    padding-top: 0.2rem !important;
}

.main > div {
    padding-left: 0.4rem !important;
    padding-right: 0.4rem !important;
}

a, .btn-link {
    color: #0366d6;
}

.btn-primary {
    color: #fff;
    background-color: #329ac6;
    border-color: #1861ac;
}

.btn-outline-primary {
    color: #329ac6;
}

.page-link {
    color: #329ac6;
}

a, .btn-link {
    color: #329ac6;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    background-color: #329ac6;
}

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: #329ac6;
}

.custom-control-label {
    padding-top: 3px !important;
}

.btn-camera-person {
    top: -40px;
    right: 20px;
    position: relative;
}

.icon-camera-person {
    padding: 2px;
    font-size: large;
}

.d-flex.justify-content-end {
    align-items: center;
    flex-direction: column;
}

.card-body {
    padding: 2px !important;
}

.card-body-one-em {
    padding: 1em !important;
}

.grid-stack-gridlines {
    background-image: linear-gradient(#e0e0e0 2px, transparent 0px), linear-gradient( 90deg, #e0e0e0 2px, transparent 0px), linear-gradient(rgba(255,255,255,.3) 5px, transparent 100px), linear-gradient( 90deg, rgba(255,255,255,.3) 5px, transparent 100px);
    background-size: 100px 250px, calc(25.33% + 0px) 100px, 20px 20px, 20px 20px;
    background-position: -1px 1px, -1px 1px, -1px 1px, -1px 1px;
}  

.grid-stack-item {
    /*cursor: move;*/
}

.grid-stack-item-content {
    /*cursor: move;*/
    -webkit-box-shadow: 1px 1px 12px 2px #ccc; /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
    -moz-box-shadow: 1px 1px 12px 2px #ccc; /* Firefox 3.5 - 3.6 */
    box-shadow: 1px 1px 12px 2px #ccc;
}

.trash {
    height: 50px;
    margin-bottom: 20px;
    /*background: rgba(255, 0, 0, 0.1) center center url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCIgdmlld0JveD0iMCAwIDQzOC41MjkgNDM4LjUyOSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDM4LjUyOSA0MzguNTI5OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPGc+CgkJPHBhdGggZD0iTTQxNy42ODksNzUuNjU0Yy0xLjcxMS0xLjcwOS0zLjkwMS0yLjU2OC02LjU2My0yLjU2OGgtODguMjI0TDMwMi45MTcsMjUuNDFjLTIuODU0LTcuMDQ0LTcuOTk0LTEzLjA0LTE1LjQxMy0xNy45ODkgICAgQzI4MC4wNzgsMi40NzMsMjcyLjU1NiwwLDI2NC45NDUsMGgtOTEuMzYzYy03LjYxMSwwLTE1LjEzMSwyLjQ3My0yMi41NTQsNy40MjFjLTcuNDI0LDQuOTQ5LTEyLjU2MywxMC45NDQtMTUuNDE5LDE3Ljk4OSAgICBsLTE5Ljk4NSw0Ny42NzZoLTg4LjIyYy0yLjY2NywwLTQuODUzLDAuODU5LTYuNTY3LDIuNTY4Yy0xLjcwOSwxLjcxMy0yLjU2OCwzLjkwMy0yLjU2OCw2LjU2N3YxOC4yNzQgICAgYzAsMi42NjQsMC44NTUsNC44NTQsMi41NjgsNi41NjRjMS43MTQsMS43MTIsMy45MDQsMi41NjgsNi41NjcsMi41NjhoMjcuNDA2djI3MS44YzAsMTUuODAzLDQuNDczLDI5LjI2NiwxMy40MTgsNDAuMzk4ICAgIGM4Ljk0NywxMS4xMzksMTkuNzAxLDE2LjcwMywzMi4yNjQsMTYuNzAzaDIzNy41NDJjMTIuNTY2LDAsMjMuMzE5LTUuNzU2LDMyLjI2NS0xNy4yNjhjOC45NDUtMTEuNTIsMTMuNDE1LTI1LjE3NCwxMy40MTUtNDAuOTcxICAgIFYxMDkuNjI3aDI3LjQxMWMyLjY2MiwwLDQuODUzLTAuODU2LDYuNTYzLTIuNTY4YzEuNzA4LTEuNzA5LDIuNTctMy45LDIuNTctNi41NjRWODIuMjIxICAgIEM0MjAuMjYsNzkuNTU3LDQxOS4zOTcsNzcuMzY3LDQxNy42ODksNzUuNjU0eiBNMTY5LjMwMSwzOS42NzhjMS4zMzEtMS43MTIsMi45NS0yLjc2Miw0Ljg1My0zLjE0aDkwLjUwNCAgICBjMS45MDMsMC4zODEsMy41MjUsMS40Myw0Ljg1NCwzLjE0bDEzLjcwOSwzMy40MDRIMTU1LjMxMUwxNjkuMzAxLDM5LjY3OHogTTM0Ny4xNzMsMzgwLjI5MWMwLDQuMTg2LTAuNjY0LDguMDQyLTEuOTk5LDExLjU2MSAgICBjLTEuMzM0LDMuNTE4LTIuNzE3LDYuMDg4LTQuMTQxLDcuNzA2Yy0xLjQzMSwxLjYyMi0yLjQyMywyLjQyNy0yLjk5OCwyLjQyN0gxMDAuNDkzYy0wLjU3MSwwLTEuNTY1LTAuODA1LTIuOTk2LTIuNDI3ICAgIGMtMS40MjktMS42MTgtMi44MS00LjE4OC00LjE0My03LjcwNmMtMS4zMzEtMy41MTktMS45OTctNy4zNzktMS45OTctMTEuNTYxVjEwOS42MjdoMjU1LjgxNVYzODAuMjkxeiIgZmlsbD0iI2ZmOWNhZSIvPgoJCTxwYXRoIGQ9Ik0xMzcuMDQsMzQ3LjE3MmgxOC4yNzFjMi42NjcsMCw0Ljg1OC0wLjg1NSw2LjU2Ny0yLjU2N2MxLjcwOS0xLjcxOCwyLjU2OC0zLjkwMSwyLjU2OC02LjU3VjE3My41ODEgICAgYzAtMi42NjMtMC44NTktNC44NTMtMi41NjgtNi41NjdjLTEuNzE0LTEuNzA5LTMuODk5LTIuNTY1LTYuNTY3LTIuNTY1SDEzNy4wNGMtMi42NjcsMC00Ljg1NCwwLjg1NS02LjU2NywyLjU2NSAgICBjLTEuNzExLDEuNzE0LTIuNTY4LDMuOTA0LTIuNTY4LDYuNTY3djE2NC40NTRjMCwyLjY2OSwwLjg1NCw0Ljg1MywyLjU2OCw2LjU3QzEzMi4xODYsMzQ2LjMxNiwxMzQuMzczLDM0Ny4xNzIsMTM3LjA0LDM0Ny4xNzJ6IiBmaWxsPSIjZmY5Y2FlIi8+CgkJPHBhdGggZD0iTTIxMC4xMjksMzQ3LjE3MmgxOC4yNzFjMi42NjYsMCw0Ljg1Ni0wLjg1NSw2LjU2NC0yLjU2N2MxLjcxOC0xLjcxOCwyLjU2OS0zLjkwMSwyLjU2OS02LjU3VjE3My41ODEgICAgYzAtMi42NjMtMC44NTItNC44NTMtMi41NjktNi41NjdjLTEuNzA4LTEuNzA5LTMuODk4LTIuNTY1LTYuNTY0LTIuNTY1aC0xOC4yNzFjLTIuNjY0LDAtNC44NTQsMC44NTUtNi41NjcsMi41NjUgICAgYy0xLjcxNCwxLjcxNC0yLjU2OCwzLjkwNC0yLjU2OCw2LjU2N3YxNjQuNDU0YzAsMi42NjksMC44NTQsNC44NTMsMi41NjgsNi41N0MyMDUuMjc0LDM0Ni4zMTYsMjA3LjQ2NSwzNDcuMTcyLDIxMC4xMjksMzQ3LjE3MnogICAgIiBmaWxsPSIjZmY5Y2FlIi8+CgkJPHBhdGggZD0iTTI4My4yMiwzNDcuMTcyaDE4LjI2OGMyLjY2OSwwLDQuODU5LTAuODU1LDYuNTctMi41NjdjMS43MTEtMS43MTgsMi41NjItMy45MDEsMi41NjItNi41N1YxNzMuNTgxICAgIGMwLTIuNjYzLTAuODUyLTQuODUzLTIuNTYyLTYuNTY3Yy0xLjcxMS0xLjcwOS0zLjkwMS0yLjU2NS02LjU3LTIuNTY1SDI4My4yMmMtMi42NywwLTQuODUzLDAuODU1LTYuNTcxLDIuNTY1ICAgIGMtMS43MTEsMS43MTQtMi41NjYsMy45MDQtMi41NjYsNi41Njd2MTY0LjQ1NGMwLDIuNjY5LDAuODU1LDQuODUzLDIuNTY2LDYuNTdDMjc4LjM2NywzNDYuMzE2LDI4MC41NSwzNDcuMTcyLDI4My4yMiwzNDcuMTcyeiIgZmlsbD0iI2ZmOWNhZSIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=) no-repeat;*/
}

.modal-header .close {
    padding: 0;
    margin: 0;
}

.modal-header .close {
    text-shadow: none;
}

.closebtn {
    background-color: #FF6666;
    height: 18px;
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 999;
    border: none;
    color: white;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    padding-top: 0px;
    cursor: pointer;
    border-radius: 50%;
}

app {
    /*position: relative;*/
    display: flex;
    flex-direction: column;
}

.dashboard-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

footer {
    padding-left: 1rem !important;
}

label {
    margin: 0.2rem !important;
}

td, th {
    vertical-align: inherit !important;
}

.table-danger tbody + tbody, .table-danger td, .table-danger th, .table-danger thead th {
    border: 1px solid #dee2e6 !important;
}

.image-navheader-responsive {
    max-width: 64px;
    width: 100%;
    height: auto;
    max-height: 36px;
}

.image-responsive {
    max-width: 300px;
    width: 100%;
    height: auto;
}

.table-responsive {
    display: flex !important;
    justify-content: center !important;
    overflow-x: unset !important;
}

.popover {
    width: max-content;
}

.column-time-totals {
    background-color: lightgreen !important;
}

.column-totals {
    background-color: yellowgreen !important;
}

.column-run-totals {
    background-color: coral !important;
}

.tab-content-custom {
   margin-top: 14px;
}

.table {
   color: inherit;
}

td.column-row-container {
    display: flex;
    align-content: space-around;
    align-items: center;
}

column-row-content {
    display: flex !important;
    align-content: center;
    align-items: center;
    justify-content: center;
}

.column-row-content-btn {
    max-width: 24px;
    max-height: 24.5px;
    width: 24px;
    height: 24.5px;
    font-size: small;
    display: flex;
    align-items: center;
    align-content: center;
    margin-left: 4px;
    justify-content: center;
}

.column-row-content-btn-single {
    max-width: 24px;
    max-height: 26px;
    width: 24px;
    height: 26px;
    display: flex;
    align-content: center;
    justify-content: center;
}

.sortable-handler {
    touch-action: none;
}

.footer {
    position: absolute;
    bottom: 0;
    width: calc(100% - 250px);
    height: 30px; /* Set the fixed height of the footer here */
    line-height: 30px; /* Vertically center the text there */
    background-color: #f5f5f5;
}

/*.container {
    width: auto;
    max-width: 680px;
    padding: 0 15px;
}*/

.top-row {
    height: 2.5rem;
    display: flex;
    align-items: center;
}

.navbar {
    padding: 0 !important;
}

.main {
    flex: 1;
}

    .main .top-row {
        justify-content: flex-end;
    }

        .main .top-row > a, .main .top-row .btn-link {
            white-space: nowrap;
            margin-left: 1.5rem;
        }

        .main .top-row a:first-child {
            overflow: hidden;
            text-overflow: ellipsis;
        }

.sidebar {
}

    .sidebar .top-row {
    }

    .sidebar .navbar-brand {
        font-size: 0.8rem;
    }

    .sidebar .oi {
        width: 2rem;
        font-size: 0.8rem;
        vertical-align: text-top;
        top: -2px;
    }

    .sidebar .nav-item {
        font-size: 0.8rem;
        padding-bottom: 0.5rem;
    }

        .sidebar .nav-item:first-of-type {
            padding-top: 1rem;
        }

        .sidebar .nav-item:last-of-type {
            padding-bottom: 1rem;
        }

        .sidebar .nav-item a {
            color: #d7d7d7;
            border-radius: 4px;
            height: 3rem;
            display: flex;
            align-items: center;
            line-height: 3rem;
        }

            .sidebar .nav-item a.active {
                background-color: rgba(255,255,255,0.25);
                color: white;
            }

            .sidebar .nav-item a:hover {
                background-color: rgba(255,255,255,0.1);
                color: white;
            }

.content {
    padding-top: 1.1rem;
}

.navbar-toggler {
    background-color: lightgray;
}

.navbar-dark .navbar-toggler {
    color: darkgrey;
    border-color: darkgrey;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.login-center {
    width: 400px;
    min-width: 270px;
    padding-right: 0.5px;
}

.drag-drop-zone {
    border: 3px dashed #329ac6;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #eee;
    box-shadow: inset 0 0 8px rgba(0,0,0,0.2);
    color: #aeaeae;
    font-size: 1rem;
    cursor: pointer;
    position: relative;
}

    .drag-drop-zone:hover {
        background-color: #f5f5f5;
    }

    .drag-drop-zone input[type=file] {
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
    }

.snackbar-body {
    white-space: normal !important;
    max-width: 300px !important;
    text-align: center !important;
}

@media (max-width: 767.98px) {
    .main .top-row:not(.auth) {
        /*display: none;*/
        width: 220px;
        justify-content: center;
    }

    .navImg {
        height: 32px !important;
    }

    .logoutBtn {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .main .top-row.auth {
        /*justify-content: space-between;*/
        max-height: 44px;
        padding-right: 0px !important;
        padding-left: 0px !important;
    }

    .main .top-row a, .main .top-row .btn-link {
        margin-left: 0;
    }

    .footer {
        width: 100%
    }
}

@media (min-width: 768px) and (min-height: 568px) {
    app {
        flex-direction: row;
    }

    .sidebar {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .main .top-row {
        position: sticky;
        top: 0;
    }

    .main > div {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }

    .navbar-toggler {
        display: none;
    }

    .sidebar .collapse {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }
}

.custom-steps-small .step-container {
    min-width: 1rem !important;
    max-width: 1rem !important;
}

.custom-steps-small .step-container .step-circle::before {
    width: 0.5rem !important;
}