/* 
	styleSheet fot nas_common_HTML.js
*/
/* modalDialog 
	padding-left :50px;
	padding-right:50px;
	padding-top:24px;

*/
#nas_modalDialog {
	color:#333;
	background-color:#fff;
}
@media (prefers-color-scheme: dark) {
	#nas_modalDialog {
		color:#eee;
		background-color:#333;
	}
}
.modalBt {
	width:6em;
}

element.style {
    display: block;
    width: auto;
    min-height: 0px;
    max-height: none;
    height: 718.231px;
}
@media screen and (min-width: 600px)
#optionPanelVer {
    display: none;
    width: 480px;
    height: 340px;
    padding: 6px;
    border-style: double;
}
@media screen and (min-width: 300px)
#optionPanelVer {
    display: none;
    width: 100%;
    height: 100%;
    padding: 6px;
    border-style: double;
}
.ui-dialog .ui-dialog-content {
    position: relative;
    border: 0;
    padding: 0.5em 1em;
    background: none;
    overflow: auto;
}
div.optionPanelModal {
    /* display: none; */
    /* background-color: #888; */
		color:black;
		background-color: #888;
}
@media (prefers-color-scheme: dark)
	div.optionPanelModal {
		color: #eee;
		background-color: black;
}

.ui-widget-content {
	background-color:red;
}
.ui-widget-header {
	background-color:red;
}
/*
   mousedragscrollable
 */
.mousedragscrollable {
    white-space: nowrap;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
.centeringForm {
	text-align:center;
	padding:4px;
}


button.itemSelector {
	border-style:solid;
	border-color:#888888;
	color:#888888;
	background-color:#dddddd;
}

button.itemSelector:disabled {
	color:black;
	border-color:black;
	background-color:#eeeeee;
}


button.graphicColorSelect {
	position:relative;
	margin:0px;
	width:48px;
	height:48px;
	color:#ffffff;
    border-width:3px;
	border-color:#000000;
	border-style:solid;
}
.graphicColorSelectBG {
	top:24px;
	left:36px;
	background-color:#ffffff;
	z-index:7;
}
.graphicColorSelectFG {
	top:6px;
	left:-36px;
	background-color:#222222;
	z-index:8;

}
button.graphicToolButton {
	margin-top:2px;
	width:36px;
	height:20px;
	background-color:transparent;
	color:#4a4a4a;
    border-style:none;
    vertical-align:middle;
    /* 角丸*/
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}
button.graphicToolButton:hover {
	background-color:#8e8e8e;
	color:#2a2a2a;
}

@media (prefers-color-scheme: dark) {
	button.itemSelector {
		background-color:#555;
	}

	button.itemSelector:disabled {
		color:#eee;
		border-color:#eee;
		background-color:#333;
	}


	button.graphicColorSelect {
		color:#222;
		border-color:#eee;
}
	.graphicColorSelectBG {
		background-color:#333;
	}
	.graphicColorSelectFG {
		background-color:#ddd;
	}
	button.graphicToolButton {
		color:#ccc;
	}
	button.graphicToolButton:hover {
		background-color:#333;
		color:#999;
	}
}

button.graphicColorChip {
	margin:0px;
	width:20px;
	height:17px;
	color:#ffffff;
	border-width:1px;
	border-color:#888888;
	border-style:solid;
}
button.graphicColorChip-large {
	width:27px;
	height:24px;
	border-width:1px;
}
button.graphicColorChip:disabled {
	border-width:2px;
	border-color:#222222;
}
button.graphicColorChip:hover {
	border-color:#eeeeee;
}

button.graphicColorBlack       { background-color:rgb(10% 10% 10%); }
button.graphicColorWhite       { background-color:rgb(100% 100% 100%); }
button.graphicColorRed         { background-color:rgb(80% 10% 10%); }
button.graphicColorGreen       { background-color:rgb(10% 40% 10%); }
button.graphicColorBlue        { background-color:rgb(10% 10% 90%); }
button.graphicColorBckdrop     { background-color:rgb(50% 50% 50%); }