.hb-room-thumbnail {

    ul,
    li,
    ol {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .hb-room-thumbnail-gallery-popup {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        .first-gallery {
            display: block;
            max-width: 70%;
            width: 100%;
            padding: 0;

            li {
                display: flex;
                height: 100%;
            }

            img {
                width: 100%;
                min-height: 100%;
                max-height: 700px;
                display: block;
                max-width: unset;
            }
        }

        .hb-gallery-thumbnails {
            max-width: calc(var(--hb-gallery-thumbnails-width, 30%) - 24px);
            width: 100%;
            position: relative;
            flex-wrap: wrap;
            display: flex;
            justify-content: flex-end;

            @media (max-width: 767px) {
                max-width: var(--hb-gallery-thumbnails-width, 30%);
                padding-top: 16px;
            }

            li {
                width: 100%;
                cursor: pointer;

                &:first-child {
                    padding-bottom: 16px;
                }

                a {
                    position: relative;
                    display: block;
                }

                &.more {
                    a {
                        position: relative;
                        display: block;
                    }
                }

                img {
                    max-width: 100%;
                    height: auto;
                    vertical-align: middle;
                    object-fit: cover;
                }

            }

            .dynamic-gal {
                position: absolute;
                bottom: 16px;
                right: 16px;
                font-size: 16px;
                text-transform: capitalize;
                color: #1E1E1E;
                background: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4));
                border-radius: 200px;
                background: #FFF;
                padding: 0 16px;
                line-height: 44px;
                font-weight: 600;
                gap: 5px;
                @include flexbox();
                cursor: pointer;

                @media (min-width: 768px) and (max-width: 1199px) {
                    font-size: 16px;
                }
            }
        }
    }

    .hb-room-thumbnail-gallery-slide {
        position: relative;

        .hb-main-gallery {
            img {
                width: 100%;
            }
        }

        .hb-thumbnail-gallery {
            position: absolute;
            z-index: 2;
            bottom: 30px;
            left: 50%;
            right: auto;
            -webkit-transform: translateX(-50%);
            -moz-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            -o-transform: translateX(-50%);
            max-width: 680px;
            overflow: unset;

            @media (min-width: 1200px) {
                min-width: 680px;
            }
        }
    }

    .flex-direction-nav {
        a {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: var(--ekits-nav-slider-offset-v, -30px);
            margin-top: var(--ekits-nav-slider-offset-h, 0);
            width: var(--ekits-nav-slider-width, 24px);
            height: var(--ekits-nav-slider-height, 24px);
            border-style: var(--ekits-nav-slider-border-style, none);
            border-width: var(--ekits-nav-slider-border-width, 0);
            border-color: var(--ekits-nav-slider-border-color, #000);
            background: var(--ekits-nav-slider-bg-color, #FFFFFF00);
            color: var(--ekits-nav-slider-color, #fff);
            border-radius: var(--ekits-nav-slider-border-radius, 0);
            display: flex;
            font-size: 0;
            justify-content: center;
            align-items: center;
            z-index: 5;

            &:before {
                font-family: 'Font Awesome 5 Free';
                font-style: normal;
                font-weight: 900;
                content: "\f053";
                font-size: var(--ekits-nav-slider-font-size, 20px);
            }

            &.flex-next {
                right: var(--ekits-nav-slider-offset-v, -30px);
                left: auto;

                &:before {
                    content: "\f054";
                }
            }

            &:hover {
                color: var(--ekits-nav-slider-color-hover, #000);
                background: var(--ekits-nav-slider-bg-color-hover, #FFFFFF00);
                border-color: var(--ekits-nav-slider-border-color-hover, #000);
            }
        }
    }

    .hb-thumbnail-slide {
        .flex-control-nav {
            position: absolute;
            display: flex;
            z-index: 10;
            top: 95%;
            bottom: auto;
            left: 50%;
            gap: var(--thim-pagination-space, 10px);
            @include transform(translateX(-50%));

            a {
                font-size: 0;
                display: block;
                background-color: #fff;
                width: 12px;
                height: 12px;
                border-radius: 50%;

                &.flex-active {
                    background-color: #000;
                }
            }
        }

        .flex-direction-nav {
            a {
                left: var(--ekits-nav-slider-offset-v, 30px);

                &.flex-next {
                    right: var(--ekits-nav-slider-offset-v, 30px);
                    left: auto;
                }
            }
        }

        img {
            width: 100%;
        }
    }
}

.dialog-widget {
    display: none !important;
}

.fixed-size {
    .lg-outer {
        margin: 0 auto;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -40%);

        .lg {
            width: 70% !important;
        }

        .lg-image {
            height: 100%;
            object-fit: cover;
        }

        .lg-thumb-outer {
            background-color: transparent;
        }

        .lg-object {
            border-radius: 16px;
        }

        .lg-toolbar {
            right: 60px;
            left: auto;
            position: absolute;
            top: 0;

            // height: 100%;
            .lg-icon {
                font-size: 40px;
            }

            .lg-counter {
                display: none;
            }
        }

        .lg-prev {
            left: 127px;

            &::after {
                content: "\f104";
                font-family: thim-ekits !important;
                font-style: normal;
                font-weight: 400;
                font-variant: normal;
                text-transform: none;
                line-height: 1;
                font-size: 24px;
            }
        }

        .lg-next {
            right: 127px;

            &::before {
                content: "\f105";
                font-family: thim-ekits !important;
                font-style: normal;
                font-weight: 400;
                font-variant: normal;
                text-transform: none;
                line-height: 1;
                font-size: 24px;
            }
        }

        .lg-prev,
        .lg-next {
            height: 44px;
            width: 44px;
            border-radius: 200px;
            background-color: #fff;

            &:hover {
                color: #121212;
            }
        }

        .lg-close {
            &::after {
                content: "\f00d";
                font-family: thim-ekits !important;
                font-style: normal;
                font-weight: 400;
                font-variant: normal;
                text-transform: none;
                line-height: 1;
                font-size: 24px;
            }
        }

        .lg-thumb-item {
            border: 2px solid transparent;

            &.active,
            &:hover {
                border-color: #fff;
            }
        }

        .lg-inner {
            overflow: hidden;
        }
    }

    .lg-backdrop {
        background-color: rgba(0, 0, 0, 0.6);
    }
}

@media (min-width: 1604px) {
    .fixed-size {
        .lg-outer {
            .lg-prev {
                left: 0;
            }

            .lg-next {
                right: 0;
            }
        }
    }
}

@media (max-width: 1440px) {
    .fixed-size {
        .lg-outer {
            .lg-toolbar {
                right: 0px;
            }

            .lg-prev {
                left: -65px;
            }

            .lg-next {
                right: -65px;
            }
        }
    }
}

@media (max-width: 1024px) {
    .fixed-size {
        .lg-outer {
            .lg-prev {
                display: none;
            }

            .lg-next {
                display: none;
            }
        }
    }
}

@media (max-width: 880px) {
    .fixed-size {
        .lg-outer {
            transform: translate(-50%, -29%);

            .lg {
                height: 60% !important;
            }
        }
    }
}

@media (max-width: 766px) {
    .fixed-size {
        .lg-outer {
            transform: translate(-50%, -16%);

            .lg {
                height: 40% !important;
            }
        }
    }
}