:root {
    --green                : #4CAF50;
    --light-blue           : #29b9f7;
    --blue                 : #3F51B5;
    --gray                 : #AAA;
    --yellow               : #f57c00;

    --icon-background-fade : #ffffffc0;
    --body-background      : #e0e0e0;

    --avatar-size          : 2.5em;
}

body {
    justify-content  : center;
}

/* Demo requires horizontal scroll to make sense */
#container {
    max-width : 2560px;
}

.b-grid-cell,
.b-grid-header.b-depth-0 {
    padding : 0 1em;
}

/* No special background on checkbox column */
.b-grid-cell.b-checkbox-selection {
    background : none;
}

.b-percent-bar-cell .b-percent-bar-outer {
    border-radius : .5em;
    overflow      : hidden;
    height        : .7em;

    .b-percent-bar {
        background-color : var(--light-blue);
    }
}

div[data-column="cost"] {
    justify-content : space-between;

    /* The up/down arrow next to cost amount */
    .change-indicator {
        margin-inline-end : .5em;

        &.fa-caret-up {
            color : red;
        }

        &.fa-caret-down {
            color : var(--green);
        }
    }
}

.badge {
    border-radius : 1em;
    padding       : 0.4em 0.8em;
    color         : #fff;
    text-align    : center;
    min-width     : 6em;
}

.b-completed {
    opacity : 0.5;
}

.b-grid-cell[data-column="icon"] {
    .category-icon {
        font-size         : 1.2em;
        margin-inline-end : .3em;
        background        : currentColor linear-gradient(var(--icon-background-fade), var(--icon-background-fade));
        border-radius     : 50%;
        width             : 2em;
        height            : 2em;
        align-items       : center;
        display           : flex;
        justify-content   : center;

        &.fa-pencil-ruler {
            color : var(--gray);
        }

        &.fa-paint-roller {
            color : var(--green);
        }

        &.fa-fan {
            color : var(--blue);
        }

        &.fa-fire {
            color : var(--light-blue);
        }

        &.fa-broom {
            color : #795548;
        }

        &.fa-bolt {
            color : var(--yellow);
        }

        &.fa-elevator {
            color : #555;
        }
    }
}