/*
* demo.css
* File include item demo only specific css only
******************************************************************************/
:root {
	--darkGreen-color: rgb(2, 48, 22);
	--gradient-shadow: linear-gradient(45deg, #a1eb3e, #28c76f, #00ff00, #7acf4f, #10ff00, #afe792, #caf9c5, #00ff00, #b7e7a7, #b5e7a0);
	--bs-primary: #df9e01 !important;
	--dropShadow-color: rgb(39 45 42 / 60%);
}
.dark-style {
	--dropShadow-color: #a78c6687;
}

         



.darkGreenColor {
	color: var(--darkGreen-color) !important;
}
.modal.show {
	display: flex !important;
	align-items: center;
	justify-content: center;
}

.light-style .menu .app-brand.demo {
	height: 64px;
}

.dark-style .menu .app-brand.demo {
	height: 64px;
}

.app-brand-logo.demo {
	-ms-flex-align: center;
	align-items: center;
	-ms-flex-pack: center;
	justify-content: center;
	display: -ms-flexbox;
	display: flex;
	width: 34px;
	height: 24px;
}

	.app-brand-logo.demo svg {
		width: 35px;
		height: 24px;
	}

.app-brand-text.demo {
	font-size: 1.375rem;
}

/* ! For .layout-navbar-fixed added fix padding top tpo .layout-page */
/*.layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page {
  padding-top: 64px !important;
}
.layout-navbar-fixed .layout-wrapper:not(.layout-horizontal):not(.layout-without-menu) .layout-page {
  padding-top: 78px !important;
}

.layout-wrapper:not(.layout-horizontal) .menu-vertical .menu-inner > .menu-item .menu-sub .menu-sub .menu-link {
	padding-left: 3.4rem
}*/
.menu-vertical .menu-sub .menu-sub .menu-link {
	padding-left: 2.5rem !important;
}
/* Navbar page z-index issue solution */
.content-wrapper .navbar {
	z-index: auto;
}

/*
* Content
******************************************************************************/

.demo-blocks > * {
	display: block !important;
}

.demo-inline-spacing > * {
	margin: 1rem 0.375rem 0 0 !important;
}

/* ? .demo-vertical-spacing class is used to have vertical margins between elements. To remove margin-top from the first-child, use .demo-only-element class with .demo-vertical-spacing class. For example, we have used this class in forms-input-groups.html file. */
.demo-vertical-spacing > * {
	margin-top: 1rem !important;
	margin-bottom: 0 !important;
}

.demo-vertical-spacing.demo-only-element > :first-child {
	margin-top: 0 !important;
}

.demo-vertical-spacing-lg > * {
	margin-top: 1.875rem !important;
	margin-bottom: 0 !important;
}

.demo-vertical-spacing-lg.demo-only-element > :first-child {
	margin-top: 0 !important;
}

.demo-vertical-spacing-xl > * {
	margin-top: 5rem !important;
	margin-bottom: 0 !important;
}

.demo-vertical-spacing-xl.demo-only-element > :first-child {
	margin-top: 0 !important;
}

.rtl-only {
	display: none !important;
	text-align: left !important;
	direction: ltr !important;
}

[dir='rtl'] .rtl-only {
	display: block !important;
}

/* Dropdown buttons going out of small screens */
@media (max-width: 576px) {
	#dropdown-variation-demo .btn-group .text-truncate {
		width: 254px;
		position: relative;
	}

		#dropdown-variation-demo .btn-group .text-truncate::after {
			position: absolute;
			top: 45%;
			right: 0.65rem;
		}
}

/*
* Layout demo
******************************************************************************/

.layout-demo-wrapper {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	margin-top: 1rem;
}

.layout-demo-placeholder img {
	width: 900px;
}

.layout-demo-info {
	text-align: center;
	margin-top: 1rem;
}
/* CUSTOM EDITS STYLES */
.fs-16 {
	font-size: 16px !important;
}

.w-22 {
	width: 22px !important;
}

.h-22 {
	height: 22px !important;
}

.bg-menu-theme .menu-sub > .menu-item > .menu-link:before {
	content: '' !important;
}

.menu-vertical .menu-sub .menu-link {
	padding-left: 24px !important;
}

.bg-menu-theme.menu-vertical .menu-sub > .menu-item .menu-link .menu-icon {
	display: block !important;
	width: 24px;
}

.siteLandmark .card {
	min-height: 320px;
	height: 60vh;
}

	.siteLandmark .card h2 {
		font-size: 5rem;
	}

.logoContainer {
	width: 180px;
	height: 180px;
}

	.logoContainer img {
		width: 100%;
		height: 100%;
	}

@media screen and (max-width:720px) {
	.siteLandmark .card h2 {
		font-size: 2rem;
	}

	.logoContainer {
		width: 60px;
		height: 60px;
	}
}

.john-row {
	color: #7367f0 !important;
}

.imgCropModal {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	display: none;
	z-index: 9999;
}

.imgCropModalWrapper {
	width: 100%;
	height: 100%;
	background: #25252561;
	display: flex;
	align-items: center;
	justify-content: center;
	transform-origin: center;
	scale: 0;
	transition: 500ms all ease-in-out;
}

.imgCropModal .cropModalContent {
	position: relative;
	max-width: 720px;
	max-height: 720px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 16px;
	border-radius: 15px;
}

	.imgCropModal .cropModalContent .cr-boundary {
		border-radius: 15px;
		overflow: hidden;
	}

	.imgCropModal .cropModalContent > button {
		order: 2;
		padding: 8px 16px;
		border-radius: 15px;
		border: none;
	}

.cropModalContent img {
	width: 100%;
	height: 500px;
	object-fit: contain;
}



.imgCropModal.opened {
	display: block;
}

	.imgCropModal.opened .imgCropModalWrapper {
		scale: 1;
	}

.closeIcon {
	color: red;
	display: grid !important;
	place-content: center !important;
	font-size: 21px;
	border: 1px solid red;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	position: absolute;
	top: -24px;
	left: 50%;
	translate: 0 -50%;
	cursor: pointer;
}

.iconContainer {
	width: 22px;
	height: 22px;
	border-radius: 6px;
	padding: 16px;
	display: grid;
	place-content: center;
}

.iconHolder {
	display: inline-block;
	width: 16px;
	height: 16px;
	-webkit-mask-size: contain;
	mask-size: contain;
	background-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	background-color: #000;
}

.approvedIcon {
	-webkit-mask-image: url(../img/cicons/approved.svg);
	mask-image: url(../img/cicons/approved.svg);
	background-color: white;
}

.closedIcon {
	-webkit-mask-image: url(../img/cicons/closed.svg);
	mask-image: url(../img/cicons/closed.svg);
	background-color: white;
}

.onCloseIcon {
	-webkit-mask-image: url(../img/cicons/onclose.svg);
	mask-image: url(../img/cicons/onclose.svg);
	background-color: white;
}

.inProgressIcon {
	-webkit-mask-image: url(../img/cicons/inprogress.svg);
	mask-image: url(../img/cicons/inprogress.svg);
	background-color: white;
}

.requestedBgColor {
	color: white !important;
	background-color: #BDBDBD !important;
}

.approvedBgColor {
	color: white !important;
	background-color: #1ABC9C !important;
}

.inProgressBgColor {
	color: white !important;
	background-color: #388E3C !important;
}

.onHoldBgColor {
	color: white !important;
	background-color: #FFA500 !important;
}

.closedBgColor {
	color: white !important;
	background-color: #4C72B0 !important;
}


.requestedColor {
	color: #BDBDBD !important;
}

.approvedColor {
	color: #1ABC9C !important;
}

.inProgressColor {
	color: #388E3C !important;
}

.onHoldColor {
	color: #FFA500 !important;
}

.closedColor {
	color: #4C72B0 !important;
}

.redColor {
	color: #ea5455 !important;
}

.pendingReq {
	box-shadow: 0 0 2px 1px #eb5a5b !important;
}

.menu-icon.iconHolder {
	width: 16px !important;
	margin-right: 8px !important;
}

[data-farmselect] {
	width: 160px !important;
}

.loadingProducts {
	padding: 16px;
	display: flex;
	justify-content: center;
}

.swiper-button-prev, .swiper-button-next {
	background: white;
	width: 32px !important;
	height: 32px !important;
	border-radius: 50%;
	font-size: 12px;
}

	.swiper-button-prev::after, .swiper-button-next::after {
		font-size: 18px !important;
		text-align: center;
		color: #7367f0;
	}

.swiper-container .swiper-wrapper .swiper-slide {
	padding: 1.5rem 2.8rem !important;
}
.printFarmData .swiper-container .swiper-wrapper .swiper-slide {
	padding: 1.5rem 1.4rem !important;
}
.supervisorsChart, .totalChart {
	height: 100% !important;
}

.backBtnContainer {
	position: absolute;
	top: 8px;
	right: 8px;
}

	.backBtnContainer .btn {
		background-color: #8b5ba3 !important;
	}

.bgcolor-purple {
	background-color: #8b5ba3 !important;
}

table:has(.fixedCost) th {
	width: 50% !important;
}

.fixedCost {
	color: #7367f0 !important;
	font-weight: bold !important;
}

	.fixedCost p {
		margin: 0 auto !important;
		text-align: center !important;
		max-width: 320px !important;
	}

.msgEle {
	color: red !important;
	font-size: 13px !important;
	width: 100% !important;
	font-weight: normal !important;
}

.z-missionModal {
	z-index: 1091 !important;
}
/*.modal-dialog {
	width: var(--bs-modal-width) !important;
}*/

.flatpickr-monthSelect-month {
	color: unset !important;
}

.circleChartContainer {
	/*min-height: 620px;*/
	width: 100%;
	margin: 0 auto !important;
	padding: 16px !important;
	align-items: center !important;
	overflow: hidden !important;
	height: 54vh;
	
}
.circleChartItem{
	position: relative;
	display: flex;
	align-items: center !important;
	justify-content: center !important;
	/*margin: 88px 108px 140px !important;
	min-height: 400px;
	height: 54vh;*/
	height: 100%;
	flex : 1 0 420px;
}
.circleLine{
	position: relative;
	
	margin: 0 auto;
}
.circleLine:before {
	content: "";
	position: absolute;
	top: 0; left: 0;
	border: 3px dashed #5ee738;
	width: calc( 100% - 2px * 2);
	height: calc( 100% - 2px * 2 );
	border-radius: 50%;
}
.farms.circleLine:before{
	border: none
}
.circleLine .circle {
	position: absolute;
	top: 50%; left: 50%;
	width: 88px;
	height: 88px;
	margin: calc( -88px / 2 );
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: 9;
}
button.circle {
	border: none;
	background: transparent;
}
#farmMedia .modal-dialog {
	max-width: 72vw;
	width: 100%;
}
#farmMedia .modal-header {
	z-index: 999;
}
#farmMedia .modal-body {
	margin-top: -66px;
	padding: 7px;
}
#farmMedia .modal-content {
	width: 100%;
	overflow-y: auto;
	max-height: 96vh;
	height: 96vh;
	min-height: 400px;
	border-radius: 24px;
	background: #fffdf8 !important;
}
#farmMedia .close {
	background: #ff5b5b;
	border: none;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	color: white;
	font-size: 22px;
}
#farmMedia .mediaContainer {
	/*max-width: 580px;
	max-height: 580px;*/
	min-height: 320px;
	min-width: 320px;
	width: 100%;
	height: 100%;
	margin: 0 auto;
}
.videoContainer {
	max-width: 100% !important;
	aspect-ratio: 16 / 9;
}
#farmMedia .mediaContainer .farmMedia{
	width: 100%;
	height: 100%;
	object-fit: contain;
	aspect-ratio: 1;
}
video.farmMedia{
	border-radius: 24px;
}
#farmMedia .swiper-container .swiper-wrapper .swiper-slide {
	padding: 1.5rem 2.8rem 0 !important;
}
.circleInfotxtContainer {
	opacity: 0;
	text-align: center;
	font-size: 10px;
	font-weight: 600;
	color: black;
	transition: 250ms all ease-in-out;
}
.mediaStat{
	padding: 8px 16px;
	border-radius: 200px;
	text-align: center;
	font-size: 13px;
}
.mediaDate{
	color: black;
	line-height: 1;
}
.dark-style .mediaDate {
	color: white;
}
.mediaStat.Requested {
	background: #f4ca51;
	color: white;
}
.mediaStat.Approved , .mediaStat.Completed {
	background: #84be69;
	color: white;
}
.mediaStat.InProgress {
	background: #cb954b;
	color: white;
}
.mediaStat.OnHold {
	background: #ab89cc;
	color: white;
}
.mediaStat.Closed {
	background: #966e45;
	color: white;
}
.mediaStat.Cancelled {
	background: #9a9a9a;
	color: white;
}
.circleInfoTxt .circleInfoTxtTitle.productName{
	font-size: 16px;
}
.circleChartItem .circle:hover .circleInfotxtContainer {
	transform: translateY(-10px) scale(1.1);
}
.circleChartItem .circle:hover .circleInfoImgContainer {
	margin: 14px;
}
.circleInfotxtContainer.rightAligned {
	text-align: start;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: calc(100% - 2px);
}
.circleInfotxtContainer.leftAligned{
	text-align: start;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: calc( 100% - 2px );
	text-align: end;
}
.farmImgContainer {
	width: 280px;
	height: 280px;
	position: absolute;
	z-index: 0;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	filter: drop-shadow(0px 4px 8px rgb(39 45 42 / 47%));
	border-radius: 50%;
}

.farmImgContainer img{
	animation: pulse 2.5s linear infinite;
}
.farmImgContainer .farmImg{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.circleInfoImgContainer {
	margin: 8px;
	transition: 250ms all ease-in-out;
}
[data-circleinfo="farms"] .circleInfoImgContainer{
	border-radius: 50%;
	overflow: hidden;
	
	flex-shrink: 0;
}
.farmChart .farmImgContainer {
	box-shadow: none;
}
.farmChart .circle .circleInfotxtContainer {
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
}
.farmChart .circle{
	width: 48px;
	height: 48px;
	margin: calc(-48px / 2)
}
.farmChart .circle:hover .circleInfotxtContainer {
	opacity: 1;
}
.printFarmData [data-circleinfo="farms"] .circleInfoImgContainer {
	width: 36px;
	height: 36px;
}
.farmOtherInfo{
	margin-bottom: 24px;
}
.circleInfoImgContainer .circleInfoImg {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.circleInfoImgContainer .circleInfoImg:hover{
	transform: scale(1.1);
	transition: 0.3s ease-in-out;
}
#swiper-with-pagination-cards2 {
	background: white !important;
	height: 100% !important;
}
.dark-style #swiper-with-pagination-cards2 {
	background: #3f0154 !important;
}
#swiper-with-pagination-cards2.swiper-container.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
	background: rgb(102 223 185) !important;
}
#swiper-with-pagination-cards2.swiper-container.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active{
	background: #0c9d6f !important;
}
#swiper-with-pagination-cards2 .swiper-button-prev::after, #swiper-with-pagination-cards2 .swiper-button-next::after{
	color: #0c9d6f !important;
}
.fullHeightSlideRow {
	height: 100%;
	align-items: center;
	justify-content: flex-start;
	flex-direction: column;
	margin-bottom: -24px !important;
}
.supervisorContainer{
	flex: 1 0 364px;
	min-width: 180px;
	max-width: 364px;
	height: 100%;
}
.supervisorContainer p{
	margin-bottom: 0 !important;
}
.supervisorImgContainer {
	max-width: 264px;
	width: 100%;
	margin: 16px auto;
	height: 60%;
}
.supervisorImgContainer img{
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.sv_attentTitle{
	font-size: 12px;
	color: black;
}
.sv_attentPercent{
	font-size: 24px;
	color: black;
}
.farmWorkers{
	display: flex;
	align-items: center;
	justify-content: center;
	color: black;
}
.farmWorkers .iconImgContainer{
	width: 40px;
	height: 40px;
}
.farmWorkers p{
	margin-bottom: 0 !important;
}
.layout-navbar-fixed .layout-wrapper:not(.layout-horizontal) .layout-page:has(.printFarmData):before {
	display: none;
}
.datesFilter{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	flex-wrap: wrap;
	margin: 24px 4px;
}
.datesFilter input {
    border: none;
}
.datesFilter label {
	color: #cb9000;
    font-size: 16px !important;
	font-weight: bold !important;
	margin-right: 8px !important;
}
.dateIcon {
	width: 24px;
	height: 24px;
}
.dateIcon .dateImgIcon{
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.chosenDates {
	position: absolute;
	top: 2rem;
	right: 1rem;
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	z-index: 9;
}
.chosenDates p{
	margin-bottom: 0;
}
.printFarmData #swiper-with-pagination-cards2 {
	max-width: 1032px;
	margin: 0 auto;
	border-radius: 32px;
}
.printFarmData .circleChartContainer{
	height: 640px;
}
.printFarmData .supervisorContainer{
	flex: 1 0 220px;
}
.printFarmData  .circle .circleInfotxtContainer{
	opacity: 1;
}
.printFarmData .circleChartItem .circle{
	width: 56px;
	height: 56px;
	margin: calc(-56px / 2)
}
.printFarmData  .circle .productName{
	font-size: 12px;
}
.farmTitle{
	display: flex;
	align-items: center;
	justify-content: start;
	gap: 16px;
}
.farmTitle .locationTitle{
	color: black;
}
.printCircleButton {
	width: 48px;
	height: 48px;
	/*background-color: #ffd85f;*/
	border: none;
	border-radius: 50%;
	display: grid;
	place-content: center;
	outline: none;
}
.dark-style .printCircleButton{
	background: none !important;
}
.printCircleButton .printIconImg{
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: 0.2s;
	filter: drop-shadow(0px 4px 8px var(--dropShadow-color));
}
.printCircleButton:hover .printIconImg {
	filter: drop-shadow(4px 4px 8px var(--dropShadow-color));
}
.printCircleButton span {
	color: black;
}

@media print {
	.printCircleButton, .datesFilter {
		display: none !important;
	}
}
.attendAbsent {
	align-items: center;
	justify-content: center;
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
}
.attendAbsent a ,
.attendAbsent a:visited,
.attendAbsent a:hover,
.attendAbsent a:focus,
.attendAbsent a:active{
	color: inherit;
    text-decoration: none;
}
.attendAbsent > div > ul{
	display: flex;
	gap: 16px;
	align-items: center;
	flex-wrap: wrap;
} 
.attendAbsent p:not(.website-analytics-text-bg){
	color: black;
} 
.attendAbsent .circleInfoImgContainer{
	width: 72px;
	height: 72px;
	margin: 0;
}
.swiper-wrapper:has(.loadingProducts) {
	justify-content: center;
}
.farmOtherInfo .circleInfoImgContainer{
	max-width: 60px;
}
.farmOtherInfo .circle {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.farmOtherInfo .circle .circleInfotxtContainer{
	opacity: 1;
}
.shadow2 {
	display: flex;
	position: relative;
	padding: 8px !important;
	background: transparent !important;
}

.shadow2:before,
.shadow2:after {
	content: "";
	position: absolute;
	top: 4px;
	left: 2px;
	background-size: 400%;
	width: calc(100% - 4px);
	height: calc(100% - 4px);
	z-index: -1;
	background: var(--gradient-shadow);
	background-size: 400%;
	animation: animate 20s linear infinite;
	border-radius: 32px;
}

.shadow2:after {
	filter: blur(20px);
}

.shadow2.green:before,
.shadow2.green:after {
	--gradient-shadow: linear-gradient(45deg, #a1eb3e, #28c76f, #00ff00, #7acf4f, #10ff00, #afe792, #caf9c5, #00ff00, #b7e7a7, #b5e7a0);
}

.shadow2.yellow:before,
.shadow2.yellow:after {
	--gradient-shadow: linear-gradient(45deg, #ffeb3b, #ffca28, #ffd740, #fff59d, #ffe082, #fdd835, #ffcc80, #ffee58, #fff176, #ffc107);
}

.shadow2.red:before,
.shadow2.red:after {
	--gradient-shadow: linear-gradient(45deg, #ff1744, #ff8a80, #ff5252, #f44336, #ff6e40, #e57373, #ff4081, #ef5350, #e53935, #d32f2f);    
}
.printFarmData .shadow2{
	max-width: 1032px;
	margin: 0 auto;
}
.swiper-slide{
	overflow: hidden !important;
}
.swiper-slide .fullHeightSlideRow {
	opacity: 0;
	transform: translate(-80px, 0);
	transition: 750ms all ease-in-out;
	flex-wrap: nowrap !important;
}
.swiper-slide-active .fullHeightSlideRow {
	opacity: 1;
	transform: translate(0px, 0);
}
.productLine {
	max-width: 272px;
	width: 100%;
	display: flex;
	align-items: center;
	gap: 8px;
	top: 50%;
	left: 50%;
}
.productLine .circle{
	position: unset;
	width: 88px;
    height: 88px;
    margin: 0;
}
.leftLine{
	left: -24% !important;
	justify-content: flex-end;
}
.topLine {
	left: 14%;
	top: 40%;
}
.bottomLine {
	left: 14%;
	top: 64%;
}
.farms .farmImgContainer {
	box-shadow: none;
}
@keyframes animate {
	0% {
		background-position: 0 0;
	}

	50% {
		background-position: 300% 0;
	}

	100% {
		background-position: 0 0;
	}
}

@keyframes bounceCircle {
	0%, 100%{
		transform: translateY(-2px); 
	}
	50% {
		transform: translateY(2px); 
	}
}
@keyframes rotateCircle {
	0% , 100%{
		transform: rotate(0deg); 
	}
	50% {
		transform: rotate(-360deg); 
	}
}
.swiper-slide-active .circleLine:before {
	animation: rotateCircle 300s linear infinite;
}
.swiper-slide-active .circleInfoImgContainer {
	animation: bounceCircle 1s ease-in-out infinite;
}
@media screen and (max-width: 420px) {
	.circleChartContainer {
		padding: 16px !important;
	}
}
@media screen and (max-width: 768px) {
	.fullHeightSlideRow {
		margin-top: 16px !important;
	}
	.circleChartItem{
		margin: 72px 8px !important;
	}
	.circleLine .circle{
		width: 56px;
		height: 56px;
		margin: calc( -56px / 2 );
	}
	.circleInfotxtContainer{
		opacity: 0;
		transition: opacity 0.3s ease-in-out;
		width: fit-content;
		background: #ffffff8c;
		padding: 4px;
		border-radius: 3px;
	}
	.circle:hover .circleInfotxtContainer{
		opacity: 1;
		transition: opacity 0.3s ease-in-out;
	}
	.circle:hover .circleInfotxtContainer.rightAligned .circleInfoTxt , .circle:hover .circleInfotxtContainer.leftAligned .circleInfoTxt{
		display: flex;
		flex-direction: column;
	}
	.circle:hover .circleInfotxtContainer.rightAligned{
		top: -25px;
		transform: translateY(-50%) translateX(-50%);
		left: 0;
		text-align: start;
	}
	.circle:hover .circleInfotxtContainer.leftAligned{
		top: -25px;
		transform: translateY(-50%) translateX(-50%);
		right: unset;
		left: 100%;
		text-align: start;
	}
	.circle[data-circleinfo="supervisor"]:hover .circleInfotxtContainer{
		position: absolute;
		top: -25px;
		transform: translate(-50% , -50%);
		left: 50%;
		text-align: center;
	}
	.farmImgContainer{
		min-width: 116px;
		min-height: 116px;
		z-index: -1;
	}
	.swiper-container .swiper-wrapper .swiper-slide {
		padding: 1.5rem 8px !important;
	}
}

.mobileVersion {
	display: none !important;
}
.farmsPart1, .farmsPart2{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 16px;
	max-width: 820px;
	margin: 0 auto;
}

@media screen and (max-width: 1100px) {
	.circleChartContainer{
		height: auto;
	}
	.fullHeightSlideRow{
		justify-content: space-around;
	}
	.circleChartItem, .supervisorContainer {
		height: auto;
		min-height: 400px;
	}
	
	.farms .farmImgContainer {
		box-shadow: none;
		position: relative;
		top: unset;
		left: unset;
		margin: 16px auto;
		transform: unset;
	}
	.desktopVersion{
		display: none !important;
	}
	.mobileVersion {
		display: block !important;
	}
	.mobileVersion .circleInfotxtContainer{
		opacity: 1;
	}
}
.homePage .swiper-container.swiper-card-advance-bg , .homePage .card{
	border-radius: 32px !important;
}
.iconImgContainer{
	width: 48px;
	height: 48px;
}
.iconImgContainer1 {
	width: 54px;
	height: 54px;
}
.iconImg{
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.navbar-detached{
	box-shadow: none !important;
}
.layout-navbar {
	box-shadow: none !important;
	backdrop-filter: unset !important;
}
.layout-navbar.bg-navbar-theme{
	background-color: unset !important;
}
.lightWhiteBG {
	background: #f8f8ee;
	padding: 0px 8px;
	border-radius: 6px;
}
.lightWhiteBG.farmOtherInfo{
	width: unset;
	padding: 8px 24px;
}
.farmOtherInfo .circleInfoImgContainer {
	filter: drop-shadow(0px 4px 8px var(--dropShadow-color));
	border-radius: 50%;
}
.yellowGrayBG {
	background: radial-gradient(at 0% 0%, rgb(241 240 240) 25%, rgb(255, 245, 184));
}
.dark-style .yellowGrayBG {
	background: radial-gradient(at 0% 0%, #8325a7 25%, #3f0154);
	color: white;
}
.dark-style .yellowGrayBG p, .dark-style .yellowGrayBG h4 , .dark-style .yellowGrayBG h5, .dark-style .yellowGrayBG h6, .dark-style .yellowGrayBG span {
	color: white !important;
}
.yellowGrayBG .card{
	background-color: #ffffff66 !important;
}
.dark-style .yellowGrayBG .card, .dark-style .yellowGrayBG .otherStatisticsCards {
	background-color: #430359 !important;
}
.otherStatisticsCards .card .iconImgContainer {
	width: 72px;
	height: 72px;
	border-radius: 50% !important;
	filter: drop-shadow(0px 4px 8px var(--dropShadow-color));
}
.yellowGrayBG .otherStatisticsCards {
	background-color: #ffffff66 !important;
	box-shadow: 0 .25rem 1.125rem rgba(75,70,92,.1) ;
	border-radius: 32px;
	margin: 0 auto;
}
.yellowGrayBG .otherStatisticsCards .card{
	background-color: unset !important;
	color: black;
	box-shadow: unset;
}
.c1_container {
	padding: 40px 4px 32px;
	border-radius: 32px;
	box-shadow: #b3a86947 0px 4px 20px;
	margin-left: auto !important;
	margin-right: auto !important;
	margin-top: 40px !important;
}
/*

[data-swipercardscircles]{
	height: 86vh !important;
}
.farmChart .circleChartItem {
	margin: 56px 80px 56px !important;
}*/
.circlePreview {
	position: absolute;
	pointer-events: none;
	transform: translate(-50%, -50%) scale(0);
	opacity: 0;
	z-index: 1000;
	transition: transform 0.5s, opacity 0.5s;
	z-index: 1000;
	max-width: 420px;
	width: 100%;
	aspect-ratio: 1;
	left: 45% !important;
	top: 50% !important;
	background: #ffffffc7;
	border-radius: 50%;
	padding: 16px;
}
#swiper-with-pagination-cards2:has(.swiper-slide-active .farmChart) .circlePreview{
	left: 50% !important;
}
.circlePreview img {
	width: 100%;
	height: 80%;
	object-fit: contain;
}

.circlePreview.show {
	transform: translate(-50%, -50%) scale(1);
	opacity: 1;
}
.circlePreview.show .circleInfotxtContainer{
	opacity: 1;
}
.circlePreview.show .circleInfoTxtValue{
	font-size: 24px;
}
img.menu-icon.menuIconImg {
	width: 32px !important;
	margin-right: 8px !important;
}
button:has(.excelIconImg) {
	background: transparent !important;
	width: 48px;
	height: 48px;
	margin-left: 4px;
	margin-right: 4px;
}
.excelIconImg{
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.pageTitleContainer {
	display: flex;
	gap: 16px;
	align-items: center;
	flex-wrap: wrap;
	margin-bottom: 24px;
	margin-top: 16px;
}
.pageIconImgContainer {
	width: 54px;
	height: 54px;
}
.pageIconImg {
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: drop-shadow(0px 4px 8px var(--dropShadow-color));
	transition: 0.2s;
}
.pageTitle{
	margin: 0;
}

.pageIconImgContainer:hover .pageIconImg {
	filter: drop-shadow(0px 8px 8px var(--dropShadow-color));
}
.farmMediaContainer{
	height: 100% !important;
}
.mediaTitleHead {
	white-space: normal;
}
.farmMediaLoadingStat{
	height: 400px;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 9;
}

.tooltipContainer{
	position: relative;
}
.tooltipTxt {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 16px;
	background: #0000009e;
	line-height: 1.6;
	color: white;
	border-radius: 4px;
	font-size: 12px;
	padding: 4px 8px;
	width: max-content;
	text-align: center;
	opacity: 0;
	visibility: hidden;
	transition: all 150ms ease-in-out;
}
.tooltipContainer:hover .tooltipTxt {
	opacity: 1;
	visibility: visible;
	transition: all 150ms ease-in-out;
}

.swiper-pagination .tooltipContainer:last-child .tooltipTxt {
	transform: translateX(-100%);
}