:root{
    --warna-latar: #f1f6d3;
    --warna-latar-main: #A0D9F9;
    --warna-topmenu: #0587D1;
    --warna-btnhigh: #31B5D9;
    --warna-sidemenu: rgba(60,125,200,0.7);

    /*Gray*/
    --ColB0: #ffffff;
    --ColB1: #F8F8F8;
    --ColB2: #EEEEEE;
    --ColB3: #C9C9C9;
    --ColB4: #8C8C8C;
    --ColB5: #585858;
    --ColB6: #2E2E2E;
    --ColB9: #000000;

    /*Black
    --Col0: #ffffff;
    --Col1: #F8F8F8;
    --Col2: #EEEEEE;
    --Col3: #C9C9C9;
    --Col4: #8C8C8C;
    --Col5: #585858;
    --Col6: #2E2E2E;
    --Col9: #000000;
    */
    /*Green
    --Col0: #ffffff;
    --Col1: #D2EEBE; --Col1t: rgba(210,238,190,0.6);
    --Col2:	#8FDD86; --Col2t: rgba(143,221,134,0.6);
    --Col3:	#62C981; --Col3t: rgba(98,201,129,0.6);
    --Col4:	#21B355; --Col4t: rgba(33,179,85,0.6);
    --Col5:	#19AB25; --Col5t: rgba(25,171,37,0.6);
    --Col6: #0A5E1A; --Col6t: rgba(10,94,26,0.6);
    --Col9: #000000;
    */


    /*Blue*/
    --Col0: #ffffff;
    --Col1: #f5f5f5; --Col1t: rgb(245,245,245,0.6);
    --Col2:	#97c4fe; --Col2t: rgb(151,196,254,0.6);
    --Col3:	#3d93f6; --Col3t: rgb(61,147,246,0.6);
    --Col4:	#3381ed; --Col4t: rgb(51,129,237,0.6);
    --Col5:	#1571cd; --Col5t: rgb(21,113,205,0.6);
    --Col6: #1e62d0; --Col6t: rgb(30,98,208,0.6);

    --Col9: #000000;



}

.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 6px 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 6px 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 6px 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 6px 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-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);}


.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%;}

/*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%);
    width:100%;border-bottom:1px solid var(--Col2);}
.mof-pnl-bottom2 { position:absolute;bottom:0;left:0;right:0;padding:6px 0px; 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: 1000;}
.mof-pnl-head { position:relative;display:block;width:100%;font-size:1.4em;padding:8px 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;vertical-align:bottom;}

.mof-pnl2 {position:relative;border: 2px outset var(--Col3);border-radius: 8px; 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-color: var(--Col3);vertical-align:bottom;
    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;vertical-align:bottom;
    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;vertical-align:bottom;}

.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;vertical-align:bottom;
    background-color: var(--Col1t);user-select:none;-webkit-user-select:none;margin:2px;}


/*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-wrap {overflow-y:scroll;padding:8px 30px 25px 10px;display:inline-block;max-height:140px;
    margin-right:-30px;touch-action:pan-x pan-y;overscroll-behavior-y: none;}
.mof-form1 {width:100%;text-align:left;margin-bottom:4px;}
.mof-form1 label {width:100%;font-size:1em;}
.mof-form1 input {width:100%;padding:4px;border-radius: 6px;box-sizing:border-box;}
.mof-form1 select {width:100%;padding:4px;border-radius: 6px;box-sizing:border-box;}
.mof-form1 textarea {width:100%;padding:4px;border-radius: 6px;box-sizing:border-box;}

/*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);
  }
}