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

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