html, body {
  margin:0;
  padding:0;
  height:100%;
  width:100%}
#root{
  /*top:0;bottom:0;
  left:0;right:0;*/
  display: flex;
  flex: auto;
  height: 100vh;
  /* -webkit-box-sizing: border-box; */
  box-sizing: border-box;
  border: 0px solid #f00;
}

.flex {
  flex:auto;
  display:flex;
  flex-direction: column;
}

h1 {text-align:center}

.main {
  display:flex;
  flex: auto;
  flex-direction: column;
  border:0px solid #000;
  height: calc(100%-180px);

}
.content{
  display:flex;
  max-width:600px;
  margin:0 auto;
  flex-direction: column;
  justify-items: center;
  text-align: center;
}

.content img{width:100%;}

h1{
  width:100%;
  color:#fb5858;
}

.steps, .footer {
  height: 90px;
  background: #ffe7e0;
  display:flex;
  min-height: 90px;
  align-items:center;
  justify-content:center;
}

.bullet {
  margin:8px;
  display:inline-block;
  width:10px;
  height:10px;
  background:#fabdac;
  border-radius:10px;
  border:solid 5px #ffe7e0;
}

.line {
  display:inline-block;
  width:30px;
  height:2px;
  line-height:10px;
  background:#fabdac;
}



.bullet.complete {
  background:#ffe7e0;
  border-radius:10px;
  border:solid 5px #fb5858;
}

.line.complete {
  background:#fb5858;
}




button::-moz-focus-inner {
  border: 0;
}

button {
  background:#fb5858;
  cursor: pointer;
  padding:0 20px;
  line-height:40px;
  border:none;
  outline:none;
  border-radius:4px;
  box-shadow:0 1px 2px #ccc;
  color:#fff;
  font-weight:600;
  text-decoration:none;
}

button:hover {
  background:#ff0065;

}

.listImg{text-align:center}

.blocksColor{
display:inline-block;width:50px;height:50px;
border-radius:50px;
overflow: hidden;
margin:0px 4px;
cursor:pointer;
border:8px solid #fff;
-webkit-user-select: none; /* Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+/Edge */
user-select: none; /* Standard */
outline: none;
}



.blocksColor.active{border:8px solid #fb5858}