.colorful-card{
    position: relative;
    width: 100%;
    &::before{
        height: 100%;
        width: 7px;
        top: 0;
        left: 0;
        position: absolute;
        content: '';
    }
    &.card-green::before{
        background-color: green;
    }
    &.card-darkgreen::before{
        background-color: #187311;
    }
    &.card-grey::before{
        background-color: grey;
    }
    &.card-red::before{
        background-color: red;
    }
    &.card-blue::before{
        background-color: blue;
    }
    &.card-orange::before{
        background-color: orange;
    }
    &.card-white::before{
        background-color: white;
    }
    &.card-yellow::before{
        background-color: yellow;
    }
}

.colorful-table{
    > td:first-child > div {
        position: relative;
    }
    >td:first-child > div::before{
        height: 100%;
        width: 3px;
        top: 0;
        left: 0;
        position: absolute;
        content: '';
    }
    &.table-green > td:first-child > div::before{
        background-color: green;
    }
    &.table-grey > td:first-child > div::before{
        background-color: grey;
    }
    &.table-red > td:first-child > div::before{
        background-color: red;
    }
    &.table-blue > td:first-child > div::before{
        background-color: blue;
    }
    &.table-orange > td:first-child > div::before{
        background-color: orange;
    }
    &.table-white > td:first-child > div::before{
        background-color: white;
    }
    &.table-yellow > td:first-child > div::before{
        background-color: yellow;
    }
}
