* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Roboto, Arial, Helvetica, sans-serif;
}

input[type="checkbox"] {
    width: 1.2em;
    height: 1.2em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: normal;
    text-align: center;
    margin: 0.5em 0 0.5em 0;
}

ul.checkmark-ul {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}

ul.checkmark-ul li {
    padding-left: 1em;
    text-indent: -1em;
    color: #3d4853;
    /* color: red; */
}

ul.checkmark-ul li:before {
    content: "✓";
    padding-right: 1em;
    /* color: fuchsia; */
    color: green;
}

.delete-uni::before {
    content: "\2421";
    font-family: "Segoe UI Symbol";
    color: red;
    cursor: pointer;
}

.delete::before {
    content: "\f014";
    font-family: "FontAwesome";
    color: red;
    cursor: pointer;
}

.fa-refresh::before {
    content: "\f021";
    font-family: "FontAwesome";
    color: white;
    margin-left: 0.3rem;
}

.fa-caret-down::before {
    content: "\f0d7";
    font-family: "FontAwesome";
    color: white;
    margin-left: 0.3rem;
}

.fa-remove::before {
    content: "\f00d";
    font-family: "FontAwesome";
    color: rgb(240, 76, 153);
    margin-left: 0.3rem;
}

.color-green {
    color: var(--color-green);
}

.color-red {
    color: var(--color-red);
}

.color-blue {
    color: var(--color-blue);
}

.color-yellow {
    color: var(--color-yellow);
}

.color-fuchsia {
    color: var(--color-fuchsia);
}

.color-cyan {
    color: var(--color-cyan);
}

.color-teal {
    color: var(--color-teal);
}