/*
.app-time-box dostał height: 300px;
.labels-container utracił height: 300px; (w fleksie dostosuje się sam do rodzica)
.labels-container dostał flex-shrink: 0; (nie będzie tracił szerokości -
- utrzyma 300px, lub dowolną inną wartość, jaką mu podasz)
W .labels-container zamieniłem max-width na width, max-width przy fleksie
powinno być używane do wartości procentowych.
.gantt-container dostał flex-grow: 1; Będzie zajmował całą wolną przestrzeń.
*/

.app-time-box * {
    box-sizing: border-box;
}

.app-time-box {
    display: flex;
    /*height: 300px;*/
}

.app-time {
    display: flex;
    flex-direction: column;
}

.labels-div {
    width: 100%;
}

.labels-container {
    display: flex;
    /* max-width: 300px */
    width: 300px;
    background-color: #eee;
    flex-shrink: 0;
    padding-top: 68px;
}

.chart-label, .chart-row {
    border-top: 1px solid #ccc;
    height: 50px;
}

.chart-label:last-child, .chart-row:last-child {
    border-bottom: 1px solid #ccc;
}

.gantt-container {
    display: flex;
    overflow: hidden;
    overflow-x: scroll;
    color: #606060;
    font-size: 14px;
    background-color: #fdfdfd;
    line-height: 1.2;
    flex-grow: 1;

}

.app-time, .charts-container {
    border-collapse: collapse;
    display: flex;
    flex-direction: column;
    /*overflow: hidden;*/
    flex-grow: 0;
    flex-shrink: 0;
    -ms-user-select: none;
    user-select: none;
}

/*.app-time {
    flex-grow: 1;
    flex-shrink: 1;
    overflow: hidden;
}*/

.time-grid {
    display: flex;
    flex-direction: row;
}

.chart-row {
    display:flex;
    flex-direction: row;
    /*overflow: hidden;*/
    /*overflow-x: scroll;*/
    height:50px;
    background-color: #fafafa;
    /*width:800px;*/
    position: relative;
}

.days-row {
    display:flex;
    flex-direction: row;
}

.hours-row {
    display:flex;
    flex-direction: row;
}

.flex-day {
    /*width: 200px;*/
    height: auto;
    text-align: center;
    cursor: pointer;
    display:flex;
    flex-direction: row;
}

.flex-hour {
    width: 60px;
    height: auto;
    text-align: center;
    cursor: pointer;
}

.chart-item {
    position: absolute;
    height:40px;
    border: 1px solid #999;
    /*overflow: hidden;*/
    background-color: lightblue;
    margin: 4px 0;
    border-radius: 5px;;
}

/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    width:100%;
    height:100%;
    white-space: nowrap;
    /*overflow:hidden;*/
    /*border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
  }

  /* Tooltip text */
  .tooltip .tooltiptext {
    visibility: hidden;
    width: 520px;
    background-color: #555;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

    /* Position the tooltip text */
    position: absolute;
    z-index: 10000;
    bottom: 125%;
    left: 10%;
    margin-left: -60px;

    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 0.5s;
  }

  /* Tooltip arrow */
  .tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 10%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
  }

  /* Show the tooltip text when you mouse over the tooltip container */
  .tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
  }