/* timelineのスタイル */
/* timeline軸（見出し行）の背景色 */
.vis-time-axis.vis-foreground {
    background: #404040;
}

/* timeline軸（見出し行）のテキストの色 */
.vis-time-axis .vis-text.vis-minor {
    color: #fff;
}

/* 指定の日付の位置に垂直に引く線のスタイル */
.vis-custom-time.v-bar {
    width: 1px;
    background-color: coral;
}
  

.vis-left {
  width: 30vw;
  overflow:auto;
} 

/* custom styles for individual items, load this after vis-timeline-graph2d.min.css/vis-timeline-graph2d.min.css */
.vis-item.red {
  background-color: rgb(255, 47, 47);
  border-color: rgb(128, 0, 0);
  color: white;
  box-shadow: 0 0 10px gray;
}
.vis-item.vis-dot.red {
  border-radius: 10px;
  border-width: 10px;
}
.vis-item.vis-line.red {
  border-width: 5px;
}
.vis-item.vis-box.red {
  border-radius: 0;
  border-width: 2px;
  font-size: 24pt;
  font-weight: bold;
}


.vis-item.blue {
    background-color: rgb(47, 134, 255);
    border-color: rgb(0, 19, 128);
    color: white;
    box-shadow: 0 0 10px gray;
}
.vis-item.vis-dot.blue {
    border-radius: 10px;
    border-width: 10px;
}
.vis-item.vis-line.blue {
    border-width: 5px;
}
.vis-item.vis-box.blue {
    border-radius: 0;
    border-width: 2px;
    font-size: 24pt;
    font-weight: bold;
}

/* create a custom sized dot at the bottom of the red item */
.vis-item.yellow {
  background-color: rgb(255, 217, 0);
  border-color: rgb(208, 255, 0);
  color: rgb(255, 255, 255);
  box-shadow: 0 0 10px gray;
}
.vis-item.vis-dot.yellow {
  border-radius: 10px;
  border-width: 10px;
}
.vis-item.vis-line.yellow {
  border-width: 5px;
}
.vis-item.vis-box.yellow {
  border-radius: 0;
  border-width: 2px;
  font-size: 24pt;
  font-weight: bold;
}

.vis-item.GM {
  background-color: rgb(255, 132, 0);
  border-color: rgb(255, 119, 0);
  color: rgb(255, 255, 255);
  box-shadow: 0 0 10px gray;
}
.vis-item.vis-selected.GM {
  /* custom colors for selected orange items */
  background-color: rgb(255, 145, 0);
  border-color: rgb(255, 136, 0);
  color: rgb(255, 255, 255);
  box-shadow: 0 0 10px gray;
}

.vis-inner {
    color:white;
}


/* our custom classes overrule the styles for selected events,
       so lets define a new style for the selected events */
.vis-item.vis-selected {
  background-color: white;
  border-color: black;
  color: black;
  box-shadow: 0 0 10px gray;
}