.m-material-types {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 110px;
  width: 100%;
}

.m-material-types .menu-level-satu {
  width: 100%;
  border-radius: 4px;
  border: 1px solid #ffffff;
}

.mdn-accordion,
.mdn-accordion * {
  padding: 0;
  margin: 0;
}

.mdn-accordion {
  width: 100%;
  padding: 0px 30px;
  font-family: 'ClashGrotesk-Semibold', sans-serif;
  font-weight: 400;
}

.mdn-accordion,
.mdn-accordion ul,
.mdn-accordion ul li {
  list-style: none;
}

.mdn-accordion ul {
  display: none;
}


/* @checkbox or radio
----------------------------------------------------- */
.mdn-accordion .accordion-toggle {
  position: absolute;
  opacity: 0;
}

/* @first level panels
----------------------------------------------------- */
.mdn-accordion a,
.mdn-accordion .accordion-title {
  color: white;
  display: block;
  background: var(--primary-color);
  position: relative;
  text-decoration: none;
  font-size: 16px;
  padding: 18px;
}

.mdn-accordion .menu-level-dua a,
.mdn-accordion .menu-level-dua .accordion-title {
  color: var(--gray-color);
  background: var(--fur-text-color);
}

.mdn-accordion .accordion-title {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* @first level panel :hover
----------------------------------------------------- */
.mdn-accordion .menu-level-satu a:hover,
.mdn-accordion .menu-level-satu .accordion-title:hover {
  background: var(--primary-color);
  color: var(--gray-color);
}

.mdn-accordion .menu-level-dua a:hover,
.mdn-accordion .menu-level-dua .accordion-title:hover {
  background: var(--category-color);
  color: var(--primary-color);
}

.mdn-accordion .menu-level-dua ul a:hover,
.mdn-accordion .menu-level-dua ul .accordion-title:hover {
  background: var(--fur-text-color);
  color: var(--primary-color);
}

/* @all levels :active panels
----------------------------------------------------- */
.mdn-accordion .accordion-toggle:checked + .accordion-title {
  background: var(--primary-color);
  color: var(--gray-color);
}

.mdn-accordion ul .accordion-toggle:checked + .accordion-title {
  background: var(--category-color);
  color: var(--primary-color);
}

.mdn-accordion  ul ul .accordion-toggle:checked + .accordion-title {
  background: var(--header-menu-color);
  color: var(--header-menu-color);
}

/* @panels with long text
----------------------------------------------------- */
.mdn-accordion a,
.mdn-accordion .accordion-title {
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* @show panel content
----------------------------------------------------- */
.mdn-accordion .accordion-toggle:checked + .accordion-title + ul,
.mdn-accordion .accordion-toggle:checked + .accordion-title:nth-of-type(n) + ul {
  display: block;
}

.mdn-accordion li a i,
.mdn-accordion .accordion-title i {
  font-size: 1.1em;
  margin-right: 5px;
}


/* @second level +
----------------------------------------------------- */
.mdn-accordion .menu-level-satu .menu-level-dua ul a,
.mdn-accordion .menu-level-satu .menu-level-dua ul .accordion-title {
  background: var(--category-color);
  color: var(--gray-color);
}

.mdn-accordion .menu-level-satu .menu-level-dua ul ul a,
.mdn-accordion .menu-level-satu .menu-level-dua ul ul .accordion-title {
  /*padding-left: 80px;*/
}

.mdn-accordion .menu-level-satu .menu-level-dua ul ul ul a,
.mdn-accordion .menu-level-satu .menu-level-dua ul ul ul .accordion-title {
  /*padding-left: 110px;*/
}

/* @second level + :hover
----------------------------------------------------- */
.mdn-accordion .menu-level-satu .menu-level-dua ul a:hover,
.mdn-accordion .menu-level-satu .menu-level-dua ul .accordion-title:hover {
  background: #FDFDFD;
}


/* @accordion arrow
------------------------------------------------------- */
.mdn-accordion .accordion-title::before {
  width: 20px;
  height: 20px;
  font-size: 1.2em;
  content: "\f105";
  position: absolute;
  display: inline-block;
  font-family: FontAwesome;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: -webkit-transform 0.4s;
  -moz-transition: -moz-transform 0.4s;
  transition: transform 0.4s;
  right: 10px;
  top: 45%;
}

.mdn-accordion .accordion-toggle:checked + .accordion-title::before {
  top: 40%;
  right: 10px;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

/* @accordion support styles
------------------------------------------------------- */
.mdn-accordion .mdn-container {
  padding: 30px;
}

.mdn-accordion .mdn-container {
  border-bottom: 1px solid #ffffff;
}

.mdn-accordion .mdn-container h1 {
  font-family: "Merriweather", Arial, Helvetica, sans-serif;
  margin-bottom: 10px;
  font-weight: 300;
  font-size: 32px;
  color: #0099FF;
}

.mdn-accordion .mdn-container {
  color: #788B94;
}

.mdn-accordion .mdn-container p {
  line-height: 22px;
  margin-top: 22px;
  font-size: 14px;
  font-weight: 300;
}

.mdn-accordion .mdn-tagline {
  display: block;
  font-family: 'ClashGrotesk-Semibold', sans-serif;
  font-weight: 700;
}

.mdn-accordion .mdn-container ul {
  display: block;
  padding: 10px 0;
  list-style-type: disc;
  margin-left: 1.2em;
}

.mdn-accordion .mdn-container ul li {
  padding: 4px 0;
  display: list-item;
  list-style-type: disc;
  font-size: 14px;
  font-weight: 300;
}

.mdn-accordion .mdn-container h3 {
  color: #0099FF;
  font-size: 24px;
  font-weight: 300;
}

.single-level-accordion .mdn-container p {
  margin: 0 0 22px 0;
}

.mdn-accordion .mdn-container a {
  padding: 0;
  margin: 0;
  background: none;
  display: inline;
  font-size: inherit;
  font-weight: normal;
  background: none;
  color: #0099FF;
}

.mdn-accordion .mdn-container a:hover {
  background: none;
  text-decoration: underline;
}



/* Accordion panel themes
-------------------------------------------------- */

.menu-level-satu a:hover {
  color: var(--primary-color) !important;
}

.menu-level-dua {
  border-bottom: 1px solid var(--shop-color);
}

.menu-level-dua a {
  background: var(--header-menu-color) !important;
  color: var(--fur-text-color) !important;
  border-bottom: 1px solid var(--shop-color);
}

.menu-level-dua a:hover {
  background: white !important;
  color: var(--primary-color) !important;
}


/* @body background style
----------------------------------------------- */
.custom-bg {
  background: #EAF0F2 /*#F3F5F6#EDF1F2*/;
}

/* @responsive styles
----------------------------------------------- */
@media only screen and (min-width: 300px) {
  .mdn-accordion a,
  .mdn-accordion .accordion-title {
    padding: 10px 15px;
    font-size: 15px;
  }
}

@media (max-width: 992px) {
  .mdn-accordion {
    padding: 60px 30px;
  }
}

@media (max-width: 767px) {
  .mdn-accordion {
    padding: 38px 30px;
  }
}

@media (max-width: 709px) {
  .mdn-accordion {
    padding: 60px 30px;
  }
}

@media (max-width: 617px) {
  .mdn-accordion {
    padding: 80px 10px;
  }
}