/* ----------------------------------------------------- */
/* SEO Mag glossary styles
/* ----------------------------------------------------- */

@media (min-width: 801px) {
    .entries-glossary.by-three > div > div:nth-child(n + 4) {
        margin-top: 20px;
    }

    .entries-glossary.by-two > div > div:nth-child(n + 3) {
        margin-top: 20px;
    }
}

@media ( min-width: 576px ) and (max-width: 800px) {
    .entries-glossary.by-three > div > div:nth-child(n + 3) {
        margin-top: 20px;
    }

    .entries-glossary.by-two > div > div:nth-child(n + 3) {
        margin-top: 20px;
    }
}

@media (max-width: 575px) {
    .entries-glossary.by-three > div > div:not(:first-child) {
        margin-top: 20px;
    }

    .entries-glossary.by-two > div > div:not(:first-child) {
        margin-top: 20px;
    }
}

p.glossary-letter {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
}

p.glossary-letter:not(.latest) + .entries-glossary {
    margin-bottom: 40px;
}

.entries-glossary .entry-glossary {
    padding: 5px 10px;
    white-space: nowrap;
}

.entries-glossary .entry-glossary a {
    text-decoration: none;
}

.entries-glossary .entry-glossary a .title h2,
.entries-glossary .entry-glossary a .title h3,
.entries-glossary .entry-glossary a .title p {
    white-space: break-spaces;
}

body.dark p.glossary-letter {
    background-color: #292E38;
}

body.light p.glossary-letter {
    background-color: #ECECEC;
}

body.dark .entries-glossary .entry-glossary {
    background-color: #292E38;
    transition: background-color 200ms ease-in;
}

body.dark .entries-glossary .entry-glossary:hover {
    background-color: #343A47;
}

body.light .entries-glossary .entry-glossary {
    background-color: #ECECEC;
    transition: background-color 200ms ease-in;
}

body.light .entries-glossary .entry-glossary:hover {
    background-color: #DFDFDF;
}