/*
* px:
*       - base font size, not influenced, relative to screen resolution.
*       - Use in html to avoid browser setting
* rem:
*       - based on html font size, influenced by browser font size setting.
*       - Use in modules that doesn't change with the text size
* em:
*       - based on parent's font size.
*       - Use in elements that change with font size (h1, h2, .... pre, )
*/

.bg-light {background-color: rgba(0, 0, 0, 0.09);}
.bg-red {background-color: rgba(250, 0, 0, 1);}
.bg-lightred {background-color: rgba(255, 0, 72, 0.68);}
.bg-lightblue {background-color: rgba(28, 110, 255, 0.38);}
.bg-black {background-color: rgba(0, 0, 0, 1);}
.bg-white {background-color: rgba(255, 255, 255, 1);}
.border-transparent {border: solid 1px transparent;}
.border-black {border: solid 1px black;}
.border-red {border: solid 1px red;}
.border-green {border: solid 1px green;}
.border-blue {border: solid 1px blue;}
.border-grey {border: solid 1px grey;}
.border-yellow {border: solid 1px yellow;}
.border-light-grey {border: solid 1px #c6c6c6;}
.font-size-03 {font-size: 0.3em !important;}
.font-size-04 {font-size: 0.4em !important;}
.font-size-05 {font-size: 0.5em !important;}
.font-size-06 {font-size: 0.6em !important;}
.font-size-07 {font-size: 0.7em !important;}
.font-size-08 {font-size: 0.8em !important;}
.font-size-09 {font-size: 0.9em !important;}
.font-size-1 {font-size: 1em !important;}
.font-size-12 {font-size: 1.2em !important;}
.font-size-13 {font-size: 1.3em !important;}
.font-size-14 {font-size: 1.4em !important;}
.font-size-15 {font-size: 1.5em !important;}
.font-size-16 {font-size: 1.6em !important;}
.font-size-17 {font-size: 1.7em !important;}
.font-size-18 {font-size: 1.8em !important;}
.font-size-20 {font-size: 2.0em !important;}
.font-color-red {color: #ff0000;}
.font-color-green {color: #00ff00;}
.font-color-blue {color: #0000ff;}
.font-color-grey {color: #808080;}
.font-color-site {color: #3a74cb;}
.font-color-white {color: #ffffff;}
.font-color-black {color: #000000;}
.font-bold {font-weight: bold;}
.mt-10 {margin-top: 10px;}
.mt-20 {margin-top: 20px;}
.mt-30 {margin-top: 30px;}
.mt-40 {margin-top: 40px;}
.mt-50 {margin-top: 50px;}
.mt-60 {margin-top: 60px;}
.mt-70 {margin-top: 70px;}
.mt-80 {margin-top: 80px;}
.mt-90 {margin-top: 90px;}
.mt-100 {margin-top: 100px;}
.mb-10 {margin-bottom: 10px;}
.mb-20 {margin-bottom: 20px;}
.mb-30 {margin-bottom: 30px;}
.mb-40 {margin-bottom: 40px;}
.mb-50 {margin-bottom: 50px;}
.mb-60 {margin-bottom: 60px;}
.mb-70 {margin-bottom: 70px;}
.mb-80 {margin-bottom: 80px;}
.mb-90 {margin-bottom: 90px;}
.mb-100 {margin-bottom: 100px;}
.ml-10 {margin-left: 10px;}
.ml-20 {margin-left: 20px;}
.ml-30 {margin-left: 30px;}
.ml-40 {margin-left: 40px;}
.ml-50 {margin-left: 50px;}
.ml-60 {margin-left: 60px;}
.ml-70 {margin-left: 70px;}
.ml-80 {margin-left: 80px;}
.ml-90 {margin-left: 90px;}
.ml-100 {margin-left: 100px;}
.mr-10 {margin-right: 10px;}
.mr-20 {margin-right: 20px;}
.mr-30 {margin-right: 30px;}
.mr-40 {margin-right: 40px;}
.mr-50 {margin-right: 50px;}
.mr-60 {margin-right: 60px;}
.mr-70 {margin-right: 70px;}
.mr-80 {margin-right: 80px;}
.mr-90 {margin-right: 90px;}
.mr-100 {margin-right: 100px;}
.my-10 {margin-top: 10px; margin-bottom: 10px;}
.my-20 {margin-top: 20px; margin-bottom: 20px;}
.my-30 {margin-top: 30px; margin-bottom: 30px;}
.my-40 {margin-top: 40px; margin-bottom: 40px;}
.my-50 {margin-top: 50px; margin-bottom: 50px;}
.my-60 {margin-top: 60px; margin-bottom: 60px;}
.my-70 {margin-top: 70px; margin-bottom: 70px;}
.my-80 {margin-top: 80px; margin-bottom: 80px;}
.my-90 {margin-top: 90px; margin-bottom: 90px;}
.my-100 {margin-top: 100px; margin-bottom: 100px;}
.mx-10 {margin-left: 10px; margin-right: 10px;}
.mx-20 {margin-left: 20px; margin-right: 20px;}
.mx-30 {margin-left: 30px; margin-right: 30px;}
.mx-40 {margin-left: 40px; margin-right: 40px;}
.mx-50 {margin-left: 50px; margin-right: 50px;}
.mx-60 {margin-left: 60px; margin-right: 60px;}
.mx-70 {margin-left: 70px; margin-right: 70px;}
.mx-80 {margin-left: 80px; margin-right: 80px;}
.mx-90 {margin-left: 90px; margin-right: 90px;}
.mx-100 {margin-left: 100px; margin-right: 100px;}

.pt-10 {padding-top: 10px;}
.pt-20 {padding-top: 20px;}
.pt-30 {padding-top: 30px;}
.pt-40 {padding-top: 40px;}
.pt-50 {padding-top: 50px;}
.pt-60 {padding-top: 60px;}
.pt-70 {padding-top: 70px;}
.pt-80 {padding-top: 80px;}
.pt-90 {padding-top: 90px;}
.pt-100 {padding-top: 100px;}
.pb-10 {padding-bottom: 10px;}
.pb-20 {padding-bottom: 20px;}
.pb-30 {padding-bottom: 30px;}
.pb-40 {padding-bottom: 40px;}
.pb-50 {padding-bottom: 50px;}
.pb-60 {padding-bottom: 60px;}
.pb-70 {padding-bottom: 70px;}
.pb-80 {padding-bottom: 80px;}
.pb-90 {padding-bottom: 90px;}
.pb-100 {padding-bottom: 100px;}
.pl-10 {padding-left: 10px;}
.pl-20 {padding-left: 20px;}
.pl-30 {padding-left: 30px;}
.pl-40 {padding-left: 40px;}
.pl-50 {padding-left: 50px;}
.pl-60 {padding-left: 60px;}
.pl-70 {padding-left: 70px;}
.pl-80 {padding-left: 80px;}
.pl-90 {padding-left: 90px;}
.pl-100 {padding-left: 100px;}
.pr-10 {padding-right: 10px;}
.pr-20 {padding-right: 20px;}
.pr-30 {padding-right: 30px;}
.pr-40 {padding-right: 40px;}
.pr-50 {padding-right: 50px;}
.pr-60 {padding-right: 60px;}
.pr-70 {padding-right: 70px;}
.pr-80 {padding-right: 80px;}
.pr-90 {padding-right: 90px;}
.pr-100 {padding-right: 100px;}
.py-10 {padding-top: 10px; padding-bottom: 10px;}
.py-20 {padding-top: 20px; padding-bottom: 20px;}
.py-30 {padding-top: 30px; padding-bottom: 30px;}
.py-40 {padding-top: 40px; padding-bottom: 40px;}
.py-50 {padding-top: 50px; padding-bottom: 50px;}
.py-60 {padding-top: 60px; padding-bottom: 60px;}
.py-70 {padding-top: 70px; padding-bottom: 70px;}
.py-80 {padding-top: 80px; padding-bottom: 80px;}
.py-90 {padding-top: 90px; padding-bottom: 90px;}
.py-100 {padding-top: 100px; padding-bottom: 100px;}
.px-10 {padding-left: 10px; padding-right: 10px;}
.px-20 {padding-left: 20px; padding-right: 20px;}
.px-30 {padding-left: 30px; padding-right: 30px;}
.px-40 {padding-left: 40px; padding-right: 40px;}
.px-50 {padding-left: 50px; padding-right: 50px;}
.px-60 {padding-left: 60px; padding-right: 60px;}
.px-70 {padding-left: 70px; padding-right: 70px;}
.px-80 {padding-left: 80px; padding-right: 80px;}
.px-90 {padding-left: 90px; padding-right: 90px;}
.px-100 {padding-left: 100px; padding-right: 100px;}

.h-20 {height: 20px;}
.h-30 {height: 30px;}
.h-40 {height: 40px;}
.h-50 {height: 50px;}
.h-60 {height: 60px;}
.h-70 {height: 70px;}
.h-80 {height: 80px;}
.h-90 {height: 90px;}
.h-110 {height: 110px;}
.h-120 {height: 120px;}
.h-130 {height: 130px;}
.h-140 {height: 140px;}
.h-150 {height: 150px;}
.h-160 {height: 160px;}
.h-170 {height: 170px;}
.h-180 {height: 180px;}
.h-190 {height: 190px;}
.h-200 {height: 200px;}