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

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