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