/* Css Dasar */
@import url('https://fonts.googleapis.com/css?family=Roboto:400;600;700');
/* @import url('https://fonts.googleapis.com/css?family=Nunito&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap');

@-ms-viewport{width:device-width}
@media print {
  body {-webkit-print-color-adjust: exact;}
  .page-break-before {
    page-break-before: always;
  }
  @page {
    size: auto;
    margin: 0;
  }
  i{
    display: list-item;
    list-style-position: inside;
  }
}
html{font-size:10px;}
body {color:#222; background:#fff; min-height:100vh; font-weight:400; font-family: 'Roboto', sans-serif; font-size:1.4em; padding:0; margin:0 auto;}
* {box-sizing:border-box; background-repeat:no-repeat; -webkit-tap-highlight-color: transparent;}

a{color:inherit; text-decoration:none;}
a:hover{text-decoration:none;}
a, button {cursor:pointer; font-family: inherit;}
label {font-weight:normal;}
*:fullscreen
*:-ms-fullscreen,
*:-webkit-full-screen,
*:-moz-full-screen {
   overflow: auto !important;
}

.roboto {font-family:'Roboto', sans-serif;}
.portrait_please {width:100%; height:100vh; display:none; position:fixed; top:0; left:0; background:#fff; z-index:10000 !important; overflow: hidden;}
@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {
  .portrait_please {display: block !important;}
}
.material-icons{
  opacity:0;
}

select {-webkit-appearance:none;}
.table-fix td, .table-fix th {white-space:nowrap !important;}
input:focus, textarea:focus, button:focus, select:focus {outline:none;}
input, textarea { font-family:inherit; font-size:inherit;}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-transition: "color 9999s ease-out, background-color 9999s ease-out";
    -webkit-transition-delay: 9999s;
}
br { clear:both; }
article,aside,dialog,figcaption,figure,footer,header,hgroup,legend,main,nav,section{display:block}
[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}
*[disabled] {cursor:not-allowed; opacity:0.8;}
input[type=radio], input[type=checkbox]{displa:none;}
.material-icons { vertical-align:middle; padding-bottom:3px; }
.swal2-title {font-size:1.4em !important;}
.swal2-modal .swal2-content {font-size:1em !important;}
.swal2-button {font-size:1em !important;}
::-webkit-scrollbar {height: 8px;}
::-webkit-scrollbar {width: 8px;}
::-webkit-scrollbar-track {
    background: transparent; 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 3px;
    background: rgba(0,0,0,.1);
}
::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(80, 80, 80, 0.4);
}
.body_no_scroll {height:100vh !important; width:100% !important; overflow:hidden !important;}
.js_alert:empty {display:none;}
.btaran:hover .material-icons {margin-left:10px !important;}
/*
Animation available
rotateAntiClockwise rotateClockwise rollOutLeft rollOutRight tada rubberBand bounceOutRight bounceOutLeft bounceOutTop bounceOutBottom 
horizontalFlip verticalFlip fadeOut fadeOutTop fadeOutBottom fadeOutRight fadeOutLeft zoomOut zoomIn
*/
[js_switch_open="0"] {display:none;}
[js_switch_open="1"] {
  display:block;
}
[js_field_warning] {display:none;}

.rollOutLeft { -webkit-animation:rollOutLeft .3s; animation:rollOutLeft .3s; }
.fadeOut { -webkit-animation:fadeOut .3s; animation:fadeOut .3s; }
.fadeOutRight { -webkit-animation:fadeOutRight .3s; animation:fadeOutRight .3s; }
.fadeOutLeft { -webkit-animation:fadeOutLeft .3s; animation:fadeOutLeft .3s; }
.fadeOutTop { -webkit-animation:fadeOutTop .3s; animation:fadeOutTop .3s; }
.fadeOutBottom { -webkit-animation:fadeOutBottom .3s; animation:fadeOutBottom .3s; }
.showBottom { -webkit-animation:showBottom .3s; animation:showBottom .3s; }
.radius { -webkit-animation:radius 1s; animation:radius 1s; }
.width { -webkit-animation:width .3s; animation:width .3s; }
.shake2 { -webkit-animation:shake2 .8s infinite; animation:shake2 .8s infinite; }
.js_shake { -webkit-animation:shake2 .4s infinite; animation:shake2 .4s infinite; }

.zoomOut { -webkit-animation:zoomOut .3s; animation:zoomOut .3s; }
.zoomIn { -webkit-animation:zoomIn .3s; animation:zoomIn .3s; }
.verticalFlip{ -webkit-animation:verticalFlip .3s; animation:verticalFlip .3s; }
.horizontalFlip{ -webkit-animation:horizontalFlip .3s; animation:horizontalFlip .3s; }
.rubberBand{ -webkit-animation:rubberBand .3s; animation:rubberBand .3s; }
.tada{ -webkit-animation:tada .3s; animation:tada .3s; }

/* Loading */
.js_select_loading, .js_field_loading { position:absolute; top:0; left:0; width:100%; height:40px; background-color:rgba(255,255,255,0.6); background-image:url("../img/loading9.gif"); background-position: center; background-repeat:no-repeat;background-size:30px 30px;}
.js_fullscreen_loading, .js_fullscreen_loading_webview, .js_ceklogin_loading { background-color:#fff; background-image:url("../img/loading5.gif"); background-repeat:no-repeat; background-size:100px auto; background-position:center; position:fixed; top:0; left:0; width:100%; height:100vh; text-align:center; z-index:1000;}
/* Loading */

/*
.container {
  display:flex || inline-flex;
  flex-direction:row | row-reverse | column | column-reverse;
  flex-wrap:nowrap | wrap | wrap-reverse;
  shorthand :flex-flow:<‘flex-direction’> || <‘flex-wrap’>
  justify-content:flex-start | flex-end | center | space-between | space-around | space-evenly;
  align-items:stretch | flex-start | flex-end | center | baseline;
  align-content:flex-start | flex-end | center | space-between | space-around | stretch;
}
.children {
  order:<integer>;  default 0 
  flex-grow:<number>;  default 0
  flex-shrink:<number>;  default 1
  flex-basis:<length> | auto; default auto
  shorthand :  flex:none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
  align-self:auto | flex-start | flex-end | center | baseline | stretch;
}
*/
.center-img-20 {position:relative; width:20px; height:20px;}
.center-img-20 img, .center-img-20 i {font-size:14px; position:absolute; top:55%; left:50%; -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%);}
.center-img-30 {position:relative; width:30px; height:30px;}
.center-img-30 img, .center-img-30 i {position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%);}
.center-img-40 {position:relative; width:40px; height:40px;}
.center-img-40 img, .center-img-40 i {position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%);}
.center-img-50 {position:relative; width:50px; height:50px;}
.center-img-50 img, .center-img-50 i {position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%);}
.center-img-60 {position:relative; width:60px; height:60px;}
.center-img-60 img, .center-img-60 i {position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%);}
.center-img-70 {position:relative; width:70px; height:70px;}
.center-img-70 img, .center-img-70 i {position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%);}
.center-img-80 {position:relative; width:80px; height:80px;}
.center-img-80 img, .center-img-80 i {position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%);}
.center-img-100 {position:relative; width:100px; height:100px;}
.center-img-100 img, .center-img-100 i {position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%);}

.flex{display:-webkit-box;display:-ms-flexbox;display:flex;}
.flex-row{-webkit-box-orient:horizontal!important;-webkit-box-direction:normal!important;-ms-flex-direction:row!important;flex-direction:row!important}
.flex-column{-webkit-box-orient:vertical!important;-webkit-box-direction:normal!important;-ms-flex-direction:column!important;flex-direction:column!important}
.flex-row-reverse{-webkit-box-orient:horizontal!important;-webkit-box-direction:reverse!important;-ms-flex-direction:row-reverse!important;flex-direction:row-reverse!important}
.flex-column-reverse{-webkit-box-orient:vertical!important;-webkit-box-direction:reverse!important;-ms-flex-direction:column-reverse!important;flex-direction:column-reverse!important}
.flex-wrap{-ms-flex-wrap:wrap!important;flex-wrap:wrap!important}
.flex-nowrap{-ms-flex-wrap:nowrap!important;flex-wrap:nowrap!important}
.flex-wrap-reverse{-ms-flex-wrap:wrap-reverse!important;flex-wrap:wrap-reverse!important}
.justify-content-start, .jcs{-webkit-box-pack:start!important;-ms-flex-pack:start!important;justify-content:flex-start!important}
.justify-content-end, .jce{-webkit-box-pack:end!important;-ms-flex-pack:end!important;justify-content:flex-end!important}
.justify-content-center, .jcc{-webkit-box-pack:center!important;-ms-flex-pack:center!important;justify-content:center!important}
.justify-content-between, .jcb{-webkit-box-pack:justify!important;-ms-flex-pack:justify!important;justify-content:space-between!important}
.justify-content-around, .jca{-ms-flex-pack:distribute!important;justify-content:space-around!important}
.align-items-start{-webkit-box-align:start!important;-ms-flex-align:start!important;align-items:flex-start!important}
.align-items-end{-webkit-box-align:end!important;-ms-flex-align:end!important;align-items:flex-end!important}
.align-items-center{-webkit-box-align:center!important;-ms-flex-align:center!important;align-items:center!important}
.align-items-baseline{-webkit-box-align:baseline!important;-ms-flex-align:baseline!important;align-items:baseline!important}
.align-items-stretch{-webkit-box-align:stretch!important;-ms-flex-align:stretch!important;align-items:stretch!important}
.align-content-start{-ms-flex-line-pack:start!important;align-content:flex-start!important}
.align-content-end{-ms-flex-line-pack:end!important;align-content:flex-end!important}
.align-content-center{-ms-flex-line-pack:center!important;align-content:center!important}
.align-content-between{-ms-flex-line-pack:justify!important;align-content:space-between!important}
.align-content-around{-ms-flex-line-pack:distribute!important;align-content:space-around!important}
.align-content-stretch{-ms-flex-line-pack:stretch!important;align-content:stretch!important}
.align-self-auto{-ms-flex-item-align:auto!important;-ms-grid-row-align:auto!important;align-self:auto!important}
.align-self-start{-ms-flex-item-align:start!important;align-self:flex-start!important}
.align-self-end{-ms-flex-item-align:end!important;align-self:flex-end!important}
.align-self-center{-ms-flex-item-align:center!important;-ms-grid-row-align:center!important;align-self:center!important}
.align-self-baseline{-ms-flex-item-align:baseline!important;align-self:baseline!important}
.align-self-stretch{-ms-flex-item-align:stretch!important;-ms-grid-row-align:stretch!important;align-self:stretch!important}
.grow-1 {flex-grow:1;}
.grow-2 {flex-grow:2;}
.grow-3 {flex-grow:3;}
.grow-4 {flex-grow:4;}
.grow-5 {flex-grow:5;}

.w5p{width:5%;}
.w10p{width:10%;}
.w15p{width:15%;}
.w20p{width:20%;}
.w22p{width:22%;}
.w23p{width:23%;}
.w25p{width:25%;}
.w30p{width:30%;}
.w33p{width:33.333%;}
.w32p{width:32%;}
.w33c{width:32.333%; margin-left:0.5%; margin-right:0.5%;}
.w35p{width:35%;}
.w40p{width:40%;}
.w45p{width:45%;}
.w48p{width:48%;}
.w49p{width:49%;}
.w495p {width:49.5%;}
.w50p{width:50%;}
.w55p{width:55%;}
.w60p{width:60%;}
.w65p{width:65%;}
.w70p{width:70%;}
.w75p{width:75%;}
.w80p{width:80%;}
.w85p{width:85%;}
.w90p{width:90%;}
.w95p{width:95%;}
.w100p{width:100%;}

.w5pm, .w10pm, .w15pm, .w20pm, .w25pm, .w30pm, .w35pm, .w40pm, .w45pm, .w50pm, .w55pm, .w60pm, .w65pm, .w70pm, .w75pm, .w80pm, .w85pm, .w90pm, .w95pm, .w100pm {width:100%;}

.w10px {width:10px;}
.w20px {width:20px;}
.w30px {width:30px;}
.w40px {width:40px;}
.w50px {width:50px;}
.w60px {width:60px;}
.w70px {width:70px;}
.w80px {width:80px;}
.w90px {width:90px;}
.w100px {width:100px;}
.w110px {width:110px;}
.w120px {width:120px;}
.w130px {width:130px;}
.w140px {width:140px;}
.w150px {width:150px;}
.w160px {width:160px;}
.w170px {width:170px;}
.w180px {width:180px;}
.w190px {width:190px;}
.w200px {width:200px;}
.w210px {width:210px;}
.w220px {width:220px;}
.w230px {width:230px;}
.w240px {width:240px;}
.w250px {width:250px;}
.w260px {width:260px;}
.w270px {width:270px;}
.w280px {width:280px;}
.w290px {width:290px;}
.w300px {width:300px;}
.w310px {width:310px;}
.w320px {width:320px;}
.w330px {width:330px;}
.w340px {width:340px;}
.w350px {width:350px;}
.w360px {width:360px;}
.w370px {width:370px;}
.w380px {width:380px;}
.w390px {width:390px;}
.w400px {width:400px;}
.w410px {width:410px;}
.w420px {width:420px;}
.w430px {width:430px;}
.w440px {width:440px;}
.w450px {width:450px;}
.w460px {width:460px;}
.w470px {width:470px;}
.w480px {width:480px;}
.w490px {width:490px;}
.w500px {width:500px;}
.w510px {width:510px;}
.w520px {width:520px;}
.w530px {width:530px;}
.w540px {width:540px;}
.w550px {width:550px;}
.w560px {width:560px;}
.w570px {width:570px;}
.w580px {width:580px;}
.w590px {width:590px;}
.w600px {width:600px;}
.w650px {width:650px;}
.w700px {width:700px;}
.w750px {width:750px;}
.w800px {width:800px;}
.w850px {width:850px;}
.w900px {width:900px;}

.mxw100p {max-width:100%;}
.mxw90px {max-width:90px;}
.mxw100px {max-width:100px;}
.mxw120px {max-width:120px;}
.mxw150px {max-width:150px;}
.mxw200px {max-width:200px;}
.mxw300px {max-width:300px;}
.mxw400px {max-width:400px;}
.mxw500px {max-width:500px;}
.mxw600px {max-width:600px;}
.mxw700px {max-width:700px;}
.mxw800px {max-width:800px;}
.mxw900px {max-width:900px;}
.mxw1000px {max-width:1000px;}
.mxw1100px {max-width:1100px;}
.mxw1200px {max-width:1200px;}
.mxw1440px {max-width:1440px;}

.mh1px {min-height:1px;}
.mh2px {min-height:2px;}
.mh3px {min-height:3px;}
.mh4px {min-height:4px;}
.mh5px {min-height:5px;}
.mh10px {min-height:10px;}
.mh20px {min-height:20px;}
.mh30px {min-height:30px;}
.mh40px {min-height:40px;}
.mh50px {min-height:50px;}
.mh60px {min-height:60px;}
.mh70px {min-height:70px;}
.mh80px {min-height:80px;}
.mh90px {min-height:90px;}
.mh100px {min-height:100px;}
.mh110px {min-height:110px;}
.mh120px {min-height:120px;}
.mh130px {min-height:130px;}
.mh140px {min-height:140px;}
.mh150px {min-height:150px;}
.mh160px {min-height:160px;}
.mh170px {min-height:170px;}
.mh180px {min-height:180px;}
.mh190px {min-height:190px;}
.mh200px {min-height:200px;}
.mh210px {min-height:210px;}
.mh220px {min-height:220px;}
.mh230px {min-height:230px;}
.mh240px {min-height:240px;}
.mh250px {min-height:250px;}
.mh260px {min-height:260px;}
.mh270px {min-height:270px;}
.mh280px {min-height:280px;}
.mh290px {min-height:290px;}
.mh300px {min-height:300px;}
.mh350px {min-height:350px;}
.mh400px {min-height:400px;}
.mh450px {min-height:450px;}
.mh500px {min-height:500px;}

.mh50vh {min-height:50vh;}
.mh100vh {min-height:100vh;}
.mh100p {min-height:100%;}

.order1{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}
.order2{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}
.order3{-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3}
.order4{-webkit-box-ordinal-group:5;-ms-flex-order:4;order:4}
.order5{-webkit-box-ordinal-group:6;-ms-flex-order:5;order:5}
.order6{-webkit-box-ordinal-group:7;-ms-flex-order:6;order:6}
.order7{-webkit-box-ordinal-group:8;-ms-flex-order:7;order:7}
.order8{-webkit-box-ordinal-group:9;-ms-flex-order:8;order:8}
.order9{-webkit-box-ordinal-group:10;-ms-flex-order:9;order:9}
.order10{-webkit-box-ordinal-group:11;-ms-flex-order:10;order:10}
.order11{-webkit-box-ordinal-group:12;-ms-flex-order:11;order:11}
.order12{-webkit-box-ordinal-group:13;-ms-flex-order:12;order:12}

.cl000 {color:#000;}
.cl111 {color:#111;}
.cl222 {color:#222;}
.cl333 {color:#333;}
.cl444 {color:#444;}
.cl555 {color:#555;}
.cl666 {color:#666;}
.cl777 {color:#777;}
.cl888 {color:#888;}
.cl999 {color:#999;}
.claaa {color:#aaa;}
.clbbb {color:#bbb;}
.clccc {color:#ccc;}
.clddd {color:#ddd;}
.cleee {color:#eee;}
.clfff {color:#fff;}
.cl900 {color:#900;}
.clc00 {color:#c00;}
.clf00 {color:#f00;}
.cl009 {color:#009;}
.cl01f {color:#01f;}
.cl03f {color:#03f;}
.cl06f {color:#06f;}
.cl09f {color:#09f;}
.clfb0 {color:#fb0;}
.clff0 {color:#ff0;}
.cl0c0 {color:#0c0;}
.cl090 {color:#090;}

.bgtrans {background-color:transparent;}
.bg000 {background-color:#000;}
.bg111 {background-color:#111;}
.bg222 {background-color:#222;}
.bg333 {background-color:#333;}
.bg444 {background-color:#444;}
.bg555 {background-color:#555;}
.bg666 {background-color:#666;}
.bg777 {background-color:#777;}
.bg888 {background-color:#888;}
.bg999 {background-color:#999;}
.bgaaa {background-color:#aaa;}
.bgbbb {background-color:#bbb;}
.bgccc {background-color:#ccc;}
.bgddd {background-color:#ddd;}
.bgeee {background-color:#eee;}
.bgfff {background-color:#fff;}
.bgf8 {background-color:#f8f8f8;}
.bgf4 {background-color:#f4f4f4;}
.bgf0f {background-color:#f0f3f8;}
.bgfb0 {background-color:#fb0;}
.bg06f {background-color:#06f;}
.bg09f {background-color:#09f;}
.bgc00 {background-color:#c00;}
.bg-grad-fff {background: rgb(255,255,255); background: linear-gradient(0deg, rgba(255,255,255,1) 50%, rgba(255,255,255,0.3) 100%);}
.bg-grad-eee {background: rgb(238,238,238); background: linear-gradient(0deg, rgba(238,238,238,1) 50%, rgba(238,238,238,0) 100%);}

.bdfff {border-color:#fff !important;}
.bdf8 {border-color:#f8f8f8 !important;}
.bdeee {border-color:#eee !important;}
.bdddd {border-color:#ddd !important;}
.bdccc {border-color:#ccc !important;}
.bdaaa {border-color:#aaa !important;}
.bd999 {border-color:#999 !important;}
.bd666 {border-color:#666 !important;}
.bd333 {border-color:#333 !important;}
.bd000 {border-color:#000 !important;}
.bd060 {border-color:#060 !important;}
.bd090 {border-color:#090 !important;}
.bdf90 {border-color:#f90 !important;}
.bdfb0 {border-color:#fb0 !important;}
.bd900 {border-color:#900 !important;}
.bdc00 {border-color:#c00 !important;}
.bd06f {border-color:#06f !important;}

.bd0 {border:0;}
.bd1 {border:1px solid;}
.bd2 {border:2px solid;}
.bd3 {border:3px solid;}
.bd4 {border:4px solid;}
.bd5 {border:5px solid;}
.bdt1 {border-top:1px solid;}
.bdt2 {border-top:2px solid;}
.bdt3 {border-top:3px solid;}
.bdt4 {border-top:4px solid;}
.bdt5 {border-top:5px solid;}
.bdl1 {border-left:1px solid;}
.bdl2 {border-left:2px solid;}
.bdl3 {border-left:3px solid;}
.bdl4 {border-left:4px solid;}
.bdl5 {border-left:5px solid;}
.bdb1 {border-bottom:1px solid;}
.bdb2 {border-bottom:2px solid;}
.bdb3 {border-bottom:3px solid;}
.bdb4 {border-bottom:4px solid;}
.bdb5 {border-bottom:5px solid;}
.bdr1 {border-right:1px solid;}
.bdr2 {border-right:2px solid;}
.bdr3 {border-right:3px solid;}
.bdr4 {border-right:4px solid;}
.bdr5 {border-right:5px solid;}

.otwarning {outline:1px solid #c00;}
.shadwarning {box-shadow:6px 0 #c00 inset;}

.br2 {border-radius:3px;}
.br3 {border-radius:3px;}
.br4 {border-radius:4px;}
.br5 {border-radius:5px;}
.br6 {border-radius:5px;}
.br7 {border-radius:7px;}
.br8 {border-radius:8px;}
.br9 {border-radius:9px;}
.br10 {border-radius:10px;}
.br15 {border-radius:15px;}
.br20 {border-radius:20px;}
.br25 {border-radius:25px;}
.br30 {border-radius:30px;}
.br35 {border-radius:35px;}
.br100 {border-radius:100%;}

.fs04e {font-size:.4rem !important;}
.fs05e {font-size:.5rem !important;}
.fs06e {font-size:.6rem !important;}
.fs07e {font-size:.7rem !important;}
.fs08e {font-size:.8rem !important; line-height:1.8rem;}
.fs09e {font-size:.9rem !important; line-height:1.9rem;}
.fs1e  {font-size:1rem !important; line-height:1.9rem;}
.fs11e {font-size:1.1rem !important;}
.fs12e {font-size:1.2rem !important;}
.fs13e {font-size:1.3rem !important;}
.fs14e {font-size:1.4rem !important;}
.fs15e {font-size:1.5rem !important;}
.fs16e {font-size:1.6rem !important;}
.fs17e {font-size:1.7rem !important;}
.fs18e {font-size:1.8rem !important;}
.fs19e {font-size:1.9rem !important;}
.fs2e  {font-size:2rem !important;}
.fs21e {font-size:2.1rem !important;}
.fs22e {font-size:2.2rem !important;}
.fs23e {font-size:2.3rem !important;}
.fs24e {font-size:2.4rem !important;}
.fs25e {font-size:2.5rem !important;}
.fs26e {font-size:2.6rem !important;} /*42px*/
.fs27e {font-size:2.7rem !important;}
.fs28e {font-size:2.8rem !important;}
.fs29e {font-size:2.9rem !important;}
.fs3e  {font-size:3rem !important;}

.fs12ef {font-size: 0.8rem;}
.fs13ef {font-size: 0.9rem;}
.fs14ef {font-size: 1rem;}
.fs15ef {font-size: 1.1rem;}
.fs16ef {font-size: 1.1rem;}
.fs17ef {font-size: 1.2rem;}
.fs18ef {font-size: 1.3rem;}
.fs19ef {font-size: 1.3rem;}
.fs2ef {font-size: 1.4rem;}
.fs21ef {font-size: 1.5rem;}
.fs22ef {font-size: 1.5rem; line-height:1.4rem;}
.fs23ef {font-size: 1.6rem;}
.fs24ef {font-size: 1.7rem; line-height:1.4rem;}
.fs25ef {font-size: 1.8rem;}
.fs26ef {font-size: 1.8rem;}
.fs27ef {font-size: 1.9rem;}
.fs28ef {font-size: 2rem;}
.fs29ef {font-size: 2rem;}
.fs3ef {font-size: 2.1rem;}

@media screen and (min-width: 320px) {
  .fs12ef { font-size: calc(0.8rem + 6 * ((100vw - 320px) / 680));}
  .fs13ef { font-size: calc(0.9rem + 6 * ((100vw - 320px) / 680));}
  .fs14ef { font-size: calc(1rem + 6 * ((100vw - 320px) / 680));}
  .fs15ef { font-size: calc(1.1rem + 6 * ((100vw - 320px) / 680));}
  .fs16ef { font-size: calc(1.1rem + 6 * ((100vw - 320px) / 680));}
  .fs17ef { font-size: calc(1.2rem + 6 * ((100vw - 320px) / 680));}
  .fs18ef { font-size: calc(1.3rem + 6 * ((100vw - 320px) / 680));}
  .fs19ef { font-size: calc(1.3rem + 6 * ((100vw - 320px) / 680));}
  .fs2ef { font-size: calc(1.4rem + 6 * ((100vw - 320px) / 680));}
  .fs21ef { font-size: calc(1.5rem + 6 * ((100vw - 320px) / 680));}
  .fs22ef { font-size: calc(1.5rem + 6 * ((100vw - 320px) / 680));}
  .fs23ef { font-size: calc(1.6rem + 6 * ((100vw - 320px) / 680));}
  .fs24ef { font-size: calc(1.7rem + 6 * ((100vw - 320px) / 680));}
  .fs25ef { font-size: calc(1.8rem + 6 * ((100vw - 320px) / 680));}
  .fs26ef { font-size: calc(1.8rem + 6 * ((100vw - 320px) / 680));}
  .fs27ef { font-size: calc(1.9rem + 6 * ((100vw - 320px) / 680));}
  .fs28ef { font-size: calc(2rem + 6 * ((100vw - 320px) / 680));}
  .fs29ef { font-size: calc(2rem + 6 * ((100vw - 320px) / 680));}
  .fs3ef { font-size: calc(2.1rem + 6 * ((100vw - 320px) / 680));}
}
@media screen and (min-width: 1150px) {
  .fs12ef {font-size: 1.2rem;}
  .fs13ef {font-size: 1.3rem;}
  .fs14ef {font-size: 1.4rem;}
  .fs15ef {font-size: 1.5rem;}
  .fs16ef {font-size: 1.6rem;}
  .fs17ef {font-size: 1.7rem;}
  .fs18ef {font-size: 1.8rem;}
  .fs19ef {font-size: 1.9rem;}
  .fs2ef {font-size: 2rem;}
  .fs21ef {font-size: 2.1rem;}
  .fs22ef {font-size: 2.2rem;}
  .fs23ef {font-size: 2.3rem;}
  .fs24ef {font-size: 2.4rem;}
  .fs25ef {font-size: 2.5rem;}
  .fs26ef {font-size: 2.6rem;}
  .fs27ef {font-size: 2.7rem;}
  .fs28ef {font-size: 2.8rem;}
  .fs29ef {font-size: 2.9rem;}
  .fs3ef {font-size: 3rem;}
}

.p0 {padding-top:0; padding-left:0; padding-right:0; padding-bottom:0;}
.pv01e {padding-top:.1rem; padding-bottom:.1rem;}
.pv02e {padding-top:.2rem; padding-bottom:.2rem;}
.pv03e {padding-top:.3rem; padding-bottom:.3rem;}
.pv04e {padding-top:.4rem; padding-bottom:.4rem;}
.pv05e {padding-top:.5rem; padding-bottom:.5rem;}
.pv06e {padding-top:.6rem; padding-bottom:.6rem;}
.pv07e {padding-top:.7rem; padding-bottom:.7rem;}
.pv08e {padding-top:.8rem; padding-bottom:.8rem;}
.pv09e {padding-top:.9rem; padding-bottom:.9rem;}
.pv1e {padding-top:1rem; padding-bottom:1rem;}
.pv11e {padding-top:1.1rem; padding-bottom:1.1rem;}
.pv12e {padding-top:1.2rem; padding-bottom:1.2rem;}
.pv13e {padding-top:1.3rem; padding-bottom:1.3rem;}
.pv14e {padding-top:1.4rem; padding-bottom:1.4rem;}
.pv15e {padding-top:1.5rem; padding-bottom:1.5rem;}
.pv16e {padding-top:1.6rem; padding-bottom:1.6rem;}
.pv17e {padding-top:1.7rem; padding-bottom:1.7rem;}
.pv18e {padding-top:1.8rem; padding-bottom:1.8rem;}
.pv19e {padding-top:1.9rem; padding-bottom:1.9rem;}
.pv2e {padding-top:2rem; padding-bottom:2rem;}
.pv21e {padding-top:2.1rem; padding-bottom:2.1rem;}
.pv22e {padding-top:2.2rem; padding-bottom:2.2rem;}
.pv23e {padding-top:2.3rem; padding-bottom:2.3rem;}
.pv24e {padding-top:2.4rem; padding-bottom:2.4rem;}
.pv25e {padding-top:2.5rem; padding-bottom:2.5rem;}
.pv26e {padding-top:2.6rem; padding-bottom:2.6rem;}
.pv27e {padding-top:2.7rem; padding-bottom:2.7rem;}
.pv28e {padding-top:2.8rem; padding-bottom:2.8rem;}
.pv29e {padding-top:2.9rem; padding-bottom:2.9rem;}
.pv3e {padding-top:3rem; padding-bottom:3rem;}
.pv1vh {padding-top:1vh; padding-bottom:1vh;}

.ph01e {padding-left:.1rem; padding-right:.1rem;}
.ph02e {padding-left:.2rem; padding-right:.2rem;}
.ph03e {padding-left:.3rem; padding-right:.3rem;}
.ph04e {padding-left:.4rem; padding-right:.4rem;}
.ph05e {padding-left:.5rem; padding-right:.5rem;}
.ph06e {padding-left:.6rem; padding-right:.6rem;}
.ph07e {padding-left:.7rem; padding-right:.7rem;}
.ph08e {padding-left:.8rem; padding-right:.8rem;}
.ph09e {padding-left:.9rem; padding-right:.9rem;}
.ph1e {padding-left:1rem; padding-right:1rem;}
.ph11e {padding-left:1.1rem; padding-right:1.1rem;}
.ph12e {padding-left:1.2rem; padding-right:1.2rem;}
.ph13e {padding-left:1.3rem; padding-right:1.3rem;}
.ph14e {padding-left:1.4rem; padding-right:1.4rem;}
.ph15e {padding-left:1.5rem; padding-right:1.5rem;}
.ph16e {padding-left:1.6rem; padding-right:1.6rem;}
.ph17e {padding-left:1.7rem; padding-right:1.7rem;}
.ph18e {padding-left:1.8rem; padding-right:1.8rem;}
.ph19e {padding-left:1.9rem; padding-right:1.9rem;}
.ph2e {padding-left:2rem; padding-right:2rem;}
.ph21e {padding-left:2.1rem; padding-right:2.1rem;}
.ph22e {padding-left:2.2rem; padding-right:2.2rem;}
.ph23e {padding-left:2.3rem; padding-right:2.3rem;}
.ph24e {padding-left:2.4rem; padding-right:2.4rem;}
.ph25e {padding-left:2.5rem; padding-right:2.5rem;}
.ph26e {padding-left:2.6rem; padding-right:2.6rem;}
.ph27e {padding-left:2.7rem; padding-right:2.7rem;}
.ph28e {padding-left:2.8rem; padding-right:2.8rem;}
.ph29e {padding-left:2.9rem; padding-right:2.9rem;}
.ph3e {padding-left:3rem; padding-right:3rem;}

.ph1p {padding-left:1%; padding-right:1%;}
.ph2p {padding-left:2%; padding-right:2%;}
.ph3p {padding-left:3%; padding-right:3%;}
.ph4p {padding-left:4%; padding-right:4%;}
.ph5p {padding-left:5%; padding-right:5%;}
.ph6p {padding-left:6%; padding-right:6%;}
.ph7p {padding-left:7%; padding-right:7%;}
.ph8p {padding-left:8%; padding-right:8%;}
.ph9p {padding-left:9%; padding-right:9%;}
.ph10p {padding-left:10%; padding-right:10%;}

.ps1 {padding:8px 10px;}
.ps2 {padding:10px 14px;}
.ps3 {padding:12px 18px;}
.ps4 {padding:14px 20px;}
.ps5 {padding:16px 22px;}
.ps6 {padding:18px 26px;}
.ps7 {padding:20px 28px;}
.ps8 {padding:22px 31px;}
.ps9 {padding:24px 35px;}
.ps10 {padding:26px 38px;}

.mh-auto { margin-left:auto; margin-right:auto; }
.mv-auto { margin-top:auto; margin-bottom:auto; }
.m0 {margin-top:0; margin-left:0; margin-right:0; margin-bottom:0;}
.ml1p {margin-left:1%;}
.ml2p {margin-left:2%;}
.ml3p {margin-left:3%;}
.ml4p {margin-left:4%;}
.ml5p {margin-left:5%;}
.ml6p {margin-left:6%;}
.ml7p {margin-left:7%;}
.ml8p {margin-left:8%;}
.ml9p {margin-left:9%;}
.ml10p {margin-left:10%;}
.ml15p {margin-left:15%;}
.ml20p {margin-left:20%;}

.mr1p {margin-right:1%;}
.mr2p {margin-right:2%;}
.mr3p {margin-right:3%;}
.mr4p {margin-right:4%;}
.mr5p {margin-right:5%;}
.mr6p {margin-right:6%;}
.mr7p {margin-right:7%;}
.mr8p {margin-right:8%;}
.mr9p {margin-right:9%;}
.mr10p {margin-right:10%;}

.mr5px {margin-right:5px;}
.mr10px {margin-right:10px;}
.mr12px {margin-right:12px;}
.mr14px {margin-right:14px;}
.mr16px {margin-right:16px;}
.mr18px {margin-right:18px;}
.mr20px {margin-right:20px;}
.mr22px {margin-right:22px;}
.mr24px {margin-right:24px;}
.ml5px {margin-left:5px;}
.ml10px {margin-left:10px;}
.ml12px {margin-left:12px;}
.ml14px {margin-left:14px;}
.ml16px {margin-left:16px;}
.ml18px {margin-left:18px;}
.ml20px {margin-left:20px;}
.ml22px {margin-left:22px;}
.ml24px {margin-left:24px;}

.mb0 {margin-bottom:0;}
.mb2px {margin-bottom:2px;}
.mb4px {margin-bottom:4px;}
.mb6px {margin-bottom:6px;}
.mb8px {margin-bottom:8px;}
.mb10px {margin-bottom:10px;}
.mb12px {margin-bottom:12px;}
.mb14px {margin-bottom:14px;}
.mb16px {margin-bottom:16px;}
.mb18px {margin-bottom:18px;}
.mb20px {margin-bottom:20px;}
.mb22px {margin-bottom:22px;}
.mb24px {margin-bottom:24px;}
.mb26px {margin-bottom:26px;}
.mb28px {margin-bottom:28px;}
.mb30px {margin-bottom:30px;}

.mt0 {margin-top:0;}
.mt2px {margin-top:2px;}
.mt4px {margin-top:4px;}
.mt6px {margin-top:6px;}
.mt8px {margin-top:8px;}
.mt10px {margin-top:10px;}
.mt12px {margin-top:12px;}
.mt14px {margin-top:14px;}
.mt16px {margin-top:16px;}
.mt18px {margin-top:18px;}
.mt20px {margin-top:20px;}
.mt22px {margin-top:22px;}
.mt24px {margin-top:24px;}
.mt26px {margin-top:26px;}
.mt28px {margin-top:28px;}
.mt30px {margin-top:30px;}
.mt40px {margin-top:40px;}
.mt50px {margin-top:50px;}
.mt60px {margin-top:60px;}
.mt70px {margin-top:70px;}
.mt80px {margin-top:80px;}
.mt90px {margin-top:90px;}
.mt100px {margin-top:100px;}
.mt2vh {margin-top:2vh;}
.mt4vh {margin-top:4vh;}
.mt6vh {margin-top:6vh;}
.mt8vh {margin-top:8vh;}
.mt10vh {margin-top:10vh;}
.mt12vh {margin-top:12vh;}
.mt14vh {margin-top:14vh;}
.mt16vh {margin-top:16vh;}
.mt18vh {margin-top:18vh;}
.mt20vh {margin-top:20vh;}
.mt22vh {margin-top:22vh;}
.mt24vh {margin-top:24vh;}
.mt26vh {margin-top:26vh;}
.mt28vh {margin-top:28vh;}
.mt30vh {margin-top:30vh;}

.ms1 {margin:6px 8px;}
.ms2 {margin:8px 10px;}
.ms3 {margin:10px 12px;}
.ms4 {margin:12px 14px;}
.ms5 {margin:14px 16px;}
.ms6 {margin:16px 18px;}
.ms7 {margin:18px 21px;}
.ms8 {margin:20px 23px;}
.ms9 {margin:22px 27px;}
.ms10 {margin:24px 30px;}

.cl {clear:both;}
.clafter::after{display:block;clear:both;content:""}
.cl2px {clear:both; margin-top:2px !important;}
.cl4px {clear:both; margin-top:4px !important;}
.cl6px {clear:both; margin-top:6px !important;}
.cl8px {clear:both; margin-top:8px !important;}
.cl10px {clear:both; margin-top:10px !important;}
.cl12px {clear:both; margin-top:12px !important;}
.cl14px {clear:both; margin-top:14px !important;}
.cl16px {clear:both; margin-top:16px !important;}
.cl18px {clear:both; margin-top:18px !important;}
.cl20px {clear:both; margin-top:20px !important;}
.cl22px {clear:both; margin-top:22px !important;}
.cl24px {clear:both; margin-top:24px !important;}
.cl26px {clear:both; margin-top:26px !important;}
.cl28px {clear:both; margin-top:28px !important;}
.cl30px {clear:both; margin-top:30px !important;}

.fl {float:left;}
.fr {float:right;}
.b { display:block; }
.ib { display:inline-block; }
.bl {width:100%; float:left; clear:both;}
.developing * {outline:1px dashed #666;}
.unsel, a, button, i {-webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; -o-user-select:none; user-select:none;}
.capital {text-transform:capitalize;}
.center, .c {text-align:center;}
.right {text-align:right;}
.justify {text-align:justify;}
.bold {font-weight:bold;}
.medium {font-weight:medium;}
.normal {font-weight:normal;}
.i {font-style:italic;}
.pointer {cursor:pointer;}
.hidden, .hide {display:none !important;}
.show {display:block !important;}
.fade{opacity:0;transition:opacity .15s linear}
.fade.showfade{opacity:1}
.hvop {opacity:0.7; cursor:pointer; transition:all 0.4s ease;}
.hvop:hover {opacity:1;}
.hvop:active {opacity:0.7;}
.hvdark:hover {filter: brightness(0.95);}
.hvdark:active {filter: brightness(1.1);}
.hvscale:hover {transform:scale(1.05);}
.hvscale:active {transform:scale(1.02);}
.hvun:hover {text-decoration:underline;}
.hvun:active {text-decoration-color:#fb0;}
.nowrap {white-space:nowrap;}
.ovhd {overflow:hidden;}
.ovxhd {overflow-x:hidden;}
.ovyhd {overflow-y:hidden;}
.emptyhd:empty{display:none !important;}

.op1 {opacity:0.1;}
.op2 {opacity:0.2;}
.op3 {opacity:0.3;}
.op4 {opacity:0.4;}
.op5 {opacity:0.5;}
.op6 {opacity:0.6;}
.op7 {opacity:0.7;}
.op8 {opacity:0.8;}
.op9 {opacity:0.9;}

.z-1 {z-index:-1;}
.z1 {z-index:1;}
.z2 {z-index:2;}
.z3 {z-index:3;}
.z4 {z-index:4;}
.z5 {z-index:5;}
.fix {position:fixed;}
.abs {position:absolute;}
.rtv {position:relative;}
.b100p {bottom:100%;}
.l50p {left:50%;}
.l100p {left:100%;}
.r100p {right:100%;}

.center-a, .ca {top:50%; left:50%; -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%);}
.center-v, .cv {top:50%; -webkit-transform:translateY(-50%); transform:translateY(-50%);}
.center-h, .ch {left:50%; -webkit-transform:translateX(-50%); transform:translateX(-50%);}

.t0 {top:0;}
.t50p {top:50%;}
.t100p {top:100%;}
.t2px {top:2px;}
.t4px {top:4px;}
.t6px {top:6px;}
.t8px {top:8px;}
.t10px {top:10px;}
.t12px {top:12px;}
.t14px {top:14px;}
.t16px {top:16px;}
.t18px {top:18px;}
.t20px {top:20px;}
.b0 {bottom:0;}
.b2px {bottom:2px;}
.b4px {bottom:4px;}
.b6px {bottom:6px;}
.b8px {bottom:8px;}
.b10px {bottom:10px;}
.b12px {bottom:12px;}
.b14px {bottom:14px;}
.b16px {bottom:16px;}
.b18px {bottom:18px;}
.b20px {bottom:20px;}
.b30px {bottom:30px;}
.l0 {left:0;}
.l2px {left:2px;}
.l4px {left:4px;}
.l6px {left:6px;}
.l8px {left:8px;}
.l10px {left:10px;}
.l12px {left:12px;}
.l14px {left:14px;}
.l16px {left:16px;}
.l18px {left:18px;}
.l20px {left:20px;}
.l22px {left:22px;}
.l24px {left:24px;}
.r0 {right:0;}
.r2px {right:2px;}
.r4px {right:4px;}
.r6px {right:6px;}
.r8px {right:8px;}
.r10px {right:10px;}
.r12px {right:12px;}
.r14px {right:14px;}
.r16px {right:16px;}
.r18px {right:18px;}
.r20px {right:20px;}

/* Css Dasar */ /* Css Dasar */ /* Css Dasar */ /* Css Dasar */ /* Css Dasar */ /* Css Dasar */ /* Css Dasar */

/* Css Sub Dasar */
.spinner {background-image:url("../img/loading9.gif"); background-repeat:no-repeat; margin-left:auto; margin-right:auto;}
.spinner-40 {background-size:40px 40px; background-position:50% 50%; text-align:center;}
.spinner-60 {background-size:60px 60px; padding-top:120px; background-position:50% 50%; width:100%; text-align:center;}
.loading_1 {padding-top:80px; background-image:url("../img/loading9.gif"); background-repeat:no-repeat; margin-left:auto; margin-right:auto; background-size:40px 40px; background-position:50% 50%; text-align:center;}
.alert_1 {width:100%; text-align:center; padding:30px 0;}

/* dimmer */
.olay {display:none; width:100%; height:100%; position:fixed; top:0; left:0; background:#000; opacity:0.7; z-index:50;}
/* dimmer */

/* Popupbox */
.popcontain {width:100%; height:0; overflow:visible; float:left; position:fixed; top:0; left:0; z-index:5000;}
.conbox {width:500px; padding:30px 3% 30px; background:#fff; border-radius:5px;  margin:0 auto 0; position:relative;}
.cbj {font-size:22px; margin-bottom:14px; color:#222;}
.cbi {font-size:15px; color:#555; margin-bottom:20px;}
.cby , .cbt{float:right; margin-left:14px; padding:8px 20px; background:#09F; color:#fff; border-radius:3px; font-size:13px; min-width:70px; text-align:center; cursor:pointer;}
.cbt {background:#ccc; color:#333;}
.cby:hover {background:#0CF;}
.cbt:hover {background:#eee;}
/* Popupbox */

/* date range picker */
tr .prev {background:url(../img/arrleft.png) no-repeat 50% 3px; background-color:#ddd;}
tr .next {background:url(../img/arright.png) no-repeat 50% 3px; background-color:#ddd;}
.applyBtn {cursor:pointer; padding:4px 0 4px; width:79px; color:#fff; border:1px solid #504ee9; background-color:#514fff; border-radius:3px;}
.applyBtn:hover {background-color:#504ee9;}
.cancelBtn {cursor:pointer; padding:4px 0 4px; width:79px; color:#fff; border:1px solid #222; background-color:#444; border-radius:3px;}
.cancelBtn:hover {background-color:#333;}
.fa-calendar {width:16px; height:16px; margin-top:-1px; background-image:url("icon/calendar.png"); background-position:0 0; background-size:16px 16px; background-repeat:no-repeat;}
/* date range picker */

/*flexdatalist*/
.flexdatalist-results {border:none !important; box-shadow:0 10px 20px 0 rgba(0, 0, 0, 0.5)}

.js_form_alert:empty {display:none;}
/* modal */
.js_modal {
	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:100%;
	display:none;
  z-index:1000;
}
.js-modal-content {
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
  padding:0;
  box-shadow:0 8px 16px 0 rgba(0, 0, 0, 0.3);
  max-height:100vh;
}
.js-modal-close-button {
	float:right;
	width:1.5rem;
	line-height:1.5rem;
	text-align:center;
	cursor:pointer;
	border-radius:0.25rem;
	background-color:lightgray;
}
.js-modal-close-button:hover {
	background-color:darkgray;
}
.js_show_modal {
	display:block !important;
  -webkit-animation:showBottom .3s; animation:showBottom .3s;
}

/* sweet alert */
.swal2-modal{border-radius:2px;padding:2.5rem!important;box-shadow:0 4px 18px rgba(0,0,0,.5)}
.swal2-modal .swal2-title{font-size:1.1rem;position:relative;z-index:1;color:#fff;line-height:inherit;margin:0 0 5px;font-weight:400}
.swal2-modal .swal2-icon,.swal2-modal .swal2-image{margin-top:0;margin-bottom:1.5rem}
.swal2-modal .swal2-content{color:rgba(255,255,255,.7);font-size:1rem;font-weight:400}
.swal2-modal .swal2-buttonswrapper{margin-top:30px}
.swal2-modal .swal2-buttonswrapper .btn{margin:0 3px;box-shadow:none!important}
.swal2-container.in{background-color:rgba(0,0,0,.2)}

.starcon { float:left; overflow:visible; position:relative;}
.starcon .starmet { float:left; height:100%; position:absolute; top:0; left:0;}
.starcon img { width:100%; height:100%; z-index:1; position:relative;}
  
/* paging */
/* .jdlhal {position:absolute; top:-26px; left:0; color:#333; border-radius:4px 12px 0 0;  width:160px; height:26px; text-align:center; padding:8px 0 8px; background:#f4f4f4;}
.jdlhal:after {content:' '; width:0; height:0; position:absolute; right:-18px; top:6px; border-bottom:20px solid #f4f4f4; border-right:20px solid transparent; float:left;}
.page {z-index:1; padding:0 10px; background-color:#ecf0f1; min-width:400px; min-height:38px; position:relative;}
.page a {float:left; padding:9px 0; background:#f4f4f4; text-align:center; border-left:1px solid #ddd; box-sizing:border-box; width:36px; margin:3px 1px; color:#444;}
.page p {float:left; padding:10px 14px 0;}
.page a:hover {box-shadow:0 0 0 1px #999;}
.page a:active {box-shadow:inset 0 0 5px 0 #666;}
.page .next {background:#eee url(../img/arright.png) no-repeat 50% 9px; width:10%; height:32px; margin-left:2px;}
.page .pref {background:#eee url(../img/arrleft.png) no-repeat 50% 9px; width:10%; height:32px; margin-right:2px;}
.page b {color:#07f;}
.page span:hover {color:#f90;} */
/* paging */

/* Css Sub Dasar */


/* Transisi */
.trans1 {
  -webkit-transition:all 1s ease;
	-moz-transition:all 1s ease;
	-ms-transition:all 1s ease;
	-o-transition:all 1s ease;
	transition:all 1s ease;}
	.trans05 {
    -webkit-transition:all 0.5s ease;
    -moz-transition:all 0.5s ease;
    -ms-transition:all 0.5s ease;
    -o-transition:all 0.5s ease;
    transition:all 0.5s ease;}
	.trans02 {
    -webkit-transition:all 0.2s ease;
    -moz-transition:all 0.2s ease;
    -ms-transition:all 0.2s ease;
    -o-transition:all 0.2s ease;
    transition:all 0.2s ease;}
  .trans01 {
    -webkit-transition:margin 0.1s ease;
    -moz-transition:margin 0.1s ease;
    -ms-transition:margin 0.1s ease;
    -o-transition:margin 0.1s ease;
    transition:margin 0.1s ease;}
  .del02 {
    -webkit-transition-delay: 0.2s;
    -moz-transition-delay: 0.2s;
    -ms-transition-delay: 0.2s;
    -o-transition-delay: 0.2s;
    transition-delay: 0.2s;
  }
  .del04 {
    -webkit-transition-delay: 0.4s;
    -moz-transition-delay: 0.4s;
    -ms-transition-delay: 0.4s;
    -o-transition-delay: 0.4s;
    transition-delay: 0.4s;
  }
  .del06 {
    -webkit-transition-delay: 0.6s;
    -moz-transition-delay: 0.6s;
    -ms-transition-delay: 0.6s;
    -o-transition-delay: 0.6s;
    transition-delay: 0.6s;
  }
  .del08 {
    -webkit-transition-delay: 0.8s;
    -moz-transition-delay: 0.8s;
    -ms-transition-delay: 0.8s;
    -o-transition-delay: 0.8s;
    transition-delay: 0.8s;
  }
/* Transisi */

/* Keyframe */

@keyframes shake2 {
  /* 0% { transform: rotate(0deg); } */
  25% { transform: rotate(10deg) scale(1.4); }
  50% { transform: rotate(0deg) scale(1); }
  75% { transform: rotate(-10deg) scale(1.4); }
  100% { transform: rotate(0deg) scale(1); }
}

@-webkit-keyframes fadeRight {
  from {opacity:0; transform:translate(-5%, 0);}
    to {opacity:1; transform:translate(0, 0);}
}
@keyframes fadeRight {
  from {opacity:0; transform:translate(-5%, 0);}
    to {opacity:1; transform:translate(0, 0);}
}
@-webkit-keyframes fadeLeft {
  from {opacity:0; transform:translate(5%, 0);}
    to {opacity:1; transform:translate(0, 0);}
}
@keyframes fadeLeft {
  from {opacity:0; transform:translate(5%, 0);}
    to {opacity:1; transform:translate(0, 0);}
}
@-webkit-keyframes fadeBottom {
  from {opacity:0; transform:translate(0, 5%);}
    to {opacity:1; transform:translate(0, 0);}
}
@keyframes fadeBottom {
  from {opacity:0; transform:translate(0, 5%);}
    to {opacity:1; transform:translate(0, 0);}
}
@-webkit-keyframes fadeTop {
  from {opacity:0; transform:translate(0, -5%);}
    to {opacity:1; transform:translate(0, 0);}
}
@keyframes fadeTop {
  from {opacity:0; transform:translate(0, -5%);}
    to {opacity:1; transform:translate(0, 0);}
}
/* Keyframe */

/* .w960hide, .w960show {display:none;} */

/* Media Query */
@media (min-width:320px){/* smartphones, iPhone, portrait 480x320 phones */}
@media (min-width:481px){/* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */}
@media (min-width:641px){/* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
  .w5pm{width:5%;}
  .w10pm{width:10%;}
  .w15pm{width:15%;}
  .w20pm{width:20%;}
  .w25pm{width:25%;}
  .w30pm{width:30%;}
  .w35pm{width:35%;}
  .w40pm{width:40%;}
  .w45pm{width:45%;}
  .w50pm{width:50%;}
  .w55pm{width:55%;}
  .w60pm{width:60%;}
  .w65pm{width:65%;}
  .w70pm{width:70%;}
  .w75pm{width:75%;}
  .w80pm{width:80%;}
  .w85pm{width:85%;}
  .w90pm{width:90%;}
  .w95pm{width:95%;}
  .w100pm{width:100%;}
}
@media (min-width:961px) {
  .w960show {display:block !important;}
  .w960hide {display:none !important;}
  /* tablet, landscape iPad, lo-res laptops ands desktops */}
@media (min-width:1025px) {/* big landscape tablets, laptops, and desktops */}
@media (min-width:1281px) {/* hi-res laptops and desktops */}
@media print {
	body {width:21cm; height:29.7cm; margin:0; background:#fff;}
}
@media (max-width:1280px){
  .w1280m {width:100% !important; clear:both;}
  .w33c {width:49% !important; margin-left:0.5%; margin-right:0.5%;}
}
@media (max-width:1024px){
  .w1024m {width:100% !important; clear:both;}
  .w1024fs08 {font-size:0.8em !important;}
  .w1024fs09 {font-size:0.9em !important;}
}
@media (max-width:960px){
  .w960m {width:100% !important; clear:both;}
  .w960show {display:none !important;}
  .w960hide {display:block !important;}
  .w960jcc {-webkit-box-pack:center!important;-ms-flex-pack:center!important;justify-content:center!important}
  .w960fs08 {font-size:0.8em !important;}
  .w960fs09 {font-size:0.9em !important;}
  .w960m0 {margin-left:0 !important; margin-right:0 !important; margin-top:0 !important;}
  .w960hide, .w960hd {display:none !important;}
}
@media (max-width:640px){
  .w640m {width:100% !important; clear:both;}
  .w640h {width:50% !important;}
  .w33c {width:99% !important; margin-left:0.5%; margin-right:0.5%;}
  .w640hide, .w640hd {display:none !important;}
  .w480hd {display:none !important;}
  .w640show {display:block !important;}
  .w640full {height:100vh !important; width:100% !important; margin:0 !important; z-index:50 !important; border-radius:0 !important; overflow:auto;}
  .w640fs08 {font-size:0.8em !important;}
  .w640fs09 {font-size:0.9em !important;}
  .w640fs1 {font-size:1em !important;}
  .w640fs12 {font-size:1.2em !important;}
}
@media (max-width:480px){
  .w480m {width:100% !important; max-width:100% !important; clear:both;}
  .w480hide {display:none !important;}
  .w480show {display:block !important;}
  .w480full {height:100vh !important; width:100% !important; margin:0 !important; z-index:300 !important; border-radius:0 !important; overflow:auto;}
  .w480fix {position:fixed;}
  .w480m0 {margin-left:0 !important; margin-right:0 !important; margin-top:0 !important;}
  .w480p0 {padding-left:0 !important; padding-right:0 !important;}
}
@media (max-width:319px){
  .w320m {width:100% !important; clear:both;}
}
/* Media Query */

/* Third Party*/ /* Third Party*/ /* Third Party*/ /* Third Party*/ /* Third Party*/ /* Third Party*/ /* Third Party*/

/* animated input 1
<div class="group">
	<input type="text" required>
	<span class="highlight"></span>
	<span class="bar"></span>
	<label>Name</label>
</div>
*/

.input_group_1 {
  position:relative; 
}
.input_group_1 input {
  padding:10px 10px 10px 5px;
  display:block;
  width:300px;
  border:none;
  border-bottom:1px solid #757575;
  background:none;
}


/* LABEL ======================================= */
.input_group_1 label {
  color:#999; 
  position:absolute;
  pointer-events:none;
  left:5px;
  top:20%;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}

/* active state */
.input_group_1 input:focus ~ label, .input_group_1 input:valid ~ label {
  top:-14px;
  font-size:14px;
  color:#5264AE;
}

/* BOTTOM BARS ================================= */
.bar 	{position:relative; display:block; width:300px;}
.bar:before, .bar:after {
  content:'';
  height:2px; 
  width:0;
  bottom:1px; 
  position:absolute;
  background:#5264AE; 
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}
.bar:before {
  left:50%;
}
.bar:after {
  right:50%; 
}

/* active state */
input:focus ~ .bar:before, input:focus ~ .bar:after {
  width:50%;
}

/* HIGHLIGHTER ================================== */
.highlight2 {
  position:absolute;
  height:60%; 
  width:100px; 
  top:25%; 
  left:0;
  pointer-events:none;
  opacity:0.5;
}

.rotate180 {
  transform: rotate(180deg);
  -ms-transform: rotate(180deg); /* IE 9 */
  -moz-transform: rotate(180deg); /* Firefox */
  -webkit-transform: rotate(180deg); /* Safari and Chrome */
  -o-transform: rotate(180deg); /* Opera */
}

/* active state */
input:focus ~ .highlight {
  -webkit-animation:inputHighlighter 0.3s ease;
  -moz-animation:inputHighlighter 0.3s ease;
  animation:inputHighlighter 0.3s ease;
}

/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
	from {background:#5264AE;}
  to 	{width:0; background:transparent;}
}
@-moz-keyframes inputHighlighter {
	from {background:#5264AE;}
  to 	{width:0; background:transparent;}
}
@keyframes inputHighlighter {
	from {background:#5264AE;}
  to 	{width:0; background:transparent;}
}

@keyframes zoomOut {
  50% {
      transform:scale(0, 0);
      opacity:0;
 }
  100% {
      transform:scale(1, 1);
      opacity:1;
 }
}

@keyframes zoomIn {
  0% {
      opacity:.6
 }
  25%,
  75% {
      transform:scale(1.2);
      opacity:0
 }
  50% {
      opacity:0
 }
  100% {
      opacity:1;
 }
}

@keyframes fadeOut {
  50% {
      opacity:0;
 }
  100% {
      opacity:1;
 }
}

@keyframes fadeOutRight {
  25% {
      transform:translateX(10px);
      opacity:0;
 }
  50% {
      transform:translateX(-20px);
      opacity:0;
 }
  75% {
      transform:translateX(-5px);
      opacity:0.2;
 }
  100% {
      transform:translateX(0);
      opacity:1;
 }
}

@keyframes fadeOutLeft {
  25% {
      transform:translateX(-10px);
      opacity:0;
 }
  50% {
      transform:translateX(20px);
      opacity:0;
 }
  75% {
      transform:translateX(5px);
      opacity:0.2;
 }
  100% {
      transform:translateX(0);
      opacity:1;
 }
}

@keyframes fadeOutTop {
  25% {
      transform:translateY(-5px);
      opacity:0;
 }
  50% {
      transform:translateY(20px);
      opacity:0;
 }
  75% {
      transform:translateY(5px);
      opacity:0.2;
 }
  100% {
      transform:translateY(0);
      opacity:1;
 }
}

@keyframes fadeOutBottom {
  25% {
      transform:translateY(5px);
      opacity:0;
 }
  50% {
      transform:translateY(-10px);
      opacity:0;
 }
  75% {
      transform:translateY(-5px);
      opacity:0.2;
 }
  100% {
      transform:translateY(0);
      opacity:1;
 }
}

@keyframes showBottom {
  0% {
    opacity:0;
      transform:translateY(-15px);
 }
  100% {
    opacity:1;
      transform:translateY(0px);
 }
}

@keyframes verticalFlip {
  50% {
      transform:rotateX(90deg);
 }
  100% {
      transform:rotateX(0deg);
 }
}

@keyframes horizontalFlip {
  50% {
      transform:rotateY(90deg);
 }
  100% {
      transform:rotateY(0deg);
 }
}

@keyframes bounceOutBottom {
  20%, 100% {
      transform:translate3d(0, 0, 0);
 }
  40%,
  45%,
  80%,
  90% {
      opacity:1;
      transform:translate3d(0, -5px, 0);
 }
  50% {
      opacity:0;
      transform:translate3d(0, 10px, 0);
 }
}

@keyframes bounceOutTop {
  20%, 100% {
      transform:translate3d(0, 0, 0);
 }
  40%,
  45%,
  80%,
  90% {
      opacity:1;
      transform:translate3d(0, 5px, 0);
 }
  50% {
      opacity:0;
      transform:translate3d(0, -10px, 0);
 }
}

@keyframes bounceOutLeft {
  20%, 100% {
      transform:translate3d(0, 0, 0);
 }
  40%,
  80% {
      opacity:1;
      transform:translate3d(5px, 0, 0);
 }
  50% {
      opacity:0;
      transform:translate3d(-10px, 0, 0);
 }
}

@keyframes bounceOutRight {
  20%, 100% {
      transform:translate3d(0, 0, 0);
 }
  40%,
  80% {
      opacity:1;
      transform:translate3d(-5px, 0, 0);
 }
  50% {
      opacity:0;
      transform:translate3d(10px, 0, 0);
 }
}

@keyframes rubberBand {
  0%, 100% {
      transform:scale3d(1, 1, 1);
 }
  30%,
  60% {
      transform:scale3d(1.25, 0.75, 1);
 }
  40%,
  80% {
      transform:scale3d(0.75, 1.25, 1);
 }
  50% {
      transform:scale3d(1.15, 0.85, 1);
 }
}

@keyframes tada {
  50% {
      transform:scale3d(.3, .3, .3) rotate3d(0, 0, 1, -20deg);
      transform-origin:center;
 }
  70%,
  90% {
      transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 20deg);
      transform-origin:center;
 }
  60%,
  80% {
      transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -20deg);
      transform-origin:center;
 }
  100% {
      transform:scale3d(1, 1, 1);
      transform-origin:center;
 }
}

@keyframes rollOutRight {
  30% {
      transform:translateX(10px) rotate3d(0, 0, 1, 50deg);
      opacity:0;
 }
  50% {
      transform:translateX(-20px);
      opacity:0;
 }
  55% {
      transform:translateX(-20px) rotate3d(0, 0, 1, -90deg);
      opacity:0;
 }
  100% {
      transform:translateX(0) rotate3d(0, 0, 1, 0deg);
      opacity:1;
 }
}

@keyframes rollOutLeft {
  30% {
      transform:translateX(-10px) rotate3d(0, 0, 1, -50deg);
      opacity:0;
 }
  50% {
      transform:translateX(20px);
      opacity:0;
 }
  55% {
      transform:translateX(20px) rotate3d(0, 0, 1, 90deg);
      opacity:0;
 }
  100% {
      transform:translateX(0) rotate3d(0, 0, 1, 0deg);
      opacity:1;
 }
}

@keyframes rotateClockwise {
  0% {
      opacity:1;
      transform-origin:center;
 }
  50% {
      opacity:0;
      transform-origin:center;
 }
  100% {
      transform:rotateZ(360deg);
      transform-origin:center;
      opacity:1;
 }
}

@keyframes rotateAntiClockwise {
  0% {
      opacity:1;
      transform-origin:center;
 }
  50% {
      opacity:0;
      transform-origin:center;
 }
  100% {
      transform:rotateZ(-360deg);
      transform-origin:center;
      opacity:1;
 }
}

@keyframes radius {
  0%{
    border-radius:0;
  }
  50% {
    border-radius:50%;
 }
  100% {
    border-radius:100%;
 }
}

@keyframes width {
  0%{
    width:0;
  }
  50% {
    width:50%;
 }
  100% {
    width:100%;
 }
}

/* Custom CSS */
.main_menu_2 a {padding:17px 20px; font-size:1.3rem; float:left; color:#999; font-weight:medium;}
.main_menu_2 a:hover {color:#666;}
.main_menu_2 .activeLink { border-bottom:3px solid #2b338b !important; color:#2b338b !important;}
.main_menu_spacer {height:92px;}

.wrapper_1440 {width:100%; margin:auto; position:relative; max-width:1440px; padding:0 3% 0;}
.main-tab a { font-size:1.3rem; float:left; padding:12px 25px; margin-right:4px; font-weight:bold; color:#999; background:#f1f1f1; cursor:pointer;}
.main-tab a:hover {background:#fff; color:#2b338b !important;}
.main-tab .switch-active {background:#fff; border-top:3px solid #2b338b !important; color:#2b338b !important;}
.main-content {padding:0 25px;}
.main-content h2 {margin:20px 0 20px; font-size:2rem; font-weight:bold;}
.main-content h3 {color:#8f8f8f; margin:0; font-size:1.4rem; font-weight:500;}

.table-1 {margin:0 0 20px; border-spacing:0; border-collapse: collapse;border: solid 1px #ccc;}
.table-1 thead {background:rgb(255, 255, 255); color:#555; }
.table-1 thead td { padding:14px 10px; margin:0; border: solid 1px rgba(43,51,139,0.4); color:#2b338b; background:rgba(43,51,139,0.1); font-weight:bold;}
.esg_table_header { padding:10px 10px; margin:0; color:#2b338b; background:rgba(43,51,139,0.1); font-weight:bold;}
.table-1 tbody {background:rgba(43, 51, 139, 0.01); color:#555;}
.table-1 tbody td { padding:12px 10px; margin:0; border: solid 1px #ccc; position:relative;}
.table-1 tbody td .tooltip{ display:none; font-weight:normal; white-space:nowrap; box-shadow:0 4px 10px 0 rgba(0,0,0,.1); float:left; position:absolute; bottom:100%; right:0; z-index:1; background:#fff; border-radius:5px; padding:14px; }
.table-1 tbody td:hover .tooltip{ display: block; }
.table-1 td:nth-child(1){ min-width:100px; max-width:100px; }
.table-1 td:nth-child(2){ min-width:350px; max-width:350px;}
.table-1 td:nth-child(3){ width:160px;}
.table-1 td:nth-child(n+3) {min-width:90px;}
.table-1 .input_head {border: solid 1px rgba(43,51,139,0.4); /*border:none !important; background:#fff !important;*/ padding-left:30px;}
.table-1 .input_body {border:0 !important; background:#fff; padding:2px 10px 2px !important;}
.table-1 .input_body input {padding:10px; border:1px solid #b8b8b8; background:transparent; color:#555; border-radius:5px; width:120px;}
.invalid_input { font-weight:bold; white-space:nowrap; box-shadow:0 4px 10px 0 rgba(0,0,0,.1); float:left; position:absolute; top:10px; right:90%; z-index:1; font-size:12px; background:rgb(252, 219, 219); color:#900; border-radius:5px; padding:4px 8px; }
.invalid_input:after {content:' '; width:0; height:0; position:absolute; left:100%; top:30%; border-top:6px solid rgb(252, 219, 219); border-left:0px solid transparent; border-right:6px solid transparent; float:left;}
/* .icon_dev_warning { float:left; width:10px; height:10px; position:absolute; top:2px; left:2px; border-radius:100%; background:#fb0; z-index:1; background-imag:url("../img/warning1.png"); background-repeat:no-repeat; background-size:10px auto; background-position:center;} */
.qualitative_select { color:#555; padding:14px 20px; width:100%; font-size:20px; border-radius:0px; border:12px solid #eee;}

.table-2 {margin:20px 0 8px; min-width:100%; border-spacing:0; border-collapse: collapse;}
.table-2 thead {background:#fff;}
.table-2 thead td { padding:14px 10px; margin:0; color:#888; border-bottom: solid 1px #eee; font-weight:bold; white-space: nowrap;}
.table-2 tbody {background:#fff; color:#555; cursor:pointer;}
.table-2 tbody td { padding:20px 10px; margin:0; border-bottom: solid 1px #eee; white-space: nowrap;}
.table-2 tbody tr:hover { background:#f8f8f8; }

.table-3 {margin:20px 0 8px; border-spacing:0; border-collapse: collapse;}
.table-3 thead td { padding:8px 14px; margin:0; font-weight:bold; white-space: nowrap;}
.table-3 tbody { color:#555; cursor:pointer;}
.table-3 tbody tr { background-color:#fff; border-radius:10px; margin:10px 0 0;}
.table-3 tbody td {  padding:10px 14px; margin:10px 0 0; border-top:4px solid #f8f8f8; white-space: nowrap;}
/* .table-3 tbody tr:hover { background:#eee; } */

.main_submit_button {width:142px; float:right; height:40px; font-size:1.4rem; border:0; border-radius:5px; font-weight:bold; color:#fff; background:#dc292f;}
.main_submit_button_2 {width:142px; float:right; height:40px; font-size:1.4rem; border:0; border-radius:5px; font-weight:bold; color:#fff; background:#2b338b;}
.blue_button {padding:10px 20px; font-size:1.4rem; border:0; border-radius:5px; font-weight:bold; color:#fff; background:#2b338b;}
.blue_button:hover { background:#444ca1;}
.textarea_1 label {float:left; margin:1 0px 0 10px;}
.textarea_1 textarea {padding:10px; width:300px; border:1px solid #ddd; clear:both; float:left; border-radius:5px;}

.title_1 {font-weight:bold; color:#fff; padding:10px 20px; border-radius:5px; margin:20px 0 14px; min-width:451px; float:left;background:#2b338b;}
.title_2 {font-size:1.5rem; margin-top:14px; width:100%; float:left;}
.title_3 {color:#444; background:#f8f8f8; font-weight:bold; padding:6px 12px; border-radius:5px 5px 0 0; margin:0px; border:1px solid #ddd; min-width:451px; float:left; clear:both;}
.title_3a {color:#444; background:#f8f8f8; font-weight:bold; padding:6px 12px; border-radius:5px 5px 0 0; margin:0px; border:1px solid #ddd; min-width:451px; float:left; clear:both;}

.wysiwyg_1 { width:49%; margin:0 0 30px; }
.wysiwyg_1:nth-child(odd) { float:left; }
.wysiwyg_1:nth-child(even) { float:right; }
.wysiwyg_1 label {min-height:40px; width:100%; float:left;}
.wysiwyg_1 div {margin:4px 0 10px; width:100%; float:left;}
.wysiwyg_1 textarea {width:100%; }
/* .jodit_statusbar {display:none !important;} */

.bt2b3 {background:#2b338b; color:#fff; font-weight:bold; }
.bgesg {background:#2b338b;}
.bgblue1 {background:#e9f7ff;}
.bgblue2 {background:#d6d8ec;}
.bgyellow2 {background:#fdfddf;}
.bgyellow1 {background:#f8f7c6;}
.bgviolet1 {background:#ecfcf2;}
.clesg {color:#2b338b;}
.bg-container-1 {background-color:#fff; border:1px solid #b8b8b8;}
.bg-container-1 input, .bg-container-1 textarea {background-color:transparent; color:#000;}
.bg-container-1 input::placeholder, .bg-container-1 textarea::placeholder {color:#9da9b4;}
.bg-container-1 input:-ms-input-placeholder, .bg-container-1 textarea:-ms-input-placeholder {color:#455161;}
.bg-container-1 input::-ms-input-placeholder, .bg-container-1 textarea::-ms-input-placeholder {color:#455161;}

.bgEnvironment {background:rgb(238, 250, 238);}
.bgEnvironment .category {color:#060;}
.bgSocial {background:rgb(240, 228, 175);}
.bgSocial .category {color:rgb(77, 56, 23);}

[js_mask="float"], [js_mask="number"] { text-align:right; }