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