@import url(https://fonts.googleapis.com/css?family=Merriweather+Sans);
@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
body {font-family: 'poppins', sans-serif;}

:root {
	--yellow: #FBD38D;
	--red: #F56565;
	--blue: #63B3ED;
	--violet: #6f42c1;
}
label.error {
	color:#5a5c69;
	font-size:12px;
	line-height:normal;
	width:100%;
}
input.error{
	width:100% !important;
}
.loaderContainer {
	margin:0;
	height:100%;
	background-color:#1a1940;
	background-image:linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,153,212,0) calc(15% + 100px), rgba(0,99,138,0) calc(85% + 100px), rgba(0,0,0,0.15) 100%);
	width:100%;
	position:fixed;
	top:0;
	right:0;
	z-index:9999;
}
div.loaderContainer{
	display:flex;
	justify-content:center;
	align-items:center;
}
div.loaderContainer div{
	width:3vw;
	height:3vw;
	border-radius:100%;
	margin:2vw;
	background-image:linear-gradient(145deg, rgba(255,255,255,0.5) 0%, rgba(0,0,0,0) 100%);
	animation:bounce 1.5s 0.5s linear infinite;
}
.yellow {
	background-color:var(--yellow);
}
.red {
	background-color:var(--red);
	animation-delay:0.1s;
}
.blue {
	background-color:var(--blue);
	animation-delay:0.2s;
}
.violet {
	background-color:var(--violet);
	animation-delay:0.3s;
}
@keyframes bounce {
	0%, 50%, 100% {
		transform:scale(1);
		filter:blur(0px);
	}
	25% {
		transform:scale(0.6);
		filter:blur(3px);
	}
	75% {
		filter:blur(3px);
		transform:scale(1.4);
	}
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance:none;
	margin:0;
}
input[type=number] {
	-moz-appearance:textfield;
}
.required{
	color:#F00 !important;
}
.dropzone .dz-preview .dz-image img{display:block;width:100%;height:100%;object-fit:cover;}
.hidden{display:none !important;}
.swal2-popup{padding:20px 0 !important;}
.swal2-container{z-index:9999 !important;}
/*.swal2-content{padding:0 0.75rem !important;}*/
.swal2-validation-message{margin:0 !important;}
.blink_me{animation: blinker 1s linear infinite;}
@keyframes blinker {
	50% {opacity: 0;background:red;}
}
.text-right{text-align:right !important;margin-top:7px !important;}
@media (max-width: 500px) {
	.text-right{text-align:center !important;}
}
input:autofill {background: #fff;}
.divider .divider-text{padding:0 !important;}
.breadcrumb-style2 .breadcrumb-item + .breadcrumb-item::before {content: "\ebe7";}
.hasError{border: 2px dotted #F00 !important;}
.app-brand-text.demo{text-transform: capitalize !important;}

.myBreadcrumb {
	display: inline-block;
	box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.35);
	overflow: hidden;
	border-radius: 5px;
	counter-reset: flag;
	margin-bottom: 10px;
}

.myBreadcrumb a {
	text-decoration: none;
	outline: none;
	display: block;
	float: left;
	font-size: 12px;
	line-height: 36px;
	color: white;
	padding: 0 10px 0 60px;
	background: #666;
	background: linear-gradient(#666, #333);
	position: relative;
}
.myBreadcrumb a:first-child {
	padding-left: 46px;
	border-radius: 5px 0 0 5px;
}
.myBreadcrumb a:first-child:before{
	left: 14px;
}
.myBreadcrumb a:last-child {
	border-radius: 0 5px 5px 0;
	padding-right: 20px;
}
.myBreadcrumb a.active, .myBreadcrumb a:hover{
	background: #333;
	background: linear-gradient(#333, #000);
}
.myBreadcrumb a.active:after, .myBreadcrumb a:hover:after {
	background: #333;
	background: linear-gradient(135deg, #333, #000);
}
.myBreadcrumb a:after {
	content: '';
	position: absolute;
	top: 0; 
	right: -18px;
	width: 36px; 
	height: 36px;
	transform: scale(0.707) rotate(45deg);
	z-index: 1;
	background: #666;
	background: linear-gradient(135deg, #666, #333);
	box-shadow: 2px -2px 0 2px rgba(0, 0, 0, 0.4), 3px -3px 0 2px rgba(255, 255, 255, 0.1);
	border-radius: 0 5px 0 50px;
}
.myBreadcrumb a:last-child:after {
	content: none;
}
.myBreadcrumb a:before {
	content: counter(flag);
	counter-increment: flag;
	border-radius: 100%;
	width: 20px;
	height: 20px;
	line-height: 20px;
	margin: 8px 0;
	position: absolute;
	top: 0;
	left: 30px;
	background: #444;
	background: linear-gradient(#444, #222);
	font-weight: bold;
	text-align: center;
}

.switchToggle input[type=checkbox]{height:0;width:0;visibility:hidden;position:absolute;}
.switchToggle label {cursor:pointer;text-indent:-9999px;width:70px;max-width:70px;height:30px;background:#d1d1d1;display:block;border-radius:100px;position:relative;}
.switchToggle label:after {content:'';position:absolute;top:2px;left:2px;width:26px;height:26px;background:#fff;border-radius:90px;transition:0.3s;}
.switchToggle input:checked + label, .switchToggle input:checked + input + label  {background:#3e98d3;}
.switchToggle input + label:before, .switchToggle input + input + label:before {content:'No';position:absolute;top:5px;left:35px;width:26px;height:26px;border-radius:90px;transition:0.3s;text-indent:0;color:#fff;}
.switchToggle input:checked + label:before, .switchToggle input:checked + input + label:before {content:'Yes';position:absolute;top:5px;left:10px;width:26px;height:26px;border-radius:90px;transition:0.3s;text-indent:0;color:#fff;}
.switchToggle input:checked + label:after, .switchToggle input:checked + input + label:after {left:calc(100% - 2px);transform:translateX(-100%);}
.switchToggle label:active:after{width:60px;} 
.toggle-switchArea{margin:10px 0 10px 0;}
.menu-vertical .menu-icon.fa-solid{font-size: 1rem;}

/****************************************** Notificatio CSS Start ******************************************************/
.button-default{-webkit-transition: 0.25s ease-out 0.1s color;-moz-transition: 0.25s ease-out 0.1s color;-o-transition: 0.25s ease-out 0.1s color;transition: 0.25s ease-out 0.1s color;background: transparent;border: none;cursor: pointer;margin: 0;outline: none;position: relative;}
.show-notifications {position: relative;}
.show-notifications:hover .fa-bell, .show-notifications:focus .fa-bell, .show-notifications.active .fa-bell {color: #34495e;}
.show-notifications ,fa-bell {color: #7f8c8d;}
.show-notifications .notifications-count {-moz-border-radius: 50%;-webkit-border-radius: 50%;border-radius: 50%;-moz-background-clip: padding-box;-webkit-background-clip: padding-box;background-clip: padding-box;background: #3498db;color: #fefefe;font: normal 0.85em 'Lato';height: 16px;line-height: 1.5em;position: absolute;right: 2px;text-align: center;top: -2px;width: 16px;}
.show-notifications.active ~ .notifications {opacity: 1;top: 60px;}
.notifications {-moz-border-radius: 2px;-webkit-border-radius: 2px;border-radius: 2px;-moz-background-clip: padding-box;-webkit-background-clip: padding-box;background-clip: padding-box;-webkit-transition: 0.25s ease-out 0.1s opacity;-moz-transition: 0.25s ease-out 0.1s opacity;-o-transition: 0.25s ease-out 0.1s opacity;transition: 0.25s ease-out 0.1s opacity;background: #ecf0f1;border: 1px solid #bdc3c7;right: 90px;opacity: 0;position: absolute;top: -999px;width: 400px;}
.notifications:after {border: 10px solid transparent;border-bottom-color: #3498db;content: '';display: block;height: 0;right: 10px;position: absolute;top: -20px;width: 0;}
.notifications h3, .notifications .show-all {background: #3498db;color: #fefefe;margin: 0;padding: 10px;width: 100%;}
.notifications h3 {cursor: default;font-size: 1.05em;font-weight: normal;}
.notifications .show-all {display: block;text-align: center;text-decoration: none;}
.notifications .show-all:hover, .notifications .show-all:focus {text-decoration: underline;}
.notifications .notifications-list {list-style: none;margin: 0;overflow-y: scroll;padding: 0;height: 250px;}
.notifications .notifications-list .item {-webkit-transition: -webkit-transform 0.25s ease-out 0.1s;-moz-transition: -moz-transform 0.25s ease-out 0.1s;-o-transition: -o-transform 0.25s ease-out 0.1s;transition: transform 0.25s ease-out 0.1s;border-top: 1px solid #bdc3c7;color: #7f8c8d;cursor: default;display: block;padding: 10px;position: relative;white-space: nowrap;width: 100%;}
.notifications .notifications-list .item:before, .notifications .notifications-list .item .details, .notifications .notifications-list .item .button-dismiss {display: inline-block;vertical-align: middle;}
.notifications .notifications-list .item:before {-moz-border-radius: 50%;-webkit-border-radius: 50%;border-radius: 50%;-moz-background-clip: padding-box;-webkit-background-clip: padding-box;background-clip: padding-box;background: #3498db;content: '';height: 8px;width: 8px;}
.notifications .notifications-list .item .details {margin-left: 10px;white-space: normal;width: 100%;color: #00F;cursor: pointer;}
.notifications .notifications-list .item .details .title, .notifications .notifications-list .item .details .date {display: block;}
.notifications .notifications-list .item .details .date {color: #95a5a6;font-size: 0.85em;margin-top: 3px;}
.notifications .notifications-list .item.no-data {display: none;text-align: center;}
.notifications .notifications-list .item.no-data:before {display: none;}
.notifications .notifications-list .item.expired {color: #bdc3c7;}
.notifications .notifications-list .item.expired:before {background: #bdc3c7;}
.notifications.empty .notifications-list .no-data {display: block;padding: 10px;}

@-webkit-keyframes invalid {
	from { background-color: red; }
	to { background-color: inherit; }
}
@-moz-keyframes invalid {
	from { background-color: red; }
	to { background-color: inherit; }
}
@-o-keyframes invalid {
	from { background-color: red; }
	to { background-color: inherit; }
}
@keyframes invalid {
	from { background-color: red; }
	to { background-color: inherit; }
}
.invalid {-webkit-animation: invalid 1s infinite;-moz-animation: invalid 1s infinite;-o-animation: invalid 1s infinite;animation: invalid 1s infinite;}
/****************************************** Notificatio CSS End ******************************************************/

 /* Custom Popup Styling */
#permissionPopup {position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);background-color: #ffffff;border-radius: 15px;box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.1);width: 320px;padding: 20px;display: none;z-index: 1000;opacity: 0;transition: opacity 0.3s ease-out, transform 0.3s ease-out;}
#permissionPopup.show {display: block;opacity: 1;transform: translate(-50%, -50%);}
.popup-header {font-size: 18px;font-weight: bold;color: #444;margin-bottom: 15px;text-align: center;}
.popup-content {font-size: 16px;color: #666;margin-bottom: 20px;text-align: center;}
.popup-buttons {display: flex;justify-content: space-around;}
.popup-buttons button {background-color: #007bff;color: #fff;font-size: 16px;padding: 12px 20px;border: none;border-radius: 5px;cursor: pointer;width: 45%;transition: background-color 0.3s ease;}
.popup-buttons button:hover {background-color: #0056b3;}
.popup-buttons button.deny {background-color: #ff4c4c;}
.popup-buttons button.deny:hover {background-color: #d43f3f;}
/* Notification Icon Styling */
#notificationIcon {position: fixed;top: 15px;right: 90px;font-size: 18px;background-color: #007bff;color: white;padding: 5px;border-radius: 50%;cursor: pointer;display: flex;align-items: center;justify-content: center;}
#notificationCount {position: absolute;top: -5px;right: -5px;background-color: red;color: white;font-size: 12px;border-radius: 50%;padding: 5px 10px;}
/* Toast Styling */
.toast {position: fixed;bottom: 45%;left: 50%;transform: translateX(-50%);background-color: #333;color: #fff;padding: 15px;border-radius: 5px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);opacity: 1;transition: opacity 0.5s ease-out;z-index: 1000;}