.div-inline-list {
    margin: 24px auto;
    width: 80%;
    text-align: center;
}

.div-inline-list > .option-container {
    display: inline-block;
    margin: 16px;
}

.option-container {
    position: relative;
    width: 100px;
    height: 100px;
    padding: 0px;
}

.option {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.clickable {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    border-radius: 4px;
    transition: all ease 0.5s;
    z-index: 10;
}

.checked-box {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 22px;
    height: 22px;
    background-color: #0055ff;
    color: #fff;
    text-align: center;
    border-top-right-radius: 4px;
    display: none;
}

input[name="datingOption"]:checked + .clickable {
    border-color: #0055ff;
    box-shadow: 0px 0px 6px 2px #0055ff;
}

input[name="datingOption"]:checked + .clickable .checked-box {
    display: block;
}