.bar {
  height: 21px;
  transition: fill 0.3s ease;
  cursor: pointer;
  stroke-width: 0.5px;
}

.bar text {
  fill: #fff !important;
  font-size: 14px;
}

.even-label, .odd-label {
  float: left;
}

.vertical-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.left-container {
  float: left;
  width: 5%;
}

.right-container {
  float: right;
  width: 95%;
}

.full-container {
  width: 100%;
}

@media (max-width: 1200px) {
  .left-container {
    width: 10%;
  }
  .right-container {
    width: 90%;
  }
}
@media (max-width: 800px) {
  .odd-label {
    visibility: hidden;
  }
  .left-container {
    width: 15%;
  }
  .right-container {
    width: 85%;
  }
}
.chart {
  border: 1px solid #a29f9f;
}

.grid-line {
  stroke: grey;
  fill: none;
  stroke-width: 0.75px;
}

.guide-line {
  stroke: #a29f9f;
  stroke-width: 0.5px;
  fill: none;
}

.time-label {
  font-size: small;
  text-align: center;
}

.current-time-line {
  stroke: #f00;
  stroke-width: 1px;
  fill: none;
}

/* TODO: move to the separate file */
.calendar-year {
  display: grid;
  grid-template-columns: auto repeat(31, 41px);
  border: 1px solid #d0d0d0;
  max-width: 1400px;
  font-size: 13px;
  overflow: hidden;
}

.calendar-row {
  border: 1px solid #d0d0d0;
  height: 40px;
  padding: 0.5rem;
}

.calendar-cell {
  border: 1px solid #e0e0e0;
  padding: 0.5rem;
  height: 40px;
  overflow: hidden;
  position: relative;
  align-items: center;
  display: flex;
  cursor: pointer;
}

.calendar-cell:hover {
  background-color: #eeeeee;
}

.calendar-header {
  border: 1px solid #d0d0d0;
  background-color: #eeeeee;
  text-align: center;
  overflow: hidden;
}

.calendar-weekend {
  background-color: #eeeeee;
}

.calendar-weekend:hover {
  background-color: #bebebe;
}

.calendar-invalid {
  background-color: #bebebe;
}

.calendar-invalid:hover {
  background-color: #bebebe;
}

.calendar-item {
  z-index: 100;
  border-radius: 3px;
  cursor: pointer;
  height: 24px;
  padding: 4px;
}

.calendar-selector {
  z-index: 100;
  border-radius: 3px;
  cursor: pointer;
  color: aqua;
  background-color: blue;
  height: 24px;
}

rect.clear {
  background-color: transparent !important;
  color: white !important;
  fill: transparent;
  stroke: rgba(0, 0, 0, 0.5);
}
rect.clear:hover {
  background-color: rgba(255, 255, 255, 0.3) !important;
  color: white !important;
  fill: rgba(255, 255, 255, 0.3);
}
rect.clear:focus {
  background-color: rgba(0, 0, 0, 0.5) !important;
  color: white !important;
  fill: rgba(0, 0, 0, 0.5);
}

rect.white {
  background-color: #f0f0f0 !important;
  color: white !important;
  fill: #f0f0f0;
  stroke: #787878;
}
rect.white:hover {
  background-color: whitesmoke !important;
  color: white !important;
  fill: whitesmoke;
}
rect.white:focus {
  background-color: #787878 !important;
  color: white !important;
  fill: #787878;
}

rect.red {
  background-color: #ff0000 !important;
  color: white !important;
  fill: #ff0000;
  stroke: maroon;
}
rect.red:hover {
  background-color: #ff4d4d !important;
  color: white !important;
  fill: #ff4d4d;
}
rect.red:focus {
  background-color: maroon !important;
  color: white !important;
  fill: maroon;
}

rect.orange {
  background-color: #ffa500 !important;
  color: white !important;
  fill: #ffa500;
  stroke: #805300;
}
rect.orange:hover {
  background-color: #ffc04d !important;
  color: white !important;
  fill: #ffc04d;
}
rect.orange:focus {
  background-color: #805300 !important;
  color: white !important;
  fill: #805300;
}

rect.yellow {
  background-color: #ffff00 !important;
  color: white !important;
  fill: #ffff00;
  stroke: olive;
}
rect.yellow:hover {
  background-color: #ffff4d !important;
  color: white !important;
  fill: #ffff4d;
}
rect.yellow:focus {
  background-color: olive !important;
  color: white !important;
  fill: olive;
}

rect.chartreusegreen {
  background-color: #7fff00 !important;
  color: white !important;
  fill: #7fff00;
  stroke: #408000;
}
rect.chartreusegreen:hover {
  background-color: #a5ff4d !important;
  color: white !important;
  fill: #a5ff4d;
}
rect.chartreusegreen:focus {
  background-color: #408000 !important;
  color: white !important;
  fill: #408000;
}

rect.green {
  background-color: #00ff00 !important;
  color: white !important;
  fill: #00ff00;
  stroke: green;
}
rect.green:hover {
  background-color: #4dff4d !important;
  color: white !important;
  fill: #4dff4d;
}
rect.green:focus {
  background-color: green !important;
  color: white !important;
  fill: green;
}

rect.springgreen {
  background-color: #00ff7f !important;
  color: white !important;
  fill: #00ff7f;
  stroke: #008040;
}
rect.springgreen:hover {
  background-color: #4dffa5 !important;
  color: white !important;
  fill: #4dffa5;
}
rect.springgreen:focus {
  background-color: #008040 !important;
  color: white !important;
  fill: #008040;
}

rect.darkgreen {
  background-color: #28a745 !important;
  color: white !important;
  fill: #28a745;
  stroke: #145423;
}
rect.darkgreen:hover {
  background-color: #69c17d !important;
  color: white !important;
  fill: #69c17d;
}
rect.darkgreen:focus {
  background-color: #145423 !important;
  color: white !important;
  fill: #145423;
}

rect.cyan {
  background-color: #00ffff !important;
  color: white !important;
  fill: #00ffff;
  stroke: teal;
}
rect.cyan:hover {
  background-color: #4dffff !important;
  color: white !important;
  fill: #4dffff;
}
rect.cyan:focus {
  background-color: teal !important;
  color: white !important;
  fill: teal;
}

rect.dodgerblue {
  background-color: #1e90ff !important;
  color: white !important;
  fill: #1e90ff;
  stroke: #0f4880;
}
rect.dodgerblue:hover {
  background-color: #62b1ff !important;
  color: white !important;
  fill: #62b1ff;
}
rect.dodgerblue:focus {
  background-color: #0f4880 !important;
  color: white !important;
  fill: #0f4880;
}

rect.blue {
  background-color: #0000ff !important;
  color: white !important;
  fill: #0000ff;
  stroke: navy;
}
rect.blue:hover {
  background-color: #4d4dff !important;
  color: white !important;
  fill: #4d4dff;
}
rect.blue:focus {
  background-color: navy !important;
  color: white !important;
  fill: navy;
}

rect.violet {
  background-color: #ee82ee !important;
  color: white !important;
  fill: #ee82ee;
  stroke: #774177;
}
rect.violet:hover {
  background-color: #f3a8f3 !important;
  color: white !important;
  fill: #f3a8f3;
}
rect.violet:focus {
  background-color: #774177 !important;
  color: white !important;
  fill: #774177;
}

rect.magneta {
  background-color: #ff00ff !important;
  color: white !important;
  fill: #ff00ff;
  stroke: purple;
}
rect.magneta:hover {
  background-color: #ff4dff !important;
  color: white !important;
  fill: #ff4dff;
}
rect.magneta:focus {
  background-color: purple !important;
  color: white !important;
  fill: purple;
}

rect.deeppink {
  background-color: #ff1493 !important;
  color: white !important;
  fill: #ff1493;
  stroke: #800a4a;
}
rect.deeppink:hover {
  background-color: #ff5bb3 !important;
  color: white !important;
  fill: #ff5bb3;
}
rect.deeppink:focus {
  background-color: #800a4a !important;
  color: white !important;
  fill: #800a4a;
}

rect.purple {
  background-color: #7005fd !important;
  color: white !important;
  fill: #7005fd;
  stroke: #38037f;
}
rect.purple:hover {
  background-color: #9b50fe !important;
  color: white !important;
  fill: #9b50fe;
}
rect.purple:focus {
  background-color: #38037f !important;
  color: white !important;
  fill: #38037f;
}

circle.clear {
  background-color: transparent !important;
  color: transparent !important;
  fill: transparent;
}

circle.white {
  background-color: #f0f0f0 !important;
  color: #f0f0f0 !important;
  fill: #f0f0f0;
}

circle.red {
  background-color: #ff0000 !important;
  color: #ff0000 !important;
  fill: #ff0000;
}

circle.orange {
  background-color: #ffa500 !important;
  color: #ffa500 !important;
  fill: #ffa500;
}

circle.yellow {
  background-color: #ffff00 !important;
  color: #ffff00 !important;
  fill: #ffff00;
}

circle.chartreusegreen {
  background-color: #7fff00 !important;
  color: #7fff00 !important;
  fill: #7fff00;
}

circle.green {
  background-color: #00ff00 !important;
  color: #00ff00 !important;
  fill: #00ff00;
}

circle.springgreen {
  background-color: #00ff7f !important;
  color: #00ff7f !important;
  fill: #00ff7f;
}

circle.darkgreen {
  background-color: #28a745 !important;
  color: #28a745 !important;
  fill: #28a745;
}

circle.cyan {
  background-color: #00ffff !important;
  color: #00ffff !important;
  fill: #00ffff;
}

circle.dodgerblue {
  background-color: #1e90ff !important;
  color: #1e90ff !important;
  fill: #1e90ff;
}

circle.blue {
  background-color: #0000ff !important;
  color: #0000ff !important;
  fill: #0000ff;
}

circle.violet {
  background-color: #ee82ee !important;
  color: #ee82ee !important;
  fill: #ee82ee;
}

circle.magneta {
  background-color: #ff00ff !important;
  color: #ff00ff !important;
  fill: #ff00ff;
}

circle.deeppink {
  background-color: #ff1493 !important;
  color: #ff1493 !important;
  fill: #ff1493;
}

circle.purple {
  background-color: #7005fd !important;
  color: #7005fd !important;
  fill: #7005fd;
}

.active {
  filter: brightness(1.25);
}

path.clear {
  background-color: transparent !important;
  color: white !important;
  fill: transparent;
  stroke: rgba(0, 0, 0, 0.5);
}
path.clear:hover {
  background-color: rgba(255, 255, 255, 0.3) !important;
  color: white !important;
  fill: rgba(255, 255, 255, 0.3);
}
path.clear:focus {
  background-color: rgba(0, 0, 0, 0.5) !important;
  color: white !important;
  fill: rgba(0, 0, 0, 0.5);
}

path.white {
  background-color: #f0f0f0 !important;
  color: white !important;
  fill: #f0f0f0;
  stroke: #787878;
}
path.white:hover {
  background-color: whitesmoke !important;
  color: white !important;
  fill: whitesmoke;
}
path.white:focus {
  background-color: #787878 !important;
  color: white !important;
  fill: #787878;
}

path.red {
  background-color: #ff0000 !important;
  color: white !important;
  fill: #ff0000;
  stroke: maroon;
}
path.red:hover {
  background-color: #ff4d4d !important;
  color: white !important;
  fill: #ff4d4d;
}
path.red:focus {
  background-color: maroon !important;
  color: white !important;
  fill: maroon;
}

path.orange {
  background-color: #ffa500 !important;
  color: white !important;
  fill: #ffa500;
  stroke: #805300;
}
path.orange:hover {
  background-color: #ffc04d !important;
  color: white !important;
  fill: #ffc04d;
}
path.orange:focus {
  background-color: #805300 !important;
  color: white !important;
  fill: #805300;
}

path.yellow {
  background-color: #ffff00 !important;
  color: white !important;
  fill: #ffff00;
  stroke: olive;
}
path.yellow:hover {
  background-color: #ffff4d !important;
  color: white !important;
  fill: #ffff4d;
}
path.yellow:focus {
  background-color: olive !important;
  color: white !important;
  fill: olive;
}

path.chartreusegreen {
  background-color: #7fff00 !important;
  color: white !important;
  fill: #7fff00;
  stroke: #408000;
}
path.chartreusegreen:hover {
  background-color: #a5ff4d !important;
  color: white !important;
  fill: #a5ff4d;
}
path.chartreusegreen:focus {
  background-color: #408000 !important;
  color: white !important;
  fill: #408000;
}

path.green {
  background-color: #00ff00 !important;
  color: white !important;
  fill: #00ff00;
  stroke: green;
}
path.green:hover {
  background-color: #4dff4d !important;
  color: white !important;
  fill: #4dff4d;
}
path.green:focus {
  background-color: green !important;
  color: white !important;
  fill: green;
}

path.springgreen {
  background-color: #00ff7f !important;
  color: white !important;
  fill: #00ff7f;
  stroke: #008040;
}
path.springgreen:hover {
  background-color: #4dffa5 !important;
  color: white !important;
  fill: #4dffa5;
}
path.springgreen:focus {
  background-color: #008040 !important;
  color: white !important;
  fill: #008040;
}

path.darkgreen {
  background-color: #28a745 !important;
  color: white !important;
  fill: #28a745;
  stroke: #145423;
}
path.darkgreen:hover {
  background-color: #69c17d !important;
  color: white !important;
  fill: #69c17d;
}
path.darkgreen:focus {
  background-color: #145423 !important;
  color: white !important;
  fill: #145423;
}

path.cyan {
  background-color: #00ffff !important;
  color: white !important;
  fill: #00ffff;
  stroke: teal;
}
path.cyan:hover {
  background-color: #4dffff !important;
  color: white !important;
  fill: #4dffff;
}
path.cyan:focus {
  background-color: teal !important;
  color: white !important;
  fill: teal;
}

path.dodgerblue {
  background-color: #1e90ff !important;
  color: white !important;
  fill: #1e90ff;
  stroke: #0f4880;
}
path.dodgerblue:hover {
  background-color: #62b1ff !important;
  color: white !important;
  fill: #62b1ff;
}
path.dodgerblue:focus {
  background-color: #0f4880 !important;
  color: white !important;
  fill: #0f4880;
}

path.blue {
  background-color: #0000ff !important;
  color: white !important;
  fill: #0000ff;
  stroke: navy;
}
path.blue:hover {
  background-color: #4d4dff !important;
  color: white !important;
  fill: #4d4dff;
}
path.blue:focus {
  background-color: navy !important;
  color: white !important;
  fill: navy;
}

path.violet {
  background-color: #ee82ee !important;
  color: white !important;
  fill: #ee82ee;
  stroke: #774177;
}
path.violet:hover {
  background-color: #f3a8f3 !important;
  color: white !important;
  fill: #f3a8f3;
}
path.violet:focus {
  background-color: #774177 !important;
  color: white !important;
  fill: #774177;
}

path.magneta {
  background-color: #ff00ff !important;
  color: white !important;
  fill: #ff00ff;
  stroke: purple;
}
path.magneta:hover {
  background-color: #ff4dff !important;
  color: white !important;
  fill: #ff4dff;
}
path.magneta:focus {
  background-color: purple !important;
  color: white !important;
  fill: purple;
}

path.deeppink {
  background-color: #ff1493 !important;
  color: white !important;
  fill: #ff1493;
  stroke: #800a4a;
}
path.deeppink:hover {
  background-color: #ff5bb3 !important;
  color: white !important;
  fill: #ff5bb3;
}
path.deeppink:focus {
  background-color: #800a4a !important;
  color: white !important;
  fill: #800a4a;
}

path.purple {
  background-color: #7005fd !important;
  color: white !important;
  fill: #7005fd;
  stroke: #38037f;
}
path.purple:hover {
  background-color: #9b50fe !important;
  color: white !important;
  fill: #9b50fe;
}
path.purple:focus {
  background-color: #38037f !important;
  color: white !important;
  fill: #38037f;
}

.pie {
  width: 120px;
  z-index: -1;
}

.cir-base {
  fill: #EEE;
  stroke: none;
  animation: rotate 1.5s ease-in;
}

div.clear {
  background-color: transparent !important;
  color: white !important;
  fill: transparent;
  stroke: rgba(0, 0, 0, 0.5);
}
div.clear:hover {
  background-color: rgba(255, 255, 255, 0.3) !important;
  color: white !important;
  fill: rgba(255, 255, 255, 0.3);
}
div.clear:focus {
  background-color: rgba(0, 0, 0, 0.5) !important;
  color: white !important;
  fill: rgba(0, 0, 0, 0.5);
}

div.white {
  background-color: #f0f0f0 !important;
  color: white !important;
  fill: #f0f0f0;
  stroke: #787878;
}
div.white:hover {
  background-color: whitesmoke !important;
  color: white !important;
  fill: whitesmoke;
}
div.white:focus {
  background-color: #787878 !important;
  color: white !important;
  fill: #787878;
}

div.red {
  background-color: #ff0000 !important;
  color: white !important;
  fill: #ff0000;
  stroke: maroon;
}
div.red:hover {
  background-color: #ff4d4d !important;
  color: white !important;
  fill: #ff4d4d;
}
div.red:focus {
  background-color: maroon !important;
  color: white !important;
  fill: maroon;
}

div.orange {
  background-color: #ffa500 !important;
  color: white !important;
  fill: #ffa500;
  stroke: #805300;
}
div.orange:hover {
  background-color: #ffc04d !important;
  color: white !important;
  fill: #ffc04d;
}
div.orange:focus {
  background-color: #805300 !important;
  color: white !important;
  fill: #805300;
}

div.yellow {
  background-color: #ffff00 !important;
  color: white !important;
  fill: #ffff00;
  stroke: olive;
}
div.yellow:hover {
  background-color: #ffff4d !important;
  color: white !important;
  fill: #ffff4d;
}
div.yellow:focus {
  background-color: olive !important;
  color: white !important;
  fill: olive;
}

div.chartreusegreen {
  background-color: #7fff00 !important;
  color: white !important;
  fill: #7fff00;
  stroke: #408000;
}
div.chartreusegreen:hover {
  background-color: #a5ff4d !important;
  color: white !important;
  fill: #a5ff4d;
}
div.chartreusegreen:focus {
  background-color: #408000 !important;
  color: white !important;
  fill: #408000;
}

div.green {
  background-color: #00ff00 !important;
  color: white !important;
  fill: #00ff00;
  stroke: green;
}
div.green:hover {
  background-color: #4dff4d !important;
  color: white !important;
  fill: #4dff4d;
}
div.green:focus {
  background-color: green !important;
  color: white !important;
  fill: green;
}

div.springgreen {
  background-color: #00ff7f !important;
  color: white !important;
  fill: #00ff7f;
  stroke: #008040;
}
div.springgreen:hover {
  background-color: #4dffa5 !important;
  color: white !important;
  fill: #4dffa5;
}
div.springgreen:focus {
  background-color: #008040 !important;
  color: white !important;
  fill: #008040;
}

div.darkgreen {
  background-color: #28a745 !important;
  color: white !important;
  fill: #28a745;
  stroke: #145423;
}
div.darkgreen:hover {
  background-color: #69c17d !important;
  color: white !important;
  fill: #69c17d;
}
div.darkgreen:focus {
  background-color: #145423 !important;
  color: white !important;
  fill: #145423;
}

div.cyan {
  background-color: #00ffff !important;
  color: white !important;
  fill: #00ffff;
  stroke: teal;
}
div.cyan:hover {
  background-color: #4dffff !important;
  color: white !important;
  fill: #4dffff;
}
div.cyan:focus {
  background-color: teal !important;
  color: white !important;
  fill: teal;
}

div.dodgerblue {
  background-color: #1e90ff !important;
  color: white !important;
  fill: #1e90ff;
  stroke: #0f4880;
}
div.dodgerblue:hover {
  background-color: #62b1ff !important;
  color: white !important;
  fill: #62b1ff;
}
div.dodgerblue:focus {
  background-color: #0f4880 !important;
  color: white !important;
  fill: #0f4880;
}

div.blue {
  background-color: #0000ff !important;
  color: white !important;
  fill: #0000ff;
  stroke: navy;
}
div.blue:hover {
  background-color: #4d4dff !important;
  color: white !important;
  fill: #4d4dff;
}
div.blue:focus {
  background-color: navy !important;
  color: white !important;
  fill: navy;
}

div.violet {
  background-color: #ee82ee !important;
  color: white !important;
  fill: #ee82ee;
  stroke: #774177;
}
div.violet:hover {
  background-color: #f3a8f3 !important;
  color: white !important;
  fill: #f3a8f3;
}
div.violet:focus {
  background-color: #774177 !important;
  color: white !important;
  fill: #774177;
}

div.magneta {
  background-color: #ff00ff !important;
  color: white !important;
  fill: #ff00ff;
  stroke: purple;
}
div.magneta:hover {
  background-color: #ff4dff !important;
  color: white !important;
  fill: #ff4dff;
}
div.magneta:focus {
  background-color: purple !important;
  color: white !important;
  fill: purple;
}

div.deeppink {
  background-color: #ff1493 !important;
  color: white !important;
  fill: #ff1493;
  stroke: #800a4a;
}
div.deeppink:hover {
  background-color: #ff5bb3 !important;
  color: white !important;
  fill: #ff5bb3;
}
div.deeppink:focus {
  background-color: #800a4a !important;
  color: white !important;
  fill: #800a4a;
}

div.purple {
  background-color: #7005fd !important;
  color: white !important;
  fill: #7005fd;
  stroke: #38037f;
}
div.purple:hover {
  background-color: #9b50fe !important;
  color: white !important;
  fill: #9b50fe;
}
div.purple:focus {
  background-color: #38037f !important;
  color: white !important;
  fill: #38037f;
}