.type-action {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 26px;
    height: 26px;
    padding: 0px 4px;
    border-radius: 4px;
    color: white !important;

    /* OUTBOUND */
    &.type-blue {
        background-color: #3498db;
    }
    &.type-dark-blue {
        background-color: #1675b3;
    }
    &.type-green {
        background-color: #2ecc71;
    }
    &.type-turquoise {
        background-color: #1abc9c;
    }
    &.type-yellow {
        background-color: #f1c40f;
        color: #777777 !important;
    }
    &.type-purple {
        background-color: #9b59b6;
    }
    &.type-orange {
        background-color: #e67e22;
    }
    &.type-light-green {
        background-color: #27ae60;
    }
    &.type-blue-green {
        background-color: #16a085;
    }
    &.type-red {
        background-color: #e74c3c;
    }
    &.type-dark-green {
        background-color: #229954;
    }

    /* INBOUND */
    &.type-light-turquoise {
        background-color: #85c1e9;
        color: #777777 !important;
    }
    &.type-light-yellow {
        background-color: #f9e79f;
        color: #777777 !important;
    }
    &.type-light-purple {
        background-color: #b399d4;
        color: #666666 !important;
    }
    &.type-light-orange {
        background-color: #fad7a0;
        color: #777777 !important;
    }
    &.type-very-light-green {
        background-color: #a3e4d7;
        color: #777777 !important;
    }
    &.type-light-blue-green {
        background-color: #a2d9ce;
        color: #777777 !important;
    }
    &.type-medium-green {
        background-color: #82e0aa;
        color: #777777 !important;
    }
}

.modal-title .type-action {
    display: inline-flex;
    width: 24px;
    height: 24px;
    margin-right: .25rem;
}

.list-group-item .type-action {
    width: 24px;
    height: 24px;
}