html.shinybox-html {
    overflow: hidden!important;
}

@keyframes loader-dots {
    0% { background-color: #f9f9f9; }
   50% { background-color: #878787; }
  100% { background-color: #f9f9f9; }
}

.shinybox(@baseUrl: '') {
    .notransition {
        transition: none;
    }

    &.mobile-view.shinybox-overlay {
        .shinybox-slider {
            height: 80%;
            top: 0%;
            bottom: 0%;
        }

        .shinybox-caption {
            bottom: 0px;
            padding: 20px;
            width: 100%;
            box-sizing: border-box;
        }

        .navigationContainer.hideMe {
            display: none;
        }

        .shinybox-close {
            width: 27px;
            height: 27px;
            right: 5%;
            top: 3%;
        }
    }

    &.noTitleCaptionBox.shinybox-overlay {
        .shinybox-slider {
            height: 80%;
            top: 0%;
            bottom: 0%;
        }

        .shinybox-caption {
            bottom: 0px;
            padding: 20px;
            width: 100%;
            box-sizing: border-box;
            background: rgba(0, 0, 0, 0.31);
        }

        .shinybox-caption {
            display: none;
        }
    }

    &.shinybox-overlay {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99999!important;
        overflow: hidden;
        user-select: none;
        background: #212124;
        display: none;

        .shinybox-html & {
            display: block;
        }

        @keyframes rightSpring {
            0% {
                margin-left: 0px;
            }

            50% {
                margin-left: -4%;
            }

            100% {
                margin-left: 0px;
            }
        }

        @keyframes leftSpring {
            0% {
                margin-left: 0px;
            }

            50% {
                margin-left: 4%;
            }

            100% {
                margin-left: 0px;
            }
        }

        img {
            border: none!important;
        }

        .shinybox-slider {
            height: 70%;
            left: 0;
            top: 10%;
            bottom: 20%;
            width: 100%;
            white-space: nowrap;
            position: absolute;
            transition: left 0.4s ease;
            margin: auto;

            .slide {
                height: 100%;
                width: 98%;
                line-height: 1px;
                text-align: center;
                display: inline-block;
                margin: 0 1%;

                &:before {
                    content: "";
                    display: inline-block;
                    height: 50%;
                    width: 1px;
                    margin-right: -1px;
                }

                img, .shinybox-video-container, .shinybox-pdf-container, .shinybox-inline-container {
                    display: inline-block;
                    max-height: 100%;
                    max-width: 100%;
                    margin: 0;
                    padding: 0;
                    width: auto;
                    height: auto;
                    vertical-align: middle;
                }

                .iframe() {
                    width: 100%!important;
                    height: 100%!important;
                    position: absolute;
                    top: 0; left: 0;
                }

                .shinybox-video-container {
                    background:none;
                    max-width: 1140px;
                    max-height: 100%;
                    width: 100%;
                    padding:5%;
                    box-sizing: border-box;

                    .shinybox-video {
                        width: 100%;
                        height: 0;
                        padding-bottom: 56.25%;
                        overflow: hidden;
                        position: relative;

                        iframe {
                            .iframe;
                        }
                    }
                }

                .shinybox-pdf-container {
                    background:none;
                    max-width: 1140px;
                    height: 100%;
                    width: 100%;
                    box-sizing: border-box;

                    .shinybox-pdf {
                        height: 100%;
                        width: 100%;
                        overflow: hidden;
                        position: relative;

                        iframe {
                            .iframe;
                        }
                    }
                }
            }

            .loading,
            .loading::after,
            .loading::before {
                display: block;
                background-color: #888;
                width: 12px;
                height: 12px;
                border-radius: 12px;
                -webkit-animation-name: loader-dots;
                animation-name: loader-dots;
                -webkit-animation-iteration-count: infinite;
                animation-iteration-count: infinite;
                -webkit-animation-timing-function: linear;
                animation-timing-function: linear;
                -webkit-animation-duration: 1s;
                animation-duration: 1s;
            }

            .loading::after,
            .loading::before {
            content: '';
                margin: 0 24px;
            }

            .loading {
                -webkit-animation-delay: 200ms;
                animation-delay: 200ms;
                margin: 0;
                position: relative;
                top: 50%;
                left: 50%;
                -webkit-transform: translate(-50%,-50%);
                transform: translate(-50%,-50%);
            }

            .loading::before {
                -webkit-animation-delay: 0s;
                animation-delay: 0s;
                margin-left: -24px;
            }

            .loading::after {
                -webkit-animation-delay: 400ms;
                animation-delay: 400ms;
                margin-top: -12px;
            }
        }

        &.rightSpring {
            .shinybox-slider {
                animation: rightSpring 0.3s;
            }
        }
        &.leftSpring {
            .shinybox-slider {
                animation: leftSpring 0.3s;
            }
        }

        .navigationContainer {
            position: absolute;
            top: 10%;
            bottom: 10%;
            left: 0;
            right: 0;
            margin: auto;
            width: 98%;
            display: flex;
            height: 36px;
            align-items: center;
            justify-content: space-between;
        }

        .shinybox-prev {
            background-image: url("@{baseUrl}/img/down.svg");
            background-repeat: no-repeat;
            cursor: pointer;
            width: 40px;
            height: 40px;
            z-index: 1;
            display: block;
            background-size: 90%;
            transform: rotate(90deg);
            background-position: 100%;
        }
        
        
        .shinybox-next {
            background-image: url("@{baseUrl}/img/up.svg");
            background-repeat: no-repeat;
            cursor: pointer;
            width: 40px;
            height: 40px;
            z-index: 1;
            display: block;
            background-size: 90%;
            transform: rotate(90deg);
            background-position: 100%;
        }

        .shinybox-prev.disabled,
        .shinybox-next.disabled {
            opacity: 0.3;
        }



        .shinybox-close {
            background-image: url("@{baseUrl}/img/Close-White.svg");
            cursor: pointer;
            background-repeat: no-repeat;
            width: 23px;
            height: 23px;
            z-index: 1;
            display: block;
            background-size: 90%;
            background-position: 100%;
            position: absolute;
            right: 1.5%;
            top: 4%;
        }

        .shinybox-no-close-button & .shinybox-close {
            display: none;
        }
        
        .noTitleCaption.shinybox-caption {
            padding: 0;
            display: none;
        }

        .shinybox-caption {
            display: block;
            color: white!important;
            font-size: 15px;
            font-family: Helvetica, Arial, sans-serif;
            width: 75%;
            bottom: 5%;
            position: absolute;
            margin: auto;
            left: 0;
            right: 0;
            font-size: 15px;
            letter-spacing: -0.38px;
            line-height: 20px;

            p {
                margin: 0px;
                text-align: center;
                padding: 0px;
            }
            .title {
                font-weight: bold;
            }
        }
    }
}