/* Extra Small (Phones)	< 576px
Small (Landscape Phones, Tablets)	≥ 576px
Medium (Tablets, Small Laptops)	≥ 768px
Large (Laptops, Desktops)	≥ 992px
Extra Large (Large Desktops)	≥ 1200px
Extra Extra Large (Wide Monitors)	≥ 1400px+ */



@media (width <=1680px) {
    .right-section {
        margin-right: 2%;
    }

    .user-request-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}


@media (width <=1470px) {
    main:has(.right-container) {
        background-position: top center;
    }

    .subscription-cards,
    .ai-overview-cards,
    .statistics-cards,
    .dashboard-graphs.grid-three--cols {
        grid-template-columns: repeat(2, 1fr);
    }

    .dashboard-graphs.grid-three--cols .sub-section:last-of-type {
        grid-column: 1/-1;
    }
}


@media (width <=1400px) {
    main:has(.right-container) {
        background: url(../images/login-banner-sm.webp) center/cover no-repeat;
    }

    main:has(.right-container)::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.8);
    }

    .right-section {
        margin: auto;
    }

    .subscription-info {
        gap: 1.5rem;
    }

    .filter-activity {
        left: calc(100% - 38.75rem);
    }

    .user-request-cards,
    .request-reponse-cards {
        gap: 1.5rem;
    }

    .request-details,
    .user-information {
        grid-template-columns: 1fr;
    }
}


@media (width <=1200px) {

    .dashboard-graphs.grid-three--cols {
        grid-template-columns: repeat(auto-fit, minmax(22.063rem, 1fr));
    }

    .ai-core-content {
        grid-template-columns: 1fr;
    }

    .sub-section.activity-table-container :is(.dt-layout-row:first-of-type, .dt-layout-row:first-of-type .dt-layout-cell) {
        display: block;
        text-align: center;

        .dt-search {
            margin: 0.5rem 0;
        }
    }

    .sub-section.activity-table-container .dt-layout-row:first-of-type {
        margin-bottom: 3.438rem;
    }

    .filter-activity {
        top: 7.063rem;
        left: 50%;
        transform: translateX(-50%);

        select {
            margin-left: 0.625rem;
        }
    }
}

@media (width <=992px) {

    .content {
        header {
            padding: 1.125rem 1.5rem;
        }

        section {
            padding: 1.5rem;
        }

        h1 {
            font-size: 1.5rem;
        }
    }

    ul.dropdown-menu {
        margin-top: 1.125rem !important;
    }

    .notification {
        margin-right: 1.25rem;
    }

    .dashboard-heading {
        margin-bottom: 0.25rem;
    }

    .dashboard-heading-2 {
        margin-bottom: 1.5rem;
    }

    .verification-banner {
        padding: 0.75rem 1.5rem;
    }

    svg[width="32"] {
        width: 1.875rem;
        height: 1.875rem;
    }

    .security-mission {

        .mission-card {
            padding: 1rem;
        }

        .top-section,
        .bottom-section {
            padding: 1.25rem;
        }

        .coverage-progress {
            margin-top: 1.25rem;
        }
    }

    .sub-section {
        padding: 1.25rem;
        margin-top: 1.25rem;
        border-radius: 0.5rem;
    }

    .sub-heading-container,
    .current-plan-card,
    .sub-heading {
        margin-bottom: 1.25rem;
    }

    :is(.statistics-cards, .create-plan, .metadata-analysis) .sub-heading {
        margin-bottom: 1rem;
    }

    .ai-overview-cards .sub-heading {
        margin-bottom: 0.875rem;
    }

    .user-profile-form {
        &.row {
            --bs-gutter-x: 1.25rem;
            --bs-gutter-y: 1.25rem;
            margin-bottom: 1.25rem;
        }
    }

    .subscription-cards,
    .ai-overview-cards,
    .statistics-cards {
        grid-template-columns: repeat(auto-fit, minmax(18.75rem, 1fr));
        column-gap: 1.25rem;
    }

    .subscription-cards,
    .user-request-cards {

        .sub-section {
            >div:has(>svg) {
                width: 2.5rem;
            }

            span {
                font-size: 1.375rem;

                &.score-text {
                    font-size: 0.875rem;
                }
            }
        }
    }

    .user-request-cards {
        margin-top: 1.25rem;
        grid-template-columns: repeat(auto-fit, minmax(18.75rem, 1fr));
        gap: 1.25rem;

        .sub-section span {
            font-size: 1.125rem;
        }
    }

    .subscription-option {
        margin: 1.5rem 0;
    }

    .subscription-plans {
        gap: 1.25rem;

        .sub-section>p {
            margin: 2rem 0 0.5rem;
            font-size: 1.75rem;
        }
    }

    .create-plan {
        grid-template-columns: 1fr;
    }

    .text-group p,
    .upper-section p {
        font-size: 1.375rem;
    }

    .upper-section p.mb-0 {
        font-size: 1.75rem;
    }

    .subscription-info {
        gap: 1.25rem;

        h3 {
            margin-bottom: 0.875rem;
        }
    }

    .insight-card span.success-text {
        font-size: 1.375rem;
    }

    .filter-activity {
        top: 6.813rem;
    }

    .user-left-info+div,
    .modal-subheading,
    .billing-summary {
        margin-top: 1.25rem;
    }

    .request-reponse-cards {
        gap: 1.25rem;
    }

    .decision-reason {
        margin: 1.25rem 0;
    }

    :is(.request-card, .response-card) {
        margin-top: 0;

        .sub-heading {
            padding: 0.875rem;
        }

        p {
            margin: 1.25rem;
        }
    }

    .excutive-summary p {
        margin: 1.125rem 0;
    }

    .block-rate-progress {
        +div {
            column-gap: 1.25rem;

            .other-rate-progress {
                margin-top: 1.25em;
            }
        }

        p+span {
            font-size: 1.125rem;
        }
    }

    .coverage-progress {
        margin-top: 1.125rem;
    }

    .profile-tab-container {
        margin: 1.5rem 0 1.25rem;
    }

    .edit-user-info {
        margin-bottom: 1.25rem;
    }

    .security-notification+p {
        margin: 1.25rem 0 1.125rem;
    }

}


@media (width <=768px) {
    html {
        font-size: 14px;
    }

    .sidebar {
        margin-left: -18.75rem;

        nav {
            padding: 1.625rem 0.875rem;
        }

        figure {
            margin: 1.625rem 0 0 1.5rem;

            img {
                scale: 0.9;
            }
        }

        +.content {
            margin-left: 0;
        }

    }

    .mission-card .card-icon::before {
        align-items: end;
    }

    :is(.dashboard-heading-2, .dashboard-heading, .user-left-info, div:has(+.general-info), .security-modal) figure,
    button.dropdown-toggle img,
    .share-icons a {
        scale: 0.9;
    }

    .security-modal figure {
        margin-bottom: 1rem;
    }

    .user-left-info label {
        right: 0.25rem;
        bottom: 0.25rem;
    }

    .filter-activity {
        top: 6.956rem;
    }

    .security-modal .otp-field input.otp-input {
        width: 3rem;
    }
}


@media (width <=576px) {
    .right-section {
        padding: 1.5rem;

        figure img {
            scale: 0.9;
        }
    }

    .nav.nav-pills a {
        padding: 0.5rem 2.143rem;
    }

    .social-links {
        gap: 1.143rem;

        img {
            scale: 0.9;
        }
    }

    .right-section,
    .input-field input.form-control,
    .right-container-2 {
        width: 100%;
    }

    h1 {
        font-size: 2.143rem;
    }

    h2 {
        font-size: 1.143rem;
        line-height: 1.5;
        margin: 0.5rem 0;

        &.accordion-header {
            margin: 0;
        }
    }

    .login-signup-btn {
        font-size: 1.143rem;
    }

    .otp-field {
        margin: 1.25rem auto 0;

        input.otp-input {
            width: 3.018rem;
        }
    }

    .deploy-text+p {
        font-size: 1.286rem;
    }

    .content header {
        padding: 1rem 1.5rem;
    }

    ul.dropdown-menu {
        margin-top: 1rem !important;
    }

    button.dropdown-toggle {
        img {
            margin-right: 0;
        }

        &::after {
            content: none;
        }
    }

    .mission-card {
        flex-direction: column;
        gap: 0.75rem;

        >div {
            width: 100%;
        }
    }

    .dashboard-graphs {
        display: block;
    }

    .response-card {
        margin-top: 1.25rem;
    }

    .report-modal .modal-dialog {
        padding: 0;
    }
}


@media (width <=420px) {
    .otp-field {
        gap: 0.714rem;

        input.otp-input {
            width: 100%;
            height: auto;
        }
    }

    .security-modal .otp-field {
        margin: 1.25rem auto 1rem;
        gap: 0.714rem;
    }

    .verification-banner,
    .top-section>div.d-flex {
        flex-direction: column;
        gap: 0.75rem;
    }

    .verification-banner>div {
        margin-right: 0;
    }

    .user-profile-form .col-6 {
        width: 100%;
    }

    .subscription-info {
        grid-template-columns: 1fr;
    }

    .block-rate-progress+div {
        flex-direction: column;

        .other-rate-progress:first-of-type .progress {
            margin-bottom: 0;
        }

        .other-rate-progress:last-of-type {
            margin-top: 1rem;
        }
    }

    .api-key-form {
        flex-direction: column;
        row-gap: 1rem;
    }
}