/**
 * @task Annotation redesign
 * @author Zoltán Szilágyi
 * @since 2024.05.29
 */

div.caselaw-accordion-container {
    & dt {
        color: #066AE3;
        display: inline-block;
        position: relative;
        align-content: flex-start;
        border-radius: 6px;
        box-shadow: 0px 5px 18px 0px rgba(64, 73, 85, 0.2);
        padding: 0.5rem 0.5rem 0.5rem 0.5rem;
        cursor: pointer;
        margin-bottom: 0.5rem;
        margin-left: 0.25rem;
        margin-right: 0.25rem;
        border: 1px solid rgba(64, 73, 85, 0.1);
        break-inside: avoid;
        width: 100%;
        padding-right: 1rem;

        &::before {
            font: normal normal normal 24px/1 "Material Design Icons";
                font-size: 24px;
                line-height: 1;
            display: block;
            position: absolute;
            right: 3px;
            font-size: 22px;
            color: #21252C;
            content: "\F0142";
            line-height: 24px;
        }
    }
}

div.arc_modalDialog {
    position: fixed;
    inset: 0 0 0 0;
    display: grid;
    grid-template-columns: minmax(10%, 1fr) max-content minmax(10%, 1fr);
    grid-template-rows: minmax(10%, 1fr) max-content minmax(10%, 1fr);
    background-color: #00000060;
    z-index: 100;

    & div.modal-content {
        grid-column: 2 / 3;
        grid-row: 2 / 3;
        background-color: white;
        max-width: 500px;
        max-height: calc(100vh - 20%);

        & div.modal-header {
            & h5 {
                font-size: 20px;
                width: 100%;

                display: grid;
                grid-template-columns: 1fr max-content max-content;

                & > * {
                    height: max-content;
                }

                & .modal-close {
                    font-family: "Material Icons";
                    content: "\e5cd";
                    font-size: 40px;
                    color: #21252C;
                    margin-right: 0;
                    line-height: 24px;
                    margin-left: 16px;
                }
            }
        }    

        & div.modal-body {
            overflow: auto;
        }
    }
}