Bug 30136: (follow-up) CSS and accessibility update

[koha.git] / koha-tmpl / opac-tmpl / bootstrap / css / src / opac.scss

@import "common";

.no-js {
    .dateformat {
        display: inline;
        white-space: nowrap;
    }

    .modal-body {
        padding: 0;
    }

    .selections-toolbar,
    #renewall_js {
        display: none;
    }

    #sortsubmit {
        display: inline;
        padding-left: 0;
        padding-right: 0;
    }
    .dropdown-toggle::after {
        border: 0;
    }

    #listsmenu,
    #user-menu,
    .nav-item .login-link {
        color: $links;

        &:hover {
            color: $links-hover;
        }
    }
}

.js {
    .dateformat,
    #sortsubmit,
    #sorting-form,
    .js-hide {
        display: none;
    }
}

.popup {
    padding-left: 0;
    padding-right: 0;

    .main {
        font-size: 90%;
        padding: 0 1em;
    }

    legend {
        line-height: 1.5em;
        margin-bottom: .5em;
    }
}

a {
    &:link,
    &:visited {
        &.cartRemove {
            color: #900;
            font-size: 90%;
            padding-left: 0;

            &:hover {
                color: #c60000;
            }
        }
    }

    &.cancel {
        padding-left: 1em;
    }

    &.clear_date {
        color: #c33;
        font-size: 130%;
    }

    &.title {
        display: block;
        font-size: 108%;
        font-weight: bold;
    }

    &.login-link {
        color: #005580;
        font-weight: bold;
    }

    .idreambooksrating {
        color: #29ADE4;
        font-size: 30px;
        line-height: 30px;
        padding-left: 85px;
        text-decoration: none;
    }

    &.reviewlink,
    &.reviewlink:visited {
        color: black;
        font-weight: normal;
        text-decoration: none;
    }

    &.OpenURL img {
        vertical-align: middle;
    }

    &.addtocart {
        padding-right: 0;
    }

    &.highlight_toggle {
        display: none;
    }

    &.incart {
        color: #666;
    }

    &.remove {
        &:hover {
            color: #900;

            i {
                .fa {
                    color: #c60000
                }
            }
        }
    }
}

input,
textarea {
    width: auto;
}

.input-fluid {
    width: 50%;
}

legend {
    color: #727272;
    font-size: 110%;
    font-weight: bold;
}

table {
    font-size: 90%;
}

table,
td {
    background-color: #FFF;
}

tr {
    &.outstanding {
        font-style: italic;
    }
}

td {
    img {
        max-width: none;
    }

    &.overdue {
        color: #CC3333;
    }

    &.sum {
        background-color: #FFFFE5;
        font-weight: bold;
    }

    .btn {
        white-space: nowrap;
    }

    &.selectcol {
        width: 1ch;
    }

    &.numcol {
        width: 3ch;
    }

    &.hidden {
        display: none;
    }
}

th {
    background-color: #E2E8E8;

    &.sum {
        text-align: right;
    }

    &[scope="row"] {
        background-color: transparent;
        text-align: right;
    }
}

#advsearch {
    input,
    select {
        max-width: 100%;
    }
}

#advsearches,
#booleansearch {
    label {
        display: inline;
    }
}

#backtotop {
    display: inline-block;
    text-align: center;
    font-size: 120%;
    position: fixed;
    bottom: 40px;
    right: 40px;
    z-index: 1000;
}

#booleansearch {
    width: 80%;
}

#advsearch_limits,
#subtypes {
    label {
        color: #727272;
        display: block;
        font-size: 110%;
        font-weight: bold;
    }

    &.row {
        margin-bottom: 15px;
    }
}

.advanced-search-terms {
    &.extended {
        .search-term-row {
            grid-template-columns: 25% 35% 35% 5%;
            margin: 5px 0;
        }
    }
}

.actions {
    white-space: nowrap;
}

.advsearch_limit {
    border: 1px solid #EEE;
    font-size: 90%;
    height: 100%;
    margin-bottom: 15px;
    padding: 15px;
}

.search_operator {
    text-align: right;

    label {
        font-style: italic;
    }
}

.ButtonPlus,
.ButtonLess {
    i {
        font-size: 125%;
    }
}

#basketcount {
    display: inline;
    margin: 0;
    padding: 0;

    span {
        @include border-radius-all( 3px );
        background-color: $base-theme-color;
        color: #FFF;
        display: inline;
        font-family: 'NotoSans';
        font-size: 80%;
        font-weight: normal;
        margin: 0 0 0 .9em;
        padding: 0 .3em;
    }
}


#members {
    p {
        color: #727272;
    }

    a {
        &:link,
        &:visited,
        &:hover,
        &:active {
            text-decoration: none;
        }

        &.logout {
            color: #E8583C;
            font-weight: bold;

            &:hover {
                color: #E8583C;
            }
        }

        &.clearsh {
            color: #D43C00;
            font-size: 80%;
            font-weight: normal;
            padding-bottom: .6rem;
            padding-top: .6rem;

            &:hover {
                color: #E8583C;
            }
        }
    }

    .dropdown-menu {
        a {
            &:hover {
                color: #005580;
                text-decoration: underline;

                &.logout {
                    &:hover {
                        color: #E8583C;
                    }
                }
            }
        }
    }

    .divider-vertical {
        border: 1px solid #EEE;
        border-right-color: #FCF9FC;
        margin: 5px 0;
    }
}

#loggedinuser-menu {
    min-width: 300px;
    padding: .5em 1em;

    .divider-vertical {
        margin: 5px 5px;
    }
}

#moresearches {
    margin: .5em 30px;
    padding: 0 15px;

    li {
        display: inline-block;
        padding-right: 5px;
        white-space: nowrap;

        &::after {
            content: " | ";
        }

        &:last-child {
            &::after {
                content: "";
            }
        }

    }

    ul {
        margin: 0;
    }
}

#news {
    margin: .5em 0;
    padding: 1em;

    .newsitem {
        &:last-child {
            .newsfooter {
                border-bottom: 0;
            }
        }
    }
}

.newscontainer {
    border: 1px solid #DDD;
}

.newsheader {
    margin: 0;
    padding: 8px 0;
}

.newsbody {
    padding: 8px 0;
}

.newsfooter {
    border-bottom: 1px solid #EEE;
    color: #727272;
    font-size: 90%;
    margin-bottom: .5em;
    padding-bottom: .5em;
}

#rssnews-container {
    color: #727272;
    font-size: 90%;
}

#rssnews-container {
    font-size: 90%;
    padding: .5em 0;
}

.rsssearchlink {
    &:hover {
        text-decoration: none;
    }
}

.fa {
    &.fa-rss {
        background: rgb(240, 109, 52) none;
        border-radius: 3px;
        color: #FFF;
        margin: 0 2px;
        padding: 2px 4px;
        text-shadow: 1px 0 1px rgba(0, 0, 0, .25);

        &.rsssearchicon {
            font-size: 70%;
        }
    }
}

.form-control-filtered {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-funnel-fill'%3E%3Cpath d='M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5v-2z' fill='%23acacac'/%3E%3C/svg%3E");
    background-position-x: 6px;
    background-position-y: center;
    background-repeat: no-repeat;
    padding-left: 1.7rem;
}

#numresults {
    color: #727272;
}

.actions-menu {
    padding-top: 5px;
}

.view,
.actions,
.toolbar,
#action {
    a,
    button {
        color: darken( $links, 5% );

        &:hover {
            i {
                &.fa {
                    color: #338468;
                }
            }
        }

        i {
            &.fa {
                color: #4466AE;
            }
        }

        &.remove {
            &:hover {
                color: #900;

                i {
                    &.fa {
                        color: #c60000;
                    }
                }
            }
        }

        &.disabled,
        &[disabled] {
            color: #333;
            opacity: 0.65;

            &:hover {
                i {
                    &.fa {
                        color: #333;
                        opacity: 0.65;
                    }
                }
            }
        }
    }
}

.actions {
    &:first-child {
        .btn-link {
            padding-left: 0;
        }
    }
}

/* Override Bootstrap alert */
.alert {
    /* Redefine a new style for Bootstrap's class "close" since we use that already */
    /* Use <a class="closebtn" href="#">&times;</a> */

    .closebtn {
        line-height: 20px;
        position: relative;
        right: -21px;
        top: -2px;
    }
}

/* Add style for Bootstrap dropdown-header class */
.dropdown-header {
    border-top: 1px solid #eee;
    color: #000;
    display: block;
    font-size: 90%;
    font-weight: 700;
    line-height: 1.42857143;
    padding: 3px 20px;
    padding-left: 10px;
    white-space: nowrap;
}

.btn-group.open {
    .btn-link {
        &.dropdown-toggle {
            background-image: none;
            box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25);
        }
    }
}

.breadcrumb {
    background-color: #F0F3F3;
    font-size: 85%;
    list-style: none outside none;
    margin: 15px;
    padding: 5px 10px;
    border-radius: 0px;

    a {

            color: darken( $links, 5%);

    }
}

.breadcrumb-item {
    &.active {
        a:link,
        a:visited,
        a:hover,
        a:active {
            color: #666;
            cursor: text;
            text-decoration: none;
        }
    }
}

#opac-main-search {
    background: #f0f3f3;
    margin: 7px 0;
    padding: 15px;

    label {
        color: $high-contrast-grey;
        font-size: 115%;
        font-weight: bold;
        margin: 0;
    }
}

#cart-list-nav {
    flex-grow: 2;
}

.table-striped tbody > tr:nth-child(odd) > td,
.table-striped tbody > tr:nth-child(odd) > th {
    background-color: #F0F3F3;

    a {
        color: darken( $links, 5%);

        &.btn {
            color: #FFF;

            &.btn-link {
                color: $links;
            }
        }
    }

    button {
        &.btn-link {
            color: darken( $links, 5% );
        }
    }
}

#availability_facet {
    color: #727272;
}

#facet-holdings-library {
    color: #727272;
}

#toolbar {
    background-color: #f0f3f3;
    border: 1px solid #f0f3f3;
    margin: 0;

    &.clearfix {
        background-color: #f0f3f3;
    }
}

.item-thumbnail {
    max-width: none;
}

.no-image {
    @include border-radius-all( 3px );
    background-color: #FFF;
    border: 1px solid #AAA;
    color: #979797;
    display: block;
    font-size: 86%;
    font-weight: bold;
    text-align: center;
    width: 75px;
}

.bookcover {
    float: left;
    margin: 0;
    padding: 0;
    text-align: center;

    .no-image {
        margin-bottom: 10px;
        margin-right: 10px;
    }

    img {
        margin: 1em;
    }
}

.custom_cover_image {
    img {
        max-width: 140px;
    }
}

#biblio-cover-slider {
    background-color: #fff;
    border: 1px solid #b9d8d9;
    border-radius: 3px;
    margin: 0 1em .5em 0;
    padding: 10px 5px 5px 5px;
    min-height: 175px;
}

.cover-slides {
    background: #FFF url("../img/spinner-small.gif") center center no-repeat;

    .hint {
        font-size: 80%;
        padding: .5em 0;
    }

    a {
        &.nav-active {
            &:link,
            &:visited {
                color: #85ca11;
            }
        }
    }
}

td {
    &.bookcover {
        background: #FFF url("../img/spinner-small.gif") center center no-repeat;
        min-width: 120px;
        text-align: center;
    }

    .cover-slides {
        background: transparent none;
        border: 0;
        margin: 0;
        min-height: unset;
        padding: 0;
    }
}

.cover-image {
    display: none;

    img {
        height: auto;
        max-width: 100%;
    }
}

.cover-nav {
    display: inline-block;
    padding: 3px 4px;
}

div {
    &.required_label {
        display: none;

        &.required {
            color: #C00;
            display: block;
            font-size: 95%;
            margin-left: 10rem;
            margin-top: 3px;
        }
    }
}

.required {
    &.valid {
        color: #000;
    }
}


.label {
    background-color: transparent;
    color: inherit;
    display: inline;
    font-weight: normal;
    padding: 0;
    text-shadow: none;
}

.blabel {
    background-color: #999999;
    border-radius: 3px;
    color: #FFFFFF;
    display: inline-block;
    font-weight: bold;
    padding: 2px 4px;
    text-shadow: 0 -1px 0 rgba( 0, 0, 0, .25 );
}

.label-important {
    background-color: #B94A48;
}

.label-warning {
    background-color: #F89406;
}

.label-success {
    background-color: #468847;
}

.label-info {
    background-color: #3A87AD;
}

.label-inverse {
    background-color: #333333;
}

fieldset {
    &.rows {
        clear: left;
        float: left;
        font-size: 90%;
        margin: .9em 0 0;
        padding: 0;
        width: 100%;

        legend {
            font-size: 130%;
            font-weight: bold;
        }

        div.label {
            display: inline-block;
            width: 9rem;
            margin-right: 1rem;
            float: none;
        }

        label,
        .label {
            float: left;
            font-weight: bold;
            margin-right: 1rem;
            text-align: right;
            width: 9rem;
        }

        label.checkbox-label {
            float: none;
            margin-right: 0;
            font-weight: normal;
            text-align: left;
            width: auto;
        }

        label {
            &.error {
                color: #C00;
                float: none;
                display: inline;
                font-style: italic;
                font-weight: normal;
                margin-left: 1rem;
                text-align: left;
                width: auto;
            }
            &.lradio {
                float: none;
                margin: inherit;
                width: auto;
            }
        }

        fieldset {
            margin: 0;
            padding: .3em;
        }

        ol {
            list-style-type: none;
            padding: 1em 1em 0 1em;

            &.lradio {
                label {
                    float: none;
                    margin-right: 0;
                    width: auto;

                    &.lradio {
                        float: left;
                        margin-right: 1em;
                        width: 12em;
                    }
                }
            }
        }


        li {
            clear: left;
            float: left;
            list-style-type: none;
            padding-bottom: 1em;
            width: 100%;

            &.lradio {
                width: auto;

                label {
                    float: none;
                    margin: 0;
                    width: auto;
                }
                input {
                    margin-right: 1rem;
                }
            }
        }

        .hint {
            display: block;
            margin-left: 10rem;
        }
    }

    &.action {
        border: 0;
        clear: both;
        float: none;
        margin: 0;
        padding: 1em 0 .3em;
        width: auto;

        p {
            margin-bottom: 1em;
        }
    }

    table {
        font-size: 100%;
    }
}

div {
    &.rows {
        float: left;
        clear: left;
        margin: 0;
        padding: 0;
        width: 100%;

        + div.rows {
            margin-top: .6em;
        }

        span {
            &.label {
                float: left;
                font-weight: bold;
                margin-right: 1em;
                text-align: left;
                width: 9rem;
            }
        }

        ol {
            list-style-type: none;
            margin-left: 0;
            padding: .5em 1em 0 0;

            li {
                li {
                    border-bottom: 0;
                }
            }
        }

        li {
            border-bottom: 1px solid #EEE;
            clear: left;
            float: left;
            list-style-type: none;
            padding-bottom: .2em;
            padding-top: .1em;
            width: 100%;
        }

        ul {
            li {
                margin-left: 7.3em;

                &:first-child {
                    clear: none;
                    float: none;
                    margin-left: 0;
                }
            }
        }
    }
}

/* different sizes for different tags in opac-tags.tt */

.tagweight0 {
    font-size: 12px;
}

.tagweight1 {
    font-size: 14px;
}

.tagweight2 {
    font-size: 16px;
}

.tagweight3 {
    font-size: 18px;
}

.tagweight4 {
    font-size: 20px;
}

.tagweight5 {
    font-size: 22px;
}

.tagweight6 {
    font-size: 24px;
}

.tagweight7 {
    font-size: 26px;
}

.tagweight8 {
    font-size: 28px;
}

.tagweight9 {
    font-size: 30px;
}

.toolbar {
    background-color: #EEEEEE;
    border: 1px solid #E8E8E8;
    font-size: .9rem;
    padding: 3px 3px 5px 5px;
    vertical-align: middle;

    a:link,
    a:hover,
    button {
        font-size: .9rem;
        white-space: nowrap;
    }

    label {
        display: inline;
        font-size: 100%;
        font-weight: bold;
    }

    select {
        max-width: 100%;
    }

    #tagsel_form {
        margin-top: .5em;
    }

    li {
        &.dropdown-header {
            display: block;
        }
    }

    ul {
        padding-left: 0;
    }
}

#basket {
    .toolbar {
        padding: 7px 5px 9px 9px;
    }
}

.selections {
    color: #727272;
    font-weight: bold;

    &::before {
        color: #6c757d;
        content: "|";
        display: inline-block;
        font-weight: normal;
        padding: 0 .5rem;
        text-shadow: 1px 1px 0 #fff;
    }
}

.check_control {
    &::before {
        color: #6c757d;
        content: "|";
        display: inline-block;
        font-weight: normal;
        padding: 0 .5rem;
        text-shadow: 1px 1px 0 #fff;
    }
}

.selections-toolbar {
    background: linear-gradient(#B2B2B2 0%, #E0E0E0 14%, #E8E8E8 100%);
    border-bottom: none;
    margin-top: 3px;
    display: flex;
    margin: 0;
    padding-left: 10px;
    padding-top: .5em;

    > div:first-child::before {
        content: "";
        padding: 0;
    }

    a,
    button,
    input {
        font-size: .9rem;
    }
}

.list-actions {
    display: inline;

    a,
    button,
    input {
        font-size: .9rem;
    }
}

.results_summary {
    color: #202020;
    display: block;
    font-size: 85%;
    padding: 0 0 .5em;

    .results_summary {
        font-size: 100%;
    }

    &.actions {
        margin-top: .5em;
    }

    &.tagstatus {
        display: inline;
    }

    .label {
        color: $high-contrast-grey;
    }

    a {
        font-weight: normal;
    }
}

.resource_list {
    display: inline;
    margin: 0 auto;
    padding-left: 0;

    li {
        display: inline-block;

        &::after {
            content: "|";
            padding: 0 .2em;
        }

        &:last-child {
            &::after {
                content: "";
            }
        }
    }
}

#views {
    margin-bottom: .5em;
    padding: 0 2em .2em .2em;
}

.view {
    background-color: #F0F3F3;
    border: 1px solid #C9C9C9;
    border-radius: 4px;
    color: #727272;
    display: inline-block;
    margin-right: .4em;

    a,
    span {
        font-size: 87%;
        font-weight: normal;
        display: inline-block;
        padding: 4px 12px;
        margin-bottom: 0;
        font-size: 14px;
        line-height: 20px;
        text-align: center;
        text-decoration: none;
        vertical-align: middle;
    }
}

#bibliodescriptions,
#isbdcontents {
    clear: left;
    margin-top: .5em;
}

.current-view {
    background-color: #FFF;
    font-weight: bold;
}

.results-pagination {
    background-color: #F3F3F3;
    display: none;
    padding-bottom: 10px;
}

.close_pagination {
    display: none;
}

.back {
    float: right;

    input {
        background: none !important;
        color: #999 !important;
    }
}

.pagination_list {
    ul {
        margin: 0;
        padding: 0;
    }

    li {
        border-top: 1px solid #DDDDDD;
        color: #999;
        font-size: 90%;
        list-style: none;
        padding: 4px;

        &.highlight {
            background-color: #DDDDDD;
        }

        a {
            padding-left: 0;
        }
    }

    .li_pag_index {
        color: #636363;
        font-size: 90%;
        font-weight: bold;
        padding-right: 10px;
        text-align: right;
        width: 13px;
    }
}

nav {
    .pagination {
        margin: 0;
    }
}

.pagination_footer {
    background-color: #E1E1E1;
    text-align: center;

    .close_pagination {
        display: none;
    }
}

.l_Results {
    background-color: #E1E1E1;

    .close_pagination {
        float: right;
        padding: 8px 12px;
    }
}

.nav_results {
    border: 1px solid #D0D0D0;
    font-size: 95%;
    font-weight: bold;
    margin-top: .5em;
    position: relative;
}

#a_listResults {
    color: #006699;
    display: inline-block;
    padding: 8px 28px;
    text-decoration: none;
}

.pg_menu {
    background-color: #F3F3F3;
    border-top: 1px solid #D0D0D0;
    display: flex;
    margin: 0;
    white-space: nowrap;

    .pg_link {
        color: #B2B2B2;
        flex-grow: 1;
        list-style: none;
        margin: 0;

        &.back_results {
            a {
                border-left: 1px solid #D0D0D0;
                border-right: 1px solid #D0D0D0;
            }
        }

        a,
        span {
            background-color: #F3F3F3;
            display: block;
            font-weight: normal;
            padding: .4em .5em;
            text-align: center;
        }

        span {
            color: #B2B2B2;
        }
    }
}

#listResults {
    li {
        color: #C5C5C5;
        display: inline-block;
        font-size: 80%;
        font-weight: normal;
        padding: 0;
        text-align: center;

        a {
            background-color: #999999;
            color: #FFFFFF;
            display: block;
            font-weight: normal;
            min-width: 18px;
            text-decoration: none;

            &:hover {
                background-color: #006699;
            }
        }

        .highlight {
            a {
                background-color: #616161;
            }
        }
    }
}

/* nav */

nav {
    &.libraries {
        li {
            list-style-type: none;
            padding: .3em .5em;

            a {
                display: block;
            }
        }

        i.fa {
            color:  #7cbc0f;
        }

        .fa-li {
            top:  unset;
        }
    }

    &.breadcrumb {
        background-color: #F0F3F3;
        border-radius: 0;
        font-size: 85%;
        margin: 15px;
        padding: 5px 10px;

        [aria-current="page"] {
            color: #000;
            font-weight: 700;
            text-decoration: none;
        }
    }
}

.breadcrumb-item {
    + .breadcrumb-item {
        &::before {
            background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' %3E%3Cpath fill-rule='evenodd' d='M7.37 0l5.35 7.3c.2.2.2.51 0 .7l-5.38 8h-4.2l5.64-8.35L3.13.01z'/%3E%3C/svg%3E") 50% 50% no-repeat;
            background-size: 8px;
            display: inline-block;
            content: '';
            float: none;
            height: .8em;
            width: .8em;
        }
    }
}

.nav_pages {
    border-top: 1px solid #DDD;
    padding: .6em;

    ul {
        display: inline-block;
        margin: 0;
        padding: 0;
    }

    li {
        color: #999;
        list-style: none;
        padding: 4px;

        a {
            &:hover {
                text-decoration: underline;
            }
        }
    }
}

/* action buttons */
#action {
    background-color: #F5F5F5;
    border: 1px solid #E8E8E8;
    margin: .5em 0 0 0;
    padding: .5em;

    li {
        list-style: none;
    }

    a {
        color: darken( $links, 5% );
        font-weight: bold;
        text-decoration: none;
        text-align: left;
    }
}

#export,
#moresearches_menu {
    li {
        margin: 0;
        padding: 0;

        a {
            font-weight: normal;

            &.menu-inactive {
                font-weight: bold;
            }
        }
    }

    .dropdown-header {
        border-bottom: 1px solid #EEE;
        border-top: 0;
    }

    .dropdown-menu a {
        display: block;
        width: 100%;
        padding: .25rem 1.5rem;
        clear: both;
        text-align: inherit;
        white-space: nowrap;
        border: 0;
     }
}

.hint {
    color: #727272;
    font-size: 90%;
}

.links {
    flex-grow: 1;

    a {
        font-weight: bold;
    }
}

#tagslist {
    padding-left: 0;

    li {
        display: inline;
    }
}

#tagsel_form input,
.tag_results_input input {
    margin: 0 2px;
}

.branch-info-tooltip {
    display: none;
}

.ui-tooltip-content p {
    margin: .3em 0;
}

.ui-widget-content {
    a {
        &:link,
        &:visited {
            &.btn-default,
            &.btn-secondary {
            }
        }
    }
}

#social_networks {
    margin-top: .5em;

    a {
        border: 1px solid transparent;
        border-radius: 4px;
        display: inline-block;
        min-width: 1em;
        padding: .5em;
        text-align: center;
    }

    a:hover,
    a:active {
        border: 1px solid #EEE;
    }

    span {
        color: #274D7F;
        display: block;
        float: left;
        font-size: 85%;
        font-weight: bold;
        line-height: 2em;
        margin: .5em;
    }

    div {
        float: left;
    }

    #facebook {
        color: #4267B2;
    }

    #twitter {
        color: #1DA1F2;
    }

    #linkedin {
        color: #0073b0;
    }

    #email {
        color: #666;
    }
}

#marc {
    td,
    th {
        background-color: transparent;
        border: 0;
        padding: 3px 5px;
        text-align: left;
    }

    td:first-child {
        text-indent: 2em;
    }

    p {
        padding-bottom: .6em;

        .label {
            font-weight: bold;
        }
    }

    ul {
        padding-bottom: .6em;
    }

    .results_summary {
        clear: left;

        ul {
            clear: none;
            display: inline;
            float: none;
            list-style: none;
            margin: 0;
            padding: 0;
        }

        li {
            display: inline;
        }
    }
}

#items,
#items td,
#items th {
    border: 1px solid #EEE;
    font-size: 90%;
}

.patronimage {
    float: right;
    margin-left: 1em;
}

#plainmarc {
    table {
        border: 0;
        font-family: monospace;
        font-size: 95%;
        margin: .7em 0 0;
    }

    th {
        background-color: #FFF;
        border: 0;
        padding: 2px;
        text-align: left;
        vertical-align: top;
        white-space: nowrap;
    }

    td {
        border: 0;
        padding: 2px;
        vertical-align: top;
    }
}

#renewcontrols {
    float: right;
    font-size: 66%;
}

#renewall_link {
    i:first-child {
        left: 9px;
    }
}

.authref {
    text-indent: 2em;

    .label {
        font-style: italic;
    }
}

.authstanza {
    margin-top: 1em;

    li {
        margin-left: .5em;
    }
}

.authstanzaheading {
    font-weight: bold;
}

.authorizedheading {
    font-weight: bold;
}

.authres_notes,
.authres_seealso,
.authres_otherscript {
    padding-top: .5em;
}

.authres_notes {
    font-style: italic;
}

#daily-quote {
    margin-bottom: 1em;
}

#didyoumean {
    @include border-radius-all( 3px );
    background-color: #EEE;
    border: 1px solid #E8E8E8;
    box-sizing: border-box;
    margin: .5em 1.5em;
    padding: .5em;
    text-align: left;

    &.dym-loaded {
        background-color: #FFFBEA;
        border-color: #F4ECBE;
    }
}

.suggestionlabel {
    font-weight: bold;
}

.searchsuggestion {
    display: inline-block;
    padding: .2em .5em;
}

.authlink {
    padding-left: .25em;
}

#hierarchies {
    margin-bottom: 1em;

    a {
        color: #069;
        font-weight: normal;
        text-decoration: underline;

        &.jstree-anchor {
            &.jstree-hovered {
                background: transparent none;
                box-shadow: none;
                color: #005580;
            }

            &.jstree-clicked {
                background: transparent none;
                box-shadow: none;
                border: 0;
            }
        }
    }
}



#cartDetails {
    background-color: #FFF;
    border: 1px solid rgba( 0, 0, 0, .2 );
    border-radius: 6px;
    box-shadow: 0 5px 10px rgba( 0, 0, 0, .2 );
    color: black;
    display: none;
    font-size: 90%;
    margin: 0;
    padding: 8px 20px;
    position: fixed;
    text-align: center;
    top: 50px;
    left: 50px;
    width: 180px;
    z-index: 10;
}

#cartmenulink {
    white-space: nowrap;
}

#search-facets {
    border: 1px solid #D2D2CF;

    ul {
        margin: 0;
        padding: .3em;
    }

    form {
        margin: 0;
    }

    h2 {
        font-size: 90%;
        margin: 0 0 .6em 0;
        text-align: center;

        a {
            background-color: #F0F3F3;
            border-bottom: 1px solid #D8D8D8;
            display: block;
            font-weight: bold;
            padding: .7em .2em;
        }
    }

    h3 {
        font-size: 80%;
    }

    li {
        font-size: 90%;
        font-weight: bold;
        list-style-type: none;

        li {
            font-size: 95%;
            font-weight: normal;
            line-height: 125%;
            margin-bottom: 2px;
            padding: .1em .2em;
        }

        &.showmore {
            a {
                font-weight: bold;
                text-indent: 1em;
            }
        }
    }

    a {
        font-weight: normal;
    }

    .facet-count {
        display: inline-block;
    }

}

#menu {
    font-size: 94%;

    ul {
        padding-left: 0;
    }

    li {
        list-style-type: none;

        &:last-child {
            a {
                border-bottom-width: 1px;
            }
        }

        &.active {
            a {
                background-color: #FFF;
                border-top: 1px solid #999;
            }
        }

        a {
            background-color: #f0f3f3;
            border: 1px solid #d8d8d8;
            border-bottom-width: 0;
            color: darken( $links, 5% );
            display: block;
            margin: 0;
            padding: .4em .6em;
            text-decoration: none;
        }

    }
}

#addto {
    display: inline-block;
    max-width: 10em;
}

/* Search results add to cart (lists disabled) */

.searchresults {
    p {
        margin: 0;
        padding: 0 0 .6em 0;

        &.details {
            color: #979797;
        }
    }

    .commentline {
        @include border-radius-all( 3px );
        @include shadowed;
        background-color: rgba( 255, 255, 204, .4 );
        border: 1px solid #CCC;
        display: inline-block;
        margin: .3em;
        padding: .4em;

        .yours {
            background-color: rgba( 239, 254, 213, .4 );
        }
    }

    .commenter {
        color: #666;
        font-size: 85%;
    }
}

.commentline .avatar {
    float: right;
    padding-left: .5em;
}

/* style for search terms in catalogsearch */
.term {
    /* color: blue; */
    background-color: #FFFFCC;
    color: #990000;
}

/* style for shelving location in catalogsearch */
.shelvingloc {
    display: block;
    font-style: italic;
}

.sep {
    color: #888;
    padding: 0 .2em 0 .5em;
    text-shadow: 1px 1px 0 #FFF;
}

%page-first-child {
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px;
    border-width: 1px;
}

%page-last-child {
    border-bottom-right-radius: 3px;
    border-top-right-radius: 3px;
    border-width: 1px 1px 1px 0;
}

%page-middle-child {
    background-color: #FFFFFF;
    border-color: #DDDDDD;
    border-image: none;
    border-style: solid;
    border-width: 1px 1px 1px 0;
    float: left;
    font-size: 11.9px;
    line-height: 20px;
    padding: 4px 12px;
    text-decoration: none;
}

.pages {
    margin: 20px 0;

    span {
        &:first-child {
            @extend %page-first-child;
        }

        &:last-child {
            @extend %page-last-child;
        }
    }

    a {
        @extend %page-middle-child;

        &:first-child {
            @extend %page-first-child;
        }

        &:last-child {
            @extend %page-last-child;
        }
    }

    .inactive {
        @extend %page-middle-child;
        background-color: #F5F5F5;
    }

    .currentPage {
        @extend %page-middle-child;
    }

    a[rel='last'] {
        border-bottom-right-radius: 3px;
        border-top-right-radius: 3px;
    }
}

.hold-message {
    @include border-radius-all( 3px );
    background-color: #FFF0B1;
    display: inline-block;
    margin: .5em;
    padding: .2em .5em;
}

.reserve_date,
.expiration_date {
    white-space: nowrap;
}

#login {
    max-width: 300px;
}

#loginModal {
    input {
        box-sizing: border-box;
        display: block;
        font-size: 150%;
        height: auto;
        padding: .4em;
        width: 100%;

        &[type='submit'] {
            font-size: 100%;
            padding: .5em;
            transition: background-color .5s ease;

            &:hover {
                background: #77b50f none;
            }
        }
    }

    .closebtn {
        color: #C00;
        opacity: 1;

        &:hover {
            opacity: .4;
        }
    }

    .modal-header,
    .modal-body,
    .modal-footer {
        font-size: 120%;
        padding: 1em 2em;
    }
}

.nologininstructions,
.forgotpassword,
.patronregistration {
    padding-top: 1em;
}

.registration-label {
    display: inline-block;
    font-weight: bold;
    padding: 5px;
}

.registration-value {
    background-color: #ebf8ff;
    border-radius: 5px;
    display: inline-block;
    font-family: monospace;
    padding: 5px 10px;
}

.btn-group {
    label,
    select {
        font-size: 13px;
    }
}

.item-status {
    display: block;
    font-size: 95%;
    margin-bottom: .5em;
}

.available {
    color: #006600;
}

.unavailable {
    color: #990033;
}

.ItemSummary .LabelCallNumber::before {
    content: " [";
}

.ItemSummary .CallNumber::after {
    content: "]";
}

.waiting,
.intransit,
.notforloan,
.checkedout,
.lost,
.notonhold {
    display: block;
}

.notforloan {
    color: #900;
}

.lost {
    color: #666;
}

.suggestion {
    background-color: #F0F3F3;
    border: 1px solid #F0F3F3;
    color: $high-contrast-grey;
    margin: 1em auto;
    padding: .5em;
    width: 35%;
}

.transl1 {
    width: 100%;
}


#user-menu-trigger {
    display: none;

    i {
        padding: 14px 0 0;
        width: 14px;
    }

    .caret {
        border-bottom-color: #999999;
        border-top-color: #999999;
        margin-top: 18px;
    }
}

/* Class to be added to toolbar when it starts being fixed at the top of the screen*/
.floating {
    box-shadow: 0 3px 2px 0 rgba( 0, 0, 0, .4 );
    margin-top: 0;
    z-index: 5;
}

.tdlabel {
    display: none;
    font-weight: bold;
}

#ulactioncontainer {
    min-width: 16em;
}

.notesrow {
    label {
        font-weight: bold;
    }

    span {
        display: block;
    }
}

.thumbnail-shelfbrowser span {
    margin: 0 auto;
}

.table-bordered {
    border-radius: 0;
    thead:first-child tr:first-child > th {
        &:last-child {
        border-radius: 0;
        }
        &:first-child {
        border-radius: 0;
        }
    }
    tbody:last-child tr:last-child > td {
        &:last-child {
        border-radius: 0;
        }
        &:first-child {
        border-radius: 0;
        }
    }
}

.tags,
.shelves {
    ul {
        display: inline-block;
        list-style: none;
        margin: 0;
        padding: 0;

        li {
            display: inline;
        }
    }
}

.coverimages {
    float: right;
}

#termsList {
    label {
        display: inline;
        vertical-align: middle;
    }

    ul {
        border-bottom: 1px solid #EEE;
        list-style-type: none;
        margin: 0;
        padding: .6em 0;
    }

    li {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
}


#overdrive-results,
#recordedbooks-results,
#openlibrary-results {
    font-weight: bold;
    padding-left: 1em;
}

.throbber {
    vertical-align: middle;
}

#overdrive-results-list .star-rating-control {
    display: block;
    overflow: auto;
}

#holdingst {
    table-layout: fixed;

    td {
        overflow-wrap: break-word;
    }
}

#shelfbrowser {
    table {
        margin: 0;
    }

    table,
    td,
    th {
        border: 0;
        font-size: 90%;
        text-align: center;
    }

    td,
    th {
        padding: 3px 5px;
        width: 20%;

        &.nav-cell {
            padding: 0;
            vertical-align: middle;
            width: 1em;
        }
    }

    a {
        display: block;
        font-size: 110%;
        font-weight: bold;
        text-decoration: none;

        &.shelfbrowser_cover {
            min-height: 80px;
            min-width: 80px;
            display: inline-block;
        }
    }

    #browser_previous {
        a {
            transform: rotate(-90deg);
            white-space: nowrap;

            i {
                padding: 0 .5em;
            }
        }
    }

    #browser_next {
        a {
            transform: rotate(90deg);
            white-space: nowrap;

            i {
                padding: 0 .5em;
            }
        }
    }
}

#holds {
    margin: 0 auto;
    max-width: 800px;
}

.holdrow {
    border-bottom: 1px solid #CCC;
    clear: both;
    margin-bottom: .5em;
    padding: 0 1em 1em 1em;

    fieldset {
        border: 0;
        float: none;
        margin: 0;

        .label {
            font-size: 14px;
        }
    }

    label {
        display: inline;
    }
}

.hold-options {
    clear: both;
}

.toggle-hold-options {
    background-color: #EEE;
    clear: both;
    display: block;
    font-weight: bold;
    margin: 1em 0;
    padding: .5em;
}

.copiesrow {
    clear: both;
}

#idreambooksreadometer {
    float: right;
}

.idreambookslegend {
    font-size: small;
}

.idreambookssummary {
    a {
        color: #707070;
        text-decoration: none;
    }

    img {
        vertical-align: middle;
    }
}

.idbresult {
    color: #29ADE4;
    margin: .5em;
    padding: .5em;
    text-align: center;

    img {
        padding-right: 6px;
        vertical-align: middle;
    }

    a,
    a:visited {
        text-decoration: none;
        color: #29ADE4;
    }
}

.js-show {
    display: none;
}

.modal-nojs {
    .modal-header,
    .modal-footer {
        display: none;
    }
}

.contents {
    width: 75%;

    .newline::after {
        content: "\A → ";
        white-space: pre;
    }

    .t {
        font-weight: bold;
        display: inline;
    }

    .r {
        display: inline;
    }
}


.contentblock {
    font-size: 95%;
    line-height: 135%;
    margin-left: 2em;

    :first-child:not(.term)::before {
        content: "→ ";
    }
}

.m880 {
    display: block;
    float: right;
    padding-left: 20px;
    text-align: right;
    width: 50%;
}

#memberentry-form {
    input.error {
        border-color: #C00;
        outline: 0 none;

        &:focus {
            border-color: #C00;
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(204, 0, 0, .6);
            outline: 0 none;
        }

        label.error {
            color: #C00;
            float: none;
            font-size: 90%;
        }
    }
}


#illrequests {
    .illrequest-actions {
        margin-bottom: 20px;
        padding-top: 20px;

        .btn,
        .cancel {
            margin-right: 5px;
        }
    }

    #illrequests-create-button {
        margin-bottom: 20px;
    }

    .bg-info {
        overflow: auto;
        position: relative;

        #search-summary {
            position: absolute;
            top: 50%;
            transform: translateY( -50% );
        }

    }

    #freeform-fields .custom-name {
        float: left;
        margin-right: 1em;
        text-align: right;
        width: 8em;
    }

    .dropdown:hover .dropdown-menu.nojs {
        display: block;
    }

    div.rows span.label {
        float: inherit;
        width: inherit;
        text-align: inherit;
        margin-right: 0;
    }

    #ill-supplier-metadata {
        display: flex;
        flex-flow: column nowrap;
        flex: 1 1 auto;
    }

    div[class^='requestattr-'] {
        width: 100%;
        display: flex;
        flex-flow: row nowrap;
        padding: 5px;
        &:nth-of-type(even) {
            background-color: #f2f2f2;
        }
        &:nth-of-type(odd) {
            background-color: #ffffff;
        }
    }

    #ill-supplier-metadata > div > span {
        display: flex;
        flex-flow: row nowrap;
        flex-grow: 1;
        flex-basis: 0;
    }

}

.ill_availability_sourcename {
    margin-top: 20px;
}

#continue-request-row {
    text-align: center;
}

#dc_fieldset {
    border: 1px solid #DDDDDD;
    border-radius: 10px;
    border-width: 1px;
    padding: 5px;
}

.label_dc {
    cursor: pointer;
    display: inline;
    margin: 0;
    padding: 0;
}

.btn-danger {
    color: white !important;
}

.count_label {
    $base: #369;
    background-color: $base;
    border-radius: 5px;
    color: #FFF;
    display: inline-block;
    font-weight: bold;
    min-width: 1.5em;
    padding: .2em;
    text-align: center;
    text-shadow: 0 -1px 0 rgba( 0, 0, 0, .25 );

    &:hover {
        background-color: lighten( $base, 20% );
    }
}

.user_overdues_count,
.user_fines_count {
    background-color: #990000;

    &:hover {
        background-color: lighten( #990000, 10% );
    }
}

.user_holds_waiting_count {
    background-color: #538200;

    &:hover {
        background-color: lighten( #538200, 10% );
    }
}

#user_summary {
    border: 1px solid #EAEAE6;
    margin-bottom: 1em;
    padding-bottom: .5em;

    h2 {
        background-color: #E2E8E8;
        color: $high-contrast-grey;
        font-size: 1.1rem;
        margin-top: 0;
        padding: 5px;
        text-align: center;
    }

    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;

        a {
            display: block;
            font-weight: bold;
            padding: .2em 15px;
        }
    }
}

/* jQuery Bar Rating plugin for star ratings */

$star-default: #D2D2D2;
$star-active: #C24A4A;
$star-selected: #EDB867;

.br-wrapper {
    display: inline-block;
}

.br-theme-fontawesome-stars {

    .br-widget {
        height: 28px;
        white-space: nowrap;

        a {
            -webkit-font-smoothing: antialiased;
            font: normal normal normal 20px/1 FontAwesome;
            margin-right: 2px;
            text-decoration: none;
            text-rendering: auto;

            &::after {
                color: $star-default;
                content: "\f005";
            }

            &.br-active {
                &::after {
                    color: $star-active;
                }
            }

            &.br-selected {
                &::after {
                    color: $star-selected;
                }
            }
        }


        .br-current-rating {
            display: none;
        }
    }

    .br-readonly {
        a {
            cursor: default;
        }
    }

}

#cancel_rating_text {
    a {
        color: #C24A4A;
    }
}

@media print {
    .br-theme-fontawesome-stars {

        .br-widget {
            a {
                &::after {
                    color: #000000;
                    content: "\f006";
                }

                &.br-active::after,
                &.br-selected::after {
                    color: #000000;
                    content: "\f005";
                }
            }

        }

    }
}

/* END jQuery Bar Rating plugin for star ratings */

#qrcode {
    margin-left: 35px;

    img,
    canvas {
        margin-top: 1em;
    }
}

/*opac browse search*/

#browse-resultswrapper {
    margin-top: 15px;
}
#browse-searchfuzziness {
    padding: 15px 0;
}

#browse-searchresults, #browse-selectionsearch {
    border: 1px solid #E3E3E3;
    border-radius: 4px;
    padding: 0;
    margin-bottom: 2em;
}

#browse-selectionsearch p.subjects {
    font-size: 0.9em;
    margin-bottom: 0;
}

#browse-selectionsearch h4 {
    margin: 0;
}

#browse-suggestionserror {
    margin-top: 1rem;
}

#browse-search {
    .loading {
        text-align: center;

        img {
            margin:0.5em 0;
            position: relative;
            left: -5px;
        }
    }
}

#card_template {
    display: none;
}

.result-title {
    margin-bottom: .4rem;
    margin-left: 1rem;
}
/*end browse search*/

/* Skip to content link. CSS adapted from https://webaim.org/ */
#scrolltocontent {
    background: #c60000;
    border: 1px solid white;
    border-radius: 0 0 4px 0;
    border-width: 0 1px 1px 0;
    color: white;
    left: 0px;
    padding: 6px 12px;
    position: absolute;
    text-decoration: none;
    text-shadow: 0 -1px 0 rgba(58, 0, 0, 0.75);
    top: -40px;
    transition: top .5s ease-out;
    z-index: 100;

    &:focus {
        left: 0px;
        outline-color: transparent;
        position: absolute;
        top: 0px;
        transition: top .1s ease-in;
    }
}

.accordion {
    .card-header {
        padding: 0;

        a {
            display: block;
            padding: .75rem 1.25rem;

            &[aria-expanded="true"] { font-weight: bold; }
            &[aria-expanded="false"] { font-weight: normal; }

            &:hover {
                background-color: rgba(255, 255, 204, 0.8);
                text-decoration: none;
            }
        }
    }

    .collapse {
        &.show {
            border-top: 1px solid #888;
        }
    }
}

.branchaddress {
    margin-bottom: 1rem;
}

#openid_connect {
    background-color: #fff;
    border: 1px solid #AAA;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2);
    margin: .5em 0;

    i {
        color: #b53329;
        margin: 0 .5em;
    }
}

@import "responsive";