.smi-card {
    position: relative;
    display: flex;
    flex-direction: column;
    word-wrap: break-word;
    color: #ffffff;
    border: 2px solid;
    border-radius: 20px;
    cursor: pointer;
    height: 150px;
    width: 150px;
}

/* Card Blue */
.card-blue {
    background: rgb(237, 246, 255);
    border-color: rgb(183, 217, 248);
}

.card-blue * {
    color: rgb(0, 87, 180);
}

/* Card Red */
.card-red {
    background: rgb(255, 235, 238);
    border-color: rgb(248, 113, 117);
}

.card-red * {
    color: rgb(204, 0, 0);
}

/* Card Green */
.card-green {
    background: rgb(232, 255, 237);
    border-color: rgb(125, 215, 29);
}

.card-green * {
    color: rgb(34, 139, 34);
}

/* Card Orange */
.card-orange {
    background: rgb(255, 243, 224);
    border-color: rgb(255, 173, 66);
}

.card-orange * {
    color: rgb(255, 140, 0);
}

/* Card Purple */
.card-purple {
    background: rgb(238, 229, 255);
    border-color: rgb(176, 131, 248);
}

.card-purple * {
    color: rgb(92, 46, 166);
}

/* Card Grey */
.card-grey {
    background: rgb(240, 240, 240);
    border-color: rgb(215, 215, 215);
}

.card-grey * {
    color: rgb(175, 175, 175);
}

.smi-card i {
    font-size: 3em;
}

.smi-card:hover {
    color: rgb(0, 0, 0);
    text-decoration: none;
}

.cursor-move {
    cursor: move;
}

.cursor-not-allowed {
    cursor: not-allowed;
}

.delete-button {
    position: absolute;
    top: 8px;
    right: 10px;
    color: white;
}

.delete-button:hover {
    color: black;
    cursor: pointer;
}

.delete-button i {
    font-size: 20px;
}

.smi-back-button {
    border-right: 1px solid #a4b7c1;
    width: 50px;
    height: 50px;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
    padding: 0.75rem 0 0.75rem 0;
}

.pl-70 {
    padding-left: 70px;
}

.smi-action-btn {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0px !important;
    height: 50px !important;
}