* { box-sizing: border-box; }

.border-main {
    --border-color: var(--main-color);
    border: var(--border-color) 1px solid;
    position: relative;
    padding: 20px;
    margin-top: 20px;
}
.border-lightgrey {
    --border-color: lightgrey;
    border: var(--border-color) 1px solid;
    position: relative;
    padding: 20px;
    margin-top: 20px;
}
.border-grey {
    --border-color: grey;
    border: var(--border-color) 1px solid;
    position: relative;
    padding: 20px;
    margin-top: 20px;
}
.border-title {
    color: var(--border-color);
    position: absolute;
    top: 0;
    transform: translateY(-50%);
    background-color: #fff;
    margin: 0;
}

.flex { display: flex !important; flex-wrap: wrap !important; }
.flex-1 { flex: 1 1 0; min-width: 0; }
.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }
.flex-row-reverse { flex-direction: row-reverse; }
.flex-col-reverse { flex-direction: column-reverse; }

.justify-between    { justify-content: space-between; }
.justify-evenly     { justify-content: space-evenly; }
.justify-around     { justify-content: space-around; }
.justify-start      { justify-content: start; }
.justify-end        { justify-content: end; }
.justify-center     { justify-content: center; }

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

.scale-2 { scale: 1.5 }

.bg-main { background-color: var(--main-color); color: white; }
.bg-lightgrey { background-color: lightgrey; color: white; }

/* GAPS */
.gap-0 { gap: 0 !important; --offset-w: 0px; --offset-h: 0px }
.gap-1 { gap: calc(10px) !important; --offset-w:  8px; --offset-h: 8px; }
.gap-2 { gap: calc(20px) !important; --offset-w: 10px; --offset-h: 10px; }

/* WIDTH */
.w-100 { width: calc(100% - var(--offset-w)); }
.w-95  { width: calc( 95% - var(--offset-w)); }
.w-90  { width: calc( 90% - var(--offset-w)); }
.w-85  { width: calc( 85% - var(--offset-w)); }
.w-80  { width: calc( 80% - var(--offset-w)); }
.w-75  { width: calc( 75% - var(--offset-w)); }
.w-70  { width: calc( 70% - var(--offset-w)); }
.w-65  { width: calc( 65% - var(--offset-w)); }
.w-60  { width: calc( 60% - var(--offset-w)); }
.w-55  { width: calc( 55% - var(--offset-w)); }
.w-50  { width: calc( 50% - var(--offset-w)); }
.w-45  { width: calc( 45% - var(--offset-w)); }
.w-40  { width: calc( 40% - var(--offset-w)); }
.w-35  { width: calc( 35% - var(--offset-w)); }
.w-33  { width: calc( calc(100%/3) - var(--offset-w)); }
.w-30  { width: calc( 30% - var(--offset-w)); }
.w-25  { width: calc( 25% - var(--offset-w)); }
.w-20  { width: calc( 20% - var(--offset-w)); }
.w-15  { width: calc( 15% - var(--offset-w)); }
.w-10  { width: calc( 10% - var(--offset-w)); }
.w-5   { width: calc(  5% - var(--offset-w)); }

/* HEIGH */
.h-screen { height: 100vh; }
.h-100 { height: calc(100% - var(--offset-h)); }
.h-95  { height: calc( 95% - var(--offset-h)); }
.h-90  { height: calc( 90% - var(--offset-h)); }
.h-85  { height: calc( 85% - var(--offset-h)); }
.h-80  { height: calc( 80% - var(--offset-h)); }
.h-75  { height: calc( 75% - var(--offset-h)); }
.h-70  { height: calc( 70% - var(--offset-h)); }
.h-65  { height: calc( 65% - var(--offset-h)); }
.h-60  { height: calc( 60% - var(--offset-h)); }
.h-55  { height: calc( 55% - var(--offset-h)); }
.h-50  { height: calc( 50% - var(--offset-h)); }
.h-45  { height: calc( 45% - var(--offset-h)); }
.h-40  { height: calc( 40% - var(--offset-h)); }
.h-35  { height: calc( 35% - var(--offset-h)); }
.h-30  { height: calc( 30% - var(--offset-h)); }
.h-25  { height: calc( 25% - var(--offset-h)); }
.h-20  { height: calc( 20% - var(--offset-h)); }
.h-15  { height: calc( 15% - var(--offset-h)); }
.h-10  { height: calc( 10% - var(--offset-h)); }
.h-5   { height: calc(  5% - var(--offset-h)); }



/* PADDINGS */
.p-0  { padding: 0 !important; }
.p-1  { padding: 0.5rem; }
.p-2  { padding: 1.0rem; }
.p-3  { padding: 1.5rem; }
.p-4  { padding: 2.0rem; }
.p-5  { padding: 2.5rem; }
.px-1  { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-2  { padding-left: 1.0rem; padding-right: 1.0rem; }
.px-3  { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-4  { padding-left: 2.0rem; padding-right: 2.0rem; }
.px-5  { padding-left: 2.5rem; padding-right: 2.5rem; }
.py-1  { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-2  { padding-top: 1.0rem; padding-bottom: 1.0rem; }
.py-3  { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-4  { padding-top: 2.0rem; padding-bottom: 2.0rem; }
.py-5  { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: 0.5rem; }
.pt-2 { padding-top: 1.0rem; }
.pt-3 { padding-top: 1.5rem; }
.pt-4 { padding-top: 2.0rem; }
.pt-5 { padding-top: 2.5rem; }
.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: 0.5rem; }
.pb-2 { padding-bottom: 1.0rem; }
.pb-3 { padding-bottom: 1.5rem; }
.pb-4 { padding-bottom: 2.0rem; }
.pb-5 { padding-bottom: 2.5rem; }
.pl-0 { padding-left: 0 !important; }
.pl-1 { padding-left: 0.5rem; }
.pl-2 { padding-left: 1.0rem; }
.pl-3 { padding-left: 1.5rem; }
.pl-4 { padding-left: 2.0rem; }
.pl-5 { padding-left: 2.5rem; }
.pr-0 { padding-right: 0 !important; }
.pr-1 { padding-right: 0.5rem; }
.pr-2 { padding-right: 1.0rem; }
.pr-3 { padding-right: 1.5rem; }
.pr-4 { padding-right: 2.0rem; }
.pr-5 { padding-right: 2.5rem; }

.rounded-0 { border-radius: 0; }
.rounded-1 { border-radius: 0.5rem; }
.rounded-2 { border-radius: 1.0rem; }
.rounded-3 { border-radius: 1.5rem; }
.rounded-4 { border-radius: 2.0rem; }
.rounded-5 { border-radius: 2.5rem; }

/* MARGINS */
.m-0  { margin: 0 !important; }
.m-1  { margin: 0.5rem; }
.m-2  { margin: 1.0rem; }
.m-3  { margin: 1.5rem; }
.m-4  { margin: 2.0rem; }
.m-5  { margin: 2.5rem; }
.mx-1  { margin-left: 0.5rem; margin-right: 0.5rem; }
.mx-2  { margin-left: 1.0rem; margin-right: 1.0rem; }
.mx-3  { margin-left: 1.5rem; margin-right: 1.5rem; }
.mx-4  { margin-left: 2.0rem; margin-right: 2.0rem; }
.mx-5  { margin-left: 2.5rem; margin-right: 2.5rem; }
.my-1  { margin-top: 0.5rem; margin-bottom: 0.5rem; }
.my-2  { margin-top: 1.0rem; margin-bottom: 1.0rem; }
.my-3  { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.my-4  { margin-top: 2.0rem; margin-bottom: 2.0rem; }
.my-5  { margin-top: 2.5rem; margin-bottom: 2.5rem; }
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1.0rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2.0rem; }
.mt-5 { margin-top: 2.5rem; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1.0rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2.0rem; }
.mb-5 { margin-bottom: 2.5rem; }
.ml-0 { margin-left: 0 !important; }
.ml-1 { margin-left: 0.5rem; }
.ml-2 { margin-left: 1.0rem; }
.ml-3 { margin-left: 1.5rem; }
.ml-4 { margin-left: 2.0rem; }
.ml-5 { margin-left: 2.5rem; }
.mr-0 { margin-right: 0 !important; }
.mr-1 { margin-right: 0.5rem; }
.mr-2 { margin-right: 1.0rem; }
.mr-3 { margin-right: 1.5rem; }
.mr-4 { margin-right: 2.0rem; }
.mr-5 { margin-right: 2.5rem; }