.react-content{
  width: 100%;
}

.react-content-prefetch{
  width: 100%;
  max-height: 100%;
  min-height: 200px;
  display: flex;
  display: -webkit-flex;
  display: -moz-flex;
  display: -o-flex;
  align-items: center;
  -webkit-align-items: center;
  -o-align-items: center;
  -moz-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  -o-justify-content: center;
  -moz-justify-content: center;
  flex-direction: column;
  padding: 20px;
  border-radius: 5px;
}

.react-content-prefetch > div{
  height: 1.5cm;
  width: 1.5cm;
  border-radius: 100px;
  border: 5px solid transparent;
  border-bottom: 5px solid #29b;
  margin-top: 20px;
  animation: spin 0.5s infinite;
}

.error{
  border: 1px solid #f54;
}

.CreateLeague{
  margin-right: 20px;
}

.CreateLeague-Steps{
  display: flex;
  display: -webkit-flex;
  display: -moz-flex;
  display: -o-flex;
  align-items: center;
  -webkit-align-items: center;
  -o-align-items: center;
  -moz-align-items: center;
  line-height: 50px;
  background: #eee;
}

.CreateLeague-Steps > div{
  flex: 1;
  color: #374353;
  background: #eee;
  cursor: pointer;
  display: flex;
  display: -webkit-flex;
  display: -moz-flex;
  display: -o-flex;
  align-items: center;
  -webkit-align-items: center;
  -o-align-items: center;
  -moz-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  -o-justify-content: center;
  -moz-justify-content: center;
  line-height: 50px;
}

.CreateLeague-Steps:hover{
  background: #374353;
}

.CreateLeague-Steps > div > span{
  flex: 1;
  display: block;
  text-align: center;
}

.CreateLeague-Steps > div:hover{
  color: #fff;
  background: #374353;
}

.CreateLeague-Steps > div.active{
  color: #fff;
  background: #374353;
  -webkit-clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
  clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
}

.CreateLeague-Steps > div.active:last-child{
  color: #fff;
  background: #374353;
  -webkit-clip-path: none;
  clip-path: none;
}

.CreateLeague-Steps > div.done{
  color: #fff;
  background: #374353;
  cursor: not-allowed;
}

.CreateLeague-Steps > div.active::asfter{
  content: "";
  display: block;
  width: 50px;
  height: 50px;
  background: #eee;
  -webkit-clip-path: polygon(100% 1%, 100% 100%, 0% 100%, 45% 50%, 0% 0%);
  clip-path: polygon(100% 1%, 100% 100%, 0% 100%, 45% 50%, 0% 0%);
}

.CreateLeague-Forms{

}

.CreateLeague-Form{

}

.CreateLeague-Form > button{
  margin: 20px 0px;
  line-height: 30px;
  border: none;
  background: #4EA3C9;
  color: #eee;
  width: 60%;
}

.CreateLeague-Form > button:hover{
  background: #374353;
}

.CreateLeague-Form-Input{

}

.CreateLeague-Form-Input > h2{

}

.CreateLeague-Form-Input > input{
  padding: 0.2em;
  width: 60%;
}

.CreateLeague-Form-Input > select{
  padding: 0.2em;
  width: 60%;
  background: none
}

.team-selections{

}

.team-selection{
  margin: 10px 0px;
  border: 2px solid #eee;
  padding: 2px 2px 0px 2px;
}

.team-selection > .this-teams{
  display: flex;
  display: -webkit-flex;
  display: -moz-flex;
  display: -o-flex;
  justify-content: center;
  -webkit-justify-content: center;
  -o-justify-content: center;
  -moz-justify-content: center;
  flex-direction: column;
}

.team-selected{
  line-height: 30px;
  padding: 10px 15px;
  background: #eee;
  margin: 2px 0px;
}

.add-team{
  width: 450px;
  padding: 30px;
}

.add-team h1{
  margin: 0 0 20px 0!important;
}

.add-team button{
  margin: 10px 0px;
  width: 100%;
  line-height: 40px;
  background: #384353;
  color: #fff;
  border: none;
}

.add-team button:hover{
  background: #4ea3c9;
}

.add-team-item{
  cursor: pointer;
  display: flex;
  display: -webkit-flex;
  display: -moz-flex;
  display: -o-flex;
  align-items: center;
  -webkit-align-items: center;
  -o-align-items: center;
  -moz-align-items: center;
}

.add-team-item > img{
  margin: 10px;
  width: 30px;
  height: 30px;
}

.add-team-item > span{

}

.add-team-item:hover{
  background: #eee;
}

.text-field{
  display: block;
  width: 95%;
}

.text-field span{
  display: block;
  margin: 0px 0px 2px 0px;
}

.text-field .input-for{
  display: block;
  width: 100%;
}

.text-field .input-for input{
  display: block;
  width: 100%;
  padding: 5px;
  line-height: 15px;
}

.text-field .input-for input.error, .error{
  border: 1px solid #f43!important;
}

.text-field .input-for .list{
  max-height: 200px;
  overflow: auto;
  background: #fff;
  display: block;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  position: absolute;
}

.text-field .input-for .list .item{
  display: flex;
  display: -webkit-flex;
  display: -moz-flex;
  display: -o-flex;
  align-items: center;
  -webkit-align-items: center;
  -o-align-items: center;
  -moz-align-items: center;
}

.text-field .input-for .list .item:hover{
  background: #4ea3c9;
  color:#fff
}

.text-field .input-for .list .item img{
  height: 30px;
  width: 30px;
  border-radius: 100px;
  background: #ddd;
  margin: 5px 30px 5px 5px;
}

.text-field .input-for .list .item span{
  flex:1;
}

@keyframes spin {
  from{
    transform: rotate(0deg);
  }
  25%{
    transform: rotate(90deg);
  }
  50%{
    transform: rotate(180deg);
  }
  75%{
    transform: rotate(270deg);
  }
  to{
    transform: rotate(360deg);
  }
}