.play-card {
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    cursor: default;
}

.play-card:hover {
    transform: translateY(-5px);
}

.size-flow-card-body {
    min-width: 98%;
}

/* .flow-step {
    min-width: 150px;
    min-height: 80px;
    border: 2px solid #0d6efd;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
} */

.flow-step {
    min-width: 100px;
    min-height: 50px;
    /* border: 2px solid #198754;   */
    border: 2px solid #4E2E80;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 5px;
    padding: 10px;
    user-select: none;

    
}

.flow-step.active {
    /* background-color: #198754; */
    /* color: #fff; */
    background: #4E2E80;
    background: linear-gradient(-45deg, rgba(78, 46, 128, 1) 27%, rgba(55, 63, 152, 1) 90%, rgba(235, 34, 39, 1) 100%);
    color: white;
}

.connector {
    width: 40px;
    height: 3px;
    background-color: #6c757d;
}