dialog[open] {
    border: none;
    border-radius: 8px;
}

dialog,
dialog::backdrop {
    opacity: 0;
    scale: 1.05;
    transition-duration: 0.2s;
    transition-behavior: allow-discrete;
}

dialog[open],
dialog[open]::backdrop {

    opacity: 1;
    scale: 2;
}

.open-button {
    color: #008F4C;
    cursor: pointer;
    display: inline-block;
}

.open-btn-icon {
    background-image: url('../../images/interface/icon-help.svg');
    width: 20px;
    height: 20px;
    object-fit: contain;
    vertical-align: middle;
    filter: invert(67%);
}

.open-btn-icon:hover {
    filter: invert(47%) brightness(47%);
}

.text_margin {
    margin-top: 30px;
}

.open-button:hover {
    text-decoration: underline;
}

.btn-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 20px;
    height: 20px;
    border: none;
    background: none;
    background-image: url(/local/content/images/icons/close/close__cross_color_grey.svg);
    background-size: contain;
    background-position: center center;
    transition: all 0.3s linear;
}

.modal-wrapper {
    display: inline-block;
}

.btn-close:hover {
    color: #7e7c7c;
    cursor: pointer;
}

.liWithModal {
    display: flex;
    padding: 8px;
}

.modalText {
    color: #008F4C;

}

.modalText:hover {
    color: #008F4C;
    text-decoration: underline;
    cursor: pointer;
}

@media(min-width:1000px) {
    .liWithModal {
        padding: 1px;

    }
}