/* incidents.css */
#incident-details-container,
.incidents-feature {
    .posts-content {
        padding: 0 !important;
    }

    .col-md-4.incident-title{
        max-width: 32.53%;
    }

    .incident-title {
        flex: 1 1 calc(33.333% - 20px);
        text-align: left;

        i {
            color: var(--secondary-color);
        }

        .severity-badge {
            text-transform: capitalize;
        }

        .category-container {
            font-size: var(--font-size-p3);
            padding: 10px;

            div:not(:last-child) {
                margin-bottom: 0.5rem;
            }
        }

        .metrics {
            border-top: 1px solid var(--background-color);

            .flag-icon {
                font-size: 2rem;
            }
        }

        .incident-show-more {
            display: none;
            font-size: var(--font-size-p1);
        }

        .location {
            font-weight: bold;
        }

        .show-more,
        .show-less {
            text-decoration: none;
            color: var(--hyperlink-color) !important;
            font-size: var(--font-size-p1);

            &:hover {
                text-decoration: underline;
            }
        }

        .category, .subcategory {
            text-decoration: none;
            color: var(--hyperlink-color) !important;

            &:hover {
                text-decoration: underline !important;
            }
        }

        .incident-kpi-card {
            flex: 1 1 100px;
            background-color: var(--white-color);
            text-align: center;
            max-width: 100px;

            p {
                font-weight: bold;
                color: var(--primary-color);
                margin: 0;
                font-size: var(--font-size-p3);
            }

            h6 {
                color: var(--primary-color);
                margin: 0;
                font-weight: 400;
                font-size: var(--font-size-p3);
            }
        }

    }

    @media (max-width: 913px) {
        .col-md-4.incident-title {
            max-width: 48.7%;
            flex: 1 1 50%;
        }
    }

    @media (max-width: 767.97px) {
        .incident-title {
            max-width: 100%;
            flex: 1 1 100%;
        }
    }
}