:root {
	--text-body: #1e293b;
	--basic-white: #fff;
	--neutral-400: #94a3b8;
	--neutral-600: #475569;
	--neutral-200: #e2e8f0;
	--neutral-300: #cbd5e1;
	--neutral-500: #64748b;
	--neutral-900: #0f172a;
	--status-info-100: #e0f2fe;
	--status-info-400: #38bdf8;
	--status-danger-50: #fff1f2;
	--status-danger-400: #fb7185;
	--status-danger-600: #e11d48;
	--text-placeholder: #94a3b8
}

@font-face {
	font-family: LoewNextArabic;
	src: url("../fonts/LoewNextArabic-Regular.woff2") format("woff2"), url("../fonts/LoewNextArabic-Regular.woff") format("woff"), url("../fonts/LoewNextArabic-Regular.ttf") format("truetype");
	font-weight: 300;
	font-style: normal;
	font-display: swap
}

@font-face {
	font-family: LoewNextArabic;
	src: url("../fonts/LoewNextArabic-Medium.woff2") format("woff2"), url("../fonts/LoewNextArabic-Medium.woff") format("woff"), url("../fonts/LoewNextArabic-Medium.ttf") format("truetype");
	font-weight: 500;
	font-style: normal;
	font-display: swap
}

@font-face {
	font-family: LoewNextArabic;
	src: url("../fonts/LoewNextArabic-Bold.woff2") format("woff2"), url("../fonts/LoewNextArabic-Bold.woff") format("woff"), url("../fonts/LoewNextArabic-Bold.ttf") format("truetype");
	font-weight: 700;
	font-style: normal;
	font-display: swap
}

@font-face {
	font-family: LoewNextArabic;
	src: url("../fonts/LoewNextArabic-ExtraBold.woff2") format("woff2"), url("../fonts/LoewNextArabic-ExtraBold.woff") format("woff"), url("../fonts/LoewNextArabic-ExtraBold.ttf") format("truetype");
	font-weight: 800;
	font-style: normal;
	font-display: swap
}

@font-face {
	font-family: LoewNextArabic;
	src: url("../fonts/LoewNextArabic-Black.woff2") format("woff2"), url("../fonts/LoewNextArabic-Black.woff") format("woff"), url("../fonts/LoewNextArabic-Black.ttf") format("truetype");
	font-weight: 900;
	font-style: normal;
	font-display: swap
}

body {
	direction: rtl;
	font-family: LoewNextArabic, sans-serif;
	background-color: #e2e8f0
}

.header-content {
	background-image: url("../images/background.jpg");
	height: 12.75rem;
	background-repeat: no-repeat;
	background-position: top;
	background-size: cover;
	box-shadow: 0 12px 20px -12px rgba(0, 0, 0, .12)
}

.header-content .overlay {
	border-bottom: 1px solid rgba(255, 255, 255, .75);
	background: linear-gradient(180deg, rgba(0, 0, 0, .75) 0, rgba(0, 0, 0, .2) 100%);
	backdrop-filter: blur(1.5px);
	box-shadow: 0 12px 20px -12px rgba(0, 0, 0, .12);
	/* padding: 3rem 1rem 1rem 1rem */
	padding: 24px 33px 0;
}

.header-content .content .image-container {
	width: 44px;
	height: 44px;
	background: rgba(255, 255, 255, .1);
	cursor: pointer
}

.header-content .content .image-container.menu {
	border: 1px solid rgba(255, 255, 255, .25)
}

.header-content .content .image-container:hover {
	background: rgba(255, 255, 255, .2)
}

.header-content .content .image-container .image {
	color: #fff
}

.header-content .logo {
	color: #fff;
	font-size: 25px;
	font-weight: 800
}

.profile-data {
	display: none;
	width: 206px;
	top: 81px;
	left: 87px;
	padding: 16px;
	border-radius: 8px;
	background: var(--basic-white, #fff);
	position: absolute;
	z-index: 1000;
	box-shadow: 0 0 40px 8px rgba(163, 163, 163, .25)
}

.profile-arrow {
	position: absolute;
	top: -5px;
	left: 19px
}

.profile-data .profile-name {
	padding-bottom: 15px;
	border-bottom: 1px solid #e2e8f0
}

.profile-data .profile-name .name {
	color: var(--text-body, #1e293b);
	margin-bottom: .5rem;
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: 100%
}

.profile-data .postion {
	color: var(--text-placeholder, #94a3b8);
	font-size: 12px;
	font-style: normal;
	font-weight: 300;
	line-height: 100%
}

.profile-data .profile-links {
	border-bottom: 1px solid #e2e8f0;
	padding-bottom: 10px
}

.profile-data .profile-links .links {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: var(--text-body, #1e293b);
	font-size: 11px;
	font-style: normal;
	font-weight: 500;
	line-height: 100%;
	padding: 5px 0
}

.profile-data .profile-links .links:hover {
	background: var(--secondary-light-purple-6, rgba(94, 26, 213, .06))
}

.profile-data .logout {
	color: var(--status-danger-600, #e11d48);
	margin-top: 10px;
	font-size: 11px;
	font-style: normal;
	font-weight: 500;
	line-height: 100%;
	padding: 10px 0;
	text-decoration: none;
	display: block
}

.profile-data .logout:hover a {
	background: var(--Status-Danger-50, #fff1f2)
}

.footer .card {
	margin-top: 24px;
	margin-bottom: 0;
}

.footer .card-body {
	padding: 32px
}

.footer .contact {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 32px
}

.contact .title {
	color: var(--Text-Body, #1e293b);
	font-size: 1rem;
	font-weight: 700;
	line-height: 24px;
	flex-grow: 2
}

.contact .contact-details {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	flex-grow: 1;
	gap: 24px;
	pointer-events: none
}

.contact .contact-details .support {
	display: flex;
	align-items: center;
	border-radius: 24px;
	border: 1px solid var(--Neutral-300, #cbd5e1);
	gap: 8px;
	padding: 4px 4px 4px 24px;
	pointer-events: fill;
	transition: .2s all ease-out
}

.contact-details .support .icon {
	border-radius: 24px;
	background: linear-gradient(270deg, #000062 -27.72%, #5e1ad5 91.54%);
	display: flex;
	justify-content: center;
	align-items: center;
	width: 36px;
	height: 36px
}

.contact-details .support .details {
	display: flex;
	flex-direction: column;
	align-items: flex-start
}

.support .details .title {
	color: var(--Text-Placeholder, #94a3b8);
	font-size: .625rem;
	font-weight: 500;
	line-height: 16px
}

.support .details .name {
	color: var(--Text-Body, #1e293b);
	font-size: .75rem;
	font-weight: 700;
	line-height: 22px;
	margin-top: -2px
}

.support .details .name span:hover {
	cursor: pointer;
	color: var(--secondary-dark-purple-100, #5e1ad5)
}

.support .details .suuport-code {
	display: flex;
	margin-top: -2px;
	gap: 4px
}

.details .suuport-code span {
	color: var(--Text-Body, #1e293b);
	font-size: .75rem;
	font-weight: 700;
	line-height: 22px
}

.details .suuport-code .phone:hover {
	cursor: pointer;
	color: var(--secondary-dark-purple-100, #5e1ad5)
}

.contact-details .support:hover {
	border-color: var(--secondary-dark-purple-50, #af8deb);
	box-shadow: 0 6px 16px 0 rgba(0, 0, 0, .04)
}

.contact-details .support.request:hover {
	cursor: pointer
}

.contact-details .support.request:hover .name {
	color: var(--secondary-dark-purple-100, #5e1ad5)
}

.contact-details:hover .support {
	opacity: .75
}

.contact-details:hover .support:hover {
	opacity: 1
}

.contact .contact-details .support.disabled {
	border: 1px solid var(--neutral-300, #cbd5e1) !important;
	box-shadow: none !important;
	cursor: default !important
}

.contact .contact-details .support.disabled .name {
	color: var(--Text-Placeholder, #94a3b8)
}

.contact .contact-details .support.disabled .icon {
	opacity: 50%
}

.contact .contact-details .support.disabled * {
	cursor: default !important
}

.footer-tooltip-container {
	position: relative;
	display: inline-block;
	line-height: 22px
}

.footer-tooltip-container .tooltip {
	visibility: hidden;
	background-color: #325168;
	color: #fff !important;
	text-align: center;
	border-radius: 6px;
	padding: 5px 14px;
	position: absolute;
	z-index: 1;
	bottom: 125%;
	left: 6%;
	opacity: 0;
	font-family: LoewNextArabic, sans-serif !important;
	font-weight: 500 !important;
	font-size: .75rem !important;
	width: max-content
}

.footer-tooltip-container .tooltip .arrow {
	position: absolute;
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid #325168;
	bottom: -4px;
	left: 50%;
	margin-left: -5px
}

.footer-tooltip-container:hover .tooltip {
	visibility: visible;
	opacity: 1
}

.contact-details .request .footer-tooltip-container .tooltip {
	left: -24%
}

@media (max-width:1399px) {
	.footer .contact .contact-details {
		gap: 16px
	}
}

@media (max-width:1288px) {
	.footer .contact {
		gap: 16px
	}

	.footer .contact .contact-details {
		flex: 1 1 100%
	}

	.contact .contact-details .support {
		flex: 1 1 auto
	}
}

@media (max-width:991px) {
	.footer .contact .contact-details {
		gap: 12px
	}

	.contact .contact-details .support {
		flex: 1 1 48%
	}
}

@media (max-width:767px) {
	.footer .contact .contact-details {
		gap: 12px
	}

	.contact .contact-details .support {
		flex: 1 1 100%
	}
}

@media (max-width:575px) {
	.footer .contact {
		flex-direction: column;
		align-items: flex-start
	}

	.footer .contact .contact-details {
		flex-direction: column;
		width: 100%;
		gap: 12px
	}

	.footer .card {
		width: 100%;
	}
}

@media (max-width:460px) {
	.email-sep {
		display: none
	}

	.email {
		display: block;
		line-height: 1
	}

	.first-email {
		margin: 8px 0 0
	}
}

.footer.empty-content .card {
	margin-top: 24px;
	margin-bottom: 0;
	position: fixed;
	bottom: 1rem;
	width: calc(100% - 4rem)
}

@media (max-width:575px) {
	.footer.empty-content .card {
		width: calc(100% - 2.2rem)
	}
}

.scroll-bar {
	height: calc(100vh - 140px);
	overflow-y: auto;
	overflow-x: hidden
}

.scroll-bar::-webkit-scrollbar {
	width: 6px
}

.scroll-bar::-webkit-scrollbar-track {
	border-radius: 12px;
	background-color: var(--neutral-200, #e2e8f0);
	border: 1px solid var(--neutral-200, #e2e8f0);
	background: var(--neutral-200, #e2e8f0)
}

.scroll-bar::-webkit-scrollbar-thumb {
	border-radius: 12px;
	background-color: var(--neutral-300, #cbd5e1)
}

.loader-wrapper,
.infinite-loader-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #fff;
	z-index: 9999
}

html[lang=ar] .toast {
	right: 0
}

.toast-title {
	font-weight: 700
}

.toast-message {
	-ms-word-wrap: break-word;
	word-wrap: break-word
}

.toast-message a,
.toast-message label {
	color: #fff
}

.toast-message a:hover {
	color: #ccc;
	text-decoration: none
}

.toast-close-button {
	position: relative;
	right: -.3em;
	top: -.3em;
	float: right;
	font-size: 20px;
	font-weight: 700;
	color: #fff;
	-webkit-text-shadow: 0 1px 0 #ffffff;
	text-shadow: 0 1px 0 #fff;
	opacity: .8
}

.toast-close-button:focus,
.toast-close-button:hover {
	color: #000;
	text-decoration: none;
	cursor: pointer;
	opacity: .4
}

button.toast-close-button {
	padding: 0;
	cursor: pointer;
	background: 0 0;
	border: 0;
	-webkit-appearance: none;
	appearance: none
}

.toast-top-center {
	top: 0;
	right: 0;
	width: 100%
}

.toast-bottom-center {
	bottom: 0;
	right: 0;
	width: 100%
}

.toast-top-full-width {
	top: 0;
	right: 0;
	width: 100%
}

.toast-bottom-full-width {
	bottom: 0;
	right: 0;
	width: 100%
}

.toast-top-left {
	top: 12px;
	left: 12px
}

.toast-top-right {
	top: 12px;
	right: 12px
}

.toast-bottom-right {
	right: 12px;
	bottom: 12px
}

.toast-bottom-left {
	bottom: 12px;
	left: 12px
}

#toast-container {
	position: fixed;
	z-index: 999999
}

#toast-container * {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box
}

#toast-container>div {
	position: relative;
	overflow: hidden;
	margin: 0 0 6px;
	padding: 15px 15px 15px 50px;
	width: 300px;
	-moz-border-radius: 3px 3px 3px 3px;
	-webkit-border-radius: 3px 3px 3px 3px;
	border-radius: 3px 3px 3px 3px;
	background-position: 15px center;
	background-repeat: no-repeat;
	-moz-box-shadow: 0 0 12px #999;
	-webkit-box-shadow: 0 0 12px #999;
	box-shadow: 0 0 12px #999;
	color: #fff;
	opacity: .8
}

#toast-container> :hover {
	-moz-box-shadow: 0 0 12px #000;
	-webkit-box-shadow: 0 0 12px #000;
	box-shadow: 0 0 12px #000;
	opacity: 1;
	cursor: pointer
}

#toast-container>.toast-info {
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=") !important
}

#toast-container>.toast-error {
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=") !important
}

#toast-container>.toast-success {
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==") !important
}

#toast-container>.toast-warning {
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=") !important
}

#toast-container.toast-bottom-center>div,
#toast-container.toast-top-center>div {
	width: 300px;
	margin: auto
}

#toast-container.toast-bottom-full-width>div,
#toast-container.toast-top-full-width>div {
	width: 96%;
	margin: auto
}

.toast {
	background-color: #030303;
	border-radius: 8px !important;
	z-index: 9999;
}

.toast-success {
	background-color: #51a351
}

.toast-error {
	background-color: #bd362f
}

.toast-info {
	background-color: #2f96b4
}

.toast-warning {
	background-color: #f89406
}

.toast-progress {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 4px;
	background-color: #000;
	opacity: .4
}

@media all and (max-width:240px) {
	#toast-container>div {
		padding: 8px 8px 8px 50px;
		width: 11em
	}

	#toast-container .toast-close-button {
		right: -.2em;
		top: -.2em
	}
}

@media all and (min-width:241px) and (max-width:480px) {
	#toast-container>div {
		padding: 8px 8px 8px 50px;
		width: 18em
	}

	#toast-container .toast-close-button {
		right: -.2em;
		top: -.2em
	}
}

@media all and (min-width:481px) and (max-width:768px) {
	#toast-container>div {
		padding: 15px 15px 15px 50px;
		width: 25em
	}
}

.cst-tooltip.footer-tooltip {
	margin: 8px 0 !important
}

.cst-tooltip .tooltip-inner {
	color: #fff !important;
	border-radius: 6px;
	padding: 5px 14px;
	font-family: LoewNextArabic, sans-serif !important;
	font-weight: 500 !important;
	font-size: .75rem !important
}

.btn-success {
	--bs-btn-color: #fff;
	--bs-btn-hover-color: #fff
}

.tooltip {
	--bs-tooltip-bg: #325168
}

.table thead tr td {
	background-color: transparent;
	color: #8080b1;
	font-size: 12px;
	font-weight: 700
}

.bd-link {
	text-decoration: none;
	color: var(--text-placeholder, #94a3b8)
}

input.form-control,
select {
	background-color: #fff
}

select:not(.is-invalid):hover,
.form-control:not(.is-invalid):hover {
	border-color: var(--neutral-300);
}

.form-control.is-invalid {
	background-image: none;
}

.bi-arrow-left {
	visibility: hidden;
	height: 15px;
	width: 52px;
	right: 37%;
	transition: all .3s ease-in
}

ul {
	padding-left: unset;
	padding-right: unset
}

ul .active {
	background: linear-gradient(270deg, #7f92ff -23.16%, #5e1ad5 106.52%);
	color: #fff
}

ul .active .unique {
	border-bottom: none
}

ul li {
	list-style: none;
	padding: 1rem 0;
	border-bottom: 1px solid #ccc;
	cursor: pointer;
	display: flex
}

.main-content {
	/* position: absolute; */
	width: 100%;
	height: 100%;
	/* top: 40%; */
	margin-top: -112px;
	/* padding: 3rem 2rem 1rem 2rem */
}

.main-content .card {
	box-shadow: 0 6px 16px 0 rgba(0, 0, 0, .04);
	border-radius: 8px;
	position: unset;
	opacity: 92%;
	backdrop-filter: blur(4px);
}

.btn {
	font-size: 13px;
	--bs-btn-padding-x: 1.4rem;
	font-weight: 400
}

.unique {
	width: 100%;
	padding-left: 1rem;
	border-bottom: 1px solid var(--neutral-200, #e2e8f0);
	padding-top: 1rem;
	padding-bottom: 1rem
}

.uniqness:hover {
	color: #5b03ac;
	background-color: #fff
}

.uniqness:hover .bi-arrow-left {
	visibility: visible;
	width: 20px
}

.back-icon {
	visibility: hidden;
	cursor: pointer;
	position: absolute;
	transition: all .3s ease-in;
	height: 20px;
	right: 5%;
	margin-top: 3px
}

.main-menu {
	display: inline;
	font-weight: 700;
	font-size: 14px
}

.about {
	display: none
}

.hovv:hover {
	color: #7f92ff;
	background-color: #fff !important
}

.hovv:hover .bi-chevron-left {
	stroke: #7f92ff
}

.inner-sidebar {
	border-top: 2px solid #e2e8f0;
	height: 100%;
	width: 0;
	position: fixed;
	z-index: 100;
	top: 122px;
	left: 0;
	overflow-x: hidden;
	transition: .5s;
	background-color: #fff;
	width: 258px;
	transform: translateX(-258px);
	transition: all .3s ease-out
}

.inner-sidebar ul li {
	margin: 0 1rem 0 0;
	font-size: 14px;
	font-weight: 600;
	color: #000;
	border-bottom: unset;
	padding-top: 1rem;
	padding-bottom: 1rem
}

.sidenav {
	background: linear-gradient(180deg, rgba(255, 255, 255, .9) 26.56%, rgba(241, 245, 249, .9) 100%);
	-webkit-backdrop-filter: blur(25px);
	backdrop-filter: blur(25px);
	height: 100%;
	position: fixed;
	z-index: 100;
	top: 0;
	left: 0;
	overflow-x: hidden;
	transition: .5s;
	width: 300px;
	transform: translateX(-300px);
	transition: all .3s ease-out;
}

.sidenav.nav-opened {
	box-shadow: 10px 0 40px 8.036px rgba(0, 0, 0, .2);
}

.sidenav .sidebar-content li {
	border-bottom: unset !important;
	padding: 0 !important
}

.sidenav .sidebar-header {
	padding: 1rem
}

.sidenav .sidebar-header .search {
	height: 34px
}

.sidenav .sidebar-header .search:focus {
	box-shadow: none
}

.sidenav .sidebar-header .search::-moz-placeholder {
	font-size: 12px
}

.sidenav .sidebar-header .search::placeholder {
	font-size: 12px
}

.sidenav .sidebar-header .header-text {
	text-align: center;
	margin-top: 15px;
	color: #94a3b8
}

.sidenav .sidebar-content .side-icon {
	padding: 14px .7rem;
	color: #b591d6
}

.sidenav .sidebar-content .side-icon.home {
	padding: 10px .7rem
}

.sidenav .sidebar-content .side-text {
	font-size: 14px;
	font-weight: 600
}

.sidenav .bi-chevron-left {
	height: 20px;
	width: 20px
}

.sidenav a {
	padding: 8px 8px 8px 32px;
	text-decoration: none;
	font-size: 25px;
	color: #818181;
	display: block;
	transition: .3s
}

.sidenav a:hover {
	color: #f1f1f1
}

.sidenav .closebtn {
	position: absolute;
	top: 0;
	right: 25px;
	font-size: 36px;
	margin-left: 50px
}

@media screen and (max-height:450px) {
	.sidenav {
		padding-top: 15px
	}

	.sidenav a {
		font-size: 18px
	}
}

.grid-layout {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	width: 100%;
	height: 100%
}

.title h5 {
	color: var(--text-body, #1e293b);
	font-size: 20px;
	font-weight: 800;
	line-height: 28px
}

.title span {
	color: var(--text-placeholder, #94a3b8);
	font-size: 12px;
	font-style: normal;
	font-weight: 300;
	line-height: 22px
}

.search input {
	border: none;
	padding: 0 8px;
	width: 100%
}

.search input:focus {
	outline: 0
}

.search img {
	width: 24px;
	height: 24px;
	flex-shrink: 0
}

.search input::placeholder {
	color: var(--text-placeholder, #94a3b8);
	font-size: 12px;
	font-weight: 700;
	line-height: normal;
	position: absolute;
	top: -1px
}

.sidebar-filter {
	height: 100vh;
	width: 300px;
	position: fixed !important;
	z-index: 1;
	overflow: auto;
	top: 0;
	left: 0;
	background: linear-gradient(180deg, rgba(255, 255, 255, .9) 26.56%, rgba(241, 245, 249, .9) 100%);
	box-shadow: 10px 0 40px 8.036px rgba(0, 0, 0, .2);
	backdrop-filter: blur(25px);
	transform: translateX(-300px);
	transition: all .2s ease-out
}

.sidebar-filter .filter-title {
	padding: 20px;
	display: flex;
	justify-content: space-between
}

.sidebar-filter .filter-controls {
	margin: 0 20px
}

.sidebar-filter .filter-title span {
	color: var(--text-placeholder, #94a3b8);
	font-size: 16px;
	font-weight: 700
}

.sidebar-filter .filter-title img {
	cursor: pointer
}

.filter-controls input,
.filter-controls select {
	border-radius: 10px;
	border: 1px solid var(--neutral-200, #e2e8f0);
	box-shadow: 0 0 2px 0 rgba(0, 0, 0, .1) inset;
	height: 40px;
	width: 100%;
	color: var(--text-body, #1e293b);
	font-size: 13px;
	font-weight: 700
}

.filter-controls label {
	color: var(--neutral-700, #334155);
	font-size: 12px;
	font-weight: 700
}

.filter-controls input:focus,
.filter-controls select:focus {
	outline: 0
}

.sidebar-filter .filter-controls .date {
	display: flex;
	align-items: center;
	border-radius: 10px;
	border: 1px solid var(--neutral-200, #e2e8f0);
	box-shadow: 0 0 2px 0 rgba(0, 0, 0, .1) inset
}

.sidebar-filter .filter-controls .date input {
	border: none;
	width: 85%;
	height: 40px;
	margin-right: 5px;
	color: var(--text-body, #1e293b);
	font-size: 12px;
	font-weight: 700
}

.sidebar-filter .filter-controls .date input:focus {
	outline: 0
}

.sidebar-filter .actions {
	position: absolute;
	bottom: 0;
	margin: 20px 35px
}

.actions .apply-filter {
	background-color: #5e1ad5;
	padding: 5px 20px;
	border: none;
	border-radius: 5px
}

.actions .apply-filter span {
	color: #fff;
	font-size: 12px
}

.sidebar-filter .reset {
	padding: 5px 20px;
	border: none;
	border-radius: 5px;
	background-color: transparent;
	color: #8653e0;
	font-size: 12px
}

.sidenav .sidebar-header .search-area {
	padding: 8px 16px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 4px;
	border: 1px solid #e2e8f0;
	opacity: .65;
	background: #fff;
	border-radius: 80px
}

.sidenav .sidebar-header .search-area .search {
	border: 0;
	flex-grow: 1;
	font-size: 12px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	padding: 0;
	box-shadow: none
}

.sidenav .sidebar-header .search-area .search:focus-visible {
	outline: 0
}

.sidenav .sidebar-header .search-area .search::placeholder {
	color: var(--text-placeholder, #94a3b8);
	font-size: 12px;
	font-style: normal;
	font-weight: 700;
	line-height: normal
}

.header-content-item-tooltip {
	display: flex;
	opacity: 0;
	border-radius: 6px;
	background: rgba(255, 255, 255, .1);
	padding: .125rem .5rem;
	position: absolute;
	right: 50%;
	translate: 50%;
	transition: all .4s ease-out;
	font-size: .625rem;
	font-style: normal;
	font-weight: 700;
	line-height: 1rem;
	white-space: nowrap
}

.item-tooltip:hover .header-content-item-tooltip {
	background: rgba(255, 255, 255, .2);
	opacity: 1;
	transform: translateY(40px);
	color: #fff
}

.active-parent,
.active-parent:hover {
	background-color: #7f92ff !important;
	opacity: 1 !important;
	color: #fff
}

.active-parent svg path,
.active-parent:hover svg path {
	stroke: white
}

.active-parent .side-icon,
.active-parent:hover .side-icon {
	opacity: 1 !important
}

.menu-inner-item-parent,
.menu-inner-item-parent:hover {
	margin: 0 !important;
	padding: 0 1rem 0 0;
	background: var(--neutral-100, #f1f5f9);
	color: var(--text-placeholder, #94a3b8) !important
}

.menu-inner-item-parent .unique,
.menu-inner-item-parent:hover .unique {
	border-bottom: unset
}

@media (max-width:575.98px) {
	.breadcrumb-title {
		font-size: 1rem !important;
		line-height: 20px
	}

	.title span {
		font-size: .625rem;
		color: var(--text-placeholder, #94a3b8) !important;
		font-weight: 500
	}

	.header-content .overlay {
		padding: 3rem 1.1rem 1rem 1.1rem
	}

	.header-content .logo img {
		width: 70px
	}
}

@media (min-width:430px) and (max-width:768px) {
	.inner-sidebar {
		top: 122px
	}
}

@media (max-width:430px) {
	.search {
		margin-right: unset !important
	}

	.search img {
		margin-left: 7px
	}
}

.breadcrumb-title {
	font-size: 20px;
	font-weight: 800;
	line-height: 28px
}

.header-title {
	font-size: 24px;
	font-weight: 700;
	line-height: 32px
}

.header-shortcuts {
	gap: .75rem
}

@media (max-width:576px) {
	.header-content {
		height: 115px
	}

	.header-content .logo img {
		width: auto;
		height: 54px
	}

	.main-content {
		top: 70px;
		padding: 0 1.1rem 1rem 1.1rem
	}
}

.pb-2 {
	cursor: pointer
}

input[type=date] {
	background: #fff url("../images/calendar.svg") 2% 50% no-repeat;
	display: flex;
	flex-direction: row-reverse;
	text-align: start
}

input[type=date]::-webkit-calendar-picker-indicator {
	opacity: 0;
	cursor: pointer
}

input::-webkit-inner-spin-button {
	color: red
}

.ui-datepicker-current-day .ui-state-default {
	border-radius: .25rem;
	background-color: #5e1ad5;
	color: #fff
}

#ui-datepicker-div {
	background-color: #fff !important;
	padding: .7rem .5rem !important;
	border-radius: 5px !important;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .06) inset, 0 3px 8px 0 rgba(0, 0, 0, .05)
}

.ui-state-default {
	color: #325168;
	text-decoration: none;
	font-size: 14px;
	font-style: normal;
	padding: 0 10px;
	line-height: 2rem
}

.ui-datepicker-month,
.ui-datepicker-year {
	background-color: #f0f4f7;
	border-radius: .5rem;
	transition: background-color .2s, border-color .4s;
	border-color: #e8eef3;
	color: #062a44;
	margin: 0 5px
}

.ui-datepicker-calendar thead tr {
	color: var(--neutral-500, #64748b);
	text-align: center;
	font-size: 10px;
	font-style: normal;
	font-weight: 400;
	line-height: 20px;
	border-bottom: 1px solid #e8eef3
}

.ui-datepicker-week-end::selection {
	background-color: #000
}

.ui-datepicker-prev {
	background: url("../images/chevron-right.svg") 48% 50%/22% no-repeat;
	cursor: pointer;
	filter: brightness(0) saturate(100%) invert(19%) sepia(100%) saturate(7252%) hue-rotate(265deg) brightness(84%) contrast(99%)
}

.ui-datepicker-prev span {
	visibility: hidden
}

.ui-datepicker-next span {
	visibility: hidden
}

.ui-datepicker-next {
	background: url("../images/chevron-left.svg") 48% 50%/22% no-repeat;
	cursor: pointer;
	filter: brightness(0) saturate(100%) invert(19%) sepia(100%) saturate(7252%) hue-rotate(265deg) brightness(84%) contrast(99%)
}

.ui-datepicker-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px
}

.ui-datepicker-title {
	position: absolute;
	left: 50%;
	right: 50%;
	display: flex;
	justify-content: center;
	font-size: 13px
}

.calender-image {
	position: absolute;
	top: 42px;
	left: 10px;
	pointer-events: none
}

input::placeholder {
	color: var(--neutral-400, #797c81);
	font-size: 11px;
	font-style: normal;
	line-height: 24px
}

input:focus {
	box-shadow: none
}

.form-control {
	border-radius: 8px;
	border: 1px solid var(--neutral-200, #e2e8f0);
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .06) inset, 0 3px 8px 0 rgba(0, 0, 0, .05);
	font-size: 13px
}

.form-control:not(textarea) {
	height: 2.625rem
}

.form-control.disabled {
	background: #f8fafc url("../images/calendar.svg") 2% 50% no-repeat
}

.form-control:focus {
	box-shadow: none
}

input[type=date] {
	font-size: 13px;
	font-weight: 700
}

.error {
	border: 1px solid var(--status-danger-600, #e11d48)
}

.error-msg {
	color: var(--status-danger-600, #e11d48);
	font-size: 12px;
	font-weight: 500
}

.form-switch {
	padding-right: unset;
	padding-left: unset
}

.check-radio {
	padding-right: unset !important;
	display: flex;
	justify-content: center;
	align-items: center
}

.check-radio .input-check {
	margin-left: 5px !important
}

.switch {
	position: relative;
	display: inline-block;
	width: 48px;
	height: 22px
}

.input-icon {
	position: absolute;
	top: 59%;
	left: 11px
}

.icon-text {
	padding-right: 10px;
	color: #666;
	font-size: 14px;
	font-weight: 700;
	line-height: 24px;
	top: 54%
}

textarea {
	width: 100%;
	display: flex
}

textarea::-moz-placeholder {
	color: var(--neutral-400, #797c81);
	font-size: 13px;
	font-style: normal;
	font-weight: 700;
	line-height: 24px
}

textarea::placeholder {
	color: var(--neutral-400, #797c81);
	font-size: 13px;
	font-style: normal;
	font-weight: 700;
	line-height: 24px
}

.error-icon {
	top: 24%
}

.form-check-label {
	color: var(--neutral-900, #0f172a);
	font-size: 13px;
	font-weight: 700;
	line-height: 24px;
	cursor: pointer
}

.switch-text {
	color: var(--text-placeholder, #94a3b8);
	font-size: 12px;
	font-style: normal;
	font-weight: 300 !important;
	line-height: 22px
}

.input-switch {
	display: flex;
	width: 42px !important;
	height: 22px;
	padding: 2px 22px 2px 2px;
	align-items: flex-start;
	gap: 10px
}

.line {
	height: 20px;
	left: 38px;
	border-right: 1px solid var(--neutral-200, #e2e8f0);
	background: 0 0;
	top: 42px
}

.icon-container {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-color: #007ab9;
	display: flex;
	align-items: center;
	justify-content: center
}

.alert {
	border-radius: 8px;
	padding: 12px !important
}

.alert .text {
	color: var(--text-body, #1e293b);
	font-size: 14px;
	font-weight: 700;
	line-height: 24px
}

.alert-success {
	border: 1px solid var(--status-success-600, #0d9488);
	background: var(--status-success-50, #f0fdfa)
}

.alert-info {
	border: 1px solid var(--status-info-400, #38bdf8);
	background: var(--status-info-100, #e0f2fe)
}

.alert-warning {
	border: 1px solid var(--status-warning-400, #f59e0b);
	background: var(--status-warning-50, #fef3c7)
}

.alert-danger {
	border: 1px solid var(--status-danger-400, #fb7185);
	background: var(--status-danger-50, #fff1f2)
}

.main-content .alert {
	font-size: 14px;
	font-weight: 600;
	padding: .7rem 1rem
}

.main-content .block {
	gap: 10px
}

.main-content form .icon-file {
	font-size: 1rem
}

.main-content form .input-file {
	text-align: center;
	width: 100%;
	border-radius: 8px;
	border: 1px dashed var(--Neutral-300, #CBD5E1);
	background: var(--secondary-dark-blue-6, #F0F0F6);
	display: flex;
	padding: 16px 8px;
	flex-direction: column;
	align-items: center;
	gap: 12px
}

.main-content form .file[type=file] {
	display: none
}

.main-content form .inputTag {
	cursor: pointer
}

.main-content form #imageName {
	color: green
}

.main-content form .images-container {
	background-color: #5b03ac
}

.main-content form .buttons-container {
	gap: 1rem
}

.main-content form .buttons-container .cancel {
	border: 1px solid var(--neutral-400, #94a3b8);
	color: #64748b;
	font-size: 14px;
	border-radius: 8px
}

.btn-action {
	padding: .7rem 2.5rem;
}

.main-content form .buttons-container .cancel:hover {
	color: #000;
	border-color: --neutral-600;
	background-color: var(--neutral-200)
}

form label {
	color: var(--text-body, #1e293b);
	font-size: 12px;
	font-weight: 700;
	line-height: 22px
}

form .text-muted {
	color: #94a3b8 !important;
	margin-right: 3px;
	font-size: 12px;
	font-weight: 400;
	line-height: 22px
}

form .calender {
	direction: ltr
}

form .input-link {
	position: absolute;
	top: 59%;
	right: 11px
}

.btn-primary {
	border-radius: 8px;
	border: none;
	display: flex;
	line-height: unset;
	align-items: center;
	font-size: 14px
}

.btn-outline-primary:hover svg {
	filter: brightness(100)
}

.gray {
	color: var(--text-placeholder, #94a3b8);
	font-size: 10px;
	font-weight: 300
}

.black {
	color: var(--text-body, #1e293b);
	font-size: 10px;
	font-weight: 700
}

.unique {
	width: 100%;
	padding-left: 1rem;
	border-bottom: 1px solid var(--neutral-200, #e2e8f0);
	padding-top: 1rem;
	padding-bottom: 1rem
}

.displayed-images {
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	align-items: center;
	gap: 10px
}

.displayed-images #attatchment-btn-container {
	border: 1px dashed #5b03ac;
	width: 24px;
	height: 24px;
	border-radius: 12px;
	display: none;
	justify-content: center;
	align-items: center;
	cursor: pointer
}

.displayed-images #attatchment-btn-container p {
	margin: 3px 0 6px 0;
	padding: 0
}

.displayed-images #attatchment-btn-container .file[type=file] {
	display: none
}

.img-thumbs {
	border-radius: .25rem;
	margin: 1.5rem 0
}

.img-thumbs .wrapper-thumb {
	position: relative;
	display: inline-block;
	margin-left: 3rem
}

.img-thumbs .wrapper-thumb .img-preview-thumb {
	border-radius: 10px;
	height: 90px;
	width: 103px
}

.img-thumbs .wrapper-thumb .remove-btn {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: .7rem;
	top: -5px;
	left: -23px;
	height: 20px;
	width: 17.78px;
	padding: 2.22px;
	background: #f1f5f9;
	border-radius: 3.33px;
	font-weight: 700;
	cursor: pointer
}

.img-thumbs-hidden {
	display: none
}

section.list-view-section .card-actions {
	padding-bottom: 16px
}

section.list-view-section .card-actions .form-check {
	padding-right: 2.75rem
}

section.list-view-section .card-actions .form-check-input {
	border-color: #1e293b !important;
	border-radius: 4px;
	background-color: transparent
}

.highlight {
	color: var(--text-body, #1e293b);
	font-size: 10px;
	font-style: normal;
	font-weight: 700;
	line-height: 16px
}

section.list-view-section .card {
	border-radius: 12px;
	border: 0;
	border-bottom: 1px solid #e2e8f0;
	background: #fff;
	box-shadow: 0 6px 16px 0 rgba(0, 0, 0, .04);
	padding: 12px;
	margin-bottom: 16px
}

section.list-view-section .card:hover {
	background-color: #f1f9ff
}

section.list-view-section .card-1 .card-body .icon-title span.card-title {
	color: #1e293b;
	font-size: 12px;
	font-weight: 700;
	padding-right: 8px
}

section.list-view-section .card-1 .card-body p.card-text {
	color: #94a3b8;
	font-size: 12px;
	font-weight: 300;
	padding-right: 42px
}

section.list-view-section .card-1 .card-body p.date {
	color: #94a3b8;
	font-size: 10px;
	font-weight: 500;
	display: flex;
	justify-content: end
}

section.list-view-section .card-2 .card-body .icon-title span.card-title {
	color: #1e293b;
	font-size: 12px;
	font-weight: 700;
	padding-right: 8px;
	opacity: .5
}

section.list-view-section .card-2 .card-body p.card-text {
	color: #94a3b8;
	font-size: 12px;
	font-weight: 300;
	padding-right: 42px;
	opacity: .5
}

section.list-view-section .card-2 .card-body p.date {
	color: #94a3b8;
	font-size: 10px;
	font-weight: 500;
	opacity: .5;
	display: flex;
	justify-content: end
}

section.QA-accordion .card {
	padding: 24px
}

section.QA-accordion .accordion-item {
	border: 0
}

section.QA-accordion .accordion-item .accordion-body {
	padding: 28px 32px
}

section.QA-accordion .accordion-item .accordion-card {
	padding: 24px;
	border-radius: 12px;
	background: #f0f0f6;
	margin-bottom: 16px
}

section.QA-accordion .accordion-item .accordion-body .accordion-card .ans {
	margin-top: 16px
}

section.QA-accordion .accordion-item .accordion-body .accordion-card .ans .answers-list {
	margin-top: 8px
}

section.list-view-section .card-actions .form-check-input:focus {
	box-shadow: none
}

section.list-view-section .card-actions .form-check-input[type=checkbox]:checked {
	border-color: #5b03ac !important;
	background-color: #5b03ac
}

.QA-title {
	color: #334155;
	font-size: 12px;
	font-weight: 700
}

.QA-accordion .form-control {
	margin-left: 8px;
	height: 40px;
	border-radius: 8px;
	border: 1px solid #e2e8f0;
	background: #fff;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .06) inset, 0 3px 8px 0 rgba(0, 0, 0, .05);
	font-size: 12px;
	font-style: normal;
	font-weight: 700
}

.QA-accordion .form-check-input[type=radio] {
	border: 1px solid #64748b;
	width: 20px;
	height: 20px;
	background-color: transparent
}

.QA-accordion .delete-icon {
	border-radius: 8px;
	border: 1px solid #e2e8f0;
	background: #fff;
	padding: 8px 12px
}

.QA-accordion .new-ans-btn {
	color: #5e1ad5;
	text-align: center;
	font-size: 14px;
	font-weight: 400;
	padding: 8px 16px;
	margin: 0 25px
}

.QA-accordion .new-ans-btn span {
	margin-right: 8px
}

.new-qus-btn {
	border-radius: 8px;
	border: 1px solid #5e1ad5;
	padding: 8px 16px;
	background: #fff
}

.QA-accordion .new-qus-btn span {
	color: #5e1ad5;
	text-align: center;
	font-size: 14px;
	font-style: normal;
	font-weight: 500
}

.QA-accordion .actions-btn span {
	margin-left: 16px
}

.QA-accordion .actions-btn .btn-cancel {
	border-radius: 8px;
	border: 1px solid #94a3b8;
	padding: 16px 48px;
	background: #fff;
	color: var(--neutral-500, #64748b);
	text-align: center;
	font-size: 16px;
	font-weight: 500
}

.QA-accordion .actions-btn .btn-cancel:hover {
	color: #000;
	border-color: --neutral-600;
	background-color: var(--neutral-200)
}

.QA-accordion .actions-btn .btn-draft {
	border-radius: 8px;
	border: 1px solid #5e1ad5;
	background: #fff;
	padding: 16px 24px;
	color: #5e1ad5;
	text-align: center;
	font-size: 16px;
	font-weight: 700
}

.QA-accordion .actions-btn .btn-submit {
	border-radius: 8px;
	background: #5e1ad5;
	padding: 16px 24px;
	color: #fff;
	border: 0;
	font-size: 16px;
	font-weight: 700
}

.QA-accordion .accordion-button {
	padding: 0
}

.QA-accordion .accordion-button span {
	margin-right: 8px;
	color: #1e293b;
	font-size: 16px;
	font-style: normal;
	font-weight: 700
}

.QA-accordion .accordion-button:focus {
	border-color: none;
	box-shadow: none
}

.QA-accordion .form-check-input:focus {
	box-shadow: none
}

.QA-accordion .accordion-button:not(.collapsed) {
	background: 0 0;
	color: #1e293b;
	box-shadow: none
}

.QA-accordion .accordion-button::after {
	margin-left: 0;
	margin-right: auto
}

@media screen and (max-width:450px) {
	section.QA-accordion .card {
		padding: 24px 16px
	}

	section.QA-accordion .accordion-item .accordion-body {
		padding: 0;
		padding-top: 24px
	}

	section.QA-accordion .accordion-item .accordion-card {
		padding: 24px 16px
	}

	.QA-title {
		margin-bottom: 6px
	}

	section.QA-accordion .accordion-item .accordion-body .accordion-card .ans .answers-items {
		width: 100%
	}

	section.QA-accordion .accordion-item .accordion-body .accordion-card .qus .qus-input .form-control {
		height: 137px;
		padding: 40px 12px
	}
}

section.cards-section {
	padding-top: 80px
}

section.cards-section .row {
	padding-bottom: 32px
}

section.cards-section h1 {
	color: #1e293b;
	font-size: 24px;
	font-weight: 700
}

section.cards-section .card {
	padding: 24px 16px;
	border-radius: 10.08px;
	border: 0 solid #9fadff;
	background: #fff;
	box-shadow: 0 6px 16px 0 rgba(0, 0, 0, .04);
	text-align: center
}

section.cards-section .card .card-img-top {
	width: 100%;
	height: 48px;
	margin: 0 auto;
	margin-bottom: 12px
}

section.cards-section .card .card-title {
	color: #1e293b;
	font-size: 14px;
	font-weight: 700;
	margin-bottom: 12px
}

section.cards-section .card .card-text {
	color: #1e293b;
	font-size: 12px;
	font-style: normal;
	font-weight: 500;
	margin-bottom: 12px
}

section.cards-section .card .card-body .date-title {
	color: #94a3b8;
	font-size: 13px;
	font-style: normal;
	font-weight: 700;
	margin-bottom: 0
}

section.cards-section .card.cards {
	border-radius: 12px;
	margin-top: 32px;
	padding: 32px
}

section.cards-section .row.wrapper {
	border-radius: 12px;
	background: #f0f0f6;
	padding: 16px 4px
}

section.forms-accordion {
	padding-top: 80px
}

section.forms-accordion h1 {
	color: #1e293b;
	font-size: 24px;
	font-style: normal;
	font-weight: 700
}

section.forms-accordion .accordion-item {
	border-radius: 12px;
	border: 1px solid #e2e8f0;
	box-shadow: 0 6px 16px 0 rgba(0, 0, 0, .04)
}

section.forms-accordion .accordion-button {
	border-radius: 12px !important
}

section.forms-accordion .accordion-button::after {
	margin-left: 0;
	margin-right: auto
}

section.forms-accordion .accordion-button:not(.collapsed) {
	color: unset;
	background-color: unset;
	box-shadow: unset
}

section.forms-accordion .accordion-button:focus {
	border-color: unset;
	box-shadow: unset
}

section.forms-accordion .accordion-body {
	padding: 16px 32px 32px 32px
}

section.forms-accordion .accordion-body label {
	color: #1e293b;
	font-size: 12px;
	font-style: normal;
	font-weight: 700;
	margin-bottom: 6px
}

section.forms-accordion .accordion-body input[readonly] {
	color: #666;
	font-size: 13px;
	padding: 12px;
	font-style: normal;
	font-weight: 700;
	border-radius: 8px;
	border: 1px solid #e2e8f0;
	background: #f8fafc;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .06) inset, 0 3px 8px 0 rgba(0, 0, 0, .05)
}

section.forms-accordion .accordion-button::after {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url(../images/chevron-up.svg);
	transform: rotate(180deg)
}

section.forms-accordion .accordion-button:not(.collapsed)::after {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url(../images/chevron-down.svg)
}

#tabs .my-task,
#tabs .task-details {
	width: 105%;
	display: flex;
	justify-content: center;
	white-space: nowrap;
	position: relative;
	overflow-x: scroll;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	text-align: center
}

#tabs .my-task {
	display: flex;
	justify-content: center
}

hr {
	color: #80808087;
	margin: 27px 0
}

#tabs .my-task .tab-view,
#tabs .task-details .tab-view {
	display: inline-block;
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 10px 15px;
	border-radius: 35px;
	height: 100%;
	width: fit-content;
	margin: 0 8px;
	cursor: pointer;
	font-weight: 700
}

#tabs .my-task .tab-view-active,
#tabs .task-details .tab-view-active {
	background-color: rgb(255 255 255)
}

.tab-view img {
	margin-left: 8px !important
}

#tabs .my-task .tab-view-active label {
	font-size: 14px;
	color: var(--text-body, #1e293b);
	text-align: center
}

#tabs .task-details .tab-view label {
	color: var(--text-body, #1e293b);
	text-align: center;
	font-size: 12px
}

#tabs .my-task .tab-view-active label span,
#tabs .task-details .tab-view-active label span {
	color: #5f1ad5
}

#tabs .my-task .tab-view-inActive,
#tabs .task-details .tab-view-inActive {
	background-color: rgb(255 255 255 / 40%)
}

#tabs .my-task .tab-view-inActive label {
	color: #1e293b80;
	font-size: 14px;
	text-align: center
}

#tabs .task-details .tab-view-inActive label {
	color: #1e293b80;
	font-size: 12px;
	text-align: center;
	cursor: pointer
}

#tabs .my-task .tab-view-inActive label span,
#tabs .task-details .tab-view-inActive label span {
	color: #5f1ad563
}

#tabs .my-task::-webkit-scrollbar,
#tabs .task-details::-webkit-scrollbar {
	display: none
}

.image-inactive {
	opacity: .6
}

#tabs .task-details {
	margin-bottom: 24px
}

#tabs .task-details .tab-view {
	padding: 8px 12px;
	font-size: 14px;
	font-weight: 700
}

.task-details .tab-view img {
	height: 20px
}

#tabs .card {
	height: 161px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 12px;
	border: 1px solid var(--neutral-200, #e2e8f0);
	background: var(--basic-white, #fff);
	box-shadow: 0 6px 16px 0 rgba(0, 0, 0, .04)
}

#tabs .card h5 {
	font-size: 18px;
	color: #000
}

.title .sign {
	margin: 0 10px
}

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

.unid .search {
	border-radius: 5rem;
	background: var(--basic-white, #fff) !important;
	box-shadow: 0 2px 5px #0000001a inset !important;
	font-weight: 700;
	font-size: .75rem;
	padding: 16px 16px 16px 12px;
	width: 285px;
	height: 48px;
	border: 1px solid var(--neutral-200, #e2e8f0)
}

@media (max-width:991px) {
	.unid .search {
		width: 100%;
		margin-top: 8px
	}

	.btn-filter-action {
		margin-top: 8px
	}
}

.btn-filter-action {
	border: 1px solid var(--Neutral-200, #e2e8f0);
	border-radius: 80px;
	font-size: .75rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	padding: 12px 16px;
	color: var(--neutral-500, #64748b)
}

.btn-filter-action span {
	font-size: 12px
}

.btn-filter-action .icon-filter {
	font-size: 1.4rem;
	line-height: 0
}

.btn-filter-action:hover {
	color: #000;
	background-color: #e6ebef;
	border-color: #e6ebef
}

.grid-layout button {
	padding: 12px 15px;
	border-radius: 25px;
	background-color: #fff;
	font-weight: 700;
	font-size: 14px;
	border: 1px solid #e2e8f0;
	display: flex
}

.filtered {
	background-color: #fff;
	background-clip: border-box;
	margin: 0 5px;
	padding: 2px 10px;
	border-radius: 15px;
	border-radius: 80px;
	border: 1px solid var(--neutral-200, #e2e8f0);
	font-size: 11px
}

.filtered-name {
	color: #5e1ad5 !important
}

.text-bold {
	color: var(--text-body, #1e293b);
	font-size: 11px;
	font-style: normal;
	font-weight: 700;
	line-height: normal
}

.table> :not(caption)>*>* {
	padding: 1rem .5rem 1rem 2rem !important;
	text-align: right
}

.table> :not(:last-child)> :last-child>* {
	text-align: right
}

.pe-4 {
	text-align: center !important
}

table .actions {
	text-align: end !important
}

table thead .action {
	padding-right: 3.5rem !important
}

.table-layout {
	background-color: #f0f0f6;
	margin: 25px;
	border-radius: 15px;
	padding: 1rem 1rem
}

thead tr {
	text-align: center
}

.table .action {
	text-align: center !important
}

.table tbody tr {
	position: relative;
	/* z-index: 1; */
	text-align: center
}

.table tbody tr:hover {
	background-color: #f1f9ff
}

.table tbody tr::after {
	content: "";
	position: absolute;
	right: 1.5%;
	bottom: 0;
	width: 96%;
	border-bottom: 1px solid #e2e8f0 !important
}

tbody,
td,
tfoot,
th,
thead,
tr {
	border-style: none
}

.table thead {
	font-size: 12px;
	color: var(--primary-50, #8080b1)
}

.table tbody {
	color: var(--text-body, #1e293b);
	font-size: 12px;
	font-weight: 700;
	border-radius: 10px;
	line-height: 160%;
	background-clip: border-box;
	background-color: #fff;
	box-shadow: 0 0 0 1px var(--Neutral-200, #e2e8f0)
}

.table table {
	margin: auto;
	border-collapse: separate;
	border-spacing: 0
}

.table tbody tr:first-child td:first-child {
	border-top-right-radius: 10px
}

.table tbody tr:last-child td:first-child {
	border-bottom-right-radius: 10px
}

.table tbody tr:first-child td:last-child {
	border-top-left-radius: 10px
}

.table tbody tr:last-child td:last-child {
	border-bottom-left-radius: 10px
}

.table .action-column {
	padding: 1rem .5rem 1rem 0
}

.table .actions-dots {
	position: relative;
}

.table .actions-dots .dots {
	border-radius: 20px;
	background: var(--neutral-100, #f1f5f9);
	padding: 0px;
	width: 40px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	color: #0f172a;
	border: 0;
	cursor: pointer;
}

.table .actions-dots-items {
	padding: 8px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	border-radius: 12px;
	box-shadow: 0px 4px 6px -2px rgba(0, 0, 0, .05), 0px 4px 15px -3px rgba(0, 0, 0, .1);
	background-color: #fff;
	position: absolute;
	top: 0px;
	left: 100%;
	position: absolute;
	z-index: 10;
}

@media (max-width:575.98px) {
	.table .actions-dots-items {
		top: 10px;
		left: 10%;
	}
}

.table .actions-dots-items.opened {
	display: flex;

}

.table .actions-dots-items.closed {
	display: none;

}

.table .actions-dots-items .action-dots-item {
	font-size: .75rem;
	font-weight: 700;
	line-height: 160%;
	padding: 4px 8px;
	display: flex;
	align-items: center;
	border: none;
	outline: none;
	background-color: transparent;
	box-shadow: none;
	min-width: 160px;
}

.pager {
	background-color: #fff;
	width: 100%;
	padding: 12px 16px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-radius: 10px;
	margin-top: 16px
}

.pagination {
	margin: 0;
	color: var(--neutral-500, #64748b);
	font-size: 12px;
	font-weight: 700
}

.pagination li {
	padding: 0;
	border-bottom: none;
	margin: 0 10px
}

.pagination li:focus {
	color: #fff
}

.active-page {
	background-color: #8653e0;
	padding: 2px 5px;
	color: #fff;
	border-radius: 5px;
	text-decoration: none
}

.page-count span {
	color: var(--neutral-500, #64748b);
	font-size: 11px;
	font-weight: 700
}

.page-count select {
	border-radius: 12px;
	border: 1px solid var(--neutral-200, #e2e8f0);
	background: var(--basic-white, #fff);
	padding: 6px 12px;
	color: var(--neutral-500, #64748b);
	font-size: 11px;
	margin-right: 5px;
	font-weight: 700;
	appearance: none;
	background-image: url("../images/arrow-ios-down.svg");
	background-size: 24px;
	background-position: left 6px center;
	background-repeat: no-repeat;
	width: 70px;
	height: 30px;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .06) inset, 0 3px 8px 0 rgba(0, 0, 0, .05)
}

.active-action {
	padding: 8px 12px !important;
	border-radius: 8px;
	border: 1px solid var(--neutral-200, #e2e8f0);
	font-size: 1.25rem !important;
	line-height: 16px
}

.active-action:hover {
	color: #fff;
}

.inactive-action {
	padding: 5px;
	opacity: .2
}

.dot {
	height: 10px;
	width: 10px;
	background: var(--neutral-300, #cbd5e1);
	border-radius: 50%;
	display: inline-block
}

.dot-active {
	height: 10px;
	width: 10px;
	background: var(--status-success-400, #2dd4bf);
	border-radius: 50%;
	display: inline-block
}

.btn-add {
	margin: 25px 25px 0;
	border-radius: 8px;
	color: #ffff;
	background: var(--secondary-dark-purple-100, #5e1ad5);
	display: flex;
	padding: 8px 16px;
	width: fit-content;
	align-items: end;
	border: #faebd7
}

.btn-add span {
	font-size: 12px;
	font-weight: 700;
	line-height: 22px
}

.table-layout.form-switch {
	padding-left: 0;
	display: flex;
	align-items: center;
	justify-content: center
}

.table-layout.form-switch input {
	padding: 7px 14px
}

.table-layout.form-check-input:checked {
	background-color: #2dd4bf;
	border-color: #cbd5e1
}

.table-layout.form-check-label {
	margin: 0 40px
}

.readonly {
	color: var(--text-placeholder, #94a3b8)
}

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

.switch-layout .form-check-input {
	width: 42px !important;
	height: 20px
}

.switch-layout .form-check-input:checked {
	background-color: var(--status-success-400, #2dd4bf);
	border-radius: 26.667px;
	border: .667px solid var(--neutral-300, #cbd5e1)
}

.pendding {
	display: flex;
	flex-wrap: wrap;
	background: var(--secondary-light-blue-100, #00d0ff);
	color: #fff;
	justify-content: center;
	align-items: center;
	padding: 4px;
	width: 120px;
	border-radius: 4px;
	text-align: center;
	font-size: 11px
}

.reject {
	display: flex;
	justify-content: center;
	background: var(--status-danger-600, #e11d48);
	color: #fff;
	align-items: center;
	border-radius: 4px;
	text-align: center;
	padding: 4px;
	font-size: 11px;
	width: 120px
}

.accept {
	justify-content: center;
	background: var(--status-success-600, #0d9488);
	color: #fff;
	border-radius: 4px;
	font-size: 11px;
	padding: 4px;
	display: flex;
	align-items: center;
	width: 120px
}

@media (min-width:769px) and (max-width:1200px) {
	.card-view {
		display: flex;
		border-bottom: 1px solid #f8f8f8;
		padding: 5px 0;
		font-size: 12px;
		align-items: center
	}

	.card-view span {
		margin: 0 15px
	}
}

@media (max-width:768px) {
	.card-view {
		display: grid;
		border-bottom: 1px solid #f8f8f8;
		padding: 12px 0
	}

	@media (max-width:896px) {
		#tabs .my-task {
			display: flex;
			justify-content: normal
		}
	}
}

@media (max-width:1400px) {
	.tabs-scroll {
		justify-content: start !important;
	}
}

@media (max-width:1199px) {
	.tabs-scroll {
		justify-content: start
	}

	#tabs .task-details {
		justify-content: start
	}
}

.sidebar-filter-backdrop.nav-opened {
	z-index: 1;
	width: 100%;
	height: 100vh;
	position: absolute;
	top: 0;
	left: 0;
	border: 0
}

.filter-controls .calender-image {
	position: absolute;
	top: 48px;
	left: 10px
}

@media (min-width:576px) {
	.flex-grow-sm-0 {
		flex-grow: 0 !important
	}

	.flex-gap-sm-6 {
		gap: 1.5rem !important
	}
}

.flex-gap-2 {
	gap: .5rem !important
}

.flex-gap-6 {
	gap: 1.5rem !important
}

.flex-gap-8 {
	gap: 2rem !important
}

.padding-x-12 {
	padding-left: 3rem !important;
	padding-right: 3rem !important
}

.form-check-input[type=radio] {
	width: 1.25rem;
	height: 1.25rem;
	border-color: var(--neutral-500);
	margin: 0
}

.btn-modal {
	border-radius: .5rem;
	text-align: center;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	padding: .7rem 1.4rem
}

.btn-outline-cancel {
	color: var(--neutral-600);
	border: 1px solid var(--neutral-400)
}

.btn-outline-cancel:hover {
	color: #000;
	border-color: --neutral-600;
	background-color: var(--neutral-200)
}

@media (max-width:575.98px) {
	.modal {
		padding-right: 0 !important;
		padding-left: 0 !important;
		width: 95%
	}

	.profile-data {
		top: 58px;
		left: 72px
	}
}

.modal-content {
	padding: 2.5rem;
	border-radius: 1.25rem
}

@media (max-width:575.98px) {
	.modal-content {
		padding-right: 1.5rem;
		padding-left: 1.5rem
	}
}

.modal-header {
	display: flex;
	justify-content: center;
	padding: 0;
	margin-bottom: 1rem;
	border: 0
}

.modal-header .modal-title {
	color: var(--text-body);
	font-size: 1.25rem;
	font-style: normal;
	font-weight: 800
}

.modal-body {
	margin-bottom: 1.5rem
}

.modal-footer {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	padding: 0;
	border: 0;
	gap: 1rem;
	text-wrap: nowrap
}

.modal-footer>* {
	margin: 0
}

.modal-contains-fields .modal-body {
	padding: 1.25rem
}

@media (max-width:575.98px) {
	.modal-contains-fields .modal-body {
		padding-left: 0;
		padding-right: 0
	}
}

.modal-contains-fields .modal-body .col-12:not(:last-child) {
	margin-bottom: 1rem
}

.modal-contains-fields .modal-body .col-6:not(:last-child) {
	margin-bottom: 1rem
}

.modal-contains-fields .modal-body select {
	text-wrap: wrap
}

.modal-contains-fields .modal-body label {
	color: var(--neutral-700, #334155);
	margin-bottom: 5px;
	font-size: 12px;
	font-style: normal;
	font-weight: 700;
	line-height: 22px
}

.modal-contains-fields .modal-body .radio-label {
	color: var(--neutral-900);
	font-size: .8125rem;
	font-style: normal;
	font-weight: 700
}

.modal-contains-fields .modal-body .form-control {
	border-radius: 8px !important;
	border: 1px solid var(--neutral-200, #e2e8f0);
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .06) inset, 0 3px 8px 0 rgba(0, 0, 0, .05);
	height: 2.5rem
}

.modal-contains-fields .modal-body input {
	color: #666;
	font-size: 13px;
	font-style: normal;
	font-weight: 700;
	line-height: 24px
}

@media (max-width:575.98px) {
	.modal-contains-fields .modal-footer .btn-modal {
		font-weight: 500;
		flex-grow: 1
	}

	.modal-contains-fields .modal-footer .btn-modal.btn-outline-cancel {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
		flex-grow: 0
	}
}

@media (min-width:576px) {
	.modal-contains-fields .modal-footer .btn-modal {
		flex-grow: 0
	}
}

.confirmation-modal .modal-header-with-image {
	display: flex;
	flex-direction: column;
	gap: 1.5rem
}

.confirmation-modal .modal-body {
	padding: 0
}

.confirmation-modal .modal-body p {
	text-align: center;
	font-size: .875rem;
	font-style: normal;
	font-weight: 700;
	margin: 0;
	padding: 0
}

.confirmation-modal .modal-body .message {
	display: flex;
	align-items: start;
	margin-top: 1rem;
	padding: .75rem;
	gap: .625rem;
	border-radius: .5rem;
	border: none
}

.confirmation-modal .modal-body .message-placeholder {
	justify-content: center
}

.confirmation-modal .modal-body .message-info {
	border: 1px solid var(--status-info-400);
	background: var(--status-info-100)
}

.confirmation-modal .modal-body .message-danger {
	border: 1px solid var(--status-danger-400);
	background: var(--status-danger-50)
}

.confirmation-modal .modal-body .message img {
	width: 1.5rem;
	height: 1.5rem
}

.confirmation-modal .modal-body .message p {
	text-align: start;
	font-size: .75rem;
	font-style: normal;
	font-weight: 700
}

.confirmation-modal .modal-body .message-info p {
	color: var(--text-body)
}

.confirmation-modal .modal-body .message-danger p {
	color: var(--status-danger-600)
}

.confirmation-modal .modal-body .message-placeholder p {
	color: var(--text-placeholder);
	text-align: center;
	font-weight: 300 !important
}

.confirmation-modal .modal-body .evaluation {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	padding-bottom: 1rem;
	border-top: 1px solid var(--neutral-200)
}

.confirmation-modal .modal-body .evaluation .evaluation-title {
	display: flex;
	justify-content: center;
	color: var(--text-body);
	font-size: 1rem;
	font-style: normal;
	font-weight: 700
}

.confirmation-modal .modal-body .evaluation .evaluation-placeholder {
	display: flex;
	justify-content: center;
	color: var(--text-placeholder);
	font-size: .875rem;
	font-style: normal;
	font-weight: 500
}

.confirmation-modal .modal-body .evaluation .evaluation-stars {
	display: flex;
	justify-content: space-between;
	padding: 0 2rem
}

.mandate-table .custom-check {
	width: 19px;
	height: 19px;
	border-radius: 6px;
	border: 1px solid var(--Neutral-500, #64748b)
}

.mandate-table span {
	padding-top: 2px;
	display: inline-block
}

@media (max-width:575.98px) {
	.confirmation-modal .modal-footer .btn-modal {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
		flex-grow: 1
	}

	.confirmation-modal .modal-footer .btn-outline-cancel {
		flex-grow: 0
	}

	section.forms-accordion .accordion-body {
		padding: 16px 27px 32px 29px
	}

	.header-content .logo img {
		width: 70px
	}
}

@media (min-width:576px) {
	.confirmation-modal .modal-footer .btn-modal {
		flex-grow: 0
	}
}

@media (min-width:430px) and (max-width:768px) {
	.inner-sidebar {
		top: 122px
	}
}

@media (max-width:430px) {
	.search {
		margin-right: unset !important
	}

	.filter {
		display: none
	}

	.unid {
		display: flex;
		align-items: baseline
	}

	.search img {
		margin-left: 7px
	}

	.card-view .view-text {
		font-size: 11px
	}
}

.table-material tbody>tr .column-title {
	font-weight: 700;
	min-width: 200px;
	display: none;
	color: #8080b1;
	margin-bottom: 4px
}

@media (max-width:1200px) {
	.table-material {
		display: flex;
		flex-direction: column;
		width: 100%
	}

	.table-material thead {
		display: none
	}

	.table-material tbody {
		display: flex;
		flex-direction: column;
		width: 100%;
		background: 0 0
	}

	.table-material tbody>tr {
		display: flex;
		flex-direction: column;
		width: 100%;
		background: #fff;
		border-radius: 16px;
		margin: 10px 0;
		padding: 20px
	}

	.table-material tbody>tr:hover {
		background-color: #fff
	}

	.table-material tbody>tr>td {
		display: flex;
		padding: 12px 0 !important
	}

	.table-material tbody>tr>td:hover {
		background-color: #f1f9ff
	}

	.table-material tbody>tr>td:not(:first-child) {
		border-top: 1px solid #f8f8f8
	}

	.table-material tbody>tr .column-title {
		display: unset
	}
}

@media (max-width:768px) {
	.table-material tbody>tr>td {
		flex-direction: column
	}
}

.inner-card {
	border-radius: 12px;
	background: #f0f0f6;
	padding: 16px 4px
}

.loading-table-img {
	width: -webkit-fill-available
}

.no-data {
	border-radius: 12px;
	background: var(--primary-6, #f0f0f6);
	padding: 16px;
	min-height: 270px
}

.nodata-container {
	flex-direction: column;
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 10vh 0
}

.nodata-image {
	border-radius: 24px;
	padding: 12px;
	opacity: .8;
	background: var(--basic-white, #fff);
	box-shadow: 0 6px 16px #00000014
}

.nodata-image img {
	width: 84px;
	height: 84px
}

.nodata-text {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-style: normal;
	font-weight: 500;
	line-height: 22px
}

.nodata-message {
	color: var(--basic-black, #000)
}

.nodata-hint {
	text-align: center;
	color: var(--neutral-600, #475569)
}

.card-icon {
	display: flex;
	flex-direction: column;
	width: 11em;
	text-align: center;
	justify-content: space-between;
	flex-wrap: wrap;
	margin: 10px;
	padding: 15px 0 0;
	border: 2px #f0f0f6 solid
}

.card-icon:hover {
	background-color: #f0f0f6
}

.tailwind-icon {
	font-size: 40px;
	display: block;
	color: var(--secondary-dark-purple-100, #5e1ad5)
}

.tabs-scroll {
	display: flex;
	justify-content: center;
	overflow-x: hidden;
	overflow-y: hidden;
	margin-bottom: 20px
}

.tabs-scroll:hover {
	overflow-x: auto
}

.tabs-scroll::-webkit-scrollbar {
	height: 4px;
	width: 4px;
	background: #fff
}

::-webkit-scrollbar-thumb:horizontal {
	background: rgba(0, 0, 0, .2);
	border-radius: 7px
}

.error {
	outline: 1px solid red !important
}

.error-msg {
	font-size: 12px;
	font-weight: 500
}

.hint-text {
	font-size: .75rem;
	font-weight: 500
}

.card-container {
	padding: 2rem;
	color: #325168 !important;
	margin-bottom: 1.5rem
}

.form-label {
	color: #334155;
	font-size: 12px;
	font-weight: 700;
	margin-bottom: 6px;
	line-height: 22px
}

.form-check-label {
	font-size: 13px;
	font-weight: 700;
	line-height: 24px
}

.form-check-input[type=radio] {
	font-size: 20px
}

.form-check-input:focus {
	box-shadow: none
}

.text {
	color: var(--text-body);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5
}

section.forms-accordion.employee-information {
	padding-top: 0
}

section.forms-accordion.employee-information .accordion-item {
	padding: 2rem;
	border: none;
	box-shadow: unset;
	margin-bottom: 1.5rem
}

section.forms-accordion.employee-information .accordion-button {
	border-radius: 12px !important;
	padding: 0 !important
}

section.forms-accordion .accordion-button::after {
	margin-left: 0;
	margin-right: auto
}

section.forms-accordion .accordion-button:not(.collapsed) {
	background-color: unset;
	box-shadow: unset
}

section.forms-accordion .accordion-button:focus {
	border-color: unset;
	box-shadow: unset
}

section.forms-accordion .accordion-body {
	padding: 1rem 0 0
}

section.forms-accordion .accordion-body label {
	color: #1e293b;
	font-size: 12px;
	font-style: normal;
	font-weight: 700;
	margin-bottom: 6px
}

section.forms-accordion .accordion-body input[readonly] {
	color: var(--neutral-900, #202123);
	font-size: 13px;
	padding: 12px;
	font-style: normal;
	font-weight: 700;
	border-radius: 8px;
	border: 1px solid #e2e8f0;
	background: #f8fafc;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .06) inset, 0 3px 8px 0 rgba(0, 0, 0, .05)
}

section.forms-accordion .accordion-button::after {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url(../images/chevron-up.svg);
	transform: rotate(0)
}

section.forms-accordion .accordion-button:not(.collapsed)::after {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url(../images/chevron-up.svg);
	transform: rotate(180deg)
}

.main-content form .icon-file {
	font-size: 1rem
}

.input-file {
	text-align: center;
	width: 100%;
	border-radius: 8px;
	border: 1px dashed #CBD5E1;
	background: var(--secondary-dark-blue-6, #F0F0F6);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 15px 8px 24px;
	margin-top: 4px;
	/* min-height: 177px; */
	color: #4b5563
}

.file[type=file] {
	display: none
}

.form-control {
	border-radius: 8px;
	border: 1px solid var(--neutral-200, #e2e8f0);
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .06) inset, 0 3px 8px 0 rgba(0, 0, 0, .05);
	font-size: 13px
}

.form-control:not(textarea) {
	height: 2.625rem
}

textarea {
	resize: none
}

.form-control:focus {
	box-shadow: none
}

.optional {
	color: #94a3b8;
	font-size: .75rem
}

.action-button-sticky {
	position: sticky !important;
	bottom: 0;
	border: 1px solid #ccc;
	border-radius: 5px !important;
	z-index: 1
}

.btn-cancel {
	border-radius: 8px;
	border: 1px solid var(--neutral-400, #94a3b8);
	padding: 8px 30px;
	background-color: transparent;
	color: var(--neutral-500, #64748b);
	text-align: center;
	font-size: 16px;
	font-weight: 500
}

.btn-cancel:hover {
	color: #000;
	border-color: --neutral-600;
	background-color: var(--neutral-200)
}

.form-check-input[type=radio] {
	font-size: 20px
}

.form-check-input:focus {
	box-shadow: none
}

.text {
	color: var(--text-body);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5
}

.optional {
	color: #94a3b8;
	font-size: .75rem
}

section.forms-accordion .accordion-item {
	padding: 2rem !important;
	border-radius: 12px;
	border: 1px solid #e2e8f0;
	box-shadow: 0 6px 16px 0 rgba(0, 0, 0, .04);
	margin-bottom: 1.5rem
}

section.forms-accordion .accordion-button {
	border-radius: 12px !important
}

section.forms-accordion .accordion-button::after {
	margin-left: 0;
	margin-right: auto
}

section.forms-accordion .accordion-button:not(.collapsed) {
	background-color: unset;
	box-shadow: unset
}

section.forms-accordion .accordion-button:focus {
	border-color: unset;
	box-shadow: unset
}

section.forms-accordion .accordion-body {
	padding: 1rem 0 0
}

section.forms-accordion .accordion-body label {
	color: #1e293b;
	font-size: 12px;
	font-style: normal;
	font-weight: 700;
	margin-bottom: 6px
}

section.forms-accordion .accordion-body input[readonly] {
	color: var(--neutral-900, #202123);
	font-size: 13px;
	padding: 12px;
	font-style: normal;
	font-weight: 700;
	border-radius: 8px;
	border: 1px solid #e2e8f0;
	background: #f8fafc;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .06) inset, 0 3px 8px 0 rgba(0, 0, 0, .05)
}

section.forms-accordion .accordion-button::after {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url(../images/chevron-up.svg);
	transform: rotate(0)
}

section.forms-accordion .accordion-button:not(.collapsed)::after {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url(../images/chevron-up.svg);
	transform: rotate(180deg)
}

.main-content form .icon-file {
	font-size: 1rem
}

.input-file {
	text-align: center;
	width: 100%;
	border-radius: 8px;
	border: 1px dashed #CBD5E1;
	background: var(--secondary-dark-blue-6, #F0F0F6);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 15px 8px 24px;
	margin-top: 4px;
	/* min-height: 177px; */
	color: #4b5563
}

.file[type=file] {
	display: none
}

.btn-outline-danger {
	border: 1px solid #c00d49;
	color: #c00d49
}

.btn-outline-danger:focus,
.btn-outline-danger:hover {
	background: #c00d49;
	color: #fff
}

.badge-status.badge-status-1002 {
	background: #38bdf8
}

.badge-status {
	border-radius: 4px;
	width: 10px;
	height: 10px;
	display: inline-flex;
	color: #fff;
	font-weight: 700;
	font-size: .75rem
}

.message {
	font-size: .813rem;
	font-weight: 700;
	color: var(--neutral-900)
}

.border-right-left {
	border-right: 1px solid var(--neutral-200);
	border-left: 1px solid var(--neutral-200);
	padding: 0 48px;
	margin: 0 48px
}

.responsable {
	display: flex;
	flex-direction: column;
	gap: 6px
}

.responsable .request {
	font-size: .688rem;
	font-weight: 500;
	color: #d97706
}

.responsable .request-task {
	display: flex;
	gap: 16px;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	flex-wrap: wrap
}

.responsable .request-task .task-users .users {
	font-size: .688rem;
	color: var(--text-body);
	font-weight: 700;
	text-align: center
}

.responsable .request-task .task-users {
	width: -moz-fit-content;
	width: fit-content;
	height: 27px;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
	gap: 4px;
	padding: 8px 12px;
	border-radius: 80px;
	border: solid 1px #e2e8f0;
	background-color: var(--basic-white)
}

hr {
	margin: 40px 0;
	opacity: .25
}

@media (max-width:1199.9px) {
	.border-right-left {
		border-left: unset
	}
}

@media (max-width:808.9px) {
	.border-right-left {
		margin: 0 32px
	}
}

@media (max-width:767.9px) {
	.border-right-left {
		border-right: unset;
		margin: 0 14px;
		padding: 0
	}
}

.comments .btn-add {
	display: flex;
	align-items: center;
	padding: 8px 16px;
	border-radius: 8px;
	border: 1px solid var(--secondary-dark-purple-100, #5e1ad5);
	background-color: transparent;
	color: var(--secondary-dark-purple-100, #5e1ad5);
	font-size: 14px;
	font-weight: 500;
	margin: 16px 0
}

.card .comment-box .info p,
.card .comment-box li span {
	font-size: 12px;
	margin-bottom: 0
}

.card .comment-box li {
	border-bottom: none;
	padding: 0
}

.card .comment-box .info p {
	line-height: 2;
	color: var(--text-body);
	font-weight: 500
}

.card .comment-box .info .user-name {
	font-weight: 700
}

.card .comment-box .attachments li span {
	font-weight: 500;
	color: #5e1ad5;
	line-height: 1.8
}

.card .comment-box .attachments li i {
	font-size: 20px;
	color: #5e1ad5
}

.card .comment-box .info p:last-child {
	color: var(--text-placeholder);
	line-height: 1.8;
	font-weight: 500;
	font-size: 10px;
	margin-bottom: 0
}

.data-view {
	background: #f0f0f6;
	padding: 16px;
	border-radius: 12px
}

.comment-box {
	background: #fff;
	border-radius: 12px;
	padding: 12px;
	box-shadow: 0 6px 16px #0000000a
}

.comment-card {
	border: none
}

section.forms-accordion .accordion-item-comments {
	border: none;
	box-shadow: none;
	padding: 0 !important
}

.page-item-arrow {
	font-size: 15px;
	color: #000
}

section.forms-accordion .accordion-item.accordion-item-actionHistory {
	padding: 3px !important
}

#actionHistory .table-layout {
	margin: 16px 0 0
}

#actionHistory .column-value {
	color: #1e293b;
	font-size: .75rem;
	font-style: normal;
	font-weight: 500;
	line-height: 19.2px
}

#actionHistory .green-circle {
	width: 10px;
	height: 10px;
	flex-grow: 0;
	background-color: #2dd4bf;
	border-radius: 50%
}

#actionHistory .reject {
	width: 10px;
	height: 10px;
	flex-grow: 0;
	background-color: #e11d48;
	border-radius: 50%
}

.card-footer:last-child {
	border-radius: 0 0 calc(.25rem - 1px) calc(.25rem - 1px)
}

.card-footer {
	padding: 1rem 1.5rem;
	background: 0 0;
	border-top: 1px solid #e9edf4;
	color: #6e7687
}

.card-title {
	font-size: 16px;
	font-weight: 800;
	text-transform: capitalize;
	margin: 0 0 10px;
	transition: all .3s ease 0s;
	margin-bottom: 7px
}

.card-title a {
	color: inherit;
	text-decoration: none
}

.card-title a:hover {
	color: var(--bs-primary)
}

.fs-14 {
	font-size: 14px !important
}

.br-7 {
	border-radius: 7px
}

.input-icon-request {
	position: absolute;
	top: 50%;
	left: 20px
}

/* Error page */
.text-bg {
	position: absolute;
	left: 40%;
}

.notfound-text {
	font-size: 20px;
	font-weight: 800;
	line-height: 1.4;
}

.notfound-des {
	font-size: 12px;
	font-weight: bold;
	line-height: 1.83;
	color: #94a3b8;
	padding-top: 32px;
}

.error-action {
	padding-top: 32px;
}

.error-action .icon-search:before,
.error-action .icon-home:before {
	font-size: 20px;
	line-height: 0px;
	display: inline;
}


.err-text-bg {
	position: absolute;
	left: -120px;
	top: -16px;
	z-index: 0;
}

.error-number:before {
	content: attr(data-error-number);
	position: absolute;
	background: #fff;
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	text-align: right;
	-webkit-text-stroke-width: 20px;
	-webkit-text-stroke-color: var(--Basic-White, #FFF);
	font-size: 8.75rem;
	font-style: normal;
	font-weight: 900;
	line-height: 100%;
	display: inline-block;
	z-index: 1;
}

.error-number:after {
	content: attr(data-error-number);
	background: var(--liner-menu, linear-gradient(270deg, #000062 6.07%, #5E1AD5 91.53%));
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	text-align: right;
	font-size: 8.75rem;
	font-style: normal;
	font-weight: 900;
	line-height: 100%;
	display: inline-block;
	position: relative;
	z-index: 2;
}

@media (max-width:991px) {
	.notfound-text {
		margin-top: 2rem;
	}

	.err-text-bg {
		top: -17px
	}

	.error-number:before,
	.error-number:after {
		font-size: 4.75rem;
		top: 50px;
	}
}

.error-code-container {
	margin: 50px 0px;
	padding: 1.5rem;
}

/* Home Page */
.home-page .header-content {
	height: unset;
	position: fixed;
	/* animation: breath 5s forwards; */
	background-position: center;
	filter: none;
	z-index: -1;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
	/* background-color: rgba(0, 0, 0, 0.2); */
	background-blend-mode: color;
}

.home-page .header-content:before {
	content: "";
	display: block;
	position: absolute;
	/* background: rgba(0, 0, 0, 0.2); */
	width: 100%;
	height: 100%;
}

.home-page .overlay {
	border-bottom: none;
	background: linear-gradient(180deg, rgba(0, 0, 0, .75) 0, rgba(0, 0, 0, .2) 50%);
}

.home-page .header-content .content-padding {
	padding: 3rem 2rem 1rem 2rem;
}

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

.fixed-buttons-right {
	position: fixed;
	z-index: 49;
	bottom: 32px;
	right: 30px;
	height: 104px;
	width: 56px;
	padding: 4px;
	background: rgba(0, 0, 0, 0.35);
	border-radius: 48px;
}

.fixed-buttons-right:hover {
	background: rgba(0, 0, 0, 0.20);
}

.fixed-buttons-right .image-container {
	position: relative;
}

.fixed-buttons-right .image-container img {
	padding: 12px;
	width: 48px;
	height: 48px;
	cursor: pointer;
}

.fixed-buttons-right .image-container img:hover {
	border-radius: 48px;
	background: rgba(0, 0, 0, 0.35);
	transition: all 200ms ease-out;
}

.fixed-buttons-right .image-container .image-tooltip {
	position: absolute;
	opacity: 0;
	top: 16px;
	color: var(--basic-white, #FFF);
	text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.50);
	font-size: 13px;
	font-style: normal;
	font-weight: 700;
	line-height: 16px;
	white-space: nowrap;
	transition: 0.5s;
	right: 62px;
}

.fixed-buttons-right .image-container img:hover~.image-tooltip {
	opacity: 1;
}

.fixed-buttons-left {
	position: fixed;
	bottom: 20px;
	left: 30px;
}

.fixed-buttons-left img {
	width: 56px;
	height: 56px;
	padding: 16px;
	background: rgba(0, 0, 0, 0.35);
	border-radius: 48px;
	cursor: pointer;
}

.fixed-buttons-left img:first-child {
	margin-bottom: 12px;
}

.image-container .evaluation-text {
	visibility: hidden;
	position: absolute;
	z-index: 1;
	bottom: 25%;
	font-weight: 500;
	color: var(--basic-white, #FFF);
	text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.50);
	font-size: 13px;
	transition: right 0.5s ease;
	right: -6.7rem;
}

.image-container .survey-text {
	bottom: 73%;
}

.image-container:hover .evaluation-text {
	visibility: visible;
	right: -5.7rem;
}

.center-home-content {
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 16px;
	position: relative;
	top: 16%;
	padding-top: 4.4rem;
}

.center-home-content .employee-details {
	margin: auto;
}

.center-home-content .employee-details .happy-birthday {
	display: flex;
	align-items: center;
	gap: 8px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.5);
	backdrop-filter: blur(10px);
	padding: 2px 8px;
	color: var(--text-body, #1E293B);
	text-align: center;
	text-shadow: 0px 2px 1px rgba(255, 255, 255, 0.20);
	font-size: 13px;
	font-style: normal;
	font-weight: 700;
	line-height: 16px;
}

.center-home-content .detail .text {
	color: var(--basic-white, #fff);
	text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	line-height: 16px;
}

.center-home-content .detail .details-icon {
	font-size: 20px;
}

.center-home-content .detail .time {
	color: var(--basic-white, #fff);
	text-shadow: 0px 2px 10px rgba(0, 0, 0, 0.25);
	font-size: 60px;
	font-style: normal;
	font-weight: 800;
	line-height: normal;
}

.center-home-content .timing {
	margin-top: -19px;
}

.center-home-content .timing .zone {
	color: var(--basic-white, #fff);
	text-shadow: 0px 2px 10px rgba(0, 0, 0, 0.25);
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
}

.center-home-content .service {
	margin-top: auto;
	display: flex;
	justify-content: center;
}

.quick-access-services-container {
	width: 480px;
	padding: 0.375rem 0.375rem 0rem 0.375rem;
}

.all-services-button-wrapper {
	width: 100%;
	display: flex;
	justify-content: center;
	margin-bottom: 0.8rem;
}

.quick-access-services-button-wrapper {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
}

.quick-access-services-button {
	width: calc(50% - 0.4rem);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.75rem 1.5rem;
	color: #FFF;
	font-size: 0.75rem;
	line-height: 1rem;
	font-style: normal;
	font-weight: 700;
	border-radius: 80px;
	background-color: rgba(0, 0, 0, 0.20);
	border: 1px solid transparent;
	transition: background-color, border 0.25s;
}

.quick-access-services-button.all-services-button {
	width: auto;
	font-weight: 800;
}

.quick-access-services-button .service-name {
	max-width: calc(100% - 1.5rem);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.quick-access-services-button:hover {
	border: 1px solid rgba(255, 255, 255, 0.25);
	background-color: rgba(0, 0, 0, 0.35);
}

.quick-access-services-button i::before {
	margin: 0;
	width: 1.25rem;
	height: 1.25rem;
	font-size: 1.25rem;
}

.statistics-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	color: #fff;
}

.statistics-row .tasks-statistics-item {
	gap: 16px;
	align-items: center;
}

.statistics-row .tasks-statistics-item:hover .my-task .task-text {
	transform: translate(0, -25px);
}

.statistics-row .tasks-statistics-item:hover .my-task .task-icon {
	transform: translate(0, 20px);
}

.statistics-row .hours {
	display: flex;
	flex-direction: column;
}

.statistics-row .hours .hour {
	color: var(--basic-white, #fff);
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	margin-right: 2px;
}

.statistics-row .hours .hour-num {
	color: var(--basic-white, #fff);
	font-size: 16px;
	font-style: normal;
	font-weight: 800;
}

.statistics-row .hours .attandance {
	color: rgba(255, 255, 255, 0.65);
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	font-size: 11px;
}

.statistics-row .my-task {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	width: 70px;
	height: 35px;
}

.statistics-row .my-task i::before {
	margin: 0;
	display: flex;
	font-size: 20px;
	width: 20px;
	height: 20px;
}

.statistics-row .my-task .task-text {
	color: var(--basic-white, #FFF);
	font-size: 11px;
	font-style: normal;
	font-weight: 500;
	line-height: 11px;
	transition: all 0.25s ease-out;
}

.statistics-row .my-task .task-icon {
	transition: all 0.25s ease-out;
}

.statistics-row .seperator {
	width: 1px;
	height: 30px;
	opacity: 0.25;
	background: #94a3b8;
}

.statistics-row .number {
	width: 51px;
	height: 46px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	color: #fff;
	font-size: 24px;
	font-style: normal;
	font-weight: 800;
	line-height: 32px;
}

.statistics-row .number .task-text-light {
	color: rgba(255, 255, 255, 0.65);
	font-size: 10px;
	font-weight: 500;
	line-height: 16px;
}

.statistics-row .statistics-item {
	border-radius: 12px;
	background: rgba(0, 0, 0, 0.35);
	width: 186px;
	height: 64px;
	padding: 8px 16px;
	overflow: hidden;
	display: flex;
	gap: 8px;
}

.statistics-row .statistics-item .attendance-part {
	height: 100%;
	display: flex;
	gap: 8px;
}

.statistics-row .statistics-item .attendance-upper-part {
	transition: all 0.3s ease-out;
	margin-bottom: 16px;
}

.statistics-row .statistics-item:hover .attendance-upper-part {
	margin-top: -64px;
}

.statistics-item:hover .attendance-percentage-chart .attendance-percentage-text div:first-child {
	margin-top: -16px;
}

.statistics-row .statistics-item:hover .upper-attendance-percentage-chart {
	opacity: 0;
}

.statistics-row .statistics-item:hover .lower-attendance-percentage-chart {
	opacity: 1;
}

.statistics-row .statistics-item img {
	width: 186px;
	height: 64px;
}

.attendance-percentage-chart {
	position: relative;
	width: 48px;
}

.attendance-percentage-chart .upper-attendance-percentage-chart {
	transition: all 0.3s ease-out;
	position: absolute;
	opacity: 1;
	z-index: 1;
}

.attendance-percentage-chart .upper-attendance-percentage-chart .outer-circle,
.attendance-percentage-chart .lower-attendance-percentage-chart .outer-circle {
	position: absolute;
	right: 0;
}

.attendance-percentage-chart .lower-attendance-percentage-chart {
	transition: all 0.3s ease-out;
	position: absolute;
	opacity: 0;
	z-index: 1;
}

.attendance-percentage-chart .attendance-percentage-text-wrapper {
	position: absolute;
	z-index: v2;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
}

.attendance-percentage-chart .attendance-percentage-text-wrapper .attendance-percentage-text {
	width: 25px;
	height: 15px;
	overflow: hidden;
	text-align: center;
}

.attendance-percentage-text-wrapper .attendance-percentage-text div:first-child {
	transition: all 0.3s ease-out;
}

/************ Service Page *************/
.serivces-layer {
	margin: 80px 95px 30px 95px;
}

.serivces-layer .services-container {
	width: 100%;
	border-radius: 16px;
	background: #ffffff80;
	box-shadow: 0px 25px 50px -12px rgba(0, 0, 0, 0.12);
	backdrop-filter: blur(25px);
	padding-top: 1.5rem;
	padding-bottom: 0.75rem;
	display: flex;
	flex-direction: column;
}

.services-container .services-search-bar {
	display: flex;
	gap: 0.5rem;
	justify-content: space-between;
	align-items: center;
	padding: 0 1.5rem;
	margin-bottom: 0.75rem;
}

.services-search-bar .services-search {
	height: 50px;
	width: 516px;
	padding: 0.75rem 1rem;
	display: flex;
	gap: 0.5rem;
	border-radius: 80px;
	border: 1px solid var(--neutral-200, #E2E8F0);
	background: var(--basic-white, #FFF);
	box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.08);
}

.services-search-bar .services-search i.icon-search {
	width: 1.5rem;
	height: 1.5rem;
	color: #94A3B8;
}

.services-search-bar .services-search .icon-search::before {
	font-size: 1.5rem;
	width: 1.5rem;
	height: 1.5rem;
	margin: 0;
}

.services-search-bar .services-search input {
	width: 100%;
	border: 0;
	outline: 0;
	font-size: 0.75rem;
	font-style: normal;
	font-weight: 700;
	color: var(--text-body, #1E293B);
}

.services-search-bar .services-search input::placeholder {
	color: var(--text-placeholder, #94A3B8);
	font-size: 0.75rem;
	font-style: normal;
	font-weight: 700;
}

.services-search-bar .services-source {
	display: flex;
	height: 48px;
	gap: 0.75rem;
}

.services-search-bar .services-source button {
	padding: 0.75rem;
	border-radius: 80px;
	background: var(--basic-white, #FFF);
	box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.08);
	color: var(--text-body, #1E293B);
	font-size: 0.75rem;
	font-style: normal;
	font-weight: 700;
	border: 0;
	display: flex;
	flex-direction: row-reverse;
	gap: 0.5rem;
	align-items: center;
	white-space: nowrap;
	overflow: hidden;
	transition: 1s ease-out;
}

.services-search-bar .services-source button span {
	transition: 1s ease-out;
}

.services-search-bar .services-source button .services-source-icon {
	position: relative;
	min-width: 24px;
	max-width: 24px;
	height: 24px;
}

.services-source button .services-source-icon img {
	position: absolute;
	width: 24px;
	height: 24px;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	transition: 0.5s;
}

.services-source button .services-source-icon .services-source-icon-outline {
	opacity: 0;
}

.services-source button .services-source-icon .services-source-icon-fill {
	opacity: 1;
}

.services-search-bar .services-source .all-button {
	max-width: 300px;
}

.services-search-bar .services-source .all-button span {
	opacity: 1;
}

.services-search-bar .services-source .favorites-button:hover+.all-button {
	max-width: 48px;
}

.services-search-bar .services-source .favorites-button:hover+.all-button span {
	opacity: 0;
}

.services-search-bar .services-source .favorites-button-selected+.all-button:hover {
	max-width: 300px;
}

.services-search-bar .services-source .favorites-button-selected+.all-button:hover span {
	opacity: 1;
}

.services-search-bar .services-source .favorites-button-selected+.all-button {
	max-width: 48px;
}

.services-search-bar .services-source .favorites-button-selected+.all-button span {
	opacity: 0;
}

.services-search-bar .services-source .favorites-button {
	max-width: 48px;
}

.services-search-bar .services-source .favorites-button span {
	opacity: 0;
}

.services-search-bar .services-source .favorites-button:hover {
	max-width: 300px;
}

.services-search-bar .services-source .favorites-button:hover span {
	opacity: 1;
}

.services-search-bar .services-source .favorites-button-selected {
	max-width: 300px;
}

.services-search-bar .services-source .favorites-button-selected span {
	opacity: 1;
}

.services-search-bar .services-source .favorites-button-selected:has(+ .all-button:hover) {
	max-width: 48px;
}

.services-search-bar .services-source .favorites-button-selected:has(+ .all-button:hover) span {
	opacity: 0;
}

.services-search-bar .services-source .homepage-button {
	max-width: 48px;
}

.services-search-bar .services-source .homepage-button span {
	opacity: 0;
}

.services-search-bar .services-source .homepage-button:hover {
	max-width: 300px;
}

.services-search-bar .services-source .homepage-button:hover span {
	opacity: 1;
}

.homepage-button:hover+.favorites-button+.all-button,
.homepage-button:hover+.favorites-button {
	max-width: 48px;
}

.homepage-button:hover+.favorites-button+.all-button span,
.homepage-button:hover+.favorites-button span {
	opacity: 0;
}

.services-categories-wrapper #tabs .task-details {
	margin-bottom: 0;
}

.services-categories-wrapper .tabs-scroll {
	justify-content: start;
}

.services-grid {
	position: relative;
	overflow: hidden;
	transition: 0.5s;
	height: 572px;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 20px;
}

.service-card {
	/* position: absolute; */
	height: 180px;
	opacity: 1;
	transition: opacity 0.5s, top 0.5s, left 0.5s, right 0.5s, bottom 0.5s;
	border-radius: 12px;
	padding: 0.5rem;
	background: rgba(255, 255, 255, 0.80);
	box-shadow: 0px 4px 20px 0px rgba(0, 0, 98, 0.10);
	backdrop-filter: blur(10px);
}

.service-card.fade {
	opacity: 0;
	animation: invisible 0.5s;
}

@keyframes invisible {
	100% {
		display: none;
	}
}

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

.service-card .service-card-header i::before {
	width: 20px;
	height: 20px;
	font-size: 20px;
	margin: 0;
}

.service-card .service-card-header img {
	width: 20px;
	height: 20px;
}

.service-card .service-card-header .service-category {
	display: flex;
	align-items: center;
	max-width: calc(100% - 25px);
	gap: 0.25rem;
	color: var(--text-placeholder, #94A3B8);
	font-size: 10px;
	font-style: normal;
	font-weight: 700;
}

.service-card .service-card-header .service-category div {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.service-card .service-card-header .service-category div div {
	translate: 100% 0;
	transition: 0.2s ease-out;
}

.service-card .service-card-body {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 140px;
	margin-top: 0.25rem;
}

.service-card .service-card-body .service-card-name {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	color: var(--text-body, #1E293B);
	text-align: center;
	font-size: 0.75rem;
	font-style: normal;
	font-weight: 700;
	margin-top: 1rem;
	transition: 0.2s ease-out;
}

.service-card .service-card-body .service-card-name div {
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.service-card .service-card-body .service-card-actions {
	display: flex;
	overflow: hidden;
	justify-content: space-between;
	gap: 0.5rem;
}

.service-card-body .service-card-actions .action-button {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-grow: 1;
	height: 34px;
	padding: 0.5rem 0.75rem 0.5rem 0.5rem;
	border-radius: 20px;
	border: 0;
	text-align: center;
	font-style: normal;
	font-size: 0.75rem;
	box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.08);
	opacity: 0;
	transition: 0.2s ease-out;
}

.service-card-body .service-card-actions .start-button {
	background: var(--secondary-dark-purple-6, rgba(94, 26, 213, 0.06));
	color: var(--text-body, #1E293B);
	font-weight: 800;
	translate: -100% 0px;
}

.service-card-body .service-card-actions .details-button {
	background: rgba(127, 146, 255, 0.06);
	color: var(--secondary-light-purple-100, #7F92FF);
	font-weight: 500;
	translate: 100% 0px;
}

.service-card:hover {
	background: var(--basic-white, #FFF);
}

.service-card:hover .service-card-header .service-category div div {
	translate: 0;
}

.service-card:hover .service-card-body .service-card-name {
	margin-top: 0;
}

.service-card:hover .service-card-body .service-card-actions .action-button {
	opacity: 1;
}

.service-card:hover .service-card-body .service-card-actions .start-button {
	translate: 0;
}

.service-card:hover .service-card-body .service-card-actions .details-button {
	translate: 0;
}

.serivces-layer .service-card-name img {
	width: 56px;
	height: 56px;
}

@media (max-width: 1199px) {
	.serivces-layer .services-container .services-search-bar .services-search {
		width: 400px;
	}

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

@media (max-width: 991px) {
	.serivces-layer .services-container .services-search-bar {
		flex-direction: column;
		align-items: flex-start;
	}

	.services-container .services-search-bar .services-search {
		width: 100%;
	}

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

@media (max-width: 767px) {
	.serivces-layer {
		margin: 30px 25px 10px 25px;
	}

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

@media (max-width: 575px) {
	.serivces-layer {
		margin: 30px 15px 10px 15px;
	}

	.services-grid {
		grid-template-columns: 1fr;
	}
}

/******** End Style of Serices Page *********/
/******** hierarchy Page ******/
.hierarchy .card-body {
	padding: 16px;
	gap: 12px;
	display: flex;
	flex-direction: column;
}

.hierarchy .card-body .node-illustration {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
}

.hierarchy .card-body .node-illustration .node-badge {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	font-size: 0.625rem;
	font-weight: 700;
}

.hierarchy .card-body .node-illustration .node-badge>div {
	display: flex;
}

.hierarchy .card-body .node-illustration .node-badge>div .badge {
	width: 1rem;
	height: 1rem;
	border-radius: 0.25rem;
}

.hierarchy .card-body .node-illustration .node-badge>div .badge:empty {
	display: unset;
}

.hierarchy .card-body .node-illustration .node-badge>div .badge.badge-1 {
	background: var(--secondary-bright-blue-75, #4040FF);
}

.hierarchy .card-body .node-illustration .node-badge>div .badge.badge-2 {
	background: #8653e0;

}

.hierarchy .card-body .node-illustration .node-badge>div .badge.badge-3 {
	background: var(--secondary-teal-100, #00a0a0);
}

.hierarchy .card-body .node-illustration .node-badge>div .badge.badge-4 {
	background: var(--secondary-light-blue-100, #00d0ff);
}

.hierarchy .card-body .node-illustration .node-badge>div .badge.badge-5 {
	background: var(--secondary-yellow-100, #FFC800);
}

.hierarchy .card-body .node-illustration .zoom {
	display: flex;
	height: 2.25rem;
	padding: 0.375rem 0.75rem;
	justify-content: flex-end;
	align-items: center;
	gap: 0.75rem;
	border-radius: 7.1875rem;
	border: 1px solid var(--neutral-200, #e2e8f0);
	background: var(--neutral-50, #f8fafc);
	font-size: 1.25rem;
	color: black;
	position: relative;
	cursor: pointer;
}

@media (max-width: 575px) {
	.hierarchy .card-body .node-illustration .zoom {
		align-self: start;
	}
}

.hierarchy .card-body .node-illustration .zoom:after {
	position: absolute;
	content: '|';
	font-weight: 100;
	color: var(--neutral-200, #e2e8f0);
	width: 74%;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.hierarchy .card-body .card-dark {
	padding: 0.25rem;
	border-radius: 0.75rem;
	background: var(--primary-6, #f0f0f6);
}

.org-strucutre-chart .node {
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	border-radius: 0.19813rem;
	background: var(--basic-white, #FFF);
	font-size: 0.875rem;
	font-weight: 700;
	border: 0.792px solid var(--neutral-200, #E2E8F0);
	background-color: var(--basic-white, #FFF);
	box-shadow: 0px 1.585px 3.17px 0px rgba(0, 0, 0, 0.04);
}

.org-strucutre-chart .node.node-main {
	padding: 0.39625rem 1.18869rem;
	background: linear-gradient(0deg, #370FA6 -15%, #010063 100%);
	border: 1.585px solid #010063;
	color: var(--basic-white, #FFF);
}

.node-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	align-self: stretch;
	border-radius: 0.19813rem;
	border-top: 3.17px solid #4040FF;
	border-color: transparent;
	font-size: 0.625rem;
	background-color: #fff;
	font-family: 'LoewNextArabic';
}

.node-content .node-employee {
	width: 100%;
	text-align: center;
	border-top: 0.792px solid var(--Neutral-200, #e2e8f0);
	color: var(--Neutral-500, #64748b);
	padding: 6.5px;
}

.node-content.node-sector {
	border-color: var(--secondary-dark-purple-75, #8653e0);
}

.node-content.node-department {
	border-color: var(--secondary-light-blue-100, #00d0ff);
}

.node-content.node-public-department {
	border-color: var(--secondary-teal-100, #00a0a0);
}

.node-content.node-head {
	border: none;
}

.node .node-button-g .node-button-div>div {
	border-radius: 0.19813rem;
	border: 0.792px solid var(--neutral-300, #cbd5e1);
	background: var(--basic-white, #fff);
	padding: 0.19813rem 0.29719rem;
}

.node .node-button-g .node-button-div>div>div {
	flex-direction: row-reverse;
	color: var(--text-placeholder, #94a3b8);
	font-size: 0.49531rem;
	font-weight: 700;
	align-items: center;
}

.node .node-button-g .node-button-div>div>div svg {
	transform: scale(0.75);
}

.svg-chart-container {
	width: 100%;
}

/******* End Hierarchy page style ******/
/****** My Team Page ******/
.profile {
	display: flex;
	gap: 1.5rem;
	min-height: 82.5vh;
}

.profile .profile-list {
	width: 320px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
}

.profile .profile-list .picture-and-info {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
}

.profile .profile-list .picture-and-info .picture {
	width: 154px;
	height: 154px;
	border-radius: 154px;
	border: 4px solid var(--neutral-50, #f8fafc);
	background: var(--basic-white, #fff);
	box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.08);
	position: relative;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

.profile .profile-list .picture-and-info .picture .icon-edit {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	pointer-events: none;
}

.profile .profile-list .picture-and-info .picture .overlay {
	display: none;
	border-radius: 150px !important;
	background: rgba(0, 0, 0, 0.75) !important;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.profile .profile-list .picture-and-info .picture .overlay .icon {
	font-size: 32px;
	color: #fff;
}

.profile .profile-list .picture-and-info .picture .overlay .text {
	color: #fff;
	font-size: 10px;
	font-style: normal;
	font-weight: 700;
	line-height: 16px;
	/* 160% */
}

.profile .profile-list .picture-and-info .picture:hover {
	cursor: pointer;
}

.profile .profile-list .picture-and-info .picture:hover .overlay {
	display: flex;
}

.profile .profile-list .picture-and-info .info {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
}

.profile .profile-list .picture-and-info .info .name {
	color: #1e293b;
	font-size: 20px;
	font-style: normal;
	font-weight: 800;
	line-height: 28px;
	text-align: center;
	/* 140% */
}

.profile .profile-list .picture-and-info .info .data {
	color: #8080b1;
	display: flex;
	align-items: center;
	font-size: 13px;
	font-style: normal;
	font-weight: 700;
	line-height: 120%;
}

.profile .profile-list .picture-and-info .info .data .circle {
	margin: 0px 10px;
	width: 5px;
	height: 5px;
	border-radius: 8px;
	background: var(--primary-25, #bfbfd7);
}

.profile .profile-list .horizontal-list {
	width: 100%;
}

@media (min-width: 768px) {
	.profile .profile-list .horizontal-list {
		min-height: 378px;
	}
}

.profile .profile-list .profile-list-items {
	border-radius: 12px;
	border: 1px solid var(--neutral-200, #e2e8f0);
	background: var(--basic-white, #fff);
	padding: 16px;
	width: 100%;
	box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.04);
}

.profile .profile-list .profile-list-items ul {
	padding: 0;
	margin: 0 0 8px 0;
	border-bottom: 1px solid var(--neutral-200, #e2e8f0);
}

.profile .profile-list .profile-list-items ul .active-link {
	border-radius: 80px;
	background: var(--secondary-dark-purple-6, rgba(94, 26, 213, 0.06));
	padding: 8px 16px;
}

.profile .profile-list .profile-list-items ul .active-link .list-text {
	color: #5e1ad5 !important;
}

.profile .profile-list .profile-list-items ul .active-link .icon {
	color: #5e1ad5 !important;
}

.profile .profile-list .profile-list-items ul li {
	cursor: pointer;
	list-style: none;
	padding: 8px 16px;
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
	border-bottom: none;
}

.profile .profile-list .profile-list-items ul li:hover {
	border-radius: 80px;
	background: var(--secondary-dark-purple-6, rgba(94, 26, 213, 0.06));
}

.profile .profile-list .profile-list-items ul li .list-text {
	color: #1e293b;
	font-size: 14px;
	font-style: normal;
	font-weight: 800;
	line-height: 24px;
	/* 171.429% */
}

.profile .profile-list .profile-list-items ul li .icon {
	font-size: 20px;
	color: #1e293b;
}

.profile .profile-list .profile-list-items .last-item {
	margin: 0;
	border-bottom: none;
}

.profile .profile-list .profile-list-items .last-item li {
	margin: 0;
}

.profile .my-team-data {
	width: calc(100% - 320px - 1.5rem);
	border-radius: 12px;
	border: 1px solid var(--neutral-200, #e2e8f0);
	background: var(--basic-white, #fff);
	box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.04);
}

.icon-identification {
	font-size: 28px;
}

.picture-and-info .image {
	border-radius: 154px;
	width: 100%;
	height: 100%;
}

.avatar-image {
	width: 146px;
	height: 146px;
	font-size: 48px;
	line-height: 74px;
	border-radius: 50%;
}

@media (max-width: 767px) {
	.profile {
		flex-direction: column;
	}

	.profile .profile-list {
		width: 100%;
		min-width: unset;
		max-width: unset;
	}

	.profile .profile-list .picture-and-info {
		width: 100%;
		padding: 12px;
		flex-direction: row;
		gap: 12px;
		background-color: var(--basic-white, #fff);
		border-radius: 10px;
		box-shadow: 0px 0px 40px 8px rgba(163, 163, 163, 0.25);
	}

	.profile .profile-list .picture-and-info .avatar-image {
		border: 1.558px solid white;
	}

	.profile .profile-list .picture-and-info .picture {
		width: 60px;
		height: 60px;
		border: unset;
	}

	.profile .profile-list .picture-and-info .picture .overlay .text {
		display: none;
	}

	.profile .profile-list .picture-and-info .info {
		align-items: flex-start;
	}

	.profile .profile-list .picture-and-info .info .name {
		font-size: 14px;
		font-weight: 700;
		line-height: 24px;
	}

	.profile .profile-list .picture-and-info .info .data {
		font-size: 10px;
		font-weight: 700;
		line-height: 16px;
	}

	.profile .profile-list .picture-and-info .info .data .circle {
		margin: 0 16px;
	}

	.profile .profile-list .horizontal-list {
		height: 75px;
	}

	.profile .profile-list .profile-list-items {
		display: flex;
		background: unset;
		box-shadow: unset;
		border: unset;
		padding: 8px 0;
	}

	.profile .profile-list .profile-list-items ul {
		display: flex;
		border: 0;
		gap: 8px;
		margin: 0;
	}

	.profile .profile-list .profile-list-items ul .active-link {
		padding: 6px 10px;
	}

	.profile .profile-list .profile-list-items ul li {
		gap: 4px;
		white-space: nowrap;
		padding: 6px 10px;
		margin: 0;
	}

	.profile .profile-list .profile-list-items ul li .icon {
		font-size: 16px;
	}

	.profile .profile-list .profile-list-items ul li .list-text {
		font-size: 12px;
		font-weight: 700;
		line-height: 22px;
	}

	.profile .profile-list .profile-list-items .last-item img {
		width: 16px;
	}

	.profile .profile-list .profile-list-items .last-item {
		padding: 0 8px;
	}

	.profile .avatar-image {
		width: 60px;
		height: 60px;
		font-size: 20px;
	}

	.profile .my-team-data {
		width: 100%;
	}
}

@media (min-width: 768px) and (max-width: 1400px) {
	.profile .profile-list {
		width: 270px;
	}

	.profile .my-team-data {
		width: calc(100% - 270px - 1.5rem);
	}
}

.my-team .header {
	display: flex;
	gap: 0.5rem;
	justify-content: space-between;
	align-items: center;
	padding: 1.5rem 2rem;
	border-bottom: 1px solid var(--neutral-200, #e2e8f0);
}

.my-team .header span {
	color: var(--text-body, #1e293b);
	font-size: 1.25rem;
	font-style: normal;
	font-weight: 800;
	line-height: 1.75rem;
}

.my-team .header button {
	display: flex;
	padding: 0.5rem 1rem;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
	border-radius: 8px;
	background: var(--secondary-dark-purple-6, rgba(94, 26, 213, 0.06));
	color: var(--secondary-dark-purple-100, #5e1ad5);
	font-size: 0.75rem;
	font-style: normal;
	font-weight: 700;
	line-height: 1.375rem;
	border: 0;
}

.my-team .content {
	padding: 1.5rem 2rem 2rem 2rem;
	display: flex;
	flex-direction: column;
	gap: 2rem;
	align-self: stretch;
}

.my-team .content .employees-types {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	align-self: stretch;
	gap: 0.5rem;
}

.my-team .content .employees-types .employees-type {
	display: flex;
	padding: 0.75rem 1rem;
	align-items: center;
	gap: 0.5rem;
	border-radius: 80px;
	border: 2px solid var(--neutral-100, #f1f5f9);
	background: var(--basic-white, #fff);
	color: var(--text-body, #1e293b);
	font-size: 0.875rem;
	font-style: normal;
	font-weight: 700;
	line-height: 1.5rem;
}

.my-team .content .employees-types .employees-type .count {
	padding: 0px 0.5rem;
	border-radius: 8px;
	color: var(--basic-white, #fff);
}

.my-team .content .employees-types .employees-type .type {
	opacity: 0.5;
}

.my-team .content .employees-types .employees-type-selected {
	border: 2px solid var(--neutral-300, #cbd5e1);
}

.my-team .content .employees-types .employees-type-selected .count {
	color: var(--text-body, #1e293b);
}

.my-team .content .employees-types .employees-type-selected .type {
	opacity: 1;
}

.my-team .content .employees-types .all {
	background: var(--neutral-200, #e2e8f0);
}

.my-team .content .employees-types .official-employees {
	background: var(--secondary-dark-purple-75, #8653e0);
}

.my-team .content .employees-types .contractors {
	background: var(--secondary-teal-75, #40b8b8);
}

.my-team .content .employees-types .vacancies {
	background: var(--status-danger-400, #fb7185);
}

.my-team .content .my-team-chart-container {
	overflow: hidden;
	height: 650px;
	border-radius: 12px;
	border: 1px solid var(--neutral-300, #cbd5e1);
	background: var(--primary-6, #f0f0f6);
}

.my-team .content .my-team-chart-container .my-team-chart {
	width: 100%;
	height: 100%;
}

.my-team .my-team-chart-container .my-team-nodata-or-loading img {
	margin-top: 5%;
}

.my-team .my-team-chart-container .node {
	width: 100%;
	height: 100%;
	display: flex;
	padding: 1rem 1rem 0.5rem 1rem;
	flex-direction: column;
	align-items: center;
	border-radius: 10px;
	background: var(--basic-white, #fff);
	box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.04);
	font-family: LoewNextArabic, tahoma;
}

.my-team .my-team-chart-container .node-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	align-self: stretch;
}

.my-team .my-team-chart-container .node-avatar-frame {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	border-radius: 64px;
	border: 4px solid var(--secondary-dark-purple-75, #8653e0);
}

.my-team .my-team-chart-container .node-avatar-frame-official-employees {
	border: 4px solid var(--secondary-dark-purple-75, #8653e0);
}

.my-team .my-team-chart-container .node-avatar-frame-contractors {
	border: 4px solid var(--secondary-teal-75, #40b8b8);
}

.my-team .my-team-chart-container .node-avatar-frame-vacancies {
	border: 4px solid var(--status-danger-400, #fb7185);
}

.my-team .my-team-chart-container .node-avatar {
	display: flex;
	width: 72px;
	height: 72px;
	justify-content: center;
	align-items: center;
	border-radius: 64px;
	border: 4px solid var(--basic-white, #fff);
	background: var(--Neutral-200, #e2e8f0);
	box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.08);
	overflow: hidden;
	position: relative;
}

.my-team .my-team-chart-container .node-avatar .adjust-img {
	width: 72px;
	height: 72px;
}

.my-team .my-team-chart-container .node-avatar .avatar-char, .my-team .my-team-chart-container .node-avatar img {
	z-index: 0;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	color: var(--Neutral-400, #94a3b8);
	font-size: 1.5rem;
}

.my-team .my-team-chart-container .node-name {
	align-self: stretch;
	color: var(--text-body, #1e293b);
	text-align: center;
	font-size: 0.875rem;
	font-style: normal;
	font-weight: 700;
	line-height: 1.5rem;
}

.my-team .my-team-chart-container .node-name-vacancies {
	color: var(--status-danger-400, #fb7185);
}

.my-team .my-team-chart-container .node-name-vacancy {
	color: var(--status-danger-400, #fb7185);
}

.my-team .my-team-chart-container .node-position {
	align-self: stretch;
	color: var(--text-placeholder, #94a3b8);
	text-align: center;
	font-size: 0.75rem;
	font-style: normal;
	font-weight: 700;
	line-height: 1.375rem;
}

.my-team .my-team-chart-container .node-status {
	max-width: 100%;
	padding: 0.25rem 0.625rem;
	border-radius: 5px;
	text-align: center;
	font-size: 0.625rem;
	font-style: normal;
	font-weight: 700;
	line-height: 1rem;
}

.my-team .my-team-chart-container .node-status-available {
	background: var(--status-success-50, #f0fdfa);
	color: var(--status-success-600, #0d9488);
}

.my-team .my-team-chart-container .node-status-unavailable {
	background: var(--status-danger-50, #fff1f2);
	color: var(--status-danger-600, #e11d48);
}

.my-team .my-team-chart-container .node-status-remotly {
	background: var(--lpx-warning-light, #ffe4c7);
	color: var(--lpx-warning);
}

.my-team .my-team-chart-container .node-department {
	align-self: stretch;
	color: var(--text-body, #1e293b);
	text-align: center;
	font-size: 0.75rem;
	font-style: normal;
	font-weight: 500;
	line-height: 1.375rem;
}

.my-team .my-team-chart-container .text-overflow-ellipsis {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

@media screen and (max-width: 768px) {
	.my-team .header {
		padding: 24px 16px;
		flex-wrap: wrap;
	}

	.my-team .header span {
		font-size: 16px;
		font-weight: 700;
		line-height: 24px;
	}

	.my-team .header button {
		width: -webkit-fill-available;
		justify-content: start;
		padding: 0.5rem;
	}
}

/* start service details */
.card.main-card {
	border-radius: 12px;
	border: 1px solid #e2e8f0;
	background: #fff;
	box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.04);
	padding: 32px;
}

.card.main-card .card-header {
	padding: 0;
}

.card.main-card .card-header span {
	color: #94a3b8;
	font-size: 14px;
	font-weight: 700;
}

.card.main-card .card-header span p {
	color: #1e293b;
	font-size: 14px;
	font-weight: 500;
}

.card.main-card ul, .card.main-card ol {
	padding-inline-start: 40px;
}

.card.main-card ul li, .card.main-card ol li {
	color: #1e293b;
	font-size: 14px;
	font-weight: 500;
	margin: 0;
	padding: 0;
	display: list-item;
	border-bottom: none;
	cursor: default;

}

.card.main-card ul li {
	list-style: disc;
}

.card.main-card .card-title {
	color: #1e293b;
	font-size: 16px;
	font-weight: 700;
	padding: 0px 0px 16px;
	display: flex;
}

.card.main-card .card-title img {
	filter: invert(48%) sepia(58%) saturate(711%) hue-rotate(202deg) brightness(102%) contrast(101%);
}

.card.main-card .accordion {
	padding-right: 40px;
}

.card.main-card .accordion .accordion-item {
	border: 0px;
	padding: 20px 0px !important;
	border-radius: 0px;
	color: #1e293b;
	font-size: 14px;
	font-weight: 500;
	box-shadow: none;
	margin: 0px;
}

.card.main-card .accordion .accordion-item:first-of-type {
	padding-top: 0px !important;
}

.card.main-card .accordion .accordion-item:not(:last-of-type) {
	border-bottom: 1px solid #E2E8F0;
}

.card.main-card .accordion .accordion-button:not(.collapsed) {
	box-shadow: none;
	padding: 16px 0;
	padding-bottom: 8px;
	color: #1e293b;
}

.card.main-card .accordion .accordion-button:not(.collapsed)::after {
	background-image: url('../images/chevron-down-accordion.svg');
	background-size: 32px 32px;
	padding: 0 15px;
	background-position: center;
}

.card.main-card .accordion .accordion-button::after {
	background-image: url('../images/chevron-down-accordion.svg');
	background-size: 32px 32px;
	padding: 0 15px;
	background-position: center;
}

.card.main-card .accordion .accordion-body {
	border-radius: 8px;
	background: var(--neutral-50, #f8fafc);
	padding: 8px 20px 8px 0px;
	margin-bottom: 16px;
	margin-top: 8px;
}

.service-sidebar {
	position: sticky;
	top: 1%;
}

.service-sidebar .card {
	border-radius: 12px;
	border: 1px solid var(--neutral-200, #e2e8f0);
	background: var(--basic-white, #fff);
	box-shadow: 0px 6px 16px -12px rgba(0, 0, 0, 0.08);
	padding: 16px;
}

.service-sidebar .actions-card .btn {
	padding: 16px 24px;
	border-radius: 8px;
	background: var(--secondary-dark-purple-100, #5e1ad5);
	color: #fff;
}

.service-sidebar .actions-card .btn span {
	font-size: 16px;
	font-weight: 500;
}

.service-sidebar .actions-card .btn.fav-btn {
	border-radius: 8px;
	border: 1px solid var(--primary-6, #f0f0f6);
	margin-top: 16px;
	background: transparent;
}

.service-sidebar .actions-card .btn.fav-btn span {
	color: var(--text-placeholder, #94a3b8);
	font-size: 16px;
	font-weight: 500;
}

.service-sidebar .services-list-card button {
	border: 0;
	padding: 8px 16px;
	margin-bottom: 8px;
	width: 100%;
	text-align: right;
}

.service-sidebar .services-list-card button li {
	color: var(--text-body, #1e293b);
	font-size: 14px;
	font-weight: 700;
	padding: 0;
	border: none
}

.service-sidebar .services-list-card button:hover {
	border-radius: 80px;
	background: var(--secondary-dark-purple-6, rgba(94, 26, 213, 0.06));
}

.service-sidebar .services-list-card button:focus {
	border: 0;
	background: var(--secondary-dark-purple-6, rgba(94, 26, 213, 0.06));
	border-radius: 80px;
}

.service-sidebar .services-list-card button:focus li {
	color: #5e1ad5;
}

.service-sidebar .services-list-card button:focus img {
	filter: invert(10%) sepia(98%) saturate(7496%) hue-rotate(267deg) brightness(85%) contrast(95%);
}

.service-sidebar .qr-card .qr-img {
	width: 150px;
	height: 150px;
	margin: 0 auto;
}

.service-sidebar .qr-card .qr-text {
	color: #1e293b;
	font-size: 14px;
	font-weight: 500;
	text-align: center;
}

.service-sidebar .qr-card .card-img-overlay p {
	color: var(--basic-white, #fff);
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	border-radius: 5px;
	background: var(--neutral-500, #64748b);
	padding: 10px;
}

.service-sidebar .related-services-card .card-title {
	color: #1e293b;
	font-size: 16px;
	font-weight: 700;
	padding: 8px 0px;
}

.service-sidebar .related-services-card .tags {
	margin-top: 8px;
	gap: 12px;
}

.service-sidebar .related-services-card .tags .tag {
	border-radius: 80px;
	background: var(--neutral-100, #f1f5f9);
	padding: 8px 16px;
	color: var(--text-body, #1e293b);
	font-size: 14px;
	font-weight: 500;
	margin-bottom: 12px;
}

.service-sidebar hr {
	margin: 8px 0;
}


.service-details .sections {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.service-details .main-details .main-card {
	padding: 32px;
}

.service-details .service-description h4 {
	color: #1E293B;
	font-size: 14px;
	font-weight: 500;
	line-height: 24px;
	padding: 32px 32px 24px;
	border-bottom: 1px solid #E2E8F0;
}

.service-details .service-description h4 span {
	color: #94A3B8;
	font-weight: 700;
}

.service-details .service-description .service-description-info {
	padding: 0px 32px 32px;
}

.service-details .service-description .service-info .details-box {
	border-radius: 12px;
	border: 1px solid #e2e8f0;
	background: rgba(240, 240, 246, 0.5);
	padding: 24px;
	height: 100%;
}

.service-details .service-description .service-info .details-box .icon {
	color: #8080FF;
	font-size: 32px;
}

.service-details .service-description .service-info .details-box p.card-text {
	margin: 16px 0;
	font-size: 16px;
}

.service-details .service-description .service-info .details-box p.sub-text {
	color: var(--text-body, #1e293b);
	font-size: 14px;
	font-weight: 500;
}

.service-details .service-description {
	gap: 24px;
}

.service-details .service-description .extra-info {
	padding-top: 16px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.service-details .service-description .extra-info .user-guide {
	gap: 8px;
}

.service-details .service-description .extra-info span {
	color: #1E293B;
	font-size: 14px;
	font-weight: 500;
	line-height: 24px;
}

.service-details .service-rating {
	display: flex;
	flex-direction: column;
	gap: 6px
}

.service-details .service-rating .rating-title {
	color: #1e293b;
	font-size: 14px;
	font-weight: 500;
}

.service-details .service-rating .stars {
	gap: 8px;
}

.service-details .service-rating .rating-details {
	color: #94a3b8;
	font-size: 10px;
	font-weight: 500;
}

.service-details .service-rating .rating-details span {
	font-size: 10px;
	font-weight: 500;
	line-height: 16px;
}

.service-details .service-rating .rating-details span:first-child {
	font-weight: 700;
	font-size: 16px;
	color: #1e293b;
	line-height: 24px;
}

.service-details .service-rating .rating-details .vr {
	background-color: #cbd5e1;
	height: 14px;
	opacity: 1;
}

section.forms-accordion .accordion-body textarea[readonly] {
	color: #666;
	font-size: 13px;
	padding: 12px;
	font-style: normal;
	font-weight: 700;
	border-radius: 8px;
	border: 1px solid #e2e8f0;
	background: #f8fafc;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .06) inset, 0 3px 8px 0 rgba(0, 0, 0, .05)
}

.cancel-requst-btn {
	border-radius: 8px;
	border: 1px solid #FB7185;
	background-color: transparent;
	color: #FB7185;
	text-align: center;
	font-size: 16px;
	font-weight: 500;
}

.employee-info-card {
	background: linear-gradient(0deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.75)),
		radial-gradient(66.05% 429.4% at 75.51% 26.62%, rgba(31, 45, 135, 0.04) 0%, rgba(127, 146, 255, 0.04) 25%, rgba(0, 208, 255, 0.04) 64%, rgba(151, 71, 255, 0.04) 100%);

}

.employee-request {
	border-bottom: 1px solid #E2E8F0;
	padding: 8px 0;
	gap: 4px;
}

.employee-request:last-of-type {
	border-bottom: 0;
}

.employee-request .title {
	color: #1E293B;
	font-weight: 500;
	font-size: 10px;
	line-height: 16px;
}

.employee-request .data {
	color: #202123;
	font-weight: 500;
	font-size: 14px;
	line-height: 24px;
}

.attachment-info {
	background: #F59E0B1A;
	margin-top: 2rem;
}

.attachment-info .icon-information-circle {
	color: #F59E0B;
	font-size: 18px;
	font-weight: 500;
}

.attachment-info .icon-information-circle::before {
	font-size: 20px;
}

.attachment-info .required-atachment {
	font-weight: 700;
	font-size: 16px;
	line-height: 26px;
}

.attachment-info .attachment-desc {
	font-size: 14px;
	font-size: 500;
	line-height: 24px;
}

.attachment-info ul {
	padding: 0 20px;
	margin: 0;
	border-bottom: 1px solid #FFFCFC;
}

.attachment-info ul li {
	list-style: unset;
	border-bottom: unset;
	display: list-item;
	padding: unset;
	margin-bottom: 5px;
	font-size: 14px;
	line-height: 24px;
}

.attach-name {
	font-weight: 500;
	font-size: 14px;
	line-height: 24px;
}

.attach-size {
	font-weight: 700;
	font-size: 10px;
	line-height: 16px;
	color: #94A3B8;
}

.attach-delete {
	color: #FB7185;
}

.attach-delete .icon-trash::before {
	font-size: 24px;
}

.attach-delete:hover {
	color: #E11D48;
}

.attach-cancel {
	color: #0F172A;
}

.attach-cancel .icon-x::before {
	font-size: 24px;
}

.sticky-content {
	position: sticky;
	top: 5px;
	z-index: 1000;
}

.comments .comments-list {
	background-color: #F8FAFC;
	border: 1px solid #F1F5F9;
	padding: 16px;
	border-radius: 12px;
}

.comments .comments-list .arrow-expand {
	cursor: pointer;
}

.comments .comments-list .attachments,
.comment-attachments {
	margin-right: 42px;
}

.comments .comments-list .attachments .attachment,
.comment-attachments .comment-attachment {
	padding: 4px 8px;
	background-color: #F1F5F9;
	border-radius: 4px;
}

.comments .comments-list .attachments span,
.comment-attachments .comment-attachment span {

	color: #5E1AD5;
	font-size: 12px;
	font-weight: 500;
	line-height: 21.6px;
}


.modal-contains-fields .modal-body textarea.form-control {
	min-height: calc(9.5em + .75rem + calc(var(--bs-border-width)* 2)) !important;
}

.details-modal {
	display: none;
	width: 70vw;
	height: 70vh;
	background-color: red;
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	left: 50%;
	z-index: 999;

}

span.modal-right-title {
	font-size: 20px;
	font-weight: 800;
	line-height: 28px;

}

.modal-close-btn {
	cursor: pointer;
}

.comment-modal-list {
	overflow: auto;
}

.main-content {
	--bs-gutter-x: 1.5rem;
	--bs-gutter-y: 0;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

@media (min-width: 992px) {
	.main-content, .header-container {
		max-width: 960px;
	}
}

@media (min-width: 1200px) {
	.main-content, .header-container {
		max-width: 1187px;
	}
}

@media (min-width: 1300px) {

	.main-content, .header-container {
		max-width: 1235px;
	}
}

.riyal-container {
	.value {
		font-size: 25px;
		font-weight: 700;
	}
}

/* Tables */
.grid-guide ul li {
	color: #000;
	font-size: 14px;
	font-weight: 500;
	line-height: 24px;
	padding: 0;
	border-bottom: unset;
	cursor: default;
	display: list-item;
	list-style: unset;
}

.index-column {
	width: 24px;
}

.active-action:hover i {
	color: #fff !important;
}

.action-column .dropdown-menu.show {
	padding: 8px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	border-radius: 12px;
	box-shadow: 0px 4px 6px -2px rgba(0, 0, 0, 0.05), 0px 4px 15px -3px rgba(0, 0, 0, 0.10);
}

.action-column .dropdown-item {
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 160%;
	padding: 4px 8px;
	display: flex;
	align-items: center;

	i {
		color: var(--lpx-primary);
		font-size: 1.25rem;
		line-height: 1;
	}
}

.action-column .dropdown-toggle {
	padding: 8px 12px !important;
	border-radius: 8px;
	border: 1px solid var(--neutral-200, #e2e8f0) !important;
}

.action-column .dropdown-toggle::after {
	display: none;
}

.row-details {
	gap: 48px;
	flex-wrap: wrap;
}

.row-details .text {
	color: var(--Text-Placeholder, #94a3b8);
	font-size: 10px;
	font-weight: 700;
	line-height: 16px;
}

.row-details .data {
	/* color: #1e293b; */
	font-size: 12px;
	font-weight: 500;
	line-height: 22px;
}

.toggle-details-btn {
	background: transparent;
	border: none;
	font-size: 24px;
	color: #94a3b8 !important;
	cursor: pointer;
}

/* .collapsed-table {
    border-collapse: separate;
    border-spacing: 0 4px; 
  }
.collapsed-table.expanded-table{
	border-spacing: 0; 
} */
.collapsed-icon {
	display: inline;
}

.expanded-icon {
	display: none;
}

.toggle-details-btn:not(.collapsed) .collapsed-icon {
	display: none;
}

.toggle-details-btn:not(.collapsed) .expanded-icon {
	display: inline;
}

.main-row:not(.expanded) {
	border-top: 6px solid #f0f0f6;
	border-bottom: 2px solid #f0f0f6;
}

.main-row.expanded {
	border-top: 6px solid #f0f0f6;

}

.collapsed-table .collapse.show {
	display: contents;
}

.collapsed-table .main-row td:first-child {
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
}

.collapsed-table .main-row td:last-child {
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
}

.collapsed-table tbody {
	box-shadow: none;
}

/* Remove radius when expanded */
.collapsed-table .main-row.expanded td:first-child,
.collapsed-table .main-row.expanded td:last-child {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.collapsed-table .collapse td {
	border-radius: 0 0 10px 10px;
}

/* attachment  */
#attachmentSection {
	display: none;
}

/* CUSTOM DatePicker */
.flatpickr-current-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
	color: #494E50;
	font-size: 12px;
	font-weight: 500;
	line-height: 22px;
}

span.flatpickr-weekday {
	color: #424242;
	text-align: center;
	font-size: 10px;
	font-weight: 500;
	line-height: 16px;
}

.flatpickr-day.selected.startRange, .flatpickr-day.startRange.startRange {
	border-radius: 8px 0 0 8px;
}

.flatpickr-day.endRange.endRange {
	border-radius: 0 8px 8px 0;
}

.flatpickr-day.inRange {
	background: var(--primary-6, #F6F2FD);
	border-color: var(--primary-6, #F6F2FD);
	box-shadow: -5px 0 0 var(--primary-6, #F6F2FD), 5px 0 0 var(--primary-6, #F6F2FD);
}

.flatpickr-day.today {
	color: var(--primary-100, #5E1AD5);
	border: none;
}

.flatpickr-day.today::after {
	content: "";
	display: block;
	width: 5px;
	height: 5px;
	margin: 0 auto;
	margin-top: -8px;
	border-radius: 50%;
	background-color: var(--primary-100, #5E1AD5);
}

.flatpickr-weekdays .flatpickr-weekdaycontainer {
	border-radius: 12px;
	background: #F5F7FA;
	height: 40px;
	padding-top: 12px;
	margin-inline: 8px;
}

.flatpickr-weekdays {
	height: 40px;
}

.flatpickr-months .flatpickr-month {
	height: 45px;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
	background: var(--primary-100, #5E1AD5);
	border-color: var(--primary-100, #5E1AD5);
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay,
.flatpickr-day.notAllowed,
.flatpickr-day.notAllowed.prevMonthDay,
.flatpickr-day.notAllowed.nextMonthDay {
	color: var(--Neutral-200, #E2E8F0);
}

.flatpickr-day.selected.startRange+.endRange:not(:nth-child(7n+1)), .flatpickr-day.startRange.startRange+.endRange:not(:nth-child(7n+1)), .flatpickr-day.endRange.startRange+.endRange:not(:nth-child(7n+1)) {
	box-shadow: -10px 0 0 var(--primary-100, #5E1AD5);
}

.flatpickr-day {
	border-radius: 12px;
}

.flatpickr-day.endRange {
	background: #fff;
	color: var(---Text-Medium, #494E50);
}

.flatpickr-calendar.hasTime .flatpickr-time {
	justify-content: center;
	margin-bottom: 12px;
	border-top: none;
}

.flatpickr-time .numInputWrapper {
	flex: .22;
	-webkit-flex: .22;
	height: 30px;
}

.flatpickr-time .flatpickr-time-separator {
	width: 10%;
}

.flatpickr-time input,
.flatpickr-time .flatpickr-am-pm {
	border-radius: 4px;
	border: 1px solid #E5E7F0;
	background: #F5F7FA;
	color: #BDC0CC;
	height: 30px;
}

.flatpickr-time .flatpickr-am-pm {
	width: 16%;
	margin-inline: 16px;
	line-height: 24px;
}

.numInputWrapper span {
	border: none;
	height: 30px;
}

.numInputWrapper:hover {
	background: white;
}

.flatpickr-time input.flatpickr-hour:focus,
.flatpickr-time input.flatpickr-minute:focus {
	border: 1px solid var(--primary-100, #5E1AD5);
	background: var(--White, #FFF);
}

.flatpickr-current-month {
	padding: 11.48px 0 0 0;
}

.comments-body {
	padding: 16px;
	border-radius: 12px;
	background: var(--secondary-dark-blue-6, #F0F0F6);
}

.multi-attachment-catergories {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 16px;
	border-radius: 12px;
	background: var(--secondary-dark-blue-6, #F0F0F6);
}

.multi-attachment-catergories .card {
	border-radius: 8px;
	border: 1px solid var(--Neutral-200, #E2E8F0);
	box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.04);
}

.multi-attachment-catergories .attachment-text {
	overflow: hidden;
	color: var(--Text-Body, #1E293B);
	text-overflow: ellipsis;
	display: -webkit-box;
	width: 371px;
	-webkit-box-orient: vertical;
	line-clamp: 1;
	-webkit-line-clamp: 1;
	font-size: 14px;
	font-weight: 700;
	line-height: 24px;
}

.multi-attachment-catergories .upload-icons::before {
	font-size: 24px;
}

.multi-attachment-catergories .icon-cloud-upload {
	color: #8653E0;
	border-radius: 8px;
	border: 1px solid var(--Neutral-200, #E2E8F0);
	padding: 5px 12px 0;
	display: inline-block;
	height: 32px;
}

.multi-attachment-catergories .icon-cloud-upload::before {
	font-size: 20px;
}

.multi-attachment-catergories .icon-eye {
	color: #94A3B8;
	margin-inline: 8px;
}

.multi-attachment-catergories .icon-trash {
	color: #FB7185;
}

.status-circle {
	width: 10px;
	height: 10px;
	border-radius: 12px;
}

.pendding-status {
	background-color: #F59E0B;
}

.reject-status {
	background-color: #E11D48;
}

.complate-status {
	background-color: #2DD4BF;
}

.injected-details .text {
	font-size: 12px;
	color: #8080b1;
}

.injected-details .data {
	font-size: 12px;
	color: #000;
	font-weight: 700;
}

@media (max-width: 1200px) {
	.responsive-actions {
		position: static;
	}

	.responsive-actions .dropdown-menu {
		position: static !important;
		float: none;
		display: flex !important;
		flex-direction: row;
		gap: 8px;
		padding: 0;
		border: none;
		box-shadow: none;
		background: transparent;
	}

	.responsive-actions .dropdown-item {
		padding: 8px 12px !important;
		border-radius: 8px;
		border: 1px solid #e2e8f0;
		line-height: 16px;
	}

	.main-row:not(.expanded) {
		border: none;
	}
}

.back-btn-link {
	display: flex;
	gap: 8px;
	color: #475569;
	font-size: 16px;
	font-weight: 700;
	line-height: 26px;
	text-decoration: none;
}

.back-btn-link .icon-arrow-left::before {
	font-weight: 700;
}

@media (min-width: 992px) {
	.flatpickr-calendar.noCalendar.open {
	    width: 416px;
	}
}
@media (min-width: 576px) and (max-width: 991px) {
  .flatpickr-calendar.noCalendar.open {
    width: 252.875px;
  }
}
.loader-sample{
	border: 1px solid;
}
@media (max-width: 576px){
	.main-content .card{
		    margin-top: 68px;
	}
	.back-btn-link{
		font-size: 13px;
	}
}