@charset "utf-8";

*,*::before,*::after{

  box-sizing: border-box;

}

*{

  margin: 0;

  padding: 0;

  font: inherit;

}

@font-face{font-family:Lexend;src:url(fonts/Lexend-VariableFont_wght.ttf);}

body{

  height: 100dvh;

}

input,div,textarea,select{

  box-sizing:border-box;

  -moz-box-sizing:border-box;

  -webkit-box-sizing:border-box;

  outline: none;

}

input,textarea,select,textarea{

  padding: 10px;

  width: 100%;

}

textarea{

  height: 100px;

  padding: 10px;

  outline: none;

  font-weight: 300;

  font-size: 0.8rem;

}

input[type="button"]{

  cursor: pointer;

  width: auto;

}

input[type="checkbox"]{

  width: initial;

}

img,picture,svg,video{

  max-width: 100%;

  display: block;

}

a{text-decoration:none;cursor: pointer;}

a:visited{color: initial}

p{text-wrap: pretty;}

/* GRID */

.xcol-2,.mcol-2,.xcol-3,.mcol-3,.xcol-4,.mcol-4{display: grid}

.xcol-1-2,.mcol-1-2{

  display: grid;

  grid-template-columns: 1fr 2fr;

}

.xcol-2,.mcol-2{grid-template-columns: 1fr 1fr;}

.xcol-3,.mcol-3,.mcol-3-2{

  grid-template-columns: repeat(3, 1fr);}

.xcol-4,.mcol-4,.mcol-4-2{

  grid-template-columns: repeat(4, 1fr);}

.xcol-5,.mcol-5,.mcol-5-2,.mcol-5-3{grid-template-columns: repeat(5, 1fr);}

.xcol-6,.mcol-6,.mcol-6-2{grid-template-columns: repeat(6, 1fr);}

.xcol-2-1,.mcol-2-1{

  display: grid;

  grid-template-columns: 2fr 1fr;

}

.xcol-12,.mcol-12{grid-template-columns: repeat(12, 1fr)}



.xcol-1f-2f,.mcol-1f-2f{grid-template-columns: 1fr 2fr}

.xcol-2f-1f,.mcol-2f-1f{grid-template-columns: 2fr 1fr}

.xcol-6f-4f,.mcol-6f-4f{grid-template-columns: 6fr 4fr;}

.xcol-1f-2f-1f,.mcol-1f-2f-1f{grid-template-columns: 1fr 2fr 1fr}

.xcol-custom{

  display: grid;

  grid-template-columns: var(--fr);

}

.mcol-autofill{

  display: flex;

  flex-direction: row;

  flex-wrap: wrap;

}

.xgap{

  gap: var(--xgap);

}



/* FONT SIZE */

.fs-07{font-size: 0.7rem}

.fs-08{font-size: 0.8rem}

.fs-09{font-size: 0.9rem}

.fs-1{font-size: 1rem}

.fs-11{font-size: 1.1rem}

.fs-12{font-size: 1.2rem}

.fs-13{font-size: 1.3rem}

.fs-14{font-size: 1.4rem}

.fs-15{font-size: 1.5rem}

.fs-16{font-size: 1.6rem}

.fs-17{font-size: 1.7rem}

.fs-18{font-size: 1.8rem}

.fs-2{font-size: 2rem}

.fs-3{font-size: 3rem}



/* FONT PROPERTY */

.fw-600{font-weight: 600}



/* MOBILE */

.fs-m-14{font-size: 1.4rem}

.fs-m-15{font-size: 1.5rem}

.fs-m-16{font-size: 1.6rem}

.fs-m-17{font-size: 1.7rem}

.fs-m-18{font-size: 1.8rem}

.fs-m-2{font-size: 2rem}



/* WIDTH */

.w100{width: 100%}

.mw-500,.mw-700,.mw-1000, .mw-1200{

  width: 100%;

}

.mw-500{max-width: 500px;}

.mw-700{max-width: 700px;}

.mw-1000 {max-width: 1000px;}

.mw-1200 {max-width: 1200px;}

.mw-custom{max-width: var(--mw);}

.mh-custom{max-height: var(--mh);}

.xw{width: var(--xw);}

.xh{height: var(--xh);}



/* IMAGE FIX */

.ximage{

  img{

    object-fit: cover;

  }

  .circle{border-radius: 100%}

  .square-200{

    width: 200px;

    height: 200px;

  }

  .square-250{

    width: 250px;

    height: 250px;

  }

  .square-300{

    width: 300px;

    height: 300px;

  }

}

.enter{

  padding: 10px 0;

}

.enter-2{padding: 20px 0;}

.enter-4{padding: 40px 0;}

.enter-6{padding: 60px 0;}

.enter-8{padding: 80px 0;}



/* BHVR */

.left,.xleft{

  display: grid;

  text-align: left;

  justify-content: flex-start;

}

.right,

.xright{

  text-align: right;

  justify-content: end;

  align-content: center;



  .div-select{

    display: grid;

    justify-content: end;



    select{

      width: max-content;

      background: transparent;

      border: solid 1px #ccc;

      padding: 5px 10px;

      cursor: pointer;

    }

  }

}

.xmiddle{

  display: grid;

  align-content: center;

  align-items: center;

}

.xsquare{

   aspect-ratio: 1/1;

   object-fit: cover;

}

.xcircle{

   border-radius: 100%;

}

.img-40{

  width: 40px;

  height: 40px;

  max-width: 40px;

  max-height: 40px;

  object-fit: cover;

}

.xcursor{

  cursor: pointer;

}



/* SECTION */

section{

  width: 100%;

}

.section-80{

  width: 80%;

  margin: auto;

}



/* ELEMENTS */

.btn-clickable{

  box-shadow: #094c66 4px 4px 0 0;

  transition: transform 200ms, box-shadow 2s;

}

.btn-clickable:active{

  transform: translateY(4px) translateX(4px);

  box-shadow: #094c66 0px 0 0 0;

}





/* BOX */

.xbox-shadow{

  margin: 40px 0;

  background: rgba( 255, 255, 255, 0.6 );

  box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );

  backdrop-filter: blur( 4px );

  -webkit-backdrop-filter: blur( 4px );

  border-radius: 10px;

  border: 1px solid rgba( 255, 255, 255, 0.18 );

  padding: 30px;

}



/* FORM */

.xform{



  .xinput-label-i span {

    position: absolute;

    font-size: 1rem;

    font-weight: 600;

    padding: 10px;

    color: initial;



    .fa-envelope{

      color: #888787;

    }

  }

  textarea:focus,

  input:focus{

    outline: none;           /* Menghilangkan garis biru bawaan */

    border: 2px solid #007BFF; /* Menambahkan border biru */

    box-shadow: 0 0 5px #007BFF; /* Efek glow */

  }

}

.xform-title{

  padding: 20px 0;

  font-size: 0.8rem;

  font-weight: 400;

}

.xselect-transparent select{

  border: none;

  border-radius: 0;

  padding: 12.5px;

  background-color: #fff;

  border-bottom: solid 2px #f7f7f7;

  cursor: pointer;

}



/* FORM INPUT RP

<div class=xform-row>

  <label>Nominal</label>

  <div class=xinput-label-rp>

    <span>Rp.</span>

    <input class=xform-input data-xtype=rp>

  </div>

</div>

*/

.xinput-label-rp{

  position: relative;

}

.xinput-label-rp span{

  position: absolute;

  font-size: 0.75rem;

  font-weight: 500;

  padding: 12px 0 0 5px;

  color: gray;

}

.xinput-label-rp input{

  border: none;

  border-bottom: solid 2px #f7f7f7;

  padding: 10px 5px;

  border-radius: 0;

  padding-left: 26px !important;

}



/* FORM INPUT SYMBOL IN RIGHT

<div class=xform-row>

  <label>Nominal</label>

  <div class=xinput-label-rp>

    <span>Rp.</span>

    <input class=xform-input data-xtype=rp>

  </div>

</div>

*/

.xinput-label-in-right{

  position: relative;

}

.xinput-label-in-right span{

  position: absolute;

  font-size: 0.75rem;

  font-weight: 500;

  padding: 12px 0;

  color: gray;

  right: 0;

  padding-right: 5px;

}

.xinput-label-in-right input{

  border: none;

  border-bottom: solid 2px #f7f7f7;

  padding: 10px 5px;

  border-radius: 0;

  padding-right: 24px !important;

}

.xinput-label-i span{

  position: absolute;

  font-size: 1.2rem;

  font-weight: 500;

  padding: 10px;

  color: #888;

}

.xinput-label-i input {

  padding-left: 36px;

  padding-top: 12px;

}

/* TABEL */

.xtable-toolbar{

  padding: 20px 0;

}

.xtable{

  border-spacing: 0;

  border-collapse: collapse;

  width: 100%;



  .th-rp,

  .th-usd,

  .td-usd,

  .xright{

    text-align: right;

  }

  .td-rp::before,

  .th-rp::before{

    content: 'Rp.';

    float: left;

  }

  .td-usd::before,

  .th-usd::before{

    content: '$';

    float: left;

  }

}

.xborder{

  border: solid 1px #ccc;

}

.xtable .td-nourut{

  width: 30px;

  border-right: dotted 1px #3ebbf0;

}

/* TABLE THEME DAX */

.xtable-theme-dax tr th{

  background-color: #fff;

  padding: 8px 0;

}

.xtable-theme-dax tr td{

  padding: 8px 10px;

}

.xtable-theme-dax tr:nth-child(odd){

  background-color: #fff;

}

.xtable-theme-dax tr:nth-child(even){

  background-color: #f4f9ff;

}

/* DATALIST THEME DEFAULT */

.xdatalist{

  position: relative;

  width: 100%;

}

.xdatalist .xform-input{

  padding-right: 30px;

}

.xdatalist-i{

  width: min-content;

  position: absolute;

  top: 0;

  right: 0;

  padding: 10px;

  font-size: 1rem;

  color: cadetblue;

}

.xdatalist-select{

  position: absolute;

  z-index: 1;

}

.xdatalist-option{

  background-color: #f7f7f7;

  padding: 10px 5px;

  border-bottom: solid 1px #ecebeb;

}

.xdatalist-option:hover{

  cursor: pointer;

  background-color: #e6e6e6;

}

.xdatalist-selected{

  display: none;

  position: absolute;

  top: 10px;

  left: 5px;

  padding: 5px 25px 5px 5px;

  border-radius: 5px;

}

.xdatalist-selected-text{

  color: #fff;

}

.xdatalist-selected i{

  position: absolute;

  right: 5px;

  font-size: 1rem;

  color: #fffdfd;

  cursor: pointer;

}

.xdatalist-selected i:hover{

  color: #b55;

}



/* LOGIN */

.xlogin-split{

  height: 100%;

  position: absolute;

  width: 100%;

  display: grid;

  gap: 0;

}

.xlogin-site-name{

  background-color: rgba(0,0,0,.8);

  color: #fff;

  padding: 20px;

  font-size: 1.4rem;

  width: max-content;

  margin: 50px;

  border-radius: 10px;

  font-family: Lexend;

}

/* ANIMATION */

.xreveal{

  opacity: 0;

  transition: 2s all ease;

}

.xreveal.active{

  transform: translateY(0);

  transform: translateX(0);

  opacity: 1;

}

.xreveal-to-up{

  transform: translateY(150px);

}

.xreveal-to-down{

  transform: translateY(-150px);

}

.xreveal-to-left{

  transform: translateX(150px);

}

.xreveal-to-right{

  transform: translateX(-150px);

}

/* SEARCH */

.xsearch{

  position: relative;

  padding-bottom: 1px;

  bottom: 0;

  right: 0;

}

.xsearch-icon{

  position: absolute;

  left: 0;

  padding: 10px;

}

.xsearch-icon i{

  color: grey;

  font-size: 0.9rem;

}

.xsearch-input input{

  padding: 10px 0 10px 30px;

  border-radius: 3px;

  border: solid 1px #ccc;

}

.xsearch-input input:focus{

  outline: none;

}



/* IMAGE */

.xthumb{

  object-fit: cover;

}

/* IMAGE TEMPLATES */

/*

  <div class=ximg-image-text>

    <div class=ximg-image-text-img>

      <img src="" alt="">

    </div>

    <div class=ximg-image-text-txt>

      TEXT

    </div>

  </div>

*/

.ximg-image-text{

  display: grid;

  grid-template-columns: 50px 1fr;

}

.ximg-image-text-img{

  justify-content: center;



}

.ximg-image-text-img img{

  max-width: 100%;

}

.xinfo{

  padding: 15px;

  border-radius: 15px;

  font-size: 0.7rem;

  margin: 20px 0;

  font-weight: 300;

  text-align: center;



  strong{

    font-size: 0.7rem;

  }



  &.grey{

    background-color: #f7f7f7;

    border: solid 1px #ccc;

    color: #666;

  }

  &.red{

    background-color: #FFF5F5;

    border:solid 1px #E53935;

    color: #C62828;

  }

}



/* REPLACE QUILL */

.ql-editor{

  min-height: 200px;

}



@media only screen and (max-width : 480px) {

  .no-mobile{display:none}

  .mcol-2,.mcol-2-1,.mcol-3,.mcol-4,.mcol-12,.mcol-1f-2f,.mcol-2f-1f,.mcol-6f-4f{

    grid-template-columns: 1fr;

  }

  .mcol-3-2,.mcol-4-2,.mcol-5-2,.mcol-6-2{grid-template-columns: repeat(2, 1fr);}

  .mcol-5-2{grid-template-columns: repeat(2, 1fr)}

  .mcol-5-3{grid-template-columns: repeat(3, 1fr)}



  /* FONT SIZE */

  .fs-m-14{font-size: 1.2rem}

  .fs-m-15{font-size: 1.3rem}

  .fs-m-16{font-size: 1.4rem}

  .fs-m-17{font-size: 1.5rem}

  .fs-m-18{font-size: 1.6rem}

  .fs-m-2{font-size: 1.8rem}

}