button.lrn_btn.AnswerMasking_btn.pos-middle { 
  height: 40px;
  width: 45px;
}
.lrn.lrn-assess button.lrn_btn.AnswerMasking_btn.pos-middle.lrn_active {
  box-shadow: rgb(24, 119, 177) 4px 0px 0px 0px inset;
}

button.lrn_btn.AnswerMasking_btn:before {
  content: '';
  background-image: url('./ans_mask_tool_inactive.png');
  background-size: contain;
  float: left;
  margin-left: -5px;
  height: 25px;
  width: 25px;
  position: relative;
}

button.lrn_btn.AnswerMasking_btn.lrn_active:before {
  background-image: url('./ans_mask_tool_active.png');  
}

.lrn_item_mask {
  padding-right: 25px; 
}

div.nmc-mask-div {
  position: absolute;
  top: 2px;
  bottom: 0;
  left: revert;
  right: 0;
  width: 100%;
  height: calc(100% - 4px);
  background-color: #eaeaea;
  float: right;
  border-radius: 3px;
  padding-right: 1px;
  vertical-align:middle;
  z-index: 999; /* to make sure this is on top of answer eliminator */
  
}

.lrn_draggable .nmc-mask-div {
  width: calc(100% - 4px);
  right: 2px;
  border-radius: 1px;
}

div.nmc-mask-div.unmask {
  width: 27px;
}

button.nmc-mask-button {
  float: right;
  height: 100%;
  width: 25px;
  background-image: url('./ans_mask_toggle_on.svg');
  background-size: 18px auto;
  background-repeat: no-repeat;
  background-position-y: center;
  background-position-x: center;
  border-width: 0;
  border-radius: 3px;
  background-color: #e3e0e0;
}

button.nmc-mask-button.unmask {
  background-image: url('./ans_mask_toggle_off.svg');
}

.nmc-hidden {
  display: none;
}