html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
   
    background-image: url('/images/visitor_bg3.png') !important;
    background-repeat: repeat !important;
    background-size: 300px !important;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
        color: var(--bs-secondary-color);
        text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
        text-align: start;
}

.sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 1000;
        padding: 48px 0 0; /* Adjust padding for a top header if you have one */
        box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}

.sidebar-sticky {
        position: relative;
        top: 0;
        height: calc(100vh - 48px);
        padding-top: .5rem;
        overflow-x: hidden;
        overflow-y: auto; /* Scrollable contents if too long */
}

.nav-link {
    font-weight: 500;
    color: #3939e5;
}
.nav-link.custom-hover:hover {
        color: #0d6efd !important; 

}
.nav-link:hover {
            color: #3939e5;
}
  
main {
        padding-top: 20px;
}
.btn-spacing {
        margin: 5px; 
        padding: 8px 15px; 
}

.bg-color-body {
    background: #d8d8eb
}
.bg-color-header {
    background: #2c2c6d
}

/* Overall modal look */
.custom-modal {
    border-radius: 12px;
    overflow: hidden;
}
.custom-header {
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: #fff;
    padding: 0.5rem 1rem; 
    font-size: 1rem; 
}
.custom-body {
    background: rgba(0, 123, 255, 0.1); 
    padding: 2rem; 
    font-size: 1.25rem; 
    text-align: center;
}
.custom-footer {
    background: linear-gradient(135deg, #0056b3, #003f7f);
    color: #fff;
    padding: 0.5rem 1rem; 
    font-size: 0.9rem; 
}
.custom-navbar {
    background-color: #111184;
}

.custom-dropdown {
    background-color: #3939e5;
}
.control-space{
    margin-bottom: 10px; 
}
.dropdown-menu .dropdown-item:hover {
    color: #fff !important; 
    background-color: #0d6efd !important; 
}
.glass-card {
    background-color: rgba(0, 128, 255, 0.2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: thin;
    border-radius: 10px;
    padding: 20px;
    margin-top: 8px;
    margin-right: 1px;
    margin-left: 1px;
}
.glass-card1 {
    background-color: rgba(128, 0, 128, 0.2); /* purple shade */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: thin ;
    border-radius: 10px;
    padding: 20px;
    margin-top: 8px;
    margin-right: 1px;
    margin-left: 1px;
}
.backdrop-filter {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px); 
    background-color: rgba(128, 0, 128, 0.2); 
    border: thin; 
    border-radius: 10px;
    margin-top: 8px;
    margin-right: 1px;
    margin-left: 1px;
    padding: 5px;
}

.table-no-bg,
.table-no-bg tbody,
.table-no-bg tr,
.table-no-bg td,
.table-no-bg th {
    background-color: transparent !important;
}
.table-no-border,
.table-no-border td,
.table-no-border th,
.table-no-border tr {
    border: none !important;
}
.report-btn-blue {
    background-color: #007bff; /* Bootstrap primary blue */
    color: white;
    border: none;
}

.report-btn-green {
    background-color: #28a745; /* Bootstrap success green */
    color: white;
    border: none;
}

.report-btn-blue:hover {
    background-color: #0056b3; /* darker blue */
    color: white;
}
.report-btn-yellow {
    background-color: #ffc107; /* Bootstrap warning yellow */
    color: white;
    border: none;
}

    .report-btn-yellow:hover {
        background-color: #e0a800; /* darker yellow */
        color: white;
    }


.report-btn-green:hover {
    background-color: #1e7e34; /* darker green */
    color: white;
}
/* Force only the logout link to stay white */
.custom-navbar .nav-link.logout-link {
    color: #ffffff !important;
}

    .custom-navbar .nav-link.logout-link:hover,
    .custom-navbar .nav-link.logout-link:focus,
    .custom-navbar .nav-link.logout-link:active {
        color: #f8f9fa !important;
    }

    .custom-navbar .nav-link.logout-link i {
        color: #ffffff !important;
        color: white !important;
    }

.btn-purple {
    background-color: rgba(128, 0, 128, 0.8); /* rich purple background */
    border: 1px solid rgba(128, 0, 128, 0.9); /* slightly darker border */
    color: #fff; /* white text for contrast */
    transition: background-color 0.3s ease, transform 0.2s ease;
}

    .btn-purple:hover {
        background-color: rgba(186, 85, 211, 0.9); /* lighter orchid shade on hover */
        border-color: rgba(186, 85, 211, 1);
        transform: scale(1.05); /* subtle hover zoom */
    }

    .btn-purple:active {
        background-color: rgba(75, 0, 130, 1); /* deep indigo when pressed */
        border-color: rgba(75, 0, 130, 1);
    }
.report-card {
    width: 220px; /* fixed width */
    height: 220px; /* fixed height */
}


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" >