/****************************
****  Utility Classes *******
****************************/

/*  Spacing */

/* Margin */

.margin-top-1{
    margin-top: 1rem;
}

.margin-top-2{
    margin-top: 2rem;
}

.margin-top-3{
    margin-top: 3rem;
}

.margin-top-4{
    margin-top: 4rem;
}

.margin-top-5{
    margin-top: 5rem;
}

.margin-bottom-1{
    margin-bottom: 1rem;
}

.margin-bottom-1-5{
    margin-bottom: 1.5rem;
}

.margin-bottom-2{
    margin-bottom: 2rem;
}

.margin-bottom-3{
    margin-bottom: 3rem;
}

.margin-bottom-4{
    margin-bottom: 4rem;
}

.margin-bottom-5{
    margin-bottom: 5rem;
}

.margin-right-3{
    margin-right: 3rem;
}

/* Padding */

.padding-1{
    padding: 1rem;
}

.padding-t-b-1{
    padding: 1rem 0;
}

.padding-t-b-2{
    padding: 2rem 0;
}

.padding-2{
    padding: 2rem;
}

.padding-l-r{
    padding: 0 1rem;
}
.padding-top-l-r-1{
    padding: 1rem 1rem 0 1rem;
}


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

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



/* Colours */

.action-red-light{
    color: var(--action-red-light-color);
}

/* Background colours */
.grey1{
    background-color: var(--secondary-grey1-color);
}

.grey2{
    background-color: var(--secondary-grey2-color);
}

.grey3{
    background-color: var(--secondary-grey3-color);
}

.white{
    background-color: var(--primary-white-color);
}

/* JS classes */

.hide{
    display: none;
}

.hot-visible{
    visibility: hidden;
    height: 0!important;
}

.show{
    display: block;
}