/* https://www.cssscript.com/demo/pure-css3-html-list-based-column-bar-chart/ */

/*BEG ==================== 414 GRAPH ===================== */
div.eventGraph414 {
  position: absolute; top: 0px; left: 0px;
		margin: 0px; padding: 0px;
  width: 412px; height: 232px;
  font-size: 13px; font-family: arial, sans-serif; font-weight: normal; color: #444;
  background-color: #fff; border: 1px solid #C0C0C0;
  }
div.eventGraph414 ul {margin: 0px; padding: 0px; list-style-type: none;}
div.eventGraph414 li {margin: 0px; padding: 0px;}

/* ------ TITLE --------------- */
div.eventGraph414 p.loanEvents12 {
  position: absolute; top: 0px; left: 0px;
  height: 18px; width: 412px;
  padding: 0px 0px; margin: 0px;
		font-family: Arial;
  color: #111111; font-size: 13px; font-weight: bold; text-align: center;
  background: #fff; border: 0px; 
  }

/* ------ X-AXIS LABELS ------- */
div.eventGraph414 ul.xAxis12 {
  position: absolute; bottom: 0px; left: 0px;
  width: 398px; height: 24px; margin-left: 7px;
  text-align: center;
		background: #fff; border-top: 1px solid #777;
		background: #fff url(../images/backGraphAxisX.gif) no-repeat; 
		color: #777; font-size: 11px; font-family: Arial;
  }
div.eventGraph414 ul.xAxis12 li {display: inline; width: 32px; float: left; margin-top: 5px; margin-left: 1px;}

/* ------ GRAPH --------------- */
div.eventGraph414 div.graph414 {width: 100%; height: 100%; float: left;}
div.eventGraph414 div.graph414 li.bar12 {
  width: 19px;
  position: absolute; bottom: 24px;
  text-align: center;
  float: left;
  }

/* ------ bar top label ------- */
div.eventGraph414 div.graph414 li.bar12 span.labelDouble, div.eventGraph414 div.graph414 li.bar12 span.labelSingle {
  position: relative; left: -4px; top: -19px; /* minus is above, positive below */
  padding: 0px; background-color: transparent; border: 0px; z-index: 100;
		color: #485763; font-size: 11px; font-family: Arial;
  }
div.eventGraph414 div.graph414 li.bar12 span.labelSingle {left: -1px;}

/* ------ bar positions ------- */
div.eventGraph414 div.graph414 li.col01 {left: 14px;}
div.eventGraph414 div.graph414 li.col02 {left: 47px;}
div.eventGraph414 div.graph414 li.col03 {left: 80px;}
div.eventGraph414 div.graph414 li.col04 {left: 113px;}
div.eventGraph414 div.graph414 li.col05 {left: 146px;}
div.eventGraph414 div.graph414 li.col06 {left: 179px;}
div.eventGraph414 div.graph414 li.col07 {left: 213px;}
div.eventGraph414 div.graph414 li.col08 {left: 246px;}
div.eventGraph414 div.graph414 li.col09 {left: 279px;}
div.eventGraph414 div.graph414 li.col10 {left: 312px;}
div.eventGraph414 div.graph414 li.col11 {left: 345px;}
div.eventGraph414 div.graph414 li.col12 {left: 378px;}
/*END ==================== 414 GRAPH ===================== */


/*BEG ==================== 450 GRAPH ===================== */
div.eventGraph450 {
  position: absolute; top: 0px; left: 0px;
		margin: 0px; padding: 0px;
  width: 448px; height: 232px;
  font-size: 13px; font-family: arial, sans-serif; font-weight: normal; color: #444;
  background-color: #fff; border: 1px solid #C0C0C0;
  }
div.eventGraph450 ul {margin: 0px; padding: 0px; list-style-type: none;}
div.eventGraph450 li {margin: 0px; padding: 0px;}

/* ------ TITLE --------------- */
div.eventGraph450 p.loanEvents12 {
  position: absolute; top: 0px; left: 0px;
  height: 18px; width: 448px;
  padding: 0px 0px; margin: 0px;
		font-family: Arial;
  color: #111111; font-size: 13px; font-weight: bold; text-align: center;
  background: #fff; border: 0px; 
  }

/* ------ X-AXIS LABELS ------- */
div.eventGraph450 ul.xAxis12 {
  position: absolute; bottom: 0px; left: 0px;
  width: 434px; height: 24px; margin-left: 7px;
  text-align: center;
		border-top: 1px solid #777;
		background: #fff url(../images/backGraphAxis450b.gif) no-repeat; 
		color: #777; font-size: 11px; font-family: Arial;
  }
div.eventGraph450 ul.xAxis12 li {display: inline; width: 35px; float: left; margin-top: 5px; margin-left: 1px;}

/* ------ GRAPH --------------- */
div.eventGraph450 div.graph450 {width: 100%; height: 100%; float: left;}
div.eventGraph450 div.graph450 li.bar12 {
  width: 19px;
  position: absolute; bottom: 24px;
  text-align: center;
  float: left;
  }

/* ------ bar top label ------- */
div.eventGraph450 div.graph450 li.bar12 span.labelDouble, div.eventGraph450 div.graph450 li.bar12 span.labelSingle {
  position: relative; left: -4px; top: -19px; /* minus is above, positive below */
  padding: 0px; background-color: transparent; border: 0px; z-index: 100;
		color: #485763; font-size: 11px; font-family: Arial;
  }
div.eventGraph450 div.graph450 li.bar12 span.labelSingle {left: -1px;}

/* ------ bar positions ------- */
div.eventGraph450 div.graph450 li.col01 {left: 15px;}
div.eventGraph450 div.graph450 li.col02 {left: 51px;}
div.eventGraph450 div.graph450 li.col03 {left: 87px;}
div.eventGraph450 div.graph450 li.col04 {left: 123px;}
div.eventGraph450 div.graph450 li.col05 {left: 159px;}
div.eventGraph450 div.graph450 li.col06 {left: 195px;}
div.eventGraph450 div.graph450 li.col07 {left: 232px;}
div.eventGraph450 div.graph450 li.col08 {left: 268px;}
div.eventGraph450 div.graph450 li.col09 {left: 304px;}
div.eventGraph450 div.graph450 li.col10 {left: 340px;}
div.eventGraph450 div.graph450 li.col11 {left: 376px;}
div.eventGraph450 div.graph450 li.col12 {left: 412px;}
/*END ==================== 450 GRAPH ===================== */


/*BEG ==================== 414B GRAPH ==================== */
div.eventGraph414B {
  position: absolute; top: 0px; left: 0px;
		margin: 0px; padding: 0px;
  width: 412px; height: 232px;
  font-size: 13px; font-family: arial, sans-serif; font-weight: normal; color: #444;
  background-color: #000; border: 1px solid #888888;
  }
div.eventGraph414B ul {margin: 0px; padding: 0px; list-style-type: none;}
div.eventGraph414B li {margin: 0px; padding: 0px;}

/* ------ TITLE --------------- */
div.eventGraph414B p.loanEvents12 {
  position: absolute; top: 0px; left: 0px;
  height: 18px; width: 412px;
  padding: 0px 0px; margin: 0px;
		font-family: Arial;
  color: #888888; font-size: 13px; font-weight: bold; text-align: center;
  background: #000; border: 0px; 
  }

/* ------ X-AXIS LABELS ------- */
div.eventGraph414B ul.xAxis12 {
  position: absolute; bottom: 0px; left: 0px;
  width: 398px; height: 24px; margin-left: 7px;
  text-align: center;
		background: #000 url(../images/backGraphAxisXb.gif) no-repeat; 
		color: #888; font-size: 11px; font-family: Arial;
  }
div.eventGraph414B ul.xAxis12 li {display: inline; width: 32px; float: left; margin-top: 5px; margin-left: 1px;}

/* ------ GRAPH --------------- */
div.eventGraph414B div.graph414B {width: 100%; height: 100%; float: left;}
div.eventGraph414B div.graph414B li.bar12 {
  width: 19px;
  position: absolute; bottom: 24px;
  text-align: center;
  float: left;
  }

/* ------ bar top label ------- */
div.eventGraph414B div.graph414B li.bar12 span.labelDouble, div.eventGraph414B div.graph414B li.bar12 span.labelSingle {
  position: relative; left: -4px; top: -19px; /* minus is above, positive below */
  padding: 0px; background-color: transparent; border: 0px; z-index: 100;
		color: #ACACAC; font-size: 11px; font-family: Arial;
  }
div.eventGraph414B div.graph414B li.bar12 span.labelSingle {left: -1px;}

/* ------ bar positions ------- */
div.eventGraph414B div.graph414B li.col01 {left: 14px;}
div.eventGraph414B div.graph414B li.col02 {left: 47px;}
div.eventGraph414B div.graph414B li.col03 {left: 80px;}
div.eventGraph414B div.graph414B li.col04 {left: 113px;}
div.eventGraph414B div.graph414B li.col05 {left: 146px;}
div.eventGraph414B div.graph414B li.col06 {left: 179px;}
div.eventGraph414B div.graph414B li.col07 {left: 213px;}
div.eventGraph414B div.graph414B li.col08 {left: 246px;}
div.eventGraph414B div.graph414B li.col09 {left: 279px;}
div.eventGraph414B div.graph414B li.col10 {left: 312px;}
div.eventGraph414B div.graph414B li.col11 {left: 345px;}
div.eventGraph414B div.graph414B li.col12 {left: 378px;}
/*END ==================== 414B GRAPH ==================== */


/*BEG ==================== 450B GRAPH ==================== */
div.eventGraph450B {
  position: absolute; top: 0px; left: 0px;
		margin: 0px; padding: 0px;
  width: 448px; height: 232px;
  font-size: 13px; font-family: arial, sans-serif; font-weight: normal; color: #444;
  background-color: #000; border: 1px solid #000;
  }
div.eventGraph450B ul {margin: 0px; padding: 0px; list-style-type: none;}
div.eventGraph450B li {margin: 0px; padding: 0px;}

/* ------ TITLE --------------- */
div.eventGraph450B p.loanEvents12 {
  position: absolute; top: 0px; left: 0px;
  height: 18px; width: 448px;
  padding: 0px 0px; margin: 0px;
		font-family: Arial;
  color: #888888; font-size: 13px; font-weight: bold; text-align: center;
  background: #000; border: 0px; 
  }

/* ------ X-AXIS LABELS ------- */
div.eventGraph450B ul.xAxis12 {
  position: absolute; bottom: 0px; left: 0px;
  width: 434px; height: 24px; margin-left: 7px;
  text-align: center;
		background: #000 url(../images/backGraphAxis450c.gif) no-repeat;
		color: #888; font-size: 11px; font-family: Arial;
  }
div.eventGraph450B ul.xAxis12 li {display: inline; width: 35px; float: left; margin-top: 5px; margin-left: 1px;}

/* ------ GRAPH --------------- */
div.eventGraph450B div.graph450B {width: 100%; height: 100%; float: left;}
div.eventGraph450B div.graph450B li.bar12 {
  width: 19px;
  position: absolute; bottom: 24px;
  text-align: center;
  float: left;
  }

/* ------ bar top label ------- */
div.eventGraph450B div.graph450B li.bar12 span.labelDouble, div.eventGraph450B div.graph450B li.bar12 span.labelSingle {
  position: relative; left: -4px; top: -19px; /* minus is above, positive below */
  padding: 0px; background-color: transparent; border: 0px; z-index: 100;
		color: #ACACAC; font-size: 11px; font-family: Arial;
  }
div.eventGraph450B div.graph450B li.bar12 span.labelSingle {left: -1px;}

/* ------ bar positions ------- */
div.eventGraph450B div.graph450B li.col01 {left: 15px;}
div.eventGraph450B div.graph450B li.col02 {left: 51px;}
div.eventGraph450B div.graph450B li.col03 {left: 87px;}
div.eventGraph450B div.graph450B li.col04 {left: 123px;}
div.eventGraph450B div.graph450B li.col05 {left: 159px;}
div.eventGraph450B div.graph450B li.col06 {left: 195px;}
div.eventGraph450B div.graph450B li.col07 {left: 232px;}
div.eventGraph450B div.graph450B li.col08 {left: 268px;}
div.eventGraph450B div.graph450B li.col09 {left: 304px;}
div.eventGraph450B div.graph450B li.col10 {left: 340px;}
div.eventGraph450B div.graph450B li.col11 {left: 376px;}
div.eventGraph450B div.graph450B li.col12 {left: 412px;}
/*END ==================== 450B GRAPH ==================== */


/*BEG ==================== 920B GRAPH ==================== */
div.forty920B {
  position: absolute; top: 0px; left: 20px;
		margin: 0px; padding: 0px;
  width: 920px; height: 233px;
  font-size: 13px; font-family: arial, sans-serif; font-weight: normal; color: #444;
  background-color: #000; border: 0px;
		/* background: pink; */
		background: #000 url(../images/backWLM40.gif) no-repeat;
  }
div.forty920B ul {margin: 0px; padding: 0px; list-style-type: none;}
div.forty920B li {margin: 0px; padding: 0px;}

/* ------ TITLE --------------- */
div.forty920B p.loanEvents40 {
  position: absolute; top: 0px; left: 0px;
  height: 19px; width: 920px;
  padding: 2px 0px 0px 0px; margin: 0 2px 0 0;
		font-family: Arial;
  color: #C0C0C0; font-size: 13px; font-weight: bold; text-align: center;
  background: #000; border: 0px; border-bottom: 1px solid #555555;
  }

/* ------ X-AXIS LABELS ------- */
div.forty920B ul.xAxis40 {
  position: absolute; bottom: 0px; left: 0px;
  width: 906px; height: 22px; margin-left: 10px;
  text-align: center;
/*		background: #000 url(../images/backGraphAxis450.gif) no-repeat;  */
		color: #888; font-size: 11px; font-family: Arial;
  }
div.forty920B ul.xAxis40 li {display: inline; width: 6px; float: left; margin-top: 5px; margin-left: 16px; transform: rotate(270deg);}

/* ------ GRAPH --------------- */
div.forty920B div.graph920B {width: 100%; height: 100%; float: left;}
div.forty920B div.graph920B li.bar40 {
  width: 21px;
  position: absolute; bottom: 38px;
  text-align: center;
  float: left;
  }

/* ------ bar top label ------- */
div.forty920B div.graph920B li.bar40 span.labelDouble, div.forty920B div.graph920B li.bar40 span.labelSingle {
  position: relative; left: -4px; top: -19px; /* minus is above, positive below */
  padding: 0px; background-color: transparent; border: 0px; z-index: 100;
		color: #CBCBFE; font-weight: bold; font-size: 11px; font-family: Arial;
  }
div.forty920B div.graph920B li.bar40 span.labelSingle {left: -1px;}

/* ------ bar positions ------- */
div.forty920B div.graph920B li.col01 {left: 20px;}
div.forty920B div.graph920B li.col02 {left: 42px;}
div.forty920B div.graph920B li.col03 {left: 64px;}
div.forty920B div.graph920B li.col04 {left: 86px;}
div.forty920B div.graph920B li.col05 {left: 108px;}
div.forty920B div.graph920B li.col06 {left: 130px;}
div.forty920B div.graph920B li.col07 {left: 152px;}
div.forty920B div.graph920B li.col08 {left: 174px;}
div.forty920B div.graph920B li.col09 {left: 196px;}
div.forty920B div.graph920B li.col10 {left: 218px;}

div.forty920B div.graph920B li.col11 {left: 240px;}
div.forty920B div.graph920B li.col12 {left: 262px;}
div.forty920B div.graph920B li.col13 {left: 284px;}
div.forty920B div.graph920B li.col14 {left: 306px;}
div.forty920B div.graph920B li.col15 {left: 328px;}
div.forty920B div.graph920B li.col16 {left: 350px;}
div.forty920B div.graph920B li.col17 {left: 372px;}
div.forty920B div.graph920B li.col18 {left: 394px;}
div.forty920B div.graph920B li.col19 {left: 416px;}
div.forty920B div.graph920B li.col20 {left: 438px;}

div.forty920B div.graph920B li.col21 {left: 460px;}
div.forty920B div.graph920B li.col22 {left: 482px;}
div.forty920B div.graph920B li.col23 {left: 504px;}
div.forty920B div.graph920B li.col24 {left: 526px;}
div.forty920B div.graph920B li.col25 {left: 548px;}
div.forty920B div.graph920B li.col26 {left: 570px;}
div.forty920B div.graph920B li.col27 {left: 592px;}
div.forty920B div.graph920B li.col28 {left: 614px;}
div.forty920B div.graph920B li.col29 {left: 636px;}
div.forty920B div.graph920B li.col30 {left: 658px;}

div.forty920B div.graph920B li.col31 {left: 680px;}
div.forty920B div.graph920B li.col32 {left: 702px;}
div.forty920B div.graph920B li.col33 {left: 724px;}
div.forty920B div.graph920B li.col34 {left: 746px;}
div.forty920B div.graph920B li.col35 {left: 768px;}
div.forty920B div.graph920B li.col36 {left: 790px;}
div.forty920B div.graph920B li.col37 {left: 812px;}
div.forty920B div.graph920B li.col38 {left: 834px;}
div.forty920B div.graph920B li.col39 {left: 856px;}
div.forty920B div.graph920B li.col40 {left: 878px;}
/*END ==================== 920B GRAPH ==================== */



/*BEG ==================== BAR COLORS ==================== */
li.brick, li.brickY {
   background-repeat: repeat;
   background-image: url(../images/backGraphBrickDefault.gif), linear-gradient(#FFFFFF, #CFDBE9); 
			background-blend-mode: multiply;
			border: 1px solid #555555;
			}
li.brickY {background-image: url(../images/backGraphBrickYellow.gif), linear-gradient(#FFFFFF, #F1E9CE);}
			
li.assetBlue {background-image: linear-gradient(#B8C8EA, #2A4171); border: 1px solid #000146;}
li.loanColor {background-image: linear-gradient(#BDACE3, #613FA5); border: 1px solid #613FA5;}

li.guarBlue {background: url(../images/backGraphGuar.gif) repeat; border: 1px solid #7FA7CC;}
li.guarGreen {background: url(../images/backGraphGuarTPD.gif) repeat; border: 1px solid #90BA54;}

li.groP {background-image: linear-gradient(#83C4F9, #4081B2); border: 1px solid #83C4F9;}
li.groN {background-image: linear-gradient(#AE96CC, #8461AB); border: 1px solid #AE96CC;}
li.TPD {background-image: linear-gradient(#E8A600, #D29200); border: 1px solid #F7C100;}
li.NPL {background-image: linear-gradient(#D76527, #C34A08); border: 1px solid #E37032;}
li.CO {background-image: linear-gradient(#F23425, #BA0E00); border: 1px solid #F23425;}

li.TDR {background-image: linear-gradient(#EFE3A4, #B6A446); border: 1px solid #EFE3A4;}
li.LLA {background-image: linear-gradient(#ABC1D4, #547490); border: 1px solid #ABC1D4;}
li.UC {background-image: linear-gradient(#B7D9D0, #658E83); border: 1px solid #B7D9D0;}
li.LNS {background-image: linear-gradient(#AFBAC5, #6E7986); border: 1px solid #AFBAC5;}
li.FND {background-image: linear-gradient(#E2D7E0, #9A7A93); border: 1px solid #E2D7E0;}
li.REO {background-image: linear-gradient(#F5A4A2, #E05250); border: 1px solid #F5A4A2;}


li.groPw {background-image: linear-gradient(#83C4F9, #2e6188); border: 1px solid #333333;}
li.groNw {background-image: linear-gradient(#AE96CC, #8461AB); border: 1px solid #333333;}
li.TPDw {background-image: linear-gradient(#F9C600, #E29C00); border: 1px solid #333333;}
li.NPLw {background-image: linear-gradient(#fa925a, #b75c2a); border: 1px solid #333333;}
li.COw {background-image: linear-gradient(#ff3727, #aa1004); border: 1px solid #333333;}

li.TDRw {background-image: linear-gradient(#FEF3BA, #B6A446); border: 1px solid #333333;}
li.LLAw {background-image: linear-gradient(#ABC1D4, #3f5b72); border: 1px solid #333333;}
li.UCw {background-image: linear-gradient(#B7D9D0, #658E83); border: 1px solid #333333;}
li.LNSw {background-image: linear-gradient(#b5c1ce, #6E7986); border: 1px solid #333333;}
li.FNDw {background-image: linear-gradient(#E2D7E0, #775d72); border: 1px solid #333333;}
li.REOw {background-image: linear-gradient(#F5A4A2, #E05250); border: 1px solid #333333;}

li.zero {background: #fff; border: 0px; border-bottom: 1px solid #777777;}

li.purple40 {background: #666699; border: 0px;}
li.purple40inv {background-image: linear-gradient(#CBCBFE, #666699); border: 0px;}
/*END ==================== BAR COLORS ==================== */



li.nfTPD {background: url(../images/eventTPD.gif) repeat-x; background-size: 100% 100%; border: 1px solid #B15C00;}
li.nfNPL {background: url(../images/eventNPL.gif) repeat-x; background-size: 100% 100%; border: 1px solid #A74514;}

li.colB {background-image: linear-gradient(#83C4F9, #4081B2); border: 1px solid #4081B2;}
li.colP {background-image: linear-gradient(#AE96CC, #8461AB); border: 1px solid #8461AB;}
li.colY {background-image: linear-gradient(#E8A600, #D29200); border: 1px solid #D29200;}
li.colO {background-image: linear-gradient(#D76527, #C34A08); border: 1px solid #C34A08;}
li.colR {background-image: linear-gradient(#F23425, #BA0E00); border: 1px solid #BA0E00;}

li.crcB {background: url(../images/eventBlue.jpg) repeat-x; background-size: 100% 100%; border: 1px solid #4B7CA4;}
li.crcP {background: url(../images/eventGROn.gif) repeat-x; background-size: 100% 100%; border: 1px solid #662C91;}
li.crcR {background: url(../images/eventCO.gif) repeat-x; background-size: 100% 100%; border: 1px solid #9A2C2D;}

li.NPL12 {background: url(../images/eventRS.gif) repeat-x; background-size: 100% 100%; border: 1px solid #DF6F1E;}
li.CO12 {background: url(../images/eventDQ.gif) repeat-x; background-size: 100% 100%; border: 1px solid #ED1B23;}


li.lnG {
   background-repeat: repeat;
   background-image: url(../images/lnEvent4.gif), linear-gradient(#C6FFA1, #377E07); 
			background-blend-mode: multiply;
			border: 1px solid #375623;
			}
li.lnB {
   background-repeat: repeat;
   background-image: url(../images/lnEvent4.gif), linear-gradient(#747F8D, #DCE4EE); 
			background-blend-mode: luminosity;
			border: 1px solid #747F8D;
			}
li.lnM {
   background-repeat: repeat;
   background-image: url(../images/lnEvent4.gif), linear-gradient(#A7E6FF, #0090C6);
			background-blend-mode: multiply;
			border: 1px solid #0076A3;
			}
/*
li.lnM {
   background-repeat: repeat;
   background-image: url(../images/lnEvent4.gif), linear-gradient(#F0D1FE, #A24CCB);
			background-blend-mode: multiply;
			border: 1px solid #8644A5;
			}
*/

/*
li.lnG {background: url(../images/lnEvent3.gif) repeat-x; background-size: 100% 100%; border: 1px solid #6A9240;}
*/