/* Colours */
:root {
	--c_black0:                rgb(255, 255, 255);  
	--c_black1:                rgb(247, 247, 247);	
	--c_black2:                rgb(243, 243, 243);
	--c_black3:                rgb(230, 230, 230);
	--c_black4:                rgb(210, 210, 210);
	--c_black5:                rgb(180, 180, 180);	
	--c_black6:                rgb(150, 150, 150);
	--c_black7:                rgb(124, 124, 124); 	
	--c_black8:                rgb( 94,  94,  94); 
	--c_black9:                rgb(64,  64,  64); 
	--c_black10:               rgb( 0,  0,  0) 	
}

/***********************************************************
* (XX) Item specific CSS
************************************************************/
p {font-size: 0.875rem;}
p.small {font-size: 0.75rem;}
h1 {font-size: 1.1rem !important;}
h2 {font-size: 1.0rem !important;}

.my_class {color:red !important;}

.maxw_mailing { max-width: 500px;}

/***********************************************************
* Black
************************************************************/
.c_black0       { color: var(--c_black0)!important; }
.c_black1       { color: var(--c_black1)!important; }
.c_black2       { color: var(--c_black2)!important; }
.c_black3       { color: var(--c_black3)!important; }
.c_black4       { color: var(--c_black4)!important; }
.c_black5       { color: var(--c_black5)!important; }
.c_black6       { color: var(--c_black6)!important; }
.c_black7       { color: var(--c_black7)!important; }
.c_black8       { color: var(--c_black8)!important; }
.c_black9       { color: var(--c_black9)!important; }
.c_black10       { color: var(--c_black10)!important; }

.bg_black       { background-color: #000000 !important; }
.bg_black0      { background-color: var(--c_black0) !important; }
.bg_black1      { background-color: var(--c_black1) !important; }
.bg_black2      { background-color: var(--c_black2) !important; }
.bg_black3      { background-color: var(--c_black3) !important; }
.bg_black4      { background-color: var(--c_black4) !important; }
.bg_black5      { background-color: var(--c_black5) !important; }
.bg_black6      { background-color: var(--c_black6) !important; }
.bg_black7      { background-color: var(--c_black7) !important; }
.bg_black8      { background-color: var(--c_black8) !important; }
.bg_black9      { background-color: var(--c_black9) !important; }
.bg_black10     { background-color: var(--c_black10) !important; }

.ch_black9:hover     { color: var(--c_black9) !important; }
.ch_black10:hover     { color: var(--c_black10) !important; }


/***********************************************************
* (XX) Fonts, Opacity and Blends
************************************************************/
.o_0  {opacity: 0.0 !important;}
.o_1  {opacity: 0.1 !important;}
.o_2  {opacity: 0.2 !important;}
.o_3  {opacity: 0.3 !important;}
.o_4  {opacity: 0.4 !important;}
.o_5  {opacity: 0.5 !important;}
.o_6  {opacity: 0.6 !important;}
.o_7  {opacity: 0.7 !important;}
.o_8  {opacity: 0.8 !important;}
.o_9  {opacity: 0.9 !important;}
.o_10  {opacity: 1.0 !important;}

.mbm_multiply  {mix-blend-mode: multiply !important;}
.mbm_screen    {mix-blend-mode: screen   !important;}
.mbm_lighten    {mix-blend-mode: lighten   !important;}

/***********************************************************
* (XX) Fonts
************************************************************/
.fs_60   {font-size: 0.60rem !important;}
.fs_65   {font-size: 0.65rem !important;}
.fs_70   {font-size: 0.70rem !important;}
.fs_75   {font-size: 0.75rem !important;}
.fs_80   {font-size: 0.80rem !important;}
.fs_85   {font-size: 0.85rem !important;}
.fs_90   {font-size: 0.90rem !important;}
.fs_95   {font-size: 0.95rem !important;}
.fs_100  {font-size: 1.00rem !important;}
.fs_110  {font-size: 1.10rem !important;}
.fs_120  {font-size: 1.20rem !important;}
.fs_130  {font-size: 1.30rem !important;}
.fs_140  {font-size: 1.40rem !important;}
.fs_150  {font-size: 1.50rem !important;}
.fs_160  {font-size: 1.60rem !important;}
.fs_170  {font-size: 1.70rem !important;}
.fs_180  {font-size: 1.80rem !important;}
.fs_190  {font-size: 1.90rem !important;}
.fs_200  {font-size: 2.00rem !important;}
.fs_210  {font-size: 2.10rem !important;}
.fs_220  {font-size: 2.20rem !important;}

.weight_100  {font-weight: 100 !important;}
.weight_200  {font-weight: 200 !important;}
.weight_300  {font-weight: 300 !important;}
.weight_400  {font-weight: 400 !important;}
.weight_500  {font-weight: 500 !important;}
.weight_600  {font-weight: 600 !important;}
.weight_700  {font-weight: 700 !important;}
.weight_800  {font-weight: 800 !important;}
.weight_900  {font-weight: 900 !important;}

.lh_12   {line-height: 1.2 !important;}
.lh_13   {line-height: 1.3 !important;}
.lh_14   {line-height: 1.4 !important;}
.lh_15   {line-height: 1.5 !important;}
.lh_16   {line-height: 1.6 !important;}

.roboto     {font-family: 'Roboto', sans-serif;}
.title_font {font-family: 'Roboto', sans-serif;}

.sr_5   {-webkit-box-shadow: 5px 5px 8px    var(--c_right3);box-shadow: 5px 5px 8px    var(--c_right3); margin-bottom: 5px !important;margin-top: 5px !important;}

/*******************************
* Debug Text
*******************************/
.debug{font-size: 0.8em; margin:0; }
.debug_blue{font-size: 0.8em; color: blue; }
.debug_red{font-size: 0.8em; color: red; }
.debug_green{font-size: 0.8em; color: green; }

/*******************************
* Font Families
*******************************/
.ffh { }
.ffb { }

/*******************************
* Min Widths and Heights
*******************************/

.ch {margin: 0, auto;}
.cv {margin: auto, 0;}
.cb {margin: auto, auto;}

.pt_2  { padding-top: 2px !important;}
.pt_3  { padding-top: 3px !important;}
.pt_4  { padding-top: 4px !important;}
.pt_5  { padding-top: 5px !important;}
.pt_6  { padding-top: 6px !important;}
.pt_7  { padding-top: 7px !important;}
.pt_8  { padding-top: 8px !important;}
.pt_9  { padding-top: 9px !important;}
.pt_10 { padding-top: 10px !important;}

.pt_100 { padding-top: 100px !important;}
.pt_150 { padding-top: 150px !important;}
.pt_200 { padding-top: 200px !important;}

.pb_100 { padding-bottom: 100px !important;}
.pb_150 { padding-bottom: 150px !important;}
.pb_200 { padding-bottom: 200px !important;}

.pt_n100 { padding-top: -100px !important;}
.pt_n150 { padding-top: -150px !important;}
.pt_n200 { padding-top: -200px !important;}

.mt_100 { margin-top: 100px !important;}
.mt_150 { margin-top: 150px !important;}
.mt_200 { margin-top: 200px !important;}

.mt_n100 { padding-top: -100px !important;}
.mt_n150 { padding-top: -150px !important;}
.mt_n200 { padding-top: -200px !important;}

/*******************************
* Min Widths and Heights
*******************************/
.mw_20 { min-width: 20px;}
.mw_40 { min-width: 40px;}
.mw_60 { min-width: 60px;}
.mw_70 { min-width: 70px;}
.mw_80 { min-width: 80px;}
.mw_100 { min-width: 100px;}
.mw_120 { min-width: 120px;}
.mw_140 { min-width: 140px;}
.mw_160 { min-width: 160px;}
.mw_180 { min-width: 180px;}
.mw_200 { min-width: 200px;}

.maxw_300 { max-width: 300px;}
.maxw_400 { max-width: 400px;}
.maxw_500 { max-width: 500px;}
.maxw_600 { max-width: 600px;}
.maxw_720 { max-width: 720px;}


.w_20 { width: 20px !important;}
.w_40 { width: 40px !important;}
.w_60 { width: 60px !important;}
.w_80 { width: 80px !important;}
.w_100 { width: 100px !important;}
.w_120 { width: 120px !important;}
.w_140 { width: 140px !important;}
.w_160 { width: 160px !important;}
.w_180 { width: 180px !important;}
.w_200 { width: 200px !important;}
.w_220 { width: 220px !important;}
.w_240 { width: 230px !important;}
.w_250 { width: 250px !important;}
.w_260 { width: 260px !important;}
.w_280 { width: 280px !important;}
.w_300 { width: 300px !important;}
.w_400 { width: 400px !important;}
.w_500 { width: 500px !important;}
.w_600 { width: 600px !important;}
.w_700 { width: 700px !important;}
.w_800 { width: 800px !important;}
.w_900 { width: 900px !important;}

.mh_20 { min-height: 20px;}
.mh_40 { min-height: 40px;}
.mh_60 { min-height: 60px;}
.mh_80 { min-height: 80px;}
.mh_100 { min-height: 100px;}
.mh_120 { min-height: 120px;}
.mh_140 { min-height: 140px;}
.mh_160 { min-height: 160px;}
.mh_180 { min-height: 180px;}
.mh_200 { min-height: 200px;}

.fw_20   { -webkit-box-flex: 0; -ms-flex: 0 0 20px; flex: 0 0 20px;}
.fw_40   { -webkit-box-flex: 0; -ms-flex: 0 0 40px; flex: 0 0 40px;}
.fw_60   { -webkit-box-flex: 0; -ms-flex: 0 0 60px; flex: 0 0 60px;}
.fw_70   { -webkit-box-flex: 0; -ms-flex: 0 0 70px; flex: 0 0 70px;}
.fw_80   { -webkit-box-flex: 0; -ms-flex: 0 0 80px; flex: 0 0 80px;}
.fw_100  {-webkit-box-flex: 0;-ms-flex: 0 0 100px;flex: 0 0 100px;}
.fw_120  {-webkit-box-flex: 0;-ms-flex: 0 0 120px;flex: 0 0 120px;}
.fw_150  {-webkit-box-flex: 0;-ms-flex: 0 0 150px;flex: 0 0 150px;}
.fw_200  {-webkit-box-flex: 0;-ms-flex: 0 0 200px;flex: 0 0 200px;}
.fw_300  {-webkit-box-flex: 0;-ms-flex: 0 0 300px;flex: 0 0 300px;}
.fw_310  {-webkit-box-flex: 0;-ms-flex: 0 0 310px;flex: 0 0 310px;}
.fw_320  {-webkit-box-flex: 0;-ms-flex: 0 0 320px;flex: 0 0 320px;}
.fw_330  {-webkit-box-flex: 0;-ms-flex: 0 0 330px;flex: 0 0 330px;}
.fw_360  {-webkit-box-flex: 0;-ms-flex: 0 0 360px;flex: 0 0 360px;}

.rc_5  {border-radius:  5px !important;}
.rc_10 {border-radius: 10px !important;}
.rc_15 {border-radius: 15px !important;}
.rc_20 {border-radius: 20px !important;}
.rc_25 {border-radius: 25px !important;}
.rc_30 {border-radius: 30px !important;}
.rc_35 {border-radius: 35px !important;}
.rc_40 {border-radius: 40px !important;}
.rc_45 {border-radius: 45px !important;}
.rc_50 {border-radius: 50px !important;}
.rc_100 {border-radius: 100px !important;}
.rc_150 {border-radius: 150px !important;}
.rc_200 {border-radius: 200px !important;}

.z_1 {z-index: 1 !important;}
.z_2 {z-index: 2 !important;}
.z_3 {z-index: 3 !important;}

.z_n1 {z-index: -1 !important;}
.z_n2 {z-index: -2 !important;}
.z_n3 {z-index: -3 !important;}

.cursor_pointer {cursor:pointer;}
.disable_me {pointer-events: none;}

button.button_hover_underline {text-decoration:underline !important;}

/* Deleted Items listed */
p.is_deleted,
i.is_deleted                  { color: var(--c_left5)!important;                                            text-decoration: line-through;}

/* Hidden items */
p.is_hidden,
i.is_hidden                  { color: var(--c_left5)!important; }
