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