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

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