@import url(https://fonts.googleapis.com/css?family=Lora:ital,wght@0,300;0,400;0,600;0,700;1,200;1,300;1,400;1,600;1,700);
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap');

.news-top{color:rgba(255,255,255,.85);position:absolute;top:0;left:0;right:0;padding:20px 60px 45px;font-size:18px;letter-spacing:.25px;z-index:20;font-weight:300;}
.rajdhani-light {
  font-family: "Rajdhani", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.rajdhani-regular {
  font-family: "Rajdhani", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.rajdhani-medium {
  font-family: "Rajdhani", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.rajdhani-semibold {
  font-family: "Rajdhani", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.rajdhani-bold {
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  font-style: normal;
}


.lora-400 {
  font-family: "Lora", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.lora-500 {
  font-family: "Lora", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

.lora-600 {
  font-family: "Lora", serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}

.lora-700 {
  font-family: "Lora", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

.loader-logo {
	width: 50px; /* Adjust size as needed */
	height: auto;
	margin-bottom: 5px;
	animation: pulse 2s infinite; /* Optional: Add pulse animation */
}

.loader-text {
	height: auto;
	margin-bottom: 10px; /* Space between logo and spinner */
	animation: pulse 2s infinite; /* Optional: Add pulse animation */
}

.app-loader {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background: #fff; /* or any background color you prefer */
	z-index: 9999;
}

.loader-progress {
  width: 80%;
  max-width: 300px;
  height: 8px;
  margin-top: 20px;
  background-color: #f0f0f0;
  border-radius: 4px;
}

.progress-bar {
  background-color: #b71533; /* Blue color - change as needed */
  transition: width 0.3s ease;
}

.lowercase {
  text-transform: lowercase;
}

.uppercase {
  text-transform: uppercase;
}

.fa-border {
  border-color: #ccc;
  border-width: 1px;
  border-style: solid;
  border-radius: 3px;
  padding: 0.25em 0.35em;
}

.fa-border-detail {
  border-color: #46e;
  border-width: 1px;
  border-style: solid;
  border-radius: 3px;
  padding: 0.25em 0.35em;
}

.fa-border-edit {
  border-color: #4b4;
  border-width: 1px;
  border-style: solid;
  border-radius: 3px;
  padding: 0.25em 0.35em;
}

.fa-border-delete {
  border-color: #F00;
  border-width: 1px;
  border-style: solid;
  border-radius: 3px;
  padding: 0.25em 0.35em;
}

.error-403 {
  background:#2d353c;
  background-image:url(default/images/error-page-pattern.png);
  min-height: 100px;
  padding-top: 20px;
}

.p-custom-3 {
  padding: 1.2rem !important; /* Your custom value */
}

.pt-custom-3 { padding-top: 0.2rem !important; }
.pe-custom-3 { padding-right: 1.2rem !important; }
.pb-custom-3 { padding-bottom: 0.2rem !important; }
.pl-custom-3 { padding-left: 1rem !important; }

.px-custom-3 {
  padding-right: 1.2rem !important;
  padding-left: 1.2rem !important;
}

.py-custom-3 {
  padding-top: 1.2rem !important;
  padding-bottom: 1.2rem !important;
}

#generatePassword {
  border-radius: 0 3px 3px 0; 
  border: 1px solid #ccc;
}

#generatePassword:hover {
  border-radius: 0 3px 3px 0; 
  border: 1px solid #ccc;
  background-color: #ddd;
  color: #777;
}

.otp-input {
  width: 45px !important; /* Fixed width */
  flex: 0 0 auto; /* Prevent flex stretching */
}

.id-invalid {
  border:1px solid #F00;
}

textarea.code:read-only {
    background-color: #e9e9e9;
    color: #888;
    border: 1px solid #ddd;
    cursor: not-allowed;
    opacity: 0.8;
    resize: none; /* Optional: prevent resizing */
    padding: 8px;
    border-radius: 4px;
}

.wraper_attendance {
  color:#000;
  background-color:#FFF !important;
  border-bottom:1px solid #ccc !important; 
  border-collapse:collapse;
}

@media (prefers-color-scheme: dark) {
  .wraper_attendance:not([data-theme="light"]) {
    color:#FFF;
    background-color:#2d353c !important;
    border-bottom:1px solid #ccc; 
    border-collapse:collapse;
  }
}

@media (prefers-color-scheme: light) {
  .wraper_attendance:not([data-theme="dark"]) {
    color:#000;
    background-color:#FFF !important;
    border-bottom:1px solid #ccc !important; 
    border-collapse:collapse;
  }
}
.status-holiday { background-color: #e2e63b; color: #000; }
.status-present { background-color: #2ecc71; color: #000; }
.status-absent { background-color: #e74c3c; color: #fff; }
.status-late { background-color: #f39c12; color: #000; }
.status-leave { background-color: #9b59b6; color: #fff; }