.s-flex        { display:flex; }
.s-flex-ta-tl  { align-items: start;  justify-content: start;  }
.s-flex-ta-tc  { align-items: start;  justify-content: center; }
.s-flex-ta-tr  { align-items: start;  justify-content: end;    }
.s-flex-ta-cl  { align-items: center; justify-content: start;  }
.s-flex-ta-cc  { align-items: center; justify-content: center; }
.s-flex-ta-cr  { align-items: center; justify-content: end;    }
.s-flex-ta-bl  { align-items: end;    justify-content: start;  }
.s-flex-ta-bc  { align-items: end;    justify-content: center; }
.s-flex-ta-br  { align-items: end;    justify-content: end;    }
.s-flex-row-wrap  { flex-flow:row wrap; }
.s-flex-col-wrap  { flex-flow:column wrap; }
.s-flex-row-nowrap{ flex-flow:row nowrap; }
.s-flex-col-nowrap{ flex-flow:column nowrap; }

.s-vbox-wrap{
    display:flex;
    flex-flow: column wrap;
}
.s-hbox-wrap{
    display:flex;
    flex-flow: row wrap;
}
.s-vbox{
    display:flex;
    flex-flow:column nowrap;
}
.s-hbox{
    display:flex;
    flex-flow:row nowrap;
}
.s-vbox-flex,
.s-vbox-grow{ 
    display:flex;
    flex-flow:column nowrap;
}
.s-hbox-flex,
.s-hbox-grow{ 
    display:flex;
    flex-flow:row nowrap;
}
.s-vbox-flex > .s-noresize,
.s-hbox-flex > .s-noresize,
.s-vbox-grow > .s-noresize,
.s-hbox-grow > .s-noresize{ flex:none;flex-grow:0; flex-shrink: 0;}
.s-vbox-flex > *:not(.s-noresize),
.s-hbox-flex > *:not(.s-noresize){ flex:1; }
.s-vbox-grow > *:not(.s-noresize),
.s-hbox-grow > *:not(.s-noresize){ flex-grow:1; flex-shrink: 1;}

.s-flat-box{
    display:flex;
    background-color: rgba(212 212 212 / 35%);
    line-height:1em;
    flex-direction: column;
    flex-wrap: nowrap;
    font-weight:bold;
    margin:4px;
    padding:4px;
    border-radius:3px;
    /* border:1px solid #ccc; */
    /* background:#fefefe;
    border-right:1px solid #eee;
    border-bottom:1px solid #eee; */
    -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none;
}
.s-flat-box>div{
    align-self: center;
    text-align: center;
    flex: 1;
}