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

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