html{
	height:100%;
}

body, 
body *{
	font-family:'Microsoft Jhenghei', '微軟正黑體', 'heiti TC';
}

body:not(.wp-admin){
	margin:0;
	min-height:100%;
	background-color:rgb(217, 235, 177);
}

body.list, 
body.manage-devices{
	background-color:rgb(157, 195, 230);
}

body.home{
	background-color:rgb(244, 177, 131);
}

div#page{
	min-height:100vh;
	/* padding-top:32px; */
	box-sizing:border-box;
	position:relative;
}

div#page::before{
	position:absolute;
	width:100%;
	height:100%;
	background-color:rgba(0, 0, 0, 0);
	top:0;
	left:0;
	content:'';
	transition:background-color 0.2s linear 0s;
	visibility:hidden;
}

div#page.loading::before{
	background-color:rgba(0, 0, 0, 0.75);
	z-index:19;
	visibility:visible;
}

div#content{
	/* min-height:inherit; */
}

a{
	outline:none;
}

h1, h2, h3, h4, h5{
	font-weight:400;
	margin:0;
}

p{
	margin:0;
}

ul{
	list-style:none;
	padding:0;
	margin:0;
}

h1.line > span{
	position:relative;
	color:#666;
	display:block;
	width:100%;
}

h1.line > span::before, 
h1.line > span::after{
	width:80px;
	height:1px;
	position:absolute;
	top:15px;
	content:'';
}

/*
h1.line > span::before{
	background:linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
	left:-85px;
}

h1.line > span::after{
	background:linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
	right:-85px;
}
*/

div#guide-admin_layout select{
	border:solid 1px #999;
	border-radius:0;
	background-image:url(data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2224%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2016%22%20xmlns%3D%22http%3a%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0a%20%20%20%20%3Cpolygon%20fill%3D%22%23666%22%20points%3D%2212%201%209%206%2015%206%22%3E%3C%2Fpolygon%3E%0a%20%20%20%20%3Cpolygon%20fill%3D%22%23666%22%20points%3D%2212%2013%209%208%2015%208%22%3E%3C%2Fpolygon%3E%0a%3C%2Fsvg%3E%0a);
	background-color:#FFF;
	background-repeat:no-repeat;
	background-position:100% 50%;
	background-size:inherit;
	-webkit-appearance:none;
	-moz-appearance:none;
	padding:0 5px;
	width:75%;
	max-width:420px;
	height:32px;
	display:block;
	position:relative;
	margin:0 auto;
}

button.button{
	width:160px;
	transition:background-color 0.2s linear 0s;
	text-align:center;
	border:none;
}

button[data-action]{
	border:none;
	text-align:center;
	cursor:pointer;
}

button[disabled="disabled"]{
	background:#999 !important;
	cursor:default;
}

div.submit-button_field > p{
	position:absolute;
	width:100%;
	height:100px;
	top:50%;
	left:0;
	margin:-35px 0 0;
	display:none;
}

div.submit-button_field.active > button[data-action]{
	/* display:none; */
	visibility:hidden;
}

div.submit-button_field.active > p{
	display:block;
	font-size:16px;
	font-weight:600;
}

div.submit-button_field.active > p::before{
	content:'';
	background-image:url('../images/svg/ripple.svg');
	background-repeat:no-repeat;
	background-position:50%;
	background-size:7.5%;
	position:absolute;
	width:inherit;
	height:inherit;
	top:-15px;
	left:0;
}

div.submit-button_field.active > p.success::before, 
div.submit-button_field.active > p.error::before{
	display:none;
}

div.submit-button_field.active > p.success::after, 
div.submit-button_field.active > p.error::after{
	content:attr(data-result);
	position:absolute;
	width:100%;
	height:36px;
	line-height:36px;
	text-align:center;
	top:50%;
	left:0;
	margin:-32px 0 0;
}

div.submit-button_field.active > p.success::after{
	color:#069;
}

div.submit-button_field.active > p.error::after{
	color:#C00;	
}

div.flex-rows{
	display:flex;
	justify-content:center;
	align-items:center;
	min-height:35px;
	position:relative;
}

div.flex-rows > div{
	padding:10px;
	align-items:center;
}

div.flex-columns[data-width="1"]{flex:1;}
div.flex-columns[data-width="2"]{flex:2;}
div.flex-columns[data-width="3"]{flex:3;}
div.flex-columns[data-width="4"]{flex:4;}
div.flex-columns[data-width="5"]{flex:5;}
div.flex-columns[data-width="6"]{flex:6;}
div.flex-columns[data-width="7"]{flex:7;}
div.flex-columns[data-width="8"]{flex:8;}
div.flex-columns[data-width="9"]{flex:9;}
div.flex-columns[data-width="10"]{flex:10;}
div.flex-columns[data-width="11"]{flex:11;}
div.flex-columns[data-width="12"]{flex:12;}
div.flex-columns[data-width="13"]{flex:13;}
div.flex-columns[data-width="14"]{flex:14;}
div.flex-columns[data-width="15"]{flex:15;}

div.flex-columns[data-align]{display:flex;}
div.flex-columns[data-align="left"]{justify-content:flex-start;}
div.flex-columns[data-align="center"]{justify-content:center;}
div.flex-columns[data-align="right"]{justify-content:flex-end;}

/*===Keyframe===*/
@keyframes horizontal-shake{
	2%{transform:translate(-7px, 0) rotate(0);}
	4%{transform:translate(-5px, 0) rotate(0);}
	6%{transform:translate(4px, 0) rotate(0);}
	8%{transform:translate(-4px, 0) rotate(0);}
	10%{transform:translate(-6px, 0) rotate(0);}
	12%{transform:translate(2px, 0) rotate(0);}
	14%{transform:translate(-5px, 0) rotate(0);}
	16%{transform:translate(-3px, 0) rotate(0);}
	18%{transform:translate(2px, 0) rotate(0);}
	20%{transform:translate(3px, 0) rotate(0);}
	22%{transform:translate(-2px, 0) rotate(0);}
	24%{transform:translate(-3px, 0) rotate(0);}
	26%{transform:translate(-9px, 0) rotate(0);}
	28%{transform:translate(2px, 0) rotate(0);}
	30%{transform:translate(7px, 0) rotate(0);}
	32%{transform:translate(2px, 0) rotate(0);}
	34%{transform:translate(0px, 0) rotate(0);}
	36%{transform:translate(-1px, 0) rotate(0);}
	38%{transform:translate(6px, 0) rotate(0);}
	40%{transform:translate(-7px, 0) rotate(0);}
	42%{transform:translate(0px, 0) rotate(0);}
	44%{transform:translate(-1px, 0) rotate(0);}
	46%{transform:translate(-2px, 0) rotate(0);}
	48%{transform:translate(10px, 0) rotate(0);}
	50%{transform:translate(-8px, 0) rotate(0);}
	52%{transform:translate(-9px, 0) rotate(0);}
	54%{transform:translate(9px, 0) rotate(0);}
	56%{transform:translate(-2px, 0) rotate(0);}
	58%{transform:translate(-5px, 0) rotate(0);}
	60%{transform:translate(2px, 0) rotate(0);}
	62%{transform:translate(-4px, 0) rotate(0);}
	64%{transform:translate(1px, 0) rotate(0);}
	66%{transform:translate(-3px, 0) rotate(0);}
	68%{transform:translate(10px, 0) rotate(0);}
	70%{transform:translate(4px, 0) rotate(0);}
	72%{transform:translate(-6px, 0) rotate(0);}
	74%{transform:translate(-6px, 0) rotate(0);}
	76%{transform:translate(2px, 0) rotate(0);}
	78%{transform:translate(-2px, 0) rotate(0);}
	80%{transform:translate(-6px, 0) rotate(0);}
	82%{transform:translate(-1px, 0) rotate(0);}
	84%{transform:translate(-6px, 0) rotate(0);}
	86%{transform:translate(-5px, 0) rotate(0);}
	88%{transform:translate(-1px, 0) rotate(0);}
	90%{transform:translate(-1px, 0) rotate(0);}
	92%{transform:translate(-1px, 0) rotate(0);}
	94%{transform:translate(-3px, 0) rotate(0);}
	96%{transform:translate(-6px, 0) rotate(0);}
	98%{transform:translate(-6px, 0) rotate(0);}
	0%, 100%{transform:translate(0, 0) rotate(0);}
}

@media only screen 
and (min-width: 320px) 
and (max-width: 1024px) 
and (-webkit-min-device-pixel-ratio: 2){
	body:not(.wp-admin){
		/* background-color:rgb(157, 195, 230); */
	}
}

@media only screen 
and (min-width: 320px) 
and (max-width: 1024px){
	
}

@media only screen 
and (min-width: 768px) 
and (max-width: 1024px){
	
}

@media only screen 
and (min-width: 768px) 
and (max-width: 1024px) 
and (orientation: portrait){
	
}

@media only screen 
and (min-width: 768px) 
and (max-width: 1024px) 
and (orientation: landscape){
	
}

@media only screen 
and (min-width: 320px) 
and (max-width: 782px){
	body:not(.wp-admin){
		/* background-color:rgb(244, 177, 131); */
	}
}

@media only screen 
and (min-width: 320px) 
and (max-width: 782px) 
and (orientation: portrait){
	
}

@media only screen 
and (min-width: 320px) 
and (max-width: 782px) 
and (orientation: landscape){
	
}

@media only screen 
and (min-width: 375px) 
and (max-width: 812px)
and (-webkit-min-device-pixel-ratio: 3){
	body:not(.wp-admin){
		/* background-color:rgb(244, 177, 131); */
	}
}