.images-slider {
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

.img-curr-item {
    height: 300px;
    border-radius: 8px;
    cursor: pointer;
}

.img-prev-item {
    height: 300px;
    border-radius: 8px;
    cursor: pointer;
    opacity: 0;

    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.img-curr-item:active {
    cursor: grabbing !important;
}

.border-4 {
    border-width: 0.4ch;
}

.border-3 {
    border-width: 0.3ch;
}

.border-2 {
    border-width: 0.2ch;
}

.img-list {
    overflow-x: scroll;
}

.img-list::-webkit-scrollbar {
    height: 12px;
    background-color: rgba(255, 255, 255, 0);
}

.img-list::-webkit-scrollbar-thumb {
    background-color: rgba(41, 62, 89, 0.2);
    border-radius: 0.4rem;
}

.img-list-item {
    height: 70px;
    min-width: 70px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.img-list-tiny-item {
    height: 8px;
    width: 8px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.image-select {
    animation: image-select 0.1s ease-in;
}

@keyframes image-select {
    from {
        transform: translateX(5px);
    }

    to {
        transform: translateX(0px);
    }
}



.image-fade-in-left {
    animation: image-fade-in-left 0.2s ease-in;
}
.image-fade-out-left {
    animation: image-fade-out-left 0.2s ease-in;
}
@keyframes image-fade-in-left {
    from {
        transform: translateX(-50%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}
@keyframes image-fade-out-left {
    from {
        transform: translateX(-50%);
        opacity: 1;
    }

    to {
        transform: translateX(0);
        opacity: 0;
    }
}


.image-fade-in-right {
    animation: image-fade-in-right 0.2s ease-in;
}
.image-fade-out-right {
    animation: image-fade-out-right 0.2s ease-in;
}
@keyframes image-fade-in-right {
    from {
        transform: translateX(50%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}
@keyframes image-fade-out-right {
    from {
        transform: translateX(-50%);
        opacity: 1;
    }

    to {
        transform: translateX(-100%);
        opacity: 0;
    }
}