@charset "UTF-8";
 @import url("//fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
 @import url("//at.alicdn.com/t/c/font_3641295_xya9cqt8eb.css");
 @import url("https://www.fineshare.com/css/bootstrap5.min.css");

 :root {
 	--fs-orange: #FF716A;
 	--fs-orange1: #FF9A2C;
 	--fs-blur: #4E7BFB;
 	--fs-green: #02BEA0;
 	--bg-def-color: #FFF4F3;
 	--fs-font-sans-serif: Poppins, Roboto, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 	--fs-body-font-family: var(--fs-font-sans-serif);
 	--fs-body-font-size: 1rem;
 	--fs-body-font-weight: 400;
 	--fs-body-line-height: 1.5;
 	--fs-body-color: #212529;
 }

 * {
 	font-family: var(--fs-font-sans-serif);
 }

 html,
 body {
 	margin: 0;
 	padding: 0;
 	height: 100%;
 	background-color: #fff;
 	-webkit-text-size-adjust: 100%;
 	-webkit-tap-highlight-color: transparent;
 	overflow: hidden;
 }

 .layout-box {
 	width: 100%;
 	height: 100%;
 	display: flex;
 }

 .left-panel {
 	display: flex;
 	width: 280px;
 	height: 100%;
 	flex-direction: column;
 	align-items: center;
 	align-self: stretch;
 	border-right: 1px solid var(--90, #E6E6E6);
 	background: #FFF;
 }

 .right-panel {
 	width: calc(100% - 280px);
 	height: 100%;
 }

 .fs-logo {
 	margin-left: -20px;
 }

 .fs-mark {
 	font-size: 14px;
 	font-style: normal;
 	font-weight: 400;
 	line-height: normal;
 	color: #333;
 }

 .nav-box {
 	display: flex;
 	flex-direction: column;
 	margin-top: 20px;
 	overflow-y: scroll;
 	scrollbar-width: none;
 	height: 100%;
 }

 .nav-box::-webkit-scrollbar {
 	display: none;
 }

 .nav-item {
 	display: flex;
 	padding: 10px;
 	align-items: center;
 	gap: 10px;
 	align-self: stretch;
 	border-radius: 8px;
 	width: 240px;
 	border: 0;
 	background: none;
 	color: #757D80;
 	font-size: 14px;
 	font-style: normal;
 	font-weight: 500;
 	line-height: normal;
 	cursor: pointer;
 	margin-top: 4px;
 }

 .sel {
 	background: #F1F4F5;
 	color: #333;
 }

 .nav-item:hover {
 	background: #F1F4F5;
 	color: #333;
 }

 .demo-box {
 	display: flex;
 	width: 100%;
 	justify-content: space-between;
 }

 .nav-item i {
 	display: flex;
 	padding: 0 12px;
 	justify-content: center;
 	align-items: center;
 	border-radius: 0px 8px;
 	background: #FF9A26;

 	color: var(--30, #fff);
 	font-size: 14px;
 	font-style: normal;
 	font-weight: 500;
 	line-height: normal;
 }

 .separator {
 	width: 240px;
 	height: 1px;
 	border-top: 1.5px solid #E6E6E6;
 	margin: 8px 0;
 }

 .separator1 {
 	width: 100%;
 	height: 1px;
 	border-top: 1.5px solid #E6E6E6;
 	margin: 8px 0;
 }


 .nav-box p {
 	padding: 0;
 	margin: 0 0 6px 0;
 }

 .nav-box p span {
 	color: var(--70, #B3B3B3);
 	font-size: 14px;
 	font-style: normal;
 	font-weight: 400;
 	line-height: normal;
 }

 /*
 *header-box
 */
 .header-box {
 	display: flex;
 	width: 100%;
 	height: 80px;
 	justify-content: center;
 }

 .upgrade-btn {
 	display: flex;
 	width: 160px;
 	height: 36px;
 	justify-content: center;
 	align-items: center;
 	border-radius: 8px;
 	background: var(--fs-orange1);
 	border: 0;
 	cursor: pointer;
 }

 .upgrade-btn span {
 	color: #FFF;
 	font-size: 16px;
 	font-style: normal;
 	font-weight: 500;
 	line-height: 21px;
 	margin-left: 10px;
 }

 .upgrade-btn:hover {
 	opacity: 0.8;
 }

 .noraml-btn {
 	display: flex;
 	width: auto;
 	padding: 0 10px;
 	height: 36px;
 	justify-content: center;
 	align-items: center;
 	border-radius: 8px;
 	border: 0;
 	background: none;
 	cursor: pointer;
 	margin-left: 20px;
 }

 .noraml-btn span {
 	color: #757D7F;
 	font-size: 14px;
 	font-style: normal;
 	font-weight: 400;
 	line-height: normal;
 	margin-left: 10px;
 }

 .noraml-btn:hover {
 	opacity: 0.8;
 }

 .signin-btn {
 	width: 94px;
 	height: 40px;
 	background: #333;
 	color: #fff;
 	border-radius: 6px;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	font-size: 18px;
 	font-weight: 500;
 	border: 0;
 	margin-left: 30px;
 	cursor: pointer;
 	transition: background 0.3s ease;
 }

 .signin-btn:hover {
 	background: var(--fs-orange);
 	color: #fff;
 }

 .account-btn {
 	width: 44px;
 	height: 44px;
 	border-radius: 100px;
 	margin-left: 30px;
 	cursor: pointer;
 	display: none;
 	overflow: hidden;
 	background: url('https://www.fineshare.com/images/ic-avatar.svg') no-repeat center top;
 	background-size: cover;
 	border: 0;
 }

 .account-btn:hover {
 	opacity: 0.8;
 }

 .banner-bg {
 	width: 100%;
 	height: 180px;
 	flex-shrink: 0;
 	border-radius: 30px;
 	background: url("../images/top-banner@2x.webp") no-repeat center;
 	background-size: cover;
 	overflow: hidden;
 }

 .banner-title {
 	height: 100%;
 	width: 54%;
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
 	margin-left: 50px;
 }

 .banner-title b {
 	color: var(--10, #1A1A1A);
 	font-family: Poppins;
 	font-size: 34px;
 	font-style: normal;
 	font-weight: 700;
 	line-height: normal;
 }

 .banner-title span {
 	color: var(--30, #4D4D4D);
 	font-family: Poppins;
 	font-size: 16px;
 	font-style: normal;
 	font-weight: 400;
 	line-height: normal;
 }

 .content-box-app {
 	display: flex;
 	justify-content: center;
 	width: 100%;
 	height: calc(100% - 70px);
 }

 .header-content {
 	width: 90%;
 	height: 100%;
 	display: flex;
 	align-items: center;
 	justify-content: end;
 	position: relative;
 }

 .middle-content {
 	width: 90%;
 	height: 100%;
 	overflow-y: auto;
 	scrollbar-width: none;
 	/* Firefox */
 	-ms-overflow-style: none;
 	/* IE and Edge */
 	scroll-behavior: smooth;
 }

 .middle-content p b {
 	color: var(--10, #1A1A1A);
 	font-size: 20px;
 	font-style: normal;
 	font-weight: 600;
 	line-height: normal;
 }


 .scroll-box {
 	width: 100%;
 	overflow: hidden;
 	position: relative;
 }

 .item-list {
 	display: flex;
 	width: 100%;
 	overflow-x: auto;
 	white-space: nowrap;
 	scrollbar-width: none;
 	/* Firefox */
 	-ms-overflow-style: none;
 	/* IE and Edge */
 	min-height: 220px;
 	scroll-behavior: smooth;
 }

 .ovc-box::-webkit-scrollbar {
 	display: none;
 	/* Chrome, Safari, Opera */
 }

 .recommend-feature {
 	margin: 0;
 }

 .rf-item {
 	margin: 6px 0 0 0;
 	padding: 0 6px;
 }

 .item-model {
 	min-height: 220px;
 	flex: 0 0 28%;
 	border-radius: 12px;
 	background: linear-gradient(180deg, #EDF3F8 2.94%, #E1E6EB 109.41%);
 	margin-right: 15px;
 	flex-shrink: 0;
 	overflow: hidden;
 	cursor: pointer;
 	text-decoration: none;
 	transition: box-shadow 0.3s ease;
 }

 .item-model:hover {
 	box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);
 }

 .item-name {
 	height: 48px;
 	width: 100%;
 	background: var(---, #F6F9FA);
 	display: flex;
 	align-items: center;
 	justify-content: center;
 }

 .item-name span {
 	color: var(--20, #333);
 	font-size: 14px;
 	font-style: normal;
 	font-weight: 500;
 	line-height: normal;
 }

 .left-btn {
 	background: url("../images/right-btn.svg");
 	background-size: cover;
 	width: 48px;
 	height: 48px;
 	position: absolute;
 	left: 0;
 	top: 40%;
 	border: 0;
 	cursor: pointer;
 	transform: scaleX(-1);
 	display: none;
 }

 .right-btn {
 	background: url("../images/right-btn.svg");
 	background-size: cover;
 	width: 48px;
 	height: 48px;
 	position: absolute;
 	right: 0;
 	top: 40%;
 	border: 0;
 	cursor: pointer;
 	display: block;
 }

 .left-btn:hover {
 	opacity: 0.8;
 }

 .right-btn:hover {
 	opacity: 0.8;
 }

 .left-vp-btn {
 	background: url("../images/right-btn.svg");
 	background-size: cover;
 	width: 48px;
 	height: 48px;
 	position: absolute;
 	left: 0;
 	top: 30%;
 	border: 0;
 	cursor: pointer;
 	transform: scaleX(-1);
 	display: none;
 }

 .right-vp-btn {
 	background: url("../images/right-btn.svg");
 	background-size: cover;
 	width: 48px;
 	height: 48px;
 	position: absolute;
 	right: 0;
 	top: 30%;
 	border: 0;
 	cursor: pointer;
 	display: block;
 }

 .left-vp-btn:hover {
 	opacity: 0.8;
 }

 .right-vp-btn :hover {
 	opacity: 0.8;
 }

 .product-box {
 	display: flex;
 	width: 100%;
 }

 .product-item-model {
 	display: flex;
 	flex: 0 0 48%;
 	height: 260px;
 	padding-left: 30px;
 	align-items: flex-start;
 	border-radius: 16px;
 	overflow: hidden;
 	margin-right: 30px;
 }

 .product-content {
 	width: 50%;
 	height: 100%;
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
 	align-items: flex-start;
 }

 .product-content a {
 	display: flex;
 	padding: 12px 36px;
 	justify-content: center;
 	align-items: center;
 	border-radius: 8px;
 	border: 1.5px solid var(--20, #333);
 	text-decoration: none;
 	margin-top: 20px;

 	color: var(--20, #333);
 	font-family: Poppins;
 	font-size: 16px;
 	font-style: normal;
 	font-weight: 500;
 	line-height: normal;
 }

 .product-content a:hover {
 	background: #333;
 	color: #fff;
 }

 .fc-img {
 	width: 50%;
 	height: 100%;
 	display: flex;
 	justify-content: center;
 	background: url("../images/fs-ph-finecam@2x.webp") no-repeat left top;
 	background-size: cover;
 }

 .vt-img {
 	width: 50%;
 	height: 100%;
 	display: flex;
 	justify-content: center;
 	background: url("../images/fs-ph-voicetrans@2x.webp") no-repeat left top;
 	background-size: cover;
 }

 .product-content b {
 	color: var(--, #000);
 	font-family: Poppins;
 	font-size: 40px;
 	font-style: normal;
 	font-weight: 700;
 	line-height: normal;
 	margin-bottom: 5px;
 }

 .product-content span {
 	color: var(--30, #4D4D4D);
 	font-family: Poppins;
 	font-size: 16px;
 	font-style: normal;
 	font-weight: 400;
 	line-height: normal;
 }

 .product-content i {
 	color: var(--30, #4D4D4D);
 	font-family: Poppins;
 	font-size: 14px;
 	font-weight: 400;
 	line-height: normal;
 }


 /*You might want to try*/
 .avc-btn-rc {
 	display: flex;
 	padding: 12px 10px;
 	align-items: center;
 	border-radius: 12px;
 	cursor: pointer;
 	text-decoration: none;

 	border-radius: 12px;
 	border: 1px solid var(--90, #E6E6E6);
 	background: var(--100, #FFF);
 	transition: box-shadow 0.3s ease;
 	height: 100%;
 }

 .avc-btn-rc img {
 	width: 50px;
 	height: 50px;
 	margin-right: 4px;
 }


 .avc-btn-rc:hover {
 	box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);
 }

 .btn-text-content {
 	display: flex;
 	flex-direction: column;
 	text-align: left;
 	padding: 0;
 }

 .btn-text-content b {
 	color: var(--20, #333);
 	font-size: 16px;
 	font-style: normal;
 	font-weight: 600;
 	line-height: normal;
 }

 .btn-text-content span {
 	color: var(--50, #808080);
 	font-size: 12px;
 	font-style: normal;
 	font-weight: 400;
 	line-height: normal;
 }


 .fvbg {
 	background: #BBFFF1;
 }

 .cvbg {
 	background: #FFDFDE;
 }

 .fcbg {
 	background: #D0EDFF;
 }

 .vtbg {
 	background: #DFE1FF;
 }

 /*
 * Fineshare API
 */
 .content-api {
 	display: flex;
 	justify-content: center;
 	width: 100%;
 	height: calc(100% - 70px);
 }

 .content-api h2 {
 	color: var(--, #000);
 	font-size: 30px;
 	font-style: normal;
 	font-weight: 700;
 	line-height: normal;
 }

 .content-api p b {
 	color: var(--20, #333);
 	font-size: 18px;
 	font-style: normal;
 	font-weight: 600;
 	line-height: normal;
 }

 .content-api p span {
 	color: var(--50, #808080);
 	font-size: 16px;
 	font-style: normal;
 	font-weight: 400;
 	line-height: normal;
 }

 .hide {
 	display: none !important;
 }

 .doc-api {
 	color: var(--fs-blur);
 	font-size: 16px;
 	font-style: normal;
 	font-weight: 600;
 	line-height: normal;
 }

 /* .doc-api::before {
 	content: '';
 	display: inline-block;
 	background: url('../images/doc.svg');
 	width: 30px;
 	height: 30px;
 	margin-right: 4px;
 } */

 .doc-api:hover {
 	text-decoration: underline;
 }

 .api-generate-main {
 	display: flex;
 	width: 100%;
 	height: 100%;
 	align-items: flex-start;
 }

 .api-generate-box {
 	display: flex;
 	justify-content: space-between;
 	width: 100%;
 	min-height: 96px;
 	align-items: center;
 	border-radius: 12px;
 	background: #F1F4F5;
 }

 .generate-btn {
 	display: flex;
 	width: 280px;
 	height: 56px;
 	padding: 12px 16px;
 	justify-content: center;
 	align-items: center;
 	gap: 10px;
 	border-radius: 12px 0px 0px 0px;
 	border-radius: 8px;
 	background: var(--fs-orange);
 	border: 0;

 	color: var(--100, #FFF);
 	font-size: 18px;
 	font-style: normal;
 	font-weight: 600;
 	line-height: normal;
 	margin-right: 20px;
 	cursor: pointer;
 }

 .generate-btn:hover {
 	opacity: 0.8;
 }

 .no-key {
 	display: flex;
 	text-align: left;
 	justify-content: start;
 	align-items: center;
 	width: 100%;
 }

 .api-key-usage {
 	display: flex;
 	height: 100%;
 	width: 100%;
 	flex-direction: column;

 }

 .secret-key-box {
 	display: flex;
 	width: 100%;
 	height: 96px;
 	align-items: center;
 	border-radius: 12px;
 	background: #F1F4F5;
 	justify-content: center;
 }

 .sk-content {
 	display: flex;
 	padding: 12px;
 	align-items: center;
 	gap: 16px;
 	flex: 1 0 0;
 	border-radius: 10px;
 	background: var(--100, #FFF);
 	margin-left: 10px;
 	margin-right: 10px;
 	position: relative;
 	overflow: hidden;
 }

 .sk-content span {
 	color: var(--30, #4D4D4D);
 	font-size: 18px;
 	font-style: normal;
 	font-weight: 400;
 	line-height: normal;
 }

 .eyes-btn {
 	width: 32px;
 	height: 32px;
 	border: 0;
 	background: url("../images/eyes.svg");
 	position: absolute;
 	right: 0;
 	top: 10px;
 	cursor: pointer;
 }

 .eyes-btn:hover {
 	opacity: 0.8;
 }

 .copy-btn {
 	display: flex;
 	width: 126px;
 	height: 46px;
 	padding: 12px 16px;
 	justify-content: center;
 	align-items: center;
 	gap: 6px;
 	border-radius: 8px;
 	border: 1.5px solid var(--20, #333);
 	display: flex;
 	align-items: center;
 	cursor: pointer;
 	margin-right: 20px;
 }

 .copy-btn::before {
 	content: '';
 	display: inline-block;
 	background: url('../images/copy.svg');
 	width: 18px;
 	height: 18px;
 	margin-left: 5px;
 }

 .copy-btn:hover {
 	opacity: 0.8;
 }

 .del-btn {
 	display: flex;
 	width: 126px;
 	height: 46px;
 	padding: 12px 16px;
 	justify-content: center;
 	align-items: center;
 	gap: 6px;
 	border-radius: 8px;
 	border: 1.5px solid var(--20, #333);
 	display: flex;
 	align-items: center;
 	cursor: pointer;
 	margin-right: 20px;
 	margin-left: 10px;
 }

 .del-btn::before {
 	content: '';
 	display: inline-block;
 	background: url('../images/del.svg');
 	width: 22px;
 	height: 22px;
 	margin-left: 5px;
 }

 .del-btn:hover {
 	opacity: 0.8;
 }

 .api-usage-statistics {

 	width: 100%;
 	margin-top: 30px;
 	overflow: hidden;
 }

 .api-usage-statistics p b {
 	color: var(--10, #1A1A1A);
 	font-size: 20px;
 	font-style: normal;
 	font-weight: 600;
 	line-height: normal;
 }

 .usage-box {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 	width: 100%;
 	height: 146px;
 	border-radius: 12px;
 	background: #F1F4F5;
 	overflow: hidden;
 }

 .api-plan {
 	display: flex;
 	align-items: center;
 	width: 98%;
 	border-bottom: 1px solid var(--80, #CCC);
 }

 .api-plan p b {
 	color: var(--50, #808080);
 	font-family: Poppins;
 	font-size: 16px;
 	font-style: normal;
 	font-weight: 600;
 	line-height: normal;
 }

 .api-plan p span {
 	margin-left: 10px;
 	display: flex;
 	padding: 4px 12px;
 	justify-content: center;
 	align-items: center;
 	border-radius: 100px;
 	background: var(--100, #FFF);

 	color: var(--30, #4D4D4D);
 	font-size: 16px;
 	font-style: normal;
 	font-weight: 500;
 	line-height: normal;
 }

 .api-credit {
 	width: 98%;
 	display: flex;
 	justify-content: space-between;
 }

 .api-credit p b {
 	color: var(--30, #4D4D4D);
 	font-size: 16px;
 	font-style: normal;
 	font-weight: 600;
 	line-height: normal;
 }

 .api-credit p span {
 	color: var(--40, #666);
 	font-size: 14px;
 	font-style: normal;
 	font-weight: 400;
 	line-height: normal;
 }

 progress {
 	width: 98%;
 	height: 10px;
 	-webkit-appearance: none;
 	appearance: none;
 	border: none;
 	background: rgba(0, 0, 0, 0.10);
 	border-radius: 10px;
 	overflow: hidden;
 	border-radius: 5px;
 }

 progress::-webkit-progress-bar {
 	background: rgba(0, 0, 0, 0.10);
 }

 progress::-webkit-progress-value {
 	background-color: var(--fs-green);
 	border-radius: 10px;
 }

 /*  Firefox  */
 progress::-moz-progress-bar {
 	background-color: var(--fs-green);
 	border-radius: 10px;
 }

 /*  Edge  */
 progress::-ms-fill {
 	background-color: var(--fs-green);
 	border-radius: 10px;
 }

 .content-userinfo {
 	display: flex;
 	justify-content: center;
 	width: 100%;
 	height: calc(100% - 70px);
 }

 .header-info {
 	display: flex;
 	height: 90px;
 	width: 100%;
 }

 .header-info img {
 	width: 90px;
 	height: 90px;
 	border-radius: 45px;
 }

 .base-info {
 	display: flex;
 	flex-direction: column;
 	align-items: flex-start;
 	justify-content: center;
 	margin-left: 30px;
 }

 .base-info b {
 	color: var(--20, #333);
 	text-align: center;
 	font-size: 26px;
 	font-style: normal;
 	font-weight: 600;
 	line-height: normal;
 }

 .base-info span {
 	color: var(--30, #4D4D4D);
 	font-size: 16px;
 	font-style: normal;
 	font-weight: 400;
 	line-height: normal;
 }

 .information-box {
 	display: flex;
 	width: 932px;
 	padding: 20px;
 	align-items: flex-start;
 	border-radius: 12px;
 	background: var(---, #F6F9FA);
 	margin-top: 30px;
 }

 .personal-content {
 	display: flex;
 	flex-direction: column;
 	margin-left: 10px;
 	width: 100%;
 }

 .personal-content b {
 	color: var(--10, #1A1A1A);
 	font-size: 20px;
 	font-style: normal;
 	font-weight: 500;
 	line-height: normal;
 }

 .personal-content span {
 	color: var(--50, #808080);
 	font-size: 16px;
 	font-style: normal;
 	font-weight: 400;
 	line-height: normal;
 }

 .item-content {
 	width: 100%;
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
 }

 .item-content b {
 	color: var(--20, #333);
 	font-size: 16px;
 	font-style: normal;
 	font-weight: 500;
 	line-height: normal;
 }

 .input-content {
 	display: flex;
 	padding: 10px 0px;
 	flex: 1 0 0;
 	margin-left: 80px;
 	border-bottom: 1px solid var(--80, #CCC);
 	justify-content: space-between;
 	align-items: center;
 }

 .input-content span {
 	color: var(--50, #808080);
 	font-size: 16px;
 	font-style: normal;
 	font-weight: 400;
 	line-height: normal;
 }

 input[type="text"] {
 	width: 100%;
 	padding: 7px 10px;
 	border-radius: 5px;
 	font-size: 16px;
 	border: 0;
 	margin-right: 20px;
 }

 input[type="text"]:focus {
 	outline: none;
 }

 input[type="text"]::placeholder {
 	color: #aaa;
 	font-style: italic;
 }

 .editor-btn {
 	display: flex;
 	padding: 6px 24px;
 	justify-content: center;
 	align-items: center;
 	gap: 10px;
 	border-radius: 8px;
 	border: 1px solid var(--80, #CCC);
 	background: none;

 	color: var(--30, #4D4D4D);
 	font-size: 16px;
 	font-style: normal;
 	font-weight: 400;
 	line-height: normal;
 }

 .editor-btn:hover {
 	opacity: 0.8;
 }

 .rp-btn-box {
 	width: 100%;
 	display: flex;
 	align-items: center;
 	margin-top: 30px;
 }

 .rp-btn-box span {
 	color: var(--fs-green);
 	display: none;
 }

 .reset-pw-btn {
 	display: flex;
 	padding: 10px 80px;
 	justify-content: center;
 	align-items: center;
 	border-radius: 8px;
 	background: #FF716A !important;
 	border: 0;

 	color: #FFF;
 	text-align: center;
 	font-size: 16px;
 	font-style: normal;
 	font-weight: 500;
 	line-height: normal;
 }

 .reset-pw-btn:hover {
 	opacity: 0.8;
 }

 .del-ac-btn {
 	display: flex;
 	padding: 10px 66px;
 	justify-content: center;
 	align-items: center;
 	gap: 10px;
 	border-radius: 6px;
 	border: 1px solid var(--80, #CCC);

 	color: var(--80, #CCC);
 	text-align: center;
 	font-size: 16px;
 	font-style: normal;
 	font-weight: 500;
 	line-height: normal;
 }

 .del-ac-btn:hover {
 	background: #FF716A !important;
 	color: #FFF !important;
 }

 .user-middle-content {
 	width: 80%;
 	height: 100%;
 	overflow-y: auto;
 	scrollbar-width: none;
 	/* Firefox */
 	-ms-overflow-style: none;
 	/* IE and Edge */
 	scroll-behavior: smooth;
 }

 .user-middle-content p b {
 	color: var(--10, #1A1A1A);
 	font-size: 20px;
 	font-style: normal;
 	font-weight: 600;
 	line-height: normal;
 }


 .sub-payment-box {
 	display: flex;
 	flex-direction: column;
 	width: 100%;
 	padding: 20px;
 	align-items: flex-start;
 	border-radius: 12px;
 	background: var(---, #F6F9FA);
 	margin-top: 30px;
 }

 .sub-title {
 	display: flex;
 	width: 100%;
 	justify-content: space-between;
 }

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

 .sub-product img {
 	margin-right: 12px;
 	width: 54px;
 	height: 54px;
 }

 .sub-product b {
 	color: var(--10, #1A1A1A);
 	font-size: 20px;
 	font-style: normal;
 	font-weight: 600;
 	line-height: normal;
 }

 .sub-status {
 	display: flex;
 	align-items: center;
 	justify-content: flex-end;
 	width: 100%;
 }

 .sub-status span {

 	font-size: 16px;
 	font-style: normal;
 	font-weight: 500;
 	line-height: normal;
 	margin-left: 6px;
 }

 .sub-active {
 	color: var(--fs-green);
 }

 .sub-noactive {
 	color: var(--fs-orange);
 }

 .sub-content {
 	display: flex;
 	width: 100%;
 	align-items: center;
 	margin-top: 20px;
 }

 .sub-cancel-box {
 	display: flex;
 	align-items: center;
 	margin-right: 12px;
 }

 .sub-cancel {
 	color: var(--fs-green);
 	font-size: 16px;
 	font-style: normal;
 	font-weight: 500;
 	line-height: normal;
 	margin-left: 6px;
 	border: 0;
 	background: none;
 }

 .sub-cancel:hover {
 	text-decoration: underline;
 }

 .manage-subscriptions b {

 	font-size: 26px;
 	font-style: normal;
 	font-weight: 600;
 	line-height: normal;
 	border: 0;
 	background: none;
 }

 .manage-subscriptions p {
 	padding: 5px 0;
 	margin: 0;
 }

 .subscriptions_textarea {
 	width: 100%;
 	height: 50px;
 	border: 1.5px solid #ccc;
 	border-radius: 4px;
 	margin-top: 4px;
 	font-size: 14px;
 }

 .feedback_textarea {
 	width: 100%;
 	height: 150px;
 	border: 1.5px solid #ccc;
 	border-radius: 4px;
 	margin-top: 4px;
 	font-size: 14px;
 }


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

 .checkbox-group label {
 	padding: 5px 0;
 	font-size: 16px;
 	margin-top: 4px;
 	display: flex;
 	align-items: center;
 }

 .buttons {
 	display: flex;
 	width: 100%;
 	align-items: center;
 	justify-content: center;
 }

 .buttons button {
 	border: 0;
 	margin-top: 10px;
 	padding: 8px 30px;
 	border: none;
 	border-radius: 5px;
 	cursor: pointer;
 	margin-right: 20px;
 }

 .buttons button:hover {
 	opacity: 0.8;
 }

 .checkbox-group input {
 	margin-right: 4px;
 }

 .nodata-box {
 	width: 100%;
 	height: 100%;
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
 }

 .nodata-box img {
 	margin-top: -200px;
 }

 .convert-loading-gif {
 	width: 260px;
 	height: 220px;
 }

 .pt-10 {
 	padding-top: 10px;
 }

 .pt-20 {
 	padding-top: 20px;
 }

 .pt-30 {
 	padding-top: 30px;
 }

 .pt-40 {
 	padding-top: 40px;
 }

 .ml-10 {
 	margin-left: 10px;
 }

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

 .mt30 {
 	margin-top: 30px;
 }

 .mt60 {
 	margin-top: 60px;
 }

 .mt80 {
 	margin-top: 80px;
 }

 .ml30 {
 	margin-left: 30px;
 }

 .mb30 {
 	margin-bottom: 30px;
 }

 .mb60 {
 	margin-bottom: 60px;
 }

 .mb80 {
 	margin-bottom: 80px;
 }

 .mb100 {
 	margin-bottom: 100px;
 }

 .error {
 	color: red !important;
 }

 /*
  *dialog 
  */
 .modal {
 	display: none;
 	position: fixed;
 	z-index: 1;
 	left: 0;
 	top: 0;
 	width: 100%;
 	height: 100%;
 	background-color: rgba(0, 0, 0, 0.8);
 }

 .dialog-modal-content {
 	position: relative;
 	margin: 15% auto;
 	padding: 20px;
 	background-color: white;
 	width: 500px;
 	border-radius: 8px;
 	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
 }

 .modal-header {
 	font-size: 18px;
 	font-weight: bold;
 	border: 0;
 }

 .modal-body {
 	display: flex;
 	align-items: center;
 	border-top: 1px solid #e0e0e0;
 	border-bottom: 1px solid #e0e0e0;
 	flex-direction: column;
 }

 .modal-footer {
 	display: flex;
 	justify-content: flex-end;
 	border: 0;
 }

 .modal-footer button {
 	margin-left: 10px;
 	padding: 8px 30px;
 	border: none;
 	border-radius: 5px;
 	cursor: pointer;
 }

 .modal-footer button:hover {
 	opacity: 0.8;
 }

 .btn-cancel {
 	background-color: #ff5722;
 	color: white;
 }

 .btn-ok {
 	background-color: #e0e0e0;
 	color: #333;
 }

 .submit-success {
 	text-align: center;
 	display: none;
 }

 .submit-success b {

 	font-size: 26px;
 	font-style: normal;
 	font-weight: 600;
 	line-height: normal;
 	border: 0;
 	background: none;
 }

 .submit-success p {
 	padding: 5px 0;
 	margin: 0;
 }

 .recommend-voice {
 	display: flex;
 	flex-direction: column;
 	text-decoration: none;
 	margin-right: 30px;
 }

 .recommend-voice img {
 	width: 160px;
 	height: 160px;
 	border-radius: 20px;
 }

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

 .rfitem span {
 	color: #6A6A6A;
 	font-family: Poppins;
 	font-size: 14px;
 	font-style: normal;
 	font-weight: 400;
 	line-height: normal;
 	margin-right: 10px;
 }

 .recommend-voice b {
 	color: var(--20, #333);
 	font-family: Poppins;
 	font-size: 16px;
 	font-style: normal;
 	font-weight: 600;
 	line-height: normal;
 	margin-top: 10px;
 }

 .item-bg {
 	display: flex;
 	justify-content: center;
 	height: calc(100% - 48px);
 }

 .user-menu {
 	width: 308px;
 	height: 300px;
 	position: absolute;
 	right: 0;
 	top: 70px;
 	background: #fff;
 	box-shadow: 0 0 8px rgb(0, 0, 0, 0.1);
 	border-radius: 16px;
 	overflow: hidden;
 	z-index: 100;
 	background: url("../images/login-bg@2x.webp") no-repeat center top;
 	background-size: cover;
 }

 .menu-user-box {
 	width: 100%;
 	display: flex;
 	flex-direction: column;
 	align-items: flex-start;
 	padding: 16px;
 }

 .userim {
 	display: flex;
 	width: 100%;
 	margin-bottom: 16px;
 }

 .menu-btn {
 	display: flex;
 	padding: 8px 6px;
 	align-items: center;
 	gap: 6px;
 	align-self: stretch;
 	border-radius: 8px;
 	border: 0;
 	background: none;

 	color: var(--20, #333);
 	font-family: Poppins;
 	font-size: 14px;
 	font-style: normal;
 	font-weight: 400;
 	line-height: normal;
 	margin-top: 6px;
 }

 .menu-btn:hover {
 	border-radius: 8px;
 	background: #E2E6E8;
 }

 .menu-logout-btn {
 	display: flex;
 	padding: 8px 6px;
 	align-items: center;
 	justify-content: center;
 	gap: 6px;
 	align-self: stretch;
 	border-radius: 8px;
 	border: 0;
 	background: #F1F4F5;
 	color: var(--20, #333);
 	font-family: Poppins;
 	font-size: 14px;
 	font-style: normal;
 	font-weight: 400;
 	line-height: normal;
 	margin-top: 10px;
 }

 .menu-logout-btn:hover {
 	background: #E2E6E8;
 }

 .userim img {
 	width: 62px;
 	height: 62px;
 	border-radius: 30px;
 }

 .user-email {
 	display: flex;
 	flex-direction: column;
 	margin-left: 10px;
 	justify-content: center;
 }

 .user-email b {
 	color: var(--20, #333);
 	font-family: Poppins;
 	font-size: 16px;
 	font-style: normal;
 	font-weight: 600;
 	line-height: normal;
 }

 .user-email span {
 	color: var(--50, #808080);
 	font-family: Poppins;
 	font-size: 13px;
 	font-style: normal;
 	font-weight: 400;
 	line-height: 16px;
 }

 .ml10 {
 	margin-left: 10px;
 }


 /*
 * Ads
 */
 .halloween-ads {
 	width: 100%;
 	height: 100px;
 	text-align: center;
 	height: 100px;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	border-radius: 20px;
 	overflow: hidden;
 	background: #130D22;
 }

 .ads-bg {
 	background: url("https://www.fineshare.com/images/ads/adv-halloween-bg@2x.webp") no-repeat center;
 	background-size: cover;
 	height: 100px;
 	width: 1920px;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 }

 .ads-bg-mobile {
 	background: url("https://www.fineshare.com/images/ads/adv-halloween-bg-mobile@2x.webp") no-repeat center;
 	background-size: cover;
 	height: 113px;
 	width: 780px;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	display: none;
 }

 .ads-content {
 	text-align: left;
 	display: flex;
 	flex-wrap: wrap;
 	max-width: 1000px;
 	display: flex;
 	justify-content: center;
 	align-items: center;
 	margin-right: 40px;
 }

 .ads-content p {
 	padding: 0;
 	margin: 0;
 }

 .ads-content p span {
 	color: var(--100, #FFF);
 	font-family: Poppins;
 	font-size: 15px;
 	font-style: normal;
 	font-weight: 500;
 }

 .ads-img1 {
 	width: 178px;
 	height: 56px;
 	margin-right: 30px;
 }

 .ads-img2 {
 	margin-left: 5px;
 }

 .ads-text p {
 	margin: 0;
 	padding: 0;
 }

 .ads-text b {
 	color: #000;
 	font-size: 20px;
 	font-style: normal;
 	font-weight: 700;
 	line-height: normal;
 	display: flex;
 	align-items: center;
 }

 .ads-text p span {
 	color: #010101;
 	font-size: 16px;
 	font-style: normal;
 	font-weight: 400;
 	line-height: normal;
 }

 .ads-title {
 	width: 906px;
 	height: auto;
 	margin-bottom: -10px;
 }

 .ads-close {
 	border: 0;
 	position: fixed;
 	bottom: 46px;
 	right: 0;
 	width: 32px;
 	height: 32px;
 	background: url("https://www.fineshare.com/images/ads-close.svg") no-repeat center;
 }

 .ads-claim {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
 }

 .ads-claim a {
 	display: inline-flex;
 	height: 45px;
 	padding: 10px 40px;
 	justify-content: center;
 	align-items: center;
 	border-radius: 30px;
 	background: #E15950;
 	color: var(--100, #FFF);
 	text-align: center;
 	font-family: Poppins;
 	font-size: 18px;
 	font-style: normal;
 	font-weight: 700;
 	line-height: normal;
 	transition: box-shadow 0.3s ease;
 }

 .ads-claim a:hover {
 	color: var(--100, #FFF);
 	opacity: #FF116A;
 	box-shadow: 0 10px 15px rgba(0, 0, 0, 0.5);
 }

 .ads-claim span {
 	color: var(--100, #FFF);
 	text-align: center;
 	font-family: Poppins;
 	font-size: 14px;
 	font-style: normal;
 	font-weight: 500;
 	line-height: normal;
 	margin-top: 4px;
 }

 @media (max-width: 1640px) {

 	.ads-claim {
 		display: none !important;
 	}
 }

 @media (max-width: 1440px) {
 	#welcome {
 		font-size: 30px;
 	}

 	.left-panel {
 		width: 260px;
 	}

 	.right-panel {
 		width: calc(100% - 260px);
 		height: 100%;
 	}

 	.middle-content {
 		width: 95%;
 	}

 	.item-model {
 		flex: 0 0 23%;
 	}

 	.ads-content {
 		text-align: center !important;
 		padding: 0 20px;
 	}
 }

 @media (max-width: 1280px) {
 	.avc-btn-rc img {
 		display: none;
 	}

 	.product-content b {
 		font-size: 30px;
 	}

 	.product-content span {
 		font-size: 14px;
 	}

 	.product-content a {
 		padding: 10px 20px;
 	}

 	.item-model {
 		flex: 0 0 30%;
 	}

 	.banner-title {
 		padding: 25px;
 		margin: 0;
 		width: 100%;
 	}
 }

 @media (max-width: 1170px) {
 	.avc-btn-rc img {
 		display: block;
 	}

 	.rf-item {
 		margin-top: 10px !important;
 	}

 	#streamers-rect {
 		display: none;
 	}

 	.item-model {
 		flex: 0 0 30%;
 	}

 	.banner-title {
 		padding: 25px;
 		margin: 0;
 		width: 100%;
 	}

 	#welcome {
 		font-size: 28px;
 	}
 }

 @media (max-width: 1000px) {
 	.left-panel {
 		display: none;
 	}

 	.right-panel {
 		width: 100%;
 	}

 	.item-model {
 		flex: 0 0 30%;
 	}

 	.banner-title {
 		padding: 25px;
 		margin: 0;
 		width: 100%;
 	}

 	#welcome {
 		font-size: 26px;
 	}
 }

 @media (max-width: 768px) {

 	.item-model {
 		flex: 0 0 40%;
 	}

 	#welcome {
 		font-size: 24px;
 	}

 	.banner-title {
 		padding: 25px;
 		margin: 0;
 		width: 100%;
 	}
 }