$color_primary : #007bff ; $color_secondary : #6c757d ; $color_success : #28a745 ; $color_danger : #dc3545 ; $color_warning : #ffc107 ; $color_info : #17a2b8 ; $color_light : #f8f9fa ; $color_dark : #343a40 ; $color_white : #fff ; $color_transparent : transparent ; div.card { margin-top: 1rem; margin-bottom: 1rem; box-sizing: border-box; overflow-wrap: break-word; width: 100%; border-radius: 4px 4px 4px 4px; border: 1px solid rgba(0, 0, 0, 0.125); font-size: 14px; }/*div.card*/ .card-header { box-sizing: border-box; overflow-wrap: break-word; background-color: $color_light ; border-bottom: 1px solid rgba(0, 0, 0, 0.125); border-left: 0px none rgb(33, 37, 41); border-radius: 3px 3px 0 0; padding: 12px 20px; &.info{ color: white; a{color: white; } background-color: $color_info; border-color: $color_info; } &.primary{ color: white; a{color: white; } background-color: $color_primary; border-color: $color_primary; } &.success{ color: white; a{color: white; } background-color: $color_success; border-color: $color_success; } &.warning{ color: black; a{color: black; } background-color: $color_warning; border-color: $color_warning; } &.danger{ color: white; a{color: white; } background-color: $color_danger; border-color: $color_danger; } }/*.card-header*/ .card-body { box-sizing: border-box; overflow-wrap: break-word; padding: 20px; }/*.card-body*/ .card-text { box-sizing: border-box; overflow-wrap: break-word; margin: 0px; }/*.card-text*/ .card-footer { box-sizing: border-box; color: rgb(108, 117, 125); overflow-wrap: break-word; background: rgba(0, 0, 0, 0.03) none repeat scroll 0% 0% / auto padding-box border-box; border-top: 1px solid rgba(0, 0, 0, 0.125); border-right: 0px none rgb(108, 117, 125); border-bottom: 0px none rgb(108, 117, 125); border-left: 0px none rgb(108, 117, 125); border-radius: 0 0 3px 3px; padding: 12px 20px; }/*.card-footer*/