/* Modal Popup Start  */
/* 82.0.0     K.G.B   [24-Nov-2018]   Adding css for "cboxOverlay1" same as "cboxOverlay". "cboxOverlay1" is used to show overlay after closing popup  */

#colorbox, #cboxOverlay, #cboxOverlay1, #cboxWrapper { left: 0; outline:none !important; overflow: hidden; position: absolute; top: 0; z-index: 999998; }

#cboxOverlay, #cboxOverlay1 { height: 100%; position: fixed; width: 100%; }

#cboxMiddleLeft, #cboxBottomLeft { clear: left; }

#cboxContent { position: relative; }

#cboxLoadedContent { overflow: auto; -webkit-overflow-scrolling: touch; }

#cboxTitle { margin: 0; height: 40px; width: 100%; border-bottom: dotted 1px #999999; }

#cboxLoadingOverlay, #cboxLoadingGraphic { left: 0; position: absolute; top: 0; width: 100%; height: 100%; }

#cboxPrevious, #cboxNext, #cboxClose, #cboxExpand, #cboxShrink, #cboxSlideshow { cursor: pointer; }

.cboxPhoto { border: 0; display: block; float: left; margin: auto; }

.cboxIframe { width: 100%; height: 100%; display: block; border: 0; padding: 0; margin: 0; }

#cboxOverlay, #cboxOverlay1 { background: #999999; }

#colorbox, #cboxContent, #cboxLoadedContent { box-sizing: content-box; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; }

#colorbox { }

#cboxTopLeft { background: url(../images/border1.png) no-repeat 0 0; height: 25px; width: 25px; }

#cboxTopCenter { background: url(../images/border1.png) repeat-x 0 -50px; height: 25px; }

#cboxTopRight { background: url(../images/border1.png) no-repeat -25px 0; height: 25px; width: 25px; }

#cboxBottomLeft { background: url(../images/border1.png) no-repeat 0 -25px; height: 25px; width: 25px; }

#cboxBottomCenter { background: url(../images/border1.png) repeat-x 0 -75px; height: 25px; }

#cboxBottomRight { background: url(../images/border1.png) no-repeat -25px -25px; height: 25px; width: 25px; }

#cboxMiddleLeft { background: url(../images/border2.png) repeat-y 0 0; width: 25px; }

#cboxMiddleRight { background: url(../images/border2.png) repeat-y -25px 0; width: 25px; }

#cboxContent { background: #fff; overflow: hidden; }

#cboxError { border: 1px solid #ccc; padding: 50px; }

#cboxLoadedContent { margin-top: 28px; }

#cboxTitle { background-color: #FFF; height: 28px; padding-left: 15px; top: 0px; left: 0; position: absolute; text-align: left; width: 100%; line-height: 18px; font-size: 18px; color: #003366; float: left; width: 100%; line-height: 28px !important; border-bottom: 1px solid #E6E6E6;}

#cboxCurrent { bottom: 0px; color: #999; left: 100px; position: absolute; }

#cboxSlideshow { bottom: 0px; color: #444; position: absolute; right: 42px; }

#cboxPrevious { bottom: 0px; color: #444; left: 0; position: absolute; }

#cboxNext { bottom: 0px; color: #444; left: 63px; position: absolute; }

/* 87.0.0.		D.S.S		11-Jun-2019		Updated padding-right due to resolved cut off of 'X' in popup */
/*111.0.0     R.V.S    6-July-2021   Updating width for shrink and expand button to resolve cut off button issue in popup*/
#cboxClose { background: url(../images/icon_close.png) no-repeat; height: 25px; position: absolute; right: 0; text-indent: -9999px; top: 0; width: 10px; margin-top: 2px; outline: none; border: 1px; ; margin-left: 10px; padding-right: 10px;}

#cboxExpand { background: url(../images/icon_go_fullscreen.png) no-repeat; height: 25px; position: absolute; right: 30px; text-indent: -9999px; top: 0; width: 16px; margin-top: 2px; outline: none; border: 1px; margin-left: 10px; margin-right: 10px;}

#cboxShrink { background: url(../images/icon_goback_fullscreen.png) no-repeat; height: 25px; position: absolute; right: 60px; text-indent: -9999px; top: 0; width: 16px; margin-top: 2px; outline: none; border: 1px; margin-left: 10px; margin-right: 10px;}

.cboxIE #cboxTopLeft, .cboxIE #cboxTopCenter, .cboxIE #cboxTopRight, .cboxIE #cboxBottomLeft, .cboxIE #cboxBottomCenter, .cboxIE #cboxBottomRight, .cboxIE #cboxMiddleLeft, .cboxIE #cboxMiddleRight { filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF, endColorstr=#00FFFFFF);
}

/* Modal Popup End */

/*Hide Expand and Shrink icon as they not needed for Mobile, Also crop long title for proper UI in mobile*/
/* For phones only (portrait mode) */
@media only screen and (max-width: 480px) and (orientation: portrait) {
    #cboxShrink, #cboxExpand {
        display: none;
    }

    #cboxTitle {
        max-width: 46ch;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding-right: calc(100% - 46ch - 16px);
    }
}