#bib a {
    text - decoration: none
}
#bib a: hover {
    text - decoration: underline
}
#bib a, #bib a: visited {
    color: #444
}
#bib a.highlighted - link, #bib a.highlighted - link: visited {
    color: #f5782a
}
.bib - search - control {
    padding: 4px 0
}
.bib - search - label {
    display: block;
    padding: 4px 0;
    font - size: 18px;
    font - weight: 700
}
.bib - search - box {
    display: inline - block;
    position: relative;
    padding - right: 2rem
}
.bib - search - input {
    padding: 4px;
    width: 240px
}
.bib - search - button {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 1.75rem;
    background - image: url('/sites/default/modules/zotero_bib/icons/search_icon.svg');
    background - size: 20px;
    background - position: center;
    background - repeat: no - repeat;
    border: 1px solid #888;
    border - radius: 3px;
    cursor: pointer
}
#bib - filters {
    padding: 16px 0
}
.bib - filter {
    display: inline - block;
    position: relative;
    margin: 0 4px 4px 0;
    padding: .5rem 1rem.5rem 1.75rem;
    background - color: #3a3b3d;
    border - radius: .9375rem;
    color: #FFF;
    font - size: .875rem;
    font - weight: 500;
    line - height: 1;
    cursor: pointer
}
.bib - filter::before {
    content: "";
    position: absolute;
    display: block;
    top: .875rem;
    left: 10px;
    width: 12px;
    height: 0;
    margin: auto;
    border - top: 2px solid #FFF;
    transform: rotate(45deg);
    transform - origin: center
}
.bib - filter::after {
    content: "";
    position: absolute;
    display: block;
    top: .875rem;
    left: 10px;
    width: 12px;
    height: 0;
    margin: auto;
    border - top: 2px solid #FFF;
    transform: rotate(-45deg);
    transform - origin: center
}
#bib - sort - buttons {
    display: inline - block;
    margin - bottom: 8px
}
.bib - sort - button {
    display: inline - block;
    position: relative;
    margin: 4px 4px 4px 0;
    padding: .75rem 1.75rem.75rem 1rem;
    background - color: rgba(0, 0, 0, 0.05);
    font - weight: 700;
    font - size: .875rem;
    line - height: 1;
    cursor: pointer
}
.bib - sort - button: not(.active): hover {
    background - color: rgba(0, 0, 0, 0.1)
}
.bib - sort - button.active {
    background - color: #eb8038;
    color: #FFF
}
.bib - sort - button::after {
    content: "";
    position: absolute;
    top: 1.0625rem;
    right: 14px;
    width: 0;
    height: 0;
    border - left: 4px solid transparent;
    border - right: 4px solid transparent;
    border - top: 4px solid #000;
    border - bottom: 0
}
.bib - sort - button.active::after {
    border - top: 4px solid #FFF
}
.bib - sort - button.desc::after {
    border - left: 4px solid transparent;
    border - right: 4px solid transparent;
    border - bottom: 4px solid #000;
    border - top: 0
}
.bib - sort - button.active.desc::after {
    border - bottom: 4px solid #FFF
}
#bib - summary - bar {
    float: right;
    margin: .75rem 0;
    font - weight: 700
}
#bib - summary - bar a {
    margin - left: 8px
}
#bib - flex - content {
    clear: right;
    padding - top: 8px
}
.bib - list - separator {
    padding: 16px;
    background - color: rgba(0, 0, 0, 0.1);
    border: 1px solid #e0e0e0;
    font - weight: 700
}
.bib - citation - list {
    margin: .75rem 0;
    list - style: none
}
.bib - citation {
    padding: .75rem 0;
    line - height: 1.3;
    font - family: "Source Sans Pro",
    "Arial",
    san - serif;
    font - size: 18px;
    line - height: 120 %
}
.bib - citation - title {
    font - weight: 600
}
.bib - citation - title::after {
    content: url('/sites/default/modules/zotero_bib/icons/open_in_new_symbol_black.svg');
    display: inline - block;
    width: 1.25rem
}
.bib - list - separator - placeholder {
    height: 3.125rem;
    border: 1px solid #e0e0e0;
    margin - bottom: 6px
}
.bib - citation - placeholder {
    height: 1.25rem;
    margin - bottom: 6px
}
.load - placeholder {
    background: linear - gradient(90deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.1));
    background - size: 200 % 100 % ;
    -webkit - animation: gradient - animation 2s linear infinite;
    -moz - animation: gradient - animation 2s linear infinite;
    animation: gradient - animation 2s linear infinite
}
 @ -webkit - keyframes gradient - animation {
    0 % {
        background - position: 200 % 0
    }
    50 % {
        background - position: 100 % 0
    }
    100 % {
        background - position: 0 0
    }
}
 @ -moz - keyframes gradient - animation {
    0 % {
        background - position: 200 % 0
    }
    50 % {
        background - position: 100 % 0
    }
    100 % {
        background - position: 0 0
    }
}
 @ keyframes gradient - animation {
    0 % {
        background - position: 200 % 0
    }
    50 % {
        background - position: 100 % 0
    }
    100 % {
        background - position: 0 0
    }
}
#bib - footer {
    padding: 8px;
    text - align: center
}
.bib - previous - page - button {
    display: inline - block;
    position: relative;
    width: 80px;
    margin: 8px;
    padding: 16px 32px;
    opacity: .3;
    background - color: #FFF;
    border: 2px solid #444;
    font - weight: 700;
    font - size: 1rem;
    text - align: left;
    text - transform: uppercase
}
.bib - previous - page - button[aria - disabled = "false"]{
    cursor: pointer;
    opacity: 1
}
.bib - previous - page - button[aria - disabled = "false"]: hover {
    background - color: rgba(0, 0, 0, 0.05)
}
.bib - previous - page - button::before {
    content: '';
    position: absolute;
    top: 50 % ;
    left: 16px;
    width: 0;
    height: 0;
    margin - top: -6px;
    border - top: 6px solid transparent;
    border - bottom: 6px solid transparent;
    border - right: 6px solid #444
}
.bib - next - page - button {
    display: inline - block;
    position: relative;
    width: 80px;
    margin: 8px;
    padding: 16px 32px;
    opacity: .3;
    background - color: #FFF;
    border: 2px solid #444;
    font - weight: 700;
    font - size: 1rem;
    text - align: right;
    text - transform: uppercase
}
.bib - next - page - button::after {
    content: '';
    position: absolute;
    top: 50 % ;
    right: 16px;
    width: 0;
    height: 0;
    margin - top: -6px;
    border - top: 6px solid transparent;
    border - bottom: 6px solid transparent;
    border - left: 6px solid #444
}
.bib - next - page - button[aria - disabled = "false"]{
    cursor: pointer;
    opacity: 1
}
.bib - next - page - button[aria - disabled = "false"]: hover {
    background - color: rgba(0, 0, 0, 0.05)
}
#bib - page - label {
    padding: 16px;
    font - weight: 700;
    font - size: .875rem
}
#bib - popup - overlay {
    visibility: hidden;
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    padding: 0;
    z - index: 999;
    background - color: rgba(0, 0, 0, 0.7);
    overflow - y: auto
}
#bib - popup - overlay[aria - hidden = "false"]{
    visibility: visible;
    bottom: 0;
    right: 0;
    width: auto;
    height: auto;
    padding: 32px
}
#bib - popup - content {
    position: relative;
    max - width: 840px;
    margin: 0 auto;
    padding: 40px;
    transform: scale(0.95);
    -webkit - transition: transform.2s;
    -moz - transition: transform.2s;
    -o - transition: transform.2s;
    transition: transform.2s;
    background - color: #FFF;
    font - family: "Source Sans Pro",
    "Arial",
    san - serif;
    font - size: 17px
}
#bib - popup - overlay[aria - hidden = "false"]#bib - popup - content {
    transform: scale(1)
}
#bib - popup - close - button {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 24px;
    height: 24px;
    opacity: 1;
    cursor: pointer
}
#bib - popup - close - button: hover {
    opacity: .7
}
#bib - popup - close - button::before {
    content: '';
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 24px;
    height: 0;
    margin: auto;
    border - top: 2px solid #000;
    transform: rotate(45deg);
    transform - origin: center
}
#bib - popup - close - button::after {
    content: '';
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 24px;
    height: 0;
    margin: auto;
    border - top: 2px solid #000;
    transform: rotate(-45deg);
    transform - origin: center
}
#bib - table - title {
    font - size: 24px;
    margin - bottom: 2rem
}
#bib - table {
    width: 100 %
}
#bib - table th, td {
    padding: 8px;
    text - align: left;
    vertical - align: top
}
#bib - table tr: nth - child(odd) {
    background - color: #f3f3f3
}
 @ media only screen and(max - width: 700px) {
    #bib - popup - content {
        max - width: none;
        margin: 8px;
        padding: 50px 16px 16px 16px
    }
    #bib - table tr td: nth - child(2) {
        word - break: break - word
    }
}