/* FONT */
@font-face {
  font-family: Maison;
  src: url("../font/MaisonNeue/MaisonNeue-Book.ttf") format("truetype");
}

@font-face {
  font-family: MaisonDemi;
  src: url("../font/MaisonNeue/MaisonNeue-Demi.ttf") format("truetype");
}

@font-face {
  font-family: MaisonExtend;
  src: url("../font/MaisonNeue/MaisonNeueExtended-Bold.ttf") format("truetype");
}

@font-face {
  font-family: MaisonExtendExtraBold;
  src: url("../font/MaisonNeue/MaisonNeueExtended-ExtraBold.ttf")
    format("truetype");
}

.justify-mobile-start {
  margin-right: 35px !important;
}

/* FONT Montserrat  */

@font-face {
  font-family: MontserratRegular;
  src: url("../font/Montserrat/Montserrat-Regular.otf") format("truetype");
}

@font-face {
  font-family: MontserratSemiBold;
  src: url("../font/Montserrat/Montserrat-SemiBold.otf") format("truetype");
}

@font-face {
  font-family: MontserratExtraBold;
  src: url("../font/Montserrat/Montserrat-ExtraBold.otf") format("truetype");
}

.MontserratRegular {
  font-family: "MontserratRegular";
}

.MontserratSemiBold {
  font-family: "MontserratSemiBold";
}

.MontserratExtraBold {
  font-family: "MontserratExtraBold";
}


.justify-content-end {
  justify-content: flex-start !important;
  margin-left: -20px !important;
}

/*.Maison {*/
/*  font-family: "Maison";*/
/*}*/

/*.MaisonDemi {*/
/*  font-family: "MaisonDemi";*/
/*}*/

/*.MaisonExtend {*/
/*  font-family: "MaisonExtend";*/
/*}*/

/*.MaisonExtendExtraBold {*/
/*  font-family: "MaisonExtendExtraBold";*/
/*}*/

/* BODY */
body {
  /*font-family: "Maison", sans-serif !important;*/
  font-family: "MontserratRegular", sans-serif !important;
  background: #f5f5f5;
}

/* VIEW */
.view-xl {
  display: none;
}

.view-md {
  display: none;
}

.view-sm {
  display: block;
}

/* CONTENT */
.container-x {
  padding-left: 14px !important;
  padding-right: 14px !important;
}

.container-y {
  padding-top: 30px !important;
  padding-bottom: 30px !important;
}

/* COLOR */
:root {
  --green-dark-300: #006666;
  --green-300: #208d33;
  --green-200: #33c060;
  --green-100: #5ce086;
  --green-05: #f5fcf7;
  --green-04: #56c884;
  --orange: #ffab2c;
  --blue: #2cb9ff;
  --blue-100: #8394b6;
  --white: #fff;
  --black-200: #000;
  --black-100: #1d231f;
  --grey-200: #696b6b;
  --grey-100: #b1b1bc;
  --grey-05: #f1f1f1;
  --grey-01: #e6e9eb4d;
  --red-02: #fca9a9;
  --red-01: #ff0000f3;
  --transparent-01: rgba(252, 255, 242, 0.692);
}

/* BACKGROUND COLOR */
.bg-green-300 {
  background-color: var(--green-300) !important;
}
.bg-green-200 {
  background-color: var(--green-200) !important;
}
.bg-green-100 {
  background-color: var(--green-100) !important;
}
.bg-green-01 {
  background-color: var(--green-dark-300) !important;
}
.bg-green-05 {
  background-color: var(--green-05) !important;
}
.bg-orange {
  background-color: var(--orange) !important;
}
.bg-blue {
  background-color: var(--blue) !important;
}
.bg-white {
  background-color: var(--white) !important;
}
.bg-black-200 {
  background-color: var(--black-200) !important;
}
.bg-black-100 {
  background-color: var(--black-100) !important;
}
.bg-grey-200 {
  background-color: var(--grey-200) !important;
}
.bg-grey-100 {
  background-color: var(--grey-100) !important;
}
.bg-grey-05 {
  background-color: var(--grey-05) !important;
}
.bg-grey-01 {
  background-color: var(--grey-01) !important;
}
.bg-red-01 {
  background-color: var(--red-01) !important;
}
.bg-transparent-01 {
  background-color: var(--transparent-01) !important;
}

.bg-gradient-white-green-05 {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(245, 252, 247, 1) 100%
  );
}

/* FONT COLOR */
.font-green-300 {
  color: var(--green-300);
}
.font-green-200 {
  color: var(--green-200);
}
.font-green-100 {
  color: var(--green-100);
}
.font-green-04 {
  color: var(--green-04);
}
.font-orange {
  color: var(--orange);
}
.font-blue {
  color: var(--blue);
}
.font-blue-100 {
  color: var(--blue-100);
}
.font-white {
  color: var(--white) !important;
}
.font-black-200 {
  color: var(--black-200) !important ;
}
.font-black-100 {
  color: var(--black-100) !important;
}
.font-grey-200 {
  color: var(--grey-200) !important ;
}
.font-grey-100 {
  color: var(--grey-100);
}
.font-green-dark-300 {
  color: var(--green-dark-300) !important;
}
.font-red-01 {
  color: var(--red-01);
}
.font-red-02 {
  color: var(--red-02);
}



/* FONT SIZE BARU  */
.text-header {
  font-size: 20px !important;
}
.text-xl {
  font-size: 20px !important;
}
.text-md {
  font-size: 18px !important;
}
.text-sm {
  font-size: 16px !important;
}
.text-xs {
  font-size: 14px !important;
}
.text-xs-1x {
  font-size: 12px !important;
}
.text-xs-2x {
  font-size: 10px !important;
}
.text-xs-3x {
  font-size: 8px !important;
}

/* FONT WEIGHT */
.font-weight-extra-bold {
  font-family: "MaisonExtendExtraBold" !important;
}

.font-weight-bold {
  font-family: "MaisonExtend" !important;
}

.font-weight-demi {
  font-family: "MaisonDemi" !important;
}

.font-weight-normal {
  font-family: "Maison" !important;
}

/* LINE HEIGHT */
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* TEXT ALIGN */
.t-left {
  text-align: left !important;
}

.t-right {
  text-align: right !important;
}

.t-center {
  text-align: center !important;
}

.t-justify {
  text-align: justify !important;
}

/* DIMENSION */
.height-10 {
  height: 10px !important;
}
.height-20 {
  height: 20px !important;
}
.height-30 {
  height: 30px !important;
}
.height-35 {
  height: 35px !important;
}
.height-40 {
  height: 40px !important;
}
.height-50 {
  height: 50px !important;
}
.height-60 {
  height: 60px !important;
}
.height-70 {
  height: 70px !important;
}
.height-80 {
  height: 80px !important;
}
.height-90 {
  height: 90px !important;
}
.height-100 {
  height: 100px !important;
}
.height-160 {
  height: 160px !important;
}
.height-250 {
  height: 250px !important;
}
.height-300 {
  height: 300px !important;
}
.height-400 {
  height: 400px !important;
}

.height-content {
  height: fit-content !important;
}

.width-10 {
  width: 10px !important;
}
.width-20 {
  width: 20px !important;
}
.width-30 {
  width: 30px !important;
}
.width-40 {
  width: 40px !important;
}
.width-50 {
  width: 50px !important;
}
.width-60 {
  width: 60px !important;
}
.width-70 {
  width: 70px !important;
}
.width-80 {
  width: 80px !important;
}
.width-90 {
  width: 90px !important;
}
.width-100 {
  width: 100px !important;
}
.width-150 {
  width: 150px !important;
}


/* DIMENSION PERSEN  */
.width-3p{width: 3% !important;}
.width-5p{width: 5% !important;}
.width-10p{width: 10% !important;}
.width-15p{width: 15% !important;}
.width-20p{width: 20% !important;}
.width-23p{width: 23% !important;}
.width-25p{width: 25% !important;}
.width-30p{width: 30% !important;}
.width-35p{width: 35% !important;}
.width-40p{width: 40% !important;}
.width-50p{width: 50% !important;}
.width-60p{width: 60% !important;}
.width-65p{width: 65% !important;}
.width-67p{width: 67% !important;}
.width-70p{width: 70% !important;}
.width-80p{width: 80% !important;}
.width-90p{width: 90% !important;}
.width-100p{width: 100% !important;}


.width-content {
  width: fit-content !important;
}

.d-10 {
  width: 10px !important;
  height: 10px !important;
}
.d-15 {
  width: 15px !important;
  height: 15px !important;
}
.d-20 {
  width: 20px !important;
  height: 20px !important;
}
.d-25 {
  width: 25px !important;
  height: 25px !important;
}
.d-30 {
  width: 30px !important;
  height: 30px !important;
}

.d-35 {
  width: 35px !important;
  height: 35px !important;
}

.d-40 {
  width: 40px !important;
  height: 40px !important;
}
.d-50 {
  width: 50px !important;
  height: 50px !important;
}
.d-60 {
  width: 60px !important;
  height: 60px !important;
}
.d-70 {
  width: 70px !important;
  height: 70px !important;
}
.d-80 {
  width: 80px !important;
  height: 80px !important;
}
.d-90 {
  width: 90px !important;
  height: 90px !important;
}
.d-100 {
  width: 100p !important;
  height: 100px !important;
}

/* SPACING */
.padding-5 {
  padding: 5px !important;
}
.padding-7 {
  padding: 7px !important;
}
.padding-10 {
  padding: 10px !important;
}
.padding-15 {
  padding: 15px !important;
}
.padding-18 {
  padding: 18px 18px 0px 18px !important;
}
.padding-20 {
  padding: 20px !important;
}
.padding-30 {
  padding: 30px !important;
}
.padding-40 {
  padding: 40px !important;
}
.padding-50 {
  padding: 50px !important;
}
.padding-60 {
  padding: 60px !important;
}
.padding-70 {
  padding: 70px !important;
}
.padding-80 {
  padding: 80px !important;
}
.padding-90 {
  padding: 90px !important;
}
.padding-100 {
  padding: 100px !important;
}

.padding-t-5 {
  padding-top: 5px !important;
}
.padding-t-10 {
  padding-top: 10px !important;
}
.padding-t-15 {
  padding-top: 15px !important;
}
.padding-t-20 {
  padding-top: 20px !important;
}
.padding-t-30 {
  padding-top: 30px !important;
}
.padding-t-40 {
  padding-top: 40px !important;
}
.padding-t-50 {
  padding-top: 50px !important;
}
.padding-t-60 {
  padding-top: 60px !important;
}
.padding-t-70 {
  padding-top: 70px !important;
}
.padding-t-80 {
  padding-top: 80px !important;
}
.padding-t-90 {
  padding-top: 90px !important;
}
.padding-t-100 {
  padding-top: 100px !important;
}

.padding-b-10 {
  padding-bottom: 10px !important;
}
.padding-b-15 {
  padding-bottom: 15px !important;
}
.padding-b-20 {
  padding-bottom: 20px !important;
}
.padding-b-30 {
  padding-bottom: 30px !important;
}
.padding-b-40 {
  padding-bottom: 40px !important;
}
.padding-b-50 {
  padding-bottom: 50px !important;
}
.padding-b-60 {
  padding-bottom: 60px !important;
}
.padding-b-70 {
  padding-bottom: 70px !important;
}
.padding-b-80 {
  padding-bottom: 80px !important;
}
.padding-b-90 {
  padding-bottom: 90px !important;
}
.padding-b-100 {
  padding-bottom: 100px !important;
}

.padding-l-10 {
  padding-left: 10px !important;
}
.padding-l-20 {
  padding-left: 20px !important;
}
.padding-l-30 {
  padding-left: 30px !important;
}
.padding-l-40 {
  padding-left: 40px !important;
}
.padding-l-50 {
  padding-left: 50px !important;
}
.padding-l-60 {
  padding-left: 60px !important;
}
.padding-l-70 {
  padding-left: 70px !important;
}
.padding-l-80 {
  padding-left: 80px !important;
}
.padding-l-90 {
  padding-left: 90px !important;
}
.padding-l-100 {
  padding-left: 100px !important;
}

.padding-r-10 {
  padding-right: 10px !important;
}
.padding-r-20 {
  padding-right: 20px !important;
}
.padding-r-30 {
  padding-right: 30px !important;
}
.padding-r-40 {
  padding-right: 40px !important;
}
.padding-r-50 {
  padding-right: 50px !important;
}
.padding-r-60 {
  padding-right: 60px !important;
}
.padding-r-70 {
  padding-right: 70px !important;
}
.padding-r-80 {
  padding-right: 80px !important;
}
.padding-r-90 {
  padding-right: 90px !important;
}
.padding-r-100 {
  padding-right: 100px !important;
}

.padding-y-10 {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}
.padding-y-20 {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}
.padding-y-30 {
  padding-top: 30px !important;
  padding-bottom: 30px !important;
}
.padding-y-40 {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}
.padding-y-50 {
  padding-top: 50px !important;
  padding-bottom: 50px !important;
}
.padding-y-60 {
  padding-top: 60px !important;
  padding-bottom: 60px !important;
}
.padding-y-70 {
  padding-top: 70px !important;
  padding-bottom: 70px !important;
}
.padding-y-80 {
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}
.padding-y-90 {
  padding-top: 90px !important;
  padding-bottom: 90px !important;
}
.padding-y-100 {
  padding-top: 100px !important ;
  padding-bottom: 100px !important;
}

.padding-x-10 {
  padding-left: 10px !important;
  padding-right: 10px !important;
}
.padding-x-20 {
  padding-left: 20px !important;
  padding-right: 20px !important;
}
.padding-x-30 {
  padding-left: 30px !important;
  padding-right: 30px !important;
}
.padding-x-40 {
  padding-left: 40px !important;
  padding-right: 40px !important;
}
.padding-x-50 {
  padding-left: 50px !important;
  padding-right: 50px !important;
}
.padding-x-60 {
  padding-left: 60px !important;
  padding-right: 60px !important;
}
.padding-x-70 {
  padding-left: 70px !important;
  padding-right: 70px !important;
}
.padding-x-80 {
  padding-left: 80px !important;
  padding-right: 80px !important;
}
.padding-x-90 {
  padding-left: 90px !important;
  padding-right: 90px !important;
}
.padding-x-100 {
  padding-left: 100px !important  ;
  padding-right: 100px !important;
}

.margin-10 {
  margin: 10px !important;
}
.margin-20 {
  margin: 20px !important;
}
.margin-30 {
  margin: 30px !important;
}
.margin-40 {
  margin: 40px !important;
}
.margin-50 {
  margin: 50px !important;
}
.margin-60 {
  margin: 60px !important;
}
.margin-70 {
  margin: 70px !important;
}
.margin-80 {
  margin: 80px !important;
}
.margin-90 {
  margin: 90px !important;
}
.margin-100 {
  margin: 100px !important;
}

.margin-t-5 {
  margin-top: 5px !important;
}
.margin-t-7 {
  margin-top: 7px !important;
}
.margin-t-10 {
  margin-top: 10px !important;
}
.margin-t-20 {
  margin-top: 20px !important;
}
.margin-t-30 {
  margin-top: 30px !important;
}
.margin-t-40 {
  margin-top: 40px !important;
}
.margin-t-50 {
  margin-top: 50px !important;
}
.margin-t-60 {
  margin-top: 60px !important;
}
.margin-t-70 {
  margin-top: 70px !important;
}
.margin-t-80 {
  margin-top: 80px !important;
}
.margin-t-90 {
  margin-top: 90px !important;
}
.margin-t-100 {
  margin-top: 100px !important;
}

.margin-b-0 {
  margin-bottom: 0px !important;
}

.margin-b-5 {
  margin-bottom: 5px !important;
}
.margin-b-10 {
  margin-bottom: 10px !important;
}
.margin-b-15 {
  margin-bottom: 15px !important;
}
.margin-b-20 {
  margin-bottom: 20px !important;
}
.margin-b-30 {
  margin-bottom: 30px !important;
}
.margin-b-40 {
  margin-bottom: 40px !important;
}
.margin-b-50 {
  margin-bottom: 50px !important;
}
.margin-b-60 {
  margin-bottom: 60px !important;
}
.margin-b-70 {
  margin-bottom: 70px !important;
}
.margin-b-80 {
  margin-bottom: 80px !important;
}
.margin-b-90 {
  margin-bottom: 90px !important;
}
.margin-b-100 {
  margin-bottom: 100px !important;
}

.margin-l-10 {
  margin-left: 10px !important;
}
.margin-l-20 {
  margin-left: 20px !important;
}
.margin-l-30 {
  margin-left: 30px !important;
}
.margin-l-40 {
  margin-left: 40px !important;
}

.margin-l-40min {
  margin-left: -40px !important;
}

.margin-l-min5p {
  margin-left: -4% !important;
}

.margin-l-50 {
  margin-left: 50px !important;
}
.margin-l-60 {
  margin-left: 60px !important;
}
.margin-l-70 {
  margin-left: 70px !important;
}
.margin-l-80 {
  margin-left: 80px !important;
}
.margin-l-90 {
  margin-left: 90px !important;
}
.margin-l-100 {
  margin-left: 100px !important;
}

.margin-r-5 {
  margin-right: 5px !important;
}
.margin-r-7 {
  margin-right: 7px !important;
}
.margin-r-10 {
  margin-right: 10px !important;
}
.margin-r-20 {
  margin-right: 20px !important;
}
.margin-r-30 {
  margin-right: 30px !important;
}
.margin-r-40 {
  margin-right: 40px !important;
}
.margin-r-50 {
  margin-right: 50px !important;
}
.margin-r-60 {
  margin-right: 60px !important;
}
.margin-r-70 {
  margin-right: 70px !important;
}
.margin-r-80 {
  margin-right: 80px !important;
}
.margin-r-90 {
  margin-right: 90px !important;
}
.margin-r-100 {
  margin-right: 100px !important;
}

.margin-y-10 {
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}
.margin-y-20 {
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}
.margin-y-30 {
  margin-top: 30px !important;
  margin-bottom: 30px !important;
}
.margin-y-40 {
  margin-top: 40px !important;
  margin-bottom: 40px !important;
}
.margin-y-50 {
  margin-top: 50px !important;
  margin-bottom: 50px !important;
}
.margin-y-60 {
  margin-top: 60px !important;
  margin-bottom: 60px !important;
}
.margin-y-70 {
  margin-top: 70px !important;
  margin-bottom: 70px !important;
}
.margin-y-80 {
  margin-top: 80px !important;
  margin-bottom: 80px !important;
}
.margin-y-90 {
  margin-top: 90px !important;
  margin-bottom: 90px !important;
}
.margin-y-100 {
  margin-top: 100px !important  ;
  margin-bottom: 100px !important;
}

.margin-x-10 {
  margin-left: 10px !important;
  margin-right: 10px !important;
}
.margin-x-20 {
  margin-left: 20px !important;
  margin-right: 20px !important;
}
.margin-x-30 {
  margin-left: 30px !important;
  margin-right: 30px !important;
}
.margin-x-40 {
  margin-left: 40px !important;
  margin-right: 40px !important;
}
.margin-x-50 {
  margin-left: 50px !important;
  margin-right: 50px !important;
}
.margin-x-60 {
  margin-left: 60px !important;
  margin-right: 60px !important;
}
.margin-x-70 {
  margin-left: 70px !important;
  margin-right: 70px !important;
}
.margin-x-80 {
  margin-left: 80px !important;
  margin-right: 80px !important;
}
.margin-x-90 {
  margin-left: 90px !important;
  margin-right: 90px !important;
}
.margin-x-100 {
  margin-left: 100px !important  ;
  margin-right: 100px !important;
}

/* BORDER RADIUS */
.radius-40 {
  border-radius: 40px;
}
.radius-30 {
  border-radius: 30px;
}
.radius-20 {
  border-radius: 20px;
}
.radius-18 {
  border-radius: 18px;
}
.radius-16 {
  border-radius: 16px;
}
.radius-14 {
  border-radius: 14px;
}
.radius-12 {
  border-radius: 12px;
}
.radius-10 {
  border-radius: 10px;
}
.radius-8 {
  border-radius: 8px;
}
.radius-6 {
  border-radius: 6px;
}
.radius-4 {
  border-radius: 4px;
}

.radius-top-40 {
  border-radius: 40px 40px 0 0;
}
.radius-top-30 {
  border-radius: 30px 30px 0 0;
}
.radius-top-20 {
  border-radius: 20px 20px 0 0;
}
.radius-top-18 {
  border-radius: 18px 18px 0 0;
}
.radius-top-16 {
  border-radius: 16px 16px 0 0;
}
.radius-top-14 {
  border-radius: 14px 14px 0 0;
}
.radius-top-12 {
  border-radius: 12px 12px 0 0;
}
.radius-top-10 {
  border-radius: 10px 10px 0 0;
}

.radius-lr-40 {
  border-radius: 40px 0 40px 0;
}
.radius-lr-30 {
  border-radius: 30px 0 30px 0;
}
.radius-lr-20 {
  border-radius: 20px 0 20px 0;
}
.radius-lr-18 {
  border-radius: 18px 0 18px 0;
}
.radius-lr-16 {
  border-radius: 16px 0 16px 0;
}
.radius-lr-14 {
  border-radius: 14px 0 14px 0;
}
.radius-lr-12 {
  border-radius: 12px 0 12px 0;
}
.radius-lr-10 {
  border-radius: 10px 0 10px 0;
}

.radius-rl-40 {
  border-radius: 0 40px 0 40px;
}
.radius-rl-30 {
  border-radius: 0 30px 0 30px;
}
.radius-rl-20 {
  border-radius: 0 20px 0 20px;
}
.radius-rl-18 {
  border-radius: 0 18px 0 18px;
}
.radius-rl-16 {
  border-radius: 0 16px 0 16px;
}
.radius-rl-14 {
  border-radius: 0 14px 0 14px;
}
.radius-rl-12 {
  border-radius: 0 12px 0 12px;
}
.radius-rl-10 {
  border-radius: 0 10px 0 10px;
}

.radius-circle {
  border-radius: 50%;
}

/* BOX SHADOW */
.shadow-normal {
  box-shadow: 0px 4px 18px rgba(177, 177, 188, 0.25);
}
.shadow-normal-1 {
  box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.12);
}
.shadow-green {
  box-shadow: 0 4px 20px 0 rgba(34, 183, 83, 0.7) !important;
}
.shadow-green-100 {
  box-shadow: 0 4px 20px 0 rgba(34, 183, 83, 0.2) !important;
}

/* LIST */

ul {
  list-style: none;
}

ol
{
  padding: 0 !important;
  margin: 0 !important;
}
.list {
  list-style: none;
  padding-bottom: 10px;
}

.list a {
  display: block;
  text-decoration: none;
}

/* BUTTON */
.button {
  display: block;
  text-decoration: none;
}

a {
  text-decoration: none !important;
}

/* Button to Top */
.boxbtntop {
  display: none;
  position: fixed;
  top: 90%;
  left: 30px;
  margin: 0 auto;
  z-index: 4;
}

.boxbtntop .btntop {
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background-color: rgba(32, 141, 51, 0.5);
  border: 4px var(--secondary-color) solid;
  cursor: pointer;
  font-size: 20px;
  transition: 0.2s;
}
/* Button to Top */

/* Button Float Whatsapp */
.boxbtnwhatsapp {
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  margin-right: 10px;
  background-color: var(--black-100);
  border: 4px var(--secondary-color) solid;
  cursor: pointer;
  font-size: 20px;
  transition: 0.2s;
}
/* Button Float Whatsapp */

/* Button Chat */
.boxbtnchat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 94.5%;
  right: 30px;
  margin: 0 auto;
  z-index: 4;
}

.boxbtnchat .btnchat {
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  height: 50px;
  width: auto;
  padding-left: 20px;
  padding-right: 20px;
  border-radius: 50px;
  background-color: var(--blue);
  border: 4px var(--secondary-color) solid;
  cursor: pointer;
  font-size: 20px;
  transition: 0.2s;
}

.boxbtnchat .btnchat .boxbtnchattext {
  font-size: 16px;
  padding-right: 10px;
  color: var(--white);
}

.boxbtnchat .btnchat .boxbtnchatimg {
  width: 30px;
  height: 30px;
}
/* Button Chat */

/* SIDENAV  */
.sidenav {
  box-shadow: 0 10px 20px 0 rgb(53 64 90 / 20%);
  height: 100%;
  width: 0%;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.4);
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 0px;
  font-size: 14px;
}

.sidenav .sidenav-container {
  border-bottom: 1px var(--grey) solid;
  border-top: none;
  border-right: none;
  border-left: none;
}

.sidenav .border-menu-sidenav {
  padding: 0 20px;
  width: 100%;
  height: 1.8px;
  background-color: #000;
}

.sidenav a {
  padding: 6px 20px 6px 20px;
  text-decoration: none;
  font-size: 20px;
  font-weight: 600;
  color: var(--blue2);
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .sidenav-title {
  font-size: 16px;
  padding: 10px;
  color: var(--black2);
}

.sidenav .btn-sidenav {
  padding: 10px 20px 10px 20px;
  text-decoration: none;
  font-size: 20px;
  font-weight: 500;
  color: var(--grey);
  display: block;
  border: none;
  background-color: transparent;
  outline: none;
  transition: 0.3s;
}

.sidenav .btn-sidenav:hover {
  color: var(--green-200);
  /* border-bottom: 1.7px var(--orange) solid; */
}

.sidenav .btn-cari {
  padding: 10px 20px 10px 20px;
  text-decoration: none;
  font-size: 20px;
  font-weight: 600;
  color: var(--blue2);
  display: block;
  border: none;
  background-color: transparent;
  outline: none;
  border-bottom: 1.7px #d9d9d9 solid;
  border-top: none;
  border-right: none;
  border-left: none;
  width: 100%;
}

/* .sidenav .accordion a {
    padding: 10px 20px 10px 20px;
    text-decoration: none;
    font-size: 14px;
    color: #fff;
    display: block;
    transition: 0.3s;
    border-bottom: 1.7px #fff solid;
}

.sidenav .accordion a:hover {
    color: #f1f1f1;
} */

.sidenav .closebtn {
  position: absolute;
  right: 0;
  font-size: 28px;
  color: var(--white);
  z-index: 1002;
  /* position: absolute;
    top: 0;
    bottom: 0;
    right: 1%;
    margin-left: 50px; */
}

.menu-in {
  background: #006666;
  width: 100%;
  min-height: 100%;
  max-height: fit-content;
}

.menu-in-radio {
  background: #fff;
  width: 250px;
  min-height: 100%;
  max-height: fit-content;
}

.set-menu {
  position: relative;
  display: flex;
  justify-content: space-between;
  background: #006666;
  box-shadow: 0 6px 18px rgba(177, 177, 188, 0.2);
  font-weight: bold;
  border-bottom: 1px solid #fff;
  margin-bottom: 1rem;
  height: 70px;
  padding-top: 10px;
  background-image: url("../images/ilustration/ilustration-pattern-01.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.accordion {
  padding: 0 20px;
}
/* SIDENAV  */

/* NAVBAR */
.navbar {
  position: fixed !important;
  transition: 0.3s !important;
  width: 100%;
  display: block;
  z-index: 100;
}

.nav-block {
  top: 0;
}

.navbar .nav-link.active {
  font-family: "MaisonDemi" !important;
}

/* HEADER */
.header-content {
  padding-top: 60px;
}

/* NAV TABS */
.nav-tabs {
  border: none !important;
}
.nav-tabs .nav-link {
  color: var(--green-200);
  background-color: none !important;
  width: fit-content;
  display: flex;
  align-items: center;
  border: none !important;
  border-radius: none !important;
  padding: 0 !important;
}

.nav-tabs .nav-link .nav-tag {
  /* border: 1px var(--grey-200) solid; */
  background-color: var(--green-200);
  margin-right: 10px;
  transition: 0.3s;
}

.nav-tabs .nav-link .nav-tag p {
  transition: 0.3s;
}

.nav-tabs .nav-link .nav-tag p {
  color: var(--white);
}

.nav-tabs .nav-link div p {
  transition: 0.3s;
}

.nav-tabs .nav-link:hover div p {
  color: var(--green-200);
}

.nav-tabs .nav-link:hover .nav-tag {
  background-color: var(--green-200);
  border: 1px var(--green-200) solid;
}

.nav-tabs .nav-link:hover .nav-tag p {
  color: var(--white);
}

.tab-card {
  border-radius: 10px;
}

.tab-card-heading {
  border-radius: 10px 10px 0 0;
}

.tab-card-body {
  border-radius: 0 0 10px 10px;
}

.tab-card form .form-control,
.form-select {
  border: none !important;
  padding: 20px 10px !important;
  font-size: 14px !important;
  box-shadow: 0px 4px 18px rgba(177, 177, 188, 0.25) !important;
  border-radius: 8px !important;
  color: var(--grey-200) !important;
}

.tab-card form .btn {
  padding: 10px !important;
}

.form-card-02 {
  border-radius: 10px !important;
  background-color: transparent;
}

/* SECTION BAGAIMANA CARA KERJANYA */
.cara-kerja-content-xl {
  display: none !important;
}
.cara-kerja-content-sm-md {
  display: block !important;
}
.cara-kerja-line {
  display: none;
}

/* FORM */
.form-card-01 {
  width: 100% !important;
  height: fit-content;
  background-color: var(--white);
  padding: 40px !important;
  border-radius: 20px;
  box-shadow: 0px 4px 18px rgba(177, 177, 188, 0.25);
}

.form-card-02 {
  width: 100% !important;
  border-radius: 20px !important;
}

/* FOOTER */
.footer-sm {
  display: block;
}
.footer-md {
  display: none;
}
.footer-xl {
  display: none;
}

.rekan-usaha-card {
  padding-right: calc(var(--bs-gutter-x) * 0.2) !important;
  padding-left: calc(var(--bs-gutter-x) * 0.2) !important;
}

/* =======TAMBAHAN BARU=========*/

.sidebar-menu {
  background-color: #006666;
  position: fixed;
  top: 0;
  z-index: 9;
  height: 100%;
  line-height: inherit;
  background: #006666;
  width: 265px;
  text-align: left;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  -webkit-box-shadow: 0 0 21px 0 rgba(89, 102, 122, 0.1);
  box-shadow: 0 0 21px 0 rgba(89, 102, 122, 0.1);
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}

.header {
  height: 80vh !important;
}

.absolute-cerita-populer-1 {
  padding: 20px;
  position: relative;
  width: 100%;
  margin-top: -35%;
}

.img-cover {
  object-fit: cover !important;
}

.img-berita-utama {
  height: 350px;
  width: 100%;
  object-fit: cover;
}

.img-kisah {
  height: 585px !important;
  width: 100%;
  object-fit: cover;
}

.img-tips {
  height: 325px !important;
  object-fit: cover;
}

.img-sub-populer {
  height: 180px !important;
  object-fit: cover;
}

.img-cerita-lain {
  height: 105px !important;
  object-fit: cover;
}

.line-tittle {
  padding-left: 10px;
  /* border-radius: 10px; */
  border-left: 10px solid #33c060;
}

.tag-cerita {
  font-size: 12px;
  position: absolute;
  background: #ffaf25;
  padding: 5px 15px;
  font-weight: 600;
  color: #fff;
  border-radius: 8px 0px 8px 0px;
}

.tag-fb {
  background: #2a67c6;
  width: 100%;
  padding: 5px 10px;
  border-radius: 5px;
  height: 50px;
}

.tag-ig {
  background: #f872a4;
  width: 100%;
  padding: 5px 10px;
  border-radius: 5px;
  height: 50px;
}

.tag-yt {
  background: #f1383e;
  width: 100%;
  padding: 5px 10px;
  border-radius: 5px;
  height: 50px;
}

.tag-tiktok {
  background: #000;
  width: 100%;
  padding: 5px 10px;
  border-radius: 5px;
  height: 50px;
}

.tag-green-01 {
  border: 1px solid #33c060 !important;
  background: #33c060 !important;
  color: #fff !important;
}

.tag-lainnya {
  border: 1px solid #b1b1bc !important;
  color: #696b6b !important;
  border-radius: 0px !important;
}

.tag-kategori {
  padding: 5px 10px;
  border-radius: 5px;
  background-repeat: no-repeat;
  width: 100% !important;
  height: 60px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  cursor: pointer;
}

.position-play-01 {
  position: absolute;
  margin-top: -8%;
  margin-left: 1%;
}

.position-play-02 {
  position: absolute;
  margin-top: -1.4%;
}

.border-grey {
  border: 1px solid #d9d9d9;
}

.border-green-1 {
  border: 1px solid #33c060;
}

.bg-circle-medsos {
  padding: 1px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50px;
}

.card-caption-video {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("../images/ilustration/img-video-01.png");
  height: 70% !important;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  width: 100%;
}

.text-video {
  width: 100%;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

.absolute-header-1 {
  position: absolute;
  width: 85%;
  bottom: 34%;
}

frame > .ytp-title-link {
  display: none !important;
}

.cursor {
  cursor: pointer;
}

.img-detail-artikel {
  width: 100%;
  height: 15% !important;
  object-fit: cover;
}

.height-video {
  height: 30vh !important;
}

/* ============= SETTING PARTICLE CSS  ======================*/

/* body {
        margin: 0;
        font: normal 75% Arial, Helvetica, sans-serif;
        background-color: #000 !important;
        } */

body {
  height: 100%;
  font-family: Arial, sans-serif;
  background-color: #f5f5f5 !important;
}

canvas {
  display: block;
  vertical-align: bottom;
}

/* ---- particles.js container ---- */

#particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
  /* background-color: #b61924; */

  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}

/* ---- stats.js ---- */

.count-particles {
  background: #000022;
  position: absolute;
  top: 48px;
  left: 0;
  width: 80px;
  color: #13e8e9;
  font-size: 0.8em;
  text-align: left;
  text-indent: 1px;
  line-height: 14px;
  padding-bottom: 2px;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
}

.js-count-particles {
  font-size: 1.1em;
}

#stats,
.count-particles {
  -webkit-user-select: none;
}

#stats {
  border-radius: 3px 3px 0 0;
  overflow: hidden;
}

.count-particles {
  border-radius: 0 0 1px 1px;
}

.ditengah {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 90%;
  transform: translate(-50%, -50%);
}

.bold {
  font-weight: bold;
}

.set-img-logo {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
}

.btn-submit {
  font-weight: 500;
  background: #00a5a5;
  border: 1px solid #00a5a5;
  font-size: 16px;
  width: 35%;
  border-radius: 5px;
  padding: 8px 8px 6px 8px;
  cursor: pointer;
  color: #fff;
  transition: 0.6s;
}

.btn-submit-01 {
  font-weight: 500;
  background: #006666;
  border: 1px solid #006666;
  font-size: 16px;
  width: 40%;
  border-radius: 5px;
  padding: 6px 6px 5px 6px;
  cursor: pointer;
  color: #fff;
  transition: 0.6s;
}

.btn-submit-02 {
    font-weight: 500;
    background: #006666;
    border: 1px solid #006666;
    font-size: 16px;
    width: 25%;
    border-radius: 5px;
    padding: 6px;
    cursor: pointer;
    COLOR: #fff;
    transition: 0.6s;
}



/* ANIME TEXT  */
.ml2 {
  font-weight: 900;
  font-size: 2.9em;
}

.btn-logout {
  background: transparent;
  border: 1px solid #006666;
  border-radius: 20px;
  padding: 5px;
  width: 100%;
}

.dropdown-toggle::after {
  display: none !important;
}

.btn-logout-mobile {
  background: transparent;
  border: 1px solid #dbdbdb;
  border-radius: 20px;
  padding: 5px;
  width: 40%;
  color: #fff;
  font-size: 16px;
}

/* =========SLIDESHOW============ */

.slideshowContainer {
  position: relative;
  overflow: hidden;
  /* margin: 50px 0 75px; */
  width: 100%;
  height: 70vh;
  border-radius: 10px;
}

.imageSlides {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  z-index: -1;
}

/* add 'visible' class via Javascript */
.visible {
  opacity: 1;
}

.slideshowArrow {
  font-size: 7em;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: opacity 0.2s ease-in-out;
}

.slideshowArrow:hover {
  opacity: 0.75;
}

#leftArrow {
  position: absolute;
  left: 4%;
  top: 50%;
  transform: translate(-50%, -50%);
}

#rightArrow {
  position: absolute;
  right: 4%;
  top: 50%;
  transform: translate(50%, -50%);
}

.slideshowCircles {
  position: absolute;
  bottom: 2%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.circle {
  display: inline-block;
  margin-left: 3px;
  margin-right: 3px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: solid 2px rgba(255, 255, 255, 0.5);
  transition: 1s ease-in-out;
}

.dot {
  background-color: rgba(255, 255, 255, 0.7);
  border: solid 2px rgba(255, 255, 255, 0.5);
}

.img-maps-portal {
  height: 400px;
  width: 100%;
  object-fit: cover;
}

.set-bg-login {
  position: absolute;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}

.w40p {
    width:40% !important;
}

.side-menu-01 {
    background: #fff;
    padding: 5px;
    border-radius: 50px;
}


.hover-menu {
    background: transparent;
    transition: 0.6s;
    padding: 10px;
    border-radius: 5px;
}

.active {
    background: rgba(255, 255, 255, 0.3);
}


.hover-menu:hover {
    background: rgba(255, 255, 255, 0.3);
    padding: 10px;
    border-radius: 5px;
}

/*HIJAU biru */
.btn-00 {
  font-weight: 500;
  background: #006666;
  border: 1px solid #006666;
  font-size: 16px;
  width: auto;
  border-radius: 5px;
  padding: 8px 8px 6px 8px;
  cursor: pointer;
  color: #fff;
}

/*HIJAU TUA */
.btn-01 {
  font-weight: 500;
  background: #00a5a5;
  border: 1px solid #00a5a5;
  font-size: 16px;
  width: auto;
  border-radius: 5px;
  padding: 8px 8px 6px 8px;
  cursor: pointer;
  color: #fff;
}

/*HIJAU MUDA */
.btn-02 {
  font-weight: 500;
  background: #00AC46;
  border: 1px solid #00AC46;
  font-size: 16px;
  width: auto;
  border-radius: 5px;
  padding: 8px 8px 6px 8px;
  cursor: pointer;
  color: #fff;
}

/*OREN */
.btn-03 {
  font-weight: 500;
  background: #fe6a49;
  border: 1px solid #fe6a49;
  font-size: 16px;
  width: auto;
  border-radius: 5px;
  padding: 8px 8px 6px 8px;
  cursor: pointer;
  color: #fff;
}

/*BIRU TUA */
.btn-04 {
  font-weight: 500;
  background: #173878;
  border: 1px solid #173878;
  font-size: 16px;
  width: auto;
  border-radius: 5px;
  padding: 8px 8px 6px 8px;
  cursor: pointer;
  color: #fff;
}

/*KUNING */
.btn-05 {
  font-weight: 500;
  background: #FFAE1A;
  border: 1px solid #FFAE1A;
  font-size: 16px;
  width: auto;
  border-radius: 5px;
  padding: 8px 8px 6px 8px;
  cursor: pointer;
  color: #fff;
}

.btn-back-peta {
    font-weight: 500;
    background: #fe6a49;
    border: 1px solid #fe6a49;
    font-size: 16px;
    width: auto;
    border-radius: 5px;
    padding: 6px 6px 8px 6px;
    cursor: pointer;
    color: #fff;
    width: 100%;
}

.page-link.active, .active > .page-link {
    background-color: #006666 !important;
    border-color: #006666 !important;
}


.form-check-input:checked {
    background-color: #006666 !important;
    border-color: #006666 !important;
}


/* SETTING MAPS LEAFLET */

.leaflet-popup-content-wrapper, .leaflet-popup-tip {
    background: #008d8d !important;
    color: #fff !important;
}

.leaflet-container a.leaflet-popup-close-button {
    color: #ffffff !important;
}

.leaflet-popup-content > b {
  font-size: 18px !important;
  border-bottom: 1px solid #fff !important;
}

.leaflet-popup {
min-width: 300px !important;
}

.popup-form > h5 {
  font-size: 20px !important;
  border-bottom: 1px solid #fff !important;
}


.height-card-kategori {
  max-height: 545px;
  overflow-y: scroll;
}

.title-kategori {
    border-bottom: 1px solid #006666;
    padding-bottom: 3px;
    font-weight: 600;
}

.title-kategori-01 {
  border-bottom: 1px solid #FFAE1A;
  padding-bottom: 3px;
  font-weight: 600;
}

.title-kategori-02 {
  border-bottom: 1px solid #FE6A49;
  padding-bottom: 3px;
  font-weight: 600;
}

.setting-kategori {
    position: absolute;
    z-index: 500;
    top: 12%;
    background: #fff;
    border-radius: 7px;
    padding: 7px;
    right: 0.7%;
    border: 1px solid #919191;
    box-shadow: 0px 4px 18px rgba(177, 177, 188, 0.25);

}


/* MENU KATEGORI POTENSIAL  */
/* right_menu_kategori_desktop  */
.right_menu_kategori_desktop {
  border: 1px solid #ccc;
  width: 18% !important;
  /*width: 90% !important;*/
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  background-color: #fff;
  overflow-x: hidden;
  padding-top: 0px;
  font-size: 14px;
  transition: margin-left .3s;
}

.right_menu_kategori_desktop .sidenav-container {
  border-bottom: 1px var(--grey) solid;
  border-top: none;
  border-right: none;
  border-left: none;
}

.right_menu_kategori_desktop .border-menu-sidenav {
  padding: 0 20px;
  width: 30%;
  height: 1.8px;
  background-color: #000;
}

.right_menu_kategori_desktop a {
  padding: 6px 20px 6px 20px;
  text-decoration: none;
  font-size: 20px;
  font-weight: 600;
  color: var(--blue2);
  display: block;
  transition: margin-left 0.6s;
}

.right_menu_kategori_desktop a:hover {
  color: #f1f1f1;
}

.right_menu_kategori_desktop .sidenav-title {
  font-size: 16px;
  padding: 10px;
  color: var(--black2);
}

.right_menu_kategori_desktop .btn-sidenav {
  padding: 10px 20px 10px 20px;
  text-decoration: none;
  font-size: 20px;
  font-weight: 500;
  color: var(--grey);
  display: block;
  border: none;
  background-color: transparent;
  outline: none;
  transition: margin-left 0.6s;
}

.right_menu_kategori_desktop .btn-sidenav:hover {
  color: var(--green-200);
  /* border-bottom: 1.7px var(--orange) solid; */
}

.right_menu_kategori_desktop .btn-cari {
  padding: 10px 20px 10px 20px;
  text-decoration: none;
  font-size: 20px;
  font-weight: 600;
  color: var(--blue2);
  display: block;
  border: none;
  background-color: transparent;
  outline: none;
  border-bottom: 1.7px #d9d9d9 solid;
  border-top: none;
  border-right: none;
  border-left: none;
  width: 30%;
}

.right_menu_kategori_desktop .closebtn {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 28px;
  color: var(--white);
  z-index: 1002;
}

/*.row > * { */
/*padding-left: 0 !important;*/
/*padding-right: 0 !important;*/
/*}*/

.leaflet-top, .leaflet-bottom {
    position: absolute !important;
    z-index: 600 !important;
}


/* ============ TAMBAHAN CSS BARU =============*/

.card-message {
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom:20px;
    max-height: 500px;
    overflow-y: scroll;
}

.alert1 {
    position: absolute;
    top: 2%;
    right: 8%;
    background: red;
    color: #fff;
    padding: 3px 5px;
    font-size: 12px;
    border-radius: 50%;
}