html{
	font-size: 14px;
	font-family: "microsoft yahei";
}
body{
	background: #f3f5f6;
}
body,p,ul,ol{
	margin: 0;
	padding: 0;
	color: #333;
	
}
.container{
	overflow: hidden;
}
.text-black{
	color: #333;
}
.lfloat{
	float: left;
}
.rfloat{
	float: right;
}
.doc-header{
	min-width: 1300px;
	height: 500px;
	position: relative;
	color: #fff;
	}
.doc-header .top-banner{
	position: absolute;	
	height: 500px;
	min-width: 1300px;
	width: 100%;
	background: #333;
}
.top-banner div{
	position: absolute;
	top:0;
	left: 0;
	height: 500px;
	width: 100%;
	background-size:cover;
}
.top-banner div:nth-child(1){
	background: url(../img/1.jpg) no-repeat center;
}
.top-banner div:nth-child(2){
	background: url(../img/2.jpg) no-repeat center;
}
.top-banner div:nth-child(3){
	background: url(../img/3.jpg) no-repeat center ;
}
.top-banner div:nth-child(4){
	background: url(../img/4.jpg) no-repeat center;
}
.top-banner .banner-prev-btn{
	position: absolute;
	left:20px;
	top:50%;	
	cursor: pointer;
}
.top-banner .banner-next-btn{
	position: absolute;
	right:20px;
	top:50%;
	cursor: pointer;
}
.top-banner .banner-prev-btn img,
.top-banner .banner-next-btn img{
	opacity: .5;
}
.top-banner .banner-prev-btn:hover img,
.top-banner .banner-next-btn:hover img{
	opacity: 1;
}


.doc-header .nav{
	position: absolute;
	height: 80px;
	background: rgba(0,0,0,.95);
	width: 100%;
	min-width: 1300px;
	margin: 0 auto;	
	font-size:1.2rem;
}
.doc-header .nav .nav-w{
	width: 1300px;
	height:80px;
	margin: 0 auto;
}
.doc-header .nav .nav-w .logo{
	height: 80px;
	width:300px;
	background: url(../img/logo.png) no-repeat center left;
	float:left;
}
.doc-header .nav .nav-w .top-small-search{
	float: right;
	width: 300px;
	height: 42px;
	background: #fff;
	vertical-align: middle;
	margin-top:20px;
	margin-right:25px;
	border-radius: 15px;
}
.doc-header .nav .nav-w .top-small-search input[type='text']{
	border:none;
	height: 42px;
	width:250px;
	padding: 0 0 0 5px;
	vertical-align: top;
	border-bottom-left-radius: 15px;
	border-top-left-radius: 15px;
}
.doc-header .nav .nav-w .top-small-search .top-search-btn{
	display: inline-block;
	height: 40px;
	width: 40px;
	background: url(../img/search-small-btn.png) no-repeat top;
	vertical-align: top;
	cursor: pointer;
}
.doc-header .nav .nav-w .top-small-search .top-search-btn:hover{
	background-position: bottom;
}

.archives-summary-meta{
	margin-bottom: 14px;
	color: #6d7a86;
	font-size: 13px;
	line-height: 1.8;
}

.archives-summary-header{
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
}

.archives-summary-tools{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.archives-filter-group{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.archives-filter-item{
	display: inline-flex;
}

.archives-filter-chip,
.archives-filter-chip:link,
.archives-filter-chip:hover{
	display: inline-flex;
	align-items: center;
	height: 34px;
	padding: 0 14px;
	border-radius: 17px;
	background: #eef3f6;
	border: 1px solid #d7e0e6;
	color: #4f5f6d;
	text-decoration: none;
	transition: all .2s ease;
}

.archives-filter-chip:hover{
	background: #e4eef5;
	border-color: #bdd6e8;
	color: #2f6f9b;
}

.archives-filter-chip-active,
.archives-filter-chip-active:link,
.archives-filter-chip-active:hover{
	background: linear-gradient(180deg,#3ea2e7 0%,#2479b8 100%);
	border-color: #2479b8;
	color: #fff;
	box-shadow: 0 8px 18px rgba(36,121,184,.24);
}

.archives-sort-chip,
.archives-sort-chip:link,
.archives-sort-chip:hover{
	display: inline-flex;
	align-items: center;
	height: 32px;
	padding: 0 12px;
	border-radius: 16px;
	background: #f6f9fb;
	border: 1px solid #d9e2e8;
	color: #6a7b89;
	text-decoration: none;
	transition: all .2s ease;
}

.archives-sort-chip:hover{
	background: #eef5f9;
	border-color: #bdd6e8;
	color: #2f6f9b;
}

.archives-sort-chip-active,
.archives-sort-chip-active:link,
.archives-sort-chip-active:hover{
	background: #2f88c7;
	border-color: #2f88c7;
	color: #fff;
	box-shadow: 0 6px 14px rgba(47,136,199,.18);
}

.archives-clear-link,
.archives-clear-link:link,
.archives-clear-link:hover{
	color: #95a3af;
	text-decoration: none;
	padding: 0 4px;
}

.archives-clear-link:hover{
	color: #2f88c7;
}

.plant-archives-workspace{
	display: block;
	position: relative;
}

.plant-archives-main{
	min-width: 0;
	position: relative;
	z-index: 1;
}

.homepage-body-right{
	position: relative;
}

.plant-archives-workspace:before{
	content: "";
	position: absolute;
	left: -18px;
	right: -18px;
	top: -8px;
	bottom: -8px;
	background:
		radial-gradient(circle at top left, rgba(75,146,196,.08), transparent 26%),
		linear-gradient(180deg,#f6fafc 0%,#eef4f8 100%);
	border-radius: 28px;
	z-index: 0;
}

.plant-archives-toolbar-card,
.plant-archives-list-item{
	border-radius: 22px;
	border: 1px solid #dfe8ee;
	box-shadow: 0 18px 40px rgba(48,72,94,.10);
	overflow: hidden;
	background: #fff;
}

.plant-archives-toolbar-card .box-body{
	border-color: #edf2f5;
}

.plant-archives-toolbar-card{
	margin-bottom: 20px;
	position: relative;
	z-index: 1;
}

.plant-archives-toolbar{
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 11px 16px 12px;
	background:
		linear-gradient(180deg,rgba(255,255,255,.98) 0%,rgba(247,251,253,.98) 100%);
}

.plant-archives-toolbar-top{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.plant-archives-toolbar-title{
	display: flex;
	align-items: center;
	min-width: 0;
}

.plant-archives-toolbar-copy{
	min-width: 0;
}

.plant-archives-toolbar-kicker{
	font-size: 10px;
	line-height: 1;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: #8aa09b;
	margin-bottom: 5px;
}

.plant-archives-toolbar-actions{
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
}

.plant-archives-toolbar-toggle,
.plant-archives-toolbar-toggle:link,
.plant-archives-toolbar-toggle:hover{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 26px;
	padding: 0 11px;
	border-radius: 13px;
	background: #f5f8fa;
	border: 1px solid #dfe8ee;
	color: #6c7f8d;
	font-size: 12px;
	text-decoration: none;
}

.plant-archives-toolbar-toggle:hover{
	background: #edf4f8;
	color: #2f88c7;
}

.archives-clear-link,
.archives-clear-link:link,
.archives-clear-link:hover{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 26px;
	padding: 0 10px;
	border-radius: 13px;
	color: #738694;
	text-decoration: none;
	background: #fff;
	border: 1px solid #e3ebf0;
}

.archives-clear-link:hover{
	color: #2f88c7;
	background: #f5fafc;
}

.plant-archives-toolbar-summary{
	min-width: 0;
	font-size: 12px;
	line-height: 1.4;
	color: #7c8f9d;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 7px;
}

.plant-archives-toolbar-summary span{
	display: inline-flex;
	align-items: center;
	height: 21px;
	padding: 0 8px;
	border-radius: 11px;
	background: #fbfdfe;
	border: 1px solid #e7eef2;
	color: #68808f;
}

.plant-archives-filter-bar{
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-top: 10px;
	border-top: 1px solid #e8eff3;
}

.plant-archives-filter-bar-collapsed{
	display: none;
}

.plant-archives-filter-line{
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.plant-archives-filter-line-catalogue{
	align-items: flex-start;
}

.plant-archives-filter-prefix{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 24px;
	padding: 0 8px;
	border-radius: 12px;
	background: #ecf3f7;
	color: #69808f;
	font-size: 11px;
	font-weight: bold;
	flex: 0 0 auto;
	letter-spacing: .5px;
}

.archives-filter-group.archives-toolbar-stack{
	gap: 6px;
}

.plant-archives-filter-wall{
	gap: 6px;
}

.archives-sort-chip,
.archives-sort-chip:link,
.archives-sort-chip:hover,
.archives-filter-chip,
.archives-filter-chip:link,
.archives-filter-chip:hover{
	box-shadow: none;
}

.plant-archives-filter-wall-wrap{
	min-width: 0;
	flex: 1;
}

.plant-archives-filter-wall-collapsed{
	max-height: 32px;
	overflow: hidden;
}

.plant-archives-filter-toggle,
.plant-archives-filter-toggle:link,
.plant-archives-filter-toggle:hover{
	display: inline-block;
	margin-top: 6px;
	color: #7b8a96;
	font-size: 12px;
	text-decoration: none;
}

.plant-archives-filter-toggle:hover{
	color: #2f88c7;
}

.plant-archives-results{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px;
	position: relative;
	z-index: 1;
	padding-bottom: 10px;
}

.plant-archives-restoring .plant-archives-results{
	opacity: 0;
	pointer-events: none;
}

.plant-archives-list-item{
	margin-bottom: 0;
	transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}

.plant-archives-list-item:hover{
	transform: translateY(-4px);
	box-shadow: 0 24px 48px rgba(40,64,86,.14);
	border-color: #d3e2eb;
}

.plant-archives-list-item-featured{
	grid-column: span 2;
}

.plant-archives-list-item-featured .plant-archives-card-body{
	flex-direction: row;
	min-height: 0;
}

.plant-archives-list-item-featured .plant-archives-card-cover{
	width: 52%;
	flex: 0 0 52%;
	height: auto;
	min-height: 320px;
}

.plant-archives-list-item-featured .plant-archives-card-content{
	padding: 14px 16px;
	gap: 8px;
}

.plant-archives-list-item-featured .plant-archives-card-cover-title{
	font-size: 34px;
}

.plant-archives-list-item-featured .plant-archives-card-cover-meta span{
	height: 26px;
	font-size: 12px;
}

.plant-archives-list-item-featured .plant-archives-card-code{
	font-size: 12px;
}

.plant-archives-list-item-featured .plant-archives-card-tags span{
	height: 30px;
	font-size: 12px;
}

.plant-archives-list-item-featured .plant-archives-card-stats span{
	height: 28px;
	font-size: 12px;
}

.plant-archives-list-item-featured .plant-archives-card-text{
	-webkit-line-clamp: 4;
	min-height: 0;
	font-size: 14px;
}

.plant-archives-list-item-featured .plant-archives-card-action,
.plant-archives-list-item-featured .plant-archives-card-action:link,
.plant-archives-list-item-featured .plant-archives-card-action:hover{
	height: 34px;
	padding: 0 12px;
}

.plant-archives-card-body{
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 0;
	min-height: 100%;
}

.plant-archives-card-cover{
	display: block;
	width: 100%;
	flex: none;
	height: 252px;
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg,#edf3f6 0%,#dfe8ee 100%);
}

.plant-archives-card-image{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}

.plant-archives-card-cover:hover .plant-archives-card-image{
	transform: scale(1.06);
}

.plant-archives-card-cover:after{
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 34%;
	background: linear-gradient(180deg,rgba(15,26,34,0) 0%,rgba(15,26,34,.16) 100%);
	pointer-events: none;
}

.plant-archives-card-overlay-top{
	position: absolute;
	left: 14px;
	right: 14px;
	top: 14px;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 8px;
	z-index: 2;
	flex-wrap: wrap;
}

.plant-archives-card-overlay-chip{
	display: inline-flex;
	align-items: center;
	height: 24px;
	padding: 0 9px;
	border-radius: 14px;
	background: rgba(255,255,255,.72);
	border: 1px solid rgba(255,255,255,.24);
	color: #284255;
	font-size: 11px;
	font-weight: bold;
	backdrop-filter: blur(6px);
}

.plant-archives-card-overlay-chip-accent{
	background: rgba(46,137,197,.92);
	color: #fff;
	border-color: rgba(255,255,255,.16);
	box-shadow: 0 10px 20px rgba(46,137,197,.24);
}

.plant-archives-card-overlay-chip-soft{
	background: rgba(25,40,52,.42);
	color: #fff;
	border-color: rgba(255,255,255,.12);
}

.plant-archives-card-overlay{
	display: none;
}

.plant-archives-card-overlay-copy{
	max-width: 88%;
}

.plant-archives-card-cover-title{
	margin: 0;
	font-size: 24px;
	line-height: 1.2;
	color: #fff;
	text-shadow: 0 2px 12px rgba(0,0,0,.26);
}

.plant-archives-card-cover-meta{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
}

.plant-archives-card-cover-meta span{
	display: inline-flex;
	align-items: center;
	height: 24px;
	padding: 0 9px;
	border-radius: 12px;
	background: rgba(255,255,255,.14);
	color: rgba(255,255,255,.92);
	font-size: 11px;
	backdrop-filter: blur(4px);
}

.plant-archives-card-content{
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 0 0 auto;
	padding: 10px 12px 12px;
	gap: 6px;
	background:
		linear-gradient(180deg,#ffffff 0%,#fbfdfe 100%);
}

.plant-archives-card-head{
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-bottom: 2px;
}

.plant-archives-card-code{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #8ea0ab;
	font-size: 11px;
	line-height: 1.4;
	word-break: break-all;
	text-transform: uppercase;
	letter-spacing: .6px;
	max-width: 100%;
	text-align: left;
}

button.plant-archives-card-code{
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	outline: none;
}

.plant-archives-card-code:hover{
	color: #2f88c7;
}

.plant-archives-card-code-label{
	display: inline-flex;
	align-items: center;
	height: 20px;
	padding: 0 7px;
	border-radius: 10px;
	background: #f2f7fa;
	border: 1px solid #e1ebf1;
	color: #7d909d;
	flex: 0 0 auto;
}

.plant-archives-card-tags{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.plant-archives-card-tags span{
	display: inline-flex;
	align-items: center;
	height: 26px;
	padding: 0 9px;
	border-radius: 14px;
	background: #f5f9fb;
	border: 1px solid #dde9ef;
	color: #58707f;
	font-size: 11px;
}

.plant-archives-card-stats{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.plant-archives-card-stats span{
	display: inline-flex;
	align-items: center;
	height: 24px;
	padding: 0 8px;
	border-radius: 14px;
	background: #eaf4fb;
	color: #467d9f;
	font-size: 11px;
	font-weight: bold;
}

.plant-archives-card-text{
	color: #667a88;
	line-height: 1.6;
	flex: none;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	min-height: 0;
	padding: 8px 10px;
	border-radius: 12px;
	background: #f7fafc;
	border: 1px solid #edf3f7;
}

.plant-archives-card-actions{
	margin-top: 0;
	padding-top: 6px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-top: 1px solid #edf3f6;
}

.plant-archives-card-action-group{
	display: flex;
	align-items: center;
	gap: 6px;
	position: relative;
}

.plant-archives-card-action-group-right{
	justify-content: flex-end;
}

.plant-archives-card-action,
.plant-archives-card-action:link,
.plant-archives-card-action:hover{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 30px;
	padding: 0 10px;
	border-radius: 16px;
	color: #5d7382;
	border: 1px solid #e4edf2;
	background: #f9fbfc;
	text-decoration: none;
	transition: background .2s ease,color .2s ease,border-color .2s ease;
}

button.plant-archives-card-action{
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	font: inherit;
	outline: none;
}

.plant-archives-card-action:hover{
	background: #eef6fa;
	color: #2f88c7;
	border-color: #cfe0ea;
}

.plant-archives-card-liked{
	background: #edf8f2;
	border-color: #cfe8d8;
	color: #2f7c56;
}

.plant-archives-card-liked:hover{
	background: #e8f5ee;
	color: #2f7c56;
	border-color: #c5dfd1;
}

.plant-archives-card-action-success{
	background: #edf8f2;
	border-color: #cfe8d8;
	color: #2f7c56;
}

.plant-archives-card-action-error{
	background: #fcf1f1;
	border-color: #efdbdb;
	color: #a14f4f;
}

.plant-archives-card-action-bump{
	animation: plantArchivesActionBump .26s ease;
}

.plant-archives-card-action .icon{
	margin: 0;
}

.plant-archives-card-like-action .icon-like{
	opacity: .72;
	transition: opacity .18s ease, transform .18s ease, filter .18s ease;
}

.plant-archives-card-like-action:hover .icon-like{
	opacity: 1;
}

.plant-archives-card-action .praisecount{
	color: #2f88c7;
	font-weight: bold;
	min-width: 12px;
}

.plant-archives-card-liked .icon-like{
	opacity: 1;
	transform: scale(1.08);
	filter: saturate(1.2);
}

.plant-archives-card-liked .praisecount{
	color: #2f7c56;
}

.plant-archives-card-action-group-right .plant-archives-card-action{
	color: #7d8f9b;
}

.plant-archives-action-feedback{
	position: absolute;
	right: 0;
	bottom: calc(100% + 8px);
	display: inline-flex;
	align-items: center;
	height: 26px;
	padding: 0 10px;
	border-radius: 13px;
	font-size: 12px;
	white-space: nowrap;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .18s ease, transform .18s ease;
	box-shadow: 0 10px 22px rgba(24,40,52,.16);
	pointer-events: none;
}

.plant-archives-action-feedback-visible{
	opacity: 1;
	transform: translateY(0);
}

.plant-archives-action-feedback-success{
	background: rgba(36,61,54,.95);
	color: #fff;
}

.plant-archives-action-feedback-error{
	background: rgba(118,48,48,.95);
	color: #fff;
}

@keyframes plantArchivesActionBump{
	0%{
		transform: scale(1);
	}
	50%{
		transform: scale(1.06);
	}
	100%{
		transform: scale(1);
	}
}

.plant-archives-empty{
	padding: 62px 24px;
	text-align: center;
	color: #777;
}

.plant-archives-empty-title{
	font-size: 18px;
	margin-bottom: 10px;
	color: #425563;
}

.plant-archives-empty-text{
	font-size: 13px;
	color: #7a8c98;
}

@media (max-width: 1200px){
	.plant-archives-results{
		grid-template-columns: 1fr;
	}

	.plant-archives-list-item-featured{
		grid-column: auto;
	}

	.plant-archives-list-item-featured .plant-archives-card-body{
		flex-direction: column;
		min-height: 100%;
	}

	.plant-archives-list-item-featured .plant-archives-card-cover{
		width: 100%;
		flex: none;
		min-height: 280px;
	}
}

@media (max-width: 900px){
	.plant-archives-toolbar-top,
	.plant-archives-toolbar-title{
		flex-direction: column;
		align-items: flex-start;
	}

	.plant-archives-toolbar-actions{
		width: 100%;
		justify-content: space-between;
	}

	.plant-archives-toolbar-summary{
		white-space: normal;
	}

	.plant-archives-filter-line{
		flex-direction: column;
	}

	.plant-archives-filter-wall-collapsed{
		max-height: 58px;
	}
}

@media (max-width: 640px){
	.plant-archives-toolbar{
		padding: 12px 16px 16px;
	}

	.plant-archives-card-cover{
		height: 210px;
	}

	.plant-archives-card-content{
		padding: 16px;
	}
}

.doc-header .nav .nav-item{
	display: inline-block;
	color: #fff;
	line-height: 80px;
	height: 76px;
	margin-left: 20px;
}
.doc-header .nav .nav-item a,.doc-header .nav .nav-item a:link,.doc-header .nav .nav-item a:hover{
	color: #fff;
	text-decoration: none;	
	padding: 0 20px;
	display: inline-block;
	height: 76px;
	position: relative;
	text-align:center
}
.doc-header .nav .nav-item a:hover{
	background: #222222;
}

.doc-header .nav .nav-item a:before{
	content: "";	
	display: inline-block;
	width:0;	
	height: 76px;
	border-bottom: #009CFC 0px solid;
	position: absolute;
	left: 0;
}
.doc-header .nav .nav-item a:hover:before{
	content: "";	
	display: inline-block;
	width:100%;
	height: 76px;
	transition: width .3s;
	border-bottom: #009CFC 4px solid;
	position: absolute;
	left: 0;
}

.doc-header .nav .login-status{
	float: right;
	line-height: 80px;
	position: relative;
}
.doc-header .nav .login-status a,.doc-header .nav .login-status a:link{
	margin:0 8px;
	color: #fff;
	text-decoration: none;
}
.doc-header .nav .login-status a:hover{
	text-decoration:underline;
}
.doc-header .nav .login-status .account-name{
	display: inline-block;
	margin-left: 8px;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	vertical-align: middle;
	text-decoration: none;
}
.icon-top-login{
	display: inline-block;
	width: 36px;
	height: 36px;
	background: #FFFFFF;
	border-radius: 50%;
	vertical-align: middle;
	line-height: 0;
}
.icon-top-login img{	
	object-fit: cover;
	border-radius: 50%;
	width: 36px;
	height: 36px;
}
/*.icon-top-login:before{
	content: "";
	display: inline-block;
	background: #009cfc;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	position: absolute;
	margin-left:14px;
	margin-top:6px;
}
.icon-top-login:after{
	content: "";
	display: inline-block;
	background: #009cfc;
	width: 24px;
	height: 15px;
	border-top-left-radius: 12px;
	border-top-right-radius: 12px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	position: absolute;
	margin-top:22px;
	margin-left:9px;
}*/

.top-search{
	position: absolute;
	top:150px;
	width: 750px;
	left:50%;
	margin-left:-375px;
}

.top-search .top-search-text{
	font-size: 3rem;
	text-align: center;
	padding: 20px;
	text-shadow: #ffffff 0 0 3px;
}

.top-search-box{
	width: 750px;
	height:60px;
	background: #FFFFFF;
	border-radius: 15px;
	}
.top-search-box input[type=text]{
	height: 58px;
	margin: 0;
	padding-left: 15px;
	border: none;
	width:685px;
	border-top-left-radius: 15px;
	border-bottom-left-radius: 15px;
	font-size: 1.5rem;
	color: #aaa;
	vertical-align: middle;
}
.top-search-box input[type=text]:hover{
	color: #333;
}

.top-search-box .top-search-btn{
	vertical-align: middle;
	width:25px;
	height:26px;
	display: inline-block;
	background: url(../img/search-btn.png) no-repeat top ;
	margin-left: 5px;
}
.top-search-box .top-search-btn:hover{
	background-position: bottom;
}

.main-article{
	position: relative;
	width: 1260px;
	height: auto;
	overflow: hidden;
	padding: 20px 20px 100px 20px;
	margin:30px auto;	
	background:#fff url(../img/desert.png) no-repeat bottom;	
    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.04);
    min-height: 600px;
}

}
.article-title{
	text-align: center;
	width: 750px;
	margin: 0 auto;
}
.article-title h1{
	font-size: 2.5rem;
	font-weight: normal;
	text-align: center;
}
.article-title p{
	color:#666;
	font-size: 1.2rem;
	text-align: left;
	text-indent: 2em;
	line-height: 30px;
}

.families{
	display: flex;
	
	flex-direction: row; 
	padding: 30px 0;
}
.family{
	width: 300px;
	text-align: center;
	margin-right: 20px;
}
.family:nth-child(1){
	margin-left:20px;
}

.cactus .family-img{
	width:200px;
	height:200px;
	margin:0 auto;
	background: url(../img/Cactus.png) no-repeat;
}
.cactus:hover .family-img{
	background: url(../img/Cactus-on.png) no-repeat;
}

.aizoaceae .family-img{
	width:200px;
	height:200px;
	margin:0 auto;
	background: url(../img/Aizoaceae.png) no-repeat;
}

.asphodelaceae .family-img{
	width:200px;
	height:200px;
	margin:0 auto;
	background: url(../img/Asphodelaceae.png) no-repeat;
}

.agave .family-img{
	width:200px;
	height:200px;
	margin:0 auto;
	background: url(../img/Agave.png) no-repeat;
}

.family .family-name,.family-en-name{
	color: #333333;
	font-size:1.2rem;
	font-weight: bold;
}

.family-en-name{
	color: #ccc;
}

.family-description{
	width: 200px;
	margin: 20px auto 0;
	color: #666666;
	text-indent: 2em;
	text-align: left;
}

footer{
	height: 40px;
	background: #212124;
	width: 100%;
	min-width: 1300px;
	color: #aaa;
}
footer .footer-box{
	width: 1300px;
	height: 40px;
	margin: 0 auto;
}

footer .footer-nav{
	float: left;
	width: 800px;
	line-height: 40px;
	margin-left: 20px;
}
footer .footer-nav a,footer .footer-nav a:link{
	margin-right: 20px;
	color: #aaa;
	text-decoration: none;
}

footer .footer-nav a:hover{
	text-decoration: underline;
}

footer .footer-copyright{
	width:480px;
	float: right;
	text-align: center;
	line-height: 40px;
}

/* sort */
.sort-doc{
	height:135px;
}
.sort-doc .sort-nav{
	position: absolute;
	height:55px;
	background: #fff;
	width: 100%;
	color: #333;
	margin:0 auto ;
	top:80px;
	border-bottom: #dcdcdc 1px solid;
}

.sort-nav ul{
	width: 1300px;
	margin:0 auto;
	list-style: none;
	height: 55px;
}
.sort-nav ul li{
	float:left;
	color: #999;
	padding: 0 20px;
	line-height: 51px;
	margin:0 10px 0 0;
	cursor: pointer;
}
.sort-nav li.sort-selected,.sort-nav li.sort-selected:hover{
	color: #333;		
	border-bottom: #009CFC 4px solid;
}
.sort-nav li:hover{
	color: #333;		
	border-bottom: #eee 4px solid;
}
.sequence{
	height: 40px;
	background: #ededed;
	position: absolute;
	top:0;
	width: 100%;
	left: 0;
}
.sequence span{
	display: inline-block;
	color: #666;
	width: 40px;
	line-height: 40px;
	text-align: center;
	font-family: arial;
	font-size: 1.2rem;
	overflow: hidden;
	cursor: pointer;
}
.sequence .sequence-head{
	width:75px;
	text-align:center;
	color: #333;	
	font-size: 1rem;
	font-style: normal;
	line-height: 40px;
	display: inline-block;
	vertical-align: top;
	font-weight: bold;
}
.sequence .sequence-head:hover{
	background:#ededed;
	color: #333333;
}
.sequence .sequence-seleted{
	background: #FFFFFF;
	color: #009bf9;
	font-size: 1.8rem;
	font-family:"arial";
}
.sequence .sequence-seleted:hover{
	color: #009bf9;
}
.sequence .sequence-disable,
.sequence .sequence-disable:hover{
	color:#ddd;
	font-size: 1.2rem;
	background:#ededed;
	
}
.sequence span:hover{
	background: #fff;
	color: #666;
}
.sequence span.back-g{
	float: right;
	width: 60px;
	height: 40px;
	position: relative;
	font-size: 1rem;
}
.sequence span.back-g:after{
	content: " ";
	border-left:1px solid #ddd;
	position: absolute;
	left:0;
	top:5px;
	width: 60px;
	height: 30px;
}
.sequence span.back-g:hover:after{
	content: " ";
	border-left:0 solid #fff;
	position: absolute;
	left:0;
	top:5px;
	width: 60px;
	height: 30px;
}
.sequence span.back-g:hover{
	background: #009cfc;
	color: #fff;
}
.sequence-body{
	display: flex;
	flex-direction: row;
	flex-flow: wrap;
	padding:30px 0;
}
.sequence-body .sequence-item{
	width: 25%;
	margin-bottom: 30px;
	display: flex;
}
.sequence-body .sequence-item:hover{
	background: #F3F5F6;
}
.icon-cactus{
	height: 50px;
	width: 50px;
	background: url(../img/icon-cactus.png);
	display: inline-block;
	vertical-align: top;
}
.sequence-body  .sequence-family-name{
	display: inline-block;
	vertical-align: top;
}

.sequence-body  .sequence-family-name .zh{
	font-size: 1.2rem;
	color: #333333;
}

.sequence-body  .sequence-family-name .en{
	color:#999;
}

.article-postion{
	width:1300px;
	margin: 0 auto;
	height: 60px;
	line-height: 60px;
}
.search-result{
	position: relative;
	width: 1300px;
	height: auto;
	overflow: hidden;
	padding: 0;
	margin:0 auto 30px;	
    min-height: 600px;
    display: flex;
    flex-direction: row;
    flex-flow: wrap;
}


.search-result-item {
  border-radius: 4px;
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.04);
  width: 420px;
  height: 340px;
  margin:0 20px 20px 0;
}
.search-result-item:nth-child(3n){
    	margin-right:0;
    }
.search-result-item .item-title{
	height: 60px;
	padding: 0 10px;
}

.search-result-item .item-title .name{
	height: 30px;	
	line-height: 45px;
	overflow: hidden;
	text-overflow: ellipsis;
	font-weight: bold;
}
.search-result-item .item-title .filed-number{
	height: 30px;	
	font-family: arial;
	color: #999;
	font-size: 0.9rem;
	line-height: 24px;
	text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.search-result-item .item-img{
	width: 420px;
	height: 236px;
	background: #333;
}
.search-result-item .item-img img{
	object-fit: cover;
	object-position:center ;
}
.search-result-item .item-tool{
	display: flex;
	justify-content: space-between;
	height: 44px;
	line-height: 44px;
}
.search-result-item .item-tool div{
	width: 80px;
	vertical-align: middle;
	text-indent: 2em;
	margin:0 2%;
}
.search-result-item .item-tool div.hot{
	background: url(../img/hot-eye.png) no-repeat left center;
}
.search-result-item .item-tool div.share{
	background: url(../img/share.png) no-repeat left center;
}
.search-result-item .item-tool div.fav{
	background: url(../img/fav-star.png) no-repeat left center;
}


/* content-doc */
.content-doc{
	height:720px;	
	background:#212124;

}

.plant-img-show{
	position: absolute;
	width: 100%;
	min-width: 1300px;
	top:80px;
	bottom:0;
	overflow: hidden;	
}

.plant-img-show .big-left-arrow{
	position: absolute;
    left: 10px;
    font-size: 6rem;
    opacity: .3;
    top: 45%;	
    font-family: georgia;
    z-index: 999;
	cursor: pointer;
}

.plant-img-show .big-right-arrow{
	position: absolute;
    right: 10px;
    font-size: 6rem;
    opacity: .3;
    top: 45%;
     z-index: 999;
	 cursor: pointer;
}

.plant-img-show .big-left-arrow:hover,
.plant-img-show .big-right-arrow:hover
{
	opacity: .8;
	cursor: pointer;
}
.plant-img-show .plant-img-cur-name{
	height: 60px;
	width: 1300px;
	margin: 0 auto;
	text-align: center;
}
.plant-img-show .plant-img-cur-name .name{	
	line-height: 30px;
	color: #fff;
	font-weight: bold;
}
.plant-img-show .plant-img-cur-name .name-location{	
	line-height: 30px;
	color:#999;	
}


.plant-img-show .plant-img-cur {
	position: absolute;
    top: 60px;
    bottom: 10px;
    width: 100%;
	text-align: center;
	overflow: hidden;
	display: flex;
    justify-content: center;
    align-items: center;
}
.plant-img-show .plant-img-cur img{
}

.plant-img-show .img-photographer{
	position: absolute;
	bottom: 15px;
	right:50px;
	color: #666;
	opacity: 0.8;
}
.plant-img-show .img-photographer span{
	
}

.plant-img-show .plant-img-rotation {
	width: 1300px;
	height: 120px;
	position:absolute;
	bottom:0;
	left:50%;
	margin-left:-650px;
}

@-webkit-keyframes bounceinB{
    0%{opacity:0;-webkit-transform:translateY(100px);}
    60%{opacity:1;-webkit-transform:translateY(-30px);}
    80%{-webkit-transform:translateY(10px);}
    100%{-webkit-transform:translateY(0);}
}
@-moz-keyframes bounceinB{
    0%{opacity:0;-moz-transform:translateY(100px);}
    60%{opacity:1;-moz-transform:translateY(-30px);}
    80%{-moz-transform:translateY(10px);}
    100%{-moz-transform:translateY(0);}
}
@-ms-keyframes bounceinB{
    0%{opacity:0;-ms-transform:translateY(100px);}
    60%{opacity:1;-ms-transform:translateY(-30px);}
    80%{-ms-transform:translateY(10px);}
    100%{-ms-transform:translateY(0);}
}
@keyframes bounceinB{
    0%{opacity:0;transform:translateY(100px);}
    60%{opacity:1;transform:translateY(-30px);}
    80%{transform:translateY(10px);}
    100%{transform:translateY(0);}
}

@keyframes bounceoutB{
    0%{opacity:1;transform:translateY(0);}
    100%{opacity:0;transform:translateY(100px);}
}

.plant-img-show .plant-img-rotation .rotation-box{
	width: 1300px;
	margin: 0 auto;
	background:rgba(25,25,27,.6);
	height: 120px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	box-shadow: 0px 0px 2px 0px rgba(255, 255, 255, 0.1);
	transition: all .8s ease-out ;
}
/*.plant-img-show .plant-img-rotation:hover  .rotation-box {
	visibility: visible;
	-webkit-animation:bounceinB .8s ease-out backwards;-moz-animation:bounceinB .8s ease-out backwards;-ms-animation:bounceinB .8s ease-out backwards;animation:bounceinB .8s ease-out backwards;
}*/

.rotation-box .left-arrow,.rotation-box .right-arrow{
	width: 50px;
	height: 120px;
	vertical-align: middle;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	cursor: pointer;
}

.rotation-box .left-arrow:hover,.rotation-box .right-arrow:hover{
	background:rgba(51,51,51,.6);
}
.rotation-box  .rotation-items{
	width:1200px;
	overflow: hidden;
	position: relative;
}

.rotation-box  .rotation-items .item-whole-length{
	position: absolute;
	height: 120px;
	display: flex;
	flex-direction: row;
	flex-flow: nowrap;	
}

.rotation-box  .rotation-items .item-whole-length .item {
	width:198px;
	height: 116px;
	background: #444;
	margin:2px 1px;
	position: relative;
}


.rotation-box  .rotation-items .item-whole-length .item .img{	
	width: 100%;
	height: 100%;
	overflow: hidden;	
	display: flex;	
	justify-content: center;
	align-items: center;
	/* 拉伸平铺 align-content: center; */
}

.rotation-box  .rotation-items .item-whole-length .item .border{
	position: absolute;
	border:0 solid #fff;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background: #000;
	opacity: .45;
	cursor: pointer;
}
.rotation-box  .rotation-items .item-whole-length .item:hover .border,.rotation-box  .rotation-items .item-whole-length .img-selected .border{
	border: #009cfc 3px solid ;
	background: transparent;
	opacity: 1;
}

.rotation-box  .rotation-items .item-whole-length .item .filed-number{
	position: absolute;
	height: 30px;
	background:rgba(0,0,0,.5);
	color: #fff;
	text-align: center;
	bottom:0;
	left:0;
	right:0;
	line-height:30px
}

.content-article{
	width:1300px;
	overflow: hidden;
	margin: 30px auto;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.content-article .content-article-left{
	width: 960px;
	min-height: 460px;
	background-color: rgb(255, 255, 255);
    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.04);
    padding: 20px;
}

.content-article .content-article-right{
	background-color: rgb(255, 255, 255);
    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.04);
    padding: 20px;
    width: 230px;
}

.content-article .content-article-left .sp-title{
	font-size: 1.2rem;
	font-weight: bold;
	color: #333333;
	height: 40px;
	border-bottom:#e2e2e2 1px solid;
}
.content-article .content-article-left .sp-row{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: nowrap;
	padding:10px 0;
	line-height: 25px;
}
.content-article .content-article-left .sp-row .sp-name{
	width: 80px;
	color: #999;
}

.content-article .content-article-left .sp-row .sp-text{
	width: 890px;
	color: #333;
	word-break: break-word;
}

.content-article a,.content-article a:link{
	color:#009CFC;
	text-decoration: none;
}

.content-article a,.content-article a:hover{
	color:#009CFC;
	text-decoration: underline;
}

/* 2019-2-27 */

.register-header{
	text-align: center;
	font-weight: bolder;
	font-size: 16px;
	height: 40px;
	line-height:40px;
}

.register-body{
	text-align: center;
	display: block;
}
.register-row{
	width: 900px;
	display: inline-flex;
	margin: 20px auto 0;
	align-items: center;
}
.register-row .register-item-name{
	width: 120px;
	text-align: right;
	font-size: 1.2rem;
	color: #626262;
	padding-right: 20px;
}
.register-row .register-item-input{
	width: 400px;
	height: 40px;
	border:#e2e2e2 1px solid;
}
.register-row .register-item-input input[type=text],
.register-row .register-item-input input[type=password]{
	outline: none;
	font-size: 16px;
	width: 360px;
	height: 38px;
	border: none;
}
.register-row .register-item-imgcode{
	width: 400px;
	height: 40px;
	text-align: left;
	line-height: 40px;
	font-size: 16px;
}
.register-row .register-item-imgcode input[type=text]{	
	width: 200px;
	height: 40px;
	border:#e2e2e2 1px solid;
}
.register-row .register-item-imgcode .imgcode{
	width: 180px;
	height: 40px;
	display: inline-block;
}
.register-row .register-item-imgcode a,
.register-row .register-item-imgcode a:link{
	color:#009CFC;
	text-decoration: underline;
}

.register-row .register-item-imgcode a:hover{
	color:#009CFC;
	text-decoration: none;
}
.register-row .register-item-tip {
	color: #ccc;
	font-size: 1rem;
	font-style: italic;
	padding-left: 20px;
}

.register-body-line{
	height: 1px;
	font-size: 0;
	width: 900px;
	border-top:#e2e2e2 1px solid;
	margin:20px auto;
	clear: both;
}

.register-login-button{
	width: 180px;
	height: 40px;
	color: #FFFFFF;
	background:#006dac;
	font-size: 18px;
	margin: 0 auto;
	line-height: 40px;
	border-radius: 10px;
	cursor:pointer;
	}
.register-login-button:hover{
	background: #009CFC;
}

.login-bg{
	background: url(../img/login_bg_2560x1600.jpg)  center center fixed;
	background-size: cover ;
	background-repeat: no-repeat;
}
.loginbox{
	width: 400px;
	border-radius: 5px;
	height: 260px;
	min-height: 0;
	background-image: none;
	background: rgba(255,255,255,.9);
	box-shadow:0 0 10px #009CFC;
	margin-top: 8rem;
}

.loginbox .register-item-name{
	width: 80px;
	text-align: right;
	font-size: 1.2rem;
	color: #626262;
	padding-right: 20px;
}
.loginbox .register-item-input{
	width: 240px;
	height: 40px;
	border:#a2a2a2 1px solid;
}

.loginbox .register-item-input input[type=text],
.loginbox .register-item-input input[type=password]{
	outline: none;
	font-size: 1rem;
	width: 210px;
	height: 38px;
	border: none;
	color: #333;
	background: none;
}
.loginbox .register-row,
.loginbox .register-body-line{
	width: 400px;
}
.loginbox .register-row div img{
	vertical-align: middle;
}
.loginbox .register-row div a,
.loginbox .register-row div a:link{
	color: #333333;
	text-decoration: underline;
	vertical-align: middle;
}

.loginbox .register-row div a:hover{
	text-decoration: none;
}
.loginbox .register-row .yanzhen-input{
	float: left;
	width: 110px;
	margin-right: 5px;
}
.loginbox .register-header{
	background:none;
	height: 5rem;
	line-height: 5rem;
}

/* genus-description */

.genus-description{
	padding:20px 0 0 0;
	width:1260px
}
.genus-description .genus-description-title{	
	height:48px;
}
.genus-description h1{
	float: left;
	font-size: 1.2rem;
	color: #333;
}
.genus-description .genus-content-btn{
	float: right;
	padding-top:20px;
	color: #666666;
	text-align: right;
}
.genus-description .genus-content-btn div{
	display: inline-block;
	height: 16px;
	width: 16px;
	vertical-align: middle;
	margin-left:5px;
	cursor: pointer;
}
.genus-description .genus-content-btn:hover{
	color:#009CFC;
	cursor: pointer;
}
.genus-description .genus-content-btn .btn-open{
	background: url(../img/btn-open.png);
}
.genus-description .genus-content-btn .btn-close{
	background: url(../img/btn-close.png)
}

.genus-description-content{
	clear: both;
	background: #ecf4f8;
	padding:20px 25px;
	font-size: 0.8rem;
	line-height: 1.4rem;
	overflow: hidden;
	text-overflow: ellipsis;
	border-radius: 5px;
}
.genus-description .content-hidden-height{
	height:100px;
}

.error-correction{
	font-size: 0.8rem;
	border-radius:10px ;
	background: #009CFC;
	height: 24px;
	width: 60px;
	color: #fff;
    line-height:24px;
    text-align:center;
    cursor: pointer;
}
.error-correction:hover{
	background: #00ACFF;
}
.split-line{
	 border-top: #e2e2e2 1px solid;
}



/* home-page-doc */
.homepage-doc{
	height: 430px;
}
.homepage-header{
	height: :;0px;
	margin: 0 auto;
	width: 1300px;
	position: relative;
	top:80px;
}

.homepage-banner{
	height: 220px;
	width: 100%;
	overflow: hidden;
}

.user-logo-big{
	position: absolute;
	width: 170px;
	height: 170px;
	border-radius: 50%;
	background: #fff;
	bottom: 30px;
	left: 100px;
	border: #dcdcdc 1px solid;
	text-align: center;
}
.user-logo-big img{
	width: 160px;
	height: 160px;
	border-radius: 50%;
	margin-top: 5px;
}

.user-logo-big128{
	width: 128px;
	height: 128px;	
}
.user-logo-big128 img{
	width: 128px;
	height: 128px;
	border-radius: 50%;
}
.user-name {
	position: absolute;
	font-size: 2rem;
	color: #FFFFFF;
	bottom: 100px;
	left:300px;
	text-shadow: #333333 0 0 5px;
}
.homepage-nav{
	height: 45px;
	border: #dcdcdc 1px solid;
	background: #fff;
}

.homepage-nav ul{
	height: 45px;
	padding: 0;
	margin: 0 0 0 270px;
}
.homepage-nav ul li{
	float: left;
	list-style: none;
	height: 45px;
	line-height: 45px;
	border-left:#dcdcdc 1px solid;
	border-right:#dcdcdc 1px solid;
	margin-left: -1px;
}
.homepage-nav ul li  a,
.homepage-nav ul li  a:link{
	padding: 8px 40px;
	font-size: 1.2rem;
	color: #666;
	text-decoration: none;
}

.homepage-nav ul li a:hover{
	border-bottom:#ddd 4px solid;
	color: #333;
	font-weight: bold;
}

.homepage-nav ul li.cur  a,
.homepage-nav ul li.cur  a:link,
.homepage-nav ul li.cur  a:hover{
	color: #333;
	font-weight: bold;
	border-bottom:#009CFC 4px solid;
}

.homepage-body{
	position: relative;
	width: 1300px;
	height: auto;
	overflow: hidden;
	margin: 0 auto;	
    min-height: 600px;
    top:100px
}
.homepage-body .homepage-body-left{
	width:200px;
	float: left;
}
.homepage-body .homepage-body-right{
	float:left;
	margin-left:220px;
	width: 780px;
	margin-bottom: 50px;
}
.homepage-body .homepage-body-margin{
	margin-left:20px ;
}
.homepage-body .homepage-body-right-sidebar{
	width: 280px;
	float: right;
}

.homepage-recommend h1{
	font-size: 1rem;
	padding: 0;
	margin: 0;
	line-height: 40px;
	text-align: center;
}

.homepage-recommend .homepage-recommend-item{
	width:260px;
	margin: 0 auto 10px;
	position: relative;
	border: 1px solid #e5e5e5;
	border-radius: 5px;
	overflow: hidden;
	padding-bottom: 3px;
}

.homepage-recommend .homepage-recommend-item img{
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
}
.homepage-recommend .homepage-recommend-item .homepage-recommend-title{
	/*position: absolute;*/
	color: #666;
	/*bottom: 0;*/
	height: 40px;
	width: 260px;
	line-height: 40px;
	text-indent: 5px;
	display: flex;
	justify-content: space-between;
}

.homepage-recommend .homepage-recommend-item .homepage-recommend-title .group .group-name{
	color: #337AB7;
	font-weight: bold;
	height: 20px;
	line-height: 20px;
}

.homepage-recommend .homepage-recommend-item .homepage-recommend-title .group .group-count{
	color: #AAAAAA;
	height: 20px;
	line-height: 20px;
	font-weight: normal;
}

.homepage-recommend .homepage-recommend-item .homepage-recommend-title .group .group-count b{
	color: #AAAAAA;
	height: 20px;
	line-height: 20px;
	font-weight: normal;
}
.homepage-recommend-item a{
	text-decoration: none;
	border: 0;
	margin: 0;
	padding: 0;
	display: block;
}
.homepage-recommend-item a:hover .homepage-recommend-title{
	transition: background-color .5s; 
}

.homepage-recommend .homepage-recommend-item .homepage-recommend-title .r-btn {
	border: #e5e5e5 1px solid;
	height: 24px;
	line-height: 24px;
	padding: 0 5px;
	border-radius: 5px;
	background: #f5f6f7;
	text-align: center;
	margin-right: 10px;
	margin-top: 5px;
	font-weight: bold;	
}
.homepage-recommend .homepage-recommend-item .homepage-recommend-title .r-btn:hover{
	background: #f1f2f3;
	color: #337AB7;
	transition: background-color,color .5s;

}

.hmbox{
	
	margin-bottom: 20px;
	clear: both;
}
.hmbox-border{
	border:#dcdcdc 1px solid;
	border-radius: 5px;
	background: #FFF;
}
.hmbox h1{
	font-size: 1.1rem;
	padding: 10px;
	margin: 0;
	color: #0464a0;
	font-weight: bold;
}
.hmbox h1 .icon{
	margin-right: 10px;
}
.hmbox h2{
	font-size: 1.1rem;
	padding: 10px;
	margin: 0;
	color: #0464a0;
}
.hmbox h1 span{
	font-style: normal;
	font-size: 1rem;
	color: #333;
	font-weight: bold;
}

.hmbox .user-logo-mini{
	display: inline-block;
	vertical-align: middle;
	margin-right: 0.5rem;
}

.forum-user-checkin{
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 10px 12px;
	padding: 7px 8px;
	border-radius: 12px;
	background:
		radial-gradient(circle at 10% 0%, rgba(255,206,116,.28), transparent 34%),
		linear-gradient(135deg,#f8fbff 0%,#eef6fb 100%);
	border: 1px solid #dce9f1;
	box-shadow: 0 7px 16px rgba(29,75,112,.06);
}

.forum-gold-pill{
	display: flex;
	flex-direction: column;
	align-items: baseline;
	justify-content: center;
	flex: 0 0 48px;
	margin-bottom: 0;
	color: #6b7f8d;
	font-family: "microsoft yahei";
	font-size: 11px;
	font-weight: normal;
	line-height: 1.1;
}

.forum-gold-pill span{
	color: #6b7f8d;
	font-size: 11px;
	font-weight: normal;
	line-height: 1.1;
}

.forum-gold-pill strong{
	color: #c68418;
	font-family: "microsoft yahei";
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .4px;
}

.forum-sign-btn{
	flex: 1;
	min-width: 0;
	height: 31px;
	border: 0;
	border-radius: 16px;
	background: linear-gradient(135deg,#2b91d1 0%,#1e6ea9 100%);
	color: #fff;
	font-family: "microsoft yahei";
	font-size: 13px;
	cursor: pointer;
	box-shadow: 0 6px 14px rgba(43,145,209,.20);
	transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.forum-sign-btn:hover{
	transform: translateY(-1px);
	box-shadow: 0 11px 22px rgba(43,145,209,.30);
}

.forum-sign-btn .forum-sign-mark{
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-right: 5px;
	border-radius: 50%;
	background: #ffd36b;
	box-shadow: 0 0 0 3px rgba(255,211,107,.18);
	vertical-align: middle;
}

.forum-sign-btn .forum-sign-text{
	font-weight: bold;
	vertical-align: middle;
}

.forum-sign-btn small{
	display: none;
	margin-left: 6px;
	color: rgba(255,255,255,.78);
	font-size: 11px;
	vertical-align: middle;
}

.forum-sign-btn.signed{
	background: #edf4f8;
	color: #6f8392;
	box-shadow: none;
	cursor: default;
}

.forum-sign-btn.signed .forum-sign-mark{
	background: #8bb69b;
	box-shadow: 0 0 0 4px rgba(139,182,155,.16);
}

.forum-sign-btn.signed small{
	color: #8fa0ab;
}

.forum-sign-btn.signing{
	opacity: .72;
	pointer-events: none;
}


.hmbox .hmtxt{
	text-indent: 2em;
	padding:10px 20px;
	color: #666;
	line-height: 1.6rem;
}
.hmbox .hmline{
	height: 1px;
	margin:20px;
	border-top:#dcdcdc 1px solid;
	font-size: 0;
}
.hmbox .user-position{
	padding:10px 20px;
	color: #0464a0;
	line-height: 1.6rem;
}
.hmtopic-fixed{
	position: fixed;
}
.hmtopic-title{
	height: 40px;
	text-align: center;
	background: #ededed;
	line-height: 40px;
	font-size: 1.1rem;
	font-weight: bold;
}
.hmtopic-mask{
	position: absolute;
	background: rgba(0,0,0,.5);
	z-index: 50;
	
}
.hmbox-topic-editor{
	position: relative;
	z-index: 100;
}
.tags{
	padding:10px 20px 0;
	display: flex;
	}
.tags div.title{
	color: #AAAAAA;
}
.tags div.tag{
	color: #096;
}
.tags a{
	color: #009966;
	text-decoration: none;
	margin-right: 10px;
}
.tags input{
	border: none;
	border-bottom: #dcdcdc 1px solid;
}
.hmtopic{
	padding: 20px;
	display: flex;
}
.topic-content{
	width: 100%;
	margin-left: 15px;
	color: #999999;
	font-size: 1.2rem;
}
.topic-content div{
	width: 100%;
	min-height: 80px;
	overflow: auto;
}
.img-upload-box{
	padding: 0 20px 10px;
	display:flex;	
	flex-wrap: wrap;
}
.img-upload-box div.img-item{
	height: 60px;
	width: 85px;
	margin:4px;
	position: relative;
	background-repeat: no-repeat;
	background-size: cover;
	text-align:center
}

.img-upload-box div.img-item:after{
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	border-radius: 4px;
	border: 1px solid rgba(255,255,255,.35);
	box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
	pointer-events: none;
}

.img-upload-box div.img-item.uploaded:after{
	border-color: rgba(70,160,92,.75);
	box-shadow: inset 0 0 0 2px rgba(70,160,92,.25);
}

.img-upload-box div.img-item.upload-error:after{
	border-color: rgba(210,69,54,.85);
	box-shadow: inset 0 0 0 2px rgba(210,69,54,.25);
}

.topic-upload-progress{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 4px;
	background: rgba(0,0,0,.18);
	overflow: hidden;
	z-index: 2;
}

.topic-upload-progress span{
	display: block;
	width: 0;
	height: 100%;
	background: linear-gradient(90deg,#40a9f1,#83d67d);
	transition: width .2s ease;
}

.img-upload-box div .delete-btn{
	border-radius: 50%;
	font-size: 8px;
	background: #cc0000;
	color: #fff;
	width:16px;
	height: 16px;
	position: absolute;
	right: -4px;
	top:-4px;
	text-align: center;
	line-height: 16px;
	font-family: verdana;
	cursor: pointer;
}
.img-upload-box div .delete-btn:hover{
	background: #ff3300;
}
.topic-tools{
	padding:0 20px 20px 20px;
	/* display: flex; */
	overflow: hidden;
	/* align-content: space-between;
	justify-content: space-between; */
}
.topic-tool-btn{
  border-radius: 10px;
  background-color: rgb(235, 244, 250);
  padding:0 10px;
  cursor: pointer;
  height: 30px;
  line-height:30px;
  margin-right: 10px;
  float: left;
}
.topic-tool-btn:hover{
	background: #d3ecfd;
}
.topic-tool-btn .icon{
	margin-right: 5px;
}
.topic-cancel-btn{
	background: #f5f7f8;
	color: #7b8790;
}
.topic-cancel-btn:hover{
	background: #eef2f4;
	color: #c24b3c;
}
.topic-upload-status{
	margin: -2px 20px 12px;
	padding: 8px 10px;
	border-radius: 10px;
	font-size: 13px;
	line-height: 1.4;
}
.topic-upload-status-muted{
	background: #f2f7fb;
	color: #6b7d8c;
}
.topic-upload-status-success{
	background: #edf8ef;
	color: #3b8150;
}
.topic-upload-status-error{
	background: #fff1ef;
	color: #b84b3e;
}
.topic-share-btn{
	height: 30px;
	line-height: 30px;
	border-radius: 10px;
	background: #009CFC;
	width: 50%;
	color: #fff;
	text-align: center;
	font-weight:bold;
	cursor: pointer;
	float: right;
}

.topic-share-btn:hover{
	background: #0099dd;
}

.plant-group-toolbar{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	padding: 12px 16px 6px;
	border-bottom: 1px solid #edf2f5;
	background: #fbfdfe;
}

.plant-group-chip,
.plant-group-add{
	border: 1px solid #dbe6ed;
	background: #fff;
	color: #657785;
	border-radius: 16px;
	height: 30px;
	padding: 0 13px;
	font-size: 13px;
	line-height: 28px;
	cursor: pointer;
	transition: all .18s ease;
}

.plant-group-chip:hover,
.plant-group-add:hover{
	border-color: #acd0e6;
	color: #2f88c7;
	background: #f2f8fc;
}

.plant-group-chip.active{
	background: linear-gradient(135deg,#2f91cf,#2b75ad);
	border-color: #2b75ad;
	color: #fff;
	box-shadow: 0 6px 14px rgba(47,136,199,.18);
}

.plant-group-add{
	border-style: dashed;
	color: #8a9aa6;
}

.plant-card-group-badge{
	display: inline-flex;
	align-items: center;
	height: 20px;
	margin-left: 6px;
	padding: 0 7px;
	border-radius: 10px;
	background: #eef6fb;
	color: #4a82a9;
	font-size: 12px;
	vertical-align: middle;
}

.user-homepage-page{
	background:
		radial-gradient(circle at 10% 8%, rgba(98,150,115,.14), transparent 24%),
		radial-gradient(circle at 90% 2%, rgba(47,136,199,.10), transparent 28%),
		linear-gradient(180deg,#eef5f1 0%,#f7fafc 42%,#f4f7f8 100%);
}

.user-homepage-page .homepage-header{
	top: 70px;
	border-radius: 28px;
	overflow: hidden;
	box-shadow: 0 28px 70px rgba(36,60,76,.16);
	background: #fff;
}

.user-homepage-page .homepage-banner{
	height: 190px;
	position: relative;
	background:
		linear-gradient(135deg, rgba(20,38,34,.76), rgba(45,98,80,.28)),
		url("/img/homepage-banner.jpg") center/cover no-repeat;
}

.user-homepage-page .homepage-banner:after{
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 70%;
	background: linear-gradient(180deg, transparent 0%, rgba(13,23,28,.62) 100%);
}

.user-homepage-page .homepage-banner img{
	display: none;
}

.user-homepage-page .user-logo-big{
	width: 128px;
	height: 128px;
	left: 54px;
	bottom: 42px;
	border: 4px solid rgba(255,255,255,.9);
	box-shadow: 0 20px 52px rgba(20,38,34,.24);
}

.user-homepage-page .user-logo-big img{
	width: 118px;
	height: 118px;
	margin-top: 5px;
}

.user-homepage-page .user-name{
	left: 210px;
	bottom: 100px;
	font-size: 30px;
	font-weight: 900;
	letter-spacing: .5px;
}

.user-homepage-subtitle{
	position: absolute;
	left: 212px;
	bottom: 74px;
	color: rgba(255,255,255,.78);
	font-size: 14px;
	text-shadow: 0 10px 26px rgba(0,0,0,.4);
}

.user-homepage-page .homepage-nav{
	height: 54px;
	border: 0;
	background: rgba(255,255,255,.96);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}

.user-homepage-page .homepage-nav ul{
	height: 54px;
	margin-left: 210px;
}

.user-homepage-page .homepage-nav ul li{
	height: 54px;
	line-height: 54px;
	border: 0;
	margin-left: 0;
}

.user-homepage-page .homepage-nav ul li a,
.user-homepage-page .homepage-nav ul li a:link{
	display: block;
	padding: 0 24px;
	font-size: 14px;
	font-weight: 800;
	color: #607080;
}

.user-homepage-page .homepage-nav ul li.cur a,
.user-homepage-page .homepage-nav ul li.cur a:link,
.user-homepage-page .homepage-nav ul li.cur a:hover{
	color: #253848;
	border-bottom: 4px solid #5d9a75;
}

.user-homepage-page .homepage-body{
	top: 96px;
	overflow: visible;
}

.user-homepage-page .homepage-body .homepage-body-left{
	width: 240px;
}

.user-homepage-page .homepage-body .homepage-body-right{
	width: 820px;
}

.user-homepage-page .homepage-body .homepage-body-margin{
	margin-left: 24px;
}

.user-homepage-page .hmbox-border{
	border: 1px solid rgba(207,220,226,.86);
	border-radius: 22px;
	background: rgba(255,255,255,.94);
	box-shadow: 0 18px 46px rgba(54,78,92,.09);
	overflow: hidden;
}

.user-homepage-page .hmbox h1{
	padding: 16px 18px 8px;
	color: #2b5368;
}

.user-homepage-page .hmbox .hmtxt{
	text-indent: 0;
	padding: 12px 18px;
}

.user-homepage-page .hmbox .hmline{
	margin: 12px 18px;
}

.user-homepage-page .hmbox .user-position{
	padding: 10px 18px 18px;
	color: #607080;
}

.user-dashboard-panel{
	padding: 22px;
	background:
		linear-gradient(135deg, rgba(255,255,255,.96) 0%, rgba(244,249,246,.96) 100%) !important;
}

.user-dashboard-hero{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.user-dashboard-kicker{
	color: #5d9a75;
	font-size: 12px;
	font-weight: 900;
	letter-spacing: 2px;
}

.user-dashboard-hero h2{
	margin: 7px 0 8px;
	color: #203241;
	font-size: 26px;
	font-weight: 900;
}

.user-dashboard-hero p{
	margin: 0;
	color: #6f7f8d;
	line-height: 1.65;
}

.user-dashboard-primary,
.user-dashboard-primary:link,
.user-dashboard-primary:hover{
	flex: 0 0 auto;
	padding: 12px 20px;
	border-radius: 999px;
	background: #203241;
	color: #fff;
	font-weight: 900;
	text-decoration: none;
	box-shadow: 0 14px 30px rgba(32,50,65,.18);
}

.user-dashboard-stats{
	display: grid;
	grid-template-columns: repeat(3, minmax(0,1fr));
	gap: 14px;
	margin-top: 18px;
}

.user-dashboard-stat,
.user-dashboard-stat:link,
.user-dashboard-stat:hover{
	display: block;
	padding: 16px;
	border-radius: 18px;
	background:
		radial-gradient(circle at 100% 0%, rgba(93,154,117,.18), transparent 38%),
		#f7fbf8;
	border: 1px solid #e3eee8;
	color: #203241;
	text-decoration: none;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.user-dashboard-stat:hover{
	transform: translateY(-2px);
	box-shadow: 0 18px 36px rgba(54,78,92,.12);
	border-color: #cfe3d6;
}

.user-dashboard-stat span,
.user-dashboard-stat em{
	display: block;
	color: #7a8994;
	font-style: normal;
	font-size: 12px;
}

.user-dashboard-stat strong{
	display: block;
	margin: 8px 0 4px;
	color: #203241;
	font-size: 28px;
	font-weight: 900;
	line-height: 1;
}

.user-dashboard-actions{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid #e6eef1;
}

.user-dashboard-actions a,
.user-dashboard-actions a:link,
.user-dashboard-actions a:hover{
	padding: 9px 13px;
	border-radius: 999px;
	background: #edf5f0;
	color: #446956;
	font-size: 13px;
	font-weight: 800;
	text-decoration: none;
}

.user-dashboard-anchor{
	position: relative;
	top: -90px;
	height: 0;
}

.user-homepage-page .hmtopic-title{
	height: auto;
	padding: 15px 18px;
	background: #f7faf8;
	color: #203241;
	text-align: left;
	line-height: 1.2;
}

.user-homepage-page .topic-share-btn{
	background: #5d9a75;
	box-shadow: 0 10px 24px rgba(93,154,117,.2);
}

.user-maintenance-page .homepage-header{
	top: 64px;
}

.user-maintenance-page .homepage-body{
	top: 88px;
}

.user-maintenance-page .homepage-body .homepage-body-left{
	width: 220px;
}

.user-maintenance-page .homepage-body .homepage-body-right{
	width: 780px;
}

.user-maintenance-page .homepage-body .homepage-body-margin{
	margin-left: 20px;
}

.user-maintenance-page .homepage-body .homepage-body-right-sidebar{
	width: 250px;
}

.maintenance-hero{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 22px 24px;
	background:
		radial-gradient(circle at 100% 0%, rgba(93,154,117,.18), transparent 32%),
		linear-gradient(135deg, rgba(255,255,255,.98), rgba(245,250,247,.98)) !important;
}

.maintenance-kicker{
	color: #5d9a75;
	font-size: 12px;
	font-weight: 900;
	letter-spacing: 2px;
}

.maintenance-hero h2{
	margin: 6px 0 8px;
	color: #203241;
	font-size: 25px;
	font-weight: 900;
}

.maintenance-hero p{
	margin: 0;
	color: #6f7f8d;
	line-height: 1.65;
}

.maintenance-hero-actions{
	display: flex;
	align-items: center;
	gap: 14px;
	flex: 0 0 auto;
}

.maintenance-stat{
	min-width: 92px;
	padding: 12px 14px;
	border-radius: 18px;
	background: #f3f8f5;
	border: 1px solid #e1ece6;
	text-align: center;
}

.maintenance-stat span{
	display: block;
	color: #7a8994;
	font-size: 12px;
}

.maintenance-stat strong{
	display: block;
	margin-top: 4px;
	color: #203241;
	font-size: 28px;
	font-weight: 900;
	line-height: 1;
}

.maintenance-stat-muted{
	background: #f7f2ee;
	border-color: #eadfd8;
}

.maintenance-primary-btn{
	border: 0;
	border-radius: 999px;
	padding: 12px 20px;
	background: #203241;
	color: #fff;
	font-weight: 900;
	box-shadow: 0 14px 30px rgba(32,50,65,.18);
	cursor: pointer;
}

.maintenance-primary-btn:hover{
	background: #2c4354;
}

.plant-space-request-btn{
	border: 0;
	border-radius: 999px;
	padding: 12px 18px;
	background: linear-gradient(135deg,#2f8dcb,#2d6fa5);
	color: #fff;
	font-weight: 900;
	box-shadow: 0 12px 24px rgba(47,136,199,.18);
	cursor: pointer;
	transition: transform .18s ease, box-shadow .18s ease;
}

.plant-space-request-btn:hover{
	transform: translateY(-1px);
	box-shadow: 0 15px 28px rgba(47,136,199,.24);
}

.user-maintenance-page #box-album,
.user-maintenance-page #box-photo{
	background: rgba(255,255,255,.96);
}

.user-maintenance-page #box-album .hmtopic-title,
.user-maintenance-page #box-photo .hmtopic-title{
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 62px;
	height: auto;
	padding: 12px 16px;
	background: #f7faf8;
	text-align: left;
	line-height: 1.2;
}

.user-maintenance-page .hmtopic-title-padding{
	padding-left: 0;
	color: #203241;
	font-size: 17px;
	font-weight: 900;
}

.user-maintenance-page .hmtopic-title-padding a,
.user-maintenance-page .hmtopic-title-padding a:link,
.user-maintenance-page .hmtopic-title-padding a:hover{
	color: #5d9a75;
	font-weight: 900;
	text-decoration: none;
}

.user-maintenance-page .album-tools{
	align-items: center;
	gap: 8px;
}

.user-maintenance-page .grey-btn{
	margin: 0;
	padding: 8px 14px;
	border: 0;
	border-radius: 999px;
	background: #edf5f0;
	color: #446956;
	font-weight: 800;
	box-shadow: none;
}

.user-maintenance-page .grey-btn:hover{
	background: #dfeee5;
	color: #203241;
}

.user-maintenance-page #create_album,
.user-maintenance-page #create_archives,
.user-maintenance-page #selectfiles{
	background: #203241;
	color: #fff;
}

.user-maintenance-page .photoalbum-search-box{
	width: 360px;
	padding: 0;
}

.plant-archives-maintenance-tabs{
	display: flex;
	gap: 8px;
}

.plant-archives-maintenance-tab{
	border: 0;
	border-radius: 999px;
	padding: 9px 14px;
	background: #edf5f0;
	color: #446956;
	font-weight: 900;
	cursor: pointer;
}

.plant-archives-maintenance-tab.active{
	background: #203241;
	color: #fff;
}

.user-maintenance-page .photoalbum-search-box .form-control{
	height: 38px;
	border-color: #dbe8e2;
	border-radius: 999px 0 0 999px;
	box-shadow: none;
}

.user-maintenance-page .photoalbum-search-box .btn{
	height: 38px;
	border-radius: 0 999px 999px 0;
	background: #203241;
	color: #fff;
}

.user-maintenance-page .album-row{
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	padding: 18px;
}

.plant-archives-load-row{
	clear: both;
	padding: 4px 18px 22px;
	text-align: center;
}

.plant-archives-load-more{
	border: 0;
	border-radius: 999px;
	padding: 10px 24px;
	background: #203241;
	color: #fff;
	font-weight: 900;
	box-shadow: 0 14px 28px rgba(32,50,65,.16);
	cursor: pointer;
}

.plant-archives-load-more:hover{
	background: #2f4d60;
}

.plant-archives-load-more[disabled]{
	background: #9aabb4;
	box-shadow: none;
	cursor: default;
}

.plant-archives-load-status{
	display: none;
	color: #7a8994;
	font-size: 13px;
	font-weight: 800;
}

.plant-archives-list-toolbar-status{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 0 18px 6px;
	color: #6e7f89;
}

.plant-archives-list-status-title{
	color: #203241;
	font-size: 15px;
	font-weight: 900;
}

.plant-archives-list-status-desc{
	font-size: 12px;
	line-height: 1.6;
	text-align: right;
}

.user-maintenance-page #main #gallery .gallery-item{
	float: none;
	width: auto;
	height: auto;
	min-height: 0;
	padding: 0;
	border-radius: 20px;
	background: #fff;
	border: 1px solid #e3edf0;
	box-shadow: 0 16px 36px rgba(54,78,92,.08);
	overflow: hidden;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.user-maintenance-page #main #gallery .gallery-item:hover{
	transform: translateY(-3px);
	box-shadow: 0 22px 44px rgba(54,78,92,.13);
	border-color: #d1e4d8;
}

.user-maintenance-page #main #gallery .gallery-item .album{
	width: 100%;
	height: 188px;
	margin: 0;
	padding: 0;
	border-radius: 20px 20px 0 0;
	overflow: hidden;
}

.plant-maintenance-card-cover{
	position: relative;
}

.plant-maintenance-card-topbar{
	position: absolute;
	top: 10px;
	left: 10px;
	right: 44px;
	z-index: 3;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	pointer-events: none;
}

.user-maintenance-page #main #gallery .gallery-item .album .album-img{
	border: 0;
	border-radius: 0;
	box-shadow: none;
	transition: transform .28s ease;
}

.user-maintenance-page #main #gallery .gallery-item .album:hover .album-img{
	transform: scale(1.04);
}

.user-maintenance-page #main #gallery .gallery-item .album-del-btn{
	top: 10px;
	right: 10px;
	display: block;
	width: 28px;
	height: 28px;
	background-color: rgba(19,31,40,.72);
	box-shadow: 0 10px 22px rgba(0,0,0,.18);
}

.user-maintenance-page #main #gallery .gallery-item .album-restore-btn{
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 600;
	border: 0;
	border-radius: 999px;
	padding: 6px 12px;
	background: rgba(32,50,65,.88);
	color: #fff;
	font-size: 12px;
	font-weight: 900;
	box-shadow: 0 10px 22px rgba(0,0,0,.18);
	cursor: pointer;
}

.user-maintenance-page #main #gallery .gallery-item .album-restore-btn:hover{
	background: #5d9a75;
}

.user-maintenance-page #main #gallery .gallery-item:hover .album-del-btn:hover{
	background-color: #a53a35;
}

.plant-maintenance-card-body{
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 10px 12px;
	min-height: 0;
	padding: 14px 16px 16px;
}

.plant-maintenance-card-title-row{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
	grid-column: 1 / -1;
}

.plant-maintenance-card-title-row label{
	flex: 1;
	margin: 0;
	color: #203241;
	font-size: 16px;
	font-weight: 900;
	line-height: 1.35;
	word-break: break-all;
}

.plant-maintenance-card-code{
	flex: 0 0 auto;
	max-width: 96px;
	padding: 4px 8px;
	border-radius: 999px;
	background: #eef3f7;
	color: #597182;
	font-size: 11px;
	font-weight: 900;
	line-height: 1.2;
	text-align: center;
	word-break: break-all;
}

.plant-maintenance-card-meta{
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-self: center;
	min-width: 0;
}

.plant-maintenance-card-meta span,
.plant-card-status-badge,
.plant-card-group-badge{
	display: inline-flex;
	align-items: center;
	padding: 5px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 900;
	line-height: 1;
}

.plant-maintenance-card-meta span{
	background: #f2f6f8;
	color: #5f7585;
}

.plant-card-group-badge{
	background: rgba(255,255,255,.92);
	color: #40695a;
	box-shadow: 0 10px 22px rgba(20,35,45,.12);
}

.plant-card-status-badge{
	background: rgba(32,50,65,.88);
	color: #fff;
	box-shadow: 0 10px 22px rgba(20,35,45,.12);
}

.plant-card-status-badge-private{
	background: rgba(162,132,75,.92);
}

.plant-maintenance-card-actions{
	display: flex;
	align-items: center;
	justify-content: flex-end;
	align-self: center;
}

.plant-maintenance-card-action{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 88px;
	height: 32px;
	justify-content: center;
	padding: 8px 12px;
	border: 0;
	border-radius: 999px;
	background: #203241;
	color: #fff;
	font-size: 12px;
	font-weight: 900;
	box-shadow: 0 12px 26px rgba(32,50,65,.14);
	cursor: pointer;
}

.user-maintenance-page #main #gallery .gallery-item .plant-maintenance-card-action.icon-edit{
	display: inline-flex;
	width: auto;
	height: 32px;
	background: #203241;
	background-image: none;
	box-sizing: border-box;
	white-space: nowrap;
}

.plant-maintenance-card-action:hover{
	background: #2d4a5d;
}

.user-maintenance-page #main #gallery .gallery-item .plant-maintenance-card-action.icon-edit:hover{
	background: #2d4a5d;
	background-image: none;
}

.plant-maintenance-card-action-muted{
	background: #5d8b72;
}

.plant-maintenance-card-action-muted:hover{
	background: #4f7d64;
}

.plant-maintenance-card-action i{
	font-size: 12px;
}

.plant-maintenance-card-recycle-tip{
	color: #8a6d66;
	font-size: 12px;
	font-weight: 800;
	line-height: 1.6;
}

.gallery-item-recycle .plant-maintenance-card-body{
	background: linear-gradient(180deg,#fff,#fcf7f5);
}

.user-maintenance-page .album-photo-box{
	height: 188px;
	overflow: hidden;
	background: #e9f0ed;
}

.user-maintenance-page .album-photo-box img{
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	object-fit: cover;
	transition: transform .28s ease;
}

.user-maintenance-page .album-photo-box img:hover{
	transform: scale(1.04);
	box-shadow: none;
}

.user-maintenance-page .homepage-body-right-sidebar .homepage-recommend{
	border-radius: 22px;
	background: rgba(255,255,255,.94);
	box-shadow: 0 18px 46px rgba(54,78,92,.09);
	overflow: hidden;
}

.user-maintenance-page .formula-panel{
	padding: 16px;
	border: 1px solid #e2ece7;
	background:
		radial-gradient(circle at 100% 0%, rgba(182,208,184,.22), transparent 36%),
		linear-gradient(180deg,#fff,#f8fbf8);
}

.formula-panel-head{
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.formula-panel-icon{
	flex: 0 0 42px;
	width: 42px;
	height: 42px;
	border-radius: 16px;
	background: #203241;
	color: #fff;
	font-size: 17px;
	font-weight: 900;
	line-height: 42px;
	text-align: center;
	box-shadow: 0 12px 24px rgba(32,50,65,.18);
}

.formula-panel h1{
	margin: 0;
	color: #203241;
	font-size: 20px;
	font-weight: 900;
	line-height: 1.2;
}

.formula-panel p{
	margin: 7px 0 0;
	color: #72818c;
	font-size: 12px;
	line-height: 1.65;
}

.formula-add-btn{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	margin: 16px 0 14px;
	padding: 11px 13px 11px 16px;
	border: 0;
	border-radius: 16px;
	background: #5d8b72;
	color: #fff;
	font-weight: 900;
	box-shadow: 0 14px 28px rgba(93,139,114,.22);
	cursor: pointer;
}

.formula-add-btn:hover{
	background: #4f7d64;
}

.formula-add-btn i{
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: rgba(255,255,255,.18);
	line-height: 24px;
	text-align: center;
}

.formula-list{
	max-height: 420px;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-y: auto;
}

.formula-item{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 10px;
	padding: 12px;
	border: 1px solid #e3ece7;
	border-radius: 16px;
	background: rgba(255,255,255,.86);
	transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.formula-item:hover{
	transform: translateY(-2px);
	border-color: #c9ded2;
	box-shadow: 0 12px 24px rgba(54,78,92,.09);
}

.formula-item-main{
	min-width: 0;
	flex: 1;
}

.formula-name{
	display: block;
	max-width: 136px;
	overflow: hidden;
	color: #203241;
	font-size: 14px;
	font-weight: 900;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.formula-item-main small{
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 5px;
	color: #83929c;
	font-size: 11px;
}

.formula-item-actions{
	display: flex;
	gap: 6px;
	flex: 0 0 auto;
}

.formula-item-actions button{
	width: 30px;
	height: 30px;
	border: 0;
	border-radius: 50%;
	background: #eef5f1;
	color: #54705f;
	line-height: 30px;
	text-align: center;
	cursor: pointer;
}

.formula-item-actions button:hover{
	background: #203241;
	color: #fff;
}

.formula-item-actions .formula-del:hover{
	background: #a45b50;
}

.formula-empty{
	padding: 16px 14px;
	border: 1px dashed #d9e5df;
	border-radius: 16px;
	background: rgba(255,255,255,.62);
	color: #84929a;
	font-size: 13px;
	line-height: 1.7;
	list-style: none;
}

.user-plant-maintenance-page #archivesModal .modal-dialog{
	width: 96vw !important;
	max-width: 1180px;
	margin: 24px auto;
	max-height: calc(100vh - 48px);
}

body.plant-archives-modal-lock{
	position: fixed;
	width: 100%;
	overflow: hidden;
}

.user-plant-maintenance-page #archivesModal{
	overflow: hidden !important;
}

.user-plant-maintenance-page #archivesModal .box-primary{
	display: flex;
	max-height: calc(100vh - 48px);
	flex-direction: column;
	border-top: 0;
	border-radius: 24px;
	overflow: hidden;
	box-shadow: 0 30px 90px rgba(20,35,45,.28);
}

.user-plant-maintenance-page #archivesModal .plant-archives-edit-header{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 11px 16px;
	background:
		radial-gradient(circle at 94% 8%, rgba(93,154,117,.24), transparent 28%),
		linear-gradient(135deg,#203241 0%,#315268 100%);
	color: #fff;
}

.plant-archives-edit-status{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 11px 18px;
	border-bottom: 1px solid #e3edf0;
	background: #f6faf8;
}

.plant-archives-edit-status-main{
	min-width: 0;
}

.plant-archives-edit-status strong{
	display: block;
	color: #203241;
	font-size: 14px;
	font-weight: 900;
}

.plant-archives-edit-status span{
	display: block;
	margin-top: 2px;
	color: #70808b;
	font-size: 12px;
	line-height: 1.6;
}

.plant-archives-edit-status-side{
	display: none;
}

.plant-archives-edit-status-neutral{
	background: #f6faf8;
}

.plant-archives-edit-status-dirty{
	background: #fff8ed;
}

.plant-archives-edit-status-dirty .plant-archives-edit-status-side{
	display: none;
}

.plant-archives-edit-status-success{
	background: #eef8f2;
}

.plant-archives-edit-status-success .plant-archives-edit-status-side{
	display: none;
}

.plant-archives-edit-status-warning{
	background: #fff4f0;
}

.plant-archives-edit-status-warning .plant-archives-edit-status-side{
	display: none;
}

.plant-archives-edit-kicker{
	color: rgba(224,245,183,.88);
	font-size: 10px;
	font-weight: 900;
	letter-spacing: 1.5px;
}

.user-plant-maintenance-page #archivesModal .plant-archives-edit-header h3{
	margin: 2px 0 0;
	font-size: 18px;
	font-weight: 900;
}

.user-plant-maintenance-page #archivesModal .plant-archives-edit-header p{
	display: none;
}

.plant-archives-edit-close{
	width: 30px;
	height: 30px;
	border: 1px solid rgba(255,255,255,.28);
	border-radius: 50%;
	background: rgba(255,255,255,.12);
	color: #fff;
	font-size: 21px;
	line-height: 26px;
	text-align: center;
	cursor: pointer;
}

.plant-archives-edit-close:hover{
	background: rgba(255,255,255,.2);
}

.user-plant-maintenance-page #archivesModal .plant-archives-edit-body{
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 18px;
	background: #f6faf8;
}

.user-plant-maintenance-page .select2-container--open{
	z-index: 10060;
}

.user-plant-maintenance-page #archivesModal .select2-container{
	z-index: 10061;
}

.plant-archives-edit-form-panel,
.plant-archives-edit-photo-panel{
	padding-left: 12px;
	padding-right: 12px;
}

.plant-archives-edit-form-panel form,
.plant-archives-edit-photo-panel #p-edit{
	border-radius: 20px;
	background: #fff;
	border: 1px solid #e3edf0;
	box-shadow: 0 14px 34px rgba(54,78,92,.08);
}

.plant-archives-edit-form-panel form{
	padding: 18px 20px;
}

.plant-archives-edit-section-title{
	margin: 4px 0 12px;
	color: #203241;
	font-size: 16px;
	font-weight: 900;
}

.plant-archives-photo-toolbar .plant-archives-edit-section-title{
	margin-bottom: 3px;
}

.user-plant-maintenance-page #archivesModal .form-control,
.user-plant-maintenance-page #archivesModal textarea{
	border-color: #dbe8e2;
	border-radius: 12px;
	box-shadow: none;
}

.user-plant-maintenance-page #archivesModal textarea{
	padding: 10px 12px;
	resize: vertical;
}

.user-plant-maintenance-page #archivesModal label{
	color: #405567;
}

.plant-archives-uuid-copy,
.plant-archives-uuid-copy:hover{
	display: block;
	width: 100%;
	padding: 12px 14px;
	border-radius: 16px !important;
	background:
		radial-gradient(circle at 96% 12%, rgba(93,154,117,.16), transparent 34%),
		#edf5f0 !important;
	color: #446956 !important;
	border: 1px solid #dbe8e2 !important;
	text-align: left;
	box-shadow: none !important;
	overflow: hidden;
	cursor: pointer;
}

.plant-archives-uuid-copy span,
.plant-archives-uuid-copy small{
	display: block;
}

.plant-archives-uuid-copy span{
	color: #6f8679;
	font-size: 12px;
	font-weight: 900;
	letter-spacing: .4px;
}

.plant-archives-uuid-copy strong{
	display: block;
	margin-top: 5px;
	color: #203241;
	font-size: 13px;
	font-weight: 900;
	word-break: break-all;
}

.plant-archives-uuid-copy small{
	margin-top: 4px;
	color: #879890;
}

.plant-archives-genealogy-box{
	border: 1px solid #e3edf0;
	border-radius: 16px;
	box-shadow: none;
	overflow: hidden;
}

.plant-archives-edit-submit-row{
	margin-top: 18px;
	margin-bottom: 0;
}

.user-plant-maintenance-page #archivesModal .btn-primary{
	border: 0;
	border-radius: 999px;
	background: #203241;
	padding: 8px 22px;
}

.user-plant-maintenance-page #archivesModal .btn-default{
	border-radius: 999px;
}

.plant-archives-photo-toolbar{
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
	padding: 14px 16px;
	border: 1px solid #e3edf0;
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 14px 34px rgba(54,78,92,.08);
}

.plant-archives-photo-toolbar > div:first-child{
	flex: 1;
}

.plant-archives-photo-actions{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 8px;
}

.plant-archives-photo-toolbar p{
	margin: 0;
	color: #7a8994;
}

.plant-picture-editor-meta{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: -4px 0 12px;
}

.plant-upload-progress-panel{
	margin: 0 0 12px;
	padding: 12px 14px;
	border: 1px solid #dbe8e2;
	border-radius: 18px;
	background:
		radial-gradient(circle at 100% 0, rgba(93,154,117,.14), transparent 32%),
		#f7fbf8;
	box-shadow: 0 12px 28px rgba(54,78,92,.08);
}

.plant-upload-progress-head{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}

.plant-upload-progress-copy{
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.plant-upload-progress-copy strong{
	color: #203241;
	font-size: 14px;
	font-weight: 900;
}

.plant-upload-progress-copy span{
	color: #70828d;
	font-size: 12px;
}

.plant-upload-progress-count{
	flex-shrink: 0;
	padding: 6px 10px;
	border-radius: 999px;
	background: #eaf3ee;
	color: #446956;
	font-size: 12px;
	font-weight: 900;
}

.plant-upload-progress-list{
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-height: 180px;
	overflow-y: auto;
}

.plant-upload-progress-item{
	padding: 10px 12px;
	border-radius: 14px;
	background: #fff;
	border: 1px solid #e3edf0;
}

.plant-upload-progress-item-head{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 8px;
}

.plant-upload-progress-item-head strong{
	flex: 1;
	min-width: 0;
	color: #203241;
	font-size: 12px;
	font-weight: 800;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.plant-upload-progress-item-head span{
	flex-shrink: 0;
	color: #6a7f73;
	font-size: 12px;
	font-weight: 800;
}

.plant-upload-progress-item.is-success .plant-upload-progress-item-head span{
	color: #3f7f5f;
}

.plant-upload-progress-item.is-error .plant-upload-progress-item-head span{
	color: #b2584b;
}

.plant-upload-progress-item .progress{
	margin-bottom: 0;
	height: 8px;
	border-radius: 999px;
	background: #e9f0ed;
	box-shadow: none;
}

.plant-upload-progress-item .progress-bar{
	border-radius: 999px;
	box-shadow: none;
}

.plant-picture-editor-chip{
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 7px 12px;
	border-radius: 999px;
	background: #edf5f0;
	color: #557160;
	font-size: 12px;
	font-weight: 800;
}

.plant-picture-editor-chip strong{
	color: #203241;
	font-size: 13px;
	font-weight: 900;
}

.plant-archives-photo-toolbar .btn{
	border: 0;
	border-radius: 999px;
	padding: 8px 13px;
	background: #edf5f0;
	color: #446956;
	font-weight: 800;
}

.plant-archives-photo-toolbar #add_plantPicture{
	background: #203241;
	color: #fff;
}

.plant-archives-photo-toolbar .plant-archives-danger-btn{
	background: #f6e8e6;
	color: #9a443c;
}

.user-plant-maintenance-page #archivesModal #p-edit{
	border-radius: 18px;
	background: #fff;
	border: 1px solid #e3edf0;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.7);
	padding: 14px;
}

.plant-archives-empty-photo-tip{
	display: flex;
	min-height: 320px;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 8px;
	border: 1px dashed #d2e2dd;
	border-radius: 18px;
	background:
		radial-gradient(circle at 50% 30%, rgba(93,154,117,.12), transparent 28%),
		linear-gradient(180deg,#fbfdfc,#f3f8f5);
	color: #758a80;
	text-align: center;
}

.plant-archives-empty-photo-tip i{
	width: 54px;
	height: 54px;
	border-radius: 18px;
	background: #e7f2ed;
	color: #4d8264;
	font-size: 24px;
	line-height: 54px;
}

.plant-archives-empty-photo-tip strong{
	color: #203241;
	font-size: 18px;
}

.plant-archives-empty-photo-tip span{
	max-width: 340px;
	line-height: 1.7;
}

.user-plant-maintenance-page #archivesModal .row-pic{
	margin: 0 0 14px;
	padding: 12px;
	border: 1px solid #e4edf1;
	border-radius: 18px;
	background: #fbfdfc;
	box-shadow: 0 10px 24px rgba(54,78,92,.06);
}

.plant-picture-card-index{
	min-width: 24px;
	height: 24px;
	padding: 0 7px;
	border-radius: 999px;
	background: #eef3f7;
	color: #5a7282;
	font-size: 11px;
	font-weight: 900;
	line-height: 24px;
	text-align: center;
}

.plant-picture-card-badges,
.plant-picture-select-meta{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.plant-picture-badge{
	display: inline-flex;
	align-items: center;
	padding: 5px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 900;
	line-height: 1;
}

.plant-picture-badge-hidden{
	background: #f6e8e6;
	color: #994b42;
}

.user-plant-maintenance-page #archivesModal .plant-picture-edit-card{
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
}

.plant-picture-row-hidden{
	background: #fcf7f5 !important;
	border-color: #ead9d3 !important;
}

.plant-picture-select,
.plant-picture-preview,
.plant-picture-inline-editor{
	padding-left: 8px;
	padding-right: 8px;
}

.plant-picture-select{
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.plant-picture-check{
	display: flex;
	flex: 1;
	min-height: 138px;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 8px;
	border-radius: 14px;
	background: #eef6f2;
	color: #5f796d !important;
	font-size: 12px;
	font-weight: 900;
	cursor: pointer;
}

.plant-picture-check input{
	margin: 0 !important;
}

.user-plant-maintenance-page #archivesModal .row-pic .plant-picture-preview-image{
	width: 100%;
	height: 138px;
	object-fit: cover;
	border-radius: 14px;
	box-shadow: 0 12px 26px rgba(32,50,65,.12);
}

.plant-picture-inline-editor{
	display: flex;
	align-items: center;
}

.plant-picture-inline-fields{
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 10px;
	width: 100%;
	min-height: 138px;
}

.plant-picture-inline-row{
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
}

.plant-picture-mini-field{
	display: flex;
	align-items: center;
	gap: 6px;
}

.plant-picture-mini-field span{
	color: #5f7585;
	font-size: 12px;
	font-weight: 900;
	white-space: nowrap;
}

.plant-picture-mini-field-size{
	flex: 0 0 78px;
}

.plant-picture-mini-field-size .form-control{
	height: 34px;
}

.plant-picture-mini-field-date{
	flex: 0 0 168px;
}

.plant-picture-mini-field-date .input-group{
	width: 100%;
}

.plant-picture-mini-field-note{
	flex: 1 1 auto;
	min-width: 120px;
}

.plant-picture-mini-field-note .form-control{
	min-height: 54px;
	resize: vertical;
}

.plant-picture-hide{
	flex: 0 0 auto;
	margin: 0 0 0 4px;
	color: #7a8994;
}

.plant-picture-visibility-toggle{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 7px 12px;
	border-radius: 999px;
	background: #f5f8f7;
	border: 1px solid #d9e6e0;
	color: #5b6f7c;
	font-size: 12px;
	font-weight: 800;
	cursor: pointer;
}

.plant-picture-visibility-toggle input{
	margin: 0 !important;
}

.plant-picture-visibility-toggle span{
	margin: 0;
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
}

.plant-picture-align-compact{
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-left: 4px;
	padding: 6px 8px 6px 12px;
	border-radius: 999px;
	background: #f3f8f5;
	border: 1px solid #d9e8e0;
	color: #5b6f7c;
	font-size: 12px;
	font-weight: 800;
	white-space: nowrap;
}

.plant-picture-align-compact strong{
	color: #274155;
	font-weight: 900;
}

.plant-picture-align-compact .btn{
	border: 0;
	border-radius: 999px;
	background: #203241;
	color: #fff;
	font-weight: 900;
}

.plant-picture-align-expand{
	display: none;
	grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
	gap: 12px;
	width: 100%;
	min-width: 0;
	margin: 12px 0 0;
	padding: 12px;
	border: 1px solid #deebe4;
	border-radius: 18px;
	background: linear-gradient(180deg,#fbfdfc,#f4faf6);
	box-sizing: border-box;
	clear: both;
	overflow: hidden;
}

.plant-picture-align-expanded .plant-picture-align-expand{
	display: grid;
}

.plant-picture-align-preview{
	min-width: 0;
	padding: 10px;
	border-radius: 16px;
	background: #f7faf8;
	border: 1px solid #deebe4;
	box-sizing: border-box;
}

.plant-picture-align-preview-head,
.plant-picture-align-tools-head{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.plant-picture-align-preview-head span,
.plant-picture-align-tools-head strong{
	color: #274155;
	font-size: 13px;
	font-weight: 900;
}

.plant-picture-align-preview-head small{
	color: #6d8790;
	font-size: 11px;
	font-weight: 800;
}

.plant-picture-align-stage{
	position: relative;
	height: 142px;
	margin-top: 10px;
	border-radius: 14px;
	overflow: hidden;
	background:
		linear-gradient(180deg, rgba(18,32,25,.06), rgba(18,32,25,.02)),
		repeating-linear-gradient(0deg, rgba(111,142,125,.08), rgba(111,142,125,.08) 1px, transparent 1px, transparent 24px),
		repeating-linear-gradient(90deg, rgba(111,142,125,.08), rgba(111,142,125,.08) 1px, transparent 1px, transparent 24px),
		#edf4f0;
}

.plant-picture-align-frame{
	position: absolute;
	inset: 0;
	transform: translate(0, 0) scale(1) rotate(0deg);
	transform-origin: center center;
}

.plant-picture-align-crosshair{
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.plant-picture-align-crosshair:before,
.plant-picture-align-crosshair:after{
	content: "";
	position: absolute;
	background: rgba(80,117,103,.28);
}

.plant-picture-align-crosshair:before{
	left: 50%;
	top: 0;
	bottom: 0;
	width: 1px;
}

.plant-picture-align-crosshair:after{
	top: 50%;
	left: 0;
	right: 0;
	height: 1px;
}

.plant-picture-align-image{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 4%;
	object-fit: contain;
	filter: drop-shadow(0 14px 28px rgba(32,50,65,.15));
}

.plant-picture-align-tools{
	min-width: 0;
	padding: 12px 14px;
	border-radius: 16px;
	background: #f8fbf9;
	border: 1px solid #deebe4;
	box-sizing: border-box;
}

.plant-picture-align-tools-head{
	flex-wrap: wrap;
	margin-bottom: 10px;
}

.plant-picture-align-tools p{
	margin: 8px 0 0;
	color: #6f8290;
	font-size: 12px;
	line-height: 1.7;
}

.plant-picture-align-actions{
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.plant-picture-align-sliders{
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	margin-top: 12px;
}

.plant-picture-align-slider{
	display: grid;
	grid-template-columns: 38px minmax(80px, 1fr) 54px;
	align-items: center;
	gap: 8px;
	min-width: 0;
	margin: 0;
}

.plant-picture-align-slider span{
	color: #5f7585;
	font-size: 12px;
	font-weight: 900;
}

.plant-picture-align-slider input[type="range"]{
	width: 100%;
	min-width: 0;
}

.plant-align-value{
	color: #4a6578;
	font-size: 12px;
	font-style: normal;
	font-weight: 800;
	text-align: right;
}

@media (max-width: 991px){
	.user-plant-maintenance-page #archivesModal .plant-picture-edit-card{
		display: block;
	}

	.plant-picture-inline-fields{
		align-items: flex-start;
		min-height: 0;
	}

	.plant-picture-inline-row{
		flex-wrap: wrap;
	}

	.plant-picture-mini-field-size,
	.plant-picture-mini-field-date,
	.plant-picture-mini-field-note{
		flex: 1 1 100%;
	}

	.plant-picture-align-sliders{
		grid-template-columns: 1fr;
	}

	.plant-picture-align-expand{
		grid-template-columns: 1fr;
	}

	.plant-picture-align-compact{
		margin-left: 0;
	}

	.plant-picture-check{
		min-height: auto;
		flex-direction: row;
		justify-content: flex-start;
		padding: 8px 12px;
		margin-bottom: 10px;
	}

	.plant-archives-photo-toolbar{
		align-items: flex-start;
		flex-direction: column;
	}

	.plant-archives-photo-actions{
		justify-content: flex-start;
	}

	.plant-picture-editor-meta{
		align-items: flex-start;
		flex-direction: column;
	}

	.plant-upload-progress-head,
	.plant-upload-progress-item-head{
		flex-direction: column;
		align-items: flex-start;
	}

	.plant-upload-progress-count{
		align-self: flex-start;
	}
}

.user-plant-maintenance-page #formulaModal .modal-dialog{
	width: 760px;
	max-width: 94vw;
}

.user-plant-maintenance-page #formulaModal .box-primary{
	border: 0;
	border-radius: 26px;
	background: #fff;
	box-shadow: 0 28px 80px rgba(20,35,45,.28);
	overflow: hidden;
}

.formula-editor{
	padding: 0 !important;
}

.formula-editor-head{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 24px 18px;
	background:
		radial-gradient(circle at 100% 0%, rgba(93,139,114,.22), transparent 38%),
		linear-gradient(135deg,#fdf8ef,#f2f8f4);
	border-bottom: 1px solid #e6eee9;
}

.formula-editor-kicker{
	color: #5d8b72;
	font-size: 12px;
	font-weight: 900;
	letter-spacing: 2px;
}

.formula-editor-head h3{
	margin: 4px 0 0;
	color: #203241;
	font-size: 24px;
	font-weight: 900;
}

.formula-modal-close{
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 50%;
	background: rgba(32,50,65,.08);
	color: #203241;
	font-size: 24px;
	line-height: 34px;
	cursor: pointer;
}

.formula-modal-close:hover{
	background: #203241;
	color: #fff;
}

.formula-editor .col-md-12{
	float: none;
	width: 100%;
	padding: 22px 24px 24px;
}

.formula-editor .form-group{
	margin-left: 0;
	margin-right: 0;
}

.formula-editor label{
	color: #405466;
	font-size: 13px;
	font-weight: 900;
}

.formula-editor .form-control,
.formula-editor textarea{
	border-color: #dce8e2;
	border-radius: 14px;
	box-shadow: none;
}

.formula-editor .form-control:focus,
.formula-editor textarea:focus{
	border-color: #98b8a4;
	box-shadow: 0 0 0 3px rgba(93,139,114,.12);
}

.formula-name-field{
	margin-bottom: 16px;
}

.formula-builder{
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
	margin: 0 0 16px;
	padding: 16px;
	border: 1px solid #e0ece6;
	border-radius: 20px;
	background: #f8fbf8;
}

.formula-builder-title{
	flex: 0 0 100%;
	color: #203241;
	font-weight: 900;
}

.formula-builder .formula-builder-cell,
.formula-builder .formula-builder-action{
	float: none;
	padding: 0;
}

.formula-builder-action{
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
}

.formula-builder-action #addSoil{
	width: 100%;
	height: 38px;
	border: 0;
	border-radius: 999px;
	background: #203241;
	color: #fff;
	font-weight: 900;
}

.formula-builder-action #addSoil:hover{
	background: #5d8b72;
}

#soilPercentValue{
	color: #5d8b72;
	font-weight: 900;
}

.formula-detail-box{
	border: 1px solid #e1ece6;
	border-radius: 20px;
	box-shadow: none;
	overflow: hidden;
}

.formula-detail-box .box-body{
	padding: 0;
}

.formula-detail-title{
	padding: 13px 16px;
	background: #f6faf7;
	color: #203241;
	font-weight: 900;
}

.formula-detail-box table{
	margin: 0;
}

.formula-detail-box th{
	border-bottom: 1px solid #e6eee9 !important;
	color: #71808b;
	font-size: 12px;
	font-weight: 900;
}

.formula-detail-box td{
	vertical-align: middle !important;
	color: #405466;
}

.formula-detail-box td a{
	color: #446956;
	font-weight: 900;
}

.formula-detail-box .soilFormula-del{
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #f4e8e5;
	color: #a45b50;
	line-height: 28px;
	text-align: center;
}

.formula-detail-box .soilFormula-del:hover{
	background: #a45b50;
	color: #fff;
}

.formula-editor textarea{
	min-height: 92px;
	padding: 10px 12px;
	resize: vertical;
}

.formula-editor-actions{
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 8px;
}

.formula-editor-actions .btn{
	border-radius: 999px;
	padding: 9px 20px;
	font-weight: 900;
}

.formula-editor-actions .btn-primary{
	border-color: #203241;
	background: #203241;
}

.formula-editor-actions .btn-primary:hover{
	border-color: #5d8b72;
	background: #5d8b72;
}

.bootbox.modal .modal-content{
	border: 0;
	border-radius: 20px;
	box-shadow: 0 28px 80px rgba(20,35,45,.28);
	overflow: hidden;
}

.bootbox.modal .modal-header{
	background: #203241;
	color: #fff;
}

.bootbox.modal .modal-body{
	padding: 24px 22px;
	color: #405567;
	font-size: 15px;
}

.bootbox.modal .modal-footer{
	border-top: 1px solid #e8eff2;
	background: #f8fbf9;
}

.bootbox.modal .btn{
	border-radius: 999px;
	padding: 8px 18px;
	font-weight: 800;
}

.bootbox.modal .btn-success,
.bootbox.modal .btn-outline{
	border-color: #203241;
	background: #203241;
	color: #fff;
}

.bootbox.modal .btn-danger{
	border-color: #9a443c;
	background: #9a443c;
	color: #fff;
}

.bootbox.modal .btn-default{
	border-color: #dbe8e2;
	background: #edf5f0;
	color: #446956;
}

.bootbox.modal.plant-danger-confirm .modal-content{
	border: 1px solid #dfeae5;
	border-radius: 24px;
	box-shadow: 0 28px 80px rgba(32,50,65,.22);
}

.bootbox.modal.plant-danger-confirm .modal-header{
	position: relative;
	border-bottom: 1px solid #e5eee9;
	background: linear-gradient(135deg,#fbf7ef 0%,#eef6f1 100%);
	color: #203241;
	padding: 18px 22px 16px 56px;
}

.bootbox.modal.plant-danger-confirm .modal-header:before{
	content: "";
	position: absolute;
	left: 22px;
	top: 18px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 35%,#fff 0,#fff 24%,#7ca48a 26%,#5d8b72 100%);
	box-shadow: 0 8px 18px rgba(93,139,114,.25);
}

.bootbox.modal.plant-danger-confirm .modal-title{
	font-size: 18px;
	font-weight: 900;
	letter-spacing: .5px;
}

.bootbox.modal.plant-danger-confirm .modal-body{
	padding: 24px 26px 20px;
	color: #536675;
	background: #fff;
}

.bootbox.modal.plant-danger-confirm .modal-body .text-center{
	text-align: left;
	line-height: 1.8;
}

.bootbox.modal.plant-danger-confirm .modal-footer{
	border-top: 0;
	background: #fff;
	padding: 0 24px 22px;
}

.bootbox.modal.plant-danger-confirm .btn-danger{
	border-color: #5d8b72;
	background: #5d8b72;
	color: #fff;
	box-shadow: 0 10px 22px rgba(93,139,114,.24);
}

.bootbox.modal.plant-danger-confirm .btn-danger:hover,
.bootbox.modal.plant-danger-confirm .btn-danger:focus{
	border-color: #4d7b63;
	background: #4d7b63;
}

@media (max-width: 980px){
	.user-maintenance-page .maintenance-hero,
	.user-maintenance-page #box-album .hmtopic-title,
	.user-maintenance-page #box-photo .hmtopic-title{
		align-items: flex-start;
		flex-direction: column;
	}
	.user-maintenance-page .album-row{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.user-maintenance-page .photoalbum-search-box{
		width: 100%;
	}
}

	@media (max-width: 640px){
		.user-maintenance-page .album-row{
			grid-template-columns: 1fr;
		}
		.user-plant-maintenance-page #main #gallery .gallery-item .album{
			height: 260px;
			height: clamp(250px, 68vw, 330px);
		}
		.user-plant-maintenance-page #main #gallery .gallery-item .album .album-img{
			background-position: center center;
		}
		.user-plant-maintenance-page .plant-maintenance-card-body{
			grid-template-columns: minmax(0, 1fr) auto;
			padding: 13px 14px 15px;
		}
		.user-plant-maintenance-page .plant-maintenance-card-title-row label{
			font-size: 15px;
		}
		.maintenance-hero-actions{
			width: 100%;
			justify-content: space-between;
		}
	}

	@media (max-width: 420px){
		.user-plant-maintenance-page .plant-maintenance-card-body{
			grid-template-columns: 1fr;
		}
		.user-plant-maintenance-page .plant-maintenance-card-actions{
			justify-content: flex-start;
		}
	}


.topic-share-btn-disable{
	height: 30px;
	line-height: 30px;
	border-radius: 10px;
	width: 50%;
	text-align: center;
	font-weight:bold;
	cursor: default;
	background:#F5F5F5;
	color: #aaa;
	pointer-events: none;
	float: right;
}
.user-logo-small{
	width: 40px;
	height: 40px;
	position: relative;
}

/* .user-logo-small::after{
	content: "";
	width: 16px;
	height: 16px;
	position: absolute;
	z-index: 1;
	background:url(../img/king.png) no-repeat;
} */

.user-logo-small img{
	width: 40px;
	height: 40px;
	border-radius: 50%;
	
}

.user-logo-small64{
	width: 64px;
	height: 64px;
}
.user-logo-small64 img{
	width: 64px;
	height: 64px;
	border-radius: 50%;
	
}

.user-logo-small32 {
	height: 32px;
	width: 32px;	
}
.user-logo-small32 img{
	height: 32px;
	width: 32px;	
	border-radius: 50%;
}
.user-logo-mini {
	height: 20px;
	width: 20px;	
}
.user-logo-mini img {
	height: 20px;
	width: 20px;	
	border-radius: 50%;
}

.shared-topic-header{
	width: 100%;
	margin-left: 15px;
}
.shared-topic-header .shared-topic-header-left{
	float: left;
	line-height: 20px;
}
.shared-topic-header .shared-topic-header-left .name{
	color: #0464a0;
	font-weight: bold;
	font-size: 1.1rem;
}
.shared-topic-header .shared-topic-header-left .date{
	color: #999999;
	font-size: 0.9rem;
}
.shared-topic-header .shared-topic-header-right{
	float: right;
	position: relative;
}
.shared-topic-header .shared-topic-header-right a,
.shared-topic-header .shared-topic-header-right a:link
{
	text-decoration: none;
	color: #666;\n
	font-size: 1.6rem;
	line-height: 30px;
}
.shared-topic-header .shared-topic-header-right a:hover{
	font-size: 1rem;
	line-height: 30px;
	font-weight: bolder;
}

.shared-topic-header .topic-edit-menu{
	list-style: none;
	border: #dcdcdc 1px solid;
    border-radius: 5px;
    background: #FFF;
    padding:0 10px;
    position: absolute;
    width: 30px;
    right: 0;    
    display: none;
}
.shared-topic-header .topic-edit-menu a,
.shared-topic-header .topic-edit-menu a:link,
.shared-topic-header .topic-edit-menu a:hover{
	font-size: 1rem;
	color:#2E6DA4;
}
.topic-shared .topic-content{
	padding: 0 20px;
	width: auto;
	font-size: 1rem;
	color: #666;
}
.topic-shared .hmline{
	margin: 10px 20px;
}
.topic-pictures{
	 padding: 10px 20px;
}
.topic-pictures .topic-pictures-mode1,
.topic-pictures .topic-pictures-mode2,
.topic-pictures .topic-pictures-mode3{
	width: 100%;
	height: 525px;
	display: flex;
}
.topic-pictures .topic-pictures-mode4{
	width: 100%;
	height: 650px;
}
.topic-pictures .topic-pictures-mode1 a,
.topic-pictures .topic-pictures-mode2 a,
.topic-pictures .topic-pictures-mode3 a,
.topic-pictures .topic-pictures-mode4 a{
	height: 100%;
	width: 100%;
	background-size:cover;
	color: #ffffff;
	text-decoration: none;
	font-size: 3rem;
	font-weight: bold;
	font-family: arial;
	text-align: center;
	line-height: 120px;
	background-position: center center;
}
.topic-pictures .topic-pictures-mode2 a:nth-child(1){
	margin-right: 2px;
}
.topic-pictures .topic-pictures-mode2 a:nth-child(2){
	margin-left: 2px;
}
.topic-pictures .topic-pictures-mode3 a:nth-child(1){
	margin-right: 2px;
}
.topic-pictures .topic-pictures-mode3 a:nth-child(2){
	margin:0 2px;
}
.topic-pictures .topic-pictures-mode3 a:nth-child(3){
	margin-left: 2px;
}
.topic-pictures .topic-pictures-mode4 .top-pic{
	width: 100%;
	height: 525px;
	display: flex;
}
.topic-pictures .topic-pictures-mode4 .bottom-pic{
	margin-top: 4px;
	height: 125px;
	display: flex;
}
.topic-pictures .topic-pictures-mode4 .bottom-pic a:nth-child(1){
	margin-right: 2px;
}
.topic-pictures .topic-pictures-mode4 .bottom-pic a:nth-child(2){
	margin:0 2px;
}
.topic-pictures .topic-pictures-mode4 .bottom-pic a:nth-child(3){
	margin-left: 2px;
}

body.fairy-topic-viewer-open{
	position: fixed;
	width: 100%;
	overflow: hidden;
}

.fairy-topic-viewer{
	position: fixed;
	inset: 0;
	z-index: 20000;
	display: none;
	grid-template-columns: minmax(0, 1fr) 360px;
	background:
		radial-gradient(circle at 80% 12%, rgba(255,255,255,.12), transparent 28%),
		rgba(5,8,12,.94);
	color: #fff;
}

.fairy-topic-viewer.active{
	display: grid;
}

.fairy-topic-viewer-stage{
	position: relative;
	display: block;
	min-height: 0;
	padding: 34px 86px 14px;
	grid-column: 1;
}

.fairy-topic-viewer-photo-wrap{
	position: relative;
	display: flex;
	height: calc(100vh - 96px);
	min-height: 360px;
	width: 100%;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.fairy-topic-viewer-state{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	border-radius: 999px;
	padding: 10px 18px;
	background: rgba(255,255,255,.12);
	color: rgba(255,255,255,.78);
	font-size: 14px;
	font-weight: 900;
}

.fairy-topic-viewer-image{
	display: block;
	width: 100%;
	height: 100%;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	opacity: 0;
	transform: scale(.985);
	transform-origin: center center;
	transition: opacity .18s ease, transform .22s ease;
	filter: drop-shadow(0 28px 60px rgba(0,0,0,.4));
}

.fairy-topic-viewer-image.loaded{
	opacity: 1;
	transform: scale(1);
}

.fairy-topic-viewer-zoom{
	position: absolute;
	top: 18px;
	left: 22px;
	z-index: 4;
	display: flex;
	gap: 8px;
	border: 1px solid rgba(255,255,255,.16);
	border-radius: 999px;
	padding: 6px;
	background: rgba(10,15,20,.68);
	backdrop-filter: blur(12px);
	box-shadow: 0 16px 38px rgba(0,0,0,.24);
}

.fairy-topic-viewer-zoom button{
	min-width: 34px;
	height: 34px;
	border: 0;
	border-radius: 999px;
	background: rgba(255,255,255,.12);
	color: #fff;
	font-size: 18px;
	font-weight: 900;
	line-height: 34px;
	cursor: pointer;
}

.fairy-topic-viewer-zoom #fairyTopicViewerZoomReset{
	min-width: 52px;
	font-size: 12px;
}

.fairy-topic-viewer-zoom button:hover{
	background: rgba(255,255,255,.24);
}

.fairy-topic-viewer-close{
	position: fixed;
	top: 18px;
	right: 382px;
	z-index: 20010;
	height: 42px;
	border: 0;
	border-radius: 999px;
	padding: 0 18px;
	background: rgba(10,15,20,.76);
	color: #fff;
	font-size: 14px;
	font-weight: 900;
	line-height: 42px;
	cursor: pointer;
	box-shadow: 0 16px 36px rgba(0,0,0,.28);
}

.fairy-topic-viewer-close:hover{
	background: rgba(255,255,255,.22);
}

.fairy-topic-viewer-nav{
	position: absolute;
	top: 50%;
	z-index: 2;
	width: 54px;
	height: 76px;
	border: 0;
	border-radius: 18px;
	background: rgba(255,255,255,.12);
	color: #fff;
	font-size: 58px;
	line-height: 64px;
	cursor: pointer;
	transition: background .18s ease, transform .18s ease;
	transform: translateY(-50%);
}

.fairy-topic-viewer-prev{
	left: 20px;
}

.fairy-topic-viewer-next{
	right: 20px;
}

.fairy-topic-viewer-nav:hover{
	background: rgba(255,255,255,.23);
	transform: translateY(-50%) scale(1.04);
}

.fairy-topic-viewer-bottom{
	position: fixed;
	left: calc((100vw - 360px) / 2);
	bottom: 16px;
	z-index: 3;
	width: min(980px, calc(100vw - 416px));
	padding: 0;
	transform: translateX(-50%) translateY(calc(100% - 42px));
	transition: transform .28s ease;
}

.fairy-topic-viewer-bottom:hover,
.fairy-topic-viewer.thumbs-open .fairy-topic-viewer-bottom{
	transform: translateX(-50%) translateY(0);
}

.fairy-topic-viewer-counter{
	display: block;
	margin-bottom: 12px;
	margin-left: auto;
	margin-right: auto;
	border: 1px solid rgba(255,255,255,.18);
	border-radius: 999px;
	padding: 8px 16px;
	background: rgba(10,15,20,.72);
	backdrop-filter: blur(10px);
	color: rgba(255,255,255,.78);
	font-size: 14px;
	font-weight: 900;
	text-align: center;
	cursor: pointer;
	box-shadow: 0 14px 36px rgba(0,0,0,.25);
}

.fairy-topic-viewer-counter:hover{
	color: #fff;
	background: rgba(255,255,255,.16);
}

.fairy-topic-viewer-thumbs{
	display: flex;
	max-width: 100%;
	margin: 0 auto;
	gap: 10px;
	overflow-x: auto;
	padding: 12px;
	justify-content: center;
	border: 1px solid rgba(255,255,255,.12);
	border-radius: 20px;
	background: rgba(10,15,20,.76);
	backdrop-filter: blur(14px);
	box-shadow: 0 24px 60px rgba(0,0,0,.34);
}

.fairy-topic-viewer-thumb{
	flex: 0 0 auto;
	width: 72px;
	height: 56px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 12px;
	background: rgba(255,255,255,.1);
	overflow: hidden;
	cursor: pointer;
	opacity: .62;
	transition: opacity .18s ease, border-color .18s ease, transform .18s ease;
}

.fairy-topic-viewer-thumb img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fairy-topic-viewer-thumb:hover,
.fairy-topic-viewer-thumb.active{
	opacity: 1;
	border-color: #fff;
	transform: translateY(-2px);
}

.fairy-topic-viewer-side{
	grid-column: 2;
	min-height: 0;
	overflow-y: auto;
	background: #fff;
	color: #203241;
	box-shadow: -18px 0 48px rgba(0,0,0,.28);
}

.fairy-topic-viewer-side-close{
	display: none;
	width: calc(100% - 44px);
	margin: 18px 22px 0;
	border: 0;
	border-radius: 999px;
	padding: 10px 14px;
	background: #203241;
	color: #fff;
	font-weight: 900;
	cursor: pointer;
}

.fairy-topic-viewer-meta{
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 22px 22px 14px;
}

.fairy-topic-viewer-avatar{
	width: 46px;
	height: 46px;
	border-radius: 50%;
	overflow: hidden;
	background: #edf3f1;
}

.fairy-topic-viewer-avatar img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fairy-topic-viewer-author strong,
.fairy-topic-viewer-author span{
	display: block;
}

.fairy-topic-viewer-author strong{
	color: #0464a0;
	font-size: 15px;
	font-weight: 900;
}

.fairy-topic-viewer-author span{
	margin-top: 3px;
	color: #8998a2;
	font-size: 12px;
}

.fairy-topic-viewer-text{
	padding: 0 22px 16px;
	color: #405567;
	font-size: 14px;
	line-height: 1.8;
	white-space: pre-wrap;
}

.fairy-topic-viewer-social{
	padding: 0 22px 12px;
	border-bottom: 1px solid #edf2f4;
}

.fairy-topic-viewer-social .topic-like-bar{
	padding: 0;
}

.fairy-topic-viewer-social .topic-like-btn{
	width: 100%;
}

.fairy-topic-viewer-comment-title{
	padding: 14px 22px 4px;
	color: #203241;
	font-size: 14px;
	font-weight: 900;
}

.fairy-topic-viewer-comments .chat-list{
	width: auto;
	padding: 0 18px 22px;
}

.fairy-topic-viewer-comments .chat-list .chat-list{
	padding: 6px 0 0 42px;
}

.fairy-topic-viewer-comments .chat-item{
	margin-top: 12px;
}

.fairy-topic-viewer-comments .chat-content{
	width: calc(100% - 44px);
}

.fairy-topic-viewer-comments .chat-content-box{
	background: #f4f7f8;
	border-radius: 16px;
	padding: 9px 12px;
}

.fairy-topic-viewer-comments .chat-zan{
	margin-top: 4px;
}

.fairy-topic-viewer-comments .returnbtn a,
.fairy-topic-viewer-comments .ul-replyRetrunCount a{
	color: #57758a;
	font-size: 12px;
	font-weight: 900;
	text-decoration: none;
	cursor: pointer;
}

.fairy-topic-viewer-comments .returnbtn a:hover,
.fairy-topic-viewer-comments .ul-replyRetrunCount a:hover{
	color: #0464a0;
	text-decoration: underline;
}

.fairy-topic-viewer-replyreturn-box{
	margin-top: 8px;
}

.fairy-topic-viewer-replyreturn-input{
	width: 100%;
	height: 34px;
	border: 1px solid #dce7e3;
	border-radius: 999px;
	padding: 0 13px;
	outline: none;
}

.fairy-topic-viewer-replyreturn-input:focus{
	border-color: #8fb9a0;
	box-shadow: 0 0 0 3px rgba(93,154,117,.12);
}

.fairy-topic-viewer-reply{
	position: sticky;
	bottom: 0;
	padding: 12px 18px 16px;
	background: linear-gradient(180deg, rgba(255,255,255,.86), #fff 45%);
	border-top: 1px solid #edf2f4;
}

.fairy-topic-viewer-reply input{
	width: 100%;
	height: 38px;
	border: 1px solid #dce7e3;
	border-radius: 999px;
	padding: 0 15px;
	outline: none;
}

.fairy-topic-viewer-reply input:focus{
	border-color: #8fb9a0;
	box-shadow: 0 0 0 3px rgba(93,154,117,.12);
}

@media (max-width: 768px){
	.fairy-topic-viewer{
		grid-template-columns: 1fr;
	}

	.fairy-topic-viewer-stage{
		grid-column: 1;
		padding: 58px 48px 10px;
	}

	.fairy-topic-viewer-photo-wrap{
		height: calc(100vh - 104px);
		min-height: 260px;
	}

	.fairy-topic-viewer-nav{
		width: 40px;
		height: 58px;
		border-radius: 14px;
		font-size: 42px;
		line-height: 50px;
	}

	.fairy-topic-viewer-prev{
		left: 6px;
	}

	.fairy-topic-viewer-next{
		right: 6px;
	}

	.fairy-topic-viewer-bottom{
		bottom: 10px;
		left: 50%;
		width: calc(100vw - 20px);
	}

	.fairy-topic-viewer-close{
		right: 12px;
		top: 12px;
	}

	.fairy-topic-viewer-thumbs{
		justify-content: flex-start;
	}

	.fairy-topic-viewer-side{
		display: none;
	}

	.fairy-topic-viewer-zoom{
		left: 96px;
		top: 12px;
	}
}
.topic-like-bar{
	clear: both;
	padding: 0 20px;
	display: flex;
}
.topic-like-bar a,
.topic-like-bar a:link{
	text-decoration: none;
	color: #0464a0;
}
.topic-like-bar a:hover{
	text-decoration: underline;
}
.topic-like-bar .topic-like-btn{
	width: 50%;	
	line-height: 30px;
}

.topic-like-action{
	display: inline-flex;
	width: auto !important;
	min-width: 72px;
	height: 30px;
	align-items: center;
	gap: 6px;
	padding: 0 10px;
	border: 1px solid #e4edf2;
	border-radius: 16px;
	background: #f9fbfc;
	color: #5d7382;
	transition: background .2s ease,color .2s ease,border-color .2s ease;
}

.topic-like-action:hover{
	background: #eef6fa;
	color: #2f88c7;
	border-color: #cfe0ea;
}

.topic-like-bar .topic-like-action a,
.topic-like-bar .topic-like-action a:link{
	display: inline-flex;
	align-items: center;
	color: inherit;
	text-decoration: none;
}

.topic-like-bar .topic-like-action .icon-like{
	opacity: .72;
	transition: opacity .18s ease, transform .18s ease, filter .18s ease;
}

.topic-like-bar .topic-like-action:hover .icon-like{
	opacity: 1;
}

.topic-like-bar .topic-like-action .praisecount{
	color: #2f88c7;
	font-weight: bold;
	min-width: 12px;
}

.topic-like-bar .topic-liked{
	background: #edf8f2;
	border-color: #cfe8d8;
	color: #2f7c56;
}

.topic-like-bar .topic-liked:hover{
	background: #e8f5ee;
	color: #2f7c56;
	border-color: #c5dfd1;
}

.topic-like-bar .topic-liked .icon-like{
	opacity: 1;
	transform: scale(1.08);
	filter: saturate(1.2);
}

.topic-like-bar .topic-liked .praisecount{
	color: #2f7c56;
}

.topic-like-bar .like-share-btn{
	text-align: right;	
}

.topic-like-bar .like-share-btn .btn{
	cursor: pointer;
	border-radius: 10px;
	height: 30px;
	padding: 0 10px;
	margin: 0;
	display: inline-block;
}
.topic-like-bar .like-share-btn .btn:hover{	
	background: #d3ecfd;
}

.topic-like-bar .like-share-btn .btn .icon{
	margin-right: 5px;
}

.chat-list{
	margin: 0 auto;
	padding:10px 20px
}
.chat-list li{
	list-style: none;
}
.chat-list li .chat-item{
	display: flex;
}
.chat-list li .chat-item .user-logo-small32{
	margin-right: 10px;
}
.chat-list li .chat-item .chat-content{
	flex:1;
}
.chat-list li .chat-item .chat-content .chat-content-box{
	flex: 1 1 auto;
    min-width: 0;
    width: 100%;   
}
.chat-list li .chat-item .chat-content .chat-user-txt{	 
	background-color: #f2f3f5;
    border-radius: 18px;
    box-sizing: border-box;
    color: #1c1e21;
    line-height: 16px;
    margin: 0;
    max-width: 100%;
    word-wrap: break-word;
    position: relative;
    white-space: normal;
    word-break: break-word;
	max-width: 100%;
    position: relative;
    vertical-align: middle;
	padding: 8px 10px;
}
.chat-list li .chat-item .chat-content .chat-txt{
	position: relative;
}
.chat-list li .chat-item .chat-content .chat-txt .reply-del-btn{
	display: none;
	color: #666;
	border-radius: 3px;
	background:#ff6262;
	font-size: 0.8rem;
	padding: 0 3px;
	letter-spacing: 2px;
    display: none;
	
	}
.chat-list li .chat-item .chat-content .chat-txt:hover .reply-del-btn{
	display: inline-block;	
	color: #fff;
	cursor: pointer;
}
.chat-list li .chat-item .chat-content .chat-txt:hover .reply-del-btn:hover{
	background:#e24444;
	transition: background-color .3s; 
}
.chat-list  a.chat-user-name{
	text-decoration: none;
	font-weight: bold;
	color: #0464a0;
	margin-right: 10px;
	white-space: nowrap;
	display: inline;
}

.chat-list  a.chat-user-name:hover{
	text-decoration: underline;
}

.chat-list .chat-zan{
	padding: 8px 10px;
}
.chat-list .chat-zan .chat-zan-bar{
	color: #90949c;
    display: inline-block;
    font-size: 13px;
    line-height: 12px;
}
.chat-list .chat-zan .chat-zan-bar li{
	display: inline-block;
}
.chat-list .chat-zan .chat-zan-bar li a,
.chat-list .chat-zan .chat-zan-bar li a:link{
	color: #365899;
    cursor: pointer;
    text-decoration: none;
}
.chat-list .chat-zan .chat-zan-bar li a:hover{
	text-decoration: underline;
}

.chat-list .user-logo-mini{
	margin-top: 5px;
	margin-right: 10px;
}

.chat-list .chat-reply{
	width:100%;
}

.chat-list .chat-reply .chat-user-txt {
	display: flex;
}

.chat-list .chat-reply .chat-user-txt input{
	width:100%;
	border: none;
	background: transparent;
}

.ul-replyRetrunCount,
.ul-replyRetrunCount a,
.ul-replyRetrunCount a:link
{
	text-decoration:none ;
	color: #096;
	background-color: #f2f3f5;
    border-radius: 18px;
    box-sizing: border-box;
    line-height: 16px;
    margin: 0 0 10px 0;
    max-width: 100%;
    word-wrap: break-word;
    position: relative;
    white-space: normal;
    word-break: break-word;
    max-width: 100%;
    position: relative;
    vertical-align: middle;
    padding: 8px 10px;
}
.ul-replyRetrunCount a:hover{
	text-decoration:underline ;
}

.forum-doc{
	height: 80px;
	position: fixed;
	width: 100%;
	z-index: 1000;
	top: 0;
}
.forum-doc .nav{
	 
	
}

.forum-body{
	top: 80px;
}

.forum-body-left-sidebar{
	position: fixed;
}

.forum-footer{
	position: fixed;
	z-index: 1000;
	bottom: 0;
	width: 100%;
	height: 40px;
}
.forum-footer .footer-box,
.forum-footer .footer-nav,
.forum-footer .footer-copyright{
	height: 40px;
	line-height: 40px;
}
.fourm-nav{
	margin: 0;
	padding:0 20px;
}

.fourm-nav li{
	list-style: none;
	height: 28px;
	line-height: 28px;
	border: transparent 1px solid;
	margin-top: 2px;
	background-color: transparent;
	position: relative;
}

.fourm-nav li a,
.fourm-nav li a:link{
	color:#444;
	text-decoration: none;
}
.fourm-nav li:hover{
	background: rgb(235, 244, 255);
	border-radius: 5px;
	border: #dcdcdc 1px solid;
	transition: background-color .5s ease-out; 
	transition: border-color .3s ease-out;
}
.fourm-nav li .icon{
	margin-left: 5px;
	margin-right: 5px;
	margin-bottom: 2px;
}
.fourm-nav li.seleted{
	background: #FFFFFF;
	border-radius: 5px;
	border: #dcdcdc 1px solid;
}
.fourm-nav li.seleted a{
	font-weight: bold;
}
.new-dot{
	position: absolute;
	right: 5px;
	height: 8px;
	width: 8px;
	border-radius: 50%;
	background: #ff0000;
	top:10px;
}

.c_register_button_normal{
	width:150px;
	height:40px;
	border:#e2e2e2 1px solid;
	background:#3366B7;
	cursor: pointer;
	color: #fff;
	border-radius: 5px;	
}
.c_register_button_normal:hover{
	background: #009CFC;
}

.c_register_button{
	width:150px;
	height:40px;
	border:#e2e2e2 1px solid;
	background:#eaf7ff;
	cursor: pointer;
	border-radius: 5px;
}
.c_register_button:hover{
	background: #e2f4ff;
}

.icon{
	display: inline-block;
	width: 24px;
	height: 24px;
	vertical-align: middle;
}


.icon-user{
	background: url(../img/homepage/user.png) no-repeat;	
}

.auth-page{
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	margin: 0;
	background:
		radial-gradient(circle at top left, rgba(255,214,152,.34), transparent 34%),
		radial-gradient(circle at bottom right, rgba(155,198,172,.24), transparent 28%),
		linear-gradient(180deg, #0f1714 0%, #18231d 62%, #edf2ea 62%, #edf2ea 100%);
	color: #173225;
}

.auth-page > form{
	display: flex;
	flex: 1 0 auto;
}

.auth-page > form .auth-shell{
	width: 100%;
}

.auth-topbar{
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24px clamp(20px, 4vw, 48px);
}

.auth-topbar-brand,
.auth-topbar-brand:link{
	color: #f3f6ee;
	font-size: 24px;
	font-weight: 900;
	letter-spacing: 1px;
	text-decoration: none;
}

.auth-topbar-links{
	display: flex;
	align-items: center;
	gap: 18px;
}

.auth-topbar-links a,
.auth-topbar-links a:link{
	color: rgba(243,246,238,.88);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}

.auth-topbar-links a:hover{
	color: #ffffff;
	text-decoration: underline;
}

.auth-shell{
	position: relative;
	z-index: 1;
	display: grid;
	box-sizing: border-box;
	grid-template-columns: minmax(0, 0.86fr) minmax(380px, 500px);
	gap: clamp(36px, 6vw, 76px);
	align-items: center;
	flex: 1 0 auto;
	max-width: 1220px;
	margin: 0 auto;
	padding: 18px clamp(20px, 4vw, 48px) 72px;
}

.auth-hero{
	padding: 44px 12px 24px 0;
	color: #eef5ea;
}

.auth-hero-kicker{
	display: inline-flex;
	align-items: center;
	padding: 8px 14px;
	border-radius: 999px;
	background: rgba(230,242,221,.12);
	border: 1px solid rgba(230,242,221,.18);
	font-size: 12px;
	font-weight: 900;
	letter-spacing: 1.6px;
	text-transform: uppercase;
}

.auth-hero h1{
	margin: 18px 0 0;
	max-width: 600px;
	color: #fbfdf8;
	font-size: clamp(38px, 4.2vw, 62px);
	line-height: 1;
	font-weight: 900;
	letter-spacing: -2px;
}

.auth-hero p{
	max-width: 560px;
	margin: 0;
	color: rgba(238,245,234,.82);
	font-size: 17px;
	line-height: 1.85;
}

.auth-hero-points{
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 30px;
}

.auth-hero-points span{
	display: inline-flex;
	align-items: center;
	padding: 10px 16px;
	border-radius: 999px;
	background: rgba(255,255,255,.08);
	border: 1px solid rgba(255,255,255,.12);
	color: #eef5ea;
	font-size: 13px;
	font-weight: 800;
	line-height: 1.4;
}

.auth-card{
	position: relative;
	margin-top: 24px;
	padding: 34px 34px 32px;
	border-radius: 32px;
	background:
		linear-gradient(180deg, rgba(255,255,255,.95), rgba(249,252,247,.94)),
		#ffffff;
	box-shadow: 0 28px 90px rgba(15,23,20,.18);
	border: 1px solid rgba(255,255,255,.7);
}

.auth-card-head{
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-bottom: 18px;
	border-bottom: 1px solid rgba(22,52,38,.08);
}

.auth-card-kicker{
	color: #6c836f;
	font-size: 12px;
	font-weight: 900;
	letter-spacing: 1.4px;
	text-transform: uppercase;
}

.auth-card-head h2{
	margin: 0;
	color: #173225;
	font-size: 28px;
	font-weight: 900;
	line-height: 1.08;
	letter-spacing: -1px;
}

.auth-card-head p{
	margin: 0;
	color: #6e8071;
	font-size: 14px;
	line-height: 1.8;
}

.auth-form{
	display: flex;
	flex-direction: column;
	gap: 15px;
	padding-top: 22px;
}

.auth-field{
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.auth-field label{
	margin: 0;
	color: #244134;
	font-size: 14px;
	font-weight: 800;
}

.auth-input-wrap{
	display: flex;
	align-items: center;
	min-height: 52px;
	padding: 0 16px;
	border-radius: 16px;
	border: 1px solid #d8e4da;
	background: #f8fbf8;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}

.auth-input-wrap input{
	width: 100%;
	height: 50px;
	padding: 0;
	border: 0;
	outline: none;
	background: transparent;
	color: #183327;
	font-size: 16px;
	font-weight: 700;
}

.auth-input-wrap input::placeholder{
	color: #93a599;
	font-weight: 500;
}

.auth-field-tip{
	color: #7b8c80;
	font-size: 13px;
	line-height: 1.7;
}

.auth-field-inline .auth-inline-group{
	display: grid;
	grid-template-columns: minmax(0, 1fr) 146px;
	gap: 12px;
	align-items: center;
}

.auth-field-grid{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 16px;
}

.auth-field-tip-grid{
	grid-column: 1 / -1;
	margin-top: -2px;
}

.auth-checkline{
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 2px 0 0;
	color: #4e6557;
	font-size: 14px;
	font-weight: 700;
}

.auth-checkline input{
	width: 18px;
	height: 18px;
	margin: 0;
}

.auth-checkline a,
.auth-checkline a:link{
	color: #2a6f4d;
	text-decoration: none;
}

.auth-checkline a:hover{
	text-decoration: underline;
}

.auth-actions{
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding-top: 6px;
}

.auth-primary-button{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 54px;
	padding: 0 20px;
	border: 0;
	border-radius: 16px;
	background: linear-gradient(135deg, #2c7a52, #1f5f46);
	box-shadow: 0 18px 36px rgba(36,101,71,.24);
	color: #ffffff;
	font-size: 16px;
	font-weight: 900;
	letter-spacing: .4px;
	cursor: pointer;
}

.auth-primary-button:hover{
	background: linear-gradient(135deg, #338861, #23684e);
}

.auth-actions-sub{
	color: #728476;
	font-size: 14px;
	text-align: center;
}

.auth-actions-sub a,
.auth-actions-sub a:link{
	color: #2c7a52;
	font-weight: 800;
	text-decoration: none;
}

.auth-actions-sub a:hover{
	text-decoration: underline;
}

.auth-error{
	padding: 14px 16px;
	border-radius: 16px;
	background: #fff1ef;
	border: 1px solid #f3c6c0;
	color: #b84a3f;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.7;
}

.auth-inline-group-captcha{
	grid-template-columns: minmax(0, 1fr) 154px;
}

.auth-captcha-box{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 54px;
	padding: 7px 10px;
	border-radius: 18px;
	border: 1px solid #d8e4da;
	background: #f8fbf8;
}

.auth-captcha-box img{
	display: block;
	width: 96px;
	height: 40px;
	border-radius: 10px;
}

.auth-captcha-box a,
.auth-captcha-box a:link,
.auth-inline-links a,
.auth-inline-links a:link{
	color: #2c7a52;
	font-size: 13px;
	font-weight: 800;
	text-decoration: none;
}

.auth-captcha-box a:hover,
.auth-inline-links a:hover{
	text-decoration: underline;
}

.auth-inline-links{
	display: flex;
	justify-content: flex-end;
	margin-top: -6px;
}

.auth-page .register-login-button{
	margin: 0;
}

.auth-page .forum-footer{
	position: static;
	flex: 0 0 auto;
	height: auto;
	min-width: 0;
	width: 100%;
}

.auth-page .forum-footer .footer-box,
.auth-page .forum-footer .footer-nav,
.auth-page .forum-footer .footer-copyright{
	height: auto;
	line-height: 1.6;
}

.auth-page .forum-footer .footer-box{
	display: flex;
	box-sizing: border-box;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px 18px;
	width: min(100%, 1220px);
	padding: 10px 16px;
	margin: 0 auto;
}

.auth-page .forum-footer .footer-nav,
.auth-page .forum-footer .footer-copyright{
	float: none;
	width: auto;
	margin: 0;
}

.auth-page .c_register_button_normal,
.auth-page .c_register_button{
	width: 146px;
	height: 54px;
	border-radius: 18px;
	font-size: 14px;
	font-weight: 800;
	border: 1px solid transparent;
}

.auth-page .c_register_button_normal{
	background: #e8f3ea;
	border-color: #d0e5d5;
	color: #295f43;
}

.auth-page .c_register_button_normal:hover{
	background: #dceee1;
}

.auth-page .c_register_button{
	background: #f0f5f1;
	border-color: #dce7df;
	color: #7a8d7f;
}

.auth-page .c_register_button:hover{
	background: #ebf1ed;
}

.auth-page-register .auth-hero h1{
	max-width: none;
	font-size: clamp(24px, 2.5vw, 38px);
	letter-spacing: -0.8px;
	white-space: nowrap;
}

.auth-page-login .auth-hero h1{
	max-width: none;
	font-size: clamp(28px, 2.9vw, 42px);
	letter-spacing: -1px;
	white-space: nowrap;
}

.auth-page-register .auth-hero-points{
	gap: 10px;
}

.auth-page-register .auth-hero-points span{
	padding: 9px 14px;
	font-size: 12px;
}

@media (max-width: 1100px){
	.auth-shell{
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.auth-hero{
		padding: 24px 0 4px;
	}

	.auth-card{
		margin-top: 0;
	}
}

@media (max-width: 767px){
	.auth-topbar{
		padding: 18px 16px;
	}

	.auth-topbar-brand,
	.auth-topbar-brand:link{
		font-size: 20px;
	}

	.auth-shell{
		padding: 8px 16px 42px;
	}

	.auth-hero p{
		font-size: 15px;
	}

	.auth-card{
		padding: 24px 18px 22px;
		border-radius: 24px;
	}

	.auth-card-head h2{
		font-size: 24px;
	}

	.auth-field-inline .auth-inline-group,
	.auth-field-grid{
		grid-template-columns: 1fr;
	}

	.auth-inline-group-captcha{
		grid-template-columns: 1fr;
	}

	.auth-hero-points{
		gap: 10px;
	}

	.auth-hero-points span{
		max-width: 100%;
		white-space: normal;
	}

	.auth-page-register .auth-hero h1{
		white-space: normal;
		max-width: 100%;
		font-size: clamp(24px, 8.4vw, 34px);
		word-break: break-all;
	}

	.auth-page-login .auth-hero h1{
		white-space: normal;
		max-width: 100%;
		font-size: clamp(26px, 8.8vw, 38px);
		word-break: break-all;
	}

	.auth-page .c_register_button_normal,
	.auth-page .c_register_button{
		width: 100%;
	}

	.auth-page .forum-footer .footer-box{
		justify-content: center;
		text-align: center;
	}
}

.icon-house{
	background: url(../img/homepage/house.png) no-repeat;
}

.icon-img{
	background: url(../img/homepage/image.png) no-repeat;
}

.icon-sign{
	background: url(../img/homepage/sign.png) no-repeat;
}

.icon-balloon{
	background: url(../img/homepage/balloon.png) no-repeat;
}

.icon-face{
	background: url(../img/homepage/face.png) no-repeat;
}

.icon-like{
	background: url(../img/homepage/like.png) no-repeat;

}
.icon-share2{
	background: url(../img/homepage/share2.png) no-repeat;
}

.icon-topic{
	background: url(../img/homepage/icon-topic.png) no-repeat;
}

.icon-market{
	background: url(../img/homepage/icon-market.png) no-repeat;
}

.icon-other{
	background: url(../img/homepage/icon-more.png) no-repeat;
}

.icon-customer{
	background: url(../img/homepage/icon-customer.png) no-repeat;
}


/* loader7*/
.loader7,
.loader7:before,
.loader7:after {
  border-radius: 50%;
  width: 1em;
  height: 1em;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: load7 1.8s infinite ease-in-out;
  animation: load7 1.8s infinite ease-in-out;
}
.loader7 {
  color: #ffffff;
  font-size: 10px;
  margin: 0 auto;
  position: relative;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.loader7:before,
.loader7:after {
  content: '';
  position: absolute;
  top: 0;
}
.loader7:before {
  left: -1.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.loader7:after {
  left: 1.5em;
}
@-webkit-keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}
@keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}

/* album 2019-12-27 */
.icon-edit{
	background:url(../img/homepage/icon-edit.png) no-repeat center center;
	width: 16px;
	height: 16px;
	display: inline-block;
    cursor: pointer;
}
.hmtopic-title-padding{
	padding-left: 10px;
}
.hmtopic-title-padding a,.hmtopic-title-padding a:link,
.hmtopic-title-padding a:hover{
	text-decoration: none;
	color: #333333;
	padding-right: 10px;
}
.hmtopic-title-padding a:hover{
	text-decoration: underline;
}

.grey-btn{
	padding: 5px 13px;
	border-radius: 3px;
	border:#AAAAAA 1px solid;
	line-height: 20px;
	background: #F3F5F6;
	margin: 3px 10px 0 0;
	cursor: pointer;
}
.grey-btn:hover{
	background: #F5F5F5;
	color: #009CFC;
}
.album-content{
	overflow: hidden;
	clear: both;
}
.album-tools{
	display: flex; 
}
.col-xs-4 {
    width: 33.33333333333333%;
    float: left;
}
.album-row{
	padding:10px 0 0 0;
}
#main h1 {
  font-weight: 100;
  padding: 40px 0 0;
}
#main #gallery .gallery-item {
  height: 220px;
  position: relative;
}
#main #gallery .gallery-item .album {
  position: relative;
  width: 150px;
  height: 150px;
  margin: auto;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  padding-bottom: 10px;
  z-index: 550;
}
#main #gallery .gallery-item .album-del-btn{
	position: absolute;
	right:35px;
	top:0px;
	height: 17px;
	width:17px;
	text-align: center;
	color: #FFFFFF;
	z-index:600 ;
	border-radius: 50%;
	font-size: 0.8rem;
	display: none;				
	cursor: pointer;
	background:#333333 url(../img/homepage/delete.png) no-repeat center center;
}
#main #gallery .gallery-item:hover .album-del-btn{
	display: block;
}

#main #gallery .gallery-item:hover .album-del-btn:hover{
	background: #aa0000 url(../img/homepage/delete.png) no-repeat center center
}
#main #gallery .gallery-item .album .album-img {
  width: 100%;
  height: 100%;
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  border: 4px solid #fff;
  -moz-box-shadow: 0 0 4px black;
  -webkit-box-shadow: 0 0 4px black;
  box-shadow: 0 0 4px black;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  -moz-transition: all 1s;
  -o-transition: all 1s;
  -webkit-transition: all 1s;
  transition: all 1s;
  -moz-transform-origin: 50% 50% 50%;
  -ms-transform-origin: 50% 50% 50%;
  -webkit-transform-origin: 50% 50% 50%;
  transform-origin: 50% 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
}
#main #gallery .gallery-item .album .album-img:first-child {
  position: relative;
  z-index: 1000;
}
#main #gallery .gallery-item .album .album-img:first-child + .album-img {
  -moz-transform: rotate(-4deg);
  -ms-transform: rotate(-4deg);
  -webkit-transform: rotate(-4deg);
  transform: rotate(-4deg);
}
#main #gallery .gallery-item .album .album-img:last-child {
  /*-moz-transform: rotate(4deg);
  -ms-transform: rotate(4deg);
  -webkit-transform: rotate(4deg);
  transform: rotate(4deg);*/
}
#main #gallery .gallery-item .album:hover {
 /*width: 155px;
 height:155px;*/
}
#main #gallery .gallery-item .album:hover .album-img {
  z-index: 2000;
}
#main #gallery .gallery-item .album:hover .album-img:first-child {
  z-index: 3000;
}
#main #gallery .gallery-item .album:hover .album-img:first-child + .album-img {
  /*left: 0px;
  -moz-transform: rotate(5deg);
  -ms-transform: rotate(5deg);
  -webkit-transform: rotate(5deg);
  transform: rotate(5deg);*/
}
#main #gallery .gallery-item .album:hover .album-img:last-child {
  left: 0px;
  -moz-transform: rotate(5deg);
  -ms-transform: rotate(5deg);
  -webkit-transform: rotate(5deg);
  transform: rotate(5deg);
}
#main #gallery .gallery-item p {
  text-align: center;
  padding-top: 5px;
  padding-bottom: 10px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}
#main #gallery .gallery-item p input[type=checkbox] {
	visibility: hidden;
}
#main #gallery .gallery-item:hover input[type=checkbox] {
	visibility: visible;
}

#main #gallery .gallery-item p .icon{
	visibility: hidden;
}
	
#main #gallery .gallery-item p:hover .icon{
	visibility: visible;
}
.album-photo-box{
	text-align: center;
}
.album-photo-box img{	
	cursor: pointer;
	border: 4px solid #fff;
	border-radius: 5px;
	box-shadow: 0 0 4px #AAAAAA;
	object-fit: cover
}
.album-photo-box img:hover{
	box-shadow: 0 0 4px #009CFC;
}
#main #gallery .gallery-item p input[type="checkbox"]{
	vertical-align: text-top;
}


.user-info-box{
	padding: 20px 30px;
	overflow: auto;
	min-height: 400px;
}

.user-info-box .user-info-row{
	padding: 15px 0;
	background: #fff;
	border-bottom: #dcdcdc 1px dashed;
	display: flex;
}
.user-info-box .user-info-row .info-title{
	width: 100px;
	font-weight: bold;
}
.user-info-box .user-info-row .icon-edit{
	visibility: hidden;
	height: 20px;
	width: 20px;
	margin-left: 5px;

}
.user-info-box .info-content{
	display: flex;
}
.user-info-box .user-info-row:hover .icon-edit{
	visibility: visible;
}
.user-info-box .info-content .btn{
	border: #e5e5e5 1px solid;
    height: 24px;
    line-height: 24px;
    padding: 0 5px;
    border-radius: 5px;
    background: #f5f6f7;
    text-align: center;
    margin-right: 10px;
    margin-top: 5px;
    font-weight: bold;
    cursor: pointer;
    margin-left: 50px;
}

.user-info-box .info-content .btn:hover{
	background: #f1f2f3;
	color: #337AB7;
	transition: background-color,color .5s;

}
.text-red{
	color: #ff0000;
}

.user-info-box .info-textarea{
	width:400px;
}


.user-info-box .friend-row{
	padding: 15px 0;
	background: #fff;
	display: flex;
	flex-wrap: wrap;
}

.user-profile-page .homepage-header{
	top: 64px;
}

.user-profile-page .homepage-body{
	top: 88px;
}

.user-profile-page .homepage-body .homepage-body-left{
	width: 240px;
}

.user-profile-page .homepage-body .homepage-body-right{
	width: 900px;
}

.user-profile-page .homepage-body .homepage-body-margin{
	margin-left: 22px;
}

.profile-editor-card{
	border-radius: 26px;
	background: rgba(255,255,255,.96);
	box-shadow: 0 20px 52px rgba(54,78,92,.1);
	overflow: hidden;
}

.profile-editor-hero{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 24px 28px;
	background:
		radial-gradient(circle at 100% 0%, rgba(93,139,114,.22), transparent 36%),
		linear-gradient(135deg,#fffaf2,#f3f9f5);
	border-bottom: 1px solid #e3ece7;
}

.profile-editor-kicker{
	color: #5d8b72;
	font-size: 12px;
	font-weight: 900;
	letter-spacing: 2px;
}

.profile-editor-hero h2{
	margin: 6px 0 8px;
	color: #203241;
	font-size: 28px;
	font-weight: 900;
}

.profile-editor-hero p{
	margin: 0;
	max-width: 540px;
	color: #6f7f8d;
	line-height: 1.7;
}

.profile-gold-card{
	flex: 0 0 auto;
	min-width: 96px;
	padding: 14px 16px;
	border: 1px solid #dfeae5;
	border-radius: 20px;
	background: rgba(255,255,255,.78);
	text-align: center;
	box-shadow: 0 12px 26px rgba(54,78,92,.08);
}

.profile-gold-card span{
	display: block;
	color: #7a8994;
	font-size: 12px;
	font-weight: 800;
}

.profile-gold-card strong{
	display: block;
	margin-top: 5px;
	color: #203241;
	font-size: 28px;
	font-weight: 900;
	line-height: 1;
}

.profile-editor-layout{
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: 24px;
	padding: 26px 28px 30px;
}

.profile-avatar-card{
	padding: 20px 18px;
	border: 1px solid #e0ece6;
	border-radius: 24px;
	background: #f8fbf8;
	text-align: center;
}

.profile-avatar-ring{
	width: 136px;
	height: 136px;
	margin: 0 auto 16px;
	padding: 6px;
	border-radius: 38px;
	background:
		linear-gradient(#fff,#fff) padding-box,
		linear-gradient(135deg,#5d8b72,#d8b66d) border-box;
	border: 2px solid transparent;
	box-shadow: 0 18px 32px rgba(54,78,92,.12);
}

.profile-avatar-ring img{
	width: 100%;
	height: 100%;
	border-radius: 30px;
	object-fit: cover;
}

.profile-avatar-btn{
	width: 100%;
	border: 0;
	border-radius: 999px;
	padding: 10px 14px;
	background: #203241;
	color: #fff;
	font-weight: 900;
	box-shadow: 0 14px 28px rgba(32,50,65,.18);
	cursor: pointer;
}

.profile-avatar-btn:hover{
	background: #5d8b72;
}

.profile-avatar-card p{
	margin: 14px 0 0;
	color: #778792;
	font-size: 12px;
	line-height: 1.7;
	text-align: left;
}

.profile-account-note{
	margin-top: 16px;
	padding: 12px;
	border: 1px solid #e0ece6;
	border-radius: 16px;
	background: rgba(255,255,255,.72);
	text-align: left;
}

.profile-account-note span{
	display: block;
	color: #7d8b95;
	font-size: 12px;
	font-weight: 800;
}

.profile-account-note strong{
	display: block;
	margin-top: 4px;
	color: #203241;
	font-size: 14px;
	font-weight: 900;
	word-break: break-all;
}

.profile-account-note small{
	display: block;
	margin-top: 6px;
	color: #93a0a8;
	font-size: 12px;
	line-height: 1.55;
}

.profile-logout-link,
.profile-logout-link:link{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 12px;
	padding: 7px 12px;
	border: 1px solid #ead8d2;
	border-radius: 999px;
	background: #fff7f4;
	color: #a45d49;
	font-size: 12px;
	font-weight: 800;
	text-decoration: none;
}

.profile-logout-link:hover{
	border-color: #dfc0b4;
	background: #fff0ea;
	color: #843d2c;
	text-decoration: none;
}

.profile-form{
	min-width: 0;
}

.profile-form-grid{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.profile-field{
	min-width: 0;
}

.profile-field label{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 7px;
	color: #405466;
	font-size: 13px;
	font-weight: 900;
}

.profile-field label span{
	color: #b56f4a;
	font-size: 12px;
}

.profile-field input,
.profile-field select,
.profile-field textarea{
	box-sizing: border-box;
	width: 100%;
	border: 1px solid #dce8e2;
	border-radius: 15px;
	background: #fff;
	color: #203241;
	box-shadow: none;
	outline: none;
	transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.profile-field input,
.profile-field select,
.profile-readonly{
	height: 42px;
	padding: 0 13px;
}

.profile-field textarea{
	min-height: 128px;
	padding: 12px 13px;
	resize: vertical;
}

.profile-field input:focus,
.profile-field select:focus,
.profile-field textarea:focus{
	border-color: #98b8a4;
	background: #fbfdfb;
	box-shadow: 0 0 0 3px rgba(93,139,114,.12);
}

.profile-readonly{
	box-sizing: border-box;
	display: flex;
	align-items: center;
	border: 1px solid #e2ece7;
	border-radius: 15px;
	background: #f5f8f6;
	color: #72818c;
}

.profile-field small{
	display: block;
	margin-top: 6px;
	color: #93a0a8;
	font-size: 12px;
	line-height: 1.5;
}

.profile-field-wide{
	margin-top: 16px;
}

.profile-save-row{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid #e6eee9;
}

.profile-save-tip{
	color: #7d8b95;
	font-size: 13px;
}

.profile-save-tip.is-ok{
	color: #4f7d64;
	font-weight: 900;
}

.profile-save-tip.is-error{
	color: #a45b50;
	font-weight: 900;
}

.profile-save-btn{
	flex: 0 0 auto;
	border: 0;
	border-radius: 999px;
	padding: 11px 22px;
	background: #5d8b72;
	color: #fff;
	font-weight: 900;
	box-shadow: 0 14px 28px rgba(93,139,114,.22);
	cursor: pointer;
}

.profile-save-btn:hover{
	background: #4f7d64;
}

.profile-save-btn:disabled{
	cursor: default;
	opacity: .68;
}

@media (max-width: 980px){
	.user-profile-page .homepage-body .homepage-body-right{
		width: auto;
	}
	.profile-editor-hero,
	.profile-save-row{
		align-items: flex-start;
		flex-direction: column;
	}
	.profile-editor-layout{
		grid-template-columns: 1fr;
	}
	.profile-form-grid{
		grid-template-columns: 1fr;
	}
}
.friend-item{
	border-radius: 15px;
	box-shadow: 1px 1px 3px #AAA;
	border: #F3F5F6 1px solid;
	padding: 1px;
	margin: 10px;
	width: 20%;
	text-align:center;
	
	/*display: inline-flex;
    justify-content: space-between;
    flex-direction: row;*/
}
.friend-item .user-logo-small64{
	margin: 10px auto 0;
}
.friend-item .friend-name{
	line-height: 32px;
	margin: 0 10px;
	overflow: hidden;
	color: #666;
}

.icon-black-user{
	background:url(../img/homepage/black-user.png) no-repeat  center center;
}
.icon-add{
	background:url(../img/homepage/add-green.png) no-repeat center center;
}
.friend-item .icon-delete-red,
.friend-item .icon-black-user,
.friend-item .icon-add{
	margin-top:5px;
	cursor: pointer;
}
.friend-item:hover .icon-delete-red,
.friend-item:hover  .icon-black-user,
.friend-item:hover  .icon-add{
}

.friend-item .icon:hover{
	background-color: #F3F5F6;
	border-radius: 50%;
}
.icon-delete-red{
	background: url(../img/homepage/delete-red.png) no-repeat center center;
}

.hmbox .dashed-line{
	border-bottom:#aaa 1px dashed;
	margin-top: 20px;
	background: #F3F5F6;
	border-radius: 5px;
}

.user-info-box .top-small-search{
	width: 300px;
	height: 30px;
	background: #fff;
	vertical-align: middle;
	margin-top:20px;
	margin-right:25px;
	border-radius: 15px;
	border: #AAAAAA 1px solid;
}
.user-info-box .top-small-search input[type='text']{
	border:none;
	height: 30px;
	width:250px;
	padding: 0 0 0 5px;
	vertical-align: top;
	border-bottom-left-radius: 15px;
	border-top-left-radius: 15px;
}
.user-info-box .top-small-search .top-search-btn{
	display: inline-block;
	height:28px;
	width: 40px;
	background: url(../img/search-small-btn.png) no-repeat 2px -5px;
	vertical-align: top;
	cursor: pointer;
}
.user-info-box .top-small-search .top-search-btn:hover{
	background-position: 2px -46px;
}


.hmtopic .user-logo-small{
	position: relative
}
.hmtopic .user-logo-small .add-friend{
	position: absolute;
	color: #fff;
	font-weight: bold;
	bottom: 0px;
	left: 11px;
	display: block;
	height: 20px;
	width: 20px;
	cursor: pointer;
	text-shadow: 0 0 3px #666;
	opacity: 0;
	border-radius: 50%;
	font-size: 24px;
	text-align: center;
	line-height:17px;
	
}

.hmtopic .user-logo-small:hover .add-friend{
	opacity: 1;
	bottom:10px;
	transition:opacity .3s,  bottom  .3s; 
}
.hmtopic .user-logo-small .add-friend:hover{
	
	background: rgba(0,0,0,.2);
}

/* 时间隧道 */
.plant-time-tunnel{
	height: 550px;
	width: 1000px;
	overflow: hidden;
	display: flex;
	background: #fff;
}
.plant-time-tunnel .plant-pic-box{
	height: 550px;	
	padding: 10px;
	background: #222;
	
}
.plant-time-tunnel .plant-pic-box .plant-pic{
	width: 600px;
	height: 500px;
	overflow: hidden;
	object-fit: cover;
	position: relative;
	
}

.plant-time-tunnel .plant-pic-box .plant-pic-detial{
	position: absolute;
	height: 160px;
	width: 600px;
	background: rgba(0,0,0,.6);
	bottom:0;
	color: #FFFFFF;
}

.plant-time-tunnel .plant-pic-box .plant-pic-detial h1{
	font-size: 14px;
	height: 30px;
	padding: 0;
	margin: 0;
	line-height: 30px;
	background: rgba(0,0,0,.3);
	padding: 0 10px;
}
.plant-time-tunnel .plant-pic-box .plant-pic-detial h1 .arrow-btn{
	margin-top: 7px;
	cursor: pointer;
}
.plant-time-tunnel .plant-pic-box .plant-pic-detial h1 .arrow-btn:hover{
	color: #009CFC;
}

.plant-time-tunnel .plant-pic-box .plant-pic-detial table{
	font-size: 12px;
	width: 560px;
	margin: 0 auto;
}
.plant-time-tunnel .plant-pic-box .plant-pic-detial table td {
	height: 25px;
	line-height: 25px;
	padding: 0 5px;
}
.plant-time-tunnel .plant-pic-box .plant-pic-detial table tr:nth-child(even) td{
	background: rgba(0,0,0,.2);
}
.plant-time-tunnel .plant-pic-box .plant-pic-detial table td:nth-child(odd){
	color: #AAAAAA;
	font-weight: bold;
	width: 15%;
}
.plant-time-tunnel .plant-pic-box .plant-pic-detial table td:nth-child(odd){
	color: #AAAAAA;
	font-weight: bold;
	width: 15%;
}
.plant-time-tunnel .plant-pic-box .plant-pic-detial table td:nth-child(even){
	width: 35%;
}
.plant-time-tunnel .plant-topic{
	height: 550px;
	overflow: auto;
	width: 400px;
	position: relative;
}

.plant-time-tunnel .plant-topic .pic-maininfo{
	padding: 10px;
	height: 129px;	
	border-bottom: #F3F5F6 1px solid;
	box-shadow:0 0 3px #AAAAAA;
}
.plant-time-tunnel .plant-topic .pic-maininfo .pic-maininfo-table{
	font-size: 12px;
	margin: 0 auto;
	width: 360px;
}
.plant-time-tunnel .plant-topic .pic-maininfo .pic-maininfo-table tr:nth-child(even) td{
	background: rgba(200,200,200,.1);
}
.plant-time-tunnel .plant-topic .pic-maininfo .pic-maininfo-table td{
	height:30px ;
	/* line-height: 25px; */
}
.plant-time-tunnel .plant-topic .pic-maininfo .pic-maininfo-table td:nth-child(odd){
	width:60px;
	font-weight: bold;
}
.plant-time-tunnel .plant-topic .pic-maininfo .pic-maininfo-table td:nth-child(even){
	width:120px;
	color: #666;
}
.plant-time-tunnel .time-bar{
	height: 50px;
	
}
.plant-time-tunnel .time-bar-progress{
	height: 4px;
	font-size: 0;
	line-height: 0;
	background: #dcdcdc;
	border-radius: 3px ;
	position: relative;
	margin-top: 20px;
}
.plant-time-tunnel .time-bar-pointer{
	height: 16px;
	width: 16px;
	border-radius: 50%;
	background: #337AB7;
	box-shadow:0 0 1px #AAAAAA; 
	position: absolute;
	top:-6px;
	cursor:pointer;
}
.plant-time-tunnel .tiem-bar-date{
	background: #F3F5F6;
	border-radius: 5px;
	padding: 10px 5px;
	font-size: 12px;
	position: absolute;
	white-space: nowrap;
	top:-23px;
	cursor: default;	
}

.plant-time-tunnel .chat-list{
	padding-bottom: 0;
	overflow: auto;
}
.plant-time-tunnel .pic-topic-list{
	height: 420px;
}
.plant-time-tunnel .last-reply-li{
	position: sticky;
	background: #fff;
	bottom:0;
	right:0;
}

.photoalbum-search-box {	
	   padding: .2rem .5rem;
}

.plant-archives-toast{
	position: fixed;
	right: 28px;
	bottom: 28px;
	min-width: 180px;
	max-width: 320px;
	padding: 12px 16px;
	border-radius: 16px;
	background: rgba(33,48,58,.92);
	color: #fff;
	font-size: 13px;
	line-height: 1.5;
	box-shadow: 0 18px 36px rgba(18,29,37,.24);
	opacity: 0;
	transform: translateY(12px);
	pointer-events: none;
	transition: opacity .22s ease, transform .22s ease;
	z-index: 9999;
}

.plant-archives-toast-visible{
	opacity: 1;
	transform: translateY(0);
}

.plant-archives-toast-success{
	background: rgba(34,55,64,.94);
}

.plant-archives-toast-error{
	background: rgba(126,48,48,.94);
}

/* Plant growth detail */
.plant-growth-page{
	margin: 0;
	min-height: 100vh;
	background:
		radial-gradient(circle at 18% 8%, rgba(177,222,105,.18), transparent 28%),
		radial-gradient(circle at 78% 2%, rgba(95,154,127,.16), transparent 32%),
		linear-gradient(135deg, #e9eadf 0%, #dfe9df 52%, #f4efe4 100%);
	color: #23312b;
}

.plant-growth-topbar{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 12;
	width: auto;
	margin: 0;
	padding: 16px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	background: linear-gradient(180deg, rgba(7,12,10,.58), transparent);
}

.plant-growth-brand,
.plant-growth-brand:link,
.plant-growth-brand:hover{
	color: #fff;
	font-weight: 800;
	font-size: 18px;
	text-decoration: none;
	letter-spacing: 1px;
}

.plant-growth-topbar-actions{
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 13px;
}

.plant-growth-topbar-actions a,
.plant-growth-topbar-actions a:link,
.plant-growth-topbar-actions a:hover{
	color: rgba(255,255,255,.82);
	text-decoration: none;
}

.plant-growth-owner{
	color: rgba(255,255,255,.82);
	font-weight: 700;
	letter-spacing: .5px;
}

.plant-growth-shell{
	width: 100%;
	margin: 0;
	padding: 0;
}

.plant-growth-hero{
	position: relative;
}

.plant-growth-stage-card,
.plant-growth-info-card,
.plant-growth-timeline-card,
.plant-growth-compare-card{
	border: 1px solid rgba(58,85,67,.14);
	background: rgba(255,255,255,.78);
	box-shadow: 0 28px 70px rgba(54,67,58,.14);
	backdrop-filter: blur(12px);
}

.plant-growth-stage-card{
	position: relative;
	border: 0;
	border-radius: 0;
	padding: 0;
	overflow: hidden;
	background: #111a16;
	box-shadow: none;
}

.plant-growth-stage-header{
	position: absolute;
	top: 72px;
	left: 54px;
	right: 54px;
	z-index: 5;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 0;
	pointer-events: none;
	transition: opacity .22s ease, transform .22s ease;
}

.plant-growth-kicker{
	color: #75915f;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.plant-growth-stage-header h1,
.plant-growth-info-card h2,
.plant-growth-section-title h2{
	margin: 6px 0 0;
	color: #23312b;
	font-weight: 900;
	line-height: 1.18;
}

.plant-growth-stage-header h1{
	font-size: clamp(26px, 4vw, 44px);
	letter-spacing: -1px;
	color: #fff;
	text-shadow: 0 14px 38px rgba(0,0,0,.36);
}

.plant-growth-stage-header .plant-growth-kicker{
	color: rgba(224,245,183,.9);
	text-shadow: 0 10px 30px rgba(0,0,0,.3);
}

.plant-growth-stage-count{
	min-width: 88px;
	padding: 10px 14px;
	border-radius: 22px;
	background: rgba(238,245,221,.9);
	text-align: center;
	color: #607744;
	box-shadow: 0 16px 40px rgba(0,0,0,.16);
}

.plant-growth-stage-count span:first-child{
	display: block;
	font-size: 24px;
	font-weight: 900;
	line-height: 1;
}

.plant-growth-stage-count span:last-child{
	display: block;
	margin-top: 4px;
	font-size: 12px;
}

.plant-growth-stage{
	position: relative;
	min-height: 100vh;
	border-radius: 0;
	background:
		radial-gradient(circle at 50% 18%, rgba(255,255,255,.1), transparent 24%),
		linear-gradient(180deg, rgba(15,22,19,.16), rgba(15,22,19,.36)),
		#111a16;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: inset 0 0 90px rgba(0,0,0,.28);
}

.plant-growth-main-image{
	width: 100%;
	height: 100%;
	min-height: 100vh;
	box-sizing: border-box;
	padding-right: 408px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.plant-growth-main-image > img{
	max-width: 100%;
	max-height: 100vh;
	object-fit: contain;
	display: block;
}

.plant-growth-aligned-photo{
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.plant-growth-aligned-photo-frame{
	position: absolute;
	inset: 0;
	transform: translate(var(--plant-align-left, 0%), var(--plant-align-top, 0%)) scale(var(--plant-align-scale, 1)) rotate(var(--plant-align-rotate, 0deg));
	transform-origin: center center;
}

.plant-growth-aligned-photo img{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100vh;
	object-fit: contain;
	display: block;
	box-shadow: 0 24px 80px rgba(0,0,0,.22);
	transition: transform .28s ease, max-height .28s ease;
}

.plant-growth-main-image .plant-growth-aligned-photo{
	min-height: 100vh;
	transform-origin: center center;
	transition: transform .28s ease;
}

.plant-growth-main-image .plant-growth-aligned-photo img{
	max-width: 100%;
}

.plant-growth-zoomed .plant-growth-main-image{
	padding-right: 0;
}

.plant-growth-zoomed .plant-growth-main-image .plant-growth-aligned-photo img{
	max-height: 100vh;
}

.plant-growth-empty-image{
	color: rgba(255,255,255,.76);
	font-size: 16px;
	letter-spacing: 1px;
}

.plant-growth-arrow{
	position: absolute;
	top: 50%;
	z-index: 3;
	width: 48px;
	height: 76px;
	margin-top: -38px;
	border: 0;
	border-radius: 999px;
	background: rgba(255,255,255,.18);
	color: #fff;
	font-family: Georgia, serif;
	font-size: 42px;
	line-height: 1;
	cursor: pointer;
	transition: background .18s ease, transform .18s ease;
}

.plant-growth-arrow:hover{
	background: rgba(255,255,255,.3);
	transform: translateY(-2px);
}

.plant-growth-prev{
	left: 18px;
}

.plant-growth-next{
	right: 18px;
}

.plant-growth-photo-caption{
	position: absolute;
	left: 54px;
	right: auto;
	bottom: 96px;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 0;
	border-radius: 0;
	background: transparent;
	color: rgba(255,255,255,.72);
	text-shadow: 0 10px 28px rgba(0,0,0,.72);
	transition: opacity .2s ease, transform .2s ease;
}

.plant-growth-caption-label{
	display: none;
	margin-bottom: 0;
	color: rgba(224,245,183,.84);
	font-size: 11px;
	font-weight: 800;
}

.plant-growth-photo-date-wrap{
	display: none;
}

.plant-growth-photo-caption strong{
	color: #fff;
	font-size: 16px;
	letter-spacing: .5px;
}

#plant-growth-photo-size{
	padding: 0;
	border-radius: 999px;
	background: transparent;
	color: rgba(255,255,255,.66);
	font-size: 13px;
	font-weight: 600;
}

.plant-growth-view-tools{
	position: fixed;
	top: 74px;
	right: 24px;
	z-index: 9999;
	display: flex;
	gap: 8px;
	border: 1px solid rgba(255,255,255,.18);
	border-radius: 999px;
	padding: 6px;
	background: rgba(10,15,20,.68);
	box-shadow: 0 16px 38px rgba(0,0,0,.24);
	backdrop-filter: blur(12px);
	pointer-events: auto;
}

.plant-growth-zoom-control,
.plant-growth-zoom-reset{
	border: 0;
	border-radius: 999px;
	min-width: 34px;
	height: 34px;
	padding: 0;
	background: rgba(255,255,255,.12);
	color: #fff;
	font-size: 18px;
	font-weight: 900;
	line-height: 34px;
	text-align: center;
	cursor: pointer;
	transition: background .18s ease, opacity .18s ease;
}

.plant-growth-zoom-reset{
	min-width: 54px;
	padding: 0 10px;
	font-size: 12px;
}

.plant-growth-zoom-control:hover,
.plant-growth-zoom-reset:hover{
	background: rgba(255,255,255,.24);
}

.plant-growth-zoom-control:disabled{
	cursor: default;
	opacity: .42;
	background: rgba(255,255,255,.08);
}

.plant-growth-info-card{
	position: absolute;
	right: 54px;
	top: 132px;
	z-index: 6;
	width: 300px;
	max-height: calc(100vh - 220px);
	border-radius: 24px;
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 9px;
	overflow-y: auto;
	background: rgba(13,20,17,.34);
	box-shadow: 0 18px 46px rgba(0,0,0,.18);
	color: rgba(255,255,255,.88);
	opacity: .82;
	backdrop-filter: blur(16px);
	transition: opacity .18s ease, transform .24s ease;
}

.plant-growth-info-card:hover{
	opacity: .97;
}

.plant-growth-zoomed .plant-growth-info-card{
	opacity: 0;
	pointer-events: none;
	transform: translateX(24px);
}

.plant-growth-zoomed .plant-growth-stage-header{
	opacity: 0;
	pointer-events: none;
	transform: translateY(-16px);
}

.plant-growth-zoomed .plant-growth-photo-caption{
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
	padding: 8px 12px;
	border-radius: 999px;
	background: rgba(10,15,20,.58);
	backdrop-filter: blur(10px);
}

.plant-growth-zoomed .plant-growth-photo-date-wrap{
	display: block;
}

.plant-growth-info-head{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.plant-growth-info-label{
	color: rgba(224,245,183,.86);
	font-size: 11px;
	font-weight: 900;
	letter-spacing: 2px;
}

.plant-growth-copy-link{
	border: 0;
	border-radius: 999px;
	padding: 7px 11px;
	background: rgba(34,53,42,.72);
	color: #fff;
	font-size: 12px;
	cursor: pointer;
	box-shadow: 0 10px 24px rgba(34,53,42,.18);
}

.plant-growth-info-card h2{
	margin-top: -6px;
	font-size: 30px;
	color: #fff;
}

.plant-growth-latin{
	margin-top: -4px;
	color: rgba(255,255,255,.62);
	font-style: italic;
	line-height: 1.35;
	font-size: 13px;
}

.plant-growth-metrics{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 7px;
}

.plant-growth-metrics div,
.plant-growth-type-row,
.plant-growth-insights div{
	border-radius: 14px;
	background: rgba(255,255,255,.075);
	padding: 9px 10px;
}

.plant-growth-metrics span,
.plant-growth-type-row span,
.plant-growth-insights span,
.plant-growth-note span,
.plant-growth-current-note span{
	display: block;
	margin-bottom: 4px;
	color: rgba(224,245,183,.78);
	font-size: 11px;
	font-weight: 800;
}

.plant-growth-metrics strong,
.plant-growth-type-row strong,
.plant-growth-insights strong{
	color: rgba(255,255,255,.92);
	font-size: 13px;
}

.plant-growth-type-row{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.plant-growth-type-row span{
	margin-bottom: 0;
}

.plant-growth-type-row strong span{
	display: inline;
	margin: 0;
	color: inherit;
	font-size: inherit;
}

.plant-growth-insights{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 7px;
}

.plant-growth-insights div{
	background:
		linear-gradient(135deg, rgba(224,245,183,.16), rgba(255,255,255,.08));
}

.plant-growth-preview-card{
	margin: 8px 0 10px;
	padding: 10px;
	border-radius: 18px;
	background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.10));
	border: 1px solid rgba(255,255,255,.16);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}

.plant-growth-preview-head{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}

.plant-growth-preview-head span{
	display: block;
	margin-bottom: 2px;
	color: rgba(224,245,183,.78);
	font-size: 11px;
	font-weight: 800;
}

.plant-growth-preview-head strong{
	display: block;
	color: rgba(255,255,255,.95);
	font-size: 18px;
	line-height: 1.2;
}

.plant-growth-preview-head a{
	color: rgba(224,245,183,.92);
	font-size: 12px;
	font-weight: 800;
	text-decoration: none;
}

.plant-growth-preview-compare{
	display: grid;
	grid-template-columns: minmax(0, 1fr) 84px minmax(0, 1fr);
	gap: 10px;
	align-items: center;
}

.plant-growth-preview-item b{
	display: block;
	margin-top: 6px;
	color: rgba(255,255,255,.92);
	font-size: 12px;
	line-height: 1.45;
}

.plant-growth-preview-item b span{
	display: block;
	margin-bottom: 3px;
	color: rgba(224,245,183,.78);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .4px;
}

.plant-growth-preview-image{
	aspect-ratio: 1 / 1;
	border-radius: 16px;
	background-color: rgba(255,255,255,.08);
	overflow: hidden;
}

.plant-growth-preview-image .plant-growth-aligned-photo,
.plant-growth-compare-image .plant-growth-aligned-photo,
.plant-growth-film-image .plant-growth-aligned-photo{
	height: 100%;
}

.plant-growth-preview-image .plant-growth-aligned-photo img,
.plant-growth-compare-image .plant-growth-aligned-photo img,
.plant-growth-film-image .plant-growth-aligned-photo img{
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
}

.plant-growth-preview-bridge{
	color: rgba(232,247,193,.96);
	font-size: 13px;
	font-weight: 800;
	line-height: 1.5;
	text-align: center;
	text-shadow: 0 6px 16px rgba(0,0,0,.28);
}

.plant-growth-preview-note{
	margin: 10px 0 0;
	color: rgba(255,255,255,.68);
	font-size: 12px;
	line-height: 1.6;
}

.plant-growth-note,
.plant-growth-current-note{
	border-radius: 16px;
	padding: 10px 11px;
	background: rgba(255,255,255,.075);
	border: 1px solid rgba(255,255,255,.10);
}

.plant-growth-note p,
.plant-growth-current-note p{
	margin: 0;
	color: rgba(255,255,255,.76);
	line-height: 1.55;
	font-size: 13px;
	word-break: break-word;
}

.plant-growth-copy-feedback{
	min-height: 0;
	color: rgba(224,245,183,.9);
	font-size: 12px;
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity .18s ease, transform .18s ease;
}

.plant-growth-copy-feedback-visible{
	opacity: 1;
	transform: translateY(0);
}

.plant-growth-timeline-card{
	position: fixed;
	left: 18px;
	right: 18px;
	bottom: 0;
	z-index: 30;
	width: auto;
	margin: 0 auto;
	border-radius: 26px 26px 0 0;
	padding: 18px 20px 14px;
	transform: translateY(calc(100% - 18px));
	transition: transform .52s cubic-bezier(.22,.9,.28,1), background .36s ease, box-shadow .36s ease;
	background: rgba(13,20,17,.68);
	color: #fff;
	box-shadow: 0 -24px 70px rgba(0,0,0,.22);
	will-change: transform;
}

.plant-growth-timeline-card:before{
	content: "";
	position: absolute;
	top: 6px;
	left: 50%;
	width: 76px;
	margin-left: -38px;
	height: 5px;
	border-radius: 999px;
	background: rgba(224,245,183,.72);
	box-shadow: 0 0 18px rgba(224,245,183,.22);
}

.plant-growth-timeline-card:hover{
	transform: translateY(0);
	background: rgba(13,20,17,.86);
	box-shadow: 0 -30px 82px rgba(0,0,0,.28);
}

.plant-growth-section-title{
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 14px;
}

.plant-growth-section-actions{
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
}

.plant-growth-section-link{
	display: inline-flex;
	align-items: center;
	height: 34px;
	padding: 0 14px;
	border-radius: 999px;
	background: rgba(255,255,255,.88);
	border: 1px solid rgba(185,203,190,.9);
	color: #315268;
	font-size: 13px;
	font-weight: 800;
	text-decoration: none;
	box-shadow: 0 12px 28px rgba(31,56,64,.08);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.plant-growth-section-link:hover{
	transform: translateY(-1px);
	box-shadow: 0 16px 32px rgba(31,56,64,.12);
	border-color: #8fb0a1;
}

.plant-growth-section-title h2{
	font-size: 24px;
	color: #fff;
}

.plant-growth-section-title p{
	margin: 0;
	color: rgba(255,255,255,.58);
	line-height: 1.6;
}

.plant-growth-timeline{
	display: flex;
	gap: 14px;
	overflow-x: auto;
	padding: 8px 4px 12px;
	scroll-snap-type: x proximity;
	position: relative;
}

.plant-growth-timeline:before{
	content: "";
	position: absolute;
	left: 10px;
	right: 10px;
	top: 31px;
	height: 1px;
	background: linear-gradient(90deg, rgba(224,245,183,.08), rgba(224,245,183,.44), rgba(224,245,183,.08));
}

.plant-growth-thumb{
	flex: 0 0 124px;
	border: 1px solid rgba(58,85,67,.14);
	border-radius: 20px;
	padding: 8px;
	background: rgba(255,255,255,.62);
	color: #23312b;
	text-align: center;
	cursor: pointer;
	scroll-snap-align: start;
	transition: transform .28s cubic-bezier(.22,.9,.28,1), box-shadow .28s ease, border-color .28s ease, background .28s ease;
	position: relative;
	z-index: 1;
}

.plant-growth-thumb:hover,
.plant-growth-thumb-active{
	transform: translateY(-3px);
	border-color: rgba(102,137,78,.55);
	background: #fff;
	box-shadow: 0 18px 38px rgba(54,67,58,.16);
}

.plant-growth-thumb:before{
	content: "";
	position: absolute;
	left: 50%;
	top: 19px;
	width: 10px;
	height: 10px;
	margin-left: -5px;
	border-radius: 50%;
	background: #dfeeb4;
	box-shadow: 0 0 0 4px rgba(224,245,183,.18);
}

.plant-growth-thumb-active:before{
	background: #fff;
	box-shadow: 0 0 0 5px rgba(224,245,183,.34), 0 0 18px rgba(224,245,183,.52);
}

.plant-growth-thumb-time{
	display: block;
	min-height: 39px;
	padding-bottom: 9px;
	color: rgba(224,245,183,.94);
	text-align: center;
	text-shadow: 0 8px 18px rgba(0,0,0,.42);
}

.plant-growth-thumb-age,
.plant-growth-thumb-season,
.plant-growth-thumb-exact{
	display: block;
	line-height: 1.1;
}

.plant-growth-thumb-age{
	font-size: 13px;
	font-weight: 900;
	letter-spacing: .5px;
}

.plant-growth-thumb-season{
	margin-top: 3px;
	font-size: 12px;
	font-weight: 900;
	color: rgba(224,245,183,.92);
}

.plant-growth-thumb-exact{
	margin-top: 3px;
	color: rgba(255,255,255,.7);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .6px;
}

.plant-growth-thumb-active .plant-growth-thumb-time{
	color: #23312b;
	text-shadow: none;
}

.plant-growth-thumb-active .plant-growth-thumb-season{
	color: #5f7b35;
}

.plant-growth-thumb-active .plant-growth-thumb-exact{
	color: rgba(35,49,43,.52);
}

.plant-growth-thumb-image{
	display: block;
	height: 78px;
	border-radius: 16px;
	overflow: hidden;
	background: #1b251f;
}

.plant-growth-thumb-image img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.plant-growth-thumb-size{
	display: block;
}

.plant-growth-thumb-size{
	margin-top: 7px;
	color: rgba(35,49,43,.56);
	font-size: 11px;
	line-height: 1.45;
	text-align: left;
}

.plant-growth-empty-timeline{
	padding: 32px;
	border-radius: 24px;
	background: rgba(241,246,233,.8);
	color: rgba(35,49,43,.58);
	text-align: center;
}

.plant-growth-compare-card{
	margin: 28px 18px 110px;
	border-radius: 28px;
	padding: 24px 26px 26px;
	background:
		radial-gradient(circle at 0 0, rgba(28,77,111,.08), transparent 24%),
		radial-gradient(circle at 100% 100%, rgba(117,145,95,.14), transparent 30%),
		rgba(255,255,255,.9);
}

.plant-growth-story-grid{
	display: grid;
	grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
	gap: 18px;
}

.plant-growth-story-summary{
	display: grid;
	gap: 12px;
}

.plant-growth-story-report{
	padding: 18px;
	border-radius: 18px;
	background:
		linear-gradient(135deg, rgba(224,245,183,.38), rgba(248,251,249,.96) 46%),
		rgba(248,251,249,.96);
	border: 1px solid #dfe9e4;
	box-shadow: 0 18px 38px rgba(31,56,64,.08);
}

.plant-growth-story-report-label{
	display: inline-flex;
	align-items: center;
	height: 26px;
	padding: 0 10px;
	border-radius: 999px;
	background: rgba(49,82,104,.1);
	color: #315268;
	font-size: 12px;
	font-weight: 900;
}

.plant-growth-story-report strong{
	display: block;
	margin-top: 12px;
	color: #203241;
	font-size: 24px;
	line-height: 1.25;
}

.plant-growth-story-report p{
	margin: 9px 0 0;
	color: #526474;
	font-size: 14px;
	line-height: 1.75;
}

.plant-growth-story-facts,
.plant-growth-story-measures{
	display: grid;
	grid-template-columns: repeat(3,minmax(0,1fr));
	gap: 10px;
}

.plant-growth-story-measures{
	grid-template-columns: 1fr 1fr;
}

.plant-growth-story-facts div,
.plant-growth-story-measures div{
	padding: 13px 14px;
	border-radius: 16px;
	background: rgba(248,251,249,.94);
	border: 1px solid #dfe9e4;
}

.plant-growth-story-facts span,
.plant-growth-story-measures span,
.plant-growth-compare-card-item span,
.plant-growth-compare-note{
	display: block;
	color: #6f808c;
	font-size: 12px;
	line-height: 1.6;
}

.plant-growth-story-facts strong,
.plant-growth-story-measures strong{
	display: block;
	margin-top: 4px;
	color: #203241;
	font-size: 20px;
	line-height: 1.2;
}

.plant-growth-story-measures em{
	display: block;
	margin-top: 6px;
	color: #7f8d95;
	font-size: 12px;
	font-style: normal;
	line-height: 1.6;
}

.plant-growth-story-film{
	display: flex;
	gap: 10px;
	padding: 10px;
	border-radius: 18px;
	background: rgba(30,50,43,.06);
	overflow-x: auto;
}

.plant-growth-film-item{
	flex: 0 0 96px;
	border: 0;
	padding: 0;
	background: transparent;
	text-align: left;
	cursor: pointer;
}

.plant-growth-film-image{
	display: block;
	height: 72px;
	border-radius: 14px;
	background-color: #eef3f0;
	overflow: hidden;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.55);
}

.plant-growth-film-item strong{
	display: block;
	margin-top: 7px;
	color: #203241;
	font-size: 12px;
	line-height: 1.35;
}

.plant-growth-film-item em{
	display: block;
	margin-top: 2px;
	color: #7f8d95;
	font-size: 11px;
	font-style: normal;
}

.plant-growth-film-viewer-open{
	overflow: hidden;
}

.plant-growth-film-viewer{
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 34px;
	background: rgba(5,12,9,.74);
	opacity: 0;
	pointer-events: none;
	backdrop-filter: blur(18px);
	transition: opacity .2s ease;
}

.plant-growth-film-viewer-visible{
	opacity: 1;
	pointer-events: auto;
}

.plant-growth-film-viewer-card{
	position: relative;
	width: min(980px, 92vw);
	max-height: 88vh;
	border-radius: 28px;
	overflow: hidden;
	background: #0d1411;
	box-shadow: 0 36px 110px rgba(0,0,0,.42);
}

.plant-growth-film-viewer-image-wrap{
	position: relative;
	width: 100%;
	height: calc(88vh - 72px);
	background: #0d1411;
	overflow: hidden;
}

.plant-growth-film-viewer-image-wrap .plant-growth-aligned-photo img{
	display: block;
	width: 100%;
	height: 100%;
	max-height: none;
	max-width: 100%;
	object-fit: contain;
	background: #0d1411;
}

.plant-growth-film-viewer-caption{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 20px;
	color: rgba(255,255,255,.72);
	background: linear-gradient(180deg, rgba(13,20,17,.92), rgba(13,20,17,.98));
}

.plant-growth-film-viewer-caption strong{
	color: #fff;
	font-size: 17px;
}

.plant-growth-film-viewer-caption span{
	color: rgba(224,245,183,.82);
	font-size: 13px;
	font-weight: 800;
}

.plant-growth-film-viewer-close{
	position: fixed;
	top: 22px;
	right: 24px;
	z-index: 10001;
	width: 42px;
	height: 42px;
	border: 1px solid rgba(255,255,255,.22);
	border-radius: 50%;
	background: rgba(255,255,255,.12);
	color: #fff;
	font-size: 30px;
	line-height: 38px;
	cursor: pointer;
	backdrop-filter: blur(10px);
}

.plant-growth-story-note{
	padding: 12px 14px;
	border-radius: 16px;
	background: rgba(255,255,255,.6);
	border: 1px dashed #cddcd4;
	color: #7f8d95;
	font-size: 12px;
	line-height: 1.7;
}

.plant-growth-compare-panel{
	padding: 18px;
	border-radius: 24px;
	background: rgba(255,255,255,.9);
	border: 1px solid #dfe9e4;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 18px 46px rgba(31,56,64,.08);
}

.plant-growth-compare-head{
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}

.plant-growth-compare-head h3{
	margin: 2px 0 0;
	color: #203241;
	font-size: 20px;
	font-weight: 900;
}

.plant-growth-compare-head p{
	max-width: 360px;
	margin: 0;
	color: #70808b;
	font-size: 13px;
	line-height: 1.7;
	text-align: right;
}

.plant-growth-compare-stage{
	display: grid;
	grid-template-columns: minmax(0, 1fr) 150px minmax(0, 1fr);
	gap: 14px;
	align-items: center;
}

.plant-growth-compare-card-item{
	padding: 14px;
	border-radius: 22px;
	background: linear-gradient(180deg, rgba(248,251,249,.96), rgba(255,255,255,.96));
	border: 1px solid #e1ebe7;
}

.plant-growth-compare-label{
	margin-bottom: 8px;
	font-weight: 900;
	letter-spacing: .4px;
	text-transform: uppercase;
}

.plant-growth-compare-image{
	aspect-ratio: 1 / 1;
	border-radius: 20px;
	background-color: #eef3f0;
	overflow: hidden;
}

.plant-growth-compare-card-item strong{
	display: block;
	margin-top: 10px;
	color: #203241;
	font-size: 18px;
}

.plant-growth-compare-meta{
	margin-top: 4px;
	color: #6d8a56;
	font-size: 11px;
	font-weight: 900;
	letter-spacing: .4px;
	text-transform: uppercase;
}

.plant-growth-compare-card-item span:last-child{
	margin-top: 4px;
}

.plant-growth-compare-bridge{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100%;
	padding: 0 10px;
	color: #315268;
	font-size: 16px;
	font-weight: 900;
	text-align: center;
}

.plant-growth-compare-bridge:before,
.plant-growth-compare-bridge:after{
	content: "";
	position: absolute;
	left: 14px;
	right: 14px;
	height: 1px;
	background: linear-gradient(90deg, rgba(49,82,104,.16), rgba(49,82,104,.42), rgba(49,82,104,.16));
}

.plant-growth-compare-bridge:before{
	top: calc(50% - 16px);
}

.plant-growth-compare-bridge:after{
	top: calc(50% + 16px);
}

.plant-growth-compare-note{
	margin-top: 14px;
	padding: 12px 14px;
	border-radius: 16px;
	background: #f5faf7;
	border: 1px solid #dde9e3;
}

@media (max-width: 980px){
	.plant-growth-info-card{
		position: static;
		width: auto;
		margin: 14px 18px 0;
		max-height: none;
	}
	.plant-growth-compare-card{
		margin-bottom: 120px;
	}
	.plant-growth-stage,
	.plant-growth-main-image{
		min-height: 100vh;
	}
	.plant-growth-main-image{
		padding-right: 0;
	}
	.plant-growth-main-image img{
		max-height: 100vh;
	}
	.plant-growth-photo-caption{
		right: 54px;
	}
	.plant-growth-view-tools{
		right: 18px;
		top: 74px;
	}
}

@media (max-width: 640px){
	.plant-growth-topbar,
	.plant-growth-shell{
		width: auto;
	}
	.plant-growth-topbar{
		align-items: flex-start;
		flex-direction: column;
		padding: 14px 16px;
	}
	.plant-growth-stage-card,
	.plant-growth-info-card,
	.plant-growth-timeline-card,
	.plant-growth-compare-card{
		border-radius: 24px;
		padding: 14px;
	}
	.plant-growth-stage-card{
		border-radius: 0;
		padding: 0;
	}
	.plant-growth-stage-header,
	.plant-growth-section-title,
	.plant-growth-photo-caption{
		flex-direction: column;
		align-items: flex-start;
	}
	.plant-growth-stage-header{
		top: 96px;
		left: 18px;
		right: 18px;
	}
	.plant-growth-stage,
	.plant-growth-main-image{
		min-height: 100vh;
	}
	.plant-growth-main-image{
		padding-right: 0;
	}
	.plant-growth-main-image img{
		max-height: 100vh;
	}
	.plant-growth-photo-caption{
		left: 18px;
		right: auto;
		bottom: 74px;
	}
	.plant-growth-view-tools{
		top: 112px;
		right: 18px;
	}
	.plant-growth-metrics{
		grid-template-columns: 1fr;
	}
	.plant-growth-insights{
		grid-template-columns: 1fr;
	}
	.plant-growth-story-grid,
	.plant-growth-compare-stage{
		grid-template-columns: 1fr;
	}
	.plant-growth-story-facts,
	.plant-growth-story-measures{
		grid-template-columns: 1fr;
	}
	.plant-growth-preview-head{
		display: block;
	}
	.plant-growth-section-actions{
		align-items: flex-start;
	}
	.plant-growth-preview-head a{
		display: inline-block;
		margin-top: 8px;
	}
	.plant-growth-preview-compare{
		grid-template-columns: 1fr;
	}
	.plant-growth-preview-bridge{
		padding: 2px 0;
	}
	.plant-growth-compare-head{
		align-items: flex-start;
		flex-direction: column;
	}
	.plant-growth-compare-head p{
		max-width: none;
		text-align: left;
	}
	.plant-growth-compare-bridge{
		min-height: 58px;
	}
	.plant-growth-compare-bridge:before,
	.plant-growth-compare-bridge:after{
		left: 50%;
		right: auto;
		width: 1px;
		height: 18px;
		background: linear-gradient(180deg, rgba(49,82,104,.16), rgba(49,82,104,.42), rgba(49,82,104,.16));
		transform: translateX(-50%);
	}
	.plant-growth-compare-bridge:before{
		top: 8px;
	}
	.plant-growth-compare-bridge:after{
		top: auto;
		bottom: 8px;
	}
	.plant-growth-thumb{
		flex-basis: 150px;
	}
	.plant-growth-arrow{
		width: 38px;
		height: 58px;
		margin-top: -29px;
		font-size: 32px;
	}
}

/* Mobile experience baseline: keep legacy fixed-width pages usable on phones. */
@media (max-width: 768px){
	html,
	body{
		width: 100%;
		max-width: 100%;
		overflow-x: hidden;
	}

	img,
	video,
	canvas{
		max-width: 100%;
		height: auto;
	}

	.doc-header,
	.doc-header .top-banner,
	.doc-header .nav,
	.doc-header .nav .nav-w,
	.homepage-body,
	.user-homepage-page .homepage-body,
	.user-maintenance-page .homepage-body,
	.user-profile-page .homepage-body,
	.sort-box,
	.search-result-box,
	.illustration-box,
	.topic-brower-box{
		box-sizing: border-box;
		width: 100%;
		min-width: 0;
		max-width: 100%;
	}

	.doc-header{
		height: auto;
		min-height: 92px;
	}

	.doc-header .top-banner{
		display: none;
	}

	.doc-header .nav{
		position: relative;
		height: auto;
		min-height: 0;
		padding: 10px 12px;
		background: rgba(15,24,30,.96);
	}

	.doc-header .nav .nav-w{
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 10px;
		height: auto;
		margin: 0;
	}

	.doc-header .nav .nav-w:after{
		display: none;
	}

	.doc-header .nav .nav-item{
		display: flex;
		flex: 1 1 auto;
		align-items: center;
		gap: 6px;
		min-width: 0;
		height: auto;
		margin: 0;
		line-height: 1;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.doc-header .nav .nav-item a,
	.doc-header .nav .nav-item a:link,
	.doc-header .nav .nav-item a:hover{
		display: inline-flex;
		flex: 0 0 auto;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		min-height: 46px;
		height: 46px;
		padding: 0 16px;
		border-radius: 999px;
		background: rgba(255,255,255,.08);
		font-size: 17px;
		font-weight: 800;
		line-height: 46px;
		white-space: nowrap;
	}

	.doc-header .nav .nav-item a:before,
	.doc-header .nav .nav-item a:hover:before{
		display: none;
	}

	.doc-header .nav .nav-w .logo{
		float: none;
		flex: 0 0 132px;
		width: 132px;
		height: 42px;
		background-size: contain;
	}

	.doc-header .nav .login-status{
		display: flex;
		float: none;
		order: 2;
		align-items: center;
		gap: 8px;
		min-width: 0;
		height: auto;
		line-height: 1;
	}

	.doc-header .nav .login-status a,
	.doc-header .nav .login-status a:link,
	.doc-header .nav .login-status .account-name{
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 46px;
		margin: 0;
		padding: 0 14px;
		border-radius: 999px;
		background: rgba(255,255,255,.08);
		font-size: 17px;
		font-weight: 800;
		line-height: 46px;
		white-space: nowrap;
	}

	.doc-header .nav .login-status .account-name{
		max-width: 132px;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.icon-top-login{
		flex: 0 0 36px;
	}

	.icon-top-login img,
	.doc-header .nav .login-status img{
		width: 36px !important;
		height: 36px !important;
	}

	.doc-header .nav .nav-w .nav-ul{
		display: flex;
		flex: 1 1 auto;
		flex-wrap: wrap;
		gap: 4px 10px;
		width: auto;
		min-width: 0;
		height: auto;
		margin: 0;
		padding: 0;
	}

	.doc-header .nav .nav-w .nav-ul li{
		float: none;
		height: auto;
		line-height: 1.4;
	}

	.doc-header .nav .nav-w .nav-ul li a{
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 46px;
		padding: 0 16px;
		border-radius: 999px;
		background: rgba(255,255,255,.08);
		font-size: 17px;
		font-weight: 800;
		line-height: 46px;
		white-space: nowrap;
	}

	.doc-header .nav .nav-w .top-small-search,
	.plant-archives-top-search{
		float: none;
		order: 3;
		flex: 1 1 100%;
		box-sizing: border-box;
		width: 100%;
		height: 48px;
		margin: 0;
		border-radius: 999px;
		overflow: hidden;
	}

	.doc-header .nav .nav-w .top-small-search input[type='text']{
		box-sizing: border-box;
		width: calc(100% - 48px);
		height: 48px;
		padding-left: 14px;
		font-size: 16px;
	}

	.doc-header .nav .nav-w .top-small-search .top-search-btn{
		width: 48px;
		height: 48px;
	}

	.homepage-body,
	.user-homepage-page .homepage-body,
	.user-maintenance-page .homepage-body,
	.user-profile-page .homepage-body{
		top: 0;
		display: block;
		min-height: 0;
		padding: 12px;
		overflow: visible;
	}

	.homepage-body .homepage-body-left,
	.homepage-body .homepage-body-right,
	.homepage-body .homepage-body-right-sidebar,
	.user-homepage-page .homepage-body .homepage-body-left,
	.user-homepage-page .homepage-body .homepage-body-right,
	.user-homepage-page .homepage-body .homepage-body-right-sidebar,
	.user-maintenance-page .homepage-body .homepage-body-left,
	.user-maintenance-page .homepage-body .homepage-body-right,
	.user-maintenance-page .homepage-body .homepage-body-right-sidebar,
	.user-profile-page .homepage-body .homepage-body-left,
	.user-profile-page .homepage-body .homepage-body-right,
	.user-profile-page .homepage-body .homepage-body-right-sidebar,
	.forum-body-left-sidebar{
		position: static;
		float: none;
		box-sizing: border-box;
		width: 100%;
		max-width: 100%;
		margin: 0 0 12px;
	}

	.homepage-body .homepage-body-margin,
	.user-homepage-page .homepage-body .homepage-body-margin,
	.user-maintenance-page .homepage-body .homepage-body-margin,
	.user-profile-page .homepage-body .homepage-body-margin{
		margin-left: 0;
	}

	.user-homepage-page .homepage-header,
	.user-maintenance-page .homepage-header,
	.user-profile-page .homepage-header{
		top: 0;
		height: auto;
		min-height: 0;
		border-radius: 0;
		box-shadow: none;
		background: #fff;
		overflow: visible;
	}

	.user-homepage-page .homepage-banner,
	.user-maintenance-page .homepage-banner,
	.user-profile-page .homepage-banner,
	.user-homepage-page .user-homepage-subtitle,
	.user-maintenance-page .user-homepage-subtitle,
	.user-profile-page .user-homepage-subtitle{
		display: none;
	}

	.user-homepage-page .user-logo-big,
	.user-maintenance-page .user-logo-big,
	.user-profile-page .user-logo-big{
		position: static;
		display: inline-flex;
		width: 42px;
		height: 42px;
		margin: 8px 0 8px 12px;
		border: 2px solid #fff;
		box-shadow: 0 6px 16px rgba(27,48,62,.14);
		vertical-align: middle;
	}

	.user-homepage-page .user-logo-big img,
	.user-maintenance-page .user-logo-big img,
	.user-profile-page .user-logo-big img{
		width: 38px;
		height: 38px;
		margin: 0;
	}

	.user-homepage-page .user-name,
	.user-maintenance-page .user-name,
	.user-profile-page .user-name{
		position: static;
		display: inline-flex;
		align-items: center;
		max-width: calc(100vw - 84px);
		min-height: 42px;
		margin: 8px 12px 8px 8px;
		color: #223747;
		font-size: 18px;
		font-weight: 900;
		line-height: 1.2;
		vertical-align: middle;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		text-shadow: none;
	}

	.user-homepage-page .homepage-nav,
	.user-maintenance-page .homepage-nav,
	.user-profile-page .homepage-nav{
		height: auto;
		min-height: 0;
		border: 0;
		border-top: 1px solid #edf2f4;
		border-bottom: 1px solid #dfe9ed;
		background: rgba(255,255,255,.98);
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.homepage-nav ul,
	.fourm-nav,
	.user-homepage-page .homepage-nav ul,
	.user-maintenance-page .homepage-nav ul,
	.user-profile-page .homepage-nav ul{
		display: flex;
		flex-wrap: nowrap;
		gap: 8px;
		width: max-content;
		min-width: 100%;
		height: auto;
		margin: 0;
		padding: 8px 10px;
	}

	.homepage-nav ul li,
	.fourm-nav li,
	.user-homepage-page .homepage-nav ul li,
	.user-maintenance-page .homepage-nav ul li,
	.user-profile-page .homepage-nav ul li{
		flex: 0 0 auto;
		float: none;
		width: auto;
		height: auto;
		margin: 0;
		line-height: 1;
	}

	.homepage-nav ul li a,
	.fourm-nav li a,
	.user-homepage-page .homepage-nav ul li a,
	.user-homepage-page .homepage-nav ul li a:link,
	.user-maintenance-page .homepage-nav ul li a,
	.user-maintenance-page .homepage-nav ul li a:link,
	.user-profile-page .homepage-nav ul li a,
	.user-profile-page .homepage-nav ul li a:link{
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 42px;
		padding: 0 14px;
		border-radius: 999px;
		background: #fff;
		font-size: 16px;
		font-weight: 800;
		line-height: 42px;
		white-space: nowrap;
		box-shadow: 0 5px 14px rgba(35,58,72,.08);
	}

	.hmbox,
	.hmtopic,
	.hmtopic-title,
	.box,
	.profile-editor-shell,
	.maintenance-hero{
		box-sizing: border-box;
		width: 100%;
		max-width: 100%;
	}

	.hmtopic-title{
		height: auto;
		min-height: 44px;
		padding: 10px 12px;
		line-height: 1.5;
	}

	.hmtopic-title-padding{
		float: none;
		width: 100%;
		line-height: 1.5;
	}

	.top-search,
	.top-search-box,
	.top-search-box input[type=text]{
		box-sizing: border-box;
		width: 100%;
	}

	.top-search{
		position: static;
		box-sizing: border-box;
		padding: 14px;
		background: #15212a;
	}

	.top-search-text{
		width: 100%;
		margin-bottom: 10px;
		font-size: 20px;
		line-height: 1.35;
		text-align: left;
	}

	.top-search-box{
		display: flex;
		height: 46px;
	}

	.top-search-box input[type=text]{
		flex: 1 1 auto;
		min-width: 0;
	}

	.top-search-box .top-search-btn{
		flex: 0 0 52px;
	}

	.main-article,
	.content-article,
	.search-result{
		box-sizing: border-box;
		width: 100%;
		max-width: 100%;
		margin: 0;
		padding: 12px;
	}

	.article-title{
		width: 100%;
		margin: 0 0 14px;
		padding: 0;
	}

	.article-title h1{
		font-size: 22px;
		line-height: 1.35;
	}

	.article-title p{
		font-size: 15px;
		line-height: 1.7;
	}

	.family{
		box-sizing: border-box;
		width: 100%;
		min-height: 0;
		margin: 0 0 14px;
		padding: 14px;
	}

	.family .family-name,
	.family-en-name{
		font-size: 18px;
		line-height: 1.4;
	}

	.family-description{
		font-size: 15px;
		line-height: 1.7;
	}

	.sort-doc .sort-nav{
		position: static;
		height: auto;
		padding: 8px 10px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.sort-nav ul{
		display: flex;
		flex-wrap: nowrap;
		gap: 8px;
		width: max-content;
		min-width: 100%;
		height: auto;
	}

	.sort-nav ul div{
		display: contents;
	}

	.sort-nav ul li{
		display: inline-flex;
		flex: 0 0 auto;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		min-height: 40px;
		margin: 0;
		padding: 0 14px;
		border-radius: 999px;
		font-size: 15px;
		line-height: 40px;
		white-space: nowrap;
	}

	.article-postion{
		box-sizing: border-box;
		width: 100%;
		margin: 0;
		padding: 10px 12px;
		font-size: 15px;
		line-height: 1.5;
	}

	.sequence{
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		width: 100%;
		height: auto;
		margin: 0 0 12px;
		padding: 10px;
	}

	.sequence .sequence-head,
	.sequence span{
		display: inline-flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		min-width: 40px;
		min-height: 40px;
		margin: 0;
		border-radius: 10px;
		font-size: 15px;
		line-height: 1;
	}

	.sequence-body,
	.sequence-body .sequence-item{
		box-sizing: border-box;
		width: 100%;
		max-width: 100%;
	}

	.search-result-item{
		box-sizing: border-box;
		width: 100%;
		margin: 0 0 14px;
	}

	.search-result-item .item-title .name,
	.search-result-item .item-title .filed-number{
		font-size: 16px;
		line-height: 1.45;
	}

	.content-doc{
		min-height: 100vh;
	}

	.plant-img-show,
	.plant-img-show .plant-img-cur,
	.plant-img-show .plant-img-rotation{
		box-sizing: border-box;
		width: 100%;
		max-width: 100%;
	}

	.plant-img-show .plant-img-cur-name .name{
		font-size: 18px;
		line-height: 1.4;
	}

	.content-article .content-article-left,
	.content-article .content-article-right{
		float: none;
		box-sizing: border-box;
		width: 100%;
		max-width: 100%;
		margin: 0;
	}

	.content-article .content-article-left .sp-title{
		font-size: 22px;
		line-height: 1.35;
	}

	.content-article .content-article-left .sp-row{
		display: block;
		height: auto;
		min-height: 42px;
		font-size: 15px;
		line-height: 1.6;
	}

	.modal-dialog,
	.user-plant-maintenance-page #archivesModal .modal-dialog,
	.user-plant-maintenance-page #formulaModal .modal-dialog,
	.plant-archives-edit-modal .modal-dialog{
		box-sizing: border-box;
		width: calc(100vw - 16px) !important;
		max-width: calc(100vw - 16px);
		margin: 8px auto;
	}

	.modal-content,
	.user-plant-maintenance-page #archivesModal .box-primary,
	.user-plant-maintenance-page #formulaModal .box-primary{
		max-height: calc(100vh - 16px);
		overflow-y: auto;
		border-radius: 16px;
	}

	.table-responsive,
	.box-body{
		max-width: 100%;
		overflow-x: auto;
	}

	body,
	input,
	select,
	textarea,
	button{
		font-size: 15px;
	}

	.form-control,
	input[type='text'],
	input[type='password'],
	input[type='number'],
	input[type='date'],
	input[type='email'],
	select,
	textarea{
		min-height: 42px;
		font-size: 15px;
	}

	input[type='checkbox'],
	input[type='radio']{
		width: 20px;
		height: 20px;
	}

	.btn,
	.btn-sm,
	.btn-xs,
	button,
	input[type='button'],
	input[type='submit'],
	.grey-btn,
	.maintenance-primary-btn,
	.plant-space-request-btn,
	#create_archives,
	.profile-save-btn,
	.auth-primary-button,
	.c_register_button_normal,
	.forum-sign-btn,
	.topic-tool-btn,
	.topic-cancel-btn,
	.topic-share-btn,
	.topic-like-btn,
	.reply-del-btn,
	.returnbtn a,
	.actionMenu,
	.album-del-btn,
	.album-restore-btn,
	.plant-maintenance-card-action,
	.plant-archives-card-action,
	.plant-archives-toolbar-toggle,
	.plant-archives-filter-toggle,
	.archives-filter-chip,
	.archives-sort-chip,
	.plant-group-chip,
	.plant-group-add,
	.plant-archives-maintenance-tab,
	.plant-picture-align-toggle,
	.plant-picture-auto-align,
	.plant-picture-reset-align,
	.genus-content-btn,
	.homepage-recommend .homepage-recommend-item .homepage-recommend-title .r-btn{
		box-sizing: border-box;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 40px;
		font-size: 15px;
		line-height: 1.2;
	}

	.btn-xs,
	.btn-sm{
		padding: 8px 12px;
	}

	.table > thead > tr > th,
	.table > tbody > tr > th,
	.table > tfoot > tr > th,
	.table > thead > tr > td,
	.table > tbody > tr > td,
	.table > tfoot > tr > td{
		padding: 10px 8px;
		font-size: 14px;
		line-height: 1.45;
	}

	.plant-archives-card-tags span,
	.plant-archives-card-stats span,
	.plant-archives-card-overlay-chip,
	.plant-card-group-badge,
	.plant-card-status-badge,
	.plant-maintenance-card-code,
	.tags div.tag,
	.tags a,
	.label,
	.badge{
		display: inline-flex;
		align-items: center;
		min-height: 32px;
		font-size: 14px;
		line-height: 1.2;
	}

	.hmbox h1,
	.box-title,
	.plant-archives-edit-section-title,
	.formula-editor-title,
	.profile-section-title{
		font-size: 17px;
		line-height: 1.35;
	}

	.forum-footer{
		position: static;
		height: auto;
		min-width: 0;
	}
}

@media (max-width: 520px){
	.doc-header .nav .nav-w .logo{
		flex-basis: 112px;
		width: 112px;
	}

	.doc-header .nav .nav-w .nav-ul{
		flex-basis: 100%;
		order: 2;
	}

	.homepage-body,
	.user-homepage-page .homepage-body,
	.user-maintenance-page .homepage-body,
	.user-profile-page .homepage-body{
		padding: 10px;
	}

	.maintenance-hero{
		padding: 16px;
	}

	.maintenance-hero h2{
		font-size: 22px;
		line-height: 1.2;
	}

	.maintenance-stat{
		flex: 1 1 calc(50% - 8px);
	}

	.user-maintenance-page #box-album .hmtopic-title,
	.user-maintenance-page #box-photo .hmtopic-title,
	.plant-archives-list-toolbar-status{
		display: flex;
		align-items: stretch;
		flex-direction: column;
		gap: 10px;
	}

	.user-maintenance-page .photoalbum-search-box{
		width: 100%;
	}

	.plant-archives-maintenance-tabs,
	.plant-group-toolbar{
		width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.plant-archives-list-status-desc{
		text-align: left;
	}
}

@media (max-width: 768px){
	.user-plant-maintenance-page .doc-header.forum-doc{
		position: sticky;
		top: 0;
		height: auto;
		min-height: 48px;
		z-index: 1000;
	}

	.user-plant-maintenance-page .doc-header .nav{
		padding: 6px 10px;
	}

	.user-plant-maintenance-page .doc-header .nav .nav-w{
		flex-wrap: nowrap;
		gap: 6px;
	}

	.user-plant-maintenance-page .doc-header .nav .nav-w .logo{
		flex: 0 0 92px;
		width: 92px;
		height: 34px;
	}

	.user-plant-maintenance-page .doc-header .nav .nav-item{
		display: flex;
		flex: 1 1 auto;
		min-width: 0;
		justify-content: flex-start;
		gap: 6px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.user-plant-maintenance-page .doc-header .nav .nav-item a{
		flex: 0 0 auto;
		min-height: 44px;
		height: 44px;
		line-height: 44px;
		padding: 0 14px;
		font-size: 16px;
		white-space: nowrap;
	}

	.user-plant-maintenance-page .doc-header .nav .nav-item a:before,
	.user-plant-maintenance-page .doc-header .nav .nav-item a:hover:before{
		display: none;
	}

	.user-plant-maintenance-page .doc-header .nav .login-status{
		display: flex;
		flex: 0 0 auto;
		order: 0;
		gap: 4px;
	}

	.user-plant-maintenance-page .doc-header .nav .login-status .icon-top-login{
		flex: 0 0 32px;
		width: 32px;
		height: 32px;
	}

	.user-plant-maintenance-page .doc-header .nav .login-status .icon-top-login img{
		width: 32px;
		height: 32px;
	}

	.user-plant-maintenance-page .doc-header .nav .login-status a,
	.user-plant-maintenance-page .doc-header .nav .login-status a:link,
	.user-plant-maintenance-page .doc-header .nav .login-status .account-name{
		min-height: 40px;
		height: 40px;
		max-width: 96px;
		padding: 0 10px;
		font-size: 15px;
		line-height: 40px;
	}

	.user-plant-maintenance-page .homepage-header{
		top: 0;
		height: auto;
		border-radius: 0;
		box-shadow: none;
		background: #fff;
		overflow: visible;
	}

	.user-plant-maintenance-page .homepage-banner,
	.user-plant-maintenance-page .user-logo-big,
	.user-plant-maintenance-page .user-name,
	.user-plant-maintenance-page .user-homepage-subtitle{
		display: none;
	}

	.user-plant-maintenance-page .homepage-nav{
		height: auto;
		min-height: 42px;
		border: 0;
		border-bottom: 1px solid #e3edf0;
		background: rgba(255,255,255,.96);
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.user-plant-maintenance-page .homepage-nav ul{
		display: flex;
		flex-wrap: nowrap;
		gap: 6px;
		width: max-content;
		min-width: 100%;
		height: auto;
		margin: 0;
		padding: 6px 10px;
	}

	.user-plant-maintenance-page .homepage-nav ul li{
		flex: 0 0 auto;
		height: auto;
		line-height: 1;
	}

	.user-plant-maintenance-page .homepage-nav ul li a,
	.user-plant-maintenance-page .homepage-nav ul li a:link{
		min-height: 40px;
		padding: 0 14px;
		font-size: 15px;
		line-height: 40px;
	}

	.user-plant-maintenance-page .homepage-body{
		top: 0;
		padding-top: 10px;
	}

	.user-plant-maintenance-page .homepage-body-left,
	.user-plant-maintenance-page .homepage-body-right-sidebar{
		display: none !important;
	}

	.user-plant-maintenance-page .maintenance-hero{
		gap: 10px;
		padding: 12px;
		border-radius: 14px;
	}

	.user-plant-maintenance-page .maintenance-kicker,
	.user-plant-maintenance-page .maintenance-hero p{
		display: none;
	}

	.user-plant-maintenance-page .maintenance-hero h2{
		margin: 0;
		font-size: 18px;
		line-height: 1.25;
	}

	.user-plant-maintenance-page .maintenance-hero-actions{
		flex-wrap: wrap;
		width: 100%;
	}

	.user-plant-maintenance-page .maintenance-stat{
		min-width: 0;
		padding: 8px 10px;
		border-radius: 12px;
	}

	.user-plant-maintenance-page .maintenance-stat strong{
		font-size: 20px;
	}

	.user-plant-maintenance-page .plant-space-request-btn,
	.user-plant-maintenance-page #create_archives{
		min-height: 44px;
		font-size: 15px;
	}

	.user-plant-maintenance-page .plant-group-toolbar{
		display: flex;
		gap: 8px;
		padding: 0 14px 12px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.user-plant-maintenance-page .plant-group-chip,
	.user-plant-maintenance-page .plant-group-add,
	.user-plant-maintenance-page .plant-archives-maintenance-tab{
		flex: 0 0 auto;
		min-height: 40px;
		font-size: 15px;
		white-space: nowrap;
	}

	.user-plant-maintenance-page #main{
		margin-left: 0;
		margin-right: 0;
	}

	.user-plant-maintenance-page .album-row{
		padding: 12px;
		gap: 14px;
	}

	.user-plant-maintenance-page #main #gallery .gallery-item{
		border-radius: 18px;
		box-shadow: 0 10px 26px rgba(54,78,92,.08);
	}

	.user-plant-maintenance-page #main #gallery .gallery-item:hover{
		transform: none;
	}

	.user-plant-maintenance-page #main #gallery .gallery-item .album{
		border-radius: 18px 18px 0 0;
	}

	.user-plant-maintenance-page .plant-maintenance-card-body{
		gap: 9px 10px;
	}

	.user-plant-maintenance-page .plant-maintenance-card-action{
		min-height: 42px;
		padding: 0 16px;
		font-size: 15px;
	}

	.user-plant-maintenance-page #archivesModal{
		padding: 0 !important;
	}

	.user-plant-maintenance-page #archivesModal .modal-dialog{
		width: 100vw !important;
		max-width: 100vw;
		height: 100vh;
		max-height: 100vh;
		margin: 0;
	}

	.user-plant-maintenance-page #archivesModal .box-primary{
		height: 100vh;
		max-height: 100vh;
		border-radius: 0;
	}

	.user-plant-maintenance-page #archivesModal .plant-archives-edit-header{
		align-items: flex-start;
		padding: 10px 12px;
	}

	.user-plant-maintenance-page #archivesModal .plant-archives-edit-header h3{
		font-size: 16px;
		line-height: 1.25;
	}

	.plant-archives-edit-status{
		align-items: flex-start;
		flex-direction: column;
		gap: 4px;
		padding: 8px 12px;
	}

	.plant-archives-edit-status span{
		display: none;
	}

	.user-plant-maintenance-page #archivesModal .plant-archives-edit-body{
		padding: 10px;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.user-plant-maintenance-page #archivesModal .box-primary{
		overflow: hidden;
	}

	.user-plant-maintenance-page #archivesModal .select2-container{
		display: block;
		width: 100% !important;
	}

	.plant-archives-edit-form-panel,
	.plant-archives-edit-photo-panel{
		padding-left: 0;
		padding-right: 0;
	}

	.plant-archives-edit-form-panel form{
		padding: 12px;
		border-radius: 14px;
	}

	.plant-archives-new-record .plant-archives-edit-form-panel{
		width: 100%;
	}

	.plant-archives-new-record .plant-archives-edit-photo-panel{
		display: none;
	}

	.user-plant-maintenance-page #archivesModal .form-group{
		margin-bottom: 10px;
	}

	.user-plant-maintenance-page #archivesModal textarea{
		min-height: 76px;
	}

	.plant-archives-photo-toolbar{
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		padding: 10px;
		border-radius: 14px;
	}

	.plant-archives-photo-toolbar p,
	.plant-picture-editor-meta{
		display: none;
	}

	.plant-archives-photo-actions{
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		width: 100%;
	}

	.plant-archives-photo-actions .btn{
		width: 100%;
		min-height: 42px;
		padding-left: 8px;
		padding-right: 8px;
		font-size: 15px;
	}

	.user-plant-maintenance-page #archivesModal #p-edit{
		padding: 10px;
		border-radius: 16px;
		max-height: none !important;
		overflow: visible !important;
		-webkit-overflow-scrolling: auto;
	}

	.user-plant-maintenance-page #archivesModal .row-pic{
		padding: 10px;
		border-radius: 16px;
	}

	.user-plant-maintenance-page #archivesModal .plant-picture-edit-card{
		display: grid;
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.user-plant-maintenance-page #archivesModal .plant-picture-select,
	.user-plant-maintenance-page #archivesModal .plant-picture-preview,
	.user-plant-maintenance-page #archivesModal .plant-picture-inline-editor{
		width: 100%;
		padding-left: 0;
		padding-right: 0;
	}

	.user-plant-maintenance-page #archivesModal .plant-picture-select{
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.user-plant-maintenance-page #archivesModal .plant-picture-check{
		flex: 0 0 auto;
		min-height: 40px;
		margin-bottom: 0;
		padding: 8px 12px;
		font-size: 15px;
	}

	.user-plant-maintenance-page #archivesModal .row-pic .plant-picture-preview-image{
		height: auto;
		aspect-ratio: 4 / 3;
		object-fit: cover;
	}

	.plant-picture-inline-fields{
		gap: 9px;
		width: 100%;
	}

	.plant-picture-inline-row,
	.plant-picture-inline-row-top,
	.plant-picture-inline-row-bottom{
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
		align-items: stretch;
	}

	.plant-picture-mini-field,
	.plant-picture-mini-field-size,
	.plant-picture-mini-field-date,
	.plant-picture-mini-field-note,
	.plant-picture-hide,
	.plant-picture-align-compact{
		flex: none;
		min-width: 0;
		width: 100%;
		margin: 0;
	}

	.plant-picture-mini-field-note,
	.plant-picture-align-compact{
		grid-column: 1 / -1;
	}

	.plant-picture-hide{
		display: flex;
		align-items: center;
	}

	.plant-picture-visibility-toggle,
	.plant-picture-align-compact{
		justify-content: space-between;
		box-sizing: border-box;
		min-height: 42px;
		border-radius: 14px;
		font-size: 15px;
	}

	.plant-picture-align-expand{
		grid-template-columns: 1fr;
		margin-top: 4px;
		padding: 10px;
	}

	.plant-picture-align-stage{
		height: clamp(180px, 58vw, 260px);
	}

	.plant-picture-align-tools{
		padding: 10px;
	}

	.plant-picture-align-slider{
		grid-template-columns: 34px minmax(0, 1fr) 48px;
		gap: 7px;
	}
}

@media (max-width: 420px){
	.user-plant-maintenance-page .maintenance-stat{
		flex: 1 1 100%;
	}

	.user-plant-maintenance-page .plant-space-request-btn,
	.user-plant-maintenance-page #create_archives{
		width: 100%;
	}

	.user-plant-maintenance-page .plant-maintenance-card-title-row{
		align-items: flex-start;
		flex-direction: column;
	}

	.user-plant-maintenance-page .plant-maintenance-card-code{
		max-width: 100%;
	}

	.plant-archives-photo-actions,
	.plant-picture-inline-row,
	.plant-picture-inline-row-top,
	.plant-picture-inline-row-bottom{
		grid-template-columns: 1fr;
	}
}

@media (max-width: 768px){
	.plant-growth-page{
		background: #101915;
	}

	.plant-growth-topbar{
		position: fixed;
		align-items: center;
		flex-direction: row;
		padding: 10px 12px;
		background: linear-gradient(180deg, rgba(7,12,10,.88), rgba(7,12,10,.38), transparent);
	}

	.plant-growth-brand,
	.plant-growth-brand:link,
	.plant-growth-brand:hover{
		font-size: 16px;
		white-space: nowrap;
	}

	.plant-growth-topbar-actions{
		gap: 8px;
		min-width: 0;
	}

	.plant-growth-owner{
		display: none;
	}

	.plant-growth-topbar-actions a{
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 40px;
		padding: 0 12px;
		border-radius: 999px;
		background: rgba(255,255,255,.14);
		color: #fff !important;
		font-size: 15px;
		font-weight: 800;
	}

	.plant-growth-stage{
		min-height: 72vh;
		height: 72vh;
	}

	.plant-growth-main-image,
	.plant-growth-main-image .plant-growth-aligned-photo{
		min-height: 72vh;
		height: 72vh;
	}

	.plant-growth-main-image{
		padding-right: 0;
		padding-top: 44px;
		padding-bottom: 58px;
	}

	.plant-growth-main-image img,
	.plant-growth-aligned-photo img,
	.plant-growth-main-image .plant-growth-aligned-photo img{
		max-height: 72vh;
	}

	.plant-growth-stage-header{
		top: 58px;
		left: 14px;
		right: 98px;
	}

	.plant-growth-stage-header h1{
		display: -webkit-box;
		max-height: 58px;
		overflow: hidden;
		font-size: clamp(22px, 8vw, 32px);
		line-height: 1.15;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.plant-growth-stage-header .plant-growth-kicker{
		font-size: 10px;
		letter-spacing: 1.2px;
	}

	.plant-growth-view-tools{
		top: 58px;
		right: 12px;
		gap: 4px;
		padding: 4px;
	}

	.plant-growth-zoom-control,
	.plant-growth-zoom-reset{
		min-width: 32px;
		height: 32px;
		line-height: 32px;
	}

	.plant-growth-zoom-reset{
		min-width: 48px;
		padding: 0 8px;
	}

	.plant-growth-arrow{
		width: 34px;
		height: 52px;
		margin-top: -26px;
		font-size: 30px;
		background: rgba(255,255,255,.16);
	}

	.plant-growth-prev{
		left: 8px;
	}

	.plant-growth-next{
		right: 8px;
	}

	.plant-growth-photo-caption{
		left: 12px;
		right: 12px;
		bottom: 14px;
		align-items: flex-start;
		gap: 4px;
		font-size: 12px;
	}

	.plant-growth-photo-caption strong{
		font-size: 14px;
	}

	#plant-growth-photo-size{
		font-size: 12px;
	}

	.plant-growth-zoomed .plant-growth-stage-card{
		padding-bottom: 54px;
		background: #101915;
		overflow: visible;
	}

	.plant-growth-zoomed .plant-growth-photo-caption{
		left: 12px;
		right: 12px;
		bottom: 8px;
		box-sizing: border-box;
		width: auto;
		min-height: 38px;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		padding: 7px 10px;
		border-radius: 12px;
		background: rgba(16,25,21,.96);
		text-shadow: none;
	}

	.plant-growth-zoomed .plant-growth-photo-date-wrap{
		display: block;
	}

	.plant-growth-zoomed .plant-growth-photo-caption strong{
		font-size: 13px;
	}

	.plant-growth-zoomed #plant-growth-photo-size{
		font-size: 12px;
	}

	.plant-growth-info-card{
		position: static;
		box-sizing: border-box;
		width: auto;
		max-height: none;
		margin: 0;
		border-radius: 0;
		padding: 14px;
		background: #f7faf8;
		color: #203241;
		opacity: 1;
		box-shadow: none;
		backdrop-filter: none;
	}

	.plant-growth-info-card h2,
	.plant-growth-latin,
	.plant-growth-info-label,
	.plant-growth-metrics strong,
	.plant-growth-type-row strong,
	.plant-growth-insights strong,
	.plant-growth-note p,
	.plant-growth-current-note p{
		color: #203241;
		text-shadow: none;
	}

	.plant-growth-info-label,
	.plant-growth-metrics span,
	.plant-growth-type-row span,
	.plant-growth-insights span,
	.plant-growth-note span,
	.plant-growth-current-note span{
		color: #5d8b72;
	}

	.plant-growth-latin{
		color: #667986;
	}

	.plant-growth-copy-link{
		background: #203241;
	}

	.plant-growth-metrics,
	.plant-growth-insights{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.plant-growth-metrics div,
	.plant-growth-type-row,
	.plant-growth-insights div,
	.plant-growth-note,
	.plant-growth-current-note,
	.plant-growth-preview-card{
		background: #fff;
		border: 1px solid #e3edf0;
	}

	.plant-growth-preview-head strong,
	.plant-growth-preview-item b{
		color: #203241;
	}

	.plant-growth-preview-head span,
	.plant-growth-preview-item b span,
	.plant-growth-preview-head a{
		color: #5d8b72;
	}

	.plant-growth-preview-compare{
		grid-template-columns: minmax(0, 1fr) 58px minmax(0, 1fr);
	}

	.plant-growth-preview-bridge{
		color: #315268;
		text-shadow: none;
		font-size: 12px;
	}

	.plant-growth-timeline-card{
		position: static;
		width: auto;
		margin: 0;
		border-radius: 0;
		padding: 14px;
		transform: none;
		background: #121d18;
		box-shadow: none;
	}

	.plant-growth-timeline-card:before{
		display: none;
	}

	.plant-growth-timeline-card:hover{
		transform: none;
	}

	.plant-growth-section-title{
		align-items: flex-start;
		flex-direction: column;
		gap: 6px;
		margin-bottom: 10px;
	}

	.plant-growth-section-title h2{
		font-size: 20px;
	}

	.plant-growth-section-title p{
		font-size: 13px;
	}

	.plant-growth-timeline{
		gap: 10px;
		padding-bottom: 6px;
	}

	.plant-growth-thumb{
		flex-basis: 132px;
		padding: 7px;
	}

	.plant-growth-thumb-image{
		height: 84px;
	}

	.plant-growth-compare-card{
		box-sizing: border-box;
		margin: 0;
		border-radius: 0;
		padding: 14px;
	}

	.plant-growth-story-grid,
	.plant-growth-compare-stage{
		grid-template-columns: 1fr;
	}

	.plant-growth-story-facts,
	.plant-growth-story-measures{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.plant-growth-story-report strong{
		font-size: 20px;
	}

	.plant-growth-compare-card-item{
		padding: 12px;
	}

	.plant-growth-compare-bridge{
		min-height: 48px;
	}

	.plant-growth-film-viewer{
		padding: 10px;
	}

	.plant-growth-film-viewer-card{
		width: 100%;
		max-height: 86vh;
		border-radius: 18px;
	}

	.plant-growth-film-viewer-image-wrap{
		height: calc(86vh - 72px);
	}

	.plant-growth-film-viewer-caption{
		align-items: flex-start;
		flex-direction: column;
		padding: 12px 14px;
	}
}

@media (max-width: 420px){
	.plant-growth-stage{
		min-height: 68vh;
		height: 68vh;
	}

	.plant-growth-main-image,
	.plant-growth-main-image .plant-growth-aligned-photo{
		min-height: 68vh;
		height: 68vh;
	}

	.plant-growth-main-image img,
	.plant-growth-aligned-photo img,
	.plant-growth-main-image .plant-growth-aligned-photo img{
		max-height: 68vh;
	}

	.plant-growth-stage-header{
		right: 12px;
		top: 104px;
	}

	.plant-growth-view-tools{
		top: 58px;
		left: 12px;
		right: auto;
	}

	.plant-growth-metrics,
	.plant-growth-insights,
	.plant-growth-story-facts,
	.plant-growth-story-measures{
		grid-template-columns: 1fr;
	}

	.plant-growth-preview-compare{
		grid-template-columns: 1fr;
	}
}

/* Touch-device fallback: WeChat and older mobile webviews can miss width-based media rules. */
@media (hover: none), (pointer: coarse), (max-device-width: 820px){
	body.user-homepage-page .doc-header.forum-doc,
	body.user-maintenance-page .doc-header.forum-doc,
	body.user-profile-page .doc-header.forum-doc{
		position: sticky !important;
		top: 0 !important;
		height: auto !important;
		min-height: 0 !important;
		width: 100% !important;
		min-width: 0 !important;
		z-index: 1000 !important;
	}

	body.user-homepage-page .doc-header .nav,
	body.user-maintenance-page .doc-header .nav,
	body.user-profile-page .doc-header .nav{
		position: relative !important;
		height: auto !important;
		min-height: 0 !important;
		width: 100% !important;
		min-width: 0 !important;
		padding: 6px 10px !important;
		background: rgba(15,24,30,.96) !important;
	}

	body.user-homepage-page .doc-header .nav .nav-w,
	body.user-maintenance-page .doc-header .nav .nav-w,
	body.user-profile-page .doc-header .nav .nav-w{
		display: flex !important;
		align-items: center !important;
		flex-wrap: nowrap !important;
		gap: 6px !important;
		width: 100% !important;
		height: auto !important;
		margin: 0 !important;
	}

	body.user-homepage-page .doc-header .nav .nav-w .logo,
	body.user-maintenance-page .doc-header .nav .nav-w .logo,
	body.user-profile-page .doc-header .nav .nav-w .logo{
		float: none !important;
		flex: 0 0 92px !important;
		width: 92px !important;
		height: 36px !important;
		background-size: contain !important;
	}

	body.user-homepage-page .doc-header .nav .nav-item,
	body.user-maintenance-page .doc-header .nav .nav-item,
	body.user-profile-page .doc-header .nav .nav-item{
		display: flex !important;
		flex: 1 1 auto !important;
		align-items: center !important;
		gap: 6px !important;
		min-width: 0 !important;
		height: auto !important;
		margin: 0 !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch !important;
	}

	body.user-homepage-page .doc-header .nav .nav-item a,
	body.user-homepage-page .doc-header .nav .nav-item a:link,
	body.user-maintenance-page .doc-header .nav .nav-item a,
	body.user-maintenance-page .doc-header .nav .nav-item a:link,
	body.user-profile-page .doc-header .nav .nav-item a,
	body.user-profile-page .doc-header .nav .nav-item a:link{
		display: inline-flex !important;
		flex: 0 0 auto !important;
		align-items: center !important;
		justify-content: center !important;
		height: 42px !important;
		min-height: 42px !important;
		padding: 0 12px !important;
		border-radius: 999px !important;
		background: rgba(255,255,255,.10) !important;
		color: #fff !important;
		font-size: 16px !important;
		font-weight: 800 !important;
		line-height: 42px !important;
		white-space: nowrap !important;
	}

	body.user-homepage-page .doc-header .nav .login-status,
	body.user-maintenance-page .doc-header .nav .login-status,
	body.user-profile-page .doc-header .nav .login-status{
		display: none !important;
	}

	body.user-homepage-page .homepage-header,
	body.user-maintenance-page .homepage-header,
	body.user-profile-page .homepage-header{
		top: 0 !important;
		height: auto !important;
		min-height: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		background: #fff !important;
		overflow: visible !important;
	}

	body.user-homepage-page .homepage-banner,
	body.user-maintenance-page .homepage-banner,
	body.user-profile-page .homepage-banner,
	body.user-homepage-page .user-logo-big,
	body.user-maintenance-page .user-logo-big,
	body.user-profile-page .user-logo-big,
	body.user-homepage-page .user-name,
	body.user-maintenance-page .user-name,
	body.user-profile-page .user-name,
	body.user-homepage-page .user-homepage-subtitle,
	body.user-maintenance-page .user-homepage-subtitle,
	body.user-profile-page .user-homepage-subtitle{
		display: none !important;
	}

	body.user-homepage-page .homepage-nav,
	body.user-maintenance-page .homepage-nav,
	body.user-profile-page .homepage-nav{
		height: auto !important;
		min-height: 0 !important;
		border: 0 !important;
		border-bottom: 1px solid #dfe9ed !important;
		background: rgba(255,255,255,.98) !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch !important;
	}

	body.user-homepage-page .homepage-nav ul,
	body.user-maintenance-page .homepage-nav ul,
	body.user-profile-page .homepage-nav ul{
		display: flex !important;
		flex-wrap: nowrap !important;
		gap: 8px !important;
		width: max-content !important;
		min-width: 100% !important;
		height: auto !important;
		margin: 0 !important;
		padding: 8px 10px !important;
	}

	body.user-homepage-page .homepage-nav ul li,
	body.user-maintenance-page .homepage-nav ul li,
	body.user-profile-page .homepage-nav ul li{
		flex: 0 0 auto !important;
		float: none !important;
		width: auto !important;
		height: auto !important;
		margin: 0 !important;
		line-height: 1 !important;
	}

	body.user-homepage-page .homepage-nav ul li a,
	body.user-homepage-page .homepage-nav ul li a:link,
	body.user-maintenance-page .homepage-nav ul li a,
	body.user-maintenance-page .homepage-nav ul li a:link,
	body.user-profile-page .homepage-nav ul li a,
	body.user-profile-page .homepage-nav ul li a:link{
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		min-height: 42px !important;
		padding: 0 14px !important;
		border-radius: 999px !important;
		background: #fff !important;
		color: #607080 !important;
		font-size: 16px !important;
		font-weight: 800 !important;
		line-height: 42px !important;
		white-space: nowrap !important;
		box-shadow: 0 5px 14px rgba(35,58,72,.08) !important;
	}

	body.user-homepage-page .homepage-body,
	body.user-maintenance-page .homepage-body,
	body.user-profile-page .homepage-body{
		top: 0 !important;
		padding-top: 10px !important;
	}
}