html,body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

#chart-container {
	width: 100%;
	height:  100%;
	font-family: 'Assistant';
}

.orgchart { 
	position: relative;
	width: 100%;
	background: white; 
}

.orgchart .node .title {
	width: 278px;
	background: #fff;
	border: 1px solid #aeaeae;
	border-top: 8px solid #aeaeae;
	padding: 5px;
	color: #222;
	height: 130px;
  display: table;
	font-weight: normal;
}

.orgchart .node h2 {
    display: table-cell;
    vertical-align: middle;
    padding: 30px;
    white-space: normal;
    font-size: 17px;
}

.orgchart .node .node-photo-wrapper {
	height: 100%;
	display: table-cell;
	width: 80px;
	position: relative;
	vertical-align: middle;
}

.orgchart .node .node-photo {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
	  position: absolute;
	  top: 50%;
	  margin-top: -40px;
    background-image: url('../img/avatar.png');
}

.orgchart .node .node-photo img {
  height: auto;
  width: inherit;
}

.orgchart .node .node-details {
    display: table-cell;
    height: 100%;
    padding-left: 10px;
	  text-align: left;
	  vertical-align: middle;
}

.orgchart .node .node-details * {
	  margin-bottom: 3px;
    max-width: 160px;
    overflow-wrap: break-word;
    white-space: normal;
}

/* .orgchart .node .node-details h4, .orgchart .node .node-details h5, .orgchart .node .node-details h6 {
    margin-top: 0; 
} */

.orgchart .node .node-details h4 {
  font-size: 13.5px;
  margin-top: 0;
}

.orgchart .node .node-details h5 {
  font-size: 12px;
  margin-top: 0;
}

.orgchart .node .node-details h6, .orgchart .node .node-details .email, .orgchart .node .node-details .contact, .orgchart .node .node-details .addition  {
  margin-top: 0;
  font-weight: normal;
	font-size: 12px;
}

.orgchart .color1 .title {
	border-top-color: #10205C;
}

.orgchart .color2 .title {
	border-top-color: #1D3BA8;
}

.orgchart .color3 .title {
	border-top-color: #254DDB;
}

.orgchart .color4 .title {
	border-top-color: #6580E1;
}

.orgchart .color5 .title {
	border-top-color: #C71585;
}

.orgchart .color1 h2, .orgchart .color1 .node-details h4 {
	color: #10205C; 
}

.orgchart .color2 h2, .orgchart .color2 .node-details h4 {
	color: #1D3BA8;
}

.orgchart .color3 h2, .orgchart .color3 .node-details h4 {
	color: #254DDB;
}

.orgchart .color4 h2, .orgchart .color4 .node-details h4 {
	color: #6580E1;
}

.orgchart .color5 h2, .orgchart .color5 .node-details h4 {
	color: #C71585;
}

.orgchart .node .node-details .email, .orgchart .node .node-details .contact, .orgchart .node .node-details .addition {
	color: #666;
}

/* .orgchart .node.matched { 
  background-color: rgba(238, 217, 54, 0.5); 
} */

#edit-panel {
  text-align: center;
  position: relative;
  left: 10px;
  width: calc(100% - 40px);
  border-radius: 4px;
  float: left;
  margin-top: 10px;
  padding: 10px;
  color: #fff;
}

#edit-panel * { 
  font-size: 20px; 
}

.orgchart .lines .downLine {
  background-color:rgba(174,174,174) !important;
}

.orgchart .lines .rightLine {
    border-right: 1px solid rgba(174,174,174) !important;
}

.orgchart .lines .leftLine {
    border-left: 1px solid rgba(174,174,174) !important;
}

.orgchart .lines .topLine {
    border-top: 2px solid rgba(174,174,174) !important;
}

.orgchart .verticalNodes ul>li::after, .orgchart .verticalNodes ul>li::before {
    border-color: rgba(174,174,174) !important;
}

.orgchart .verticalNodes>td::before {
    border: 1px solid rgba(174,174,174) !important;
}

/* button */
.button_expand {
  color:#fff!important;
  background-color:#C0C0C0!important;
  width: 35px;
  height: 35px;
  border-style: hidden;
  border-bottom: 6px solid darkgrey;
  text-align:center;
  cursor:pointer;
  font-size:24px!important;
  margin:2px 10px;
  border-radius: 20px 20px 0 0;
}

.button_collapse {
  color:#fff!important;
  background-color:#C0C0C0!important;
  width: 35px;
  height: 35px;
  border-style: hidden;
  border-top: 6px solid darkgrey;
  text-align:center;
  cursor:pointer;
  font-size:24px!important;
  margin:2px 10px;
  border-radius: 0 0 20px 20px;
}

.container {
  position: absolute;
  right: 0px;
  z-index: 10;
  margin-top: 10px;
}

/* untuk toggle button */
.orgchart .node .toggleBtn::before {
  background-color: rgb(174, 174, 174);
}

.orgchart .node .toggleBtn:hover::before {
  background-color: #999999;
}

.oci-chevron-down::before {
    content: "+";
    display: inline-block;
    vertical-align: text-bottom;
    text-align: center;
    width: 1.2rem;
    height: 1.2rem;
    background-color: rgb(174,174,174);
    color: #fff;
    transform: rotate(0deg);
    padding-left: 3px;
}

.oci-chevron-up::before {
    content: "-";
    display: inline-block;
    vertical-align: text-bottom;
    text-align: center;
    width: 1.2rem;
    height: 1.2rem;
    background-color: rgb(174,174,174);
    color: #fff;
    transform: rotate(0deg);
    padding-left: 3px;
    border-style: solid;
    border-color: #000;
}

.orgchart .node .verticalEdge::before {
    position: initial;
}

.orgchart .node .edge::before {
    border-color: rgb(174,174,174,.8);
}

/* transition */
.orgchart .node.focused {
    background-color: rgba(169,169,169,.5);
}

.orgchart .node:hover {
    background-color: rgba(174,174,174,.8);
}