/*
 * Structure and layout
 * 
 * simple flexbox for now
 */
.row { 
    display: flex; 
    gap: 16px; 
}
.row + .row { margin-top: 16px; }

/* legacy column widths */
.col { flex: 1; }
.col.wide { flex: 2; }         
.col.xwide { flex: 3; }
.col.xxwide { flex: 4; }
.col.xxxwide { flex: 6; }

/* new col widths */
.col1 { flex: 1; }
.col2 { flex: 2; }
.col3 { flex: 3; }
.col4 { flex: 4; }
.col5 { flex: 5; }
.col6 { flex: 6; }
.col7 { flex: 7; }
.col8 { flex: 8; }
.col9 { flex: 9; }


/* make column flexbox */
.col.flex {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.col.flex .fill { flex: 1; }


/* ordering */
.orderfirst { order: -100; }
.orderlast { order: 100; }
.order1 { order: 1; }
.order2 { order: 2; }
.order3 { order: 3; }
.order4 { order: 4; }
.order5 { order: 5; }
.order6 { order: 6; }

/* mobile */
@media (max-width: 430px) {
    .row:not(.mpreserve) { 
        flex-direction: column; 
    }  
    
    .row.tight { gap: 4px; }
    .col.tight { gap: 4px; }
    .wrapper {
        margin-top: 10px;
    }
    .hide-on-mobile {
        display: none;
    }
    
    .morderfirst { order: -100; }
    .morderlast { order: 100; }
    .morder1 { order: 1; }
    .morder2 { order: 2; }
    .morder3 { order: 3; }
    .morder4 { order: 4; }
    .morder5 { order: 5; }
    .morder6 { order: 6; }
}

/* seperator stuff */

.col.sep { flex: 0 0 0; }

@media (max-width: 600px) {
  .col.sep {
    border-left: none;
  }
}