/*
    Utility classes, for example a class that removes the default list style for lists we're going to display as flex items or in some other way. 
    If you have a few things you know you will want to apply to lots of different elements, they can come in this section:

    Example: 
    .nobullets {
          list-style: none;
          margin: 0;
          padding: 0;
        }

    You are encouraged to use BEM syntax
    https://www.webtips.dev/10-best-practices-for-quickly-improving-your-css

*/


.lbf-test-border {
    border-style: solid;
    border: 10px 10px 10px 10px;
    border-color: red;
}

.lbf-test-margin {
    margin-left: 3rem;
    margin-right: 3rem;
}

.lbf-spinner-class {
    top: 30vh;
    left: 0px;
    position: absolute;
    background-color: lightgray;
    height: 15vh;
    width: 100vw;
    vertical-align: middle;
    justify-content:center;
}

.lbf-vertical_center {
    vertical-align: middle;
}

.lbf-space-top-05 {
    margin-top: 0.5rem;
    flex: 1 1 auto;
}

.lbf-space-top-1 {
    margin-top: 1rem;
    flex:1 1 auto;
}

.lbf-space-top-2 {
    margin-top: 2rem;
    flex: 1 1 auto;
}

.lbf-space-top-3 {
    margin-top: 3rem;
    flex: 1 1 auto;
}
.lbf-space-top-4 {
    margin-top: 4rem;
    flex: 1 1 auto;
}
.lbf-space-top-5 {
    margin-top: 5rem;
    flex: 1 1 auto;
}

.lbf-space-bottom-1 {
    margin-bottom: 1rem;
    flex: 1 1 auto;
}

.lbf-text-center-vertically {
    /**/
    text-align: center;
    position: relative;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
}


.inline-block {
    display: inline-block;
}


.work-status {
    margin-right: 0.3rem;
    font-size: 0.9rem;
}

.work-status-small {
    font-size: 0.9rem;
}

.work-status-large {
    font-size: 1.3rem;
    font-weight: bold;
}

.work-done {
    color: #29845E;
}

.work-inprogress {
    color: #fc9932
}

.work-missing {
    color: #de2d1b
}

.loading {
    background-image: linear-gradient(to right, transparent 50%, rgba(0, 0, 0, .05) 50%);
    background-size: 200% 100%;
    animation: loading 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    opacity: .45;
    pointer-events: none;
}

@keyframes loading {
    0% {
        background-position: 0;
    }

    25% {
        background-position: -25%;
    }

    50% {
        background-position: -50%;
    }

    75% {
        background-position: -75%;
    }


    100% {
        background-position: -100%;
    }
}