.main {
    position: relative;
    padding-left: 0px;
    margin-bottom: 0px;
    cursor: pointer;
    font-size: 20px;
}

    .main label {
        display: inline-grid;
        font-size: 15px;
        color: white;
    
    }



/* Hide the default checkbox */
input[type=checkbox] {
    visibility: hidden;
}

/* Creating a custom checkbox based on demand */
.geekmark {
    position: absolute;
    margin-top: 0px;
    margin-left: -20px;
    height: 14px;
    width: 14px;
    background-color: black;
    outline: 1px solid #ffffff
}

/* Specify the background color to be
        shown when hovering over checkbox */
.main:hover input ~ .geekmark {
    background-color: black;
    outline: 1px solid #ffffff
}

/* Specify the background color to be
        shown when checkbox is active */
.main input:active ~ .geekmark {
    background-color: darkslategray;
}

/* Specify the background color to be
        shown when checkbox is checked */
.main input:checked ~ .geekmark {
    background-color: black;
}

/* Checkmark to be shown in checkbox */
/* It is not be shown when not checked */
.geekmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Display checkmark when checked */
.main input:checked ~ .geekmark:after {
    display: block;
}

/* Styling the checkmark using webkit */
/* Rotated the rectangle by 45 degree and 
        showing only two border to make it look
        like a tickmark */
.main .geekmark:after {
    left: 6px;
    bottom: 3px;
    width: 6px;
    height: 12px;
    border: solid red;
    border-width: 0 4px 4px 0;  
    transform: rotate(45deg);
}