/* ==========================================================================
   Desktop
   ========================================================================== */
@media (min-width: 1000px) {
	/*Product Info layout template*/
	div.mainhoriztonalscrollmask{float:left; width:100%; background-color:#f3f3f3;}
	div.mainhoriztonalscrollbox{float:left; width:100%;background-color:#f3f3f3;}
	div.mainhortizonalinfobox{float:left;width:19%; height:300px;margin:0px 1% 15px 0px;  background-color:#666666; color:#FFF; padding:10px;}
	
}

/* ========================================================================== */
/* ========================================================================== */
	/*Tablet - Mobile. 360,375,414,768(666)*/
@media (min-width: 667px) and (max-width: 999px){
	/*Tablet. Width is 768px*/
	/*Product Info layout template*/
	div.mainhortizonalinfobox{float:left;width:200px;height:300px; margin:0px 10px 0px 0px; background-color:#666666; color:#FFF; padding:10px;}
}

@media (min-width: 414px) and (max-width: 666px){
	/*Mobile iphone XS  + Samsung Note 9. Width is 414px.*/
	/*Product Info layout template*/
	div.mainhortizonalinfobox{float:left;width:190px;height:310px; margin:0px 10px 0px 0px; background-color:#666666; color:#FFF; padding:10px;}
}

@media (min-width: 375px) and (max-width: 413px){
	/*Mobile iphone 6/7/8/X/XS. Width is 375px*/
	/*Product Info layout template*/
	div.mainhortizonalinfobox{float:left;width:180px;height:320px; margin:0px 10px 0px 0px; background-color:#666666; color:#FFF; padding:10px;}
}

@media (min-width: 0px) and (max-width: 374px){
	/*Mobile Samsung S9/S9+. Width is 360px*/
	/*Product Info layout template*/
	div.mainhortizonalinfobox{float:left;width:170px;height:330px; margin:0px 10px 0px 0px; background-color:#666666; color:#FFF; padding:10px;}
}

@media (min-width: 0px) and (max-width: 666px){
	/*Tablet to Mobile Range*/
}

/* ========================================================================== */
/* ========================================================================== */


/* ==========================================================================
   Mobile
   ========================================================================== */
@media (min-width: 0px) and (max-width: 999px){
	/*Product Info layout template*/
	div.mainhoriztonalscrollmask{float:left; width:100%; padding:0px 0px 20px 0px;overflow-x:scroll;}
	div.mainhoriztonalscrollbox{float:left; min-width:100%;background-color:#f3f3f3;}

	/* mainhoriztonalscrollmask Scrollbar width */
	div.mainhoriztonalscrollmask::-webkit-scrollbar {width: 10px;height: 5px;}
	/* mainhoriztonalscrollmask Scrollbar Track */
	div.mainhoriztonalscrollmask::-webkit-scrollbar-track {background: #d6d6d6; }
	/* mainhoriztonalscrollmask Scrollbar Handle */
	div.mainhoriztonalscrollmask::-webkit-scrollbar-thumb {background: #ff3333; }	
	/* mainhoriztonalscrollmask Scrollbar Handle on hover */
	div.mainhoriztonalscrollmask::-webkit-scrollbar-thumb:hover {background: #ff3333;}

}

/* ==========================================================================
   Share CSS
   ========================================================================== */

/*Table layout template*/
div.mainhorizontaltablebox{float:left; position:relative; width:100%;}
table.mainhorizontaltabletitle{position:absolute; border-collapse:collapse; width:120px;left:0px; top:15px; /*15px based on mainhorizontaltable margin top*/ }
table.mainhorizontaltabletitle td{background-color:#666666; color:#FFFFFF; }
div.mainhorizontaltablemask{float:left; width:100%; overflow-x: scroll;}
table.mainhorizontaltable{float:left; min-width:1000px; border-collapse:collapse; margin:15px 0px 15px 119px; /*120px - 1px based on table title table width*/}
table.mainhorizontaltabletitle td,table.mainhorizontaltable td{padding:10px; vertical-align:top; border:#000 solid 1px;}
table.mainhorizontaltabletitle tr.maintablecolthreerow td,table.mainhorizontaltable tr.maintablecolthreerow td{height:60px; }
/* mainhorizontaltablemask Scrollbar width */
div.mainhorizontaltablemask::-webkit-scrollbar {width: 10px;height: 5px;}
/* mainhorizontaltablemask Scrollbar Track */
div.mainhorizontaltablemask::-webkit-scrollbar-track {background: #d6d6d6; }
/* mainhorizontaltablemask Scrollbar Handle */
div.mainhorizontaltablemask::-webkit-scrollbar-thumb {background: #ff3333; }	
/* mainhorizontaltablemask Scrollbar Handle on hover */
div.mainhorizontaltablemask::-webkit-scrollbar-thumb:hover {background: #ff3333;}