.esp-fhj-chart {
  width:100%;
  height:100%;
  overflow: hidden;
}
.esp-fhj-chart>.inner {
  width:100%;
  height:100%;
  display:table;
  table-layout: fixed;
}
.esp-fhj-chart>.inner>div {
  display:table-row;
}
.esp-fhj-chart>.inner>div>div {
  display:table-cell;
}
.esp-fhj-chart .border{
  cursor:col-resize;
  width:5px;
  border-right:1px solid darkgray;
  border-left:1px solid darkgray;
}

.esp-fhj-chart>.inner>div>.heading-column {
  width:140px;
}
.esp-fhj-chart>.inner>.heading-row>.heading-column>.control {
  display:flex;
  height:16px;
  justify-content: flex-end;
}
.esp-fhj-chart>.inner>.heading-row>.heading-column>div>div {
  display:inline-block;
}
.esp-fhj-chart>.inner>div>.body {
  width:auto;
  position:relative;
}
.esp-fhj-chart>.inner>div.heading-row>.body {
  overflow:scroll hidden;
}
.esp-fhj-chart>.inner>div.main>.body {
  overflow:hidden;
}
.esp-fhj-chart>.inner div.year.focus {
  background-color: lime;
}
.esp-fhj-chart>.inner>.heading-row {
  height: 16px;
  width:100%;
}
.esp-fhj-chart>.inner>.heading-row>.body>div {
/*  background-color:lime;*/
  display:table;
  table-layout: fixed;
  position: relative;
}
.esp-fhj-chart>.inner>.heading-row>.body>div>.year-scale {
  background-color: lightskyblue;
}
.esp-fhj-chart>.inner>.heading-row>.body>div>div {
  font-size: 0.6rem;
  padding: 7px 0 1px 0;
  display:table-row;
  height: 22px;
}
.esp-fhj-chart>.inner>.heading-row>.body>div>div>div {
  text-align:left;
  overflow: visible;
  display:table-cell;
}
.esp-fhj-chart>.inner>.heading-row>.body>div>div>div.before {
  visibility:hidden;
}
.esp-fhj-chart>.inner>.heading-row>.body>div>div>div.current {
  background-color: pink;
}
.esp-fhj-chart>.inner>.heading-row>.body>div>div>div.mark {
  z-index: 10;
}
.esp-fhj-chart>.inner>.heading-row>.body>div>div>div.mark>span {
/*  background-color: lime;*/
}
.esp-fhj-chart>.inner>.heading-row>.heading-column .control {
  margin:3px 5px;
  font-size: 0.8rem;
  height: 19px;
}
.esp-fhj-chart>.inner>.heading-row>.heading-column .control>div {
  margin:0 5px;
}
.esp-fhj-chart>.inner>.heading-row>.heading-column .person {
  font-size:0.5rem;
  display: flex;
  white-space:nowrap;
}
.esp-fhj-chart>.inner>.heading-row>.heading-column .person>span {
  margin-right:5px;
}
.esp-fhj-chart>.inner>.main>.heading-column {
/*  background-color:blue;*/
}
.esp-fhj-chart>.inner>.main>.body {
/*  background-color:yellow;*/
}
.esp-fhj-chart>.inner>.main>.body>div {
    overflow: scroll hidden;
    width: 100%;
    position: relative;
}
.esp-fhj-chart>.inner>.main>.body>div>.epoc {
  height:100%;
  display:table;
  position: relative;
  overflow: hidden;
}
.esp-fhj-chart>.inner>.main>.body>div>.epoc>div.row {
  height:100%;
  display:table-row;
}
.esp-fhj-chart>.inner>.main>.body>div>.epoc>div.row>div {
  height:100%;
  overflow: visible;
  display:table-cell;
  vertical-align: top;
}
.esp-fhj-chart>.inner>.main>.body>div>.epoc>div.row>div>div {
  height:100%;
  width:150px;
  background: linear-gradient(to right, rgba(0,171,235,0.5), rgba(0,171,235,0));
  color: gray;
  opacity: 0.5;
  padding-top: 6px;
}
.esp-fhj-chart>.inner>.main>.body>div>.epoc>div.row>div>div>span {
  width:20px;
  writing-mode: vertical-lr;
  height: 100%;
}
.esp-fhj-chart>.inner>.main>.body>div>.epoc>div.row>div>span {
  width:20px;
  writing-mode: vertical-lr;
  height: 100%;
}

.esp-fhj-chart>.inner>.main>.body>div>.epoc>div.panel {
  position: absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  overflow: hidden scroll;
}
.esp-fhj-chart>.inner>.main>.body>div>.epoc>div.panel>div {
  position: relative;
  height:1500px;
  width:100%;
}
.esp-fhj-chart .achieve{
  position:absolute;
  border:2px solid gray;
  padding:2px;
  white-space:nowrap;
  height: fit-content;
  background-color:white;
  font-size:0.6rem;
  box-shadow: 3px 2px 9px black;
  max-height: 22px;
}

.esp-fhj-chart .main>.heading-column{
  vertical-align: top;
  padding:5px;
  font-size:0.7rem;
  white-space:nowrap;
}
.esp-fhj-chart .main>.heading-column input{
  margin-right:5px;
}
.esp-fhj-chart .main>.heading-column>div{
  margin: 3px;
  padding: 3px;
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}
.esp-fhj-chart .main>.heading-column>div:nth-child(n+2){
  border-top: solid 1px gray;
}

.esp-fhj-chart .main>.heading-column label{
  border-radius: 15px;
  margin: 2px;
  padding: 4px 9px;
}

.register.dialog{
  width:350px;
}
.register.dialog>form{
  display:flex;
  flex-direction:column;
}
.register.dialog>form>div{
  display:flex;
  margin: 5px;
}
.register.dialog>form>div *{
  white-space:nowrap;
}
.register.dialog>form .label{
  width:20rem;
}
.register.dialog>form .options{
  height:10rem;
  width:100%;
  overflow:hidden scroll;
  display:flex;
  flex-direction:column;
  font-size:0.9rem;
}
.register.dialog>form .options>div{
  display: flex;
}
.register.dialog>form .options>div input{
  margin-right:5px;
}