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

    .checkmark {
        border-radius: 100px;
        position: absolute;
        top: -0.2cqh;
        left: 0;
        height: 2cqh;
        width: 2cqh;
        background-color: #eee;
    }

    .container:hover input ~ .checkmark {
        background-color: #ccc;
    }

    .container input:checked ~ .checkmark {
        background-color: black;
    }

    .checkmark:after {
        content: "";
        position: absolute;
        display: none;
    }

    .container .checkmark:after {
        left: 30%;
        top: 10%;
        width: 0.5cqh;
        height: 1cqh;
        border: solid white;
        border-width: 0 0.4cqh 0.4cqh 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    .container input:checked ~ .checkmark:after {
        display: block;
    }