/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.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.
*/
#cboxOverlay{background:#000; opacity: 0.8; filter: alpha(opacity = 80);}
#colorbox{outline:0;}
    /*#cboxContent{margin-top:20px;background:#000;}*/
    #cboxContent{margin:20px 20px 0;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        /*#cboxLoadedContent{border:15px solid transparent; background:#fff;}*/
        #cboxTitle{position:absolute; top:-20px; left:0; color:#ccc;}
        #cboxCurrent{position:absolute; top:-20px; right:0px; color:#ccc;}
        #cboxLoadingGraphic{background:url(../../img/colorbox/loading.gif) no-repeat center center;}

        /* 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(../../img/colorbox/controls.png) no-repeat top left; width:28px; height:65px; text-indent:-9999px;}
        #cboxPrevious:hover{background-position:bottom left;}
        #cboxNext{position:absolute; top:50%; right:5px; margin-top:-32px; background:url(../../img/colorbox/controls.png) no-repeat top right; width:28px; height:65px; text-indent:-9999px;}
        #cboxNext:hover{background-position:bottom right;}
        /*#cboxClose{position:absolute; top:5px; right:5px; display:block; background:url(../../img/colorbox/controls.png) no-repeat top center; width:38px; height:19px; text-indent:-9999px;}*/
        #cboxClose{position:absolute; top:-12px; right:-10px; display:block;
          border: 2px solid #fff;
          border-radius: 15px;
          background:#ffffff url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjkgMjkiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDI5IDI5IiB4bWw6c3BhY2U9InByZXNlcnZlIiBjbGFzcz0ieC1pY29uIj4KPHBhdGggZmlsbD0iI0UwM0MzMSIgZD0iTTE0LjUgMEM2LjUgMCAwIDYuNSAwIDE0LjVDMCAyMi41IDYuNSAyOSAxNC41IDI5UzI5IDIyLjUgMjkgMTQuNUMyOSA2LjUgMjIuNSAwIDE0LjUgMHogTTIyLjQgMjAuMmMwLjYgMC42IDAuNiAxLjUgMCAyLjEgcy0xLjUgMC42LTIuMSAwbC01LjctNS43bC01LjcgNS43Yy0wLjMgMC4zLTAuNyAwLjQtMS4xIDAuNHMtMC44LTAuMS0xLjEtMC40Yy0wLjYtMC42LTAuNi0xLjUgMC0yLjFsNS43LTUuN0w2LjYgOC44IEM2LjMgOC41IDYuMiA4LjEgNi4yIDcuN3MwLjEtMC44IDAuNC0xLjFjMC42LTAuNiAxLjUtMC42IDIuMSAwbDUuNyA1LjdsNS43LTUuN2MwLjYtMC42IDEuNS0wLjYgMi4xIDBzMC42IDEuNSAwIDIuMWwtNS43IDUuNyBMMjIuNCAyMC4yeiI+PC9wYXRoPgo8L3N2Zz4=") no-repeat top center;
          width:31px; height:31px; text-indent:-9999px;}
        #cboxClose:hover{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjkgMjkiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDI5IDI5IiB4bWw6c3BhY2U9InByZXNlcnZlIiBjbGFzcz0ieC1pY29uIj4KPHBhdGggZmlsbD0iI2EyMjExOCIgZD0iTTE0LjUgMEM2LjUgMCAwIDYuNSAwIDE0LjVDMCAyMi41IDYuNSAyOSAxNC41IDI5UzI5IDIyLjUgMjkgMTQuNUMyOSA2LjUgMjIuNSAwIDE0LjUgMHogTTIyLjQgMjAuMmMwLjYgMC42IDAuNiAxLjUgMCAyLjEgcy0xLjUgMC42LTIuMSAwbC01LjctNS43bC01LjcgNS43Yy0wLjMgMC4zLTAuNyAwLjQtMS4xIDAuNHMtMC44LTAuMS0xLjEtMC40Yy0wLjYtMC42LTAuNi0xLjUgMC0yLjFsNS43LTUuN0w2LjYgOC44IEM2LjMgOC41IDYuMiA4LjEgNi4yIDcuN3MwLjEtMC44IDAuNC0xLjFjMC42LTAuNiAxLjUtMC42IDIuMSAwbDUuNyA1LjdsNS43LTUuN2MwLjYtMC42IDEuNS0wLjYgMi4xIDBzMC42IDEuNSAwIDIuMWwtNS43IDUuNyBMMjIuNCAyMC4yeiI+PC9wYXRoPgo8L3N2Zz4=") ;
        }

        /*branding*/
      #colorbox   .vignette{background-color: #fff}
      #colorbox   .thumbnail-panel{
          font-family: "Ciutadella-Regular","Helvetica Neue",Helvetica,Arial,sans-serif,sans-serif;
          background-color: #f6f4f0;
          padding:10px;
        }
      #colorbox   .thumbnail-panel p{margin: 0.75em 14px}
      #colorbox   .thumbnail-panel #createNewPlaylist {display: block; height:38px; line-height: 38px; padding-left: 14px;}
      #colorbox   .thumbnail-panel p #newplaylist {margin: 0px 0 0 -14px;padding-left:14px; width: calc(100% + 28px);}
      #colorbox   .thumbnail-panel a{color:#0085CA;font-weight: normal}
        #colorbox .m-carousel-thumbnails {padding-top:0}
      #colorbox   .img-responsive{height:185px}
      #colorbox   .containerScreenshot::before{background: none}
      #colorbox #alreadyInList{margin-bottom: 0px; padding-bottom: 0px;}
      #colorbox .form-horizontal .has-feedback .form-control-feedback{z-index: 10;}
      #colorbox .form-horizontal .form-group:last-of-type{margin-bottom: 0px;}

    #colorbox   .confirm-panel{
        font-family: "Ciutadella-Regular","Helvetica Neue",Helvetica,Arial,sans-serif,sans-serif;
        background-color: #fff;
        padding:10px 10px 1.5em;
        max-width:360px;
      }
    #colorbox   .confirm-panel p{margin: 0.75em 0px}
    #colorbox   .confirm-panel .title{margin: 1.5em 12px 0.75em}
    #colorbox   .confirm-panel a{color:#0085CA;font-weight: normal}