body {
  font-family: Calibri, Segoe, "Segoe UI", "Gill Sans", "Gill Sans MT", sans-serif;
}

/* It's supposed to look like a tree diagram */
.tree, .tree ul, .tree li {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

.tree {
    margin: 0 0 1em;
    text-align: center;
}
.tree, .tree ul {
    display: table;
}
.tree ul {
  width: 100%;
}
    .tree li {
        display: table-cell;
        padding: 0px;
        vertical-align: top;
    }
        /* _________ */
        .tree li:before {
            outline: solid 1px #666;
            content: "";
            left: 0;
            position: absolute;
            right: 0;
            top: 0;
        }
        .tree li:first-child:before {left: 50%;}
        .tree li:last-child:before {right: 50%;}

        .tree code, .tree .cart {
            border:  1px solid #e6dada;
            min-width: 100px;
            border-radius: .2em;
            display: inline-block;
            margin: 29px .2em 30px;
            padding: .2em .5em;
            position: relative;
            background:#fff;
            box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
        }
        /* If the tree represents DOM structure */
        .tree code {
            font-family: monaco, Consolas, 'Lucida Console', monospace;
        }

            /* | */
            .tree ul:before,
            .tree code:before,
            .tree .cart:before {
                outline: solid 1px #666;
                content: "";
                height: 28px;
                left: 50%;
                position: absolute;
            }
            .tree ul:before {
                top: -30px;
            }
            .tree code:before,
            .tree .cart:before {
                top: -38px;
            }

/* The root node doesn't connect upwards */
.tree > li {margin-top: 0;}
    .tree > li:before,
    .tree > li:after,
    .tree > li > code:before,
    .tree > li > .cart:before {
      outline: none;
    }
    .img-avatar{
      border-radius: 50%;
      height: 50px;
      width: 50px;
    }
    a{
      text-decoration: none;
    }
   .pb-2, .py-2{
    padding-bottom: 0px !important;
   }
.finder {
	position: fixed;
	top: -50px;
	right: 0;
	left: 0;
	z-index: 999;
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	height: 50px;
	background: #fff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	border-bottom: 1px solid #e5e5e5;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	padding: 5px;
	transition: top 0.15s ease-out;
}

.finder.active {
	top: 0;
}

.finder-input {
	flex-grow: 1;
	width: 0;
	height: 40px;
	border: none;
	padding: 8px;
	outline: none !important;
}

.finder-input.not-found {
	color: #e7353f;
}

.btn-finder {
	width: 40px;
	height: 40px;
	text-align: center;
	padding: 0;
}

.finder-input,
.btn-finder:not(:last-child) {
	margin-right: 5px;
}

.finder-count {
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-direction: column;
	justify-content: center;
	color: #888;
	border-right: 1px solid #e5e5e5;
	margin-right: 5px;
	padding-right: 20px;
	white-space: nowrap;
}

.btn-finder,
.finder-count {
	flex-shrink: 0;
	flex-grow: 0;
}

.highlight {
	background: #ff8;
}

.highlight.active {
	background: #30c78d;
}