.wr360_player .container .theme_panel {
    top: unset !important;
    bottom: 1rem !important;
}

    .wr360_player .container .theme_panel .toolbar > a {
        transition: none !important;
        display: block;
        float: left;
        width: 42px;
        height: 42px;
        margin: 3px 0 0 7px;
        opacity: 1;
    }

        .wr360_player .container .theme_panel .toolbar > a:hover {
            opacity: 0.8 !important;
        }

    .wr360_player .container .theme_panel .toolbar a.exterior_button {
        background: url(../images/webrotate/lijevo.svg) no-repeat 0 0 !important;
        background-size: contain !important;
    }

    .wr360_player .container .theme_panel .toolbar a.interior_button {
        background: url(../images/webrotate/desno.svg) no-repeat 0 0 !important;
        background-size: contain !important;
    }

    .wr360_player .container .theme_panel .toolbar a.left_button {
        background: url(../images/webrotate/lijevo.svg) no-repeat 0 0 !important;
        background-size: contain !important;
    }

    .wr360_player .container .theme_panel .toolbar a.right_button {
        background: url(../images/webrotate/desno.svg) no-repeat 0 0 !important;
        background-size: contain !important;
    }

    .wr360_player .container .theme_panel .toolbar a.up_button {
        background: url(../images/webrotate/up.svg) no-repeat 0 0 !important;
        background-size: contain !important;
    }

    .wr360_player .container .theme_panel .toolbar a.down_button {
        background: url(../images/webrotate/down.svg) no-repeat 0 0 !important;
        background-size: contain !important;
    }

    .wr360_player .container .theme_panel .toolbar a.zoomin_button {
        background: url(../images/webrotate/plus.svg) no-repeat 0 0 !important;
        background-size: contain !important;
    }

    .wr360_player .container .theme_panel .toolbar a.zoomout_button {
        background: url(../images/webrotate/minus.svg) no-repeat 0 0 !important;
        background-size: contain !important;
    }

    .wr360_player .container .theme_panel .toolbar a.play_button {
        background: url(../images/webrotate/rotate.svg) no-repeat 0 0 !important;
        background-size: contain !important;
    }

    .wr360_player .container .theme_panel .toolbar a.pause_button {
        background: url(../images/webrotate/pauza.svg) no-repeat 0 0 !important;
        background-size: contain !important;
    }

    .wr360_player .container .theme_panel .toolbar a.fullscreenon_button {
        background: url(../images/webrotate/full_screen.svg) no-repeat 0 0 !important;
        background-size: contain !important;
    }

    .wr360_player .container .theme_panel .toolbar a.hotspotson_button {
        background: url(../images/webrotate/ostecenje.svg) no-repeat 0 0 !important;
        background-size: contain !important;
    }

    .wr360_player .container .theme_panel .toolbar a.hotspotsoff_button {
        background: url(../images/webrotate/hotspotoff.svg) no-repeat 0 0 !important;
        background-size: contain !important;
    }

    .wr360_player_fs .container .theme_panel .toolbar a.fullscreenon_button{
        background: url(../images/webrotate/close_full_screen.svg) no-repeat 0 0 !important;
        background-size: contain !important;
    }

.wr360_player a.fullscreenoff_button {
    background: url(../images/webrotate/close.svg) no-repeat 0 0 !important;
    opacity: 1;
    height: 42px !important;
    width: 42px !important;
}

    .wr360_player a.fullscreenoff_button:hover {
        opacity: 0.8;
    }

/* .wr360_player .container .theme_panel .toolbar {
    height: auto !important;
    width: fit-content !important;
    text-align: end !important;
    padding: 0 !important;
    margin-right: 1rem;
    margin-left: auto;
} */

    .wr360_player .container .theme_panel .toolbar > a {
        display: inline-block !important;
        float: none !important;
        text-align: center;
    }

        .wr360_player .container .theme_panel .toolbar > a.down_button,
        .wr360_player .container .theme_panel .toolbar > a.up_button,
        .wr360_player .container .theme_panel .toolbar > a.zoomin_button,
        .wr360_player .container .theme_panel .toolbar > a.play_button,
        .wr360_player .container .theme_panel .toolbar > a.pause_button {
            display: none !important;
        }

        .wr360_player #wr360container_image-rotate-container .theme_panel .toolbar > a.left_button,
        .wr360_player #wr360container_image-rotate-container .theme_panel .toolbar > a.right_button {
            display: none !important;

        }

@media only screen and (max-width: 1200px) {
    .wr360_player .container .theme_panel .toolbar > a {
        width: 42px !important;
        height: 42px !important;
    }

    .wr360_player .container .hotspot_indicator {
        background-size: 65px !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
    }
}

@media only screen and (max-width: 700px) {
    .wr360_player .container .theme_panel .toolbar > a,
    .webrotate-icon {
        width: 30px !important;
        height: 30px !important;
    }

    .wr360_player .container .hotspot_indicator {
        background-size: 50px !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
    }
}

@media only screen and (max-width: 340px) {
    .wr360_player .container .theme_panel .toolbar > a,
    .webrotate-icon {
        width: 30px !important;
        height: 30px !important;
    }

    .wr360_player .container .hotspot_indicator {
        background-size: 50px !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
    }
}

.img-wrap {
    position: relative
}

    .img-wrap .img-content {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: center
    }

        .img-wrap .img-content > img {
            max-width: 100%;
            max-height: 100%;
            width: 100%
        }

        .img-wrap .img-content > div {
            max-width: 100%;
            max-height: 100%;
            width: 100%
        }

.ratio-1-1 {
    padding-top: 100%
}

.ratio-4-3 {
    padding-top: 75%
}

.ratio-16-9 {
    padding-top: 56.25%
}

.ratio-3-2 {
    padding-top: 66.66%
}

.ratio-8-5 {
    padding-top: 62.5%
}

.webrotate-icon {
    right: 20px;
    z-index: 2;
    border: unset !important;
    height: 42px;
    width: 42px;
    /*background-color: rgba(51,51,51,.5);*/
    margin: 5px 11px 0 0;
}

    .webrotate-icon.active {
        background-color: rgba(0,204,255,.5) !important
    }

    .webrotate-icon img {
        height: 40px;
        width: 40px;
        /* filter: brightness(0) invert(1) */
    }

.badge-action-container {
    position: absolute;
    top: 1rem;
    right: 0px;
    flex-direction: row;
    margin-right: 1rem;
}

.vehicle-id-container {
    position: absolute;
    bottom: 0.5rem;
    margin-left: 1rem;
    z-index: 1;
    color: #666;
    font-size: 12px;
}

.wr360-icon {
    position: absolute;
    bottom: 0rem;
    margin-right: 1rem;
    z-index: 1;
    color: #000;
    font-size: 4rem;
    right: 0;
    display: flex;
}