#sorting-game #sorting-game-grid #sortable{
  padding-left:0px;
}

#sorting-game #sorting-game-grid #sortable.sortable li{
  cursor: move;
}

#sorting-game #sorting-game-grid #sortable li{
  list-style: none;
  padding:15px 40px 15px 15px;
  margin-bottom:5px;
  border-radius: 4px;
  background: rgb(247,247,247);
  border:0px solid transparent;
  position: relative;
  cursor: not-allowed;
}


#sorting-game #sorting-game-grid #sortable li i{
  margin-right:10px;
}

#sorting-game-form .form-footer{
  display: inline-grid;
  grid-column-gap: 2%;
  width: 100%;
  grid-template-columns: 49% 49%;
}

#sorting-game-form .form-footer button[type="submit"]:disabled{
  opacity: .3;
  cursor: not-allowed;
}

#sorting-game-form .form-footer button[type="submit"]{
  color:white;
  padding:8px 80px;
  background-color:rgb(0,177,159);
  outline:none;
  border:0px solid transparent;
  border-radius: .25rem;
  float:right;
}

#sorting-game-form .sorting-game-error {
  margin-bottom: 0px;
  color:red;
  float:left;
  width:100%;
  margin-top: 10px;
}

#sorting-game-form .sorting-game-success {
  margin-bottom: 0px;
  color:rgb(0,177,159);
  float:left;
  width:100%;
  margin-top: 10px;
}

.response-text-holder{
  padding-left:7px;
}

#sorting-game #sorting-game-grid #sortable li::after{
  position: absolute;
  top:0px;
  right:0px;
  height:100%;
  width:30px;
  content:"";
  border-radius: 0 .25rem .25rem 0 ;
}

#sorting-game #sorting-game-grid #sortable li.wrong::after{
  background: red;
}

#sorting-game #sorting-game-grid #sortable li.right::after{
  background:rgb(0,177,159);
}


@media screen and (max-width:991px){
  #sorting-game-form .form-footer{
    display: inline-grid;
    grid-column-gap: 0%;
    width: 100%;
    grid-template-columns: 100%;
  }
}
