.treeview.w-20 {
  width: 20rem; }

.treeview .rotate {
  margin-top: .2rem;
  font-size: .8rem;
  vertical-align: text-top;
  cursor: pointer;
  user-select: none;
  transition: all .1s linear; }

.treeview .rotate.down {
  transform: rotate(90deg); }

.treeview .nested {
  display: none; }

.treeview .active {
  display: block; }

.treeview ul {
  list-style-type: none; }

.treeview .ic-w {
  width: 1.3rem; }

.treeview-animated.w-20 {
  width: 20rem; }

.treeview-animated ul {
  position: relative;
  padding-left: 1em;
  list-style: none; }

.treeview-animated .treeview-animated-list li {
  padding: .2em 0 0 .2em; }

.treeview-animated .treeview-animated-list .treeview-animated-items .nested::before {
  position: absolute;
  left: 5px;
  display: block;
  width: 5px;
  height: 100%;
  content: "";
  background-color: #808080; }

.treeview-animated .treeview-animated-list .treeview-animated-items .closed {
  display: block;
  padding: .2em .2em .2em .4em;
  margin-right: 0;
  border-top-left-radius: .3em;
  border-bottom-left-radius: .3em; }

.treeview-animated .treeview-animated-list .treeview-animated-items .closed:hover {
  background-color: #8cb9ff; }

.treeview-animated .treeview-animated-list .treeview-animated-items .closed .fa-angle-right {
  font-size: .8rem;
  transition: all .1s linear; }

.treeview-animated .treeview-animated-list .treeview-animated-items .closed .fa-angle-right.down {
  position: relative;
  color: #f8f9fa;
  transform: rotate(90deg); }

.treeview-animated .treeview-animated-list .treeview-animated-items .open {
  background-color: #32a0ff;
  transition: all .1s linear; }

.treeview-animated .treeview-animated-list .treeview-animated-items .open:hover {
  color: #f8f9fa;
  background-color: #32a0ff; }

.treeview-animated .treeview-animated-list .treeview-animated-items .open span {
  color: #f8f9fa; }

.treeview-animated .treeview-animated-list .treeview-animated-element {
  padding: .2em .2em .2em .6em;
  cursor: pointer;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  transition: all .1s linear; }

.treeview-animated .treeview-animated-list .treeview-animated-element:hover {
  background-color: #8cb9ff; }

.treeview-animated .treeview-animated-list .treeview-animated-element.opened {
  color: #f8f9fa;
  background-color: #32a0ff; }

.treeview-animated .treeview-animated-list .treeview-animated-element.opened:hover {
  color: #f8f9fa;
  background-color: #32a0ff; }

.treeview-colorful {
  font-size: 16px;
  font-weight: 400;
  background: rgba(224, 127, 178, 0.2); }

.treeview-colorful.w-20 {
  width: 20rem; }

.treeview-colorful hr {
  border-color: #a2127a; }

.treeview-colorful h6 {
  font-size: 1.4em;
  font-weight: 500;
  color: #a2127a; }

.treeview-colorful ul {
  position: relative;
  padding-left: 0;
  list-style: none; }

.treeview-colorful .treeview-colorful-list ul {
  padding-left: 1em;
  margin-top: .1em;
  background: rgba(224, 127, 178, 0.2); }

.treeview-colorful .treeview-colorful-element {
  padding: .2em .2em .2em 1em;
  cursor: pointer;
  border: 2px solid transparent;
  border-right: 0 solid transparent;
  transition: all .1s linear; }

.treeview-colorful .treeview-colorful-element:hover {
  background-color: #e07fb2; }

.treeview-colorful .treeview-colorful-element.opened {
  color: #ffac47;
  background-color: #a2127a;
  border: 2px solid #ffac47;
  border-right: 0 solid transparent; }

.treeview-colorful .treeview-colorful-element.opened:hover {
  color: #ffac47;
  background-color: #a2127a; }

.treeview-colorful .treeview-colorful-items-header {
  display: block;
  padding: .4em;
  margin-right: 0;
  border-bottom: 2px solid transparent;
  transition: all .1s linear; }

.treeview-colorful .treeview-colorful-items-header:hover {
  background-color: #e07fb2; }

.treeview-colorful .treeview-colorful-items-header.open {
  background-color: #a2127a;
  border-bottom: 2px solid #ffac47;
  transition: all .1s linear; }

.treeview-colorful .treeview-colorful-items-header.open span {
  color: #ffac47; }

.treeview-colorful .treeview-colorful-items-header.open:hover {
  color: #ffac47;
  background-color: #a2127a; }

.treeview-colorful .treeview-colorful-items-header.open div:hover {
  background-color: #a2127a; }

.treeview-colorful .treeview-colorful-items-header .fa-angle-right {
  font-size: .8rem;
  transition: all .2s linear; }

.treeview-colorful .treeview-colorful-items-header .fas {
  position: relative;
  color: #ffac47;
  transition: all .2s linear;
  transform: rotate(90deg); }

.treeview-colorful .treeview-colorful-items-header .fa-minus-circle {
  position: relative;
  color: #ffac47;
  transition: all .2s linear;
  transform: rotate(180deg); }

/*custom*/
.treeview-animated .fa-angle-right:before {
  content: "\f107"; }

.treeview-animated {
  padding-top: 0;
  padding-bottom: 0;
  font-size: 1rem; }

.treeview-animated ul {
  padding-left: 0; }

.treeview-animated li i.ic-w {
  position: absolute;
  top: 6px;
  left: .5rem; }

.treeview-animated .down ~ span i.ic-w {
  color: #000; }

.treeview-animated li a {
  margin: 0rem 36px 0rem 2.25rem;
  padding: 0rem 0rem 0rem .5rem;
  display: block;
  font-size: 1rem;
  font-weight: 400;
  border-radius: 5px;
  xborder: 1px dashed #fff; }

.treeview-animated li a:hover {
  background-color: rgba(0, 0, 0, 0.05);
  xborder: 1px dashed #ddd; }

.treeview-animated .treeview-animated-list .treeview-animated-items .nested::before {
  width: 0; }

.treeview-animated .treeview-animated-list .treeview-animated-items .closed, .treeview-animated .treeview-animated-list .treeview-animated-element {
  border-radius: 4px; }

.treeview-animated .treeview-animated-list .treeview-animated-items .closed .fa-angle-right {
  font-size: 1.25rem;
  transition: all .1s linear;
  width: 36px;
  line-height: 24px;
  text-align: center;
  position: absolute;
  right: 0px;
  top: 3px;
  color: #c1c1c1;
  cursor: pointer; }

.treeview-animated .treeview-animated-list .treeview-animated-items .closed > .fas {
  float: right; }

.treeview-animated .treeview-animated-list .treeview-animated-items .closed > .fa-angle-right:hover {
  color: #000; }

.treeview-animated .treeview-animated-list .treeview-animated-items .closed .fa-angle-right.down:hover {
  color: #000; }

.treeview-animated .treeview-animated-list .treeview-animated-items .closed .fa-angle-right.down {
  transform: rotate(180deg); }

.treeview-animated .treeview-animated-list .treeview-animated-items .open {
  background-color: #ffffff; }

.treeview-animated .treeview-animated-list .treeview-animated-items .open a {
  font-weight: 500;
  color: #111; }

.treeview-animated .treeview-animated-list .treeview-animated-items .closed:hover {
  background-color: transparent;
  color: #222; }

.treeview-animated .treeview-animated-list .treeview-animated-element:hover {
  background-color: transparent;
  color: #222; }

.treeview-animated .treeview-animated-list li {
  padding: .8rem 0 0; }

.treeview-animated .treeview-animated-list .treeview-animated-items .closed .fa-angle-right.down {
  color: #c1c1c1;
  margin-top: -2px !important; }

.treeview-animated .treeview-animated-list .treeview-animated-items .closed, .treeview-animated .treeview-animated-list .treeview-animated-element {
  padding: 0;
  position: relative;
  cursor: default; }

.treeview-animated .treeview-animated-list .treeview-animated-element.opened, .treeview-animated .treeview-animated-list .treeview-animated-element.opened:hover {
  background-color: #ffffff; }

.treeview-animated li a:hover {
  color: #000; }

.item-current > div {
  background-color: #707070;
  padding-bottom: .4rem !important;
  padding-top: .4rem !important;
  border-radius: 3px; }

.treeview-animated .item-current > .treeview-animated-element:hover {
  /* background-color: #707070 !important;*/ }

.treeview-animated .item-current > .treeview-animated-element > i.ic-w, .treeview-animated .item-current > div > span i.ic-w {
  top: 13px;
  color: #fff; }

.treeview-animated .item-current > div a {
  color: #fff; }

.treeview-animated .item-current > div a:hover {
  background-color: transparent; }

.treeview-animated .treeview-animated-list .item-current.treeview-animated-items {
  padding-top: 0;
  margin-top: .8rem; }

.treeview-animated .treeview-animated-list .item-current.treeview-animated-items:hover {
  border-radius: 3px; }

.treeview-animated .treeview-animated-list .item-current.treeview-animated-items > .closed > .fas {
  margin-top: 5px; }

.treeview-animated .treeview-animated-list .item-current.treeview-animated-items > .closed:hover {
  /* background-color: #707070 !important;*/ }

.item-indent-1 > div {
  padding-left: 2.25rem !important; }

.item-indent-2 div {
  padding-left: 4.75rem !important; }

.item-indent-3 div {
  padding-left: 7.25rem !important; }

.item-indent-4 div {
  padding-left: 9.75rem !important; }

.item-indent-5 div {
  padding-left: 12.25rem !important; }

.item-indent-1 > div > i.ic-w, .item-indent-1 > div > span > i.ic-w {
  left: 2.75rem !important; }

.item-indent-2 div > i.ic-w, .item-indent-2 > div > span > i.ic-w {
  left: 5.25rem !important; }

.item-indent-3 div > i.ic-w, .item-indent-3 > div > span > i.ic-w {
  left: 7.75rem !important; }

.item-indent-4 div > i.ic-w, .item-indent-4 > div > span > i.ic-w {
  left: 9.25rem !important; }

.item-indent-5 div > i.ic-w, .item-indent-5 > div > span > i.ic-w {
  left: 12.75rem !important; }