/* Styles for the public pages (app/routes/public*.py). */

.pub-container {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}
.pub-main { padding-top: 24px; padding-bottom: 80px; }
.pub-header {
  border-top: 2px solid #ed8509;
  background-color: var(--background-1);
  line-height: 50px;
}
.pub-label {
  font-size: 12px;
  font-weight: bold;
  line-height: 20px;
  margin-top: 15px;
  padding: 0 8px;
  border-radius: 4px;
  background-color: #ed8509;
  color: white;
}
.pub-footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  line-height: 40px;
  font-size: 12px;
  background-color: var(--background-1);
  box-shadow: 0 0 5px #999;
}
.pub-clear { clear: both; }

/* 24-hour uptime timeline */
.pub-timeline { margin-top: 12px; }
.pub-timeline-label {
  width: 8.33333%;
  font-size: 8px;
  float: left;
  height: 30px;
  margin-bottom: -20px;
  border-right: 1px solid #999;
  text-align: right;
  position: relative;
  z-index: 1;
}
.pub-event {
  height: 20px;
  float: left;
  position: relative;
  z-index: 0;
  background-color: #ff9f00;
}
.pub-event-U { background-color: var(--background-12); }
.pub-event-D { background-color: var(--background-13); }
.pub-event-S { background-color: var(--background-14); }
.pub-uptime-info {
  margin-top: 12px;
  padding: 5px;
  background-color: var(--background-5);
}

/* 24-hour response times by region */
.pub-rt { position: relative; overflow: hidden; }
.pub-rt-row { display: flex; margin-bottom: 3px; min-height: 20px; }
.pub-rt-name { width: 16.6667%; padding-right: 8px; font-size: 13px; }
.pub-rt-bars { width: 83.3333%; position: relative; }
.pub-rt-scale { display: flex; font-size: 10px; color: #999; }
.pub-rt-tick { width: 20%; text-align: right; border-right: 1px solid #999; }
.pub-rt-segment { height: 20px; float: left; }
.pub-rt-total { float: left; margin-left: 10px; font-size: 13px; line-height: 20px; }
.pub-rt-dns { background: #9b61a7; }
.pub-rt-ssl { background: #98cb65; }
.pub-rt-connect { background: #f06c53; }
.pub-rt-ttfb { background: #f0ca4d; }
.pub-rt-ttlb { background: #00b9d9; }
.pub-rt-legend { margin-top: 16px; }
.pub-rt-key {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: 12px;
  margin-right: 4px;
}

/* auto-refresh button with a countdown bar */
.pub-refresh-btn { position: relative; overflow: hidden; }
.pub-refresh-countdown {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background-color: orange;
  animation-name: pub-countdown;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
@keyframes pub-countdown {
  from { width: 100%; }
  to { width: 0; }
}