koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss

   1 @import "common";
   2
   3 .no-js {
   4     .dateformat {
   5         display: inline;
   6         white-space: nowrap;
   7     }
   8
   9     .modal-body {
  10         padding: 0;
  11     }
  12
  13     .selections-toolbar,
  14     #renewall_js {
  15         display: none;
  16     }
  17
  18     #sortsubmit {
  19         display: inline;
  20         padding-left: 0;
  21         padding-right: 0;
  22     }
  23     .dropdown-toggle::after {
  24         border: 0;
  25     }
  26
  27     #listsmenu,
  28     #user-menu,
  29     .nav-item .login-link {
  30         color: $links;
  31
  32         &:hover {
  33             color: $links-hover;
  34         }
  35     }
  36 }
  37
  38 .js {
  39     .dateformat,
  40     #sortsubmit,
  41     #sorting-form,
  42     .js-hide {
  43         display: none;
  44     }
  45 }
  46
  47 .popup {
  48     padding-left: 0;
  49     padding-right: 0;
  50
  51     .main {
  52         font-size: 90%;
  53         padding: 0 1em;
  54     }
  55
  56     legend {
  57         line-height: 1.5em;
  58         margin-bottom: .5em;
  59     }
  60 }
  61
  62 a {
  63     &:link,
  64     &:visited {
  65         &.cartRemove {
  66             color: #900;
  67             font-size: 90%;
  68             padding-left: 0;
  69
  70             &:hover {
  71                 color: #c60000;
  72             }
  73         }
  74     }
  75
  76     &.cancel {
  77         padding-left: 1em;
  78     }
  79
  80     &.title {
  81         font-size: 108%;
  82         font-weight: bold;
  83     }
  84
  85     &.login-link {
  86         color: #005580;
  87         font-weight: bold;
  88     }
  89
  90     .idreambooksrating {
  91         color: #29ADE4;
  92         font-size: 30px;
  93         line-height: 30px;
  94         padding-left: 85px;
  95         text-decoration: none;
  96     }
  97
  98     &.reviewlink,
  99     &.reviewlink:visited {
 100         color: black;
 101         font-weight: normal;
 102         text-decoration: none;
 103     }
 104
 105     &.OpenURL img {
 106         vertical-align: middle;
 107     }
 108
 109     &.addtocart {
 110         padding-right: 0;
 111     }
 112
 113     &.highlight_toggle {
 114         display: none;
 115     }
 116
 117     &.incart {
 118         color: #666;
 119     }
 120
 121     &.remove {
 122         &:hover {
 123             color: #900;
 124
 125             i {
 126                 .fa {
 127                     color: #c60000
 128                 }
 129             }
 130         }
 131     }
 132 }
 133
 134 input,
 135 textarea {
 136     width: auto;
 137 }
 138
 139 .input-fluid {
 140     width: 50%;
 141 }
 142
 143 legend {
 144     color: #727272;
 145     font-size: 110%;
 146     font-weight: bold;
 147 }
 148
 149 table {
 150     font-size: 90%;
 151 }
 152
 153 table,
 154 td {
 155     background-color: #FFF;
 156 }
 157
 158 tr {
 159     &.outstanding {
 160         font-style: italic;
 161     }
 162 }
 163
 164 td {
 165     img {
 166         max-width: none;
 167     }
 168
 169     &.overdue {
 170         color: #CC3333;
 171     }
 172
 173     &.sum {
 174         background-color: #FFFFE5;
 175         font-weight: bold;
 176     }
 177
 178     .btn {
 179         white-space: nowrap;
 180     }
 181
 182     &.selectcol {
 183         width: 1ch;
 184     }
 185
 186     &.numcol {
 187         width: 3ch;
 188     }
 189
 190     &.hidden {
 191         display: none;
 192     }
 193 }
 194
 195 th {
 196     background-color: #E2E8E8;
 197
 198     &.sum {
 199         text-align: right;
 200     }
 201
 202     &[scope="row"] {
 203         background-color: transparent;
 204         text-align: right;
 205     }
 206 }
 207
 208 #advsearch {
 209     input,
 210     select {
 211         max-width: 100%;
 212     }
 213 }
 214
 215 #advsearches,
 216 #booleansearch {
 217     label {
 218         display: inline;
 219     }
 220 }
 221
 222 #booleansearch {
 223     width: 80%;
 224 }
 225
 226 #advsearch_limits,
 227 #subtypes {
 228     label {
 229         color: #727272;
 230         display: block;
 231         font-size: 110%;
 232         font-weight: bold;
 233     }
 234
 235     &.row {
 236         margin-bottom: 15px;
 237     }
 238 }
 239
 240 .advanced-search-terms {
 241     &.extended {
 242         .search-term-row {
 243             grid-template-columns: 25% 35% 35% 5%;
 244             margin: 5px 0;
 245         }
 246     }
 247 }
 248
 249 .actions {
 250     white-space: nowrap;
 251 }
 252
 253 .advsearch_limit {
 254     border: 1px solid #EEE;
 255     font-size: 90%;
 256     height: 100%;
 257     margin-bottom: 15px;
 258     padding: 15px;
 259 }
 260
 261 .search_operator {
 262     text-align: right;
 263
 264     label {
 265         font-style: italic;
 266     }
 267 }
 268
 269 .ButtonPlus,
 270 .ButtonLess {
 271     i {
 272         font-size: 125%;
 273     }
 274 }
 275
 276 #basketcount {
 277     display: inline;
 278     margin: 0;
 279     padding: 0;
 280
 281     span {
 282         @include border-radius-all( 3px );
 283         background-color: #85ca11;
 284         color: #FFF;
 285         display: inline;
 286         font-family: 'NotoSans';
 287         font-size: 80%;
 288         font-weight: normal;
 289         margin: 0 0 0 .9em;
 290         padding: 0 .3em;
 291     }
 292 }
 293
 294
 295 #members {
 296     p {
 297         color: #727272;
 298     }
 299
 300     a {
 301         &:link,
 302         &:visited,
 303         &:hover,
 304         &:active {
 305             text-decoration: none;
 306         }
 307
 308         &.logout {
 309             color: #E8583C;
 310             font-weight: bold;
 311
 312             &:hover {
 313                 color: #E8583C;
 314             }
 315         }
 316
 317         &.clearsh {
 318             color: #D43C00;
 319             font-size: 80%;
 320             font-weight: normal;
 321             padding-bottom: .6rem;
 322             padding-top: .6rem;
 323
 324             &:hover {
 325                 color: #E8583C;
 326             }
 327         }
 328     }
 329
 330     .dropdown-menu {
 331         a {
 332             &:hover {
 333                 color: #005580;
 334                 text-decoration: underline;
 335
 336                 &.logout {
 337                     &:hover {
 338                         color: #E8583C;
 339                     }
 340                 }
 341             }
 342         }
 343     }
 344
 345     .divider-vertical {
 346         border: 1px solid #EEE;
 347         border-right-color: #FCF9FC;
 348         margin: 5px 0;
 349     }
 350 }
 351
 352 #loggedinuser-menu {
 353     min-width: 300px;
 354     padding: .5em 1em;
 355
 356     .divider-vertical {
 357         margin: 5px 5px;
 358     }
 359 }
 360
 361 #moresearches {
 362     margin: .5em 30px;
 363     padding: 0 15px;
 364
 365     li {
 366         display: inline-block;
 367         padding-right: 5px;
 368         white-space: nowrap;
 369
 370         &::after {
 371             content: " | ";
 372         }
 373
 374         &:last-child {
 375             &::after {
 376                 content: "";
 377             }
 378         }
 379
 380     }
 381
 382     ul {
 383         margin: 0;
 384     }
 385 }
 386
 387 #news {
 388     margin: .5em 0;
 389     padding: 1em;
 390
 391     .newsitem {
 392         &:last-child {
 393             .newsfooter {
 394                 border-bottom: 0;
 395             }
 396         }
 397     }
 398 }
 399
 400 .newscontainer {
 401     border: 1px solid #DDD;
 402 }
 403
 404 .newsheader {
 405     margin: 0;
 406     padding: 8px 0;
 407 }
 408
 409 .newsbody {
 410     padding: 8px 0;
 411 }
 412
 413 .newsfooter {
 414     border-bottom: 1px solid #EEE;
 415     color: #727272;
 416     font-size: 90%;
 417     margin-bottom: .5em;
 418     padding-bottom: .5em;
 419 }
 420
 421 #rssnews-container {
 422     color: #727272;
 423     font-size: 90%;
 424 }
 425
 426 #rssnews-container {
 427     font-size: 90%;
 428     padding: .5em 0;
 429 }
 430
 431 .rsssearchlink {
 432     &:hover {
 433         text-decoration: none;
 434     }
 435 }
 436
 437 .fa {
 438     &.fa-rss {
 439         background: rgb(240, 109, 52) none;
 440         border-radius: 3px;
 441         color: #FFF;
 442         margin: 0 2px;
 443         padding: 2px 4px;
 444         text-shadow: 1px 0 1px rgba(0, 0, 0, .25);
 445
 446         &.rsssearchicon {
 447             font-size: 70%;
 448         }
 449     }
 450 }
 451
 452 #numresults {
 453     color: #727272;
 454 }
 455
 456 .actions-menu {
 457     padding-top: 5px;
 458 }
 459
 460 .view,
 461 .actions,
 462 .toolbar,
 463 #action {
 464     a,
 465     button {
 466         color: darken( $links, 5% );
 467
 468         &:hover {
 469             i {
 470                 &.fa {
 471                     color: #44AE89;
 472                 }
 473             }
 474         }
 475
 476         i {
 477             &.fa {
 478                 color: #4466AE;
 479             }
 480         }
 481
 482         &.remove {
 483             &:hover {
 484                 color: #900;
 485
 486                 i {
 487                     &.fa {
 488                         color: #c60000;
 489                     }
 490                 }
 491             }
 492         }
 493
 494         &.disabled,
 495         &[disabled] {
 496             color: #333;
 497             filter: alpha(opacity=65);
 498             opacity: 0.65;
 499
 500             &:hover {
 501                 i {
 502                     &.fa {
 503                         color: #333;
 504                         filter: alpha(opacity=65);
 505                         opacity: 0.65;
 506                     }
 507                 }
 508             }
 509         }
 510     }
 511 }
 512
 513 .actions {
 514     &:first-child {
 515         .btn-link {
 516             padding-left: 0;
 517         }
 518     }
 519 }
 520
 521 /* Override Bootstrap alert */
 522 .alert {
 523     /* Redefine a new style for Bootstrap's class "close" since we use that already */
 524     /* Use <a class="closebtn" href="#">&times;</a> */
 525
 526     .closebtn {
 527         line-height: 20px;
 528         position: relative;
 529         right: -21px;
 530         top: -2px;
 531     }
 532 }
 533
 534 /* Add style for Bootstrap dropdown-header class */
 535 .dropdown-header {
 536     border-top: 1px solid #eee;
 537     color: #000;
 538     display: block;
 539     font-size: 90%;
 540     font-weight: 700;
 541     line-height: 1.42857143;
 542     padding: 3px 20px;
 543     padding-left: 10px;
 544     white-space: nowrap;
 545 }
 546
 547 .btn-group.open {
 548     .btn-link {
 549         &.dropdown-toggle {
 550             background-image: none;
 551             box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25);
 552         }
 553     }
 554 }
 555
 556 .breadcrumb {
 557     background-color: #F0F3F3;
 558     font-size: 85%;
 559     list-style: none outside none;
 560     margin: 15px;
 561     padding: 5px 10px;
 562     border-radius: 0px;
 563
 564     a {
 565
 566             color: darken( $links, 5%);
 567
 568     }
 569 }
 570
 571 .breadcrumb-item {
 572     &.active {
 573         a:link,
 574         a:visited,
 575         a:hover,
 576         a:active {
 577             color: #666;
 578             cursor: text;
 579             text-decoration: none;
 580         }
 581     }
 582 }
 583
 584 #opac-main-search {
 585     background: #f0f3f3;
 586     margin: 7px 0;
 587     padding: 15px;
 588
 589     label {
 590         color: $high-contrast-grey;
 591         font-size: 115%;
 592         font-weight: bold;
 593         margin: 0;
 594     }
 595 }
 596
 597 #cart-list-nav {
 598     flex-grow: 2;
 599 }
 600
 601 .table-striped tbody > tr:nth-child(odd) > td,
 602 .table-striped tbody > tr:nth-child(odd) > th {
 603     background-color: #F0F3F3;
 604
 605     a {
 606         color: darken( $links, 5%);
 607
 608         &.btn {
 609             color: #FFF;
 610
 611             &.btn-link {
 612                 color: $links;
 613             }
 614         }
 615     }
 616
 617     button {
 618         &.btn-link {
 619             color: darken( $links, 5% );
 620         }
 621     }
 622 }
 623
 624 #availability_facet {
 625     color: #727272;
 626 }
 627
 628 #facet-holdings-library {
 629     color: #727272;
 630 }
 631
 632 #toolbar {
 633     background-color: #f0f3f3;
 634     border: 1px solid #f0f3f3;
 635     margin: 0;
 636
 637     &.clearfix {
 638         background-color: #f0f3f3;
 639     }
 640 }
 641
 642 .item-thumbnail {
 643     max-width: none;
 644 }
 645
 646 .no-image {
 647     @include border-radius-all( 3px );
 648     background-color: #FFF;
 649     border: 1px solid #AAA;
 650     color: #979797;
 651     display: block;
 652     font-size: 86%;
 653     font-weight: bold;
 654     text-align: center;
 655     width: 75px;
 656 }
 657
 658 .bookcover {
 659     float: left;
 660     margin: 0;
 661     padding: 0;
 662     text-align: center;
 663
 664     .no-image {
 665         margin-bottom: 10px;
 666         margin-right: 10px;
 667     }
 668
 669     img {
 670         margin: 1em;
 671     }
 672 }
 673
 674 .custom_cover_image {
 675     img {
 676         max-width: 140px;
 677     }
 678 }
 679
 680 #biblio-cover-slider {
 681     background-color: #fff;
 682     border: 1px solid #b9d8d9;
 683     border-radius: 3px;
 684     margin: 0 1em .5em 0;
 685     padding: 10px 5px 5px 5px;
 686     min-height: 175px;
 687 }
 688
 689 .cover-slides {
 690     background: #FFF url("../img/spinner-small.gif") center center no-repeat;
 691
 692     .hint {
 693         font-size: 80%;
 694         padding: .5em 0;
 695     }
 696
 697     a {
 698         &.nav-active {
 699             &:link,
 700             &:visited {
 701                 color: #85ca11;
 702             }
 703         }
 704     }
 705 }
 706
 707 td {
 708     &.bookcover {
 709         background: #FFF url("../img/spinner-small.gif") center center no-repeat;
 710         min-width: 120px;
 711         text-align: center;
 712     }
 713
 714     .cover-slides {
 715         background: transparent none;
 716         border: 0;
 717         margin: 0;
 718         min-height: unset;
 719         padding: 0;
 720     }
 721 }
 722
 723 .cover-image {
 724     display: none;
 725
 726     img {
 727         height: auto;
 728         max-width: 100%;
 729     }
 730 }
 731
 732 .cover-nav {
 733     display: inline-block;
 734     padding: 3px 4px;
 735 }
 736
 737 div {
 738     &.required_label {
 739         display: none;
 740
 741         &.required {
 742             color: #C00;
 743             display: block;
 744             font-size: 95%;
 745             margin-left: 10rem;
 746             margin-top: 3px;
 747         }
 748     }
 749 }
 750
 751 .required {
 752     &.valid {
 753         color: #000;
 754     }
 755 }
 756
 757
 758 .label {
 759     background-color: transparent;
 760     color: inherit;
 761     display: inline;
 762     font-weight: normal;
 763     padding: 0;
 764     text-shadow: none;
 765 }
 766
 767 .blabel {
 768     background-color: #999999;
 769     border-radius: 3px;
 770     color: #FFFFFF;
 771     display: inline-block;
 772     font-weight: bold;
 773     padding: 2px 4px;
 774     text-shadow: 0 -1px 0 rgba( 0, 0, 0, .25 );
 775 }
 776
 777 .label-important {
 778     background-color: #B94A48;
 779 }
 780
 781 .label-warning {
 782     background-color: #F89406;
 783 }
 784
 785 .label-success {
 786     background-color: #468847;
 787 }
 788
 789 .label-info {
 790     background-color: #3A87AD;
 791 }
 792
 793 .label-inverse {
 794     background-color: #333333;
 795 }
 796
 797 fieldset {
 798     &.rows {
 799         clear: left;
 800         float: left;
 801         font-size: 90%;
 802         margin: .9em 0 0;
 803         padding: 0;
 804         width: 100%;
 805
 806         legend {
 807             font-size: 130%;
 808             font-weight: bold;
 809         }
 810
 811         div.label {
 812             display: inline-block;
 813             width: 9rem;
 814             margin-right: 1rem;
 815             float: none;
 816         }
 817
 818         label,
 819         .label {
 820             float: left;
 821             font-weight: bold;
 822             margin-right: 1rem;
 823             text-align: right;
 824             width: 9rem;
 825         }
 826
 827         label.checkbox-label {
 828             float: none;
 829             margin-right: 0;
 830             font-weight: normal;
 831             text-align: left;
 832             width: auto;
 833         }
 834
 835         label {
 836             &.error {
 837                 color: #C00;
 838                 float: none;
 839                 display: inline;
 840                 font-style: italic;
 841                 font-weight: normal;
 842                 margin-left: 1rem;
 843                 text-align: left;
 844                 width: auto;
 845             }
 846             &.lradio {
 847                 float: none;
 848                 margin: inherit;
 849                 width: auto;
 850             }
 851         }
 852
 853         fieldset {
 854             margin: 0;
 855             padding: .3em;
 856         }
 857
 858         ol {
 859             list-style-type: none;
 860             padding: 1em 1em 0 1em;
 861
 862             &.lradio {
 863                 label {
 864                     float: none;
 865                     margin-right: 0;
 866                     width: auto;
 867
 868                     &.lradio {
 869                         float: left;
 870                         margin-right: 1em;
 871                         width: 12em;
 872                     }
 873                 }
 874             }
 875         }
 876
 877
 878         li {
 879             clear: left;
 880             float: left;
 881             list-style-type: none;
 882             padding-bottom: 1em;
 883             width: 100%;
 884
 885             &.lradio {
 886                 width: auto;
 887
 888                 label {
 889                     float: none;
 890                     margin: 0;
 891                     width: auto;
 892                 }
 893                 input {
 894                     margin-right: 1rem;
 895                 }
 896             }
 897         }
 898
 899         .hint {
 900             display: block;
 901             margin-left: 10rem;
 902         }
 903     }
 904
 905     &.action {
 906         border: 0;
 907         clear: both;
 908         float: none;
 909         margin: 0;
 910         padding: 1em 0 .3em;
 911         width: auto;
 912
 913         p {
 914             margin-bottom: 1em;
 915         }
 916     }
 917
 918     table {
 919         font-size: 100%;
 920     }
 921 }
 922
 923 div {
 924     &.rows {
 925         float: left;
 926         clear: left;
 927         margin: 0;
 928         padding: 0;
 929         width: 100%;
 930
 931         + div.rows {
 932             margin-top: .6em;
 933         }
 934
 935         span {
 936             &.label {
 937                 float: left;
 938                 font-weight: bold;
 939                 margin-right: 1em;
 940                 text-align: left;
 941                 width: 9rem;
 942             }
 943         }
 944
 945         ol {
 946             list-style-type: none;
 947             margin-left: 0;
 948             padding: .5em 1em 0 0;
 949
 950             li {
 951                 li {
 952                     border-bottom: 0;
 953                 }
 954             }
 955         }
 956
 957         li {
 958             border-bottom: 1px solid #EEE;
 959             clear: left;
 960             float: left;
 961             list-style-type: none;
 962             padding-bottom: .2em;
 963             padding-top: .1em;
 964             width: 100%;
 965         }
 966
 967         ul {
 968             li {
 969                 margin-left: 7.3em;
 970
 971                 &:first-child {
 972                     clear: none;
 973                     float: none;
 974                     margin-left: 0;
 975                 }
 976             }
 977         }
 978     }
 979 }
 980
 981 /* different sizes for different tags in opac-tags.tt */
 982
 983 .tagweight0 {
 984     font-size: 12px;
 985 }
 986
 987 .tagweight1 {
 988     font-size: 14px;
 989 }
 990
 991 .tagweight2 {
 992     font-size: 16px;
 993 }
 994
 995 .tagweight3 {
 996     font-size: 18px;
 997 }
 998
 999 .tagweight4 {
1000     font-size: 20px;
1001 }
1002
1003 .tagweight5 {
1004     font-size: 22px;
1005 }
1006
1007 .tagweight6 {
1008     font-size: 24px;
1009 }
1010
1011 .tagweight7 {
1012     font-size: 26px;
1013 }
1014
1015 .tagweight8 {
1016     font-size: 28px;
1017 }
1018
1019 .tagweight9 {
1020     font-size: 30px;
1021 }
1022
1023 .toolbar {
1024     background-color: #EEEEEE;
1025     border: 1px solid #E8E8E8;
1026     font-size: .9rem;
1027     padding: 3px 3px 5px 5px;
1028     vertical-align: middle;
1029
1030     a:link,
1031     a:hover,
1032     button {
1033         font-size: .9rem;
1034         white-space: nowrap;
1035     }
1036
1037     label {
1038         display: inline;
1039         font-size: 100%;
1040         font-weight: bold;
1041     }
1042
1043     select {
1044         max-width: 100%;
1045     }
1046
1047     #tagsel_form {
1048         margin-top: .5em;
1049     }
1050
1051     li {
1052         &.dropdown-header {
1053             display: block;
1054         }
1055     }
1056
1057     ul {
1058         padding-left: 0;
1059     }
1060 }
1061
1062 #basket {
1063     .toolbar {
1064         padding: 7px 5px 9px 9px;
1065     }
1066 }
1067
1068 .selections {
1069     color: #727272;
1070     font-weight: bold;
1071
1072     &::before {
1073         color: #6c757d;
1074         content: "|";
1075         display: inline-block;
1076         font-weight: normal;
1077         padding: 0 .5rem;
1078         text-shadow: 1px 1px 0 #fff;
1079     }
1080 }
1081
1082 .check_control {
1083     &::before {
1084         color: #6c757d;
1085         content: "|";
1086         display: inline-block;
1087         font-weight: normal;
1088         padding: 0 .5rem;
1089         text-shadow: 1px 1px 0 #fff;
1090     }
1091 }
1092
1093 .selections-toolbar {
1094     background: linear-gradient(#B2B2B2 0%, #E0E0E0 14%, #E8E8E8 100%);
1095     border-bottom: none;
1096     margin-top: 3px;
1097     display: flex;
1098     margin: 0;
1099     padding-left: 10px;
1100     padding-top: .5em;
1101
1102     > div:first-child::before {
1103         content: "";
1104         padding: 0;
1105     }
1106
1107     a,
1108     button,
1109     input {
1110         font-size: .9rem;
1111     }
1112 }
1113
1114 .list-actions {
1115     display: inline;
1116
1117     a,
1118     button,
1119     input {
1120         font-size: .9rem;
1121     }
1122 }
1123
1124 .results_summary {
1125     color: #202020;
1126     display: block;
1127     font-size: 85%;
1128     padding: 0 0 .5em;
1129
1130     .results_summary {
1131         font-size: 100%;
1132     }
1133
1134     &.actions {
1135         margin-top: .5em;
1136     }
1137
1138     &.tagstatus {
1139         display: inline;
1140     }
1141
1142     .label {
1143         color: $high-contrast-grey;
1144     }
1145
1146     a {
1147         font-weight: normal;
1148     }
1149 }
1150
1151 #views {
1152     margin-bottom: .5em;
1153     padding: 0 2em .2em .2em;
1154 }
1155
1156 .view {
1157     background-color: #F0F3F3;
1158     border: 1px solid #C9C9C9;
1159     border-radius: 4px;
1160     color: #727272;
1161     display: inline-block;
1162     margin-right: .4em;
1163
1164     a,
1165     span {
1166         font-size: 87%;
1167         font-weight: normal;
1168         display: inline-block;
1169         padding: 4px 12px;
1170         margin-bottom: 0;
1171         font-size: 14px;
1172         line-height: 20px;
1173         text-align: center;
1174         text-decoration: none;
1175         vertical-align: middle;
1176     }
1177 }
1178
1179 #bibliodescriptions,
1180 #isbdcontents {
1181     clear: left;
1182     margin-top: .5em;
1183 }
1184
1185 .current-view {
1186     background-color: #FFF;
1187     font-weight: bold;
1188 }
1189
1190 .results-pagination {
1191     background-color: #F3F3F3;
1192     display: none;
1193     padding-bottom: 10px;
1194 }
1195
1196 .close_pagination {
1197     display: none;
1198 }
1199
1200 .back {
1201     float: right;
1202
1203     input {
1204         background: none !important;
1205         color: #999 !important;
1206     }
1207 }
1208
1209 .pagination_list {
1210     ul {
1211         margin: 0;
1212         padding: 0;
1213     }
1214
1215     li {
1216         border-top: 1px solid #DDDDDD;
1217         color: #999;
1218         font-size: 90%;
1219         list-style: none;
1220         padding: 4px;
1221
1222         &.highlight {
1223             background-color: #DDDDDD;
1224         }
1225
1226         a {
1227             padding-left: 0;
1228         }
1229     }
1230
1231     .li_pag_index {
1232         color: #636363;
1233         font-size: 90%;
1234         font-weight: bold;
1235         padding-right: 10px;
1236         text-align: right;
1237         width: 13px;
1238     }
1239 }
1240
1241 nav {
1242     .pagination {
1243         margin: 0;
1244     }
1245 }
1246
1247 .pagination_footer {
1248     background-color: #E1E1E1;
1249     text-align: center;
1250
1251     .close_pagination {
1252         display: none;
1253     }
1254 }
1255
1256 .l_Results {
1257     background-color: #E1E1E1;
1258
1259     .close_pagination {
1260         float: right;
1261         padding: 8px 12px;
1262     }
1263 }
1264
1265 .nav_results {
1266     border: 1px solid #D0D0D0;
1267     font-size: 95%;
1268     font-weight: bold;
1269     margin-top: .5em;
1270     position: relative;
1271 }
1272
1273 #a_listResults {
1274     color: #006699;
1275     display: inline-block;
1276     padding: 8px 28px;
1277     text-decoration: none;
1278 }
1279
1280 .pg_menu {
1281     background-color: #F3F3F3;
1282     border-top: 1px solid #D0D0D0;
1283     display: flex;
1284     margin: 0;
1285     white-space: nowrap;
1286
1287     .pg_link {
1288         color: #B2B2B2;
1289         flex-grow: 1;
1290         list-style: none;
1291         margin: 0;
1292
1293         &.back_results {
1294             a {
1295                 border-left: 1px solid #D0D0D0;
1296                 border-right: 1px solid #D0D0D0;
1297             }
1298         }
1299
1300         a,
1301         span {
1302             background-color: #F3F3F3;
1303             display: block;
1304             font-weight: normal;
1305             padding: .4em .5em;
1306             text-align: center;
1307         }
1308
1309         span {
1310             color: #B2B2B2;
1311         }
1312     }
1313 }
1314
1315 #listResults {
1316     li {
1317         color: #C5C5C5;
1318         display: inline-block;
1319         font-size: 80%;
1320         font-weight: normal;
1321         padding: 0;
1322         text-align: center;
1323
1324         a {
1325             background-color: #999999;
1326             color: #FFFFFF;
1327             display: block;
1328             font-weight: normal;
1329             min-width: 18px;
1330             text-decoration: none;
1331
1332             &:hover {
1333                 background-color: #006699;
1334             }
1335         }
1336
1337         .highlight {
1338             a {
1339                 background-color: #616161;
1340             }
1341         }
1342     }
1343 }
1344
1345 /* nav */
1346
1347 nav {
1348     &.libraries {
1349         li {
1350             list-style-type: none;
1351             padding: .3em .5em;
1352
1353             a {
1354                 display: block;
1355             }
1356         }
1357
1358         i.fa {
1359             color:  #7cbc0f;
1360         }
1361
1362         .fa-li {
1363             top:  unset;
1364         }
1365     }
1366
1367     &.breadcrumb {
1368         background-color: #F0F3F3;
1369         border-radius: 0;
1370         font-size: 85%;
1371         margin: 15px;
1372         padding: 5px 10px;
1373
1374         [aria-current="page"] {
1375             color: #000;
1376             font-weight: 700;
1377             text-decoration: none;
1378         }
1379     }
1380 }
1381
1382 .breadcrumb-item {
1383     + .breadcrumb-item {
1384         &::before {
1385             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;
1386             background-size: 8px;
1387             display: inline-block;
1388             content: '';
1389             float: none;
1390             height: .8em;
1391             width: .8em;
1392         }
1393     }
1394 }
1395
1396 .nav_pages {
1397     border-top: 1px solid #DDD;
1398     padding: .6em;
1399
1400     ul {
1401         display: inline-block;
1402         margin: 0;
1403         padding: 0;
1404     }
1405
1406     li {
1407         color: #999;
1408         list-style: none;
1409         padding: 4px;
1410
1411         a {
1412             &:hover {
1413                 text-decoration: underline;
1414             }
1415         }
1416     }
1417 }
1418
1419 /* action buttons */
1420 #action {
1421     background-color: #F5F5F5;
1422     border: 1px solid #E8E8E8;
1423     margin: .5em 0 0 0;
1424     padding: .5em;
1425
1426     li {
1427         list-style: none;
1428     }
1429
1430     a {
1431         color: darken( $links, 5% );
1432         font-weight: bold;
1433         text-decoration: none;
1434         text-align: left;
1435     }
1436 }
1437
1438 #export,
1439 #moresearches_menu {
1440     li {
1441         margin: 0;
1442         padding: 0;
1443
1444         a {
1445             font-weight: normal;
1446
1447             &.menu-inactive {
1448                 font-weight: bold;
1449             }
1450         }
1451     }
1452
1453     .dropdown-header {
1454         border-bottom: 1px solid #EEE;
1455         border-top: 0;
1456     }
1457
1458     .dropdown-menu a {
1459         display: block;
1460         width: 100%;
1461         padding: .25rem 1.5rem;
1462         clear: both;
1463         text-align: inherit;
1464         white-space: nowrap;
1465         border: 0;
1466      }
1467 }
1468
1469 .hint {
1470     color: #727272;
1471     font-size: 90%;
1472 }
1473
1474 .links {
1475     flex-grow: 1;
1476
1477     a {
1478         font-weight: bold;
1479     }
1480 }
1481
1482 #tagslist {
1483     padding-left: 0;
1484
1485     li {
1486         display: inline;
1487     }
1488 }
1489
1490 #tagsel_form input,
1491 .tag_results_input input {
1492     margin: 0 2px;
1493 }
1494
1495 .branch-info-tooltip {
1496     display: none;
1497 }
1498
1499 .ui-tooltip-content p {
1500     margin: .3em 0;
1501 }
1502
1503 .ui-widget-content {
1504     a {
1505         &:link,
1506         &:visited {
1507             &.btn-default,
1508             &.btn-secondary {
1509             }
1510         }
1511     }
1512 }
1513
1514 #social_networks {
1515     margin-top: .5em;
1516
1517     a {
1518         border: 1px solid transparent;
1519         border-radius: 4px;
1520         display: inline-block;
1521         min-width: 1em;
1522         padding: .5em;
1523         text-align: center;
1524     }
1525
1526     a:hover,
1527     a:active {
1528         border: 1px solid #EEE;
1529     }
1530
1531     span {
1532         color: #274D7F;
1533         display: block;
1534         float: left;
1535         font-size: 85%;
1536         font-weight: bold;
1537         line-height: 2em;
1538         margin: .5em;
1539     }
1540
1541     div {
1542         float: left;
1543     }
1544
1545     #facebook {
1546         color: #4267B2;
1547     }
1548
1549     #twitter {
1550         color: #1DA1F2;
1551     }
1552
1553     #linkedin {
1554         color: #0073b0;
1555     }
1556
1557     #email {
1558         color: #666;
1559     }
1560 }
1561
1562 #marc {
1563     td,
1564     th {
1565         background-color: transparent;
1566         border: 0;
1567         padding: 3px 5px;
1568         text-align: left;
1569     }
1570
1571     td:first-child {
1572         text-indent: 2em;
1573     }
1574
1575     p {
1576         padding-bottom: .6em;
1577
1578         .label {
1579             font-weight: bold;
1580         }
1581     }
1582
1583     ul {
1584         padding-bottom: .6em;
1585     }
1586
1587     .results_summary {
1588         clear: left;
1589
1590         ul {
1591             clear: none;
1592             display: inline;
1593             float: none;
1594             list-style: none;
1595             margin: 0;
1596             padding: 0;
1597         }
1598
1599         li {
1600             display: inline;
1601         }
1602     }
1603 }
1604
1605 #items,
1606 #items td,
1607 #items th {
1608     border: 1px solid #EEE;
1609     font-size: 90%;
1610 }
1611
1612 .patronimage {
1613     float: right;
1614     margin-left: 1em;
1615 }
1616
1617 #plainmarc {
1618     table {
1619         border: 0;
1620         font-family: monospace;
1621         font-size: 95%;
1622         margin: .7em 0 0;
1623     }
1624
1625     th {
1626         background-color: #FFF;
1627         border: 0;
1628         padding: 2px;
1629         text-align: left;
1630         vertical-align: top;
1631         white-space: nowrap;
1632     }
1633
1634     td {
1635         border: 0;
1636         padding: 2px;
1637         vertical-align: top;
1638     }
1639 }
1640
1641 #renewcontrols {
1642     float: right;
1643     font-size: 66%;
1644 }
1645
1646 #renewall_link {
1647     i:first-child {
1648         left: 9px;
1649     }
1650 }
1651
1652 .authref {
1653     text-indent: 2em;
1654
1655     .label {
1656         font-style: italic;
1657     }
1658 }
1659
1660 .authstanza {
1661     margin-top: 1em;
1662
1663     li {
1664         margin-left: .5em;
1665     }
1666 }
1667
1668 .authstanzaheading {
1669     font-weight: bold;
1670 }
1671
1672 .authorizedheading {
1673     font-weight: bold;
1674 }
1675
1676 .authres_notes,
1677 .authres_seealso,
1678 .authres_otherscript {
1679     padding-top: .5em;
1680 }
1681
1682 .authres_notes {
1683     font-style: italic;
1684 }
1685
1686 #daily-quote {
1687     margin-bottom: 1em;
1688 }
1689
1690 #didyoumean {
1691     @include border-radius-all( 3px );
1692     background-color: #EEE;
1693     border: 1px solid #E8E8E8;
1694     box-sizing: border-box;
1695     margin: .5em 1.5em;
1696     padding: .5em;
1697     text-align: left;
1698
1699     &.dym-loaded {
1700         background-color: #FFFBEA;
1701         border-color: #F4ECBE;
1702     }
1703 }
1704
1705 .suggestionlabel {
1706     font-weight: bold;
1707 }
1708
1709 .searchsuggestion {
1710     display: inline-block;
1711     padding: .2em .5em;
1712 }
1713
1714 .authlink {
1715     padding-left: .25em;
1716 }
1717
1718 #hierarchies {
1719     margin: 1em 0;
1720
1721     a {
1722         color: #069;
1723         font-weight: normal;
1724         text-decoration: underline;
1725
1726         &:hover {
1727             color: #990033;
1728         }
1729     }
1730 }
1731
1732
1733
1734 #cartDetails {
1735     background-color: #FFF;
1736     border: 1px solid rgba( 0, 0, 0, .2 );
1737     border-radius: 6px;
1738     box-shadow: 0 5px 10px rgba( 0, 0, 0, .2 );
1739     color: black;
1740     display: none;
1741     font-size: 90%;
1742     margin: 0;
1743     padding: 8px 20px;
1744     position: fixed;
1745     text-align: center;
1746     top: 50px;
1747     left: 50px;
1748     width: 180px;
1749     z-index: 10;
1750 }
1751
1752 #cartmenulink {
1753     white-space: nowrap;
1754 }
1755
1756 #search-facets {
1757     border: 1px solid #D2D2CF;
1758
1759     ul {
1760         margin: 0;
1761         padding: .3em;
1762     }
1763
1764     form {
1765         margin: 0;
1766     }
1767
1768     h2 {
1769         font-size: 90%;
1770         margin: 0 0 .6em 0;
1771         text-align: center;
1772
1773         a {
1774             background-color: #F0F3F3;
1775             border-bottom: 1px solid #D8D8D8;
1776             display: block;
1777             font-weight: bold;
1778             padding: .7em .2em;
1779         }
1780     }
1781
1782     h3 {
1783         font-size: 80%;
1784     }
1785
1786     li {
1787         font-size: 90%;
1788         font-weight: bold;
1789         list-style-type: none;
1790
1791         li {
1792             font-size: 95%;
1793             font-weight: normal;
1794             line-height: 125%;
1795             margin-bottom: 2px;
1796             padding: .1em .2em;
1797         }
1798
1799         &.showmore {
1800             a {
1801                 font-weight: bold;
1802                 text-indent: 1em;
1803             }
1804         }
1805     }
1806
1807     a {
1808         font-weight: normal;
1809     }
1810
1811     .facet-count {
1812         display: inline-block;
1813     }
1814
1815 }
1816
1817 #menu {
1818     font-size: 94%;
1819
1820     ul {
1821         padding-left: 0;
1822     }
1823
1824     li {
1825         list-style-type: none;
1826
1827         &:last-child {
1828             a {
1829                 border-bottom-width: 1px;
1830             }
1831         }
1832
1833         &.active {
1834             a {
1835                 background-color: #FFF;
1836                 border-top: 1px solid #999;
1837             }
1838         }
1839
1840         a {
1841             background-color: #f0f3f3;
1842             border: 1px solid #d8d8d8;
1843             border-bottom-width: 0;
1844             color: darken( $links, 5% );
1845             display: block;
1846             margin: 0;
1847             padding: .4em .6em;
1848             text-decoration: none;
1849         }
1850
1851     }
1852 }
1853
1854 #addto {
1855     display: inline-block;
1856     max-width: 10em;
1857 }
1858
1859 /* Search results add to cart (lists disabled) */
1860
1861 .searchresults {
1862     p {
1863         margin: 0;
1864         padding: 0 0 .6em 0;
1865
1866         &.details {
1867             color: #979797;
1868         }
1869     }
1870
1871     .commentline {
1872         @include border-radius-all( 3px );
1873         @include shadowed;
1874         background-color: rgba( 255, 255, 204, .4 );
1875         border: 1px solid #CCC;
1876         display: inline-block;
1877         margin: .3em;
1878         padding: .4em;
1879
1880         .yours {
1881             background-color: rgba( 239, 254, 213, .4 );
1882         }
1883     }
1884
1885     .commenter {
1886         color: #666;
1887         font-size: 85%;
1888     }
1889 }
1890
1891 .commentline .avatar {
1892     float: right;
1893     padding-left: .5em;
1894 }
1895
1896 /* style for search terms in catalogsearch */
1897 .term {
1898     /* color: blue; */
1899     background-color: #FFFFCC;
1900     color: #990000;
1901 }
1902
1903 /* style for shelving location in catalogsearch */
1904 .shelvingloc {
1905     display: block;
1906     font-style: italic;
1907 }
1908
1909 .sep {
1910     color: #888;
1911     padding: 0 .2em 0 .5em;
1912     text-shadow: 1px 1px 0 #FFF;
1913 }
1914
1915 %page-first-child {
1916     border-bottom-left-radius: 3px;
1917     border-top-left-radius: 3px;
1918     border-width: 1px;
1919 }
1920
1921 %page-last-child {
1922     border-bottom-right-radius: 3px;
1923     border-top-right-radius: 3px;
1924     border-width: 1px 1px 1px 0;
1925 }
1926
1927 %page-middle-child {
1928     background-color: #FFFFFF;
1929     border-color: #DDDDDD;
1930     border-image: none;
1931     border-style: solid;
1932     border-width: 1px 1px 1px 0;
1933     float: left;
1934     font-size: 11.9px;
1935     line-height: 20px;
1936     padding: 4px 12px;
1937     text-decoration: none;
1938 }
1939
1940 .pages {
1941     margin: 20px 0;
1942
1943     span {
1944         &:first-child {
1945             @extend %page-first-child;
1946         }
1947
1948         &:last-child {
1949             @extend %page-last-child;
1950         }
1951     }
1952
1953     a {
1954         @extend %page-middle-child;
1955
1956         &:first-child {
1957             @extend %page-first-child;
1958         }
1959
1960         &:last-child {
1961             @extend %page-last-child;
1962         }
1963     }
1964
1965     .inactive {
1966         @extend %page-middle-child;
1967         background-color: #F5F5F5;
1968     }
1969
1970     .currentPage {
1971         @extend %page-middle-child;
1972     }
1973
1974     a[rel='last'] {
1975         border-bottom-right-radius: 3px;
1976         border-top-right-radius: 3px;
1977     }
1978 }
1979
1980 .hold-message {
1981     @include border-radius-all( 3px );
1982     background-color: #FFF0B1;
1983     display: inline-block;
1984     margin: .5em;
1985     padding: .2em .5em;
1986 }
1987
1988 .reserve_date,
1989 .expiration_date {
1990     white-space: nowrap;
1991 }
1992
1993 #login {
1994     max-width: 300px;
1995 }
1996
1997 #loginModal {
1998     input {
1999         box-sizing: border-box;
2000         display: block;
2001         font-size: 150%;
2002         height: auto;
2003         padding: .4em;
2004         width: 100%;
2005
2006         &[type='submit'] {
2007             font-size: 100%;
2008             padding: .5em;
2009             transition: background-color .5s ease;
2010
2011             &:hover {
2012                 background: #77b50f none;
2013             }
2014         }
2015     }
2016
2017     .closebtn {
2018         color: #C00;
2019         opacity: 1;
2020
2021         &:hover {
2022             opacity: .4;
2023         }
2024     }
2025
2026     .modal-header,
2027     .modal-body,
2028     .modal-footer {
2029         font-size: 120%;
2030         padding: 1em 2em;
2031     }
2032 }
2033
2034 .nologininstructions,
2035 .forgotpassword,
2036 .patronregistration {
2037     padding-top: 1em;
2038 }
2039
2040 .registration-label {
2041     display: inline-block;
2042     font-weight: bold;
2043     padding: 5px;
2044 }
2045
2046 .registration-value {
2047     background-color: #ebf8ff;
2048     border-radius: 5px;
2049     display: inline-block;
2050     font-family: monospace;
2051     padding: 5px 10px;
2052 }
2053
2054 .btn-group {
2055     label,
2056     select {
2057         font-size: 13px;
2058     }
2059 }
2060
2061 .item-status {
2062     display: block;
2063     font-size: 95%;
2064     margin-bottom: .5em;
2065 }
2066
2067 .available {
2068     color: #006600;
2069 }
2070
2071 .unavailable {
2072     color: #990033;
2073 }
2074
2075 .ItemSummary .LabelCallNumber::before {
2076     content: " [";
2077 }
2078
2079 .ItemSummary .CallNumber::after {
2080     content: "]";
2081 }
2082
2083 .waiting,
2084 .intransit,
2085 .notforloan,
2086 .checkedout,
2087 .lost,
2088 .notonhold {
2089     display: block;
2090 }
2091
2092 .notforloan {
2093     color: #900;
2094 }
2095
2096 .lost {
2097     color: #666;
2098 }
2099
2100 .suggestion {
2101     background-color: #F0F3F3;
2102     border: 1px solid #F0F3F3;
2103     color: $high-contrast-grey;
2104     margin: 1em auto;
2105     padding: .5em;
2106     width: 35%;
2107 }
2108
2109 .transl1 {
2110     width: 100%;
2111 }
2112
2113
2114 #user-menu-trigger {
2115     display: none;
2116
2117     i {
2118         padding: 14px 0 0;
2119         width: 14px;
2120     }
2121
2122     .caret {
2123         border-bottom-color: #999999;
2124         border-top-color: #999999;
2125         margin-top: 18px;
2126     }
2127 }
2128
2129 /* Class to be added to toolbar when it starts being fixed at the top of the screen*/
2130 .floating {
2131     box-shadow: 0 3px 2px 0 rgba( 0, 0, 0, .4 );
2132     margin-top: 0;
2133     z-index: 5;
2134 }
2135
2136 .tdlabel {
2137     display: none;
2138     font-weight: bold;
2139 }
2140
2141 #ulactioncontainer {
2142     min-width: 16em;
2143 }
2144
2145 .notesrow {
2146     label {
2147         font-weight: bold;
2148     }
2149
2150     span {
2151         display: block;
2152     }
2153 }
2154
2155 .thumbnail-shelfbrowser span {
2156     margin: 0 auto;
2157 }
2158
2159 .table-bordered {
2160     border-radius: 0;
2161     thead:first-child tr:first-child > th {
2162         &:last-child {
2163         border-radius: 0;
2164         }
2165         &:first-child {
2166         border-radius: 0;
2167         }
2168     }
2169     tbody:last-child tr:last-child > td {
2170         &:last-child {
2171         border-radius: 0;
2172         }
2173         &:first-child {
2174         border-radius: 0;
2175         }
2176     }
2177 }
2178
2179 .tags,
2180 .shelves {
2181     ul {
2182         display: inline-block;
2183         list-style: none;
2184         margin: 0;
2185         padding: 0;
2186
2187         li {
2188             display: inline;
2189         }
2190     }
2191 }
2192
2193 .coverimages {
2194     float: right;
2195 }
2196
2197 #termsList {
2198     label {
2199         display: inline;
2200         vertical-align: middle;
2201     }
2202
2203     ul {
2204         border-bottom: 1px solid #EEE;
2205         list-style-type: none;
2206         margin: 0;
2207         padding: .6em 0;
2208     }
2209
2210     li {
2211         list-style-type: none;
2212         margin: 0;
2213         padding: 0;
2214     }
2215 }
2216
2217
2218 #overdrive-results,
2219 #recordedbooks-results,
2220 #openlibrary-results {
2221     font-weight: bold;
2222     padding-left: 1em;
2223 }
2224
2225 .throbber {
2226     vertical-align: middle;
2227 }
2228
2229 #overdrive-results-list .star-rating-control {
2230     display: block;
2231     overflow: auto;
2232 }
2233
2234 #holdingst {
2235     table-layout: fixed;
2236
2237     td {
2238         overflow-wrap: break-word;
2239     }
2240 }
2241
2242 #shelfbrowser {
2243     table {
2244         margin: 0;
2245     }
2246
2247     table,
2248     td,
2249     th {
2250         border: 0;
2251         font-size: 90%;
2252         text-align: center;
2253     }
2254
2255     td,
2256     th {
2257         padding: 3px 5px;
2258         width: 20%;
2259
2260         &.nav-cell {
2261             padding: 0;
2262             vertical-align: middle;
2263             width: 1em;
2264         }
2265     }
2266
2267     a {
2268         display: block;
2269         font-size: 110%;
2270         font-weight: bold;
2271         text-decoration: none;
2272
2273         &.shelfbrowser_cover {
2274             min-height: 80px;
2275             min-width: 80px;
2276             display: inline-block;
2277         }
2278     }
2279
2280     #browser_previous {
2281         a {
2282             transform: rotate(-90deg);
2283             white-space: nowrap;
2284
2285             i {
2286                 padding: 0 .5em;
2287             }
2288         }
2289     }
2290
2291     #browser_next {
2292         a {
2293             transform: rotate(90deg);
2294             white-space: nowrap;
2295
2296             i {
2297                 padding: 0 .5em;
2298             }
2299         }
2300     }
2301 }
2302
2303 #holds {
2304     margin: 0 auto;
2305     max-width: 800px;
2306 }
2307
2308 .holdrow {
2309     border-bottom: 1px solid #CCC;
2310     clear: both;
2311     margin-bottom: .5em;
2312     padding: 0 1em 1em 1em;
2313
2314     fieldset {
2315         border: 0;
2316         float: none;
2317         margin: 0;
2318
2319         .label {
2320             font-size: 14px;
2321         }
2322     }
2323
2324     label {
2325         display: inline;
2326     }
2327 }
2328
2329 .hold-options {
2330     clear: both;
2331 }
2332
2333 .toggle-hold-options {
2334     background-color: #EEE;
2335     clear: both;
2336     display: block;
2337     font-weight: bold;
2338     margin: 1em 0;
2339     padding: .5em;
2340 }
2341
2342 .copiesrow {
2343     clear: both;
2344 }
2345
2346 #idreambooksreadometer {
2347     float: right;
2348 }
2349
2350 .idreambookslegend {
2351     font-size: small;
2352 }
2353
2354 .idreambookssummary {
2355     a {
2356         color: #707070;
2357         text-decoration: none;
2358     }
2359
2360     img {
2361         vertical-align: middle;
2362     }
2363 }
2364
2365 .idbresult {
2366     color: #29ADE4;
2367     margin: .5em;
2368     padding: .5em;
2369     text-align: center;
2370
2371     img {
2372         padding-right: 6px;
2373         vertical-align: middle;
2374     }
2375
2376     a,
2377     a:visited {
2378         text-decoration: none;
2379         color: #29ADE4;
2380     }
2381 }
2382
2383 .js-show {
2384     display: none;
2385 }
2386
2387 .modal-nojs {
2388     .modal-header,
2389     .modal-footer {
2390         display: none;
2391     }
2392 }
2393
2394 .contents {
2395     width: 75%;
2396
2397     .newline::after {
2398         content: "\A → ";
2399         white-space: pre;
2400     }
2401
2402     .t {
2403         font-weight: bold;
2404         display: inline;
2405     }
2406
2407     .r {
2408         display: inline;
2409     }
2410 }
2411
2412
2413 .contentblock {
2414     font-size: 95%;
2415     line-height: 135%;
2416     margin-left: 2em;
2417
2418     :first-child::before {
2419         content: "→ ";
2420     }
2421 }
2422
2423 .m880 {
2424     display: block;
2425     float: right;
2426     padding-left: 20px;
2427     text-align: right;
2428     width: 50%;
2429 }
2430
2431 #memberentry-form {
2432     input.error {
2433         border-color: #C00;
2434         outline: 0 none;
2435
2436         &:focus {
2437             border-color: #C00;
2438             box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(204, 0, 0, .6);
2439             outline: 0 none;
2440         }
2441
2442         label.error {
2443             color: #C00;
2444             float: none;
2445             font-size: 90%;
2446         }
2447     }
2448 }
2449
2450
2451 #illrequests {
2452     .illrequest-actions {
2453         margin-bottom: 20px;
2454         padding-top: 20px;
2455
2456         .btn,
2457         .cancel {
2458             margin-right: 5px;
2459         }
2460     }
2461
2462     #illrequests-create-button {
2463         margin-bottom: 20px;
2464     }
2465
2466     .bg-info {
2467         overflow: auto;
2468         position: relative;
2469
2470         #search-summary {
2471             position: absolute;
2472             top: 50%;
2473             transform: translateY( -50% );
2474         }
2475
2476     }
2477
2478     #freeform-fields .custom-name {
2479         float: left;
2480         margin-right: 1em;
2481         text-align: right;
2482         width: 8em;
2483     }
2484
2485     .dropdown:hover .dropdown-menu.nojs {
2486         display: block;
2487     }
2488
2489 }
2490
2491 .ill_availability_sourcename {
2492     margin-top: 20px;
2493 }
2494
2495 #continue-request-row {
2496     text-align: center;
2497 }
2498
2499 #dc_fieldset {
2500     border: 1px solid #DDDDDD;
2501     border-radius: 10px;
2502     border-width: 1px;
2503     padding: 5px;
2504 }
2505
2506 .label_dc {
2507     cursor: pointer;
2508     display: inline;
2509     margin: 0;
2510     padding: 0;
2511 }
2512
2513 .btn-danger {
2514     color: white !important;
2515 }
2516
2517 .count_label {
2518     $base: #369;
2519     background-color: $base;
2520     border-radius: 5px;
2521     color: #FFF;
2522     display: inline-block;
2523     font-weight: bold;
2524     min-width: 1.5em;
2525     padding: .2em;
2526     text-align: center;
2527     text-shadow: 0 -1px 0 rgba( 0, 0, 0, .25 );
2528
2529     &:hover {
2530         background-color: lighten( $base, 20% );
2531     }
2532 }
2533
2534 .user_overdues_count,
2535 .user_fines_count {
2536     background-color: #990000;
2537
2538     &:hover {
2539         background-color: lighten( #990000, 10% );
2540     }
2541 }
2542
2543 .user_holds_waiting_count {
2544     background-color: #538200;
2545
2546     &:hover {
2547         background-color: lighten( #538200, 10% );
2548     }
2549 }
2550
2551 #user_summary {
2552     border: 1px solid #EAEAE6;
2553     margin-bottom: 1em;
2554     padding-bottom: .5em;
2555
2556     h2 {
2557         background-color: #E2E8E8;
2558         color: $high-contrast-grey;
2559         font-size: 1.1rem;
2560         margin-top: 0;
2561         padding: 5px;
2562         text-align: center;
2563     }
2564
2565     ul {
2566         list-style-type: none;
2567         margin: 0;
2568         padding: 0;
2569
2570         a {
2571             display: block;
2572             font-weight: bold;
2573             padding: .2em 15px;
2574         }
2575     }
2576 }
2577
2578 /* jQuery Bar Rating plugin for star ratings */
2579
2580 $star-default: #D2D2D2;
2581 $star-active: #C24A4A;
2582 $star-selected: #EDB867;
2583
2584 .br-wrapper {
2585     display: inline-block;
2586 }
2587
2588 .br-theme-fontawesome-stars {
2589
2590     .br-widget {
2591         height: 28px;
2592         white-space: nowrap;
2593
2594         a {
2595             -webkit-font-smoothing: antialiased;
2596             font: normal normal normal 20px/1 FontAwesome;
2597             margin-right: 2px;
2598             text-decoration: none;
2599             text-rendering: auto;
2600
2601             &::after {
2602                 color: $star-default;
2603                 content: "\f005";
2604             }
2605
2606             &.br-active {
2607                 &::after {
2608                     color: $star-active;
2609                 }
2610             }
2611
2612             &.br-selected {
2613                 &::after {
2614                     color: $star-selected;
2615                 }
2616             }
2617         }
2618
2619
2620         .br-current-rating {
2621             display: none;
2622         }
2623     }
2624
2625     .br-readonly {
2626         a {
2627             cursor: default;
2628         }
2629     }
2630
2631 }
2632
2633 #cancel_rating_text {
2634     a {
2635         color: #C24A4A;
2636     }
2637 }
2638
2639 @media print {
2640     .br-theme-fontawesome-stars {
2641
2642         .br-widget {
2643             a {
2644                 &::after {
2645                     color: #000000;
2646                     content: "\f006";
2647                 }
2648
2649                 &.br-active::after,
2650                 &.br-selected::after {
2651                     color: #000000;
2652                     content: "\f005";
2653                 }
2654             }
2655
2656         }
2657
2658     }
2659 }
2660
2661 /* END jQuery Bar Rating plugin for star ratings */
2662
2663 #qrcode {
2664     margin-left: 35px;
2665
2666     img,
2667     canvas {
2668         margin-top: 1em;
2669     }
2670 }
2671
2672 /*opac browse search*/
2673
2674 #browse-resultswrapper {
2675     margin-top: 15px;
2676 }
2677 #browse-searchfuzziness {
2678     padding: 15px 0;
2679 }
2680
2681 #browse-searchresults, #browse-selectionsearch {
2682     border: 1px solid #E3E3E3;
2683     border-radius: 4px;
2684     padding: 0;
2685     margin-bottom: 2em;
2686 }
2687
2688 #browse-selectionsearch p.subjects {
2689     font-size: 0.9em;
2690     margin-bottom: 0;
2691 }
2692
2693 #browse-selectionsearch h4 {
2694     margin: 0;
2695 }
2696
2697 #browse-suggestionserror {
2698     margin-top: 1rem;
2699 }
2700
2701 #browse-search {
2702     .loading {
2703         text-align: center;
2704
2705         img {
2706             margin:0.5em 0;
2707             position: relative;
2708             left: -5px;
2709         }
2710     }
2711 }
2712
2713 #card_template {
2714     display: none;
2715 }
2716
2717 .result-title {
2718     margin-bottom: .4rem;
2719     margin-left: 1rem;
2720 }
2721 /*end browse search*/
2722
2723 /* Skip to content link. CSS adapted from https://webaim.org/ */
2724 #scrolltocontent {
2725     background: #c60000;
2726     border: 1px solid white;
2727     border-radius: 0 0 4px 0;
2728     border-width: 0 1px 1px 0;
2729     color: white;
2730     left: 0px;
2731     padding: 6px 12px;
2732     position: absolute;
2733     text-decoration: none;
2734     text-shadow: 0 -1px 0 rgba(58, 0, 0, 0.75);
2735     top: -40px;
2736     transition: top .5s ease-out;
2737     z-index: 100;
2738
2739     &:focus {
2740         left: 0px;
2741         outline-color: transparent;
2742         position: absolute;
2743         top: 0px;
2744         transition: top .1s ease-in;
2745     }
2746 }
2747
2748 .accordion {
2749     .card-header {
2750         padding: 0;
2751
2752         a {
2753             display: block;
2754             padding: .75rem 1.25rem;
2755
2756             &[aria-expanded="true"] { font-weight: bold; }
2757             &[aria-expanded="false"] { font-weight: normal; }
2758
2759             &:hover {
2760                 background-color: rgba(255, 255, 204, 0.8);
2761                 text-decoration: none;
2762             }
2763         }
2764     }
2765
2766     .collapse {
2767         &.show {
2768             border-top: 1px solid #888;
2769         }
2770     }
2771 }
2772
2773 .branchaddress {
2774     margin-bottom: 1rem;
2775 }
2776
2777 #openid_connect {
2778     background-color: #fff;
2779     border: 1px solid #AAA;
2780     box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2);
2781     margin: .5em 0;
2782
2783     i {
2784         color: #b53329;
2785         margin: 0 .5em;
2786     }
2787 }
2788
2789 @import "responsive";