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