.water-diagram{
  min-width:720px;
}

/*** drop zones ***/

.dropZone{
  width:96px;
  height:30px;
  padding:1px;
  position:absolute;
  z-index:800;
}

.dropZone-default{
  background-color:white;
  border: 2px solid red;
}

.dropZone-incorrect{
  background-color:red;
  border:2px solid red;
}

.dropZone-correct{
  background-color:green;
  border:2px solid green;
}

.drag-holder{
  margin-bottom:20px;
}


/*** drop zone positions **/

#zone-1{
  left:204px;
  bottom:404px;
}

#zone-2{
  left:258px;
  bottom:373px;
}

#zone-3{
  left:100px;
  bottom:314px;
}

#zone-4{
  left:260px;
  bottom:277px;
}

#zone-5{
  left:622px;
  bottom:276px;
}

#zone-6{
  left:160px;
  bottom:266px;
}

#zone-7{
  left:144px;
  bottom:136px;
}

#zone-8{
  left:334px;
  bottom:137px;
}

#zone-9{
  left:334px;
  bottom:99px;
}

#zone-10{
  left:186px;
  bottom:70px;
}

#zone-11{
  left:334px;
  bottom:65px;
}

#zone-12{
  left:548px;
  bottom:66px;
}


/*** label styling ***/

.water-label{
  width:186px;
  height:30px;
  padding:1px;
  position:absolute;
  z-index:700;
  font-weight:600;
  background-color:#b3d9ff;
  border: 2px solid #003366;
}

.water-label-complete{
  width:186px;
  height:30px;
  padding:1px;
  position:absolute;
  z-index:700;
  font-weight:600;
  background-color:#b3d9ff;
  border: 2px solid red;
}

/*** label div positions ***/

#label-1{
  left:132px;
  bottom:438px;
}


#label-2{
  left:210px;
  bottom:342px;  
}

#label-3{
  left:132px;
  bottom:166px;  
}

#label-4{
  left:136px;
  bottom:100px;  
}

#label-5{
  left:458px;
  bottom:100px;  
}

#label-6{
  left:136px;
  bottom:33px;  
}

#label-7{
  left:530px;
  bottom:16px;  
}

/*** draggables ***/

.draggable{
  color:#fff;
  background-color: #219eab;
  display:inline-block;
  margin-bottom:10px;
  font-weight:400;
  font-size:12px;
  padding:10px;
  z-index:1001;
  cursor:pointer;
}

.droppedLabel{
  font-size:10px;
  font-weight:800;
  padding: 1px;
}

.droppedLabel-default{
  background-color:transparent;
  color: #003366 ;
}

.droppedLabel-check{
  background-color:transparent;
  color: white;
}

/*** feedback ***/
.feedback{
  display:none;
}

.alert-key{
  background-color:rgba(0, 128, 128, 0.1);
}

/*** Breakpoints ***/

/* Desktop */
@media(min-width: 992px){

  /*** drop zones ***/

  .dropZone{
    width:120px;
    height:38px;
    padding:1px;
  }

  #zone-1{
    left:264px;
    bottom:527px;
  }

  #zone-2{
    left:330px;
    bottom:488px;
  }

  #zone-3{
    left:134px;
    bottom:410px;
  }

  #zone-4{
    left:332px;
    bottom:364px;
  }

  #zone-5{
    left:810px;
    bottom:366px;
  }

  #zone-6{
    left:202px;
    bottom:350px;
  }

  #zone-7{
    left:182px;
    bottom:180px;
  }

  #zone-8{
    left:430px;
    bottom:176px;
  }

  #zone-9{
    left:430px;
    bottom:130px;
  }

  #zone-10{
    left:236px;
    bottom:94px;
  }

  #zone-11{
    left:430px;
    bottom:84px;
  }

  #zone-12{
    left:708px;
    bottom:86px;
  }


  /*** draggables ***/

 /* .draggable{
    font-size:13px;
    padding:6px 4px;
  } */

  /*** label styling ***/

  .water-label{
    width:240px;
    padding:1px;
    font-size:15px;
  }

  /*** label div positions ***/

  #label-1{
    left:166px;
    bottom:572px;
  }


  #label-2{
    left:272px;
    bottom:457px;  
  }

  #label-3{
    left:171px;
    bottom:219px;  
  }

  #label-4{
    left:171px;
    bottom:134px; 
  }

  #label-5{
    left:592px;
    bottom:132px;  
  }

  #label-6{
    left:171px;
    bottom:53px;  
  }

  #label-7{
    left:692px;
    bottom:30px;  
  }

  .droppedLabel{
    font-size:11px;
    padding:4px;
  }

}

/* Large Desktop */
@media(min-width: 1200px){

  .dropZone{
    width:140px;
    height:42px;
    padding:1px;
  }

  #zone-1{
    left:322px;
    bottom:638px;
  }

  #zone-2{
    left:402px;
    bottom:594px;
  }

  #zone-3{
    left:164px;
    bottom:498px;
  }

  #zone-4{
    left:400px;
    bottom:442px;
  }

  #zone-5{
    left:984px;
    bottom:440px;
  }

  #zone-6{
    left:242px;
    bottom:426px;
  }

  #zone-7{
    left:222px;
    bottom:220px;
  }

  #zone-8{
    left:524px;
    bottom:214px;
  }

  #zone-9{
    left:524px;
    bottom:160px;
  }

  #zone-10{
    left:284px;
    bottom:116px;
  }

  #zone-11{
    left:524px;
    bottom:104px;
  }

  #zone-12{
    left:857px;
    bottom:104px;
  }


  .draggable{
    font-size:14px;
    padding:10px;
  }

  /*** label styling ***/

  .water-label{
    width:290px;
    height:36px;
    padding:1px;
    font-size:20px;
  }

  /*** label div positions ***/

  #label-1{
    left:199px;
    bottom:694px;
  }


  #label-2{
    left:322px;
    bottom:555px;  
  }

  #label-3{
    left:204px;
    bottom:264px;  
  }

  #label-4{
    left:208px;
    bottom:162px; 
  }

  #label-5{
    left:716px;
    bottom:162px;  
  }

  #label-6{
    left:208px;
    bottom:64px;  
  }

  #label-7{
    left:846px;
    bottom:36px;  
  }

  .droppedLabel{
    font-size:14px;
    line-height:14px;
    padding:6px;
  }

}