/*
            /$$
    /$$    /$$$$
   | $$   |_  $$    /$$$$$$$
 /$$$$$$$$  | $$   /$$_____/
|__  $$__/  | $$  |  $$$$$$
   | $$     | $$   \____  $$
   |__/    /$$$$$$ /$$$$$$$/
          |______/|_______/
================================
        Keep calm and get rich.
                    Is the best.

---------------------------------------------
Theme Name: Mango
Theme URI: https://www.nicetheme.cn/
Author: nicetheme
Author URI: https://www.nicetheme.cn/
Description: 
Version: 1.1.1
License URI: LICENSE
Text Domain: mango
*/
@media (max-width: 767.98px) {

	.g-2,
	.gx-2 {
		--bs-gutter-x: 0.625rem;
	}

	.g-2,
	.gy-2 {
		--bs-gutter-y: 0.625rem;
	}
}


@media (min-width: 1840px) {
	.container {
		max-width: 1600px;
	}

	.g-xxxl-1 {
		--bs-gutter-x: 0.25rem;
		--bs-gutter-y: 0.25rem;
	}

	.g-xxxl-2 {
		--bs-gutter-x: 0.5rem;
		--bs-gutter-y: 0.5rem;
	}

	.g-xxxl-3 {
		--bs-gutter-x: 1rem;
		--bs-gutter-y: 1rem;
	}

	.g-xxxl-4 {
		--bs-gutter-x: 1.5rem;
		--bs-gutter-y: 1.5rem;
	}

	.g-xxxl-5 {
		--bs-gutter-x: 3rem;
		--bs-gutter-y: 3rem;
	}

	.col-xxxl-12 {
		flex: 0 0 auto;
		width: 100%;
	}

	.col-xxxl-11 {
		flex: 0 0 auto;
		width: 91.66666667%;
	}

	.col-xxxl-10 {
		flex: 0 0 auto;
		width: 83.33333333%;
	}

	.col-xxxl-9 {
		flex: 0 0 auto;
		width: 75%;
	}

	.col-xxxl-8 {
		flex: 0 0 auto;
		width: 66.66666667%;
	}

	.col-xxxl-7 {
		flex: 0 0 auto;
		width: 58.33333333%;
	}

	.col-xxxl-6 {
		flex: 0 0 auto;
		width: 50%;
	}

	.col-xxxl-5 {
		flex: 0 0 auto;
		width: 41.66666667%;
	}

	.col-xxxl-4 {
		flex: 0 0 auto;
		width: 33.33333333%;
	}

	.col-xxxl-3 {
		flex: 0 0 auto;
		width: 25%;
	}

	.col-xxxl-2 {
		width: 16.66666667%;
	}

	.col-xxxl-20 {
		width: 20%;
	}

	.col-xxxl-1 {
		width: 8.33333333%;
	}

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

	.mb-xxxl-4 {
		margin-bottom: 2rem !important;
	}
}

@media (max-width: 1839.98px) {

	.related-post-grid .col-xxxl-2:nth-child(5),
	.related-post-grid .col-xxxl-2:nth-child(6) {
		display: none;
	}
}

@media (min-width: 1600px) {
	.container {
		max-width: 1540px;
	}
}

/*--------------------------------------------------------------
## 1 Font color style
--------------------------------------------------------------*/

.text-primary {
	color: var(--color-primary) !important;
}

.text-dark {
	color: var(--color-dark) !important;
}

.text-secondary {
	color: var(--color-secondary) !important;
}

.text-muted {
	color: var(--color-muted) !important;
}

.text-light {
	color: var(--color-light) !important;
}

.text-danger {
	color: var(--color-danger) !important;
}

.text-warning {
	color: var(--color-warning) !important;
}

/*--------------------------------------------------------------
## 2 Buttons
--------------------------------------------------------------*/

.btn {
	position: relative;
	border-width: 1px;
	border-radius: var(--border-radius-sm);
	padding: 0.5rem 1.625rem;
	white-space: normal;
	transition: all 0.3s ease-in-out;
}

.btn:hover,
.btn:focus,
.btn:active,
.btn.active {
	box-shadow: none !important;
}

.btn.disabled,
.btn:disabled {
	color: var(--color-muted);
	border-color: var(--btn-light);
	background-color: var(--btn-light);
}

/*--------------------------------------------------------------
## Button style
--------------------------------------------------------------*/

.btn-primary {
	color: #fff;
	background-color: var(--btn-primary);
	border-color: var(--btn-primary);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
	color: #fff;
	background-color: var(--btn-dark);
	border-color: var(--btn-dark);
}

.btn-primary.disabled,
.btn-primary:disabled {
	background-color: var(--btn-light);
	border-color: var(--btn-light);
	color: var(--color-muted);
	opacity: 0.8;
	cursor: not-allowed;
}

/*--------------------------------------------------------------
## Button secondary style
  --------------------------------------------------------------*/

.btn-secondary {
	color: var(--color-light);
	background-color: var(--btn-secondary);
	border-color: var(--btn-secondary);
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary.active,
.btn-secondary:active {
	color: #fff;
	background-color: var(--btn-dark);
	border-color: var(--btn-dark);
}

/*--------------------------------------------------------------
## Button light style
  --------------------------------------------------------------*/

.btn-light {
	background-color: var(--btn-light);
	border-color: var(--btn-light);
	color: var(--color-muted);
}

.btn-light:hover,
.btn-light:focus,
.btn-light:active,
.btn-light.active {
	background-color: var(--btn-light);
	border-color: var(--btn-light);
	color: var(--color-dark);
}

.btn-light.disabled,
.btn-light:disabled {
	background-color: var(--btn-light);
	border-color: var(--btn-light);
	color: var(--color-muted);
	cursor: not-allowed;
}

/*--------------------------------------------------------------
## Button dark style
  --------------------------------------------------------------*/

.btn-dark {
	background-color: var(--btn-dark);
	border-color: var(--btn-dark);
	color: var(--color-light);
}

.btn-dark:hover,
.btn-dark:focus,
.btn-dark.active,
.btn-dark:active {
	background-color: var(--btn-secondary);
	border-color: var(--btn-secondary);
	color: #fff;
}

/*--------------------------------------------------------------
## Button danger style
  --------------------------------------------------------------*/

.btn-danger {
	background-color: var(--btn-danger);
	border-color: var(--btn-danger);
	color: #fff;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger.active,
.btn-danger:active {
	background-color: var(--btn-danger);
	border-color: var(--btn-danger);
	color: #fff;
}

/*--------------------------------------------------------------
## Button link style
  --------------------------------------------------------------*/

.btn-link {
	color: var(--color-muted);
	text-decoration: none;
}

.btn-link.active,
.btn-link:active {
	color: var(--color-dark);
	background-color: transparent;
	border-color: transparent;
}

.btn-link:hover,
.btn-link:focus {
	color: var(--color-dark);
	background-color: var(--btn-light);
	border-color: var(--btn-light);
}

.btn-link:disabled,
.btn-link.disabled {
	color: var(--color-muted);
}

/*--------------------------------------------------------------
## Button success style
  --------------------------------------------------------------*/

.btn-success {
	background-color: var(--btn-success);
	border-color: var(--btn-success);
	color: #fff;
}

.btn-success:hover,
.btn-success:focus,
.btn-success.active,
.btn-success:active {
	background-color: var(--btn-success);
	border-color: var(--btn-success);
	color: #fff;
}

.btn-success:disabled,
.btn-success.disabled {
	background-color: var(--btn-light);
	border-color: var(--btn-light);
	color: var(--color-muted);
}

/*--------------------------------------------------------------
## Button outline style
  --------------------------------------------------------------*/

.btn-outline-primary {
	color: var(--color-primary);
	background-color: var(--outline-primary);
	border-color: var(--outline-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active {
	color: #fff;
	background-color: var(--btn-primary);
	border-color: var(--btn-primary);
}

/*--------------------------------------------------------------
## Button outline secondary style
  --------------------------------------------------------------*/

.btn-outline-secondary {
	color: var(--color-secondary);
	background-color: var(--outline-secondary);
	border-color: var(--outline-secondary);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active,
.btn-outline-secondary.active {
	color: var(--color-muted);
	background-color: var(--outline-secondary);
	border-color: var(--btn-secondary);
}

/*--------------------------------------------------------------
## Button outline light style
  --------------------------------------------------------------*/

.btn-outline-light {
	color: var(--color-secondary);
	border-color: var(--outline-light);
	background-color: var(--outline-light);
}

.btn-outline-light:hover,
.btn-outline-light:focus,
.btn-outline-light:active,
.btn-outline-light.active {
	color: var(--color-dark);
	border-color: var(--btn-light);
	background-color: var(--outline-light);
}

/*--------------------------------------------------------------
## Button outline secondary style
--------------------------------------------------------------*/

.btn-outline-dark {
	color: var(--color-muted);
	border-color: var(--outline-dark);
	background-color: var(--outline-dark);
}

.btn-outline-dark:hover,
.btn-outline-dark:focus,
.btn-outline-dark:active,
.btn-outline-dark.active {
	color: var(--color-dark);
	border-color: var(--btn-light);
	background-color: var(--outline-light);
}

/*--------------------------------------------------------------
## Button outline danger style
--------------------------------------------------------------*/

.btn-outline-danger {
	color: var(--color-danger);
	border-color: var(--outline-danger);
}

.btn-outline-danger:hover,
.btn-outline-danger:focus,
.btn-outline-danger:active,
.btn-outline-danger.active {
	color: #fff;
	border-color: var(--btn-danger);
	background-color: var(--btn-danger);
}

/*--------------------------------------------------------------
## Button size style
--------------------------------------------------------------*/

.btn-xs {
	font-size: 0.75rem;
	padding: 0.25rem 0.75rem;
}

.btn-sm {
	font-size: 0.875rem;
	padding: 0.40625rem 1rem;
}

.btn-lg {
	font-size: 1.125rem;
	padding: 0.75rem 2rem;
}

.btn-block {
	width: 100%;
	display: block;
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}

@media (min-width: 768px) and (max-width: 991.98px) {
	.btn-lg {
		font-size: 1rem;
	}
}

@media (max-width: 767.98px) {
	.btn {
		font-size: 0.875rem;
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
	}

	.btn-sm {
		padding: 0.3125rem 0.75rem;
	}

	.btn-lg {
		font-size: 1rem;
		padding: 0.625rem 1.75rem;
	}
}

/*--------------------------------------------------------------
## Button radius style
--------------------------------------------------------------*/

.btn-rounded {
	border-radius: 5rem;
}

.rounded {
	border-radius: var(--border-radius-sm) !important;
}

.rounded-1 {
	border-radius: var(--border-radius-xs) !important;
}

.rounded-2 {
	border-radius: var(--border-radius-sm) !important;
}

.rounded-3 {
	border-radius: var(--border-radius-md) !important;
}

/*--------------------------------------------------------------
## Button width style
--------------------------------------------------------------*/

.btn-w-xs {
	min-width: 65px;
	padding-left: 0.375rem;
	padding-right: 0.375rem;
}

.btn-w-sm {
	min-width: 75px;
	padding-left: 0.375rem;
	padding-right: 0.375rem;
}

.btn-w-md {
	min-width: 95px;
	padding-left: 0.75rem;
	padding-right: 0.75rem;
}

.btn-w-lg {
	min-width: 120px;
	padding-left: 0.75rem;
	padding-right: 0.75rem;
}

.btn-w-xl {
	min-width: 160px;
	padding-left: 0.75rem;
	padding-right: 0.75rem;
}

@media (max-width: 767.98px) {
	.btn-w-lg {
		min-width: 95px;
	}

	.btn-w-xl {
		min-width: 120px;
	}

	.btn-sm.btn-w-sm {
		min-width: 60px;
		padding-left: 0.25rem;
		padding-right: 0.25rem;
	}

	.btn-sm.btn-w-md {
		min-width: 80px;
	}

	.btn-lg.btn-w-lg {
		min-width: 135px;
		padding-left: 0.75rem;
		padding-right: 0.75rem;
	}
}

@media (min-width: 768px) {
	.btn-sm.btn-w-md {
		min-width: 85px;
	}

	.btn-sm.btn-w-sm {
		min-width: 70px;
	}
}

/*--------------------------------------------------------------
## Button icon style
--------------------------------------------------------------*/

.btn-icon {
	position: relative;
	width: 2.625rem;
	height: 2.625rem;
	padding: 0;
	font-size: 1.375rem;
	text-align: center;
}

.btn-icon span {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.btn-icon img {
	width: 85%;
	height: 85%;
	border-radius: inherit;
	-o-object-fit: cover;
	object-fit: cover;
}

.btn-icon small {
	position: absolute;
	right: 0;
	top: 0;
	font-size: 0.75rem;
	white-space: nowrap;
	padding: 0 0.375rem;
	border-radius: 20px;
	color: #fff;
	background-color: #ea4e3d;
	border: 2px solid #fff;
	transform: translate(25%, -50%);
}

.btn-icon:hover,
.btn-icon:active,
.btn-icon:focus {
	box-shadow: none;
}

.btn-icon.btn-xs {
	width: 2.125rem;
	height: 2.125rem;
	font-size: 1.125rem;
}

.btn-icon.btn-sm {
	width: 2.25rem;
	height: 2.25rem;
	font-size: 1.25rem;
}

.btn-icon.btn-md {
	width: 2.5rem;
	height: 2.5rem;
	font-size: 1.375rem;
}

.btn-icon.btn-lg {
	width: 2.75rem;
	height: 2.75rem;
	font-size: 1.5rem;
}

@media (max-width: 767.98px) {
	.btn-icon {
		width: 2.5rem;
		height: 2.5rem;
		font-size: 1.25rem;
	}

	.btn-icon.btn-xs {
		width: 2rem;
		height: 2rem;
		font-size: .875rem;
	}

	.btn-icon.btn-sm {
		width: 2.0625rem;
		height: 2.0625rem;
		font-size: 1.25rem;
	}

	.btn-icon.btn-md {
		width: 2rem;
		height: 2rem;
		font-size: 1.125rem;
	}

	.btn-icon small {
		font-size: 0.625rem;
	}
}

@media (min-width: 768px) and (max-width: 991.98px) {

	.btn-icon.btn-xs {
		width: 2rem;
		height: 2rem;
		font-size: 1rem;
	}

	.btn-icon.btn-md {
		width: 2.375rem;
		height: 2.375rem;
		font-size: 1.125rem;
	}

	.btn-icon.btn-lg {
		width: 2.75rem;
		height: 2.75rem;
		font-size: 1.25rem;
	}
}

/*--------------------------------------------------------------
## Button more style
--------------------------------------------------------------*/

.btn-load-more {
	position: relative;
	visibility: visible;
	top: 0px;
	transition: 0.2s;
}

.btn-load-more:hover {
	top: -4px;
	box-shadow: none;
	transition: 0.2s;
}

/*--------------------------------------------------------------
## 3 Background
--------------------------------------------------------------*/

.bg-primary {
	background-color: var(--bg-primary) !important;
}

.bg-dark {
	background-color: var(--bg-dark) !important;
}

.bg-secondary {
	background-color: var(--bg-secondary) !important;
}

.bg-muted {
	background-color: var(--bg-muted) !important;
}

.bg-light {
	background-color: var(--bg-light) !important;
}

.bg-img {
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
}

.bg-overlay {
	position: fixed;
	height: 100%;
	right: -99%;
	top: 0;
	left: -99%;
	opacity: 0;
	background: rgba(0, 0, 0, 0.2);
	visibility: hidden;
	transform: translate3d(0px, 0px, 0px);
	transition: 0.3s ease-in-out;
	z-index: 998;
}

.bg-effect {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.bg-poster {
	-ms-background-size: cover;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

.bg-fixed {
	background-attachment: fixed;
}

/*--------------------------------------------------------------
## 4 Border
--------------------------------------------------------------*/

.border-primary {
	border-color: var(--border-primary) !important;
}

.border-dark {
	border-color: var(--border-dark) !important;
}

.border-secondary {
	border-color: var(--border-secondary) !important;
}

.border-muted {
	border-color: var(--border-muted) !important;
}

.border-light {
	border-color: var(--border-light) !important;
}

.border-1 {
	border-width: 1px !important;
}

.border-2 {
	border-width: 2px !important;
}

.border-3 {
	border-width: 3px !important;
}

/*--------------------------------------------------------------
## 5 Form style
--------------------------------------------------------------*/

.form-control {
	font-size: 1rem;
	padding: 0.5rem .9375rem;
	color: var(--color-muted);
	background-color: var(--bg-light);
	border-color: var(--bg-light);
	border-radius: var(--border-radius-sm);
	transition: all 0.15s ease-in-out;
}

@media (max-width: 767.98px) {
	.form-control {
		font-size: 0.875rem;
		padding: 0.5rem 0.875rem;
	}
}

.form-control-sm {
	height: calc(34px + 2px);
	padding: 0.5rem 0.75rem;
	font-size: 0.875rem;
}

.form-control:focus,
.form-control:active {
	color: var(--color-dark);
	background-color: var(--bg-light);
	border-color: var(--btn-light);
	box-shadow: none;
}

.form-control::-webkit-input-placeholder {
	color: var(--color-muted);
	opacity: 1;
}

.form-control::-moz-placeholder {
	color: var(--color-muted);
	opacity: 1;
}

.form-control:-ms-input-placeholder {
	color: var(--color-muted);
	opacity: 1;
}

.form-control::-ms-input-placeholder {
	color: var(--color-muted);
	opacity: 1;
}

.form-control::placeholder {
	color: var(--color-muted);
	opacity: 1;
}

.form-control:disabled,
.form-control[readonly] {
	border-color: var(--btn-light);
	background-color: #fff;
	color: var(--color-light);
	opacity: 1;
}

.form-control-lg {
	height: calc(47px + 2px);
	padding: 0.5rem 1.5rem;
	font-size: 1.125rem;
}

textarea.form-control {
	text-align: justify;
	height: auto;
	padding: 0.75rem 0.75rem;
}

.form-select {
	padding: 0.625rem 1rem;
	color: var(--color-muted);
	border: 2px solid var(--btn-light);
	background-color: #fff;
	border-radius: var(--border-radius-sm);
}

.form-select:focus,
.form-select:active {
	color: var(--color-dark);
	border-color: var(--border-dark);
	background-color: #fff;
	border-radius: var(--border-radius-sm);
	box-shadow: none;
}

.form-select-lg {
	padding: 0.625rem 1.25rem;
	font-size: 1.125rem;
}

/*--------------------------------------------------------------
## Form check style
--------------------------------------------------------------*/

.form-check {
	min-height: 0;
	padding-left: 2em;
	margin-bottom: 0;
}

.form-check .form-check-input {
	margin-left: -2em;
}

.form-check-input {
	width: 1.5em;
	height: 1.5em;
	background-color: var(--gray-4);
	border-color: var(--gray-4);
	margin-top: 0.08em;
}

.form-check-input:active {
	-webkit-filter: brightness(90%);
	filter: brightness(90%);
}

.form-check-input:focus {
	border-color: var(--gray-4);
	outline: 0;
	box-shadow: none;
}

.form-check-input:checked {
	background-color: #49d6ab;
	border-color: #49d6ab;
}

.form-check-input[type="checkbox"]:indeterminate {
	background-color: #49d6ab;
	border-color: #49d6ab;
}

.form-switch {
	padding-left: 2.75em;
}

.form-switch .form-check-input {
	width: 2.75em;
	margin-left: -2.75em;
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9Jy00IC00IDggOCc+PGNpcmNsZSByPSczJyBmaWxsPScjZmZmJy8+PC9zdmc+");
	border-radius: 3em;
}

.form-switch .form-check-input:focus {
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9Jy00IC00IDggOCc+PGNpcmNsZSByPSczJyBmaWxsPScjZmZmJy8+PC9zdmc+");
}

.form-switch .form-check-input:checked {
	background-position: right center;
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9Jy00IC00IDggOCc+PGNpcmNsZSByPSczJyBmaWxsPScjZmZmJy8+PC9zdmc+");
}

/*--------------------------------------------------------------
## 6 Avatar style
--------------------------------------------------------------*/

.flex-avatar {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	line-height: 1;
	text-transform: capitalize;
	white-space: nowrap;
	border-radius: 100%;
	cursor: pointer;
}

.flex-avatar.disabled {
	cursor: auto;
}

.flex-avatar img {
	width: inherit;
	height: inherit;
	border-radius: inherit;
	-o-object-fit: cover;
	object-fit: cover;
}

.flex-avatar .avatar-badge {
	position: absolute;
	right: 0;
	bottom: 0;
}

.avatar-badge.w14 {
	width: 14px;
	height: 14px;
}

.avatar-badge.w16 {
	width: 16px;
	height: 16px;
}

.avatar-badge.w20 {
	width: 20px;
	height: 20px;
}

.avatar-badge.w24 {
	width: 24px;
	height: 24px;
}

.avatar-badge.w30 {
	width: 30px;
	height: 30px;
}

@media (max-width: 767.98px) {

	.avatar-badge.w30 {
		width: 24px;
		height: 24px;
	}
}

@media (min-width: 768px) and (max-width: 991.98px) {

	.avatar-badge.w30 {
		width: 24px;
		height: 24px;
	}
}

/*--------------------------------------------------------------
## 7 Media
--------------------------------------------------------------*/

.media {
	position: relative;
	display: block;
	overflow: hidden;
	padding: 0;
	flex-shrink: 0;
	border-radius: inherit;
}

.media:after {
	content: "";
	display: block;
	padding-top: 100%;
}

.media:not(:first-child):not(:last-child):not(:only-child) {
	border-radius: 0;
}

.media-overlay {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 1rem;
	color: #fff;
	background-color: rgb(0 0 0 / 50%);
	z-index: 2;
}

a.media-overlay:hover,
a.media-overlay:focus,
a.media-overlay:link,
a.media-overlay:visited {
	color: #fff;
}

.media-overlay.overlay-top {
	bottom: auto;
	justify-content: start;
}

.media-overlay.overlay-bottom {
	top: auto;
	background: #000;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}

.media-action {
	position: absolute;
	display: flex;
	align-items: center;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s;
	z-index: 3;
}

.media-action.active {
	opacity: 1;
}

.media-content {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	border: 0;
	border-radius: inherit;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-color: rgba(120, 120, 120, 0.03);
}

.media-loading {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

.media-content img {
	display: block;
	-o-object-fit: cover;
	object-fit: cover;
	width: 100%;
	height: 100%;
}

.media-21x9:after {
	padding-top: 42.857143%;
}

.media-16x9:after {
	padding-top: 56.25%;
}

.media-4x3:after {
	padding-top: 75%;
}

.media-2x3:after {
	padding-top: 150%;
}

.media-3x2:after {
	padding-top: 66.66666%;
}

.media-3x4:after {
	padding-top: 133.33333%;
}

.media-1x2:after {
	padding-top: 200%;
}

.media-2x1:after {
	padding-top: 50%;
}

.media-3x1:after {
	padding-top: 33%;
}

.media-4x1:after {
	padding-top: 25%;
}

.media-9x16:after {
	padding-top: 177.77778%
}

.media-9x19:after {
	padding-top: 216.66667%
}

.media-1-4:after {
	padding-top: 25vh;
	min-height: 10rem;
}

.media-1-3:after {
	padding-top: 33vh;
	min-height: 12.5rem;
}

.media-1-2:after {
	padding-top: 50vh;
	min-height: 15rem;
}

/*--------------------------------------------------------------
## 8 custom style
--------------------------------------------------------------*/

.custom-hover {
	position: relative;
}

.custom-hover img,
.custom-hover .media-content {
	transition: all 500ms ease-in-out;
}

.custom-hover:hover img,
.custom-hover:hover .media-content {
	transform: scale(1.05);
}

/*--------------------------------------------------------------
## 9 Card style
--------------------------------------------------------------*/
.card,
.block {
	background-color: #fff;
	border: 0;
	border-radius: var(--border-radius-md);
	box-shadow: 0 5px 20px 0 var(--shadow-1);
}

.card-header,
.card-footer {
	background-color: transparent;
	border-color: transparent;
	background-clip: padding-box;
}

.card-header {
	padding: 1.25rem 1.25rem 0;
}

.card-header:first-child {
	border-radius: 0;
}

.card-body {
	padding: 1.25rem;
}

.card-footer {
	padding: 0 1.25rem 1.25rem;
}

.card-md .card-header {
	padding: 2rem 2rem 0;
	margin-bottom: -.75rem;
}

.card-md .card-body {
	padding: 2rem;
}

.card-md .card-footer {
	padding: 0 2rem 2rem;
}

@media (max-width: 767.98px) {
	.card-md .card-header {
		padding: 1rem 1rem 0;
		margin-bottom: -.25rem;
	}

	.card-md .card-body {
		padding: 1rem;
	}
}

@media (min-width: 768px) and (max-width: 991.98px) {
	.card-md .card-header {
		padding: 1.5rem 1.5rem 0;
		margin-bottom: -.375rem;
	}

	.card-md .card-body {
		padding: 1.5rem;
	}
}


/*--------------------------------------------------------------
## 10 List
--------------------------------------------------------------*/

.list-item {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	word-wrap: break-word;
}

.list-content {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	justify-content: center;
	padding: 0 1.25rem;
}

.list-body {
	flex: 1 1 auto;
}

.list-footer {
	margin-top: 0.25rem;
}

.list-footer a {
	opacity: .6;
}

.list-footer a:hover {
	opacity: 1;
}

.list-title {
	display: block;
}

/*--------------------------------------------------------------
## list has ranking
--------------------------------------------------------------*/
.list-item .ranking-num {
	position: absolute;
	right: 0;
	bottom: -5px;
	font-size: 3em;
	font-style: italic;
	line-height: 1;
	opacity: .3;
}

.list-item .ranking-num:before {
	content: 'NO.';
	position:
		absolute;
	right: 100%;
	bottom: 5px;
	font-size: 1rem;
	font-weight: bold;
	opacity: .5;
}

.list-item:first-child .ranking-num {
	color: var(--color-danger);
	opacity: .7;
}

.list-item:nth-child(2) .ranking-num {
	color: #ffac6e;
	opacity: .7;
}

.list-item:nth-child(3) .ranking-num {
	color: #ffd396;
	opacity: .7;
}

/*--------------------------------------------------------------
## line-clamp style
--------------------------------------------------------------*/

.h-1x {
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}

.h-2x {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	white-space: normal;
}

.h-3x {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	white-space: normal;
}

/*--------------------------------------------------------------
## List  
--------------------------------------------------------------*/

.list {
	padding: 0;
}

.list .list-item {
	margin: 0 0 16px;
}

.list .list-item:last-child {
	margin: 0;
}

/*--------------------------------------------------------------
## List grid
--------------------------------------------------------------*/

.list-grid .list-item {
	flex-direction: row;
	padding: 0;
	margin: 0 0 1rem;
}

.list-grid .list-item:last-child {
	margin: 0;
}

.list-grid .list-item .media {
	border-radius: var(--radius-sm);
}

.list-grid .list-item .list-content {
	padding: 0 0 0 1rem;
}

/*--------------------------------------------------------------
## List grid padding 
--------------------------------------------------------------*/

.list-grid.list-grid-padding .list-item {
	padding: 1.25rem;
}

.list-grid.list-grid-padding .list-item .media {
	border-radius: var(--border-radius-sm)
}

.list-grid.list-grid-padding .list-content {
	padding: 0 1rem;
}

.list-grid.list-grid-padding .list-content {
	padding: 0 1.5rem 0 0
}

@media (max-width: 767.98px) {
	.list-grid.list-grid-padding .list-item {
		padding: 1rem
	}

}

@media (min-width: 768px) and (max-width:991.98px) {
	.list-grid.list-grid-padding .list-item {
		padding: 1.25rem
	}
}

@media (min-width: 992px) and (max-width:1199.98px) {
	.list-grid.list-grid-padding .list-item {
		padding: 1.375rem
	}
}

/*--------------------------------------------------------------
## List badges
--------------------------------------------------------------*/
.list-badges {
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	flex-wrap: wrap;
	z-index: 3;
}

.list-badges .badge-vip,
.list-badges .badge-sticky,
.list-badges .badge-tag {
	display: inline-block;
	font-size: 0.625rem;
	font-weight: 400;
	padding: 0.125rem 0.5rem;
	margin-right: 0.25rem;
	border-top-left-radius: var(--border-radius-sm);
	border-top-right-radius: 0;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: var(--border-radius-sm);
	background-color: rgba(0, 0, 0, 0.5);
	color: #fff;
}

.list-badges .badge-sticky {
	background-image: linear-gradient(45deg, #ff3725 0%, #ffa647 100%);
}

.list-badges .badge-vip {
	background-image: linear-gradient(45deg, #ffde98 0%, #fff5c1 100%);
	color: #9c6c00;
}

/*--------------------------------------------------------------
## 11 Header navbar
--------------------------------------------------------------*/

.site-header {
	position: relative;
	height: 80px;
}

.site-header.fixed {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	z-index: 99;
	-webkit-animation: .5s ease-in-out 0s normal none 1 running fadeInDown;
	animation: .5s ease-in-out 0s normal none 1 running fadeInDown;
}

@supports ((-webkit-backdrop-filter: blur(4px)) or (backdrop-filter: blur(4px))) {

	.site-header.fixed,
	.default-layout .site-header.fixed {
		background-color: rgb(255 255 255 / 75%);
		-webkit-backdrop-filter: saturate(120%) blur(4px);
		backdrop-filter: saturate(120%) blur(4px);
	}
}

.site-header .aside-icon {
	position: relative;
}

.site-header .aside-icon b {
	position: relative;
	width: 22px;
	height: 12px;
}

.site-header .aside-icon i {
	position: absolute;
	display: block;
	width: 100%;
	height: 2px;
	background-color: var(--color-muted);
	border-radius: 1px;
	transition: all 0.2s cubic-bezier(0.1, 0.82, 0.76, 0.965);
}

.site-header .aside-icon i:first-of-type {
	top: 0;
}

.site-header .aside-icon i:last-of-type {
	bottom: 0;
}

.site-header .aside-icon.active i:first-of-type {
	transform: rotate(45deg);
	top: 5px;
}

.site-header .aside-icon.active i:last-of-type {
	transform: rotate(-45deg);
	bottom: 5px;
}

.site-header .aside-icon:hover i:first-of-type {
	width: 26px;
}

.site-header .aside-icon:hover i:last-of-type {
	width: 12px;
}

.site-header .aside-icon.active:hover i:first-of-type,
.site-header .aside-icon.active:hover i:last-of-type {
	width: 22px;
}

.default-layout .site-header {
	background-color: #fff;
	box-shadow: var(--shadow);
}

.default-layout .site-header .aside-toggle {
	display: none;
}

@media (min-width: 992px) and (max-width: 1199.98px) {
	.default-layout .site-header .aside-toggle {
		display: block;
	}
}

@media (min-width: 768px) and (max-width: 991.98px) {
	.default-layout .site-header .aside-toggle {
		display: block;
	}
}

@media (max-width: 767.98px) {
	.site-header {
		height: auto;
	}

	.site-header .aside-icon b {
		width: 16px;
		height: 10px;
	}

	.site-header .aside-icon i {
		height: 2px;
	}

	.site-header .aside-icon.active i:first-of-type {
		top: 4px;
	}

	.site-header .aside-icon.active i:last-of-type {
		bottom: 4px;
	}

	.site-header .aside-icon:hover i:first-of-type {
		width: 16px;
	}

	.site-header .aside-icon:hover i:last-of-type {
		width: 10px;
	}

	.site-header .aside-icon.active:hover i:first-of-type,
	.site-header .aside-icon.active:hover i:last-of-type {
		width: 16px;
	}

	.default-layout .site-header .aside-toggle {
		display: block;
	}
}

/*-------------------------------------------------------------- 
## Dropdown
--------------------------------------------------------------*/

.site-dropdown {
	position: relative;
}

.site-dropdown-box {
	position: absolute;
	overflow: hidden;
	top: 90%;
	left: 0;
	min-width: 240px;
	padding: 1rem 0.75rem 1rem 1rem;
	border-radius: var(--border-radius-md);
	background-color: #fff;
	transform: none;
	list-style: none;
	transition: all 0.3s ease 0s;
	box-shadow: 0 0 15px rgb(0 0 0 / 7%);
	display: block;
	visibility: hidden;
	opacity: 0;
	z-index: 1000;
}

.dropdown-sm .site-dropdown-box {
	min-width: 180px;
}

.dropdown-center .site-dropdown-box {
	left: 50%;
	transform: translateX(-50%);
}

.dropdown-end .site-dropdown-box {
	left: auto;
	right: 1px;
}

.site-dropdown-box.show {
	visibility: visible;
	opacity: 1;
	top: 120%;
}

.site-dropdown .dropdown-toggle::after {
	display: none;
}

.user-dropdown-menu li {
	display: block;
	padding: 0.5rem 1rem;
	margin: 0.25rem 0;
	border-radius: var(--border-radius-sm);
	cursor: pointer;
}

/*--------------------------------------------------------------
## 12 Site wrapper
--------------------------------------------------------------*/

.site-wrapper {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	transition: all 0.2s ease-in-out;
}

.site-main {
	position: relative;
}

.default-layout .site-main {
	padding: 2rem 0;
}

.full-layout .site-wrapper {
	padding-left: 16rem;
}

.full-layout .site-wrapper.close {
	padding-left: 0;
}

.full-layout .container {
	max-width: 100%;
}

@media (min-width: 1920px) {
	.full-layout .site-main .container {
		max-width: 1660px;
	}
}

@media (min-width: 992px) and (max-width: 1199.98px) {
	.default-layout .site-main {
		padding: 2rem 0;
	}
}

@media (min-width: 768px) and (max-width: 991.98px) {
	.default-layout .site-main {
		padding: 1.5rem 0;
	}
}

@media (max-width: 767.98px) {
	.default-layout .site-main {
		padding: 1.125rem 0;
	}
}

/*--------------------------------------------------------------
## 13 Nav brand
--------------------------------------------------------------*/

.navbar-brand {
	padding: 0;
	margin: 0;
}

.navbar-brand img {
	max-width: 200px;
	max-height: 50px;
}

.navbar-brand .logo-dark {
	display: none;
}

.site-wrapper.close .navbar-brand {
	display: block;
}

.full-layout .navbar-brand {
	display: none;
}

@media (min-width: 992px) and (max-width: 1199.98px) {
	.navbar-brand {
		display: block !important;
	}
}

@media (min-width: 768px) and (max-width: 991.98px) {
	.navbar-brand {
		display: block !important;
	}
}

@media (max-width: 767.98px) {
	.navbar-brand {
		display: block !important;
	}

	.navbar-brand img {
		max-width: 120px;
		max-height: 45px;
	}
}

/*--------------------------------------------------------------
## 14 Site aside
--------------------------------------------------------------*/

@media (max-width: 1199.98px) {
	.aside-active .mobile-overflow {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: #000;
		opacity: 0.6;
		z-index: 998;
	}
}

.site-aside {
	position: fixed;
	left: 0;
	top: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	width: 15rem;
	transition: all 0.2s ease-in-out;
	z-index: 999;
	transform: translateX(-100%);
}

.site-aside.close {
	transform: translateX(-100%);
}

.site-aside .aside-brand {
	position: relative;
	display: flex;
	align-items: center;
	flex-shrink: 0;
	padding: 0 1.5rem;
	height: 80px;
}

.site-aside .aside-brand img {
	max-height: 50px;
}

.site-aside .aside-brand .logo-dark {
	display: none;
}

.site-aside .aside-body {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: auto;
	padding: 0.75rem 0.5rem 0.75rem 0;
}

.site-aside .aside-trigger {
	position: absolute;
	right: 15px;
	top: 50%;
	width: 8px;
	height: 50px;
	border-radius: 30px;
	background-color: var(--bg-secondary);
	cursor: pointer;
	opacity: 0.3;
	transform: translate(100%, -50%) scale(1);
	transition: all 0.3s ease-in-out;
	z-index: 1000;
}

.site-aside .aside-trigger:hover {
	opacity: 0.5;
	transform: translate(100%, -50%) scale(1.1);
}

.full-layout .site-aside {
	transform: translateX(0%);
}

.full-layout .site-aside.close {
	transform: translateX(-100%);
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
	.full-layout .site-aside {
		width: 14rem;
		transform: translateX(0);
	}

	.full-layout .site-wrapper {
		padding-left: 14.5rem;
	}
}

@media (min-width: 992px) and (max-width: 1199.98px) {
	.aside-active {
		overflow: hidden;
	}

	.site-aside {
		box-shadow: 10px 0px 20px rgb(0 0 0 / 10%);
		background-color: #fff;
	}

	.site-aside.close {
		width: 300px;
		transform: translateX(0);
	}

	.site-aside .aside-brand {
		display: none;
	}

	.full-layout .site-aside {
		transform: translateX(-100%);
	}

	.full-layout .site-aside.close {
		transform: translateX(0%);
	}

	.full-layout .site-wrapper {
		padding-left: 0;
	}
}

@media (max-width: 991.98px) {
	.aside-active {
		overflow: hidden;
	}

	.site-aside {
		background-color: #fff;
	}

	.site-aside.close {
		width: 300px;
		box-shadow: 10px 0px 20px rgb(0 0 0 / 10%);
		transform: translateX(0);
	}

	.site-aside .aside-body {
		padding: 1rem;
	}

	.site-aside .aside-brand {
		display: none;
	}

	.full-layout .site-aside {
		transform: translateX(-100%);
	}

	.full-layout .site-aside.close {
		transform: translateX(0);
	}

	.full-layout .site-wrapper {
		padding-left: 0;
	}
}

@media (max-width: 767.98px) {
	.site-aside .aside-brand {
		padding: 0 1.25rem;
	}
}

/*-------------------------------------------------------------- 
## 15 Main Navigation 
  --------------------------------------------------------------*/

.navbar-site li {
	position: relative;
	margin: 0 0.25rem;
}

.navbar-site li a {
	display: block;
	font-size: 1rem;
	color: var(--color-secondary);
	padding: 0.75rem 0.625rem;
}

.navbar-site>li.menu-item-has-children {
	margin: 0 0.875rem 0 0.25rem;
}

.navbar-site>li:hover a,
.navbar-site>li.current-menu-parent>a,
.navbar-site>li.current-menu-item>a {
	color: var(--color-dark);
}

/* Submenu */
.navbar-site li ul.sub-menu {
	position: absolute;
	left: 0;
	top: 115%;
	z-index: 100;
	padding: .5rem .75rem;
	background: #fff;
	min-width: 220px;
	text-align: left;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-15px);
	transition: all 500ms ease;
	border-radius: 0px;
	border: 0px solid;
	box-shadow: 0 0 15px rgb(0 0 0 / 7%);
	border-radius: var(--border-radius-md);
}

.navbar-site li ul.sub-menu li {
	display: block;
	position: relative;
	margin: 0.25rem 0;
}

.navbar-site li ul.sub-menu li a {
	position: relative;
	display: block;
	padding: 8px 12px;
	transition: all 0.3s ease-in;
	color: var(--color-secondary);
	border-radius: var(--border-radius-sm);
	z-index: 1;
}

.navbar-site li ul.sub-menu li a:hover,
.navbar-site li ul.sub-menu li.current-menu-item>a {
	color: var(--color-dark);
	background: linear-gradient(to right, var(--bg-light), rgba(255, 255, 255, 0));
}

.navbar-site li:hover ul.sub-menu {
	opacity: 1;
	visibility: visible;
	transform: scale(1) translateY(0px);
}

.navbar-site li ul.sub-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: -10px;
	z-index: 999;
	background: #fff;
	transition: 0.5s;
	transition-delay: 0.1s;
	transform: translateX(-20px);
	pointer-events: none;
	visibility: hidden;
	opacity: 0;
}

.navbar-site li ul.sub-menu .sub-menu {
	left: 100%;
	top: -12px;
	transform-origin: left;
}

.navbar-site li ul.sub-menu li:hover>.sub-menu {
	visibility: visible;
	opacity: 1;
	transform: translateX(0);
	transition-delay: 0s;
	pointer-events: all;
}

/*-------------------------------------------------------------- 
## Site submenu icon Navigation 
  --------------------------------------------------------------*/

.navbar-site li.menu-item-has-children>a .menu-sign {
	position: absolute;
	top: 50%;
	right: 0;
	height: 6px;
	width: 6px;
	opacity: 0.3;
	transition: all 0.3s ease;
	transform: translate(25%, -50%) rotate(0deg);
}

.navbar-site li.menu-item-has-children>a .menu-sign:after {
	content: "";
	display: block;
	height: 6px;
	width: 6px;
	border-left: 1px solid #000;
	border-bottom: 1px solid #000;
	transform: rotate(315deg);
	transition: all 0.2s;
}

.navbar-site li.menu-item-has-children>a:hover .menu-sign {
	margin-top: 2px;
}

.navbar-site li.menu-item-has-children>a:hover .menu-sign:after {
	transform: rotate(135deg);
}

.navbar-site li ul.sub-menu li.menu-item-has-children>a .menu-sign {
	margin-top: 0;
	right: 10px;
}

.navbar-site li ul.sub-menu li.menu-item-has-children>a .menu-sign:after {
	transform: rotate(315deg);
}

.navbar-site li ul.sub-menu li.menu-item-has-children:hover .menu-sign:after,
.navbar-site li ul.sub-menu li.menu-item-has-children>a:hover .menu-sign:after {
	transform: rotate(225deg);
}

/*-------------------------------------------------------------- 
## navbar actions 
--------------------------------------------------------------*/
.navbar-actions .dark-toggle .dark {
	display: none;
}

.navbar-actions .dark-toggle.active {
	color: #ffd75a;
}

.navbar-actions .dark-toggle.active:hover {
	background-color: rgba(255, 214, 90, 0.2);
	border-color: rgba(255, 214, 90, 0.2);
}

.navbar-actions .dark-toggle.active .dark {
	display: block;
}

.navbar-actions .dark-toggle.active .light {
	display: none;
}

/*-------------------------------------------------------------- 
## 16 Aside Navigation 
--------------------------------------------------------------*/

.site-aside .aside-menu {
	padding: 0.25rem 0.75rem;
}

.site-aside .aside-menu li {
	position: relative;
}

.site-aside .aside-menu>li {
	padding: 0.25rem 0;
}

.site-aside .aside-menu>li>a:hover,
.site-aside .aside-menu>li.current-menu-item>a,
.site-aside .aside-menu>li.in>a {
	background-color: #fff;
	border-radius: var(--border-radius-sm);
	color: var(--color-primary);
}

.site-aside .aside-menu>li.current-post-ancestor>a,
.site-aside .aside-menu>li.current-menu-ancestor>a,
.site-aside .aside-menu>li.current-menu-parent>a {
	background-color: #fff;
	border-radius: var(--border-radius-sm);
}

.site-aside .aside-menu li a {
	position: relative;
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	padding: 0.625rem 0.9375rem;
	transition: all 0.3s;
}

.site-aside .aside-menu li a:hover {
	opacity: 1;
}

.site-aside .aside-menu>li.current-menu-item>a {
	color: var(--color-primary);
	opacity: 1;
}

.site-aside .aside-menu>li>ul {
	display: none;
	padding: 0.5rem 0 0;
}

.site-aside .aside-menu>li.current-post-ancestor>ul,
.site-aside .aside-menu>li.current-menu-ancestor>ul,
.site-aside .aside-menu>li.current-menu-parent>ul {
	display: block;
}

.site-aside .aside-menu li>ul li {
	padding-top: 0;
	padding-bottom: 0;
}

.site-aside .aside-menu li>ul li a {
	padding: 0.5rem 1.5rem 0.5rem 2.75rem;
}

.site-aside .aside-menu li>ul li a:after {
	position: absolute;
	content: "";
	top: 48%;
	left: 25px;
	width: 6px;
	border-top: 2px solid var(--border-muted);
}

.site-aside .aside-menu li>ul li.current-menu-item a {
	color: var(--color-primary);
	opacity: 1;
}

.site-aside .aside-menu li>ul li ul {
	display: none;
}

.site-aside .aside-menu li>ul li.current-post-ancestor>ul,
.site-aside .aside-menu li>ul li.current-menu-ancestor>ul,
.site-aside .aside-menu li>ul li.current-menu-parent>ul {
	display: block;
}

.site-aside .aside-menu li a .menu-icon {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	width: 1.75rem;
	height: 1.75rem;
	font-size: 1.375rem;
	margin-right: 0.25rem;
}

.site-aside .aside-menu li a .menu-text {
	flex: 1 1 auto;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 1rem;
	padding: 0.125rem 0;
}

.site-aside .aside-menu li a .menu-sign {
	position: relative;
	opacity: 0.5;
	height: 6px;
	width: 6px;
	display: block;
}

.site-aside .aside-menu li a .menu-sign:after {
	content: "";
	display: block;
	height: 6px;
	width: 6px;
	border-left: 1px solid var(--color-muted);
	border-bottom: 1px solid var(--color-muted);
	transform: rotate(225deg);
	transition: all 0.2s;
}

.site-aside .aside-menu li.in>a .menu-sign:after {
	transform: rotate(315deg);
}

@media (max-width: 1199.98px) {
	.site-aside .aside-menu {
		padding: 0.25rem 0.25rem;
	}

	.site-aside .aside-menu li a {
		padding: 0.625rem 0.5rem;
	}

	.site-aside .aside-menu li>ul li a {
		padding: 0.5rem .5rem 0.5rem 2.5rem;
	}
}

/*--------------------------------------------------------------
## 17 Site search
--------------------------------------------------------------*/

.site-search {
	position: relative;
}

.site-search .search-input {
	padding-right: 2.5rem;
	max-width: 150px;
}

.site-search .search-submit {
	position: absolute;
	right: 0;
	bottom: 0;
	top: 0;
	display: flex;
	align-items: center;
	font-size: 1.25rem;
	padding: 0 10px;
	z-index: 1;
}

.site-search .search-input:focus {
	max-width: 250px;
}

@media (max-width: 767.98px) {
	.site-search {
		display: none;
	}
}

/*--------------------------------------------------------------
## 18 Post
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## post content
--------------------------------------------------------------*/

.post-content {
	position: relative;
	font-size: 1rem;
	line-height: 1.85;
	word-break: normal;
	word-wrap: break-word;
}

.post-content>*:first-child {
	margin-top: 0;
}

.post-content>*:last-child {
	margin-bottom: 0;
}

.post-content a:hover,
.post-content a:focus {
	text-decoration: none;
}

.post-content p {
	margin: 0 0 1.5rem;
}

.post-content hr {
	margin: 4rem auto;
}

.post-content p>img {
	border-radius: var(--border-radius-sm);
}

.post-content>.wp-block-cover.alignwide:first-child,
.post-content>.wp-block-cover.alignfull:first-child {
	margin-top: 0;
}

/* Font Families ----------------------------- */
.post-content h2 {
	font-size: 1.5rem;
}

.post-content h1,
.post-content h2,
.post-content h3 {
	margin: 2.5rem auto 1rem;
}

.post-content h4,
.post-content h5,
.post-content h6 {
	margin: 2.5rem auto 1rem;
}

@media (max-width: 767.98px) {

	.post-content h1,
	.post-content h2,
	.post-content h3 {
		margin: 2rem auto 1rem;
	}

	.post-content h4,
	.post-content h5,
	.post-content h6 {
		margin: 2rem auto 1rem;
	}

	.post-content h1 {
		font-size: 1rem;
	}

	.post-content h2,
	.post-content h3,
	.post-content h4,
	.post-content h5,
	.post-content h6 {
		font-size: 1rem;
	}
}

@media (min-width: 768px) and (max-width: 991.98px) {

	.post-content h1,
	.post-content h2,
	.post-content h3 {
		margin: 1rem auto 1rem;
	}

	.post-content h4,
	.post-content h5,
	.post-content h6 {
		margin: 1rem auto 1rem;
	}
}

@media (min-width: 992px) and (max-width: 1199.98px) {

	.post-content h1,
	.post-content h2,
	.post-content h3 {
		margin: 1.5rem auto 1rem;
	}

	.post-content h4,
	.post-content h5,
	.post-content h6 {
		margin: 1.5rem auto 1rem;
	}
}

/* Font link ----------------------------- */

.post-content p>a,
.post-content li>a,
.post-content dd>a,
.post-content td a,
.post-content th a,
.post-content h1 a,
.post-content h2 a,
.post-content h3 a,
.post-content h4 a,
.post-content h5 a,
.post-content h6 a,
.post-content em a,
.post-content strong a {
	box-shadow: 0 -0.0625rem 0 0 var(--bg-primary) inset;
	transition: 0.3s ease-in;
}

.post-content p>a:hover,
.post-content li>a:hover,
.post-content dd>a:hover,
.post-content td a:hover,
.post-content th a:hover,
.post-content h1 a:hover,
.post-content h2 a:hover,
.post-content h3 a:hover,
.post-content h4 a:hover,
.post-content h5 a:hover,
.post-content h6 a:hover,
.post-content em a:hover,
.post-content strong a:hover {
	box-shadow: 0 -0.125rem 0 0 var(--bg-primary) inset;
	opacity: 1;
}

/* Post quote style ----------------------------- */

.wp-block-quote a,
.wp-block-quote p>a {
	border-color: var(--border-light);
}

.wp-block-quote a,
.wp-block-quote a:hover {
	color: inherit;
}

/* Alignment Classes ------------------------- */

.post-content .alignnone,
.wp-block-image,
.wp-block-embed {
	margin: 2.5rem 0;
}

.alignright,
a img.alignright,
.wp-block-image .alignright {
	float: right;
	margin: 0.25rem 0 1.25rem 1.875rem;
}

.alignleft,
a img.alignleft,
.wp-block-image .alignleft {
	float: left;
	margin: 0.25rem 1.875rem 1.25rem 0;
}

.aligncenter,
div.aligncenter {
	display: block;
	margin: 2.5rem auto;
}

.aligncenter>img,
div.aligncenter>img {
	margin: 0 auto;
}

p img.alignnone,
img.alignnone {
	display: block;
	margin: 2.5rem 0;
}

/*--------------------------------------------------------------
## Ul - style 
--------------------------------------------------------------*/

.post-content ul,
.post-content ol {
	padding: 0 0 0 1.25rem;
	margin-bottom: 1.5rem;
}

.post-content ul {
	list-style: disc;
}

.post-content ul ul,
.post-content ol ol,
.post-content ul ol,
.post-content ol ul {
	margin-bottom: 1rem;
}

.post-content ul ul {
	list-style: circle;
	margin: 0.75rem 0;
}

.post-content ul ul ul {
	list-style: square;
}

.post-content ol {
	list-style: decimal;
}

.post-content ol ol {
	list-style: lower-alpha;
}

.post-content ol ol ol {
	list-style: lower-roman;
}

.post-content li {
	line-height: 1.5;
	margin: 0 0 1rem;
}

.post-content li li {
	margin: 0 0 0.5rem;
}

.post-content li img {
	display: inline-block;
}

/*--------------------------------------------------------------
## block table style
--------------------------------------------------------------*/

.post-content table {
	margin: 2rem 0;
}

.wp-block-table {
	margin: 0;
}

.wp-block-table.aligncenter,
.wp-block-table.alignleft,
.wp-block-table.alignright {
	display: table;
	width: auto;
}

.wp-block-table.aligncenter td,
.wp-block-table.aligncenter th,
.wp-block-table.alignleft td,
.wp-block-table.alignleft th,
.wp-block-table.alignright td,
.wp-block-table.alignright th {
	word-break: break-word;
}

.wp-block-table.is-style-stripes {
	border-spacing: 0;
	border-collapse: inherit;
	background-color: transparent;
	border-bottom: 1px solid var(--border-light);
}

.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background-color: var(--bg-light);
}

.wp-block-table.is-style-stripes td,
.wp-block-table.is-style-stripes th {
	border-color: transparent;
}

.wp-block-table table[style*="border-style"]>*,
.wp-block-table table[style*="border-style"] td,
.wp-block-table table[style*="border-style"] th,
.wp-block-table table[style*="border-style"] tr {
	border-style: inherit;
}

.wp-block-table table[style*="border-width"]>*,
.wp-block-table table[style*="border-width"] td,
.wp-block-table table[style*="border-width"] th,
.wp-block-table table[style*="border-width"] tr {
	border-width: inherit;
}

/*--------------------------------------------------------------
## post excerpt
--------------------------------------------------------------*/

.post-excerpt {
	position: relative;
	font-size: 1rem;
	line-height: 1.85;
	word-break: normal;
	word-wrap: break-word;
}

/**--------------------------------------------------------------
## Post hidden tips
--------------------------------------------------------------**/

.post-password-content {
	position: relative;
}

.post-password-content form {
	max-width: 400px;
	margin: 0 auto;
}

/*--------------------------------------------------------------
## Post actions
--------------------------------------------------------------*/
@media (max-width: 767.98px) {
	.post-actions .btn {
		width: 2.125rem;
		height: 2.125rem;
		font-size: 1.125rem;
	}
}

/*--------------------------------------------------------------
## Post tags
--------------------------------------------------------------*/
.post-tags {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.post-tags span {
	position: relative;
	margin: 0 .5rem .5rem 0;
}

.post-tags span i {
	display: block;
	position: absolute;
	top: 50%;
	left: 12px;
	transform: translateY(-50%);
	opacity: .5;
	z-index: 1;
}

.post-tags span a {
	position: relative;
	display: block;
	font-size: 0.8125rem;
	color: var(--color-muted);
	padding: 0.375rem .875rem 0.375rem 2rem;
	background-color: var(--btn-light);
	border-radius: 100px;
}

.post-tags span a:hover {
	color: var(--color-primary);
}

/* -------------------------------- 
## Pagination style 
-------------------------------- */

.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	width: 1px;
	height: 1px;
	overflow: hidden;
	position: absolute !important;
	word-wrap: normal !important;
}

.pagination {
	position: relative;
	display: block;
	margin: 2rem 0 0;
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	width: 100%;
}

.page-numbers,
.post-page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	font-size: 1rem;
	font-family: 'DINAlternate-Bold', arial, sans-serif;
	text-align: center;
	padding: 0 0.375rem;
	margin: 0.125rem;
	background-color: var(--btn-light);
	color: var(--color-muted);
	border-radius: var(--border-radius-sm);
}

.page-numbers:hover,
.page-numbers.current,
.post-page-numbers:hover,
.post-page-numbers.current {
	color: #fff;
	background-color: var(--btn-primary);
}

.page-numbers.dots {
	min-width: auto;
	height: 2.5rem;
	text-align: center;
	padding: 0 0.375rem;
	margin: 0.125rem;
	background-color: transparent;
	border-radius: 0;
}

.page-numbers.dots:hover {
	color: var(--color-muted);
	background-color: transparent;
}

@media (max-width: 767.98px) {
	.pagination {
		margin: 1rem 0 0;
	}

	.page-numbers {
		min-width: 2rem;
		height: 2rem;
		font-size: 1rem;
		margin: 0.125rem;
	}
}

/*--------------------------------------------------------------
## Post load style
--------------------------------------------------------------*/

.posts-ajax-load {
	position: relative;
	text-align: center;
	margin-top: 2rem;
}

.loading-more-spinners {
	position: relative;
	display: none;
	width: 32px;
	height: 32px;
	border: 4px solid rgba(0, 0, 0, 0.2);
	border-top: 4px solid var(--bg-dark);
	border-radius: 50%;
	margin: 20px auto;
	-webkit-animation: spCircRot 0.6s infinite linear;
	animation: spCircRot 0.6s infinite linear;
}

@-webkit-keyframes spCircRot {
	from {
		-webkit-transform: rotate(0deg);
	}

	to {
		-webkit-transform: rotate(359deg);
	}
}

@keyframes spCircRot {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(359deg);
	}
}

@media (max-width: 767.98px) {
	.posts-ajax-load {
		margin-top: 2rem;
	}
}

/*--------------------------------------------------------------
## Toc
--------------------------------------------------------------*/
.post-toc.is-collapsible {
	transition: all 300ms ease-in-out;
}

.post-toc.is-collapsed {
	max-height: 0;
	display: none;
}

.post-toc.is-position-fixed {
	visibility: visible;
	opacity: 1;
	position: -webkit-sticky;
	position: sticky;
	top: 1.5rem;
	-webkit-animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
	animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
}

.post-toc ol {
	position: relative;
}

.post-toc ol:before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 5px;
	border-radius: 10px;
	background-color: var(--bg-light);
}

.post-toc ol li {
	position: relative;
	margin: 0 0 10px;
	padding: 0 20px;
}

.post-toc ol li:last-child {
	margin: 0;
}

.post-toc ol li a {
	position: relative;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}

.post-toc ol li::before {
	content: " ";
	display: block;
	position: absolute;
	left: 0px;
	top: 0;
	bottom: 0;
	width: 5px;
	border-radius: 10px;
}

.post-toc ol>li.is-active-li::before {
	background-color: var(--bg-primary);
	bottom: auto;
	height: 25px;
}

.post-toc ol li ol {
	padding: 0;
	margin: 10px 0 0;
}

.post-toc ol li ol:before {
	display: none;
}

.post-toc ol li ol li {
	padding: 0 0 0 14px;
}

.post-toc ol li ol li::before {
	left: -20px;
}

.post-toc ol li ol li li::before {
	left: -34px;
}

.post-toc ol li ol.is-active-li::before {
	border-radius: 10px;
	background-color: var(--bg-primary);
}

/*--------------------------------------------------------------
## Post downloads
--------------------------------------------------------------*/
.like-action.active {
	color: var(--color-danger);
	opacity: 1;
}

.collect-action.active {
	color: var(--color-dark);
	opacity: 1;
}

.like-button.active {
	border-color: var(--bg-danger);
	background-color: var(--bg-danger);
	color: #fff;
}

.like-button .icon-xihuan_like1 {
	display: none;
}

.like-button.active .icon-xihuan_like1 {
	display: block;
}

.like-button.active .icon-xihuan_like {
	display: none;
}

.collect-button .icon-xingxing_star {
	display: none;
}

.collect-button.active {
	border-color: var(--bg-dark);
	background-color: var(--bg-dark);
	color: #fff;
}

.collect-button.active .icon-a-xingxing_star1 {
	display: none;
}

.collect-button.active .icon-xingxing_star {
	display: block;
}

.downlaod-button.vip {
	background-color: #f9dea2;
	border-color: #f9dea2;
	color: #6b3714;
}

.price-button {
	background: linear-gradient(90deg, #ff7a53, #ff3a22);
	color: #fff;
	border: 0;
}

.price-button:focus,
.price-button:active,
.price-button:hover {
	color: #fff;
	opacity: .8;
}

/* -------------------------------- 
## 18 Widget style 
-------------------------------- */
.widget {
	position: relative;
	padding: 1.375rem 1.5rem;
}

.widget-header {
	margin-bottom: 1rem;
}

/*--------------------------------------------------------------
## Widget search style
--------------------------------------------------------------*/

.widget_search .search-form {
	position: relative;
}

.widget_search .search-form label {
	display: block;
	margin: 0;
}

.widget_search .search-form .search-field {
	width: 100%;
	padding: 0.5rem 0.75rem;
	background-color: var(--bg-light);
	border: 1px solid var(--bg-light);
	border-radius: var(--border-radius-sm);
	outline: none !important;
	box-shadow: none !important;
}

.widget_search .search-form .search-submit {
	display: none;
}

/*--------------------------------------------------------------
## Widget_recent_entries  style
--------------------------------------------------------------*/

.widget_recent_entries ul {
	padding-left: 1.5rem;
}

.widget_recent_entries ul li {
	margin-bottom: 0.5rem;
	list-style-type: circle;
}

.widget_recent_entries ul li a {
	display: block;
}

.widget_recent_entries ul li span {
	color: #8a92a9;
	font-size: 0.75rem;
}

/*--------------------------------------------------------------
## widget categories + tagcloud style
--------------------------------------------------------------*/

.widget_categories ul {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin: -0.375rem;
}

.widget_categories ul li {
	position: relative;
	display: flex;
	align-items: center;
	font-size: 0.75rem;
	margin: 0.25rem;
	padding: 0.375rem 0.875rem;
	color: var(--color-muted);
	border: 1px solid var(--outline-light);
	background-color: var(--outline-light);
	border-radius: var(--border-radius-sm);
}

.widget_categories ul li a {
	display: block;
	font-size: 0.875rem;
}

.widget_categories ul li:hover {
	border-color: var(--outline-primary);
	background-color: var(--outline-primary);
}

.widget_categories ul li:hover a {
	color: var(--color-primary);
}

.widget_categories .postform {
	width: 100%;
	padding: 0.5rem 0.75rem;
	border-radius: var(--border-radius-sm);
	border-color: var(--border-light);
	outline: 0;
}

.widget_categories .postform:active,
.widget_categories .postform:focus {
	border-color: var(--border-muted);
}

/*--------------------------------------------------------------
## widget tagcloud style
--------------------------------------------------------------*/
.tagcloud {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin: -0.375rem;
}

.tagcloud a {
	font-size: 0.875rem !important;
	padding: 0.375rem 0.75rem;
}

.tagcloud a {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0.25rem;
	padding: 0.375rem 0.875rem;
	color: var(--color-muted);
	border: 1px solid var(--outline-light);
	background-color: var(--outline-light);
	border-radius: var(--border-radius-sm);
}

.tagcloud a:hover {
	color: var(--color-primary);
	border-color: var(--outline-primary);
	background-color: var(--outline-primary);
}

.tagcloud a span {
	font-size: 0.75rem;
	color: var(--color-muted);
}

/*--------------------------------------------------------------
## widget other style
--------------------------------------------------------------*/
.widget_meta li,
.widget_archive li {
	position: relative;
	font-size: 0.875rem;
	color: var(--color-secondary);
	padding: 0.75rem 0;
	text-transform: uppercase;
	border-top: 1px solid var(--bg-light);
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	text-align: justify;
	justify-content: space-between;
}

.widget_archive select {
	width: 100%;
	font-size: 1rem;
	padding: 0.625rem 1rem;
	color: var(--color-muted);
	background-color: var(--bg-light);
	border-color: var(--bg-light);
	border-radius: var(--border-radius-sm);
}

/*--------------------------------------------------------------
## widget blogroll style
--------------------------------------------------------------*/
.blogroll li {
	position: relative;
	display: flex;
	flex-direction: column;
	font-size: 0.75rem;
	padding: 0.75rem 3.5rem 0.75rem 1rem;
	color: var(--color-muted);
	background-color: var(--bg-light);
	border-radius: var(--border-radius-sm);
	margin-bottom: 1rem;
}

.blogroll li:last-child {
	margin-bottom: 0;
}

.blogroll li a {
	font-size: 0.875rem;
	text-transform: uppercase;
}

.blogroll li a img {
	position: absolute;
	top: 50%;
	right: 0.75rem;
	width: 2.5rem;
	height: 2.5rem;
	-o-object-fit: cover;
	object-fit: cover;
	transform: translateY(-50%);
}

/*--------------------------------------------------------------
## widget_media_image style
--------------------------------------------------------------*/

.widget_media_image img {
	max-width: 100%;
	height: auto;
	width: auto;
}

/*--------------------------------------------------------------
## widget_recent_comments style
--------------------------------------------------------------*/

.widget_recent_comments ul li {
	font-size: 0.875rem;
	padding: 0.75rem 0;
	text-transform: uppercase;
	border-top: 1px solid var(--border-light);
}

.widget_recent_comments ul li span {
	margin-right: 5px;
}

.widget_recent_comments ul li:first-child {
	border-top: 0;
	padding-top: 0;
}

.widget_recent_comments ul li:last-child {
	padding-bottom: 0;
}

/*--------------------------------------------------------------
## widget_recent_comments style
--------------------------------------------------------------*/

.widget_nav_menu ul li {
	position: relative;
	text-transform: none;
	margin-bottom: 0.5rem;
}

.widget_nav_menu ul li:last-child {
	margin-bottom: 0;
}

.widget_nav_menu ul li a {
	display: block;
	padding: 0.5rem 0.875rem;
	background-color: var(--bg-light);
	border-radius: var(--border-radius-sm);
}

.widget_nav_menu ul li.menu-item-has-children::after {
	content: "";
	display: block;
	position: absolute;
	top: 15px;
	right: 15px;
	height: 6px;
	width: 6px;
	border-left: 1px solid var(--border-secondary);
	border-bottom: 1px solid var(--border-secondary);
	transform: rotate(315deg);
	transition: all 0.2s;
}

.widget_nav_menu ul li.menu-item-has-children:hover::after {
	margin-top: 2px;
	transform: rotate(135deg);
}

.widget_nav_menu ul li ul {
	margin-top: 0.5rem;
}

.widget_nav_menu ul li>ul {
	display: none;
}

.widget_nav_menu ul li:hover>ul {
	display: block;
}

.widget_nav_menu ul li>ul ul li a {
	background-color: var(--bg-light);
}

/*--------------------------------------------------------------
## widget_media_gallery style
--------------------------------------------------------------*/

.widget_media_gallery .gallery {
	padding: 0.75rem 0.75rem 0;
	margin-bottom: 0;
}

.widget_media_gallery .gallery-caption {
	padding: 0.25rem;
}

/*--------------------------------------------------------------
## widget_rss style
--------------------------------------------------------------*/

.widget_rss .widget-title .rsswidget:first-child {
	float: right;
}

.widget_rss ul li {
	text-transform: uppercase;
	margin-bottom: 10px;
	padding-top: 12px;
	border-top: 1px solid var(--border-light);
}

.widget_rss ul li:first-child {
	border: none;
	padding-top: 0;
}

.widget_rss ul li .rsswidget {
	font-size: 0.75rem;
	display: block;
}

.widget_rss ul li .rss-date {
	font-size: 0.75rem;
	color: var(--color-secondary);
}

.widget_rss ul li .rssSummary {
	font-size: 0.75rem;
	margin-top: 5px;
	color: var(--color-secondary);
}

.widget_rss ul li cite {
	font-size: 0.75rem;
	font-style: normal;
	color: var(--color-muted);
}

/*--------------------------------------------------------------
## searchform style
--------------------------------------------------------------*/

.searchform {
	position: relative;
}

.searchform label {
	display: none;
}

.searchform input[type="submit"] {
	position: absolute;
	bottom: 0;
	right: 0;
	top: 0;
	border: 0;
	border-radius: 0;
	padding: 0 1.25rem;
	color: #fff;
	background-color: var(--bg-dark);
	transition: all 0.3s ease;
}

.searchform input[type="submit"]:hover {
	background-color: var(--bg-dark);
}

.searchform input[type="text"] {
	width: 100%;
}

/*--------------------------------------------------------------
## widget_media_image style
--------------------------------------------------------------*/

.widget_media_image img {
	max-width: 100%;
	height: auto;
}

/*--------------------------------------------------------------
## widget_calendar style
--------------------------------------------------------------*/

.widget_calendar table {
	border-collapse: collapse;
	margin: 0 0 0.5rem;
	width: 100%;
	caption-side: top;
}

.widget_calendar caption {
	border: 0;
	border-bottom: 0;
	padding: 0.625rem 0;
}

.widget_calendar caption {
	padding: 0.25rem 0;
}

.widget_calendar th,
.widget_calendar td {
	text-align: center;
	padding: 0.25rem 0.5rem;
}

@media (min-width: 992px) and (max-width: 1399.98px) {

	.widget_calendar th,
	.widget_calendar td {
		text-align: center;
		padding: 0.125rem 0.125rem;
	}
}

.widget_calendar tbody td a {
	position: relative;
}

.widget_calendar tbody td a::after {
	content: "";
	position: absolute;
	width: 0.375rem;
	height: 0.375rem;
	background: var(--bg-dark);
	border-radius: var(--border-radius-lg);
	bottom: -0.375rem;
	left: 50%;
	margin-left: -0.1875rem;
}

.widget_calendar td#today {
	font-weight: bold;
	color: var(--color-primary);
}

.widget_calendar tfoot {
	border: 1px solid var(--border-light);
	border-top: 0;
}

.widget_calendar tfoot td {
	border: 0;
}

.widget_calendar .wp-calendar-nav {
	font-size: 0.75rem;
}

/*--------------------------------------------------------------
## widget_rss style
--------------------------------------------------------------*/

.widget_rss .widget-title .rsswidget:first-child {
	float: right;
}

.widget_rss ul li {
	text-transform: uppercase;
	margin-bottom: 10px;
	padding-top: 0.75rem;
	border-top: 0.0625rem solid var(--border-light);
}

.widget_rss ul li:first-child {
	border: none;
	padding-top: 0;
}

.widget_rss ul li .rsswidget {
	font-size: inherit;
	display: block;
}

.widget_rss ul li .rss-date {
	font-size: inherit;
	color: var(--color-muted);
}

.widget_rss ul li .rssSummary {
	font-size: inherit;
	margin-top: 0.3125rem;
	color: var(--color-secondary);
}

.widget_rss ul li cite {
	font-size: inherit;
	font-style: normal;
	color: var(--color-muted);
}

/* -------------------------------- 
## widget hot tags style 
-------------------------------- */

.widget_hot_tags .category-tags {
	margin: -.25rem;
}

.widget_hot_tags .category-tags li {
	padding: .25rem;
	margin: 0
}

.widget_hot_tags .category-tags li a {
	padding: 0.375rem .75rem 0.375rem .5rem;
}

.widget_hot_tags .category-tags li a .category-name {
	display: flex;
	align-items: center;
}

.widget_hot_tags .category-tags li a small {
	line-height: 1.2;
}

.widget_hot_tags .category-tags li.hot a {
	background-color: rgb(255 38 38 / 5%);
	color: var(--color-danger);
	border-color: rgb(255 38 38 / 10%);
}

.widget_hot_tags .category-tags li.hot small {
	background-color: var(--bg-danger);
	color: #fff;
}

.widget_hot_tags .category-tags li .category-icon {
	font-size: 1rem;
}

.widget_hot_tags .category-tags.category_style2 {
	flex-direction: column;
	margin: -.5rem 0;
}

.widget_hot_tags .category-tags.category_style2 li {
	padding: .5rem 0;
}

.widget_hot_tags .category-tags.category_style2 li a {
	position: relative;
	overflow: hidden;
	padding: 1rem 1.5rem;
	border: 0;
}

.widget_hot_tags .category-tags.category_style2 li a .category-poster {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	transition: all 0.3s ease-in-out;
}

.widget_hot_tags .category-tags.category_style2 li:hover .category-poster {
	transform: scale(1.1);
}

.widget_hot_tags .category-tags.category_style2 li a .category-poster::after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	opacity: .4;
}

.widget_hot_tags .category-tags.category_style2 li a .category-name {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex: 1 1 auto;
	color: #fff;
	z-index: 1;
}

.widget_hot_tags .category-tags.category_style2 li a .category-text {
	position: relative;
}

.widget_hot_tags .category-tags.category_style2 li a .category-name small {
	background-color: rgba(255, 255, 255, 0.3);
	color: #fff;
}

.widget_hot_tags .category-tags.category_style2 li.hot a {
	background-color: transparent;
	color: #fff;
}

.widget_hot_tags .category-tags.category_style2 li.hot a .category-text::after {
	content: '';
	position: absolute;
	display: block;
	right: 0;
	top: 50%;
	width: 30px;
	height: 18px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MCIgaGVpZ2h0PSIyMSIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0idXJsKCNhKSIgZD0iTTAgNGE0IDQgMCAwIDEgNC00aDQyYTQgNCAwIDAgMSA0IDR2MTNhNCA0IDAgMCAxLTQgNEg0YTQgNCAwIDAgMS00LTRWNFoiLz48cGF0aCBmaWxsPSIjZmZmIiBkPSJNNi4yODYgOS4zNDVoOC4wM1Y0LjE3NmgyLjI4NnYxMi42NDhoLTIuMjg3di01LjE2OUg2LjI4NnY1LjE2OUg0VjQuMTc2aDIuMjg2djUuMTY5Wk0zMi41MTkgMTEuNzA4YzAgLjc3LS4xMzIgMS40NzktLjM5NiAyLjEyNmE1LjAzOSA1LjAzOSAwIDAgMS0xLjEgMS42NzUgNS4wMiA1LjAyIDAgMCAxLTEuNjcgMS4xMDNBNS41MjYgNS41MjYgMCAwIDEgMjcuMjYgMTdoLTMuMDk1Yy0uNzU3IDAtMS40NTctLjEzLTIuMTAyLS4zODhhNS4wMiA1LjAyIDAgMCAxLTEuNjcxLTEuMTAyIDUuMTUyIDUuMTUyIDAgMCAxLTEuMTA4LTEuNjc2IDUuNTc2IDUuNTc2IDAgMCAxLS4zOTYtMi4xMjZWOS4yOTJjMC0uNzY1LjEzMi0xLjQ3LjM5Ni0yLjExN2E1LjAzIDUuMDMgMCAwIDEgMS4xMDgtMS42NzYgNS4wMjIgNS4wMjIgMCAwIDEgMS42Ny0xLjEwMkE1LjQ4NCA1LjQ4NCAwIDAgMSAyNC4xNjYgNGgzLjA5NWMuNzU2IDAgMS40NTQuMTMyIDIuMDkzLjM5N2E1LjAyMiA1LjAyMiAwIDAgMSAxLjY3IDEuMTAyIDQuOTIyIDQuOTIyIDAgMCAxIDEuMSAxLjY3NmMuMjY0LjY0Ny4zOTYgMS4zNTIuMzk2IDIuMTE3djIuNDE2Wm0tMi4yODctMi40MTZjMC0uNDUzLS4wNzMtLjg2Mi0uMjItMS4yMjZhMi41ODkgMi41ODkgMCAwIDAtLjYwNi0uOTQ0IDIuNTggMi41OCAwIDAgMC0uOTQxLS42MDggMy4xODYgMy4xODYgMCAwIDAtMS4yMDUtLjIyaC0zLjA5NWMtLjQ0NiAwLS44NTMuMDczLTEuMjIzLjIyYTIuNjgxIDIuNjgxIDAgMCAwLS45NC42MDhjLS4yNjUuMjU5LS40Ny41NzMtLjYxNi45NDQtLjE0MS4zNjQtLjIxMS43NzMtLjIxMSAxLjIyNnYyLjQxNmMwIC40NTMuMDcuODY1LjIxIDEuMjM1LjE0Ny4zNjUuMzUyLjY4LjYxNi45NDQuMjY0LjI1OC41NzguNDYxLjk0MS42MDhhMy40IDMuNCAwIDAgMCAxLjIyMy4yMTJoMy4wNzhjLjQ0NSAwIC44NS0uMDcgMS4yMTMtLjIxMi4zNy0uMTQ3LjY4Ni0uMzUuOTUtLjYwOC4yNjQtLjI2NS40NjYtLjU4LjYwNy0uOTQ0LjE0Ni0uMzcuMjItLjc4Mi4yMi0xLjIzNVY5LjI5MlpNNDYgNi40N2gtNS4wMzl2MTAuMzU0aC0yLjI4NlY2LjQ2OWgtNS4wNDhWNC4xNzZINDZWNi40N1oiLz48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImEiIHgxPSI0NC4wNDgiIHgyPSI5LjEwNyIgeTE9Ii41IiB5Mj0iMjYuMjc2IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHN0b3Agc3RvcC1jb2xvcj0iI0ZGN0I1MSIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI0ZGMEUwRSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjwvc3ZnPg==');
	transform: translate(115%, -50%);
}

/* -------------------------------- 
## widget authors style 
-------------------------------- */
.widget-authors .avatar-color {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
}

.widget-authors .avatar-color::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: linear-gradient(135deg, #514eff 0%, #582aff 30%, #a515ff 80%, #e74eff);
	transition: all 500ms ease-in-out;
}

.widget-authors .avatar-color.vip::before {
	background: linear-gradient(135deg, #ff3636 0%, #ff6a54 30%, #ffd39d 80%, #ffcd90);
}

.widget-authors .avatar-color .flex-avatar {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 42px;
	height: 42px;
	background-color: #fff;
	border-radius: 50%;
	z-index: 1;
}

.widget-authors .avatar-color .flex-avatar img {
	width: 36px;
	height: 36px;
}

.widget-authors .item {
	margin-bottom: 1rem;
}

.widget-authors .item:last-child {
	margin-bottom: 0;
}

.widget-authors .item .item-content {
	padding: 0 1rem;
}

.widget-authors .item .item-hot-badge {
	display: block;
	flex-shrink: 0;
	width: 30px;
	height: 18px;
	margin-left: auto;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MCIgaGVpZ2h0PSIyMSIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0idXJsKCNhKSIgZD0iTTAgNGE0IDQgMCAwIDEgNC00aDQyYTQgNCAwIDAgMSA0IDR2MTNhNCA0IDAgMCAxLTQgNEg0YTQgNCAwIDAgMS00LTRWNFoiLz48cGF0aCBmaWxsPSIjZmZmIiBkPSJNNi4yODYgOS4zNDVoOC4wM1Y0LjE3NmgyLjI4NnYxMi42NDhoLTIuMjg3di01LjE2OUg2LjI4NnY1LjE2OUg0VjQuMTc2aDIuMjg2djUuMTY5Wk0zMi41MTkgMTEuNzA4YzAgLjc3LS4xMzIgMS40NzktLjM5NiAyLjEyNmE1LjAzOSA1LjAzOSAwIDAgMS0xLjEgMS42NzUgNS4wMiA1LjAyIDAgMCAxLTEuNjcgMS4xMDNBNS41MjYgNS41MjYgMCAwIDEgMjcuMjYgMTdoLTMuMDk1Yy0uNzU3IDAtMS40NTctLjEzLTIuMTAyLS4zODhhNS4wMiA1LjAyIDAgMCAxLTEuNjcxLTEuMTAyIDUuMTUyIDUuMTUyIDAgMCAxLTEuMTA4LTEuNjc2IDUuNTc2IDUuNTc2IDAgMCAxLS4zOTYtMi4xMjZWOS4yOTJjMC0uNzY1LjEzMi0xLjQ3LjM5Ni0yLjExN2E1LjAzIDUuMDMgMCAwIDEgMS4xMDgtMS42NzYgNS4wMjIgNS4wMjIgMCAwIDEgMS42Ny0xLjEwMkE1LjQ4NCA1LjQ4NCAwIDAgMSAyNC4xNjYgNGgzLjA5NWMuNzU2IDAgMS40NTQuMTMyIDIuMDkzLjM5N2E1LjAyMiA1LjAyMiAwIDAgMSAxLjY3IDEuMTAyIDQuOTIyIDQuOTIyIDAgMCAxIDEuMSAxLjY3NmMuMjY0LjY0Ny4zOTYgMS4zNTIuMzk2IDIuMTE3djIuNDE2Wm0tMi4yODctMi40MTZjMC0uNDUzLS4wNzMtLjg2Mi0uMjItMS4yMjZhMi41ODkgMi41ODkgMCAwIDAtLjYwNi0uOTQ0IDIuNTggMi41OCAwIDAgMC0uOTQxLS42MDggMy4xODYgMy4xODYgMCAwIDAtMS4yMDUtLjIyaC0zLjA5NWMtLjQ0NiAwLS44NTMuMDczLTEuMjIzLjIyYTIuNjgxIDIuNjgxIDAgMCAwLS45NC42MDhjLS4yNjUuMjU5LS40Ny41NzMtLjYxNi45NDQtLjE0MS4zNjQtLjIxMS43NzMtLjIxMSAxLjIyNnYyLjQxNmMwIC40NTMuMDcuODY1LjIxIDEuMjM1LjE0Ny4zNjUuMzUyLjY4LjYxNi45NDQuMjY0LjI1OC41NzguNDYxLjk0MS42MDhhMy40IDMuNCAwIDAgMCAxLjIyMy4yMTJoMy4wNzhjLjQ0NSAwIC44NS0uMDcgMS4yMTMtLjIxMi4zNy0uMTQ3LjY4Ni0uMzUuOTUtLjYwOC4yNjQtLjI2NS40NjYtLjU4LjYwNy0uOTQ0LjE0Ni0uMzcuMjItLjc4Mi4yMi0xLjIzNVY5LjI5MlpNNDYgNi40N2gtNS4wMzl2MTAuMzU0aC0yLjI4NlY2LjQ2OWgtNS4wNDhWNC4xNzZINDZWNi40N1oiLz48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImEiIHgxPSI0NC4wNDgiIHgyPSI5LjEwNyIgeTE9Ii41IiB5Mj0iMjYuMjc2IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHN0b3Agc3RvcC1jb2xvcj0iI0ZGN0I1MSIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI0ZGMEUwRSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjwvc3ZnPg==');
}

/* -------------------------------- 
## widget comments 
-------------------------------- */
.widget-comments .avatar-color {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
}

.widget-comments .avatar-color::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: linear-gradient(135deg, #514eff 0%, #582aff 30%, #a515ff 80%, #e74eff);
	transition: all 500ms ease-in-out;
}

.widget-comments .avatar-color.vip::before {
	background: linear-gradient(135deg, #ff3636 0%, #ff6a54 30%, #ffd39d 80%, #ffcd90);
}

.widget-comments .avatar-color .flex-avatar {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 42px;
	height: 42px;
	background-color: #fff;
	border-radius: 50%;
	z-index: 1;
}

.widget-comments .avatar-color .flex-avatar img {
	width: 36px;
	height: 36px;
}

.widget-comments .item {
	display: flex;
	flex-direction: row;
	margin-bottom: 1rem;
}

.widget-comments .item:last-child {
	margin-bottom: 0;
}

.widget-comments .item .comment-details {
	flex: 1 1 auto;
	flex-direction: column;
	padding: .25rem 0 0;
	    word-break: break-all;
}

/* -------------------------------- 
## Widget prompt style 
-------------------------------- */
.prompt-block .prompt-content {
	overflow: auto;
	height: 66px;
	scrollbar-width: thin;
}

.prompt-block .prompt-content::-webkit-scrollbar {
	width: 4px;
}

.prompt-block .prompt-content::-webkit-scrollbar-thumb {
	border-radius: 4px;
}

.prompt-block .prompt-content:hover::-webkit-scrollbar-thumb {
	background-color: rgba(0, 0, 0, 0.3);
}

@media (max-width: 767.98px) {
	.prompt-block {
		padding: 1rem;
	}
}

/* -------------------------------- 
## Widget prompt data style 
-------------------------------- */
.generation-data-block ul {
	margin-top: -0.5rem;
	margin-bottom: -0.5rem;
}

.generation-data-block ul li {
	display: flex;
	justify-content: space-between;
	padding: 0.75rem 0;
	border-top: 1px solid var(--border-light);
}

.generation-data-block ul li:first-child {
	border-top: 0;
}

.generation-data-block ul li:last-child {
	border-bottom: 0;
}

/* -------------------------------- 
## 19 Breadcrumbs style 
-------------------------------- */

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

.breadcrumbs a,
.breadcrumbs span.current {
	font-size: 0.8125rem;
	line-height: 1;
	padding: 4px 8px;
	color: var(--color-muted);
	background: linear-gradient(to right, var(--bg-light), rgba(255, 255, 255, 0));
	border-radius: 100px;
}

.breadcrumbs span.sep {
	line-height: 1;
	padding: 0;
	margin: 0 0.25rem;
	background-color: transparent;
	border-radius: 0;
	opacity: 0.2;
}

.breadcrumbs span.current {
	color: var(--color-dark);
}

@media (max-width: 991.98px) {

	.breadcrumbs a,
	.breadcrumbs span.current {
		padding: 3px 10px;
	}

	.single .breadcrumbs span:nth-last-child(1),
	.single .breadcrumbs span:nth-last-child(2) {
		display: none;
	}
}

/*--------------------------------------------------------------
## 20 comments
--------------------------------------------------------------*/

#comments .comment-body {
	position: relative;
	display: flex;
	flex: 1 1 auto;
}

#comments .comment-avatar {
	width: 48px;
	height: 48px;
}

#comments .comment-content {
	flex: 1 1 auto;
}

#comments .comment-author {
	margin: 0 0 0.25rem;
}

.comment-respond .comment {
	margin-top: 1.25rem;
}

.comment-list .comment {
	position: relative;
	margin-bottom: 1.25rem;
}

.comment-list .comment-respond {
	background-color: #fff;
	border-radius: var(--border-radius-md);
	margin: 0 0 1.5rem;
}

.comment-list .comment-form {
	background-color: #fff;
	border-radius: var(--border-radius-md);
	box-shadow: var(--shadow-sm);
	margin: 0 0 1.5rem;
}

.comment-list .comment-body {
	padding: 2.25rem;
}

.comment-list .comment:last-child {
	margin: 0;
}

.comment-list .children {
	padding: 0 2.25rem 2.25rem;
}

.comment-list .children .comment {
	padding-top: 2rem;
	margin-top: 2rem;
	margin-bottom: 0;
	border-radius: 0;
	border-top: 1px solid var(--border-light);
}

.comment-list .children .comment:first-child {
	margin: 0;
}

.comment-list .children .comment .comment-body {
	padding: 0;
}

.comment-list .children .comment .comment-content {
	margin: 0;
}

.comment-list .children .comment .comment-author {
	margin: 0 0 0.25rem;
}

.comment-list>.children {
	padding: 0;
}

.comment-list>.children .comment {
	border-top: 0;
	padding-top: 0;
	border-radius: var(--border-radius-md);
}

.comment-list>.children .comment .comment-body {
	padding: 2.25rem;
}

.comment-list .children .comment-form {
	box-shadow: none;
	margin: 0;
	border-radius: 0;
}

.comment-list .children .comment-form .comment-body {
	padding: 0;
	margin-top: 2rem;
}

.comment-list .children .children {
	padding: 0;
}

.comment-list .children .children .comment:first-child {
	margin-top: 2rem;
}

@media (max-width: 767.98px) {
	#comments .comment-avatar {
		width: 32px;
		height: 32px;
	}

	.comment-list .comment {
		margin-bottom: 1rem;
	}

	.comment-list .comment-respond,
	.comment-list .comment-body {
		padding: 1rem;
	}

	.comment-list .children {
		padding: 0 1rem 1rem;
	}

	.comment-list .children .comment {
		padding-top: 1rem;
		margin-top: 1rem;
	}
}

@media (min-width: 768px) and (max-width: 991.98px) {
	#comments .comment-avatar {
		width: 36px;
		height: 36px;
	}

	.comment-list .comment-respond,
	.comment-list .comment-body {
		padding: 1.25rem;
	}

	.comment-list .children {
		padding: 0 1.25rem 1.25rem;
	}

	.comment-list .children .comment {
		padding-top: 1.25rem;
		margin-top: 1.25rem;
	}
}

/*--------------------------------------------------------------
## 21 Site style
--------------------------------------------------------------*/
/*--------------------------------------------------------------
site poster style
--------------------------------------------------------------*/

.site-poster {
	position: relative;
	overflow: hidden;
}

.site-poster .poster-bg {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.site-poster .poster-content {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	height: 400px;
	background-color: rgb(0 0 0 / 30%);
	z-index: 1;
}

.full-layout .site-poster {
	margin: 0 .75rem 2rem;
	border-radius: var(--border-radius-md);
}

@media (min-width: 992px) and (max-width: 1199.98px) {
	.site-poster .poster-content {
		height: 350px;
	}
}

@media (min-width: 768px) and (max-width: 991.98px) {
	.site-poster .poster-content {
		height: 300px;
	}
}

@media (max-width: 767.98px) {
	.site-poster .poster-content {
		height: 200px;
	}

}

/*--------------------------------------------------------------
  poster zoom style
  --------------------------------------------------------------*/

.poster-zoom {
	-webkit-animation: posterZoom 30s linear;
	animation: posterZoom 30s linear;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards
}

@-webkit-keyframes posterZoom {
	from {
		transform: scale(1)
	}

	to {
		transform: scale(1.5)
	}
}

@keyframes posterZoom {
	from {
		transform: scale(1)
	}

	to {
		transform: scale(1.3)
	}
}

/*--------------------------------------------------------------
## 22 Category style
--------------------------------------------------------------*/

/*--------------------------------------------------------------
## Latest posts
--------------------------------------------------------------*/
@media (max-width: 767.98px) {
	.home .index-latest-posts {
		background-color: transparent;
	}

	.home .index-latest-posts .card-body {
		padding: 0;
	}
}

/*--------------------------------------------------------------
## Masonry style
--------------------------------------------------------------*/
.masonry-list {
	position: relative;
	min-height: 100px;
}

.masonry-list::before {
	content: "";
	position: absolute;
	display: none;
	left: 50%;
	top: 50%;
	text-align: center;
	width: 32px;
	height: 32px;
	border: 4px solid rgba(0, 0, 0, 0.2);
	border-top: 4px solid var(--bg-dark);
	border-radius: 50%;
	-webkit-animation: spCircRot2 0.6s infinite linear;
	animation: spCircRot2 0.6s infinite linear;
	transform: translate(-50%, -50%);
}

@-webkit-keyframes spCircRot2 {
	from {
		-webkit-transform: translate(-50%, -50%) rotate(0deg);
	}

	to {
		-webkit-transform: translate(-50%, -50%) rotate(359deg);
	}
}

@keyframes spCircRot2 {
	from {
		transform: translate(-50%, -50%) rotate(0deg);
	}

	to {
		transform: translate(-50%, -50%) rotate(359deg);
	}
}

.masonry-list.shuffle::before {
	display: none;
}

/*--------------------------------------------------------------
## Masonry item style
--------------------------------------------------------------*/

.masonry-item {
	position: relative;
	margin-bottom: 1.5rem;
}

.masonry-item .masonry-block {
	position: relative;
	overflow: hidden;
	min-height: 100px;
}

.masonry-item .masonry-image {
	position: relative;
	width: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	transition: all 0.3s cubic-bezier(0, 0, 0.5, 1);
	z-index: 2;
}

.masonry-item:hover .masonry-image {
	transform: scale3d(1.05, 1.05, 1.05);
}

.masonry-item.more {
	padding-top: 1rem;
}

.masonry-item.more .masonry-shadow {
	background-color: #000;
}

.masonry-item.more .masonry-shadow::before,
.masonry-item.more .masonry-shadow::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 8px;
	background-color: inherit;
	opacity: 0.1;
	border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0;
	transform: scale(0.8);
}

.masonry-item.more .masonry-shadow::after {
	top: 8px;
	transform: scale(0.9);
	opacity: 0.2;
}

.masonry-item .masonry-content {
	position: absolute;
	right: .75rem;
	bottom: .75rem;
	left: .75rem;
	padding: 0.75rem 1rem;
	background-color: rgb(0 0 0 / 40%);
	border-radius: var(--border-radius-sm);
	transition: all 0.3s ease-in-out;
	transform: translateY(10%);
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	z-index: 2;
}

.masonry-item .masonry-content .masonry-title {
	font-size: .875rem;
	font-weight: normal;
}

.masonry-item:hover .masonry-content {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0%);
}

@supports ((-webkit-backdrop-filter: blur(6px)) or (backdrop-filter: blur(6px))) {

	.masonry-item:hover .masonry-content {
		background-color: rgb(0 0 0 / 40%);
		-webkit-backdrop-filter: saturate(180%) blur(6px);
		backdrop-filter: saturate(180%) blur(6px);
	}

}

.masonry-item .masonry-body {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: space-between;
	min-width: 0;
}

.masonry-item .masonry-body .masonry-title {
	color: #fff;
}

.masonry-item .masonry-loading {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	z-index: 2;
}

@supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
	.masonry-item .masonry-loading {
		-webkit-backdrop-filter: saturate(180%) blur(20px);
		backdrop-filter: saturate(180%) blur(20px);
	}

}

.masonry-item .button-delete {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 10;
	display: none;
}

.masonry-item .button-delete:hover,
.masonry-item .button-delete:focus {
	background-color: rgb(0 0 0 / 50%);
	border-color: transparent;
}

.masonry-item:hover .button-delete {
	display: block;
}

.masonry-actions {
	position: absolute;
	left: 0;
	bottom: 0;
	display: flex;
	padding: 1rem;
	z-index: 2;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-15px);
	transition: all 500ms ease;
}

.masonry-item:hover .masonry-actions {
	visibility: visible;
	opacity: 1;
	transform: translateY(0px);
}

.masonry-actions a {
	color: #fff;
}

.masonry-actions a:hover,
.masonry-actions a:focus {
	background-color: #fff;
	color: var(--color-dark);
}

.masonry-item:hover .action-like {
	display: block;
}

@media (min-width: 992px) and (max-width: 1199.98px) {
	.masonry-item .masonry-content {
		padding: 0.875rem 1rem;
	}
}

@media (max-width: 991.98px) {
	.masonry-item .button-delete {
		display: block;
		top: 5px;
		right: 5px;
	}

	.masonry-actions {
		padding: 0.5rem;
		visibility: visible;
		opacity: 1;
		transform: translateY(0px);
	}
}

@media (min-width: 768px) and (max-width: 991.98px) {
	.masonry-item {
		margin-bottom: 1rem;
	}

	.masonry-item .masonry-content {
		padding: 0.875rem 1rem;
	}
}

@media (max-width: 767.98px) {

	.masonry-item {
		margin-bottom: .75rem;
	}

	.masonry-item .masonry-content {
		padding: 0.375rem 0.625rem;
	}

	.masonry-item.more .masonry-shadow::before,
	.masonry-item.more .masonry-shadow::after {
		height: 8px;
		transform: scale(0.75);
	}

	.masonry-item.more .masonry-shadow::after {
		top: 8px;
		transform: scale(0.85);
		opacity: 0.1;
	}
}

/*--------------------------------------------------------------
## Masonry tabmenu style
--------------------------------------------------------------*/

.masonry-tabmenu {
	position: relative;
	overflow: hidden;
}

.masonry-tabmenu ul {
	position: static;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.masonry-tabmenu ul::-webkit-scrollbar {
	width: 0;
	height: 0;
	color: transparent;
}

.masonry-tabmenu ul li {
	margin-right: 1rem;
}

.masonry-tabmenu ul li a {
	position: relative;
	display: block;
	min-width: 100px;
	text-align: center;
	color: var(--color-muted);
	line-height: 1;
	padding: 0.75rem 0.5rem .9375rem;
	border-radius: var(--border-radius-sm);
}

.masonry-tabmenu ul li .menu-icon {
	position: relative;
	width: 2.75rem;
	height: 2.75rem;
	font-size: 1.75rem;
	margin: 0 auto 0.5rem;
	transition: all 500ms ease-in-out;
}

.masonry-tabmenu ul li a:hover .menu-icon {
	transform: scale(1.2);
}

.masonry-tabmenu ul li .menu-icon span {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.masonry-tabmenu ul li .menu-icon span svg,
.masonry-tabmenu ul li .menu-icon span img {
	width: 2rem;
	height: 2rem;
	-o-object-fit: cover;
	object-fit: cover;
}

.masonry-tabmenu ul li .menu-title {
	max-width: 120px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.masonry-tabmenu ul li a:hover {
	background-color: var(--bg-white);
}

.masonry-tabmenu ul li.active a {
	background-color: var(--bg-white);
	color: var(--color-dark);
}

@media (max-width: 767.98px) {
	.masonry-tabmenu ul {
		justify-content: flex-start;
	}

	.masonry-tabmenu ul li {
		margin-right: 0.5rem;
	}

	.masonry-tabmenu ul li a {
		min-width: 80px;
		color: var(--color-secondary);
		line-height: 1;
		padding: 0.5rem 0.25rem .875rem;
		border-radius: var(--border-radius-sm);
	}

	.masonry-tabmenu ul li .menu-icon {
		width: 2.5rem;
		height: 2.5rem;
		font-size: 1.5rem;
		margin: 0 auto 0.25rem;
	}

	.masonry-tabmenu ul li .menu-icon span img {
		width: 1.5rem;
		height: 1.5rem;
	}

	.masonry-tabmenu ul li .menu-title {
		font-size: 0.75rem;
	}
}

/*--------------------------------------------------------------
## Badges & actions
--------------------------------------------------------------*/
.item-status .state-private,
.item-status .state-vip,
.item-status .state-sticky,
.item-status .state-tag {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 400;
	padding: 0.25rem 0.75rem;
	margin-right: 0.25rem;
	border-radius: 100px;
	background-color: rgba(0, 0, 0, 0.5);
	color: #fff;
}

.item-status .state-sticky {
	background-image: linear-gradient(45deg, #ff3725 0%, #ffa647 100%);
}

.item-status .state-vip {
	background-image: linear-gradient(45deg, #ffde98 0%, #fff5c1 100%);
	color: #9c6c00;
}

.item-badges {
	position: absolute;
	left: 1rem;
	top: 1.25rem;
	display: flex;
	flex-wrap: wrap;
	z-index: 3;
}

.item-badges .item-badge-vip,
.item-badges .item-badge-sticky,
.item-badges .item-badge-tag {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 400;
	padding: 0.25rem 0.75rem;
	margin-right: 0.25rem;
	border-radius: 100px;
	background-color: rgba(0, 0, 0, 0.5);
	color: #fff;
}

.item-badges .item-badge-sticky {
	background-image: linear-gradient(45deg, #ff3725 0%, #ffa647 100%);
}

.item-badges .item-badge-vip {
	background-image: linear-gradient(45deg, #ffde98 0%, #fff5c1 100%);
	color: #9c6c00;
}

@supports ((-webkit-backdrop-filter: blur(6px)) or (backdrop-filter: blur(6px))) {

	.item-badges .item-content {
		background-color: rgb(0 0 0 / 40%);
		-webkit-backdrop-filter: saturate(180%) blur(6px);
		backdrop-filter: saturate(180%) blur(6px);
	}

}

.item-actions {
	position: absolute;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	right: 1rem;
	top: 1rem;
	z-index: 3;
}

.item-actions .action-item {
	background-color: #fff;
}

.item-actions .action-like {
	display: none;
	background-color: #fff;
}


.item-actions .action-like .iconfont {
	display: block;
}

.item-actions .action-like .icon-xihuan_like1 {
	display: none;
}

.item-actions .action-like.active {
	color: var(--bg-danger);
	display: block;
}

.item-actions .action-like.active .icon-xihuan_like {
	display: none;
}

.item-actions .action-like.active .icon-xihuan_like1 {
	display: block;
	-webkit-animation-name: ButtonGroup_pulse-in;
	animation-name: ButtonGroup_pulse-in;
	-webkit-animation-duration: 0.5s;
	animation-duration: 0.5s;
}

@-webkit-keyframes ButtonGroup_pulse-in {
	0% {
		transform: scale(1.35);
	}

	to {
		transform: none;
	}
}

@keyframes ButtonGroup_pulse-in {
	0% {
		transform: scale(1.35);
	}

	to {
		transform: none;
	}
}

@media (max-width: 991.98px) {
	.masonry-item .button-delete {
		display: block;
		top: 5px;
		right: 5px;
	}

	.masonry-actions {
		padding: 0.5rem;
		visibility: visible;
		opacity: 1;
		transform: translateY(0px);
	}
}

@media (min-width: 768px) and (max-width: 991.98px) {

	.item-badges .item-badge-vip,
	.item-badges .item-badge-sticky,
	.item-badges .item-badge-tag {
		font-size: 0.625rem;
	}
}

@media (max-width: 991.98px) {

	.item-badges {
		left: .9375rem;
		top: 1rem;
	}

	.item-badges .item-badge-vip,
	.item-badges .item-badge-sticky,
	.item-badges .item-badge-tag {
		font-size: 0.625rem;
		padding: 0.125rem 0.5rem;
	}

	.item-actions {
		right: 0.75rem;
		top: 0.625rem;
	}
}

@media (max-width: 767.98px) {
	@media (max-width: 991.98px) {

		.item-badges {
			left: 0.625rem;
			top: 0.9375rem;
		}

		.item-badges .item-badge-vip,
		.item-badges .item-badge-sticky,
		.item-badges .item-badge-tag {
			font-size: 0.625rem;
			padding: 0.125rem 0.5rem;
		}

		.item-actions {
			right: 0.75rem;
			top: 0.625rem;
		}
	}
}

/*--------------------------------------------------------------
## Waterfall style
--------------------------------------------------------------*/
.waterfall-list .grid-item {
	padding-top: 0;
	padding-bottom: 0;
}

.waterfall-item .item-footer a {
	padding-left: .375rem;
	padding-right: .375rem;
}

.waterfall-item .item-footer a.active {
	background-color: transparent;
	border-color: transparent;
	color: var(--color-danger);
}

/*--------------------------------------------------------------
## Albums block
--------------------------------------------------------------*/

.albums-block .albums-block-images,
.albums-block .albums-block-title {
	position: relative;
}

.albums-block .albums-block-images.border-locked,
.albums-block .albums-block-images.border-status {
	border: 3px solid var(--bg-secondary) !important;
}

.albums-block .albums-block-images.border-pending {
	border: 3px solid #ff5e46 !important;
}

.albums-block .albums-block-images.border-vip {
	border: 3px solid #f9e1b7 !important;
}

.albums-block .albums-block-images.border-sticky {
	border: 3px solid var(--bg-warning) !important;
}

.albums-block .albums-block-pending,
.albums-block .albums-block-status,
.albums-block .albums-block-vip,
.albums-block .albums-block-sticky,
.albums-block .albums-block-tag {
	display: inline-block;
	position: absolute;
	right: -0.125rem;
	top: -0.125rem;
	font-size: 0.625rem;
	font-weight: 400;
	line-height: 1;
	padding: 0.3125rem 0.625rem;
	border-top-right-radius: inherit;
	border-bottom-left-radius: 8px;
	background-color: var(--bg-secondary);
	color: #fff;
}

.albums-block .albums-block-pending {
	background-color: #ff5e46;
}

.albums-block .albums-block-sticky {
	background-color: var(--bg-warning);
	color: #fff;
}

.albums-block .albums-block-vip {
	background-color: #f9e1b7;
	color: #9c6c00;
}

/*--------------------------------------------------------------
## column group
--------------------------------------------------------------*/
.column-list .item {
	position: relative;
	overflow: hidden;
}

.column-list .item .item-content {
	position: absolute;
	right: .75rem;
	bottom: .75rem;
	left: .75rem;
	padding: 0.625rem 1rem;
	background-color: rgb(0 0 0 / 40%);
	border-radius: var(--border-radius-sm);
	transition: all 0.3s ease-in-out;
	transform: translateY(10%);
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	z-index: 2;
}

@supports ((-webkit-backdrop-filter: blur(6px)) or (backdrop-filter: blur(6px))) {

	.column-list .item .item-content {
		background-color: rgb(0 0 0 / 40%);
		-webkit-backdrop-filter: saturate(180%) blur(6px);
		backdrop-filter: saturate(180%) blur(6px);
	}

}

.column-list .item .item-title {
	font-size: .875rem;
	font-weight: normal;
}

.column-list .item:hover .item-content {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0%);
}

.column-list .item:hover .action-like {
	display: block;
}

/*--------------------------------------------------------------
## 24 Banner style
--------------------------------------------------------------*/

.banner-nextprev .swiper-button-next,
.banner-nextprev .swiper-button-prev {
	width: var(--swiper-navigation-size);
	color: var(--swiper-pagination-color);
	background-color: rgba(0, 0, 0, 0.2);
	border-radius: 100%;
	opacity: 0;
	visibility: hidden;
	transform-origin: 0 0 0;
	transition: all 0.3s ease-out 0s;
}

.banner-nextprev:hover .swiper-button-next,
.banner-nextprev:hover .swiper-button-prev {
	opacity: 1;
	visibility: visible;
}

.banner-nextprev:hover .swiper-button-next {
	right: 3%;
}

.banner-nextprev:hover .swiper-button-prev {
	left: 3%;
}

.banner-nextprev .swiper-button-next:hover {
	background-color: rgba(0, 0, 0, 0.5);
}

.banner-nextprev .swiper-button-prev:hover {
	background-color: rgba(0, 0, 0, 0.5);
}

.banner-nextprev .swiper-button-next:after,
.banner-nextprev .swiper-button-prev:after {
	position: relative;
	font-size: calc((var(--swiper-navigation-size) / 2.25));
}

.banner-nextprev .swiper-button-prev:after {
	left: -1px;
}

.banner-nextprev .swiper-button-next:after {
	left: 1px;
}

.banner-nextprev .swiper-button-next.swiper-button-disabled,
.banner-nextprev .swiper-button-prev.swiper-button-disabled {
	opacity: 0;
	visibility: hidden;
}

.banner-nextprev .swiper-pagination {
	display: flex;
	left: 50%;
	width: auto;
	padding: 0.375rem;
	border-radius: 3rem;
	transform: translateX(-50%);
	background-color: rgb(0 0 0 / 20%);
}

@media (max-width: 767.98px) {
	.index-banner .swiper-slide .media::after {
		padding-top: 50%;
	}
}

/*--------------------------------------------------------------
## 25 Ads style
--------------------------------------------------------------*/

.site-promote {
	position: relative;
}

.site-promote a>img {
	position: relative;
	width: 100%;
	height: auto;
}

/*--------------------------------------------------------------
## 26 Author card
--------------------------------------------------------------*/
.author-avatar {
	position: relative;
	width: 42px;
	height: 42px;
	top: -1px;
}

@media (max-width: 767.98px) {
	.author-avatar {
		width: 40px;
		height: 40px;
	}
}

/*--------------------------------------------------------------
## 27 Author group
--------------------------------------------------------------*/

.avatar-color {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	width: 80px;
	height: 80px;
	border-radius: 50%;
}

.avatar-color::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: linear-gradient(135deg, #514eff 0%, #582aff 30%, #a515ff 80%, #e74eff);
	transition: all 500ms ease-in-out;
}

.avatar-color.vip::before {
	background: linear-gradient(135deg, #ff3636 0%, #ff6a54 30%, #ffd39d 80%, #ffcd90);
}

.avatar-color .flex-avatar {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 72px;
	height: 72px;
	background-color: #fff;
	border-radius: 50%;
	z-index: 1;
}

.avatar-color .flex-avatar img {
	width: 64px;
	height: 64px;
}

/*--------------------------------------------------------------
## 28 Page
--------------------------------------------------------------*/

.recommend-author-list .item {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-bottom: 1.5rem;
}

.recommend-author-list .item:last-child {
	margin-bottom: 0;
}

.recommend-author-list .item .item-rank {
	color: var(--bg-warning);
}

.recommend-author-list .item:nth-child(1) .item-rank,
.recommend-author-list .item:nth-child(2) .item-rank,
.recommend-author-list .item:nth-child(3) .item-rank {
	color: var(--bg-danger);
}

.recommend-author-list .item .item-content {
	flex: 1 1 auto;
	padding: 0 1.5rem 0 0;
}

.recommend-author-list .item .item-body {
	flex: 1 1 auto;
}


.recommend-author-list .item .item-posts {
	flex-shrink: 0;
	width: 40%;
}

@media (max-width: 767.98px) {
	.recommend-author-list .item {
		flex-direction: column;
		align-items: flex-start;
		margin-bottom: .875rem;
		padding-bottom: 1rem;
		border-bottom: 1px solid var(--border-light);
	}

	.recommend-author-list .item:last-child {
		margin-bottom: 0;
		padding-bottom: 0;
		border-bottom: 0;
	}

	.recommend-author-list .item .item-content {
		flex: 1 1 auto;
		width: 100%;
		padding: 0;
		margin-bottom: .75rem;
	}

	.recommend-author-list .item .item-body {
		flex: 1 1 auto;
	}


	.recommend-author-list .item .item-posts {
		width: 100%;
	}

	.recommend-author-list .item .avatar-color {
		width: 48px;
		height: 48px;
	}

	.recommend-author-list .item .avatar-color .flex-avatar {

		width: 42px;
		height: 42px;
	}

	.recommend-author-list .item .avatar-color .flex-avatar img {
		width: 36px;
		height: 36px;
	}

	.recommend-author-list .item .avatar-color .flex-avatar .avatar-badge.w20 {
		width: 14px;
		height: 14px;
	}
}

@media (min-width: 768px) and (max-width: 991.98px) {
	.recommend-author-list .item .avatar-color {
		width: 64px;
		height: 64px;
	}

	.recommend-author-list .item .avatar-color .flex-avatar {
		width: 58px;
		height: 58px;
	}

	.recommend-author-list .item .avatar-color .flex-avatar img {
		width: 52px;
		height: 52px;
	}

	.recommend-author-list .item .avatar-color .flex-avatar .avatar-badge.w20 {
		width: 14px;
		height: 14px;
	}
}

/* -------------------------------- 
## 404 page 
-------------------------------- */

.error-404 {
	-webkit-animation: glitch 1s linear infinite;
	animation: glitch 1s linear infinite;
	text-shadow: 5px 5px 1px rgb(0 0 0 / 15%);
}

@-webkit-keyframes glitch {

	2%,
	64% {
		transform: translate(2px, 0) skew(0deg);
	}

	4%,
	60% {
		transform: translate(-2px, 0) skew(0deg);
	}

	62% {
		transform: translate(0, 0) skew(5deg);
	}
}

@keyframes glitch {

	2%,
	64% {
		transform: translate(2px, 0) skew(0deg);
	}

	4%,
	60% {
		transform: translate(-2px, 0) skew(0deg);
	}

	62% {
		transform: translate(0, 0) skew(5deg);
	}
}

.error-404:before,
.error-404:after {
	content: attr(title);
	position: absolute;
	left: 0;
}

.error-404:before {
	-webkit-animation: glitchTop 1s linear infinite;
	animation: glitchTop 1s linear infinite;
	clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
	-webkit-clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
}

@-webkit-keyframes glitchTop {

	2%,
	64% {
		transform: translate(2px, -2px);
	}

	4%,
	60% {
		transform: translate(-2px, 2px);
	}

	62% {
		transform: translate(13px, -1px) skew(-13deg);
	}
}

@keyframes glitchTop {

	2%,
	64% {
		transform: translate(2px, -2px);
	}

	4%,
	60% {
		transform: translate(-2px, 2px);
	}

	62% {
		transform: translate(13px, -1px) skew(-13deg);
	}
}

.error-404:after {
	-webkit-animation: glitchBotom 1.5s linear infinite;
	animation: glitchBotom 1.5s linear infinite;
	clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
	-webkit-clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
}

@-webkit-keyframes glitchBotom {

	2%,
	64% {
		transform: translate(-2px, 0);
	}

	4%,
	60% {
		transform: translate(-2px, 0);
	}

	62% {
		transform: translate(-22px, 5px) skew(21deg);
	}
}

@keyframes glitchBotom {

	2%,
	64% {
		transform: translate(-2px, 0);
	}

	4%,
	60% {
		transform: translate(-2px, 0);
	}

	62% {
		transform: translate(-22px, 5px) skew(21deg);
	}
}

/*--------------------------------------------------------------
## Creator style
--------------------------------------------------------------*/

.coming-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	position: fixed;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	background-color: #000;
}

.coming-wrapper .coming-content {
	position: relative;
	color: #fff;
	padding: 3rem 1rem 0;
}

.coming-wrapper .coming-date {
	position: relative;
	display: inline-block;
	color: #fff;
	text-align: center;
	line-height: 1;
	border: 4px solid #fff;
	border-radius: var(--border-radius-md);
	padding: 1.5rem;
	text-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
	z-index: 2;
}

.coming-wrapper .coming-date .month {
	position: relative;
	font-size: 3rem;
	padding-bottom: 2rem;
	margin-bottom: 2rem;
}

.coming-wrapper .coming-date .month::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 3px;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #fff;
	transform: rotate(145deg);
}

.coming-wrapper .coming-date .day {
	font-size: 3rem;
}

.coming-wrapper .coming-date .year {
	font-size: 1.5rem;
}

.coming-wrapper .coming-slogan {
	font-size: 2rem;
	font-weight: bold;
	text-align: center;
}

.coming-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1rem;
	z-index: 2;
}

.coming-logo img {
	max-width: 200px;
	max-height: 50px;
}

.coming-signin a {
	color: #fff;
	opacity: 0.6;
}

.coming-signin a:hover,
.coming-signin a:focus {
	color: #fff;
	background-color: transparent;
	border-color: rgba(255, 255, 255, 0.4);
	opacity: 1;
}

.coming-footer {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	color: #fff;
	z-index: 1;
}

.coming-footer a {
	color: #fff;
}

@media (max-width: 767.98px) {
	.coming-wrapper .coming-date {
		padding: 1rem;
		border-width: 2px;
	}

	.coming-wrapper .coming-date .month {
		position: relative;
		font-size: 2rem;
		padding-bottom: 1.5rem;
		margin-bottom: 1.5rem;
	}

	.coming-wrapper .coming-date .month::after {
		height: 2px;
	}

	.coming-wrapper .coming-date .day {
		font-size: 2rem;
	}

	.coming-wrapper .coming-date .year {
		font-size: 1.25rem;
	}

	.coming-logo img {
		max-width: 150px;
		max-height: 40px;
	}
}

/*--------------------------------------------------------------
## Author list
--------------------------------------------------------------*/
.author-list .item .avatar-color {
	width: 80px;
	height: 80px;
}

.author-list .item .avatar-color .flex-avatar {
	width: 72px;
	height: 72px;
}

.author-list .item .avatar-color .flex-avatar img {
	width: 64px;
	height: 64px;
}

.author-list .item:hover .avatar-color::before {
	transform: rotate(360deg);
}

.author-list .item .item-footer {
	position: relative;
}

.author-list .item .item-footer .line {
	width: 1px;
	height: 30px;
	background-color: var(--bg-light);
}

/*--------------------------------------------------------------
## Friends list
--------------------------------------------------------------*/
.friends-menu ul li {
	margin-bottom: 10px;
}

.friends-menu ul li:last-child {
	margin-bottom: 0;
}

.friends-menu ul li a {
	display: flex;
	align-items: center;
	padding: 10px 15px;
	border-radius: var(--border-radius-sm);
}

.friends-menu ul li a .menu-icon {
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
	margin-right: .5rem;
}

.friends-menu ul li a .menu-text {
	flex: 1 1 auto;
}

.friends-menu ul li.active a,
.friends-menu ul li a:hover {
	color: var(--color-primary);
	background-color: var(--outline-primary);
}

.friends-icon {
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	margin-right: .5rem;
}

.friends-grid {
	margin-bottom: 2rem;
}

.friends-grid:last-child {
	margin-bottom: 0;
}

.friends-list .item {
	position: relative;
	flex: 1 1 auto;
	transition: all 0.3s ease-in-out;
}

.friends-list .item:hover {
	transform: translateY(-5px);
}

.friends-list .item .media {
	flex-shrink: 0;
}

.friends-list .item .item-goto {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

@media (max-width: 767.98px) {
	.friends-grid {
		margin-bottom: 1.25rem;
	}
}

/*--------------------------------------------------------------
## category tabmenu
--------------------------------------------------------------*/
.category-tags,
.category-tabmenu {
	display: flex;
	flex-direction: row;
}

.category-tabmenu {
	flex-wrap: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
	justify-content: start;
	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: -ms-autohiding-scrollbar
}

.category-tabmenu::-webkit-scrollbar {
	width: 5px;
	height: 5px;
	background-color: transparent;
	display: none;
}

.category-tabmenu:hover::-webkit-scrollbar {
	display: block
}

.category-tabmenu::-webkit-scrollbar-thumb {
	border-radius: 10px;
	background-color: var(--bg-secondary);
}


.category-tabmenu::-webkit-scrollbar-track {
	border-radius: 10px;
	background-color: var(--bg-light);
}

.category-tabmenu li {
	margin: 0 0.75rem .5rem 0;
}

.category-tags li {
	margin: 0 0.75rem 0.75rem 0;
}

.category-tags li a,
.category-tabmenu li a {
	display: flex;
	align-items: center;
	white-space: nowrap;
	padding: 0.75rem 1.125rem 0.75rem .875rem;
	background-color: #fff;
	color: var(--color-secondary);
	border-radius: var(--border-radius-sm);
	border: 1px solid var(--border-light);
}

.category-tags li .category-icon,
.category-tabmenu li .category-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	font-size: 1.25rem;
	color: inherit;
	margin-right: 0.25rem;
	transition: all 500ms ease-in-out;
}

.category-tags li .category-icon img,
.category-tabmenu li .category-icon img {
	width: 24px;
	height: 24px;
}

.category-tags li a:hover .category-icon,
.category-tabmenu li a:hover .category-icon {
	color: inherit;
	transform: scale(1.2);
}

.category-tags li small,
.category-tabmenu li small {
	position: relative;
	flex-shrink: 0;
	margin-left: 0.25rem;
	color: var(--color-muted);
	background-color: var(--bg-light);
	font-size: 0.75rem;
	padding: 0.125rem 0.375rem;
	border-radius: 6px;
}

.category-tags li.active a,
.category-tabmenu li.active a {
	color: var(--color-primary);
	background-color: var(--outline-primary);
	border-color: var(--outline-primary);
}

.category-tags li.active small,
.category-tabmenu li.active small {
	background-color: var(--btn-dark);
	color: #fff;
}
.category-tags{
    flex-wrap: wrap;
}
.category-tags li {
	margin: 0.5rem;
}

.category-tags li.hot a {
	background-color: rgb(255 38 38 / 5%);
	color: var(--color-danger);
	border-color: rgb(255 38 38 / 10%);
}

.category-tags li.hot small {
	background-color: var(--bg-danger);
	color: #fff;
}

@media (min-width: 768px) and (max-width: 991.98px) {

	.category-tabmenu li {
		flex-shrink: 0;
		margin: 0 0.5rem .25rem 0
	}
}

@media (max-width: 767.98px) {
	.category-tabmenu {
		flex-wrap: nowrap;
		overflow-x: scroll;
		overflow-y: hidden;
		justify-content: start;
		-webkit-overflow-scrolling: touch;
		-ms-overflow-style: -ms-autohiding-scrollbar
	}

	.category-tabmenu::-webkit-scrollbar {
		display: none
	}

	.category-tabmenu:hover::-webkit-scrollbar {
		display: none
	}

	.category-tags li {
		flex-shrink: 0;
		margin: 0 0.75rem 0.75rem 0;
	}

	.category-tabmenu li {
		flex-shrink: 0;
		margin: 0 0.5rem .5rem 0
	}

	.category-tags li a,
	.category-tabmenu li a {
		padding: 0.625rem 0.625rem;
	}

	.category-tags li .category-icon,
	.category-tabmenu li .category-icon {
		width: 1.25rem;
		height: 1.25rem;
		font-size: 1rem;
	}
}

/*--------------------------------------------------------------
## Scroll toolbar
--------------------------------------------------------------*/
.scroll-toolbar {
	position: fixed;
	bottom: 25%;
	right: 30px;
	z-index: 99;
}

.scroll-toolbar .totop-button {
	opacity: 0;
	visibility: hidden;
	transform: translateY(15px);
	transition: all 500ms ease;
}

.scroll-toolbar .totop-button.show {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.scroll-toolbar .scroll-like-button.active .bx-heart {
	display: none;
}

.scroll-toolbar .scroll-like-button .bxs-heart {
	display: none;
}

.scroll-toolbar .scroll-like-button.active .bxs-heart {
	display: block;
}

/*--------------------------------------------------------------
## Search popup
--------------------------------------------------------------*/
.search-popup {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease-in-out;
	transform: translateY(-20px);
	z-index: 9999
}

.search-popup.active {
	pointer-events: auto;
	opacity: 1;
	visibility: visible;
	transform: translateY(0px);
}

.search-popup .search-popup-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.6);
	opacity: 0;
	visibility: hidden;
	cursor: pointer;
}

@supports (((-webkit-backdrop-filter: blur(6px)) or (backdrop-filter: blur(6px)))) {
	.search-popup .search-popup-overlay {
		-webkit-backdrop-filter: saturate(180%) blur(6px);
		backdrop-filter: saturate(180%) blur(6px)
	}
}

.search-popup.active .search-popup-overlay {
	opacity: 1;
	visibility: visible;
}

.search-popup .search-popup-inner {
	position: relative;
	max-width: 400px;
	width: 100%;
	margin: 10% auto 2rem;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease-in-out;
}

.search-popup.active .search-popup-inner {
	opacity: 1;
	visibility: visible;
}

.search-popup.focused .search-popup-inner {
	max-width: 600px;
}

.search-popup .search-popup-content {
	position: relative;
	overflow: hidden;
	background-color: #fff;
	border-radius: var(--border-radius-sm);
}

.search-popup .search-popup-input {
	background-color: transparent;
	border-color: transparent;
	color: var(--color-dark);
}

.search-popup .search-popup-input:focus,
.search-popup .search-popup-input:active {
	color: var(--color-dark);
	background-color: transparent;
	border-color: transparent;
	box-shadow: none;
}

.search-popup .search-popup-body {
	opacity: 0;
	visibility: hidden;
}

.search-popup.focused .search-popup-body {
	opacity: 1;
	visibility: visible;
}

.search-popup .search-popup-close {
	position: absolute;
	right: 0;
	top: 0;
	color: #fff;
	transform: translate(0%, -100%);
}

.search-popup .search-popup-close:hover,
.search-popup .search-popup-close:focus,
.search-popup .search-popup-close:active {
	color: #fff;
	background-color: transparent;
	border-color: transparent;
}

.no-scroll {
	overflow: hidden;
}

@media (max-width: 767.98px) {
	.search-popup .search-popup-inner {
		max-width: 80%;
		margin: 20% auto 2rem;
	}

	.search-popup.focused .search-popup-inner {
		max-width: 90%;
	}

}

/*--------------------------------------------------------------
## Site popup style
--------------------------------------------------------------*/
@media (min-width: 1400px) {
	.nice-popup-lg .nice-popup-content {
		padding: 2rem 2.5rem;
	}
}

/*--------------------------------------------------------------
## User style
--------------------------------------------------------------*/
/*--------------------------------------------------------------
###  Login style
--------------------------------------------------------------*/


#login,
#loginphone,
#loginwechat,
#signup,
#reset-password {
	display: none;
}

#login.is-selected,
#loginphone.is-selected,
#loginwechat.is-selected,
#signup.is-selected,
#reset-password.is-selected {
	display: block;
}

.user-tabmenu {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.user-tabmenu li {
	flex-shrink: 0;
	margin-right: 1.5rem;
}

.user-tabmenu li a {
	position: relative;
	display: block;
	font-size: 1rem;
	font-weight: bold;
	white-space: nowrap;
	padding: 0 0 15px;
	color: var(--color-muted);
}

.user-tabmenu li a:hover {
	color: var(--color-dark);
}

.user-tabmenu li a::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 0;
	height: 5px;
	background-color: var(--bg-danger);
	border-radius: 10px;
	transform: translateX(-50%);
	opacity: 0;
	transition: all 0.3s ease-in-out;
}

.user-tabmenu li.active a {
	color: var(--color-dark);
}

.user-tabmenu li:hover a::after,
.user-tabmenu li.active a::after {
	width: 20px;
	opacity: 1;
}

/*--------------------------------------------------------------
## User info style
--------------------------------------------------------------*/

.user-role-progress {
	width: 100%;
	height: 6px;
	background-image: linear-gradient(225deg, #f3f3f7, rgb(29 26 255 / 10%));
	border-radius: 6px;
}

.user-role-progress-inner {
	height: 6px;
	background-image: linear-gradient(224deg, #d839ff, #a847ff 47%, #1a1aff 99%);
	border-radius: 6px;
}

.user-ip-badge {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 24px;
	font-size: 12px;
	padding: 0 7px;
	background-color: var(--outline-danger);
	border: 1px solid var(--outline-danger);
	color: var(--color-danger);
	border-radius: 3px;
}

.user-role-badge {
	position: relative;
	display: inline-block;
	width: 48px;
	height: 24px;
	background-repeat: no-repeat;
	background-position: left center;
	background-size: contain;
}

.user-role-badge.vip1 {
	background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGlkPSJf5Zu+5bGCXzIiIGRhdGEtbmFtZT0i5Zu+5bGCIDIiIHZpZXdCb3g9IjAgMCAxMjAgNjAiPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iX+acquWRveWQjeeahOa4kOWPmF8yNDkiIHgxPSIxNy41NSIgeDI9IjEwMi40NSIgeTE9IjcyLjQ1IiB5Mj0iLTEyLjQ1IiBkYXRhLW5hbWU9IuacquWRveWQjeeahOa4kOWPmCAyNDkiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNiNDg4ZmYiLz48c3RvcCBvZmZzZXQ9Ii4xMSIgc3RvcC1jb2xvcj0iIzk5NzVmZiIvPjxzdG9wIG9mZnNldD0iLjMxIiBzdG9wLWNvbG9yPSIjNmM1NGZmIi8+PHN0b3Agb2Zmc2V0PSIuNTEiIHN0b3AtY29sb3I9IiM0ODNiZmYiLz48c3RvcCBvZmZzZXQ9Ii43IiBzdG9wLWNvbG9yPSIjMmUyOGZmIi8+PHN0b3Agb2Zmc2V0PSIuODciIHN0b3AtY29sb3I9IiMxZjFkZmYiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMxYTFhZmYiLz48L2xpbmVhckdyYWRpZW50PjxzdHlsZT4uY2xzLTJ7ZmlsbDojZmZmfTwvc3R5bGU+PC9kZWZzPjxnIGlkPSJf5Zu+5bGCXzEtMiIgZGF0YS1uYW1lPSLlm77lsYIgMSI+PHBhdGggZD0iTTExMiA2MEg4Yy00LjQyIDAtOC00LjMtOC05LjZWOS42QzAgNC4zIDMuNTggMCA4IDBoMTA0YzQuNDIgMCA4IDQuMyA4IDkuNnY0MC44YzAgNS4zLTMuNTggOS42LTggOS42WiIgc3R5bGU9ImZpbGw6dXJsKCNf5pyq5ZG95ZCN55qE5riQ5Y+YXzI0OSkiLz48cGF0aCBkPSJtMTkuMzUgNDUuMDEgMS45NS0xOC40NWgtMy4wNmwuMzQtMy4yM2g2LjQ2bC0xLjcyIDE2LjM2IDQuNjUtMS45NS0uMzcgMy41Ny04LjI1IDMuN1ptNC4yNC0yNC4wNy0yLjMyLTYuNTNoMy45NGwuOTggNi41M0gyMy42Wm03LjQ3IDI0LjYxLS40Ny0zLjJoMi43OWwyLjQ2LTIzLjdoLTcuOThsLjM3LTMuMjNoMTYuNzNsLS4zNyAzLjIzaC01LjIybC0yLjc5IDI2LjloLTUuNTJaTTQ1LjY4IDQ1LjU5bDIuNDktMjMuNmgzLjQ3bC0yLjQ5IDIzLjZoLTMuNDdabTYuMzMtMjUuOTktMi42My01LjE4aDQuMDRsMS4zOCA1LjE4aC0yLjc5Wm0tMS41NSAyMy40NiAzLjkxLTkuNTloLTIuMDlsMS4wOC0xMGgxLjk1bC0uOTgtMy4yN0g1OGwuMjQgMy4yN2gzLjc3bC45MS0zLjI3aDMuNjdsLTEuNjIgMy4yN2gxLjk1bC0xLjA4IDEwaC0yLjE5bC0uNjcgNi4yNmgyLjIybC0xLjE4IDMuMWgtNC41NGwuOTgtOS4zNkg1Ny44bC00LjcxIDkuNTloLTIuNjNabTUuMjItMTIuNjZoNy40N2wuNC0zLjg3aC03LjQ3bC0uNCAzLjg3Wm05LjE2IDE1LjE4LS41LTMuMzNoMi40OWwyLjQ5LTIzLjYzSDU2LjQ2bC4zNy0zLjM3aDE2LjMzbC0zLjIgMzAuMzNoLTUuMTJaTTEwMS43NiAxNy4wMWwtOC4zMSA2LjI2aDguMDhsLS4zIDMuMDNIODkuNDFsLTMuODQgMi45aDEyLjk2bC0xLjY4IDE1Ljg2aC0yMGwxLjE0LTEwLjcxaC0zLjIzbDEwLTguMDVoLTguODVsLjM0LTMuMDNoOS43NmwuMzQtMy4xNmgtNy43MWwuMzQtMy4xaDcuNzFsLjI0LTIuNTloMy4zbC0uMjQgMi41OWg0Ljg4bC0uMTMgMS4zMSAxLjYyLTEuMzFoNS40MlptLTguMDEgMjQuOTguMzctMy41SDgwLjk2bC0uMzQgMy41aDEzLjEzWm0uNjctNi4zLjM3LTMuNDNIODEuNjNsLS4zNyAzLjQzaDEzLjE2Wk04OS42NCAyMC4xbC0uMjcgMi40OSAzLjEtMi40OWgtMi44M1oiIGNsYXNzPSJjbHMtMiIvPjwvZz48L3N2Zz4=');
}

.user-role-badge.vip2 {
	background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGlkPSJf5Zu+5bGCXzIiIGRhdGEtbmFtZT0i5Zu+5bGCIDIiIHZpZXdCb3g9IjAgMCAxMjAgNjAiPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iX+acquWRveWQjeeahOa4kOWPmF8yNDkiIHgxPSIxNy41NSIgeDI9IjEwMi40NSIgeTE9IjcyLjQ1IiB5Mj0iLTEyLjQ1IiBkYXRhLW5hbWU9IuacquWRveWQjeeahOa4kOWPmCAyNDkiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNiNDg4ZmYiLz48c3RvcCBvZmZzZXQ9Ii4xMSIgc3RvcC1jb2xvcj0iIzk5NzVmZiIvPjxzdG9wIG9mZnNldD0iLjMxIiBzdG9wLWNvbG9yPSIjNmM1NGZmIi8+PHN0b3Agb2Zmc2V0PSIuNTEiIHN0b3AtY29sb3I9IiM0ODNiZmYiLz48c3RvcCBvZmZzZXQ9Ii43IiBzdG9wLWNvbG9yPSIjMmUyOGZmIi8+PHN0b3Agb2Zmc2V0PSIuODciIHN0b3AtY29sb3I9IiMxZjFkZmYiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMxYTFhZmYiLz48L2xpbmVhckdyYWRpZW50PjxzdHlsZT4uY2xzLTJ7ZmlsbDojZmZmfTwvc3R5bGU+PC9kZWZzPjxnIGlkPSJf5Zu+5bGCXzEtMiIgZGF0YS1uYW1lPSLlm77lsYIgMSI+PHBhdGggZD0iTTExMiA2MEg4Yy00LjQyIDAtOC00LjMtOC05LjZWOS42QzAgNC4zIDMuNTggMCA4IDBoMTA0YzQuNDIgMCA4IDQuMyA4IDkuNnY0MC44YzAgNS4zLTMuNTggOS42LTggOS42WiIgc3R5bGU9ImZpbGw6dXJsKCNf5pyq5ZG95ZCN55qE5riQ5Y+YXzI0OSkiLz48cGF0aCBkPSJtMzIuNDEgMzEuNjItLjM0IDMuNjcgOS43IDEwLjIzaC0zLjY0bC04LjI4LTYuNS05LjU5IDYuNWgtMy42NEwyOC41IDM1LjI1bC4zNy0zLjY0aDMuNTNabTEuMTQtMTAuNGgxMS4wMWwtLjM0IDMuMkgxOC43bC4zLTMuMmgxMC45N2wuMjctMi43NmgtOS41OWwuMzctMy4yN2gyMi43NmwtLjM3IDMuMjdoLTkuNTZsLS4zIDIuNzZabTYuOSAxNy42NGgtMy40M2wuOTEtOC43NUgyMy43NmwtLjk0IDguNzVoLTMuNDNsMS4yNS0xMS45NWgyMS4wNGwtMS4yMSAxMS45NVpNNTYuNTUgMjIuMjJoNS40MmwtMi40MiAyMy4zNmgtMy42NGwtLjU0LTIuNjZoMS41NWwxLjg4LTE3Ljc3aC04LjI1bC0yLjEyIDIwLjQzaC0yLjg2bDIuNDItMjMuMzZoNS40MmwuMy0yLjY5aC01Ljg5bC4zLTIuOTZoNS44OWwuMjQtMi4xNWgzLjFsLS4yIDIuMTVoNS44OWwtLjM0IDIuOTZoLTUuODZsLS4zIDIuNjlabS42NyAxMy4yMy0uMyAyLjgzaC0yLjE5bC0uNzEgNi41aC0yLjc5bC42Ny02LjVoLTIuMTVsLjMtMi44M2gyLjE1bC4zLTNoLTIuMDVsLjI3LTIuODZoLjk4bC0uNjEtMy4yN2gyLjYzdjMuMjdoLjk4bC42Ny0zLjI3SDU4bC0xLjMxIDMuMjdoLjk4bC0uMyAyLjg2aC0xLjk5bC0uMzcgM2gyLjIyWm0xNS42NS0xMy43Ny0uMzQgMy4zM2gtMy43bDEuNTggMjAuNTRoLTIuNDJsLTEuMzEtMTMuNTctNC42NSAxMy41N2gtMi4zOWw1Ljk2LTIwLjU0aC0zLjJsLjM3LTMuMzNoMy4xN2wuNzctNy4yN2gzbC0uNzQgNy4yN2gzLjkxWm0tLjI0LS45OGgtMS43MmwtLjgxLTUuMjJoMi41NmwtLjAzIDUuMjJaTTEwMS43NiAxNy4wMWwtOC4zMSA2LjI2aDguMDhsLS4zIDMuMDNIODkuNDFsLTMuODQgMi45aDEyLjk2bC0xLjY4IDE1Ljg2aC0yMGwxLjE0LTEwLjcxaC0zLjIzbDEwLTguMDVoLTguODVsLjM0LTMuMDNoOS43NmwuMzQtMy4xNmgtNy43MWwuMzQtMy4xaDcuNzFsLjI0LTIuNTloMy4zbC0uMjQgMi41OWg0Ljg4bC0uMTMgMS4zMSAxLjYyLTEuMzFoNS40MlptLTguMDEgMjQuOTguMzctMy41SDgwLjk2bC0uMzQgMy41aDEzLjEzWm0uNjctNi4zLjM3LTMuNDNIODEuNjNsLS4zNyAzLjQzaDEzLjE2Wk04OS42NCAyMC4xbC0uMjcgMi40OSAzLjEtMi40OWgtMi44M1oiIGNsYXNzPSJjbHMtMiIvPjwvZz48L3N2Zz4=');
}

.user-role-badge.vip3 {
	background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGlkPSJf5Zu+5bGCXzIiIGRhdGEtbmFtZT0i5Zu+5bGCIDIiIHZpZXdCb3g9IjAgMCAxMjAgNjAiPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iX+acquWRveWQjeeahOa4kOWPmF8yNDkiIHgxPSIxNy41NSIgeDI9IjEwMi40NSIgeTE9IjcyLjQ1IiB5Mj0iLTEyLjQ1IiBkYXRhLW5hbWU9IuacquWRveWQjeeahOa4kOWPmCAyNDkiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNiNDg4ZmYiLz48c3RvcCBvZmZzZXQ9Ii4xMSIgc3RvcC1jb2xvcj0iIzk5NzVmZiIvPjxzdG9wIG9mZnNldD0iLjMxIiBzdG9wLWNvbG9yPSIjNmM1NGZmIi8+PHN0b3Agb2Zmc2V0PSIuNTEiIHN0b3AtY29sb3I9IiM0ODNiZmYiLz48c3RvcCBvZmZzZXQ9Ii43IiBzdG9wLWNvbG9yPSIjMmUyOGZmIi8+PHN0b3Agb2Zmc2V0PSIuODciIHN0b3AtY29sb3I9IiMxZjFkZmYiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMxYTFhZmYiLz48L2xpbmVhckdyYWRpZW50PjxzdHlsZT4uY2xzLTJ7ZmlsbDojZmZmfTwvc3R5bGU+PC9kZWZzPjxnIGlkPSJf5Zu+5bGCXzEtMiIgZGF0YS1uYW1lPSLlm77lsYIgMSI+PHBhdGggZD0iTTExMiA2MEg4Yy00LjQyIDAtOC00LjMtOC05LjZWOS42QzAgNC4zIDMuNTggMCA4IDBoMTA0YzQuNDIgMCA4IDQuMyA4IDkuNnY0MC44YzAgNS4zLTMuNTggOS42LTggOS42WiIgc3R5bGU9ImZpbGw6dXJsKCNf5pyq5ZG95ZCN55qE5riQ5Y+YXzI0OSkiLz48cGF0aCBkPSJNNDEuODcgMTQuMzggMzYuNzUgMjNoMi41MmwtMi4zNiAyMi42NmgtMy4yNmwyLjE1LTIxLjA3LS42NyAxLjE0aC0yLjg2bDYuMDMtMTEuMzRoMy41N1ptMTYuODcgNi4zaC05Ljk2bC0uNTQgNS4yNWg4Ljk1bC0uMzQgMy4zaC04Ljk5bC0uNTcgNS4yNWg5LjI2bC0uMzQgMy4yN2gtOS4yNmwtLjc3IDcuOTFoLTMuMjdsMi43Ni0yNi44Ni0zLjU3IDguMTVoLTIuMzJsNC4yOC0xMi41NmgzLjU0bC0xLjMxIDMuMDNoMTIuNzlsLS4zNCAzLjI3Wk04Ny40NSAxNy4wMWwtOC4zMiA2LjI2aDguMDhsLS4zIDMuMDNINzUuMDlsLTMuODQgMi45aDEyLjk2bC0xLjY4IDE1Ljg2aC0yMGwxLjE0LTEwLjcxaC0zLjIzbDEwLTguMDVoLTguODVsLjM0LTMuMDNoOS43NmwuMzQtMy4xNmgtNy43MWwuMzQtMy4xaDcuNzFsLjI0LTIuNTloMy4zbC0uMjQgMi41OWg0Ljg4bC0uMTMgMS4zMSAxLjYyLTEuMzFoNS40MlptLTguMDEgMjQuOTguMzctMy41SDY2LjY1bC0uMzQgMy41aDEzLjEzWm0uNjctNi4zLjM3LTMuNDNINjcuMzJsLS4zNyAzLjQzaDEzLjE2Wk03NS4zMyAyMC4xbC0uMjcgMi40OSAzLjEtMi40OWgtMi44M1oiIGNsYXNzPSJjbHMtMiIvPjwvZz48L3N2Zz4=');
}

.user-role-badge.vip4 {
	background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGlkPSJf5Zu+5bGCXzIiIGRhdGEtbmFtZT0i5Zu+5bGCIDIiIHZpZXdCb3g9IjAgMCAxMjAgNjAiPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iX+acquWRveWQjeeahOa4kOWPmF8yNDkiIHgxPSIxNy41NSIgeDI9IjEwMi40NSIgeTE9IjcyLjQ1IiB5Mj0iLTEyLjQ1IiBkYXRhLW5hbWU9IuacquWRveWQjeeahOa4kOWPmCAyNDkiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNiNDg4ZmYiLz48c3RvcCBvZmZzZXQ9Ii4xMSIgc3RvcC1jb2xvcj0iIzk5NzVmZiIvPjxzdG9wIG9mZnNldD0iLjMxIiBzdG9wLWNvbG9yPSIjNmM1NGZmIi8+PHN0b3Agb2Zmc2V0PSIuNTEiIHN0b3AtY29sb3I9IiM0ODNiZmYiLz48c3RvcCBvZmZzZXQ9Ii43IiBzdG9wLWNvbG9yPSIjMmUyOGZmIi8+PHN0b3Agb2Zmc2V0PSIuODciIHN0b3AtY29sb3I9IiMxZjFkZmYiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMxYTFhZmYiLz48L2xpbmVhckdyYWRpZW50PjxzdHlsZT4uY2xzLTJ7ZmlsbDojZmZmfTwvc3R5bGU+PC9kZWZzPjxnIGlkPSJf5Zu+5bGCXzEtMiIgZGF0YS1uYW1lPSLlm77lsYIgMSI+PHBhdGggZD0iTTExMiA2MEg4Yy00LjQyIDAtOC00LjMtOC05LjZWOS42QzAgNC4zIDMuNTggMCA4IDBoMTA0YzQuNDIgMCA4IDQuMyA4IDkuNnY0MC44YzAgNS4zLTMuNTggOS42LTggOS42WiIgc3R5bGU9ImZpbGw6dXJsKCNf5pyq5ZG95ZCN55qE5riQ5Y+YXzI0OSkiLz48cGF0aCBkPSJtMzEuMjcgNDMuMy4zLTMuMjcgNy40NC0yLjMyLS4zNCAzLjIzLTcuNDEgMi4zNlptNy4wNCAyLjI2IDIuNjItMTUuNTIuOTgtOS4xNi01LjMyIDExLjE4aDMuMDNsLS4zNCAzLjE3aC02LjgzbDMuOTQtOC41NWgtMy43bDUuNDItMTIuMjVoMi45M2wtNC4xNyA4Ljk5aDEuMDFsMS4yNS0yLjY5aDIuNzlsLjQ0LTQuMjhoNi40NmwuMTctMi4wMmgzLjIzbC0uMiAyLjAyaDYuNWwtLjk0IDguODVINDQuMzJsLS40IDMuOTctMy40MyAxNi4yOWgtMi4xNVptNC42MSAwIDEuODUtMTcuODhINTcuN2wtMS45MiAxNy44OGgtMi42M2wtLjU0LTIuNzZoLjk0bC42MS01LjY2aC0xLjM4bC0uODggOC4wMWgtMS43OGwuODQtOC4wMWgtMS40MWwtLjg0IDguMDFoLTEuODJsLjg4LTguMDFoLTEuMzhsLS45MSA4LjQyaC0yLjU2Wm0xLjY1LTIzLjA5aDEwLjQ0bC4zNy0zLjE2SDQ0Ljk0bC0uMzcgMy4xNlptMi4wOSAxMS45NWgxLjQxbC4zNy0zLjk3aC0xLjM4bC0uNCAzLjk3Wm0zLjIgMGgxLjQxbC40LTMuOTdoLTEuMzhsLS40NCAzLjk3Wm0zLjIgMGgxLjM4bC40LTMuOTdoLTEuMzhsLS40IDMuOTdaTTYzLjk2IDQ1LjU5bC43MS02LjktNC42MS45NC4zLTMuMjcgNC42NS0uODguNS00LjUxSDYxbDMuMTMtMTAuODRoLTEuOTJsLjMtMy4yaDIuNTNsLjc3LTIuNTNoMi43NmwtLjc0IDIuNTNoNC40NGwtLjM0IDMuMmgtNS4wMmwtMi4yOSA3LjYxaDEuNDhsLjUtNC45NWgyLjczbC0uNSA0Ljk1aDEuOTVsLS4zNCAzLjIzaC0xLjk1bC0uNCAzLjkxIDIuNDYtLjQ3LS4zNCAzLjIzLTIuNDYuNS0uODEgNy40NGgtM1ptMTYuMzkgMCAuMzctMy4yMy0xMS43OC40LjMtMi44NiAyLjE1LS4xIDEuMjUtMTIuMDVoLTEuNDhsLjI3LTIuODZoMTUuNjJsLS4zNyAyLjg2SDg1LjJsLTEuMjEgMTEuNjEgMS41OC0uMDMtLjI0IDIuODYtMS42NS4wMy0uMzQgMy4zN2gtM1ptLTcuNTQtMjIuMzIuODQtNy45OGgxMy4xM2wtLjg0IDcuOThINzIuODFabTEuNTUgMTYuNDYgNi42Ny0uMjQuMjQtMi4zMmgtNi42bC0uMyAyLjU2Wm0uNTQtNS4wMmg2LjZsLjI0LTIuMjJoLTYuNmwtLjI0IDIuMjJabS41NC00LjcxaDYuNmwuMi0yLjI2aC02LjZsLS4yIDIuMjZabS42Ny05LjQ5aDcuMTdsLjI3LTIuNDloLTcuMTdsLS4yNyAyLjQ5WiIgY2xhc3M9ImNscy0yIi8+PC9nPjwvc3ZnPg==');
}

.user-role-badge.vip5 {
	background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGlkPSJf5Zu+5bGCXzIiIGRhdGEtbmFtZT0i5Zu+5bGCIDIiIHZpZXdCb3g9IjAgMCAxMjAgNjAiPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iX+acquWRveWQjeeahOa4kOWPmF8yNDkiIHgxPSIxNy41NSIgeDI9IjEwMi40NSIgeTE9IjcyLjQ1IiB5Mj0iLTEyLjQ1IiBkYXRhLW5hbWU9IuacquWRveWQjeeahOa4kOWPmCAyNDkiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNiNDg4ZmYiLz48c3RvcCBvZmZzZXQ9Ii4xMSIgc3RvcC1jb2xvcj0iIzk5NzVmZiIvPjxzdG9wIG9mZnNldD0iLjMxIiBzdG9wLWNvbG9yPSIjNmM1NGZmIi8+PHN0b3Agb2Zmc2V0PSIuNTEiIHN0b3AtY29sb3I9IiM0ODNiZmYiLz48c3RvcCBvZmZzZXQ9Ii43IiBzdG9wLWNvbG9yPSIjMmUyOGZmIi8+PHN0b3Agb2Zmc2V0PSIuODciIHN0b3AtY29sb3I9IiMxZjFkZmYiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMxYTFhZmYiLz48L2xpbmVhckdyYWRpZW50PjxzdHlsZT4uY2xzLTJ7ZmlsbDojZmZmfTwvc3R5bGU+PC9kZWZzPjxnIGlkPSJf5Zu+5bGCXzEtMiIgZGF0YS1uYW1lPSLlm77lsYIgMSI+PHBhdGggZD0iTTExMiA2MEg4Yy00LjQyIDAtOC00LjMtOC05LjZWOS42QzAgNC4zIDMuNTggMCA4IDBoMTA0YzQuNDIgMCA4IDQuMyA4IDkuNnY0MC44YzAgNS4zLTMuNTggOS42LTggOS42WiIgc3R5bGU9ImZpbGw6dXJsKCNf5pyq5ZG95ZCN55qE5riQ5Y+YXzI0OSkiLz48cGF0aCBkPSJNNDAuNDYgMzUuMDJIMjMuMDJsLS4xNyAxLjU1aDE4LjE0bC0uOTEgOC40NUgxOC41bDEuODItMTcuNGgyMC45MWwtLjc3IDcuNDFaTTIyLjkyIDE4LjkzbC0xLjY4IDMuMTZoLTIuNTNsMi44Ni03LjY0aDMuN2wtLjc3IDEuNDhoNy44NGwtLjI3IDNoLTMuMzNsLjA3IDIuODZoLTIuNzZsLS43Ny0yLjg2aC0yLjM2Wm0xMC41IDIuMjItLjE3IDEuNzVoMTAuNGwtLjUgNC4yOGgtMy40M2wuMTctMS4yOEgyMi4zNWwtLjE3IDEuMjhoLTMuNDNsLjUtNC4yOGgxMC4zM2wuMTctMS43NWgzLjY3Wm0zLjg0IDE4LjI4SDIyLjU4bC0uMyAyLjc2aDE0LjY4bC4zLTIuNzZabS0xMy43My05LjA2LS4yIDEuODlIMzcuM2wuMi0xLjg5SDIzLjUzWm0xMy40LTE0LjQ0aDcuOThsLS4yNyAzaC0zLjRsLjEzIDIuODZoLTIuODNsLS43NC0yLjg2aC0yLjc5TDM0IDIwLjU1aC0yLjU2bDIuNzMtNi4wOWgzLjdsLS45NCAxLjQ4Wk00NS4yNyA0NC4wNGwuMzQtMy4yNyAyLjg5LTEuMTQgMS4wOC0xMC40NGgtMi4yOWwuMy0zLjE2aDIuMzZsLjc3LTcuNjRoLTIuNTlsLjM0LTMuMDZoNy45NGwtLjMgMy4wNmgtMi4xOWwtLjgxIDcuNjRoMS45NWwtLjMgMy4xNmgtMS45OWwtLjk0IDkuMDIgMi41Ni0xLjA4LS4zNyAzLjMtOC43NSAzLjZabTguMTUuOTQuMzQtM2g3LjE0bC4zNy0zLjU3aC02LjI2bC4zLTIuOTZoNi4yNmwuMzctMy40aC02LjAzbDEuNzUtMTYuODNoMTUuMDhsLTEuNzUgMTYuODNoLTYuMDNsLS4zNyAzLjRoNi4yNmwtLjM0IDIuOTZoLTYuMjZsLS4zNyAzLjU3aDcuMTRsLS4zIDNoLTE3LjNabTUuNjItMTUuNzJoMy4ybC40Ny00LjUxaC0zLjE2bC0uNSA0LjUxWm0uNzctNy4xaDMuMmwuNC00LjA3aC0zLjJsLS40IDQuMDdabTUuNDIgNy4xaDMuMmwuNDQtNC41MWgtMy4xM2wtLjUgNC41MVptLjc0LTcuMWgzLjE2bC40Ny00LjA3aC0zLjJsLS40NCA0LjA3Wk04OS4yNyAzNS4yOGguMDNsOS45IDEwLjMzaC00LjA0bC03Ljk4LTcuMTctOS40OSA3LjE3aC00LjA0bDEyLjA4LTEwLjMzLjM3LTMuNTNoMy41NGwtLjM3IDMuNTNabS0xMy4zNiAzLjc0IDEuMjEtMTEuNzJoMjIuNDJsLTEuMjEgMTEuNzJIOTVsLjkxLTguNTVIODAuMTJsLS45MSA4LjU1aC0zLjNabTIzLjgtMjMuNzctMS4wNCA5LjY5SDc4LjVsMS4wMS05LjY5aDIwLjJabS00LjE0IDYuNTYuMzctMy40SDgyLjYxbC0uMzQgMy40aDEzLjNaIiBjbGFzcz0iY2xzLTIiLz48L2c+PC9zdmc+');
}

/*--------------------------------------------------------------
## User menu widget
--------------------------------------------------------------*/

.user-menu-widget ul li a {
	display: flex;
	align-items: center;
	padding: .5rem;
	color: var(--color-secondary);
}

.user-menu-widget ul li a .item-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	font-size: 1.125rem;
	background-color: var(--bg-light);
	border-radius: var(--border-radius-sm);
	margin-right: 1rem;
}

.user-menu-widget ul li a:hover,
.user-menu-widget ul li.active a {
	color: var(--color-primary);
}

.user-menu-widget ul li.active a .item-icon {
	background-color: var(--bg-primary);
	color: #fff;
}

@media (max-width: 991.98px) {
	.user-menu-widget ul {
		display: flex;
		justify-content: center;
	}

	.user-menu-widget ul li {
		margin: 0 1rem;
	}

	.user-menu-widget ul li a {
		flex-direction: column;
		justify-content: center;
		padding: 0.5rem;
	}

	.user-menu-widget ul li a .item-icon {
		margin: 0 0 .5rem;
	}
}

/*--------------------------------------------------------------
## User profile style
--------------------------------------------------------------*/
.user-profile-form {
	padding: 1rem 0;
}

.user-profile-form li {
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	padding: 1rem 2rem;
}

.user-profile-form li .item-icon {
	width: 42px;
	height: 42px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.5rem;
	background-color: var(--bg-light);
	border-radius: 50%;
}

.user-profile-form li .item-action i {
	position: relative;
	transition: all 0.3s ease-in-out;
	transform: translateX(-2px);
}

.user-profile-form li .item-action:hover i {
	transform: translateX(3px);
}

.user-profile-form li:nth-child(1) .item-icon {
	background-color: rgb(1 101 254 / 9%);
	color: var(--color-primary);
}

.user-profile-form li:nth-child(2) .item-icon {
	background-color: rgb(254 190 1 / 9%);
	color: rgb(254 190 1);
}

.user-profile-form li:nth-child(3) .item-icon {
	background-color: rgb(254 85 1 / 9%);
	color: rgb(254 85 1);
}


.user-profile-form li:nth-child(4) .item-icon {
	background-color: rgb(255 147 59 / 9%);
	color: rgb(255 147 59);
}

.user-profile-form li:nth-child(5) .item-icon {
	background-color: rgb(4 156 255 / 9%);
	color: rgb(4 156 255);
}

.user-profile-form li:nth-child(6) .item-icon {
	background-color: rgb(39 164 95 / 9%);
	color: rgb(39 164 95);
}

@media (max-width: 767.98px) {
	.user-profile-form {
		padding: 0.75rem 0;
	}

	.user-profile-form li {
		padding: 0.75rem 1rem;
	}

	.user-profile-form li .item-icon {
		width: 36px;
		height: 36px;
	}
}

/* -------------------------------- 
## Vip buy
-------------------------------- */
.vip-list .item {
	position: relative;
	text-align: center;
	color: #fff;
	background-image: linear-gradient(224deg,
			rgb(108 108 108 / 20%),
			rgb(75 78 48 / 20%));
	border: 1px solid rgb(238 195 108 / 0.15);
	border-radius: var(--border-radius-sm);
	cursor: pointer;
}

.vip-list .item.active {
	background-image: linear-gradient(221deg, #eec36b, #d2ba8d);
	color: #7a5805;
}

.vip-list .item::after {
	content: "";
	display: block;
	padding-top: 75%;
}

.vip-list .item .item-content {
	position: absolute;
	left: -1px;
	top: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width: 100%;
	height: 100%;
}

.vip-list .item .item-content .hot {
	position: absolute;
	left: 0;
	top: 0;
	font-size: 0.75rem;
	padding: 0.125rem 0.625rem;
	color: #fff;
	background-image: linear-gradient(221deg, #ff3e3e, #ff8c56);
	border-radius: var(--border-radius-sm);
	border-top-right-radius: var(--border-radius-xs);
	border-bottom-left-radius: 0;
	transform: translateY(-50%);
}

.vip-pay .pay-qcode {
	max-width: 180px;
	text-align: center;
	padding: 5px;
	background-color: #fff;
	border-radius: var(--border-radius-sm);
}

.vip-pay .pay-price {
	color: #ffd56c;
}

.vip-button {
	background-image: linear-gradient(221deg, #312217, #383838);
	border-color: rgb(182 155 138 / 60%);
}

/* -------------------------------- 
## Vip badge
-------------------------------- */
.avatar-badge {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	width: 25px;
	height: 25px;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}

.avatar-badge.badge_5 {
	background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgZmlsbD0ibm9uZSI+PGNpcmNsZSBjeD0iMTgiIGN5PSIxOCIgcj0iMTgiIGZpbGw9InVybCgjYSkiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yOS4wNSAxMS4zNWMuNjQuNjQuNjQgMS42OCAwIDIuMzJMMTYuNzQ3IDI1Ljk3M2ExLjc1IDEuNzUgMCAwIDEtMi40NzYgMEw4LjE2IDE5Ljg2YTEuNjQxIDEuNjQxIDAgMCAxIDIuMzIxLTIuMzIxbDUuMDMgNS4wMjlMMjYuNzI3IDExLjM1Yy42NDEtLjY0MSAxLjY4LS42NDEgMi4zMjEgMFoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iYSIgeDE9IjMxLjcxNCIgeDI9Ii0zLjczMSIgeTE9Ii44NTciIHkyPSIxMS44MzkiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBzdG9wLWNvbG9yPSIjRkZCNzRBIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjRkQ5MDBGIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PC9zdmc+');
}

.avatar-badge.badge_3,
.avatar-badge.badge_4 {
	background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgZmlsbD0ibm9uZSI+PGNpcmNsZSBjeD0iMTgiIGN5PSIxOCIgcj0iMTgiIGZpbGw9InVybCgjYSkiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yOS4wNSAxMS4zNWMuNjQuNjQuNjQgMS42OCAwIDIuMzJMMTYuNzQ3IDI1Ljk3M2ExLjc1IDEuNzUgMCAwIDEtMi40NzYgMEw4LjE2IDE5Ljg2YTEuNjQxIDEuNjQxIDAgMCAxIDIuMzIxLTIuMzIxbDUuMDMgNS4wMjlMMjYuNzI3IDExLjM1Yy42NDEtLjY0MSAxLjY4LS42NDEgMi4zMjEgMFoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iYSIgeDE9IjMxLjcxNCIgeDI9Ii0zLjczMSIgeTE9Ii44NTciIHkyPSIxMS44MzkiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBzdG9wLWNvbG9yPSIjN0NCMUZGIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjMEY2RUZEIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PC9zdmc+');
}

.avatar-badge.badge_1,
.avatar-badge.badge_2 {
	background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgZmlsbD0ibm9uZSI+PGNpcmNsZSBjeD0iMTgiIGN5PSIxOCIgcj0iMTgiIGZpbGw9InVybCgjYSkiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xOCA4YTUgNSAwIDEgMCAwIDEwIDUgNSAwIDAgMCAwLTEwWm0tMyA1YTMgMyAwIDEgMSA2IDAgMyAzIDAgMCAxLTYgMFoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0xNCAyMGE1IDUgMCAwIDAtNSA1djJhMSAxIDAgMSAwIDIgMHYtMmEzIDMgMCAwIDEgMy0zaDhhMyAzIDAgMCAxIDMgM3YyYTEgMSAwIDEgMCAyIDB2LTJhNSA1IDAgMCAwLTUtNWgtOFoiLz48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImEiIHgxPSIzMS43MTQiIHgyPSItMy43MzEiIHkxPSIuODU3IiB5Mj0iMTEuODM5IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHN0b3Agc3RvcC1jb2xvcj0iI0I4QjhCOCIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzlBOUE5QSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjwvc3ZnPg==');
}

.avatar-badge.co {
	background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MiIgaGVpZ2h0PSI0MiIgZmlsbD0ibm9uZSI+PHJlY3Qgd2lkdGg9IjQyIiBoZWlnaHQ9IjQyIiBmaWxsPSJ1cmwoI2EpIiByeD0iMjEiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0zMi4yOTcgMTMuNzExYTIuNDUgMi40NSAwIDAgMSAwIDMuNDM1bC0xMiAxMi4xNDNhMi4zOCAyLjM4IDAgMCAxLTMuMzk0IDBsLTcuMi03LjI4NmEyLjQ1IDIuNDUgMCAwIDEgMC0zLjQzNCAyLjM4IDIuMzggMCAwIDEgMy4zOTQgMGw1LjUwMyA1LjU2OCAxMC4zMDMtMTAuNDI2YTIuMzggMi4zOCAwIDAgMSAzLjM5NCAwWiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJhIiB4MT0iMjEiIHgyPSIyMSIgeTE9IjAiIHkyPSI0MiIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPjxzdG9wIHN0b3AtY29sb3I9IiM3ODc4RjgiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM0NzQ3RjUiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48L3N2Zz4=');
}

.avatar-badge.vip {
	background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iX+WbvuWxgl8yIiBkYXRhLW5hbWU9IuWbvuWxgiAyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjEuNjUgMTcuNTEiPgogIDxkZWZzPgogICAgPHN0eWxlPgogICAgICAuY2xzLTEgewogICAgICAgIGZpbGw6IG5vbmU7CiAgICAgIH0KCiAgICAgIC5jbHMtMiB7CiAgICAgICAgZmlsbDogdXJsKCNf5pyq5ZG95ZCN55qE5riQ5Y+YXzI1MCk7CiAgICAgIH0KCiAgICAgIC5jbHMtMyB7CiAgICAgICAgZmlsbDogdXJsKCNf5pyq5ZG95ZCN55qE5riQ5Y+YXzI0MCk7CiAgICAgIH0KCiAgICAgIC5jbHMtNCB7CiAgICAgICAgY2xpcC1wYXRoOiB1cmwoI2NsaXBwYXRoKTsKICAgICAgfQoKICAgICAgLmNscy01IHsKICAgICAgICBmaWxsOiAjZmZlMjdmOwogICAgICB9CgogICAgICAuY2xzLTYgewogICAgICAgIGNsaXAtcGF0aDogdXJsKCNjbGlwcGF0aC0xKTsKICAgICAgfQogICAgPC9zdHlsZT4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0iX+acquWRveWQjeeahOa4kOWPmF8yNTAiIGRhdGEtbmFtZT0i5pyq5ZG95ZCN55qE5riQ5Y+YIDI1MCIgeDE9IjYuMTciIHkxPSIxNC45NyIgeDI9IjE1LjM0IiB5Mj0iLS45MSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNmYWNkOGQiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIuNiIgc3RvcC1jb2xvcj0iI2ZmZTVjOSIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNmZmQ2ODUiLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9Il/mnKrlkb3lkI3nmoTmuJDlj5hfMjQwIiBkYXRhLW5hbWU9IuacquWRveWQjeeahOa4kOWPmCAyNDAiIHgxPSI3MS44MyIgeTE9Ii0xMDUuMDIiIHgyPSI3NS44MyIgeTI9Ii0xMDUuMDIiIGdyYWRpZW50VHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTc1LjgzIDExNS43KSBzY2FsZSgxLjEzIDEpIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CiAgICAgIDxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iI2M5OTAwNCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iLjMxIiBzdG9wLWNvbG9yPSIjZDQ4NDBlIiBzdG9wLW9wYWNpdHk9Ii4xNCIvPgogICAgICA8c3RvcCBvZmZzZXQ9Ii45OSIgc3RvcC1jb2xvcj0iI2YwNjYyOCIgc3RvcC1vcGFjaXR5PSIuNDkiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjZjE2NjI5IiBzdG9wLW9wYWNpdHk9Ii41Ii8+CiAgICA8L2xpbmVhckdyYWRpZW50PgogICAgPGNsaXBQYXRoIGlkPSJjbGlwcGF0aCI+CiAgICAgIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0ibTEwLjc4LDguMDJsLTIuODMtMi44M2MtLjItLjItLjUxLS4yLS43MSwwbC0xLjQxLDEuNDFjLS4yLjItLjIuNTEsMCwuNzFsMy4xOCwzLjE4LDEuNzcsMS43N2MuMi4yLjUxLjIuNzEsMGwxLjc3LTEuNzcsMy4xOC0zLjE4Yy4yLS4yLjItLjUxLDAtLjcxbC0xLjQxLTEuNDFjLS4yLS4yLS41MS0uMi0uNzEsMGwtMi44MywyLjgzYy0uMi4yLS41MS4yLS43MSwwWiIvPgogICAgPC9jbGlwUGF0aD4KICAgIDxjbGlwUGF0aCBpZD0iY2xpcHBhdGgtMSI+CiAgICAgIDxyZWN0IGNsYXNzPSJjbHMtMSIgeD0iLjY4IiB5PSIuMDUiIHdpZHRoPSIyMC45IiBoZWlnaHQ9IjE3LjM2Ii8+CiAgICA8L2NsaXBQYXRoPgogIDwvZGVmcz4KICA8ZyBpZD0iX+WbvuWxgl8xLTIiIGRhdGEtbmFtZT0i5Zu+5bGCIDEiPgogICAgPGc+CiAgICAgIDxwYXRoIGNsYXNzPSJjbHMtMiIgZD0ibTEwLjEyLDE3LjJMLjM0LDcuNzNjLS4zNi0uMzYtLjQ2LS45OC0uMTUtMS4zOUw0LjE1LjQ2Yy4yMS0uMzEuNTctLjQ2Ljg4LS40NmgxMS41OWMuMzYsMCwuNjcuMTUuODguNDZsMy45Nyw1LjgyYy4zMS40Ni4yNiwxLjAzLS4xNSwxLjM5bC05LjczLDkuNTNjLS40MS40MS0xLjAzLjQxLTEuNDQsMFoiLz4KICAgICAgPHBhdGggY2xhc3M9ImNscy01IiBkPSJtMTAuNyw4LjY1Yy4wNS4wNS4xNS4xNS4yNi4yMS0uMS0uMDUtLjIxLS4xLS4yNi0uMjEiLz4KICAgICAgPHJlY3QgY2xhc3M9ImNscy0zIiB4PSI1LjE2IiB5PSI2LjY4IiB3aWR0aD0iNC41MSIgaGVpZ2h0PSI4IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNS4zOCA4LjM3KSByb3RhdGUoLTQ1KSIvPgogICAgICA8ZyBjbGFzcz0iY2xzLTQiPgogICAgICAgIDxnIGNsYXNzPSJjbHMtNiI+CiAgICAgICAgICA8aW1hZ2Ugd2lkdGg9IjQ0IiBoZWlnaHQ9IjM3IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSguNDkgLS4yKSBzY2FsZSguNDgpIiB4bGluazpocmVmPSJkYXRhOmltYWdlL3BuZztiYXNlNjQsaVZCT1J3MEtHZ29BQUFBTlNVaEVVZ0FBQUN3QUFBQWxDQVlBQUFBNWl3dkpBQUFBQ1hCSVdYTUFBQmNSQUFBWEVRSEtKdk0vQUFBSElrbEVRVlJZaGFXWVQ2Z2ZWeFhIUCtmT3hHS2lkR1B3Vld4dFg2eTJqV2toVGJVeHNhSlNVSERqUm90YU1mYWZDdDJvQlYwWVVPb2YxSW9iRVlPQ0d6Y0tJZ2pxcTBzM0dpc21JQktqeGZXajZzWTI5UDFtN2prdXpybC81cjJYNUtYNXdYQm43c3p2enVkKzcvZWNlKytJbVJsNy9ObjU3L1JYaTN0eXoxTlgvdTkvbm9QLy9obEVRRktVQWdoeTI2bTlJaUI3QWJiejM4WE9QUU5vZ0pZRHJJQ0xJR3Nua0h1ZVFsNy9Uci8zd2xuNDkxbjA0ZzlnR0VBR0w5TUlLU0dTSUEyUUJ1VFdVOGliSHI1TzRNMC9ZTC85TUxZQVZTaC9FUXRnOGV2azZzbmFTV1R0QkhyaCt3NDBEQldzdjVhK1RxTHVsb2VSbXovNkNvQTMvNGh0UEFTbWdEWm9DK2hlWHltdEpZZXVZS09yT2ZUWHJaUlF1aWhlb1crOEc3bnJhN3RpcGN2RGZpeEl1c01xV1dPSDNpSCtUQjJNZU1pNmVsamFQM3pzblhWdjIvLytobDA0dlVmZ3piUFl4aWM2UU5ubHZIdmVPbkxyQUxmZnIvV2xuZFJLNmRvT2NIdnhBbmJ4cTFjQjN2d1R0dkhKYlkwbU1FRklvWm8wdGJiSG9EWlZUZjFvQ25kSDdYUVJJamxvZVo5RVFMNTRBZnZuMGhvTmVQTTViT05UT3hVdERaWmhaVGRJQjYxQ2xycmVDbWJMVWVyZ1hPRlUxWlZhbitDbGk5anozOXdKYkJ1UHRJWnNBSVlsdENYRXBJRVVOWlZRTktBMGpwSlE2alBSbG5vYndqWjRpYUFqTW9ZTW9ickFwWC9BUzMvdmdNLy9rT3FwSGNwMkZpam5WZFdBekFHWnUrR3YwQklXVHl3dHNZdmFpRnVoVGl3Rk9tSC9lZ2FBRWNET25lbitxTXRHTFhWREdzT3FYZkRWbUROdm9nK3lFbjBxbUlLa1RvUUtXVlJOaUF5aDl0QXMwWGZnMGtWR3pwM3hCcVMwbjRKaW0xZE5XOENwWURXWURLVE5kczV1UHVSSmxtMW9kRGFWWUc3S0xtMlJsdGN4amRzTHYyYXN3NkxpTDdhWUZDdzFSWXVxdTlqQlFrMFhMV3d4Z0psNmxvcU8rSVFpRGJSYXdsV1dUdWtHV3M3eDh0THpqUHpsUjRnVlpZclhDbmdCQlRTQkdxSUpVMjMxQlJwZzZHeGdSYnp5WEdvZFQyRTF4Z2JaVzZUemJsMHM0U3FQcURkYVJoV0t5TkZvVFUvV2hsUjdwY1ZQUkR5MUZSOFBoZ1NqRENuKzB3MS9IZllCa2JGbGhzVTlDWSszR1hac1U2WVB2d0ZpaHBYQXFoTkZhdEE1WHA1TG1oTk1MSWE5K0RwQnh1dXl3RkRhR1pDaUxFTzAyL201MktBSHI5NkN4RTFIVy9vSjFheEFaa0ZVRUUzSW5HQVd5QUV5R3phRFRXQ3p3Y3F3bFdFcnhTWmdNaXdEV2J3OWxjNFdWRURwbFBaT2ROZGR3Slg2eE5wUlRMdlpTWEdnN0FuZnNzQnNrRUd5T1BRazJBcFlnVTNtNWV5ZElFcUhMZlhFYUFoWXA2Nm1wbkpWYyt6QWx6azZMTkVpSGdwMG04R29hNEt1RTNQQVRISGZ6QzBoRVhnanlFekxETllOZlZVNnZHdEYzZkF4TENjdG9jTEs2eDRrY2V6UkJqaGJPMWVEeVdCV21CUldHZHZ5Z3luNzBLOFVYU202bGJFdHhWNVdMMWVHVFg0dzB3Sk9SeVN5ZzFRTERNMHFKbDNXMkNVRjdqL2tVN01jZTNRNXZXYXRwVTJLellyTkdac3p1cHJSbFRyOHJMQlM5K3ZMR1YxRlJ3SzZCbWhPQVJ4cU03U3lab1p0QWJpWXVnWDJyOFArOVZoTHZPTXhlTU5SQjUzVlBiZzFZMWtiOU5hTXJiS1hWZUdNYmdYb0ZNK3R0S1k3bTRxNkhtUVNReTk5VHQ0KzIvV3F4aEpCek8wQTNXcE43bjhNc2xVMXlRNWtxOW1QV2IyY2V1aGNTOTF5V0p1Yng5SGtRV3NKVVZkUXFwcWhiTFdMZExad0g0c0pvc0RCQjEzaEhwaWI3MFVlT2xOVnRsbGh6ZzE2eXUwb29KTmhzNFdTeGZ0ZGxsaGNGejg3bk5UYzNsYUpZajZCU2Jtdk9PakI5MVhNQmd4d3l6SFN4My9jckJDSDJ5TDdkWFNtM1F2WUxLQkR5N0hXcFMxTkxSdVlWRXM0V0FlNDJNVVlIRmlIOWNjWGlFdGdnRnZ2STUzNkNUWVhWV2QwaDdMRnMwWEp0QnpleU4wVzhVQTJCeXJ4a1Qydit6WktJdDlIZmNsUUI5Ymh6WS92d05zSkRNaHRiMmQ0NHFmWVBJZTZzMmVKS1h2REdxQ0w1V2RiZWRYRWI2bDJ4bUlTc2dXMEgrMjhnMzNMRTd1aFhXYWJEOGloKzluMzVNK3dhWWJzU3JzRmNpZ1IyNkpGcEhmUjNTOUJsVkEzZHpsZVljcGVuN1Z1cmV3MTYzRFhweStIZFhsZ0FMbjlPUHMrLzR2bTNTakpaUTlYbEJVVzYxdHIxelpIUHA4Vnk3VFJ5cmwxb29DL2RoMjUrN05YUXJveU1FQzY0d1EzZk9sWG9CRjgyM2NRaTYxVXZ5aVBSWktDVGFIaUlnTkYrcHhtaDc1eEhibjN5YXZoWEIwWUlOMTVraHRPLzhZWDZtVnRVUlR1WmlQcGszN2RYZnM2eExLNXNxcXdtaDEwOGhpUmsxOUFqbjl1THloN0F3WVlEcitMVjM5bFk2bHcvMEdrS3QzVjEwVlRyM0J1NEdySWU3NElCOSs2VjR5OUF3TU1iM3VBL1U4L1czZEJpN20rWEVzMFdaNHAwRVpkanpETnNKcVJEM3daMXU2OEZvUnJBNjdRWC84ZFJ1d0RLMlRaMHZTd05OaWNmVEtZTTJnbWZlaHA1S2JEMS9yNmF3Y0dHSTQ4d0lGdlBNdDQ1TjIwcjQvRkZsUm8zMUM3ZDMwMjlObHkrTWkza1RjZWVTV3YzdHNYK0N2OThsOS96NlhUSC9UdnVzTUE0NGlNSXpMdTgvTjlmaTZ2MnNmNC9zOHd2UGVSNjNuZDlRT1gzK3JuMzRydkQ0bnBsOTlEeHBIaDhBbUdPNDdEa0VpMzMwYzZkT3k2My9OLzF2ZG1IUi9qODlRQUFBQUFTVVZPUks1Q1lJST0iLz4KICAgICAgICA8L2c+CiAgICAgIDwvZz4KICAgIDwvZz4KICA8L2c+Cjwvc3ZnPg==");
}

/*--------------------------------------------------------------
## Member page
--------------------------------------------------------------*/
.pricing-list .item {
	flex: 1 1 auto;
	transition: all 0.3s ease-in-out 0s;
	transform: translateY(0px);
	border: 2px solid var(--border-light);
}

.pricing-list .item:hover {
	transform: translateY(-10px);
	box-shadow: 0 20px 30px rgba(164, 55, 55, 0.1);
	border-color: rgb(255 63 38 / 80%);
}

.pricing-list .item.current {
	border-color: rgb(255 63 38 / 80%);
}

.pricing-list .item.current .current-tag {
	position: absolute;
	right: -2px;
	top: -2px;
	font-size: .8125rem;
	font-weight: 400;
	line-height: 1;
	padding: .375rem .75rem;
	background-color: #ff3f26;
	border-top-right-radius: inherit;
	border-bottom-left-radius: 10px;
	color: #fff;
}

.pricing-list .item .item-price .price {
	font-size: 2.75rem;
	color: #ff3f26;
}

.pricing-list .item .item-price .price small {
	font-size: 65%;
	margin-right: 4px;
}

.pricing-list .item .item-price .unit {
	position: relative;
	top: -0.125rem;
}

.pricing-list .item ul li {
	position: relative;
	color: var(--color-muted);
	padding: 1rem 0.25rem;
	border-bottom: 1px solid var(--border-light);
}

.pricing-list .item ul li:last-child {
	border-width: 0;
}

.pricing-list .item ul li.active {
	color: var(--color-dark);
}

.pricing-list .item ul li i {
	font-size: 1.5rem;
	color: var(--color-light);
}

.pricing-list .item ul li.active i {
	color: #ff3f26;
}

.pricing-list .member-desc .member-desc-item {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

/*--------------------------------------------------------------
## Member price list style
--------------------------------------------------------------*/
.member-price-header {
	position: relative;
	overflow: hidden;
	color: #fff;
	background-image: linear-gradient(33deg, rgb(13 13 21) 0%, rgb(46 46 57) 100%);
	padding-bottom: 4.5rem;
	border-top-left-radius: inherit;
	border-top-right-radius: inherit;
}

.member-price-overlay {
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	position: absolute;
	background-image: url("https://elementorpress.com/templatekit-pro/layout84/wp-content/uploads/2023/02/hero-overlay.png");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	opacity: 0.1;
	transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
}

.member-price-tabmenu {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: row;
	height: 50px;
	margin: -49px 15px 0;
}

.member-price-tabmenu .item {
	display: flex;
	flex: 1 1 auto;
	justify-content: center;
	background-color: rgb(0 0 0 / 50%);
	border-top-left-radius: var(--border-radius-lg);
	border-top-right-radius: var(--border-radius-lg);
	transform: translateY(5px);
	transition: none;
}


.member-price-tabmenu .item.active:first-child::after {
	content: '';
	position: absolute;
	right: -28px;
	top: 0;
	bottom: 0;
	width: 51px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top right;
	background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJf5Zu+5bGCXzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDU2LjY3IDUwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9PC9zdHlsZT48L2RlZnM+PGcgaWQ9Il/lm77lsYJfMS0yIj48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Im0zMS4xMSw1MEgwVjBjMTIuMjIsMCwwLDAsMCwwaDEzLjMzYzI5LjQ2LDEuNDQsMTAuNzEsNDkuODIsNDMuMzMsNTBoLTI1LjU2WiIvPjwvZz48L3N2Zz4=');
}

.member-price-tabmenu .item.active:last-child::before {
	content: '';
	position: absolute;
	left: -28px;
	top: 0;
	bottom: 0;
	width: 51px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top left;
	background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJf5Zu+5bGCXzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDU2LjY3IDUwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9PC9zdHlsZT48L2RlZnM+PGcgaWQ9Il/lm77lsYJfMS0yIj48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Im0yNS41Niw1MGgzMS4xMVYwYy0xMi4yMiwwLDAsMCwwLDBoLTEzLjMzQzEzLjg4LDEuNDQsMzIuNjIsNDkuODIsMCw1MGgyNS41NloiLz48L2c+PC9zdmc+');
}

.member-price-tabmenu .item.active {
	position: relative;
	font-size: 1.125rem;
	background-color: #fff;
	transform: translateY(0px);
	z-index: 2;
}

.member-price-tabmenu .item .item-content {
	display: flex;
	align-items: center;
	color: #fff;
}

.member-price-tabmenu .item.active .item-content {
	color: #ff4026
}

.member-price-tabmenu .item .item-icon {
	width: 32px;
	height: 32px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.25rem;
}

.member-price-tabmenu .item .item-icon img {
	width: 28px;
	height: 28px;
}

.member-price-list {
	display: none;
	padding-top: 2.5rem;
}

.member-price-list.active {
	display: block;
}

.member-price-list .item {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	border: 1px solid var(--border-light);
	border-radius: var(--border-radius-sm);
	padding: 1rem;
	text-align: center;
	height: 150px;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
}

.member-price-list {
	box-shadow: 0 -15px 20px -10px rgb(0 0 0 / 11%);
}

.member-price-list .item .item-tag {
	position: absolute;
	left: -2px;
	top: 0;
	padding: 2px 6px;
	font-size: 13px;
	font-weight: 400;
	color: #fff;
	background-color: rgb(255 105 87);
	background: linear-gradient(90deg, #ff7a53, #ff3a22);
	border-top-left-radius: inherit;
	border-top-right-radius: 3px;
	border-bottom-right-radius: inherit;
	transform: translateY(-50%);
	transition: all 0.3s ease-in-out;
}

.member-price-list .item:hover .item-tag {
	transform: translateY(-40%);
}

.member-price-list .item .item-price {
	line-height: 1;
}

.member-price-list .item .item-price .top {
	font-size: 2.5rem;
	color: #ff3f26;
}


.member-price-list .item .item-price .top small {
	font-size: 60%;
	margin-right: 4px;
}

.member-price-list .item .item-price .bottom {
	font-size: 14px;
	color: var(--color-muted);
}

.member-price-list .item.active {
	border: 2px solid rgb(255 63 38 / 100%);
	background: linear-gradient(180deg, rgba(255, 133, 71, 0.141), rgba(255, 255, 255, 0));
}

.member-price-list .item.active::after {
	content: '';
	position: absolute;
	right: -1px;
	bottom: -1px;
	width: 24px;
	height: 24px;
	background-position: bottom right;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGRhdGEtbmFtZT0i5Zu+5bGCIDIiIHZpZXdCb3g9IjAgMCA2NCA2NCI+PGcgZGF0YS1uYW1lPSLlm77lsYIgMSI+PHBhdGggZD0iTTY0IDY0SDBsMzItMzJMNjQgMHY2NHoiIHN0eWxlPSJmaWxsOiNmZjNmMjYiLz48cGF0aCBkPSJNNTYuNDIgMzcuNDJjLjI0LjI0LjI0LjYyIDAgLjg2bC0xNS40IDE2LjAxcy0uMDQuMDUtLjA2LjA3bC0xLjcyIDEuNzJjLS4wNi4wNi0uMTMuMTEtLjIxLjE0YS41OC41OCAwIDAgMS0uNjYtLjEzbC0xLjcyLTEuNzJzLS4wNi0uMDctLjA5LS4xMWwtNy45OC03Ljk4YS42MDQuNjA0IDAgMCAxIDAtLjg2bDEuNzItMS43MmMuMjQtLjI0LjYyLS4yNC44NiAwbDcuNjUgNy42NSAxNS4wNC0xNS42NGMuMjQtLjI0LjYyLS4yNC44NiAwbDEuNzIgMS43MloiIHN0eWxlPSJmaWxsOiNmZmYiLz48L2c+PC9zdmc+');
	border-bottom-right-radius: 8px;
}

.member-payment-method {
	display: flex;
	flex-direction: row;
	flex: 1 1 auto;
}

.member-payment-method .item-label {
	display: flex;
	align-items: center;
	min-width: 120px;
}

.member-payment-method .item-content {
	flex: 1 1 auto;
}

.member-payment-method .item-payment {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 auto;
	border: 1px solid var(--border-light);
	border-radius: var(--border-radius-xs);
	height: 40px;
	padding: .5rem;
	cursor: pointer;
}

.member-payment-method .item-payment.active {
	border: 2px solid rgb(255 63 38 / 100%);
}

.member-payment-method .item-payment.active::after {
	content: '';
	position: absolute;
	right: -1px;
	bottom: -1px;
	width: 24px;
	height: 24px;
	background-position: bottom right;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGRhdGEtbmFtZT0i5Zu+5bGCIDIiIHZpZXdCb3g9IjAgMCA2NCA2NCI+PGcgZGF0YS1uYW1lPSLlm77lsYIgMSI+PHBhdGggZD0iTTY0IDY0SDBsMzItMzJMNjQgMHY2NHoiIHN0eWxlPSJmaWxsOiNmZjNmMjYiLz48cGF0aCBkPSJNNTYuNDIgMzcuNDJjLjI0LjI0LjI0LjYyIDAgLjg2bC0xNS40IDE2LjAxcy0uMDQuMDUtLjA2LjA3bC0xLjcyIDEuNzJjLS4wNi4wNi0uMTMuMTEtLjIxLjE0YS41OC41OCAwIDAgMS0uNjYtLjEzbC0xLjcyLTEuNzJzLS4wNi0uMDctLjA5LS4xMWwtNy45OC03Ljk4YS42MDQuNjA0IDAgMCAxIDAtLjg2bDEuNzItMS43MmMuMjQtLjI0LjYyLS4yNC44NiAwbDcuNjUgNy42NSAxNS4wNC0xNS42NGMuMjQtLjI0LjYyLS4yNC44NiAwbDEuNzIgMS43MloiIHN0eWxlPSJmaWxsOiNmZmYiLz48L2c+PC9zdmc+');
	border-bottom-right-radius: 3px;
}

.member-payment-method .item-payment .wechat-icon {
	width: 14px;
	height: 14px;
	margin-right: 5px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAFEElEQVRYR81Zf2xTZRQ957Xr5hhhgeBU1KQtKKJgAlHTbiM1CETIrI5XfyWaCFGjCcaBmJAgBg2ogYgmon8ImpiYoO9timgw4IQw2ilCDLAIC2vLdAaIGcYY2NYf75pXttlt/fHeNpL1v/adc89537vf/e67JYZ9vI211SKpZwAGRDADkLLhmPH9zl4SfwJyiHR+Gl3REs6Oz4Evt++pnpxMyCcCUcfXgO1omsulrGoPhv81mRmDGXNJ44gI5tkOdy0I5AlXCWtNkxmDHs2vTYCVG3KrBPVYKBKimXOGkTpyLRZirDEVxVlDj+7bKYJVYw12LfgkdtGj+ztExDsuAsQVCJXx2vkko3Rr/p7RBCTRReH3JA8QPHbd5PKLJ5fuv2ze6OymRdMM9N2cSotXYAQJBAWYYn8R2Eu35hNbRPKEQr41v/4mXaOWtsKd0xZy9bWfX26IsQUis61wBjA2DLIX5Lq4Gv7AjkA2dsGx50r+jretEchrACZZiWPNIHFOUVgXrY+0WQlaDOP5euFcJFPNApleDFvcIHneCaXmrHokViyYneuzmhbekUonfwRwQyFeQYMk++B03hN7+PApO+JWsDN131JDsFmABWMwiDdiauvrVgStYAIHA87O7sTjhKwbPFYzpQnl+fh5V5DkH0r5lFkdy/b1WREvhJlzMFDR2518FpAGEbnFxBJICvGeo9y5NX05dQbA1FwxChhU3o6p4fVjMefes6hKSfW8ZAhehEjlYOkgmx2Kc/XZ+sOnzd+8mn+bAVlry6Di4Nxcu9arVT9Y4ig7eqa+uTufeU9TzW1iGK8QeFpESv83hi4FytoONfxlNtfc1ZJMnrRskEAiqkbKSI4o4h7NvwOQoAKu7AhF9mcHndnk9xkGXhVIEHK1let/nAmQ2ysmV7w5cNpk88xC3nO6qweAMtxk7kdMxuJqJOf57P6q9l6kUj/3B/qMVL4QyFQKnhdIzQgB8ECJi6vbg+H2Quni0fydArnVqsFf42pkfr6Abt33EwT3FSwP4O8g1sTUSKOVPPbovuMiGKGZb5Nciodap+XNscaaJ8VIf54zZ8g+AtsqS6dtOV6394oVcybGo/kuCFBlbQXNMlA5qTK2+Id/cgmYZ+qlc22dELkx+zrB7+hyvRwNHuqwaszEBQ4Gyjq7+8x6OJi3g/mbr5tRoCyLhsL78q6iXr1RxNjUvwlMQw2xUOu3dowNYN16TR0k/Y3lXZwRJfbG1NaH8gmaPV8i3bMVxC9ls2fs+u0uLTEacybHrft3Q+QxWwYBGKXOUu+ZRw6dG62wFZ53T2CmJBNt2fVySNoUalhJNj+1YvGSTdxkWBEbDcaj+fcLZHE+rpV2a0NcjWwejXgxjkevbhAx3i1Yroq3/EwrxAtRNfJxMUE71z26b6UAO3PtXMuPeAiQfCe6Irw+1/Fnx1hIQo7jjV0bRbAh19FmuQ7mEnVMcl7fsazlLzuGsrFuvXYekf5IRPxWYxTPwf5IBC7GQq2D7bnZ490ZmN5T7M3u6ovSqYUAGwSy3KqxooV6xFKTzTE18oD5u0f3PQHh+4DZSrEF5FHCuAA6MqsrIlWgVEFkAYT3C6TCrrEsg9Ze3Al+qJQ4dqRT6e0QWTJaQXs89toYfTANiMOewNjQmdHHhB8eTfjxWybpJ+AAE4AWD7U+OjgCTiSlBSJ3jy1rxok9fARshp0oQ3Rz9Fvi4sohQ/Ts+55of0P8B3yTMD9yn4/BAAAAAElFTkSuQmCC)
}

.member-payment-method .item-payment .alipay-icon {
	width: 14px;
	height: 14px;
	margin-right: 5px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAFqElEQVRYR9WYbWyTVRTH//+n7RhjCHQdL8MNtj4IYvCDxMiLgkAwBGOQ4MAEY3QMtja+kEjUDxCiiQQQAwp0nQaJwQQdBkQT1CADY8Q3MAaMAdvuBeW97YQxBNbeY57Barf15RndUPttu+f8z++e5557z71Ekt/IrfXZl1pVkYpodqsWYTK7TP9Papf6ASfqKpwXEml1Ceyo9t0jisshmCWQvpkCmPOnAvE9RNaH3aN2xPt0ALRX+VcAeAUivZaxdMAEPmWfgQuDi/KbDdsYSBucyKvpBG7FOMl948Y4Zx2Yxutry/isSvHQv5m5zhPXyGVBl/5GG2BelX+niMy9FdnpRoxQsUUfRqNam/+KhjMpCBInAb4F4EoMQLA6E8229UfOoOPtwB0qoo53Y2ZdTcnqsEuvjB+we/xhQAZloktqbto99ROAyLeZCKHXALmcg72+iRGFg/9JQHBFWkACl0C27UkpfttCLv2l+PE8j+9XkANTOYlIllGjyWxoCpB8LeTSl2eU4STOjmr/NBWV2kwBayn4PBWg0rSfw5Uleztk0Ot/lgrZKf0AHZAlGQGaylxvFYmZT/y/AbQQC5RmbUwEbNV47uzikfXxYw6Pf7xYLNZE9lTRYiWyPd3kTRVJu4gGVlDjH+lEE43b2PfAqYqCy+1jjir/C0pkXTqtbgGmE0ux0M9Mdzhv3zGf0XYbu8f/DSCT0mneGkDyzZBLXxrLXnXDMKUiJ810TuYAySgFARDHAGkW0EYY24cUClgCkQGpMqFZMD5YMeqnWPa8geeh1IZ02TPGUwKSPEfKGmtW7rYzZcPOJxMc/E7dkGg0OkHAyVCYDchd7bYEvwy59Zntf4+vFlt9NBAwJpcRIIGvbNm5panAkgJ7GksUWucJMZ8aXgxW6Ptjn9fjK1fAO2bgkmaQxDHpb78v/ETeRceWEwWqtbUc0paV4QAuEtJEMCCUw6Tth2DFyNNmApbWiKU25D8uAqcZ+6SAFk17+Hylc4+9KlBGyEYRyUklSPBHAjuysvHBqTL992S29vdDt2nNTcsEUiqCMWYgu6xBozMOVuqF+V7/VCXcB4hmRuiGTQTkTohlfdhd/F0qP7u3cSyldS4EcwUyPsUW1andImvCLn1BXpXvIxHM6wZczJTkeyGX/pRZ34J3/YVXr+FRCOaIyFQAsdOnaxXfOPTzPL4vBHjIbJA4uj13j3HOMa6L/xRG3eigu8TUlaLI0zjoMiOzlag5JGZBuLZTw8oPw279cbvH/zogy7oFSH6WreU81uFIu1G1JA8JtTUz7MW74k+UVPpjayTrXFNjXgdAgmeecTmHe70BRwQ4KiKD00IaGzmwMljpXEVS2u3zq3zzo8LtndZxHcn11n65W88+ObQlrbaxWXe5k2iW8nBlyRaHp260QG0TyL0JhdrA5GNSWx2sdB6Kt3FUBRYqqK0Q2BJDsImUaiB7U8hVeDLlLtEFkLxgtWpTzi0uOSIiHOINTFKQmSIoAtFfwEZN8JvFZt3bucUqqD6Vc1W1bBRBmZnsgGglUEPh+qBbP5zIJ9mlKUQNi0KVo3abCbRSRNvsrZstotYKcKcZny425NckN0y3l+yOX6ccUh0Y1xpVRxLSg/uF3Jwr1toT7hFN8TZGtq5I60hjPxNgCUSKbgqssxPZoAGbcrMtWxqeLv7TePoYePFKNJy6/aECpJFg0GgxIDJCgPweAUoiQqBFs1rvb3s8slf5D0JkYm8GvAnt0FCHXnAd0OMrBVBzEyK95kJwY8itPxd7wMzz+D4R4JFei9gdYfKoljVgsvHKGgN0bDnfX65d2CUiM7qj1eO25Ik+Nm3K6fKSthtkh7foB/eL9ZfjgaVKycup3kx6HOo6yFWQ6/poOavij8uEj+VGa96gAg8AHA2IHdJxIj0JKGQLIQ39xHag81ZmxPkbbKCuH00vQXgAAAAASUVORK5CYII=)
}


.member-payment-confirm {
	display: flex;
	flex-direction: row;
	flex: 1 1 auto;
}

.member-payment-confirm .item-label {
	display: flex;
	align-items: center;
	min-width: 120px;
}

.member-payment-confirm .item-content {
	flex: 1 1 auto;
}

.member-payment-confirm .item-content .price {
	font-size: 2rem;
	color: #ff3f26;
}

.member-payment-confirm .item-content .price small {
	font-size: 65%;
}

.member-payment-footer {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: row;
}

.member-payment-footer a {
	display: flex;
	align-items: center;
	color: var(--color-muted);
}

.member-payment-footer a i {
	color: #ff3f26;
}

.member-payment-footer a:hover {
	color: #ff3f26;
}


/* -------------------------------- 
## Order list
-------------------------------- */

.user-order-list .item {
	position: relative;
	overflow: hidden;
	border: 2px solid #f3eedf;
	margin-bottom: 1rem;
}


.user-order-list .item:last-child {
	margin-bottom: 0;
}

.user-order-list .item .item-header {
	padding: .875rem 1rem;
	background: #FFF6DE;
	background: linear-gradient(to right, #FFF6DE, #FFFBF1);
}

.user-order-list .item .item-data {
	padding: 1rem;
}


.user-order-list .item .item-data li {
	margin-bottom: .5rem;
}

.user-order-list .item .item-data li:last-child {
	margin-bottom: 0;
}

/* -------------------------------- 
## Author info
-------------------------------- */
.author-info {
	position: relative;
}

.author-info .author-info-poster .poster-text {
	font-size: 5em;
	font-style: italic;
	opacity: .1;
}

.author-info .author-info-content {
	position: relative;
	display: flex;
	padding: 1.25rem 4rem 0;
	z-index: 2;
}

.author-info .author-info-body {
	flex: 1 1 auto;
	padding: 0 0 0 1.5rem;
}

.author-info .author-info-badge {
	display: flex;
	align-items: center;
}

.author-info .author-info-badge .avatar-badge {
	width: 16px;
	height: 16px;
}

.author-info .author-info-content .avatar-color {
	position: relative;
	width: 150px;
	height: 150px;
	margin-top: -70px;
}

.author-info .author-info-content .avatar-color .flex-avatar {
	width: 135px;
	height: 135px;
}

.author-info .author-info-content .avatar-color .flex-avatar img {
	width: 124px;
	height: 124px;
}

.author-info:hover .author-info-content .avatar-color::before {
	transform: rotate(360deg);
}

.author-info .author-info-content .avatar-color .avatar-badge {
	transform: translate(-25%, 5%);
}

.author-info .author-info-content .author-desc {
	max-width: 60%;
	margin-left: auto;
	margin-right: auto;
}

.author-info-name-mw {
	max-width: 60px;
}

@media (min-width: 768px) and (max-width: 1199.98px) {
	.author-info .author-info-content {
		padding: 1rem 2rem 0;
	}

	.author-info .author-info-content .avatar-color {
		width: 135px;
		height: 135px;
	}

	.author-info .author-info-content .avatar-color .flex-avatar {
		width: 124px;
		height: 124px;
	}

	.author-info .author-info-content .avatar-color .flex-avatar img {
		width: 116px;
		height: 116px;
	}

	.author-info .author-info-content .avatar-color .avatar-badge {
		transform: translate(-15%, -5%);
	}

	.author-info .author-info-content .author-desc {
		max-width: 80%;
	}

	.author-info .author-info-body {
		padding: 0 0 0 1rem;
	}
}

@media (max-width: 767.98px) {
	.author-info .author-info-poster::after {}

	.author-info .author-info-poster .poster-text {
		font-size: 3em;
	}

	.author-info .author-info-content {
		padding: 3.5rem 2rem 0;
	}

	.author-info .author-info-content .avatar-color {
		position: absolute;
		left: 50%;
		width: 90px;
		height: 90px;
		margin-top: -44px;
		transform: translateX(-50%);
	}

	.author-info .author-info-content .avatar-color .flex-avatar {
		width: 80px;
		height: 80px;
	}

	.author-info .author-info-content .avatar-color .flex-avatar img {
		width: 72px;
		height: 72px;
	}

	.author-info .author-info-content .avatar-color .avatar-badge {
		transform: translate(-5%, 10%);
	}

	.author-info .author-info-content .author-desc {
		max-width: 100%;
	}

	.author-info .author-info-body {
		padding: 0;
		text-align: center;
	}

}

/*--------------------------------------------------------------
## Member pay
--------------------------------------------------------------*/
.pay-member-button:hover,
.pay-member-button:focus {
	background-color: #ff5742;
	border-color: #ff5742;
	color: #fff;
}

/*--------------------------------------------------------------
## Login style
--------------------------------------------------------------*/

.login-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgb(11 14 30 / 60%);
	z-index: 999;
	cursor: pointer;
	overflow-y: auto;
	visibility: hidden;
	opacity: 0;
}

.login-modal.is-visible {
	visibility: visible;
	opacity: 1;
}

.login-modal.is-visible .login-modal-container {
	transform: scale(1) translateY(0px);
}

.login-modal-container {
	position: relative;
	width: 96%;
	max-width: 435px;
	background: #fff;
	margin: 3em auto 4em;
	cursor: auto;
	border-radius: var(--border-radius-md);
	transform: scale(.95) translateY(50px);
	transition-property: transform;
	transition-duration: 0.5s;

}

.login-modal-container .login-tabmenu {
	padding: 2rem 2rem 0;
}

.login-modal-container .login-tabmenu ul {
	display: flex;
	flex-wrap: wrap;
	background-color: var(--bg-light);
	border-radius: 100px;
	padding: 0.5rem;
}

.login-modal-container .login-tabmenu ul li {
	flex: 1 0 auto;
	text-align: center;
	color: var(--color-muted);
	border-radius: 100px;
}

.login-modal-container .login-tabmenu ul li.selected {
	color: var(--color-dark);
	background: #fff;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.025);
}

.login-modal-container .login-tabmenu ul li a {
	display: block;
	text-align: center;
	font-weight: bold;
	height: 45px;
	line-height: 45px;
	cursor: pointer;
}

@media (max-width: 767.98px) {
	.login-modal-container .login-tabmenu ul li a {
		height: 40px;
		line-height: 40px;
	}
}

/*--------------------------------------------------------------
## Login form
--------------------------------------------------------------*/

.login-header {
	font-size: 1.75rem;
	font-weight: bold;
	padding: 2.75rem 2.5rem 0rem;
}

.login-footer {
	border-bottom-left-radius: var(--border-radius-md);
	border-bottom-right-radius: var(--border-radius-md);
}

.login-form {
	padding: 2.5rem 2.5rem;
}

.login-form .form-submit {
	margin-top: 2.5rem;
}

.login-close {
	display: block;
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translate(-50%, 150%);
}

.login-form-bottom-message {
	position: absolute;
	width: 100%;
	left: 0;
	bottom: -40px;
	text-align: center;
}

.login-form-bottom-message a {
	color: #fff;
}

.login-hr {
	position: relative;
	margin-top: 2rem;
	margin-bottom: 1.5rem;
}

.login-hr span {
	position: relative;
	padding: 0 10px;
}

.login-hr span:before {
	content: "";
	position: absolute;
	left: 100%;
	top: 50%;
	width: 100px;
	height: 1px;
	background-color: var(--bg-light);
	display: block;
}

.login-hr span:after {
	content: "";
	position: absolute;
	right: 100%;
	top: 50%;
	width: 100px;
	height: 1px;
	background-color: var(--bg-light);
	display: block;
}

.login-wechat-qcode img {
	width: 200px;
	height: 200px;
	padding: 15px;
	box-shadow: 0 0 1px rgba(28, 31, 35, .16), 0 6px 32px 4px rgba(28, 31, 35, .08);
	border-radius: var(--border-radius-md);
}

.login-form .login-qq-button {
	background-color: rgb(0 139 207 / 10%);
	border-color: rgb(0 139 207 / 10%);
}

.login-form .login-qq-icon {
	width: 1.25rem;
	height: 1.25rem;
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	background-image: url('data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCI+PHBhdGggZD0iTTkxNi4wNjQgNTc0Ljg4YTEyODcuODQgMTI4Ny44NCAwIDAgMC0yOC44OTYtNzcuODA4bC0yOC42MDgtNjcuOTY4LjA0OC04LjExMkM4NTguNjU2IDE4OC4yODggNzE5LjM2IDMyIDUxMiAzMlMxNjUuMzQ0IDE4OC4yODggMTY1LjM0NCA0MjAuOTQ0bC4wNDggOC4wNjQtMjguMDMyIDY2LjYyNGExMjcxLjA0IDEyNzEuMDQgMCAwIDAtMjkuNTIgNzkuMzQ0Yy0zNC4yNzIgMTA0LjkyOC0zNi44NjQgMTgxLjI5Ni03LjU4NCAyMjYuODk2IDE1Ljg0IDI0LjY3MiA0MC42NTYgNDEuMDg4IDY4LjY0IDQ1LjY5NmExMTEuMjY0IDExMS4yNjQgMCAwIDAgMTIuMjg4IDg2LjMwNGMzMy4yMTYgNTMuNDI0IDk2LjE0NCA1Ny40MDggMTg4LjM1MiA1Ny40MDggNTMuMjMyIDAgMTA5Ljg3Mi0yLjczNiAxNDIuNDE2LTUuNTY4IDMyLjU0NCAyLjg4IDg5LjEzNiA1LjU2OCAxNDIuNDE2IDUuNTY4IDkyLjIwOCAwIDE1NS4xMzYtMy45ODQgMTg4LjMwNC01Ny4zMTIgMTQuOTI4LTI0IDIwLjQ0OC01NS43NzYgMTIuMzM2LTg2LjRhMTAxLjA0IDEwMS4wNCAwIDAgMCA2OC42NC00NS42OTZjMjkuMjMyLTQ1LjYgMjYuNjg4LTEyMS45NjgtNy41ODQtMjI2Ljk5MnptLTc2LjYwOCAxNzcuOTM2LS43Mi4wNDhjLTE4LjYyNCAwLTY5LjMxMi03OC40MzItNjkuMzEyLTc4LjQzMiAwIDQ2LjU2LTI1LjIgMTEzLjc2LTc5LjY4IDE1Ny42MzIgMjAuNCA2IDQ1LjQwOCAxNS4xNjggNjEuNDQgMjYuNDk2IDE0LjQ0OCAxMC4xMjggMTIuNjI0IDIwLjQ0OCAxMC4wMzIgMjQuNjcyLTUuNjE2IDkuMDI0LTUzLjQyNCAxMi0xMDYuOCAxMi01NC43NjggMC0xMTUuNDQtMy4xMi0xNDIuNDE2LTYtMjYuOTc2IDIuOTI4LTg3LjY0OCA2LTE0Mi40MTYgNi01My4zNzYgMC0xMDEuMTM2LTIuOTc2LTEwNi44LTEyLTIuNTkyLTQuMTc2LTQuNDE2LTE0LjU0NCAxMC4wMzItMjQuNjcyIDE2LjAzMi0xMS4yOCA0MS4wNC0yMC40OTYgNjEuNDQtMjYuNDk2LTU0LjQ4LTQzLjkyLTc5LjY4LTExMS4wNzItNzkuNjgtMTU3LjY4IDAgMC01MC43MzYgNzguNDMyLTY5LjMxMiA3OC40MzJsLS43Mi0uMDQ4Yy04LjQtLjk2LTE5LjM5Mi00NC4wNjQgMTQuNTkyLTE0OC4xNzYgNy4xMDQtMjEuODQgMTYuODQ4LTQ3LjI4IDI2LjY4OC03MS43NmwzNS45NTItODUuNDRjMC0xLjAwOC0uNDgtMTcuODU2LS40OC0yNi40OTZDMjYxLjM0NCAyNzQuODMyIDMzMy44MjQgMTI4IDUxMiAxMjhzMjUwLjY1NiAxNDYuODMyIDI1MC42NTYgMjkyLjk0NGMwIDguNjg4LS40MzIgMjUuNDg4LS40OCAyNi40OTZsMzYgODUuNDRjOS44NCAyNC40OCAxOS41ODQgNDkuOTIgMjYuNjg4IDcxLjc2IDMzLjk4NCAxMDQuMTEyIDIyLjk5MiAxNDcuMjE2IDE0LjU5MiAxNDguMTc2eiIgZmlsbD0iIzAwOGJjZiIvPjwvc3ZnPg==');
}

.login-form .login-wechat-button {
	background-color: rgb(0 149 96 / 10%);
	border-color: rgb(0 149 96 / 10%);
}

.login-form .login-wechat-icon {
	width: 1.25rem;
	height: 1.25rem;
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	background-image: url('data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCI+PHBhdGggZD0iTTQyNCAxMjkuOTg0YzE5OC44NDggMCAzNjAgMTI1LjM3NiAzNjAgMjgwIDAgNy4wNC0uMzIgMTQuMDgtMS4wMjQgMjEuMDU2bC0xLjI4LS40NDhDODg2LjQgNDY0Ljg5NiA5NjAgNTQ1LjUzNiA5NjAgNjM5LjU1MmMwIDcyLjQ0OC00My43NzYgMTM2Ljk2LTExMS44MDggMTc4LjQ5Nkw4NTMuMTIgODk2bC03MS4yMzItNDcuNjhhMzYyLjY4OCAzNjIuNjg4IDAgMCAxLTExMi45NiAxNy43MjhjLTE0MC40MTYgMC0yNTcuNi03Ny40NC0yODQuOTI4LTE4MC40MTZsLjY0IDIuNjI0Yy0zMi0yLjU2LTYyLjg0OC04LjU3Ni05MS44NC0xNy40MDhsLTEuNTM2LS40NDgtMTM4Ljg4IDY1LjZWNTkzLjc5MkM5Ny40MDggNTQ0LjY0IDY0IDQ4MC4zMiA2NCA0MDkuOTg0YzAtMTU0LjYyNCAxNjEuMTUyLTI4MCAzNjAtMjgwem0xNTAuMDE2IDQwMS45ODRhMzIgMzIgMCAxIDAgMCA2NCAzMiAzMiAwIDAgMCAwLTY0em0xOTAuMDE2IDBhMzIgMzIgMCAxIDAgMCA2NCAzMiAzMiAwIDAgMCAwLTY0ek00MjQgMjI2LjA0OGMtNzUuODQgMC0xNDUuNzI4IDIyLjk3Ni0xOTUuNjQ4IDYxLjc2LTQ0LjggMzQuODE2LTY4LjM1MiA3OC4yMDgtNjguMzUyIDEyMi4yNCAwIDM5LjQyNCAxOC44OCA3OC4yMDggNTUuMjMyIDExMS4xNjhsMS4xNTIuOTYgMzIgMjguNjcydjMzLjY2NGwzNS42NDgtMTYuODMyIDM1LjU4NCAxMC45NDRjMjAuNzM2IDYuNCA0Mi40MzIgMTAuODggNjQuODk2IDEzLjI0OGwtLjM4NCAxLjA4OGMyNy42NDgtMTAyLjc4NCAxNDQuNjQtMTc5Ljk2OCAyODQuODY0LTE3OS45NjggNy4zNiAwIDE0LjY1Ni4xOTIgMjEuODI0LjY0bC0zLjAwOC0uMTkyLjE5Mi0zLjQ1NmMwLTQzLjk2OC0yMy42MTYtODcuMzYtNjguMzUyLTEyMi4yNC00OS45Mi0zOC43Mi0xMTkuODA4LTYxLjc2LTE5NS42NDgtNjEuNzZ6bS03OC4wMTYgODMuOTA0YTQ4IDQ4IDAgMSAxIDAgOTYgNDggNDggMCAwIDEgMC05NnptMTkyIDBhNDggNDggMCAxIDEgMCA5NiA0OCA0OCAwIDAgMSAwLTk2eiIgZmlsbD0iIzAwY2Y4NyIvPjwvc3ZnPg==');
}

@media (max-width: 767.98px) {
	.login-header {
		padding: 1.75rem 1.75rem 0rem;
	}

	.login-form {
		padding: 1.75rem
	}
}

/*--------------------------------------------------------------
## Form field
--------------------------------------------------------------*/

.form-field {
	position: relative;
}

.form-field input[type="number"] {
	-webkit-appearance: none;
	-moz-appearance: textfield;
	appearance: textfield;
}

.form-field input[type="number"]::-webkit-inner-spin-button,
.form-field input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	appearance: none;
}

.form-field input[type="password"] {
	padding-right: 65px;
}

.form-field .hide-password {
	position: absolute;
	right: 0;
	top: 50%;
	font-size: 1.25rem;
	line-height: 1;
	padding: 6px 15px;
	color: var(--color-muted);
	transform: translateY(-50%);
}

@media (max-width: 767.98px) {
	.login-modal-container {
		margin: 5em auto 1em;
	}
}

@media (min-width: 768px) {
	.login-modal-container {
		margin: 8em auto 1em;
	}
}

/*--------------------------------------------------------------
## Fileuploader style
--------------------------------------------------------------*/

.fileuploader {
	background: transparent;
	border-radius: 0;
	padding: 0;
	margin: 0;
}

.fileuploader-theme-thumbnails .fileuploader-thumbnails-input-inner {

	font-size: 30px;
	line-height: 1;
	color: var(--color-muted);
	background: var(--bg-light);
	border-radius: var(--border-radius-sm);
	border: 0;
	opacity: 1;
	transition: all 0.2s ease;
}

.fileuploader-theme-thumbnails .fileuploader-thumbnails-input-inner:hover {
	background: var(--bg-light);
	color: var(--color-secondary);
	border-color: transparent;
	opacity: 1;
}

.fileuploader-items .fileuploader-item .fileuploader-action.fileuploader-action-remove i:before,
.fileuploader-items .fileuploader-item .fileuploader-action.fileuploader-action-remove.fileuploader-action-success i:before {
	content: "";
	display: block;
	width: 15px;
	height: 15px;
	margin: auto;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url("data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTgyNy44ODEgMTkzLjk5OWMxOC41OSAxOC41MjUgMTguODMgNDguNDk3LjY3NiA2Ny4zMTVsLS41NTYuNTY3TDU3OS43NjIgNTExbDI0OC4yNCAyNDkuMTE5YzE4LjcxMSAxOC43NzggMTguNjU3IDQ5LjE3LS4xMjEgNjcuODgyLTE4LjU5IDE4LjUyNS00OC41NjQgMTguNjU4LTY3LjMxNy40MzhsLS41NjUtLjU1OEw1MTIgNTc5LjAwMyAyNjQuMDAxIDgyNy44ODFjLTE4LjcxMiAxOC43NzgtNDkuMTA0IDE4LjgzMi02Ny44ODIuMTItMTguNTktMTguNTI1LTE4LjgzLTQ4LjQ5Ny0uNjc2LTY3LjMxNWwuNTU2LS41NjdMNDQ0LjIzNyA1MTEgMTk1Ljk5OSAyNjEuODgxYy0xOC43MTItMTguNzc4LTE4LjY1OC00OS4xNy4xMi02Ny44ODIgMTguNTktMTguNTI1IDQ4LjU2NC0xOC42NTggNjcuMzE3LS40MzhsLjU2NS41NThMNTEyIDQ0Mi45OTdsMjQ3Ljk5OS0yNDguODc4YzE4LjcxMi0xOC43NzggNDkuMTA0LTE4LjgzMiA2Ny44ODItLjEyeiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==");
}

.fileuploader-items .fileuploader-item .fileuploader-action.fileuploader-action-remove.fileuploader-action-success:active i:before,
.fileuploader-items .fileuploader-item .fileuploader-action.fileuploader-action-remove.fileuploader-action-success:hover i:before {
	content: "";
	display: block;
	width: 15px;
	height: 15px;
	margin: auto;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url("data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTgyNy44ODEgMTkzLjk5OWMxOC41OSAxOC41MjUgMTguODMgNDguNDk3LjY3NiA2Ny4zMTVsLS41NTYuNTY3TDU3OS43NjIgNTExbDI0OC4yNCAyNDkuMTE5YzE4LjcxMSAxOC43NzggMTguNjU3IDQ5LjE3LS4xMjEgNjcuODgyLTE4LjU5IDE4LjUyNS00OC41NjQgMTguNjU4LTY3LjMxNy40MzhsLS41NjUtLjU1OEw1MTIgNTc5LjAwMyAyNjQuMDAxIDgyNy44ODFjLTE4LjcxMiAxOC43NzgtNDkuMTA0IDE4LjgzMi02Ny44ODIuMTItMTguNTktMTguNTI1LTE4LjgzLTQ4LjQ5Ny0uNjc2LTY3LjMxNWwuNTU2LS41NjdMNDQ0LjIzNyA1MTEgMTk1Ljk5OSAyNjEuODgxYy0xOC43MTItMTguNzc4LTE4LjY1OC00OS4xNy4xMi02Ny44ODIgMTguNTktMTguNTI1IDQ4LjU2NC0xOC42NTggNjcuMzE3LS40MzhsLjU2NS41NThMNTEyIDQ0Mi45OTdsMjQ3Ljk5OS0yNDguODc4YzE4LjcxMi0xOC43NzggNDkuMTA0LTE4LjgzMiA2Ny44ODItLjEyeiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==");
}

@media (max-width: 767.98px) {
	.fileuploader-theme-thumbnails {
		padding: 10px;
		margin: 0;
	}

	.fileuploader-theme-thumbnails .fileuploader-items .fileuploader-items-list {
		margin: -10px 0 0 -10px;
	}

	.fileuploader-theme-thumbnails .fileuploader-thumbnails-input,
	.fileuploader-theme-thumbnails .fileuploader-items-list .fileuploader-item {
		width: calc(33.33333% - 10px);
		padding-top: 25%;
		margin: 10px 0 0 10px;
	}
}

/*-------------------------------------------------------------- 
## fileuploader avatar
--------------------------------------------------------------*/

.fileuploader-avatar .fileuploader-theme-thumbnails {
	max-width: 200px;
	margin: 2rem auto 2.5rem;
}

.fileuploader-avatar .fileuploader-theme-thumbnails .fileuploader-items-list {
	margin: 0;
}

.fileuploader-avatar .fileuploader-theme-thumbnails .fileuploader-thumbnails-input,
.fileuploader-avatar .fileuploader-theme-thumbnails .fileuploader-items-list .fileuploader-item {
	width: 100%;
	margin: 0;
	padding-top: 100%;
}

.fileuploader-avatar .fileuploader-items .fileuploader-item .fileuploader-action.fileuploader-action {
	box-shadow: none;
}

/* -------------------------------- 
## Editor radio style 
-------------------------------- */

.editor-type-radio {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin: -.375rem;
}

.editor-type-radio .item {
	padding: .375rem;
}

.editor-type-radio .item .check-input {
	display: none;
}

.editor-type-radio .item .check-label {
	position: relative;
	padding: .75rem 1.5rem;
	display: block;
	cursor: pointer;
	color: var(--color-muted);
	text-align: center;
	background-color: var(--outline-light);
	border-radius: var(--border-radius-sm);
}

.editor-type-radio .item .check-input:checked~.check-label {
	background-color: var(--outline-primary);
	color: var(--color-primary);
}

.editor-type-radio .item .check-label .cheak-icon {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 2.75rem;
	height: 2.75rem;
	font-size: 1.75rem;
	margin: 0 auto 0.5rem;
}

.editor-tags-radio {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin: -.375rem;
}

.editor-tags-radio .item {
	padding: .375rem;
}

.editor-tags-radio .item .check-input {
	display: none;
}

.editor-tags-radio .item .check-label {
	position: relative;
	padding: .5rem 2.5rem .5rem .875rem;
	display: block;
	cursor: pointer;
	background-color: var(--outline-light);
	color: var(--color-secondary);
	border-radius: var(--border-radius-sm);
}

.editor-tags-radio .item .check-input:checked~.check-label {
	background-color: var(--outline-primary);
	color: var(--color-primary);
}

.editor-tags-radio .item .check-label .cheak-icon {
	position: absolute;
	top: 50%;
	right: 14px;
	width: 12px;
	height: 12px;
	transform: translateY(-50%);
	transition: all 300ms ease-in-out;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMiIgaGVpZ2h0PSIyMiIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iIzA5MDkwOSIgZmlsbC1vcGFjaXR5PSIuMiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTIuNjIxIDEyLjYyMWg3LjVhMS41IDEuNSAwIDAgMCAwLTNoLTcuNXYtNy41YTEuNSAxLjUgMCAxIDAtMyAwdjcuNWgtNy41YTEuNSAxLjUgMCAxIDAgMCAzaDcuNXY3LjVhMS41IDEuNSAwIDEgMCAzIDB2LTcuNVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==');
}

.editor-tags-radio .item .check-input:checked~.check-label .cheak-icon {
	transform: translateY(-50%) rotate(45deg);
}

/*--------------------------------------------------------------
## Dark mode
--------------------------------------------------------------*/

body.nice-dark-mode {
	background-color: var(--dark-bg-body);
	color: var(--dark-color-body);
}

.nice-dark-mode a {
	color: var(--dark-color-dark);
}

.nice-dark-mode h1>a,
.nice-dark-mode h2>a,
.nice-dark-mode h3>a,
.nice-dark-mode h4>a,
.nice-dark-mode h5>a,
.nice-dark-mode h6>a,
.nice-dark-mode .h1>a,
.nice-dark-mode .h2>a,
.nice-dark-mode .h3>a,
.nice-dark-mode .h4>a,
.nice-dark-mode .h5>a,
.nice-dark-mode .h6>a {
	color: var(--dark-color-dark);
}

.nice-dark-mode h1>a:hover,
.nice-dark-mode h2>a:hover,
.nice-dark-mode h3>a:hover,
.nice-dark-mode h4>a:hover,
.nice-dark-mode h5>a:hover,
.nice-dark-mode h6>a:hover,
.nice-dark-mode .h1>a:hover,
.nice-dark-mode .h2>a:hover,
.nice-dark-mode .h3>a:hover,
.nice-dark-mode .h4>a:hover,
.nice-dark-mode .h5>a:hover,
.nice-dark-mode .h6>a:hover {
	color: #fff;
}

/*--------------------------------------------------------------
Table style
--------------------------------------------------------------*/
.nice-dark-mode th,
.nice-dark-mode td {
	border-color: var(--dark-bg-light);
}

.nice-dark-mode th {
	background: var(--dark-bg-light);
}

.nice-dark-mode caption {
	color: var(--dark-color-muted);
}

/* Inputs ------------------------------------ */
.nice-dark-mode input,
.nice-dark-mode textarea {
	border-color: var(--dark-bg-light);
	color: var(--dark-text-dark);
}

/* Quotes ------------------------------------ */
.nice-dark-mode blockquote {
	background-color: var(--dark-bg-light);
}

/*--------------------------------------------------------------
Font color style
--------------------------------------------------------------*/

.nice-dark-mode .text-dark {
	color: var(--dark-color-dark) !important;
}

.nice-dark-mode .text-secondary {
	color: var(--dark-color-secondary) !important;
}

.nice-dark-mode .text-muted {
	color: var(--dark-color-muted) !important;
}

.nice-dark-mode .text-light {
	color: var(--dark-color-light) !important;
}

/*--------------------------------------------------------------
  Buttons
  --------------------------------------------------------------*/
.nice-dark-mode .btn.disabled,
.nice-dark-mode .btn:disabled {
	color: var(--dark-bg-muted);
	border-color: var(--dark-bg-light);
	background-color: var(--dark-bg-light);
}

/*--------------------------------------------------------------
btn style
--------------------------------------------------------------*/

.nice-dark-mode .btn-primary:hover,
.nice-dark-mode .btn-primary:focus,
.nice-dark-mode .btn-primary:active,
.nice-dark-mode .btn-primary.active {
	background-color: var(--dark-bg-white);
	border-color: var(--dark-bg-white);
}

/*--------------------------------------------------------------
  btn secondary style
  --------------------------------------------------------------*/
.nice-dark-mode .btn-secondary {
	color: var(--dark-color-light);
	background-color: var(--dark-bg-secondary);
	border-color: var(--dark-bg-secondary);
}

.nice-dark-mode .btn-secondary:hover,
.nice-dark-mode .btn-secondary:focus,
.nice-dark-mode .btn-secondary.active,
.nice-dark-mode .btn-secondary:active {
	color: #fff;
	background-color: var(--dark-bg-light);
	border-color: var(--dark-bg-light);
}

/*--------------------------------------------------------------
  btn light style
  --------------------------------------------------------------*/
.nice-dark-mode .btn-light {
	background-color: var(--dark-bg-light);
	border-color: var(--dark-bg-light);
	color: var(--dark-color-muted);
}

.nice-dark-mode .btn-light:hover,
.nice-dark-mode .btn-light:focus,
.nice-dark-mode .btn-light:active,
.nice-dark-mode .btn-light.active {
	background-color: var(--dark-bg-light);
	border-color: var(--dark-bg-light);
	color: var(--dark-color-dark);
}

.nice-dark-mode .btn-light.disabled,
.nice-dark-mode .btn-light:disabled {
	background-color: var(--dark-bg-light);
	border-color: var(--dark-bg-light);
	color: var(--dark-color-muted);
	cursor: not-allowed;
}

/*--------------------------------------------------------------
  btn dark style
  --------------------------------------------------------------*/
.nice-dark-mode .btn-dark {
	background-color: var(--dark-bg-dark);
	border-color: var(--dark-bg-dark);
	color: var(--dark-color-light);
}

.nice-dark-mode .btn-dark:hover,
.nice-dark-mode .btn-dark:focus,
.nice-dark-mode .btn-dark.active,
.nice-dark-mode .btn-dark:active {
	background-color: var(--dark-bg-secondary);
	border-color: var(--dark-bg-secondary);
	color: #fff;
}

/*--------------------------------------------------------------
  btn link style
  --------------------------------------------------------------*/
.nice-dark-mode .btn-link {
	color: var(--dark-color-dark);
}

.nice-dark-mode .btn-link:hover,
.nice-dark-mode .btn-link:focus,
.nice-dark-mode .btn-link.active,
.nice-dark-mode .btn-link:active {
	color: var(--dark-color-dark);
	background-color: var(--dark-bg-light);
	border-color: var(--dark-bg-light);
}

.nice-dark-mode .btn-link:disabled,
.nice-dark-mode .btn-link.disabled {
	background-color: var(--dark-bg-light);
	border-color: var(--dark-bg-light);
	color: var(--dark-color-muted);
}

/*--------------------------------------------------------------
  btn outline light style
  --------------------------------------------------------------*/

.nice-dark-mode .btn-outline-light {
	color: var(--dark-color-muted);
	border-color: var(--dark-bg-light);
	background-color: var(--dark-bg-light);
}

.nice-dark-mode .btn-outline-light:hover,
.nice-dark-mode .btn-outline-light:focus,
.nice-dark-mode .btn-outline-light:active,
.nice-dark-mode .btn-outline-light.active {
	color: var(--dark-color-dark);
	border-color: var(--dark-bg-light);
	background-color: var(--dark-bg-light);
}

/*--------------------------------------------------------------
  btn outline style
  --------------------------------------------------------------*/
.nice-dark-mode .btn-outline-primary {
	color: var(--color-primary);
	background-color: var(--dark-outline-primary);
	border-color: var(--dark-border-primary);
}

.nice-dark-mode .btn-outline-primary:hover,
.nice-dark-mode .btn-outline-primary:focus,
.nice-dark-mode .btn-outline-primary:active,
.nice-dark-mode .btn-outline-primary.active {
	color: #fff;
	background-color: var(--btn-primary);
	border-color: var(--btn-primary);
}

/*--------------------------------------------------------------
btn outline danger style
--------------------------------------------------------------*/
.nice-dark-mode .btn-outline-danger {
	color: var(--color-danger);
	border-color: var(--dark-outline-danger);
}

.nice-dark-mode .btn-outline-danger:hover,
.nice-dark-mode .btn-outline-danger:focus,
.nice-dark-mode .btn-outline-danger:active,
.nice-dark-mode .btn-outline-danger.active {
	color: #fff;
	border-color: var(--bg-danger);
	background-color: var(--bg-danger);
}

/*--------------------------------------------------------------
  btn outline light style
  --------------------------------------------------------------*/
.nice-dark-mode .btn-icon small {
	border-color: var(--dark-bg-secondary);
}

/*--------------------------------------------------------------
  bg
  --------------------------------------------------------------*/

.nice-dark-mode .bg-dark {
	background-color: var(--dark-bg-dark) !important;
}

.nice-dark-mode .bg-secondary {
	background-color: var(--dark-bg-secondary) !important;
}

.nice-dark-mode .bg-light {
	background-color: var(--dark-bg-light) !important;
}

.nice-dark-mode .bg-white {
	background-color: var(--dark-bg-white) !important;
}

/*--------------------------------------------------------------
## Border
--------------------------------------------------------------*/

.nice-dark-mode .border-dark {
	border-color: var(--dark-border-dark) !important;
}

.nice-dark-mode .border-secondary {
	border-color: var(--dark-border-secondary) !important;
}

.nice-dark-mode .border-light {
	border-color: var(--dark-border-light) !important;
}

/*--------------------------------------------------------------
## Form style
--------------------------------------------------------------*/

.nice-dark-mode .form-control {
	color: var(--dark-color-muted);
	background-color: var(--dark-bg-light);
	border-color: var(--dark-bg-light);
}

.nice-dark-mode .form-control:focus,
.nice-dark-mode .form-control:active {
	color: var(--dark-color-dark);
	background-color: var(--dark-bg-light);
	border-color: var(--dark-bg-light);
}

.nice-dark-mode .form-control::-webkit-input-placeholder {
	color: var(--dark-color-muted);
	opacity: 1;
}

.nice-dark-mode .form-control::-moz-placeholder {
	color: var(--dark-color-muted);
	opacity: 1;
}

.nice-dark-mode .form-control:-ms-input-placeholder {
	color: var(--dark-color-muted);
	opacity: 1;
}

.nice-dark-mode .form-control::-ms-input-placeholder {
	color: var(--dark-color-muted);
	opacity: 1;
}

.nice-dark-mode .form-control::placeholder {
	color: var(--dark-color-muted);
	opacity: 1;
}

.nice-dark-mode .form-control:disabled,
.nice-dark-mode .form-control[readonly] {
	border-color: var(--dark-bg-light);
	background-color: var(--dark-bg-light);
	color: var(--dark-color-light);
}


.nice-dark-mode .form-select {
	border-color: var(--dark-bg-light);
	background-color: var(--dark-bg-light);
	color: var(--dark-color-muted);
}

.nice-dark-mode .form-select:focus,
.nice-dark-mode .form-select:active {
	color: var(--color-dark);
	border-color: var(--dark-bg-dark);
	background-color: var(--dark-bg-dark);
}

/*--------------------------------------------------------------
## Card style
  --------------------------------------------------------------*/
.nice-dark-mode .card,
.nice-dark-mode .block {
	background-color: var(--dark-bg-secondary);
}

/*--------------------------------------------------------------
## Header style
  --------------------------------------------------------------*/
.nice-dark-mode .dark-taggle {
	color: var(--color-warning);
	background-color: transparent;
	border-color: transparent;
}

.nice-dark-mode .dark-taggle:hover {
	background-color: rgba(255, 132, 56, 0.1);
	border-color: rgba(255, 132, 56, 0.1);
	color: var(--color-warning);
}

/*--------------------------------------------------------------
## Logo style
--------------------------------------------------------------*/
.nice-dark-mode .navbar-brand .logo-light {
	display: none;
}

.nice-dark-mode .navbar-brand .logo-dark {
	display: block;
}

/*--------------------------------------------------------------
## Site Navigation style
  --------------------------------------------------------------*/

@supports ((-webkit-backdrop-filter: blur(6px)) or (backdrop-filter: blur(6px))) {
	.nice-dark-mode .site-navbar.fixed {
		background-color: rgb(0 0 0 / 60%);
	}
}

.nice-dark-mode .navbar-site li a {
	color: var(--dark-color-muted);
}

.nice-dark-mode .navbar-site>li:hover a,
.nice-dark-mode .navbar-site>li.current-menu-parent>a,
.nice-dark-mode .navbar-site>li.current-menu-item>a {
	color: var(--dark-color-dark);
}

.nice-dark-mode .navbar-site li ul.sub-menu {
	background-color: var(--dark-bg-secondary);
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.nice-dark-mode .navbar-site li ul.sub-menu li a {
	color: var(--dark-color-muted);
}

.nice-dark-mode .navbar-site li ul.sub-menu li a:hover,
.nice-dark-mode .navbar-site li ul.sub-menu li.current-menu-item>a {
	color: var(--dark-color-dark);
	background: linear-gradient(to right, var(--dark-bg-light), rgba(255, 255, 255, 0));
}

.nice-dark-mode .navbar-site li.menu-item-has-children>a .menu-sign:after {
	border-left-color: var(--dark-color-muted);
	border-bottom-color: var(--dark-color-muted);
}

.nice-dark-mode .navbar-site li.menu-item-has-children>a .menu-sign:after {
	border-left: 1px solid #fff;
	border-bottom: 1px solid #fff;
}

.nice-dark-mode .default-layout .site-header {
	background-color: var(--dark-bg-dark);
}

@supports ((-webkit-backdrop-filter: blur(4px)) or (backdrop-filter: blur(4px))) {
	.nice-dark-mode .default-layout .site-header.fixed {
		background-color: rgb(0 0 0 / 60%);
	}
}

/*-------------------------------------------------------------- 
## Navbar actions 
--------------------------------------------------------------*/

.nice-dark-mode .navbar-actions .dark-toggle.active {
	color: #ffd75a;
}

.nice-dark-mode .navbar-actions .dark-toggle.active:hover {
	background-color: rgba(255, 214, 90, 0.2);
	border-color: rgba(255, 214, 90, 0.2);
}

/*-------------------------------------------------------------- 
## Aside menu 
--------------------------------------------------------------*/
.nice-dark-mode .site-aside {
	background-color: var(--dark-bg-secondary);
}

.nice-dark-mode .site-aside .aside-brand .logo-dark {
	display: block;
}

.nice-dark-mode .site-aside .aside-brand .logo-light {
	display: none;
}

.nice-dark-mode .site-aside .aside-menu>li>a:hover,
.nice-dark-mode .site-aside .aside-menu>li.current-menu-item>a,
.nice-dark-mode .site-aside .aside-menu>li.in>a {
	background-color: var(--dark-bg-light);
	color: #fff;
}

.nice-dark-mode .site-aside .aside-menu>li.current-post-ancestor>a,
.nice-dark-mode .site-aside .aside-menu>li.current-menu-ancestor>a,
.nice-dark-mode .site-aside .aside-menu>li.current-menu-parent>a {
	background-color: var(--dark-bg-light);
}

.nice-dark-mode .site-aside .aside-menu>li>a {
	color: var(--dark-color-muted);
}

.nice-dark-mode .site-aside .aside-menu li>ul li a {
	color: var(--dark-color-muted);
}

.nice-dark-mode .site-aside .aside-menu li>ul li a:hover {
	color: #fff;
}

.nice-dark-mode .site-aside .aside-menu li>ul li a:after {
	border-top-color: var(--dark-border-muted);
}

.nice-dark-mode .site-aside .aside-menu li>ul li.current-menu-item a {
	color: var(--color-primary);
}

.nice-dark-mode .site-aside .aside-menu li a .menu-sign:after {
	border-left-color: var(--dark-color-muted);
	border-bottom-color: var(--dark-color-muted);
}

/*--------------------------------------------------------------
## Footer style
  --------------------------------------------------------------*/
.nice-dark-mode .site-footer {
	background-color: var(--dark-bg-dark);
}

/*--------------------------------------------------------------
## Post style
--------------------------------------------------------------*/

.nice-dark-mode .post-content h1,
.nice-dark-mode .post-content h2,
.nice-dark-mode .post-content h3,
.nice-dark-mode .post-content h4,
.nice-dark-mode .post-content h5,
.nice-dark-mode .post-content h6 {
	color: var(--dark-color-dark);
}

.nice-dark-mode .post-content h2 {
	border-color: var(--dark-bg-light);
}

/*--------------------------------------------------------------
## Post table style
--------------------------------------------------------------*/

.nice-dark-mode .post-content>table th,
.nice-dark-mode .post-content>table td {
	border: .0625rem solid var(--gray-6);
}

.nice-dark-mode .post-content>table tr:hover>th,
.nice-dark-mode .post-content>table tr:hover>td {
	background-color: #3e3e3e
}

/*--------------------------------------------------------------
## Post downloads
--------------------------------------------------------------*/
.nice-dark-mode .collect-button.active {
	border-color: var(--dark-bg-light);
	background-color: var(--dark-bg-light);
	color: #fff;
}

.nice-dark-mode .downlaod-button.vip {
	background-color: #e9af68;
	border-color: #e9af68;
	color: #fff;
}

/*--------------------------------------------------------------
## Like + button style
--------------------------------------------------------------*/

.nice-dark-mode .like-button.active {
	border-color: var(--bg-danger);
	background-color: var(--bg-danger);
	color: #fff;
}

/* -------------------------------- 
## Pagination style 
-------------------------------- */

.nice-dark-mode .page-numbers,
.nice-dark-mode .post-page-numbers {
	background-color: var(--dark-bg-light);
	color: var(--dark-color-muted);
}

.nice-dark-mode .page-numbers:hover,
.nice-dark-mode .page-numbers.current,
.nice-dark-mode .post-page-numbers:hover,
.nice-dark-mode .post-page-numbers.current {
	color: #fff;
	background-color: var(--btn-primary);
}

.nice-dark-mode .page-numbers.dots {
	background-color: transparent;
}

.nice-dark-mode .page-numbers.dots:hover {
	color: var(--dark-color-muted);
	background-color: transparent;
}

/*--------------------------------------------------------------
## Pagination
--------------------------------------------------------------*/
.nice-dark-mode .pagination .page-number,
.nice-dark-mode .pagination .extend {
	background-color: var(--dark-bg-secondary);
	color: var(--dark-color-muted);
}

.nice-dark-mode .pagination .page-number:hover,
.nice-dark-mode .pagination .extend:hover,
.nice-dark-mode .pagination .page-number.current {
	color: #fff;
	background-color: var(--btn-primary);
}

/*--------------------------------------------------------------
## Widget_search style
--------------------------------------------------------------*/
.nice-dark-mode .widget_search .search-form .search-field {
	background-color: var(--dark-bg-light);
	border-color: var(--dark-bg-light);
}

/*--------------------------------------------------------------
## Widget_recent_entries  style
--------------------------------------------------------------*/
.nice-dark-mode .widget_recent_entries ul li span {
	color: var(--dark-color-muted);
	font-size: 0.75rem;
}

/*--------------------------------------------------------------
## Widget categories + tagcloud style
--------------------------------------------------------------*/
.nice-dark-mode .widget_categories ul li {
	color: var(--dark-color-muted);
	border-color: var(--dark-bg-light);
	background-color: var(--dark-bg-light);
}


.nice-dark-mode .widget_categories ul li:hover {
	border-color: var(--dark-bg-light);
	background-color: var(--dark-bg-light);
}

.nice-dark-mode .widget_categories ul li:hover a {
	color: var(--dark-color-primary);
}

.nice-dark-mode .widget_categories .postform {
	border-color: var(--dark-border-light);
}

.nice-dark-mode .widget_categories .postform:active,
.nice-dark-mode .widget_categories .postform:focus {
	border-color: var(--dark-border-muted);
}

/*--------------------------------------------------------------
## Widget tagcloud style
--------------------------------------------------------------*/
.nice-dark-mode .tagcloud a {
	color: var(--dark-color-muted);
	border-color: var(--dark-bg-light);
	background-color: var(--dark-bg-light);
}

.nice-dark-mode .tagcloud a:hover {
	color: var(--dark-color-dark);
	border-color: var(--dark-bg-light);
	background-color: var(--dark-bg-light);
}

.nice-dark-mode .tagcloud a span {
	color: var(--dark-color-muted);
}

/*--------------------------------------------------------------
## Widget other style
--------------------------------------------------------------*/

.nice-dark-mode .widget_meta li,
.nice-dark-mode .widget_archive li {
	color: var(--dark-color-secondary);
	border-top: 1px solid var(--dark-bg-light);
}

.nice-dark-mode .widget_archive select {
	color: var(--dark-color-muted);
	background-color: var(--dark-bg-light);
	border-color: var(--dark-bg-light);
}

/*--------------------------------------------------------------
## Widget blogroll style
--------------------------------------------------------------*/

.nice-dark-mode .blogroll li {
	color: var(--dark-color-muted);
	background-color: var(--dark-bg-light);
}

/*--------------------------------------------------------------
## Widget_recent_comments style
--------------------------------------------------------------*/

.nice-dark-mode .widget_recent_comments ul li {
	border-top-color: var(--dark-border-light);
}

/*--------------------------------------------------------------
## Widget_recent_comments style
--------------------------------------------------------------*/

.nice-dark-mode .widget_nav_menu ul li a {
	background-color: var(--dark-bg-light);
	color: var(--dark-color-muted);
}

.nice-dark-mode .widget_nav_menu ul li a:hover {
	background-color: var(--dark-bg-light);
	color: #fff;
}

.nice-dark-mode .widget_nav_menu ul li.menu-item-has-children::after {
	border-left-color: var(--dark-border-secondary);
	border-bottom-color: var(--dark-border-secondary);
}

.nice-dark-mode .widget_nav_menu ul li>ul ul li a {
	background-color: var(--dark-bg-muted);
}

/*--------------------------------------------------------------
## Widget_rss style
--------------------------------------------------------------*/

.nice-dark-mode .widget_rss ul li {
	border-top-color: var(--dark-border-light);
}

.nice-dark-mode .widget_rss ul li .rss-date {
	color: var(--dark-color-secondary);
}

.nice-dark-mode .widget_rss ul li .rssSummary {
	color: var(--dark-color-secondary);
}

.nice-dark-mode .widget_rss ul li cite {
	color: var(--dark-color-muted);
}

/*--------------------------------------------------------------
## Searchform style
--------------------------------------------------------------*/

.nice-dark-mode .searchform input[type="submit"] {
	background-color: var(--dark-bg-dark);
}

.nice-dark-mode .searchform input[type="submit"]:hover {
	background-color: var(--dark-bg-dark);
}

/*--------------------------------------------------------------
## Widget_calendar style
--------------------------------------------------------------*/

.nice-dark-mode .widget_calendar tbody td a::after {
	background: var(--dark-bg-dark);
}

.nice-dark-mode .widget_calendar td#today {
	color: var(--dark-color-primary);
}

.nice-dark-mode .widget_calendar tfoot {
	border-color: var(--dark-border-light);
}

/*--------------------------------------------------------------
## Widget_rss style
--------------------------------------------------------------*/

.nice-dark-mode .widget_rss ul li {
	border-top-color: var(--dark-border-light);
}

.nice-dark-mode .widget_rss ul li .rss-date {
	color: var(--dark-color-muted);
}

.nice-dark-mode .widget_rss ul li .rssSummary {
	color: var(--dark-color-secondary);
}

.nice-dark-mode .widget_rss ul li cite {
	color: var(--dark-color-muted);
}

/* -------------------------------- 
## Widget prompt style 
-------------------------------- */
.nice-dark-mode .prompt-block .prompt-content:hover::-webkit-scrollbar-thumb {
	background-color: rgba(208, 208, 208, 0.5);
}

/*--------------------------------------------------------------
## popup style
--------------------------------------------------------------*/
.nice-dark-mode .nice-popup-content {
	background: var(--dark-bg-secondary);
}

/*--------------------------------------------------------------
## Breadcrumbs style 
--------------------------------------------------------------*/

.nice-dark-mode .breadcrumbs a,
.nice-dark-mode .breadcrumbs span.current {
	color: var(--dark-color-muted);
	background: linear-gradient(to right, var(--dark-bg-light), rgba(255, 255, 255, 0));
}

.nice-dark-mode .breadcrumbs span.current {
	color: var(--dark-color-dark);
}

/*--------------------------------------------------------------
## Comments style
--------------------------------------------------------------*/
.nice-dark-mode .comment-list .comment-respond,
.nice-dark-mode .comment-list .comment-form {
	background-color: var(--dark-bg-secondary);
}

.nice-dark-mode .comment-list .children .comment {
	border-top-color: var(--dark-border-light);
}

/*--------------------------------------------------------------
## Masonry style
--------------------------------------------------------------*/
.nice-dark-mode .masonry-tabmenu ul li a {
	color: var(--dark-color-muted);
}

.nice-dark-mode .masonry-tabmenu ul li.active a {
	background-color: var(--dark-bg-light);
	color: var(--dark-color-dark);
}

.nice-dark-mode .masonry-tabmenu ul li a:hover {
	background-color: var(--dark-bg-light);
}

.nice-dark-mode .masonry-list::before {
	border: 4px solid rgba(192, 192, 192, 0.2);
	border-top-color: #fff;
}

.nice-dark-mode .masonry-item.more .masonry-shadow {
	background-color: #fff;
}

/*--------------------------------------------------------------
## badges & actions
--------------------------------------------------------------*/

.nice-dark-mode .item-badges .item-badge-vip,
.nice-dark-mode .item-badges .item-badge-sticky,
.nice-dark-mode .item-badges .item-badge-tag {
	background-color: rgba(0, 0, 0, 0.5);
	color: #fff;
}

.nice-dark-mode .item-badges .item-badge-vip {
	background-image: linear-gradient(45deg, #ffde98 0%, #fff5c1 100%);
	color: #9c6c00;
}

.nice-dark-mode .item-actions .action-item,
.nice-dark-mode .item-actions .action-like {
	background-color: var(--dark-bg-light);
	border-color: var(--dark-bg-light);
}

.nice-dark-mode .item-actions .action-like.active {
	color: var(--bg-danger);

}

/*--------------------------------------------------------------
## albums block
--------------------------------------------------------------*/
.nice-dark-mode .albums-block .albums-block-images.border-locked,
.nice-dark-mode .albums-block .albums-block-images.border-status {
	border-color: var(--dark-bg-light) !important;
}

.nice-dark-mode .albums-block .albums-block-images.border-vip {
	border-color: #f9e1b7 !important;
}

.nice-dark-mode .albums-block .albums-block-images.border-sticky {
	border-color: var(--bg-warning) !important;
}

.nice-dark-mode .albums-block .albums-block-status,
.nice-dark-mode .albums-block .albums-block-vip,
.nice-dark-mode .albums-block .albums-block-sticky,
.nice-dark-mode .albums-block .albums-block-tag {
	background-color: var(--dark-bg-light);
	color: #fff;
}

.nice-dark-mode .albums-block .albums-block-sticky {
	background-color: var(--bg-warning);
	color: #431e00;
}

.nice-dark-mode .albums-block .albums-block-vip {
	background-color: #f9e1b7;
	color: #9c6c00;
}

/*--------------------------------------------------------------
## Loading spinners style
--------------------------------------------------------------*/
.nice-dark-mode .loading-more-spinners {
	border: 4px solid rgba(192, 192, 192, 0.2);
	border-top-color: #fff;
}

/*--------------------------------------------------------------
## Generation style
--------------------------------------------------------------*/
.nice-dark-mode .generation-data-block ul li {
	border-top-color: var(--dark-border-light);
}

/*--------------------------------------------------------------
## Dropdown style
--------------------------------------------------------------*/
.nice-dark-mode .site-dropdown-box {
	background-color: var(--dark-bg-secondary);
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

/*--------------------------------------------------------------
## Category tabmenu style
--------------------------------------------------------------*/

.nice-dark-mode .category-tags li a,
.nice-dark-mode .category-tabmenu li a {
	color: var(--dark-color-secondary);
	background-color: var(--dark-bg-light);
	border-color: var(--dark-bg-light);
}

.nice-dark-mode .category-tags li small,
.nice-dark-mode .category-tabmenu li small {
	background-color: var(--dark-bg-dark);
	color: #fff;
}

.nice-dark-mode .category-tags li.active a,
.nice-dark-mode .category-tabmenu li.active a {
	color: #fff;
	background-color: var(--bg-primary);
	border-color: var(--bg-primary);
}

.nice-dark-mode .category-tags li.active small,
.nice-dark-mode .category-tabmenu li.active small {
	background-color: var(--dark-bg-dark);
	color: #fff;
}

.nice-dark-mode .category-tags li.hot a {
	background-color: rgb(255 120 120 / 10%);
	color: var(--color-danger);
	border-color: rgb(255 120 120 / 30%);
}

.nice-dark-mode .category-tags li.hot small {
	background-color: var(--bg-danger);
	color: #fff;
}

.nice-dark-mode .category-tabmenu::-webkit-scrollbar {
	background-color: transparent;
}


.nice-dark-mode .category-tabmenu::-webkit-scrollbar-thumb {
	background-color: var(--dark-bg-secondary);
}


.nice-dark-mode .category-tabmenu::-webkit-scrollbar-track {
	background-color: var(--dark-bg-light);
}

/*--------------------------------------------------------------
## Author group
--------------------------------------------------------------*/
.nice-dark-mode .author-list .item .avatar-color .flex-avatar {
	background-color: var(--dark-bg-secondary);
}

/*--------------------------------------------------------------
Search popup
--------------------------------------------------------------*/
.nice-dark-mode .search-popup .search-popup-overlay {
	background-color: rgba(0, 0, 0, 0.5);
}

.nice-dark-mode .search-popup .search-popup-content {
	background-color: var(--dark-bg-white);
}

.nice-dark-mode .search-popup .search-popup-input {
	background-color: transparent;
	border-color: transparent;
	color: var(--dark-color-dark);
}

.nice-dark-mode .search-popup .search-popup-input:focus,
.nice-dark-mode .search-popup .search-popup-input:active {
	color: var(--dark-color-dark);
}

/*--------------------------------------------------------------
## Pricing list style
--------------------------------------------------------------*/
.nice-dark-mode .pricing-list .item {
	border-color: var(--dark-border-light);
}

.nice-dark-mode .pricing-list .item:hover {
	box-shadow: 0 20px 30px rgba(164, 55, 55, 0.1);
	border-color: rgb(255 63 38 / 80%);
}

.nice-dark-mode .pricing-list .item .item-price .price {
	color: #ff3f26;
}

.nice-dark-mode .pricing-list .item .price-button {
	background-image: linear-gradient(90deg, #ff7a53, #ff3a22);
}

.nice-dark-mode .pricing-list .item ul li {
	position: relative;
	color: var(--dark-color-muted);
	border-bottom-color: var(--dark-border-light);
}

.nice-dark-mode .pricing-list .item ul li.active {
	color: var(--dark-color-dark);
}

.nice-dark-mode .pricing-list .item ul li i {
	color: var(--dark-color-muted);
}

.nice-dark-mode .pricing-list .item ul li.active i {
	color: #ff3f26;
}

/*--------------------------------------------------------------
## User
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## User tabmenu style
--------------------------------------------------------------*/
.nice-dark-mode .user-tabmenu li a:hover {
	color: var(--dark-color-dark);
}

.nice-dark-mode .user-tabmenu li a::after {
	background-color: var(--bg-danger);
}

.nice-dark-mode .user-tabmenu li.active a {
	color: var(--dark-color-dark);
}

/*--------------------------------------------------------------
## Login 
--------------------------------------------------------------*/
.nice-dark-mode .login-modal {
	background: rgba(0, 0, 0, 0.8);
}

.nice-dark-mode .login-modal-container {
	background: var(--dark-bg-secondary);
}

.nice-dark-mode .login-modal-container .login-tabmenu ul {
	background-color: var(--dark-bg-light);
}

.nice-dark-mode .login-modal-container .login-tabmenu ul li {
	color: var(--dark-color-muted);
}

.nice-dark-mode .login-modal-container .login-tabmenu ul li.selected {
	color: var(--dark-color-dark);
	background: var(--dark-bg-secondary);
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.025);
}

/*--------------------------------------------------------------
## Login hr
--------------------------------------------------------------*/

.nice-dark-mode .login-form-bottom-message a {
	color: #fff;
}

.nice-dark-mode .login-hr span:before {
	background-color: var(--dark-bg-light);
}

.nice-dark-mode .login-hr span:after {
	background-color: var(--dark-bg-light);
}

/*--------------------------------------------------------------
## Form
--------------------------------------------------------------*/

.nice-dark-mode .form-field .hide-password {
	color: var(--dark-color-muted);
}

/*--------------------------------------------------------------
## User menu
--------------------------------------------------------------*/

.nice-dark-mode .user-menu-widget ul li a .item-icon {
	background-color: var(--dark-bg-light);
}

.nice-dark-mode .user-menu-widget ul li.active a .item-icon {
	background-color: var(--bg-primary);
	color: #fff;
}

/* -------------------------------- 
## Fileuploader style 
-------------------------------- */

.nice-dark-mode .fileuploader-theme-thumbnails .fileuploader-thumbnails-input-inner {
	color: var(--dark-color-muted);
	background: var(--dark-bg-light);
}

/* -------------------------------- 
## Radio style 
-------------------------------- */

.nice-dark-mode .editor-type-radio .item .check-label {
	color: var(--dark-color-muted);
	background-color: var(--dark-bg-light);
}

.nice-dark-mode .editor-type-radio .item .check-input:checked~.check-label {
	background-color: var(--bg-primary);
	color: #fff;
}

.nice-dark-mode .editor-tags-radio .item .check-label {
	background-color: var(--dark-bg-light);
	color: var(--dark-color-secondary);
}

.nice-dark-mode .editor-tags-radio .item .check-input:checked~.check-label {
	background-color: var(--bg-primary);
	color: #fff;
}

.nice-dark-mode .editor-tags-radio .item .check-label .cheak-icon {
	background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMiIgaGVpZ2h0PSIyMiIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1vcGFjaXR5PSIuNCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTIuNjIxIDEyLjYyMWg3LjVhMS41IDEuNSAwIDAgMCAwLTNoLTcuNXYtNy41YTEuNSAxLjUgMCAxIDAtMyAwdjcuNWgtNy41YTEuNSAxLjUgMCAxIDAgMCAzaDcuNXY3LjVhMS41IDEuNSAwIDEgMCAzIDB2LTcuNVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==');
}

/* -------------------------------- 
ck style 
-------------------------------- */
#post-editor .ck.ck-reset_all {
	color: var(--color-body) !important;
}

#post-editor .ck.ck-toolbar {
	padding: .125rem 0 !important;
	border: 0 !important;
	background-color: transparent;
	margin-bottom: .25rem;
}

#post-editor .ck.ck-button {
	box-shadow: none !important;
}

#post-editor .ck.ck-button:active,
#post-editor .ck.ck-button:focus,
#post-editor a.ck.ck-button:active,
#post-editor a.ck.ck-button:focus {
	border-color: var(--border-light)
}

#post-editor .ck.ck-button.ck-on,
#post-editor a.ck.ck-button.ck-on {
	background: transparent;
}

#post-editor .ck.ck-button:not(.ck-disabled):hover,
#post-editor a.ck.ck-button:not(.ck-disabled):hover {
	--ck-color-button-default-hover-background: var(--bg-light);
}

#post-editor .ck-rounded-corners .ck.ck-button,
#post-editor .ck-rounded-corners a.ck.ck-button,
#post-editor .ck.ck-button.ck-rounded-corners,
#post-editor a.ck.ck-button.ck-rounded-corners {
	--ck-border-radius: var(--border-radius-xs);
}

#post-editor .ck-rounded-corners .ck.ck-dropdown__panel,
#post-editor .ck.ck-dropdown__panel.ck-rounded-corners {
	--ck-border-radius: var(--border-radius-sm);
	border-color: var(--border-light);
	padding: .25rem .375rem;
	box-shadow: var(--shadow);
}

#post-editor .ck.ck-dropdown__panel.ck-dropdown__panel_se {
	border-top-left-radius: var(--border-radius-sm);
}

#post-editor .ck.ck-dropdown .ck-dropdown__panel .ck-list .ck.ck-button.ck-on,
#post-editor .ck.ck-dropdown .ck-dropdown__panel .ck-list a.ck.ck-button.ck-on {
	background: var(--bg-primary);
}

#post-editor .ck-rounded-corners .ck.ck-dropdown .ck-dropdown__panel .ck-list .ck.ck-list__item .ck-button {
	border-radius: var(--ck-border-radius);
	margin: .125rem 0;
}

#post-editor .ck-rounded-corners .ck.ck-dropdown .ck-dropdown__panel .ck-list .ck-list__item:first-child .ck-button,
#post-editor .ck.ck-dropdown .ck-dropdown__panel .ck-list .ck-list__item:first-child .ck-button.ck-rounded-corners {
	border-radius: var(--ck-border-radius);
}

#post-editor .ck-rounded-corners .ck.ck-dropdown .ck-dropdown__panel .ck-list .ck-list__item:last-child .ck-button,
#post-editor .ck.ck-dropdown .ck-dropdown__panel .ck-list .ck-list__item:last-child .ck-button.ck-rounded-corners {
	border-radius: var(--ck-border-radius);
}

#post-editor .ck.ck-editor {
	background-color: var(--bg-light) !important;
	border-radius: var(--border-radius-sm) !important;
	padding: .375rem .75rem .75rem;
}

#post-editor .ck.ck-editor__editable.ck-focused:not(.ck-editor__nested-editable) {
	box-shadow: none !important;
}

#post-editor .ck-rounded-corners .ck.ck-editor__main>.ck-editor__editable,
#post-editor .ck.ck-editor__main>.ck-editor__editable.ck-rounded-corners {
	background-color: #fff !important;
	border-radius: var(--border-radius-xs) !important;
	border-color: transparent !important;
}

.page .ck.ck-balloon-panel {
	background: var(--ck-color-panel-background);
	border-color: var(--border-light);
	box-shadow: var(--shadow);
	min-height: 15px;
}

.page .ck.ck-balloon-panel[class*=arrow_n]:before {
	border-color: transparent transparent var(--border-light) transparent;
}

.page .ck.ck-input:focus {
	box-shadow: none;
	border-color: var(--border-primary);
}

.page .ck-rounded-corners .ck.ck-balloon-panel .ck.ck-label {
	top: -2px !important;
}

#post-editor .ck.ck-content:not(.ck-style-grid__button__preview) {
	min-height: 600px;
}

#post-editor .ck.ck-content h2,
#post-editor .ck.ck-content h3,
#post-editor .ck.ck-content h4,
#post-editor .ck.ck-content p {
	margin-bottom: 1rem;
}


#post-editor .ck.ck-content ul,

#post-editor .ck.ck-content ol {
	padding: 0 0 0 1.25rem;
	margin-bottom: 1.5rem;
}


#post-editor .ck.ck-content ul {
	list-style: disc;
}

#post-editor .ck.ck-content ul ul,
#post-editor .ck.ck-content ol ol,
#post-editor .ck.ck-content ul ol,
#post-editor .ck.ck-content ol ul {
	margin-bottom: 1rem;
}

#post-editor .ck.ck-contentul ul {
	list-style: circle;
	margin: 0.75rem 0;
}

#post-editor .ck.ck-content ul ul ul {
	list-style: square;
}

#post-editor .ck.ck-content ol {
	list-style: decimal;
}

#post-editor .ck.ck-content ol ol {
	list-style: lower-alpha;
}

#post-editor .ck.ck-content ol ol ol {
	list-style: lower-roman;
}

#post-editor .ck.ck-content li {
	line-height: 1.5;
	margin: 0 0 .5rem;
}

#post-editor .ck.ck-content li li {
	margin: 0 0 0.5rem;
}

#post-editor .ck.ck-content li img {
	display: inline-block;
}


@media (max-width: 767.98px) {
	#post-editor .ck.ck-content:not(.ck-style-grid__button__preview) {
		min-height: 400px;
	}
}

/* -------------------------------- 
dark ck style 
-------------------------------- */

.nice-dark-mode #post-editor .ck.ck-button:active,
.nice-dark-mode #post-editor .ck.ck-button:focus,
.nice-dark-mode #post-editor a.ck.ck-button:active,
.nice-dark-mode #post-editor a.ck.ck-button:focus {
	border-color: var(--dark-bg-secondary);
	background-color: var(--dark-bg-secondary);
	color: #fff;
}

.nice-dark-mode #post-editor .ck.ck-reset_all {
	color: var(--dark-color-body) !important;
}

.nice-dark-mode #post-editor .ck.ck-button:not(.ck-disabled):hover,
.nice-dark-mode #post-editor a.ck.ck-button:not(.ck-disabled):hover {
	--ck-color-button-default-hover-background: var(--dark-bg-light);
}

.nice-dark-mode #post-editor .ck-rounded-corners .ck.ck-dropdown__panel,
.nice-dark-mode #post-editor .ck.ck-dropdown__panel.ck-rounded-corners {
	border-color: var(--dark-border-light);
	box-shadow: var(--shadow);
}

.nice-dark-mode #post-editor .ck.ck-dropdown .ck-dropdown__panel .ck-list .ck.ck-button.ck-on,
.nice-dark-mode #post-editor .ck.ck-dropdown .ck-dropdown__panel .ck-list a.ck.ck-button.ck-on {
	background: var(--bg-primary);
}

.nice-dark-mode #post-editor .ck.ck-editor {
	background-color: var(--dark-bg-light) !important;
}

.nice-dark-mode #post-editor .ck-rounded-corners .ck.ck-editor__main>.ck-editor__editable,
.nice-dark-mode #post-editor .ck.ck-editor__main>.ck-editor__editable.ck-rounded-corners {
	background-color: var(--dark-bg-secondary) !important;
}

.nice-dark-mode.page .ck.ck-balloon-panel {
	background: var(--ck-color-panel-background);
	border-color: var(--dark-border-light);
}

.nice-dark-mode.page .ck.ck-balloon-panel[class*=arrow_n]:before {
	border-color: transparent transparent var(--dark-border-light) transparent;
}

.nice-dark-mode #post-editor .ck.ck-icon :not([fill]) {
	fill: #fff;
}

.nice-dark-mode .ck.ck-dropdown.ck-heading-dropdown .ck-dropdown__button .ck-button__label {
	color: #fff;
}