.error-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    font-size: 1rem;
    font-family: inherit;
    font-weight: 700;
    line-height: 1.5rem;
    text-align: center;

    img {
        width: 100px;
        height: 100px;
    }

    h3 {
        font-family: inherit;
        font-size: 14px;
        font-weight: 500;
        line-height: 24px;
        text-align: center;
        color: #64718B;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
}

.loading-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 40vh;
    justify-content: center;
    align-items: center;

}

.screen-detailed-box {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
    gap: 6.25rem;

    .screen-detailed {
        display: flex;
        flex-direction: column;
        width: 85%;
        align-items: start;
        text-align: left;
        color: #2B363C;

        .summary-chart-highlights-container {
            .summary-chart-grid {
                grid-template-rows: repeat(10, 1fr);
                grid-template-columns: repeat(1, 1fr);

                .summary-chart-box .chart-pie-container {
                    width: 250px;
                    height: 250px;
                    top: 20px;
                    right: 50px;
                }
            }
        }

        h3 {
            font-weight: 600;
            font-size: 1.5rem;
            line-height: 2.25rem;
            margin: 0 0 1rem 0;
        }

        span {
            font-weight: 300;
            font-size: .875rem;
            line-height: 1.75rem;
            margin: 0 0 2rem 0;
        }

        .description {
            width: 100%;
        }

        .description * {
            font-size: 1rem;
            line-height: 1.75rem;
            margin: 0;
            // color: #2B363C;
            white-space: break-spaces;
            font-family: 'Noto Sans', sans-serif !important;

            p * {
                font-weight: 400;
            }

            strong {
                font-weight: 600;
            }

            a {
                color: #034ad8;
                text-decoration: underline;
            }

            i {
                span {
                    font-weight: 300;
                }
            }

            img,
            figure {
                max-width: 100% !important;
                height: auto !important;
                width: auto !important;
            }
        }

        .dropdown-highlights {
            display: none;
        }


        .table-dropdown {
            position: relative;
            display: inline-block;
            color: #2B363C;
            align-content: center;
            margin-left: 1.5rem;

            .table-dropbtn {
                background-color: #ffffff;
                padding: .625rem 1.25rem;
                cursor: pointer;
                border-radius: .3125rem;
                font-size: 1rem;
                padding: 1rem;
                gap: .5rem;
                color: #2B363C;
                border-radius: .5rem;
                width: fit-content;
                display: flex;
                border: none;
                height: 3.75rem;
            }

            .table-dropbtn:hover {
                background-color: #E1E4EA;
            }

            .table-dropdown-content {
                color: #2B363C;
                position: absolute;
                width: max-content;
                background-color: #ffffff;
                box-shadow: 0rem .5rem 1rem 0rem rgba(0, 0, 0, 0.2);
                min-width: 7.5rem;
                z-index: 2;
                margin-top: .5rem;
                border-radius: .5rem;
                text-align: left;
            }

            .table-dropdown-content a {
                color: #2B363C;
                padding: .75rem 1rem;
                text-decoration: none;
                display: block;
                text-align: left;
                display: flex;
                gap: .5rem;
                height: fit-content;
                font-size: .875rem;
                width: max-content;
                min-width: 100%;
                margin: 0%;
                align-items: center;

                .container-button img {
                    background: transparent;
                }
            }

            .table-dropdown-content a:hover {
                background-color: #E1E4EA;
            }

            .table-dropdown-content a:first-child {
                border-radius: .25rem .25rem 0 0;
            }

            .table-dropdown-content a:last-child {
                border-radius: 0 0 .25rem .25rem;
            }

        }
    }

    .map-item {
        grid-column: span 1;
        grid-row: span 2;
    }

    .chart-item {
        grid-column: span 1;
        grid-row: span 1;
    }

    .summary-chart {
        height: 100%;
        min-height: 16.25rem;
    }



    // .xrm-attribute-value {
    //     width: 30%;

    //     .stat-anacom-box-quick-links {
    //         width: 100%;
    //         padding: 2rem;
    //     }
    // }
}

@media (max-width: 48rem) {

    .screen-detailed-box {

        .screen-detailed {
            width: 100%;

            .screen-detailed-desktop-title {
                display: none;
            }

            .dropdown-highlights {
                position: relative;
                display: inline-block;
                color: #2B363C;
                display: block;
                outline: none;
                border: none;
                font-size: 1.25rem;
                font-weight: 600;
                line-height: 2rem;
                text-align: left;

                img {
                    margin-left: 1.5rem;
                    width: 1.5rem;
                    height: 1.5rem;
                }

                margin: 0 0 1.625rem 0;
            }

            span {
                margin: 0 0 2.563rem 0;
            }
        }

        // .xrm-attribute-value {
        //     display: none;
        // }
    }

    .modal-table-total-container {
        height: 100%;
        width: 100%;
    }

    .modal-popup-root {
        background: #FFFFFF;
        background-color: #fff;
        inset: none;


        .ms-Overlay,
        .ms-Overlay--dark {
            display: none;
        }
    }


    .modal-popup-logo {
        display: flex;
        width: 100%;
        height: 1.625rem;
        justify-items: center;
        justify-content: space-between;
        margin-bottom: 2.5rem;

        img {
            width: 7.6875rem;
            height: 2.25rem;
        }

        .modal-close-modal {
            cursor: pointer;
            border: none;
            outline: none;
            background: none;
            color: #23282E;

            img {
                width: 1.5rem;
                height: 1.5rem;
            }
        }

    }


    .modal-popup-container {
        display: flex;
        width: 100%;
        height: 100vh;
        box-shadow: none;
        max-width: 100%;
        max-height: 100%;
        overflow: visible;
        padding: 2rem;
        padding-top: 1.5625rem;


        .modal-popup-header {
            display: flex;
            position: relative;
            padding: 0px;
            height: fit-content;
            flex-direction: column;

            h2 {

                font-size: 16px;
                font-weight: 600;
                line-height: 28px;
                text-align: left;
                text-underline-position: from-font;
                text-decoration-skip-ink: none;

            }

            p {
                font-size: 14px;
                font-weight: 400;
                line-height: 24px;
                text-align: left;
                text-underline-position: from-font;
                text-decoration-skip-ink: none;
                color: #23282E;
                margin-bottom: 0rem;
            }
        }

        .modal-popup-content {
            display: flex;
            flex-direction: column;
            gap: 32px;
            margin-top: 40px;


            .modal-image-container {
                width: 100%;
                height: 175px;
                padding: 16px;
                gap: 0px;
                border-radius: 8px;
                order: -1;
                position: relative;
                overflow: hidden;

                img {
                    width: calc(100% - 32px);
                    height: 143px;
                    object-fit: cover;

                }
            }
        }



        .modal-popup-footer {
            width: 100%;
            display: flex;
            justify-content: center;
            border: none;
            outline: none;
            background-color: #fff;
            gap: .5rem;

            p {
                margin: 0;
            }
        }
    }

    .modal-popup-buttons-container {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-top: 2rem;
        margin-bottom: 2rem;
    }


    .modal-popup-actions-icon {
        display: flex;
        gap: .5rem;
        margin-left: .5rem;
        outline: none;
        border: none;
        display: flex;
        gap: 10px;
        padding: 1.125rem 1rem;
    }
}