.card {
    /* Add shadows to create the "card" effect */
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    }

    /* On mouse-over, add a deeper shadow */
    .card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
    }

    /* Add some padding inside the card container */
    .container {
        padding: 2px 16px;
    }

    .card {
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
        transition: 0.3s;
        border-radius: 5px; /* 5px rounded corners */
        margin-bottom: 20px;
    }

    .card b{
        font-size: 12px;
    }

    .card p{
        font-size: 10px;
    }

    /* Add rounded corners to the top left and the top right corner of the image */
    img {
        border-radius: 5px 5px 0 0;
    }

    #search {
        background-image: url('sbadmin/images/icons/searchicon.png'); /* Add a search icon to input */
        background-position: 10px 12px; /* Position the search icon */
        background-repeat: no-repeat; /* Do not repeat the icon image */
        width: 100%; /* Full-width */
        font-size: 16px; /* Increase font-size */
        padding: 12px 20px 12px 40px; /* Add some padding */
        border: 1px solid #ddd; /* Add a grey border */
        margin-bottom: 12px; /* Add some space below the input */
    }

    .card-mask {
        width: 100%;
        height: 175px;
        overflow: hidden;
        /* Magic */
        display: flex;
        align-items: center; /* vertical */
        justify-content: center; /* horizontal */
        background-color: #000;
    }

    .card .button {
        border: none;
        outline: 0;
        padding: 12px;
        color: white;
        background-color: #000;
        text-align: center;
        cursor: pointer;
        width: 100%;
        font-size: 12px;
    }

    .card .color-edit{
        background-color:#00857f
    }


    .card .color-remove{
        background-color: #d43f3a
    }

    .card .button:hover {
        opacity: 0.7;
    }