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