/* Выдвигающиеся окна */

.slide-window {
    position: fixed;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    align-items: center;
    top: var(--height-header);
    left: calc(0px - var(--add-window-width) - 70px - 10px - 10px); /* 70px - width of img, 10px - left shift, 10px - depth*/
    width: var(--add-window-width);
    height: 86%;
    z-index: 4;
    background-color: var(--background-add-window-color);
    transition: left var(--time-of-appearing);
}

.slide-window > h2 {
    font-size: min(8vmin, 30pt);
    color: var(--text-add-window-color);
}

.slide-window-block {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 80%;
    background-color: var(--background-add-window-color);
}

.slide-window-block + img {
    position: absolute;
    top: 10px;
    left: calc(100% + 10px);
    width: min(10vw, 70px);
    filter: var(--arrow-color);
    transition: transform var(--time-of-highlighting);
}

.slide-window-block + img:hover {
    transform: scale(1.2, 1.2);
}

.slide-window-block-options {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    align-items: center;
    width: 80%;
    height: 20%;
    background-color: var(--background-add-window-block-color);
    color: var(--text-add-window-color);
}

.slide-window-block-options > h2 {
    font-size: min(4.2vmin, 18pt);
    color: var(--text-add-window-color);
}

#overlay {
    pointer-events: none;
    position: fixed;
    left: 0px;
    top: var(--height-header);
    width: 100vw;
    height: calc(100vh - var(--height-header));
    z-index: 3;
    background-color: var(--overlay-color);
    opacity: 0%;
    transition: opacity var(--time-of-appearing);
}