koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss

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