/* BASE */

html{
    padding: 0px;
    margin: 0px;
}

body{
    padding: 0px;
    margin: 0px;
}

/* PRIMARY-DARK */

.bg-primary-dark{
    background-color: #0c499f !important;
    transition: 0.2s;
}

.hover-bg-primary-dark:hover{
    background-color: #0c499f !important;
    transition: 0.2s;
}

.text-primary-dark{
    color: #0c499f !important;
    transition: 0.2s;
}

.hover-text-primary-dark:hover{
    color: #0c499f !important;
    transition: 0.2s;
}

/* SECONDARY-DARK */

.bg-secondary-dark{
    background-color: #454d57 !important;
    transition: 0.2s;
}

.hover-bg-secondary-dark:hover{
    background-color: #454d57 !important;
    transition: 0.2s;
}

.text-secondary-dark{
    color: #454d57 !important;
    transition: 0.2s;
}

.hover-text-secondary-dark:hover{
    color: #454d57 !important;
    transition: 0.2s;
}

/* WHITE-DARK */

.bg-white-dark{
    background-color: #b3b3b3 !important;
    transition: 0.2s;
}

.hover-bg-white-dark:hover{
    background-color: #b3b3b3 !important;
    transition: 0.2s;
}

.text-white-dark{
    color: #b3b3b3 !important;
    transition: 0.2s;
}

.hover-text-white-dark:hover{
    color: #b3b3b3 !important;
    transition: 0.2s;
}

/* PRIMARY */

.bg-primary{
    background-color: #1168e2 !important;
    transition: 0.2s;
}

.hover-bg-primary:hover{
    background-color: #1168e2 !important;
    transition: 0.2s;
}

.text-primary{
    color: #1168e2 !important;
    transition: 0.2s;
}

.hover-text-primary:hover{
    color: #1168e2 !important;
    transition: 0.2s;
}

/* SECONDARY */

.bg-secondary{
    background-color: #626d7c !important;
    transition: 0.2s;
}

.hover-bg-secondary:hover{
    background-color: #626d7c !important;
    transition: 0.2s;
}

.text-secondary{
    color: #626d7c !important;
    transition: 0.2s;
}

.hover-text-secondary:hover{
    color: #626d7c !important;
    transition: 0.2s;
}

/* WHITE */

.bg-white{
    background-color: #ffffff !important;
    transition: 0.2s;
}

.hover-bg-white:hover{
    background-color: #ffffff !important;
    transition: 0.2s;
}

.text-white{
    color: #ffffff !important;
    transition: 0.2s;
}

.hover-text-white:hover{
    color: #ffffff !important;
    transition: 0.2s;
}

/* PRIMARY-LIGHT */

.bg-primary-light{
    background-color: #5996eb !important;
    transition: 0.2s;
}

.hover-bg-primary-light:hover{
    background-color: #5996eb !important;
    transition: 0.2s;
}

.text-primary-light{
    color: #5996eb !important;
    transition: 0.2s;
}

.hover-text-primary-light:hover{
    color: #5996eb !important;
    transition: 0.2s;
}

/* SECONDARY-LIGHT */

.bg-secondary-light{
    background-color: #9299a4 !important;
    transition: 0.2s;
}

.hover-bg-secondary-light:hover{
    background-color: #9299a4 !important;
    transition: 0.2s;
}

.text-secondary-light{
    color: #9299a4 !important;
    transition: 0.2s;
}

.hover-text-secondary-light:hover{
    color: #9299a4 !important;
    transition: 0.2s;
}

/* WHITE-LIGHT */

.bg-white-light{
    background-color: #ffffff !important;
    transition: 0.2s;
}

.hover-bg-white-light:hover{
    background-color: #ffffff !important;
    transition: 0.2s;
}

.text-white-light{
    color: #ffffff !important;
    transition: 0.2s;
}

.hover-text-white-light:hover{
    color: #ffffff !important;
    transition: 0.2s;
}

/* SPACING-1 */

.m-1{
    margin: 1em !important;
}

.ml-1{
    margin-left: 1em !important;
}

.mt-1{
    margin-top: 1em !important;
}

.mr-1{
    margin-right: 1em !important;
}

.mb-1{
    margin-bottom: 1em !important;
}

.my-1{
    margin-bottom: 1em !important;
    margin-top: 1em !important;
}

.mx-1{
    margin-left: 1em !important;
    margin-right: 1em !important;
}

.p-1{
    padding: 1em !important;
}

.pl-1{
    padding-left: 1em !important;
}

.pt-1{
    padding-top: 1em !important;
}

.pr-1{
    padding-right: 1em !important;
}

.pb-1{
    padding-bottom: 1em !important;
}

.py-1{
    padding-bottom: 1em !important;
    padding-top: 1em !important;
}

.px-1{
    padding-left: 1em !important;
    padding-right: 1em !important;
}

/* SPACING-2 */

.m-2{
    margin: 2em !important;
}

.ml-2{
    margin-left: 2em !important;
}

.mt-2{
    margin-top: 2em !important;
}

.mr-2{
    margin-right: 2em !important;
}

.mb-2{
    margin-bottom: 2em !important;
}

.my-2{
    margin-bottom: 2em !important;
    margin-top: 2em !important;
}

.mx-2{
    margin-left: 2em !important;
    margin-right: 2em !important;
}

.p-2{
    padding: 2em !important;
}

.pl-2{
    padding-left: 2em !important;
}

.pt-2{
    padding-top: 2em !important;
}

.pr-2{
    padding-right: 2em !important;
}

.pb-2{
    padding-bottom: 2em !important;
}

.py-2{
    padding-bottom: 2em !important;
    padding-top: 2em !important;
}

.px-2{
    padding-left: 2em !important;
    padding-right: 2em !important;
}

/* SPACING-3 */

.m-3{
    margin: 3em !important;
}

.ml-3{
    margin-left: 3em !important;
}

.mt-3{
    margin-top: 3em !important;
}

.mr-3{
    margin-right: 3em !important;
}

.mb-3{
    margin-bottom: 3em !important;
}

.my-3{
    margin-bottom: 3em !important;
    margin-top: 3em !important;
}

.mx-3{
    margin-left: 3em !important;
    margin-right: 3em !important;
}

.p-3{
    padding: 3em !important;
}

.pl-3{
    padding-left: 3em !important;
}

.pt-3{
    padding-top: 3em !important;
}

.pr-3{
    padding-right: 3em !important;
}

.pb-3{
    padding-bottom: 3em !important;
}

.py-3{
    padding-bottom: 3em !important;
    padding-top: 3em !important;
}

.px-3{
    padding-left: 3em !important;
    padding-right: 3em !important;
}

/* SPACING-4 */

.m-4{
    margin: 4em !important;
}

.ml-4{
    margin-left: 4em !important;
}

.mt-4{
    margin-top: 4em !important;
}

.mr-4{
    margin-right: 4em !important;
}

.mb-4{
    margin-bottom: 4em !important;
}

.my-4{
    margin-bottom: 4em !important;
    margin-top: 4em !important;
}

.mx-4{
    margin-left: 4em !important;
    margin-right: 4em !important;
}

.p-4{
    padding: 4em !important;
}

.pl-4{
    padding-left: 4em !important;
}

.pt-4{
    padding-top: 4em !important;
}

.pr-4{
    padding-right: 4em !important;
}

.pb-4{
    padding-bottom: 4em !important;
}

.py-4{
    padding-bottom: 4em !important;
    padding-top: 4em !important;
}

.px-4{
    padding-left: 4em !important;
    padding-right: 4em !important;
}

/* SPACING-5 */

.m-5{
    margin: 5em !important;
}

.ml-5{
    margin-left: 5em !important;
}

.mt-5{
    margin-top: 5em !important;
}

.mr-5{
    margin-right: 5em !important;
}

.mb-5{
    margin-bottom: 5em !important;
}

.my-5{
    margin-bottom: 5em !important;
    margin-top: 5em !important;
}

.mx-5{
    margin-left: 5em !important;
    margin-right: 5em !important;
}

.p-5{
    padding: 5em !important;
}

.pl-5{
    padding-left: 5em !important;
}

.pt-5{
    padding-top: 5em !important;
}

.pr-5{
    padding-right: 5em !important;
}

.pb-5{
    padding-bottom: 5em !important;
}

.py-5{
    padding-bottom: 5em !important;
    padding-top: 5em !important;
}

.px-5{
    padding-left: 5em !important;
    padding-right: 5em !important;
}

/* SIZING-1 */

.h-1{
    height: 1em !important;
}

.w-1{
    width: 1em !important;
}

/* SIZING-2 */

.h-2{
    height: 2em !important;
}

.w-2{
    width: 2em !important;
}

/* SIZING-3 */

.h-3{
    height: 3em !important;
}

.w-3{
    width: 3em !important;
}

/* SIZING-4 */

.h-4{
    height: 4em !important;
}

.w-4{
    width: 4em !important;
}

/* SIZING-5 */

.h-5{
    height: 5em !important;
}

.w-5{
    width: 5em !important;
}

/* SIZING-HALF */

.h-half{
    height: 50% !important;
}

.w-half{
    width: 50% !important;
}

/* SIZING-FULL */

.h-full{
    height: 100% !important;
}

.w-full{
    width: 100% !important;
}