body {

    .popover {

        max-width: 300px;
        overflow: hidden;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: var(--border-radius);    
        background-color: var(--header-bg);

        &-header {
            padding: 0 !important;
        margin: 0 !important;
        }

        &-body {
            padding: 0 !important;
            margin: 0 !important;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: var(--border-radius);
            
        }

        img {padding: 0 !important;
        margin: 0 !important;
            display: block;
            max-width: 100%;
            height: auto;
            border-radius: var(--border-radius);
            aspect-ratio: 16 / 9;
        }

        .popover-arrow {
          
        }

        &.bs-popover-top {
          
        }

        &.bs-popover-bottom {
          
        }

        &.bs-popover-start {
         
        }

        &.bs-popover-end {
      
        }
    }

    & .carousel,
    & .carousel-inner,
    & .carousel-item {
        width: 100%;
        height: 100%;
    }

    & .carousel,
    & .carousel .carousel-inner,
    & .carousel .carousel-item,
    & .carousel .carousel-item img {
        width: 100%;
        min-width: 100%;
        height: 100%;
        min-height: 100%;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        width: 100%;
        background-position: center center ;
        background-repeat: no-repeat;
    }

    & .carousel {

        &:focus {
            outline: none !important;
            box-shadow: none !important;
        }

        & .carousel-inner { 
            /*background-color: var(--brand); */

            & .carousel-item { 

                &::after {
                    content: '';
                    position: absolute;
                    top: 0; left: 0; bottom: 0; right: 0;
                    opacity: .3;
                    background-color: var(--gray-01);
                }

                & img { object-fit: cover; transform: scale(1.2); /* hide google logo */ }
            }
        }

        & .carousel-prev-next-navs {
            padding: 0 !important;
            margin: 0 !important;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 1;

            & li {
                width: 50%;
                height: 100%;
                margin-right: 0px !important;
                background-color: transparent;

                &:first-of-type a {
                    padding-left: 30px;
                    justify-content: flex-start;
                }
                &:last-of-type a {
                    padding-right: 30px;
                    justify-content: flex-end;
                }
                &:first-of-type a:hover,
                &:last-of-type a:hover {
                    /*  background-image: linear-gradient(to right, transparent 90%, var(--brand) 100%) !important;*/
                }

                & a {
                    height: 100% !important;
                    background-color: transparent !important;
                    border-radius: 0 !important;

                    & * {
                        color: var(--carousel-chevron) !important;
                    }
                }
            }
        }

        & .slider-controls {
            padding: 30px;
            flex-direction: column;
            padding: 15px 15px 0px 15px;

            & ul {
                padding: 0px;
                margin: 0px;

                &.row-1 {
                    margin-bottom: 3px;
                }
                &.row-2 {
                    margin-top: 3px;
                }
            }

            & .carousel-indicators {

                padding: 0;
                margin: 0;
                width: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                position: relative;

                & .indicator {

                    background-color: var(--box-border);
                    border: 1px solid white;

                    &:hover  {
                        background-color: var(--brand-light);
                    }
                    &.active {
                        background-color: var(--brand) !important;
                    }
                    &.dot {

                        padding: 0; /* Adjust padding as necessary */

                        width: var(--small-dot-size);
                        min-width: var(--small-dot-size);
                        max-width: var(--small-dot-size);

                        height: var(--small-dot-size);
                        min-height: var(--small-dot-size);
                        max-height: var(--small-dot-size);

                        border-radius: var(--small-dot-radius);
                        overflow: hidden;

                        min-height: var(--input-size);
                    }

                    &:not(:last-of-type) {
                        /*margin-right: 15px;*/
                    }
                    &.img { 
                        opacity: .7;
                    }
                    &.img:hover { 
                        opacity: 1;
                    }
                }
            }
        }
    }
}