/* Helper classes for margin, padding & common colors  */
/* units = 0, 5px, 10px, 15px, 20px, 30px */

/* flex-row */
.flex--row{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

/* ~~~ margin classes ~~~ */
    .m--0{
        margin: 0px !important;
    }
    /* margin(x) left-right */
    .mx--0{
        margin-left: 0px !important;
        margin-right: 0px !important;
    }
    .mx--5{
        margin-left: 5px !important;
        margin-right: 5px !important;
    }

    .mx--10{
        margin-left: 10px !important;
        margin-right: 10px !important;
    }

    .mx--15{
        margin-left: 15px !important;
        margin-right: 15px !important;
    }

    .mx--20{
        margin-left: 20px !important;
        margin-right: 20px !important;
    }

    .mx--30{
        margin-left: 30px !important;
        margin-right: 30px !important;
    }

    /* margin(y) top-bottom */
    .my--0{
        margin-top: 0px !important;
        margin-bottom: 0px !important;
    }
    .my--5{
        margin-top: 5px !important;
        margin-bottom: 5px !important;
    }
    .my--10{
        margin-top: 10px !important;
        margin-bottom: 10px !important;
    }
    .my--15{
        margin-top: 15px !important;
        margin-bottom: 15px !important;
    }
    .my--20{
        margin-top: 20px !important;
        margin-bottom: 20px !important;
    }
    .my--30{
        margin-top: 30px !important;
        margin-bottom: 30px !important;
    }

    /* margin(top) */
    .mt--5{
        margin-top: 5px !important;
    }
    .mt--10{
        margin-top: 10px !important;
    }
    .mt--15{
        margin-top: 15px !important;
    }
    .mt--20{
        margin-top: 20px !important;
    }
    .mt--30{
        margin-top: 30px !important;
    }

    /* margin(bottom) */
    .mb--5{
        margin-bottom: 5px !important;
    }
    .mb--10{
        margin-bottom: 10px !important;
    }
    .mb--15{
        margin-bottom: 15px !important;
    }
    .mb--20{
        margin-bottom: 20px !important;
    }
    .mb--30{
        margin-bottom: 30px !important;
    }


/* ~~~ Padding classes ~~~ */
    .p--0{
        padding: 0px !important;
    }
    /* padding(x) */
    .px--0{
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
    .px--5{
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
    .px--10{
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    .px--15{
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    .px--20{
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    .px--30{
        padding-left: 30px !important;
        padding-right: 30px !important;
    }

    /* padding(y) */
    .py--0{
        padding-top: 0px !important;
        padding-bottom: 0px !important;
    }
    .py--5{
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }
    .py--10{
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
    .py--15{
        padding-top: 15px !important;
        padding-bottom: 15px !important;
    }
    .py--20{
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }
    .py--30{
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }

    /* padding(top) */
    .pt--5{
        padding-top: 5px !important;
    }
    .pt--10{
        padding-top: 10px !important;
    }
    .pt--15{
        padding-top: 15px !important;
    }
    .pt--20{
        padding-top: 20px !important;
    }
    .pt--30{
        padding-top: 30px !important;
    }

    /* padding(bottom) */
    .pb--5{
        padding-bottom: 5px !important;
    }
    .pb--10{
        padding-bottom: 10px !important;
    }
    .pb--15{
        padding-bottom: 15px !important;
    }
    .pb--20{
        padding-bottom: 20px !important;
    }
    .pb--30{
        padding-bottom: 30px !important;
    }