koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss

   1 @import "mixins";
   2 @import "tables";
   3 @import "flatpickr";
   4
   5 ::selection {
   6     background: #538200;
   7     color: #FFFFFF;
   8 }
   9
  10 a {
  11     &:link,
  12     &:visited {
  13         color: #004D99;
  14         text-decoration: none;
  15     }
  16
  17     &:hover,
  18     &:active {
  19         color: #538200;
  20         text-decoration: none;
  21     }
  22
  23     &:hover {
  24         .term {
  25             color: #FF9090;
  26         }
  27     }
  28
  29     &.authlink {
  30         background-color: #e6f0f2;
  31         border-radius: 5px;
  32         display: inline-block;
  33         padding: 2px 4px;
  34     }
  35
  36     &.btn {
  37         &:link,
  38         &:visited {
  39             color: #333333;
  40         }
  41
  42         &.btn-link {
  43             &:link,
  44             &:visited {
  45                 color: #004D99;
  46             }
  47
  48             &:hover {
  49                 color: #538200;
  50             }
  51         }
  52     }
  53
  54     &.cancel {
  55         padding-left: 1em;
  56     }
  57
  58     &.cartRemove {
  59         color: #CC3333;
  60         font-size: 90%;
  61         margin: 0;
  62         padding: 0;
  63     }
  64
  65     &.clear_date {
  66         color: #C33;
  67         font-size: 130%;
  68
  69         &:hover {
  70             color: #FF9090;
  71         }
  72     }
  73
  74     &.close {
  75         &:hover {
  76             color: #538200;
  77         }
  78     }
  79
  80     &.csv {
  81         background-image: url("../img/famfamfam/silk/page_white_excel.png");
  82     }
  83
  84     &.dropdown-toggle {
  85         white-space: nowrap;
  86     }
  87
  88     &.incart {
  89         color: #666;
  90     }
  91
  92     &.disabled {
  93         color: #999999;
  94     }
  95
  96     &.document {
  97         background-position: left middle;
  98         background-repeat: no-repeat;
  99         display: inline-block;
 100         min-height: 20px;
 101         padding-left: 20px;
 102     }
 103
 104     &.highlight_toggle {
 105         display: none;
 106     }
 107
 108     .localimage {
 109         img {
 110             border: 1px solid #0000CC;
 111             margin: 0 .5em;
 112             padding: .3em;
 113         }
 114     }
 115
 116     &.pdf {
 117         background-image: url("../img/famfamfam/silk/page_white_acrobat.png");
 118     }
 119
 120     &.submit {
 121         @include default-button;
 122         display: inline-block;
 123
 124         &:active {
 125             border: 1px inset #999999;
 126         }
 127
 128         &:disabled {
 129             @include disabled-button;
 130         }
 131     }
 132
 133     &.term {
 134         text-decoration: underline;
 135     }
 136
 137     &.xml {
 138         background-image: url("../img/famfamfam/silk/page_white_code.png");
 139     }
 140
 141 }
 142 a.ctrl_link {
 143     display: inline-block;
 144     padding-right: 1rem;
 145 }
 146
 147 aside {
 148     h5 {
 149         font-size: 100%;
 150         margin: .5em 0;
 151     }
 152
 153     fieldset {
 154         &.brief {
 155             padding: .4em .7em;
 156
 157             button + button,
 158             input + input {
 159                 margin-left: 5px;
 160             }
 161
 162             fieldset {
 163                 border-width: 1px;
 164                 border-radius: 0;
 165                 margin: 0 0 .5em 0;
 166                 padding: .5em;
 167
 168                 legend {
 169                     font-size: 95%;
 170                     margin: 0;
 171                 }
 172
 173                 &.action {
 174                     margin-left: 0;
 175                     padding: .5em 0;
 176                 }
 177             }
 178
 179             input, select {
 180                 height: calc(1.5em + .75rem + 2px);
 181             }
 182
 183             label {
 184                 margin: .5em 0 0 0;
 185             }
 186
 187             li {
 188                 &.checkbox {
 189                     label {
 190                         display: inline;
 191                         margin-left: 0;
 192                     }
 193                 }
 194
 195                 &.dateinsert {
 196                     label {
 197                         display: inline;
 198                     }
 199
 200                     span {
 201                         &.label {
 202                             display: inline;
 203                         }
 204                     }
 205                 }
 206
 207                 &.radio {
 208                     padding: .7em 0;
 209
 210                     input {
 211                         padding: .3em 0;
 212                     }
 213
 214                     label {
 215                         display: inline;
 216                     }
 217
 218                     span {
 219                         &.label {
 220                             display: inline;
 221                         }
 222                     }
 223                 }
 224             }
 225
 226             ol {
 227                 margin: 0;
 228                 padding: 0;
 229             }
 230
 231             select,
 232             [type="text"] {
 233                 width: 100%;
 234             }
 235
 236             .flatpickr-input {
 237                 margin-right: 3px;
 238                 width: calc(100% - 20px);
 239             }
 240
 241             &+.action {
 242                 margin-left: 0;
 243                 padding: 0;
 244             }
 245         }
 246     }
 247 }
 248
 249 button {
 250     @include default-button;
 251
 252     &:active {
 253         border: 1px inset #999999;
 254     }
 255
 256     &:disabled {
 257         @include disabled-button;
 258     }
 259
 260     &.closebtn {
 261         background: transparent;
 262         border: 0;
 263         cursor: pointer;
 264         padding: 0;
 265     }
 266 }
 267
 268 main {
 269     &::after {
 270         clear: both;
 271         content: " ";
 272         display: table;
 273     }
 274 }
 275
 276 body {
 277     font-family: $font-main;
 278     font-size: 13px;
 279     line-height: 1.22;
 280     padding: 0 0 4em;
 281     text-align: left;
 282
 283     &.nobackdrop {
 284         .modal-backdrop {
 285             opacity: 0;
 286         }
 287     }
 288 }
 289
 290 br {
 291     &.clear {
 292         clear: both;
 293         line-height: 1px;
 294     }
 295 }
 296
 297 form {
 298     display: inline;
 299
 300     &.confirm {
 301         display: block;
 302         font-size: 110%;
 303         line-height: 130%;
 304
 305         ul {
 306             padding: 1em 0;
 307
 308             li {
 309                 list-style-type: none;
 310             }
 311         }
 312
 313         .notification_method {
 314             background-color: #FFE;
 315             border: 1px solid #CCC;
 316             border-radius: 5px;
 317             display: inline-block;
 318             margin: .5em 0;
 319             padding: .1em .3em;
 320
 321             &.none {
 322                 background-color: #EEE;
 323             }
 324         }
 325
 326         .hold-found-barcode {
 327             display: inline-block;
 328             font-size: 90%;
 329         }
 330     }
 331 }
 332
 333 h1 {
 334     font-size: 161.6%;
 335     font-weight: bold;
 336 }
 337
 338 #logo {
 339     background: transparent url("../img/koha-logo-medium.png") no-repeat 50% 50%;
 340     border: 0 none;
 341     margin: 2rem 1rem;
 342     padding: 0;
 343     width: 180px;
 344
 345     a {
 346         border: 0;
 347         cursor: pointer;
 348         display: block;
 349         height: 0 !important;
 350         margin: 0;
 351         overflow: hidden;
 352         padding: 44px 0 0;
 353         text-decoration: none;
 354         width: 180px;
 355     }
 356 }
 357
 358 h2 {
 359     font-size: 146.5%;
 360     font-weight: bold;
 361 }
 362
 363 h3 {
 364     font-size: 131%;
 365     font-weight: bold;
 366 }
 367
 368 h4 {
 369     font-size: 116%;
 370     font-weight: bold;
 371 }
 372
 373 h5 {
 374     font-size: 100%;
 375     font-weight: bold;
 376 }
 377
 378 h6 {
 379     font-size: 93%;
 380     font-weight: bold;
 381 }
 382
 383 h1,
 384 h2,
 385 h3,
 386 h4,
 387 h5,
 388 h6 {
 389     margin: .3em 0;
 390 }
 391
 392 hr {
 393     clear: both;
 394     margin: 1em 0;
 395 }
 396
 397 p {
 398     margin: .5em 0;
 399 }
 400
 401 strong {
 402     font-weight: bold;
 403
 404     em {
 405         font-style: italic;
 406         font-weight: bold;
 407     }
 408
 409     em & {
 410         font-style: italic;
 411         font-weight: bold;
 412     }
 413 }
 414
 415 em,
 416 cite {
 417     font-style: italic;
 418 }
 419
 420 input,
 421 textarea {
 422     &:focus {
 423         border-color: #538200;
 424         border-radius: 4px;
 425     }
 426 }
 427
 428 input {
 429     &[type="checkbox"],
 430     &[type="radio"] {
 431         margin: 0;
 432         vertical-align: middle;
 433     }
 434
 435     &[type="submit"],
 436     &[type="button"] {
 437         &:active {
 438             border: 1px inset #999999;
 439         }
 440     }
 441
 442     &[type="submit"],
 443     &[type="reset"],
 444     &[type="button"] {
 445         @include default-button;
 446
 447         &:active {
 448             border: 1px inset #999999;
 449         }
 450
 451         &:disabled {
 452             @include disabled-button;
 453         }
 454     }
 455
 456     &.submit {
 457         @include default-button;
 458
 459         &:active {
 460             border: 1px inset #999999;
 461         }
 462
 463         &:disabled {
 464             @include disabled-button;
 465         }
 466     }
 467 }
 468
 469 .input-warning {
 470     background-color: #FF9;
 471     border-color: #900;
 472 }
 473
 474 label,
 475 .label {
 476     color: #000;
 477     display: inline;
 478     font-size: inherit;
 479     font-weight: normal;
 480     max-width: inherit;
 481     padding: 0;
 482     vertical-align: middle;
 483
 484     input {
 485         &[type="checkbox"],
 486         &[type="radio"],
 487         &[type="checkbox"],
 488         &[type="radio"] {
 489             margin-top: 0;
 490         }
 491     }
 492
 493     &.circ_barcode {
 494         display: inline-block;
 495         font-size: 105%;
 496         font-weight: bold;
 497         margin-bottom: 1rem;
 498         max-width: 75%;
 499     }
 500
 501     &.required {
 502         color: #C00;
 503     }
 504 }
 505
 506 .subfield-label {
 507     font-style: italic;
 508
 509     span {
 510         &.subfield-code {
 511             font-weight: bold;
 512         }
 513     }
 514 }
 515
 516 .members-update-table {
 517     padding-top: 10px;
 518 }
 519
 520 #navmenulist {
 521     li {
 522         border-bottom: 1px solid #EEE;
 523         list-style: $nav-menu-bullet;
 524         padding: .2em 0;
 525
 526         a {
 527             text-decoration: none;
 528
 529             &.current {
 530                 font-weight: bold;
 531             }
 532         }
 533     }
 534 }
 535
 536 .main {
 537     margin-bottom: $language-footer-min-height * 1.5;
 538     margin-top: 1em;
 539 }
 540
 541 #login_controls {
 542     padding: .4em .5em;
 543     position: absolute;
 544     right: .5em;
 545 }
 546
 547 ul {
 548     padding-left: 1.1em;
 549
 550     li {
 551         list-style-type: disc;
 552
 553         input {
 554             &.submit {
 555                 font-size: 87%;
 556                 padding: 2px;
 557             }
 558         }
 559
 560         li {
 561             list-style-type: circle;
 562         }
 563     }
 564
 565     .toolbar {
 566         padding-left: 0;
 567
 568         button {
 569             font-family: $font-main;
 570             padding-bottom: 2px;
 571         }
 572
 573         li {
 574             display: inline;
 575             list-style: none;
 576         }
 577     }
 578
 579     &.budget_hierarchy {
 580         margin-left: 0;
 581         padding-left: 0;
 582
 583         li {
 584             display: inline;
 585
 586             &::after {
 587                 content: " -> ";
 588             }
 589
 590             &:first-child {
 591                 &::after {
 592                     content: "";
 593                 }
 594             }
 595
 596             &:last-child {
 597                 &::after {
 598                     content: "";
 599                 }
 600             }
 601         }
 602     }
 603
 604     // For Font Awesome icon bullets
 605     &.fa-ul {
 606         li {
 607             list-style-type: none;
 608         }
 609     }
 610
 611     &.ui-tabs-nav {
 612         li {
 613             list-style: none;
 614         }
 615     }
 616 }
 617
 618 ol {
 619     padding-left: 1.5em;
 620
 621     li {
 622         list-style: decimal;
 623     }
 624
 625     &.bibliodetails {
 626         float: left;
 627         margin: 0 0 1em 1em;
 628     }
 629 }
 630
 631
 632 .gradient {
 633     background-image: linear-gradient(to bottom, rgb(230, 240, 242) 1%, rgb(255, 255, 255) 99%);
 634     align-items: flex-start;
 635     display: flex;
 636 }
 637
 638 .cart-controls {
 639     border-top: 1px solid #E8E8E8;
 640     padding: 7px 0;
 641 }
 642
 643 #editions {
 644     table,
 645     td {
 646         border: 0;
 647     }
 648 }
 649
 650 .overdue,
 651 .debit {
 652     color: #CC0000;
 653     font-weight: bold;
 654 }
 655
 656 .strong {
 657     font-weight: bold;
 658 }
 659
 660 .problem {
 661     color: #990000;
 662     font-weight: bold;
 663 }
 664
 665 fieldset {
 666     background-color: #F4F8F9;
 667     border: 2px solid #B9D8D9;
 668     border-radius: 5px;
 669     margin: 1em 1em 1em 0;
 670     padding: 1em;
 671
 672     + fieldset {
 673         &.action {
 674             padding-top: 20px;
 675         }
 676     }
 677
 678     &.lastchecked {
 679         border-bottom-left-radius: 0;
 680         border-bottom-right-radius: 0;
 681         border-bottom-width: 0;
 682         margin-bottom: 0;
 683         margin-right: 0;
 684     }
 685
 686     .standard {
 687         background-color:#f4f8f9 !important;
 688     }
 689
 690     .contrast {
 691         background-color:#F3F3F3 !important;
 692     }
 693
 694     &.action {
 695         background-color: transparent;
 696         border: 0;
 697         clear: both;
 698         float: none;
 699         margin: .9em 0 0;
 700         padding: .4em;
 701         width: auto;
 702     }
 703
 704     &.brief {
 705         border: 2px solid #B9D8D9;
 706
 707         div {
 708             &.hint {
 709                 margin-bottom: .4em;
 710             }
 711         }
 712
 713         label {
 714             display: block;
 715             font-weight: bold;
 716             padding: .3em 0;
 717
 718             &.inline {
 719                 display: inline;
 720                 float: none;
 721                 margin-left: 1em;
 722                 width: auto;
 723             }
 724         }
 725
 726         li {
 727             margin-top: 1em;
 728
 729             &:first-child {
 730                 margin-top: 0;
 731             }
 732
 733             &[aria-disabled="true"] {
 734                 color: #999;
 735             }
 736
 737             &.inline {
 738                 display: inline;
 739                 float: none;
 740                 margin-left: 1em;
 741                 width: auto;
 742             }
 743
 744             &.radio,
 745             &.checkbox {
 746                 label {
 747                     display: inline;
 748                 }
 749             }
 750         }
 751
 752         ol,
 753         li {
 754             list-style-type: none;
 755         }
 756
 757         span {
 758             .label {
 759                 display: block;
 760                 font-weight: bold;
 761                 padding: .3em 0;
 762                 text-align: left;
 763             }
 764         }
 765
 766         .action {
 767             margin-left: 1em;
 768         }
 769     }
 770
 771     &.rows {
 772         border: 2px solid #B9D8D9;
 773         border-width: 1px;
 774         clear: left;
 775         float: left;
 776         font-size: 90%;
 777         margin: .9em 0 0;
 778         padding: 0;
 779         width: 100%;
 780
 781         fieldset {
 782             background-color: transparent;
 783             border-width: 1px;
 784             margin: 1em;
 785             padding: .3em;
 786
 787             &.action {
 788                 padding: 1em;
 789             }
 790         }
 791
 792         &.inputnote {
 793             clear: left;
 794             float: left;
 795             margin: 1em 0 0 11em;
 796         }
 797
 798
 799         &.left {
 800             label {
 801                 text-align: left;
 802                 width: 8em;
 803             }
 804
 805             li {
 806                 padding-bottom: .4em;
 807             }
 808
 809             span {
 810                 label {
 811                     text-align: left;
 812                     width: 8em;
 813                 }
 814             }
 815         }
 816
 817         &.ui-accordion-content {
 818             border-top-left-radius: 0;
 819             border-top-right-radius: 0;
 820             margin: 0;
 821             padding: 0;
 822             width: 100%;
 823
 824             table {
 825                 margin: 0;
 826             }
 827         }
 828
 829         &.unselected {
 830             background-color: #FFFFFF;
 831             border: 0;
 832             border-width: 0;
 833         }
 834
 835         caption {
 836             font-size: 120%;
 837         }
 838
 839         div {
 840             &.hint {
 841                 font-size: 105%;
 842                 margin: .5rem 0;
 843                 margin-left: 10.5rem;
 844             }
 845         }
 846
 847         label {
 848             float: left;
 849             font-weight: bold;
 850             margin-right: 1rem;
 851             text-align: right;
 852             width: 9rem;
 853
 854             &.error {
 855                 float: none;
 856                 margin-left: 1rem;
 857                 width: auto;
 858             }
 859
 860             &.inline {
 861                 display: inline;
 862                 float: none;
 863                 margin-left: 1rem;
 864             }
 865
 866             &.radio {
 867                 display: inline-block;
 868                 margin: 0 1rem 0 0;
 869                 padding: 0;
 870                 width: auto;
 871             }
 872
 873             &.yesno {
 874                 float: none;
 875                 width: auto;
 876             }
 877         }
 878
 879         legend {
 880             font-size: 110%;
 881             font-weight: bold;
 882             margin-left: 1em;
 883         }
 884
 885         li {
 886             clear: left;
 887             float: left;
 888             list-style-type: none;
 889             padding-bottom: 1em;
 890             width: 100%;
 891
 892             &[aria-disabled="true"] {
 893                 color: #999;
 894             }
 895
 896             &.radio {
 897                 margin: 0;
 898                 padding-left: 9em;
 899                 width: auto;
 900
 901                 input + label {
 902                     margin-left: 0;
 903                     padding-left: 0;
 904                 }
 905
 906                 label {
 907                     float: none;
 908                     margin: 0 0 0 1em;
 909                     width: auto;
 910                 }
 911             }
 912
 913             input + label {
 914                 margin-left: 0;
 915                 padding-left: 0;
 916             }
 917
 918             fieldset {
 919                 margin-left: 10em;
 920
 921                 label {
 922                     width: 6em;
 923                 }
 924
 925                 li.radio {
 926                     padding-left: 0;
 927                 }
 928             }
 929         }
 930
 931         ol {
 932             list-style-type: none;
 933             padding: 1em 1em 0;
 934
 935             &.radio {
 936                 label {
 937                     float: none;
 938                     margin-left: 20px;
 939                     margin-right: 30px;
 940                     padding-left: 0;
 941                     vertical-align: middle;
 942                     width: auto;
 943
 944                     &.radio {
 945                         float: left;
 946                         margin-right: 1em;
 947                         margin-top: 0;
 948                         width: 9em;
 949                     }
 950                 }
 951
 952                 input {
 953                     &[type="checkbox"],
 954                     &[type="radio"] {
 955                         margin-left: -20px;
 956                     }
 957                 }
 958             }
 959
 960             table {
 961                 display: inline-block;
 962                 font-size: 105%;
 963                 margin: 0;
 964             }
 965         }
 966
 967         p {
 968             margin: 1em 0 1em 1em;
 969         }
 970
 971         span {
 972             &.label {
 973                 float: left;
 974                 font-weight: bold;
 975                 margin-right: 1em;
 976                 text-align: right;
 977                 width: 9em;
 978             }
 979
 980             &.hint {
 981                 font-size: 105%;
 982             }
 983         }
 984
 985         table {
 986             clear: both;
 987             font-size: 105%;
 988             margin: 1em 0 1em 1em;
 989
 990             &.dataTable {
 991                 margin: 0;
 992             }
 993
 994             &.mceListBox {
 995                 margin: 0;
 996             }
 997         }
 998
 999         td {
1000             label {
1001                 float: none;
1002                 font-weight: normal;
1003                 width: auto;
1004             }
1005         }
1006
1007         .inputnote {
1008             clear: left;
1009             float: left;
1010             margin: 1em 0 0 11em;
1011         }
1012
1013         + h3 {
1014             clear: both;
1015             padding-top: .5em;
1016         }
1017
1018         .dataTables_wrapper {
1019             label {
1020                 font-weight: 400;
1021                 width: unset;
1022             }
1023         }
1024
1025         .dropdown-menu {
1026             li {
1027                 padding-bottom: 0;
1028             }
1029         }
1030
1031         .toptabs {
1032             clear: both;
1033             margin: 1em;
1034         }
1035     }
1036 }
1037
1038 #multi_receiving {
1039     fieldset {
1040         &.rows {
1041             label {
1042                 width: 50%;
1043             }
1044         }
1045     }
1046 }
1047
1048 legend {
1049     background-color: #FFFFFF;
1050     border: 2px solid #B9D8D9;
1051     border-radius: 3px;
1052     font-size: 123.1%;
1053     font-weight: bold;
1054     margin-bottom: 0;
1055     padding: .2em .5em;
1056     width: auto;
1057 }
1058
1059 details {
1060     > summary {
1061         cursor: pointer;
1062
1063         &::before {
1064             content: "\f0da";
1065             display: inline-block;
1066             font-family: FontAwesome;
1067             width: 1em;
1068         }
1069
1070         &.checkouts-by-itemtype {
1071             li {
1072                 display: inline-block;
1073             }
1074         }
1075     }
1076 }
1077
1078 details[open] {
1079     > summary {
1080         &::before {
1081             content: "\f0d7";
1082         }
1083     }
1084 }
1085
1086
1087 #floating-save {
1088     background-color: rgba(185, 216, 217, .6);
1089     bottom: 3%;
1090     position: fixed;
1091     right: 1%;
1092     width: 150px;
1093 }
1094
1095 #breadcrumbs {
1096     background-color: #E6F0F2;
1097     clear: both;
1098     margin: 0;
1099     padding: .8em .5em .8em 10px;
1100     position: relative;
1101
1102     .title {
1103         font-style: italic;
1104         font-weight: normal;
1105     }
1106 }
1107
1108 #header {
1109     + #breadcrumbs {
1110         margin-top: 1em;
1111     }
1112
1113     > .container-fluid {
1114         padding: 0;
1115     }
1116 }
1117
1118 div {
1119     &.action {
1120         background-color: transparent;
1121         border: 0;
1122         clear: both;
1123         float: none;
1124         margin: .9em 0 0;
1125         padding: .4em;
1126         width: auto;
1127     }
1128
1129     .renew_formfield {
1130         margin-bottom: 1em;
1131     }
1132
1133     .circmessage {
1134         margin-bottom: .3em;
1135         padding: 0 .4em .4em;
1136
1137         &:first-child {
1138             margin-top: 1em;
1139         }
1140     }
1141
1142     &.first {
1143         fieldset {
1144             margin-right: 0;
1145         }
1146     }
1147
1148     &.help {
1149         margin: .9em 0 0;
1150     }
1151
1152     &.justify {
1153         text-align: justify;
1154     }
1155
1156     &.note {
1157         background: linear-gradient(to bottom, #F4F6FA 0%, #E8EDF6 100%); // W3C
1158         border: 1px solid #BCBCBC;
1159         margin: .5em 0;
1160         padding: .5em;
1161
1162         i {
1163             &.fa-exclamation {
1164                 color: #CC0000;
1165                 font-style: italic;
1166                 padding: 0 .3em;
1167             }
1168         }
1169     }
1170
1171     // Tools > automatic_item_modification_by_age
1172     &.rules {
1173         display: block;
1174     }
1175
1176     &[class$="_table_controls"] {
1177         padding: .7em 0;
1178     }
1179
1180     &.results {
1181         padding: .7em 0;
1182     }
1183
1184     &.rule {
1185         background-color: #F4F8F9;
1186         border: 2px solid #B9D8D9;
1187         border-radius: 5px;
1188         margin: .3em;
1189         padding: .3em;
1190     }
1191
1192     &.lastchecked {
1193         border: 2px solid #BCDB89;
1194         border-bottom-left-radius: 5px;
1195         border-bottom-right-radius: 5px;
1196         padding: .2em 1em;
1197     }
1198
1199     &.listgroup {
1200         clear: left;
1201
1202         h4 {
1203             font-style: italic;
1204
1205             a {
1206                 font-size: 80%;
1207             }
1208         }
1209
1210         input {
1211             font-size: 90%;
1212             padding: .2em .6em;
1213         }
1214     }
1215
1216     &.sysprefs {
1217         h3 {
1218             margin: .2em 0 .2em .4em;
1219         }
1220
1221         dl {
1222             margin-left: 1.5em;
1223         }
1224
1225         &.hint {
1226             float: right;
1227             margin: .7em;
1228             padding: .5em;
1229             width: 25%;
1230         }
1231     }
1232
1233     &.rows {
1234         clear: left;
1235         float: left;
1236         margin: 0;
1237         padding: 0;
1238         width: 100%;
1239
1240         + div {
1241             &.rows {
1242                 margin-top: .6em;
1243             }
1244         }
1245
1246         li {
1247             border-bottom: 1px solid #EEE;
1248             clear: left;
1249             float: left;
1250             list-style-type: none;
1251             padding: .275em;
1252             width: 100%;
1253         }
1254
1255         ol {
1256             list-style-type: none;
1257             padding: .5em 1em 0 0;
1258
1259             li {
1260                 li {
1261                     border-bottom: 0;
1262                 }
1263             }
1264         }
1265
1266         p {
1267             margin-left: 10em;
1268         }
1269
1270         span {
1271             &.label {
1272                 float: left;
1273                 font-weight: bold;
1274                 margin-right: 1em;
1275                 padding-top: 0;
1276                 text-align: left;
1277                 width: 9em;
1278             }
1279         }
1280     }
1281
1282     &.pages {
1283         margin: .5em 0;
1284
1285         a {
1286             font-weight: bold;
1287             padding: 1px 5px;
1288             text-decoration: none;
1289
1290             &:link,
1291             &:visited {
1292                 background-color: #EEEEEE;
1293                 color: #3366CC;
1294             }
1295
1296             &:hover,
1297             &:active {
1298                 background-color: #FFC;
1299             }
1300         }
1301
1302         .current,
1303         .currentPage {
1304             background-color: #E6FCB7;
1305             color: #666;
1306             font-weight: bold;
1307             padding: 1px 5px;
1308         }
1309
1310         .inactive {
1311             background-color: #F3F3F3;
1312             color: #BCBCBC;
1313             font-weight: bold;
1314             padding: 1px 5px;
1315         }
1316     }
1317
1318     .browse {
1319         margin: .5em 0;
1320     }
1321 }
1322
1323 #header_search {
1324     background-position: .5em .5em;
1325     background-repeat: no-repeat;
1326     float: left;
1327     margin: .3em 0 .5em;
1328
1329     input {
1330         &[type="submit"] {
1331             border-radius: 3px;
1332             padding: .2em .8em;
1333         }
1334     }
1335
1336     div {
1337         &.residentsearch {
1338             border: 0;
1339             border-bottom: 1px solid #85CA11;
1340             padding: 0 0 .2em;
1341         }
1342     }
1343
1344     ul {
1345         &.ui-tabs-nav {
1346             margin-left: 1em;
1347             padding-top: 0;
1348
1349             li {
1350                 &.ui-state-default {
1351                     background: transparent none;
1352                     border: 0;
1353                     top: 0;
1354
1355                     a {
1356                         padding: .3em .6em;
1357                     }
1358                 }
1359
1360                 &.ui-tabs-active {
1361                     background-color: #FFFFF1;
1362                     border: 1px solid #85CA11;
1363                     border-top-width: 0;
1364                     top: -2px;
1365
1366                     a {
1367                         text-decoration: none;
1368                     }
1369                 }
1370             }
1371         }
1372     }
1373
1374     .ui-corner-top {
1375         border-radius: 0 0 4px 4px;
1376     }
1377
1378     > div,
1379     > ul {
1380         display: none;
1381
1382         > li {
1383             display: none;
1384
1385             &:first-of-type {
1386                 display: block;
1387             }
1388         }
1389
1390         &:first-of-type {
1391             display: block;
1392         }
1393     }
1394
1395     .head-searchbox {
1396         font-size: 1.3em;
1397         width: 30em;
1398     }
1399 }
1400
1401 #reserves,
1402 #checkouts {
1403     border: 1px solid #B9D8D9;
1404     padding: 1em;
1405 }
1406
1407 #sales {
1408     display: none;
1409 }
1410
1411 .tip {
1412     color: #808080;
1413 }
1414
1415 .single-line {
1416     white-space: nowrap;
1417 }
1418
1419 .ex {
1420     font-family: $font-monospace;
1421     font-weight: bold;
1422 }
1423
1424 dt {
1425     font-weight: bold;
1426 }
1427
1428 dd {
1429     font-size: 90%;
1430     font-weight: normal;
1431     padding: .2em .2em .2em 2.5em;
1432 }
1433
1434 #toolbar,
1435 .btn-toolbar {
1436     background-color: #EDF4F6;
1437     border: 1px solid #E6F0F2;
1438     border-radius: 5px 5px 0 0;
1439     margin: 0;
1440     padding: 5px;
1441
1442     .dropdown-menu {
1443         border-top-width: 1px;
1444         font-size: 13px;
1445     }
1446
1447     &.floating {
1448         border-radius: 0;
1449         margin-top: 0;
1450         z-index: 300;
1451     }
1452
1453     a.addtocart {
1454         display: block;
1455     }
1456
1457     a.cartRemove {
1458         padding: 6px 12px;
1459         font-size: 12px;
1460         display: none;
1461     }
1462
1463     a.addtocart.incart {
1464         display: none;
1465     }
1466
1467     a.cartRemove.incart {
1468         display: block;
1469     }
1470 }
1471
1472 #disabled {
1473     a {
1474         color: #999;
1475
1476         &:hover {
1477             color: #999;
1478         }
1479     }
1480 }
1481
1482 #disabled2 {
1483     a {
1484         color: #999;
1485     }
1486 }
1487
1488
1489 .patroninfo {
1490     margin-top: -.5em;
1491
1492     h5 {
1493         border-right: 1px solid #B9D8D9;
1494         margin-bottom: 0;
1495         padding-bottom: .5em;
1496         padding-left: 0em;
1497         padding-top: .5em;
1498
1499         &:empty {
1500             border-right: 0;
1501         }
1502     }
1503
1504     ul {
1505         border: 0;
1506         border-bottom: 0;
1507         border-right: 1px solid #B9D8D9;
1508         border-top: 0;
1509         margin: 0;
1510         padding: 0;
1511
1512         li {
1513             list-style-type: none;
1514             margin: 0;
1515         }
1516     }
1517
1518     + #menu {
1519         margin-right: 0;
1520     }
1521
1522     > div {
1523         border-right: 1px solid #B9D8D9;
1524         width: 100%;
1525     }
1526
1527     &.is-staff {
1528         h5 {
1529             background-color: #EEE;
1530         }
1531     }
1532 }
1533
1534 .patroninfo-section {
1535     padding: .5em;
1536     margin: .5em;
1537
1538     .rows {
1539         padding: .5em;
1540     }
1541 }
1542
1543 .patroninfo-heading {
1544     background-color: rgba(237, 244, 246, .4);
1545     padding: .5em;
1546     margin-bottom: .3em;
1547     clear: both;
1548
1549     h3 {
1550         display: inline-block;
1551     }
1552
1553     .btn {
1554         float: right;
1555     }
1556 }
1557
1558 /* Patron image */
1559
1560 .patronimage-container {
1561     padding: .2em;
1562     position: relative;
1563
1564     &:hover {
1565         .patronimage {
1566             opacity: .8;
1567         }
1568
1569         .patronimage-controls {
1570             opacity: 1;
1571         }
1572     }
1573 }
1574
1575 .patronimage {
1576     border: 1px solid #EEE;
1577     display: block;
1578     max-width: 160px;
1579     margin: auto;
1580     opacity: 1;
1581     transition: .2s ease;
1582
1583     &.empty {
1584         background: transparent url( "../img/patron-blank.min.svg" ) center 5px no-repeat;
1585         height: 125px;
1586         padding: 0;
1587         width: 80%;
1588     }
1589 }
1590
1591 .patronimage-controls {
1592     left: 50%;
1593     opacity: 0;
1594     position: absolute;
1595     text-align: center;
1596     top: 80%;
1597     transform: translate( -50%, -50% );
1598     transition: .5s ease;
1599 }
1600
1601 .patronimage-control {
1602     padding: 1em 2em;
1603  }
1604
1605 #patronImageEdit input[type="file" ] {
1606     display: inline-block;
1607 }
1608
1609 .patronviews {
1610     border-right: 1px solid #000;
1611     border-top: 1px solid #000;
1612     margin-bottom: .5em;
1613     padding: .5em 0;
1614 }
1615
1616 .column-tool {
1617     font-size: 80%;
1618 }
1619
1620 .hint {
1621     color: #666;
1622     font-size: 95%;
1623 }
1624
1625 .dropdown-menu {
1626     li {
1627         list-style-type: none;
1628     }
1629 }
1630
1631 .btn-toolbar {
1632     fieldset {
1633         &.action {
1634             margin-top: 0;
1635         }
1636     }
1637
1638     .dropdown-menu {
1639         font-size: 13px;
1640     }
1641 }
1642
1643 .rows {
1644     .label {
1645         white-space: normal;
1646     }
1647 }
1648
1649 .readonly,
1650 input[type='text']:read-only {
1651     background: #EEE url("../img/locked.png") center left no-repeat;
1652     border-style: inset;
1653     border-width: 1px;
1654     cursor: default;
1655     padding-left: 15px;
1656 }
1657
1658 .readonly:focus,
1659 input[type='text']:read-only:focus {
1660     border-color: unset;
1661     border-radius: unset;
1662 }
1663
1664 .checkedout {
1665     color: #999999;
1666     font-style: italic;
1667 }
1668
1669 .subfield_not_filled {
1670     background-color: #FFFF99;
1671 }
1672
1673 .important_subfield_not_filled {
1674     background-color : #FFFFCC;
1675 }
1676
1677 .content_hidden {
1678     display: none;
1679     visibility: hidden; // you propably don't need to change this one
1680 }
1681
1682 // the property for the displayed tab
1683 .content_visible {
1684     display: block;
1685     visibility: visible; // you propably don't need to change this one
1686 }
1687
1688 #z3950searcht {
1689     table {
1690         border: 0;
1691         padding: 20px;
1692     }
1693 }
1694
1695 #z3950_search_targets {
1696     height: 338px;
1697     overflow-y: auto;
1698 }
1699
1700 #z3950_search_targets_acq {
1701     height: 308px;
1702     overflow-y: auto;
1703 }
1704
1705 .z3950checks {
1706     padding-left: 1em;
1707 }
1708
1709 .error {
1710     color: #CC0000;
1711 }
1712
1713 // Font Awesome icons
1714 i {
1715     &.error {
1716         color: #CC0000;
1717     }
1718
1719     &.success {
1720         color: #008000;
1721     }
1722
1723     &.warn {
1724         color: #FFA500;
1725     }
1726 }
1727
1728 .circ-setting {
1729     font-size: 85%;
1730     padding-top: .3em;
1731
1732     input {
1733         vertical-align: middle;
1734     }
1735
1736     label {
1737         font-size: inherit;
1738         font-weight: normal;
1739     }
1740 }
1741
1742 .circ-settings {
1743     background-color: #F4F8F9;
1744     border-radius: 0;
1745     border-top: 2px solid #B9D8D9;
1746     display: none;
1747     margin-left: -1em;
1748     margin-right: -1em;
1749     margin-top: 1em;
1750     padding: 1em 1em 0;
1751 }
1752
1753 #show-circ-settings {
1754     margin-top: .5em;
1755 }
1756
1757 .checkin-active-setting {
1758     background-color: #FFC;
1759     border-radius: 3px;
1760     box-shadow: 1px 1px 2px 0 rgba(102, 102, 102, .5);
1761     margin: .5em;
1762     padding: .5em;
1763 }
1764
1765 .form-control-group {
1766     white-space: nowrap;
1767 }
1768
1769 .form-group {
1770     label {
1771         display: block;
1772         margin-bottom: 5px;
1773     }
1774
1775     div {
1776         &.hint {
1777             margin: 5px 0;
1778         }
1779     }
1780 }
1781
1782 .blocker,
1783 .inaccurate-item-statuses {
1784     color: #990000;
1785 }
1786
1787 .circmessage {
1788     li {
1789         list-style: $nav-menu-bullet;
1790         margin-bottom: .4em;
1791     }
1792 }
1793
1794 #circ_needsconfirmation {
1795     margin: auto;
1796 }
1797
1798 .dialog {
1799     border: 1px solid #BCBCBC;
1800     border-radius: 2px;
1801     margin: 1em auto;
1802     padding: .5em;
1803     text-align: center;
1804     width: 65%;
1805     max-width: 600px;
1806
1807     a {
1808         &.approve {
1809             display: inline-block;
1810         }
1811     }
1812
1813     button,
1814     a.approve {
1815         background: #FFF none;
1816         border: 1px outset #999999;
1817         border-left-color: #666;
1818         border-top-color: #666;
1819         margin: .4em;
1820         padding: .4em;
1821         white-space: pre-line;
1822
1823         &:active {
1824             border: 1px inset #999999;
1825         }
1826
1827         &:hover {
1828             background-color: #FFC;
1829         }
1830     }
1831
1832     h2,
1833     h3,
1834     h4 {
1835         margin: 5px auto;
1836         text-align: center;
1837     }
1838
1839     input {
1840         background-color: #FFFFFF;
1841         border: 1px solid #BCBCBC;
1842         margin: .4em;
1843         padding: .4em .4em .4em 25px;
1844
1845         &:hover {
1846             background-color: #FFC;
1847         }
1848
1849         &[type="submit"] {
1850             background: #FFF none;
1851         }
1852
1853         &.flatpickr-input {
1854             padding: 3px 3px 3px 20px;
1855         }
1856     }
1857
1858     li {
1859         list-style-position: inside;
1860     }
1861
1862     p {
1863         margin-top: 0;
1864         &+p {
1865             margin-top: 5px;
1866         }
1867     }
1868
1869     table {
1870         margin: .5em auto;
1871
1872         td {
1873             text-align: left;
1874         }
1875
1876         th {
1877             text-align: right;
1878         }
1879     }
1880
1881     &.message {
1882         background: linear-gradient(to bottom, #FFFFFF 0%, #F4F6FA 2%, #EAEEF5 23%, #E8EDF6 94%, #CDDBF2 100%);
1883         border: 1px solid #BCBCBC;
1884         text-align: center;
1885
1886         ul,
1887         h5 {
1888             padding-left: 25%;
1889             text-align: left;
1890         }
1891
1892         ul + h4 {
1893             margin-top: .7em;
1894         }
1895     }
1896
1897     &.alert,
1898     &.error {
1899         background: linear-gradient(to bottom, #FEF8D3 0%, #FFEC91 9%, #FFED87 89%, #F9DC00 100%);
1900         border: 1px solid #E0C726;
1901         color: inherit;
1902         text-align: center;
1903         text-shadow: none;
1904
1905         strong {
1906             color: #900;
1907         }
1908
1909         &.list {
1910             text-align: left;
1911
1912             h2,
1913             h3,
1914             h4 {
1915                 margin: 1em 0;
1916                 text-align: left;
1917             }
1918         }
1919     }
1920 }
1921
1922
1923 .approve,
1924 .success {
1925     i {
1926         &.fa {
1927             color: #008000;
1928         }
1929     }
1930 }
1931
1932 .deny {
1933     i {
1934         &.fa {
1935             color: #CC0000;
1936         }
1937     }
1938 }
1939
1940 .new {
1941     i {
1942         &.fa {
1943             color: #425FAF;
1944         }
1945     }
1946 }
1947
1948 .warning {
1949     i {
1950         &.fa-exclamation-triangle {
1951             color: #FFD700;
1952             text-shadow: 0 -1px 0 rgba( 0, 0, 0, .3);
1953         }
1954     }
1955 }
1956
1957 .accesskey {
1958     text-decoration: underline;
1959 }
1960
1961 .missing {
1962     background-color: #FFFFCC;
1963 }
1964
1965 .term {
1966     background-color: #FFC;
1967     color: #990000;
1968 }
1969
1970 // style for shelving location in catalogsearch
1971 .shelvingloc {
1972     display: block;
1973     font-style: italic;
1974 }
1975
1976 #menu {
1977     border-right: 1px solid #B9D8D9;
1978     margin-right: .5em;
1979     padding-bottom: 2em;
1980     padding-top: 1em;
1981
1982     li {
1983         a {
1984             background: linear-gradient(to bottom, #E8F0F6 0%, #E8F0F6 96%, #C1C1C1 100%);
1985             border: 1px solid #B9D8D9;
1986             border-bottom-left-radius: 5px;
1987             border-top-left-radius: 5px;
1988             display: block;
1989             font-size: 111%;
1990             margin: .5em 0;
1991             margin-right: -1px;
1992             padding: .4em .3em;
1993             text-decoration: none;
1994
1995             &:hover {
1996                 background: linear-gradient(to bottom, #FAFAFA 0%, #FFFFFF 96%, #E6E6E6 97%, #CCCCCC 99%, #C1C1C1 100%);
1997                 border-bottom: 1px solid #85CA11;
1998                 border-left: 1px solid #85CA11;
1999                 border-top: 1px solid #85CA11;
2000             }
2001         }
2002
2003         &.active {
2004             a {
2005                 background-color: #FFFFFF;
2006                 background-image: none;
2007                 border-bottom: 1px solid #85CA11;
2008                 border-left: 1px solid #85CA11;
2009                 border-right: 0;
2010                 border-top: 1px solid #85CA11;
2011                 color: #000000;
2012                 font-weight: bold;
2013
2014                 &:hover {
2015                     background-color: #FFFFFF;
2016                     color: #538200;
2017                 }
2018             }
2019         }
2020     }
2021
2022     ul {
2023         li {
2024             list-style-type: none;
2025         }
2026     }
2027 }
2028
2029 #closewindow {
2030     margin-top: 2em;
2031     text-align: center;
2032
2033     a {
2034         font-weight: bold;
2035     }
2036 }
2037
2038 .barcode {
2039     font-size: 200%;
2040     vertical-align: middle;
2041 }
2042
2043 li {
2044     &.email {
2045         overflow: hidden;
2046         text-overflow: ellipsis;
2047         white-space: nowrap;
2048     }
2049 }
2050
2051 .patronbriefinfo {
2052     li {
2053         &.email {
2054             font-size: 87%;
2055             padding: 0 10px 0 0;
2056             width: 90%;
2057         }
2058     }
2059 }
2060
2061 .empty {
2062     color: #CCC;
2063 }
2064
2065 .address {
2066     font-size: 110%;
2067
2068     li {
2069         list-style-type: none;
2070     }
2071 }
2072
2073 .title {
2074     font-weight: bold;
2075 }
2076
2077 .hold {
2078     float: right;
2079     font-size: 90%;
2080     margin: 0;
2081 }
2082
2083 .thumbnail {
2084     display: block;
2085     margin: auto;
2086 }
2087
2088 .thumbnails {
2089     li {
2090         display: inline-block;
2091         list-style-type: none;
2092         margin: 4px;
2093     }
2094
2095     .remove {
2096         border-top: 1px solid #EEE;
2097         display: block;
2098         font-size: 90%;
2099         margin: 4px -4px 2px -4px;
2100         padding-top: .5em;
2101         text-align: center;
2102     }
2103
2104     & + p {
2105         border-top: 1px solid #eee;
2106         margin-top: 1em;
2107         padding-top: 1em;
2108     }
2109 }
2110
2111 #searchresults {
2112     td {
2113         ul {
2114             li {
2115                 clear: left;
2116                 font-size: 90%;
2117                 list-style: url("../img/item-bullet.svg");
2118                 padding: .2em 0;
2119
2120                 &.result_itype_image {
2121                     list-style: none;
2122                     list-style-type: none;
2123                 }
2124
2125                 img {
2126                     float: left;
2127                     margin: 3px 5px 3px -5px;
2128                     max-width: 25px;
2129                 }
2130             }
2131         }
2132     }
2133
2134     span {
2135         &.status {
2136             clear: left;
2137             color: #900;
2138             display: block;
2139         }
2140
2141         &.unavailable {
2142             clear: left;
2143             display: block;
2144         }
2145     }
2146
2147     table {
2148         td {
2149             vertical-align: top;
2150         }
2151     }
2152
2153     &.unavailability {
2154         strong {
2155             display: block;
2156         }
2157     }
2158 }
2159
2160 #searchresults,
2161 #table_borrowers {
2162     .address {
2163         ul {
2164             margin: 0;
2165             padding-left: 0;
2166             li {
2167                 clear: none;
2168                 float: left;
2169                 list-style: none;
2170                 margin-left: 1ch;
2171                 padding: 0;
2172             }
2173         }
2174     }
2175 }
2176
2177 .searchheader {
2178     background-color: #E6F0F2;
2179     border: 1px solid #B9D8D9;
2180     border-radius: 5px 5px 0 0;
2181     font-size: 80%;
2182     margin: 0 0 .5em -1px;
2183     padding: .4em 0 .4em 1em;
2184
2185     &.floating {
2186         border-radius: 0;
2187         margin-top: 0;
2188     }
2189
2190     .btn-group {
2191         > .btn {
2192             &:first-child {
2193                 margin-left: .7em;
2194             }
2195         }
2196     }
2197
2198     form {
2199         float: right;
2200         padding: 5px 5px 3px 0;
2201
2202         &.fz3950 {
2203             float: right;
2204             font-size: 125%;
2205             padding: 0 0 0 5em;
2206         }
2207
2208         &.fz3950bigrpad {
2209             float: right;
2210             font-size: 125%;
2211             padding: 5px 25em 0 0;
2212         }
2213     }
2214 }
2215
2216 #search-facets {
2217     border: 1px solid #B9D8D9;
2218     border-radius: 5px 5px 0 0;
2219
2220     h4 {
2221         background-color: #E6F0F2;
2222         border-bottom: 1px solid #B9D8D9;
2223         border-radius: 5px 5px 0 0;
2224         font-size: 90%;
2225         margin: 0;
2226         padding: .4em .2em;
2227         text-align: center;
2228     }
2229
2230     ul {
2231         margin: 0;
2232         padding: .3em;
2233
2234         li {
2235             font-weight: bold;
2236             list-style-type: none;
2237         }
2238     }
2239
2240     li {
2241         li {
2242             font-size: 85%;
2243             font-weight: normal;
2244             margin-bottom: 2px;
2245             padding: .1em .2em;
2246         }
2247
2248         &.showmore {
2249             font-weight: bold;
2250             text-indent: 1em;
2251         }
2252     }
2253 }
2254
2255 .facet-count {
2256     display: inline-block;
2257 }
2258
2259 .bookcoverimg {
2260     text-align: center;
2261 }
2262
2263 .custom_cover_image {
2264     img {
2265         max-width: 140px;
2266     }
2267 }
2268
2269 #biblio-cover-slider {
2270     border: 1px solid #b9d8d9;
2271     border-radius: 3px;
2272     margin: 5px;
2273     padding: 10px 5px 5px 5px;
2274     min-height: 175px;
2275 }
2276
2277 .cover-slides {
2278     background: #FFF url("../img/spinner-small.gif") center center no-repeat;
2279
2280     .hint {
2281         font-size: 90%;
2282         padding: .5em 0;
2283     }
2284
2285     a {
2286         &.nav-active {
2287             &:link,
2288             &:visited {
2289                 color: #85ca11;
2290             }
2291         }
2292     }
2293 }
2294
2295 td {
2296     &.bookcoverimg {
2297         background: #FFF url("../img/spinner-small.gif") center center no-repeat;
2298         min-width: 120px;
2299         text-align: center;
2300     }
2301
2302     .cover-slides {
2303         background: transparent none;
2304         border: 0;
2305         margin: 0;
2306         min-height: unset;
2307         padding: 0;
2308     }
2309
2310     &.credit,
2311     &.debit,
2312     &.total {
2313         text-align: right;
2314
2315         tfoot & {
2316             color: #000;
2317         }
2318     }
2319 }
2320
2321 .cover-image {
2322     display: none;
2323
2324     img {
2325         height: auto;
2326         max-width: 100%;
2327     }
2328 }
2329
2330 .cover-nav {
2331     display: inline-block;
2332     padding: 3px 4px;
2333 }
2334
2335 .searchhighlightblob {
2336     font-size: 75%;
2337     font-style: italic;
2338 }
2339
2340 #irregularity_summary {
2341     vertical-align: top;
2342 }
2343
2344 #CheckAll,
2345 #CheckNone,
2346 #CheckPending {
2347     font-weight: normal;
2348     margin: 0 .5em 0 0;
2349 }
2350
2351 .lost,
2352 .dmg,
2353 .wdn {
2354     color: #990000;
2355     display: block;
2356 }
2357
2358 .datedue {
2359     color: #999;
2360     display: block;
2361     font-style: italic;
2362 }
2363
2364 .waitinghere,
2365 .credit {
2366     color: #669900;
2367 }
2368
2369 #mainuserblock {
2370     border: 1px solid #E8E8E8;
2371     margin-top: .5em;
2372     padding: .5em;
2373 }
2374
2375 .labeledmarc-table {
2376     border: 0;
2377 }
2378
2379 .labeledmarc-label {
2380     border: 0;
2381     color: #000000;
2382     font-size: 11pt;
2383     font-style: italic;
2384     padding: 5;
2385 }
2386
2387 .labeledmarc-value {
2388     border: 0;
2389     color: #000;
2390     font-size: 10pt;
2391     padding: 5;
2392 }
2393
2394 #marcPreview {
2395     table {
2396         border: 0;
2397         font-family: $font-monospace;
2398         font-size: 95%;
2399         margin: .7em 0 0;
2400     }
2401
2402     tbody {
2403         tr {
2404             &:nth-child(2n+1) {
2405                 td {
2406                     background-color: #FFFFFF;
2407                 }
2408             }
2409         }
2410     }
2411
2412     td {
2413         border: 0;
2414         padding: 2px;
2415         vertical-align: top;
2416     }
2417
2418     th {
2419         background-color: #FFFFFF;
2420         border: 0;
2421         padding: 2px;
2422         text-align: left;
2423         vertical-align: top;
2424         white-space: nowrap;
2425     }
2426
2427     &.modal-dialog {
2428         width: 80%;
2429     }
2430 }
2431
2432 .modal-dialog {
2433     .dialog {
2434         border-radius: 0;
2435         border-width: 1px 0 0 0;
2436         clear: both;
2437         margin: 15px -15px -15px -15px;
2438         padding: 15px;
2439         text-align: left;
2440         width: unset;
2441
2442         h3 {
2443             margin: unset;
2444             text-align: left;
2445         }
2446
2447         &.alert {
2448             background: #FFFADE none;
2449             border-color: #E0C726;
2450         }
2451
2452         &.message {
2453             background: #E8EDF6 none;
2454             border-color: #A4BEDD;
2455         }
2456     }
2457
2458     &.modal-wide {
2459         width: 80%;
2460     }
2461 }
2462
2463 #cartDetails {
2464     background-color: #FFFFFF;
2465     border: 1px solid #739ACF;
2466     box-shadow: 1px 1px 3px 0 #666;
2467     color: #000;
2468     display: none;
2469     margin: 0;
2470     padding: 10px;
2471     text-align: center;
2472     width: 180px;
2473     z-index: 50;
2474 }
2475
2476 #cartmenulink {
2477     padding-left: 15px;
2478
2479     i.fa.fa-shopping-cart {
2480         padding-right: 7px;
2481     }
2482 }
2483
2484 #basketcount {
2485     span {
2486         display: inline;
2487         font-size: 90%;
2488         font-weight: normal;
2489         padding: 0;
2490     }
2491 }
2492
2493 #moremenu {
2494     display: none;
2495 }
2496
2497 .results_summary {
2498     color: #202020;
2499     display: block;
2500     font-size: 85%;
2501     padding: 0 0 .5em;
2502
2503     a {
2504         font-weight: normal;
2505     }
2506
2507     .label {
2508         color: #707070;
2509     }
2510 }
2511
2512 .child_fund_amount {
2513     font-style: italic;
2514 }
2515
2516 .number_box {
2517     font-size: 105%;
2518     line-height: 200%;
2519
2520     h3 & {
2521         font-size: 70%;
2522     }
2523
2524     a,
2525     span {
2526         background-color: #E4ECF5;
2527         border: 1px solid #A4BEDD;
2528         border-radius: 4px;
2529         font-weight: bold;
2530         padding: .1em .4em;
2531         text-decoration: none;
2532
2533         &:hover {
2534             background-color: #EBEFF7;
2535         }
2536     }
2537 }
2538
2539 .container {
2540     border: 1px solid #EEE;
2541     margin: 1em 0;
2542     padding: 1em;
2543 }
2544
2545 .import_export {
2546     position: relative;
2547
2548     .export_ok {
2549         background: #E3E3E3 none;
2550         border: 0;
2551         cursor: pointer;
2552         margin-left: 20px;
2553         padding: 10px;
2554     }
2555
2556     .import_export_options {
2557         background: #FFFFFF;
2558         border: 1px solid #CDCDCD;
2559         left: 60px;
2560         padding: 10px;
2561         position: absolute;
2562         top: 0;
2563         width: 300px;
2564         z-index: 1;
2565     }
2566 }
2567
2568 .import_export_options {
2569     background: #E3E3E3 none;
2570     border: 0;
2571     cursor: pointer;
2572     margin-left: 20px;
2573     padding: 10px;
2574
2575     fieldset {
2576         &.rows {
2577             li {
2578                 label {
2579                     width: 16em;
2580                 }
2581             }
2582         }
2583     }
2584
2585     .importing {
2586         background: none;
2587         padding: inherit;
2588     }
2589 }
2590
2591 .form_import {
2592     fieldset {
2593         &.rows {
2594             li {
2595                 label {
2596                     width: auto;
2597                 }
2598             }
2599         }
2600     }
2601
2602     .input_import {
2603         border: 1px solid #BCBCBC;
2604     }
2605 }
2606
2607 .importing {
2608     position: relative;
2609
2610     .importing_msg {
2611         padding-bottom: 10px;
2612         padding-left: 10px;
2613     }
2614 }
2615
2616
2617 .field_hint {
2618     color: #808080;
2619     font-style: italic;
2620     padding-left: 1em;
2621 }
2622
2623 .m880 {
2624     display: block;
2625     float: right;
2626     padding-left: 20px;
2627     text-align: right;
2628     width: 50%;
2629 }
2630
2631 .advsearch {
2632     margin: 0;
2633
2634     table {
2635         border-collapse: separate;
2636         border-spacing: 5px;
2637         border-width: 0;
2638     }
2639
2640     td {
2641         border: 1px solid #EEE;
2642         padding: .3em .4em;
2643     }
2644 }
2645
2646 #circ_circulation_issue {
2647     position: relative;
2648 }
2649
2650 #renew_as_unseen_label {
2651     margin-left: 1em;
2652 }
2653
2654 #renew_as_unseen_checkbox {
2655     margin-right: 1em;
2656 }
2657
2658 #clearscreen {
2659     position: absolute;
2660     right: 0;
2661     top: 0;
2662
2663     a {
2664         background-color: #EEE;
2665         border-radius: 0 0 0 5px;
2666         color: #CCC;
2667         display: block;
2668         font-size: 160%;
2669         font-weight: bold;
2670         padding: 0 .7em .2em;
2671         text-decoration: none;
2672         text-shadow: 0 -1px 0 #666;
2673
2674         &:hover {
2675             color: #CC0000;
2676         }
2677     }
2678 }
2679
2680 #printclearscreen,
2681 #printclearscreenq {
2682     position: absolute;
2683     right: 43px;
2684     top: 0;
2685
2686     a {
2687         background-color: #EEE;
2688         border-radius: 0 0 0 5px;
2689         color: #CCC;
2690         display: block;
2691         font-size: 160%;
2692         font-weight: bold;
2693         padding: 0 .7em .2em;
2694         text-decoration: none;
2695         text-shadow: 0 -1px 0 #666;
2696
2697         &:hover {
2698             color: #CC0000;
2699         }
2700     }
2701 }
2702
2703 .no-image {
2704     background-color: #FFFFFF;
2705     border: 1px solid #AAAAAA;
2706     border-radius: 3px;
2707     color: #979797;
2708     display: block;
2709     font-size: 86%;
2710     font-weight: bold;
2711     margin: 1em auto;
2712     padding: 1em;
2713     text-align: center;
2714     width: 75px;
2715 }
2716
2717 #acqui_order_supplierlist {
2718     .supplier {
2719         &+.supplier {
2720             border-top: 1px solid #EEEEEE;
2721             margin-top: 1em;
2722         }
2723     }
2724
2725     .suppliername {
2726         display: inline-block;
2727         margin: .5em 1em .5em 0;
2728
2729         &.inactive {
2730             color: #888;
2731
2732             a:link,
2733             a:visited {
2734                 color: #888;
2735             }
2736         }
2737     }
2738 }
2739
2740 #ADD-contact {
2741     margin: 0 0 8px 8px;
2742 }
2743
2744 #contact-template {
2745     display: none;
2746 }
2747
2748 // Override core jQueryUI widgets
2749 .ui-widget-content {
2750     background: #FFFFFF none;
2751     border: 1px solid #B9D8D9;
2752     color: #222222;
2753 }
2754
2755 .ui-widget-header {
2756     background: #E6F0F2 none;
2757     border: 1px solid #B9D8D9;
2758     color: #222222;
2759     font-weight: bold;
2760 }
2761
2762 .ui-state-default,
2763 .ui-widget-content .ui-state-default,
2764 .ui-widget-header .ui-state-default {
2765     background: #F4F8F9 none;
2766     border: 1px solid #B9D8D9;
2767     color: #555555;
2768     font-weight: normal;
2769 }
2770
2771 .ui-state-hover,
2772 .ui-widget-content .ui-state-hover,
2773 .ui-widget-header .ui-state-hover,
2774 .ui-state-focus,
2775 .ui-widget-content .ui-state-focus,
2776 .ui-widget-header .ui-state-focus {
2777     background: #E6F0F2 none;
2778     border: 1px solid #B9D8D9;
2779     color: #212121;
2780     font-weight: normal;
2781 }
2782
2783 // .ui-state-active,
2784 // .ui-widget-content .ui-state-active,
2785 // .ui-widget-header .ui-state-active {
2786 //     background: #FFFFFF none;
2787 //     border: 1px solid #AAAAAA;
2788 //     color: #212121;
2789 //     font-weight: normal;
2790 // }
2791
2792 .ui-state-highlight,
2793 .ui-widget-content .ui-state-highlight,
2794 .ui-widget-header .ui-state-highlight {
2795     background: #FFF4C6;
2796     border: 1px solid #FED22F;
2797     color: #363636;
2798 }
2799
2800 .ui-state-error,
2801 .ui-widget-content .ui-state-error,
2802 .ui-widget-header .ui-state-error {
2803     background: #FEF1EC;
2804     border: 1px solid #CD0A0A;
2805     color: #CD0A0A;
2806 }
2807
2808 // Override jQuery Autocomplete
2809 .ui-autocomplete {
2810     box-shadow: 2px 2px 2px rgba(0, 0, 0, .3);
2811     cursor: default;
2812     position: absolute;
2813
2814     &.ui-menu {
2815         li {
2816             &.ui-menu-item {
2817                 padding: 3px 1em 3px .4em;
2818
2819                 &:hover {
2820                     background: #E6F0F2 none;
2821                     color: #212121;
2822                     font-weight: normal;
2823                 }
2824
2825                 .ui-state-active {
2826                     background: transparent none;
2827                     border: 0;
2828                 }
2829
2830                 .ui-menu-item-wrapper {
2831                     padding: unset;
2832                 }
2833
2834                 .ui-state-active,
2835                 .ui-state-focus {
2836                     margin: 0;
2837                 }
2838             }
2839         }
2840     }
2841 }
2842
2843 .ui-autocomplete-loading {
2844     background: #FFF url("../img/spinner-small.gif") right center no-repeat;
2845 }
2846
2847 // jQuery UI standard tabs
2848 .ui-menu {
2849     li {
2850         list-style: none;
2851     }
2852 }
2853
2854 .ui-tabs-nav {
2855     .ui-tabs-active a,
2856     a:hover,
2857     a:focus,
2858     a:active,
2859     span.a {
2860         background: none repeat scroll 0 0 transparent;
2861         outline: 0 none;
2862     }
2863
2864     &.ui-widget-header {
2865         background: none;
2866         border: 0;
2867     }
2868 }
2869
2870 .ui-tabs {
2871     .ui-tabs-nav {
2872         li {
2873             background: #E6F0F2 none;
2874             border: 1px solid #B9D8D9;
2875             margin-right: .4em;
2876             top: 1px;
2877
2878             &.ui-tabs-active {
2879                 background-color: #FFFFFF;
2880                 border: 1px solid #B9D8D9;
2881                 border-bottom-width: 0;
2882
2883                 a {
2884                     color: #000;
2885                     font-weight: bold;
2886                 }
2887
2888                 &.ui-state-hover {
2889                     background: #FFF none;
2890                 }
2891             }
2892
2893             &.ui-state-default {
2894                 &.ui-state-hover {
2895                     background: #EDF4F5 none;
2896                 }
2897             }
2898         }
2899     }
2900
2901     .ui-tabs-panel {
2902         border: 1px solid #B9D8D9;
2903     }
2904
2905     &.ui-widget-content {
2906         background: transparent none;
2907         border: 0;
2908     }
2909
2910     .ui-state-default {
2911         a {
2912             color: #004D99;
2913
2914             &:link,
2915             &:visited {
2916                 color: #004D99;
2917             }
2918         }
2919     }
2920
2921     .ui-state-hover {
2922         a {
2923             color: #538200;
2924
2925             &:link,
2926             &:visited {
2927                 color: #538200;
2928             }
2929         }
2930     }
2931
2932 }
2933
2934 .ui-widget {
2935     font-family: inherit;
2936     font-size: inherit;
2937
2938     input,
2939     select,
2940     textarea,
2941     button {
2942         font-family: inherit;
2943         font-size: inherit;
2944     }
2945 }
2946
2947 .statictabs {
2948     > ul {
2949         background: none repeat scroll 0 0 transparent;
2950         border: 0 none;
2951         border-bottom-left-radius: 4px;
2952         border-bottom-right-radius: 4px;
2953         border-top-left-radius: 4px;
2954         border-top-right-radius: 4px;
2955         color: #222222;
2956         font-size: 100%;
2957         font-weight: bold;
2958         line-height: 1.3;
2959         list-style: none outside none;
2960         margin: 0;
2961         outline: 0 none;
2962         padding: .2em .2em 0;
2963         text-decoration: none;
2964
2965         &::after {
2966             clear: both;
2967         }
2968
2969         &::before,
2970         &::after {
2971             content: "";
2972             display: table;
2973         }
2974
2975         li {
2976             background: none repeat scroll 0 0 #E6F0F2;
2977             border: 1px solid #B9D8D9;
2978             border-bottom: 0 none;
2979             border-top-left-radius: 4px;
2980             border-top-right-radius: 4px;
2981             color: #555555;
2982             float: left;
2983             font-weight: normal;
2984             list-style: none outside none;
2985             margin-bottom: 0;
2986             margin-right: .4em;
2987             padding: 0;
2988             position: relative;
2989             top: 1px;
2990             white-space: nowrap;
2991
2992             &.active {
2993                 background-color: #FFFFFF;
2994                 color: #212121;
2995                 font-weight: normal;
2996                 padding-bottom: 1px;
2997
2998                 a {
2999                     background: none repeat scroll 0 0 transparent;
3000                     color: #000000;
3001                     cursor: text;
3002                     font-weight: bold;
3003                     outline: 0 none;
3004                     top: 1px;
3005                 }
3006             }
3007
3008             a {
3009                 color: #004D99;
3010                 cursor: pointer;
3011                 float: left;
3012                 padding: .5em 1em;
3013                 text-decoration: none;
3014
3015                 &:hover {
3016                     background-color: #EDF4F5;
3017                     border-top-left-radius: 4px;
3018                     border-top-right-radius: 4px;
3019                     color: #538200;
3020                 }
3021             }
3022         }
3023     }
3024
3025     .tabs-container {
3026         background: none repeat scroll 0 0 transparent;
3027         border: 1px solid #B9D8D9;
3028         border-bottom-left-radius: 4px;
3029         border-bottom-right-radius: 4px;
3030         color: #222222;
3031         display: block;
3032         padding: 1em 1.4em;
3033     }
3034 }
3035
3036 .toptabs {
3037     margin-top: 5px;
3038         .ui-tabs-panel {
3039             background: #FFF none;
3040         }
3041 }
3042
3043 .authref {
3044     font-style: normal;
3045     text-indent: 4em;
3046 }
3047
3048 .seefrom,
3049 .seealso {
3050     font-style: italic;
3051     text-indent: 2em;
3052 }
3053
3054 #authfinderops {
3055     float: right;
3056 }
3057
3058 .authorizedheading {
3059     font-weight: bold;
3060 }
3061
3062 .authres_notes,
3063 .authres_seealso,
3064 .authres_otherscript {
3065     padding-top: 3px;
3066 }
3067
3068 .authres_notes {
3069     font-style: italic;
3070 }
3071
3072
3073 .contents {
3074     width: 75%;
3075
3076     .newline::after {
3077         content: "\A → ";
3078         white-space: pre;
3079     }
3080
3081     .t {
3082         font-weight: bold;
3083         display: inline;
3084     }
3085
3086     .r {
3087         display: inline;
3088     }
3089 }
3090
3091
3092 .contentblock {
3093     font-size: 95%;
3094     line-height: 135%;
3095     margin-left: 2em;
3096     position: relative;
3097
3098     :first-child::before {
3099         content: "→ ";
3100     }
3101 }
3102
3103 #hierarchies {
3104     margin-bottom: 1em;
3105
3106     a {
3107         color: #069;
3108         font-weight: normal;
3109         text-decoration: underline;
3110
3111         &.jstree-anchor {
3112             &.jstree-hovered {
3113                 background: transparent none;
3114                 box-shadow: none;
3115                 color: #005580;
3116             }
3117
3118             &.jstree-clicked {
3119                 background: transparent none;
3120                 box-shadow: none;
3121                 border: 0;
3122             }
3123         }
3124     }
3125 }
3126
3127 #didyoumeanopac,
3128 #didyoumeanintranet {
3129     float: left;
3130     width: 260px;
3131 }
3132
3133 .pluginlist {
3134     padding-bottom: 10px;
3135 }
3136
3137 .plugin {
3138     margin: 0 1em 1em 0;
3139 }
3140
3141 .pluginname {
3142     background-color: #E6F0F2;
3143     cursor: move;
3144     margin: .3em;
3145     padding-bottom: 4px;
3146     padding-left: .2em;
3147
3148     .ui-icon {
3149         float: right;
3150     }
3151 }
3152
3153 .plugindesc {
3154     padding: .4em;
3155 }
3156
3157 .ui-sortable-placeholder {
3158     border: 1px dotted #000;
3159     height: 80px;
3160     visibility: visible;
3161
3162     * {
3163         visibility: hidden;
3164     }
3165 }
3166
3167 // jQuery UI Accordion
3168 .ui-accordion-header,
3169 .ui-widget-content .ui-accordion-header {
3170     font-size: 110%;
3171     font-weight: bold;
3172 }
3173
3174 video {
3175     width: 480px;
3176 }
3177
3178 // Bootstrap overrides
3179
3180 .dropdown-header {
3181     border-top: 1px solid #EEE;
3182     color: #000;
3183     font-weight: bold;
3184     margin-top: 5px;
3185     padding-left: 10px;
3186
3187     &:first-child {
3188         border-top: 0;
3189     }
3190 }
3191
3192 nav {
3193     background: #E6F0F2 none;
3194     border: 0;
3195
3196     &.breadcrumb {
3197         background-color: #E6F0F2;
3198         clear: both;
3199         margin: 0;
3200         padding: .8em .5em .8em 10px;
3201         position: relative;
3202
3203         ol {
3204             margin: 0;
3205             padding-left: 0;
3206             list-style: none;
3207         }
3208
3209         li {
3210             display: inline;
3211
3212             &+li::before {
3213                 background: transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktY2hldnJvbi1yaWdodCI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNy4zNyAwbDUuMzUgNy4zYy4yLjIuMi41MSAwIC43bC01LjM4IDhoLTQuMmw1LjY0LTguMzVMMy4xMy4wMXoiLz48L3N2Zz4=") 50% 50% no-repeat;
3214                 background-size: 8px;
3215                 content: '';
3216                 display: inline-block;
3217                 height: .8em;
3218                 width: .8em;
3219             }
3220
3221         }
3222
3223         [aria-current="page"] {
3224             color: #000;
3225             font-weight: 700;
3226             text-decoration: none;
3227         }
3228     }
3229
3230
3231 }
3232
3233 .navbar-collapse {
3234     background: #E6F0F2 none;
3235     box-shadow: none;
3236 }
3237
3238 .navbar-nav {
3239     li {
3240         list-style: none;
3241
3242         &.open {
3243             li {
3244                 a {
3245                     font-weight: normal;
3246                 }
3247             }
3248         }
3249
3250         a {
3251             font-weight: bold;
3252             padding-bottom: .4em;
3253             padding-top: .4em;
3254         }
3255     }
3256 }
3257
3258 .nav .open > a,
3259 .nav .open > a:hover,
3260 .nav .open > a:focus {
3261     background-color: transparent;
3262     border: 0;
3263 }
3264
3265 .nav > li > a:hover,
3266 .nav > li > a:focus {
3267     background-color: transparent;
3268     text-decoration: none;
3269 }
3270
3271 .pagination {
3272     margin:.5em .8em;
3273
3274     .active {
3275         a {
3276             background-color: #5A9EAA;
3277             border-color: #5A9EAA;
3278
3279             &:hover,
3280             &:focus {
3281                 background-color: #5A9EAA;
3282                 border-color: #5A9EAA;
3283             }
3284         }
3285
3286         span {
3287             background-color: #5A9EAA;
3288             border-color: #5A9EAA;
3289
3290             &:hover,
3291             &:focus {
3292                 background-color: #5A9EAA;
3293                 border-color: #5A9EAA;
3294             }
3295         }
3296     }
3297 }
3298
3299 button,
3300 .btn {
3301     border-color: #ADADAD #ADADAD #949494;
3302     font-family: $font-main;
3303
3304     &.btn-link {
3305         border: 0;
3306     }
3307 }
3308
3309 .btn-xs,
3310 .btn-group-xs > .btn {
3311     font-size: 10.5px;
3312     padding: 3px 5px;
3313 }
3314
3315 /* Bootstrap Collapse */
3316
3317 .panel {
3318     background: #F4F8F9 none;
3319     box-shadow: none;
3320 }
3321
3322 .panel-collapse {
3323     background: #FFF none;
3324 }
3325
3326 .panel-title {
3327     a {
3328         border-radius: 3px;
3329         display: block;
3330         padding: 10px 15px;
3331         border-bottom-left-radius: 0;
3332         border-bottom-right-radius: 0;
3333
3334         &::before {
3335             content: "\f0d7";
3336             display: inline-block;
3337             font-family: FontAwesome;
3338             width: 1em;
3339         }
3340
3341         &:hover {
3342             background: #e6f0f2 none;
3343             border-bottom-left-radius: 0;
3344             border-bottom-right-radius: 0;
3345         }
3346
3347         &.collapsed {
3348             &::before {
3349                 content: "\f0da";
3350                 display: inline-block;
3351                 font-family: FontAwesome;
3352                 width: 1em;
3353             }
3354
3355             &:hover {
3356                 background: #e6f0f2 none;
3357                 border-bottom-left-radius: 3px;
3358                 border-bottom-right-radius: 3px;
3359             }
3360         }
3361     }
3362 }
3363
3364 .panel-default {
3365     border: 1px solid #B9D8D9;
3366     > .panel-heading {
3367         background: transparent none;
3368         padding: 0;
3369
3370         + .panel-collapse {
3371             > .panel-body {
3372                 border-top-color: #B9D8D9;
3373             }
3374         }
3375     }
3376 }
3377
3378 .panel-group {
3379     .panel {
3380         + .panel {
3381             margin-top: 3px;
3382         }
3383     }
3384 }
3385
3386 #toolbar {
3387     .dropdown-menu {
3388         border-top-width: 1px;
3389         font-size: 13px;
3390     }
3391
3392     &.floating {
3393         border-radius: 0;
3394         margin-top: 0;
3395     }
3396 }
3397
3398 #changelanguage {
3399     background: #FFF none;
3400     border-top: 1px solid #EEE;
3401     min-height: $language-footer-min-height;
3402
3403     .dropdown-menu {
3404         > li {
3405             > a,
3406             > span {
3407                 padding: 5px 15px;
3408             }
3409         }
3410     }
3411
3412     .navbar-text {
3413         margin: 0;
3414
3415         span {
3416             display: block;
3417             line-height: 20px;
3418         }
3419     }
3420
3421     .navbar-nav {
3422         li {
3423             a {
3424                 line-height: 20px;
3425             }
3426         }
3427     }
3428 }
3429
3430 .loggedout {
3431     color: #004D99;
3432     font-weight: bold;
3433     padding: .4em .2em;
3434 }
3435
3436 .navbar-fixed-bottom {
3437     .navbar-inner {
3438         min-height: 0;
3439         padding: .4em 0;
3440     }
3441
3442     .nav > li {
3443         border-right: 1px solid #CCC;
3444
3445         > a {
3446             font-weight: normal;
3447         }
3448
3449         &:last-child {
3450             border-right: 0;
3451         }
3452
3453         &.navbar-text {
3454             line-height: normal;
3455             padding: .4em .7em;
3456         }
3457     }
3458 }
3459
3460 .tooltip {
3461     &.bottom {
3462         .tooltip-arrow {
3463             border-bottom-color: #EEE;
3464         }
3465
3466         .tooltip-inner {
3467             background-color: #FFFFFF;
3468             border: 1px solid rgba(0, 0, 0, .2);
3469             box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
3470             color: #000;
3471             font-size: 120%;
3472             padding: 1em;
3473         }
3474     }
3475 }
3476
3477 .separator {
3478     color: #666;
3479     padding: 0 .2em;
3480 }
3481
3482 .close {
3483     filter: none;
3484     float: none;
3485     font-size: inherit;
3486     font-weight: normal;
3487     line-height: 1.5;
3488     opacity: inherit;
3489     position: inherit;
3490     right: auto;
3491     text-shadow: none;
3492     top: auto;
3493
3494     &:hover {
3495         color: inherit;
3496         filter: inherit;
3497         font-size: inherit;
3498         opacity: inherit;
3499     }
3500 }
3501
3502
3503 label {
3504     .radio &,
3505     .checkbox & {
3506         margin-left: 20px;
3507         padding-left: 0;
3508     }
3509
3510     &.tip {
3511         display: block;
3512         margin: .5em 0;
3513     }
3514
3515     &.disabled {
3516         color: #CCC;
3517         cursor: not-allowed;
3518     }
3519 }
3520
3521 .radio {
3522     input {
3523         &[type="radio"] {
3524             margin-left: 0;
3525             position: relative;
3526         }
3527     }
3528 }
3529
3530 .checkbox {
3531     input {
3532         &[type="checkbox"] {
3533             margin-left: 0;
3534             position: relative;
3535         }
3536     }
3537 }
3538
3539 .modal-header {
3540     .closebtn {
3541         margin-top: 4px;
3542     }
3543 }
3544
3545 .closebtn {
3546     color: #000;
3547     filter: alpha(opacity = 20);
3548     float: right;
3549     font-size: 21px;
3550     font-weight: bold;
3551     line-height: 1;
3552     opacity: .2;
3553     text-shadow: 0 1px 0 #FFFFFF;
3554
3555     &:hover,
3556     &:focus {
3557         color: #000;
3558         cursor: pointer;
3559         filter: alpha(opacity = 50);
3560         opacity: .5;
3561         text-decoration: none;
3562     }
3563 }
3564
3565 .modal-body {
3566     background-color: #FFF;
3567     overflow-y: auto;
3568
3569     fieldset,
3570     ol {
3571         background-color: transparent;
3572         border: 0;
3573         margin: 0;
3574         padding: 0;
3575     }
3576 }
3577
3578 .modal-content {
3579     background-color: #EDF4F6;
3580 }
3581
3582 .btn-group {
3583     label,
3584     select {
3585         font-size: 13px;
3586     }
3587 }
3588
3589 .tooltip-inner {
3590     white-space: pre-wrap;
3591 }
3592
3593 pre {
3594     background-color: transparent;
3595     border: 0;
3596     border-radius: 0;
3597     color: inherit;
3598     display: block;
3599     font-size: inherit;
3600     line-height: inherit;
3601     margin: 0;
3602     padding: 0;
3603     word-break: break-all;
3604     word-wrap: break-word;
3605 }
3606
3607 code {
3608     background-color: transparent;
3609     border-radius: 0;
3610     color: inherit;
3611     font-size: inherit;
3612     padding: 0;
3613 }
3614
3615 .pagination > li > a,
3616 .pagination > li > span {
3617     font-weight: bold;
3618 }
3619
3620 .tab-content {
3621     background-color: #FFF;
3622     border: 1px solid #B9D8D9;
3623     border-top-width: 0;
3624     padding: 1em;
3625 }
3626
3627 .nav-tabs {
3628     > li {
3629         > a {
3630             background-color: #e6f0f2;
3631             border: 1px solid #b9d8d9;
3632             border-radius: 4px 4px 0 0;
3633             line-height: 1.42857143;
3634             margin-right: .4em;
3635             padding: .5em 1em;
3636
3637             &:hover {
3638                 background-color: #EEF4F5;
3639                 border-color: #b9d8d9;
3640             }
3641         }
3642
3643         &.active {
3644             a,
3645             a:hover,
3646             a:focus {
3647                 background-color: #fff;
3648                 border: 1px solid #b9d8d9;
3649                 border-bottom-color: transparent;
3650                 color: #000;
3651                 cursor: default;
3652                 font-weight: bold;
3653             }
3654         }
3655     }
3656 }
3657
3658 // End Bootstrap overrides
3659
3660 .waiting {
3661     cursor: wait;
3662 }
3663
3664 #jobpanel,
3665 #jobstatus,
3666 #jobfailed {
3667     display: none;
3668 }
3669
3670 #jobstatus {
3671     margin: .4em;
3672 }
3673
3674 #jobprogress {
3675     background: url("../img/progress.png") -300px 0 no-repeat;
3676     border: 1px solid #666;
3677     display: inline-block;
3678     height: 10px;
3679     width: 200px;
3680  }
3681
3682 .progress_panel {
3683     border: 2px solid #EEE;
3684     border-radius: 5px;
3685     clear: both;
3686     font-size: 120%;
3687     margin: 1em 0;
3688     padding: 1em;
3689 }
3690
3691 progress {
3692     width: 50%;
3693 }
3694
3695 #selections {
3696     white-space: normal;
3697     width: 100%;
3698
3699     input {
3700         margin: 0 2px;
3701         vertical-align: middle;
3702     }
3703
3704     span {
3705         background-color: #EBF3FF;
3706         border-radius: 5px;
3707         display: inline-block;
3708         font-size: 75%;
3709         margin: 3px;
3710         padding: 3px;
3711         white-space: nowrap;
3712
3713         &.selected {
3714             background-color: #CCE0FC;
3715         }
3716     }
3717 }
3718
3719 #changepasswordf {
3720     input {
3721         &[type="text"],
3722         &[type="password"] {
3723             font-family: $font-monospace;
3724             font-size: 140%;
3725             padding: .3em;
3726         }
3727     }
3728 }
3729
3730 // Class to be added to toolbar when it starts being fixed at the top of the screen
3731
3732 .floating {
3733     box-shadow: 0 3px 2px 0 rgba(0, 0, 0, .5);
3734     z-index: 100;
3735 }
3736
3737 .inline {
3738     display: inline;
3739 }
3740
3741 .nowrap {
3742     white-space: nowrap;
3743 }
3744
3745 .tag_editor {
3746     background: transparent url("../img/edit-tag.png") top left no-repeat;
3747     display: block;
3748     float: left;
3749     height: 16px;
3750     margin: 4px;
3751     overflow: hidden;
3752     text-indent: 100%;
3753     white-space: nowrap;
3754     width: 16px;
3755
3756     &.upload {
3757         background: transparent none;
3758         font-size: 90%;
3759         height: unset;
3760         overflow: unset;
3761         text-indent: unset;
3762         width: unset;
3763     }
3764 }
3765
3766 .browse-controls {
3767     margin-left: 1.1em;
3768     margin-right: .5em;
3769     padding-bottom: 1em;
3770     padding-top: 1em;
3771 }
3772
3773 #browse-return-to-results {
3774     background-color: #E8F0F6;
3775     border: 1px solid #B9D8D9;
3776     border-bottom-width: 0;
3777     border-top-left-radius: 5px;
3778     border-top-right-radius: 5px;
3779     display: block;
3780     padding: .5em;
3781     text-align: center;
3782 }
3783
3784 .browse-button {
3785     background-color: #FFF;
3786     border: 1px solid #B9D8D9;
3787     color: #004D99;
3788     display: block;
3789     overflow: hidden;
3790     padding: .4em .6em;
3791     text-align: center;
3792     white-space: nowrap;
3793     width: 100%;
3794
3795     &:hover {
3796         background: #FAFAFA;
3797     }
3798 }
3799
3800 span {
3801     &.browse-button {
3802         background: #FAFAFA;
3803         color: #222;
3804     }
3805
3806     &.circ-hlt {
3807         color: #CC0000;
3808         font-weight: bold;
3809     }
3810
3811     &.expired {
3812         color: #990000;
3813         font-style: italic;
3814     }
3815
3816     &.name {
3817         font-style: italic;
3818         font-weight: bold;
3819     }
3820
3821     &.required {
3822         color: #C00;
3823         font-style: italic;
3824         margin-left: .5em;
3825     }
3826
3827     &.important {
3828         color: #EAC117;
3829         font-style: italic;
3830         margin-left: .5em;
3831     }
3832
3833     &[class*=" label-"] {
3834         color: #FFF;
3835         display: inline;
3836         font-size: 75%;
3837         font-weight: normal;
3838         padding: .2em .6em .3em;
3839     }
3840 }
3841
3842
3843 .result-biblio-itemtype {
3844     float: right;
3845     font-size: 85%;
3846     margin: .5em;
3847     padding: .5em;
3848     text-align: center;
3849
3850     img {
3851         display: block;
3852         margin: auto;
3853         margin-bottom: 2px;
3854     }
3855 }
3856
3857 #browse-previous {
3858     border-bottom-width: 0;
3859 }
3860
3861 #browse-next {
3862     border-bottom-right-radius: 5px;
3863     border-bottom-left-radius: 5px;
3864 }
3865
3866 .loading-overlay {
3867     background-color: #FFFFFF;
3868     cursor: wait;
3869     height: 100%;
3870     left: 0;
3871     opacity: .7;
3872     position: fixed;
3873     top: 0;
3874     width: 100%;
3875     z-index: 1000;
3876
3877     div {
3878         background: transparent url("../img/loading.gif") top left no-repeat;
3879         font-size: 175%;
3880         font-weight: bold;
3881         height: 2em;
3882         left: 50%;
3883         margin: -1em 0 0 -2.5em;
3884         padding-left: 50px;
3885         position: absolute;
3886         top: 50%;
3887         width: 15em;
3888     }
3889 }
3890
3891 #merge_invoices {
3892     display: none;
3893     margin: 1em auto;
3894 }
3895
3896 #merge_table {
3897     tr {
3898         &.active {
3899             td {
3900                 background-color: #FFFFCC;
3901             }
3902         }
3903     }
3904 }
3905
3906 input.renew {
3907     margin-right: 1em;
3908 }
3909
3910 .renewals {
3911     display: block;
3912     font-size: .8em;
3913     padding: .5em;
3914 }
3915
3916 .date-select {
3917     label {
3918         display: inline-block;
3919         width: 40%;
3920     }
3921 }
3922
3923 #newonholdduedate {
3924     display: none;
3925 }
3926
3927 #transport-types {
3928     padding-top: .5px;
3929 }
3930
3931 #i18nMenu {
3932     .navbar-text {
3933         .currentlanguage {
3934             color: #000;
3935             font-weight: bold;
3936         }
3937     }
3938
3939     a {
3940         &.currentlanguage {
3941             &:link,
3942             &:visited {
3943                 font-weight: bold;
3944             }
3945         }
3946
3947         .sublanguage-selected {
3948             color: #000;
3949             font-weight: bold;
3950         }
3951     }
3952 }
3953
3954 .onsite_checkout-select {
3955     label,
3956     #circ_circulation_issue & {
3957         font-size: inherit;
3958         font-weight: normal;
3959     }
3960 }
3961
3962 .onsite_checkout {
3963     color: #CC0000;
3964 }
3965
3966 .onsite-checkout-only {
3967     background-color: rgba(255, 242, 206, .5);
3968     border: 1px solid #FFF2CE;
3969     border-radius: 4px;
3970 }
3971
3972 .branchgriditem {
3973     background-color: #FFFFFF;
3974     border: 1px solid #B9D8D9;
3975     border-radius: 3px;
3976     display: table-cell;
3977     float: left;
3978     margin: 3px;
3979     padding: .3em;
3980 }
3981
3982 .branchgridrow {
3983     display: table-row;
3984 }
3985
3986 .branchselector {
3987     display: table;
3988 }
3989
3990 .hq-author {
3991     font-weight: bold;
3992 }
3993
3994 #cn_browser_table_wrapper > #cn_browser_table {
3995     margin: auto;
3996     width: 90%;
3997 }
3998
3999 #new_rule {
4000     background-color: #F4F8F9;
4001     border: 2px solid #B9D8D9;
4002     border-radius: 5px;
4003     display: none;
4004     margin: .3em;
4005     padding: .3em;
4006 }
4007
4008
4009 .blocks {
4010     margin-bottom: .3em;
4011 }
4012
4013 .remove_rule {
4014     font-size: 80%;
4015     padding-left: .7em;
4016 }
4017
4018 .underline {
4019     text-decoration: underline;
4020 }
4021
4022 .overline {
4023     text-decoration: overline;
4024 }
4025
4026 .order-control {
4027     padding-right: 5px;
4028 }
4029
4030 #borrower_message {
4031     margin-top: 10px;
4032 }
4033
4034 .form-group {
4035     margin-bottom: 10px;
4036
4037     label {
4038         font-weight: bold;
4039     }
4040 }
4041
4042
4043 .form-message {
4044     background-color: #FFF;
4045     border: 1px solid #A4BEDD;
4046     border-radius: 5px;
4047     margin: 1em;
4048     padding: .5em;
4049 }
4050
4051 .modal-textarea {
4052     width: 98%;
4053 }
4054
4055 #pat_member {
4056     #patron_list_dialog {
4057         display: none;
4058     }
4059 }
4060
4061 #patron_search {
4062     #filters {
4063         display: none;
4064     }
4065
4066     .address {
4067         font-size: 100%;
4068     }
4069 }
4070
4071 #fixedlengthbuilderaction {
4072     border: 3px solid #E6F0F2;
4073     left: 80%;
4074     padding: 5px;
4075     position: relative;
4076     top: -80px;
4077     width: 12%;
4078 }
4079
4080 #interlibraryloans {
4081     #dataPreviewLabel {
4082         margin: .3em 0;
4083     }
4084
4085     .bg-info {
4086         overflow: auto;
4087         position: relative;
4088     }
4089
4090     .format {
4091         h4 {
4092             margin-bottom: 20px;
4093         }
4094
4095         h5 {
4096             margin-top: 20px;
4097         }
4098
4099         input {
4100             margin: 10px 0;
4101         }
4102
4103         li {
4104             list-style: none;
4105         }
4106     }
4107
4108     #add-new-fields {
4109         margin: 1em;
4110     }
4111
4112     #column-toggle,
4113     #reset-toggle {
4114         font-weight: 700;
4115         line-height: 1.5em;
4116         margin: 15px 0;
4117     }
4118
4119     #freeform-fields {
4120         .custom-name {
4121             margin-right: 1em;
4122             text-align: right;
4123             width: 9em;
4124         }
4125
4126         .delete-new-field {
4127             margin-left: 1em;
4128         }
4129     }
4130
4131     #search-summary {
4132         position: absolute;
4133         top: 50%;
4134         transform: translateY(-50%);
4135     }
4136
4137     #generic_confirm_search_count {
4138         margin: 1em 0 1em 10em;
4139     }
4140
4141     #generic_confirm_search {
4142         display: block;
4143         visibility: hidden;
4144         margin: 1em 0 1em 10em;
4145     }
4146
4147     #partnerSearch {
4148         .modal-dialog {
4149             width: 50vw;
4150         }
4151         .modal-body {
4152             max-height: 70vh;
4153         }
4154     }
4155 }
4156
4157 .ill-view-panel {
4158     margin-top: 15px;
4159
4160     .notesopac {
4161         display: inline-block;
4162     }
4163 }
4164
4165 #illfilter_dateplaced_start,
4166 #illfilter_datemodified_start,
4167 #illfilter_dateplaced_end,
4168 #illfilter_datemodified_end {
4169     width: 80%;
4170 }
4171
4172 #requestattributes {
4173     font-family: monospace;
4174     line-height: 1.3em;
4175 }
4176
4177 #ill-requests {
4178     width: 100% !important;
4179 }
4180
4181 .ar-title, .hq-title {
4182     .biblio-title {
4183         font-weight: bold;
4184     }
4185 }
4186
4187 #ill-issue-title {
4188     margin: 20px 0 30px 0;
4189 }
4190
4191 .ill_availability_sourcename {
4192     margin-top: 20px;
4193 }
4194
4195 #stockrotation {
4196     h3 {
4197         margin: 30px 0 10px 0;
4198     }
4199     .dialog {
4200         h3 {
4201             margin: 10px 0;
4202         }
4203         margin-bottom: 20px;
4204     }
4205     .highlight_stage {
4206         font-weight: bold;
4207     }
4208 }
4209
4210 #catalog_stockrotation .highlight_stage {
4211     font-weight: bold;
4212 }
4213
4214 #stockrotation {
4215     #rota_form {
4216         textarea {
4217             width: 300px;
4218             height: 100px;
4219         }
4220         #name {
4221             width: 300px;
4222         }
4223         fieldset {
4224             width: auto;
4225         }
4226     }
4227     #stage_form fieldset, #add_rota_item_form fieldset {
4228         width: auto;
4229     }
4230     .dialog.alert {
4231         ul {
4232             margin: 20px 0;
4233         }
4234         li {
4235             list-style-type: none;
4236         }
4237     }
4238 }
4239
4240 #catalog_stockrotation {
4241     .item_select_rota {
4242         vertical-align: middle;
4243     }
4244     h1 {
4245         margin-bottom: 20px;
4246     }
4247 }
4248
4249 #stockrotation td.actions, #catalog_stockrotation td.actions {
4250     vertical-align: middle;
4251 }
4252
4253 #stockrotation .stage, #catalog_stockrotation .stage {
4254     display: inline-block;
4255     padding: 5px 7px;
4256     margin: 3px 0 3px 0;
4257     border-radius: 5px;
4258     background-color: rgba(0, 0, 0, 0.1);
4259 }
4260
4261 #stage_list_headings {
4262     font-weight: bold;
4263     span {
4264         padding: 3px;
4265     }
4266 }
4267
4268 #manage_stages {
4269     ul {
4270         padding-left: 0;
4271     }
4272     li {
4273         list-style: none;
4274         margin-bottom: 5px;
4275         span {
4276             padding: 6px 3px;
4277         }
4278     }
4279     .stagename {
4280         width: 15em;
4281         display: inline-block;
4282     }
4283     .stageduration {
4284         width: 10em;
4285         display: inline-block;
4286     }
4287     .stageactions {
4288         display: inline-block;
4289     }
4290     li:nth-child(odd) {
4291         background-color: #F3F3F3;
4292     }
4293     .drag_handle {
4294         margin-right: 6px;
4295         cursor: move;
4296     }
4297     .drag_placeholder {
4298         height: 2em;
4299         border: 1px dotted #aaa;
4300     }
4301     h3 {
4302         display: inline-block;
4303     }
4304     #ajax_status {
4305         display: inline-block;
4306         border: 1px solid #bcbcbc;
4307         border-radius: 5px;
4308         padding: 5px;
4309         margin-left: 10px;
4310         background: #f3f3f3;
4311     }
4312     #manage_stages_help {
4313         margin: 20px 0;
4314     }
4315 }
4316
4317 #payForm {
4318     fieldset {
4319         &.rows {
4320             padding-left: 1em;
4321             padding-right: 2em;
4322         }
4323     }
4324 }
4325
4326 #helper {
4327     span {
4328         display: none;
4329     }
4330 }
4331
4332 #logged-in-info-full {
4333     display: none;
4334 }
4335
4336 .loggedin-menu-label {
4337     color: #777;
4338     font-size: 12px;
4339     line-height: 1.42857143;
4340     padding: 4px 12px;
4341     white-space: nowrap;
4342
4343     span {
4344         color: #000;
4345         font-weight: bold;
4346     }
4347
4348     &.divider {
4349         padding: 0;
4350     }
4351 }
4352
4353 .lastborrower {
4354     background-color: #E6F0F2;
4355     border: 1px solid #95C6D0;
4356     box-shadow: 1px 1px 1px 0 #999;
4357     color: #CC0000;
4358     margin: .4em 0;
4359     padding: .3em .5em .3em .5em;
4360 }
4361
4362 #lastborrower-ref {
4363     border-radius: 5px 0px 0px 5px;
4364     float: left;
4365 }
4366
4367 #lastborrower-remove {
4368     border-radius: 0px 5px 5px 0px;
4369     cursor: pointer;
4370     float: right;
4371 }
4372
4373 #lastborrower-window {
4374     display: none;
4375     position: absolute;
4376     right: 5px;
4377     top: 0px;
4378 }
4379
4380 /* ==== MODULE LINKS - Start ==== */
4381 .buttons-list {
4382     // List containing the module links
4383     margin-bottom: 30px;
4384     padding: 0;
4385
4386     li {
4387         // Standard attributes for the list elements
4388         list-style-type: none;
4389
4390         a {
4391             &.circ-button {
4392                 // Class used for each module link
4393                 background-color: #F4F8F9;
4394                 background-position: 5px 3px;
4395                 background-repeat: no-repeat;
4396                 border: 2px solid #B9D8D9;
4397                 border-radius: 6px;
4398                 box-sizing: content-box;
4399                 color: #000000;
4400                 display: block;
4401                 font-size: 110%;
4402                 font-weight: bold;
4403                 margin: .5em 0;
4404                 max-width: 260px;
4405                 padding: 8px;
4406                 text-decoration: none;
4407
4408                 &:hover {
4409                     // Class used for each module link hover state
4410                     border-color: #538200;
4411                     color: #538200;
4412                 }
4413             }
4414         }
4415     }
4416 }
4417
4418 .about h2 {
4419     border-bottom: 1px solid #B9D8D9;
4420     padding: .5em .2em;
4421     margin:  .5em 0;
4422 }
4423
4424 .columns-2 {
4425     columns: 2 auto;
4426     column-gap: 2.5em;
4427 }
4428
4429 .columns-3 {
4430     columns: 3 auto;
4431     column-gap: 2.5em;
4432 }
4433
4434 .columns-4 {
4435     columns: 4 auto;
4436     column-gap: 2em;
4437 }
4438
4439 // ==== MODULE LINKS - End ====
4440
4441 #catalog-search-link {
4442     border-right: 1px solid lighten( #E6F0F2, 15% );
4443     padding-right: .3em;
4444 }
4445
4446 #catalog-search-dropdown {
4447     padding: 0;
4448
4449     & > a {
4450         border-left: 1px solid darken( #B4D2D8, 5% );
4451         margin-right: .6em;
4452         padding: .4em .6em;
4453
4454         &:hover,
4455         &.catalog-search-dropdown-hover {
4456             background-color: darken( #E6F0F2, 5% );
4457             border-left: 1px solid darken( #B4D2D8, 15% );
4458         }
4459     }
4460 }
4461
4462 #tools_holidays {
4463     .radio,
4464     .checkbox {
4465         label {
4466             margin-left: 0;
4467         }
4468     }
4469 }
4470
4471 /* Permissions */
4472
4473 #permissionstree {
4474     display: inline-block;
4475
4476     label {
4477         cursor: pointer;
4478
4479         &:hover {
4480             color: #004d99;
4481         }
4482     }
4483 }
4484
4485 .main_permission {
4486     font-size: 110%;
4487     font-weight: bold;
4488 }
4489
4490 .permissioncode {
4491     color: #666;
4492     font-style: italic;
4493 }
4494
4495 .permission-highlight {
4496     background-color: #FFC !important;
4497 }
4498
4499 .togglechildren_on,
4500 .togglechildren_off {
4501     float: right;
4502 }
4503
4504 .togglechildren_off,
4505 .children {
4506     display: none;
4507 }
4508
4509 .open {
4510     .togglechildren_off {
4511         display: inline;
4512     }
4513
4514     .togglechildren_on {
4515         display: none;
4516     }
4517 }
4518
4519 .parent {
4520     border: 1px solid #DDD;
4521     border-bottom-width: 0;
4522     padding: 5px;
4523
4524     &:last-child {
4525         border-bottom-width: 1px;
4526     }
4527
4528     &:nth-child(odd) {
4529         background-color: #F8F8F8;
4530     }
4531 }
4532
4533
4534 .superlibrarian-hint {
4535     color: #000;
4536     padding: .2em 0;
4537     text-indent: 2em;
4538 }
4539
4540 .child-flags {
4541     background-color: #FFF;
4542     border: 1px solid #DDD;
4543     border-bottom-width: 0;
4544     margin: 0 5px 0 20px;
4545     padding: 5px;
4546
4547     &:first-child {
4548         margin-top: 10px;
4549     }
4550
4551     &:last-child {
4552         border-bottom-width: 1px;
4553     }
4554
4555     &:nth-child(odd) {
4556         background-color: #EEE;
4557     }
4558 }
4559
4560 .header-menu-link {
4561     display: none;
4562     font-weight: bold;
4563     padding: .4em .6em;
4564 }
4565
4566 #user-menu {
4567     position: absolute;
4568     right: 5px;
4569     top: 0;
4570 }
4571
4572 div#makechart ol li {
4573     list-style: none;
4574 }
4575
4576 div .suggestion_note {
4577     background: transparent none;
4578     border-style: dotted;
4579     border-width: 1px 0 0 0;
4580     font-size: 90%;
4581     padding: 2px 0 0 0;
4582
4583     i {
4584         color: #CCC;
4585     }
4586 }
4587
4588 .ac-library {
4589     background-color: #EEE !important;
4590     border-radius: 4px;
4591     color: #000;
4592     display: inline-block;
4593     font-size: 80%;
4594     padding: 1px 4px !important;
4595 }
4596
4597 .ac-currentlibrary {
4598     .ac-library {
4599         background-color: #E6FCB7 !important;
4600         font-weight: bold;
4601     }
4602 }
4603
4604 .currentlibrary {
4605     background-color: #E6FCB7;
4606     display: inline-block;
4607     padding: 2px 4px;
4608 }
4609
4610 .availability {
4611     .item_count {
4612         font-weight: bold;
4613         padding: 2px;
4614
4615         &::after {
4616             content: ")";
4617         }
4618
4619         &::before {
4620             content: "(";
4621         }
4622     }
4623
4624     .item_counts {
4625         font-weight: bold;
4626         white-space: nowrap;
4627     }
4628
4629     .results_available_count {
4630         font-weight: bold;
4631         margin-bottom: .5em;
4632     }
4633
4634     .results_checkedout {
4635         color: #900;
4636         margin: .3em 0;
4637     }
4638
4639     .results_unavailable {
4640         color: #555;
4641         font-style: italic;
4642         margin: .3em 0;
4643     }
4644
4645     .result_item_details {
4646         display:inline-block;
4647         white-space:nowrap
4648     }
4649 }
4650
4651 #camera, #output {
4652     border: 8px solid #EDF4F6;
4653     padding: 1em;
4654 }
4655
4656 #photo {
4657     display: block;
4658     margin: auto;
4659 }
4660
4661 #camera-error {
4662     display: none;
4663     flex-direction: row;
4664     flex-wrap: nowrap;
4665
4666     div {
4667         padding: 0 .5em;
4668     }
4669 }
4670
4671 @media (min-width: 200px) {
4672
4673 }
4674
4675 @media (max-width: 767px) {
4676     .header-menu-link {
4677         display: inline-block;
4678     }
4679
4680     #catalog-search-link {
4681         display: none;
4682         padding: 0;
4683     }
4684
4685     #cartmenulink {
4686         background: transparent none;
4687         padding-left: 1.5em;
4688     }
4689
4690     #changelanguage {
4691         li {
4692             float: left;
4693
4694             li {
4695                 float: none;
4696             }
4697         }
4698
4699         .open {
4700             .dropdown-menu {
4701                 background-color: #FFF;
4702                 border: 1px solid #ccc;
4703                 position: absolute;
4704             }
4705         }
4706     }
4707
4708     #header {
4709         background-color: #FFF;
4710         border: 1px solid #CCC;
4711         margin-bottom: 1em;
4712
4713         a {
4714             font-weight: normal;
4715             padding-left: 1.5em;
4716
4717             &:hover {
4718                 background-color: #0070A9;
4719                 color: #FFF;
4720             }
4721         }
4722
4723         ul {
4724             border: 0;
4725             box-shadow: unset;
4726             float: none;
4727             left: auto;
4728             position: relative;
4729             right: auto;
4730
4731             &.dropdown-menu {
4732                 display: block;
4733             }
4734         }
4735
4736         .dropdown-menu {
4737             li {
4738                 a {
4739                     color: #004D99;
4740
4741                     &:hover {
4742                         color: #FFF;
4743                     }
4744                 }
4745             }
4746         }
4747
4748         .dropdown-toggle {
4749             display: none;
4750         }
4751     }
4752
4753     .gradient {
4754         align-items: center;
4755         flex-direction: column;
4756     }
4757
4758     #logo {
4759         margin: 1rem;
4760     }
4761
4762     #marcPreview {
4763         margin: 0;
4764         width: auto;
4765     }
4766
4767     .navbar-fixed-bottom .nav > li {
4768         border-right: 0;
4769     }
4770
4771     #user-menu {
4772         .open {
4773             .dropdown-menu {
4774                 background-color: #FFF;
4775                 border: 1px solid #ccc;
4776                 position: absolute;
4777             }
4778         }
4779
4780         li {
4781             float: left;
4782
4783             li {
4784                 float: none;
4785             }
4786         }
4787     }
4788 }
4789
4790 @media (max-width: 768px) {
4791     .navbar-nav {
4792         li {
4793
4794             a {
4795                 padding: .4em .6em;
4796             }
4797         }
4798     }
4799 }
4800
4801 @media only screen and ( max-width: 768px ) {
4802     .browse-button {
4803         display: inline-block;
4804         width: 50%;
4805     }
4806
4807     #browse-previous {
4808         border-bottom-left-radius: 5px;
4809         border-bottom-width: 1px;
4810         border-right-width: 0;
4811     }
4812
4813     #browse-next {
4814         border-bottom-left-radius: 0;
4815         border-bottom-right-radius: 5px;
4816     }
4817 }
4818
4819 @media (min-width: 800px) {
4820
4821
4822
4823     #helper {
4824         i {
4825             display: none;
4826         }
4827
4828         span {
4829             display: inline;
4830         }
4831     }
4832
4833     #logged-in-info-full {
4834         display: inline;
4835     }
4836
4837     #logged-in-info-brief {
4838         display: none;
4839     }
4840
4841     .loggedin-menu-label {
4842         display: none;
4843     }
4844 }
4845
4846 @media only screen and ( min-width: 1200px ) {
4847     .browse-button {
4848         display: inline-block;
4849         width: 50%;
4850     }
4851
4852     #browse-previous {
4853         border-bottom-left-radius: 5px;
4854         border-bottom-width: 1px;
4855         border-right-width: 0;
4856     }
4857
4858     #browse-next {
4859         border-bottom-left-radius: 0;
4860         border-bottom-right-radius: 5px;
4861     }
4862 }
4863
4864 @media print {
4865     body.modalprinter * {
4866         visibility: hidden;
4867     }
4868
4869     body.modalprinter .modal-dialog.focused {
4870         position: absolute;
4871         padding: 0;
4872         margin: 0;
4873         left: 0;
4874         top: 0;
4875     }
4876
4877     body.modalprinter .modal-dialog.focused .modal-content {
4878         border-width: 0;
4879     }
4880
4881     body.modalprinter .modal-dialog.focused .modal-content .modal-header .modal-title,
4882     body.modalprinter .modal-dialog.focused .modal-content .modal-body,
4883     body.modalprinter .modal-dialog.focused .modal-content .modal-body * {
4884         visibility: visible;
4885     }
4886
4887     body.modalprinter .modal-dialog.focused .modal-content .modal-header,
4888     body.modalprinter .modal-dialog.focused .modal-content .modal-body {
4889         padding: 0;
4890     }
4891
4892     body.modalprinter .modal-dialog.focused .modal-content .modal-header .modal-title {
4893         margin-bottom: 20px;
4894     }
4895 }