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