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

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