:root {
    --size-1: 0.25em;
    --size-2: 0.5em;
    --size-3: 1em;
    --size-4: 1.5em;
    --size-5: 2.0em;

    --size-1: 5px;
    --size-2: 10px;
    --size-3: 15px;
    --size-4: 22.5px;
    --size-5: 30px;
    --size-6: 35px;
    --size-7: 40px;
    --size-8: 45px;

    --border-radius-tight: 3px;
    --border-radius-default: 5px;
    --border-radius-large: 7px;
}




.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.gx-0 {
    margin-right: 0;
    margin-left: 0;
}

.col {
    flex: 1 1 0;
    padding-right: 15px;
    padding-left: 15px;
}
    .gx-0 .col {
        padding: 0;
    }

.col-auto {
    flex: 0 0 auto;
}




.flex {
    display: flex;
}

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

.flex-auto {
    /* flex: 1 1 auto !important; */
    flex: 0 0 auto;
}

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

.flex-shrink {
    flex-shrink: 0;
}

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

.align-content-center {
    align-content: center;
}

.justify-content-center {
    justify-content: center;
}





.p-0 {
    padding: 0 !important;
}
.p-1 {
    padding: var(--size-1) !important;
}
.p-2 {
    padding: var(--size-2) !important;
}
.p-3 {
    padding: var(--size-3) !important;
}
.p-4 {
    padding: var(--size-4) !important;
}
.p-5 {
    padding: var(--size-5) !important;
}

.pt-0 {
    padding-top: 0 !important;
}
.pt-1 {
    padding-top: var(--size-1) !important;
}
.pt-2 {
    padding-top: var(--size-2) !important;
}
.pt-3 {
    padding-top: var(--size-3) !important;
}
.pt-4 {
    padding-top: var(--size-4) !important;
}
.pt-5 {
    padding-top: var(--size-5) !important;
}

.pb-0 {
    padding-bottom: 0 !important;
}
.pb-1 {
    padding-bottom: var(--size-1) !important;
}
.pb-2 {
    padding-bottom: var(--size-2) !important;
}
.pb-3 {
    padding-bottom: var(--size-3) !important;
}
.pb-4 {
    padding-bottom: var(--size-4) !important;
}
.pb-5 {
    padding-bottom: var(--size-5) !important;
}

.ps-0 {
    padding-left: 0 !important;
}
.ps-1 {
    padding-left: var(--size-1) !important;
}
.ps-2 {
    padding-left: var(--size-2) !important;
}
.ps-3 {
    padding-left: var(--size-3) !important;
}
.ps-4 {
    padding-left: var(--size-4) !important;
}
.ps-5 {
    padding-left: var(--size-5) !important;
}

.pe-0 {
    padding-right: 0 !important;
}
.pe-1 {
    padding-right: var(--size-1) !important;
}
.pe-2 {
    padding-right: var(--size-2) !important;
}
.pe-3 {
    padding-right: var(--size-3) !important;
}
.pe-4 {
    padding-right: var(--size-4) !important;
}
.pe-5 {
    padding-right: var(--size-5) !important;
}

.ph-0 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.ph-1 {
    padding-left: var(--size-1) !important;
    padding-right: var(--size-1) !important;
}
.ph-2 {
    padding-left: var(--size-2) !important;
    padding-right: var(--size-2) !important;
}
.ph-3 {
    padding-left: var(--size-3) !important;
    padding-right: var(--size-3) !important;
}
.ph-4 {
    padding-left: var(--size-4) !important;
    padding-right: var(--size-4) !important;
}
.ph-5 {
    padding-left: var(--size-5) !important;
    padding-right: var(--size-5) !important;
}

.pv-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.pv-1 {
    padding-top: var(--size-1) !important;
    padding-bottom: var(--size-1) !important;
}
.pv-2 {
    padding-top: var(--size-2) !important;
    padding-bottom: var(--size-2) !important;
}
.pv-3 {
    padding-top: var(--size-3) !important;
    padding-bottom: var(--size-3) !important;
}
.pv-4 {
    padding-top: var(--size-4) !important;
    padding-bottom: var(--size-4) !important;
}
.pv-5 {
    padding-top: var(--size-5) !important;
    padding-bottom: var(--size-5) !important;
}





.m-0 {
    margin: 0 !important;
}
.m-1 {
    margin: var(--size-1) !important;
}
.m-2 {
    margin: var(--size-2) !important;
}
.m-3 {
    margin: var(--size-3) !important;
}
.m-4 {
    margin: var(--size-4) !important;
}
.m-5 {
    margin: var(--size-5) !important;
}

.mt-0 {
    margin-top: 0 !important;
}
.mt-1 {
    margin-top: var(--size-1) !important;
}
.mt-2 {
    margin-top: var(--size-2) !important;
}
.mt-3 {
    margin-top: var(--size-3) !important;
}
.mt-4 {
    margin-top: var(--size-4) !important;
}
.mt-5 {
    margin-top: var(--size-5) !important;
}

.mb-0 {
    margin-bottom: 0 !important;
}
.mb-1 {
    margin-bottom: var(--size-1) !important;
}
.mb-2 {
    margin-bottom: var(--size-2) !important;
}
.mb-3 {
    margin-bottom: var(--size-3) !important;
}
.mb-4 {
    margin-bottom: var(--size-4) !important;
}
.mb-5 {
    margin-bottom: var(--size-5) !important;
}

.ms-0 {
    margin-left: 0 !important;
}
.ms-1 {
    margin-left: var(--size-1) !important;
}
.ms-2 {
    margin-left: var(--size-2) !important;
}
.ms-3 {
    margin-left: var(--size-3) !important;
}
.ms-4 {
    margin-left: var(--size-4) !important;
}
.ms-5 {
    margin-left: var(--size-5) !important;
}

.me-0 {
    margin-right: 0 !important;
}
.me-1 {
    margin-right: var(--size-1) !important;
}
.me-2 {
    margin-right: var(--size-2) !important;
}
.me-3 {
    margin-right: var(--size-3) !important;
}
.me-4 {
    margin-right: var(--size-4) !important;
}
.me-5 {
    margin-right: var(--size-5) !important;
}

.mh-0 {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.mh-1 {
    margin-left: var(--size-1) !important;
    margin-right: var(--size-1) !important;
}
.mh-2 {
    margin-left: var(--size-2) !important;
    margin-right: var(--size-2) !important;
}
.mh-3 {
    margin-left: var(--size-3) !important;
    margin-right: var(--size-3) !important;
}
.mh-4 {
    margin-left: var(--size-4) !important;
    margin-right: var(--size-4) !important;
}
.mh-5 {
    margin-left: var(--size-5) !important;
    margin-right: var(--size-5) !important;
}

.mv-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
.mv-1 {
    margin-top: var(--size-1) !important;
    margin-bottom: var(--size-1) !important;
}
.mv-2 {
    margin-top: var(--size-2) !important;
    margin-bottom: var(--size-2) !important;
}
.mv-3 {
    margin-top: var(--size-3) !important;
    margin-bottom: var(--size-3) !important;
}
.mv-4 {
    margin-top: var(--size-4) !important;
    margin-bottom: var(--size-4) !important;
}
.mv-5 {
    margin-top: var(--size-5) !important;
    margin-bottom: var(--size-5) !important;
}






.gap-0 {
    gap: 0 !important;
}
.gap-1 {
    gap: var(--size-1) !important;
}
.gap-2 {
    gap: var(--size-2) !important;
}
.gap-3 {
    gap: var(--size-3) !important;
}
.gap-4 {
    gap: var(--size-4) !important;
}
.gap-5 {
    gap: var(--size-5) !important;
}







.mb-0 {
    margin-bottom: 0 !important;
}
.mb-1 {
    margin-bottom: var(--size-1) !important;
}
.mb-2 {
    margin-bottom: var(--size-2) !important;
}
.mb-3 {
    margin-bottom: var(--size-3) !important;
}
.mb-4 {
    margin-bottom: var(--size-4) !important;
}
.mb-5 {
    margin-bottom: var(--size-5) !important;
}
.mb-6 {
    margin-bottom: var(--size-6) !important;
}
.mb-7 {
    margin-bottom: var(--size-7) !important;
}
.mb-8 {
    margin-bottom: var(--size-8) !important;
}






.border-radius-tight {
    border-radius: var(--border-radius-tight);
    overflow: hidden;
}
.border-radius-default {
    border-radius: var(--border-radius-default);
    overflow: hidden;
}
.border-radius-large {
    border-radius: var(--border-radius-large);
    overflow: hidden;
}