/******************************************************
 *
 *			rMateH5 Global
 *
 *****************************************************/

/* root default */
.rMateH5__Root{
	color:#000000;
	font-size:11px;
	line-height:1.2;
	font-style:normal;
	font-weight:normal;
	font-variant:normal;
	font-stretch:normal;
	font-family : inherit;

	box-sizing : border-box;
	-moz-box-sizing : border-box;
	-webkit-box-sizing : border-box;
}

.rMateH5__Root *{
	box-sizing : border-box;
	-moz-box-sizing : border-box;
	-webkit-box-sizing : border-box;

	/* 모바일에서 꾹 누르고 있을 경우 발생하는 회색 박스 삭제 */
	-webkit-tap-highlight-color : rgba(0, 0, 0, 0);
}

/******************************************************
 *
 *			Chart Common
 *
 *****************************************************/

.rMateH5__pointer-events-none{
	pointer-events:none;
}

.rMateH5__cursor-pointer{
	cursor:pointer;
}

/******************************************************
 *
 *			rMateChart
 *
 *****************************************************/

.rMateH5__rMateChart, .rMateH5__TrialMarkBox{
	color:#777777;
	cursor:default;

	/* html요소가 드래그 되거나 더블 클릭 등 셀렉트 되었다고 판단 시 나오는 파란 박스 삭제 */
	user-select: none;
	-ms-user-select: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
}

.rMateH5__rMateChart > .rMateH5__ContentPane{
	padding:2px;
}

/******************************************************
 *
 *			DataTip, AxisDataTip
 *
 *****************************************************/

.rMateH5__DataTip, .rMateH5__AxisDataTip{
	opacity:0;
	color:#888;
	font-size:12px;
	font-style:normal;
	position:absolute;
	padding:4px 10px;
	cursor:default;
	white-space:nowrap;
	border-radius:4px;
	border-width:1px;
	border-style:solid;
	border-color:#e9e9e9;
	background-color:#fff;
	filter:alpha(opacity=100);
	background-color:rgba(255, 255, 255, 0.9);
	z-index:1;
}

.rMateH5__DataTipTransition{
	transition:left 200ms, top 200ms, border 0.5s, opacity 0.5s;
	transition-timing-function:ease-out;
	-webkit-transition:left 200ms, top 200ms, border 0.5s, opacity 0.5s;
	-webkit-transition-timing-function:ease-out;
}

.rMateH5__DataTipMarker{
	float:left;
	width:9px;
	height:9px;
	margin-top:3px;
	border:1px solid #ffffff;
}

.rMateH5__show_data_tip{
	opacity:1;
}

/******************************************************
 *
 *			Caption, SubCaption
 *
 *****************************************************/

.rMateH5__Caption{
	font-size : 14px;
	color : #333333;
	text-align : center;
}

.rMateH5__SubCaption{
	font-size : 11px;
	color : #999999;
	text-align : center;	
}

/******************************************************
 *
 *			Line2DSeries DisplayNameLabel
 *
 *****************************************************/

.rMateH5__DisplayNameLabel{
	cursor:default;
	white-space:nowrap;
}

/******************************************************
 *
 *			Legend
 *
 *****************************************************/

/* Legend */
.rMateH5__Legend, .rMateH5__SubLegend{
	border:1px solid #e9e9e9;
	font-size:11px;
	font-weight:normal;
	color:#888;
	background-color:#ffffff;
	cursor:default;
}

/* Legend - ContentPane */
.rMateH5__Legend .rMateH5__ContentPane, .rMateH5__SubLegend .rMateH5__ContentPane{
	padding:5px;
}

.rMateH5__LegendItem, .rMateH5__CheckableLegendItem{
	padding-left:0px;
	padding-top:0px;
	padding-right:0px;
	padding-bottom:0px;
	border:0px none;
	background-color:rgba(255, 255, 255, 0);
	white-space:nowrap;
}

/* unchecked */
.rMateH5__UnChecked{
	color:#ccc;
}

.rMateH5__un-focused{
	opacity:0.2;
	filter:alpha(opacity=20);
}

/* IE 8 */
.rMateH5__un-focused{
	visibility:hidden;
}	
@media only all{
	.rMateH5__un-focused{
		visibility:visible;
	}	
}

/******************************************************
 *
 *			ColorRangeLegend
 *
 *****************************************************/

/* ColorRangeLegend */
.rMateH5__ColorRangeLegend{
	position:absolute;
	overflow:hidden;
	font-size:11px;
	color:#555555;
	cursor:default;
}

/* ColorRangeLegend - Label */
.rMateH5__ColorRangeLegend_Label{
	position:absolute;
}

/* ColorRangeLegend - Horizontal Arrow */
.rMateH5__ColorRangeLegend_HArrow{
	width:5px;
	height:5px;
	border-top:5px solid #555555;
	border-left:2.5px solid transparent;
	border-right:2.5px solid transparent;
	border-bottom:5px solid transparent;
	position:absolute;
	box-sizing:border-box;
}

/* ColorRangeLegend - Vertical Arrow */
.rMateH5__ColorRangeLegend_VArrow{
	width:5px;
	height:5px;
	border-top:2.5px solid transparent;
	border-left:5px solid transparent;
	border-right:5px solid #555555;
	border-bottom:2.5px solid transparent;
	position:absolute;
	box-sizing:border-box;
}

/* for IE7 */
*.rMateH5__ColorRangeLegend_HArrow{
	width:2px;
	height:2px;
	border-top:5px solid #555555;
	border-left:2.5px solid transparent;
	border-right:2.5px solid transparent;
	border-bottom:5px solid transparent;
	position:absolute;
}

*.rMateH5__ColorRangeLegend_VArrow{
	width:2px;
	height:2px;
	border-top:2.5px solid transparent;
	border-left:6px solid transparent;
	border-right:5px solid #555555;
	border-bottom:2.5px solid transparent;
	position:absolute;
}
/* for IE7 end */

/******************************************************
 *
 *			Chart Menu
 *
 *****************************************************/

/* Chart Menu */
.rMateH5__ChartMenu{
	top:4px;
	right:4px;
	width:20px;
	height:20px;
	font-size:12px;
	border-radius:1px;
	border:1px solid #ccc;
	
	z-index:1;
	overflow:hidden;
	opacity:0;
	position:absolute;
	transition:width 0.2s, height 0.2s, opacity 0.2s;
	background:url(./menu.png) #fff no-repeat 50% 50%;
	
	padding:0;
	white-space:nowrap;
}

@media only all {
	.rMateH5__ChartMenu{
		padding-left:18px;
		padding-top:18px;
	}
}

/* Chart 영역에 마우스 오버시 ChartMenu */
.rMateH5__chart_menu_hover{
	opacity:1;
}

/* ChartMenu에 마우스 오버시 */
.rMateH5__chart_menu_expand{
	width:70px;
	height:auto;
	padding:4px;
	background-position:-20px -20px;
}

/* ChartMenu에 붙는 아이템 들 */
.rMateH5__ChartMenuItem{
	width:60px;
	padding-left:2px;

	cursor:pointer;
	background-color:#ffffff;
	transition:background-color 0.2s;
	white-space:nowrap;
}

/* ChartMenuItem에 설정된 img */
.rMateH5__ChartMenuItem_Img{
	width:12px;
	height:12px;
	margin-right:4px;
}

/* ChartMenuItem 마우스 오버시 */
.rMateH5__ChartMenuItem:hover{
	background-color:#555555;
	color:#ffffff;
}

/******************************************************
 *
 *			ScrollBar
 *
 *****************************************************/

.rMateH5__ScrollBar {
	background-color:#fff;
}

.rMateH5__HScrollTrack, .rMateH5__VScrollTrack {
	border:1px solid #e6e6e6;
}

.rMateH5__HScrollThumb, .rMateH5__VScrollThumb {
	cursor:pointer;
	background-color:#e6e6e6;
	transition:background-color 0.2s;
}

.rMateH5__HScrollThumb:hover, .rMateH5__VScrollThumb:hover{
	background-color:#888888;
}

.rMateH5__HScrollThumbHeader{
}

.rMateH5__HScrollUpArrow {
	border:1px solid #e6e6e6;
	cursor:pointer;
	background:url("./scroll_left_arrow.png") no-repeat 50% 50%;
}

.rMateH5__HScrollDownArrow {
	border:1px solid #e6e6e6;
	cursor:pointer;
	background:url("./scroll_right_arrow.png") no-repeat 50% 50%;
}

.rMateH5__VScrollThumbHeader{
}

.rMateH5__VScrollUpArrow {
	border:1px solid #e6e6e6;
	border-right:none;
	cursor:pointer;
	background:url("./scroll_up_arrow.png") no-repeat 50% 50%;
}

.rMateH5__VScrollDownArrow {
	border:1px solid #e6e6e6;
	border-right:none;
	cursor:pointer;
	background:url("./scroll_down_arrow.png") no-repeat 50% 50%;
}

/******************************************************
 *
 *			SlideChart
 *
 *****************************************************/

.rMateH5__SlideController{
}

.rMateH5__PrevCanvas, .rMateH5__NextCanvas{
	position:absolute;
	z-index:1;
}

/* 슬라이드 이전 버튼 */
.rMateH5__SlidePrevButton{
	background:url("./slide_left.png") no-repeat 50% 50%;
}

/* 슬라이드 다음 버튼 */
.rMateH5__SlideNextButton{
	background:url("./slide_right.png") no-repeat 50% 50%;
}

.rMateH5__SlidePrevButton, .rMateH5__SlideNextButton{
	width:20px;
	height:20px;
}

/* 슬라이드 버튼 */
.rMateH5__SlideButton{
	width:15px;
	height:15px;
	background:url("./slide_button.png") no-repeat 50% 50%;
}

/* 선택된 슬라이드의 버튼 */
.rMateH5__SlideActiveButton{
	background:url("./slide_active_button.png") no-repeat 50% 50%;
}

.rMateH5__SlideButton, .rMateH5__SlidePrevButton, .rMateH5__SlideNextButton{
	cursor:pointer;
	position:absolute;
}

/******************************************************
 *
 *			Slider
 *
 *****************************************************/

.rMateH5__Slider, .rMateH5__HSlider, .rMateH5__VSlider {
	position : absolute;
	cursor : default;
	font-size : 11px;

	-ms-user-select : none;
	-moz-user-select : none;
	-webkit-user-select : none;
	user-select : none;
}
.rMateH5__Slider_Track {
	width : 200px;
	height : 4px;
	border-width : 1px;
	border-style : inset;
	border-color : #DDDDDD;
	position : absolute;

	-ms-user-select : none;
	-moz-user-select : none;
	-webkit-user-select : none;
	user-select : none;
}
.rMateH5__Slider_HighlightTrack {
	width : 1px;
	height : 2px;
	border-width : 1px;
	border-style : inset;
	border-color : #FF0000;
	position : absolute;
}
.rMateH5__Slider_TrackHitArea {
	position : absolute;
}

.rMateH5__Slider_Ticks {
	position : absolute;
}
.rMateH5__Slider_Tick {
	position : absolute;
	border-width : 1px;
	border-left-style : solid;
}
.rMateH5__Slider_Labels .rMateH5__Label {
	position : absolute;

	-ms-user-select : none;
	-moz-user-select : none;
	-webkit-user-select : none;
	user-select : none;
}
.rMateH5__SliderThumb {
	display : inline-block;
	position : absolute;
	width : 16px;
	height : 16px;
	background:#f5f5f5;
	background:linear-gradient(rgb(255, 255, 255), rgb(213, 213, 213));
	border:solid 1px rgb(200, 200, 200);
	border-radius : 12px;
	outline : none;

	-ms-user-select : none;
	-moz-user-select : none;
	-webkit-user-select : none;
	user-select : none;
}

/******************************************************
 *
 *			MotionController
 *
 *****************************************************/

.rMateH5__MotionController{
	height:33px;
	padding:4px 4px 4px 19px;
	border:solid 1px #dbdbdb;
	border-radius:3px;
	background-color:#f5f5f5;
}

.rMateH5__PlayButton{
	position:absolute;
	width:11px;
	height:13px;
	border-style:none;
	cursor:pointer;
	text-align:center;
	padding-top:5px;
	background:url(./motion_play_button.png) no-repeat;
	background-position-x:50%;
}

.motion_pause{
	background-position-y:100%;
}

.rMateH5__Pause{
	background:url("./loader.gif") no-repeat 50% 50%;
}

.rMateH5__MotionController .rMateH5__HSlider{
	height:14px;
	position:absolute;
	font-size:1px;
	cursor:pointer;
}

.rMateH5__MotionController .rMateH5__Slider_Track{
	border-top:solid 2px #cecece;
	border-bottom:solid 2px #e5e5e5;
	background-color:#fff;
	height:10px;
	border-radius:6px;
}

.rMateH5__MotionController .rMateH5__Slider_HighlightTrack{
	border:none;
	height:8px;
	border-radius:6px;
	border-top:solid 1px #ff9600;
	border-bottom:solid 1px #fba72d;
	background:url(./background_highlight_track.png);
}

.rMateH5__MotionController .rMateH5__SliderThumb{
	position:absolute;
}

/******************************************************
 *
 *			CrossRangeZoomer
 *
 *****************************************************/

.rMateH5__CrossRangeZoomer{
	pointer-events:auto;
}

.rMateH5__CrossHair_Label{
	position:absolute;
	color:#ffffff;
	font-size:11px;
	font-weight:normal;
	font-style:normal;
	background-color:#999;
	border:1px solid #999;
	padding:2px 4px;
	text-align:center;
	visibility:hidden;
	cursor:default;
}

.rMateH5__CrossRangeZoomer_Restore{
	position:absolute;
	top:0px;
	right:0px;
	cursor:pointer;
	font-size:12px;
	color:#666;
	text-align:center;
	padding:8px 8px 10px;
	min-width:83px;
	min-height:22px;
	transition:box-shadow 0.2s;
	background-color:#fff;
	filter:alpha(opacity=80);
	background-color:rgba(255, 255, 255, 0.8);

	-webkit-box-shadow:0px 2px 2px 0px rgba(0,0,0,0.16), 0px 0px 0px 1px rgba(0,0,0,0.08);
	-moz-box-shadow:0px 2px 2px 0px rgba(0,0,0,0.16), 0px 0px 0px 1px rgba(0,0,0,0.08);
	box-shadow:0px 2px 2px 0px rgba(0,0,0,0.16), 0px 0px 0px 1px rgba(0,0,0,0.08);
}
*+html .rMateH5__CrossRangeZoomer_Restore{min-height:29px; padding:8px;}
@media only all {
	.rMateH5__CrossRangeZoomer_Restore{
		min-height:22px;
		padding-bottom:0;
	}
}

.rMateH5__CrossRangeZoomer_Restore:hover{
	-webkit-box-shadow:0px 2px 5px 0px rgba(0,0,0,0.15);
	-moz-box-shadow:0px 2px 5px 0px rgba(0,0,0,0.15);
	box-shadow:0 3px 8px 0 rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.08);
}

/******************************************************
 *
 *			DualChart
 *
 *****************************************************/

.rMateH5__MainChart, .rMateH5__SubChart{
	position:absolute;
}

/******************************************************
 *
 *			SymboldDiv
 *
 *****************************************************/

 .rMateH5__SymbolDiv{
	cursor:pointer;
	position:absolute;
	text-align:center;
 }

/******************************************************
 *
 *			History
 *
 *****************************************************/

.rMateH5__ChartRangeSelector_LeftThumb, .rMateH5__ChartRangeSelector_RightThumb{
	width:10px;
	height:100%;
	cursor:col-resize;
	border-bottom:solid 1px #b5b5b7;
	background:url("./selector.png") no-repeat 50% 50%;
	background-color:rgb(236, 240, 241);
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
	background-color:rgba(236, 240, 241, 0.6);
}

.rMateH5__ChartRangeSelector_Left, .rMateH5__ChartRangeSelector_Right{
	border:solid 1px #eee;
	border-bottom:solid 1px #b5b5b7;
	background-color:rgb(236, 240, 241);
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
	background-color:rgba(236, 240, 241, 0.6);
}

.rMateH5__ChartRangeSelector_Center{
	cursor:pointer;
	background-color:rgb(255, 255, 255);
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
	background-color:rgba(255, 255, 255, 0);
}

/******************************************************
 *
 *			CanvasLabel ( Memo )
 *
 *****************************************************/

 .rMateH5__CanvasLabel{
 }

 /******************************************************
 *
 *			AxisLineLabel
 *
 *****************************************************/

 .rMateH5__AxisLineLabel{
	position:absolute;
	background-color:#fff;
 }

/******************************************************
 *
 *			DrillDownMenu
 *
 *****************************************************/

 .rMateH5__DrillDownMenu{
	left:0px;
	top:0px;
	position:absolute;
	text-align:center;
 }

 .rMateH5__DrillDownMenu > .rMateH5__DrillDownBackButton, .rMateH5__DrillDownFirstButton{
	min-width:83px;
	min-height:22px;
	text-align:center;
	color:#666;
	background-color:rgba(255, 255, 255, 0.8);
	transition:box-shadow 0.2s;
	cursor:pointer;
	float:left;
	margin-right:8px;
	padding:8px 8px 10px;
	
	-webkit-box-shadow:0px 2px 2px 0px rgba(0,0,0,0.16), 0px 0px 0px 1px rgba(0,0,0,0.08);
	-moz-box-shadow:0px 2px 2px 0px rgba(0,0,0,0.16), 0px 0px 0px 1px rgba(0,0,0,0.08);
	box-shadow:0px 2px 2px 0px rgba(0,0,0,0.16), 0px 0px 0px 1px rgba(0,0,0,0.08);
 }
*+html .rMateH5__DrillDownMenu > .rMateH5__DrillDownBackButton, .rMateH5__DrillDownFirstButton{min-height:29px; padding:8px;}
 @media only all {
	.rMateH5__DrillDownMenu > .rMateH5__DrillDownBackButton, .rMateH5__DrillDownFirstButton{
		min-height:22px;
		padding-bottom:0;
	}
 }


.rMateH5__DrillDownMenu > .rMateH5__DrillDownBackButton:hover, .rMateH5__DrillDownFirstButton:hover{
	-webkit-box-shadow:0 3px 8px 0 rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.08);
	-moz-box-shadow:0 3px 8px 0 rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.08);
	box-shadow:0 3px 8px 0 rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.08);
 }

 /******************************************************
 *
 *			Preloader
 *
 *****************************************************/

.rMateH5__Preloader{
	top:0px;
	left:0px;
	z-index:2;
	width:100%;
	height:100%;
	opacity:0.7;
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
	background:url("./loader.gif") 50% 50% no-repeat #FFF;
}

/******************************************************
 *
 *			DataEditor
 *
 *****************************************************/

.rMateH5__DataEditor{
	overflow-y:hidden;
	overflow-x:auto;
}

.rMateH5__DataEditor table{
	height:100%;
	border:solid 1px #555555;
	text-decoration:none;
	font-style:normal;
	font-weight:normal;
	font-size:11px;
	text-align:center;
	cursor:default;
}

/* default th */
.rMateH5__DataEditor th{
	color:#ffffff;
	font-weight:bold;
	font-size:11px;
	letter-spacing:0;
	text-align:center;
	height:22px;
	padding:2px 4px;
	background:-ms-linear-gradient(270deg, #6e7376 20%, #6e7376 100%);
	background:-moz-linear-gradient(270deg, #6e7376 20%, #6e7376 100%);
	background:-o-linear-gradient(270deg, #6e7376 20%, #6e7376 100%);
	background:-webkit-linear-gradient(270deg, #6e7376 20%, #6e7376 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff6e7376', endColorstr='#ff6e7376');
}

.rMateH5__DataEditor th.column{
	border-right:solid 1px #555555;
}

.rMateH5__DataEditor th.row{
	border-bottom:solid 1px #555555;
}

.rMateH5__DataEditor td{
	padding:2px 4px;
}

.rMateH5__DataEditor td.column{
	border-right:solid 1px #555555;
}

.rMateH5__DataEditor td.row{
	border-bottom:solid 1px #555555;
}

.rMateH5__DataEditor td.oddRow{
	background-color:#EFEEEE;
}

.rMateH5__DataEditor td.evenRow{
	background-color:#FFFFFF;
}

.rMateH5__DataEditor td:hover{
	background-color:#E3FFD6;
}

.rMateH5__DataEditor td:focus{
	background-color:#D1EBB4;
	color:#ff0000;
}

.rMateH5__CloseButton{
	background:url("./close_btn.png") no-repeat;
	cursor:pointer;
	position:absolute;
	width:13px;
	height:13px;
}

.rMateH5__CloseButton:hover{
	background:url("./hover_close_btn.png") no-repeat;
}

/******************************************************
 *
 *			Information
 *
 *****************************************************/

.rMateH5__Information{
	overflow:hidden;
}

/******************************************************
 *
 *			UserContent
 *
 *****************************************************/

 .rMateH5__UserDefineWrapper{
	left:0;
	top:0;
	position:absolute;
	white-space:nowrap;
}

/******************************************************
 *
 *			SelectionContainer
 *
 *****************************************************/

.rMateH5__SelectionContainer{
	position:absolute;
}

/******************************************************
 *
 *			SelectionContainer
 *
 *****************************************************/

 .rMateH5__RangeSelector{
	position:absolute;
	border:solid 1px rgb(27, 161, 226);
	background-color:rgba(27, 161, 226, 0.5);
 }