.ArtBod {
        border-radius:4px; padding:10px; background:#fff;
        text-align:justify;
        color:#000;
}               
.ArtTtl {
        display:block; padding:1em; border-radius:3px;
        background:rgb(100,200,100); color: white;
        font-size:1.6em;
        text-align:center;
}
.ArtHd1 {
        display:inline-block; padding:5px; border-radius:3px;
        background:#888; color:white;

        font-size:1.2em;
        text-align:left;
}
.ArtHd2 {
        display:inline-block; padding:5px; border-radius:3px;
        background:#CCC; color:white;
        font-size:1em;
}
.ArtfrmVHlf {
        width: 50%;
	background:#FFF;color:#888;
}
.ArtTblCnt {
        display:flex; justify-content:center; flex-wrap: wrap;
	padding:2%; margin:1em 0em;background:#AAA;border-radius:4px;
}
.ArtTbl {
        width:100%; border-radius:4px;
        text-align:center;
        background:#AAA; color:white;
}
.ArtTbl td {
        padding:2px 0px;
}
.ArtTblTtl {
        border-radius:4px; padding:5px;
        background:#FFF; color:red;
        text-transform:uppercase; 
}
.ArtTblHd {
        padding:2px;
        color:red;
        text-transform:uppercase;
        width:30%;
        background:#FFF;
        border-radius:3px;
}
.ArtTbl tr:hover {
        background: #888;
        border-radius:4px;
}
.ArtImgCnt1 {
        display:flex;
        flex-flow: row wrap;
}
.ArtImgCnt2 {
        width: 50%;
        border-radius: 4px;
        background:#AAA;
        color:white;
	padding: 2%; 
	margin: 1em 1em;
}
.ArtImgCnt3 {
        display:flex;
        border-radius: 4px;
        background:#CCC;
        color:white;
}
.ArtImgTtl {
        width:100%; margin:0px;
        border-radius:4px; padding:5px; background:#AAA; color:#FFF;
        text-transform:uppercase; text-align: center;
/*      border:1px solid red; */
}

/*-------------------- Start of section to set up graphs with page font sized axis (w text wrap) -----------------------*/
        .ArtImGr {
                display:flex; flex-wrap:wrap; /* makes container scale and elements to not wrap */
                width: calc( 50% - 2em ); min-width: 225px; /* makes container scale */
                padding: 2%; margin:1em;
                background:#AAA; border-radius:4px;
        }
	.ArtImGrPie {
		display:flex; 
		align-items:flex-start;
		justify-content:flex-end;
	}
        .ArtImOnLft {
                float:left; /* puts graph on left side of page */
                margin-left:0%;
        }
        .ArtImOnRgt {
                float:right; /* puts graph on right side of page */
                margin-right:0%;
        }
	.ArtImGrBar {
		min-width:calc( 20em + 6vmin + 4%);
	}
	.ArtPieGraph { width: 100%; }
        @media screen {
                .ArtImGrSz { width: 35%; }
		.ArtImgCnt2 { width: 67%; }
        }
        @media screen and (max-width: 1500px) {
                .ArtImGrSz { width: 40%;}
        }
        @media screen and (max-width: 1024px) {
                .ArtImGrSz { width: 50%; }
		.ArtImgCnt2 { width: 75%; }
        }
        @media screen and (max-width: 768px) {
                .ArtImGrSz { width: 65%; }
		.ArtImgCnt2 { width: 100%; }
        }
        @media screen and (max-width: 480px) {
                .ArtImGrSz { width: calc( 100% ); } /* makes image full width exclude margin set on both sides */
                .ArtImOnLft {margin-right:0%;}
                .ArtImOnRgt {margin-left:0%;}
		.ArtImGrBar { min-width: 100%; }
        	.ArtfrmVHlf { width: 100%; }
        }
        .ArtImGrSt {
                display:flex; flex-wrap:nowrap; /* makes container scale and elements to not wrap */
                width: 100%; /* makes container scale */
                align-items: center; /* makes y-axis centrally placed vertically */
                background:#FFF; color:#888;
        }
        .ArtImGrFr {
        /*      display:inline-block; */
                border:2vmin solid #FFF;
        }
        .ArtImGrFrLft {
                border:2vmin solid #FFF;
                border-right:0vmin;
        }
        .ArtImGrFrRgt {
                border:2vmin solid #FFF;
                border-left:0vmin;
        }
        .ArtImGrFrBtm {
                border:2vmin solid #FFF;
                border-top:0vmin;
        }
        .ArtImGrFrBtmLft {
                border:2vmin solid #FFF;
                border-top:0vmin;
                border-right:0vmin;
        }
        .YAxsTtlCnt {
                width: calc( 2.4em + 2vmin ); min-width: calc( 2.4em + 2vmin ); max-width: calc( 2.4em + 2vmin ); /* 3em allows 2 vertical lines */
        }
        .YAxsTtl {
                writing-mode:vertical-rl; transform: rotate(180deg); /* sets vertical lines in proper orientation */
                text-align:center; /* makes 2 lines aligned centrally */
		white-space: nowrap;
        }
        .XYAxsCr {
                width: calc( 2.4em + 2vmin ); min-width: calc( 2.4em + 2vmin); /* allows 2 vertical lines */
                min-height: calc( 2.4em + 2vmin) ; /* allows 2 horizontal lines */
        }
        .XAxsTtl {
                height: calc( 2.4em + 2vmin) ; /* 2em allows 2 horizontal lines */
                width: calc( 100% - 2.4em - 2vmin);
                text-align:center; /* makes 2 lines aligned centrally */
		white-space: nowrap;
        }
        .ArtGraph {
                width: calc( 100% - 2.4em - 2vmin); /* makes graph scale excluding subtract Y-axis width & margin; remember to subtract image margin too if set */
        }
        .YAxsLblCnt {
                display:flex; flex-wrap:wrap; align-items:center; /* makes all labels lined one below another spread across */
                min-width:calc( 10em + 2vmin); width:calc( 10em + 2vmin ); height: calc( 300px + 4vmin); /* 10em allows segment labels  */
        }
        .YAxsLbl {
                margin:0.0em; min-width:10em; /* 10em allows segment labels  */
                text-align:right; /* makes 2 lines aligned centrally */
		white-space: nowrap;
        }
        .XAxsLblCnt {
                margin:0.0em; min-width:calc( 10em + 2vmin); width:calc( 10em + 2vmin ); height: calc( px + vmin); /* 10em allows segment labels  */
                text-align: right;
		white-space: nowrap;
        }
        .XAxsScl {
                width: calc( 100% - 10em - 2vmin - 0.0em); /* makes graph scale excluding subtract Y-var width & margin; remember to subtract image margin too if set */
                text-align: center;
		white-space: nowrap;
        }
        .ArtBarGraph {
                width: calc( 100% - 10em - 2vmin - 0.0em); /* makes graph scale excluding subtract Y-var width & margin; remember to subtract image margin too if set */
                height: calc( 300px + 4vmin);
        }

/*---------------------- End of section to set up graphs with page font sized axis (w text wrap) -----------------------*/

	@media screen {
		#ict1 { display:inline; }
		#ict2 { display:none; }
	}
			
        @media screen and (max-width:400px) {
		#ict1 { display:none; }
		#ict2 { display:inline; }
	}