/*
21d1ff
b441ff
site color
*/

/*
|----------------------------------------------------------------------
|       Body Main Css
|----------------------------------------------------------------------
*/

@font-face {
	font-family: "Poppins Light";
	src: url("../fonts/Poppins-Light.ttf");
}

@font-face {
	font-family: "Poppins Italic";
	src: url("../fonts/Poppins-Italic.ttf");
}

@font-face {
	font-family: "Poppins Regular";
	src: url("../fonts/Poppins-Regular.ttf");
}

@font-face {
	font-family: "Poppins Medium";
	src: url("../fonts/Poppins-Medium.ttf");
}

@font-face {
	font-family: "Poppins SemiBold";
	src: url("../fonts/Poppins-SemiBold.ttf");
}

@font-face {
	font-family: "Poppins Bold";
	src: url("../fonts/Poppins-Bold.ttf");
}

.light {
	font-family: "Poppins Light" !important;
}

.italic {
	font-family: "Poppins Italic" !important;
}

.regular {
	font-family: "Poppins Regular" !important;
}

.medium {
	font-family: "Poppins Medium" !important;
}

.semi {
	font-family: "Poppins SemiBold" !important;
}

.bold {
	font-family: "Poppins Bold" !important;
}

.price {
	font-family: "Poppins Medium";
}

:root {
	--color: #21d1ff;
	--color2: #b441ff;
	--white: #fff;
	--text_color: #080a0f;
	--black: #131e26;
	--bluish_black: #0d171d;
	--black_border: #1e2c36;
	/* --bluish_black: #0c1419; */
	--text_gray: #8b9593;
	--light_gray: #eee;
	--green: #43b753;
	--yellow: #ffcb00;
	--red: #ff5465;
	--blue: #5883ff;
	--gray: #aaa;
	--bluish: #f6f9fc;
	--chevron: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="300px" height="300px" fill="%23080a0f" viewBox="-155 247 300 300" style="enable-background:new -155 247 300 300;"><polygon points="78.6356201,306.8178101 -5.0166931,390.4367371 -88.6356277,306.8178101 -137, 355.1821899 -5.0166931,487.1821899 127,355.1821899 "/></svg>');
	--tick: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="300px" height="300px" fill="%23fff" viewBox="0 0 300 300" style="enable-background:new 0 0 300 300;" xml:space="preserve"><polygon points="115.7434006,270.8831787 0,173.503006 21.3676376,148.106369 111.6297684,224.0477905 274.5331421,29.1168175 300,50.3998222"/></svg>');
	--question: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="300px" height="300px" fill="%23080a0f" viewBox="-155 247 300 300" style="enable-background:new -155 247 300 300;"><path class="st0" d="M-5,265c-72.9016113,0-132,59.0983887-132,132S-77.9016113,529-5,529s132-59.0984497,132-132 S67.9016113,265-5,265z M-5.47052,468.3762817c-7.4328003,0-13.4794922-6.0470581-13.4794922-13.4790649 c0-7.4320679,6.0466919-13.479126,13.4794922-13.479126c7.432373,0,13.4794922,6.0470581,13.4794922,13.479126 C8.0089722,462.3292236,1.961853,468.3762817-5.47052,468.3762817z M34.1941528,371.9846802 c-2.6166992,12.1121216-11.4063721,21.4836426-19.1619263,29.7519531c-0.956665,1.0199585-1.8609619,1.9437866-2.7167969,2.8183594 c-3.1091309,3.1724243-4.4174805,4.5682983-5.5913696,7.2835083c-1.3748169,3.1787109-1.890686,6.8474121-1.5335083,10.9046021 c0.4846191,5.5038452-3.5842896,10.3590088-9.0881348,10.8435669c-0.298584,0.0258179-0.5952148,0.0391235-0.8890381,0.0391235 c-5.1287231,0-9.4957886-3.9219971-9.9542236-9.1272583c-0.6522217-7.40625,0.3908081-14.3372803,3.0997314-20.602417 c2.6948853-6.2315063,6.2381592-9.8479004,9.6646118-13.3450317c0.7612915-0.7765503,1.5654907-1.5960083,2.4151001-2.5018311 c6.2698364-6.6848755,12.7529907-13.5967407,14.1989136-20.2897949c1.2380371-5.7316895-0.3782959-13.9069824-5.8634033-18.4417114 c-6.9536743-5.7469482-18.0630493-4.09198-24.7865601,0.8272705c-10.0702515,7.3675537-8.9369507,21.3914185-8.9244385,21.5324707 c0.5568848,5.4968872-3.4495239,10.3880005-8.9467163,10.9448853c-5.5003662,0.5560913-10.406311-3.4647827-10.9631958-8.9619751 c-0.953125-9.4090576,1.5588379-28.3513794,17.0200195-39.6635132c13.0418091-9.5411377,34.1811523-12.6392822,49.3492432-0.1000366 C33.7728882,344.0241089,36.7139893,360.3235474,34.1941528,371.9846802z"/></svg>');
}

html {
	min-height: 100%;
	overflow: hidden;
	overflow-y: initial;
}

html.flow {
	overflow: hidden !important;
}

body {
	position: relative;
	min-height: 100vh;
	font-size: 14px;
	font-family: "Poppins Regular";
	margin: 0;
	padding: 0;
	line-height: 1.6;
	word-break: break-word;
	transition: all ease 0.5s;
	overflow: inherit;
}

body {
	display: flex;
	flex-flow: column;
}

body > main {
	flex: 1;
	padding-top: 80px;
	/* overflow: hidden; */
}

::selection {
	background: var(--color);
	color: var(--white);
}

::-moz-selection {
	background: var(--color);
	color: var(--white);
}

body a {
	color: inherit;
	word-break: break-word;
}

body a,
body span {
	display: inline-block;
	text-decoration: none;
}

body a:hover {
	color: var(--color);
}

body a:focus,
body a:hover {
	outline: none !important;
	text-decoration: none !important;
}

ul {
	margin: 0;
	padding: 0;
}

ul li {
	display: inline-block;
}

ul li a {
	transition: all ease 0.5s;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "Poppins SemiBold";
	line-height: 1.3;
	margin: 0 0 10px;
}

p {
	margin: 0 0 15px;
}

p:nth-last-child(1) {
	margin: 0;
}

p > a {
	display: inline;
	color: var(--color);
}

p > a:hover {
	color: #2115dc;
}

.relative {
	position: relative;
}

.tableDv {
	display: table;
	width: 100%;
	height: 100%;
}

.tableCell {
	display: table-cell;
	vertical-align: middle;
}

.toggle {
	position: absolute;
	top: 21px;
	/* right: 5px; */
	right: 45px;
	display: flex;
	display: none;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 10px;
	transition: all ease 0.5s;
	z-index: 4;
}

.toggle span,
.toggle span:before,
.toggle span:after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 1px;
	border-radius: 50px;
	transition: all linear 0.5s;
}

.toggle span {
	position: relative;
	display: block;
	width: 20px;
	background: transparent;
	margin: 8px auto;
}

.toggle span:before {
	top: -7px;
}

.toggle span:after {
	bottom: -7px;
}

.toggle.active span {
	/* width: 20px; */
	background: transparent !important;
}

.toggle.active span:before {
	top: 0;
	transform: rotate(45deg);
}

.toggle.active span:after {
	bottom: 0;
	transform: rotate(-45deg);
}

.blockquote {
	padding: 10px 10px 10px 20px;
	border-left: 4px solid var(--color);
}

.heading {
	position: relative;
	/* font-family: 'Poppins Light'; */
	margin-bottom: 25px;
}

.heading > em {
	color: var(--color);
}

.sub_heading {
	color: var(--color);
	font-size: 14px;
	font-family: "Poppins Medium";
	text-transform: uppercase;
}

p.pre {
	margin: -20px 0 25px;
}

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

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

/*
|----------------------------------------------------------------------
|       Body Main Button
|----------------------------------------------------------------------
*/

.webBtn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 120px;
	height: 46px;
	background: var(--color);
	background: linear-gradient(45deg, var(--color2), var(--color));
	background-position: 100% 0;
	background-size: 100% 100%;
	color: var(--white);
	font-size: 14px;
	font-family: "Poppins Medium";
	text-align: center;
	padding: 0 30px;
	white-space: nowrap;
	/* text-transform: uppercase; */
	border: 0;
	border-radius: 5px;
	outline: none !important;
	/* box-shadow: rgb(15 78 126 / 5%) 0 16px 48px 0; */
	/* box-shadow: rgb(81 24 24 / 20%) 0 5px 10px 0; */
	box-shadow: 0 5px 20px rgb(18 15 56 / 7%);
}

.webBtn:hover {
	background-position: 100% 0;
	background-size: 200% 100%;
	color: var(--white);
}

.smBtn {
	min-width: 40px;
	height: 36px;
	padding: 0 20px;
}

.mdBtn {
	min-width: 80px;
	height: 40px;
}

.lgBtn {
	height: 54px;
	font-size: 16px;
	padding: 0 40px;
}

.blankBtn {
	background: transparent;
	color: var(--color);
}

.blankBtn:hover {
	background: #d3f6ff;
	color: var(--color);
}

/* .lightBtn {
	background: #d3f6ff;
	color: var(--text_color);
} */

.lightBtn:not(:hover) {
	box-shadow: none;
}

.lightBtn:hover {
	background: var(--color);
	color: var(--white);
}

.labelBtn {
	min-width: initial;
	height: auto;
	background: transparent;
	color: var(--color);
	padding: 0;
	border: 0;
	box-shadow: none;
}

.labelBtn:hover {
	background: transparent;
}

.labelBtn > i {
	font-size: 100%;
}

/* .simpleBtn {
	background: var(--white);
	color: var(--text_color);
}

.simpleBtn:hover {
	background: var(--white);
	color: var(--color);
} */

.simpleBtn.icoBtn > img {
	filter: none;
}

.grayBtn {
	background: var(--white);
	color: var(--text_gray);
	border: 1px solid var(--light_gray);
}

.grayBtn:hover {
	background: #fafafa;
	color: var(--text_gray);
}

.borderBtn {
	border: 1px solid var(--color);
}

.arrowBtn {
	display: flex !important;
	width: 46px;
	min-width: 46px;
	padding: 0 5px;
}

.arrowBtn > i {
	font-weight: bold;
	margin: 0 !important;
}

.arrowBtn > img {
	width: 18px;
}

.icoBtn > img {
	width: 18px;
	margin-right: 10px;
	filter: brightness(0) invert(1);
}

.roundBtn {
	border-radius: 50px;
}

.blockBtn {
	width: 100%;
}

.blockBtn em {
	flex: 1;
	text-align: left;
}

.webBtn i {
	font-size: 140%;
	margin-right: 10px;
}

.webBtn.smBtn i {
	font-size: 120%;
}

.webBtn i.fi-arrow-right {
	font-weight: bold;
	margin-left: 10px;
	margin-right: 0;
}

.webBtn i.fi-arrow-left {
	font-weight: bold;
	margin-left: 0;
	margin-right: 10px;
}

/*_____ webBtn spinner _____*/

.webBtn .spinner {
	width: auto;
	height: auto;
	background: inherit;
	border-radius: inherit;
	overflow: hidden;
}

.webBtn .spinner ~ i {
	visibility: hidden;
}

.webBtn .spinner,
.webBtn .spinner:before,
.webBtn .spinner:after {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: auto;
}

.webBtn .spinner:before,
.webBtn .spinner:after {
	content: "";
	width: 18px;
	height: 18px;
	border: 3px solid;
	animation: spinner 0.5s linear infinite;
	border-radius: 75%;
}

.webBtn .spinner:before {
	border-right-color: transparent;
	border-bottom-color: transparent;
}

.webBtn .spinner:after {
	border-top-color: transparent;
	border-left-color: transparent;
	opacity: 0.5;
}

.webBtn.smBtn .spinner:before,
.webBtn.smBtn .spinner:after {
	width: 14px;
	height: 14px;
}

.webBtn.lgBtn .spinner:before,
.webBtn.lgBtn .spinner:after {
	width: 20px;
	height: 20px;
}

@keyframes spinner {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(-360deg);
	}
}

*[disabled] {
	cursor: not-allowed !important;
}

a[disabled],
button[disabled] {
	opacity: 0.8;
}

.learnBtn {
	background: transparent;
	color: var(--color);
	font-family: "Poppins SemiBold";
	padding: 0;
	text-transform: capitalize;
	border: 0;
}

.learnBtn i {
	position: relative;
	top: 3px;
	font-weight: bold;
	margin-left: 5px;
	/* transform: scale(-1); */
	transition: padding ease 0.5s;
}

.learnBtn:hover i {
	padding-left: 10px;
}

/*
|----------------------------------------------------------------------
|       Body Inner Css
|----------------------------------------------------------------------
*/

h1 {
	font-size: 40px;
}

h2 {
	font-size: 32px;
}

h3 {
	font-size: 22px;
}

h4 {
	font-size: 18px;
}

h5 {
	font-size: 16px;
}

h6 {
	font-size: 14px;
}

img {
	width: 100%;
	display: block;
}

em {
	font-style: normal;
}

strong {
	font-family: "Poppins SemiBold";
	font-weight: normal;
}

input,
button,
select,
textarea {
	text-decoration: none !important;
	outline: none !important;
}

.ease,
body a,
body button,
body .webBtn {
	transition: all ease 0.5s;
}

.contain,
.contain-fluid {
	position: relative;
	max-width: 1140px;
	padding: 0 15px;
	margin: auto;
	min-height: 1px;
}

.contain-fluid {
	max-width: 1600px;
	padding: 0 15px;
}

.contain:before,
.contain:after,
.contain-fluid:before,
.contain-fluid:after {
	content: "";
	display: table;
}

.contain:after,
.contain-fluid:after {
	clear: both;
}

section {
	position: relative;
}

.flex {
	display: flex;
	flex-wrap: wrap;
}

.formRow {
	display: flex;
	flex-wrap: wrap;
	margin: -10px;
}

.formRow > [class*="col-"],
.formRow > [class^="col-"] {
	padding: 10px;
}

.flexBox {
	display: flex;
	align-items: center;
	justify-content: center;
}

.flexDv {
	width: 100%;
}

.flexRow {
	margin: -15px;
}

.flexRow > .col {
	padding: 15px;
}

.bTn {
	display: flex;
	flex-flow: wrap;
	gap: 10px;
}

.bTn.formBtn {
	margin-top: 20px;
}

.text-left.bTn,
.text-left .bTn {
	justify-content: flex-start;
}

.text-center.bTn,
.text-center .bTn {
	justify-content: center;
}

.text-right.bTn,
.text-right .bTn {
	justify-content: flex-end;
}

/*_____ upperlay _____*/

.upperlay {
	position: fixed;
	top: 80px;
	left: 0;
	right: 100%;
	bottom: 0;
	background: rgb(10 33 48 / 0.9);
	opacity: 0;
	visibility: hidden;
	backdrop-filter: blur(5px);
	transition: all ease 0.5s;
	z-index: 100;
}

.upperlay.active {
	right: 280px;
	opacity: 1;
	visibility: visible;
}

/*
|----------------------------------------------------------------------
|       Popup
|----------------------------------------------------------------------
*/

.popup {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(25, 33, 37, 0.95);
	padding: 20px 0;
	overflow: auto;
	z-index: 101;
}

.popup ._inner {
	position: relative;
	max-width: 600px;
	padding: 20px;
	margin: auto;
	border-radius: 10px;
	box-shadow: 0 7px 14px 0 rgba(59, 65, 94, 0.1), 0 3px 6px 0 rgba(0, 0, 0, 0.07);
}

.popup.big-popup ._inner {
	max-width: 800px;
}

.popup.small-popup ._inner {
	max-width: 420px;
}

.popup ._inner h3 {
	padding-right: 25px;
	margin-bottom: 20px;
}

.popup ._inner h4 {
	padding-right: 25px;
	margin-bottom: 15px;
}

.popBtn {
	cursor: pointer;
}

.crosBtn {
	position: absolute;
	top: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	right: 5px;
	width: 28px;
	height: 28px;
	font-size: 18px;
	text-align: center;
	cursor: pointer;
	z-index: 5;
}

.crosBtn:before {
	content: "\2715";
	line-height: 1;
}

.popup .list > li {
	display: flex;
	margin-bottom: 10px;
}

.popup .list > li > div:nth-child(1) {
	width: 120px;
	min-width: 120px;
	font-family: "Poppins SemiBold";
	margin-right: 10px;
}

.popup .list > li > div:nth-child(2) {
	width: 100%;
}

.popup .blockLst {
	margin: -15px;
}

.popup hr {
	margin: 20px -20px;
}

/*
|----------------------------------------------------------------------
|       Dropdown
|----------------------------------------------------------------------
*/

.dropBtn {
	display: inline-flex;
	align-items: center;
	cursor: pointer;
}

.dropBtn > i.chevron {
	display: inline-block;
	width: 10px;
	min-width: 10px;
	height: 10px;
	background-image: var(--chevron);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	margin: 0;
	margin-left: 5px;
	transition: inherit;
}

.dropDown {
	position: relative;
}

.dropCnt {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 160px;
	max-width: 260px;
	margin-top: 10px;
	visibility: hidden;
	opacity: 0;
	/* border: 1px solid var(--light_gray); */
	border-radius: 7px;
	box-shadow: 0 13px 27px -5px rgba(50, 50, 93, 0.25), 0 8px 16px -8px rgba(0, 0, 0, 0.3), 0 -6px 16px -6px rgba(0, 0, 0, 0.025);
	transition: all ease 0.5s;
	overflow: hidden;
	z-index: 2;
}

.dropCnt.right {
	left: initial;
	right: 0;
}

.dropCnt.active {
	margin-top: 0;
	visibility: visible;
	opacity: 1;
}

.dropLst {
	padding: 6px 0;
}

.dropLst > li,
.dropLst > li > * {
	display: block;
}

.dropLst > li > * {
	display: flex;
	align-items: center;
	width: 100%;
	text-align: left;
	padding: 6px 15px;
	border: 0;
}

.dropLst > li > * > i {
	margin-right: 6px;
}

.dropLst.select {
	left: 0;
	right: 0;
	width: 100%;
	max-width: initial;
	max-height: 240px;
	padding: 0;
	box-shadow: 0 5px 20px rgb(18 15 56 / 7%);
	overflow: auto;
}

.dropLst.select > li > button {
	padding: 10px 15px;
}

.dropLst.select > li > button,
.dropLst.select > li > button > * {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.dropLst.select > li > button > img {
	width: 36px;
	min-width: 36px;
	height: 36px;
	margin-right: 15px;
	object-fit: cover;
	border-radius: 5px;
	overflow: hidden;
}

/*_____ more _____*/

.more {
	position: relative;
	width: 20px;
	min-width: 20px;
	height: 20px;
	/* padding-bottom: 10px; */
	margin: 0 auto;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all ease 0.5s;
}

.more > span,
.more > span:before,
.more > span:after {
	width: 4px;
	height: 4px;
	border-radius: 75%;
	transition: all ease 0.5s;
	z-index: 2;
}

.more > span:before,
.more > span:after {
	position: absolute;
	content: "";
}

.more > span:before {
	left: 0;
}

.more > span:after {
	right: 0;
}

/*
|----------------------------------------------------------------------
|       Page Loader
|----------------------------------------------------------------------
*/

#pageloader {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	background: inherit;
	z-index: 999999;
}

.loader {
	width: 40px;
	height: 40px;
	border: 4px solid var(--color);
	border-right: 4px solid var(--light_gray);
	border-radius: 75%;
	animation: spin 0.5s linear infinite;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(-360deg);
	}
}

/*
|----------------------------------------------------------------------
|       Ico Css
|----------------------------------------------------------------------
*/

.ico,
.icon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.ico {
	border-radius: 75%;
	box-shadow: 0 13px 27px -5px rgba(50, 50, 93, 0.25), 0 8px 16px -8px rgba(0, 0, 0, 0.3), 0 -6px 16px -6px rgba(0, 0, 0, 0.025);
	/* overflow: hidden; */
}

.ico a,
.icon a {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: inherit;
}

.ico img,
.icon img {
	width: 100%;
	height: 100%;
	object-position: center;
}

.ico img {
	object-fit: cover;
	border-radius: inherit;
}

.icon img {
	object-fit: contain;
}

.ico > i.status {
	position: absolute;
	top: 0;
	right: -4px;
	display: block;
	width: 12px;
	height: 12px;
	background: var(--color);
	border: 2px solid var(--white);
	border-radius: 75%;
}

.ico > i.status.active {
	background: var(--green);
	/* background: var(--color); */
}

.ico > i.status.away {
	background: var(--yellow);
}

.ico > i.status.busy {
	background: var(--blue);
}

.ico > i.status.offline {
	background: var(--red);
}

.ico > .loading {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	/* width: 50%; */
	min-width: 100%;
	height: 3px;
	background: var(--light_gray);
	border-bottom-left-radius: inherit;
	border-bottom-right-radius: inherit;
	overflow: hidden;
}

.ico > .loading:before {
	content: "";
	width: inherit;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--color);
}

/*
|----------------------------------------------------------------------
|       RateYo
|----------------------------------------------------------------------
*/

.jq-ry-container {
	position: relative;
	display: block;
	cursor: pointer;
	box-sizing: content-box;
	line-height: 0;
	direction: ltr;
}

.jq-ry-container[readonly="readonly"] {
	cursor: default;
}

.jq-ry-container > .jq-ry-group-wrapper {
	position: relative;
	width: 100%;
}

.jq-ry-container > .jq-ry-group-wrapper > .jq-ry-group {
	position: relative;
	line-height: 0;
	white-space: nowrap;
	z-index: 1;
}

.jq-ry-container > .jq-ry-group-wrapper > .jq-ry-group > svg {
	display: inline-block;
}

.jq-ry-container > .jq-ry-group-wrapper > .jq-ry-group.jq-ry-normal-group {
	width: 100%;
}

.jq-ry-container > .jq-ry-group-wrapper > .jq-ry-group.jq-ry-rated-group {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	overflow: hidden;
	z-index: 3;
}

/*
|----------------------------------------------------------------------
|       Editor
|----------------------------------------------------------------------
*/

.ckEditor {
	/* Font */
	/* Emoji fonts are added to visualise them nicely in Internet Explorer. */
	font-family: "Poppins Regular", sans-serif, Arial, Verdana, "Trebuchet MS", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.ckEditor .cke_editable {
	font-size: 13px;
	line-height: 1.6;

	/* Fix for missing scrollbars with RTL texts. (#10488) */
	word-wrap: break-word;
}

.ckEditor blockquote {
	font-style: italic;
	font-family: Georgia, Times, "Times New Roman", serif;
	padding: 2px 0;
	border-style: solid;
	border-width: 0;
}

.ckEditor .cke_contents_ltr blockquote {
	padding-left: 20px;
	padding-right: 8px;
	border-left-width: 5px;
}

.ckEditor .cke_contents_rtl blockquote {
	padding-left: 8px;
	padding-right: 20px;
	border-right-width: 5px;
}

.ckEditor a {
	display: inline;
	color: #0782c1;
}

.ckEditor ol,
.ckEditor ul,
.ckEditor dl {
	/* IE7: reset rtl list margin. (#7334) */
	*margin-right: 0px;
	/* Preserved spaces for list items with text direction different than the list. (#6249,#8049)*/
	padding: 0 40px;
}

.ckEditor ul,
.ckEditor ol {
	padding: 0;
	padding-left: 20px;
	margin: 0 0 10px;
	list-style-position: inside;
}

.ckEditor ul > li,
.ckEditor ol > li {
	display: list-item;
	margin-bottom: 5px;
}

.ckEditor ul > li ul,
.ckEditor ol > li ol {
	margin: 5px 0 7px;
}

.ckEditor h1,
.ckEditor h2,
.ckEditor h3,
.ckEditor h4,
.ckEditor h5,
.ckEditor h6 {
	font-weight: normal;
	line-height: 1.2;
}

.ckEditor hr {
	border: 0px;
}

.ckEditor img.right {
	float: right;
	margin-left: 15px;
	padding: 5px;
}

.ckEditor img.left {
	float: left;
	margin-right: 15px;
	padding: 5px;
}

.ckEditor pre {
	white-space: pre-wrap; /* CSS 2.1 */
	word-wrap: break-word; /* IE7 */
	-moz-tab-size: 4;
	tab-size: 4;
}

.ckEditor .marker {
	background-color: Yellow;
}

.ckEditor span[lang] {
	font-style: italic;
}

.ckEditor figure {
	text-align: center;
	background: rgba(0, 0, 0, 0.05);
	padding: 10px;
	margin: 10px 20px;
	display: inline-block;
}

.ckEditor figure > figcaption {
	text-align: center;
	display: block; /* For IE8 */
}

.ckEditor a > img {
	padding: 1px;
	margin: 1px;
	border: none;
	outline: 1px solid #0782c1;
}

/* Widget Styles */
.ckEditor .code-featured {
	border: 5px solid red;
}

.ckEditor .math-featured {
	padding: 20px;
	box-shadow: 0 0 2px rgba(200, 0, 0, 1);
	background-color: rgba(255, 0, 0, 0.05);
	margin: 10px;
}

.ckEditor .image-clean {
	border: 0;
	background: none;
	padding: 0;
}

.ckEditor .image-clean > figcaption {
	font-size: 0.9em;
	text-align: right;
}

.ckEditor .image-grayscale {
	background-color: white;
	color: #666;
}

.ckEditor .image-grayscale img,
.ckEditor img.image-grayscale {
	filter: grayscale(100%);
}

.ckEditor .embed-240p {
	max-width: 426px;
	max-height: 240px;
	margin: 0 auto;
}

.ckEditor .embed-360p {
	max-width: 640px;
	max-height: 360px;
	margin: 0 auto;
}

.ckEditor .embed-480p {
	max-width: 854px;
	max-height: 480px;
	margin: 0 auto;
}

.ckEditor .embed-720p {
	max-width: 1280px;
	max-height: 720px;
	margin: 0 auto;
}

.ckEditor .embed-1080p {
	max-width: 1920px;
	max-height: 1080px;
	margin: 0 auto;
}

.ckEditor i,
.ckEditor em {
	font-style: italic;
}

.ckEditor b,
.ckEditor strong {
	font-weight: bold;
}

.ckEditor u {
	text-decoration: underline;
}

.ckEditor span {
	display: initial;
	text-decoration: inherit;
}

/*_____ ck _____*/

.ck.ck-toolbar {
	border-radius: 6px 6px 0 0 !important;
}

.ck.ck-editor__main > .ck-editor__editable {
	min-height: 200px;
	max-height: 300px;
	padding: 0 12px;
	border-radius: 0 0 6px 6px !important;
	box-shadow: none !important;
}

.ck.ck-sticky-panel .ck-sticky-panel__content_sticky {
	z-index: 1 !important;
}

/*
|----------------------------------------------------------------------
|       Header
|----------------------------------------------------------------------
*/

header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 80px;
	box-shadow: 0 5px 15px rgb(0 0 0 / 7%);
	z-index: 30;
}

.logo {
	float: left;
	display: flex;
	align-items: center;
	width: 100px;
	height: 80px;
	/* filter: brightness(0) invert(1); */
}

.logo > a {
	display: block;
	height: 100%;
}

.logo > a > img {
	display: block;
	width: auto;
	height: 100%;
	max-width: 100%;
	object-fit: contain;
	object-position: left center;
	transition: inherit;
}

nav {
	display: flex;
	align-items: center;
	height: 80px;
	margin-left: 140px;
}

[nav] {
	display: flex;
	flex: 1;
	margin-left: 35px;
	transition: all ease 0.5s;
}

[nav] > ul {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 -15px;
}

[nav] > #nav {
	margin-right: auto;
}

[nav] > ul > li {
	position: relative;
	padding: 0 15px;
}

[nav] > ul > li > a:not(.webBtn) {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 36px;
	text-align: center;
}

[nav] > ul > li > a:not(.webBtn):hover,
[nav] > ul > li.active > a:not(.webBtn) {
	color: var(--color);
}

nav > #iconBtn {
	display: flex;
	align-items: center;
	margin: 0 -10px;
	margin-left: 15px;
}

nav > #iconBtn > li {
	padding: 0 10px;
}

nav > #iconBtn > li#srchBtn {
	display: none;
}

nav > ul .iconBtn {
	position: relative;
	display: flex !important;
	width: 20px;
	height: 20px;
	background: transparent;
	padding: 0;
	border: 0;
}

nav > ul .iconBtn > img {
	transition: inherit;
}

nav > ul .iconBtn > em {
	position: absolute;
	top: -10px;
	right: -5px;
	transition: inherit;
}

header .query {
	position: relative;
	min-width: 300px;
}

header .query:before {
	/* content: ''; */
	position: absolute;
	top: 0;
	left: -15px;
	right: -15px;
	bottom: 0;
	background: inherit;
	z-index: -1;
}

header .query > .txtBox {
	height: 40px;
	padding-left: 40px;
}

header .query > button {
	position: absolute;
	top: 0;
	left: 14px;
	bottom: 0;
	width: 16px;
	height: 16px;
	background: transparent;
	padding: 0;
	margin: auto;
	border: 0;
	filter: brightness(0) invert(0.5);
}

[nav] #cta {
	margin-left: 40px;
}

/*_____ proIco _____*/

header .proIco {
	display: flex;
	align-items: center;
	order: 1;
	cursor: pointer;
	margin-left: 20px;
}

header .proIco .inside {
	display: flex;
	align-items: center;
}

header .proIco .ico {
	width: 36px;
	height: 36px;
	box-shadow: 0 2px 5px 0 rgba(59, 65, 94, 0.1), 0 1px 1px 0 rgba(0, 0, 0, 0.07);
}

header .proIco .proDrop {
	left: initial;
	right: 0;
	min-width: 220px;
	box-shadow: rgb(0 0 0 / 10%) 0 4px 12px 0;
}

header .proIco .proDrop.active {
	margin-top: 5px;
}

header .proIco .dropLst > li > a {
	display: block;
	font-family: "Poppins Medium";
}

header .proIco .dropLst > li > a > small {
	display: block;
	font-size: 80%;
	font-family: "Poppins Regular";
}

header .proIco .dropLst > li:nth-last-child(1) > a {
	color: #ff4b4b;
}

/*_____ miniLbl _____*/

.miniLbl {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	background: var(--color);
	color: var(--white);
	font-size: 70%;
	font-family: "Poppins SemiBold";
	border-radius: 75%;
	white-space: nowrap;
}

.green {
	background: var(--green);
}

.green-color {
	color: var(--green);
}

.yellow {
	background: var(--yellow);
}

.yellow-color {
	color: var(--yellow);
}

.red {
	background: var(--red);
}

.red-color {
	color: var(--red);
}

.blue {
	background: var(--blue);
}

.blue-color {
	color: var(--blue);
}

.gray {
	background: var(--gray);
}

.gray-color {
	color: var(--gray);
}

[index] > section {
	padding: 60px 0;
}

/*
|----------------------------------------------------------------------
|       Banner - Slider
|----------------------------------------------------------------------
*/

#owl-slider {
	padding: 0;
}

#owl-slider,
#owl-slider .inner {
	height: 500px;
}

#owl-slider .inner {
	display: flex;
	align-items: center;
	justify-content: center;
	background-size: contain;
	background-position: center right;
	background-repeat: no-repeat;
}

#owl-slider .owl-nav .owl-prev {
	left: -60px;
}

#owl-slider .owl-nav .owl-next {
	right: -60px;
}

#owl-slider:hover .owl-nav .owl-prev {
	left: 15px;
}

#owl-slider:hover .owl-nav .owl-next {
	right: 15px;
}

#owl-slider .owl-dots {
	margin-top: -20px;
}

#owl-slider .contain {
	width: 100%;
	z-index: 3;
}

#owl-slider .content {
	max-width: 500px;
	color: var(--white);
	/* margin: 0 auto; */
}

#owl-slider .content > h1 {
	font-size: 40px;
	line-height: 1.2;
	margin-bottom: 30px;
	text-shadow: 5px 5px 5px rgb(41 41 47 / 20%);
}

#owl-slider .content > p {
	color: inherit;
	font-size: 16px;
	text-shadow: 2px 2px 2px rgb(41 41 47 / 20%);
}

#owl-slider .owl-dots .owl-dot:not(.active) span {
	border-color: var(--white);
}

/*_____ owl-nav _____*/

.owl-carousel.owl-theme .owl-nav {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	margin: 0;
}

.owl-carousel.owl-theme .owl-nav [class*="owl-"] {
	position: absolute;
	top: 0;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	margin: -20px 0 0;
	border-radius: 75%;
	box-shadow: 0 5px 20px rgb(18 15 56 / 7%);
}

.owl-carousel.owl-theme .owl-nav [class*="owl-"]:hover {
	color: var(--color);
}

.owl-carousel.owl-theme .owl-nav .owl-prev {
	left: -30px;
}

.owl-carousel.owl-theme .owl-nav .owl-next {
	right: -30px;
}

.owl-carousel.owl-theme .owl-nav [class*="owl-"] > i {
	font-weight: bold;
}

/*_____ owl-dots _____*/

.owl-carousel.owl-theme .owl-dots {
	text-align: center;
	position: relative;
	margin-top: 20px;
	line-height: 0;
	z-index: 5;
}

.owl-carousel.owl-theme .owl-dots .owl-dot {
	display: inline-block;
	padding: 0 2px !important;
}

.owl-carousel.owl-theme .owl-dots .owl-dot span {
	display: block;
	width: 10px;
	height: 4px;
	margin: auto;
	border: 2px solid var(--gray);
	border-radius: 50px;
	transition: all ease 0.5s;
}

.owl-carousel.owl-theme .owl-dots .owl-dot.active span {
	width: 24px;
	height: 4px;
	margin: auto;
	border-color: var(--color);
}

/*
|----------------------------------------------------------------------
|       Genres
|----------------------------------------------------------------------
*/

#genres .flexRow > .col {
	width: 33.3334%;
}

#genres .navLst {
	gap: 5px 25px;
	align-items: center;
	justify-content: center;
	margin: -15px 0 25px;
}

#genres .navLst > li > a.active {
	background: linear-gradient(45deg, var(--color2), var(--color));
	color: var(--white);
	padding: 7px 20px;
	border-radius: 50px;
}

/*_____ itmBlk _____*/

.itmBlk {
	display: flex;
}

.itmBlk:not(:nth-last-child(1)) {
	margin-bottom: 20px;
}

.itmBlk > .ico {
	width: 80px;
	min-width: 80px;
	height: 100px;
	margin-right: 20px;
	border-radius: 7px;
}

.itmBlk > .txt {
	display: flex;
	flex-flow: column;
	flex: 1;
}

.itmBlk > .txt > h5 {
	margin-bottom: 0;
}

.itmBlk > .txt > .like {
	color: var(--color2);
	margin: -15px 0 15px;
}

.itmBlk > .txt > .date {
	margin-top: auto;
}

/*
|----------------------------------------------------------------------
|       Featured
|----------------------------------------------------------------------
*/

.comicBlk > .image {
	position: relative;
	padding-bottom: 140%;
	border-radius: 7px;
	overflow: hidden;
}

.comicBlk > .image > a,
.comicBlk > .image > a > img {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.comicBlk > .txt {
	margin-top: 15px;
}

.comicBlk > .txt .rateYo {
	margin-bottom: 5px;
}

/*
|----------------------------------------------------------------------
|       Forum
|----------------------------------------------------------------------
*/

#forum {
	padding-top: 0;
}

#forum .contain {
	max-width: 1000px;
}

.forumBlk {
	position: relative;
	display: flex;
	align-items: center;
	padding: 25px;
	border-radius: 7px;
	box-shadow: 0 5px 20px rgb(18 15 56 / 7%);
}

.forumBlk:not(:nth-last-child(1)) {
	margin-bottom: 10px;
}

/* .forumBlk > .ico {
	width: 50px;
	min-width: 50px;
	height: 50px;
} */

.forumBlk > .icoBlk {
	max-width: 50px;
}

.forumBlk > .icoBlk .ico {
	width: 50px;
	min-width: 50px;
	height: 50px;
}

.forumBlk > .icoBlk > a {
	display: block;
	color: var(--color);
	font-size: 11px;
	text-align: center;
	margin-top: 5px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.forumBlk > div:not(:nth-last-child(1)) {
	margin-right: 20px;
}

.forumBlk > .txt {
	flex: 1;
}

.forumBlk > .txt h5 {
	margin-bottom: 5px;
}

/* .forumBlk > .txt .stats {
	font-size: 12px;
} */

.forumBlk > .txt ~ div.popBtn:hover {
	color: var(--color);
}

.forumBlk > .txt ~ div {
	width: 80px;
	min-width: 80px;
	text-align: center;
}

.forumBlk > .txt ~ div small {
	display: block;
}

.forumBlk > .txt > .dropDown {
	position: absolute;
	top: 5px;
	right: 15px;
}

.forumBlk > .thread ul {
	display: flex;
}

.forumBlk > .thread ul li:not(:nth-last-child(1)) {
	margin-right: -8px;
}

.forumBlk > .thread ul .ico {
	width: 32px;
	min-width: 32px;
	height: 32px;
	box-shadow: none;
}

.forumBlk .tags > li > a {
	display: block;
	font-size: 12px;
	padding: 1px 10px;
	border: 1px solid rgb(52 192 255 / 20%);
	border-radius: 4px;
}

.forumBlk .tags > li > a:hover {
	background: #d3f6ff;
}

.forumBlk.ansBlk {
	align-items: flex-start;
}

/*_____ thumbBtn _____*/

.thumbBtn {
	gap: 0 20px;
	margin: 15px 0 0;
}

.thumbBtn > .webBtn {
	width: auto;
	padding: 0;
}

.thumbBtn > .webBtn > img {
	width: 22px;
	min-width: 22px;
	margin-right: 10px;
	transition: inherit;
}

.thumbBtn > .webBtn:not(:hover) > img {
	filter: brightness(0) invert(0.5);
}

.thumbBtn > .webBtn.like > img {
	filter: none;
}

.thumbBtn > .webBtn.unlike > img {
	filter: hue-rotate(180deg);
}

/*
|----------------------------------------------------------------------
|       Category
|----------------------------------------------------------------------
*/

/* #category {
	padding-bottom: 0;
} */

#category .content {
	max-width: 700px;
	margin: 0 auto 50px;
}

#category .content p {
	font-size: 16px;
}

#category .flexRow {
	justify-content: center;
}

#category .flexRow > .col {
	width: 25%;
}

#category .inner > .image {
	position: relative;
	padding-bottom: 90%;
	border-radius: 7px;
	overflow: hidden;
}

#category .inner > .image > img {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#category .inner > .txt {
	margin-top: 15px;
}

#category .inner > .txt h4 {
	margin: 0;
}

/*
|----------------------------------------------------------------------
|       Form
|----------------------------------------------------------------------
*/

label {
	display: block;
	font-weight: normal;
	cursor: pointer;
}

label > a {
	color: #3c9cdb;
}

label > a:hover {
	color: var(--color);
}

.txtGrp {
	position: relative;
}

.txtGrp:not(:nth-last-child(1)) {
	margin-bottom: 20px;
}

.infoHead {
	margin-top: 40px;
	margin-bottom: 20px;
}

form h5 + p {
	margin: -10px 0 20px;
}

.txtBox {
	display: block;
	width: 100%;
	height: 46px;
	text-align: left;
	padding: 6px 12px;
	border-radius: 6px;
	outline: none !important;
	transition: all ease 0.5s;
}

/* .txtGrp label ~ .txtBox:not(button) { */
.txtGrp label ~ .txtBox {
	padding: 16px 12px 6px;
}

.txtBox:-webkit-autofill {
	transition: background-color 5000s ease-in-out 0s;
}

textarea.txtBox {
	height: 120px;
	resize: none;
}

/* .txtGrp .txtBox {
    box-shadow: inset 1px 1px 4px #f2f3f7;
} */

.uploadImg:not([data-upload]) {
	color: var(--color);
	text-align: center;
	border-color: var(--color);
	box-shadow: inset 1px 1px 4px #fcfcfc;
}

.uploadImg[data-upload] {
	display: flex;
	align-items: center;
	/* color: var(--text_gray); */
}

.uploadImg[data-upload]:before {
	content: attr(data-text);
	flex: 1;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

/* .uploadImg[data-upload]:after {
	content: "Upload";
	color: var(--color);
	margin-left: 5px;
} */

/* .uploadImg[data-upload].uploaded:after {
	content: "Remove";
} */

.txtGrp:not(.lblBtn) > label {
	position: absolute;
	top: 0;
	display: flex;
	align-items: center;
	min-height: 46px;
	line-height: 1;
	margin: 0;
	margin-left: 13px;
	pointer-events: none;
	transition: all ease 0.5s;
	z-index: 1;
}

.txtGrp:not(.lblBtn) > label.move {
	font-size: 10px;
	transform: translateY(-12px);
}

.txtBox:disabled {
	cursor: not-allowed;
}

.txtBox:focus::placeholder {
	opacity: 0.4;
}

.txtBox:hover,
.txtBox:focus {
	border-color: var(--color);
}

input[type="radio"],
input[type="checkbox"] {
	position: relative;
	width: 18px;
	min-width: 18px;
	height: 18px;
	margin-top: 0;
	cursor: pointer;
}

input[type="radio"],
input[type="checkbox"] {
	display: inline;
	appearance: initial;
}

input[type="radio"]:before,
input[type="checkbox"]:before,
input[type="radio"]:after,
input[type="checkbox"]:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

input[type="checkbox"]:before,
input[type="checkbox"]:after {
	transition: all linear 0.3s;
}

input[type="radio"]:before,
input[type="checkbox"]:before {
	background-position: center;
	background-repeat: no-repeat;
	background-size: 8px;
	z-index: 1;
}

input[type="radio"]:after,
input[type="checkbox"]:after {
	border-radius: 4px;
}

input[type="radio"]:after {
	border-radius: 75%;
}

input[type="checkbox"]:checked:before {
	background-image: var(--tick);
}

input[type="radio"]:checked:after {
	border-color: var(--color);
	box-shadow: inset 0 0 0 4px var(--color);
}

input[type="checkbox"]:checked:after {
	background: var(--color);
	border-color: var(--color);
	box-shadow: none;
}

.lblBtn {
	display: flex;
	text-align: left;
}

.lblBtn > input[type="radio"],
.lblBtn > input[type="checkbox"] {
	margin-top: 2px;
}

.lblBtn label {
	align-self: center;
	line-height: 1.5;
	cursor: pointer;
	margin: 0 0 0 10px;
}

input[type="file"].uploadFile {
	display: none;
}

.uploadImg {
	position: relative;
	cursor: pointer;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

select.txtBox {
	background-image: var(--chevron);
	background-position: right 10px center;
	background-repeat: no-repeat;
	background-size: 10px;
	padding-right: 24px !important;
	-webkit-appearance: none;
	appearance: none;
}

select.txtBox > option {
	color: var(--text_color);
}

/*_____ flexGrp _____*/

.flexGrp {
	display: flex;
}

.flexGrp > div,
.flexGrp > .bTn > .webBtn {
	align-self: center;
	margin: 0;
}

.flexGrp > .txtGrp {
	flex: 1;
	margin: 0 !important;
}

.flexGrp > .txtGrp.auto {
	flex: none;
}

.flexGrp > .bTn {
	margin-left: 10px;
}

.flexGrp > .data {
	margin-right: 15px;
}

.flexGrp > .data > * {
	margin: 0;
}

/*_____ info _____*/

.infoHead {
	display: flex;
	margin-bottom: 0;
}

.infoHead > *:not(.info) {
	margin-top: 0;
}

.info {
	position: relative;
	align-self: flex-start;
	line-height: 1;
	margin-left: auto;
}

.info > strong {
	display: flex;
	align-items: center;
	font-size: 90%;
	font-family: "Poppins SemiBold" !important;
	cursor: pointer;
}

.info > strong:after {
	content: "";
	display: block;
	width: 20px;
	min-width: 20px;
	height: 20px;
	background-image: var(--question);
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	margin-left: 5px;
	filter: brightness(0) invert(0.6);
}

.info .infoIn {
	position: absolute;
	top: 100%;
	right: 0;
	width: 240px;
	/* background: rgb(255 255 255 / 0.7); */
	padding: 20px;
	margin: 20px 0 0;
	line-height: 1.4;
	text-align: left;
	font-size: 90%;
	opacity: 0;
	visibility: hidden;
	border-radius: 6px;
	backdrop-filter: blur(10px);
	box-shadow: 0 15px 35px 0 rgba(49, 49, 93, 0.1), 0 5px 15px 0 rgba(0, 0, 0, 0.08);
	transition: all ease 0.5s;
	z-index: 2;
}

.info:hover .infoIn {
	margin-top: 7px;
	opacity: 1;
	visibility: visible;
}

/*
|----------------------------------------------------------------------
|       Footer
|----------------------------------------------------------------------
*/

footer {
	position: relative;
	color: var(--white);
	font-family: "Poppins Light";
	padding-top: 80px;
	overflow: hidden;
}

footer .contain-fluid {
	padding: 0 50px;
}

footer .flexRow {
	flex-flow: nowrap;
	margin: -25px -15px;
}

footer .flexRow > .col {
	flex: 1;
	padding: 25px 15px;
}

footer .flexRow > .col:nth-last-child(1) {
	min-width: 300px;
	flex: 1.5;
}

footer .flexRow > .col.flex {
	align-items: flex-start;
	justify-content: flex-end;
}

footer h5 {
	position: relative;
	font-family: "Poppins Regular";
	margin-bottom: 30px;
	padding-bottom: 10px;
}

footer h5:after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 30px;
	height: 2px;
	background: var(--color);
}

footer .lst > li {
	display: block;
	margin-bottom: 10px;
}

footer .lst > li:nth-last-child(1) {
	margin-bottom: 0 !important;
}

footer a {
	color: inherit;
}

footer a:hover {
	color: var(--color);
}

footer .smLst {
	margin: 0 -10px;
}

footer .smLst > li {
	padding: 0 10px;
}

footer .infoLst > li {
	display: flex;
	margin-bottom: 20px;
}

footer .infoLst > li > img {
	width: 16px;
	min-width: 16px;
	height: 16px;
	margin-top: 2px;
	margin-right: 10px;
	/* filter: brightness(0) invert(1); */
}

footer form .txtGrp {
	display: flex;
	align-items: center;
	margin: 10px 0 30px;
}

footer form .txtBox {
	padding-right: 46px;
}

footer form button {
	position: absolute;
	top: 0;
	right: 16px;
	bottom: 0;
	background: transparent;
	font-size: 16px;
	padding: 0;
	line-height: 0;
	border: 0;
}

footer form > label {
	font-size: 12px;
	margin-bottom: 7px;
}

footer .social {
	margin: 30px -3px -3px;
}

footer .social > li {
	padding: 3px;
}

footer .social > li > a {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 38px;
	min-width: 38px;
	height: 38px;
	background: var(--white);
	background: rgb(255 255 255 / 10%);
	padding: 11px;
	border-radius: 75%;
}

footer .social > li > a:hover {
	background: var(--color);
}

footer .social > li > a > img {
	filter: brightness(0) invert(1);
}

footer .themeBtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	background: var(--black_border);
	color: var(--white);
	font-family: "Poppins Medium";
	padding: 0 20px;
	white-space: nowrap;
	border-radius: 5px;
	box-shadow: 0 5px 20px rgb(18 15 56 / 7%);
}

footer .themeBtn > em {
	margin-right: 10px;
}

/*_____ Copyright _____*/

.copyright {
	padding: 25px 0;
	margin-top: 60px;
	border-top: 1px solid rgb(255 255 255 / 7%);
	z-index: 1;
}

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

.copyright p {
	flex: 1;
	color: inherit;
	margin: 0;
}

.copyright p > a {
	color: var(--color);
}

.copyright p > a:hover {
	color: var(--white);
}

/*
|----------------------------------------------------------------------
|       Block
|----------------------------------------------------------------------
*/

.blk {
	padding: 25px;
	border-radius: 7px;
	box-shadow: 0 5px 20px rgb(18 15 56 / 7%);
}

.blk:not(:nth-last-child(1)) {
	margin-bottom: 20px;
}

.blk .blk {
	padding: 15px 20px;
	border-radius: 7px;
	margin-bottom: 10px;
	border: 1px solid rgb(0 0 0 / 3%);
	box-shadow: none;
}

.blk ._header,
.blk ._footer {
	position: relative;
	display: flex;
	align-items: center;
}

.blk ._header {
	margin-bottom: 20px;
}

.blk.collap > ._header {
	margin-bottom: 0;
}

.blk.collap > ._header > .downBtn,
.blk.collap > ._header > .closeBtn {
	display: block;
	font-family: "font-icon";
	font-weight: bold;
	line-height: 2;
	margin-left: 10px;
	cursor: pointer;
}

.blk.collap > ._header > .downBtn:before {
	content: "\e93d";
}

.blk.collap > ._header > .closeBtn:before {
	content: "\ea06";
	display: block;
	transform: rotate(45deg);
}

.blk.collap > ._header > .closeBtn:hover {
	color: var(--red);
}

.blk.collap > ._content {
	display: none;
	padding-top: 20px;
}

.blk.collap.active > ._content {
	display: block;
}

.blk.collap > ._content > h5:nth-child(1) {
	margin-top: 20px;
}

.blk.head ._header {
	margin-bottom: -20px;
}

.blk ._footer {
	justify-content: flex-end;
}

.blk ._header h3,
.blk ._header h4,
.blk ._header h5,
.blk ._header h6 {
	margin-bottom: 0;
	margin-right: 30px;
	flex: 1;
}

.blk ._header .srch {
	width: 280px;
}

/*_____ scrollbar  _____*/

.scrollbar::-webkit-scrollbar-track {
	border-radius: 50px;
}

.scrollbar::-webkit-scrollbar {
	width: 4px;
	height: 10px;
	border-radius: 50px;
}

.scrollbar::-webkit-scrollbar-thumb {
	border-radius: 50px;
}

/*
|----------------------------------------------------------------------
|       Formal - Common
|----------------------------------------------------------------------
*/

[formal] > section,
[common] > section {
	padding: 60px 0;
}

[formal] > section:nth-child(1) {
	padding-top: 25px;
}

[typical] #sBanner:before {
	opacity: 0.7;
}

[typical] #sBanner .txtGrp {
	border-radius: 7px;
	box-shadow: 0 5px 20px rgb(18 15 56 / 7%);
	overflow: hidden;
}

[typical] #sBanner .txtGrp > img {
	position: absolute;
	top: 0;
	left: 16px;
	bottom: 0;
	width: 18px;
	height: 18px;
	margin: auto;
	filter: brightness(0) invert(0.5);
}

[typical] #sBanner .txtGrp > .txtBox,
[typical] #sBanner .txtGrp > .webBtn {
	height: 56px;
	box-shadow: none;
}

[typical] #sBanner .txtGrp > .txtBox {
	padding-left: 46px;
	border: 0;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

[typical] #sBanner .txtGrp > .webBtn {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

/*_____ topHead _____*/

.topHead {
	display: flex;
	align-items: center;
	margin-bottom: 25px;
}

.topHead > .miniBtn {
	display: flex;
	align-items: center;
	margin-left: auto;
}

.topHead > .miniBtn select {
	width: auto;
	max-width: 120px;
	height: auto;
	background-color: transparent;
	background-position: right;
	border: 0;
}

.topHead > .heading {
	margin: 0;
	margin-right: auto;
}

.topHead .tabLst {
	gap: 2px;
}

.topHead .tabLst > li > a {
	display: block;
	padding: 5px 15px;
	border-radius: 5px;
}

/*
|----------------------------------------------------------------------
|       Sub Banner
|----------------------------------------------------------------------
*/

#sBanner {
	min-height: 100px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

#sBanner:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #0d171d;
	opacity: 0.5;
	z-index: 1;
}

#sBanner .contain {
	z-index: 3;
}

#sBanner .content {
	max-width: 700px;
	color: var(--white);
	text-align: center;
	margin: 0 auto;
}

#sBanner .content > h1 {
	text-shadow: 5px 5px 5px rgb(41 41 47 / 20%);
	margin-bottom: 0;
}

#sBanner .content > p {
	color: inherit;
	font-size: 16px;
}

#sBanner .content > h1 + * {
	margin-top: 20px;
}

/*
|----------------------------------------------------------------------
|       Terms
|----------------------------------------------------------------------
*/

#terms {
	padding-top: 30px;
}

#terms .outer {
	padding: 25px;
	border-radius: 7px;
	overflow: hidden;
}

/*
|----------------------------------------------------------------------
|       Oops 404
|----------------------------------------------------------------------
*/

#oops {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 120px 0 60px;
	overflow: auto;
}

#oops .inner {
	max-width: 340px;
	margin: 0 auto;
}

#oops .logoDv {
	position: absolute;
	top: 40px;
	left: 0;
	right: 0;
	width: 100px;
	margin: 0 auto 30px;
}

#oops .icon {
	color: var(--color2);
	font-size: 140px;
	font-family: "Poppins Bold";
	line-height: 0.8;
	margin-bottom: 25px;
	/*text-shadow: 0 0 2px #69a88d, 1px 5px 24px rgba(68, 102, 242, 0.05);*/
}

/*
|----------------------------------------------------------------------
|       Videos
|----------------------------------------------------------------------
*/

.vidBlk {
	position: relative;
	display: block;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	padding-bottom: 56%;
	cursor: pointer;
	border-radius: 7px;
	box-shadow: 0 5px 20px rgb(18 15 56 / 7%);
	overflow: hidden;
}

.vidBlk:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 14%;
	min-width: 36px;
	max-width: 100px;
	background-image: url("../images/icon-play.svg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	margin: auto;
	opacity: 0.9;
	transition: all linear 0.5s;
}

.vidBlk:hover:before {
	opacity: 1;
}

.vidBlk video,
.vidBlk iframe {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: 0 !important;
	margin: auto;
	/* -o-object-fit: cover; */
	object-fit: fill;
}

video[poster] {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/*
|----------------------------------------------------------------------
|       Frequently Asked Questions
|----------------------------------------------------------------------
*/

.faqBox {
	max-width: 800px;
	margin: 0 auto;
}

.faqBox > .faqLst:not(:nth-last-child(1)) {
	margin-bottom: 40px;
}

.faqLst > .faqBlk {
	position: relative;
	display: block;
	padding: 25px;
	margin-bottom: 15px;
	border-radius: 10px;
	box-shadow: 0 3px 15px 0 rgb(0 0 0 / 5%);
	transition: all ease 0.5s;
}

.faqLst > .faqBlk:nth-last-child(1) {
	margin-bottom: 0;
}

.faqLst > .faqBlk h5 {
	position: relative;
	padding: 0 20px 0 0;
	margin: 0;
	cursor: pointer;
	transition: all ease 0.5s;
	z-index: 2;
}

.faqLst > .faqBlk h5:after {
	content: "\ea06";
	position: absolute;
	top: 5px;
	right: 0;
	font-size: 70%;
	font-family: "font-icon";
	font-weight: bold;
}

.faqLst > .faqBlk.active h5:after {
	content: "\e9e0";
	color: var(--color);
}

.faqLst > .faqBlk h5:hover {
	color: var(--color);
}

.faqLst > .faqBlk .txt {
	display: none;
	margin: 0 0 -20px;
	padding: 20px 0;
}

.faqLst > .faqBlk:nth-child(1) .txt {
	display: block;
}

/*
|----------------------------------------------------------------------
|       Contact us
|----------------------------------------------------------------------
*/

#contact .content {
	max-width: 700px;
	margin: 0 auto 50px;
}

#contact .content p {
	font-size: 16px;
}

#contact form {
	max-width: 700px;
	padding: 25px;
	margin: 0 auto;
	border-radius: 7px;
	box-shadow: 0 5px 20px rgb(18 15 56 / 7%);
}

#contact form label,
#contact form .txtBox:not(textarea) {
	height: 50px;
}

#contact form .txtBox {
	padding-top: 20px;
}

#contact .infoLst {
	margin: -10px;
}

#contact .infoLst > li {
	width: 33.3334%;
	padding: 10px;
}

#contact .infoLst > li .inner {
	height: 100%;
	padding: 40px 30px 30px;
	border-radius: 7px;
	box-shadow: 0 5px 20px rgb(18 15 56 / 7%);
}

#contact .infoLst > li .icon {
	width: 42px;
	min-width: 42px;
	height: 42px;
	margin: 0 auto 15px;
}

/*
|----------------------------------------------------------------------
|       Business
|----------------------------------------------------------------------
*/

#business .flexRow {
	margin: -15px -25px;
	flex-flow: row-reverse;
}

#business .flexRow > .col {
	width: 50%;
	padding: 15px 25px;
}

#business .flexRow > .col2 {
	align-self: center;
}

#business .image {
	position: relative;
	padding-bottom: 70%;
	border-radius: 5px;
	box-shadow: 0 3px 15px 0 rgb(0 0 0 / 5%);
	overflow: hidden;
}

#business .image > img {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
|----------------------------------------------------------------------
|       Logon
|----------------------------------------------------------------------
*/

[logon] {
	padding: 0;
}

[logon] .logo {
	position: relative;
	float: none;
	width: 160px;
	margin: 0 auto 20px;
	z-index: 1;
	filter: drop-shadow(2px 4px 2px rgb(15 27 43 / 50%)) drop-shadow(-2px 0 2px rgb(15 27 43 / 50%)) drop-shadow(3px 0 0 rgb(15 27 43 / 50%));
}

#logon {
	display: flex;
	min-height: 100vh;
	padding: 0;
}

#logon > .sideBlk {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding: 70px;
}

#logon > .sideBlk:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0.9;
	z-index: 1;
}

#logon > .logBlk {
	align-self: center;
	width: 480px;
	min-width: 480px;
	padding: 60px;
	text-align: center;
}

#logon form {
	width: 100%;
	max-width: 380px;
	margin: auto;
}

.logBlk .rememberMe {
	margin: 0 0 20px;
}

.logBlk .rememberMe .lblBtn {
	text-align: center;
}

.logBlk .confirm {
	display: flex;
}

.logBlk .haveAccount {
	margin-top: 20px;
}

.logBlk .haveAccount a {
	color: var(--color);
}

.logBlk #pass {
	margin-left: auto;
}

/*_____ pasDv _____*/

.txtGrp.pasDv {
	position: relative;
}

.txtGrp.pasDv > i {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 14px;
	display: flex;
	align-items: center;
	width: 18px;
	height: 100%;
	cursor: pointer;
	opacity: 0.7;
	filter: brightness(0.5) invert(0.4);
}

.txtGrp.pasDv > i {
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}

.txtGrp.pasDv > i.icon-eye {
	background-image: url("../images/icon-eye.svg");
}

.txtGrp.pasDv > i.icon-eye-slash {
	background-image: url("../images/icon-eye-slash.svg");
}

.txtGrp.pasDv > i:hover {
	opacity: 1;
}

.txtGrp.pasDv > .txtBox {
	padding-right: 40px;
}

/*
|----------------------------------------------------------------------
|       Profile Settings
|----------------------------------------------------------------------
*/

.upLoadCover {
	display: flex;
	justify-content: flex-end;
	height: 280px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding: 20px;
	margin-bottom: -70px;
	border-radius: 7px;
	box-shadow: 0 5px 20px rgb(18 15 56 / 7%);
	overflow: hidden;
}

.upLoadCover .webBtn.uploadImg {
	max-width: 160px;
}

.upLoadDp .ico {
	width: 142px;
	min-width: 142px;
	height: 142px;
	margin: 0 auto 15px;
}

.upLoadDp .webBtn.uploadImg {
	max-width: 142px;
}

.upLoadDp .webBtn {
	margin: 0 auto;
}

.upLoadDp .noHats {
	max-width: 160px;
	font-size: 11px;
	margin: 7px auto 0;
}

.badge {
	padding: 4px 12px;
	font-size: 12px;
	font-weight: normal;
	border-radius: 50px;
}

/*
|----------------------------------------------------------------------
|       About us
|----------------------------------------------------------------------
*/

[about] #sBanner .content {
	max-width: 460px;
	padding: 60px 0;
}

#overview .flexRow {
	overflow: hidden;
}

#overview .flexRow {
	margin: -15px -30px;
	flex-flow: nowrap;
}

#overview .flexRow > .col {
	padding: 15px 30px;
}

#overview .ico {
	width: 400px;
	height: 400px;
	box-shadow: 0 5px 20px rgb(18 15 56 / 7%);
}

#overview .content p {
	font-size: 16px;
}

#overview .blk {
	margin: 30px 0 0;
}

#blocks .flexRow {
	justify-content: center;
}

#blocks .flexRow > .col {
	width: 50%;
}

#blocks .inner {
	position: relative;
	display: flex;
	padding-bottom: 60%;
	border-radius: 7px;
	box-shadow: 0 5px 20px rgb(18 15 56 / 7%);
	overflow: hidden;
}

#blocks .inner:before,
#blocks .image,
#blocks .txt {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	transition: all linear 0.5s;
	z-index: 1;
}

#blocks .inner:before {
	content: "";
	top: 50%;
	background-image: linear-gradient(rgba(0, 0, 0, 0), #0d1e23);
	z-index: 2;
}

#blocks .image > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

#blocks .inner:hover .image {
	transform: scale(1.1);
	filter: blur(5px);
}

#blocks .txt {
	top: initial;
	color: var(--white);
	padding: 20px;
	z-index: 2;
}

#blocks .txt p {
	color: inherit;
}

#future .flexRow {
	justify-content: center;
}

#future .flexRow > .col {
	width: 50%;
}

#future .blk {
	display: flex;
	height: 100%;
	padding: 30px;
	margin-bottom: 0;
}

#future .blk .icon {
	width: 64px;
	min-width: 64px;
	height: 64px;
	margin-right: 30px;
}

/*
|----------------------------------------------------------------------
|       Help & Support
|----------------------------------------------------------------------
*/

#help .flexRow > .col {
	width: 25%;
}

#help .inner {
	height: 100%;
	padding: 25px;
	border-radius: 7px;
	box-shadow: 0 5px 20px rgb(18 15 56 / 7%);
}

#help .inner ul > li {
	display: block;
}

/*
|----------------------------------------------------------------------
|       Affiliate
|----------------------------------------------------------------------
*/

#affiliate .content {
	max-width: 700px;
	margin: 0 auto 50px;
}

#affiliate .flexRow > .col {
	width: 33.3334%;
}

#affiliate .blk {
	height: 100%;
	padding: 30px 50px;
	margin-bottom: 0;
}

#affiliate .inner .icon {
	width: 100px;
	min-width: 100px;
	height: 100px;
	margin: 0 auto 20px;
}

/*
|----------------------------------------------------------------------
|       How it works
|----------------------------------------------------------------------
*/

#works .content {
	max-width: 600px;
	margin: 0 auto 30px;
}

#works .flexRow {
	justify-content: center;
}

#works .flexRow > .col {
	width: 33.3334%;
}

#works .inner {
	display: flex;
}

#works .inner .icon {
	width: 64px;
	min-width: 64px;
	height: 64px;
	margin-right: 20px;
}

/*
|----------------------------------------------------------------------
|       Videos
|----------------------------------------------------------------------
*/

#videos .flexRow > .col {
	width: 33.3334%;
}

#videos .blk {
	height: 100%;
	padding: 0;
	margin: 0;
	overflow: hidden;
}

#videos .blk > h4 {
	padding: 15px 20px;
	margin: 0;
}

#videos .blk > .vidBlk {
	border-radius: 0;
}

#videos .blk > .vidBlk:before {
	width: 18%;
}

/*
|----------------------------------------------------------------------
|       Profile
|----------------------------------------------------------------------
*/

#profile {
	padding-top: 0;
}

#profile .contain-fluid {
	padding: 0 50px;
}

#profile > .cover {
	height: 280px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	margin-bottom: 20px;
	box-shadow: 0 5px 15px rgb(0 0 0 / 7%);
}

#profile .flexRow {
	margin: -10px;
}

#profile .flexRow > .col {
	padding: 10px;
}

#profile .flexRow > .col1 {
	width: 70%;
}

#profile .flexRow > .col2 {
	width: 30%;
}

#profile .proBlk .icoBlk {
	display: flex;
}

#profile .proBlk .title {
	flex: 1;
	align-items: center;
	justify-content: space-between;
}

.cardBlk h4,
.proBlk .title h3 {
	color: var(--color);
	margin-bottom: 2px;
}

.cardBlk h4[data-level],
.proBlk .title h3[data-level] {
	position: relative;
	display: inline-flex;
}

.cardBlk h4[data-level]:after,
.proBlk .title h3[data-level]:after {
	content: "";
	width: 20px;
	min-width: 20px;
	height: 24px;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	margin-left: 10px;
}

.cardBlk h4[data-level="1"]:after,
.proBlk .title h3[data-level="1"]:after {
	background-image: url("../images/badge_1.svg");
}

.cardBlk h4[data-level="2"]:after,
.proBlk .title h3[data-level="2"]:after {
	background-image: url("../images/badge_2.svg");
}

.cardBlk h4[data-level="3"]:after,
.proBlk .title h3[data-level="3"]:after {
	background-image: url("../images/badge_3.svg");
}

.cardBlk h4[data-level="4"]:after,
.proBlk .title h3[data-level="4"]:after {
	background-image: url("../images/badge_4.svg");
}

.cardBlk h4[data-level="5"]:after,
.proBlk .title h3[data-level="5"]:after {
	background-image: url("../images/badge_5.svg");
}

.cardBlk h4[data-level]:before,
.proBlk .title h3[data-level]:before {
	position: absolute;
	bottom: 100%;
	right: 0;
	display: none;
	font-size: 10px;
	font-family: "Poppins Regular";
	padding: 2px 8px;
	margin-bottom: 3px;
	border-radius: 4px;
}

.cardBlk h4[data-level="1"]:before,
.proBlk .title h3[data-level="1"]:before {
	content: "Manga Newbie";
}

.cardBlk h4[data-level="2"]:before,
.proBlk .title h3[data-level="2"]:before {
	content: "Manga Native";
}

.cardBlk h4[data-level="3"]:before,
.proBlk .title h3[data-level="3"]:before {
	content: "Manga Specialist";
}

.cardBlk h4[data-level="4"]:before,
.proBlk .title h3[data-level="4"]:before {
	content: "Manga Master";
}

.cardBlk h4[data-level="5"]:before,
.proBlk .title h3[data-level="5"]:before {
	content: "Manga Overlord";
}

.cardBlk h4[data-level]:hover:before,
.proBlk .title h3[data-level]:hover:before {
	display: block;
}

#profile .proBlk .ico {
	width: 200px;
	min-width: 200px;
	height: 200px;
	margin-top: -160px;
	margin-right: 10px;
	box-shadow: 0 5px 20px rgb(18 15 56 / 7%);
}

#profile .proBlk .txt {
	padding-top: 20px;
}

#profile .proBlk .lst > li {
	display: flex;
	align-items: center;
}

#profile .proBlk .lst > li:not(:nth-last-child(1)) {
	margin-bottom: 5px;
}

#profile .proBlk .lst > li > strong {
	margin-right: 10px;
}

#profile .proBlk .lst > li > span {
	color: var(--color);
	margin: 0 5px;
	padding: 2px 10px;
	border-radius: 7px;
}

#profile .proBlk .frndBtn > img {
	margin: 0;
}

#profile .proBlk .frndBtn:hover > img {
	filter: brightness(0) invert(0.5);
}

#profile .proBlk .frndBtn > img:nth-child(2) {
	display: none;
}

#profile .proBlk .frndBtn[added-friend] > img:nth-child(1) {
	display: none;
}

#profile .proBlk .frndBtn[added-friend] > img:nth-child(2) {
	display: block;
}

#profile .proBlk .frndBtn:before,
#profile .proBlk .frndBtn:after {
	display: none;
	position: absolute;
	bottom: 100%;
}

#profile .proBlk .frndBtn:before {
	content: attr(data-text);
	font-size: 85%;
	padding: 2px 8px 1px;
	margin-bottom: 3px;
	border-radius: 4px;
}

#profile .proBlk .frndBtn:after {
	content: "";
	margin-bottom: -1px;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
}

#profile .proBlk .frndBtn:hover:before,
#profile .proBlk .frndBtn:hover:after {
	display: block;
}

#profile .proBlk > button {
	position: absolute;
	top: 25px;
	right: 25px;
}

#profile .ctaBlk {
	position: sticky;
	top: 100px;
	overflow: hidden;
}

#profile .ctaBlk .vidBlk {
	margin: -25px -25px 25px;
	border-radius: 0;
}

#profile .itmRow {
	margin: -10px;
}

#profile .itmRow > .col {
	width: 33.3334%;
	padding: 10px;
}

/*_____ frndLst _____*/

.frndLst {
	margin: -10px;
}

.frndLst > li {
	width: 20%;
	padding: 10px;
}

.frndLst .ico {
	padding-bottom: 100%;
}

.frndLst .ico > img {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.frndLst .txt {
	padding-top: 10px;
}

.frndLst .txt > span {
	display: block;
	margin: 0;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.frndLst .txt .dropCnt {
	left: 50%;
	min-width: 140px;
	transform: translateX(-50%);
}

/*_____ rating _____*/

.rating {
	display: flex;
	align-items: flex-end;
	font-size: 12px;
	line-height: 1;
}

.rating > strong,
.rating > strong > em {
	margin-left: 5px;
}

.rating > strong > em {
	font-family: "Poppins Regular";
}

.rating > strong > em:before {
	content: "(";
}

.rating > strong > em:after {
	content: ")";
}

/*_____ review _____*/

.review {
	display: flex;
}

.review:not(:nth-last-child(1)) {
	margin-bottom: 20px;
	padding-bottom: 20px;
}

.review .ico {
	width: 50px;
	min-width: 50px;
	height: 50px;
	margin-right: 20px;
}

.review .txt {
	width: 100%;
}

.review .icoTxt {
	width: 100%;
	display: flex;
	margin-bottom: 10px;
}

.review .icoTxt .title {
	flex: 1;
	margin-right: 10px;
}

.review .icoTxt h5 {
	margin: 0 0 5px;
}

.review .icoTxt .date {
	font-family: "Poppins Medium";
}

.review .review {
	display: flex;
	margin-top: 15px;
}

.review .review .ico {
	width: 32px;
	min-width: 32px;
	height: 32px;
}

.review h6 {
	margin: 0 0 4px;
}

/*
|----------------------------------------------------------------------
|       Inbox
|----------------------------------------------------------------------
*/

[inbox] {
	flex: none;
	height: 100vh;
	min-height: 200px;
}

[inbox] .contain-fluid {
	display: flex;
	height: 100%;
	padding: 0;
}

[inbox] .contain-fluid,
[inbox] .barBlk,
[inbox] .chatBlk {
	height: 100%;
}

[inbox] .barBlk,
[inbox] .chatBlk {
	display: flex;
	width: 100%;
	padding: 15px;
	flex-direction: column;
	box-shadow: 1px 5px 24px 0 rgba(68, 102, 242, 0.05);
	overflow: hidden;
}

[inbox] .barBlk {
	width: 320px;
	min-width: 320px;
	padding: 0;
}

/*_____ barBlk _____*/

[inbox] .time {
	font-size: 80%;
	font-family: "Poppins Medium";
}

[inbox] .barBlk h3 {
	margin: -20px -20px 20px;
	padding: 20px;
	border-bottom: 1px solid var(--light_gray);
}

[inbox] .barBlk .frnds {
	height: 100%;
	overflow: auto;
}

[inbox] .barBlk .frnds > li {
	display: block;
}

[inbox] .barBlk .frnds > li.active .inner {
	background: linear-gradient(45deg, var(--color2), var(--color));
	color: var(--white);
}

[inbox] .barBlk .frnds > li.active .inner p {
	color: #e3e6f1;
}

[inbox] .barBlk .txt {
	position: relative;
	flex: 1;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	margin-right: 10px;
}

[inbox] .barBlk .time {
	margin: -12px 0 0;
}

[inbox] .inner {
	display: flex;
	align-items: center;
	cursor: pointer;
	padding: 12px 15px;
	transition: all ease 0.5s;
}

[inbox] .barBlk .ico,
[inbox] .chatBlk .ico {
	width: 46px;
	min-width: 46px;
	height: 46px;
	margin-right: 15px;
}

[inbox] .barBlk .inner {
	position: relative;
}

[inbox] .barBlk .inner:after {
	position: absolute;
	top: 0;
	right: 10px;
	bottom: 0;
	display: block;
	width: 12px;
	height: 12px;
	background: #2d8cff;
	margin: auto;
	border-radius: 75%;
}

[inbox] .barBlk .ico > i.status {
	right: 0;
}

[inbox] .barBlk .frnds > li h5 {
	font-size: 100%;
	font-family: "Poppins Medium";
	margin-bottom: 0;
}

[inbox] .barBlk .frnds > li p {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

[inbox] .barBlk .inner.unread:after {
	content: "";
}

[inbox] .barBlk .frnds > li .inner.unread h5 {
	font-family: "Poppins Bold";
}

[inbox] .barBlk .frnds > li .inner.unread p {
	font-family: "Poppins Medium";
}

[inbox] .barBlk .srch {
	display: flex;
	align-items: center;
	padding: 15px;
}

[inbox] .barBlk .srch > .txtBox {
	height: 40px;
	padding-left: 42px;
	border: 0;
	box-shadow: 0 5px 20px rgb(18 15 56 / 7%);
}

[inbox] .barBlk .srch > button {
	position: absolute;
	top: 0;
	left: 30px;
	bottom: 0;
	width: 16px;
	height: 16px;
	background: transparent;
	padding: 0;
	margin: auto;
	border: 0;
	filter: brightness(0) invert(0.5);
}

/*_____ chatPerson _____*/

[inbox] .chatBlk .chat {
	display: none;
	max-height: 100%;
	padding: 15px 15px 0;
	margin: -15px -15px 0;
	flex: 1;
	flex-direction: column;
	overflow: auto;
}

[inbox] .chatBlk .chat.active {
	display: block;
}

[inbox] .buble {
	display: flex;
	margin-bottom: 25px;
	width: 70%;
}

[inbox] .buble.me {
	flex-flow: row-reverse;
	margin-left: auto;
}

[inbox] .buble.me .ico {
	margin-left: 15px;
	margin-right: 0;
}

[inbox] .buble .cntnt {
	padding: 10px 15px;
	line-height: 1.5;
	margin-top: 2px;
	border-radius: 7px;
	box-shadow: 0 5px 20px rgb(18 15 56 / 7%);
}

[inbox] .buble.me .cntnt {
	background: linear-gradient(45deg, var(--color2), var(--color));
	color: var(--white);
}

[inbox] .buble.me .time {
	text-align: right;
}

[inbox] .chatPerson {
	display: flex;
	margin: -15px -15px 15px;
	padding: 15px;
	align-items: center;
}

[inbox] .chatPerson h6 {
	flex: 1;
	margin: 0;
}

[inbox] .chatPerson .ico {
	width: 28px;
	min-width: 28px;
	height: 28px;
}

[inbox] .chatPerson .backBtn {
	display: none;
	font-size: 120%;
	margin-right: 15px;
	line-height: 0;
}

[inbox] .chatPerson .backBtn a {
	line-height: 0;
}

[inbox] .buble .cntnt.card {
	min-width: 300px;
	padding: 0;
	overflow: hidden;
}

[inbox] .buble .cntnt.card .fig {
	height: 150px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

[inbox] .buble .cntnt.card .btm {
	display: flex;
	justify-content: space-between;
	padding: 15px;
}

[inbox] .buble .cntnt.card .btm .price {
	text-align: right;
}

[inbox] .buble .cntnt.card .btm small {
	display: block;
}

[inbox] .buble .cntnt.card .bTn {
	padding: 10px;
}

/*_____ write _____*/

[inbox] .chatBlk .write {
	padding: 10px 15px;
	margin: 0 -15px -15px;
}

[inbox] .chatBlk .write .btm {
	display: flex;
	align-items: center;
	margin-top: 10px;
}

[inbox] .chatBlk .write textarea {
	height: 46px;
	max-height: 120px !important;
	padding: 10px 20px;
	/* transition: all linear 0.1s !important; */
	transition: none !important;
	box-shadow: 0 5px 20px rgb(18 15 56 / 7%);
	overflow: hidden;
}

[inbox] .chatBlk .write .arrowBtn {
	width: auto;
	min-width: initial;
	padding: 0;
	margin-right: 15px;
}

[inbox] .chatBlk .write .arrowBtn:not(:hover) {
	filter: brightness(0) invert(0.7);
}

[inbox] .chatBlk .write .icoBtn {
	margin-left: auto;
}

[inbox] .chatBlk .write .icoBtn > img {
	margin: 0;
	margin-left: 10px;
	filter: none;
}

[inbox] .chatBlk .chat .atch {
	display: block;
}

[inbox] .chatBlk .chat .atch span {
	max-width: 80px;
	padding: 4px 8px 2px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

[inbox] .filesAtch {
	margin: -2px -2px 2px;
	display: flex;
	flex-wrap: wrap;
}

[inbox] .filesAtch > span {
	position: relative;
	max-width: 20ch;
	margin: 2px;
	padding: 1px 5px 4px;
	padding-right: 20px;
	border-radius: 4px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

[inbox] .filesAtch > span.fail {
	color: #fd3838;
}

[inbox] .filesAtch > span > i {
	position: absolute;
	top: 5px;
	right: 3px;
	cursor: pointer;
}

[inbox] .filesAtch > span > em {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	/* width: 0; */
	height: 2px;
	background: var(--green);
}
[inbox] .filesAtch > span.fail > em {
	background: #fd3838;
}
/*
|----------------------------------------------------------------------
|       Dashboard
|----------------------------------------------------------------------
*/

/*_____ Dashboard _____*/

#dash .topBlk {
	display: flex;
	margin-bottom: 20px;
}

#dash .topBlk .blk {
	width: 50%;
	padding: 40px;
	margin: 0;
}

#dash .topBlk .icoBlk {
	display: flex;
	/* width: 40%; */
	background: linear-gradient(45deg, var(--color2), var(--color));
	color: var(--white);
	margin-right: 20px;
}

#dash .topBlk .icoBlk .ico {
	width: 120px;
	min-width: 120px;
	height: 120px;
	margin-right: 20px;
}

#dash .topBlk h3 {
	align-self: center;
	margin-bottom: 0;
}

#dash .topBlk h3 > span {
	display: block;
	font-size: 14px;
}

#dash .topBlk .countBlk {
	display: flex;
	flex-flow: column;
	justify-content: center;
	/* width: 60%; */
}

#dash .blkLst {
	display: flex;
	margin: -10px -25px;
}

#dash .blkLst > li {
	flex: 1;
	padding: 10px 25px;
}

#dash .blkLst > li strong {
	display: block;
	font-size: 50px;
	line-height: 1;
	margin-bottom: 10px;
}

#dash .flexRow {
	margin: -10px;
	justify-content: center;
}

#dash .flexRow > .col {
	width: 33.3334%;
	padding: 10px;
}

#dash .inner {
	position: relative;
	display: flex;
	height: 100%;
	padding: 30px 20px;
	border-radius: 6px;
	box-shadow: 1px 5px 24px 0 rgba(68, 102, 242, 0.05);
}

#dash .inner:hover {
	background: var(--color);
}

#dash .inner,
#dash .inner * {
	transition: all ease 0.5s;
}

#dash .inner > a {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
}

#dash .inner .icon {
	width: 50px;
	min-width: 50px;
	height: 50px;
	margin-right: 20px;
}

#dash .inner:hover h4 {
	color: var(--white);
}

#dash .inner:hover .icon {
	filter: brightness(0) invert(1);
}

#dash .inner:hover p {
	color: var(--bluish);
}

/*
|----------------------------------------------------------------------
|       Notifications
|----------------------------------------------------------------------
*/

.notiBlk {
	padding: 0;
}

.notiBlk > .inner {
	display: flex;
	padding: 25px;
}

.notiBlk > .inner .ico {
	width: 42px;
	min-width: 42px;
	height: 42px;
	margin-right: 20px;
}

.notiBlk > .inner .txt {
	display: flex;
	flex: 1;
	align-self: center;
}

.notiBlk > .inner .txt h6 {
	margin-bottom: 5px;
}

.notiBlk > .inner .cnt {
	flex: 1;
}

.notiBlk > .inner .time {
	font-size: 90%;
	opacity: 0.25;
	white-space: nowrap;
}

/*_____ blockLst _____*/

.blockLst {
	padding: 0;
}

.blockLst table {
	width: 100%;
}

.blockLst table tr > * {
	padding: 15px 7px;
	border-bottom: 1px solid var(--light_gray);
}

.blockLst table tr > *:nth-child(1) {
	padding-left: 20px;
}

.blockLst table tr > *:nth-last-child(1) {
	padding-right: 20px;
}

.blockLst table tr > th {
	font-family: "Poppins SemiBold";
	font-weight: normal;
}

.blockLst table .price {
	font-family: "Poppins SemiBold";
}

/*_____ Pagination _____*/

ul.pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 20px auto 0 !important;
	border-radius: 0;
}

ul.pagination > li {
	display: block;
}

ul.pagination > li > a {
	position: relative;
	float: none;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	background: transparent;
	color: var(--text_color);
	font-family: "Poppins SemiBold";
	text-align: center;
	padding: 0 5px;
	margin: 0 -5px;
	border: 0;
	border-radius: 5px !important;
}

ul.pagination > li > a > i {
	margin: 0 -10px;
}

ul.pagination > li > a:hover {
	background: transparent;
	color: var(--color);
	z-index: 1;
}

ul.pagination > li > a.active {
	background: var(--color);
	color: var(--white);
	margin: 0 5px;
	z-index: 2;
}

/*
|----------------------------------------------------------------------
|       Friends
|----------------------------------------------------------------------
*/

#friends .content {
	max-width: 700px;
	margin: 0 auto 50px;
}

#friends .content p {
	font-size: 16px;
}

#friends .flexRow > .col {
	width: 25%;
}

#friends .inner {
	position: relative;
	display: flex;
	flex-flow: column;
	height: 100%;
	background: var(--white);
	border-radius: 7px;
	box-shadow: 0 5px 20px rgb(18 15 56 / 7%);
	overflow: hidden;
}

#friends .inner > a {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
}

#friends .inner > .image {
	height: 120px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

#friends .inner > .ico {
	width: 80px;
	min-width: 80px;
	height: 80px;
	margin: -40px auto 0;
}

#friends .inner > .txt {
	padding: 20px;
}

#friends .inner > .txt > h4 {
	transition: all ease 0.5s;
}

#friends .inner:hover > .txt > h4 {
	color: var(--color);
}

#friends .inner > .txt > p {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

#friends .inner > .lst {
	display: flex;
	justify-content: space-between;
	padding: 20px;
	padding-top: 0;
	margin-top: auto;
}

#friends .inner > .lst strong {
	display: block;
}

/*
|----------------------------------------------------------------------
|       Community
|----------------------------------------------------------------------
*/

#community .contain-fluid {
	padding: 0 50px;
}

#community .flexRow > .col1 {
	width: 30%;
}

#community .flexRow > .col2 {
	width: 70%;
}

#community .list > li {
	display: block;
}

#community .list > li:not(:nth-last-child(1)) {
	margin-bottom: 10px;
}

#community .list > li > a {
	display: flex;
	justify-content: space-between;
}

#community .list > li.active > a {
	color: var(--color);
}

#community .list > li > a > span {
	align-self: flex-start;
	font-size: 12px;
	padding: 1px 10px;
	margin-left: 15px;
	border-radius: 50px;
	white-space: nowrap;
}

#community .navLst {
	gap: 5px 20px;
	margin-right: auto;
}

#community .navLst > li > a {
	padding-bottom: 5px;
	border-bottom: 2px solid transparent;
}

#community .navLst > li.active > a {
	color: var(--color);
	border-bottom-color: var(--color);
}

#community ul.pagination {
	margin: 10px 0 !important;
}

/*_____ forumLst _____*/

.forumLst > li {
	width: 100%;
}

.forumLst .inner {
	display: flex;
	width: 100%;
}

.forumLst .inner:not(:nth-last-child(1)) {
	margin-bottom: 20px;
}

.forumLst .inner > .ico {
	width: 40px;
	min-width: 40px;
	height: 40px;
	margin-right: 20px;
	border-radius: 7px;
}

.forumLst .inner > .txt {
	flex: 1;
}

.forumLst .inner > .txt h6 {
	margin-bottom: 0;
}

.forumLst .icoLst {
	display: flex;
	margin-top: -10px;
}

.forumLst .icoLst li:not(:nth-last-child(1)) {
	margin-right: -5px;
}

.forumLst .icoLst li:nth-child(n + 8) {
	display: none;
}

.forumLst .icoLst .ico {
	width: 25px;
	min-width: 25px;
	height: 25px;
	box-shadow: none;
}

/*_____ cardBlk _____*/

.cardBlk {
	padding: 0 !important;
	overflow: hidden;
}

.cardBlk > .image {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding-bottom: 40%;
}

.cardBlk > .ico {
	width: 80px;
	min-width: 80px;
	height: 80px;
	margin: -40px auto 0;
}

.cardBlk > .txt {
	padding: 20px;
}

.cardBlk > .txt h4 {
	padding: 0;
	margin-bottom: 5px;
}

.cardBlk > .txt .rating {
	justify-content: center;
}

.cardBlk .userLst {
	justify-content: center;
	margin: -10px 0 15px;
}

.cardBlk .userLst li:not(:nth-last-child(1)) {
	margin-right: -8px;
}

.cardBlk .userLst .ico {
	width: 32px;
	min-width: 32px;
	height: 32px;
	border: 2px solid #fefeff;
	box-shadow: none;
}

/*
|----------------------------------------------------------------------
|       Comic List
|----------------------------------------------------------------------
*/

#list .flexRow > .col1 {
	width: 70%;
}

#list .flexRow > .col2 {
	width: 30%;
}

#list .topBlk {
	overflow: hidden;
}

#list .topBlk > .image {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	margin: -25px -25px 0;
	padding-bottom: 42%;
}

#list .topBlk > .ico {
	width: 150px;
	min-width: 150px;
	height: 220px;
	margin: -14% auto 20px;
	border-radius: 7px;
}

#list .chapterLst {
	margin: -10px;
}

#list .chapterLst > li {
	width: 50%;
	padding: 10px;
}

#list .chapterLst .inner {
	position: relative;
	display: flex;
	align-items: center;
	border-radius: 7px;
	transition: all ease 0.5s;
}

#list .chapterLst .inner > a {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
}

#list .chapterLst .inner .ico {
	width: 80px;
	min-width: 80px;
	height: 80px;
	margin-right: 20px;
	border-radius: 7px;
}

#list .chapterLst .inner .webBtn {
	z-index: 2;
}

/*
|----------------------------------------------------------------------
|       Comic Detail
|----------------------------------------------------------------------
*/

[detail] {
	padding-top: 60px;
}

[detail] .head {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 60px;
	box-shadow: 0 5px 15px rgb(0 0 0 / 7%);
	z-index: 10;
}

[detail] .head .logo {
	width: 88px;
	height: 60px;
}

[detail] .head .iconLst {
	float: right;
	display: flex;
	align-items: center;
	height: 60px;
	margin: 0 -10px;
}

[detail] .head .iconLst > li {
	padding: 0 10px;
}

[detail] .head .iconLst > li > button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	min-width: 40px;
	height: 40px;
	background: transparent;
	border: 0;
	padding: 10px;
}

[detail] .head .iconLst > li > button img {
	filter: brightness(0) invert(0.5);
}

[detail] .head .title {
	position: absolute;
	left: 0;
	right: 0;
	max-width: 300px;
	text-align: center;
	margin: 8px auto 0;
}

[detail] .head .title h4 {
	margin-bottom: 5px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

[detail] .head .title .rateYo {
	margin: 0 auto;
}

[detail] .head .dropCnt {
	min-width: 300px;
	max-height: calc(100vh - 60px);
	overflow: auto;
}

[detail] .head .dropCnt .dropLst {
	height: 100%;
	overflow: auto;
}

[detail] .imgLst {
	max-width: 720px;
	margin: 0 auto;
}

[detail] .imgLst > li {
	display: block;
}

[detail] .btmBlk .arrowBtn {
	position: fixed;
	top: 50%;
	/* bottom: 0; */
	width: 40px;
	min-width: 40px;
	height: 40px;
	margin-top: 20px;
	/* justify-content: center; */
	/* transition: all ease 0.5s; */
}

[detail] .btmBlk .arrowBtn#pre {
	left: -100%;
}

[detail]:hover .btmBlk .arrowBtn#pre {
	left: 10px;
}

[detail] .btmBlk .arrowBtn#nxt {
	right: -100%;
}

[detail]:hover .btmBlk .arrowBtn#nxt {
	right: 10px;
}

[detail] .btmBlk .arrowBtn i {
	font-size: 100%;
}

#detail {
	padding: 0;
}

#detail .epiLst > li {
	display: flex;
	padding: 6px 15px;
}

#detail .epiLst > li:before {
	content: "";
	display: list-item;
	list-style-position: inside;
	margin-right: 15px;
	opacity: 0.25;
	white-space: nowrap;
}

#detail .epiLst > li > a {
	background: transparent;
	padding: 0;
}

#detail .epiLst > li.active,
#detail .epiLst > li.active a {
	color: var(--color);
}

#detail .social {
	width: 40px;
	min-width: 40px;
	margin-right: 10px;
}

#detail .social > li > a {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 40px;
	min-width: 40px;
	height: 40px;
	padding: 12px;
}

#detail .social > li > a:hover {
	background: var(--color);
}

#detail .social > li > a > img {
	filter: brightness(0) invert(0.5);
	transition: inherit;
}

#detail .social > li > a:hover > img {
	filter: brightness(0) invert(1);
}

/* #detail .forumBlk {
	margin-bottom: 1px;
	border-radius: 0;
} */

#detail .bgLst {
	margin: -10px;
}

#detail .bgLst > li {
	padding: 10px;
}

#detail .bgLst > li button {
	width: 60px;
	min-width: 60px;
	height: 60px;
	padding: 0;
}

#detail .bgLst > li button.dark {
	background: var(--black);
}

#detail .bgLst > li button.light {
	background: var(--white);
}

#detail .bgLst > li button.active {
	border-color: var(--color);
}

#detail .bgLst > li button:before {
	color: var(--color);
	font-size: 18px;
	font-family: "font-icon";
	font-weight: bold;
	-webkit-text-stroke: medium;
}

#detail .bgLst > li button.active:before {
	content: "\e939";
}

#detail #comment {
	position: fixed;
	top: 60px;
	right: -100%;
	bottom: 0;
	width: 920px;
	margin: 0;
	border-radius: 0;
	transition: all ease 0.5s;
	overflow: auto;
	z-index: 5;
}

#detail #comment.active {
	right: 0;
}

[detail].hr_view #detail {
	height: calc(100vh - 60px);
}

[detail].hr_view #detail > .contain-fluid,
[detail].hr_view .imgLst {
	height: 100%;
}

[detail].hr_view .imgLst {
	display: flex;
	max-width: none;
	height: 100%;
	overflow: auto;
}

[detail].hr_view .imgLst > li > img {
	width: auto;
	max-height: 100%;
	height: 100%;
}

/*_____ detail dark _____*/

[detail].dark {
	background: #1f1f1f;
	/* color: var(--white); */
}

[detail].dark .head {
	background: #0f0f0f;
}

[detail].dark .head .title h4 {
	color: var(--white);
}

/* [detail].dark .dropLst,
[detail].dark .dropCnt,
[detail].dark .blk {
	background: #2f2f2f;
} */

/*_____ tagBlk _____*/

.tagBlk {
	height: 140px;
	padding-top: 10px;
	padding-bottom: 10px;
	overflow: auto;
}

.tagBlk > .addTagBlk {
	position: absolute;
	display: inline-flex;
	flex-flow: column;
	padding: 5px 0;
	margin-top: 10px;
	border-radius: 7px;
	box-shadow: 0 5px 10px -2px rgba(50, 50, 93, 0.25), 0 2px 10px -8px rgba(0, 0, 0, 0.3);
	overflow: hidden;
	z-index: 1;
}

.tagBlk > .addTagBlk > span {
	display: block;
	cursor: pointer;
	padding: 5px 15px;
}

.tagLst {
	display: flex;
	flex-flow: wrap;
	margin: -3px;
}

.tagLst li {
	position: relative;
	padding: 3px;
}

.tagLst li > a,
.tagLst li > span {
	background: #5f95ff;
	padding: 2px 15px;
	font-size: 12px;
	border-radius: 50px;
	white-space: nowrap;
}

.tagLst li > span > .fi-cross:before {
	content: "\ea06";
	display: inline-block;
	font-weight: bold;
	transform: rotate(45deg);
}

.tagLst li > span > .fi-cross:hover {
	color: var(--red);
}

/*
|----------------------------------------------------------------------
|       Manga
|----------------------------------------------------------------------
*/

#manga .flexRow > .col {
	width: 33.3334%;
}

#manga .navLst {
	gap: 5px 25px;
	align-items: center;
}

#manga .navLst > li > a.active {
	background: linear-gradient(45deg, var(--color2), var(--color));
	color: var(--white);
	padding: 7px 20px;
	border-radius: 50px;
}

#manga .content {
	display: flex;
	margin-bottom: 30px;
}

/*
|----------------------------------------------------------------------
|       FYP
|----------------------------------------------------------------------
*/

#fyp .flexRow {
	justify-content: center;
	margin: -10px;
}

#fyp .flexRow > .col {
	width: 20%;
	padding: 10px;
}

#fyp .inner {
	position: relative;
	/* padding: 25px; */
	border-radius: 7px;
	box-shadow: 0 5px 20px rgb(18 15 56 / 7%);
	overflow: hidden;
}

#fyp .inner > .txt {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(transparent, var(--text_color));
	color: var(--white);
	padding: 40px 20px 20px;
	z-index: 1;
}

#fyp .inner > .txt h5 > a:not(:hover) {
	color: inherit;
}

/*
|----------------------------------------------------------------------
|       Create Manga
|----------------------------------------------------------------------
*/

#create form > fieldset:not(:nth-child(1)) {
	display: none;
}

#create .outer {
	display: flex;
}

#create .outer > .icoBlk {
	width: 260px;
	min-width: 260px;
	margin-right: 30px;
}

#create .outer > .icoBlk .ico {
	padding-top: 130%;
	margin-bottom: 15px;
	border-radius: 7px;
}

#create .outer > .icoBlk .ico img {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

#create .outer > .icoBlk .webBtn {
	margin: -56px 10px 0;
}

#create .outer > .txtBlk {
	flex: 1;
}

#create .upLoadBlk {
	height: 300px;
	padding-top: 10px;
	padding-bottom: 10px;
	overflow: auto;
}

#create .upLoadBlk .imgLst {
	margin: -7px;
}

#create .upLoadBlk .imgLst > li {
	width: 25%;
	cursor: move;
	padding: 7px;
}

#create .upLoadBlk .icon {
	padding-bottom: 100%;
	border-radius: 4px;
	overflow: hidden;
}

#create .upLoadBlk .icon img {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#create .upLoadBlk .crosBtn {
	top: 5px;
	right: 5px;
	font-size: 14px;
	border-radius: 75%;
	box-shadow: 0 5px 20px rgb(18 15 56 / 7%);
}

/*
|----------------------------------------------------------------------
|       Created Group
|----------------------------------------------------------------------
*/

[data-popup="members"] .frndLst {
	margin: -20px;
}

[data-popup="members"] .frndLst > li {
	width: 20%;
	padding: 20px;
}

/*
|----------------------------------------------------------------------
|       Switcher
|----------------------------------------------------------------------
*/

.switchBtn {
	position: relative;
	width: 30px;
	min-width: 30px;
	height: 18px;
	cursor: pointer;
	/* text-transform: uppercase; */
	/* overflow: hidden; */
}

.switchBtn * {
	transition: all ease 0.5s;
}

.switchBtn input[type="radio"],
.switchBtn input[type="checkbox"] {
	position: absolute;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	margin: 0 !important;
	width: 100% !important;
	height: 100% !important;
	box-shadow: none !important;
	opacity: 0;
	z-index: 5;
}

.switchBtn input[type="radio"]:before,
.switchBtn input[type="radio"]:after,
.switchBtn input[type="checkbox"]:before,
.switchBtn input[type="checkbox"]:after {
	display: none;
}

.switchBtn > em {
	display: flex;
	align-items: center;
	border: none !important;
}

.switchBtn > em,
.switchBtn > em:before,
.switchBtn > em:after {
	position: absolute;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	margin: auto !important;
	background: transparent;
	/* border: none !important; */
	padding: 0 !important;
	/* transform: none !important; */
	/* box-shadow: none !important; */
	z-index: 1;
}

.switchBtn > em:before {
	content: "";
	width: 12px;
	height: 12px;
	background: var(--black);
	border-radius: 75%;
	transform: translateX(-6px);
	transition: all linear 0.3s;
	box-shadow: 0 7px 14px 0 rgb(59 65 94 / 10%), 0 3px 6px 0 rgb(0 0 0 / 7%);
	z-index: 5;
}

.switchBtn input[type="radio"]:checked + em:before,
.switchBtn input[type="checkbox"]:checked + em:before {
	transform: translateX(6px);
}

.switchBtn > em:after {
	content: "";
	font-family: sans-serif !important;
	font-size: 11px;
	line-height: 1;
	width: 100%;
	height: 100%;
	/* top: 50%; */
	color: var(--text_color);
	white-space: pre;
	padding-top: 0 !important;
	background: var(--text_gray);
	border: 0 !important;
	border-radius: 50px;
	/* transition: none !important; */
	transition: all linear 0.3s !important;
}

.switchBtn input[type="radio"]:checked + em:after,
.switchBtn input[type="checkbox"]:checked + em:after {
	background: linear-gradient(45deg, var(--color2), var(--color));
}

.modeBtn {
	/* width: 34px;
	min-width: 34px; */
	order: 2;
	align-self: center;
	margin-left: 5px;
}

header .proIco ~ .modeBtn {
    margin-left: 15px;
}

.modeBtn > em:before {
	background: var(--white);
}

.modeBtn > em:after {
    background: var(--light_gray);
}

.modeBtn > small {
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	font-family: "Poppins Medium";
}

.modeBtn > small:before,
.modeBtn > small:after {
    display: none;
    position: absolute;
	left: 50%;
    bottom: 100%;
	transform: translateX(-50%);
}

.modeBtn > small:before {
    font-size: 85%;
    padding: 2px 8px 1px;
    margin-bottom: 3px;
	border-radius: 4px;
	white-space: nowrap;
}

.modeBtn input[type="checkbox"]:not(:checked) ~ small:before {
	content: attr(data-light);
}

.modeBtn input[type="checkbox"]:checked ~ small:before {
	content: attr(data-dark);
}

.modeBtn > small:after {
    content: '';
    margin-bottom: -1px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
}

.modeBtn:hover > small:before,
.modeBtn:hover > small:after {
    display: block;
}