/* The container #000000*/
.container1 {
    display: block;
    position: relative; 
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.container1 input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark1 {
    position: absolute;
    border:1px solid black;
    top: 0;
    left: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 20%; 
    background-color: #000000;
}



/* When the checkbox is checked, add a blue background */
.container1 input:checked ~ .checkmark1 {
    background-color: #000000;
}

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

/* Show the checkmark when checked */
.container1 input:checked ~ .checkmark1:after {
    display: block;
}

/* Style the checkmark/indicator */
.container1 .checkmark1:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/**************************2****#FFFFFF********************************/

/* The container2 */
.container2 {
    display: block;
    position: relative; 
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.container2 input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark2 {
    position: absolute;
    border:1px solid black;
    top: 0;
    left: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 20%;
    background-color: #FFFFFF;
}



/* When the checkbox is checked, add a blue background */
.container2 input:checked ~ .checkmark2 {
    background-color: #FFFFFF;
}

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

/* Show the checkmark when checked */
.container2 input:checked ~ .checkmark2:after {
    display: block;
}

/* Style the checkmark/indicator */
.container2 .checkmark2:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid black;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}




/**************************3****#1FA292********************************/

/* The container3 */
.container3 {
    display: block;
    position: relative;

    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.container3 input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark3 {
    position: absolute;
    border:1px solid black;
    top: 0;
    left: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 20%; 
    background-color: #1FA292;
}



/* When the checkbox is checked, add a blue background */
.container3 input:checked ~ .checkmark3 {
    background-color: #1FA292;
}

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

/* Show the checkmark when checked */
.container3 input:checked ~ .checkmark3:after {
    display: block;
}

/* Style the checkmark/indicator */
.container3 .checkmark3:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}




/**************************4****#9ED6D0********************************/

/* The container4 */
.container4 {
    display: block;
    position: relative;

    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.container4 input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark4 {
    position: absolute;
    border:1px solid black;
    top: 0;
    left: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 20%; 
    background-color: #9ED6D0;
}



/* When the checkbox is checked, add a blue background */
.container4 input:checked ~ .checkmark4 {
    background-color: #9ED6D0;
}

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

/* Show the checkmark when checked */
.container4 input:checked ~ .checkmark4:after {
    display: block;
}

/* Style the checkmark/indicator */
.container4 .checkmark4:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid black;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}



/**************************5****#737374********************************/

/* The container5 */
.container5 {
    display: block;
    position: relative;

    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.container5 input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark5 {
    position: absolute;
    border:1px solid black;
    top: 0;
    left: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 20%; 
    background-color: #737374;
}



/* When the checkbox is checked, add a blue background */
.container5 input:checked ~ .checkmark5 {
    background-color: #737374;
}

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

/* Show the checkmark when checked */
.container5 input:checked ~ .checkmark5:after {
    display: block;
}

/* Style the checkmark/indicator */
.container5 .checkmark5:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}



/**************************6****#C2C2C2********************************/

/* The container6 */
.container6 {
    display: block;
    position: relative;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.container6 input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark6 {
    position: absolute;
    border:1px solid black;
    top: 0;
    left: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 20%; 
    background-color: #C2C2C2;
}



/* When the checkbox is checked, add a blue background */
.container6 input:checked ~ .checkmark6 {
    background-color: #C2C2C2;
}

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

/* Show the checkmark when checked */
.container6 input:checked ~ .checkmark6:after {
    display: block;
}

/* Style the checkmark/indicator */
.container6 .checkmark6:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid black;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}


/**************************7****#00A1E2********************************/

/* The container7 */
.container7 {
    display: block;
    position: relative;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.container7 input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark7 {
    position: absolute;
    border:1px solid black;
    top: 0;
    left: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 20%; 
    background-color: #00A1E2;
}



/* When the checkbox is checked, add a blue background */
.container7 input:checked ~ .checkmark7 {
    background-color: #00A1E2;
}

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

/* Show the checkmark when checked */
.container7 input:checked ~ .checkmark7:after {
    display: block;
}

/* Style the checkmark/indicator */
.container7 .checkmark7:after {

    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/**************************8****#91D6F2********************************/

/* The container8 */
.container8 {
    display: block;
    position: relative;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.container8 input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark8 {
    position: absolute;
    border:1px solid black;
    top: 0;
    left: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 20%; 
    background-color: #91D6F2;
}



/* When the checkbox is checked, add a blue background */
.container8 input:checked ~ .checkmark8 {
    background-color: #91D6F2;
}

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

/* Show the checkmark when checked */
.container8 input:checked ~ .checkmark8:after {
    display: block;
}

/* Style the checkmark/indicator */
.container8 .checkmark8:after {

    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid black;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}



/**************************9****#7A582E********************************/

/* The container9 */
.container9 {
    display: block;
    position: relative;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.container9 input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark9 {
    position: absolute;
    top: 0;
    border:1px solid black;
    left: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 20%; 
    background-color: #7A582E;
}



/* When the checkbox is checked, add a blue background */
.container9 input:checked ~ .checkmark9 {
    background-color: #7A582E;
}

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

/* Show the checkmark when checked */
.container9 input:checked ~ .checkmark9:after {
    display: block;
}

/* Style the checkmark/indicator */
.container9 .checkmark9:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}



/**************************10****#B19C84********************************/

/* The container10 */
.container10 {
    display: block;
    position: relative;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.container10 input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark10 {
    position: absolute;
    top: 0;
    border:1px solid black;
    left: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 20%; 
    background-color: #B19C84;
}



/* When the checkbox is checked, add a blue background */
.container10 input:checked ~ .checkmark10 {
    background-color: #B19C84;
}

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

/* Show the checkmark when checked */
.container10 input:checked ~ .checkmark10:after {
    display: block;
}

/* Style the checkmark/indicator */
.container10 .checkmark10:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid black;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}



/**************************11****#2564AB********************************/

/* The container11 */
.container11 {
    display: block;
    position: relative;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.container11 input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark11 {
    position: absolute;
    top: 0;
    border:1px solid black;
    left: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 20%; 
    background-color: #2564AB;
}



/* When the checkbox is checked, add a blue background */
.container11 input:checked ~ .checkmark11 {
    background-color: #2564AB;
}

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

/* Show the checkmark when checked */
.container11 input:checked ~ .checkmark11:after {
    display: block;
}

/* Style the checkmark/indicator */
.container11 .checkmark11:after {

    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}



/**************************12****#A1BBDA********************************/

/* The container12 */
.container12 {
    display: block;
    position: relative;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.container12 input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark12 {
    position: absolute;
    top: 0;
    border:1px solid black;
    left: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 20%; 
    background-color: #A1BBDA;
}



/* When the checkbox is checked, add a blue background */
.container12 input:checked ~ .checkmark12 {
    background-color: #A1BBDA;
}

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

/* Show the checkmark when checked */
.container12 input:checked ~ .checkmark12:after {
    display: block;
}

/* Style the checkmark/indicator */
.container12 .checkmark12:after {
    
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid black;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}



/**************************13****#CDB370********************************/

/* The container13 */
.container13 {
    display: block;
    position: relative;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.container13 input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark13 {
    position: absolute;
    top: 0;
    border:1px solid black;
    left: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 20%; 
    background-color: #CDB370;
}



/* When the checkbox is checked, add a blue background */
.container13 input:checked ~ .checkmark13 {
    background-color: #CDB370;
}

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

/* Show the checkmark when checked */
.container13 input:checked ~ .checkmark13:after {
    display: block;
}

/* Style the checkmark/indicator */
.container13 .checkmark13:after {
    
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid black;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}




/**************************14****#DECDA1********************************/

/* The container14 */
.container14 {
    display: block;
    position: relative;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.container14 input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark14 {
    position: absolute;
    top: 0;
    border:1px solid black;
    left: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 20%; 
    background-color: #DECDA1;
}



/* When the checkbox is checked, add a blue background */
.container14 input:checked ~ .checkmark14 {
    background-color: #DECDA1;
}

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

/* Show the checkmark when checked */
.container14 input:checked ~ .checkmark14:after {
    display: block;
}

/* Style the checkmark/indicator */
.container14 .checkmark14:after {
    
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid black;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}


/**************************15****#322280********************************/

/* The container15 */
.container15 {
    display: block;
    position: relative;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.container15 input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark15 {
    position: absolute;
    top: 0;
    border:1px solid black;
    left: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 20%; 
    background-color: #322280;
}



/* When the checkbox is checked, add a blue background */
.container15 input:checked ~ .checkmark15 {
    background-color: #322280;
}

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

/* Show the checkmark when checked */
.container15 input:checked ~ .checkmark15:after {
    display: block;
}

/* Style the checkmark/indicator */
.container15 .checkmark15:after {
    
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/**************************16****#A6A0C8********************************/

/* The container16 */
.container16 {
    display: block;
    position: relative;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.container16 input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark16 {
    position: absolute;
    top: 0;
    border:1px solid black;
    left: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 20%; 
    background-color: #A6A0C8;
}



/* When the checkbox is checked, add a blue background */
.container16 input:checked ~ .checkmark16 {
    background-color: #A6A0C8;
}

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

/* Show the checkmark when checked */
.container16 input:checked ~ .checkmark16:after {
    display: block;
}

/* Style the checkmark/indicator */
.container16 .checkmark16:after {
    
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid black;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}


/**************************17****#DE8626********************************/

/* The container17 */
.container17 {
    display: block;
    position: relative;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.container17 input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark17 {
    position: absolute;
    top: 0;
    border:1px solid black;
    left: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 20%; 
    background-color: #DE8626;
}



/* When the checkbox is checked, add a blue background */
.container17 input:checked ~ .checkmark17 {
    background-color: #DE8626;
}

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

/* Show the checkmark when checked */
.container17 input:checked ~ .checkmark17:after {
    display: block;
}

/* Style the checkmark/indicator */
.container17 .checkmark17:after {
    
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid black;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}


/**************************18****#F1CBA1********************************/

/* The container18 */
.container18 {
    display: block;
    position: relative;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.container18 input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark18 {
    position: absolute;
    top: 0;
    border:1px solid black;
    left: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 20%; 
    background-color: #F1CBA1;
}



/* When the checkbox is checked, add a blue background */
.container18 input:checked ~ .checkmark18 {
    background-color: #F1CBA1;
}

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

/* Show the checkmark when checked */
.container18 input:checked ~ .checkmark18:after {
    display: block;
}

/* Style the checkmark/indicator */
.container18 .checkmark18:after {
    
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid black;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}


/**************************19****#7E2582********************************/

/* The container19 */
.container19 {
    display: block;
    position: relative;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.container19 input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark19 {
    position: absolute;
    top: 0;
    border:1px solid black;
    left: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 20%; 
    background-color: #7E2582;
}



/* When the checkbox is checked, add a blue background */
.container19 input:checked ~ .checkmark19 {
    background-color: #7E2582;
}

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

/* Show the checkmark when checked */
.container19 input:checked ~ .checkmark19:after {
    display: block;
}

/* Style the checkmark/indicator */
.container19 .checkmark19:after {
    left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}


/**************************20****#C7A1C8********************************/

/* The container20 */
.container20 {
    display: block;
    position: relative;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.container20 input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark20 {
    position: absolute;
    top: 0;
    border:1px solid black;
    left: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 20%; 
    background-color: #C7A1C8;
}



/* When the checkbox is checked, add a blue background */
.container20 input:checked ~ .checkmark20 {
    background-color: #C7A1C8;
}

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

/* Show the checkmark when checked */
.container20 input:checked ~ .checkmark20:after {
    display: block;
}

/* Style the checkmark/indicator */
.container20 .checkmark20:after {
    left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid black;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/**************************21****#FEEC2D********************************/

/* The container21 */
.container21 {
    display: block;
    position: relative;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.container21 input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark21 {
    position: absolute;
    top: 0;
    border:1px solid black;
    left: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 20%; 
    background-color: #FEEC2D;
}



/* When the checkbox is checked, add a blue background */
.container21 input:checked ~ .checkmark21 {
    background-color: #FEEC2D;
}

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

/* Show the checkmark when checked */
.container21 input:checked ~ .checkmark21:after {
    display: block;
}

/* Style the checkmark/indicator */
.container21 .checkmark21:after {
    left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid black;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);

}

/**************************22****#FEF6A4********************************/

/* The container22 */
.container22 {
    display: block;
    position: relative;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.container22 input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark22 {
    position: absolute;
    top: 0;
    border:1px solid black;
    left: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 20%; 
    background-color: #FEF6A4;
}



/* When the checkbox is checked, add a blue background */
.container22 input:checked ~ .checkmark22 {
    background-color: #FEF6A4;
}

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

/* Show the checkmark when checked */
.container22 input:checked ~ .checkmark22:after {
    display: block;
}

/* Style the checkmark/indicator */
.container22 .checkmark22:after {
    left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid black;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);

}


/**************************23****#CB257D********************************/

/* The container23 */
.container23 {
    display: block;
    position: relative;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.container23 input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark23 {
    position: absolute;
    top: 0;
    border:1px solid black;
    left: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 20%; 
    background-color: #CB257D;
}



/* When the checkbox is checked, add a blue background */
.container23 input:checked ~ .checkmark23 {
    background-color: #CB257D;
}

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

/* Show the checkmark when checked */
.container23 input:checked ~ .checkmark23:after {
    display: block;
}

/* Style the checkmark/indicator */
.container23 .checkmark23:after {
    left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/**************************24****#E8A1C7********************************/

/* The container24 */
.container24 {
    display: block;
    position: relative;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.container24 input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark24 {
    position: absolute;
    top: 0;
    border:1px solid black;
    left: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 20%; 
    background-color: #E8A1C7;
}



/* When the checkbox is checked, add a blue background */
.container24 input:checked ~ .checkmark24 {
    background-color: #E8A1C7;
}

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

/* Show the checkmark when checked */
.container24 input:checked ~ .checkmark24:after {
    display: block;
}

/* Style the checkmark/indicator */
.container24 .checkmark24:after {
    left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid black;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}


/**************************25****#77C339********************************/

/* The container25 */
.container25 {
    display: block;
    position: relative;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.container25 input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark25 {
    position: absolute;
    top: 0;
    border:1px solid black;
    left: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 20%; 
    background-color: #77C339;
}



/* When the checkbox is checked, add a blue background */
.container25 input:checked ~ .checkmark25 {
    background-color: #77C339;
}

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

/* Show the checkmark when checked */
.container25 input:checked ~ .checkmark25:after {
    display: block;
}

/* Style the checkmark/indicator */
.container25 .checkmark25:after {
    left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid black;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  
}

/**************************26****#B7DF96********************************/

/* The container26 */
.container26 {
    display: block;
    position: relative;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.container26 input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark26 {
    position: absolute;
    top: 0;
    border:1px solid black;
    left: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 20%; 
    background-color: #B7DF96;
}



/* When the checkbox is checked, add a blue background */
.container26 input:checked ~ .checkmark26 {
    background-color: #B7DF96;
}

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

/* Show the checkmark when checked */
.container26 input:checked ~ .checkmark26:after {
    display: block;
}

/* Style the checkmark/indicator */
.container26 .checkmark26:after {
    left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid black;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  
}

/**************************27****#C62A20********************************/

/* The container27 */
.container27 {
    display: block;
    position: relative;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.container27 input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark27 {
    position: absolute;
    top: 0;
    border:1px solid black;
    left: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 20%; 
    background-color: #C62A20;
}



/* When the checkbox is checked, add a blue background */
.container27 input:checked ~ .checkmark27 {
    background-color: #C62A20;
}

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

/* Show the checkmark when checked */
.container27 input:checked ~ .checkmark27:after {
    display: block;
}

/* Style the checkmark/indicator */
.container27 .checkmark27:after {
    left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}


/**************************28****#E7A39F********************************/

/* The container28 */
.container28 {
    display: block;
    position: relative;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.container28 input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark28 {
    position: absolute;
    top: 0;
    border:1px solid black;
    left: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 20%; 
    background-color: #E7A39F;
}



/* When the checkbox is checked, add a blue background */
.container28 input:checked ~ .checkmark28 {
    background-color: #E7A39F;
}

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

/* Show the checkmark when checked */
.container28 input:checked ~ .checkmark28:after {
    display: block;
}

/* Style the checkmark/indicator */
.container28 .checkmark28:after {
    left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid #000000;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/*

*************************29****#205188*******************************

 The container29 
.container29 {
    display: block;
    position: relative;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

 Hide the browser's default checkbox 
.container29 input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

 Create a custom checkbox 
.checkmark29 {
    position: absolute;
    top: 0;
    border:1px solid black;
    left: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 20%; 
    background-color: #205188;
}



 When the checkbox is checked, add a blue background 
.container29 input:checked ~ .checkmark29 {
    background-color: #205188;
}

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

 Show the checkmark when checked 
.container29 input:checked ~ .checkmark29:after {
    display: block;
}

 Style the checkmark/indicator 
.container29 .checkmark29:after {
   left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid #FFFFFF;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  
}



*************************30****#2564AB*******************************

 The container30 
.container30 {
    display: block;
    position: relative;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

 Hide the browser's default checkbox 
.container30 input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

 Create a custom checkbox 
.checkmark30 {
    position: absolute;
    top: 0;
    border:1px solid black;
    left: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 20%; 
    background-color: #2564AB;
}



 When the checkbox is checked, add a blue background 
.container30 input:checked ~ .checkmark30 {
    background-color: #2564AB;
}

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

 Show the checkmark when checked 
.container30 input:checked ~ .checkmark30:after {
    display: block;
}

 Style the checkmark/indicator 
.container30 .checkmark30:after {
   left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid #FFFFFF;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  
}



*************************31****#7693D2*******************************

 The container31 
.container31 {
    display: block;
    position: relative;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

 Hide the browser's default checkbox 
.container31 input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

 Create a custom checkbox 
.checkmark31 {
    position: absolute;
    top: 0;
    border:1px solid black;
    left: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 20%; 
    background-color: #7693D2;
}



 When the checkbox is checked, add a blue background 
.container31 input:checked ~ .checkmark31 {
    background-color: #7693D2;
}

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

 Show the checkmark when checked 
.container31 input:checked ~ .checkmark31:after {
    display: block;
}

 Style the checkmark/indicator 
.container31 .checkmark31:after {
    left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid #000000;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}



*************************32****#ADBEE6*******************************

 The container32 
.container32 {
    display: block;
    position: relative;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

 Hide the browser's default checkbox 
.container32 input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

 Create a custom checkbox 
.checkmark32 {
    position: absolute;
    top: 0;
    border:1px solid black;
    left: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 20%; 
    background-color: #ADBEE6;
}



 When the checkbox is checked, add a blue background 
.container32 input:checked ~ .checkmark32 {
    background-color: #ADBEE6;
}

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

 Show the checkmark when checked 
.container32 input:checked ~ .checkmark32:after {
    display: block;
}

 Style the checkmark/indicator 
.container32 .checkmark32:after {
   left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid #000000;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}


*************************33****#291E69*******************************

 The container33 
.container33 {
    display: block;
    position: relative;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

 Hide the browser's default checkbox 
.container33 input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

 Create a custom checkbox 
.checkmark33 {
    position: absolute;
    top: 0;
    border:1px solid black;
    left: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 20%; 
    background-color: #291E69;
}



 When the checkbox is checked, add a blue background 
.container33 input:checked ~ .checkmark33 {
    background-color: #291E69;
}

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

 Show the checkmark when checked 
.container33 input:checked ~ .checkmark33:after {
    display: block;
}

 Style the checkmark/indicator 
.container33 .checkmark33:after {
    left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid #FFFFFF;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  
}



*************************34****#322280*******************************

 The container34 
.container34 {
    display: block;
    position: relative;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

 Hide the browser's default checkbox 
.container34 input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

 Create a custom checkbox 
.checkmark34 {
    position: absolute;
    top: 0;
    border:1px solid black;
    left: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 20%; 
    background-color: #322280;
}



 When the checkbox is checked, add a blue background 
.container34 input:checked ~ .checkmark34 {
    background-color: #322280;
}

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

 Show the checkmark when checked 
.container34 input:checked ~ .checkmark34:after {
    display: block;
}

 Style the checkmark/indicator 
.container34 .checkmark34:after {
   left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid #FFFFFF;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  
}



*************************35****#7263B9*******************************

 The container35 
.container35 {
    display: block;
    position: relative;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

 Hide the browser's default checkbox 
.container35 input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

 Create a custom checkbox 
.checkmark35 {
    position: absolute;
    top: 0;
    border:1px solid black;
    left: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 20%; 
    background-color: #7263B9;
}



 When the checkbox is checked, add a blue background 
.container35 input:checked ~ .checkmark35 {
    background-color: #7263B9;
}

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

 Show the checkmark when checked 
.container35 input:checked ~ .checkmark35:after {
    display: block;
}

 Style the checkmark/indicator 
.container35 .checkmark35:after {
    left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid #FFFFFF;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  
}



*************************36****#A89DD6*******************************

 The container36 
.container36 {
    display: block;
    position: relative;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

 Hide the browser's default checkbox 
.container36 input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

 Create a custom checkbox 
.checkmark36 {
    position: absolute;
    top: 0;
    border:1px solid black;
    left: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 20%; 
    background-color: #A89DD6;
}



 When the checkbox is checked, add a blue background 
.container36 input:checked ~ .checkmark36 {
    background-color: #A89DD6;
}

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

 Show the checkmark when checked 
.container36 input:checked ~ .checkmark36:after {
    display: block;
}

 Style the checkmark/indicator 
.container36 .checkmark36:after {
   left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid #000000;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}



*************************37****#65206B*******************************

 The container37 
.container37 {
    display: block;
    position: relative;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

 Hide the browser's default checkbox 
.container37 input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

 Create a custom checkbox 
.checkmark37 {
    position: absolute;
    top: 0;
    border:1px solid black;
    left: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 20%; 
    background-color: #65206B;
}



 When the checkbox is checked, add a blue background 
.container37 input:checked ~ .checkmark37 {
    background-color: #65206B;
}

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

 Show the checkmark when checked 
.container37 input:checked ~ .checkmark37:after {
    display: block;
}

 Style the checkmark/indicator 
.container37 .checkmark37:after {
    left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid #FFFFFF;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  
}



*************************38****#7E2582*******************************

 The container38 
.container38 {
    display: block;
    position: relative;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

 Hide the browser's default checkbox 
.container38 input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

 Create a custom checkbox 
.checkmark38 {
    position: absolute;
    top: 0;
    border:1px solid black;
    left: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 20%; 
    background-color: #7E2582;
}



 When the checkbox is checked, add a blue background 
.container38 input:checked ~ .checkmark38 {
    background-color: #7E2582;
}

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

 Show the checkmark when checked 
.container38 input:checked ~ .checkmark38:after {
    display: block;
}

 Style the checkmark/indicator 
.container38 .checkmark38:after {
    left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid #FFFFFF;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  
}



*************************39****#B26EBB*******************************

 The container39 
.container39 {
    display: block;
    position: relative;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

 Hide the browser's default checkbox 
.container39 input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

 Create a custom checkbox 
.checkmark39 {
    position: absolute;
    top: 0;
    border:1px solid black;
    left: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 20%; 
    background-color: #B26EBB;
}



 When the checkbox is checked, add a blue background 
.container39 input:checked ~ .checkmark39 {
    background-color: #B26EBB;
}

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

 Show the checkmark when checked 
.container39 input:checked ~ .checkmark39:after {
    display: block;
}

 Style the checkmark/indicator 
.container39 .checkmark39:after {
    left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid #000000;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}



*************************40****#D2A7D7*******************************

 The container40 
.container40 {
    display: block;
    position: relative;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

 Hide the browser's default checkbox 
.container40 input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

 Create a custom checkbox 
.checkmark40 {
    position: absolute;
    top: 0;
    border:1px solid black;
    left: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 20%; 
    background-color: #D2A7D7;
}



 When the checkbox is checked, add a blue background 
.container40 input:checked ~ .checkmark40 {
    background-color: #D2A7D7;
}

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

 Show the checkmark when checked 
.container40 input:checked ~ .checkmark40:after {
    display: block;
}

 Style the checkmark/indicator 
.container40 .checkmark40:after {
    left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid #000000;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}



*************************41****#9E2166*******************************

 The container41 
.container41 {
    display: block;
    position: relative;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

 Hide the browser's default checkbox 
.container41 input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

 Create a custom checkbox 
.checkmark41 {
    position: absolute;
    top: 0;
    border:1px solid black;
    left: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 20%; 
    background-color: #9E2166;
}



 When the checkbox is checked, add a blue background 
.container41 input:checked ~ .checkmark41 {
    background-color: #9E2166;
}

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

 Show the checkmark when checked 
.container41 input:checked ~ .checkmark41:after {
    display: block;
}

 Style the checkmark/indicator 
.container41 .checkmark41:after {
    left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid #FFFFFF;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  
}



*************************42****#CB257D*******************************

 The container42 
.container42 {
    display: block;
    position: relative;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

 Hide the browser's default checkbox 
.container42 input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

 Create a custom checkbox 
.checkmark42 {
    position: absolute;
    top: 0;
    border:1px solid black;
    left: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 20%; 
    background-color: #CB257D;
}



 When the checkbox is checked, add a blue background 
.container42 input:checked ~ .checkmark42 {
    background-color: #CB257D;
}

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

 Show the checkmark when checked 
.container42 input:checked ~ .checkmark42:after {
    display: block;
}

 Style the checkmark/indicator 
.container42 .checkmark42:after {
    left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid #FFFFFF;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  
}



*************************43****#DF82AE*******************************

 The container43 
.container43 {
    display: block;
    position: relative;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

 Hide the browser's default checkbox 
.container43 input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

 Create a custom checkbox 
.checkmark43 {
    position: absolute;
    top: 0;
    border:1px solid black;
    left: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 20%; 
    background-color: #DF82AE;
}



 When the checkbox is checked, add a blue background 
.container43 input:checked ~ .checkmark43 {
    background-color: #DF82AE;
}

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

 Show the checkmark when checked 
.container43 input:checked ~ .checkmark43:after {
    display: block;
}

 Style the checkmark/indicator 
.container43 .checkmark43:after {
    left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid #000000;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}



*************************44****#ECB6D0*******************************

 The container44 
.container44 {
    display: block;
    position: relative;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

 Hide the browser's default checkbox 
.container44 input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

 Create a custom checkbox 
.checkmark44 {
    position: absolute;
    top: 0;
    border:1px solid black;
    left: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 20%; 
    background-color: #ECB6D0;
}



 When the checkbox is checked, add a blue background 
.container44 input:checked ~ .checkmark44 {
    background-color: #ECB6D0;
}

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

 Show the checkmark when checked 
.container44 input:checked ~ .checkmark44:after {
    display: block;
}

 Style the checkmark/indicator 
.container44 .checkmark44:after {
    left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid #000000;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}



*************************45****#9A241D*******************************

 The container45 
.container45 {
    display: block;
    position: relative;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

 Hide the browser's default checkbox 
.container45 input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

 Create a custom checkbox 
.checkmark45 {
    position: absolute;
    top: 0;
    border:1px solid black;
    left: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 20%; 
    background-color: #9A241D;
}



 When the checkbox is checked, add a blue background 
.container45 input:checked ~ .checkmark45 {
    background-color: #9A241D;
}

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

 Show the checkmark when checked 
.container45 input:checked ~ .checkmark45:after {
    display: block;
}

 Style the checkmark/indicator 
.container45 .checkmark45:after {
    left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid #FFFFFF;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  
}



*************************46****#C62A20*******************************

 The container46 
.container46 {
    display: block;
    position: relative;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

 Hide the browser's default checkbox 
.container46 input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

 Create a custom checkbox 
.checkmark46 {
    position: absolute;
    top: 0;
    border:1px solid black;
    left: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 20%; 
    background-color: #C62A20;
}



 When the checkbox is checked, add a blue background 
.container46 input:checked ~ .checkmark46 {
    background-color: #C62A20;
}

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

 Show the checkmark when checked 
.container46 input:checked ~ .checkmark46:after {
    display: block;
}

 Style the checkmark/indicator 
.container46 .checkmark46:after {
   left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid #FFFFFF;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  
}



*************************47****#DE8364*******************************

 The container47 
.container47 {
    display: block;
    position: relative;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

 Hide the browser's default checkbox 
.container47 input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

 Create a custom checkbox 
.checkmark47 {
    position: absolute;
    top: 0;
    border:1px solid black;
    left: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 20%; 
    background-color: #DE8364;
}



 When the checkbox is checked, add a blue background 
.container47 input:checked ~ .checkmark47 {
    background-color: #DE8364;
}

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

 Show the checkmark when checked 
.container47 input:checked ~ .checkmark47:after {
    display: block;
}

 Style the checkmark/indicator 
.container47 .checkmark47:after {
   left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid #FFFFFF;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  
}



*************************48****#ECB79D*******************************

 The container48 
.container48 {
    display: block;
    position: relative;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

 Hide the browser's default checkbox 
.container48 input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

 Create a custom checkbox 
.checkmark48 {
    position: absolute;
    top: 0;
    border:1px solid black;
    left: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 20%; 
    background-color: #ECB79D;
}



 When the checkbox is checked, add a blue background 
.container48 input:checked ~ .checkmark48 {
    background-color: #ECB79D;
}

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

 Show the checkmark when checked 
.container48 input:checked ~ .checkmark48:after {
    display: block;
}

 Style the checkmark/indicator 
.container48 .checkmark48:after {
   left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid #000000;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

*/