main div#htmlchart_mainpage div#chart_area div#series_color_menu {
	font: normal 13.6px calibri;
	border: 1px solid RGB(131, 131, 131);
	background: white;
	position: absolute;
	z-index: 1;
	overflow: hidden;
}

main div#htmlchart_mainpage div#chart_area div#series_color_menu.hidden {
	border-width: 0px;
	max-width: 0px;
	max-height: 0px;
	transition-property: max-width, max-height, border-width;
	transition-duration: 0.25s, 0.25s, 0s;
	transition-delay: 0s, 0s, 0.25s;
}

main div#htmlchart_mainpage div#chart_area div#series_color_menu.shown {
	border-width: 1px;
	max-width: 1000px;
	max-height: 1000px;
	transition-property: border-width, max-width, max-height;
	transition-duration: 0s, 0.5s, 0.5s;
	transition-delay: 0s, 0s, 0s;
	pointer-events: auto;
}

main div#htmlchart_mainpage div#chart_area div#series_color_menu div.row_container {
	display: flex;
}

main div#htmlchart_mainpage div#chart_area div#series_color_menu div.row_container div.column_left,
main div#htmlchart_mainpage div#chart_area div#series_color_menu div.row_container div.column_middle {
	display: inline-block;
	float: left;
}

main div#htmlchart_mainpage div#chart_area div#series_color_menu div.row_container div.column_left {
	min-width: 111px;
}

main div#htmlchart_mainpage div#chart_area div#series_color_menu div.row_container div.column_middle {
	margin: auto;
	margin-left: 10px; 
	margin-right: 10px;
}

/* max width is calculated to show 5 color palattes each of 15px width (subtotal of 75px) */
/* each is also set with left & right margins of 3px (subtotal of 30px) and left & right paddings of 3px (subtotal of 6px) hence the value of 111px */

main div#htmlchart_mainpage div#chart_area div#series_color_menu div.row_container div.column_left div.standard_area,
main div#htmlchart_mainpage div#chart_area div#series_color_menu div.row_container div.column_left div.used_area {
	padding: 3px;
	max-width: 111px;
}

main div#htmlchart_mainpage div#chart_area div#series_color_menu div.row_container div.column_left div div.color_item {
	display: inline-block;
	min-height: 15px;
	min-width: 15px;
	margin: 3px;
}

main div#htmlchart_mainpage div#chart_area div#series_color_menu div div div span {
	display: block;
	padding: 3px;
	font-size: 13px;
}

main div#htmlchart_mainpage div#chart_area div#series_color_menu div.row_container div.column_left div.standard_area div.color_item:hover {
	outline: 1px dashed black;
	cursor: pointer;
}

main div#htmlchart_mainpage div#chart_area div#series_color_menu div.row_container div.column_left div.standard_area div.color_item.selected {
	outline: 1px dashed black;
}

main div#htmlchart_mainpage div#chart_area div#series_color_menu div.row_container div.column_middle div div {
	min-height: 25px;
	min-width: 25px;
}

main div#htmlchart_mainpage div#chart_area div#series_color_menu div.color_button_area {
	margin: 6px;
	text-align: center;
	clear: both;
	margin-top: 0px;
}

main div#htmlchart_mainpage div#chart_area div#series_color_menu div.color_button_area div#color_menu_notice {
	display: flex;
	font-size: 12px;
	justify-content: center;
	overflow: hidden;
	margin-bottom: 10px;
	transition-property: max-height;
	transition-duration: 500ms;
	transition-delay: 0s;
}

main div#htmlchart_mainpage div#chart_area div#series_color_menu div.color_button_area div#color_menu_notice.hidden {
	max-height: 0px;
}

main div#htmlchart_mainpage div#chart_area div#series_color_menu div.color_button_area div#color_menu_notice.shown {
	max-height: 500px;
}

main div#htmlchart_mainpage div#chart_area div#series_color_menu div.color_button_area button {
	border: 1px solid RGB(119, 136, 153);
	border-radius: 4px;
	font-size: 1rem;
	font-weight: bold;
	min-width: 50px;
	margin: 8px;
	margin-top: 0px;
}

main div#htmlchart_mainpage div#chart_area div#series_color_menu div.color_button_area button:focus {
	outline: none;
}

main div#htmlchart_mainpage div#chart_area div#series_color_menu div.color_button_area button#change_color_yes {
	color: RGB(50, 205, 50);
	margin-right: 50px;
}

main div#htmlchart_mainpage div#chart_area div#series_color_menu div.color_button_area button#change_color_no {
	color: RGB(255, 0, 0);
	margin-left: 50px;
}

main div#htmlchart_mainpage div#chart_area div#series_color_menu div.color_button_area button:hover {
	cursor: pointer;
}

main div#htmlchart_mainpage div#chart_area div#series_color_menu div.color_button_area button:active {
	background: RGB(224, 224, 224);
}

main div#htmlchart_mainpage div#chart_area div#series_color_menu div.row_container div.column_right {
	padding: 6px;
	display: inline-block;
	float: left;
}

main div#htmlchart_mainpage div#chart_area div#series_color_menu div.row_container div.column_right span {
	display: block;
	padding-bottom: 3px;
	font-size: 13px;
}

main div#htmlchart_mainpage div#chart_area div#series_color_menu div.row_container div.column_right div.gradient_panel {
	display: inline-block;
}

main div#htmlchart_mainpage div#chart_area div#series_color_menu div.row_container div.column_right div.gradient_panel div.desaturation_strip {
	display: flex;
	margin: -1px;
}

main div#htmlchart_mainpage div#chart_area div#series_color_menu div.row_container div.column_right div.gradient_panel div.desaturation_strip div.gradient_item {
	display: inline-block;
	min-width: 10px;
	min-height: 10px;
}

main div#htmlchart_mainpage div#chart_area div#series_color_menu div.row_container div.column_right div.gradient_panel div.desaturation_strip div.gradient_item.selected {
	outline: 1px dashed black;
	z-index: 10;
}

main div#htmlchart_mainpage div#chart_area div#series_color_menu div.row_container div.column_right div.gradient_panel div.desaturation_strip div.gradient_item:hover {
	outline: 1px dashed black;
	cursor: pointer;
	z-index: 10;
}

main div#htmlchart_mainpage div#chart_area div#series_color_menu div.row_container div.column_right div.control_container {
	display: inline-block;
	margin: auto;
	float: left;
}

main div#htmlchart_mainpage div#chart_area div#series_color_menu div.row_container div.column_right div.control_container div.container_strip {
	display: flex;
	margin-top: 10px;
	margin-bottom: 10px;
}

main div#htmlchart_mainpage div#chart_area div#series_color_menu div.row_container div.column_right div.control_container div.container_strip span {
	padding: 0px;
	width: 3rem;
	padding-bottom: 2.5px;
	font-size: 13px;
}

main div#htmlchart_mainpage div#chart_area div#series_color_menu div.row_container div.column_right div.control_container div.container_strip span.hsl_unit {
	padding-left: 9px;
	padding-bottom: 0px;
	font-size: 13px;
}

main div#htmlchart_mainpage div#chart_area div#series_color_menu div.row_container div.column_right div.control_container div.container_strip input[type="text"].hsl_value {
	border: 1px solid RGB(119, 136, 153);
	padding: 1px 2px;
	max-width: 4rem;
	margin-left: 5px;
	font-size: 13px;
}

main div#htmlchart_mainpage div#chart_area div#series_color_menu div.row_container div.column_right div.control_container div.container_strip input[type="text"].hsl_value:focus {
	background: RGB(245, 245, 245);
	outline: none;
}

main div#htmlchart_mainpage div#chart_area div#series_color_menu div.row_container div.column_right div.control_container div.container_strip input[type="range"].hsl_slider {
	-webkit-appearance: none;
	appearance: none;
	outline: none;
	cursor: pointer;
	margin: auto;
	margin-left: 0px;
	margin-right: 0px;
}

main div#htmlchart_mainpage div#chart_area div#series_color_menu div.row_container div.column_right div.control_container div.container_strip input[type="range"].hsl_slider::-webkit-slider-runnable-track {
	height: 5px;
	background: RGB(197, 197, 197);
	border-radius: 2px;
}

main div#htmlchart_mainpage div#chart_area div#series_color_menu div.row_container div.column_right div.control_container div.container_strip input[type="range"].hsl_slider::-moz-range-track {
	height: 5px;
	background: RGB(197, 197, 197);
	border-radius: 2px;
}

main div#htmlchart_mainpage div#chart_area div#series_color_menu div.row_container div.column_right div.control_container div.container_strip input[type="range"].hsl_slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	border: none;
	border-radius: 2px;
	height: 5px;
	width: 5px;
	background-color: RGB(91, 91, 91);
}

main div#htmlchart_mainpage div#chart_area div#series_color_menu div.row_container div.column_right div.control_container div.container_strip input[type="range"].hsl_slider::-moz-range-thumb {
	appearance: none;
	border: none;
	border-radius: 2px;
	height: 5px;
	width: 5px;
	background-color: RGB(91, 91, 91);
}

main div#htmlchart_mainpage div#chart_area div#series_color_menu div.row_container div.column_right div.gradient_vertical_bar {
	display: inline-block;
	margin: auto;
	margin-top: 10px;
	margin-bottom: 10px;
}

main div#htmlchart_mainpage div#chart_area div#series_color_menu div.row_container div.column_right div.gradient_vertical_bar div.gradient_vertical_strip {
	min-width: 35px;
	display: flex;
}

main div#htmlchart_mainpage div#chart_area div#series_color_menu div.row_container div.column_right div.gradient_vertical_bar div.gradient_vertical_strip span.gradient_vertical_item {
	min-width: 20px;
	min-height: 10px;
	display: inline-block;
	padding: 0px;
	margin: -1px;
}

main div#htmlchart_mainpage div#chart_area div#series_color_menu div.row_container div.column_right div.gradient_vertical_bar div.gradient_vertical_strip span.gradient_vertical_pointer {
	font-size: 0.8rem;
	margin-left: 13px;
	padding: 0px;
	color: white;
}

main div#htmlchart_mainpage div#chart_area div#series_color_menu div.row_container div.column_right div.gradient_vertical_bar div.gradient_vertical_strip span.gradient_vertical_item.selected {
	outline: 1px dashed black;
	z-index: 10;
}

main div#htmlchart_mainpage div#chart_area div#series_color_menu div.row_container div.column_right div.gradient_vertical_bar div.gradient_vertical_strip span.gradient_vertical_item:hover {
	outline: 1px dashed black;
	cursor: pointer;
	z-index: 10;
}

main div#htmlchart_mainpage div#chart_area div#series_color_menu div.row_container div.column_right div.gradient_vertical_bar div.gradient_vertical_strip span.gradient_vertical_item:hover ~ span.gradient_vertical_pointer {
	color: black;
}