/*Margin utility classes*/
.m0 {
    margin: 0px;
}

.mar-3xs {
    margin: var(--space-3xs);
}

.mar-2xs{
    margin: var(--space-2xs);
}

.mar-xs {
    margin: var(--space-xs);
}

.mar-s {
    margin: var(--space-s);
}

.mar-m {
    margin: var(--space-m);
}

.mar-l {
    margin: var(--space-l);
}

.mar-xl {
    margin: var(--space-xl);
}

.mar-2xl {
    margin: var(--space-2xl);
}

.mar-3xl {
    margin: var(--space-3xl);
}

.mar-b-3xs {
    margin-bottom: var(--space-3xs);
}

.mar-b-2xs {
    margin-bottom: var(--space-2xs);
}

.mar-b-xs {
    margin-bottom: var(--space-xs);
}

.mar-b-s {
    margin-bottom: var(--space-s);
}

.mar-b-m {
    margin-bottom: var(--space-m);
}

.mar-b-l {
    margin-bottom: var(--space-l);
}

.mar-b-xl {
    margin-bottom: var(--space-xl);
}

.mar-b-2xl {
    margin-bottom: var(--space-2xl);
}

.mar-b-3xl {
    margin-bottom: var(--space-3xl);
}

.mar-t-3xs {
    margin-top: var(--space-3xs);
}

.mar-t-2xs {
    margin-top: var(--space-2xs);
}

.mar-t-xs {
    margin-top: var(--space-xs);
}

.mar-t-s {
    margin-top: var(--space-s);
}

.mar-t-m {
    margin-top: var(--space-m);
}

.mar-t-l {
    margin-top: var(--space-l);
}

.mar-t-xl {
    margin-top: var(--space-xl);
}

.mar-t-2xl {
    margin-top: var(--space-2xl);
}

.mar-t-3xl {
    margin-top: var(--space-3xl);
}

.mar-h-3xs {
    margin-left: var(--space-3xs);
    margin-right: var(--space-3xs);
}

.mar-h-2xs {
    margin-left: var(--space-2xs);
    margin-right: var(--space-2xs);
}

.mar-h-xs {
    margin-left: var(--space-xs);
    margin-right: var(--space-xs);
}

.mar-h-s {
    margin-left: var(--space-s);
    margin-right: var(--space-s);
}

.mar-h-m {
    margin-left: var(--space-m);
    margin-right: var(--space-m);
}

.mar-h-l {
    margin-left: var(--space-l);
    margin-right: var(--space-l);
}

.mar-h-xl {
    margin-left: var(--space-xl);
    margin-right: var(--space-xl);
}

.mar-h-2xl {
    margin-left: var(--space-2xl);
    margin-right: var(--space-2xl);
}

.mar-h-3xl {
    margin-left: var(--space-3xl);
    margin-right: var(--space-3xl);
}

.no-margin {
    margin: 0px;
}

/*Padding utility classes*/
.p0 {
    padding: 0;
}

.pad-3xs {
    padding: var(--space-3xs);
}

.pad-2xs {
    padding: var(--space-2xs);
}

.pad-xs {
    padding: var(--space-xs);
}

.pad-s {
    padding: var(--space-s);
}

.pad-m {
    padding: var(--space-m);
}

.pad-l {
    padding: var(--space-l);
}

.pad-xl {
    padding: var(--space-xl);
}

.pad-2xl {
    padding: var(--space-2xl);
}

.pad-3xl {
    padding: var(--space-3xl);
}

.pad-b-3xs {
    padding-bottom: var(--space-3xs);
}

.pad-b-2xs {
    padding-bottom: var(--space-2xs);
}

.pad-b-xs {
    padding-bottom: var(--space-xs);
}

.pad-b-s {
    padding-bottom: var(--space-s);
}

.pad-b-m {
    padding-bottom: var(--space-m);
}

.pad-b-l {
    padding-bottom: var(--space-l);
}

.pad-b-xl {
    padding-bottom: var(--space-xl);
}

.pad-b-2xl {
    padding-bottom: var(--space-2xl);
}

.pad-b-3xl {
    padding-bottom: var(--space-3xl);
}

.pad-l-3xs {
    padding-left: var(--space-3xs);
}

.pad-l-2xs {
    padding-left: var(--space-2xs);
}

.pad-l-xs {
    padding-left: var(--space-xs);
}

.pad-l-s {
    padding-left: var(--space-s);
}

.pad-l-m {
    padding-left: var(--space-m);
}

.pad-l-l {
    padding-left: var(--space-l);
}

.pad-l-xl {
    padding-left: var(--space-xl);
}

.pad-l-2xl {
    padding-left: var(--space-2xl);
}

.pad-l-3xl {
    padding-left: var(--space-3xl);
}

.pad-h-3xs {
    padding-left: var(--space-3xs);
    padding-right: var(--space-3xs);
}

.pad-h-2xs {
    padding-left: var(--space-2xs);
    padding-right: var(--space-2xs);
}

.pad-h-xs {
    padding-left: var(--space-xs);
    padding-right: var(--space-xs);
}

.pad-h-s {
    padding-left: var(--space-s);
    padding-right: var(--space-s);
}

.pad-h-m {
    padding-left: var(--space-m);
    padding-right: var(--space-m);
}

.pad-h-l {
    padding-left: var(--space-l);
    padding-right: var(--space-l);
}

.pad-h-xl {
    padding-left: var(--space-xl);
    padding-right: var(--space-xl);
}

.pad-h-2xl {
    padding-left: var(--space-2xl);
    padding-right: var(--space-2xl);
}

.pad-h-3xl {
    padding-left: var(--space-3xl);
    padding-right: var(--space-3xl);
}

.no-padding{
    padding: 0px;
}

/*Border utility classes*/
.border-cg20 {
    border: solid;
    border-width: var(--base-border);
    border-color: var(--coolgrey20-colour);
}

.border-cg30 {
    border: solid;
    border-width: var(--base-border);
    border-color: var(--coolgrey30-colour);
}

.border-cg40 {
    border: solid;
    border-width: var(--base-border);
    border-color: var(--coolgrey40-colour);
}

.border-cg50 {
    border: solid;
    border-width: var(--base-border);
    border-color: var(--coolgrey50-colour);
}

.border-cg60 {
    border: solid;
    border-width: var(--base-border);
    border-color: var(--coolgrey60-colour);
}

.border-colour-cg100 {
    border-color: var(--coolgrey100-colour);
}

.no-border {
    border: none;
    outline: none;
}

/*Sizing*/
.content-box {
    box-sizing: content-box;
}

.border-box {
    box-sizing: border-box;
}

/*Widths*/
.w-a {
    width: auto;
}

.w-40 {
    width: 40%;
}

.w-45 {
    width: 45%;
}

.w-50 {
    width: 50%;
}

.w-80 {
    width: 80%;
}

.w-90 {
    width: 90%;
}

.w-95 {
    width: 95%;
}

.w-100 {
    width: 100%;
}

/*Max Widths*/
.maxw-a {
    max-width: auto;
}

.maxw-40 {
    max-width: 40%;
}

.maxw-45 {
    max-width: 45%;
}

.maxw-50 {
    max-width: 50%;
}

.maxw-80 {
    max-width: 80%;
}

.maxw-90 {
    max-width: 90%;
}

.maxw-95 {
    max-width: 95%;
}

.maxw-100 {
    max-width: 100%;
}

/*Min widths*/
.minw-a {
    min-width: auto;
}

.minw-40 {
    min-width: 40%;
}

.minw-45 {
    min-width: 45%;
}

.minw-50 {
    min-width: 50%;
}

.minw-80 {
    min-width: 80%;
}

.minw-90 {
    min-width: 90%;
}

.minw-95 {
    min-width: 95%;
}

.minw-100 {
    min-width: 100%;
}

/*Height*/
.h-a {
    height: auto;
}

.h-40 {
    height: 40%;
}

.h-45 {
    height: 45%;
}

.h-50 {
    height: 50%;
}

.h-80 {
    height: 80%;
}

.h-90 {
    height: 90%;
}

.h-95 {
    height: 95%;
}

.h-100 {
    height: 100%;
}

/*Overflow*/
.of-y-auto {
    overflow-y: auto;
}

.of-y-scroll {
    overflow-y: scroll;
}