@charset "UTF-8";

/* ===============================
   Keyframes for progress fill
================================= */
@keyframes grow-v { 0% { height: 0 } to { height: var(--fill-percentage, 0) } }
@keyframes grow-h { 0% { width: 0 } to { width: var(--fill-percentage, 0) } }

@keyframes costGrow-v { 0% { height: 0 } to { height: var(--cost-fill-percentage, 0) } }
@keyframes costGrow-h { 0% { width: 0 } to { width: var(--cost-fill-percentage, 0) } }

@keyframes frozenGrow-v { 0% { height: 0 } to { height: var(--frozen-fill-percentage, 0) } }
@keyframes frozenGrow-h { 0% { width: 0 } to { width: var(--frozen-fill-percentage, 0) } }

/* ===============================
   Progress Container
================================= */
.progress-container {
  --cost-fill-percentage: 0%;
  --frozen-fill-percentage: 0%;
  align-items: center;
  display: flex;
  position: relative;
}

.progress-container .horizontal { width: 100%; }
.progress-container .vertical { height: 100%; }

.progress-container #container {
  border: 2px solid #fff;
  border-radius: .4rem;
  box-shadow: -2px 0 8px 0 hsla(0,0%,100%,.6);
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

/* Horizontal container */
.progress-container.horizontal #container {
  height: 80px;
  width: 50vw;
}

@media (min-width: 2000px) {
  .progress-container.horizontal #container { width: 60vw; }
}
@media (min-width: 1850px) and (max-width: 2000px) {
  .progress-container.horizontal #container { width: 55vw; }
}
@media (min-width: 1550px) and (max-width: 1850px) {
  .progress-container.horizontal #container { width: 50vw; }
}
@media (min-width: 990px) and (max-width: 1550px) {
  .progress-container.horizontal #container { width: 40vw; }
}
@media (max-width: 990px) {
  .progress-container.horizontal #container { width: 70vw; }
}

/* Vertical container */
.progress-container.vertical #container {
  height: 20vw;
  width: 80px;
}

/* ===============================
   Segment Lines
================================= */
.progress-container #container > .segment-lines {
  height: 100%;
  pointer-events: none;
  position: absolute;
  width: 100%;
  z-index: 4;
}

.progress-container.vertical #container > .segment-lines { top: 0; }
.progress-container.horizontal #container > .segment-lines { left: 0; }

.progress-container #container > .segment-lines > div {
  border-top: 1px solid #fff;
  position: absolute;
}

.progress-container.vertical #container > .segment-lines > div { width: 25%; }
.progress-container.horizontal #container > .segment-lines > div {
  border-left: 1px solid #fff;
  height: 25%;
  position: absolute;
}

/* ===============================
   Segment Labels
================================= */
.progress-container .segment-labels {
  display: flex;
  height: 100%;
  justify-content: space-between;
  position: absolute;
  width: 100%;
  z-index: 5;
}

.progress-container.vertical .segment-labels {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block; /* disable flexbox */
}

.progress-container.vertical .segment-label {
  position: absolute;
  width: 100%;
  text-align: center;
}

.progress-container.horizontal .segment-labels { flex-direction: row; }

.progress-container .segment-label {
  align-items: center;
  background: transparent;
  color: #fff;
  display: flex;
  font-size: .8rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.progress-container.vertical .segment-label {
  text-align: center;
  width: 100%;
}

.progress-container.horizontal .segment-label {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  position: absolute;
  text-align: center;
}

@media (max-width: 1850px) {
  .progress-container .segment-label .hide-on-small-screen { display: none; }
}

.progress-container .hide-on-small-screen {
  color: #fff;
  display: inline;
  margin-left: .2rem;
}

/* ===============================
   Label Positions (Vertical)
================================= */
.progress-container.vertical .segment-label:first-child { top: 0%; }
.progress-container.vertical .segment-label:nth-child(2) { top: 5%; }
.progress-container.vertical .segment-label:nth-child(3) { top: 10%; }
.progress-container.vertical .segment-label:nth-child(4) { top: 15%; }
.progress-container.vertical .segment-label:nth-child(5) { top: 20%; }
.progress-container.vertical .segment-label:nth-child(6) { top: 25%; }
.progress-container.vertical .segment-label:nth-child(7) { top: 30%; }
.progress-container.vertical .segment-label:nth-child(8) { top: 35%; }
.progress-container.vertical .segment-label:nth-child(9) { top: 40%; }
.progress-container.vertical .segment-label:nth-child(10) { top: 45%; }
.progress-container.vertical .segment-label:nth-child(11) { top: 50%; }
.progress-container.vertical .segment-label:nth-child(12) { top: 55%; }
/* S2 */
.progress-container.vertical .segment-label:nth-child(13) { top: 60%; }
.progress-container.vertical .segment-label:nth-child(14) { top: 65%; }
.progress-container.vertical .segment-label:nth-child(15) { top: 70%; }
.progress-container.vertical .segment-label:nth-child(16) { top: 75%; }
.progress-container.vertical .segment-label:nth-child(17) { top: 80%; }
.progress-container.vertical .segment-label:nth-child(18) { top: 85%; }
.progress-container.vertical .segment-label:nth-child(19) { top: 92%; }
/* ===============================
   Segment Lines (Vertical)
================================= */
/* S1 */
.progress-container.vertical #container > .segment-lines > div:first-child { top: 5%; }
.progress-container.vertical #container > .segment-lines > div:nth-child(2) { top: 10%; }
.progress-container.vertical #container > .segment-lines > div:nth-child(3) { top: 15%; }
.progress-container.vertical #container > .segment-lines > div:nth-child(4) { top: 20%; }
.progress-container.vertical #container > .segment-lines > div:nth-child(5) { top: 25%; }
.progress-container.vertical #container > .segment-lines > div:nth-child(6) { top: 30%; }
.progress-container.vertical #container > .segment-lines > div:nth-child(7) { top: 35%; }
.progress-container.vertical #container > .segment-lines > div:nth-child(8) { top: 40%; }
.progress-container.vertical #container > .segment-lines > div:nth-child(9) { top: 45%; }
.progress-container.vertical #container > .segment-lines > div:nth-child(10) { top: 50%; }
.progress-container.vertical #container > .segment-lines > div:nth-child(11) { top: 55%; }

/* S2 */
.progress-container.vertical #container > .segment-lines > div:nth-child(12) { top: 60%; }
.progress-container.vertical #container > .segment-lines > div:nth-child(13) { top: 65%; }
.progress-container.vertical #container > .segment-lines > div:nth-child(14) { top: 70%; }
.progress-container.vertical #container > .segment-lines > div:nth-child(15) { top: 75%; }
.progress-container.vertical #container > .segment-lines > div:nth-child(16) { top: 80%; }
.progress-container.vertical #container > .segment-lines > div:nth-child(17) { top: 85%; }
.progress-container.vertical #container > .segment-lines > div:nth-child(18) { top: 90%; }


/* ===============================
   Label Positions (Horizontal)
================================= */
/* S1 */
.progress-container.horizontal .segment-label:first-child { left: 2%; }
.progress-container.horizontal .segment-label:nth-child(2) { left: 12%; }
.progress-container.horizontal .segment-label:nth-child(3) { left: 17%; }
.progress-container.horizontal .segment-label:nth-child(4) { left: 22%; }
.progress-container.horizontal .segment-label:nth-child(5) { left: 27%; }
.progress-container.horizontal .segment-label:nth-child(6) { left: 32%; }
.progress-container.horizontal .segment-label:nth-child(7) { left: 37%; }
.progress-container.horizontal .segment-label:nth-child(8) { left: 42%; }
.progress-container.horizontal .segment-label:nth-child(9) { left: 47%; }
.progress-container.horizontal .segment-label:nth-child(10) { left: 52%; }
.progress-container.horizontal .segment-label:nth-child(11) { left: 57%; }
.progress-container.horizontal .segment-label:nth-child(12) { left: 62%; }
/* S2 */
.progress-container.horizontal .segment-label:nth-child(13) { left: 67%; }
.progress-container.horizontal .segment-label:nth-child(14) { left: 72%; }
.progress-container.horizontal .segment-label:nth-child(15) { left: 77%; }
.progress-container.horizontal .segment-label:nth-child(16) { left: 82%; }
.progress-container.horizontal .segment-label:nth-child(17) { left: 87%; }
.progress-container.horizontal .segment-label:nth-child(18) { left: 92%; }
.progress-container.horizontal .segment-label:nth-child(19) { left: 97%; }


/* ===============================
   Segment Lines (Horizontal)
================================= */
/* S1 */
.progress-container.horizontal #container > .segment-lines > div:first-child { left: 10%; }
.progress-container.horizontal #container > .segment-lines > div:nth-child(2) { left: 15%; }
.progress-container.horizontal #container > .segment-lines > div:nth-child(3) { left: 20%; }
.progress-container.horizontal #container > .segment-lines > div:nth-child(4) { left: 25%; }
.progress-container.horizontal #container > .segment-lines > div:nth-child(5) { left: 30%; }
.progress-container.horizontal #container > .segment-lines > div:nth-child(6) { left: 35%; }
.progress-container.horizontal #container > .segment-lines > div:nth-child(7) { left: 40%; }
.progress-container.horizontal #container > .segment-lines > div:nth-child(8) { left: 45%; }
.progress-container.horizontal #container > .segment-lines > div:nth-child(9) { left: 50%; }
.progress-container.horizontal #container > .segment-lines > div:nth-child(10) { left: 55%; }
.progress-container.horizontal #container > .segment-lines > div:nth-child(11) { left: 60%; }

/* S2 */
.progress-container.horizontal #container > .segment-lines > div:nth-child(12) { left: 65%; }
.progress-container.horizontal #container > .segment-lines > div:nth-child(13) { left: 70%; }
.progress-container.horizontal #container > .segment-lines > div:nth-child(14) { left: 75%; }
.progress-container.horizontal #container > .segment-lines > div:nth-child(15) { left: 80%; }
.progress-container.horizontal #container > .segment-lines > div:nth-child(16) { left: 85%; }
.progress-container.horizontal #container > .segment-lines > div:nth-child(17) { left: 90%; }
.progress-container.horizontal #container > .segment-lines > div:nth-child(18) { left: 95%; }
.progress-container.horizontal #container > .segment-lines > div:nth-child(19) { left: 100%; }

/* ===============================
   Inputs & Labels
================================= */
.progress-container input { display: none; }

.progress-container label {
  background: transparent;
  display: block;
  height: 100%;
  position: relative;
  width: 100%;
}

/* ===============================
   Fill Styles
================================= */
.progress-container label .fill {
  bottom: 0;
  box-shadow: inset 0 0 8px 1px #fff;
  left: 0;
  position: absolute;
  z-index: 1;
}

.progress-container.vertical label .fill {
  animation: grow-v 2s forwards;
  background: linear-gradient(0deg, #a3e2ef 35%, #4f9cc0);
  height: 0;
  width: 100%;
}

.progress-container.horizontal label .fill {
  animation: grow-h 2s forwards;
  background: linear-gradient(90deg, #a3e2ef 35%, #4f9cc0);
  height: 100%;
  width: 0;
}

/* ===============================
   Cost Fill
================================= */
.progress-container label .cost-fill {
  bottom: 0;
  left: 0;
  opacity: .9;
  position: absolute;
  z-index: 2;
}

.progress-container.vertical label .cost-fill {
  animation: costGrow-v 2s forwards;
  height: 0;
  width: 100%;
}

.progress-container.horizontal label .cost-fill {
  animation: costGrow-h 2s forwards;
  height: 100%;
  width: 0;
}

.cost-fill.overcost { background: #ff5722; }
.cost-fill.undercost { background: #ffc107; }
.cost-fill.regress { background: green; }

/* ===============================
   Frozen Fill
================================= */
.progress-container label .frozen-fill {
  background: linear-gradient(90deg, #333 35%, #646464);
  bottom: 0;
  box-shadow: inset 0 0 8px 1px #fff;
  left: 0;
  position: absolute;
  z-index: 3;
}

.progress-container.vertical label .frozen-fill {
  animation: frozenGrow-v 2s forwards;
  height: 0;
  width: 100%;
}

.progress-container.horizontal label .frozen-fill {
  animation: frozenGrow-h 2s forwards;
  height: 100%;
  width: 0;
}

/* ===============================
   Background
================================= */
.progress-container label .background-wrapper {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/172299/bubbles-mask.gif);
  background-size: cover;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 5;
}

/* ===============================
   Span Text
================================= */
.progress-container span {
  color: #4f9cc0;
  display: inline-block;
  font-size: .7rem;
  letter-spacing: 1.5px;
  margin-top: .7rem;
  text-transform: uppercase;
}
.progress-container span:last-child { float: right; }