.exon-modal {
    padding: 0;
    border-radius: 2rem;
    width: 700px;
    max-height: 600px;
    border: 0;
    box-shadow: 0 0 1em rgb(0, 101, 16);
}

.exon-modal--min-heigth {
    min-height: 600px;
}

.exon-modal--md {
    width: 900px;
}

.exon-modal--lg {
    width: 1200px;
}

.exon-modal .exon-modal__header {
    display: flex;
    justify-content: space-between;
    height: 6rem;
    align-items: center;
    padding-left: 1.6rem;
    padding-right: 1.3rem;
    background-color: #f1f1f1;
}

.exon-modal .exon-modal__title {
    box-shadow: #00aa00;
}

.exon-modal .exon-modal__close-button {
    cursor: pointer;
    color: grey;
    font-size: 3rem;
    line-height: 1;
    opacity: .4;
}

.exon-modal .exon-modal__close-button:hover {
    opacity: 1;
    color: rgb(100, 185, 0);
}

.exon-modal .exon-modal__content {
    padding: 3rem;
}

.exon-modal::backdrop {
    opacity: .3;
    background-color: rgb(7, 24, 11);
    backdrop-filter: blur(5px);
}

.exon-modal[open] {
    -webkit-animation: showExonModal .6s ease normal;
}

.exon-modal[open]::backdrop {
    -webkit-animation: showExonModalBackdrop .6s ease normal;
}

@keyframes showExonModal {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes showExonModalBackdrop {
    0% {
        opacity: 0;
    }

    100% {
        opacity: .3;
    }
}