* {
  box-sizing: border-box;
}
body {
  background-color: #091123;
  color: #d7d8ea;
  margin: 0;
  display: flex;
  flex-direction: column;
  margin-top: 60px; /* Height of header */
  min-height: calc(100vh - 60px);
}
.container {
  max-width: 1200px;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  margin: 0 auto;
}
header,
footer {
  background: #1b2946;
  text-align: center;
}
header {
  display: flex;
  justify-content: space-between;
  font-size: 37px;
  border-bottom: 1px solid rgb(0, 90, 109);

  position: fixed;
  right: 0;
  left: 0;
  top: 0;
  z-index: 1;
}
footer {
  padding: 20px;
  border-top: 1px solid rgb(0, 90, 109);
  margin-top: auto;
}
footer > div {
  padding: 10px;
}
footer .menu a {
  padding: 0 20px;
}
header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  padding-top: 0;
  padding-bottom: 0;
}
.google-play-badge {
  height: 100%;
}
.google-play-badge img {
  height: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}
.container.text p,
.container.text li {
  color: #d7d8ea;
}
.container.text h3 {
  color: #fff;
}
.container.text h3,
.container.text p,
.container.text li {
  margin-left: auto;
  margin-right: auto;
  max-width: 1000px;
}
.container.text {
  margin-top: 15px;
  margin-bottom: 15px;
  background: #1b2946;
}
.container.text.center {
  text-align: center;
}

/**
  SHARED_MODULES
*/
.day-container .head {
  display: flex;
  justify-content: center;
  align-items: baseline;
  margin: 5px;
}
.day-container .head .side {
  color: #878ac0;
  font-size: 17px;
  flex: 1;
}
.day-container .head .main {
  padding: 0 5px;
  font-size: 30px;
  margin: 0;
}

.day-graph-container {
  background: linear-gradient(180deg, rgb(0, 55, 67) 7%, rgb(0, 144, 176) 50%, rgb(0, 90, 109) 93%);
}
.day-graph-container-table {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  width: 100%;
  border-collapse: collapse;
}
.day-graph-container-table .hr {
  grid-column: 1 / -1;
  height: 1px;
}
.day-graph-container-table .center {
  background-color: #2f3464;
  color: #878ac0;
  white-space: nowrap;
  padding: 2px;
  display: flex;
  align-items: stretch;
}
.day-graph-container-table .center .price {
  display: flex;
  color: #d7d8ea;
  margin-left: auto;
}
.day-graph-container-table .center .price .price-cent {
  color: #989bd7;
}
.day-graph-container-table .center.current-row .price {
  color: rgb(255 173 0);
}
.day-graph-container-table .center.current-row .price .price-cent {
  color: rgb(255 173 0);
}
.graph-container {
  padding: 1px;
  height: 100%;
  flex: 1;
  background: repeating-linear-gradient(
    90deg,
    #1a1d37cc,
    #1a1d37cc var(--cell-width),
    transparent var(--cell-width),
    transparent calc(var(--cell-width) + 1px)
  );
}
.graph-container.current-row {
  background-color: #45401fcc;
  background-color: #ffffff85;
}
.graph-indicator {
  background: #448ff2;
  height: 100%;
  border-radius: 0 3px 3px 0;
  animation: 0.4s in-out forwards;
  transform-origin: 0% 50%;
}
.graph-container.left > .graph-indicator {
  margin-left: auto;
  border-radius: 3px 0 0 3px;
  transform-origin: 100% 50%;
}

@keyframes in-out {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}

.legend-btn {
  cursor: pointer;
  height: 26px;
  width: 26px;
  position: absolute;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%23fff" d="M256 56C145.72 56 56 145.72 56 256s89.72 200 200 200 200-89.72 200-200S366.28 56 256 56zm0 82a26 26 0 11-26 26 26 26 0 0126-26zm48 226h-88a16 16 0 010-32h28v-88h-16a16 16 0 010-32h32a16 16 0 0116 16v104h28a16 16 0 010 32z" /></svg>');
}
.legend {
  position: absolute;
  top: 30px;
  background: #1b2946;
  border: 1px solid rgb(0, 90, 109);
  padding: 10px 0;
  right: 0;
  z-index: 1;
  white-space: nowrap;
}
.legend > div {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid rgb(0, 90, 109);
  margin: 0 10px;
}
.legend > div > span {
  padding: 2px 5px;
}
.legend > div > span:nth-child(2) {
  text-align: right;
  padding-left: 20px;
}

.alarm-btn {
  padding: 0 !important;
  display: block;
  width: 20px;
  margin: 0 5px;
}
.alarm-btn.schedule {
  cursor: pointer;
  background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><path d="M427.68 351.43C402 320 383.87 304 383.87 217.35 383.87 138 343.35 109.73 310 96c-4.43-1.82-8.6-6-9.95-10.55C294.2 65.54 277.8 48 256 48s-38.21 17.55-44 37.47c-1.35 4.6-5.52 8.71-9.95 10.53-33.39 13.75-73.87 41.92-73.87 121.35C128.13 304 110 320 84.32 351.43 73.68 364.45 83 384 101.61 384h308.88c18.51 0 27.77-19.61 17.19-32.57zM320 384v16a64 64 0 01-128 0v-16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/></svg>');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  filter: brightness(0) saturate(100%) invert(78%) sepia(11%) saturate(4507%) hue-rotate(193deg) brightness(93%)
    contrast(79%);
}
.alarm-btn.schedule.active {
  background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M440.08 341.31c-1.66-2-3.29-4-4.89-5.93-22-26.61-35.31-42.67-35.31-118 0-39-9.33-71-27.72-95-13.56-17.73-31.89-31.18-56.05-41.12a3 3 0 01-.82-.67C306.6 51.49 282.82 32 256 32s-50.59 19.49-59.28 48.56a3.13 3.13 0 01-.81.65c-56.38 23.21-83.78 67.74-83.78 136.14 0 75.36-13.29 91.42-35.31 118-1.6 1.93-3.23 3.89-4.89 5.93a35.16 35.16 0 00-4.65 37.62c6.17 13 19.32 21.07 34.33 21.07H410.5c14.94 0 28-8.06 34.19-21a35.17 35.17 0 00-4.61-37.66zM256 480a80.06 80.06 0 0070.44-42.13 4 4 0 00-3.54-5.87H189.12a4 4 0 00-3.55 5.87A80.06 80.06 0 00256 480z"/></svg>');
}