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 // style for bundled detail in catalogsearch
1977 .bundled {
1978     display: block;
1979     font-style: italic;
1980 }
1981
1982 #menu {
1983     border-right: 1px solid #B9D8D9;
1984     margin-right: .5em;
1985     padding-bottom: 2em;
1986     padding-top: 1em;
1987
1988     li {
1989         a {
1990             background: linear-gradient(to bottom, #E8F0F6 0%, #E8F0F6 96%, #C1C1C1 100%);
1991             border: 1px solid #B9D8D9;
1992             border-bottom-left-radius: 5px;
1993             border-top-left-radius: 5px;
1994             display: block;
1995             font-size: 111%;
1996             margin: .5em 0;
1997             margin-right: -1px;
1998             padding: .4em .3em;
1999             text-decoration: none;
2000
2001             &:hover {
2002                 background: linear-gradient(to bottom, #FAFAFA 0%, #FFFFFF 96%, #E6E6E6 97%, #CCCCCC 99%, #C1C1C1 100%);
2003                 border-bottom: 1px solid #85CA11;
2004                 border-left: 1px solid #85CA11;
2005                 border-top: 1px solid #85CA11;
2006             }
2007         }
2008
2009         &.active {
2010             a {
2011                 background-color: #FFFFFF;
2012                 background-image: none;
2013                 border-bottom: 1px solid #85CA11;
2014                 border-left: 1px solid #85CA11;
2015                 border-right: 0;
2016                 border-top: 1px solid #85CA11;
2017                 color: #000000;
2018                 font-weight: bold;
2019
2020                 &:hover {
2021                     background-color: #FFFFFF;
2022                     color: #538200;
2023                 }
2024             }
2025         }
2026     }
2027
2028     ul {
2029         li {
2030             list-style-type: none;
2031         }
2032     }
2033 }
2034
2035 #closewindow {
2036     margin-top: 2em;
2037     text-align: center;
2038
2039     a {
2040         font-weight: bold;
2041     }
2042 }
2043
2044 .barcode {
2045     font-size: 200%;
2046     vertical-align: middle;
2047 }
2048
2049 li {
2050     &.email {
2051         overflow: hidden;
2052         text-overflow: ellipsis;
2053         white-space: nowrap;
2054     }
2055 }
2056
2057 .patronbriefinfo {
2058     li {
2059         &.email {
2060             font-size: 87%;
2061             padding: 0 10px 0 0;
2062             width: 90%;
2063         }
2064     }
2065 }
2066
2067 .empty {
2068     color: #CCC;
2069 }
2070
2071 .address {
2072     font-size: 110%;
2073
2074     li {
2075         list-style-type: none;
2076     }
2077 }
2078
2079 .title {
2080     font-weight: bold;
2081 }
2082
2083 .hold {
2084     float: right;
2085     font-size: 90%;
2086     margin: 0;
2087 }
2088
2089 .thumbnail {
2090     display: block;
2091     margin: auto;
2092 }
2093
2094 .thumbnails {
2095     li {
2096         display: inline-block;
2097         list-style-type: none;
2098         margin: 4px;
2099     }
2100
2101     .remove {
2102         border-top: 1px solid #EEE;
2103         display: block;
2104         font-size: 90%;
2105         margin: 4px -4px 2px -4px;
2106         padding-top: .5em;
2107         text-align: center;
2108     }
2109
2110     & + p {
2111         border-top: 1px solid #eee;
2112         margin-top: 1em;
2113         padding-top: 1em;
2114     }
2115 }
2116
2117 #searchresults {
2118     td {
2119         ul {
2120             li {
2121                 clear: left;
2122                 font-size: 90%;
2123                 list-style: url("../img/item-bullet.svg");
2124                 padding: .2em 0;
2125
2126                 &.result_itype_image {
2127                     list-style: none;
2128                     list-style-type: none;
2129                 }
2130
2131                 img {
2132                     float: left;
2133                     margin: 3px 5px 3px -5px;
2134                     max-width: 25px;
2135                 }
2136             }
2137         }
2138     }
2139
2140     span {
2141         &.status {
2142             clear: left;
2143             color: #900;
2144             display: block;
2145         }
2146
2147         &.unavailable {
2148             clear: left;
2149             display: block;
2150         }
2151     }
2152
2153     table {
2154         td {
2155             vertical-align: top;
2156         }
2157     }
2158
2159     &.unavailability {
2160         strong {
2161             display: block;
2162         }
2163     }
2164 }
2165
2166 #searchresults,
2167 #table_borrowers {
2168     .address {
2169         ul {
2170             margin: 0;
2171             padding-left: 0;
2172             li {
2173                 clear: none;
2174                 float: left;
2175                 list-style: none;
2176                 margin-left: 1ch;
2177                 padding: 0;
2178             }
2179         }
2180     }
2181 }
2182
2183 .searchheader {
2184     background-color: #E6F0F2;
2185     border: 1px solid #B9D8D9;
2186     border-radius: 5px 5px 0 0;
2187     font-size: 80%;
2188     margin: 0 0 .5em -1px;
2189     padding: .4em 0 .4em 1em;
2190
2191     &.floating {
2192         border-radius: 0;
2193         margin-top: 0;
2194     }
2195
2196     .btn-group {
2197         > .btn {
2198             &:first-child {
2199                 margin-left: .7em;
2200             }
2201         }
2202     }
2203
2204     form {
2205         float: right;
2206         padding: 5px 5px 3px 0;
2207
2208         &.fz3950 {
2209             float: right;
2210             font-size: 125%;
2211             padding: 0 0 0 5em;
2212         }
2213
2214         &.fz3950bigrpad {
2215             float: right;
2216             font-size: 125%;
2217             padding: 5px 25em 0 0;
2218         }
2219     }
2220 }
2221
2222 #search-facets {
2223     border: 1px solid #B9D8D9;
2224     border-radius: 5px 5px 0 0;
2225
2226     h4 {
2227         background-color: #E6F0F2;
2228         border-bottom: 1px solid #B9D8D9;
2229         border-radius: 5px 5px 0 0;
2230         font-size: 90%;
2231         margin: 0;
2232         padding: .4em .2em;
2233         text-align: center;
2234     }
2235
2236     ul {
2237         margin: 0;
2238         padding: .3em;
2239
2240         li {
2241             font-weight: bold;
2242             list-style-type: none;
2243         }
2244     }
2245
2246     li {
2247         li {
2248             font-size: 85%;
2249             font-weight: normal;
2250             margin-bottom: 2px;
2251             padding: .1em .2em;
2252         }
2253
2254         &.showmore {
2255             font-weight: bold;
2256             text-indent: 1em;
2257         }
2258     }
2259 }
2260
2261 .facet-count {
2262     display: inline-block;
2263 }
2264
2265 .bookcoverimg {
2266     text-align: center;
2267 }
2268
2269 .custom_cover_image {
2270     img {
2271         max-width: 140px;
2272     }
2273 }
2274
2275 #biblio-cover-slider {
2276     border: 1px solid #b9d8d9;
2277     border-radius: 3px;
2278     margin: 5px;
2279     padding: 10px 5px 5px 5px;
2280     min-height: 175px;
2281 }
2282
2283 .cover-slides {
2284     background: #FFF url("../img/spinner-small.gif") center center no-repeat;
2285
2286     .hint {
2287         font-size: 90%;
2288         padding: .5em 0;
2289     }
2290
2291     a {
2292         &.nav-active {
2293             &:link,
2294             &:visited {
2295                 color: #85ca11;
2296             }
2297         }
2298     }
2299 }
2300
2301 td {
2302     &.bookcoverimg {
2303         background: #FFF url("../img/spinner-small.gif") center center no-repeat;
2304         min-width: 120px;
2305         text-align: center;
2306     }
2307
2308     .cover-slides {
2309         background: transparent none;
2310         border: 0;
2311         margin: 0;
2312         min-height: unset;
2313         padding: 0;
2314     }
2315
2316     &.credit,
2317     &.debit,
2318     &.total {
2319         text-align: right;
2320
2321         tfoot & {
2322             color: #000;
2323         }
2324     }
2325 }
2326
2327 .cover-image {
2328     display: none;
2329
2330     img {
2331         height: auto;
2332         max-width: 100%;
2333     }
2334 }
2335
2336 .cover-nav {
2337     display: inline-block;
2338     padding: 3px 4px;
2339 }
2340
2341 .searchhighlightblob {
2342     font-size: 75%;
2343     font-style: italic;
2344 }
2345
2346 #irregularity_summary {
2347     vertical-align: top;
2348 }
2349
2350 #CheckAll,
2351 #CheckNone,
2352 #CheckPending {
2353     font-weight: normal;
2354     margin: 0 .5em 0 0;
2355 }
2356
2357 .lost,
2358 .dmg,
2359 .wdn {
2360     color: #990000;
2361     display: block;
2362 }
2363
2364 .bundled {
2365     display: block;
2366 }
2367
2368 td.bundle {
2369     background-color: #FFC !important;
2370 }
2371
2372 .datedue {
2373     color: #999;
2374     display: block;
2375     font-style: italic;
2376 }
2377
2378 .waitinghere,
2379 .credit {
2380     color: #669900;
2381 }
2382
2383 #mainuserblock {
2384     border: 1px solid #E8E8E8;
2385     margin-top: .5em;
2386     padding: .5em;
2387 }
2388
2389 .labeledmarc-table {
2390     border: 0;
2391 }
2392
2393 .labeledmarc-label {
2394     border: 0;
2395     color: #000000;
2396     font-size: 11pt;
2397     font-style: italic;
2398     padding: 5;
2399 }
2400
2401 .labeledmarc-value {
2402     border: 0;
2403     color: #000;
2404     font-size: 10pt;
2405     padding: 5;
2406 }
2407
2408 #marcPreview {
2409     table {
2410         border: 0;
2411         font-family: $font-monospace;
2412         font-size: 95%;
2413         margin: .7em 0 0;
2414     }
2415
2416     tbody {
2417         tr {
2418             &:nth-child(2n+1) {
2419                 td {
2420                     background-color: #FFFFFF;
2421                 }
2422             }
2423         }
2424     }
2425
2426     td {
2427         border: 0;
2428         padding: 2px;
2429         vertical-align: top;
2430     }
2431
2432     th {
2433         background-color: #FFFFFF;
2434         border: 0;
2435         padding: 2px;
2436         text-align: left;
2437         vertical-align: top;
2438         white-space: nowrap;
2439     }
2440
2441     &.modal-dialog {
2442         width: 80%;
2443     }
2444 }
2445
2446 .modal-dialog {
2447     .dialog {
2448         border-radius: 0;
2449         border-width: 1px 0 0 0;
2450         clear: both;
2451         margin: 15px -15px -15px -15px;
2452         padding: 15px;
2453         text-align: left;
2454         width: unset;
2455
2456         h3 {
2457             margin: unset;
2458             text-align: left;
2459         }
2460
2461         &.alert {
2462             background: #FFFADE none;
2463             border-color: #E0C726;
2464         }
2465
2466         &.message {
2467             background: #E8EDF6 none;
2468             border-color: #A4BEDD;
2469         }
2470     }
2471
2472     &.modal-wide {
2473         width: 80%;
2474     }
2475 }
2476
2477 #cartDetails {
2478     background-color: #FFFFFF;
2479     border: 1px solid #739ACF;
2480     box-shadow: 1px 1px 3px 0 #666;
2481     color: #000;
2482     display: none;
2483     margin: 0;
2484     padding: 10px;
2485     text-align: center;
2486     width: 180px;
2487     z-index: 50;
2488 }
2489
2490 #cartmenulink {
2491     padding-left: 15px;
2492
2493     i.fa.fa-shopping-cart {
2494         padding-right: 7px;
2495     }
2496 }
2497
2498 #basketcount {
2499     span {
2500         display: inline;
2501         font-size: 90%;
2502         font-weight: normal;
2503         padding: 0;
2504     }
2505 }
2506
2507 #moremenu {
2508     display: none;
2509 }
2510
2511 .results_summary {
2512     color: #202020;
2513     display: block;
2514     font-size: 85%;
2515     padding: 0 0 .5em;
2516
2517     a {
2518         font-weight: normal;
2519     }
2520
2521     .label {
2522         color: #707070;
2523     }
2524 }
2525
2526 .child_fund_amount {
2527     font-style: italic;
2528 }
2529
2530 .number_box {
2531     font-size: 105%;
2532     line-height: 200%;
2533
2534     h3 & {
2535         font-size: 70%;
2536     }
2537
2538     a,
2539     span {
2540         background-color: #E4ECF5;
2541         border: 1px solid #A4BEDD;
2542         border-radius: 4px;
2543         font-weight: bold;
2544         padding: .1em .4em;
2545         text-decoration: none;
2546
2547         &:hover {
2548             background-color: #EBEFF7;
2549         }
2550     }
2551 }
2552
2553 .container {
2554     border: 1px solid #EEE;
2555     margin: 1em 0;
2556     padding: 1em;
2557 }
2558
2559 .import_export {
2560     position: relative;
2561
2562     .export_ok {
2563         background: #E3E3E3 none;
2564         border: 0;
2565         cursor: pointer;
2566         margin-left: 20px;
2567         padding: 10px;
2568     }
2569
2570     .import_export_options {
2571         background: #FFFFFF;
2572         border: 1px solid #CDCDCD;
2573         left: 60px;
2574         padding: 10px;
2575         position: absolute;
2576         top: 0;
2577         width: 300px;
2578         z-index: 1;
2579     }
2580 }
2581
2582 .import_export_options {
2583     background: #E3E3E3 none;
2584     border: 0;
2585     cursor: pointer;
2586     margin-left: 20px;
2587     padding: 10px;
2588
2589     fieldset {
2590         &.rows {
2591             li {
2592                 label {
2593                     width: 16em;
2594                 }
2595             }
2596         }
2597     }
2598
2599     .importing {
2600         background: none;
2601         padding: inherit;
2602     }
2603 }
2604
2605 .form_import {
2606     fieldset {
2607         &.rows {
2608             li {
2609                 label {
2610                     width: auto;
2611                 }
2612             }
2613         }
2614     }
2615
2616     .input_import {
2617         border: 1px solid #BCBCBC;
2618     }
2619 }
2620
2621 .importing {
2622     position: relative;
2623
2624     .importing_msg {
2625         padding-bottom: 10px;
2626         padding-left: 10px;
2627     }
2628 }
2629
2630
2631 .field_hint {
2632     color: #808080;
2633     font-style: italic;
2634     padding-left: 1em;
2635 }
2636
2637 .m880 {
2638     display: block;
2639     float: right;
2640     padding-left: 20px;
2641     text-align: right;
2642     width: 50%;
2643 }
2644
2645 .advsearch {
2646     margin: 0;
2647
2648     table {
2649         border-collapse: separate;
2650         border-spacing: 5px;
2651         border-width: 0;
2652     }
2653
2654     td {
2655         border: 1px solid #EEE;
2656         padding: .3em .4em;
2657     }
2658 }
2659
2660 #circ_circulation_issue {
2661     position: relative;
2662 }
2663
2664 #renew_as_unseen_label {
2665     margin-left: 1em;
2666 }
2667
2668 #renew_as_unseen_checkbox {
2669     margin-right: 1em;
2670 }
2671
2672 #clearscreen {
2673     position: absolute;
2674     right: 0;
2675     top: 0;
2676
2677     a {
2678         background-color: #EEE;
2679         border-radius: 0 0 0 5px;
2680         color: #CCC;
2681         display: block;
2682         font-size: 160%;
2683         font-weight: bold;
2684         padding: 0 .7em .2em;
2685         text-decoration: none;
2686         text-shadow: 0 -1px 0 #666;
2687
2688         &:hover {
2689             color: #CC0000;
2690         }
2691     }
2692 }
2693
2694 #printclearscreen,
2695 #printclearscreenq {
2696     position: absolute;
2697     right: 43px;
2698     top: 0;
2699
2700     a {
2701         background-color: #EEE;
2702         border-radius: 0 0 0 5px;
2703         color: #CCC;
2704         display: block;
2705         font-size: 160%;
2706         font-weight: bold;
2707         padding: 0 .7em .2em;
2708         text-decoration: none;
2709         text-shadow: 0 -1px 0 #666;
2710
2711         &:hover {
2712             color: #CC0000;
2713         }
2714     }
2715 }
2716
2717 .no-image {
2718     background-color: #FFFFFF;
2719     border: 1px solid #AAAAAA;
2720     border-radius: 3px;
2721     color: #979797;
2722     display: block;
2723     font-size: 86%;
2724     font-weight: bold;
2725     margin: 1em auto;
2726     padding: 1em;
2727     text-align: center;
2728     width: 75px;
2729 }
2730
2731 #acqui_order_supplierlist {
2732     .supplier {
2733         &+.supplier {
2734             border-top: 1px solid #EEEEEE;
2735             margin-top: 1em;
2736         }
2737     }
2738
2739     .suppliername {
2740         display: inline-block;
2741         margin: .5em 1em .5em 0;
2742
2743         &.inactive {
2744             color: #888;
2745
2746             a:link,
2747             a:visited {
2748                 color: #888;
2749             }
2750         }
2751     }
2752 }
2753
2754 #ADD-contact {
2755     margin: 0 0 8px 8px;
2756 }
2757
2758 #contact-template {
2759     display: none;
2760 }
2761
2762 // Override core jQueryUI widgets
2763 .ui-widget-content {
2764     background: #FFFFFF none;
2765     border: 1px solid #B9D8D9;
2766     color: #222222;
2767 }
2768
2769 .ui-widget-header {
2770     background: #E6F0F2 none;
2771     border: 1px solid #B9D8D9;
2772     color: #222222;
2773     font-weight: bold;
2774 }
2775
2776 .ui-state-default,
2777 .ui-widget-content .ui-state-default,
2778 .ui-widget-header .ui-state-default {
2779     background: #F4F8F9 none;
2780     border: 1px solid #B9D8D9;
2781     color: #555555;
2782     font-weight: normal;
2783 }
2784
2785 .ui-state-hover,
2786 .ui-widget-content .ui-state-hover,
2787 .ui-widget-header .ui-state-hover,
2788 .ui-state-focus,
2789 .ui-widget-content .ui-state-focus,
2790 .ui-widget-header .ui-state-focus {
2791     background: #E6F0F2 none;
2792     border: 1px solid #B9D8D9;
2793     color: #212121;
2794     font-weight: normal;
2795 }
2796
2797 // .ui-state-active,
2798 // .ui-widget-content .ui-state-active,
2799 // .ui-widget-header .ui-state-active {
2800 //     background: #FFFFFF none;
2801 //     border: 1px solid #AAAAAA;
2802 //     color: #212121;
2803 //     font-weight: normal;
2804 // }
2805
2806 .ui-state-highlight,
2807 .ui-widget-content .ui-state-highlight,
2808 .ui-widget-header .ui-state-highlight {
2809     background: #FFF4C6;
2810     border: 1px solid #FED22F;
2811     color: #363636;
2812 }
2813
2814 .ui-state-error,
2815 .ui-widget-content .ui-state-error,
2816 .ui-widget-header .ui-state-error {
2817     background: #FEF1EC;
2818     border: 1px solid #CD0A0A;
2819     color: #CD0A0A;
2820 }
2821
2822 // Override jQuery Autocomplete
2823 .ui-autocomplete {
2824     box-shadow: 2px 2px 2px rgba(0, 0, 0, .3);
2825     cursor: default;
2826     position: absolute;
2827
2828     &.ui-menu {
2829         li {
2830             &.ui-menu-item {
2831                 padding: 3px 1em 3px .4em;
2832
2833                 &:hover {
2834                     background: #E6F0F2 none;
2835                     color: #212121;
2836                     font-weight: normal;
2837                 }
2838
2839                 .ui-state-active {
2840                     background: transparent none;
2841                     border: 0;
2842                 }
2843
2844                 .ui-menu-item-wrapper {
2845                     padding: unset;
2846                 }
2847
2848                 .ui-state-active,
2849                 .ui-state-focus {
2850                     margin: 0;
2851                 }
2852             }
2853         }
2854     }
2855 }
2856
2857 .ui-autocomplete-loading {
2858     background: #FFF url("../img/spinner-small.gif") right center no-repeat;
2859 }
2860
2861 // jQuery UI standard tabs
2862 .ui-menu {
2863     li {
2864         list-style: none;
2865     }
2866 }
2867
2868 .ui-tabs-nav {
2869     .ui-tabs-active a,
2870     a:hover,
2871     a:focus,
2872     a:active,
2873     span.a {
2874         background: none repeat scroll 0 0 transparent;
2875         outline: 0 none;
2876     }
2877
2878     &.ui-widget-header {
2879         background: none;
2880         border: 0;
2881     }
2882 }
2883
2884 .ui-tabs {
2885     .ui-tabs-nav {
2886         li {
2887             background: #E6F0F2 none;
2888             border: 1px solid #B9D8D9;
2889             margin-right: .4em;
2890             top: 1px;
2891
2892             &.ui-tabs-active {
2893                 background-color: #FFFFFF;
2894                 border: 1px solid #B9D8D9;
2895                 border-bottom-width: 0;
2896
2897                 a {
2898                     color: #000;
2899                     font-weight: bold;
2900                 }
2901
2902                 &.ui-state-hover {
2903                     background: #FFF none;
2904                 }
2905             }
2906
2907             &.ui-state-default {
2908                 &.ui-state-hover {
2909                     background: #EDF4F5 none;
2910                 }
2911             }
2912         }
2913     }
2914
2915     .ui-tabs-panel {
2916         border: 1px solid #B9D8D9;
2917     }
2918
2919     &.ui-widget-content {
2920         background: transparent none;
2921         border: 0;
2922     }
2923
2924     .ui-state-default {
2925         a {
2926             color: #004D99;
2927
2928             &:link,
2929             &:visited {
2930                 color: #004D99;
2931             }
2932         }
2933     }
2934
2935     .ui-state-hover {
2936         a {
2937             color: #538200;
2938
2939             &:link,
2940             &:visited {
2941                 color: #538200;
2942             }
2943         }
2944     }
2945
2946 }
2947
2948 .ui-widget {
2949     font-family: inherit;
2950     font-size: inherit;
2951
2952     input,
2953     select,
2954     textarea,
2955     button {
2956         font-family: inherit;
2957         font-size: inherit;
2958     }
2959 }
2960
2961 .statictabs {
2962     > ul {
2963         background: none repeat scroll 0 0 transparent;
2964         border: 0 none;
2965         border-bottom-left-radius: 4px;
2966         border-bottom-right-radius: 4px;
2967         border-top-left-radius: 4px;
2968         border-top-right-radius: 4px;
2969         color: #222222;
2970         font-size: 100%;
2971         font-weight: bold;
2972         line-height: 1.3;
2973         list-style: none outside none;
2974         margin: 0;
2975         outline: 0 none;
2976         padding: .2em .2em 0;
2977         text-decoration: none;
2978
2979         &::after {
2980             clear: both;
2981         }
2982
2983         &::before,
2984         &::after {
2985             content: "";
2986             display: table;
2987         }
2988
2989         li {
2990             background: none repeat scroll 0 0 #E6F0F2;
2991             border: 1px solid #B9D8D9;
2992             border-bottom: 0 none;
2993             border-top-left-radius: 4px;
2994             border-top-right-radius: 4px;
2995             color: #555555;
2996             float: left;
2997             font-weight: normal;
2998             list-style: none outside none;
2999             margin-bottom: 0;
3000             margin-right: .4em;
3001             padding: 0;
3002             position: relative;
3003             top: 1px;
3004             white-space: nowrap;
3005
3006             &.active {
3007                 background-color: #FFFFFF;
3008                 color: #212121;
3009                 font-weight: normal;
3010                 padding-bottom: 1px;
3011
3012                 a {
3013                     background: none repeat scroll 0 0 transparent;
3014                     color: #000000;
3015                     cursor: text;
3016                     font-weight: bold;
3017                     outline: 0 none;
3018                     top: 1px;
3019                 }
3020             }
3021
3022             a {
3023                 color: #004D99;
3024                 cursor: pointer;
3025                 float: left;
3026                 padding: .5em 1em;
3027                 text-decoration: none;
3028
3029                 &:hover {
3030                     background-color: #EDF4F5;
3031                     border-top-left-radius: 4px;
3032                     border-top-right-radius: 4px;
3033                     color: #538200;
3034                 }
3035             }
3036         }
3037     }
3038
3039     .tabs-container {
3040         background: none repeat scroll 0 0 transparent;
3041         border: 1px solid #B9D8D9;
3042         border-bottom-left-radius: 4px;
3043         border-bottom-right-radius: 4px;
3044         color: #222222;
3045         display: block;
3046         padding: 1em 1.4em;
3047     }
3048 }
3049
3050 .toptabs {
3051     margin-top: 5px;
3052         .ui-tabs-panel {
3053             background: #FFF none;
3054         }
3055 }
3056
3057 .authref {
3058     font-style: normal;
3059     text-indent: 4em;
3060 }
3061
3062 .seefrom,
3063 .seealso {
3064     font-style: italic;
3065     text-indent: 2em;
3066 }
3067
3068 #authfinderops {
3069     float: right;
3070 }
3071
3072 .authorizedheading {
3073     font-weight: bold;
3074 }
3075
3076 .authres_notes,
3077 .authres_seealso,
3078 .authres_otherscript {
3079     padding-top: 3px;
3080 }
3081
3082 .authres_notes {
3083     font-style: italic;
3084 }
3085
3086
3087 .contents {
3088     width: 75%;
3089
3090     .newline::after {
3091         content: "\A → ";
3092         white-space: pre;
3093     }
3094
3095     .t {
3096         font-weight: bold;
3097         display: inline;
3098     }
3099
3100     .r {
3101         display: inline;
3102     }
3103 }
3104
3105
3106 .contentblock {
3107     font-size: 95%;
3108     line-height: 135%;
3109     margin-left: 2em;
3110     position: relative;
3111
3112     :first-child::before {
3113         content: "→ ";
3114     }
3115 }
3116
3117 #hierarchies {
3118     margin-bottom: 1em;
3119
3120     a {
3121         color: #069;
3122         font-weight: normal;
3123         text-decoration: underline;
3124
3125         &.jstree-anchor {
3126             &.jstree-hovered {
3127                 background: transparent none;
3128                 box-shadow: none;
3129                 color: #005580;
3130             }
3131
3132             &.jstree-clicked {
3133                 background: transparent none;
3134                 box-shadow: none;
3135                 border: 0;
3136             }
3137         }
3138     }
3139 }
3140
3141 #didyoumeanopac,
3142 #didyoumeanintranet {
3143     float: left;
3144     width: 260px;
3145 }
3146
3147 .pluginlist {
3148     padding-bottom: 10px;
3149 }
3150
3151 .plugin {
3152     margin: 0 1em 1em 0;
3153 }
3154
3155 .pluginname {
3156     background-color: #E6F0F2;
3157     cursor: move;
3158     margin: .3em;
3159     padding-bottom: 4px;
3160     padding-left: .2em;
3161
3162     .ui-icon {
3163         float: right;
3164     }
3165 }
3166
3167 .plugindesc {
3168     padding: .4em;
3169 }
3170
3171 .ui-sortable-placeholder {
3172     border: 1px dotted #000;
3173     height: 80px;
3174     visibility: visible;
3175
3176     * {
3177         visibility: hidden;
3178     }
3179 }
3180
3181 // jQuery UI Accordion
3182 .ui-accordion-header,
3183 .ui-widget-content .ui-accordion-header {
3184     font-size: 110%;
3185     font-weight: bold;
3186 }
3187
3188 video {
3189     width: 480px;
3190 }
3191
3192 // Bootstrap overrides
3193
3194 .dropdown-header {
3195     border-top: 1px solid #EEE;
3196     color: #000;
3197     font-weight: bold;
3198     margin-top: 5px;
3199     padding-left: 10px;
3200
3201     &:first-child {
3202         border-top: 0;
3203     }
3204 }
3205
3206 nav {
3207     background: #E6F0F2 none;
3208     border: 0;
3209
3210     &.breadcrumb {
3211         background-color: #E6F0F2;
3212         clear: both;
3213         margin: 0;
3214         padding: .8em .5em .8em 10px;
3215         position: relative;
3216
3217         ol {
3218             margin: 0;
3219             padding-left: 0;
3220             list-style: none;
3221         }
3222
3223         li {
3224             display: inline;
3225
3226             &+li::before {
3227                 background: transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktY2hldnJvbi1yaWdodCI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNy4zNyAwbDUuMzUgNy4zYy4yLjIuMi41MSAwIC43bC01LjM4IDhoLTQuMmw1LjY0LTguMzVMMy4xMy4wMXoiLz48L3N2Zz4=") 50% 50% no-repeat;
3228                 background-size: 8px;
3229                 content: '';
3230                 display: inline-block;
3231                 height: .8em;
3232                 width: .8em;
3233             }
3234
3235         }
3236
3237         [aria-current="page"] {
3238             color: #000;
3239             font-weight: 700;
3240             text-decoration: none;
3241         }
3242     }
3243
3244
3245 }
3246
3247 .navbar-collapse {
3248     background: #E6F0F2 none;
3249     box-shadow: none;
3250 }
3251
3252 .navbar-nav {
3253     li {
3254         list-style: none;
3255
3256         &.open {
3257             li {
3258                 a {
3259                     font-weight: normal;
3260                 }
3261             }
3262         }
3263
3264         a {
3265             font-weight: bold;
3266             padding-bottom: .4em;
3267             padding-top: .4em;
3268         }
3269     }
3270 }
3271
3272 .nav .open > a,
3273 .nav .open > a:hover,
3274 .nav .open > a:focus {
3275     background-color: transparent;
3276     border: 0;
3277 }
3278
3279 .nav > li > a:hover,
3280 .nav > li > a:focus {
3281     background-color: transparent;
3282     text-decoration: none;
3283 }
3284
3285 .pagination {
3286     margin:.5em .8em;
3287
3288     .active {
3289         a {
3290             background-color: #5A9EAA;
3291             border-color: #5A9EAA;
3292
3293             &:hover,
3294             &:focus {
3295                 background-color: #5A9EAA;
3296                 border-color: #5A9EAA;
3297             }
3298         }
3299
3300         span {
3301             background-color: #5A9EAA;
3302             border-color: #5A9EAA;
3303
3304             &:hover,
3305             &:focus {
3306                 background-color: #5A9EAA;
3307                 border-color: #5A9EAA;
3308             }
3309         }
3310     }
3311 }
3312
3313 button,
3314 .btn {
3315     border-color: #ADADAD #ADADAD #949494;
3316     font-family: $font-main;
3317
3318     &.btn-link {
3319         border: 0;
3320     }
3321 }
3322
3323 .btn-xs,
3324 .btn-group-xs > .btn {
3325     font-size: 10.5px;
3326     padding: 3px 5px;
3327 }
3328
3329 /* Bootstrap Collapse */
3330
3331 .panel {
3332     background: #F4F8F9 none;
3333     box-shadow: none;
3334 }
3335
3336 .panel-collapse {
3337     background: #FFF none;
3338 }
3339
3340 .panel-title {
3341     a {
3342         border-radius: 3px;
3343         display: block;
3344         padding: 10px 15px;
3345         border-bottom-left-radius: 0;
3346         border-bottom-right-radius: 0;
3347
3348         &::before {
3349             content: "\f0d7";
3350             display: inline-block;
3351             font-family: FontAwesome;
3352             width: 1em;
3353         }
3354
3355         &:hover {
3356             background: #e6f0f2 none;
3357             border-bottom-left-radius: 0;
3358             border-bottom-right-radius: 0;
3359         }
3360
3361         &.collapsed {
3362             &::before {
3363                 content: "\f0da";
3364                 display: inline-block;
3365                 font-family: FontAwesome;
3366                 width: 1em;
3367             }
3368
3369             &:hover {
3370                 background: #e6f0f2 none;
3371                 border-bottom-left-radius: 3px;
3372                 border-bottom-right-radius: 3px;
3373             }
3374         }
3375     }
3376 }
3377
3378 .panel-default {
3379     border: 1px solid #B9D8D9;
3380     > .panel-heading {
3381         background: transparent none;
3382         padding: 0;
3383
3384         + .panel-collapse {
3385             > .panel-body {
3386                 border-top-color: #B9D8D9;
3387             }
3388         }
3389     }
3390 }
3391
3392 .panel-group {
3393     .panel {
3394         + .panel {
3395             margin-top: 3px;
3396         }
3397     }
3398 }
3399
3400 #toolbar {
3401     .dropdown-menu {
3402         border-top-width: 1px;
3403         font-size: 13px;
3404     }
3405
3406     &.floating {
3407         border-radius: 0;
3408         margin-top: 0;
3409     }
3410 }
3411
3412 #changelanguage {
3413     background: #FFF none;
3414     border-top: 1px solid #EEE;
3415     min-height: $language-footer-min-height;
3416
3417     .dropdown-menu {
3418         > li {
3419             > a,
3420             > span {
3421                 padding: 5px 15px;
3422             }
3423         }
3424     }
3425
3426     .navbar-text {
3427         margin: 0;
3428
3429         span {
3430             display: block;
3431             line-height: 20px;
3432         }
3433     }
3434
3435     .navbar-nav {
3436         li {
3437             a {
3438                 line-height: 20px;
3439             }
3440         }
3441     }
3442 }
3443
3444 .loggedout {
3445     color: #004D99;
3446     font-weight: bold;
3447     padding: .4em .2em;
3448 }
3449
3450 .navbar-fixed-bottom {
3451     .navbar-inner {
3452         min-height: 0;
3453         padding: .4em 0;
3454     }
3455
3456     .nav > li {
3457         border-right: 1px solid #CCC;
3458
3459         > a {
3460             font-weight: normal;
3461         }
3462
3463         &:last-child {
3464             border-right: 0;
3465         }
3466
3467         &.navbar-text {
3468             line-height: normal;
3469             padding: .4em .7em;
3470         }
3471     }
3472 }
3473
3474 .tooltip {
3475     &.bottom {
3476         .tooltip-arrow {
3477             border-bottom-color: #EEE;
3478         }
3479
3480         .tooltip-inner {
3481             background-color: #FFFFFF;
3482             border: 1px solid rgba(0, 0, 0, .2);
3483             box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
3484             color: #000;
3485             font-size: 120%;
3486             padding: 1em;
3487         }
3488     }
3489 }
3490
3491 .separator {
3492     color: #666;
3493     padding: 0 .2em;
3494 }
3495
3496 .close {
3497     filter: none;
3498     float: none;
3499     font-size: inherit;
3500     font-weight: normal;
3501     line-height: 1.5;
3502     opacity: inherit;
3503     position: inherit;
3504     right: auto;
3505     text-shadow: none;
3506     top: auto;
3507
3508     &:hover {
3509         color: inherit;
3510         filter: inherit;
3511         font-size: inherit;
3512         opacity: inherit;
3513     }
3514 }
3515
3516
3517 label {
3518     .radio &,
3519     .checkbox & {
3520         margin-left: 20px;
3521         padding-left: 0;
3522     }
3523
3524     &.tip {
3525         display: block;
3526         margin: .5em 0;
3527     }
3528
3529     &.disabled {
3530         color: #CCC;
3531         cursor: not-allowed;
3532     }
3533 }
3534
3535 .radio {
3536     input {
3537         &[type="radio"] {
3538             margin-left: 0;
3539             position: relative;
3540         }
3541     }
3542 }
3543
3544 .checkbox {
3545     input {
3546         &[type="checkbox"] {
3547             margin-left: 0;
3548             position: relative;
3549         }
3550     }
3551 }
3552
3553 .modal-header {
3554     .closebtn {
3555         margin-top: 4px;
3556     }
3557 }
3558
3559 .closebtn {
3560     color: #000;
3561     filter: alpha(opacity = 20);
3562     float: right;
3563     font-size: 21px;
3564     font-weight: bold;
3565     line-height: 1;
3566     opacity: .2;
3567     text-shadow: 0 1px 0 #FFFFFF;
3568
3569     &:hover,
3570     &:focus {
3571         color: #000;
3572         cursor: pointer;
3573         filter: alpha(opacity = 50);
3574         opacity: .5;
3575         text-decoration: none;
3576     }
3577 }
3578
3579 .modal-body {
3580     background-color: #FFF;
3581     overflow-y: auto;
3582
3583     fieldset,
3584     ol {
3585         background-color: transparent;
3586         border: 0;
3587         margin: 0;
3588         padding: 0;
3589     }
3590 }
3591
3592 .modal-content {
3593     background-color: #EDF4F6;
3594 }
3595
3596 .btn-group {
3597     label,
3598     select {
3599         font-size: 13px;
3600     }
3601 }
3602
3603 .tooltip-inner {
3604     white-space: pre-wrap;
3605 }
3606
3607 pre {
3608     background-color: transparent;
3609     border: 0;
3610     border-radius: 0;
3611     color: inherit;
3612     display: block;
3613     font-size: inherit;
3614     line-height: inherit;
3615     margin: 0;
3616     padding: 0;
3617     word-break: break-all;
3618     word-wrap: break-word;
3619 }
3620
3621 code {
3622     background-color: transparent;
3623     border-radius: 0;
3624     color: inherit;
3625     font-size: inherit;
3626     padding: 0;
3627 }
3628
3629 .pagination > li > a,
3630 .pagination > li > span {
3631     font-weight: bold;
3632 }
3633
3634 .tab-content {
3635     background-color: #FFF;
3636     border: 1px solid #B9D8D9;
3637     border-top-width: 0;
3638     padding: 1em;
3639 }
3640
3641 .nav-tabs {
3642     > li {
3643         > a {
3644             background-color: #e6f0f2;
3645             border: 1px solid #b9d8d9;
3646             border-radius: 4px 4px 0 0;
3647             line-height: 1.42857143;
3648             margin-right: .4em;
3649             padding: .5em 1em;
3650
3651             &:hover {
3652                 background-color: #EEF4F5;
3653                 border-color: #b9d8d9;
3654             }
3655         }
3656
3657         &.active {
3658             a,
3659             a:hover,
3660             a:focus {
3661                 background-color: #fff;
3662                 border: 1px solid #b9d8d9;
3663                 border-bottom-color: transparent;
3664                 color: #000;
3665                 cursor: default;
3666                 font-weight: bold;
3667             }
3668         }
3669     }
3670 }
3671
3672 // End Bootstrap overrides
3673
3674 .waiting {
3675     cursor: wait;
3676 }
3677
3678 #jobpanel,
3679 #jobstatus,
3680 #jobfailed {
3681     display: none;
3682 }
3683
3684 #jobstatus {
3685     margin: .4em;
3686 }
3687
3688 #jobprogress {
3689     background: url("../img/progress.png") -300px 0 no-repeat;
3690     border: 1px solid #666;
3691     display: inline-block;
3692     height: 10px;
3693     width: 200px;
3694  }
3695
3696 .progress_panel {
3697     border: 2px solid #EEE;
3698     border-radius: 5px;
3699     clear: both;
3700     font-size: 120%;
3701     margin: 1em 0;
3702     padding: 1em;
3703 }
3704
3705 progress {
3706     width: 50%;
3707 }
3708
3709 #selections {
3710     white-space: normal;
3711     width: 100%;
3712
3713     input {
3714         margin: 0 2px;
3715         vertical-align: middle;
3716     }
3717
3718     span {
3719         background-color: #EBF3FF;
3720         border-radius: 5px;
3721         display: inline-block;
3722         font-size: 75%;
3723         margin: 3px;
3724         padding: 3px;
3725         white-space: nowrap;
3726
3727         &.selected {
3728             background-color: #CCE0FC;
3729         }
3730     }
3731 }
3732
3733 #changepasswordf {
3734     input {
3735         &[type="text"],
3736         &[type="password"] {
3737             font-family: $font-monospace;
3738             font-size: 140%;
3739             padding: .3em;
3740         }
3741     }
3742 }
3743
3744 // Class to be added to toolbar when it starts being fixed at the top of the screen
3745
3746 .floating {
3747     box-shadow: 0 3px 2px 0 rgba(0, 0, 0, .5);
3748     z-index: 100;
3749 }
3750
3751 .inline {
3752     display: inline;
3753 }
3754
3755 .nowrap {
3756     white-space: nowrap;
3757 }
3758
3759 .tag_editor {
3760     background: transparent url("../img/edit-tag.png") top left no-repeat;
3761     display: block;
3762     float: left;
3763     height: 16px;
3764     margin: 4px;
3765     overflow: hidden;
3766     text-indent: 100%;
3767     white-space: nowrap;
3768     width: 16px;
3769
3770     &.upload {
3771         background: transparent none;
3772         font-size: 90%;
3773         height: unset;
3774         overflow: unset;
3775         text-indent: unset;
3776         width: unset;
3777     }
3778 }
3779
3780 .browse-controls {
3781     margin-left: 1.1em;
3782     margin-right: .5em;
3783     padding-bottom: 1em;
3784     padding-top: 1em;
3785 }
3786
3787 #browse-return-to-results {
3788     background-color: #E8F0F6;
3789     border: 1px solid #B9D8D9;
3790     border-bottom-width: 0;
3791     border-top-left-radius: 5px;
3792     border-top-right-radius: 5px;
3793     display: block;
3794     padding: .5em;
3795     text-align: center;
3796 }
3797
3798 .browse-button {
3799     background-color: #FFF;
3800     border: 1px solid #B9D8D9;
3801     color: #004D99;
3802     display: block;
3803     overflow: hidden;
3804     padding: .4em .6em;
3805     text-align: center;
3806     white-space: nowrap;
3807     width: 100%;
3808
3809     &:hover {
3810         background: #FAFAFA;
3811     }
3812 }
3813
3814 span {
3815     &.browse-button {
3816         background: #FAFAFA;
3817         color: #222;
3818     }
3819
3820     &.circ-hlt {
3821         color: #CC0000;
3822         font-weight: bold;
3823     }
3824
3825     &.expired {
3826         color: #990000;
3827         font-style: italic;
3828     }
3829
3830     &.name {
3831         font-style: italic;
3832         font-weight: bold;
3833     }
3834
3835     &.required {
3836         color: #C00;
3837         font-style: italic;
3838         margin-left: .5em;
3839     }
3840
3841     &.important {
3842         color: #EAC117;
3843         font-style: italic;
3844         margin-left: .5em;
3845     }
3846
3847     &[class*=" label-"] {
3848         color: #FFF;
3849         display: inline;
3850         font-size: 75%;
3851         font-weight: normal;
3852         padding: .2em .6em .3em;
3853     }
3854 }
3855
3856
3857 .result-biblio-itemtype {
3858     float: right;
3859     font-size: 85%;
3860     margin: .5em;
3861     padding: .5em;
3862     text-align: center;
3863
3864     img {
3865         display: block;
3866         margin: auto;
3867         margin-bottom: 2px;
3868     }
3869 }
3870
3871 #browse-previous {
3872     border-bottom-width: 0;
3873 }
3874
3875 #browse-next {
3876     border-bottom-right-radius: 5px;
3877     border-bottom-left-radius: 5px;
3878 }
3879
3880 .loading-overlay {
3881     background-color: #FFFFFF;
3882     cursor: wait;
3883     height: 100%;
3884     left: 0;
3885     opacity: .7;
3886     position: fixed;
3887     top: 0;
3888     width: 100%;
3889     z-index: 1000;
3890
3891     div {
3892         background: transparent url("../img/loading.gif") top left no-repeat;
3893         font-size: 175%;
3894         font-weight: bold;
3895         height: 2em;
3896         left: 50%;
3897         margin: -1em 0 0 -2.5em;
3898         padding-left: 50px;
3899         position: absolute;
3900         top: 50%;
3901         width: 15em;
3902     }
3903 }
3904
3905 #merge_invoices {
3906     display: none;
3907     margin: 1em auto;
3908 }
3909
3910 #merge_table {
3911     tr {
3912         &.active {
3913             td {
3914                 background-color: #FFFFCC;
3915             }
3916         }
3917     }
3918 }
3919
3920 input.renew {
3921     margin-right: 1em;
3922 }
3923
3924 .renewals-info {
3925     display: block;
3926     font-size: .8em;
3927     padding: .5em;
3928 }
3929
3930 .date-select {
3931     label {
3932         display: inline-block;
3933         width: 40%;
3934     }
3935 }
3936
3937 #newonholdduedate {
3938     display: none;
3939 }
3940
3941 #transport-types {
3942     padding-top: .5px;
3943 }
3944
3945 #i18nMenu {
3946     .navbar-text {
3947         .currentlanguage {
3948             color: #000;
3949             font-weight: bold;
3950         }
3951     }
3952
3953     a {
3954         &.currentlanguage {
3955             &:link,
3956             &:visited {
3957                 font-weight: bold;
3958             }
3959         }
3960
3961         .sublanguage-selected {
3962             color: #000;
3963             font-weight: bold;
3964         }
3965     }
3966 }
3967
3968 .onsite_checkout-select {
3969     label,
3970     #circ_circulation_issue & {
3971         font-size: inherit;
3972         font-weight: normal;
3973     }
3974 }
3975
3976 .onsite_checkout {
3977     color: #CC0000;
3978 }
3979
3980 .onsite-checkout-only {
3981     background-color: rgba(255, 242, 206, .5);
3982     border: 1px solid #FFF2CE;
3983     border-radius: 4px;
3984 }
3985
3986 .branchgriditem {
3987     background-color: #FFFFFF;
3988     border: 1px solid #B9D8D9;
3989     border-radius: 3px;
3990     display: table-cell;
3991     float: left;
3992     margin: 3px;
3993     padding: .3em;
3994 }
3995
3996 .branchgridrow {
3997     display: table-row;
3998 }
3999
4000 .branchselector {
4001     display: table;
4002 }
4003
4004 .hq-author {
4005     font-weight: bold;
4006 }
4007
4008 #cn_browser_table_wrapper > #cn_browser_table {
4009     margin: auto;
4010     width: 90%;
4011 }
4012
4013 #new_rule {
4014     background-color: #F4F8F9;
4015     border: 2px solid #B9D8D9;
4016     border-radius: 5px;
4017     display: none;
4018     margin: .3em;
4019     padding: .3em;
4020 }
4021
4022
4023 .blocks {
4024     margin-bottom: .3em;
4025 }
4026
4027 .remove_rule {
4028     font-size: 80%;
4029     padding-left: .7em;
4030 }
4031
4032 .underline {
4033     text-decoration: underline;
4034 }
4035
4036 .overline {
4037     text-decoration: overline;
4038 }
4039
4040 .order-control {
4041     padding-right: 5px;
4042 }
4043
4044 #borrower_message {
4045     margin-top: 10px;
4046 }
4047
4048 .form-group {
4049     margin-bottom: 10px;
4050
4051     label {
4052         font-weight: bold;
4053     }
4054 }
4055
4056
4057 .form-message {
4058     background-color: #FFF;
4059     border: 1px solid #A4BEDD;
4060     border-radius: 5px;
4061     margin: 1em;
4062     padding: .5em;
4063 }
4064
4065 .modal-textarea {
4066     width: 98%;
4067 }
4068
4069 #pat_member {
4070     #patron_list_dialog {
4071         display: none;
4072     }
4073 }
4074
4075 #patron_search {
4076     #filters {
4077         display: none;
4078     }
4079
4080     .address {
4081         font-size: 100%;
4082     }
4083 }
4084
4085 #fixedlengthbuilderaction {
4086     border: 3px solid #E6F0F2;
4087     left: 80%;
4088     padding: 5px;
4089     position: relative;
4090     top: -80px;
4091     width: 12%;
4092 }
4093
4094 #interlibraryloans {
4095     #dataPreviewLabel {
4096         margin: .3em 0;
4097     }
4098
4099     .bg-info {
4100         overflow: auto;
4101         position: relative;
4102     }
4103
4104     .format {
4105         h4 {
4106             margin-bottom: 20px;
4107         }
4108
4109         h5 {
4110             margin-top: 20px;
4111         }
4112
4113         input {
4114             margin: 10px 0;
4115         }
4116
4117         li {
4118             list-style: none;
4119         }
4120     }
4121
4122     #add-new-fields {
4123         margin: 1em;
4124     }
4125
4126     #column-toggle,
4127     #reset-toggle {
4128         font-weight: 700;
4129         line-height: 1.5em;
4130         margin: 15px 0;
4131     }
4132
4133     #freeform-fields {
4134         .custom-name {
4135             margin-right: 1em;
4136             text-align: right;
4137             width: 9em;
4138         }
4139
4140         .delete-new-field {
4141             margin-left: 1em;
4142         }
4143     }
4144
4145     #search-summary {
4146         position: absolute;
4147         top: 50%;
4148         transform: translateY(-50%);
4149     }
4150
4151     #generic_confirm_search_count {
4152         margin: 1em 0 1em 10em;
4153     }
4154
4155     #generic_confirm_search {
4156         display: block;
4157         visibility: hidden;
4158         margin: 1em 0 1em 10em;
4159     }
4160
4161     #partnerSearch {
4162         .modal-dialog {
4163             width: 50vw;
4164         }
4165         .modal-body {
4166             max-height: 70vh;
4167         }
4168     }
4169 }
4170
4171 .ill-view-panel {
4172     margin-top: 15px;
4173
4174     .notesopac {
4175         display: inline-block;
4176     }
4177 }
4178
4179 #illfilter_dateplaced_start,
4180 #illfilter_datemodified_start,
4181 #illfilter_dateplaced_end,
4182 #illfilter_datemodified_end {
4183     width: 80%;
4184 }
4185
4186 #requestattributes {
4187     font-family: monospace;
4188     line-height: 1.3em;
4189 }
4190
4191 #ill-requests {
4192     width: 100% !important;
4193 }
4194
4195 .ar-title, .hq-title {
4196     .biblio-title {
4197         font-weight: bold;
4198     }
4199 }
4200
4201 #ill-issue-title {
4202     margin: 20px 0 30px 0;
4203 }
4204
4205 .ill_availability_sourcename {
4206     margin-top: 20px;
4207 }
4208
4209 #stockrotation {
4210     h3 {
4211         margin: 30px 0 10px 0;
4212     }
4213     .dialog {
4214         h3 {
4215             margin: 10px 0;
4216         }
4217         margin-bottom: 20px;
4218     }
4219     .highlight_stage {
4220         font-weight: bold;
4221     }
4222 }
4223
4224 #catalog_stockrotation .highlight_stage {
4225     font-weight: bold;
4226 }
4227
4228 #stockrotation {
4229     #rota_form {
4230         textarea {
4231             width: 300px;
4232             height: 100px;
4233         }
4234         #name {
4235             width: 300px;
4236         }
4237         fieldset {
4238             width: auto;
4239         }
4240     }
4241     #stage_form fieldset, #add_rota_item_form fieldset {
4242         width: auto;
4243     }
4244     .dialog.alert {
4245         ul {
4246             margin: 20px 0;
4247         }
4248         li {
4249             list-style-type: none;
4250         }
4251     }
4252 }
4253
4254 #catalog_stockrotation {
4255     .item_select_rota {
4256         vertical-align: middle;
4257     }
4258     h1 {
4259         margin-bottom: 20px;
4260     }
4261 }
4262
4263 #stockrotation td.actions, #catalog_stockrotation td.actions {
4264     vertical-align: middle;
4265 }
4266
4267 #stockrotation .stage, #catalog_stockrotation .stage {
4268     display: inline-block;
4269     padding: 5px 7px;
4270     margin: 3px 0 3px 0;
4271     border-radius: 5px;
4272     background-color: rgba(0, 0, 0, 0.1);
4273 }
4274
4275 #stage_list_headings {
4276     font-weight: bold;
4277     span {
4278         padding: 3px;
4279     }
4280 }
4281
4282 #manage_stages {
4283     ul {
4284         padding-left: 0;
4285     }
4286     li {
4287         list-style: none;
4288         margin-bottom: 5px;
4289         span {
4290             padding: 6px 3px;
4291         }
4292     }
4293     .stagename {
4294         width: 15em;
4295         display: inline-block;
4296     }
4297     .stageduration {
4298         width: 10em;
4299         display: inline-block;
4300     }
4301     .stageactions {
4302         display: inline-block;
4303     }
4304     li:nth-child(odd) {
4305         background-color: #F3F3F3;
4306     }
4307     .drag_handle {
4308         margin-right: 6px;
4309         cursor: move;
4310     }
4311     .drag_placeholder {
4312         height: 2em;
4313         border: 1px dotted #aaa;
4314     }
4315     h3 {
4316         display: inline-block;
4317     }
4318     #ajax_status {
4319         display: inline-block;
4320         border: 1px solid #bcbcbc;
4321         border-radius: 5px;
4322         padding: 5px;
4323         margin-left: 10px;
4324         background: #f3f3f3;
4325     }
4326     #manage_stages_help {
4327         margin: 20px 0;
4328     }
4329 }
4330
4331 #payForm {
4332     fieldset {
4333         &.rows {
4334             padding-left: 1em;
4335             padding-right: 2em;
4336         }
4337     }
4338 }
4339
4340 #helper {
4341     span {
4342         display: none;
4343     }
4344 }
4345
4346 #logged-in-info-full {
4347     display: none;
4348 }
4349
4350 .loggedin-menu-label {
4351     color: #777;
4352     font-size: 12px;
4353     line-height: 1.42857143;
4354     padding: 4px 12px;
4355     white-space: nowrap;
4356
4357     span {
4358         color: #000;
4359         font-weight: bold;
4360     }
4361
4362     &.divider {
4363         padding: 0;
4364     }
4365 }
4366
4367 .lastborrower {
4368     background-color: #E6F0F2;
4369     border: 1px solid #95C6D0;
4370     box-shadow: 1px 1px 1px 0 #999;
4371     color: #CC0000;
4372     margin: .4em 0;
4373     padding: .3em .5em .3em .5em;
4374 }
4375
4376 #lastborrower-ref {
4377     border-radius: 5px 0px 0px 5px;
4378     float: left;
4379 }
4380
4381 #lastborrower-remove {
4382     border-radius: 0px 5px 5px 0px;
4383     cursor: pointer;
4384     float: right;
4385 }
4386
4387 #lastborrower-window {
4388     display: none;
4389     position: absolute;
4390     right: 5px;
4391     top: 0px;
4392 }
4393
4394 /* ==== MODULE LINKS - Start ==== */
4395 .buttons-list {
4396     // List containing the module links
4397     margin-bottom: 30px;
4398     padding: 0;
4399
4400     li {
4401         // Standard attributes for the list elements
4402         list-style-type: none;
4403
4404         a {
4405             &.circ-button {
4406                 // Class used for each module link
4407                 background-color: #F4F8F9;
4408                 background-position: 5px 3px;
4409                 background-repeat: no-repeat;
4410                 border: 2px solid #B9D8D9;
4411                 border-radius: 6px;
4412                 box-sizing: content-box;
4413                 color: #000000;
4414                 display: block;
4415                 font-size: 110%;
4416                 font-weight: bold;
4417                 margin: .5em 0;
4418                 max-width: 260px;
4419                 padding: 8px;
4420                 text-decoration: none;
4421
4422                 &:hover {
4423                     // Class used for each module link hover state
4424                     border-color: #538200;
4425                     color: #538200;
4426                 }
4427             }
4428         }
4429     }
4430 }
4431
4432 .about h2 {
4433     border-bottom: 1px solid #B9D8D9;
4434     padding: .5em .2em;
4435     margin:  .5em 0;
4436 }
4437
4438 .columns-2 {
4439     columns: 2 auto;
4440     column-gap: 2.5em;
4441 }
4442
4443 .columns-3 {
4444     columns: 3 auto;
4445     column-gap: 2.5em;
4446 }
4447
4448 .columns-4 {
4449     columns: 4 auto;
4450     column-gap: 2em;
4451 }
4452
4453 // ==== MODULE LINKS - End ====
4454
4455 #catalog-search-link {
4456     border-right: 1px solid lighten( #E6F0F2, 15% );
4457     padding-right: .3em;
4458 }
4459
4460 #catalog-search-dropdown {
4461     padding: 0;
4462
4463     & > a {
4464         border-left: 1px solid darken( #B4D2D8, 5% );
4465         margin-right: .6em;
4466         padding: .4em .6em;
4467
4468         &:hover,
4469         &.catalog-search-dropdown-hover {
4470             background-color: darken( #E6F0F2, 5% );
4471             border-left: 1px solid darken( #B4D2D8, 15% );
4472         }
4473     }
4474 }
4475
4476 #tools_holidays {
4477     .radio,
4478     .checkbox {
4479         label {
4480             margin-left: 0;
4481         }
4482     }
4483 }
4484
4485 /* Permissions */
4486
4487 #permissionstree {
4488     display: inline-block;
4489
4490     label {
4491         cursor: pointer;
4492
4493         &:hover {
4494             color: #004d99;
4495         }
4496     }
4497 }
4498
4499 .main_permission {
4500     font-size: 110%;
4501     font-weight: bold;
4502 }
4503
4504 .permissioncode {
4505     color: #666;
4506     font-style: italic;
4507 }
4508
4509 .permission-highlight {
4510     background-color: #FFC !important;
4511 }
4512
4513 .togglechildren_on,
4514 .togglechildren_off {
4515     float: right;
4516 }
4517
4518 .togglechildren_off,
4519 .children {
4520     display: none;
4521 }
4522
4523 .open {
4524     .togglechildren_off {
4525         display: inline;
4526     }
4527
4528     .togglechildren_on {
4529         display: none;
4530     }
4531 }
4532
4533 .parent {
4534     border: 1px solid #DDD;
4535     border-bottom-width: 0;
4536     padding: 5px;
4537
4538     &:last-child {
4539         border-bottom-width: 1px;
4540     }
4541
4542     &:nth-child(odd) {
4543         background-color: #F8F8F8;
4544     }
4545 }
4546
4547
4548 .superlibrarian-hint {
4549     color: #000;
4550     padding: .2em 0;
4551     text-indent: 2em;
4552 }
4553
4554 .child-flags {
4555     background-color: #FFF;
4556     border: 1px solid #DDD;
4557     border-bottom-width: 0;
4558     margin: 0 5px 0 20px;
4559     padding: 5px;
4560
4561     &:first-child {
4562         margin-top: 10px;
4563     }
4564
4565     &:last-child {
4566         border-bottom-width: 1px;
4567     }
4568
4569     &:nth-child(odd) {
4570         background-color: #EEE;
4571     }
4572 }
4573
4574 .header-menu-link {
4575     display: none;
4576     font-weight: bold;
4577     padding: .4em .6em;
4578 }
4579
4580 #user-menu {
4581     position: absolute;
4582     right: 5px;
4583     top: 0;
4584 }
4585
4586 div#makechart ol li {
4587     list-style: none;
4588 }
4589
4590 div .suggestion_note {
4591     background: transparent none;
4592     border-style: dotted;
4593     border-width: 1px 0 0 0;
4594     font-size: 90%;
4595     padding: 2px 0 0 0;
4596
4597     i {
4598         color: #CCC;
4599     }
4600 }
4601
4602 .ac-library {
4603     background-color: #EEE !important;
4604     border-radius: 4px;
4605     color: #000;
4606     display: inline-block;
4607     font-size: 80%;
4608     padding: 1px 4px !important;
4609 }
4610
4611 .ac-currentlibrary {
4612     .ac-library {
4613         background-color: #E6FCB7 !important;
4614         font-weight: bold;
4615     }
4616 }
4617
4618 .currentlibrary {
4619     background-color: #E6FCB7;
4620     display: inline-block;
4621     padding: 2px 4px;
4622 }
4623
4624 .availability {
4625     .item_count {
4626         font-weight: bold;
4627         padding: 2px;
4628
4629         &::after {
4630             content: ")";
4631         }
4632
4633         &::before {
4634             content: "(";
4635         }
4636     }
4637
4638     .item_counts {
4639         font-weight: bold;
4640         white-space: nowrap;
4641     }
4642
4643     .results_available_count {
4644         font-weight: bold;
4645         margin-bottom: .5em;
4646     }
4647
4648     .results_checkedout {
4649         color: #900;
4650         margin: .3em 0;
4651     }
4652
4653     .results_unavailable {
4654         color: #555;
4655         font-style: italic;
4656         margin: .3em 0;
4657     }
4658
4659     .result_item_details {
4660         display:inline-block;
4661         white-space:nowrap
4662     }
4663 }
4664
4665 #camera, #output {
4666     border: 8px solid #EDF4F6;
4667     padding: 1em;
4668 }
4669
4670 #photo {
4671     display: block;
4672     margin: auto;
4673 }
4674
4675 #camera-error {
4676     display: none;
4677     flex-direction: row;
4678     flex-wrap: nowrap;
4679
4680     div {
4681         padding: 0 .5em;
4682     }
4683 }
4684
4685 @media (min-width: 200px) {
4686
4687 }
4688
4689 @media (max-width: 767px) {
4690     .header-menu-link {
4691         display: inline-block;
4692     }
4693
4694     #catalog-search-link {
4695         display: none;
4696         padding: 0;
4697     }
4698
4699     #cartmenulink {
4700         background: transparent none;
4701         padding-left: 1.5em;
4702     }
4703
4704     #changelanguage {
4705         li {
4706             float: left;
4707
4708             li {
4709                 float: none;
4710             }
4711         }
4712
4713         .open {
4714             .dropdown-menu {
4715                 background-color: #FFF;
4716                 border: 1px solid #ccc;
4717                 position: absolute;
4718             }
4719         }
4720     }
4721
4722     #header {
4723         background-color: #FFF;
4724         border: 1px solid #CCC;
4725         margin-bottom: 1em;
4726
4727         a {
4728             font-weight: normal;
4729             padding-left: 1.5em;
4730
4731             &:hover {
4732                 background-color: #0070A9;
4733                 color: #FFF;
4734             }
4735         }
4736
4737         ul {
4738             border: 0;
4739             box-shadow: unset;
4740             float: none;
4741             left: auto;
4742             position: relative;
4743             right: auto;
4744
4745             &.dropdown-menu {
4746                 display: block;
4747             }
4748         }
4749
4750         .dropdown-menu {
4751             li {
4752                 a {
4753                     color: #004D99;
4754
4755                     &:hover {
4756                         color: #FFF;
4757                     }
4758                 }
4759             }
4760         }
4761
4762         .dropdown-toggle {
4763             display: none;
4764         }
4765     }
4766
4767     .gradient {
4768         align-items: center;
4769         flex-direction: column;
4770     }
4771
4772     #logo {
4773         margin: 1rem;
4774     }
4775
4776     #marcPreview {
4777         margin: 0;
4778         width: auto;
4779     }
4780
4781     .navbar-fixed-bottom .nav > li {
4782         border-right: 0;
4783     }
4784
4785     #user-menu {
4786         .open {
4787             .dropdown-menu {
4788                 background-color: #FFF;
4789                 border: 1px solid #ccc;
4790                 position: absolute;
4791             }
4792         }
4793
4794         li {
4795             float: left;
4796
4797             li {
4798                 float: none;
4799             }
4800         }
4801     }
4802 }
4803
4804 @media (max-width: 768px) {
4805     .navbar-nav {
4806         li {
4807
4808             a {
4809                 padding: .4em .6em;
4810             }
4811         }
4812     }
4813 }
4814
4815 @media only screen and ( max-width: 768px ) {
4816     .browse-button {
4817         display: inline-block;
4818         width: 50%;
4819     }
4820
4821     #browse-previous {
4822         border-bottom-left-radius: 5px;
4823         border-bottom-width: 1px;
4824         border-right-width: 0;
4825     }
4826
4827     #browse-next {
4828         border-bottom-left-radius: 0;
4829         border-bottom-right-radius: 5px;
4830     }
4831 }
4832
4833 @media (min-width: 800px) {
4834
4835
4836
4837     #helper {
4838         i {
4839             display: none;
4840         }
4841
4842         span {
4843             display: inline;
4844         }
4845     }
4846
4847     #logged-in-info-full {
4848         display: inline;
4849     }
4850
4851     #logged-in-info-brief {
4852         display: none;
4853     }
4854
4855     .loggedin-menu-label {
4856         display: none;
4857     }
4858 }
4859
4860 @media only screen and ( min-width: 1200px ) {
4861     .browse-button {
4862         display: inline-block;
4863         width: 50%;
4864     }
4865
4866     #browse-previous {
4867         border-bottom-left-radius: 5px;
4868         border-bottom-width: 1px;
4869         border-right-width: 0;
4870     }
4871
4872     #browse-next {
4873         border-bottom-left-radius: 0;
4874         border-bottom-right-radius: 5px;
4875     }
4876 }
4877
4878 @media print {
4879     body.modalprinter * {
4880         visibility: hidden;
4881     }
4882
4883     body.modalprinter .modal-dialog.focused {
4884         position: absolute;
4885         padding: 0;
4886         margin: 0;
4887         left: 0;
4888         top: 0;
4889     }
4890
4891     body.modalprinter .modal-dialog.focused .modal-content {
4892         border-width: 0;
4893     }
4894
4895     body.modalprinter .modal-dialog.focused .modal-content .modal-header .modal-title,
4896     body.modalprinter .modal-dialog.focused .modal-content .modal-body,
4897     body.modalprinter .modal-dialog.focused .modal-content .modal-body * {
4898         visibility: visible;
4899     }
4900
4901     body.modalprinter .modal-dialog.focused .modal-content .modal-header,
4902     body.modalprinter .modal-dialog.focused .modal-content .modal-body {
4903         padding: 0;
4904     }
4905
4906     body.modalprinter .modal-dialog.focused .modal-content .modal-header .modal-title {
4907         margin-bottom: 20px;
4908     }
4909 }