/* font form setup*/
button, input, textarea, select{
	font-family: 'font-default';
}

/* layout */
section.main{
	margin: auto;
}
.nopadding{
	margin: 0px !important;
	padding: 0px !important;
}
.display-block{
	display: block !important;
}
.scroll-off{
	pointer-events: none;
}

/* list */

/* popup */
.blockscreen{
	background-color: rgba(255, 255, 255, 0.4);
	width: 100%;
	height: 100%;
	display: none;
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 901;
}
.popup{
	display: none;
	position: fixed;
	z-index: 999;
	width: 360px;
	height: 200px;
	min-height: 100px;
	top: 10%;
	left: 50%;
	padding: 20px;
	margin-left: -180px;
	background-color: #FFF;
	text-align: center;
	box-shadow: 0px 0px 2px #CCC;
}
.popup > h3{
	margin-top: 0px;
}
.popup > section{
	overflow-x: scroll;
	width: 90%;
	margin-left: 5%;
	margin-right: 5%;
	max-height: 100px;
}
.popup > footer{
	width: 90%;
	padding-top: 15px;
	position: absolute;
	bottom: 10px;
	text-align: center;
}
.popup > label{
	width: 80%;
	text-align: left;
}
.popup > input[type=text], .popup > input[type=password]{
	width: 80%;
}
.popup > button{
	margin: 10px;
}

/* form display */
.display-form{

}
.display-form label{
	width: 100%;
}
.display-form input[type=text], .display-form input[type=password]{
	width: 100%;
	margin-bottom: 5px;
}

/* listing table */
.table-manage{
	border-spacing: 1px;
	border-collapse: separate;
	border-top: 2px solid #BBB;
	border-bottom: 1px solid #BBB;
}
.table-manage input[type=text], .table-manage input[type=password], .table-manage textarea, .table-manage select{
	width: 100%;
	height: 1.5em;
	border: 1px solid #DDD;
	vertical-align: text-top;
}
.table-manage > thead{

}
.table-manage > thead > tr.structure > td{
	height: 0px;
	visibility: hidden;
	padding: 0px;
}
.table-manage > thead > tr > td{
	font-weight: bold;
	background-color: #CCC;
	text-align: center;
	vertical-align: middle;
	padding-top: 4px;
}
.table-manage > tbody{

}
.table-manage > tbody > tr > td{
	background-color: #FFF;
	padding-top: 3px;
	padding-left: 3px;
	padding-right: 3px;
	padding-bottom: 3px;
	vertical-align: top;
}
.table-manage > tbody > tr:nth-child(even) > td{
	background-color: #EAEAEA;
}
.table-manage > tbody > tr:hover > td{
	background-color: #EEE;
}
.table-manage > tbody > tr > td:hover{
	
}
.table-manage > tbody > tr > td > i{
	cursor: pointer;
}
.table-manage > tbody > tr > td.enabled > .enabled{
	display: block;
}
.table-manage > tbody > tr > td.enabled > .disabled{
	display: none;
}
.table-manage > tbody > tr > td.disabled > .enabled{
	display: none;
}
.table-manage > tbody > tr > td.disabled > .disabled{
	display: block;
}
.table-manage > tbody > tr:first-child > td.seq-up > i{
	display: none;
}
.table-manage > tbody > tr:last-child > td.seq-down > i{
	display: none;
}
.table-manage > tfoot{

}
.table-manage > tfoot > tr > td{
	padding-top: 3px;
	padding-left: 3px;
	padding-right: 3px;
	padding-bottom: 3px;
	vertical-align: top;
}
.table-manage > tfoot > tr.empty-row{
	display: none;
}
.table-manage > tfoot > tr.empty-row > td{
	border-top: 2px solid #888;
	border-bottom: 1px solid #888;
}

/* freezing table */
.table-freeze{

}

/* set width */
.w100{
	width: 100% !important;
}
.w90{
	width: 90% !important;
}
.w80{
	width: 80% !important;
}
.w75{
	width: 75% !important;
}
.w70{
	width: 70% !important;
}
.w60{
	width: 60% !important;
}
.w50{
	width: 50% !important;
}
.w40{
	width: 40% !important;
}
.w30{
	width: 30% !important;
}
.w25{
	width: 25% !important;
}
.w20{
	width: 20% !important;
}
.w10{
	width: 10% !important;
}
.w30px{
	width: 30px !important;
}
.w40px{
	width: 40px !important;
}
.w50px{
	width: 50px !important;
}
.w100px{
	width: 100px !important;
}
.w160px{
	width: 160px !important;
}
.w200px{
	width: 200px !important;
}
.w-running{
	width: 40px !important;
}
.w-topic{
	width: 160px !important;
}
.w-story{
	width: 240px !important;
}
.w-status{
	width: 100px !important;
}
.w-icon{
	width: 50px !important;
}

/* image */
.img-s{
	max-width: 30px;
	max-height: 30px;
}
.img-m{
	max-width: 120px;
	max-height: 120px;
}
.img-l{
	max-width: 300px;
	max-height: 300px;
}
.img-hover{
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.4);
}
.img-frame-design{
	position: relative;
	width: 100%;
	height: 240px;
}
.img-frame-design > .up-frame{
	width: 100%;
	height: 30%;
	z-index: 1;
	background-color: #FFF;
	position: absolute;
	top: 0px;
}
.img-frame-design > .down-frame{
	width: 100%;
	height: 30%;
	z-index: 2;
	background-color: #FFF;
	position: absolute;
	bottom: 0px;
}
.img-frame-design > .display{
	width: 94%;
	height: 93%;
	margin: 3%;
	position: absolute;
	background-color: #CCC;
	z-index: 3;
}
.bg-frame-circle{
	background-repeat: no-repeat;
	background-size: cover;
	border: 3px solid #FFF;
	box-shadow: 0px 0px 2px #CCC;
	border-radius: 50px;
}
#img-viewer{
	display: none;
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.8);
	text-align: center;
	z-index: 9999;
	padding: 5%;
}
#img-viewer img{
	max-height: 90% !important;
	max-width: 90% !important;
	width: auto !important;
	box-shadow: 0px 0px 4px #CCC;
}
.box-message{
	color: #000;
}

/* Cursor */
.cursor-pointer{
	cursor: pointer;
}

/* text */
.restrict:before{
	content: "*";
	color: #F00;
}

.icon-toggle.enabled{

}
.icon-toggle.enabled .on{

}
.icon-toggle.enabled .off{
	display: none;
}

.w100{
	width: 100%;
}
.photo-frame-white{
	border: 5px solid #FFF;
	box-shadow: 0px 0px 4px #888;
}