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