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