.audiogram-chart div {
    background: white;
    border: white;
    border-style: solid;
    border-width: 1px;
}


    .audiogram-chart div svg .background-rect {
        width: 100%;
        height: 100%;
        fill: white;
        stroke: lightgray;
        stroke-width: 0.5;
    }

    .audiogram-chart div svg .horizontal-grid-lines {
        fill: none;
        stroke: rgb(173, 173, 173);
        stroke-width: 0.2;
    }

    .audiogram-chart div svg .horizontal-origin-grid-lines {
        fill: none;
        stroke: gray;
        stroke-width: 0.5;
    }

    .audiogram-chart div svg .y-axis-labels {
        font-size: 2.5px;
        text-anchor: end;
    }

    .audiogram-chart div svg .vertical-grid-lines {
        fill: none;
        stroke: rgb(173, 173, 173);
        stroke-width: 0.2;
    }

    .audiogram-chart div svg .vertical-minor-grid-lines {
        fill: none;
        stroke: rgb(199, 199, 199);
        stroke-width: 0.1;
    }

    .audiogram-chart div svg .x-axis-labels {
        font-size: 2.5px;
        text-anchor: end;
    }

    .audiogram-chart div svg .line-right, .audiogram-chart div svg .line-left {
        fill: none;
        stroke-width: 0.5;
    }

    .audiogram-chart div svg .line-right {
        stroke: #da2626cc;
    }

    .audiogram-chart div svg .line-left {
        stroke: #2b3fcdcc;
    }

    .audiogram-chart div svg .cross-right, .audiogram-chart div svg .cross-left {
        fill: none;
        stroke-width: 0.5;
        transform: rotate(-45deg);
        transform-box: fill-box;
        transform-origin: center;
    }

    .audiogram-chart div svg .cross-right {
        stroke: #da2626cc;
    }

    .audiogram-chart div svg .cross-left {
        stroke: #2b3fcdcc;
    }

    .audiogram-chart div svg .circle-right {
        fill: #da2626cc;
        stroke-width: 0;
    }

    .audiogram-chart div svg .circle-left {
        fill: #2b3fcdcc;
        stroke-width: 0;
    }

    .audiogram-chart div figcaption ul .legend-right {
        background: #da2626;
        transform: translateY(-0.1em);
    }

    .audiogram-chart div figcaption ul .legend-left {
        transform: scale(1.2);
    }


    .audiogram-chart div .key {
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .audiogram-chart div .key [class*="legend-"] {
            margin: 5px;
            margin-right: 10px;
            display: inline-block;
            vertical-align: middle;
            width: 10px;
            height: 10px;
            /*
        width: 26px;
        height: 26px;
        */
            border-radius: 50%;
        }

    .audiogram-chart div figcaption .key-list {
        margin: 0;
        padding: 0;
        list-style: none;
        font-size: 0.9em;
        display: flex;
        gap: 1rem;
    }

        .audiogram-chart div figcaption .key-list li {
            margin: 0 0 8px;
            padding: 0;
        }


.audiogram-chart div {
    background: white;
    border: white;
    border-style: solid;
    border-width: 1px;
}

.line-chart div svg {
}

    .line-chart div svg .background-rect {
        width: 100%;
        height: 100%;
        fill: white;
        stroke: lightgray;
        stroke-width: 0.5;
    }

    .line-chart div svg .horizontal-grid-lines {
        fill: none;
        stroke: gray;
        stroke-width: 0.2;
    }

    .line-chart div svg .y-axis-labels {
        font-size: 4px;
        text-anchor: end;
    }

    .line-chart div svg .vertical-grid-lines {
        fill: none;
        stroke: gray;
        stroke-width: 0.2;
    }

    .line-chart div svg .x-axis-labels {
        font-size: 4px;
        text-anchor: middle;
    }

    .line-chart div svg .line-1 {
        fill: none;
        stroke: #ce4b99;
        stroke-width: 1.0;
    }

    .line-chart div svg .line-2 {
        fill: none;
        stroke: #27A844;
        stroke-width: 1.0;
    }

    .line-chart div svg .line-3 {
        fill: none;
        stroke: #377bbc;
        stroke-width: 1.0;
    }

    .line-chart div svg .line-4 {
        fill: none;
        stroke: #fe2712;
        stroke-width: 1.0;
    }

    .line-chart div svg .line-5 {
        fill: none;
        stroke: #fc600a;
        stroke-width: 1.0;
    }

    .line-chart div svg .line-6 {
        fill: none;
        stroke: #fb9902;
        stroke-width: 1.0;
    }

    .line-chart div svg .line-7 {
        fill: none;
        stroke: #fccc1a;
        stroke-width: 1.0;
    }

    .line-chart div svg .line-8 {
        fill: none;
        stroke: #fefe33;
        stroke-width: 1.0;
    }

    .line-chart div svg .line-9 {
        fill: none;
        stroke: #b2d732;
        stroke-width: 1.0;
    }

    .line-chart div svg .line-10 {
        fill: none;
        stroke: #66b032;
        stroke-width: 1.0;
    }

.line-chart div .key {
    margin: 20px;
}

    .line-chart div .key [class*="legend-"] {
        margin: 5px;
        margin-right: 10px;
        display: inline-block;
        vertical-align: middle;
        width: 20px;
        height: 20px;
        /*
        width: 26px;
        height: 26px;
        */
        border-radius: 50%;
    }

.line-chart div figcaption .key-list {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.9em;
}

    .line-chart div figcaption .key-list li {
        margin: 0 0 8px;
        padding: 0;
    }

.line-chart div figcaption ul .legend-1 {
    background: #ce4b99;
    transform: translateY(-0.1em);
}

.line-chart div figcaption ul .legend-2 {
    background: #27A844;
    transform: translateY(-0.1em);
}

.line-chart div figcaption ul .legend-3 {
    background: #377bbc;
    transform: translateY(-0.1em);
}

.line-chart div figcaption ul .legend-4 {
    background: #fe2712;
    transform: translateY(-0.1em);
}

.line-chart div figcaption ul .legend-5 {
    background: #fc600a;
    transform: translateY(-0.1em);
}

.line-chart div figcaption ul .legend-6 {
    background: #fb9902;
    transform: translateY(-0.1em);
}

.line-chart div figcaption ul .legend-7 {
    background: #fccc1a;
    transform: translateY(-0.1em);
}

.line-chart div figcaption ul .legend-8 {
    background: #fefe33;
    transform: translateY(-0.1em);
}

.line-chart div figcaption ul .legend-9 {
    background: #b2d732;
    transform: translateY(-0.1em);
}

.line-chart div figcaption ul .legend-10 {
    background: #66b032;
    transform: translateY(-0.1em);
}