/*=======================================================================*/

/*                          Flex Options            

/*=======================================================================*/
.flex.space-between {justify-content: space-between;}
.flex.center-horizontally {align-content: center; align-items:center}
.flex.center-bottom {align-content: flex-end; align-items:flex-end}
.flex.flex-wrap {flex-wrap:wrap}

.flex {
    display: flex;
    flex-wrap: nowrap;
    flex-shrink: 0;
    width:100%;
}

.flex.width-auto {
    width:auto;
}

.flex .bigger {
    flex: 1 1 auto
}

.flex.center-horizontally {align-content: center; align-items:center}
.flex.center-bottom {align-content: flex-end; align-items:flex-end}

/* Align Self - can be applied individual items within a flex container  */
.align-self-auto {align-self: auto;}
.align-self-baseline {align-self: baseline;}
.align-self-center {align-self: center;}
.align-self-flex-start {align-self: flex-start;}
.align-self-flex-end {align-self: flex-end;}

/* Align Items */
.align-items-center {align-items: center;}
.align-items-stretch {align-items: stretch;}
.align-items-flex-start {align-items: flex-start;}
.align-items-flex-end {align-items: flex-end;}

/* Align Content */
.align-content-center {align-content: center;}
.align-content-stretch {align-content: stretch;}
.align-content-flex-start {align-content: flex-start;}
.align-content-flex-end {align-content: flex-end;}

/* Justify content within a flex container */
.space-around {justify-content: space-around;}
.space-between {justify-content: space-between;}
.space-evenly {justify-content: space-evenly;}
.flex-center {justify-content: center;}
.flex-start {justify-content: flex-start;}
.flex-end {justify-content: flex-end;}

/* Wrap  */
.flex-wrap {flex-wrap: wrap;}
.no-wrap {flex-wrap: nowrap;}

/* columns */
.two-columns > * {width:50%;}
.three-columns > * {width:33.333%;}
.four-columns > * {width:20%;}

/* Gap */
.gap-4 {gap:4px}
.gap-8 {gap:8px}
.gap-10 {gap:10px}
.gap-14 {gap:14px}
.gap-2em {gap:2em}

/* widths */
.flex .full-width {width: 100%;}
.flex .quarter {width: calc(25% - 0.75em);}
.flex .third {width: calc(33.333% - 0.6875em);}
.flex .half {width: calc(50% - 0.5em);}
.flex .two-thirds {width: calc(66.666% - 0.3125em);}
.flex .three-quarters {width: calc(75% - 0.25em);}

/* gap */
.gap-5 {gap: 0.3125em;}
.gap-5 > .quarter {width: calc(25% - 0.25em);}
.gap-5 > .third {width: calc(33.333% - 0.25em);}
.gap-5 > .half {width: calc(50% - 0.1875em);}
.gap-5 > .two-thirds {width: calc(66.666% - 0.0625em);}
.gap-5 > .three-quarters {width: calc(75% - 0.0625em);}

.gap-10 {gap: 0.625em;}
.gap-10 > .quarter {width: calc(25% - 0.5em);}
.gap-10 > .third {width: calc(33.333% - 0.4375em);}
.gap-10 > .half {width: calc(50% - 0.3125em);}
.gap-10 > .two-thirds {width: calc(66.666% - 0.1875em);}
.gap-10 > .three-quarters {width: calc(75% - 0.125em);}

.gap-15 {gap: 0.9375em;}
.gap-15 > .quarter {width: calc(25% - 0.75em);}
.gap-15 > .third {width: calc(33.333% - 0.625em);}
.gap-15 > .half {width: calc(50% - 0.5em);}
.gap-15 > .two-thirds {width: calc(66.666% - 0.3125em);}
.gap-15 > .three-quarters {width: calc(75% - 0.1875em);}

.gap-20 {gap: 1.43em;}
.gap-20 > .quarter {width: calc(25% - 1.125em);}
.gap-20 > .third {width: calc(33.333% - 1em);}
.gap-20 > .half {width: calc(50% - 0.75em);}
.gap-20 > .two-thirds {width: calc(66.666% - 0.4375em);}
.gap-20 > .three-quarters {width: calc(75% - 0.3125em);}

.gap-30 {gap: 1.875em;}
.gap-30 > .quarter {width: calc(25% - 1.4375em);}
.gap-30 > .third {width: calc(33.333% - 1.25em);}
.gap-30 > .half {width: calc(50% - 0.9375em);}
.gap-30 > .two-thirds {width: calc(66.666% - 0.625em);}
.gap-30 > .three-quarters {width: calc(75% - 0.4375em);}

.gap-40 {gap: 2.5em;}
.gap-40 > .quarter {width: calc(25% - 1.875em);}
.gap-40 > .third {width: calc(33.333% - 1.6875em);}
.gap-40 > .half {width: calc(50% - 1.25em);}
.gap-40 > .two-thirds {width: calc(66.666% - 0.8125em);}
.gap-40 > .three-quarters {width: calc(75% - 0.625em);}

.gap-50 {gap: 3.125em;}
.gap-50 > .quarter {width: calc(25% - 2.375em);}
.gap-50 > .third {width: calc(33.333% - 2.125em);}
.gap-50 > .half {width: calc(50% - 1.5625em);}
.gap-50 > .two-thirds {width: calc(66.666% - 1em);}
.gap-50 > .three-quarters {width: calc(75% - 0.75em);}





/*=======================================================================*/

/*                          DESKTOP STYLES            

/*=======================================================================*/

main .two-columns .white-box + .white-box {margin-top: 0;}

main .dashboardList li > strong {
    min-width: 200px;
    display: inline-block;
}

.white-box {
    background: #fff;
    padding:2em;
}
.white-box + .white-box {
    margin-top:1em;
}

output#list > div {
    display: flex;
    width: 100%;
    gap: 8px;
}

.repeater {
    display: flex;
    flex-wrap: wrap;
    gap:0.5em
}

.repeater label {
    width: calc(50% - 0.5em);
}