.checkbox_container {
  display: block;
  position: relative;
  padding-left: 20px;
  cursor: pointer; 
  margin:0;
}

/* Hide the default checkbox */
.checkbox_container input {
  visibility: hidden;
  cursor: pointer;
}

/* Create a custom checkbox */
.mark {
  position: absolute;
  top: 7px;
  left: 0;
  height: 15px;
  width: 15px;
  background-color: transparent;
border:2px solid #000;
}

.checkbox_container:hover input ~ .mark {
  /*background-color: gray;*/
}

.checkbox_container input:checked ~ .mark {
  color:#000;
}

/* Create the mark/indicator (hidden when not checked) */
.mark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the mark when checked */
.checkbox_container input:checked ~ .mark:after {
  display: block;
}

/* Style the mark/indicator */
.checkbox_container .mark:after {
  left: 3px;
  top: 0;
  width: 5px;
  height: 10px;
  border: solid black;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
@media  screen and (max-width:500px) {
.word_style span:after {
   content:"\a";
    white-space: pre;
}
}