.special-square-input {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.special-square-input label {
  display: inline;
  float: left;
}
/**radio*/
.radio-container {
  position: relative;
  width: 16px;
  height: 16px;
  overflow: hidden;
  top: calc(42%);
  float: left;
}
.acessibility-hidden-text {
  /*hide the text*/
  color: transparent;
  line-height: 0;
  font-size: 0;
  *text-indent: -1024px;
  /*old ie does not have transparent text*/
  overflow: hidden;
  /*end hide text*/
}
.radio-container label {
  display: block;
  float: left;
  cursor: pointer;
  padding: 4px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 16px;
  height: 16px;
  /*hide the text*/
  color: transparent;
  line-height: 0;
  font-size: 0;
  *text-indent: -1024px;
  /*old ie does not have transparent text*/
  overflow: hidden;
  /*end hide text*/
}
.radio-container input[type="radio"] {
  width: 10px;
  display: block;
  margin: auto;
}
.radio-container label img.radio-img {
  background-size: cover;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 16px;
  height: 16px;
}
.radio-container label {
  background-image: url(../img/icon.btn.radio.png);
}
.radio-container label.radio-off {
  background-position: 0 0;
}
.radio-container label.radio-focus {
  background-position: -48px 0;
}
.radio-container label.radio-hover {
  background-position: -32px 0;
}
.radio-container label.radio-pressed {
  background-position: -16px 0;
}
.radio-container label.radio-on {
  background-position: -64px 0;
}
/**Checkbox*/
.checkbox-container {
  overflow: hidden;
  /*hide mac checkmark*/
  position: relative;
  display: block;
  float: left;
  width: 16px;
  height: 16px;
  top: calc(42%);
}
.checkbox-container label {
  display: block;
  cursor: pointer;
  padding: 4px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 16px;
  height: 16px;
  /*hide the text*/
  color: transparent;
  line-height: 0;
  font-size: 0;
  *text-indent: -1024px;
  /*old ie does not have transparent text*/
  overflow: hidden;
  /*end hide text*/
}
.checkbox-container input[type="checkbox"] {
  width: 10px;
  width: 1em\9;
  display: block;
  margin: auto;
}
.checkbox-container label {
  background-image: url(../img/icon.btn.checkbox.png);
}
.checkbox-container label.checkbox-off {
  background-position: 0 0;
}
.checkbox-container label.checkbox-focus {
  background-position: -48px 0;
}
.checkbox-container label.checkbox-hover {
  background-position: -32px 0;
}
.checkbox-container label.checkbox-pressed {
  background-position: -16px 0;
}
.checkbox-container label.checkbox-on {
  background-position: -64px 0;
}