/*
    MicroCSS 0.1
*/

:root {
    --step-1: 0.25rem;
    --step-2: calc(2 * var(--step-1));
    --step-3: calc(3 * var(--step-1));
    --step-4: calc(4 * var(--step-1));
    --step-5: calc(5 * var(--step-1));
    --step-6: calc(6 * var(--step-1));
    --step-7: calc(7 * var(--step-1));
    --step-8: calc(8 * var(--step-1));
}

/** Flex **/

.fx,
.fx-wrap,
.fx-column,
.fv-start,
.fx-start,
.fh-start,
.fh-center,
.fv-center,
.fx-center,
.fh-end,
.fv-end,
.fx-end,
.fh-between,
.fv-stretch {
    display: flex;
}

.fx-wrap {
    flex-wrap: wrap;
}

.fx-column {
    flex-direction: column;
}

.fh-center,
.fx-center {
    justify-content: center;
}

.fv-center,
.fx-center {
    align-items: center;
}

.fh-start,
.fx-start {
    justify-content: flex-start;
}

.fv-start,
.fx-start {
    align-items: flex-start;
}

.fh-end,
.fx-end {
    justify-content: end;
}

.fv-end,
.fx-end {
    align-items: end;
}

.fv-stretch {
    align-items: stretch;
}

.fh-between {
    justify-content: space-between;
}

.fx-grow {
    flex-grow: 1;
}

.fx-zero {
    flex-grow: 0;
}

/** Margin **/

.m-25 {
    margin: var(--step-1);
}

.m-50 {
    margin: var(--step-2);
}

.m-75 {
    margin: var(--step-3);
}

.m-100 {
    margin: var(--step-4);
}

.m-125 {
    margin: var(--step-5);
}

.m-150 {
    margin: var(--step-6);
}

.m-175 {
    margin: var(--step-7);
}

.m-200 {
    margin: var(--step-8);
}

.mt-25,
.my-25 {
    margin-top: var(--step-1);
}

.mt-50,
.my-50 {
    margin-top: var(--step-2);
}

.mt-75,
.my-75 {
    margin-top: var(--step-3);
}

.mt-100,
.my-100 {
    margin-top: var(--step-4);
}

.mt-125,
.my-125 {
    margin-top: var(--step-5);
}

.mt-150,
.my-150 {
    margin-top: var(--step-6);
}

.mt-175,
.my-175 {
    margin-top: var(--step-7);
}

.mt-200,
.my-200 {
    margin-top: var(--step-8);
}

.mb-25,
.my-25 {
    margin-bottom: var(--step-1);
}

.mb-50,
.my-50 {
    margin-bottom: var(--step-2);
}

.mb-75,
.my-75 {
    margin-bottom: var(--step-3);
}

.mb-100,
.my-100 {
    margin-bottom: var(--step-4);
}

.mb-125,
.my-125 {
    margin-bottom: var(--step-5);
}

.mb-150,
.my-150 {
    margin-bottom: var(--step-6);
}

.mb-175,
.my-175 {
    margin-bottom: var(--step-7);
}

.mb-200,
.my-200 {
    margin-bottom: var(--step-8);
}

.ml-25,
.mx-25 {
    margin-left: var(--step-1);
}

.ml-50,
.mx-50 {
    margin-left: var(--step-2);
}

.ml-75,
.mx-75 {
    margin-left: var(--step-3);
}

.ml-100,
.mx-100 {
    margin-left: var(--step-4);
}

.ml-125,
.mx-125 {
    margin-left: var(--step-5);
}

.ml-150,
.mx-150 {
    margin-left: var(--step-6);
}

.ml-175,
.mx-175 {
    margin-left: var(--step-7);
}

.ml-200,
.mx-200 {
    margin-left: var(--step-8);
}

.mr-25,
.mx-25 {
    margin-right: var(--step-1);
}

.mr-50,
.mx-50 {
    margin-right: var(--step-2);
}

.mr-75,
.mx-75 {
    margin-right: var(--step-3);
}

.mr-100,
.mx-100 {
    margin-right: var(--step-4);
}

.mr-125,
.mx-125 {
    margin-right: var(--step-5);
}

.mr-150,
.mx-150 {
    margin-right: var(--step-6);
}

.mr-175,
.mx-175 {
    margin-right: var(--step-7);
}

.mr-200,
.mx-200 {
    margin-right: var(--step-8);
}

/** Height **/

.h-25p {
    height: 25%;
}

.h-50p {
    height: 50%;
}

.h-75p {
    height: 75%;
}

.h-100p {
    height: 100%;
}

/** Max-height **/

.mh-10vh {
    max-height: 10vh;
}

.mh-20vh {
    max-height: 20vh;
}

.mh-30vh {
    max-height: 30vh;
}

.mh-40vh {
    max-height: 40vh;
}

.mh-50vh {
    max-height: 50vh;
}

.mh-60vh {
    max-height: 60vh;
}

.mh-70vh {
    max-height: 70vh;
}

.mh-80vh {
    max-height: 80vh;
}

.mh-90vh {
    max-height: 90vh;
}

.mh-100vh {
    max-height: 100vh;
}

/** Gap **/

.g-0 {
    gap: 0;
}

.g-25 {
    gap: var(--step-1);
}

.g-50 {
    gap: var(--step-2);
}

.g-75 {
    gap: var(--step-3);
}

.g-100 {
    gap: var(--step-4);
}

.g-125 {
    gap: var(--step-5);
}

.g-150 {
    gap: var(--step-6);
}

.g-175 {
    gap: var(--step-7);
}

.g-200 {
    gap: var(--step-8);
}

/** Overflow **/

.of-hidden,
.ofx-hidden {
    overflow-x: hidden;
}

.of-auto,
.ofx-auto {
    overflow-x: auto;
}

.of-hidden,
.ofy-hidden {
    overflow-y: hidden;
}

.of-auto,
.ofy-auto {
    overflow-y: auto;
}

/** Padding **/

.p-25 {
    padding: var(--step-1);
}

.p-50 {
    padding: var(--step-2);
}

.p-75 {
    padding: var(--step-3);
}

.p-100 {
    padding: var(--step-4);
}

.p-125 {
    padding: var(--step-5);
}

.p-150 {
    padding: var(--step-6);
}

.p-175 {
    padding: var(--step-7);
}

.p-200 {
    padding: var(--step-8);
}

.pt-25,
.py-25 {
    padding-top: var(--step-1);
}

.pt-50,
.py-50 {
    padding-top: var(--step-2);
}

.pt-75,
.py-75 {
    padding-top: var(--step-3);
}

.pt-100,
.py-100 {
    padding-top: var(--step-4);
}

.pt-125,
.py-125 {
    padding-top: var(--step-5);
}

.pt-150,
.py-150 {
    padding-top: var(--step-6);
}

.pt-175,
.py-175 {
    padding-top: var(--step-7);
}

.pt-200,
.py-200 {
    padding-top: var(--step-8);
}

.pb-25,
.py-25 {
    padding-bottom: var(--step-1);
}

.pb-50,
.py-50 {
    padding-bottom: var(--step-2);
}

.pb-75,
.py-75 {
    padding-bottom: var(--step-3);
}

.pb-100,
.py-100 {
    padding-bottom: var(--step-4);
}

.pb-125,
.py-125 {
    padding-bottom: var(--step-5);
}

.pb-150,
.py-150 {
    padding-bottom: var(--step-6);
}

.pb-175,
.py-175 {
    padding-bottom: var(--step-7);
}

.pb-200,
.py-200 {
    padding-bottom: var(--step-8);
}

.pl-25,
.px-25 {
    padding-left: var(--step-1);
}

.pl-50,
.px-50 {
    padding-left: var(--step-2);
}

.pl-75,
.px-75 {
    padding-left: var(--step-3);
}

.pl-100,
.px-100 {
    padding-left: var(--step-4);
}

.pl-125,
.px-125 {
    padding-left: var(--step-5);
}

.pl-150,
.px-150 {
    padding-left: var(--step-6);
}

.pl-175,
.px-175 {
    padding-left: var(--step-7);
}

.pl-200,
.px-200 {
    padding-left: var(--step-8);
}

.pr-25,
.px-25 {
    padding-right: var(--step-1);
}

.pr-50,
.px-50 {
    padding-right: var(--step-2);
}

.pr-75,
.px-75 {
    padding-right: var(--step-3);
}

.pr-100,
.px-100 {
    padding-right: var(--step-4);
}

.pr-125,
.px-125 {
    padding-right: var(--step-5);
}

.pr-150,
.px-150 {
    padding-right: var(--step-6);
}

.pr-175,
.px-175 {
    padding-right: var(--step-7);
}

.pr-200,
.px-200 {
    padding-right: var(--step-8);
}

/** Font-size **/
.fs-25 {
    font-size: var(--step-1);
}

.fs-50 {
    font-size: var(--step-2);
}

.fs-75 {
    font-size: var(--step-3);
}

.fs-80 {
    font-size: 0.80rem;
}

.fs-85 {
    font-size: 0.85rem;
}

.fs-90 {
    font-size: 0.90rem;
}

.fs-90 {
    font-size: 0.95rem;
}

.fs-100 {
    font-size: var(--step-4);
}

.fs-125 {
    font-size: var(--step-5);
}

/** Border-radius **/

.br-0 {
    border-radius: 0;
}

.br-25 {
    border-radius: var(--step-1);
}

.br-50 {
    border-radius: var(--step-2);
}

.br-75 {
    border-radius: var(--step-3);
}

.br-100 {
    border-radius: var(--step-4);
}

.br-125 {
    border-radius: var(--step-5);
}

.br-150 {
    border-radius: var(--step-6);
}

.br-175 {
    border-radius: var(--step-7);
}

.br-200 {
    border-radius: var(--step-8);
}

.bordered {
    border-width: 1px;
    border-style: solid;
}

/***/
/* Grid Column Span */
.cspan-2 {
    grid-column: span 2;
}

.cspan-3 {
    grid-column: span 3;
}

/* Grid Row Span */
.rspan-2 {
    grid-row: span 2;
}

.rspan-4 {
    grid-row: span 4;
}

.tw-nowrap {
    text-wrap: nowrap;
}

.tb-center td,
.tb-center th {
    text-align: center !important;
    vertical-align: middle !important;
}

.tb-nowrap :is(th, td) {
    text-wrap: nowrap;
}

.bb, .bt, .bl, .br,
.bt, .by, .btl, .btr,
.bt, .by, .btl, .btr,
.bb, .by, .bbl, .bbr,
.br, .bx, .bbr, .bbl {
    border-style: solid;
}

.bt, .by, .btl, .btr {
    border-top-width: 1px;
}

.bb, .by, .bbl, .bbr {
    border-bottom-width: 1px;
}

.bl, .bx, .bbl, .btl {
    border-left-width: 1px;
}

.br, .bx, .bbr, .bbl {
    border-right-width: 1px;
}

.bb-0 {
    border-bottom: 0;
}

.bt-0 {
    border-top: 0;
}

.bl-0 {
    border-left: 0;
}

.br-0 {
    border-right: 0;
}

.bt, .by, .btl, .btr {
    border-top-width: 1px;
}

.bb, .by, .bbl, .bbr {
    border-bottom-width: 1px;
}

.bl, .bx, .bbl, .btl {
    border-left-width: 1px;
}

.br, .bx {
    border-right-width: 1px;
}


.w-50 {
    width: 50%;
}

.w-100 {
    width: 100%;
}