.options_panel_overlay {

    background-color: var(--black-50);

    position: fixed;
    z-index: 1;

    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

}

@media(min-width: 768px) {

    .options_panel_overlay {

        background-color: transparent;

        position: absolute;

    }

}

.options_panel {

    cursor: default;

    background-color: var(--white-100);

    overflow: auto;

    max-height: 80vh;
    max-width: 90vw;
    width: 100%;

    box-shadow: 0px 3px 4px 0 #00000080;

    padding: 16px 24px;
    padding-bottom: 24px;

    border-radius: 4px;

    margin: auto;

    position: fixed;

    bottom: 32px;
    left: 0;
    right: 0;

}

@media(min-width: 768px) {
    .options_panel {

        position: absolute;

        width: 320px;
        max-height: 500px;

        box-shadow: 0px 3px 8px 6px #00000080;

        top: 40px;
        bottom: auto;
        right: 50%;

        transform: translate(-5%);

    }
}

.panel_heading {

    display: flex;
    justify-content: space-between;
    gap: 0 16px;

    padding-bottom: 8px;
    margin-bottom: 24px;

    border-bottom: 2px solid var(--black-100);

}

.panel_heading h5 {

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;

    font-size: var(--font-size--p);

    color: var(--brand-color);

}

.panel_heading button {

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    border: none;

    padding: 4px;

    background-color: transparent;

    width: 32px;
    /* height: 32px; */

}

.panel_heading button svg {

    transform: scale(1.5);
    fill: var(--brand-color);

}

.options_panel ul {

    display: flex;
    flex-direction: column;

    /* gap: 16px 0; */

}

.options_panel ul li {

    margin: 4px 0;

}

.options_panel ul li:not(:last-child) {

    border-bottom: 1px solid var(--black-50);

}

.options_panel ul li:hover button {

    background-color: #00000005;
    border-radius: 4px;

}

.options_panel ul li svg {

    fill: var(--brand-color) !important;
    margin: initial !important;

    transform: scale(1.3);

}

.options_panel ul li button {

    width: 100%;

    font-size: var(--font-size--small-1);
    font-weight: 500 !important;

    border: 0 !important;
    background-color: transparent;

    margin-bottom: 8px;
    padding: 8px 4px;

    display: flex;
    align-items: center;
    justify-content: flex-start !important;
    gap: 0 24px !important;

}