/*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*/