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

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