html {
	scroll-behavior: smooth;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Oxygen-Sans, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", "Source Sans Pro", sans-serif;
    font-size: 16px;
    color: #212121;
    line-height: 1.15;
    margin: 0;
    background-color: #fafaf5;
    min-width: 300px;
}

h1 {
	font-size: 2.7rem;
}

h2 {
	font-size: 1.8rem;
}

@font-face {
  font-family: 'OpenSans-Regular';
  src: url('/assets/fonts/opensans/OpenSans-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'OpenSans-Bold';
  src: url('/assets/fonts/opensans/OpenSans-Bold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

.align-center {
	text-align: center;
}

.border-top {
    border-top: 1px solid #dee2e6 !important;
}

.search-container .el-input > input {
    border-radius: 8px 0 0 8px;
    height: 100%;
    font-size: 16px;
}

.search-container button {
    border-radius: 0 8px 8px 0;
    font-size: 14px;
    font-weight: 500;
}

.display-flex {
    display: flex;
}

.el-button--primary {
    background-color: #0d7544 !important;
    border-color: #0d7544 !important;
}

.el-button--primary:hover {
    background: #005537 !important;
    border-color: #005537 !important;
    color: #FFF !important;
}

.search-container .el-input__inner {
    border: 2px solid #c4c7ce !important;
    border-right: none !important;
}

.search-container .el-input__inner:focus {
    border-color: #005537 !important;
    border-right: none !important;
}

.search-history {
	position: absolute;
	top: 40px;
	background-color: white;
	width: calc(100% - 2px);
	border: 2px solid #005537;
	border-top: none;
	border-radius: 0px 0px 8px 8px;
	z-index: 401;
}

.search-history-item {
	height: 35px;
	display: flex;
	align-items: center;
	cursor: pointer;
	padding-left: 16px;
	padding-right: 16px;
}

.search-history-list-container {
	padding-bottom: 5px; 
	position: relative;
}

.search-history-list-container:first-child {
	margin-top: 10px;
}

.search-history-list-container::after {
	content: '';
	position: absolute;
	top: -8px;
	left: 12px;
	right: 12px;
	height: 2px;
	background-color: #f5f5f6;
	margin-bottom: 10px;
}

.search-history-item:hover {
	background-color: #f5f5f6;
}

.search-hitory-close {
	display: flex;
    justify-content: flex-end;
    padding-right: 10px;
    padding-bottom: 8px;
}

.search-hitory-close > div {
	font-size: 14px;
    color: gray;
    cursor: pointer;
}

.search-hitory-close > div:hover {
	color: #3871dc;
}

.unstyled-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.unstyled-list > li {
    display: list-item;
    margin-bottom: 1em;
}

.unstyled-list > li:last-child {
	margin-bottom: 0;
}

.box-shadow {
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 0 1px rgba(0, 0, 0, .08);
}

.b-radius {
    border-radius: 2px;
}

.b-light {
    border-color: #f1f1f1;
}

.b-top {
    border-top: solid 1px #d6d7d9;
}

.f-lh-135 {
    line-height: 1.35;
}

.f-0875 {
    font-size: .875em;
}

.f-medium {
	font-weight: 500;
}

.f-1125 {
    font-size: 1.125em;
}

.mt-20 {
	margin-top: 20px;
}

.mt-4 {
    margin-top: 2rem;
}

.ml-5 {
	margin-left: 5rem;
}

.ml-20 {
	margin-left: 20rem;
}

.ml-16 {
	margin-left: 16rem;
}

.width-100 {
    width: 100%;
}

.flex {
	display: flex;
}

.flex-between {
	display: flex;
	justify-content: space-between;
}

.flex-center {
	display: flex;
	align-items: center;
}

.flex-stretch {
	display: flex;
	align-items: stretch;
}

.flex-1 {
	flex: 1;
}

.flex-column {
	display: flex;
	flex-direction: column;
}

.gap-6 {
	gap: 6px;
}

.gap-10 {
	gap: 10px;
}

.gap-20 {
	gap: 20px;
}

.gap-30 {
    gap: 30px;
}

.line-height-1_5 {
    line-height: 1.5;
}

.justify-content-center {
	display: flex;
	justify-content: center;
}

.flex-nowrap {
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}

.flex-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}

.flex-grow-1 {
    -webkit-box-flex: 1;
    flex-grow: 1;
}

.inline-block {
    display: inline-block;
}

.p-xsm-bottom {
    padding-bottom: .1em;
}

.p-xsm-top {
    padding-top: .1em;
}

.p-sm-bottom {
    padding-bottom: .5em;
}
.p-sm-top {
    padding-top: .5em;
}

.p-l-right {
    padding-right: 2em;
}

.p-md-rectangle {
    padding: .5em 1em;
}

.p-md-left {
    padding-left: 1em;
    text-align: left;
}

a {
    cursor: pointer;
    color: #0071bc;
    text-decoration: none;
}

a:visited {
    color: #4c2c92;
    text-decoration: none;
}

.el-btn-plain {
	color: #005537 !important; 
	border-color: #005537 !important;
	display: flex;
    align-items: center;
}

.el-btn-plain:hover {
	border-color: #065037 !important;
	background-color: #065037 !important;
    color: white;
}

.el-btn-plain:hover path {
	fill: white;
}

.app-wrapper {
    padding-bottom: 10rem;
    padding-top: 2rem;
    margin: 3rem;
}

.img-toolbar {
	background-color: rgb(229 231 235);
    font-size: .875rem;
    line-height: 1.25rem;
    padding: .5rem .5rem;
    display: flex;
    justify-content: flex-end;
}

.img-content {
	position: relative;
	background-color: white;
	width: 100%;
	height: 350px;
	overflow: hidden;
}

.btn-tool {
	position: absolute;
	padding: 6px 8px;
}

.btn-tool:hover {
	background-color: #eeeeef;
	border-color: rgba(36, 41, 46, 0.12);
}

.gray-border {
	border: 1px solid rgb(209, 213, 219);
}

.icon-search::before {
	content: '';
	display: inline-block;
	width: 20px;
	height: 20px;
	background-image: url('/icon/icon-search.svg');
	background-size: cover;
	margin-right: 8px;
}

.icon-search2::before {
	content: '';
	display: inline-block;
	width: 18px;
	height: 18px;
	background-image: url('/icon/icon-search2.svg');
	background-size: cover;
	margin-right: 8px;
}

.icon-download2::before {
	content: '';
	display: inline-block;
	width: 16px;
	height: 18px;
	background-image: url('/icon/icon-download2.svg');
	background-size: cover;
	margin-right: 8px;
}

.icon-reset::before {
	content: '';
	display: inline-block;
	width: 16px;
	height: 16px;
	background-image: url('/icon/icon-reset.svg');
	background-size: cover;
	margin-right: 8px;
}

.icon-zoomin::before {
	content: '';
	display: inline-block;
	width: 20px;
	height: 20px;
	background-image: url('/icon/icon-zoomin.svg');
	background-size: cover;
}

.icon-zoomout::before {
	content: '';
	display: inline-block;
	width: 20px;
	height: 20px;
	background-image: url('/icon/icon-zoomout.svg');
	background-size: cover;
}

.icon-plus::before {
	content: '';
	display: inline-block;
	width: 16px;
	height: 16px;
	background-image: url('/icon/icon-plus.svg');
	background-size: cover;
	margin-right: 8px;
}

.icon-pubchem {
	height: 25px;
	width: 25px;
	background-image: url('/icon/icon-pubchem.svg');
	background-size: cover;
	margin-right: 10px;
}

.icon-lotus {
	height: 25px;
	width: 25px;
	background-image: url('/icon/icon-lotus.svg');
	background-size: cover;
	margin-right: 10px;
}

.icon-pathway {
	width: 25px;
	height: 25px;
	background-image: url('/icon/icon-pathway.svg');
	background-size: cover;
	margin-right: 10px;
}

.icon-chemformula {
	width: 22px;
	height: 22px;
	background-image: url('/icon/icon-chemformula.svg');
	background-size: cover;
	margin-right: 10px;
}

.icon-plant {
	width: 24px;
	height: 24px;
	background-image: url('/icon/icon-plant.svg');
	background-size: cover;
	margin-right: 10px;
}

.icon-classification {
	width: 24px;
	height: 24px;
	background-image: url('/icon/icon-classification.svg');
	background-size: cover;
	margin-right: 10px;
}

.icon-list {
	width: 22px;
	height: 22px;
	background-image: url('/icon/icon-list.svg');
	background-size: cover;
	margin-right: 10px;
}

.highlight {
	background-color: rgba(255, 241, 210, 1); 
	border-bottom: 2px solid #fad980; 
	padding: 0 1px;
}

.tips {
	color: white;
	padding: 5px 10px;
	border-radius: 5px;
	border: 1px solid white;
	cursor: pointer;
	display: flex;
    align-items: center;
    background-color: #1a963e;
}

.tips:hover {
	background-color: #2fc240;
}

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    transition: all .3s;
    z-index: 99;
    background-color: #ffffff1a;
}

.header {
	display: flex;
	align-items: center;
	height: 60px;
    max-width: 1080px;
    margin: 0 auto;
    font-family: OpenSans-Regular;
}

.navbar-light {
	background-color: white;
	box-shadow: 0 2px 8px 0 #00000014;
}

.nav-link {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    min-width: 120px;
    line-height: 60px;
    padding: 0;
    border: none;
    font-size: 20px;
    cursor: pointer;
}

.nav-link-submenu {
    display: flex;
    align-items: center;
    height: 42px;
    line-height: 42px;
    padding: 0;
    border: none;
    font-size: 16px;
    cursor: pointer;
    color: white !important;
}

.el-menu--horizontal .el-menu .el-menu-item {
	height: 42px;
	line-height: 42px;
}

.nav-link-submenu:hover {
	color: #005537 !important;
}

.nav-link-logo img {
  height: 26px;
  margin-right: 30px;
  transition: transform 0.3s ease;
}

.nav-link:hover {
	font-weight: 600;
}

.nav-link-active {
	box-shadow: inset 0 -3px 0 0 #fff;
    font-weight: 600;
}

.nav-link-active-light {
	box-shadow: inset 0 -3px 0 0 #005537;
	font-weight: 600;
}

.nav-link-submenu-active {
	color: lightyellow !important;
}

.submenu {
	position: absolute;
	width: 180px;
	top: 60px;
	left: 0px;
	box-shadow: rgba(0, 0, 0, 0.176) 0px 6px 12px;
}

.submenu-item {
	padding: 10px 15px;
    background-color: white;
    color: #005537;
    font-size: 14px;
    line-height: 20px;
}

.submenu-item:hover {
	background-color: #e4e5e6;
}

.footer {
	background-image: url('/assets/image/footer_bg.jpg');
	background-size: cover;
	width: 100%;
	min-height: 120px;
	margin-top: auto;
	margin-left: auto;
	margin-right: auto;
	color: white;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-top: 20px;
	padding-bottom: 10px;
}

/* New styles for footer content container */
.footer .justify-content-center {
    width: 100%;
    max-width: 1200px;
    padding: 0 40px;
    box-sizing: border-box;
    gap: 140px;
}

/* Footer logo and text sections */
.footer .flex {
    align-items: flex-start;
}

.footer-desc {
	color: white;
	font-size: 12px;
	line-height: 1.6;
	font-family: 'OpenSans-Regular';
}

.home-bg {
	background-image: url('/assets/image/home_bg.jpg');
	background-size: cover;
	width: 100%;
	height: 540px;
}

.main {
	min-height: calc(100vh - 200px);
}


.el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #005537;
    color: #FFF;
}

.el-pagination.is-background .el-pager li:not(.active):hover {
    color: #005537;
}

.el-menu {
	background-color: transparent;
	border-right: none;
}

.el-menu-item {
	padding-left: 0px;
	padding-right: 0px;
}

.el-submenu__title {
	font-size: 20px;
    display: flex;
    align-items: center;
    padding-left: 25px;
    padding-right: 10px;
}

.el-menu.el-menu--horizontal {
	border-bottom: none;
}

.menu-item-active-light {
	color: white !important;
}

.menu-item-active-light:hover {
	background-color: #2b7146 !important;
	color: white !important;
	font-weight: 600 !important;
}

.el-menu--horizontal>.custom-submenu-dark.el-submenu:hover {
	background-color: #005537;
}

.el-menu--horizontal>.custom-submenu-light.el-submenu:hover {
	background-color: #2b7146;
}

.el-menu--horizontal>.custom-submenu-dark.el-submenu .el-submenu__title {
	color: rgb(0, 85, 85);
}

.el-menu--horizontal>.custom-submenu-light.el-submenu .el-submenu__title {
	color: white;
}

.el-menu--horizontal>.custom-submenu-dark.el-submenu .el-submenu__title:hover {
	background-color: #005537;
	color: white;
	font-weight: 600;
}

.el-menu--horizontal>.custom-submenu-light.el-submenu .el-submenu__title:hover {
	background-color: #2b7146;
	font-weight: 600;
	color: white;
}

.menu-item-active-dark {
	color: rgb(0, 85, 85) !important;
}

.menu-item-active-dark:hover {
	background-color: rgb(0, 85, 55) !important;
	color: white !important;
	font-weight: 600 !important;
}

.el-menu.el-menu--popup.el-menu--popup-bottom-start .el-menu-item {
	background-color: #2b7146;
	color: white !important;
}

.el-menu.el-menu--popup.el-menu--popup-bottom-start .el-menu-item:hover {
	background-color: white;
	color: #2b7146 !important;
}

.el-submenu__icon-arrow {
	color: white !important;
}

.footer img {
    width: 78px;
}

.footer a {
	color: white;
    text-decoration: none;
}

.footer a:hover {
    color: #dcdcdc;
}

.footer a:visited {
    color: white;
}

.footer-copyright {
	margin-top: 50px;
	font-size: 12px;
	font-family: 'OpenSans-Regular';
}

@media screen and (max-width: 1200px) {
	
	.footer .justify-content-center {
	    padding: 0 30px;
	    gap: 60px;
	}
}

/* Added responsive styles for mobile devices */
@media screen and (max-width: 968px) {
    .footer .justify-content-center {
        flex-direction: column;
        align-items: flex-start;  /* 改为左侧对齐，而不是居中 */
        gap: 30px;
        padding: 0 40px;  /* 增加左侧间距，与桌面版保持一致 */
    }
    
    .footer .flex {
        justify-content: flex-start;  /* 子元素也左对齐 */
        width: 100%;  /* 确保宽度占满容器 */
    }
}