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