.flex { display: flex !important; }
.flex-mobile { @include mobile { display: flex !important; } }
.flex-tablet { @include tablet { display: flex !important; } }
.flex-desktop { @include desktop { display: flex !important; } }

.flex-column { @extend .flex; flex-direction: column !important; }
.flex-column-mobile { @include mobile { display: flex !important; flex-direction: column !important; } }
.flex-column-tablet { @include tablet { display: flex !important; flex-direction: column !important; } }
.flex-column-desktop { @include desktop { display: flex !important; flex-direction: column !important; } }
.flex-column-not-desktop { @include not-desktop { display: flex !important; flex-direction: column !important; } }

.flex-column-reverse { @extend .flex; flex-direction: column-reverse !important; }
.flex-column-reverse-mobile { @include mobile { display: flex !important; flex-direction: column-reverse !important; } }
.flex-column-reverse-tablet { @include tablet { display: flex !important; flex-direction: column-reverse !important; } }
.flex-column-reverse-desktop { @include desktop { display: flex !important; flex-direction: column-reverse !important; } }
.flex-column-reverse-not-desktop { @include not-desktop { display: flex !important; flex-direction: column-reverse !important; } }

.flex-row-reverse { @extend .flex; flex-direction: row-reverse !important; }
.flex-row-reverse-mobile { @include mobile { display: flex !important; flex-direction: row-reverse !important; } }
.flex-row-reverse-tablet { @include tablet { display: flex !important; flex-direction: row-reverse !important; } }
.flex-row-reverse-desktop { @include desktop { display: flex !important; flex-direction: row-reverse !important; } }
.flex-row-reverse-not-desktop { @include not-desktop { display: flex !important; flex-direction: row-reverse !important; } }

.flex-align-items-center { align-items: center; }

.flex-grow { flex-grow: 1 !important; }
.flex-column { @extend .flex; flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-row    { @extend .flex; flex-direction: row !important; flex-wrap: wrap !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-start  { justify-content: flex-start !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-end    { justify-content: flex-end !important; }
.justify-content-space-between    { justify-content: space-between !important; }
.justify-content-space-around    { justify-content: space-around !important; }
.justify-content-space-evenly    { justify-content: space-evenly !important; }

.order-1  { order:  1 !important; }
.order-2  { order:  2 !important; }
.order-3  { order:  3 !important; }
.order-4  { order:  4 !important; }
.order-5  { order:  5 !important; }
.order-6  { order:  6 !important; }
.order-7  { order:  7 !important; }
.order-8  { order:  8 !important; }
.order-9  { order:  9 !important; }
.order-10 { order: 10 !important; }
.order-11 { order: 11 !important; }
.order-12 { order: 12 !important; }

.flex-basis-0   { flex-basis: 0% !important; }
.flex-basis-25  { flex-basis: 25% !important; }
.flex-basis-33  { flex-basis: 33.33333% !important; }
.flex-basis-40  { flex-basis: 40% !important; }
.flex-basis-50  { flex-basis: 50% !important; }
.flex-basis-60  { flex-basis: 60% !important; }
.flex-basis-66  { flex-basis: 66.66667% !important; }
.flex-basis-75  { flex-basis: 75% !important; }
.flex-basis-100 { flex-basis: 100% !important; }

.flex-basis-0-desktop   { @include desktop { flex-basis: 0% !important; } }
.flex-basis-25-desktop  { @include desktop { flex-basis: 25% !important; } }
.flex-basis-33-desktop  { @include desktop { flex-basis: 33.33333% !important; } }
.flex-basis-50-desktop  { @include desktop { flex-basis: 50% !important; } }
.flex-basis-66-desktop  { @include desktop { flex-basis: 66.66667% !important; } }
.flex-basis-75-desktop  { @include desktop { flex-basis: 75% !important; } }
.flex-basis-100-desktop { @include desktop { flex-basis: 100% !important; } }

.align-self-start  { align-self: flex-start !important; }
.align-self-center { align-self: center !important; }
.align-self-end    { align-self: flex-end !important; }
.align-self-baseline    { align-self: baseline !important; }