/* Lv: 0(ground) 100(float) 500(topmenu)  8000(modal) */
* {box-sizing: border-box;}
    .ui-open-modal {
        width: 300px;
        background-color: transparent;
        box-shadow: none;
        transition: all 0.6s ease-in-out 0s;
        height:10px;
    }
    .ui-modal-msg {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        width: 100%;
        background-color: rgba(255,255,255,0.95);
        padding: 0;
        z-index: 8000;
        text-align: center;
        overflow: hidden;
        box-shadow: 4px 4px 4px black;
    }
    .ui-modal-bottom {background-color:transparent;top:unset;box-shadow:none;}
    .ui-modal-center {background-color:transparent;box-shadow:none;}
    .bi-black {position:fixed;top:-50px;left:0;right:0;bottom:0;margin:auto; background-color:rgba(0, 0, 0, 0.5);z-index:8000;touch-action:none;}
/* ListBox */
.listbox-wrap {border-radius:8px;border:1px solid var(--ColB4);background-color:white;margin-bottom:16px;}
.listbox-item { position:relative; border-bottom:1px solid var(--ColB4);cursor:pointer;padding:16px;text-align:left;margin:0px;font-size:18px;}
.listbox-sel {background-color:var(--ColB3);}
.listbox-sel2 {background-color:var(--ColB2);color:var(--Col4);}
.listbox-item:last-of-type {border-bottom:0;}
.listbox-item:hover { background-color:var(--ColB3);}
.listbox-item em {position:absolute; bottom:4px;right:16px;font-size:.8em;color: var(--ColB5);}  

/* Loading Box */
.globalpreload {color:white;text-align:center;padding-top:200px;font-size:2em;}
.globalpreload div {position:fixed;width:300px;height:300px;top:0;left:0;right:0;bottom:0;margin:auto;user-select:none;
    display:block;touch-action:none;-webkit-tap-highlight-color: transparent;}
.localpreload {position:relative;padding-top:10px;width:100%;height:200px;font-size:1.4em;padding-top:0px;overflow:hidden;}
.localpreload div {position:absolute;width:30px;height:28px;left:0;right:0;top:0;bottom:0;margin:auto;}

/*Calender */
.ui-calender-wrap {width:290px;background-color:white;border:1px solid silver;border-radius:8px;font-size:18px;
	box-shadow:3px 3px 3px darkgray;position:fixed;max-height:240px;} 
.ui-calender-head {position:relative;width:100%;display:flex;place-content: space-around; place-items: center;
	font:message-box; text-transform: uppercase;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;} 
.ui-calender-head * {display:inline-flex;padding:4px;cursor:pointer;}
.ui-calender-monthyear {font-size:16px;}
.ui-calender-month {color:blue;min-width:120px;text-align:right;}
.ui-calender-year {color:blue;}
.ui-calender-headpick {position:absolute;display:none;border:1px solid black;top:26px;background-color:white;
	max-height:120px;overflow:auto;overscroll-behavior: contain;padding:0;width:180px;z-index:8000; }
.ui-calender-picked-item { background-color:lightgray; }
.ui-calender-month-item {display:block;padding:8px 10px;} 
.ui-calender-month-item:hover {background-color:cyan;} 
.ui-calender-year-item {display:block;padding:8px 16px;text-align:right;} 
.ui-calender-year-item:hover {background-color:cyan;}

/*-- Days --*/
.ui-calender-days-wrap {width:100%;border:0px solid blue;text-align:center;}
.ui-calender-days-wrap table {border-spacing:0;padding:0;display:inline-block;border-top:1px solid silver;}
.ui-calender-days-wrap table td {
	font-size:16px;text-align:center;padding:4px;
	display:inline-block;border:0px solid black;
	box-sizing:border-box;width:40px;user-select:none;
}			
.ui-calender-days-wrap table tr:first-childs td {
	font-weight:bold;
}
.ui-calender-days-wrap table tr td:first-child {
	color:red;
}			
.ui-calender-day-item {cursor:pointer;}
.ui-calender-day-item:hover {background-color:lime;font-weight:bold;}
.ui-calender-today {text-decoration:underline double red; }
.ui-calender-pick {background-color:aqua;font-weight:bold;}

/*TogglePanel*/
.ui-togglepanel-head {cursor:pointer;padding-left: 16px; padding-right:16px;text-align:left;}
.ui-togglepanel-wrap {background:none;background-color: rgba(240,240,240,.2);vertical-align: top;}
.ui-togglepanel-minibtn {position: absolute;right:4px;top:4px;font-size:1em;color:white;}
.ui-togglepanel-minibtn button {margin:0px 2px;}
.ui-togglepanel-isi {color: #1E1E1E;padding:20px;font-size:1em;text-shadow:none;font-family: Roboto,sans-serif;overflow-x:hidden;}
 

/*TabPage*/
.TabPage-Wrap * {box-sizing: border-box;}
.TabPage-Wrap {width:100%;min-height:100px;border:1px solid var(--ColB3);border-radius:6px;display:flex;flex-flow:column;
    box-sizing: border-box;}
.TabPage-Btns {width:100%;display:flex;flex-flow: row;}
.TabPage-iBtn {width:100%;border:none;text-align:center;padding:12px;cursor:pointer;color:var(--ColB5);
    background-color: var(--ColB1);user-select:none;outline-style:none;}
.TabPage-Act {color:var(--Col4);background-color: var(--Col1);}
@media(hover: hover) and (pointer: fine) {
    .TabPage-iBtn:hover {background-color: var(--ColB2);}
}
.TabPage-Line {position:relative;width:100%;}
.TabPage-iLine {border:none;background-color:var(--Col4);height:3px;border-radius:6px;position:absolute;top: 0px; }
.TabPage-Content {width:100%;height:100%;overflow-x:scroll;scrollbar-width: none;position:relative;overflow-y:hidden;}
.TabPage-Pages {white-space:nowrap;display:block;}
.TabPage-iPage {width:100%;height:100%;display:inline-block;text-align:left;vertical-align:top;}

/*HzPanel (Horizontal Panel)*/
.HzPanel-Wrap {width:340px;height:220px;border:none;position:flex;flex-flow:row;}
.HzPanel-Content {width:100%;height:calc(100% - 20px);overflow-x:scroll;scrollbar-width: none;}
.HzPanel-Pages {width:100%;height:100%;white-space:nowrap;display:block;text-align:left;}
.HzPanel-iPage {width:90%;height:100%;display:inline-block;vertical-align:top; border:none;}
.HzPanel-bullets {height:10px;display:block;text-align:center;}
.HzPanel-ibullet {border-radius:100%;display:inline-block;
	width:10px;height:10px;background-color:var(--ColB3);cursor:pointer;margin:0 2px;}
.HzPanel-Active {background-color:var(--Col5);}

/*rptpaper */
.ui-rptpaper { border:1px solid #DDDDDD;box-sizing:border-box;position:relative;overflow:hidden;font-size:13px;
    background-color:white;display:inline-block;outline:20px solid white;margin:0px 25px;}
.ui-rptnewpage {margin-top:50px;}
.ui-rptpaper-footer {position: absolute !important;bottom:0;margin:auto;width:100%;display:block !important;}
.ui-rptpaper-row {width:100%;display:flex;flex-flow:row;text-align:left;position:relative;border:none;}
.ui-rptcols {padding:2px;white-space:normal;}

@media print {
    .ui-rptpaper {border:none;outline:none;width:100% !important;margin-top:0;margin:0; }
    .ui-rptnewpage {page-break-before:always;break-before:always;border-bottom: 0px dotted black;border:3px solid white;margin-top:0;}
    .noprint{display:none !important;}
} 


/* FlashText */
#ui-flashtext-wrapper {position:fixed;right:0;top:50px;width:370px;text-align:right;outline:none;border:none;background:none;
    z-index:650;}
.ui-flashtext {position:relative;padding:30px 25px 25px 55px;width:340px;font-size:1.2em;cursor:pointer;
    word-wrap: break-word;z-index:8000;color:white;border-bottom-left-radius:12px; 
    text-indent:-15px;display:inline-block;text-align:left;border-bottom:2px solid var(--Col2);
    background:linear-gradient(to left, var(--Col3t) 0%, var(--Col5) 100%);  }
.ui-flashtext-close {position:absolute;top:4px;right:4px;}
.ui-flashtext .ui-flashtext-title {border-bottom:1px solid white;}
.ui-flashred {background:linear-gradient(to left, rgba(255,0,0,.6) 0%, #A70808 100%);}
.ui-flashred .ui-flashtext-close {background:none;background-color:#B50808;box-shadow:none;border:none;}  

/* TosText */
.ui-tostext {position:fixed;left:0;right:0;bottom:10%;z-index:8500;text-align:center;width:100vw;}
.ui-tostext .ui-tostextisi {padding:12px 24px;color:white;background-color:var(--Col9);font-size:1em;min-width:300px;display:inline-block;}

/* vsChart */
.ui-grafik-wrap {position:relative;width:100%;max-width:800px;height:700px;border:1px solid silver;overflow:hidden;}
.ui-grafik-title {position:absolute;left:0;top:0;right:0;font-weight:bold;text-align:center;font-size:2em;padding-top:20px;}
.ui-grafik-koor {position:absolute;left:110px;bottom:90px;top:100px;right:150px;
	border-bottom:2px solid gray;border-left:2px solid gray;z-index:1;display:flex;align-content: space-evenly;}
.ui-grafik-koor div {display:block;flex-basis:10%;border-right:1px dashed #DCDBDB;z-index: 0;}
.ui-grafik-chart {position:absolute;left:0;right:0;bottom:0;top:0;padding:0;margin:0;background-color:transparent;
    overflow:hidden;margin-bottom:92px;z-index: 2;}
.ui-grafik-wbar {position:absolute;width:calc(100% - 40px);height:70px;background-color:transparent;}
.ui-grafik-bar {position:absolute;left:103px;top:5px;bottom:5px;right:0;text-align:right;box-shadow:4px 4px 4px gray;overflow:hidden;}
    .ui-grafik-bar img {position:absolute;top:0;right:5px;bottom:0;margin:auto;height:100%;}
.ui-grafik-wlbl {position:absolute;left:0;top:0;bottom:0;width:100px;display:flex;flex-flow: wrap;align-content: center;}
.ui-grafik-lbl {width:100%;text-align:center;display:block;align-content:center;}
.ui-grafik-wval {position:absolute;top:0;bottom:0;width:100px;display:flex;flex-flow: wrap;align-content: center;}
.ui-grafik-val {width:100%;text-align:left;padding-left:8px;display:block;align-content:center;font-weight:bold;font-size:1.5em;}
.ui-grafik-time {position:absolute;left:0;bottom:40px;right:0;text-align:right;font-size:1.5em;padding-bottom:40px;font-style:italic;}
.ui-grafik-masa {position:absolute;right:20px;opacity:1;width:240px;}
.ui-grafik-control {position:absolute;left:0;bottom:0px;right:20px;height:40px;text-align:right;font-size:1.2em;}
.ui-grafik-control span {cursor:pointer;padding:10px 4px;display:inline-block;color:#626262;}
.ui-grafik-control span:hover {color:#25B3D3;text-shadow: 1px 1px 8px #25B3D3;}
.ui-grafik-slider {vertical-align:-3px;-webkit-appearance: none;appearance: none;cursor:pointer;
    height: 18px; background-color: rgba(0,0,0,.1);border-radius:8px;outline: none;opacity: 0.6;-webkit-transition: .2s;transition: opacity .2s;}
.ui-grafik-slider:hover {opacity:1;}
.ui-grafik-move, .ui-animate {transition: all 1s ease-in-out 0s;}
.ui-animate-fast {transition: all 0.5s ease-in-out 0s;}


/* Dialog Box */
/*---Confirm */
 .ui-dialog-confirm { width:99%;background-color:white;  }
 .ui-dialog-confirm .ui-togglepanel-isi { padding:30px 20px 30px 20px;position:relative;text-align:left;}
 .dlgbox_btns {width:120px;}
 @media (min-width:720px) { 
     .ui-dialog-confirm {max-width:50%;}  
 }
 
/* modalpage */    
.ui-animate {transition: all 1s ease-in-out 0s;}
.ui-modalpage {position:fixed;top:0;left:100vw;width:100vw;bottom:0;background-color:var(--ColB1);text-align:center;
    z-index:600;}   
    
/* picklist */
.ui-picklist-wrap {width:100%;height:calc(100vh - 50px);display:inline-block;}
.ui-picklist-row {width:calc(100% - 4px);min-width:340px;display:inline-block;margin:1px;padding:6px;cursor:pointer;
    position:relative;text-align:left;display:flex;justify-content: flex-start;border-bottom:1px solid var(--Col2t);
    background:linear-gradient(180deg,var(--Col2t), var(--Col1t) );user-select:none;}
.ui-picklist-row:hover .ui-picklist-colD {color:var(--Col6);font-weight:bold;}
.ui-picklist-colA {display:inline-block;vertical-align:top;border-radius:8px;
    padding-top:10px;text-align:left;flex-basis:40px;
    width:40px;background-repeat: no-repeat;background-size: contain;}
.ui-picklist-colA i {font-size:3em;}
.ui-picklist-colI {width:calc(100% - 90px);display:inline-block;vertical-align:top;padding:10px 10px;text-align:left;}
.ui-picklist-colB {font-weight:bold;}
.ui-picklist-colC {}
.ui-picklist-colD {width:50px;display:inline-block;height:100%;flex-basis:40px;align-self: center;text-align: right;}
.ui-picklist-colD i {display:inline-block;font-size:2em;}
.ui-picklist-nodata {padding: 16px 0;font-size:1em;}
.ui-picklist-cari {background:none;background-color:var(--ColB2);text-align:left;height:50px;font-size:1.2em;padding: 8px 4px;
    box-shadow: -2px -3px 2px #cacaca;display: flex; flex-direction: row; align-items: center;}
.ui-picklist-cari i {font-size:2em;vertical-align:top;padding-top: 2px;color:var(--Col5);	}
.ui-picklist-cari input {padding:8px;vertical-align:top;outline:none;border:none;background-color:transparent;
    flex-grow:2;}
.ui-picklist-reset {color: var(--Col5);cursor:pointer;width:22px;height:22px;display:inline-block;text-align:center;
    text-shadow: none;vertical-align: -6px;flex-basis:36px;}
.ui-picklist-filter {flex-basis:36px;cursor:pointer;font-size: 0.8em;}

.ui-picklist-reset i {font-size:1em;}


/* List Custom model 1*/
.ui-custom-menus-1 {text-align:left;display:flex;width:100%;flex-wrap: wrap;}
    .ui-custom-imenu-1 {position:relative;color:black;cursor:pointer;border-radius:4px;margin: 4px 14px 40px 14px;background-color:transparent;
        text-align:center;padding:8px;display:inline-block;border:none;width:58px;height:58px}
    .ui-custom-imenu-1 i {font-size:3em;color:var(--Col5);}
    .ui-custom-imenu-1:hover {background-color:rgb(247, 243, 214,0.8);border:none;color:var(--Col5);}
    .ui-custom-imenu-1::after {
        content: attr(title); 
        font-size:1em; line-height:1.2em;
        text-align:center; 
        position:absolute;left:-2px;right:-2px;top:calc(100% - 3px);
    }
    .ui-custom-imenu-1-cancel {display:none;}
    .ui-custom-imenu-1-off {color:var(--Col5);}