/*css
//==>>>==>>>==>>>==>>>==>>>==>>>==>>>==>>>==>>>==>>>==>>>==>>>==>>>
//
//
//
//==<<<==<<<==<<<==<<<==<<<==<<<==<<<==<<<==<<<==<<<==<<<==<<<==<<<
*/
/* btn-main */
.smn-btn-main{
	position:relative;
	width:40px;
	height:40px;
	display:flex;
	justify-content:center;
	align-items:center;
	border-radius:50%;
	cursor:pointer;
}
.smn-btn-main:hover{
	background:rgba(255,255,255,0.6);
}
.smn-btn-main:active{
	background:rgba(255,255,255,0.8);
}
.smn-btn-main .sicon{
	width:70%;
	height:70%;
}
/* relative mode */
.smn-control{
	position:relative;
	flex:0 0 300px;
	overflow:hidden;
	border:0 solid #ccc;
	border-left-width:0px;
	user-select:none;
}
.smn-control.smn-rel-hide{
	display:none;
}
.smn-cover{
	position:relative;
	width:100%;
	height:100%;
}
.smn-front{
xposition:absolute;
xtop:0;
xleft:0;
	position:relative;
	width:100%;
	height:100%;
	color:black;
	background-color:white;
	overflow-y:hidden;
	overflow-y:auto;
	overscroll-behavior:contain;
	padding-top:20px;
	padding-bottom:20px;
	scrollbar-color:#abc8e5 #dee7ef;
	scrollbar-width:thin;
}
/* 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:500;
	}
	.smn-control.smn-abs-show{
		display:block;
	}
	.smn-cover{
		position:absolute;
		top:0;
		bottom:0;
		left:0;
		right:0;
		background-color:rgba(0,0,0,0.1);
		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;
	box-shadow: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{
	position:relative;
	top:0px;
	transition:transform .3s;
	width:15px;
	height:15px;
	font-size:0;
}
.smn-item.smn-has-menu .smn-switch-mark .sicon{
	width:100%;
	height:100%;
	color:#444;
}
.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:flex-end;
	text-align:left;
	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;
}