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

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