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