.cross, .check {
    width: 2em;
    height: 2em;
    border-radius: 50%;
    position: relative;
    display: inline-block;
}

.cross::before, .check::before {
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    position: absolute;
    display: block;
    width: 90%;
    height: 90%;
    background-size: cover;
}

.cross {
    background-color: var(--font-color-light);
}

.cross::before {
    content: ' ';
    background-image: url("/images/icons/cross.png");
    transform: translate(-50%,-53%);
}

.check {
    background-color: var(--primary-color);
}

.check::before {
    content: ' ';
    background-image: url("/images/icons/check.png");
}

#see-the-difference table{
    width: 100%;
    border-collapse: collapse;
}

#see-the-difference table td {
    font-size: 1.25em;
}

#see-the-difference table tr td{
    text-align: center;
}

#see-the-difference table tr td:first-child{
    text-align: left;
}

#see-the-difference table tr {
    position: relative;
}

#see-the-difference table tr::before {
    position: absolute;
    display: block;
    content: " ";
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    border-radius: 0.5em;
    z-index: -1;
    opacity: 0.4;
}

#see-the-difference table tr td{
    padding: 0.25em 1em
}

#see-the-difference table tr:nth-child(even)::before {
    background-color: var(--primary-color);
}