@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

body {
    overflow: hidden;
}
.dot-pulse {
    position: relative;
    left: -9999px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #0d6efd;
    color: #0d6efd;
    box-shadow: 9999px 0 0 -5px;
    animation: dot-pulse 1.5s infinite linear;
    animation-delay: 0.25s;
}

    .dot-pulse::before, .dot-pulse::after {
        content: "";
        display: inline-block;
        position: absolute;
        top: 0;
        width: 10px;
        height: 10px;
        border-radius: 5px;
        background-color: #0d6efd;
        color: #0d6efd;
    }

    .dot-pulse::before {
        box-shadow: 9984px 0 0 -5px;
        animation: dot-pulse-before 1.5s infinite linear;
        animation-delay: 0s;
    }

    .dot-pulse::after {
        box-shadow: 10014px 0 0 -5px;
        animation: dot-pulse-after 1.5s infinite linear;
        animation-delay: 0.5s;
    }

.dot-animation {
    animation: dots 1.5s steps(5, end) infinite;
}

@keyframes dot-pulse-before {
    0% {
        box-shadow: 9984px 0 0 -5px;
    }

    30% {
        box-shadow: 9984px 0 0 2px;
    }

    60%, 100% {
        box-shadow: 9984px 0 0 -5px;
    }
}

@keyframes dot-pulse {
    0% {
        box-shadow: 9999px 0 0 -5px;
    }

    30% {
        box-shadow: 9999px 0 0 2px;
    }

    60%, 100% {
        box-shadow: 9999px 0 0 -5px;
    }
}

@keyframes dot-pulse-after {
    0% {
        box-shadow: 10014px 0 0 -5px;
    }

    30% {
        box-shadow: 10014px 0 0 2px;
    }

    60%, 100% {
        box-shadow: 10014px 0 0 -5px;
    }
}

@keyframes dots {
    0%, 20% {
        content: ".";
    }

    40% {
        content: "..";
    }

    60% {
        content: "...";
    }

    80% {
        content: "....";
    }

    100% {
        content: ".....";
    }
}

.loading-animation {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
}

html, body {
    overflow-x: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
}

.container-fluid {
    padding-right: 15px;
    padding-left: 15px;
    max-width: 100%;
}

/* Fix for mobile responsiveness */
@media (max-width: 768px) {
    .row {
        margin-right: 0;
        margin-left: 0;
    }
    
    .col-md-4 {
        padding-right: 10px;
        padding-left: 10px;
    }
}


@media (max-width: 768px) {
    .table-responsive {
        margin: 0 -1rem;
    }

    .card-body {
        padding: 1rem !important;
    }

    .status-badge {
        padding: 4px 8px;
        font-size: 0.75rem;
    }

    .action-buttons {
        flex-direction: column;
        gap: 4px;
    }

    h3 {
        font-size: 1.25rem;
    }

    .table th {
        white-space: nowrap;
        font-size: 0.75rem;
    }

    .date-cell {
        font-size: 0.85rem;
    }
}

.table-responsive {
    min-width: 768px;
    overflow-x: auto;
}

@media (max-width: 768px) {
    .card-body {
        padding: 1rem !important;
    }

    .status-badge {
        padding: 4px 8px;
        font-size: 0.75rem;
    }

   
    .date-cell {
        font-size: 0.85rem;
    }

    .action-buttons {
        flex-direction: column;
        gap: 4px;
    }
}

@media (max-width: 576px) {
    h3 {
        font-size: 1.25rem;
    }

    .table th {
        font-size: 0.75rem;
        padding: 0.75rem;
    }
}

/* Stats Cards Responsive Styles */
.stats-card {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    transition: all 0.3s ease;
}

.stats-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

.stats-title {
    font-size: 0.875rem;
    font-weight: 500;
}

.stats-value {
    font-size: 1.75rem;
    font-weight: 600;
}

.stats-trend {
    font-size: 0.875rem;
    font-weight: 500;
}

@media (max-width: 576px) {
    .stats-card {
        padding: 1rem !important;
    }

    .stats-value {
        font-size: 1.5rem;
    }

    .stats-title {
        font-size: 0.8rem;
    }

    .stats-trend {
        font-size: 0.75rem;
    }
}

@media (max-width: 768px) {
    .row.g-4 {
        margin: -0.5rem;
    }

    .row.g-4 > * {
        padding: 0.5rem;
    }
}

/* Avatar and Icon Styles */
.avatar-circle,
.activity-icon,
.stats-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

/* Keep icons consistent across all screen sizes */
@media (max-width: 768px) {
    .avatar-circle,
    .activity-icon,
    .stats-icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }
}
 .privacy-policy {
        background-color: #f8f9fa;
        min-height: 100vh;
        padding: 2rem 0;
    }

    .privacy-policy h1 {
        color: #2c3e50;
        font-weight: 600;
    }

    .privacy-policy h2 {
        color: #2c3e50;
        font-size: 1.8rem;
        font-weight: 600;
        margin-top: 2.5rem;
        margin-bottom: 1.5rem;
        padding-bottom: 0.5rem;
        border-bottom: 2px solid #3498db;
    }

    .privacy-policy h3 {
        color: #34495e;
        font-size: 1.4rem;
        font-weight: 500;
        margin-top: 1.5rem;
        margin-bottom: 1rem;
    }

    .privacy-policy h4 {
        color: #34495e;
        font-size: 1.2rem;
        font-weight: 500;
        margin-top: 1rem;
        margin-bottom: 0.75rem;
    }

    .privacy-policy p {
        color: #576574;
        line-height: 1.8;
        margin-bottom: 1rem;
    }

    .privacy-policy ul {
        list-style-type: none;
        padding-left: 0;
        margin-bottom: 1.5rem;
    }

    .privacy-policy ul li {
        position: relative;
        padding-left: 1.5rem;
        margin-bottom: 0.75rem;
        color: #576574;
        line-height: 1.6;
    }

    .privacy-policy ul li:before {
        content: "•";
        color: #3498db;
        position: absolute;
        left: 0;
        font-weight: bold;
    }

    .privacy-policy a {
        color: #3498db;
        text-decoration: none;
        transition: color 0.2s ease;
    }

    .privacy-policy a:hover {
        color: #2980b9;
        text-decoration: underline;
    }

    @media (max-width: 768px) {
        .privacy-policy {
            padding: 1rem 0;
        }

        .privacy-policy h1 {
            font-size: 2rem;
        }

        .privacy-policy h2 {
            font-size: 1.5rem;
        }

        .privacy-policy h3 {
            font-size: 1.3rem;
        }

        .privacy-policy h4 {
            font-size: 1.1rem;
        }

        .privacy-policy p,
        .privacy-policy ul li {
            font-size: 0.95rem;
        }
    }