.lg-custom-thumbnails {
        &.lg-outer {
            width: auto;
            // Set space for the container to occupy thumbnails
            right: 225px;

            // Add some spacing on the left to match with the right hand side spacing
            left: 10px;

            .lg-thumb-outer {
                // Set the position of the thumbnails
                left: auto;
                top: 0;
                width: 225px;
                bottom: 0;
                position: fixed;
                right: 0;

                // Reset max height
                max-height: none;

                // Customize the layout (Optional)
                background-color: #999;
                padding-left: 5px;
                padding-right: 5px;
                margin: 0 -10px;
                overflow-y: auto;

                // Update transition values
                // By default thumbnails animates from bottom to top
                // Change that from right to left.
                // Also, add a tiny opacity transition to look better
                transform: translate3d(30%, 0, 0);
                opacity: 0;
                will-change: transform opacity;
                transition: transform 0.15s cubic-bezier(0, 0, 0.25, 1) 0s, cubic-bezier(0,
                        0,
                        0.25,
                        1) 0.15s;
            }

            &.lg-thumb-open {
                .lg-thumb-outer {
                    transform: translate3d(0, 0, 0);
                    opacity: 1;
                }
            }

            // Add hove effect (Optional)
            .lg-thumb-item {
                filter: grayscale(100%);
                will-change: filter;
                transition: filter 0.12s ease-in, border-color 0.12s ease;

                &:hover,
                &.active {
                    filter: grayscale(0);
                    border-color: #545454;
                }
            }

            .lg-thumb {
                padding: 5px 0;
            }
        }
    }