/*
 * Common css components
 */

:root {
    --color-A: 51, 105, 3;
    --color-B: 104, 159, 56;
    --color-C: 192, 202, 51;
    --color-D: 255, 202, 40;
    --color-E: 255, 160, 0;
}

.effort-level {
    color: #FFFFFF!important;
    border-radius: 0.3125rem!important;
}

.effort-level .loyer {
    border: 0;
    border-top-left-radius: 0.3125rem!important;
    border-bottom-left-radius: 0.3125rem!important;
}

.effort-level .rate {
    border: 0;
    border-top-right-radius: 0.3125rem!important;
    border-bottom-right-radius: 0.3125rem!important;
}

.bg-profile {
    background-color: rgba(4, 104, 101, 0.1); }

.bg-A {
    background-color: rgb(var(--color-A));
}

.bg-A-light {
    background-color: rgba(var(--color-A), 0.8);
}

.bg-B {
    background-color: rgb(var(--color-B));
}

.bg-B-light {
    background-color: rgba(var(--color-B), 0.8);
}

.bg-C {
    background-color: rgb(var(--color-C));
}

.bg-C-light {
    background-color: rgba(var(--color-C), 0.8);
}

.bg-D {
    background-color: rgb(var(--color-D));
}

.bg-D-light {
    background-color: rgba(var(--color-D), 0.8);
}

.bg-E {
    background-color: rgb(var(--color-E));
}

.bg-E-light {
    background-color: rgba(var(--color-E), 0.8);
}

.border-B {
    border-color: rgb(var(--color-B));
}


.tracking-item {
    border-left:1px solid #e5e5e5;
    position:relative;
    padding:2rem 1.5rem .5rem 2.5rem;
    font-size:.9rem;
    margin-left:3rem;
    min-height:5rem
}
.tracking-item:last-child {
    padding-bottom:4rem
}
.tracking-item .tracking-date {
    margin-top:.6rem
}
.tracking-item .tracking-date span {
    color:#888;
    font-size:85%;
    padding-left:.4rem
}
.tracking-item .tracking-content {
    padding:.5rem .8rem;
    background-color:#f4f4f4;
    border-radius:.5rem
}
.tracking-item .tracking-content span {
    display:block;
    color:#888;
    font-size:85%
}
.tracking-item .tracking-icon {
    line-height:2.6rem;
    position:absolute;
    left:-1.3rem;
    width:2.6rem;
    height:2.6rem;
    text-align:center;
    border-radius:50%;
    font-size:1rem;
    background-color:#fff;
    color:#fff
}

@media(min-width:992px) {
    .tracking-item {
        margin-left:10rem
    }
    .tracking-item .tracking-date {
        position:absolute;
        left:-10rem;
        width:7.5rem;
        text-align:right
    }
    .tracking-item .tracking-date span {
        display:block
    }
    .tracking-item .tracking-content {
        padding:0;
        background-color:transparent
    }
}