.ul__list--inline {
  list-style: none;
  padding: 0;
  margin: 0;
}
.ul__list--inline > li {
  display: inline-block;
}

.ul__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sosmed__list li a {
  width: 40px;
  height: 40px;
  transition: .5s;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  font-size: 20px;
  color: black;

}
.sosmed__list li a:hover {
  color: white;
  background-color: black;
  box-shadow: 0px 10px 40px #3e3c3c7a;
}
.sosmed__list li a i {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.sidebar__navbar {
    height: 100%;
    position: fixed;
    background: linear-gradient(339deg, rgba(36, 11, 95, 1) 35%, rgba(140, 0, 63, 1) 100%);
    width: 0;
    left: -100%;
    z-index: 999;
    transition: .5s ease;
    overflow-y: auto;
}
.sidebar__navbar.active + .sidebar__content .container {
  max-width:98%;
  width: 100%;
}
@media screen and (max-width: 768px) {
  .sidebar__navbar div {
    z-index: 99;
  }
}
@media screen and (max-width: 768px) {
  .sidebar__navbar span {
    position: fixed;
    left: -100%;
    transition: .5s ease;
  }
}
.sidebar__navbar.active {
  width: 250px !important;
  left: 0;

}
@media screen and (max-width: 768px) {
  .sidebar__navbar.active span {
    content: "";
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 40;
    background-color: #0808081f;
  }
}
.sidebar__content {
  transition: .5s ease;
}

.sidebar__list--menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sidebar__list--menu li {
  margin-bottom: 10px;

}
.sidebar__list--menu li i {margin-right: 10px;}
    .sidebar__list--menu li a {
        padding: 6px 10px;
        color: white;
        display: inline-block;
        width: 100%;
        border: 1px solid #dfe3e74d;
        border-radius: 30px;
        position: relative;
    }
        .sidebar__list--menu li a.active {
            background-color: rgb(74 7 83)
        }
        .sidebar__list--menu li a:hover {
            color: white;
            background-color: #240b5f;
        }


.sidebar__list--menu li li a {
  background: #452f77;
}
.sidebar__list--menu li li li a {
  background: #2e195c;
  border-color: #2e195c;
}


.sidebar__navbar.active ~ .sidebar__content {
  margin-left: 250px;
  transition: .5s ease;
}
@media screen and (max-width: 768px) {
  .sidebar__navbar.active ~ .sidebar__content {
    margin-left: 0;
  }
}

.navabar__menu {
  width: 40px;
  height: 40px;
  color: white;
  background-color:#240b5f;
  font-size: 18px;
  border-radius: 5px;
}
.navabar__menu i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.navabar__menu:hover, .navabar__menu:focus {
  color: white;
}

.brand__sidebar {
  color: white;
}
.nav-link[data-toggle].collapsed::after {
  content: " ▾";
  right: 10px;
  position: absolute;
  font-size: 19px;
  top: 2px;
}
.nav-link[data-toggle]:not(.collapsed)::after {
  content: " ▴";
  right: 10px;
  position: absolute;
  font-size: 19px;
  top: 2px;
}