.interactive-part {
    position: relative;
    width: 100%;
    height: auto;
    container-type: inline-size;
    padding: 0;
    margin: auto;
    transition: scale 0.3s ease;

    .svg-E-DCL {
        padding: 0 12%;
    }

    .svg-CE {
        padding: 0 20%;
    }

    .svg-LCL {
        padding: 0 23%;
    }

    .svg-docking {}

    div {
        position: absolute;
        display: flex;
        align-items: center;
        container-type: inline-size;
    }

    p {
        text-align:center;
        width: 100%;
        margin: 0;
        font-size: 40cqw ;
        color: white;

        sub {
            font-size: 30cqw;
        }
    }

    .interactive-part-text-E-DCL {
        top: 0;
        right: 12%;
        width: 25%;
        height: 55%;
    }

    .interactive-part-text-CE {
        top: 6%;
        right: 20%;
        width: 25%;
        height: 48%;
    }

    .interactive-part-text-LCL {
        top: 0;
        right: 23%;
        width: 23%;
        height: 53%;
    }

    .interactive-part-text-docking {
        top: 3%;
        right: 0;
        width: 25%;
        height: 52%;
    }
}

.interactive-part:hover {
    transform: scale(1.05);
}

.interactive-part-table-wrapper {

    --border-color: var(--logo-green);
    --border-width: 2px;

    width: 100%;
    margin:auto;
    margin-bottom: 2rem;
    display: grid;
    grid-template-columns: max(90px, 10vw) 1fr;
    gap: calc(var(--border-width) * 2);
    overflow-x: visible;

    .interactive-part-table-left {
        border: solid var(--border-color);
        border-radius: 20px;
        padding: 20px 5% 20px;
        position: sticky;
        top: var(--header-height);
        height: fit-content;

        width: 90%;

        .interactive-part-table-left-logo {
            width: 100%;
        }

        .interactive-part-table-left-info {
            width: 100%;

            .amino-acid-name {
                text-align:center;
                width: 100%;
                margin: 0;
                overflow-x: auto;
            }

            p, .u-link {
                font-size: clamp(10px, 1cqw, 30px);
                margin-top: 0;
                margin-bottom: 0;
                text-align: left;
            }


            #epimerization, #source-cluster, #part-name{
                margin-top: 1cqw;
                font-weight: 600;
            }

        }

        .inactive {
            display: none;
            width: 0;
            height: 0;
        }

    }

    .interactive-part-table-right {


        width: 100%;

        .interactive-part-table-right-upper {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
            padding: 20px;

            border: solid var(--border-color);
            border-radius: 20px;

            gap: 5px;

            .interactive-part svg {
                path, ellipse, rect, circle {
                    transition: fill 0.3s ease;
                }
            }

            .interactive-part.inactive {
                svg path, svg ellipse, svg rect, svg circle {
                    fill: gray;
                }
            }

        }

        .interactive-part-table-right-lower {
            width: 100%;
            height: fit-content;
            container-type: inline-size;


            .interactive-part-table-right-lower-nrpieces {
                width: 100%;
                height: 20cqw;
                overflow: visible;

                position: relative;
                svg {
                    overflow: visible;
                    height: 5cqw;
                    position: absolute;
                    top: 0;

                    polygon {
                        height: 100%;
                        width: 100%;
                        transition: fill 0.3s ease;
                    }
                }

                svg.inactive polygon {
                    fill: var(--logo-red) !important;
                }

                #first-arrow {
                    left: 20%;
                    width:9%;
                }

                #second-arrow {
                    left: 34%;
                    width: 15%;
                }

                #third-arrow {
                    left: 54%;
                    width: 12%;
                }

                .arrow-text {
                    position: absolute;
                    height: 5cqw;

                    p {
                        font-size: 2cqw;
                        margin: auto;
                        padding: 0;
                        text-align: center;
                        width: 100%;
                        font-weight: 600;
                    }
                }

                #first-arrow-text {
                    left: 20%;
                    width:9%;
                }

                #second-arrow-text {
                    left: 34%;
                    width: 15%;
                }

                #third-arrow-text {
                    left: 54%;
                    width: 12%;
                }

                p, img {
                    position:absolute;
                }

                #chaiyaphumine-name {
                    left: 1%;
                    font-size: 1.3cqw;
                    padding-top: 5cqw;
                }

                #chaiyaphumine-nrps {
                    left: 13%;
                    width: 66%;
                    top: 3cqw;
                }

                #chaiyaphumine-structure {
                    right: 0;
                    width: 19%;
                    top: 3%;
                }

                .partname-2 {
                    position: absolute;
                    top: 70%;
                    width: 15%;
                    text-align: center;
                    font-size: 1.5cqw;
                    left: 17%;

                }

                .partname-3 {
                    position: absolute;
                    top: 70%;
                    width: 15%;
                    text-align: center;
                    font-size: 1.5cqw;
                    left: 34%;
                }

                .partname-4 {
                    position: absolute;
                    top: 70%;
                    width: 15%;
                    text-align: center;
                    font-size: 1.5cqw;
                    left: 52.5%;
                }

                .partname-2.inactive {
                    display: none;
                    width: 0;
                    height: 0;
                }

                .partname-3.inactive {
                    display: none;
                    width: 0;
                    height: 0;
                }

                .partname-4.inactive {
                    display: none;
                    width: 0;
                    height: 0;
                }

            }

            .interactive-part-table-right-lower-derivatives {
                height: 17cqw;
                position: relative;

                .inactive {
                    display: none;
                    width: 0;
                    height: 0;
                }

                #novel {
                    position: absolute;
                    left: 3%;
                    top: -15%;
                    font-size: 1.7cqw;
                    padding: 6.6% 0;
                    padding-right: 2%;
                    border-right: solid var(--border-color);
                    margin: 0;

                }

                img {
                    position: absolute;
                    left: 16%;
                    top: -15%;
                    width: 55%;
                }

                .derivative-2 {
                    clip-path: inset(0 66.66% 0 0);
                }

                .derivative-3 {
                    clip-path: inset(0 33.33% 0 33.33%);
                }

                .derivative-4 {
                    clip-path: inset(0 0 0 66.66%);
                }

            }

        }

    }
}

@media (max-width: 460px) {
    .interactive-part-table-right-upper {
        grid-template-columns: 1fr !important;
        padding: 20px 10px !important;
    }
}