.ft {
    height:fit-content;
    width:100%;
    display:flex;
    flex-direction: column;
    gap:10px;
}

/* .ft-header{
    
} */

.ft-row {
    padding:10px;
    display:flex;
    flex-direction: row;
    gap:2rem;
}

.ft-cell{
    flex: 1 1 0;
    overflow-wrap: normal;
    align-content: center;
    text-align:left;
}

.ft-header.shadow-table{
    background-color: rgb(229,229,229);
}

.ft-row.shadow-table{
    box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.3);
    border-radius: 3px;
}

/* doesn't show on desktop, the default */
.ft-cell .ft-header{
    display:none;
    /* negative of ft-row padding */
    /* margin: 0 -10px; */
    font-weight: bold;
}

@media (max-width: 500px) {
    .ft-row{
        flex-direction: column;
        gap:1rem;
        /* padding-top:0; */
    }

    .ft-cell{
        gap:1rem;
        display:flex;
        flex-direction: row;
    }

    .ft-row.ft-header{
        text-align: center;
        display:none;
    }

    .ft-cell .ft-header{
        text-align: center;
        display:block;
    } 

    .ft-cell .button2{
        margin: 0;
    }

}

.ft-wrap{
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap:.5rem;
}