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