/* inpbox */
.uic-inpbox,
.uic-inpbox select{
	font-size:16px;
	line-height:1;
}
.uic-inpbox{
	display:table-cell;
	padding:0 10px;
	padding-top:1px;
	height:36px;
	border:1px solid #ccc;
	text-align:left;
	vertical-align:middle;
	overflow:hidden;
}
@media (min-width:769px){
	.uic-inpbox{
		font-family:"Menlo","Consolas","Courier New";
	}
}
/* disabled */
.uic-disable{
	visibility:hidden;
}
/* btn-main */
.smn-btn-main{
	position:relative;
	width:40px;
	height:40px;
	display:flex;
	justify-content:center;
	align-items:center;
	font-size:18px;
	line-height:18px;
	border-radius:50%;
	cursor:pointer;
}
.smn-btn-main:hover{
	background-color:#eee;
}
.smn-btn-main:active{
	background-color:#ccc;
}
.smn-btn-main span{
	position:relative;
	top:-1px;
}
.smn-btn-main span::before{
	content:"☰";
}
/* relative mode */
.smn-control{
	position:relative;
	flex:0 0 300px;
	overflow:hidden;
	border:0 solid #ccc;
	border-right-width:1px;
	user-select:none;
}
.smn-control.smn-rel-hide{
	display:none;
}
.smn-cover{
	position:relative;
	width:100%;
	height:100%;
}
.smn-front{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	color:black;
	background-color:white;
	overflow-y:hidden;
	overflow-y:auto;
	overscroll-behavior:contain;
}
/* absolute mode */
@media (max-width:1000px){
	.smn-control{
		display:none;
		position:absolute;
		top:0;
		bottom:0;
		left:0;
		right:0;
		flex-basis:0;
		z-index:1000;
	}
	.smn-control.smn-abs-show{
		display:block;
	}
	.smn-cover{
		position:absolute;
		top:0;
		bottom:0;
		left:0;
		right:0;
		background-color:rgba(255,0,0,0.3);
		opacity:0;
		transition:opacity .15s;
	}
	.smn-cover.smn-abs-show{
		opacity:1;
	}
	.smn-front{
		z-index:1001;

		position:absolute;
		top:0;
		left:0;

		width:300px;
		transform:translate(-100%,0);
		transition:transform .15s;
	}
	.smn-front.smn-abs-show{
		transform:translate(0,0);
	}
}
/* item */
.smn-item{
	display:flex;
	min-height:50px;
	color:#000;
	background-color:#fff;
	text-decoration:none;
	cursor:pointer;
}
.smn-item:focus{
	outline:none;
	background-color:#f8f8f8;
}
.smn-item:hover{
	background-color:#eee;
}
.smn-item.smn-selected{
	background-color:#e8f0fe;
}
/* handle */
.smn-handle{
	flex:0 0 6px;
}
.smn-item.smn-selected .smn-handle{
	background-color:#3b67d2;
}
/* switch */
.smn-switch{
	flex:0 0 24px;
}
.smn-item.smn-has-menu .smn-switch{
	display:flex;
	justify-content:center;
	align-items:center;
}
.smn-item.smn-has-menu .smn-switch-mark{
	transition:transform .3s;
	transform-origin:55% 55%;
}
.smn-item.smn-has-menu .smn-switch-mark:before{
	content:"▸";
}
.smn-item.smn-has-menu.smn-open .smn-switch-mark{
	transform: rotateZ(90deg);
}
/* label */
.smn-label{
	flex:1 1 auto;
	display:flex;
	justify-content:left;
	align-items:center;
	padding:10px;
	padding-left:0;
}
/* box */
.smn-box{
	display:none;
	margin-left:15px;
}
.smn-item.smn-open+.smn-box{
	display:block;
}
/* line */
.smn-line{
	width:100%;
	height:1px;
	background-color:#ccc;
}