input[type=checkbox] + label {
  display: block;
  margin: 0.2em;
  cursor: pointer;
  padding: 0.2em;
  font-family: Montserrat;
  font-size: 1em;
 font-weight: 400 !important;
}

input[type=checkbox] {
  display: none;
}

input[type=checkbox] + label:before {
content: "\2714";
    border: 0.1em solid rgb(0, 0, 0);
    border-radius: 0.2em;
    font-size: 0.8em;
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    padding-left: 0.2em;
    padding-bottom: 0.3em;
    margin-right: 0.4em;
    vertical-align: bottom;
    color: transparent;
    transition: .2s;
}

input[type=checkbox] + label:active:before {
  transform: scale(0);
}

input[type=checkbox]:checked + label:before {
  background-color: rgb(197, 12, 129);
  border-color: rgb(197, 12, 129);
  color: rgb(255, 255, 255);
}

input[type=checkbox]:disabled + label:before {
  transform: scale(1);
  border-color: rgb(170, 170, 170);
}

input[type=checkbox]:checked:disabled + label:before {
  transform: scale(1);
  background-color: rgb(187, 255, 187);
  border-color: rgb(187, 255, 187);
}


.checkbox>input[type=checkbox] + label {
  display: block;
  margin: 0.2em;
  cursor: pointer;
  padding: 0.2em;
  font-family: Montserrat;
  font-size: 1em;
 font-weight: 400 !important;
}

input[type=checkbox] {
  display: none;
}

.checkbox>input[type=checkbox] + label:before {
content: "\2714";
    border: 0.1em solid rgb(0, 0, 0);
    border-radius: 0.2em;
    font-size: 0.8em;
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    padding-left: 0.2em;
    padding-bottom: 0.3em;
    margin-right: 0.4em;
    vertical-align: bottom;
    color: transparent;
    transition: .2s;
}

.checkbox>input[type=checkbox] + label:active:before {
  transform: scale(0);
}

.checkbox>input[type=checkbox]:checked + label:before {
  background-color: rgb(197, 12, 129);
  border-color: rgb(197, 12, 129);
  color: rgb(255, 255, 255);
}

.checkbox>input[type=checkbox]:disabled + label:before {
  transform: scale(1);
  border-color: rgb(170, 170, 170);
}

.checkbox>input[type=checkbox]:checked:disabled + label:before {
  transform: scale(1);
  background-color: #bfb;
  border-color: #bfb;
}

/* Hide the browser's default radio button */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 1.5vw;
  width: 1.5vw;
  background-color: rgba(255, 197, 1, 0.4);
  border-radius: 50%;
}

label.container{
	font-weight: normal;
}
.container input ~ .checkmark  {
  border: 1px solid rgb(0, 0, 0);
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: rgb(255, 197, 1);
}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: rgb(255, 197, 1);
}

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

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.container .checkmark:after {
 	top: 35%;
	left: 35%;
	width: 30%;
	height: 30%;
	border-radius: 50%;
	border: 0px solid black;
	background: #000;
}