body {
    font-family: var(--font-family), sans-serif;
    line-height: 1.5;
    margin: 0;
    padding: 0;
}

#root {
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 0;
}

.p-progress-spinner-circle {
    stroke: var(--primary-color);
    animation: none;
    stroke-width: 5px;
}

h1 {
    color: var(--primary-color);
    &.primary-bg {
        background-color: var(--primary-color);
        color: var(--primary-color-text);
    }
}
h2 {
    color: var(--primary-color);
    font-size: 2em;
}
h3 {
    font-size: 1.2em;
}
h4 {
    font-size: 1em;
    margin: 0;
}
p {
    font-size: 16px;
}
.homepage-content-md {
    max-width: 70rem;
}
.homepage-content-sm {
    max-width: 35rem;
}
.homepage-statistics {
    color: var(--primary-color);
    &.count-4 {
        max-width: 100rem;
    }
    &.count-3 {
        max-width: 75rem;
    }
    &.count-2 {
        max-width: 50rem;
    }
    &.count-1 {
        max-width: 25rem;
    }
}
.homepage-statistics .title > h2 {
        color: var(--primary-color);
        font-size: 2em;
    }
.homepage-statistics .entry h1 {
        font-size: 2em;
        font-weight: bold;
        color: var(--primary-color);
        text-align:center;
    }
.homepage-statistics .entry a {
        color: var(--primary-color);
        font-weight: bold;
    }
.homepage-statistics .entry Card {
        background-color: var(--primary-color);
    }

.homepage-parsed-text > a {
    color: var(--primary-color);
}

#work-edit-menu li.p-menuitem {
    font-weight: bolder;
    > div:hover,
    > div:focus {
        background: var(--surface-300) !important;
    }
    &.active {
        > div,
        > div:hover,
        > div:focus {
            background: var(--primary-color) !important;
            > a > span {
                color: white !important;
            }
        }
    }
    &.invalid {
        color: var(--alert);
        > div > a > span {
            color: var(--alert);
        }
    }
}

.p-button:focus {
    outline: 0 none;
    outline-offset: 0;
    box-shadow: 0 0 0 0.2rem var(--focus);
    border-color: var(--primary-700);
}

a:focus {
    outline: 0 none;
    outline-offset: 0;
    box-shadow: 0 0 0 0.2rem var(--focus);
    border-color: var(--primary-700);
}

/* PUBLIG PREVIEW  */

.preview .csl-entry {
    margin: 1rem;
    display: table;
}
.preview .csl-entry .csl-left-margin {
    display: table-cell;
}
.preview .csl-entry .csl-right-inline {
    display: table-cell;
    padding-left: 0.75rem
}
.preview .toc_return  {
    margin-bottom: 2rem;
}

.preview a {
    color: var(--primary-color);
    font-weight: bolder;
}

.preview ul  {
    list-style-type: none;
}

.stamp {
    transform: rotate(3deg);
    display: inline-block;
    padding: 0.25rem 1rem;
    mask-image: url("./../img/grunge.png");
    mask-size: 800px 486px;
    mix-blend-mode: multiply
}


.p-button {
    text-decoration: none;
}

.p-paginator .p-paginator-first,
.p-paginator .p-paginator-prev,
.p-paginator .p-paginator-next,
.p-paginator .p-paginator-last {
    min-width: 2rem;
    height: 2rem;
}

.p-paginator .p-dropdown {
    height: 2rem;
    line-height: 0.5rem;
}

.p-paginator .p-inputnumber {
    height: 2rem;
    line-height: 0.5rem;
}

.p-contextmenu,
.p-megamenu.p-megamenu-vertical,
.p-menu,
.p-tieredmenu,
.p-slidemenu,
.p-menubar .p-submenu-list {
    width: 15rem;
    border-radius: 6px;
    box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
}
.p-menubar .w-25 .p-submenu-list {
    width: 25rem;
    border-radius: 6px;
}

.p-dropdown-label.p-inputtext {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.p-disabled, .p-component:disabled {
    opacity: 0.3;
}

.facet-tab .p-accordion-content {
    padding-bottom: 0;
}
.p-card .p-card-footer {
    padding: 0.5rem 0;
}

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

.shadowed {
    box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
}

.shadowed-reverse {
    box-shadow: 0 -2px 1px -1px rgba(0, 0, 0, 0.2), 0 -1px 1px 0 rgba(0, 0, 0, 0.14), 0 -1px 3px 0 rgba(0, 0, 0, 0.12);
}

.p-menuitem-content {
    font-weight: bold;
}

.p-menuitem-content:hover {
    color: var(--primary-800);
    background-color: var(--menu-focus-bg);
    .p-menuitem-link {
        color: var(--primary-800);
    }
    .p-menuitem-text {
        color: var(--primary-800);
    }
}
.p-menuitem-content:focus {
    outline: 0 none;
    outline-offset: 0;
    box-shadow: 0 0 0 0.2rem var(--focus);
    border-color: var(--primary-700);
}

.p-tabview > .p-tabview-nav-container > .p-tabview-nav-content {
    > .p-tabview-nav {
        > li:first-child {
            margin-left: 1rem;
        }
        > li:last-child {
            margin-right: 1rem;
        }
    }
}