/* a4p framework CSS based on AdminLTE */

/* html */
body {
	font-family:'Source Sans Pro','Noto Sans TC','Noto Sans SC','Helvetica Neue',Helvetica,Arial,sans-serif;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
	font-family:inherit;
}
textarea {
	resize:vertical;
}


/* shared classes */
.nowrap {
	white-space:nowrap;
}

.img-holder {
	position:relative;
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
	text-indent:-999em;
}

.text-block {
	margin-top:50px;
	margin-bottom:50px;
}

input.hidden,
textarea.hidden {
	position:absolute;
	visibility:hidden;
	display:inline-block;
}
.input-error {
	color:#D90000;
}

.template {
	display:none;
}

.float-clear {
	height:0;
	clear:both;
	display:block;
}

.avatar {
	width:120px;
	max-width:100%;
	position:relative;
	margin:0 auto 4px auto;
	border-radius:50%;
	display:block;
}
.avatar > * {
	overflow:hidden;
	position:absolute;
	border-radius:50%;
	display:block;
}
.avatar .avatar-inner {
	position:relative;
	padding:0 0 100% 0;
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
	z-index:5;
}
.avatar .avatar-inner .initials {
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	text-align:center;
}
.avatar .avatar-tools {
	top:0;
	bottom:0;
	left:0;
	right:0;
	background:rgba(0,0,0,0.3);
	line-height:0;
	text-align:center;
	opacity:0;
	z-index:6;
	-webkit-transition:opacity 0.3s;
	-moz-transition:opacity 0.3s;
	transition:opacity 0.3s;
}
.avatar:hover .avatar-tools {
	opacity:1;
}
.avatar .avatar-tools-inner {
	position:relative;
	top:50%;
	margin:-16px 0 0 0;
	padding:0 10px;
	border-radius:20px;
	background:#3C8DBC;
	line-height:20px;
	display:inline-block;
}
.avatar .avatar-tools-inner > a {
	padding:6px 2px;
	font-size:16px;
	color:#FFFFFF;
	display:inline-block;
}
.avatar .avatar-loading {
	top:0;
	bottom:0;
	left:0;
	right:0;
	background:rgba(0,0,0,0.4) url(../images/avatar-loader.svg) no-repeat center / 40px;
	display:none;
	z-index:9;
}
.avatar input[type=file] {
	width:1px;
	height:1px;
	position:absolute;
	visibility:hidden;
}
.avatar input[type=file],
.avatar .file-input {
	display:none;
}
.avatar-default .avatar-inner {
	background-image:url(../images/avatar.png) !important;
}
.avatar-default .avatar-tools .delete {
	display:none;
}
.avatar-bordered {
	margin-top:6px;
	margin-bottom:10px;
}
.avatar-bordered:before,
.avatar-bordered:after {
	content:'';
	position:absolute;
	border-radius:50%;
	z-index:1;
}
.avatar-bordered:before {
	top:-6px;
	bottom:-6px;
	left:-6px;
	right:-6px;
	background:#D2D6DE;
}
.avatar-bordered:after {
	top:-3px;
	bottom:-3px;
	left:-3px;
	right:-3px;
	background:#FFFFFF;
}


/* framework */
.main-header .logo {
	padding:10px;
	font-family:'Helvetica Neue','Noto Sans TC','Noto Sans SC',Helvetica,Arial,sans-serif;
	line-height:30px;
}
.main-header .logo .logo-lg .img-holder,
.main-header .logo .logo-mini .img-holder {
	height:30px;
	background-size:contain;
	display:block;
}
.navbar-nav > .user-menu > a > .avatar {
	width:25px;
	float:left;
	margin-right:10px;
	margin-top:-2px;
}
@media (max-width: 767px) {
	.navbar-nav > .user-menu > a > .avatar {
		float:none;
		margin-right:0;
		margin-top:-2.5;
		margin-bottom:-2.5px;
		line-height:10px;
		vertical-align:top;
		display:inline-block;
	}
}
.navbar-nav > .user-menu > .dropdown-menu > li.user-header .avatar {
	width:78px;
}
.navbar-nav > .user-menu > .dropdown-menu > li.user-header .avatar:before {
	background:#63A4C9;
}
.navbar-custom-menu > .navbar-nav > .language-menu > a > .locale-image {
	width:24px;
	height:24px;
	margin-top:-2px;
	margin-bottom:-2px;
	vertical-align:top;
}
.navbar-custom-menu > .navbar-nav > .language-menu > .dropdown-menu .locale-image {
	width:20px;
	height:20px;
	margin-right:4px;
	vertical-align:middle;
}

.sidebar-menu > li.header {
	text-transform:uppercase;
}
.user-panel > .avatar {
	width:100%;
	max-width:45px;
}

.box.box-solid > .box-header a:hover {
	background:none;
}

.box-profile .avatar {
	width:88px;
}
.box-profile .avatar .initials {
	font-size:28px;
	line-height:88px;
}
.box-profile .list-group:last-child {
	margin-bottom:0;
}
.box-profile .list-group:last-child .list-group-item:last-child {
	border-bottom:none;
}
.box-profile .list-group:last-child .list-group-item > a:after {
	content:'\f105';
	float:right;
	font-family:FontAwesome;
}


/* widget: album */
.widget-album {
	overflow:hidden;
}
.widget-album .img-holder {
	padding-bottom:66.667%;
}
.widget-album .img-holder:after {
	content:'';
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	background:rgba(34,45,50,0.4);
}
.widget-album .widget-album-info {
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	padding:20px;
	color:#FFFFFF;
	display:flex;
	flex-direction:column;
	justify-content:flex-end;
}
.widget-album .widget-album-info > :first-child {
	margin-top:0;
}
.widget-album .widget-album-info > :last-child {
	margin-bottom:0;
}
.widget-album .widget-album-meta {
	padding-left:0;
	list-style:none;
}
.widget-album .widget-album-title {
	overflow:hidden;
	margin-bottom:5px;
	font-weight:300;
	line-height:1.4;
	text-overflow:ellipsis;
	white-space:nowrap;
}
.widget-album .widget-album-meta li {
	display:inline-block;
}
.widget-album .widget-album-meta li:not(:last-child) {
	margin-right:12px;
}
.widget-album .widget-album-tools {
	position:absolute;
	top:20px;
	right:20px;
	opacity:0;
	-webkit-transition:opacity 0.3s;
	-moz-transition:opacity 0.3s;
	transition:opacity 0.3s;
}
.widget-album:not(.loading):hover .widget-album-tools {
	opacity:1;
}
a.widget-album.loading {
	cursor:default;
}
.widget-album.loading:after {
	content:'';
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	background:rgba(34,45,50,0.4) url(../images/avatar-loader.svg) no-repeat center / 40px;
}


/* page specific styles */
.login-box {
	width:400px;
}
.login-box .g-recaptcha > * {
	margin:0 auto;
}
.login-box .copyright {
	margin-top:25px;
	text-align:center;
}
.login-logo .img-holder {
	height:60px;
	background-size:contain;
	display:block;
}

.album .kv-upload-progress {
	display:none !important;
}

.skin-option {
	width:45px;
	margin:0 0 5px 5px;
	box-shadow:0 0 3px rgba(0,0,0,0.4);
	vertical-align:top;
	display:inline-block;
}
.skin-option span {
	position:relative;
	float:left;
	background:#F4F5F7;
	display:block;
	cursor:pointer;
}
.skin-option span:nth-child(1) {
	width:20%;
}
.skin-option span:nth-child(2) {
	width:80%;
}
.skin-option div:after {
	content:'';
	clear:both;
	display:block;
}
.skin-option div:nth-child(1) span {
	height:7px;
}
.skin-option div:nth-child(2) span {
	height:20px;
}
.skin-custom {
	margin-top:10px;
}
.skin-custom .skin-option {
	width:180px;
	margin-left:0;
	margin-bottom:0;
	vertical-align:bottom;
}
.skin-custom .skin-option div:nth-child(1) span {
	height:14px;
}
.skin-custom .skin-option div:nth-child(2) span {
	height:80px;
}
.skin-custom .skin-option .sp-replacer {
	width:100%;
	height:100%;
	vertical-align:top;
}
.skin-custom .skin-option span > * {
	position:absolute;
	visibility:hidden;
}
.skin-custom button {
	margin-left:10px;
	vertical-align:bottom;
}