html,body {
  height: 100%;
  margin: 0;
  padding: 0;
  padding: 1px;
  box-sizing: border-box;
}

body {
  font-family: Arial;
  color: #333333;
}

#chart-container {
  position: relative;
  min-height: 500px;
  border: 1px solid #aaa;
  margin: 0.5rem;
  overflow: auto;
  text-align: center;
}

.orgchart {background: transparent !important; }
.orgchart .node:hover {cursor:pointer;}
.orgchart .node > .nodes {cursor:default;} 
.orgchart .node .title .symbol{display: none;}
#chart-container {background: #ebedf2 url(../img/migration_asylum_bg.png) 50% 0% no-repeat !important; height: 80%}
#interactive-orgchart-container.fullscreen #chart-container{height:90%}
.orgchart .ypoyrgos .title {background-color: #203864; min-height: 40px !important;}
.orgchart .level1 .title {min-height: 73px !important;} 
.orgchart .ypoyrgos .title span {font-weight: 800 !important;}
.orgchart .grammateia .title {background-color: #ED7D31;}
.orgchart .tmima .title {background-color: #4472C4;}
.orgchart .dieythynsi .title {background-color: #F4B183; color:black;}
.orgchart .gen_dieythynsi .title {background-color: #1F4E79; }
.orgchart .grafeio .title {background-color: #D9D9D9; color:black;}
.orgchart .yparxeio .title {background-color: #767171;}
.orgchart .aneksartisi_arxi .title{background-color: #9B9B9B; color:black;}
.orgchart .epixeirisiakes_monades .title {background-color: #FFDD9C; color:black;}
.orgchart .node .title span {width:100%; display: flow-root; max-width: 150px; text-align: center; white-space: break-spaces; font-weight: 400; font-size:12px; line-height: 1.1 !important; font-family: Arial, Helvetica, sans-serif !important;}
.orgchart .node .title {min-height: 62px; height: auto !important; width: auto; min-width: 130px; padding: 10px;} 
.orgchart .node.matched { background-color: rgba(238, 217, 54, 0.5); }
.orgchart .hierarchy.first-shown::before {left: calc(50% - 1px); width: calc(50% + 1px);}
.orgchart .hierarchy.last-shown::before {width: calc(50% + 1px);}
.orgchart .hierarchy.first-shown.last-shown::before {width: 2px;}
#edit-panel {
    text-align: center;
    margin: 0.5rem;
    padding: 0.5rem;
    border: 1px solid #aaa;
}
#edit-panel * { font-size: 1rem; }
button, input { padding: 0.5rem 1rem; }

.control-panel {position: relative;height: 32px;text-align: right;padding: 10px;z-index: 2;}

img.contol-icon {
  height: 32px;
  background-color: transparent;
  border-radius: 4px;
  -webkit-transition: background-color 0.3s ease-in-out;
  transition: background-color 0.3s ease-in-out;
}

img.contol-icon:hover {cursor: pointer;background-color: white; }
.hidden{display:none !important;}

#interactive-orgchart-container {
  -webkit-transition: width 1s ease-in-out;
  transition: width 1s ease-in-out;
  -webkit-transition: height 1s ease-in-out;
  transition: height 1s ease-in-out;
}

.fullscreen {
  position: fixed;
  height: calc(100% - 100px);
  width: calc(100% - 0px);
  left: 0;
  top: 100px;
  z-index: 2000;
  animation: 1s in-out forwards;  
}


@keyframes maxmize {
  0% {
    width:auto;
    height: auto;
  }
  45%,55% { 
    width:50%;
    height: 50%;
  }
  100% {
    width: fit-content;
    height: 100%;
  } 
}

.node.nohightlight:hover {
  background-color: transparent !important;
  cursor: default;
}

/* .node .toggleBtn {
  bottom: 4px !important;
} */

/* .node .edge .expand-button {
  background-color: #449d44;
} */
.node .edge .expand-button .oci-plus-square::before, .node .edge .expand-button .oci-minus-square::before{
  background-color: #449d44;
}

.node .expand-button{
    position: absolute;
    margin: 0px;
    padding: 0px;
    outline: 0px;
    height: 20px;
    width: 20px;
    left: 0px;
    top: -13px;
    line-height: 17px;
}
.node .toggleBtn .expand-button{
  top: -7px !important;
  left: -2px !important;
}
.node .toggleBtn .expand-button .oci-plus-square::before, .node .toggleBtn .expand-button .oci-minus-square::before{
  background-color: #449d44;
}