* {
    box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
}

table {
    width: 100%;
}

.page-content {
    width: 100%;
}

@media (max-width: 991px) {

    .sidebar {
        width: 75px !important;
    }

    .main-content,
    .content {
        margin-left: 75px !important;
        width: calc(100% - 75px) !important;
    }

    .sidebar span,
    .sidebar-brand div:last-child,
    .brand div:last-child {
        display: none !important;
    }

    .sidebar a,
    .sidebar-link {
        justify-content: center;
    }

}

@media (max-width: 767px) {

    .main-content,
    .content {
        padding: 20px !important;
    }

    .page-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 15px;
    }

    .stat-card {
        width: 100%;
    }

    .table-responsive {
        overflow-x: auto;
    }

}

@media (max-width: 575px) {

    .sidebar {
        display: none !important;
    }

    .main-content,
    .content {
        margin-left: 0 !important;
        width: 100% !important;
        padding: 15px !important;
    }

    .card-padding {
        padding: 18px !important;
    }

    .appointment-card {
        padding: 15px !important;
    }

    .btn {
        min-height: 44px;
    }

    .form-control,
    .form-select {
        min-height: 46px;
    }

    h1 {
        font-size: 25px;
    }

    h2 {
        font-size: 22px;
    }

    h3 {
        font-size: 20px;
    }

}