/*profile  menu*/
#profile_menu {
  border: solid 0px;
  background: #006ab4;
  padding: 5px;
  float: right;
  color: #fff;
  border-radius: 0 0 10px 10px;
  box-shadow: 1px 1px 5px #ccc;
  margin-right: 10px;
}
#profile_menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#profile_menu li {
  float: left;
}

#profile_menu li a {
  display: block;
  color: #f1f1f1;
  text-align: center;
  padding: 2px 10px;
  text-decoration: none;
  border-radius: 10px;
}

#profile_menu li a:hover:not(.active) {
  background-color: #ddd;
  color: #666;
}

#profile_menu li a.active {
  color: #555;
  background-color: gold;
  font-weight: bold;
}
#profile_menu li a.active:hover {
  color: gold;
  background: none;
}

#menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  /*   border: 1px solid #e7e7e7; */
/*   background-color: #f3f3f3; */
/*   background-image: linear-gradient(#f9f9f9d9, #f3f3f3); */
  z-index: 99999;
  font-size: 16px;
/*   border:solid 1px; */
  padding:5px 0;
}

#menu ul:after {
  content: "";
  display: block;
  clear: both;
}

#menu ul li ul {
  background:#f9f9f9;
}
#menu li {
  float: left;
/*   border-right: 1px solid #e7e7e7; */
}

#menu li > a:after {
  content: url("../gambar/arrow_down.png");
  position: relative;
  top: 3px;
  left: 5px;
  opacity: 0.5;
}
#menu li:hover > a:after {
  content: url("../gambar/arrow_right.png");
}
#menu ul li:hover,
#menu li > a:hover {
  background: #ddd;
}

#menu > li > a:after {
  content: " +";
}

#menu li > a:only-child:after {
  content: "";
}

#menu li a {
  display: block;
  color: #666;
  text-align: center;
  padding: 10px 30px;
  text-decoration: none;
}
#menu li a:hover:not(.active) {
  background-color: #ddd;
}

#menu li a.active {
  color: white;
  background-color: #4caf50;
}
#menu li .xdropdown li a {
  text-align: left;
  margin: 0;
  padding: 10px 20px;
  float: left;
  width: 250px;
  border-bottom: 1px solid #e7e7e7;
}
#menu li .xdropdown li a:hover {
  border-bottom: solid 1px #ccc;
}
.xdropdown {
  display: none;
  position: absolute;
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 250px;
  background: none;
  z-index: 200;
}
#menu ul li:hover .xdropdown {
  display: block;
  list-style-type: none;
  margin: 0;
}

.arrowlist .arrow_menu {
  background: #006ab4;
/*   background: linear-gradient(#006ab4, #1c92e5); /* Safari 5.1 to 6.0 */ */
  color: #fff;
  /*background:#3c4854; */
  text-transform: uppercase;
  padding: 10px; /*header text is indented 10px*/
  cursor: hand;
  cursor: pointer;
  /*border:solid 1px #333;	*/
  border-bottom: solid 1px #006ab4;
  font-weight: bold;
  transition: 0.5s all;
  -webkit-transition: 0.5s all;
  -o-transition: 0.5s all;
  -moz-transition: 0.5s all;
  -ms-transition: 0.5s all;
  text-decoration: none;
  color:#fff;
  padding:15px;
}
.arrow_menu:hover {
  background: #006ab4;
  /*background:#006ab4; */
  color: white;
  /*border-bottom:solid 1px #084fa0; */
}
.menu_arrow_dtl {
  padding: 10px;
  background: #fefefe;
}
.menu_arrow_dtl ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.menu_arrow_ul {
  background-color: #bfd500;
  background: -webkit-linear-gradient(#d0e803, #bfd500); /* Safari 5.1 to 6.0 */
  background: -moz-linear-gradient(#d0e803, #bfd500); /* Safari 5.1 to 6.0 */
  background: linear-gradient(#d0e803, #bfd500); /* Safari 5.1 to 6.0 */
  width: 100%;
  overflow: auto;
}
.menu_arrow_li {
  background-color: #bfd500;
  background: -webkit-linear-gradient(#d0e803, #bfd500); /* Safari 5.1 to 6.0 */
  background: -moz-linear-gradient(#d0e803, #bfd500); /* Safari 5.1 to 6.0 */
  background: linear-gradient(#d0e803, #bfd500); /* Safari 5.1 to 6.0 */
  text-align: center;
}
.menu_arrow_li a {
  font-size: 14px;
  float: left;
  width: 29%;
  padding: 5px;
  color: #355000;
}
.menu_arrow_li a:hover {
  background: #3c4854;
  color: #eee;
  border: none;
}
.menu_arrow_li a:focus {
  background: #3c4854;
  color: #eee;
  border: none;
}
.menu_arrow_content ul li {
  padding: 5px;
  transition: 0.5s all;
  -webkit-transition: 0.5s all;
  -o-transition: 0.5s all;
  -moz-transition: 0.5s all;
  -ms-transition: 0.5s all;
  text-decoration: none;
}
.menu_arrow_content ul li:hover {
  padding-left: 15px;
  background: #ccc;
}
.menu_arrow_content ul a li {
  color: #000;
  font-weight:normal !important;
  font-size:14px;
}
.menu_arrow_content ul a li:hover {
  color: #006ab4;
}
/******************************
/*nav color */
.arrowlistmenu .menubottom {
  background: #3c4854;
}
.arrowlistmenu .menucenter {
  background: #3c4854;
}
.arrowlistmenu .menuheader {
  background: #3c4854;
}
.arrowlistmenu .openheader {
  background: #006ab4;
}
/*nav color */

/*tree menu css ->start here*/
.arrowlistmenu {
  width: 100%; /*width of accordion menu*/
  margin: 0px;
}
.arrowlistmenu a {
  text-decoration: none;
  color: black;
}
.arrowlistmenu .openheader a {
  text-decoration: none;
  color: white;
}

.arrowlistmenu .menuheader {
  /*CSS class for menu headers in general (expanding or not!)*/
  font: 11px "Open Sans", verdana;
  color: #001b73;
  /*background:#3c4854; */
  text-transform: uppercase;
  padding: 12px 0 10px 10px; /*header text is indented 10px*/
  cursor: hand;
  cursor: pointer;
  /*border-bottom:solid 1px #232323 inset; */
}

.arrowlistmenu .menucenter {
  /*CSS class for menu headers in general (expanding or not!)*/
  font: 11px "Open Sans", verdana;
  color: #a7a6ab;
  /*background:#3c4854; */
  text-transform: uppercase;
  padding: 12px 0 10px 10px; /*header text is indented 10px*/
  cursor: hand;
  cursor: pointer;
  border-bottom: solid 1px #333;
}

.arrowlistmenu .menubottom {
  /*CSS class for menu headers in general (expanding or not!)*/
  font: 11px "Open Sans", verdana;
  color: #001b73;
  /*background:#3c4854; */
  text-transform: uppercase;
  padding: 12px 0 10px 10px; /*header text is indented 10px*/
  cursor: hand;
  cursor: pointer;
}
.arrowlistmenu .openheader {
  color: white;
  /*background:#006ab4; */
  border-bottom: solid 1px #084fa0;
}
.menucenter {
  transition: 0.5s all;
  -webkit-transition: 0.5s all;
  -o-transition: 0.5s all;
  -moz-transition: 0.5s all;
  -ms-transition: 0.5s all;
  text-decoration: none;
}
.menucenter:hover {
  /*background:#006ab4; */
  color: white;
  /*border-bottom:solid 1px #084fa0; */
  padding-left: 30px;
  background: #006ab4;
}
/*menu yang kebuka start*/
.arrowlistmenu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background: #eeeeee;
}
.arrowlistmenu ul li {
  font-family: tahoma;
  font-size: 12px;
}
.arrowlistmenu ul li a {
  display: block;
  padding: 6px 0;
  padding-left: 19px; /*link text is indented 19px*/
  text-decoration: none;
  font-family: arial;
  border-bottom: solid 1px #ccc;
  color: black;
}

.arrowlistmenu ul li a:visited {
  color: black;
}

.arrowlistmenu ul li a:hover {
  color: #001b73;
  padding-left: 35px;
  background: #ddd;
  /*background: linear-gradient( #d4dfe4,#999); */
}

/*menu yang kebuka end*/
.menu ul li a:hover {
  color: #999;
  padding-left: 25px;
}
#accordion h3 {
  color: #888;
}
#accordion h3:hover {
  border: solid 1px blue;
  box-shadow: 0 0 3px blue;
}

/************************************************************************************************/
/*css mobile */
@media (max-width: 480px) {
  #menu ul {
    width: 250px;
  }
  #menu li {
    width: 250px;
  }
  #menu li a {
    text-align: left;
  }
  #menu li .xdropdown li a {
    padding-left: 30px;
    background: #006ab4;
    color: #fff;
  }
  #menu li .xdropdown li a:hover {
    color: #555;
  }
  .xdropdown {
    position: relative;
  }
  #menu ul li:hover .xdropdown {
    display: none;
  }
}
@media (min-width: 481px) and (max-width: 640px) {
  #menu ul {
    width: 250px;
  }
  #menu li {
    width: 250px;
  }
  #menu li a {
    text-align: left;
  }
  #menu li .xdropdown li a {
    padding-left: 30px;
    background: #006ab4;
    color: #fff;
  }
  #menu li .xdropdown li a:hover {
    color: #555;
  }
  .xdropdown {
    position: relative;
  }
  #menu ul li:hover .xdropdown {
    display: none;
  }
}
@media (min-width: 641px) and (max-width: 1000px) {
  #menu ul {
    width: 250px;
  }
  #menu li {
    width: 250px;
  }
  #menu li a {
    text-align: left;
  }
  #menu li .xdropdown li a {
    padding-left: 30px;
    background: #006ab4;
    color: #fff;
  }
  #menu li .xdropdown li a:hover {
    color: #555;
  }
  .xdropdown {
    position: relative;
  }
  #menu ul li:hover .xdropdown {
    display: none;
  }
}
@media (min-width: 1001px) and (max-width: 1024px) {
}
@media (min-width: 1025px) and (max-width: 1152px) {
}
@media (min-width: 1153px) and (max-width: 1280px) {
}
@media (min-width: 1281px) and (max-width: 1360px) {
}
@media (min-width: 1366px) {
}