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

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