.clip-main-btn {
            background:#ffc107;
            border:none;
            padding:8px 20px;
            font-weight:bold;
            cursor:pointer;
        }

        #container {
            position:relative;
            display:inline-block;
            margin-top:20px;
        }

        #pageImage {
            max-width:100%;
        }

        #selection{
    position:absolute;
    border:2px dashed #1e90ff;
    background: rgba(30,144,255,0.15);
    display:none;
    box-shadow:0 0 15px rgba(0,0,0,0.5);
}
#overlay{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.7);
    pointer-events:none;
    display:none;
}

#selection{
    position:absolute;
    border:2px dotted #eee;
    background:transparent;
    z-index:10;
}

#selection:before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    border:2px solid rgba(255,255,255,0.7);
    pointer-events:none;
}
.ui-resizable-handle{
    width:20px !important;
    height:20px !important;
    border-radius:0px;
	border:2px solid #eee;
}

.ui-resizable-e,
.ui-resizable-w{
    width:10px;
    height:10px;
    border-radius:0px;
    top:50% !important;
    transform:translateY(-50%);
    cursor:ew-resize;
	border:2px solid #eee;
}

.ui-resizable-e{
    right:-6px;
}

.ui-resizable-w{
    left:-6px;
}
.ui-resizable-n,
.ui-resizable-s{
    height:10px;
    width:10px;
    border-radius:0px;
    left:50% !important;
    transform:translateX(-50%);
    cursor:ns-resize;
	border:2px solid #eee;
}

.ui-resizable-n{
    top:-6px;
}

.ui-resizable-s{
    bottom:-6px;
}

        .selection-header {
            position:absolute;
            top:-35px;
            left:0;
            display:flex;
            gap:8px;
        }

        .btn {
            padding:4px 10px;
            font-size:13px;
            border:none;
            color:white;
            cursor:pointer;
            border-radius:4px;
        }

        .share-btn { 
			background:#ebebeb ;
			color: #333 ;
			border: 2px solid #adadad;
			font-weight: bold;
		}
        .cancel-btn { background:#ebebeb;
			color: #333 ;
			border: 2px solid #adadad;
			font-weight: bold; }
			
			
			#pageImage{
			cursor:pointer;
			transition:0.3s;
			border: 1px solid #6a6a6a;
			}

#pageImage.fullwidth{
    width:150%;
    max-width:none;
}
			
		#pageNav{
    position:absolute;
    top:50%;
    width:100%;
    pointer-events:none;
}

.nav-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:45px;
    height:60px;
    background:rgba(0,0,0,0.6);
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    cursor:pointer;
    pointer-events:auto;
    z-index:50;
}

.left-arrow{
    left:0;
}

.right-arrow{
    right:0;
}

.nav-arrow:hover{
    background:#000;
}
.col-lg-6{
	margin: 0 auto;
}
.col-lg-8{
	margin: 0 auto;
}
.col-lg-9{
	margin: 0 auto;
}
.col-md-9{
	margin: 0 auto;
}
.col-lg-10{
	margin: 0 auto;
}
.col-lg-11{
	margin: 0 auto;
}

.page-menu{
background:#fff;
padding:5px 0px;
display:flex;
align-items:center;
gap:20px;
border:1px solid #666666;
margin-bottom:0px;
}

.page-menu button{
background:#fff;
border:0px solid #eee;
padding:6px 10px;
cursor:pointer;
}

.page-menu button:hover{
background:#ccc;
}

.page-info{
font-weight:bold;
}

.pageNumber{
width:50px;
text-align:center;
border: 0px solid #a20;
}



/* Default: hide on desktop */
#stickyBottomMenu {
    display: none;
}



/* Toast styling */
#toast {
    visibility: hidden; /* Hidden by default */
    min-width: 200px;
    max-width: 80%;
    min-height: 200px;
    max-height: 80%;
    background-color: #000000c7;
    color: #fff;
    display: flex;              /* Use flexbox */
    align-items: center;        /* Vertically center text */
    justify-content: center;    /* Horizontally center text */
    text-align: center;         /* Center multi-line text */
    border-radius: 100px;        /* Rounded edges */
    padding: 20px;
    position: fixed;
    top: 50%;                   /* Center vertically */
    left: 50%;                  /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust position to center */
    z-index: 10000;
    font-size: 70px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    opacity: 0;
    transition: opacity 0.5s, transform 0.5s;
}

/* Show toast */
#toast.show {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1); /* Slight scale animation */
}

.scroll-pages {
    max-height: 700px;   /* adjust height as needed */
    overflow-y: auto;    /* vertical scroll */
    overflow-x: hidden;  /* hide horizontal scroll */
    padding-right: 5px;
}
.scroll-pages::-webkit-scrollbar {
    width: 6px;
}

.scroll-pages::-webkit-scrollbar-thumb {
    background: #999;
    border-radius: 10px;
}
.utf_sidebar_right{
	background: #fff;
	border: 1px solid #898989;
}

/* SIDE ADS MAIN */
.side-ad {
    position: fixed;
    top: 100px;
    width: 160px;
    z-index: 9999;
}

/* LEFT */
.left-ad {
    left: 10px;
}

/* RIGHT */
.right-ad {
    right: 10px;
}

/* AD BOX */
.ad-box {
    position: relative;
}

.ad-box img {
    width: 100%;
    height: auto;
    border-radius: 6px;
}

/* CLOSE BUTTON */
.close-ad {
    position: absolute;
    top: 5px;
    right: 5px;
    background: red;
    color: #fff;
    font-size: 14px;
    padding: 3px 6px;
    cursor: pointer;
    border-radius: 3px;
}

/* MOBILE CALENDAR FULL SCREEN */
#mobileCalendarWrapper {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 99999;
    padding: 10px;
}

/* Header */
.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

/* Close button */
#closeCalendar {
    background: red;
    color: #fff;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
}

/* Make datepicker responsive */
.ui-datepicker {
    width: 100% !important;
    font-size: 16px;
}

/* DESKTOP (keep old style) */
@media (min-width: 768px) {
    #mobileCalendarWrapper {
        position: absolute;
        width: auto;
        height: auto;
        background: transparent;
    }
}




/* Show on screens smaller than 768px (mobile) */
@media only screen and (max-width: 768px) {
	
	.side-ad {
        display: none;
    }
	
	.utf_sidebar_right{
		display: none;
	}
	.breadcrumb{
		display: none;
	}
	#toast.show {
    visibility: hidden;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1); /* Slight scale animation */
}
    #stickyBottomMenu {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background: #000000c7;
        color: #fff;
        padding: 10px 10px;
        align-items: center;
        justify-content: center;
        gap: 5px;
        z-index: 9999;
        box-shadow: 0 -2px 5px rgba(0,0,0,0.3);
        flex-wrap: wrap; /* wrap buttons on small screens */
    }

    #stickyBottomMenu button {
        background: #ffffff00;
        color: #ffffff;
        border: none;
        padding: 6px 10px;
        border-radius: 0px;
        cursor: pointer;
        font-size: 25px;
        border-right: 1px solid #ffffff61;
    }

    #stickyBottomMenu button:hover {
        background: #ffffff00;
    }

    #stickyBottomMenu .page-info input {
        width: 40px;
        text-align: center;
        margin: 0 3px;
        border-radius: 4px;
        border: 0px solid #ccc;
        padding: 2px;
    }

    /* Add bottom padding so content is not hidden behind sticky menu */
    .body-inner {
        padding-bottom: 70px;
    }
}