@import url("gridImgs.apaka.css");
@import url('https://fonts.googleapis.com/css2?family=Poppins@300&display=swap');

:root {
	--apaka-blue: blue;
	--apaka-red: red;
	--apaka-black: black;
	--apaka-black3: #333;
	--apaka-black5: #555;
	--apaka-black6: #666;
	--apaka-black7: #777;
	--apaka-black8: #888;
	--apaka-black9: #999;
	--apaka-white: white;
	--apaka-pink: pink;
	--apaka-gray: gray;
	--apaka-gold: #f7c501;
	--apaka-orange: #ff8100;
	--apaka-green: #01c901;
	--apaka-lime: lime;
	--apaka-dark-orange: #ff6600;

	--theme-primary: #45a9ff;
	--theme-bg: #e9f1f9;
	--theme-secondary: #F118e9;

	--apaka-bg: #f4f4f4;
	--apaka-BCR: #d6d6d6;
	--apaka-favrite: #ff5500;

	--apaka-dialog-bg-green: #ecffec;
	--apaka-dialog-bg-red: #ffeeed;
	--apaka-dialog-bg-gray: #fbfaf8;
	--apaka-dialog-bg-orange: #fff9f3;
	--apaka-dialog-bg-sky: #f0fbff;
	--apaka-comman-font: open sans, sans-serif;
	--apaka-gradient-top: linear-gradient(0deg, var(--theme-primary), var(--apaka-favrite));
	--apaka-gradient-left: linear-gradient(90deg, var(--theme-primary), var(--apaka-favrite));
	--apaka-gradient-right: linear-gradient(-90deg, var(--theme-primary), var(--apaka-favrite));
	--apaka-gradient-bottom: linear-gradient(180deg, var(--theme-primary), var(--apaka-favrite));
	--shadow-color: 0 0 68px -40px #09299888;
	--apaka-popup-transperant: rgba(5, 5, 45, .7);
	--apaka-border-gray: #E5E5E9;
	--theme-border-color1: #e1e1f1;
	--theme-border-color2: #e1e1e1;
	--theme-primary-trans1: #45a9ff11;
	--theme-primary-trans2: #45a9ff22;
	--theme-primary-trans3: #45a9ff33;
	--theme-primary-trans4: #45a9ff44;
	--theme-primary-trans5: #45a9ff55;
	--theme-primary-trans6: #45a9ff66;
	--theme-primary-trans7: #45a9ff77;
	--theme-primary-trans8: #45a9ff88;
	--theme-primary-trans9: #45a9ff99;

	--header-height: 80px;
	--main-content-height: calc(100vh - 80px);
}

html,
body {
	padding: 0;
	margin: 0;
	background: var(--theme-bg);
	top: 0 !important;
}

* {
	scroll-behavior: smooth;
	box-sizing: border-box;
	user-select: none;
	font-family: 'Poppins', sans-serif;
	font-weight: initial;
	-webkit-font-smoothing: antialiased;
	accent-color: var(--theme-primary);
}

[hidden] {
	display: none !important;
}

.comNEror {
	position: relative;
	width: 100%;
	padding: 10px 0;
	margin: 20px auto;
	display: flex;
	vertical-align: middle;
	align-items: center;
	justify-content: center;
	color: var(--apaka-orange);
}

.comNEror.error {
	color: var(--apaka-red);
}

.comNEror.info {
	color: var(--theme-primary);
}

.comNEror.norm {
	color: var(--apaka-black5);
}

input[type='file'] {
	color: var(--theme-primary) !important;
	font-size: 15px;
}

input[type='file']::file-selector-button {
	padding: 8px 15px;
	border: 2px solid var(--theme-primary);
	color: var(--theme-primary);
	background: var(--apaka-white);
	border-radius: 100px;
	font-size: 12px;
	margin: 10px;
	cursor: pointer;
	text-transform: uppercase;
	font-weight: bold;
	letter-spacing: .6px;
	transition: .3s;
}

input[type='file']::file-selector-button:hover {
	transform: scale(1.1);
	box-shadow: 3px 3px 18px -8px var(--apaka-black5);
}

input[type="number"]::-webkit-inner-spin-button {
	display: none;
}

.noscript {
	top: 50%;
	z-index: 44999;
	margin: 0px auto;
	border-radius: 2px;
	border: 3px solid var(--apaka-orange);
	box-shadow: 4px 7px 188px -10px var(--apaka-black9);
	animation: popDown .3s linear 1;
}

@keyframes popDown {
	0% {
		transform: scale(0);
	}

	100% {
		transform: scale(1);
	}
}

.noscript .noscrBox {
	padding: 0px 30px;
	text-align: center;
	font-size: 20px;
}

.noscript .noscrBox>h1 {
	position: relative;
	display: grid;
	grid-template-columns: 30px auto;
	grid-gap: 10px;
	font-size: 20px;
	font-weight: normal;
	letter-spacing: .5px;
	color: var(--apaka-orange);
}

.noscript .noscrBox>h1>i {
	position: relative;
	width: 100%;
	display: flex;
	vertical-align: middle;
	align-items: center;
	justify-content: flex-start;
	font-style: normal;
	font-weight: normal;
	transform: scale(1.5);
}

.noscript .noscrBox>h1>span {
	display: flex;
	line-height: 1.5;
}

.col2grid,
.col3grid,
.col4grid {
	position: relative;
	margin: 0 auto;
	vertical-align: middle;
	align-items: center;
	justify-content: space-between;
	padding: 0;
	grid-gap: 15px;
}

.col2grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}

.col3grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.col4grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

.stsLbl {
	padding: 3px 8px;
	border-radius: 5px;
	margin: 5px;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 10px;
	letter-spacing: 1px;
}

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

.cl-sky {
	color: var(--theme-primary);
}

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

.cl-orange {
	color: var(--apaka-orange);
}

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

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

.cl-lime {
	color: var(--apaka-lime);
}

.cl-white {
	color: var(--apaka-white);
}

.cl-black {
	color: var(--apaka-black);
}


.bg-red {
	background: var(--apaka-red);
	color: var(--apaka-white);
}

.bg-sky {
	background: var(--theme-primary);
	color: var(--apaka-white);
}

.bg-green {
	background: var(--apaka-green);
	color: var(--apaka-white);
}

.bg-orange {
	background: var(--apaka-orange);
	color: var(--apaka-white);
}

.bg-blue {
	background: var(--apaka-blue);
	color: var(--apaka-white);
}

.bg-yellow {
	background: var(--apaka-yellow);
	color: var(--apaka-white);
}

.bg-lime {
	background: var(--apaka-lime);
	color: var(--apaka-white);
}

.bg-white {
	background: var(--apaka-white);
	color: var(--apaka-black);
}

.bg-black {
	background: var(--apaka-black);
	color: var(--apaka-white);
}

.vr-btn {
	position: relative;
	padding: 10px 15px;
	margin: 5px;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 12px;
	letter-spacing: 1px;
	cursor: pointer;
	transition: .3s;
}

.vr-btn:hover {
	box-shadow: 2px 4px 18px 0 var(--shadow-color);
}

.vr-btn.br-100 {
	border-radius: 100px;
}

/* dialog boxes code */
.apaka-popupCont,
._Box,
._articale,
.gridBox,
._articale>label {
	display: flex;
	vertical-align: middle;
	align-items: center;
	justify-content: flex-start;

}

.apaka-popupCont {
	position: fixed;
	width: 100%;
	padding-bottom: 30px;
	max-height: 100vh;
	top: 0;
	left: 0;
	margin: 0 auto;
	z-index: 2025;
	align-items: flex-start;
	justify-content: center;
	display: none;
	overflow: auto;
}

.apaka-popupCont.open {
	display: flex;
}

._Box {
	width: 100%;
	position: relative;
}

._articale {
	width: auto;
	max-width: 80%;
	position: relative;
	margin: 0 auto;
	margin-top: 20px;
	animation: popUpDialog .3s linear 1 backwards;
}

@keyframes popUpDialog {
	0% {
		transform: scale(.8) translateY(-100%);
	}

	100% {
		transform: scale(1) translateY(10px);
	}
}

.apaka-popupCont[close] ._articale {
	animation: popDownDialog .3s linear 1 backwards !important;
}

@keyframes popDownDialog {
	0% {
		transform: scale(1) translateY(10px);
	}

	100% {
		transform: scale(.8) translateY(-100%);
	}
}

._articale .diaTimes {
	color: var(--apaka-red);
	padding: 15px;
	cursor: pointer !important;
}

.gridBox {
	position: relative;
	justify-content: space-between;
	align-items: center;
	padding: 0px;
	border-radius: 15px;
}

.gridBox div {
	padding: 15px;
	position: relative;
}

.gridBox>div:nth-child(2) {
	padding: 15px 0;
}

.gridBox div:first-child>* {
	font-size: 18px;
}

.fa-times {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	color: red !important;
}

.fa-times::before {
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1.5;
	font-size: 15px;
}

.gridBox div p {
	padding: 0;
	margin: 0;
	font-size: 14px;
	font-weight: normal;
}

.gridBox.suc {
	background: var(--apaka-dialog-bg-green) !important;
	border: 2px solid var(--apaka-green);
	box-shadow: 5px 5px 38px -8px var(--apaka-green);
}

.gridBox.error {
	background: var(--apaka-dialog-bg-red) !important;
	border: 2px solid var(--apaka-red);
	box-shadow: 5px 5px 38px -8px var(--apaka-red);
}

.gridBox.alert {
	background: var(--apaka-dialog-bg-orange) !important;
	border: 2px solid var(--apaka-orange);
	box-shadow: 5px 5px 38px -8px var(--apaka-orange);
}

.gridBox.info {
	background: var(--apaka-dialog-bg-sky) !important;
	border: 2px solid var(--theme-primary);
	box-shadow: 5px 5px 38px -8px var(--theme-primary);
}

.gridBox.norm {
	background: var(--apaka-dialog-bg-gray) !important;
	border: 2px solid var(--apaka-gray);
	box-shadow: 5px 5px 38px -8px var(--apaka-gray);
}


.gridBox>* {}

.gridBox.suc>* {
	color: var(--apaka-green) !important;
}

.gridBox.error>* {
	color: var(--apaka-red) !important;
}

.gridBox.alert>* {
	color: var(--apaka-orange) !important;
}

.gridBox.info>* {
	color: var(--theme-primary) !important;
}

.gridBox.norm>* {
	color: var(--apaka-gray) !important;
}

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

/* dialog boxes code */

/* loading pop code */
.loadingCont {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 2025;
}

.loadingCont,
.loadingCont .loading_box {
	display: flex;
	vertical-align: middle;
	align-items: center;
	justify-content: center;
}

.loadingCont .loading_box {
	position: relative;
	height: 100%;
	width: 100%;
}

.cont_box {
	position: relative;
	padding: 40px;
	/* border:1px solid var(--apaka-BCR); */
	border-radius: 50px;
	background-color: rgb(255 255 255 / 100%);
	box-shadow: 0 0 68px 0 #ccc;
	display: flex;
	vertical-align: middle;
	align-items: center;
	justify-content: center;
	animation: popPP 1s cubic-bezier(1, 1.69, 0.09, -0.92) infinite;
}

.loding {
	position: absolute;
	width: 50px;
	height: 50px;
	background: url(../img/favicon.webp)center no-repeat;
	background-size: 60% 60%;
	overflow: hidden;
}

.loding span {
	position: absolute;
	z-index: 2;
	background-color: var(--theme-primary);
	border-radius: 100px;
	animation-duration: .5s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-fill-mode: backwards;
	box-shadow: 2 2 80px -8px var(--theme-primary);
}

.loding span.top,
.loding span.bottom {
	height: 3px;
	width: 100%;
}

.loding span.left,
.loding span.right {
	height: 100%;
	width: 3px;
}

.loding span.top {
	top: 0;
	left: 0;
	animation-name: slidetop;
	animation-delay: .25s;
}

.loding span.right {
	top: 0;
	right: 0;
	animation-name: slideright;
	animation-delay: .5s;
}

.loding span.bottom {
	bottom: 0;
	right: 0;
	animation-name: slidebottom;
	animation-delay: .75s;
}

.loding span.left {
	bottom: 0;
	left: 0;
	animation-name: slideleft;
	animation-delay: 1s;
}

@keyframes slidetop {
	0% {
		left: -100%;
	}

	100% {
		left: 100%;
	}
}

@keyframes slideright {
	0% {
		top: -100%;
	}

	100% {
		top: 100%;
	}
}

@keyframes slidebottom {
	0% {
		right: -100%;
	}

	100% {
		right: 100%;
	}
}

@keyframes slideleft {
	0% {
		bottom: -100%;
	}

	100% {
		bottom: 100%;
	}
}

/* loading pop code */

/* social medias code */
.fixedSocials {
	position: fixed;
	padding: 0;
	top: 50%;
	transform: translateY(-50%);
	right: 0;
	z-index: 2022;
}

.fixedSocials>.box {
	position: relative;
	width: 50px;
	padding: 30px 0;
	background: var(--apaka-white);
	filter: drop-shadow(4px 2px 15px var(--shadow-color));
	border-radius: 30px 0 0 30px;
}

.fixedSocials>.box ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.fixedSocials>.box ul li {
	position: relative;
	display: block;
	width: 100%;
}

.fixedSocials>.box ul li label {
	width: 150px;
	position: relative;
	display: grid;
	grid-template-columns: 50px auto;
	vertical-align: middle;
	align-items: center;
	justify-content: flex-start;
	cursor: pointer;
	transition: .7s;
	padding: 0;
	margin: 0;
	border-radius: 100px 0 0 100px;
}

.fixedSocials>.box ul li label>span {
	width: 100%;
	display: flex;
	font-weight: bold;
	margin-left: 10px;
	font-size: 14px;
	letter-spacing: 1px;
}

.fixedSocials>.box ul li label i {
	position: relative;
	width: 50px;
	height: 40px;
	text-align: center;
	padding: 0;
	display: flex;
	vertical-align: middle;
	align-items: center;
	justify-content: center;
}

.fixedSocials>.box ul li label i span {
	display: block;
	padding: 0;
	margin: 0;
	transform: scale(1.2);
}

.fixedSocials>.box ul li:hover label {
	transform: translateX(-67%);
	background: var(--apaka-white);
	overflow: hidden;
}

.fixedSocials>.box ul li:hover label i {
	background: var(--theme-primary);
	color: var(--apaka-white);
}

.fixedSocials>.box ul li:hover label>span {
	color: var(--theme-primary);
}

/* social medias code */


/* tagger code here */
/* for the tag creation code */
.tag-container-parent {
	position: relative;
	border: 2px solid var(--apaka-BCR);
	border-radius: 3px;
	background: var(--apaka-white);
	width: 100%;
	padding: 0;
	display: block;
	margin: 10px 0;
}

.tag-container-parent:before {
	position: relative;
	width: 100%;
	content: attr(tag-title);
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 1px;
	padding: 8px 0;
	text-indent: 15px;
	display: flex;
	background: var(--theme-primary);
	color: var(--apaka-white);
}

.tag-container {
	border-radius: 3px;
	background: var(--apaka-white);
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	width: 100%;
	padding: 6px;
	margin: 0 auto;
	justify-content: space-between;
	align-items: center;
	vertical-align: middle;
}

.tag-container .Infoar {
	position: relative;
	width: 100%;
	text-align: left;
	padding: 0 3px;
}

.tag-container .Infoar>b {
	font-weight: 700;
	font-size: 14px;
	display: block;
	padding: 10px 0;
	color: var(--apaka-orange);
}

.tag-container .Infoar>ul {
	position: relative;
	width: 100%;
	display: block;
	padding: 3px 0 0 30px;
	margin: 0;
	list-style-type: circle !important;
	list-style-position: inside;
}

.tag-container .Infoar>ul>li {
	padding: 3px 0;
	font-weight: 400;
	font-size: 12px;
	color: var(--apaka-black5);
	text-align: left;
}

.tag-container .Infoar label {
	text-align: left;
	color: var(--theme-primary);
	display: block;
	font-size: 14px;
	font-weight: bold;
	padding: 10px 0;
	margin: 0;
}

.tag-container .tagUnicness {
	position: relative;
	margin: 0 auto;
	padding: 0;
	text-align: center;
	width: 100%;
}

.tag-container .tagUnicness>p {
	position: relative;
	display: inline-block;
	padding: 10px;
	border: 2px solid var(--apaka-orange);
	border-radius: 5px;
	font-variant-caps: titling-case;
	color: var(--apaka-orange);
	font-size: 14px;
	font-weight: normal;
}

.tag-container .tagUnicness>p>b {
	color: var(--apaka-white);
	background: var(--apaka-black6);
	padding: 3px 7px;
	margin-left: 7px;
	font-size: 13px;
	border-radius: 100px;
	text-transform: uppercase;
	cursor: pointer;
}

.RecomondTags {
	position: relative;
	width: 100%;
	text-align: left;
	display: flex;
	vertical-align: middle;
	align-items: center;
	flex-wrap: wrap;
}

.tag-container .tag,
.tag-container .tagRecomond {
	font-weight: normal;
	margin: 5px;
	height: 23px;
	padding: 3px 5px;
	border-radius: 100px;
	background: var(--apaka-bg);
	display: flex;
	vertical-align: middle;
	align-items: center;
	color: var(--apaka-black5);
	cursor: default;
	border: 1px solid var(--apaka-BCR);
}

.tag-container .tag.overide {
	background: var(--apaka-white);
	color: var(--apaka-red);
	border-color: var(--apaka-red);
	animation: overide .5s ease-in-out infinite;
}

@keyframes overide {
	0% {
		opacity: .3
	}

	100% {
		opacity: 1
	}
}

.tag-container .RecomondTags>.tagRecomond {
	cursor: pointer;
}

.tag-container .tag>span,
.tag-container .RecomondTags>.tagRecomond>span {
	display: flex;
	position: relative;
	font-size: 14px;
	text-align: center;
}

.tag-container .RecomondTags>.tagRecomond:hover {
	background: var(--apaka-orange);
	color: white;
	border-color: var(--apaka-orange);
}

.tag i {
	position: relative;
	display: flex;
	cursor: pointer;
	margin-left: 5px;
	transform: scale(1.1);
}

.tag:hover {
	color: var(--apaka-orange);
	background: var(--apaka-white);
	border-color: var(--apaka-orange);
}

.tag-container input {
	font-size: 16px;
	border: 0;
	padding: 5px;
	margin: 5px 0px;
	outline: none;
	background: var(--apaka-white);
	color: var(--apaka-black3);
	flex: 1;
	border: none;
}

label.tg_error {
	position: relative;
	font-size: 14px;
	padding: 10px;
	font-variant-caps: titling-case;
	text-align: center;
	display: inline-block;
	padding: 10px;
	width: 100%;
}

.wrong {
	color: var(--apaka-orange);
}

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

@media screen and (max-width: 700) {
	.tag-container-parent {
		width: 100%;
		margin: 5px auto;
	}

	.tag-container {
		width: 100%;
	}
}

/* tagger code here */

/* gotop code */
.gotop {
	position: fixed;
	bottom: 0;
	right: 0;
	z-index: 2021;
}

.gotop>.box,
.gotop .box label {
	position: relative;
}

.gotop .box label {
	position: relative;
	vertical-align: middle;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	background: var(--apaka-white);
	border-radius: 100%;
	margin: 20px;
	filter: drop-shadow(1px 1px 8px var(--shadow-color));
	cursor: pointer;
	display: none;
}

.gotop .box label[close] {
	display: flex;
	animation: gotpd .3s linear 1 forwards;
}

.gotop .box label[open] {
	display: flex;
	animation: gotp .3s linear 1;
}

@keyframes gotp {
	0% {
		transform: translateY(100%);
	}

	100% {
		transform: translateY(0%);
	}
}

@keyframes gotpd {
	100% {
		transform: translateY(100%);
	}

	0% {
		transform: translateY(0%);
	}
}

.gotop .box label:hover {
	background: linear-gradient(90deg, var(--apaka-favrite), var(--theme-primary));
	color: var(--apaka-white);
}

/* gotop code */

/* custome scrollbar code */
::-webkit-scrollbar {
	width: 5px;
	height: 5px;
	padding: 10px;
}

::-webkit-scrollbar-thumb {
	width: 3px;
	background: var(--apaka-black9);
	border-radius: 100px;
	cursor: pointer;
}

::-webkit-scrollbar-track {
	background: transparent;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:horizontal:hover {
	background: linear-gradient(45deg, var(--theme-primary), var(--apaka-favrite));
}

/* Handle on hover */
::-webkit-scrollbar-thumb:vertical:hover {
	background: linear-gradient(var(--theme-primary), var(--apaka-favrite));
}

/* custome scrollbar code */

/* customer rangebar */
input[type=range] {
	-webkit-appearance: none;
}

input::-webkit-slider-runnable-track {
	border: none;
	background: var(--apaka-bg);
	line-height: 1;
	height: 3px;
	border-radius: 100px;
}

input::-webkit-slider-thumb {
	height: 20px;
	width: 20px;
	border-radius: 100px;
	background: var(--theme-primary);
	-webkit-appearance: none;
	transform: translateY(-45%);
	border: 4px solid var(--apaka-white);
	box-shadow: 0 0 28px -8px var(--apaka-black);
	cursor: pointer;
}

input::-webkit-slider-thumb:hover {
	box-shadow: 0 0 28px -4px var(--apaka-black);
}

/* customer rangebar */

@media screen and (max-width:700px) {
	.section.sign-up {
		width: 97% !important;
		margin: 30px auto;
	}

	.col2grid,
	.col3grid,
	.col4grid {
		grid-template-columns: repeat(1, 1fr);
	}

	.btns {
		flex-flow: column;
		gap: 10px;
	}

	.btns>input[type="submit"],
	.btns>.btn {
		display: block;
		width: 100%;
	}
}

.profile-circle-card {
	border-radius: 100px;
	border: 1px solid var(--theme-border-color1);
}

.bold {
	font-weight: 500;
}

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

.btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding: 7px 10px;
	border-radius: 8px;
}