koha-dev.rot13.org Git - srvgit/blob - koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss

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