/*base */
.border-0{border:0!important}.w-25{width:25%!important}.w-50{width:50%!important}.w-75{width:75%!important}.w-100{width:100%!important}.w-auto{width:auto!important}.h-25{height:25%!important}.h-50{height:50%!important}.h-75{height:75%!important}.h-100{height:100%!important}.h-auto{height:auto!important}.mw-100{max-width:100%!important}.mh-100{max-height:100%!important}.min-vw-100{min-width:100vw!important}.min-vh-100{min-height:100vh!important}.vw-100{width:100vw!important}.vh-100{height:100vh!important}.m-0{margin:0!important}.mt-0,.my-0{margin-top:0!important}.mr-0,.mx-0{margin-right:0!important}.mb-0,.my-0{margin-bottom:0!important}.ml-0,.mx-0{margin-left:0!important}.m-1{margin:.25rem!important}.mt-1,.my-1{margin-top:.25rem!important}.mr-1,.mx-1{margin-right:.25rem!important}.mb-1,.my-1{margin-bottom:.25rem!important}.ml-1,.mx-1{margin-left:.25rem!important}.m-2{margin:.5rem!important}.mt-2,.my-2{margin-top:.5rem!important}.mr-2,.mx-2{margin-right:.5rem!important}.mb-2,.my-2{margin-bottom:.5rem!important}.ml-2,.mx-2{margin-left:.5rem!important}.m-3{margin:1rem!important}.mt-3,.my-3{margin-top:1rem!important}.mr-3,.mx-3{margin-right:1rem!important}.mb-3,.my-3{margin-bottom:1rem!important}.ml-3,.mx-3{margin-left:1rem!important}.m-4{margin:1.5rem!important}.mt-4,.my-4{margin-top:1.5rem!important}.mr-4,.mx-4{margin-right:1.5rem!important}.mb-4,.my-4{margin-bottom:1.5rem!important}.ml-4,.mx-4{margin-left:1.5rem!important}.m-5{margin:3rem!important}.mt-5,.my-5{margin-top:3rem!important}.mr-5,.mx-5{margin-right:3rem!important}.mb-5,.my-5{margin-bottom:3rem!important}.ml-5,.mx-5{margin-left:3rem!important}.p-0{padding:0!important}.pt-0,.py-0{padding-top:0!important}.pr-0,.px-0{padding-right:0!important}.pb-0,.py-0{padding-bottom:0!important}.pl-0,.px-0{padding-left:0!important}.p-1{padding:.25rem!important}.pt-1,.py-1{padding-top:.25rem!important}.pr-1,.px-1{padding-right:.25rem!important}.pb-1,.py-1{padding-bottom:.25rem!important}.pl-1,.px-1{padding-left:.25rem!important}.p-2{padding:.5rem!important}.pt-2,.py-2{padding-top:.5rem!important}.pr-2,.px-2{padding-right:.5rem!important}.pb-2,.py-2{padding-bottom:.5rem!important}.pl-2,.px-2{padding-left:.5rem!important}.p-3{padding:1rem!important}.pt-3,.py-3{padding-top:1rem!important}.pr-3,.px-3{padding-right:1rem!important}.pb-3,.py-3{padding-bottom:1rem!important}.pl-3,.px-3{padding-left:1rem!important}.p-4{padding:1.5rem!important}.pt-4,.py-4{padding-top:1.5rem!important}.pr-4,.px-4{padding-right:1.5rem!important}.pb-4,.py-4{padding-bottom:1.5rem!important}.pl-4,.px-4{padding-left:1.5rem!important}.p-5{padding:3rem!important}.pt-5,.py-5{padding-top:3rem!important}.pr-5,.px-5{padding-right:3rem!important}.pb-5,.py-5{padding-bottom:3rem!important}.pl-5,.px-5{padding-left:3rem!important}.m-n1{margin:-.25rem!important}.mt-n1,.my-n1{margin-top:-.25rem!important}.mr-n1,.mx-n1{margin-right:-.25rem!important}.mb-n1,.my-n1{margin-bottom:-.25rem!important}.ml-n1,.mx-n1{margin-left:-.25rem!important}.m-n2{margin:-.5rem!important}.mt-n2,.my-n2{margin-top:-.5rem!important}.mr-n2,.mx-n2{margin-right:-.5rem!important}.mb-n2,.my-n2{margin-bottom:-.5rem!important}.ml-n2,.mx-n2{margin-left:-.5rem!important}.m-n3{margin:-1rem!important}.mt-n3,.my-n3{margin-top:-1rem!important}.mr-n3,.mx-n3{margin-right:-1rem!important}.mb-n3,.my-n3{margin-bottom:-1rem!important}.ml-n3,.mx-n3{margin-left:-1rem!important}.m-n4{margin:-1.5rem!important}.mt-n4,.my-n4{margin-top:-1.5rem!important}.mr-n4,.mx-n4{margin-right:-1.5rem!important}.mb-n4,.my-n4{margin-bottom:-1.5rem!important}.ml-n4,.mx-n4{margin-left:-1.5rem!important}.m-n5{margin:-3rem!important}.mt-n5,.my-n5{margin-top:-3rem!important}.mr-n5,.mx-n5{margin-right:-3rem!important}.mb-n5,.my-n5{margin-bottom:-3rem!important}.ml-n5,.mx-n5{margin-left:-3rem!important}.m-auto{margin:auto!important}.mt-auto,.my-auto{margin-top:auto!important}.mr-auto,.mx-auto{margin-right:auto!important}.mb-auto,.my-auto{margin-bottom:auto!important}.ml-auto,.mx-auto{margin-left:auto!important}.text-dark{color:#000!important}.text-white{color:#fff!important}.align-items-center{-ms-flex-align:center!important;align-items:center!important}.bg-transparent{background-color:transparent!important}.font-weight-bold{font-weight:700!important}.bg-primary{background-color:#007bff!important}.flex2{flex:2}.d-flex{display:-ms-flexbox!important;display:flex!important}.flex-wrap{-ms-flex-wrap:wrap!important;flex-wrap:wrap!important}.align-middle{vertical-align:middle!important}.table-borderless tbody+tbody,.table-borderless td,.table-borderless th,.table-borderless thead th{border:0!important}.zk-tbl .widget-content{padding:1rem;flex-direction:row;align-items:center}.zk-tbl .widget-content .widget-content-wrapper{display:flex;flex:1;position:relative;align-items:center}.zk-tbl .widget-content .widget-content-right{margin-left:auto}.card{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;min-width:0;word-wrap:break-word;background-color:#fff;background-clip:border-box;border-radius:.25rem}.card-header{padding:.75rem 1.25rem;margin-bottom:0;;height:auto;min-height:55px;line-height:40px;text-transform:uppercase}.card-body{-ms-flex:1 1 auto;flex:1 1 auto;min-height:1px;padding:1.25rem}.card-footer{padding:.75rem 1.25rem;line-height:35px}.justify-content-center{-ms-flex-pack:center!important;justify-content:center!important}.scrollbar-container{position:relative;height:100%}.scroll-area{overflow-x:hidden;height:400px;background:transparent!important}[class*=scroll-area-]::-webkit-scrollbar{width:5px;background:transparent!important}[class*=scroll-area-]::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.5)!important;box-shadow:inset 0 0 6px rgba(0,0,0,.5)!important;border-radius:20px!important;background:transparent!important}[class*=scroll-area-]::-webkit-scrollbar-thumb{border-radius:20px!important;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.5)!important;box-shadow:inset 0 0 6px rgba(0,0,0,.5)!important;background:rgba(39,43,62,.5)!important;visibility:hidden!important}.card-bg:hover .scroll-area-lg::-webkit-scrollbar-thumb,.card-bg:hover .scroll-area-md::-webkit-scrollbar-thumb,.card-bg:hover .scroll-area-sm::-webkit-scrollbar-thumb,.easy-card-bg:hover .scroll-area-lg::-webkit-scrollbar-thumb,.easy-card-bg:hover .scroll-area-md::-webkit-scrollbar-thumb,.easy-card-bg:hover .scroll-area-sm::-webkit-scrollbar-thumb{visibility:visible!important;transition:all 1s ease!important}​ .scroll-area-xs{height:150px;overflow-x:hidden}.scroll-area-sm{height:200px;overflow-x:hidden}.scroll-area-md{height:330px;overflow-x:hidden}.scroll-area-lg{height:400px;overflow-x:hidden}
/* Base end */

/* Attendance & Pandemic Dashboard */
@font-face {
	font-family: 'Roboto';
	src: url('../fonts/roboto.css');
	src: url('../fonts/roboto/v20/KFOkCnqEu92Fr1MmgVxFIzIFKw.woff2') format('woff2');
}

html,
body {
	height: 100%;
	margin: 0;
}


.attendance-pandemic-dashboard {
	background: #F3F5FA;
}

.attendance-dashboard,
.pandemic-dashboard {
	-webkit-box-sizing: border-box !important;
	-moz-box-sizing: border-box !important;
	box-sizing: border-box !important;
	font-family: 'Roboto', sans-serif;
	font-style: normal;
}

/* Attendance-Pandemic Tabs */

.attendance-pandemic-dashboard .nav {
	width: auto !important;
	height: auto !important;
	background: transparent !important;
	transition: all 0.3s;
	position: static !important;
	top: auto !important;
	left: auto !important;
}

.easy-nav-tabs {
	margin: 0 auto;
	border: 0 !important;
}

.easy-nav-tabs>li>a {
	padding: 5px 10px;
	background: #474B4F;
	color: #FFF;
	border: 0 !important;
	border-radius: 5px;
	font-size: 12px;
}

.easy-nav-tabs>li.active>a {
	background-color: #7AC143;
	color: #FFF;
	border-radius: 5px;
	border: 0 !important;
	z-index: 1;
}

.easy-nav-tabs>li:first-child>a {
	border-radius: 5px 0px 0px 5px;
}

.easy-nav-tabs>li>a:focus,
.easy-nav-tabs>li>a:hover {
	text-decoration: none;
	background-color: #474B4F;
}

.easy-nav-tabs>li.active>a,
.easy-nav-tabs>li.active>a:focus,
.easy-nav-tabs>li.active>a:hover {
	border: 0 !important
}

.easy-nav-tabs>li:last-child>a {
	border-radius: 0px 5px 5px 0px;
	margin-left: -5px;
}

.easy-nav-tabs>li:first-child>a {
	border-radius: 5px 0px 0px 5px;
}

.easy-nav-tabs>li>a:active,
.easy-nav-tabs>li>a:focus {
	background: #7AC143;
	color: #FFF;
	border: 0;
}

.easy-nav-tabs>li.active>a {
	background-color: #7AC143;
	color: #FFF;
	border-radius: 5px;
	border: 0;
}

.easy-nav-tabs>li.active>a:hover,
.easy-nav-tabs>li.active>a:active,
.easy-nav-tabs>li.active>a:focus {
	background-color: #7AC143;
	color: #FFF;
	border: 0;
	border-radius: 5px;
}


/* Tab end */

.company-details-area {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
}

.current-company,
.current-time {
	font-size: 1.5em !important;
	color: rgb(71, 75, 79);
	font-family: Helvetica, Tahoma, Arial, sans-serif !important;
	padding: 12px 0 !important;
	margin: 0 10px;
}


/* Real Time Data */

.real-time-data>div>div>ul>li,
.todays-birthday>div>div>div>ul>li,
.pandemic-rt-data>div>div>ul>li {
	border-bottom: 1px solid #EEEEEE;
	padding: 5px 0;
}

.real-time-data .data-list .emp-name,
.todays-birthday .data-list .emp-name,
.pandemic-rt-data .data-list .emp-name {
	font-size: 16px;
}

.real-time-data .data-list .emp-address,
.pandemic-rt-data .data-list .emp-address {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	width: 220px;
}

.real-time-data .data-list li,
.todays-birthday .data-list li,
.pandemic-rt-data .data-list li {
	font-size: 12px;
	color: #474B4F;
	line-height: 20px;
}

.real-time-data .data-list li i,
.todays-birthday .data-list li i,
.pandemic-rt-data .data-list li i {
	font-size: 14px;
	color: #7AC143;
	margin-right: 5px;
}

.real-time-data .data-list .img-camera,
.pandemic-rt-data .data-list .img-camera {
	width: 20px;
	margin-top: -4px;
	margin-left: 4px;
}

.real-time-data .data-list .img-no-camera,
.pandemic-rt-data .data-list .img-no-camera {
	width: 17px;
	margin-top: -2px;
	margin-left: 5px;
}

.pandemic-rt-data .mask-img {
	margin-right: 4px;
}

.pandemic-rt-data .abnormal-data .abnormal-temp,
.pandemic-rt-data .abnormal-data .abnormal-temp i {
	color: #FE4902;
}

.pandemic-rt-data .normal-data .avatar-img img {
	border: 2px solid #7AC043;
}

.pandemic-rt-data .abnormal-data .avatar-img img {
	border: 2px solid #FE4902;
}

.avatar-img img {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	margin-right: 10px;
}

.attendance-dashboard .overall-stats ul li {
	font-size: 14px;
	line-height: 24px !important;
}

.pandemic-dashboard .overall-stats,
.attendance-dashboard .overall-stats {
	min-height: 410px;
}

.overall-stats .card-body div div {
	margin-bottom: 2.5px;
}

.overall-stats .icon-box {
	width: 44px;
	height: 44px;
	background: #7AC043;
	box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.13);
	border-radius: 50%;
	margin-right: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.overall-stats .icon-box img {
	width: 24px;
	height: auto;
}

.overall-stats .count {
	font-size: 22px !important;
	font-weight: bold;
	color: #474B4F;
}


/* events timeline */

.events-timeline .timeline>li {
	border-bottom: 1px solid #EEEEEE;
	padding-bottom: 10px;
}

.events-timeline .date-data-list {
	margin-left: -10px;
	margin-right: 30px;
}

.events-timeline .date-data-list .events-time {
	font-size: 16px;
}

.events-timeline .data-list .events-title {
	font-size: 16px;
	margin-left: 5px;
}

.events-timeline .data-list .emp-address {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	width: 220px;
}

.events-timeline .data-list li {
	font-size: 12px;
	color: #474B4F;
	line-height: 20px;
}

.events-timeline .data-list li i {
	font-size: 14px;
	color: #7AC143;
	margin-right: 5px;
}

.events-timeline ul.timeline {
	list-style-type: none;
	position: relative;
	padding-left: 40px !important;
}

.events-timeline ul.timeline:before {
	content: ' ';
	background: #d4d9df;
	display: inline-block;
	position: absolute;
	left: 29px;
	width: 2px;
	height: 100%;
	z-index: 400;
}

.events-timeline ul.timeline>li {
	margin: 20px 0;
	padding-left: 20px;
}

.events-timeline ul.timeline>li:before {
	content: ' ';
	background: #7AC043;
	display: inline-block;
	position: absolute;
	border-radius: 50%;
	border: 3px solid #FFF;
	left: 20px;
	width: 20px;
	height: 20px;
	z-index: 400;
}


/* events timeline end */


/* Device Switch */

.device-status .switch {
	position: relative;
	display: inline-block;
	width: 50px;
	height: 21px;
	top: 6px;
}

.device-status .switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

.device-status .slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: .4s;
	transition: .4s;
}

.device-status .slider:before {
	position: absolute;
	content: "";
	height: 14px;
	width: 14px;
	left: 4px;
	bottom: 4px;
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
}

.device-status input:checked+.slider {
	background-color: #7AC043;
}

.device-status input:focus+.slider {
	box-shadow: 0 0 1px #7AC043;
}

.device-status input:checked+.slider:before {
	-webkit-transform: translateX(28px);
	-ms-transform: translateX(28px);
	transform: translateX(28px);
}


/* Rounded sliders */

.device-status .slider.round {
	border-radius: 34px;
}

.device-status .slider.round:before {
	border-radius: 50%;
}


/* Switch end */


/* Cards Background */

.card-bg {
	background: #FFFFFF;
	border-radius: 8px;
	padding: 5px 0;
	box-shadow: 0 0 15px 1px rgb(104 104 104 / 15%);
}

.card-bg .card-header {
	font-family: 'Roboto', sans-serif;
	font-weight: 500;
	color: #474B4F;
	font-size: 15px !important;
}

.expand-icon {
	width: 21px;
	height: 21px;
	position: absolute;
	right: 15px;
	top: 18px;
}

.card-header i.fa {
	color: #7AC043;
	margin-right: 10px;
}

.card.text-white .card-header {
	background: transparent !important;
	color: rgba(255, 255, 255, 1);
	border-radius: 30px;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.card.text-white .card-footer {
	background: transparent !important;
	color: rgba(255, 255, 255, 0.9);
	border-radius: 30px;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}


/* Department Statistics - Progres Bar */

.progress {
	width: 120px;
	height: 120px;
	background: none;
	position: relative;
}

.progress::after {
	content: "";
	width: 100%;
	height: 100%;
	border-radius: 50%;
	border: 6px solid rgba(255, 255, 255, 0.9);
	position: absolute;
	top: 0;
	left: 0;
}

.progress>span {
	width: 50%;
	height: 100%;
	overflow: hidden;
	position: absolute;
	top: 0;
	z-index: 1;
}

.progress .progress-left {
	left: 0;
	border-top-left-radius: 50px;
}

.progress .progress-bar {
	width: 100%;
	height: 100%;
	background: none;
	border-width: 6px;
	border-style: solid;
	position: absolute;
	top: 0;
}

.progress .progress-left .progress-bar {
	left: 100%;
	border-top-right-radius: 80px;
	border-bottom-right-radius: 80px;
	border-left: 0;
	-webkit-transform-origin: center left;
	transform-origin: center left;
}

.progress .progress-right {
	right: 0;
}

.progress .progress-right .progress-bar {
	left: -100%;
	border-top-left-radius: 80px;
	border-bottom-left-radius: 80px;
	border-right: 0;
	-webkit-transform-origin: center right;
	transform-origin: center right;
}

.progress .progress-value {
	position: absolute;
	top: 0;
	left: 0;
}

.circular-progress-bar {
	border-radius: 1rem;
}

.circular-progress-bar .progress {
	box-shadow: none !important;
}

.height-100 {
	height: 100% !important;
}

.pb-value {
	font-size: 2rem;
	font-weight: bold;
	color: #000;
	text-align: center;
	transition: all 0.5s;
}

.dept-stats-count {
	font-size: 30px;
	font-weight: bold;
	color: #474B4F;
}

.dept-stats-percent {
	font-size: 15px;
	font-weight: 500;
}

.dept-stats-trend {
	width: 25px;
	height: 25px;
	padding: 5px;
	border-radius: 50%;
	display: inline-flex;
	justify-content: center;
	align-items: center;
}

.dept-stats-title {
	margin-bottom: 10px;
	margin-top: 10px;
	text-transform: capitalize;
	font-size: 15px;
	font-weight: 500;
	color: #474B4F;
	width: 120px;
}

.department-statistics .high,
.department-statistics .warning,
.department-statistics .normal {
	border-right: 2px solid #EEEEEE;
	border-radius: 0;
}

.department-statistics .progress::after {
	border: 6px solid #F0F3F5;
}

.department-statistics .high .progress-bar {
	border-color: #FF0000;
}

.department-statistics .high .dept-stats-trend {
	background: rgba(255, 0, 0, 0.2);
}

.department-statistics .high .dept-stats-percent,
.department-statistics .high .pb-value {
	color: #FF0000;
}

.department-statistics .warning .progress-bar {
	border-color: #FFBA00;
}

.department-statistics .warning .dept-stats-trend {
	background: rgba(255, 186, 0, 0.2);
}

.department-statistics .warning .dept-stats-percent,
.department-statistics .warning .pb-value {
	color: #FFBA00;
}

.department-statistics .normal .progress-bar {
	border-color: #7AC143;
}

.department-statistics .normal .dept-stats-trend {
	background: rgba(122, 193, 67, 0.2);
}

.department-statistics .normal .dept-stats-percent,
.department-statistics .normal .pb-value {
	color: #7AC143;
}

.department-statistics .no-mask .progress-bar {
	border-color: #5FC9CC;
}

.department-statistics .no-mask .dept-stats-trend {
	background: rgba(95, 201, 204, 0.2);
}

.department-statistics .no-mask .dept-stats-percent,
.department-statistics .no-mask .pb-value {
	color: #5FC9CC;
}

@media (max-width:767px) {
	.department-statistics .high,
	.department-statistics .warning,
	.department-statistics .normal {
		border-right: 0;
	}
}

@media (max-width:1299px) {
	.first-container {
		margin-left: 15px !important;
		margin-right: 15px !important;
	}
}

@media (min-width:1330px) and (max-width:1599px) {
	.attendance-dashboard .overall-stats {
		height: 410px;
	}
}

@media (min-width:320px) and (max-width:480px) {
	.first-container {
		margin-left: 5px !important;
		margin-right: 5px !important;
	}
}

@media (min-width:481px) and (max-width:767px) {
	.first-container {
		margin-left: 5px !important;
		margin-right: 5px !important;
	}
}

@media (min-width:1300px) and (max-width:1399px) {
	.first-container {
			/* margin-left: 20px !important;*/
		margin-right: 20px !important;
	}
}

@media (min-width:1400px) and (max-width:1799px) {
	.first-container {
		/* margin-left: 50px !important; */
		margin-right: 30px !important;
	}
}

@media (min-width:1800px) {
	.progress {
		width: 150px;
		height: 150px;
	}
}

.first-container {
	margin-right: 30px;
	margin-left: 30px;
}

.online {
	color: #8cc63f;
    font-weight: bold;
}

.offline {
	color: #eb1c24;
    font-weight: bold;
}