.mof-btn1 {box-shadow:inset 0px 1px 0px 0px var(--Col2);background:linear-gradient(to bottom, var(--Col3) 5%, var(--Col6) 100%);
    background-color: var(--Col3);border-radius:6px;border:1px solid var(--Col4);display:inline-block;cursor:pointer;
	color:var(--Col0);font-size:16px;font-weight:bold;padding:6px 24px;text-decoration:none;text-shadow:0px 1px 0px var(--Col5);
    user-select:none;-webkit-user-select:none;margin:2px;}
.mof-btn1:hover {background:linear-gradient(to bottom,  var(--Col6) 5%, var(--Col3) 100%);background-color: var(--Col6);}
.mof-btn1:active {transform: translatey(0.6px);}
        
.mof-btn2 {border: 2px outset var(--Col3);border-radius: 100%; background-color: var(--Col3);text-align: center; 
    font-variant: small-caps;font-weight: bold; color: var(--Col0); font-size: 18px; cursor:pointer;padding:10px 12px;
    box-shadow:0px 0px 1px 3px var(--Col3);user-select:none;-webkit-user-select:none;display:inline-block;margin:6px;
    background:linear-gradient(to bottom, var(--Col3) 5%, var(--Col5) 100%);}
.mof-btn2:hover {background:linear-gradient(to bottom, var(--Col6) 5%, var(--Col3) 100%);background-color:var(--Col6);}
.mof-btn2:active {transform: translatey(0.6px);box-shadow:0px -1px 1px 3px var(--Col3);border: 2px inset var(--Col3);}

.mof-btn3 {border: 2px outset var(--Col3);border-radius: 8px; background-color: var(--Col3);text-align: center; 
    font-variant: small-caps;font-weight: bold; color: var(--Col0); font-size: 18px; cursor:pointer;padding:10px 12px;
    box-shadow:0px 0px 1px 3px var(--Col3);user-select:none;-webkit-user-select:none;display:inline-block;margin:6px;
    background:linear-gradient(to bottom, var(--Col3) 5%, var(--Col5) 100%);}
.mof-btn3:hover {background:linear-gradient(to bottom, var(--Col6) 5%, var(--Col3) 100%);background-color:var(--Col6);}
.mof-btn3:active {transform: translatey(0.6px);box-shadow:0px -1px 1px 3px var(--Col3);border: 2px inset var(--Col3);}

.mof-btn4 {border: 2px outset var(--Col3);border-radius: 2px; background-color: var(--Col3);text-align: center; 
    color: var(--Col0); font-size: 18px; cursor:pointer;padding:10px 12px;
    box-shadow:0px 0px 1px 2px var(--Col3);user-select:none;-webkit-user-select:none;display:inline-block;margin:3px;
    background:linear-gradient(to bottom, var(--Col3) 5%, var(--Col5) 100%);}
.mof-btn4:hover {background:linear-gradient(to bottom, var(--Col6) 5%, var(--Col3) 100%);background-color:var(--Col6);}
.mof-btn4:active {transform: translatey(0.6px);box-shadow:0px -1px 1px 2px var(--Col3);border: 2px inset var(--Col3);}
.mof-btn4.BtnSelected {mix-blend-mode: hard-light;}

.mof-btn5 {border: 1px solid var(--Col0);border-radius: 4px; background-color: var(--Col3);text-align: center; 
    color: var(--Col9); font-size: 18px; cursor:pointer;padding:10px 12px;user-select:none;-webkit-user-select:none;
    display:inline-block;text-shadow:1px 1px var(--Col0);margin:2px;
    background:linear-gradient(to bottom, var(--Col3) 5%, var(--Col4) 100%);}
.mof-btn5:hover {background:linear-gradient(to bottom, var(--Col2) 5%, var(--Col3) 100%);background-color:var(--Col4);
    text-shadow:-1px -1px var(--Col0);}
.mof-btn5:active {transform: translatey(0.6px);border: 1px solid var(--Col4);}

.mof-btn6 {border: 1px solid var(--Col0);border-radius: 4px; background-color: var(--Col3);text-align: center; 
    color: var(--ColB6); font-size: 18px; cursor:pointer;padding:10px 12px;user-select:none;-webkit-user-select:none;
    display:inline-block;text-shadow:1px 1px var(--Col0);margin:2px;box-shadow:2px 2px 3px 2px var(--ColB6);
    background:linear-gradient(270deg, var(--Col3) 5%, var(--Col4) 100%);}
.mof-btn6:hover {background:linear-gradient(45deg, var(--Col4) 5%, var(--Col3) 100%);background-color:var(--Col4);
    text-shadow:-1px -1px var(--Col0);}
.mof-btn6:active {transform: translatey(0.6px);border: 1px solid var(--Col3);box-shadow:1px 1px 1px 1px var(--ColB6);}

.mof-btn7 {box-shadow:inset 0px 1px 0px 0px var(--Col2);background:linear-gradient(to bottom, var(--Col3) 5%, var(--Col6) 100%);
    background-color: var(--Col3);border-radius:4px;border:1px solid var(--Col4);display:inline-block;cursor:pointer;
	color:var(--Col0);font-size:16px;font-weight:bold;padding:12px 24px;text-decoration:none;text-shadow:0px 1px 0px var(--Col5);
    user-select:none;-webkit-user-select:none;margin:2px;}
.mof-btn7:hover {background:linear-gradient(to bottom,  var(--Col6) 5%, var(--Col3) 100%);background-color: var(--Col6);}
.mof-btn7:active {transform: translatey(0.6px);}

.mof-btn8 {border: 1px solid var(--ColB3);border-radius: 4px; background-color: var(--ColB1);text-align: center; 
    color: var(--Col9); font-size: 18px; cursor:pointer;padding:10px 12px;user-select:none;-webkit-user-select:none;
    display:inline-block;text-shadow:1px 1px var(--Col0);margin:2px;
    background:linear-gradient(to bottom, var(--ColB1) 5%, var(--ColB3) 100%);}
.mof-btn8:hover {background:linear-gradient(to bottom, var(--ColB3) 5%, var(--ColB1) 100%);background-color:var(--Col4);
    text-shadow:-1px -1px var(--Col0);}
.mof-btn8:active {transform: translatey(0.6px);border: 1px solid var(--Col4);}

.mof-btn9 {border: 1px solid var(--Col0);border-radius: 4px; background-color: transparent;text-align: center; 
    color: var(--Col9); font-size: 18px; cursor:pointer;padding:10px 12px;user-select:none;-webkit-user-select:none;
    display:inline-block;text-shadow:1px 1px var(--Col0);margin:2px;}
.mof-btn9:hover {background-color:var(--Col1t);
    text-shadow:-1px -1px var(--Col0);}
.mof-btn9:active {transform: translatey(0.6px);border: 1px solid var(--Col4);}
            
            
.WsizeMB {width:25px;height:25px;padding:0;margin:0;}
.WsizeS {min-width:50px;}
.WsizeM {min-width:100px;}
.WsizeL {min-width:150px;}
.WsizeXL {min-width:200px;}
.WsizeFull {width:100%;}
.WsizeFullx {width:99vw;box-sizing: border-box;}

/*PANEL*/
.mof-pnl-top { position:absolute;top:0;left:0;right:0;font-size:1.4em;padding:6px 0px;
    background:linear-gradient(to bottom, var(--Col3t) 5%, var(--Col6t) 100%);background-color: var(--Col3);
    width:100%;border-bottom:1px solid var(--Col2);}
.mof-pnl-bottom { position:absolute;bottom:0;left:0;right:0;padding:6px 0px;
    background:linear-gradient(to bottom, var(--Col3t) 5%, var(--Col6t) 100%);background-color: var(--Col4);
    width:100%;border-bottom:1px solid var(--Col2);}
.mof-pnl-fixbottom { position:fixed;bottom:0;left:0;right:0;padding:6px 0px;
    background:linear-gradient(to bottom, var(--Col3t) 5%, var(--Col6t) 100%);background-color: var(--Col4);
    width:100%;border-bottom:1px solid var(--Col2);z-index: 100;}
.mof-pnl-head { position:relative;display:block;width:100%;font-size:1.4em;padding:12px 0px;
    background:linear-gradient(to bottom, var(--Col3t) 5%, var(--Col6t) 100%);background-color: var(--Col3);
    width:100%;border-bottom:1px solid var(--Col2);}

.mof-pnl1 {position:relative;border-radius:6px;border:1px solid var(--Col4);
	color:var(--Col0);text-shadow:0px 1px 0px var(--Col5);display:inline-block;
    background:linear-gradient(to bottom, var(--Col2t) 5%, var(--Col3t) 100%);
    user-select:none;-webkit-user-select:none;margin:2px;}
        
.mof-pnl2 {position:relative;border: 2px outset var(--Col3);border-radius: 8px; background-color: var(--Col3);text-align: center; 
    font-variant: small-caps;font-weight: bold; color: var(--Col0); font-size: 18px; cursor:pointer;
    box-shadow:0px 0px 1px 6px var(--Col3);user-select:none;-webkit-user-select:none;display:inline-block;margin:6px;
    background:linear-gradient(to bottom, var(--Col3t) 5%, var(--Col5t) 100%);}

.mof-pnl3 {position:relative;border: 2px outset var(--Col3);border-radius: 2px; background-color: var(--Col3);text-align: center; 
    color: var(--Col0); font-size: 18px; cursor:pointer;
    box-shadow:0px 0px 1px 2px var(--Col3);user-select:none;-webkit-user-select:none;display:inline-block;margin:3px;
    background:linear-gradient(to bottom, var(--Col3) 5%, var(--Col5) 100%);}

.mof-pnl4 {position:relative;border: 1px solid var(--Col3);padding:4px 4px 30px 4px; margin:2px;background-color: var(--Col4);
    display:inline-block;overflow:hidden;vertical-align:top;border-radius:6px;user-select:none;-webkit-user-select:none;}
    .mof-pnl4-isi {background-color: var(--Col2);width:100%;padding:4px 0;border-radius:6px;}
    
.mof-pnl5 {position:relative;border-radius:6px;border:2px solid var(--Col3);
	color:var(--Col0);text-shadow:0px 1px 0px var(--Col5);display:inline-block;
    background-color: var(--Col1t);user-select:none;-webkit-user-select:none;margin:2px;}
    

@media (min-width:10px) { 
    .mof-pnl1,.mof-pnl2,.mof-pnl3,.mof-pnl4,.mof-pnl5 {width:340px;}
} 
@media (min-width:380px) { 
    .mof-pnl1,.mof-pnl2,.mof-pnl3,.mof-pnl4,.mof-pnl5 {width:370px;}
} 
@media (min-width:1024px) { 
    .mof-pnl1,.mof-pnl2,.mof-pnl3,.mof-pnl4,.mof-pnl5,.WsizeFullx {width:970px;}
}   

/*TEXT*/
.mof-read {font-size:1.2em;}
.mof-read2 {font-size:1.5em;}
.mof-read3 {font-size:1.8em;}
.mof-read4 {font-size:2em;}
 
/*LABEL*/
.mof-lbl1 {font-size:1.4em;font-weight:bold;letter-spacing:1.5px;font-family:Helvetica;text-shadow:1px 2px 1px var(--Col0);
    color:var(--Col6);}
 
.mof-form-wrap1 {overflow-y:scroll;padding:8px 30px 25px 10px;display:inline-block;
    margin-right:-30px;margin-bottom:30px;touch-action:pan-x pan-y;overscroll-behavior-y: none;scrollbar-width: thin;}
.mof-form-wrap1 .mof-form {width:calc(100% - 10px);text-align:left;margin-bottom:4px;}
.mof-form-wrap1 .mof-form-half {width:calc(50% - 10px);display:inline-block;margin-right:8px;}
.mof-form-wrap1 .mof-form label {width:100%;font-size:1em;color:var(--Col6);padding:6px;display:inline-block;}
.mof-form-wrap1 .mof-form input, .mof-input1 {width:100%;padding:6px;border-radius: 6px;box-sizing:border-box;}
.mof-form-wrap1 .mof-form input[readonly] {background-color:var(--ColB2);}
.mof-form-wrap1 .mof-form select {width:100%;padding:4px;border-radius: 6px;box-sizing:border-box;background-color:white;}
.mof-form-wrap1 .mof-form option {background-color:white;}
.mof-form-wrap1 .mof-form textarea {width:100%;padding:4px;border-radius: 6px;box-sizing:border-box;}

.mof-form-wrap2 {width:100%;overflow-y:scroll;padding:4px 15px 25px 10px;display:inline-block;
    margin-right:-50px;margin-bottom:30px;touch-action:pan-x pan-y;overscroll-behavior-y: none;scrollbar-width: thin;}
.mof-form-wrap2 .mof-form {width:calc(100% - 10px);text-align:left;margin-bottom:4px;}
.mof-form-wrap2 .mof-form-half {width:calc(50% - 10px);display:inline-block;margin-right:8px;} 
.mof-form-wrap2 .mof-form label {width:100%;font-size:1.2em;color:var(--ColB5);padding:4px 4px 6px 0px;display:inline-block;}
.mof-form-wrap2 .mof-form input, .mof-input2 {width:100%;padding:12px;border-radius: 6px;box-sizing:border-box;font-size:1.2em;border:1px solid var(--ColB4);}
.mof-form-wrap2 .mof-form input[readonly] {background-color:var(--ColB2);}
.mof-form-wrap2 .mof-form select {width:100%;padding:8px;border-radius: 6px;box-sizing:border-box;background-color:white;font-size:1.2em;}
.mof-form-wrap2 .mof-form option {background-color:white;font-size:1.2em;}
.mof-form-wrap2 .mof-form textarea {width:100%;padding:12px;border-radius: 6px;box-sizing:border-box;font-size:1.2em;
    border:1px solid var(--ColB4);} 


/*Loading*/
.mof-preload1 {  background-color: var(--Col3);
  height: 3em;
  width: 3em;
  margin: 7em auto;
  animation: preload1 4s linear infinite;
}

@keyframes preload1 {
  55% {
    background-color: var(--Col3t);
    border-radius: 100%;
    transform: rotate(360deg);
    box-shadow: 7em 0 0 var(--Col2t),-7em 0 0 var(--Col2t),3em 0 0 var(--Col2t),-3em 0 0 var(--Col2t),0 7em 0 var(--Col2t),0 -7em 0 var(--Col2t),0 3em 0 var(--Col2t),0 -3em 0 var(--Col2t);
  }
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }
  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}




.mof-btnimg {background-repeat: no-repeat; background-position: center;border-radius:6px;border:1px solid var(--Col4);display:inline-block;
    text-decoration:none;cursor:pointer;user-select:none;-webkit-user-select:none;margin:2px;vertical-align: top;}
.mof-btnimg:hover {background-color: var(--Col4);}
.mof-btnimg:active {transform: translatey(0.6px);}

.mof-btnview1 {background-image:url('../img/eye.png');height:34px;width:34px;}
.mof-btnedit1 {background-image:url('../img/edit.png');height:34px;width:34px;}
.mof-btndel1 {background-image:url('../img/delete.png');height:34px;width:34px;}
.mof-btnback1 {background-image:url('../img/back.png');height:34px;width:34px;}
.mof-btnrefresh1 {background-image:url('../img/refresh.png');height:34px;width:34px;}
.mof-btnnew1 {background-image:url('../img/new.png');height:34px;width:34px;}
.mof-btnpng {background-image:url('../img/downpng.png');height:34px;width:34px;background-size: contain;}





.USGViewTable {background-image:url('../img/table.png');}
.USGPrinter {background-image:url('../img/jetprinter.png');}
.USGDone {background-image:url('../img/done.png');}
.USGCari {padding:6px 18px 6px 6px;font-size:14px;border:1px solid silver;vertical-align:top;
    border-top-right-radius:10px;border-bottom-right-radius:10px;text-transform:uppercase;
    width:180px;}
.fldCari {position:relative;font-size:26px;border-radius:10px;margin-right:6px;
    vertical-align:top;background-color:var(--Col6);color:white;padding:4px;
    display:inline-block;height:32px;}
.fldCari a {position:absolute;right:6px;color:red;font-size:20px;cursor:pointer;
    padding:5px 5px 5px 5px;top:0;bottom:0;}

.USGMobileTable { 
  width: 100%;
  border-collapse: collapse; 
  margin-bottom:20px;
}
/* Zebra striping */
.USGMobileTable tr:nth-of-type(odd) {background: #eee;}
.USGMobileTable tr:hover {background: var(--Col6);color:white;}

.USGMobileTable thead th {
    padding:10px 5px;
}
.USGMobileTable th { 
  background: #333; 
  color: white; 
  font-weight: bold; 
}
.USGMobileTable td,.USGMobileTable th { 
  padding: 4px; 
  border: 1px solid #ccc; 
  text-align: left;
}
@media only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

	.USGMobileTable, .USGMobileTable thead, .USGMobileTable tbody, .USGMobileTable th, .USGMobileTable td, .USGMobileTable tr {
		display: block !important;
	}
	
	.USGMobileTable thead tr { 
		position: absolute; 
		top: -9999px;
		left: -9999px;
	}
	
	.USGMobileTable tr { border: 1px solid #ccc; }
	.USGMobileTable td { 
		/* Behave  like a \"row\" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 40%;
	}
	
	.USGMobileTable td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 35%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
	
    .USGMobileTable td[judul]:before { content: attr(judul); }
    .USGMobileTable td[judul]:after { content: ".";clear: both;visibility: hidden; }
}