/* Display */
.flex {
    display: flex;
}

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

.j-c-start {
    justify-content: start;
}

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

.j-c-between {
    justify-content: space-between;
}

.j-c-around {
    justify-content: space-around;
}

.j-c-right {
    justify-content: right;
}

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

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

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

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

.text-left {
    text-align: left;
}

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

.text-right {
    text-align: right;
}

/* Widths and height */

.w-100 {
    width: 100%;
}

.w-80 {
    width: 80%;
}

.w-75 {
    width: 75%;
}

.w-50 {
    width: 50%;
}

.w-30 {
    width: 30%;
}

.w-25 {
    width: 25%;
}

.h-100 {
    height: 100%;
}

.h-75 {
    height: 75%;
}

.h-50 {
    height: 50%;
}

.h-30 {
    height: 30%;
}

.h-25 {
    height: 25%;
}

/* Margins */
.m-1 {
    margin: 4px;
}

.m-2 {
    margin: 8px;
}

.m-3 {
    margin: 16px;
}

.m-4 {
    margin: 24px;
}

.m-5 {
    margin: 32px;
}

.m-6 {
    margin: 40px;
}

.m-7 {
    margin: 48px;
}

.m-8 {
    margin: 56px;
}

.m-9 {
    margin: 64px;
}

.m-auto {
    margin: auto;
}



.mt-1 {
    margin-top: 4px;
}

.mt-2 {
    margin-top: 8px;
}

.mt-3 {
    margin-top: 16px;
}

.mt-4 {
    margin-top: 24px;
}

.mt-5 {
    margin-top: 32px;
}

.mt-6 {
    margin-top: 40px;
}

.mt-7 {
    margin-top: 48px;
}

.mt-8 {
    margin-top: 56px;
}

.mt-9 {
    margin-top: 64px;
}

.mt-10 {
    margin-top: 72px;
}

.mt-auto {
    margin-top: auto;
}



/* Margins */
.mr-1 {
    margin-right: 4px;
}

.mr-2 {
    margin-right: 8px;
}

.mr-3 {
    margin-right: 16px;
}

.mr-4 {
    margin-right: 24px;
}

.mr-5 {
    margin-right: 32px;
}

.mr-6 {
    margin-right: 40px;
}

.mr-7 {
    margin-right: 48px;
}

.mr-8 {
    margin-right: 56px;
}

.mr-9 {
    margin-right: 64px;
}

.mr-auto {
    margin-right: auto;
}



.ml-1 {
    margin-left: 4px;
}

.ml-2 {
    margin-left: 8px;
}

.ml-3 {
    margin-left: 16px;
}

.ml-4 {
    margin-left: 24px;
}

.ml-5 {
    margin-left: 32px;
}

.ml-6 {
    margin-left: 40px;
}

.ml-7 {
    margin-left: 48px;
}

.ml-8 {
    margin-left: 56px;
}

.ml-9 {
    margin-left: 64px;
}

.ml-auto {
    margin-left: auto;
}



.mb-1 {
    margin-bottom: 4px;
}

.mb-2 {
    margin-bottom: 8px;
}

.mb-3 {
    margin-bottom: 16px;
}

.mb-4 {
    margin-bottom: 24px;
}

.mb-5 {
    margin-bottom: 32px;
}

.mb-6 {
    margin-bottom: 40px;
}

.mb-7 {
    margin-bottom: 48px;
}

.mb-8 {
    margin-bottom: 56px;
}

.mb-9 {
    margin-bottom: 64px;
}

.mb-10 {
    margin-bottom: 72px;
}

.mb-auto {
    margin-bottom: auto;
}



/* Padding */
.p-1 {
    padding: 4px;
}

.p-2 {
    padding: 8px;
}

.p-3 {
    padding: 16px;
}

.p-4 {
    padding: 24px;
}

.p-5 {
    padding: 32px;
}

.p-6 {
    padding: 40px;
}

.p-7 {
    padding: 48px;
}

.p-8 {
    padding: 56px;
}

.p-9 {
    padding: 64px;
}

.p-auto {
    padding: auto;
}



/* Padding Top */
.pt-1 {
    padding-top: 4px;
}

.pt-2 {
    padding-top: 8px;
}

.pt-3 {
    padding-top: 16px;
}

.pt-4 {
    padding-top: 24px;
}

.pt-5 {
    padding-top: 32px;
}

.pt-6 {
    padding-top: 40px;
}

.pt-7 {
    padding-top: 48px;
}

.pt-8 {
    padding-top: 56px;
}

.pt-9 {
    padding-top: 64px;
}

.pt-auto {
    padding-top: auto;
}



/* Padding Right */
.pr-1 {
    padding-right: 4px;
}

.pr-2 {
    padding-right: 8px;
}

.pr-3 {
    padding-right: 16px;
}

.pr-4 {
    padding-right: 24px;
}

.pr-5 {
    padding-right: 32px;
}

.pr-6 {
    padding-right: 40px;
}

.pr-7 {
    padding-right: 48px;
}

.pr-8 {
    padding-right: 56px;
}

.pr-9 {
    padding-right: 64px;
}

.pr-auto {
    padding-right: auto;
}



/* Padding Bottom */
.pb-1 {
    padding-bottom: 4px;
}

.pb-2 {
    padding-bottom: 8px;
}

.pb-3 {
    padding-bottom: 16px;
}

.pb-4 {
    padding-bottom: 24px;
}

.pb-5 {
    padding-bottom: 32px;
}

.pb-6 {
    padding-bottom: 40px;
}

.pb-7 {
    padding-bottom: 48px;
}

.pb-8 {
    padding-bottom: 56px;
}

.pb-9 {
    padding-bottom: 64px;

}

.pb-auto {
    padding-bottom: auto;
}



/* Padding Left */
.pl-1 {
    padding-left: 4px;
}

.pl-2 {
    padding-left: 8px;
}

.pl-3 {
    padding-left: 16px;
}

.pl-4 {
    padding-left: 24px;
}

.pl-5 {
    padding-left: 32px;
}

.pl-6 {
    padding-left: 40px;
}

.pl-7 {
    padding-left: 48px;
}

.pl-8 {
    padding-left: 56px;
}

.pl-9 {
    padding-left: 64px;
}

.pl-auto {
    padding-left: auto;
}