#isihal {min-height:300px;padding-top:10px;padding-bottom:50px;text-align:center;}
/*
.PageWrapper { overflow: auto; padding: 8px;}
#frIsi {display: inline-block;margin: 0 8px 8px 0;}
height:70vh;
*/
.PageWrapper { overflow: hidden;width:100%;touch-action:none;
  position:fixed;top:0;left:0;bottom:0;right:0;background-color:var(--ColB3);
  background: repeating-conic-gradient(#C1C1C1 0% 25%, #E5E5E5 0% 50%) 50% / 20px 20px;}
#frIsi {display:inline-block;position:absolute;left:15px;top:110px;}


.pageactive {background:none;background-color:var(--Col6);color:var(--Col1);border:2px solid red;}
.pagelinknew {color:var(--ColB2);}
.pagepngfile {background:none;background-repeat:no-repeat;background-color:var(--Col4);
    background-image:url('../img/downpng.png');width:20px;height:24px;vertical-align:bottom;}
.pagepngfile:hover {background-image:url('../img/downpng.png');background-repeat:no-repeat;background-color:var(--Col2);}
.Book-Pages, .Book-Pages-Sub {position:relative;cursor:pointer;user-select: none;-moz-user-select: none;
    border:1px solid black;display:inline-block;overflow:unset;min-width:10px;min-height:10px;
   -webkit-tap-highlight-color: transparent;box-sizing: border-box;}
#Book-Layers {position:fixed;width:100px;display:inline-block;vertical-align:top;right:0;top:100px;}
.iLayerObj {font-size:0.8em;}
.iLayerObj:hover {background-color:#A6DEF5;color:var(--Col5);}
.iLayerHover {outline:2px solid yellow;
    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;}
.BookPages-Obj, .BookPages-Obj-Sub {position:absolute;display:block;user-select: none;-moz-user-select: none;overflow:hidden;
  touch-action: none;box-sizing: border-box;}
.BookPages-Obj svg, .BookPages-Obj-Sub svg {width:100%;height:100%;}
.BookPages-Obj svg polygon, .BookPages-Obj-Sub svg polygon {stroke-linecap:round; stroke-linejoin:round;}
.Book-Contents .BookPages-Obj, .Book-Contents .BookPages-Obj-Sub {touch-action:pan-x pan-y;}
.BookPages-DelObj {display:none !important;}
.BookPages-Obj.page-container {position:unset;display:inline-block;left:unset;top:unset;}
#T-resize {border:3px solid blue;border-radius:100%;background-color:white;text-align:center;
    color:blue;font-size:20px;padding-top:5px;width:30px;height:25px; position:absolute;
    top:10px;left:10px;opacity:0.7;display:none;z-index:50000;}
#T-rotate {border-top-right-radius:100%;border-bottom-left-radius:100%;border-bottom-right-radius:100%;
    border-top-left-radius:none;border:3px solid blue;background-color:white;text-align:center;
    color:blue;font-size:18px;padding-top:1px;width:25px;height:20px; position:absolute;
    top:10px;left:10px;opacity:0.7;display:none;z-index:50000;}
#T-resize:hover,#T-rotate:hover {background-color:#87BFF7;}
.dots {fill:rgba(0,0,200,0.4);stroke:blue;}
.dots.curv {fill:rgba(100,100,200,0.3);stroke:silver;}
.selDots {stroke:red;}

.OnSelected {outline:1px dashed red;}
.onMoving {z-index: 100000;}
.GRP_x0 {outline:2px dashed #27997B;}

.Book-Contents .OnSelected {outline:none;}
.Book-Contentsxxx .Book-Pages {max-width: 100% !important; background-size: contain;background-repeat: no-repeat;}
.ViewAsIMG {display:inline-block;width:40px;height:40px;background-image:url('../images/downpng.png');
    background-size:contain;cursor:pointer;}
.ObjTools {position:fixed;z-index: 50000;top:50px;left:0;text-align: center;width:100%;
  background-color: var(--Col3t);}
.BtnObjTools {padding:0;min-width:38px;min-height:34px;display:inline-block;}
.BtnObjTools i{font-size:22px;color:var(--ColB1);font-weight:bold;padding:6px 6px 2px 6px;}
#frBtnImg,#frBtnImgGal {position:relative;vertical-align: bottom;}
.filebrowse {width:100%;height:100%;opacity:0.1;position:absolute;top:0;left:0;}
#frbtnMaxView {position:fixed;left:0;top:0;padding:4px;cursor:pointer;display:none;margin:auto;width:30px;}

#BSLfrBtnResetPage {background-image:url('../images/reset.png');}
#BSLfrPageList {width:150px;height:40px;font-size:1em;padding:2px;}
#BSLfrSubIsi {position:relative;display:block;border:0;margin:0;padding:0;}
.BtnSelected {background-color:#C7E4C1;}
#BSLfrLnkSaveGalObj:hover {background-color:#E3F1BA !important;}

#Pr-wrap {position:fixed;left:0;bottom:0;display:block;text-align:center;right:0;width:calc(100% - 10px);height:60px;margin:auto;z-index:59999;}
@media (min-width:1024px) {
    #Pr-wrap {width:510px;left:unset;right:16px;} 
}
    
.PrHeader {text-align:left;}
.PrHeader-R {display:inline-block;float:right;width:70px;text-align:right;}
.PrHeader-R div {display:inline-block;width:30px;border-radius:8px;background-color:#1E6EED;border:1px solid #9CD3D5;
text-align:center;cursor:pointer;}
.PrHeader-R div i {font-weight:bold;font-size:24px;color:white;}

#PrSelInfo {text-align:left;font-size:0.8em;color:white;background-color:#1E6EED;padding-left:6px;width:180px;display:inline-block;
min-height:22px;padding-top:4px;border-top-left-radius:4px;border-top-right-radius:4px;cursor:pointer;user-select: none;-moz-user-select: none;
border:1px solid #9CD3D5;touch-action: none;}
#PrSelLock, #PrSubDesign {
    font-size: 18px;
    color: white;
    border-radius: 4px;
    width: 30px;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    background-color: #169E3A;
    padding-top: 4px; vertical-align: middle;
}
#PrSubDesign {background-color:#C28D07;display:none;}
.onSelLocked {background-color:#EF1C1C !important;padding-top:4px;}
#PrIsiSel {display:block;height:0px;width:100%;background-color:rgba(140,140,140,0.85);position:relative;overflow-x:hidden;
text-align:left;}
.PrMenu-wrap {overflow:hidden;border:1px solid blue;}
.PrMenus {background-color:#53d8f4;display:block; white-space: nowrap;height:28px;width:100%;position:relative;overflow-x:scroll;padding-bottom: 20px;overflow-y:hidden;}
.PrMenu {display:inline-block;width:64px;text-align:center;border-right:1px solid white;height:28px;padding:4px;cursor:pointer;
user-select:none;-moz-user-select: none;white-space: normal;position:relative;vertical-align: top;}
.PrMenu:hover,.PRMenuSelect {background-color:#098bca;color:white;}
.PrSubMenu {display:inline-block;text-align:center;border-right:1px solid white;height:26px;padding:4px;cursor:pointer;
user-select:none;-moz-user-select: none;white-space: normal;position:relative;vertical-align: top;background-color:#E1F5FA;
font-size:14px;width:74px;line-height:12px;}
.PrSubMenu:hover {background-color:#53D8F4;}

#UI_CONTENT {width:100%;height:100%;padding:10px;text-align: left;}
.Form_iProp {display:block;padding:8px;text-align:left;font-size:0.8em;background-color:rgba(230,230,230,0.5);position:relative;}
.Form_iProp_half {display:inline-block;width:45%;padding:8px;text-align:left;font-size:0.8em;background-color:rgba(230,230,230,0.5);vertical-align:top;}
.Form_iProp_iTitle {position:absolute;top:0;left:0;background-color:#FAFBB6;color:blue;padding:0 6px;border-bottom-right-radius:6px;}
.FOrm_iProp_iVal {vertical-align:14px;display:inline-block;border:1px solid black;padding:4px;font-size:18px;margin:0 8px;background-color:white;width:44px;text-align:center;}
#UI_UMUM_IsLock {font-size:21px;color:white;border-radius:4px;width:30px;display:inline-block;text-align:center;cursor:pointer;
background-color:#169E3A;height:26px;padding-top:4px;}
.UI_UMUM_IsLock-On {background-color:#EF1C1C !important;padding-top:4px;}
#LIST_FONT_COLOR,.IO_Color {width:42px;height:22px;}
.List_iColor {width:24px;height:20px;display:inline-block;padding-top:3px;cursor:pointer;background-color:white;text-align:center;
border-radius:4px;margin:2px;}
.List_OldColor {outline:1px solid red;}
.List_iColor div {display:inline-block;width:16px;height:16px;vertical-align:top;}


.font-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));gap: 16px;margin-top: 20px;}
.font-item { background: white;border: 2px solid #e1e5e9; border-radius: 12px;padding: 20px 16px;
            cursor: pointer;transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);text-align: center;position: relative;overflow: hidden;}
.font-item::before { content: '';position: absolute;top: 0;left: 0;right: 0;height: 3px;
            background: linear-gradient(90deg, #5773f3 0%, #191cdd 100%);
            transform: scaleX(0);transition: transform 0.3s ease;
        }
.font-item:hover {
    border-color: #667eea;
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.15);
}
.font-item:hover::before {transform: scaleX(1);}
.font-item:active {transform: translateY(-2px);}
.font-preview {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #2d3748;
    line-height: 1.3;
}
.font-name {
    font-size: 12px;
    color: #718096;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: #f7fafc;
    padding: 4px 8px;
    border-radius: 6px;
    display: inline-block;
}
/* Responsive design */
@media (max-width: 768px) {
    .font-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 12px;
    }
    
    .font-item {
        padding: 16px 12px;
    }
    
    .font-preview {
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .font-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Animation for click feedback */
@keyframes clickFeedback {
    0% { transform: scale(1); }
    50% { transform: scale(0.95); }
    100% { transform: scale(1); }
}

.font-item.clicked {
    animation: clickFeedback 0.3s ease;
    border-color: #4c51bf;
    background-color: #faf5ff;
}

.Form_Btns {display:inline-block;min-width:40px;background-color:#2C9CEC;color:white;text-align:center;padding:4px;
border-radius:4px;cursor:pointer;user-select:none;-moz-user-select:none;margin:2px;}
.Form_Btns_On {background-color:#0F5192;}
.Form_iLabel {padding:2px;font-size:18px;vertical-align:bottom;color:black;}
.Form_iNumber {min-width:58px;font-size:22px;padding:2px;color:red;text-align:center;border-radius:6px;vertical-align:bottom;border:1px solid black;}
.Form_iProp_iCombo {padding:4px;font-size:18px;border-radius:6px;}
.BORDER_STYLE_LIST {width:100px;height:16px;outline:1px solid white;text-align:center;display:inline-block;}

.iGalleryImgs {width:50px;height:50px;background-position:center top; }
#mygaleri-wrap .iGalleryImgs {width:100px;height:100px;position:relative;}
.iGalleryDel {position:absolute;top:0;right:0;color:red;}
.iGalleryAktif {position:absolute;top:0;left:0;}

.iBookMenu {background-repeat:no-repeat;background-size:contain;text-shadow:2px 2px 1px var(--Col1);color:var(--Col6);
    background-position:center top;}
.iBookMenu-e, .iBookMenu-d {text-shadow:none;}
.Book-Header {font-size:2em;margin-bottom:30px;}
.Book-Wrap {background-color:#F9FAEF;padding-top:30px;}
.iBookLib {width:340px;display:inline-block;overflow:hidden;vertical-align:top;cursor:pointer;}
.iBookLib-ImgWrap {width:100%;display:block;height:360px;overflow:hidden;}
.iBookLib-ImgWrap img {width:100%;height:100%;}
.iBookLib-ImgWrap .Book-Pages {transform-origin:0 0;pointer-events:none;color:black;text-shadow:none;}
.iBookLib-Title {font-size:14px;padding:6px 0px;}

.iObjList {display:inline-block;padding:2px;cursor:pointer;border:1px solid black;border-radius:4px;margin:2px;}
.iObjGalWrap {display:inline-block;cursor:pointer;border:1px solid var(--Col4);border-radius:4px;margin:2px;background-color:#75C1DA;padding:30px 15px 10px 15px;color:black;position:relative;}
.iObjGalDel {position:absolute;top:0;right:0;color:var(--Col2);}

.object-cfg {display:none;}

/*Ruby pinyin*/
ruby {
  ruby-align: center; /* Menjaga pinyin tetap di tengah */
  ruby-position: over; /* Pinyin berada di atas karakter (standar) */
}
/* Cara untuk justify pinyin, tapi tidak semua browser mendukung */
rt {
  text-align: justify;
  text-justify: distribute-all-lines;
  font-size: small;
}


/*TRANSITION*/
.animate-1 {transition: all 0.1s ease-in-out 0s;}
.animate-5 {transition: all 0.5s ease-in-out 0s;}
.animate-10 {transition: all 1s ease-in-out 0s;}

/*POPUP BOX SHAREBOX */
.sharebox {width:100%;height:100vh;top:0;left:0;right:0;margin:auto;}
.sharebox .mof-form-wrap {display:block;}
#ImgShopBox { overflow-y: auto; overflow-x: hidden; height: 100vh; padding-bottom: 200px; box-sizing: border-box; scrollbar-width: none; }
@media (min-width:1024px) {
    .sharebox {width:520px;left:calc(50% - 260px);right:unset;} 
}
/*Image Shop */
.ImgShop-img { width: 50px;height: 50px; background-position: center top; }
.ImgShop-iList {display:none;width:100%;}

/*Draw CANVAS */
/*POPUP BOX DRAWCANVAS */
.canvasbox {width:320px;height:600px;top:calc(50% - 300px);left:calc(50% - 160px);}
.canvasbox .mof-form-wrap {display:block;max-height:570px;}
@media (min-width:1024px) {
    .canvasbox {width:800px;left:calc(50% - 400px);} 
}
@media (min-width:1500px) {
    .canvasbox {width:1200px;left:calc(50% - 600px);} 
}
#CanvasWrap {position:fixed;top:0px;bottom:0;left:0;right:0; width:100%;
    margin:auto;border:none;background-color: #2F2F2F;}
#CanvasTop {width:100%;height:65px;border:none;}
#CanvasIsi {width:100%;height:calc(100% - 130px);display:block;overflow:hidden;}
    #CanvasLeft {width:40px;height:100%;display:none;border:1px solid black;}
    #CanvasMid {position:relative;width:100%;height:100%;display:inline-block;overflow:none;
        text-align:center;background:repeating-conic-gradient(#C1C1C1 0% 25%, #E5E5E5 0% 50%) 50% / 20px 20px; }
        #cvs { position:absolute;left:10px;top:30px;width:500px;height:500px;border:1px solid black;
            box-shadow: 4px 4px 3px #4B4B4B;display:inline-block;}
    #CanvasRight {width:40px;height:100%;display:none;border:1px solid black;float:right;}
.cvs-btns {padding:4px;min-width:70px;border:1px solid white;border-radius:6px;background-color:#6D6D6D;color:white;margin:2px;}
#CanvasBot {width:100%;height:65px;border:none;}
#cvsresize { position:absolute;border: 2px dotted blue;display:block;font-size:0.8em;color:blue;text-align:right;}
#T-cvsresize {border:3px solid blue;border-radius:100%;background-color:white;text-align:center;
    color:blue;font-size:20px;padding-top:5px;width:30px;height:25px; position:absolute;
    top:10px;left:10px;opacity:0.7;display:none;}
#T-cvsresize:hover {background-color:#87BFF7;}

/* My PROFILE */
.profilebox {width:320px;height:400px;top:calc(50% - 200px);left:calc(50% - 160px);}
.profilebox .mof-form-wrap {display:block;max-height:470px;}