.overlay-container {
    --overlay-1-back-color: var(--primary-color);
    --overlay-2-back-color: var(--secondary-color);
    --overlay-3-back-color: white;
    --items-panel-back: var(--overlay-3-back-color);
    --btn-close-margin: 40px;
}

.overlay-container {
    /*opacity: 0;*/
    display: none;

    z-index: 100000;

    position: fixed;
    top: 0;
    left: 0;
    /*width: 100vw;*/
    /*height: 100vh;*/
    bottom: 0;
    right: 0;
    user-select: none;


    /*region: correct odd margin of top which reveal back of overlay*/
    margin-top: -10px;
    padding-top: 10px;
    /*endregion: correct odd margin of top which reveal back of overlay*/
}

.overlay-container.show {
    /*opacity: 1;*/
    display: block;
}

.overlay-container .svg-container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.overlay-container .svg-container,
.overlay-container .svg-container * {
    overflow: hidden !important;
}

.overlay-container .items-panel {
    position: static;
    overflow-y: auto;
    max-height: 100%; /* جلوگیری از بیرون زدن از صفحه */

    top: -100vh;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background-color: var(--items-panel-back);
    padding: 1% 0;
    overflow-y: auto !important;

    /*region: correct odd margin of top which reveal back of overlay*/
    /* margin-top: 10px; */
    /*endregion: correct odd margin of top which reveal back of overlay*/
}

.overlay-container .btn-close {
    position: fixed;
    right: var(--btn-close-margin);
    top: var(--btn-close-margin);
}


@keyframes fadeIn {
    from {
        top: -100vh;
        opacity: 0;
    }

    to {
        top: 0;
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        top: 0;
        opacity: 1;
    }

    to {
        top: -100vh;
        opacity: 0;
    }
}

@keyframes pathAnim {
    0% {
        d: path("M 0 700 L 0 700 C 438 880 880 1142 1440 700 L 1440 700 L 0 700 Z");
    }
    /*25% {*/
    /*    d: path("M 0 700 L 0 680 C 414 675 746 732 1440 600 L 1440 700 L 0 700 Z");*/
    /*}*/
    /*!*50% {*!*/
    /*!*    d: path("");*!*/
    /*!*}*!*/
    /*75% {*/
    /*    d: path("M 0 700 L 0 200 C 471 561 950 136 1440 100 L 1440 700 L 0 700 Z");*/
    /*}*/
    100% {
        d: path("M 0 700 L 0 0 C 529 -24 905 -87 1440 0 L 1440 700 L 0 700 Z");
    }
}

@keyframes pathAnimReverse {
    100% {
        d: path("M 0 700 L 0 700 C 438 880 880 1142 1440 700 L 1440 700 L 0 700 Z");
    }
    /*25% {*/
    /*    d: path("M 0 700 L 0 680 C 414 675 746 732 1440 600 L 1440 700 L 0 700 Z");*/
    /*}*/
    /*!*50% {*!*/
    /*!*    d: path("");*!*/
    /*!*}*!*/
    /*75% {*/
    /*    d: path("M 0 700 L 0 200 C 471 561 950 136 1440 100 L 1440 700 L 0 700 Z");*/
    /*}*/
    0% {
        d: path("M 0 700 L 0 0 C 529 -24 905 -87 1440 0 L 1440 700 L 0 700 Z");
    }
}