.card {
    background: $white;    
    margin-bottom: 30px;
    transition: .5s;    
    border: 0;
    border-radius: $border-radius-large;
    @extend .inlineblock;
    position: relative;
    width: 100%;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1);
    
    .card-inside-title {
        @extend .m-t-25;
        @extend .m-b-15;
        @extend .displayblock;
        font-size: 15px;
        color: $black;
        small {
            color: $grey-500;
            @extend .displayblock;
            font-size: 11px;
            @extend .m-t-5;
            a {
                color: $grey-600;
                font-weight: $font-weight-bold;
            }
        }
    }
    
    .bg-red,
    .bg-pink,
    .bg-purple,
    .bg-deep-purple,
    .bg-indigo,
    .bg-blue,
    .bg-light-blue,
    .bg-cyan,
    .bg-teal,
    .bg-green,
    .bg-light-green,
    .bg-lime,
    .bg-yellow,
    .bg-amber,
    .bg-orange,
    .bg-deep-orange,
    .bg-brown,
    .bg-grey,
    .bg-blue-grey,
    .bg-blush,
    .bg-black{
        color: $white !important;
        h2,
        small,{
            color: $white !important;
        }
        .badge {
            background-color: $white;
            color: $grey-800;
        }
    }
    &.bg-dark{
        background: #191f28 !important;
        .table td, .table th{
            border-top: 1px solid #232b38;
            color: $grey-500;
        }
        .btn-neutral{
            background-color:transparent;
            color: $white;
            &:focus{
                background-color:transparent;
            }
        }
    }

    .header {
        color: $grey-800;
        padding:20px;
        position: relative;       
        box-shadow: none;
        @extend .m-b-0;

        .header-dropdown {
            position: absolute;
            top: 14px;
            right:10px;
            list-style: none;
            @extend .margin-0;
            @extend .padding-0;
            li{
                @extend .inlineblock;
                a{
                    padding: 5px 10px;
                    @extend .displayblock;
                }

                .dropdown-menu {                    
                    border-radius: $border-radius-large;
                    overflow: hidden;
                    li {
                        display: block !important;
    
                        a {
                            padding:10px;
                            border-radius: $border-radius-small;
                        }
                    }
                }
    
            }            
            i {
                font-size: 20px;
                color: $grey-500;
                @include transition(all .5s);
                &:hover {
                    color: $black;
                }
            }
        }
        h2 {
            @extend .margin-0;
            font-size: 15px;            
            color: $grey-600;
            position: relative;

            &::before{
                position: absolute;
                width: 20px;
                height: 1px;
                left: 0;
                top: -20px;
                content: '';
            }

            small {
                @extend .displayblock;
                font-size: 13px;
                @extend .m-t-5;
                color: $grey-600;
                line-height: 15px;

                a {
                    font-weight: bold;
                    color: $grey-600;
                }
            }
        }
    }

    .p-15 {
        padding: 15px !important;
    }

    .body {
        font-size: 14px;
        color: $grey-800;
        padding: 20px;
        font-weight: 400; 
    }
}
.col-white{ color: $white !important;}

@media only screen and (max-width: 767px) {
    .card{
        .header{
            padding: 15px;

            h2{
                margin-right: 50px !important;
            }
            .header-dropdown{
                top: 10px;
            }
        }
        .body{
            padding: 15px;
        }
    }
}