:root{
  --qm:#4458dc;
  --bs-primary: var(--qm); 
}
/* Bootstrap 5 method */
.btn-primary,
.bg-primary
{
    background-color: var(--qm);
    border-color: var(--qm);
}
.text-primary{
  color: var(--qm);
}
.progress-bar{
  background-color: var(--qm);
}
body {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
} 
.btn-qm {
  background: white;
  color: var(--qm);
  border:1px solid;
  border-color: var(--qm);
  font-weight: 600;
}
.btn-qm:hover {
  background-color: var(--qm);
  color: white;
}
.btn-rqm {
  background-color: var(--qm);
  color: white;
  font-weight: 600;
  border:1px solid;
  border-color: var(--qm);
}
.btn-rqm:hover {
  background-color: white;
  color: var(--qm);
}
input:hover {
  outline: none;
  box-shadow: 0px 0px 5px var(--qm);
  border:1.5px solid var(--qm);
}
html::-webkit-scrollbar{
width:10px !important;
}
html::-webkit-scrollbar-track{
background: white !important;
}
html::-webkit-scrollbar-thumb{
background: var(--qm) !important;
}
html::-webkit-scrollbar-thumb:hover{
background:var(--qm) !important;
}
.select2 {
width: 100% !important;
}
.spinner {
position: fixed;
z-index: 1031;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
thead{
background-color:var(--qm);
color:white;
}
thead th{
font-size : 0.80rem;
}
.navbar{
  transition: all 0.5s;
  background-color: white;
  height: 75px; 
  z-index: 100;
  margin-bottom: 20%;
}
.navbar .navbar-brand{
position: relative;
color: var(--qm);
font-weight:600;
}
.navbar .nav-link{
  position: relative;
  color: var(--qm);
}
.navbar .nav-link::after{
  content: '';
  opacity: 0;
  transition: all 0.3s;
  height: 2px;
  width: 100%;
  background-color: var(--qm);
  position: absolute;
  bottom: 0;
  left: 0;
}
.navbar .nav-link:hover::after{
  opacity: 1;
}
.mod-content {
  border-width: 1px;
  background-color: #ffffff; /* Clean, bright background */
}
.mod-header {
  background-color: var(--qm);
  color: white;
  padding: 20px 30px; /* Increased padding for a more spacious feel */
  border-bottom: 2px solid grey;
}
.mod-header .btn-close {
  filter: invert(1);
  transition: transform 0.2s; /* Animation for close button */
}
.mod-header .btn-close:hover {
  transform: scale(1.1); /* Scale effect on hover */
}
.mod-header p{
  font-size: larger;
  font-weight: bold;
  color: white;
}
.mod-body{
  font-family: 'Arial', sans-serif; /* Clean, modern font */
  padding: 20px; /* Ample padding for spaciousness */
}
.mod-footer {
  border-top: 1px solid grey /* Divider for clarity */
}
input[type="text"]:disabled {
  background-color: #ddd; /* or any other desired color */
}
.readonly {
  background-color: #f0f0f0;
  color: #777;
  border: 1px solid #ccc;
  pointer-events: none;
}
@media (max-width: 720px) {
  body{
    margin-bottom: 70px;
  }
}
.page-title{
  font-size: larger;
  font-weight: 400;
}