app-mini-slide #container {
    position: relative;
    overflow: hidden;
}
.points-bar {
    position: absolute;
    bottom: -10px;
    left: 0px;
    display: flex;
    justify-content: center;
    width: 100%;
}

.point {
    width: 10px;
    height: 10px;
    background-color: var(--destaque-color);
    border-radius: 50%;
    margin-left: 7px;
    margin-right: 7px;
    cursor: pointer;
}
.point.show{
    background-color: var(--primary-color);
}

.ico-arrow{
    transform: rotate(0deg);

    width: 10px;
    height: 10px;

    border-top: 2px solid #ccc;
    border-right: 2px solid #ccc;
}
.btn-slide-nav {
    position: absolute;
    cursor: pointer;
    top: 0px;
    display: flex;
    align-items: center;
    width: 15px;

    > div {
        opacity: 1;
    }
}

.btn-slide-nav:hover > div {
    opacity: 0.5;
}

.btn-slide-nav.left {
    left: 0px;
    padding-left: 5px;

    .ico-arrow {
        transform: rotate(-135deg);
    }
}

.btn-slide-nav.right {
    right: 0px;

    .ico-arrow {
        transform: rotate(45deg);
    }
}

/* @media (max-width: 760px) {
    .btn-slide-nav.left {
        left: -10px;
    }

    .btn-slide-nav.right {
        right: -10px;
    }
} */


.mini-slide-item {
    translate: -80px 0px -100px; 
    opacity: 0;
    position: absolute;
    top: 0px;
    left: 50px;
    width: 100%;
    animation-delay: 0.3s;

    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    padding-right: 8px;
}

.mini-slide-item.show {
    animation: mini-slide-item-show 0.5s normal cubic-bezier(0.37, 0.08, 0, 0.99) forwards;
    z-index: 1000000;
}

.mini-slide-item.show-right {
    animation: mini-slide-item-show-right 0.5s normal cubic-bezier(0.37, 0.08, 0, 0.99) forwards;
    z-index: 1000000;
}

.mini-slide-item.close {
    animation: mini-slide-item-close 0.5s normal cubic-bezier(0.37, 0.08, 0, 0.99) forwards;
}   

.mini-slide-item.close-left {
    animation: item-close-left 0.5s normal cubic-bezier(0.37, 0.08, 0, 0.99) forwards;
}



@keyframes mini-slide-item-show {
    0% {
        translate: -80px 0px -100px;
        opacity: 0;
    }

    100% {
        translate: 0px 0px 0px;
        opacity: 1;
        left: 0px;
    }
}

@keyframes mini-slide-item-show-right {
    0% {
        translate: 80px 0px -100px;
        opacity: 0;
    }

    100% {
        translate: 0px 0px 0px;
        opacity: 1;
        left: 0px;
    }
}

@keyframes mini-slide-item-close {
    0% {
        opacity: 1;
        translate: 0px 0px 0px;
    }

    100% {
        translate: 80px 0px -100px;
        opacity: 0;
    }
}