:root{
    --ft-row-padding:10px;
    --ft-header-font-size: 1rem;
    --ft-header-padding: var(--ft-row-padding);
    --ft-header-height: calc(var(--ft-header-font-size) + (var(--ft-header-padding) * 2));
}
.ft {
    height:fit-content;
    width:100%;
    display:flex;
    flex-direction: column;
    gap:10px;
}

.ft-row {
    padding:10px;
    padding:var(--ft-row-padding);
    display:flex;
    flex-direction: row;
    border-radius: 3px;
    gap:2rem;
}

.ft-cell{
    flex: 1 1 0;
    overflow-wrap: normal;
    /* word-break: break-all; */
    /* align-content: center; */
    text-align:left;
    /* display:flex;
    flex-direction: column;
    gap:.5rem; */
}

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

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

.ft-header{
    position:sticky;
    top:0;
    z-index: 9;
}
.ft-header2{
    position:sticky;
    top:var(--ft-header-height);
    z-index: 8;
}

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

.ft-header.shadow-table{
    /* box-shadow: none; */
    background-color: rgb(229,229,229);
    /* color:black; */
}
.ft-header2.shadow-table{
    background-color: rgb(255,255,255);
    box-shadow: none;
    border-bottom:2px solid rgb(229,229,229);
    font-weight: bold;
    margin:5px -8px -10px -8px ;
}

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

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

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

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

    .ft-row.ft-header2{
        top:0;
    }
}