/*selection css Start*/
input[type="checkbox"] ~ label .box-text::selection,
input[type="radio"] ~ label .box-text::selection {
  background-color: transparent;
  color: #5f5f5f !important;
}
input[type="checkbox"] ~ label .box-text::-moz-selection,
input[type="radio"] ~ label .box-text::-moz-selection {
  background-color: transparent;
  color: #5f5f5f !important;
}
input[type="checkbox"] ~ label::selection,
input[type="radio"] ~ label::selection {
  background-color: transparent;
  color: #5f5f5f !important;
}
input[type="checkbox"] ~ label::-moz-selection,
input[type="radio"] ~ label::-moz-selection {
  background-color: transparent;
  color: #5f5f5f !important;
}
/*selection css End*/

/*text style and original input hide css Start*/
input[type="radio"] {
  display: none;
}
input[type="checkbox"] {
  visibility: hidden;
}
input[type="checkbox"] ~ label,
input[type="radio"] ~ label {
  display: table;
}
input[type="checkbox"] ~ label *,
input[type="radio"] ~ label * {
  vertical-align: middle;
}
input[type="checkbox"] ~ label .box-text,
input[type="radio"] ~ label .box-text {
  font-size: 18px;
  font-weight: 400;
}
/*text style and original input hide css End*/

/*box style css Start*/
input[type="checkbox"] ~ label .box,
input[type="radio"] ~ label .box {
  height: 18px;
  width: 18px;
  border: 1px solid #000;
  position: relative;
  display: inline-block;
}
input[type="checkbox"]:checked ~ label .box::before {
  content: url("../images/check.png");
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
  display: flex;
}
input[type="radio"]:checked ~ label .box::before {
  content: "";
  height: 10px;
  width: 10px;
  background-color: #7721b6;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/*box style css End*/