/*   colorbox start    */
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}#cboxWrapper {max-width:none;}#cboxOverlay {  background: #000 none repeat scroll 0 0;  height: 100%;  opacity: 0.15 !important;  position: fixed;  width: 100%;}
#cboxOverlay::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgb(0 0 0 / 65%);
}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}#cboxContent{position:relative;}#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch; border-radius:9px;}.cboxPhoto{pointer-events: none !important;}.target-checkout #cboxContent > div#cboxLoadedContent {  height: auto !important;}#cboxTitle{margin:0;}#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;min-height: 200px;background: #fff none repeat scroll 0 0;}#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;pointer-events: auto !important;}.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}/* 
User Style:
Change the following styles to modify the appearance of Colorbox.  They are
ordered & tabbed in a way that represents the nesting of the generated HTML.*/
    #colorbox{outline:0;}
    #cboxContent{background:#ffffff;}
    .cboxIframe{background:#fff;}
    #cboxError{padding:50px; border:1px solid #ccc;}
    #cboxLoadedContent{border:5px solid #ffffff; background:#fff;}
    #cboxTitle{position:absolute; font-size:1px; top:-20px; left:0; color:#FFF; display: none !important;}
    #cboxCurrent{position:absolute; font-size:1px; top:-20px; right:0px; color:#FFF; display: none !important;}
    #cboxLoadingGraphic{      background:url('/frontend/images_theme/spinner-grey.png') no-repeat center center;      animation-name: spinadd;      animation-duration: 1000ms;      animation-iteration-count: infinite;      animation-timing-function: linear;    }
@keyframes spinadd {from {    transform:rotate(0deg);}to {    transform:rotate(360deg);}
}
/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
    #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; 
    width:auto; background:none; }
    
    /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
    #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}
    
    #cboxSlideshow{position:absolute; top:-20px; right:90px; color:#fff;}
    #cboxPrevious{position:absolute; top:50%; left:5px; margin-top:-32px; background:url('../images/colorbox/arrow_big_left.png') no-repeat top left; width:50px; height:70px;text-indent:-9999px;}
    #cboxPrevious:hover{position:absolute; top:50%; left:5px; margin-top:-32px; background:url('../images/colorbox/arrow_big_left_fade.png') no-repeat top left; width:50px; height:70px;  text-indent:-9999px;}
    #cboxNext{position:absolute; top:50%; right:5px; margin-top:-32px; background:url('../images/colorbox/arrow_big_right.png') no-repeat top right; width:50px; height:70px; text-indent:-9999px;}/*        #cboxNext:hover{position:absolute; top:50%; right:5px; margin-top:-32px; background:url(../images/colorbox/arrow_big_right_fade.PNG) no-repeat top right; width:50px; height:70px; text-indent:-9999px;}*/
    #cboxClose {    position: absolute;
    top: 12px !important;
    right: 20px !important;
    width: 20px;
    height: 20px;
    display: block;
    background: url(../images/colorbox/icon_window_close.png) no-repeat;
    text-indent: -9999px;
    z-index: 999;
    background-size: contain;background-position: center;}
/*   colorbox end    */