/* Shared responsive overrides for the portal shell and older templates */

.mobile-nav-toggler {
    display: none;
}

.front-container .content__wrap {
    width: 100%;
}

.front-container .card.shadow-lg {
    width: min(100%, 400px) !important;
    margin: 0 auto;
}

.front-container img[alt="Avatar"] {
    max-width: 100%;
    height: auto;
}

@media (max-width: 991.98px) {
    .mobile-nav-toggler {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 2.5rem;
        height: 2.5rem;
        padding: 0;
        flex: 0 0 auto;
    }

    .header__content {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        align-items: center;
    }

    .header__content-start,
    .header__content-end {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .header__content-end {
        width: 100%;
        justify-content: flex-end;
    }

    .breadcrumb {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem 0.5rem;
    }

    .content__wrap {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .content__boxed {
        max-width: 100%;
    }

    .page-title {
        font-size: 1.5rem;
    }

    .lead {
        font-size: 1rem;
    }

    footer .text-nowrap {
        white-space: normal !important;
    }

    .table-responsive {
        font-size: 0.875rem;
        -webkit-overflow-scrolling: touch;
    }

    .table-responsive th,
    .table-responsive td {
        white-space: normal;
        vertical-align: top;
    }

    .table-responsive td form {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .table-responsive td form .btn,
    .table-responsive td form a.btn,
    .table-responsive td > .btn,
    .table-responsive td > a.btn,
    .table-responsive td.action-group > .btn,
    .table-responsive td.action-group > a.btn {
        width: 100%;
        margin: 0;
        white-space: normal;
        justify-content: center;
    }

    .table-responsive .text-nowrap {
        white-space: normal !important;
    }

    .mainnav__avatar {
        max-width: 100%;
        height: auto;
    }

    .front-container .content__wrap {
        max-width: 420px;
        padding: 1rem;
    }

    .front-container .card-body {
        padding: 1.25rem;
    }
}

@media (max-width: 575.98px) {
    .content__wrap {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .header__content-end {
        justify-content: flex-start;
    }

    .front-container .content__wrap {
        max-width: none;
        padding: 0.75rem;
    }

    .front-container .card-body {
        padding: 1rem;
    }
}