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         text-align: center;
1384         border-right: 1px solid #B9D8D9;
1385         margin-bottom: 0;
1386         padding-bottom: .5em;
1387         padding-left: -.5em;
1388         padding-top: .5em;
1389
1390         &:empty {
1391             border-right: 0;
1392         }
1393     }
1394
1395     ul {
1396         border: 0;
1397         border-bottom: 0;
1398         border-right: 1px solid #B9D8D9;
1399         border-top: 0;
1400         margin: 0;
1401         padding: 0;
1402
1403         li {
1404             list-style-type: none;
1405             margin: 0;
1406         }
1407     }
1408
1409     + #menu {
1410         margin-right: 0;
1411     }
1412
1413     > div {
1414         border-right: 1px solid #B9D8D9;
1415         width: 100%;
1416     }
1417
1418     + .staffgrade {
1419         h5 {
1420             background-color: #EEE;
1421         }
1422     }
1423 }
1424
1425 .patroninfo-section {
1426     padding: .5em;
1427     margin: .5em;
1428
1429     .rows {
1430         padding: .5em;
1431     }
1432 }
1433
1434 .patroninfo-heading {
1435     background-color: rgba(237, 244, 246, .4);
1436     padding: .5em;
1437     margin-bottom: .3em;
1438     clear: both;
1439
1440     h3 {
1441         display: inline-block;
1442     }
1443
1444     .btn {
1445         float: right;
1446     }
1447 }
1448
1449 /* Patron image */
1450
1451 .patronimage-container {
1452     padding: .2em;
1453     position: relative;
1454
1455     &:hover {
1456         .patronimage {
1457             opacity: .8;
1458         }
1459
1460         .patronimage-controls {
1461             opacity: 1;
1462         }
1463     }
1464 }
1465
1466 .patronimage {
1467     border: 1px solid #EEE;
1468     display: block;
1469     max-width: 160px;
1470     margin: auto;
1471     opacity: 1;
1472     transition: .2s ease;
1473
1474     &.empty {
1475         background: transparent url( "../img/patron-blank.min.svg" ) center 5px no-repeat;
1476         height: 125px;
1477         padding: 0;
1478         width: 80%;
1479     }
1480 }
1481
1482 .patronimage-controls {
1483     left: 50%;
1484     opacity: 0;
1485     position: absolute;
1486     text-align: center;
1487     top: 80%;
1488     transform: translate( -50%, -50% );
1489     transition: .5s ease;
1490 }
1491
1492 .patronimage-control {
1493     padding: 1em 2em;
1494  }
1495
1496 #patronImageEdit input[type="file" ] {
1497     display: inline-block;
1498 }
1499
1500 .patronviews {
1501     border-right: 1px solid #000;
1502     border-top: 1px solid #000;
1503     margin-bottom: .5em;
1504     padding: .5em 0;
1505 }
1506
1507 .column-tool {
1508     font-size: 80%;
1509 }
1510
1511 .hint {
1512     color: #666;
1513     font-size: 95%;
1514 }
1515
1516 .dropdown-menu {
1517     li {
1518         list-style-type: none;
1519     }
1520 }
1521
1522 .btn-toolbar {
1523     fieldset {
1524         &.action {
1525             margin-top: 0;
1526         }
1527     }
1528
1529     .dropdown-menu {
1530         font-size: 13px;
1531     }
1532 }
1533
1534 .rows {
1535     .label {
1536         white-space: normal;
1537     }
1538 }
1539
1540 .readonly,
1541 input[type='text']:read-only {
1542     background: #EEE url("../img/locked.png") center left no-repeat;
1543     border-style: inset;
1544     border-width: 1px;
1545     cursor: default;
1546     padding-left: 15px;
1547 }
1548
1549 .readonly:focus,
1550 input[type='text']:read-only:focus {
1551     border-color: unset;
1552     border-radius: unset;
1553 }
1554
1555 .checkedout {
1556     color: #999999;
1557     font-style: italic;
1558 }
1559
1560 .subfield_not_filled {
1561     background-color: #FFFF99;
1562 }
1563
1564 .important_subfield_not_filled {
1565     background-color : #FFFFCC;
1566 }
1567
1568 .content_hidden {
1569     display: none;
1570     visibility: hidden; // you propably don't need to change this one
1571 }
1572
1573 // the property for the displayed tab
1574 .content_visible {
1575     display: block;
1576     visibility: visible; // you propably don't need to change this one
1577 }
1578
1579 #z3950searcht {
1580     table {
1581         border: 0;
1582         padding: 20px;
1583     }
1584 }
1585
1586 #z3950_search_targets {
1587     height: 338px;
1588     overflow-y: auto;
1589 }
1590
1591 #z3950_search_targets_acq {
1592     height: 308px;
1593     overflow-y: auto;
1594 }
1595
1596 .z3950checks {
1597     padding-left: 1em;
1598 }
1599
1600 .error {
1601     color: #CC0000;
1602 }
1603
1604 .status_ok {
1605     background-color: #90EE90;
1606 }
1607
1608 .status_warn {
1609     background-color: #FF0000;
1610 }
1611
1612 // Font Awesome icons
1613 i {
1614     &.error {
1615         color: #CC0000;
1616     }
1617
1618     &.success {
1619         color: #008000;
1620     }
1621
1622     &.warn {
1623         color: #FFA500;
1624     }
1625 }
1626
1627 .circ-setting {
1628     font-size: 85%;
1629     padding-top: .3em;
1630
1631     input {
1632         vertical-align: middle;
1633     }
1634
1635     label {
1636         font-size: inherit;
1637         font-weight: normal;
1638     }
1639 }
1640
1641 .circ-settings {
1642     background-color: #F4F8F9;
1643     border-radius: 0;
1644     border-top: 2px solid #B9D8D9;
1645     display: none;
1646     margin-left: -1em;
1647     margin-right: -1em;
1648     margin-top: 1em;
1649     padding: 1em 1em 0;
1650 }
1651
1652 #show-circ-settings {
1653     margin-top: .5em;
1654 }
1655
1656 .checkin-active-setting {
1657     background-color: #FFC;
1658     border-radius: 3px;
1659     box-shadow: 1px 1px 2px 0 rgba(102, 102, 102, .5);
1660     margin: .5em;
1661     padding: .5em;
1662 }
1663
1664 .form-control-group {
1665     white-space: nowrap;
1666 }
1667
1668
1669 .blocker {
1670     color: #990000;
1671 }
1672
1673 .inaccurate-item-statuses {
1674     color: #990000;
1675 }
1676
1677 .circmessage {
1678     li {
1679         list-style: url("../img/arrow-bullet.gif");
1680         margin-bottom: .2em;
1681     }
1682 }
1683
1684 #circ_needsconfirmation {
1685     margin: auto;
1686 }
1687
1688 .dialog {
1689     border: 1px solid #BCBCBC;
1690     border-radius: 2px;
1691     margin: 1em auto;
1692     padding: .5em;
1693     text-align: center;
1694     width: 65%;
1695
1696     a {
1697         &.approve {
1698             display: inline-block;
1699         }
1700     }
1701
1702     button,
1703     a.approve {
1704         background: #FFF none;
1705         border: 1px outset #999999;
1706         border-left-color: #666;
1707         border-top-color: #666;
1708         margin: .4em;
1709         padding: .4em;
1710         white-space: pre-line;
1711
1712         &:active {
1713             border: 1px inset #999999;
1714         }
1715
1716         &:hover {
1717             background-color: #FFC;
1718         }
1719     }
1720
1721     h2,
1722     h3,
1723     h4 {
1724         margin: auto;
1725         text-align: center;
1726     }
1727
1728     input {
1729         background-color: #FFFFFF;
1730         border: 1px solid #BCBCBC;
1731         margin: .4em;
1732         padding: .4em .4em .4em 25px;
1733
1734         &:hover {
1735             background-color: #FFC;
1736         }
1737
1738         &[type="submit"] {
1739             background: #FFF none;
1740         }
1741     }
1742
1743     li {
1744         list-style-position: inside;
1745     }
1746
1747     table {
1748         margin: .5em auto;
1749
1750         td {
1751             text-align: left;
1752         }
1753
1754         th {
1755             text-align: right;
1756         }
1757     }
1758 }
1759
1760 .alert {
1761     background: linear-gradient(to bottom, #FEF8D3 0%, #FFEC91 9%, #FFED87 89%, #F9DC00 100%);
1762     border: 1px solid #E0C726;
1763     color: inherit;
1764     text-align: center;
1765     text-shadow: none;
1766
1767     strong {
1768         color: #900;
1769     }
1770
1771     // Redefine a new style for Bootstrap's class "close" since we use that already
1772     // Use <a class="closebtn" href="#">&times;</a>
1773     .closebtn {
1774         line-height: 20px;
1775         position: relative;
1776         right: -21px;
1777         top: -2px;
1778     }
1779 }
1780
1781 .approve,
1782 .success {
1783     i {
1784         &.fa {
1785             color: #008000;
1786         }
1787     }
1788 }
1789
1790 .deny {
1791     i {
1792         &.fa {
1793             color: #CC0000;
1794         }
1795     }
1796 }
1797
1798 .new {
1799     i {
1800         &.fa {
1801             color: #425FAF;
1802         }
1803     }
1804 }
1805
1806 .warning {
1807     i {
1808         &.fa-exclamation-triangle {
1809             color: #FFD700;
1810             text-shadow: 0 -1px 0 rgba( 0, 0, 0, .3);
1811         }
1812     }
1813 }
1814
1815 .accesskey {
1816     text-decoration: underline;
1817 }
1818
1819 .missing {
1820     background-color: #FFFFCC;
1821 }
1822
1823 .term {
1824     background-color: #FFC;
1825     color: #990000;
1826 }
1827
1828 // style for shelving location in catalogsearch
1829 .shelvingloc {
1830     font-style: italic;
1831 }
1832
1833 #menu {
1834     border-right: 1px solid #B9D8D9;
1835     margin-right: .5em;
1836     padding-bottom: 2em;
1837     padding-top: 1em;
1838
1839     li {
1840         a {
1841             background: linear-gradient(to bottom, #E8F0F6 0%, #E8F0F6 96%, #C1C1C1 100%);
1842             border: 1px solid #B9D8D9;
1843             border-bottom-left-radius: 5px;
1844             border-top-left-radius: 5px;
1845             display: block;
1846             font-size: 111%;
1847             margin: .5em 0;
1848             margin-right: -1px;
1849             padding: .4em .3em;
1850             text-decoration: none;
1851
1852             &:hover {
1853                 background: linear-gradient(to bottom, #FAFAFA 0%, #FFFFFF 96%, #E6E6E6 97%, #CCCCCC 99%, #C1C1C1 100%);
1854                 border-bottom: 1px solid #85CA11;
1855                 border-left: 1px solid #85CA11;
1856                 border-top: 1px solid #85CA11;
1857             }
1858         }
1859
1860         &.active {
1861             a {
1862                 background-color: #FFFFFF;
1863                 background-image: none;
1864                 border-bottom: 1px solid #85CA11;
1865                 border-left: 1px solid #85CA11;
1866                 border-right: 0;
1867                 border-top: 1px solid #85CA11;
1868                 color: #000000;
1869                 font-weight: bold;
1870
1871                 &:hover {
1872                     background-color: #FFFFFF;
1873                     color: #538200;
1874                 }
1875             }
1876         }
1877     }
1878
1879     ul {
1880         li {
1881             list-style-type: none;
1882         }
1883     }
1884 }
1885
1886
1887 #logo {
1888     background: transparent url("../img/koha-logo-medium.png") no-repeat scroll 0%;
1889     margin: .75em .3em .75em .7em;
1890
1891     a {
1892         border: 0;
1893         cursor: pointer;
1894         display: block;
1895         height: 0 !important;
1896         margin: 0;
1897         overflow: hidden;
1898         padding: 44px 0 0;
1899         text-decoration: none;
1900         width: 180px;
1901     }
1902 }
1903
1904 #closewindow {
1905     margin-top: 2em;
1906     text-align: center;
1907
1908     a {
1909         font-weight: bold;
1910     }
1911 }
1912
1913 .barcode {
1914     font-size: 200%;
1915     vertical-align: middle;
1916 }
1917
1918 li {
1919     &.email {
1920         overflow: hidden;
1921         text-overflow: ellipsis;
1922         white-space: nowrap;
1923     }
1924 }
1925
1926 .patronbriefinfo {
1927     li {
1928         &.email {
1929             font-size: 87%;
1930             padding: 0 10px 0 0;
1931             width: 90%;
1932         }
1933     }
1934 }
1935
1936 .empty {
1937     color: #CCC;
1938 }
1939
1940 .address {
1941     font-size: 110%;
1942
1943     li {
1944         list-style-type: none;
1945     }
1946 }
1947
1948 .title {
1949     font-weight: bold;
1950 }
1951
1952 .hold {
1953     float: right;
1954     font-size: 90%;
1955     margin: 0;
1956 }
1957
1958 .thumbnail {
1959     display: block;
1960     margin: auto;
1961 }
1962
1963 .thumbnails {
1964     li {
1965         display: inline-block;
1966         list-style-type: none;
1967         margin: 4px;
1968     }
1969
1970     .remove {
1971         border-top: 1px solid #EEE;
1972         display: block;
1973         font-size: 90%;
1974         margin: 4px -4px 2px -4px;
1975         padding-top: .5em;
1976         text-align: center;
1977     }
1978
1979     & + p {
1980         border-top: 1px solid #eee;
1981         margin-top: 1em;
1982         padding-top: 1em;
1983     }
1984 }
1985
1986 #searchresults {
1987     ul {
1988         li {
1989             clear: left;
1990             font-size: 90%;
1991             list-style: url("../img/item-bullet.gif");
1992             padding: .2em 0;
1993
1994             img {
1995                 float: left;
1996                 margin: 3px 5px 3px -5px;
1997             }
1998         }
1999     }
2000
2001     span {
2002         &.status {
2003             clear: left;
2004             color: #900;
2005             display: block;
2006         }
2007
2008         &.unavailable {
2009             clear: left;
2010             display: block;
2011         }
2012     }
2013
2014     table {
2015         td {
2016             vertical-align: top;
2017         }
2018     }
2019
2020     &.unavailability {
2021         strong {
2022             display: block;
2023         }
2024     }
2025 }
2026
2027 #searchresults {
2028     .address {
2029         ul {
2030             margin: 0;
2031             padding-left: 0;
2032             li {
2033                 clear: none;
2034                 float: left;
2035                 list-style: none;
2036                 margin-left: 1ch;
2037                 padding: 0;
2038             }
2039         }
2040     }
2041 }
2042
2043 #searchheader {
2044     background-color: #E6F0F2;
2045     border: 1px solid #B9D8D9;
2046     border-radius: 5px 5px 0 0;
2047     font-size: 80%;
2048     margin: 0 0 .5em -1px;
2049     padding: .4em 0 .4em 1em;
2050
2051     &.floating {
2052         border-radius: 0;
2053         margin-top: 0;
2054     }
2055
2056     .btn-group {
2057         > .btn {
2058             &:first-child {
2059                 margin-left: .7em;
2060             }
2061         }
2062     }
2063
2064     form {
2065         float: right;
2066         padding: 5px 5px 3px 0;
2067
2068         &.fz3950 {
2069             float: right;
2070             font-size: 125%;
2071             padding: 0 0 0 5em;
2072         }
2073
2074         &.fz3950bigrpad {
2075             float: right;
2076             font-size: 125%;
2077             padding: 5px 25em 0 0;
2078         }
2079     }
2080 }
2081
2082 #search-facets {
2083     border: 1px solid #B9D8D9;
2084     border-radius: 5px 5px 0 0;
2085
2086     h4 {
2087         background-color: #E6F0F2;
2088         border-bottom: 1px solid #B9D8D9;
2089         border-radius: 5px 5px 0 0;
2090         font-size: 90%;
2091         margin: 0;
2092         padding: .4em .2em;
2093         text-align: center;
2094     }
2095
2096     ul {
2097         margin: 0;
2098         padding: .3em;
2099
2100         li {
2101             font-weight: bold;
2102             list-style-type: none;
2103         }
2104     }
2105
2106     li {
2107         li {
2108             font-size: 85%;
2109             font-weight: normal;
2110             margin-bottom: 2px;
2111             padding: .1em .2em;
2112         }
2113
2114         &.showmore {
2115             font-weight: bold;
2116             text-indent: 1em;
2117         }
2118     }
2119 }
2120
2121 .facet-count {
2122     display: inline-block;
2123 }
2124
2125 .bookcoverimg {
2126     text-align: center;
2127 }
2128
2129 .custom_cover_image {
2130     img {
2131         max-width: 140px;
2132     }
2133 }
2134
2135 #biblio-cover-slider {
2136     border: 1px solid #b9d8d9;
2137     border-radius: 3px;
2138     margin: 5px;
2139     padding: 10px 5px 5px 5px;
2140     min-height: 175px;
2141 }
2142
2143 .cover-slides {
2144     background: #FFF url("[% interface | html %]/[% theme | html %]/img/spinner-small.gif") center center no-repeat;
2145
2146     .hint {
2147         font-size: 90%;
2148         padding: .5em 0;
2149     }
2150
2151     a {
2152         &.nav-active {
2153             &:link,
2154             &:visited {
2155                 color: #85ca11;
2156             }
2157         }
2158     }
2159 }
2160
2161 .cover-image {
2162     display: none;
2163
2164     img {
2165         height: auto;
2166         max-width: 100%;
2167     }
2168 }
2169
2170 .cover-nav {
2171     display: inline-block;
2172     padding: 3px 4px;
2173 }
2174
2175 .searchhighlightblob {
2176     font-size: 75%;
2177     font-style: italic;
2178 }
2179
2180 #irregularity_summary {
2181     vertical-align: top;
2182 }
2183
2184 #CheckAll,
2185 #CheckNone,
2186 #CheckPending {
2187     font-weight: normal;
2188     margin: 0 .5em 0 0;
2189 }
2190
2191 .lost,
2192 .dmg,
2193 .wdn {
2194     color: #990000;
2195     display: block;
2196 }
2197
2198 .datedue {
2199     color: #999;
2200     display: block;
2201     font-style: italic;
2202 }
2203
2204 .waitinghere,
2205 .credit {
2206     color: #669900;
2207 }
2208
2209 #mainuserblock {
2210     border: 1px solid #E8E8E8;
2211     margin-top: .5em;
2212     padding: .5em;
2213 }
2214
2215 .labeledmarc-table {
2216     border: 0;
2217 }
2218
2219 .labeledmarc-label {
2220     border: 0;
2221     color: #000000;
2222     font-size: 11pt;
2223     font-style: italic;
2224     padding: 5;
2225 }
2226
2227 .labeledmarc-value {
2228     border: 0;
2229     color: #000;
2230     font-size: 10pt;
2231     padding: 5;
2232 }
2233
2234 #marcPreview {
2235     table {
2236         border: 0;
2237         font-family: $font-monospace;
2238         font-size: 95%;
2239         margin: .7em 0 0;
2240     }
2241
2242     tbody {
2243         tr {
2244             &:nth-child(2n+1) {
2245                 td {
2246                     background-color: #FFFFFF;
2247                 }
2248             }
2249         }
2250     }
2251
2252     td {
2253         border: 0;
2254         padding: 2px;
2255         vertical-align: top;
2256     }
2257
2258     th {
2259         background-color: #FFFFFF;
2260         border: 0;
2261         padding: 2px;
2262         text-align: left;
2263         vertical-align: top;
2264         white-space: nowrap;
2265     }
2266
2267     &.modal-dialog {
2268         width: 80%;
2269     }
2270 }
2271
2272 .modal-dialog {
2273     .dialog {
2274         border-radius: 0;
2275         border-width: 1px 0 0 0;
2276         margin: 15px -15px -15px -15px;
2277         padding: 15px;
2278         text-align: left;
2279         width: unset;
2280
2281         h3 {
2282             margin: unset;
2283             text-align: left;
2284         }
2285
2286         &.alert {
2287             background: #FFFADE none;
2288             border-color: #E0C726;
2289
2290             .problem {
2291                 background-color: transparent;
2292             }
2293         }
2294
2295         &.message {
2296             background: #E8EDF6 none;
2297             border-color: #A4BEDD;
2298
2299             .problem {
2300                 background-color: transparent;
2301             }
2302         }
2303     }
2304
2305     &.modal-wide {
2306         width: 80%;
2307     }
2308 }
2309
2310 #cartDetails {
2311     background-color: #FFFFFF;
2312     border: 1px solid #739ACF;
2313     box-shadow: 1px 1px 3px 0 #666;
2314     color: #000;
2315     display: none;
2316     margin: 0;
2317     padding: 10px;
2318     text-align: center;
2319     width: 180px;
2320     z-index: 50;
2321 }
2322
2323 #cartmenulink {
2324     padding-left: 15px;
2325
2326     i.fa.fa-shopping-cart {
2327         padding-right: 7px;
2328     }
2329 }
2330
2331 #basketcount {
2332     span {
2333         display: inline;
2334         font-size: 90%;
2335         font-weight: normal;
2336         padding: 0;
2337     }
2338 }
2339
2340 #moremenu {
2341     display: none;
2342 }
2343
2344 .results_summary {
2345     color: #707070;
2346     display: block;
2347     font-size: 85%;
2348     padding: 0 0 .5em;
2349
2350     a {
2351         font-weight: normal;
2352     }
2353
2354     .label {
2355         color: #202020;
2356     }
2357 }
2358
2359 .child_fund_amount {
2360     font-style: italic;
2361 }
2362
2363 .number_box {
2364     font-size: 105%;
2365     line-height: 200%;
2366
2367     a,
2368     span {
2369         background-color: #E4ECF5;
2370         border: 1px solid #A4BEDD;
2371         border-radius: 4px;
2372         font-weight: bold;
2373         padding: .1em .4em;
2374         text-decoration: none;
2375
2376         &:hover {
2377             background-color: #EBEFF7;
2378         }
2379     }
2380 }
2381
2382 .container {
2383     border: 1px solid #EEE;
2384     margin: 1em 0;
2385     padding: 1em;
2386 }
2387
2388 .import_export {
2389     position: relative;
2390
2391     .export_ok {
2392         background: #E3E3E3 none;
2393         border: 0;
2394         cursor: pointer;
2395         margin-left: 20px;
2396         padding: 10px;
2397     }
2398
2399     .import_export_options {
2400         background: #FFFFFF;
2401         border: 1px solid #CDCDCD;
2402         left: 60px;
2403         padding: 10px;
2404         position: absolute;
2405         top: 0;
2406         width: 300px;
2407         z-index: 1;
2408     }
2409 }
2410
2411 .import_export_options {
2412     background: #E3E3E3 none;
2413     border: 0;
2414     cursor: pointer;
2415     margin-left: 20px;
2416     padding: 10px;
2417
2418     fieldset {
2419         &.rows {
2420             li {
2421                 label {
2422                     width: 16em;
2423                 }
2424             }
2425         }
2426     }
2427
2428     .importing {
2429         background: none;
2430         padding: inherit;
2431     }
2432 }
2433
2434 .form_import {
2435     fieldset {
2436         &.rows {
2437             li {
2438                 label {
2439                     width: auto;
2440                 }
2441             }
2442         }
2443     }
2444
2445     .input_import {
2446         border: 1px solid #BCBCBC;
2447     }
2448 }
2449
2450 .importing {
2451     position: relative;
2452
2453     .importing_msg {
2454         padding-bottom: 10px;
2455         padding-left: 10px;
2456     }
2457 }
2458
2459
2460 .field_hint {
2461     color: #808080;
2462     font-style: italic;
2463     padding-left: 1em;
2464 }
2465
2466 .m880 {
2467     display: block;
2468     float: right;
2469     padding-left: 20px;
2470     text-align: right;
2471     width: 50%;
2472 }
2473
2474 .advsearch {
2475     margin: 0;
2476
2477     table {
2478         border-collapse: separate;
2479         border-spacing: 5px;
2480         border-width: 0;
2481     }
2482
2483     td {
2484         border: 1px solid #EEE;
2485         padding: .3em .4em;
2486     }
2487 }
2488
2489 #circ_circulation_issue {
2490     position: relative;
2491 }
2492
2493 #clearscreen {
2494     position: absolute;
2495     right: 0;
2496     top: 0;
2497
2498     a {
2499         background-color: #EEE;
2500         border-radius: 0 0 0 5px;
2501         color: #CCC;
2502         display: block;
2503         font-size: 160%;
2504         font-weight: bold;
2505         padding: 0 .7em .2em;
2506         text-decoration: none;
2507         text-shadow: 0 -1px 0 #666;
2508
2509         &:hover {
2510             color: #CC0000;
2511         }
2512     }
2513 }
2514
2515 #printclearscreen {
2516     position: absolute;
2517     right: 43px;
2518     top: 0;
2519
2520     a {
2521         background-color: #EEE;
2522         border-radius: 0 0 0 5px;
2523         color: #CCC;
2524         display: block;
2525         font-size: 160%;
2526         font-weight: bold;
2527         padding: 0 .7em .2em;
2528         text-decoration: none;
2529         text-shadow: 0 -1px 0 #666;
2530
2531         &:hover {
2532             color: #CC0000;
2533         }
2534     }
2535 }
2536
2537 .no-image {
2538     background-color: #FFFFFF;
2539     border: 1px solid #AAAAAA;
2540     border-radius: 3px;
2541     color: #979797;
2542     display: block;
2543     font-size: 86%;
2544     font-weight: bold;
2545     text-align: center;
2546     width: 75px;
2547 }
2548
2549 #acqui_order_supplierlist {
2550     > div {
2551         &.supplier {
2552             border: 1px solid #EEEEEE;
2553             margin: .5em;
2554             padding: 1em;
2555         }
2556
2557         > div {
2558             > .baskets {
2559                 margin-top: .5em;
2560             }
2561         }
2562
2563         > span {
2564             &.action {
2565                 margin-left: 5em;
2566             }
2567
2568             &.suppliername {
2569                 display: inline;
2570                 font-size: 1.7em;
2571                 margin-bottom: .5em;
2572             }
2573         }
2574     }
2575 }
2576
2577 #ADD-contact {
2578     margin: 0 0 8px 8px;
2579 }
2580
2581 #contact-template {
2582     display: none;
2583 }
2584
2585 // Override core jQueryUI widgets
2586 .ui-widget-content {
2587     background: #FFFFFF none;
2588     border: 1px solid #B9D8D9;
2589     color: #222222;
2590 }
2591
2592 .ui-widget-header {
2593     background: #E6F0F2 none;
2594     border: 1px solid #B9D8D9;
2595     color: #222222;
2596     font-weight: bold;
2597 }
2598
2599 .ui-state-default,
2600 .ui-widget-content .ui-state-default,
2601 .ui-widget-header .ui-state-default {
2602     background: #F4F8F9 none;
2603     border: 1px solid #B9D8D9;
2604     color: #555555;
2605     font-weight: normal;
2606 }
2607
2608 .ui-state-hover,
2609 .ui-widget-content .ui-state-hover,
2610 .ui-widget-header .ui-state-hover,
2611 .ui-state-focus,
2612 .ui-widget-content .ui-state-focus,
2613 .ui-widget-header .ui-state-focus {
2614     background: #E6F0F2 none;
2615     border: 1px solid #B9D8D9;
2616     color: #212121;
2617     font-weight: normal;
2618 }
2619
2620 .ui-state-active,
2621 .ui-widget-content .ui-state-active,
2622 .ui-widget-header .ui-state-active {
2623     background: #FFFFFF none;
2624     border: 1px solid #AAAAAA;
2625     color: #212121;
2626     font-weight: normal;
2627 }
2628
2629 .ui-state-highlight,
2630 .ui-widget-content .ui-state-highlight,
2631 .ui-widget-header .ui-state-highlight {
2632     background: #FFF4C6;
2633     border: 1px solid #FED22F;
2634     color: #363636;
2635 }
2636
2637 .ui-state-error,
2638 .ui-widget-content .ui-state-error,
2639 .ui-widget-header .ui-state-error {
2640     background: #FEF1EC;
2641     border: 1px solid #CD0A0A;
2642     color: #CD0A0A;
2643 }
2644
2645 // Override jQuery Autocomplete
2646 .ui-autocomplete {
2647     box-shadow: 2px 2px 2px rgba(0, 0, 0, .3);
2648     cursor: default;
2649     position: absolute;
2650
2651     &.ui-widget-content {
2652         .ui-state-hover {
2653             background: #E6F0F2 none;
2654             border: 1px solid #B9D8D9;
2655             color: #212121;
2656             font-weight: normal;
2657         }
2658     }
2659 }
2660
2661 .ui-autocomplete-loading {
2662     background: #FFF url("../img/spinner-small.gif") right center no-repeat;
2663 }
2664
2665 // jQuery UI standard tabs
2666 .ui-menu {
2667     li {
2668         list-style: none;
2669     }
2670 }
2671
2672 .ui-tabs-nav {
2673     .ui-tabs-active a,
2674     a:hover,
2675     a:focus,
2676     a:active,
2677     span.a {
2678         background: none repeat scroll 0 0 transparent;
2679         outline: 0 none;
2680     }
2681
2682     &.ui-widget-header {
2683         background: none;
2684         border: 0;
2685     }
2686 }
2687
2688 .ui-tabs {
2689     .ui-tabs-nav {
2690         li {
2691             background: #E6F0F2 none;
2692             border: 1px solid #B9D8D9;
2693             margin-right: .4em;
2694             top: 1px;
2695
2696             &.ui-tabs-active {
2697                 background-color: #FFFFFF;
2698                 border: 1px solid #B9D8D9;
2699                 border-bottom-width: 0;
2700
2701                 a {
2702                     color: #000;
2703                     font-weight: bold;
2704                 }
2705
2706                 &.ui-state-hover {
2707                     background: #FFF none;
2708                 }
2709             }
2710
2711             &.ui-state-default {
2712                 &.ui-state-hover {
2713                     background: #EDF4F5 none;
2714                 }
2715             }
2716         }
2717     }
2718
2719     .ui-tabs-panel {
2720         border: 1px solid #B9D8D9;
2721     }
2722
2723     &.ui-widget-content {
2724         background: transparent none;
2725         border: 0;
2726     }
2727
2728     .ui-state-default {
2729         a {
2730             color: #004D99;
2731
2732             &:link,
2733             &:visited {
2734                 color: #004D99;
2735             }
2736         }
2737     }
2738
2739     .ui-state-hover {
2740         a {
2741             color: #538200;
2742
2743             &:link,
2744             &:visited {
2745                 color: #538200;
2746             }
2747         }
2748     }
2749
2750 }
2751
2752 .ui-widget {
2753     font-family: inherit;
2754     font-size: inherit;
2755
2756     input,
2757     select,
2758     textarea,
2759     button {
2760         font-family: inherit;
2761         font-size: inherit;
2762     }
2763 }
2764
2765 .statictabs {
2766     > ul {
2767         background: none repeat scroll 0 0 transparent;
2768         border: 0 none;
2769         border-bottom-left-radius: 4px;
2770         border-bottom-right-radius: 4px;
2771         border-top-left-radius: 4px;
2772         border-top-right-radius: 4px;
2773         color: #222222;
2774         font-size: 100%;
2775         font-weight: bold;
2776         line-height: 1.3;
2777         list-style: none outside none;
2778         margin: 0;
2779         outline: 0 none;
2780         padding: .2em .2em 0;
2781         text-decoration: none;
2782
2783         &::after {
2784             clear: both;
2785         }
2786
2787         &::before,
2788         &::after {
2789             content: "";
2790             display: table;
2791         }
2792
2793         li {
2794             background: none repeat scroll 0 0 #E6F0F2;
2795             border: 1px solid #B9D8D9;
2796             border-bottom: 0 none;
2797             border-top-left-radius: 4px;
2798             border-top-right-radius: 4px;
2799             color: #555555;
2800             float: left;
2801             font-weight: normal;
2802             list-style: none outside none;
2803             margin-bottom: 0;
2804             margin-right: .4em;
2805             padding: 0;
2806             position: relative;
2807             top: 1px;
2808             white-space: nowrap;
2809
2810             &.active {
2811                 background-color: #FFFFFF;
2812                 color: #212121;
2813                 font-weight: normal;
2814                 padding-bottom: 1px;
2815
2816                 a {
2817                     background: none repeat scroll 0 0 transparent;
2818                     color: #000000;
2819                     cursor: text;
2820                     font-weight: bold;
2821                     outline: 0 none;
2822                     top: 1px;
2823                 }
2824             }
2825
2826             a {
2827                 color: #004D99;
2828                 cursor: pointer;
2829                 float: left;
2830                 padding: .5em 1em;
2831                 text-decoration: none;
2832
2833                 &:hover {
2834                     background-color: #EDF4F5;
2835                     border-top-left-radius: 4px;
2836                     border-top-right-radius: 4px;
2837                     color: #538200;
2838                 }
2839             }
2840         }
2841     }
2842
2843     .tabs-container {
2844         background: none repeat scroll 0 0 transparent;
2845         border: 1px solid #B9D8D9;
2846         border-bottom-left-radius: 4px;
2847         border-bottom-right-radius: 4px;
2848         color: #222222;
2849         display: block;
2850         padding: 1em 1.4em;
2851     }
2852 }
2853
2854 .toptabs {
2855         .ui-tabs-panel {
2856             background: #FFF none;
2857         }
2858 }
2859
2860 .authref {
2861     font-style: normal;
2862     text-indent: 4em;
2863 }
2864
2865 .seefrom,
2866 .seealso {
2867     font-style: italic;
2868     text-indent: 2em;
2869 }
2870
2871 #authfinderops {
2872     float: right;
2873 }
2874
2875 .authorizedheading {
2876     font-weight: bold;
2877 }
2878
2879 .authres_notes,
2880 .authres_seealso,
2881 .authres_otherscript {
2882     padding-top: 3px;
2883 }
2884
2885 .authres_notes {
2886     font-style: italic;
2887 }
2888
2889
2890 .contents {
2891     width: 75%;
2892
2893     .newline::after {
2894         content: "\A → ";
2895         white-space: pre;
2896     }
2897
2898     .t {
2899         font-weight: bold;
2900         display: inline;
2901     }
2902
2903     .r {
2904         display: inline;
2905     }
2906 }
2907
2908
2909 .contentblock {
2910     font-size: 95%;
2911     line-height: 135%;
2912     margin-left: 2em;
2913     position: relative;
2914
2915     :first-child::before {
2916         content: "→ ";
2917     }
2918 }
2919
2920 #hierarchies {
2921     a {
2922         color: #069;
2923         font-weight: normal;
2924         text-decoration: underline;
2925
2926         &:hover {
2927             color: #990033;
2928         }
2929     }
2930 }
2931
2932 #didyoumeanopac,
2933 #didyoumeanintranet {
2934     float: left;
2935     width: 260px;
2936 }
2937
2938 .pluginlist {
2939     padding-bottom: 10px;
2940 }
2941
2942 .plugin {
2943     margin: 0 1em 1em 0;
2944 }
2945
2946 .pluginname {
2947     background-color: #E6F0F2;
2948     cursor: move;
2949     margin: .3em;
2950     padding-bottom: 4px;
2951     padding-left: .2em;
2952
2953     .ui-icon {
2954         float: right;
2955     }
2956 }
2957
2958 .plugindesc {
2959     padding: .4em;
2960 }
2961
2962 .ui-sortable-placeholder {
2963     border: 1px dotted #000;
2964     height: 80px;
2965     visibility: visible;
2966
2967     * {
2968         visibility: hidden;
2969     }
2970 }
2971
2972 // jQuery UI Datepicker
2973 .ui-datepicker {
2974     box-shadow: 1px 1px 3px 0 #666;
2975
2976     table {
2977         border: 0;
2978         border-collapse: collapse;
2979         font-size: .9em;
2980         margin: 0 0 .4em;
2981         width: 100%;
2982     }
2983
2984     th {
2985         background: transparent none;
2986         border: 0;
2987         font-weight: bold;
2988         padding: .7em .3em;
2989         text-align: center;
2990     }
2991 }
2992
2993 .ui-datepicker-trigger {
2994     vertical-align: middle;
2995 }
2996
2997 // css for timepicker
2998 .ui-timepicker-div {
2999     dl {
3000         text-align: left;
3001
3002         dd {
3003             margin: 0 10px 10px 65px;
3004         }
3005
3006         dt {
3007             height: 25px;
3008             margin-bottom: -25px;
3009         }
3010
3011         td {
3012             font-size: 90%;
3013         }
3014     }
3015
3016     .ui-widget-header {
3017         margin-bottom: 8px;
3018     }
3019 }
3020
3021 .ui-tpicker-grid-label {
3022     background: none;
3023     border: 0;
3024     margin: 0;
3025     padding: 0;
3026 }
3027
3028 .ui_tpicker_second,
3029 .ui_tpicker_millisec,
3030 .ui_tpicker_microsec {
3031     display: none;
3032 }
3033
3034 // jQuery UI Accordion
3035 .ui-accordion-header,
3036 .ui-widget-content .ui-accordion-header {
3037     font-size: 110%;
3038     font-weight: bold;
3039 }
3040
3041 video {
3042     width: 480px;
3043 }
3044
3045 // Bootstrap overrides
3046
3047 .dropdown-header {
3048     border-top: 1px solid #EEE;
3049     color: #000;
3050     font-weight: bold;
3051     margin-top: 5px;
3052     padding-left: 10px;
3053
3054     &:first-child {
3055         border-top: 0;
3056     }
3057 }
3058
3059 nav {
3060     background: #E6F0F2 none;
3061     border: 0;
3062 }
3063
3064 .navbar-collapse {
3065     background: #E6F0F2 none;
3066     box-shadow: none;
3067 }
3068
3069 .navbar-nav {
3070     li {
3071         list-style: none;
3072
3073         &.open {
3074             li {
3075                 a {
3076                     font-weight: normal;
3077                 }
3078             }
3079         }
3080
3081         a {
3082             font-weight: bold;
3083             padding-bottom: .4em;
3084             padding-top: .4em;
3085         }
3086     }
3087 }
3088
3089 .nav .open > a,
3090 .nav .open > a:hover,
3091 .nav .open > a:focus {
3092     background-color: transparent;
3093     border: 0;
3094 }
3095
3096 .nav > li > a:hover,
3097 .nav > li > a:focus {
3098     background-color: transparent;
3099     text-decoration: none;
3100 }
3101
3102 .pagination {
3103     margin:.5em .8em;
3104
3105     .active {
3106         a {
3107             background-color: #5A9EAA;
3108             border-color: #5A9EAA;
3109
3110             &:hover,
3111             &:focus {
3112                 background-color: #5A9EAA;
3113                 border-color: #5A9EAA;
3114             }
3115         }
3116
3117         span {
3118             background-color: #5A9EAA;
3119             border-color: #5A9EAA;
3120
3121             &:hover,
3122             &:focus {
3123                 background-color: #5A9EAA;
3124                 border-color: #5A9EAA;
3125             }
3126         }
3127     }
3128 }
3129
3130 button,
3131 .btn {
3132     border-color: #ADADAD #ADADAD #949494;
3133     font-family: $font-main;
3134
3135     &.btn-link {
3136         border: 0;
3137     }
3138 }
3139
3140 .btn-xs,
3141 .btn-group-xs > .btn {
3142     font-size: 10.5px;
3143     padding: 3px 5px;
3144 }
3145
3146 #toolbar {
3147     .dropdown-menu {
3148         border-top-width: 1px;
3149         font-size: 13px;
3150     }
3151
3152     &.floating {
3153         border-radius: 0;
3154         margin-top: 0;
3155     }
3156 }
3157
3158 #changelanguage {
3159     background: #FFF none;
3160     border-top: 1px solid #EEE;
3161     min-height: $language-footer-min-height;
3162
3163     .dropdown-menu {
3164         > li {
3165             > a,
3166             > span {
3167                 padding: 5px 15px;
3168             }
3169         }
3170     }
3171
3172     .navbar-text {
3173         margin: 0;
3174
3175         span {
3176             display: block;
3177             line-height: 20px;
3178         }
3179     }
3180
3181     .navbar-nav {
3182         li {
3183             a {
3184                 line-height: 20px;
3185             }
3186         }
3187     }
3188 }
3189
3190 .loggedout {
3191     color: #004D99;
3192     font-weight: bold;
3193     padding: .4em .2em;
3194 }
3195
3196 .navbar-fixed-bottom {
3197     .navbar-inner {
3198         min-height: 0;
3199         padding: .4em 0;
3200     }
3201
3202     .nav > li {
3203         border-right: 1px solid #CCC;
3204
3205         > a {
3206             font-weight: normal;
3207         }
3208
3209         &:last-child {
3210             border-right: 0;
3211         }
3212
3213         &.navbar-text {
3214             line-height: normal;
3215             padding: .4em .7em;
3216         }
3217     }
3218 }
3219
3220 .tooltip {
3221     &.bottom {
3222         .tooltip-arrow {
3223             border-bottom-color: #EEE;
3224         }
3225
3226         .tooltip-inner {
3227             background-color: #FFFFFF;
3228             border: 1px solid rgba(0, 0, 0, .2);
3229             box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
3230             color: #000;
3231             font-size: 120%;
3232             padding: 1em;
3233         }
3234     }
3235 }
3236
3237 .separator {
3238     color: #666;
3239     padding: 0 .2em;
3240 }
3241
3242 .close {
3243     filter: none;
3244     float: none;
3245     font-size: inherit;
3246     font-weight: normal;
3247     line-height: 1.5;
3248     opacity: inherit;
3249     position: inherit;
3250     right: auto;
3251     text-shadow: none;
3252     top: auto;
3253
3254     &:hover {
3255         color: inherit;
3256         filter: inherit;
3257         font-size: inherit;
3258         opacity: inherit;
3259     }
3260 }
3261
3262
3263 label {
3264     .radio &,
3265     .checkbox & {
3266         margin-left: 20px;
3267         padding-left: 0;
3268     }
3269 }
3270
3271 .radio {
3272     input {
3273         &[type="radio"] {
3274             margin-left: 0;
3275             position: relative;
3276         }
3277     }
3278 }
3279
3280 .checkbox {
3281     input {
3282         &[type="checkbox"] {
3283             margin-left: 0;
3284             position: relative;
3285         }
3286     }
3287 }
3288
3289 .modal-header {
3290     .closebtn {
3291         margin-top: 4px;
3292     }
3293 }
3294
3295 .closebtn {
3296     color: #000;
3297     filter: alpha(opacity = 20);
3298     float: right;
3299     font-size: 21px;
3300     font-weight: bold;
3301     line-height: 1;
3302     opacity: .2;
3303     text-shadow: 0 1px 0 #FFFFFF;
3304
3305     &:hover,
3306     &:focus {
3307         color: #000;
3308         cursor: pointer;
3309         filter: alpha(opacity = 50);
3310         opacity: .5;
3311         text-decoration: none;
3312     }
3313 }
3314
3315 .modal-body {
3316     background-color: #FFF;
3317     overflow-y: auto;
3318
3319     fieldset,
3320     ol {
3321         background-color: transparent;
3322         border: 0;
3323         margin: 0;
3324         padding: 0;
3325     }
3326 }
3327
3328 .modal-content {
3329     background-color: #EDF4F6;
3330 }
3331
3332 .btn-group {
3333     label,
3334     select {
3335         font-size: 13px;
3336     }
3337 }
3338
3339 .tooltip-inner {
3340     white-space: pre-wrap;
3341 }
3342
3343 pre {
3344     background-color: transparent;
3345     border: 0;
3346     border-radius: 0;
3347     color: inherit;
3348     display: block;
3349     font-size: inherit;
3350     line-height: inherit;
3351     margin: 0;
3352     padding: 0;
3353     word-break: break-all;
3354     word-wrap: break-word;
3355 }
3356
3357 code {
3358     background-color: transparent;
3359     border-radius: 0;
3360     color: inherit;
3361     font-size: inherit;
3362     padding: 0;
3363 }
3364
3365 .pagination > li > a,
3366 .pagination > li > span {
3367     font-weight: bold;
3368 }
3369
3370 // End Bootstrap overrides
3371
3372 .waiting {
3373     cursor: wait;
3374 }
3375
3376 #jobpanel,
3377 #jobstatus,
3378 #jobfailed {
3379     display: none;
3380 }
3381
3382 #jobstatus {
3383     margin: .4em;
3384 }
3385
3386 #jobprogress {
3387     background: url("../img/progress.png") -300px 0 no-repeat;
3388     border: 1px solid #666;
3389     display: inline-block;
3390     height: 10px;
3391     width: 200px;
3392  }
3393
3394 .progress_panel {
3395     border: 2px solid #EEE;
3396     border-radius: 5px;
3397     clear: both;
3398     font-size: 120%;
3399     margin: 1em 0;
3400     padding: 1em;
3401 }
3402
3403 progress {
3404     width: 50%;
3405 }
3406
3407 #selections {
3408     white-space: normal;
3409     width: 100%;
3410
3411     input {
3412         margin: 0 2px;
3413         vertical-align: middle;
3414     }
3415
3416     span {
3417         background-color: #EBF3FF;
3418         border-radius: 5px;
3419         font-size: 75%;
3420         line-height: 240%;
3421         margin: 3px;
3422         padding: 3px;
3423         white-space: nowrap;
3424
3425         &.selected {
3426             background-color: #CCE0FC;
3427         }
3428     }
3429 }
3430
3431 #changepasswordf {
3432     input {
3433         &[type="text"],
3434         &[type="password"] {
3435             font-family: $font-monospace;
3436             font-size: 140%;
3437             padding: .3em;
3438         }
3439     }
3440 }
3441
3442 // Class to be added to toolbar when it starts being fixed at the top of the screen
3443
3444 .floating {
3445     box-shadow: 0 3px 2px 0 rgba(0, 0, 0, .5);
3446     z-index: 100;
3447 }
3448
3449 .inline {
3450     display: inline;
3451 }
3452
3453 .nowrap {
3454     white-space: nowrap;
3455 }
3456
3457 .tag_editor {
3458     background: transparent url("../img/edit-tag.png") top left no-repeat;
3459     display: block;
3460     float: left;
3461     height: 16px;
3462     margin: 4px;
3463     overflow: hidden;
3464     text-indent: 100%;
3465     white-space: nowrap;
3466     width: 16px;
3467
3468     &.upload {
3469         background: transparent none;
3470         font-size: 90%;
3471         height: unset;
3472         overflow: unset;
3473         text-indent: unset;
3474         width: unset;
3475     }
3476 }
3477
3478 .browse-controls {
3479     margin-left: 1.1em;
3480     margin-right: .5em;
3481     padding-bottom: 1em;
3482     padding-top: 1em;
3483 }
3484
3485 #browse-return-to-results {
3486     background-color: #E8F0F6;
3487     border: 1px solid #B9D8D9;
3488     border-bottom-width: 0;
3489     border-top-left-radius: 5px;
3490     border-top-right-radius: 5px;
3491     display: block;
3492     padding: .5em;
3493     text-align: center;
3494 }
3495
3496 .browse-button {
3497     background-color: #FFF;
3498     border: 1px solid #B9D8D9;
3499     color: #004D99;
3500     display: block;
3501     overflow: hidden;
3502     padding: .4em .6em;
3503     text-align: center;
3504     white-space: nowrap;
3505     width: 100%;
3506
3507     &:hover {
3508         background: #FAFAFA;
3509     }
3510 }
3511
3512 span {
3513     &.browse-button {
3514         background: #FAFAFA;
3515         color: #222;
3516     }
3517
3518     &.circ-hlt {
3519         color: #CC0000;
3520         font-weight: bold;
3521     }
3522
3523     &.expired {
3524         color: #990000;
3525         font-style: italic;
3526     }
3527
3528     &.name {
3529         font-style: italic;
3530         font-weight: bold;
3531     }
3532
3533     &.required {
3534         color: #C00;
3535         font-style: italic;
3536         margin-left: .5em;
3537     }
3538
3539     &.important {
3540         color: #EAC117;
3541         font-style: italic;
3542         margin-left: .5em;
3543     }
3544
3545     &[class*=" label-"] {
3546         color: #FFF;
3547         display: inline;
3548         font-size: 75%;
3549         font-weight: normal;
3550         padding: .2em .6em .3em;
3551     }
3552 }
3553
3554
3555 .result-biblio-itemtype {
3556     float: right;
3557     font-size: 85%;
3558     margin: .5em;
3559     padding: .5em;
3560     text-align: center;
3561
3562     img {
3563         display: block;
3564         margin: auto;
3565         margin-bottom: 2px;
3566     }
3567 }
3568
3569 #browse-previous {
3570     border-bottom-width: 0;
3571 }
3572
3573 #browse-next {
3574     border-bottom-right-radius: 5px;
3575     border-bottom-left-radius: 5px;
3576 }
3577
3578 .loading-overlay {
3579     background-color: #FFFFFF;
3580     cursor: wait;
3581     height: 100%;
3582     left: 0;
3583     opacity: .7;
3584     position: fixed;
3585     top: 0;
3586     width: 100%;
3587     z-index: 1000;
3588
3589     div {
3590         background: transparent url("../img/loading.gif") top left no-repeat;
3591         font-size: 175%;
3592         font-weight: bold;
3593         height: 2em;
3594         left: 50%;
3595         margin: -1em 0 0 -2.5em;
3596         padding-left: 50px;
3597         position: absolute;
3598         top: 50%;
3599         width: 15em;
3600     }
3601 }
3602
3603 #merge_invoices {
3604     display: none;
3605     margin: 1em auto;
3606 }
3607
3608 #merge {
3609     margin: .5em 0 0;
3610 }
3611
3612 #merge_table {
3613     tr {
3614         &.active {
3615             td {
3616                 background-color: #FFFFCC;
3617             }
3618         }
3619     }
3620 }
3621
3622 input.renew {
3623     margin-right: 1em;
3624 }
3625
3626 .renewals {
3627     display: block;
3628     font-size: .8em;
3629     padding: .5em;
3630 }
3631
3632 .dialog input#renewonholdduedate {
3633     padding: 2px;
3634 }
3635
3636 .date-select {
3637     label {
3638         display: inline-block;
3639         width: 40%;
3640     }
3641 }
3642
3643 #newonholdduedate {
3644     display: none;
3645 }
3646
3647 #transport-types {
3648     padding-top: .5px;
3649 }
3650
3651 #i18nMenu {
3652     .navbar-text {
3653         .currentlanguage {
3654             color: #000;
3655             font-weight: bold;
3656         }
3657     }
3658
3659     a {
3660         &.currentlanguage {
3661             &:link,
3662             &:visited {
3663                 font-weight: bold;
3664             }
3665         }
3666
3667         .sublanguage-selected {
3668             color: #000;
3669             font-weight: bold;
3670         }
3671     }
3672 }
3673
3674 .onsite_checkout-select {
3675     label,
3676     #circ_circulation_issue & {
3677         font-size: inherit;
3678         font-weight: normal;
3679     }
3680 }
3681
3682 .onsite_checkout {
3683     color: #CC0000;
3684 }
3685
3686 .onsite-checkout-only {
3687     background-color: rgba(255, 242, 206, .5);
3688     border: 1px solid #FFF2CE;
3689     border-radius: 4px;
3690 }
3691
3692 .branchgriditem {
3693     background-color: #FFFFFF;
3694     border: 1px solid #B9D8D9;
3695     border-radius: 3px;
3696     display: table-cell;
3697     float: left;
3698     margin: 3px;
3699     padding: .3em;
3700 }
3701
3702 .branchgridrow {
3703     display: table-row;
3704 }
3705
3706 .branchselector {
3707     display: table;
3708 }
3709
3710 .hq-author {
3711     font-weight: bold;
3712 }
3713
3714 #cn_browser_table_wrapper > #cn_browser_table {
3715     margin: auto;
3716     width: 90%;
3717 }
3718
3719 #new_rule {
3720     background-color: #F4F8F9;
3721     border: 2px solid #B9D8D9;
3722     border-radius: 5px;
3723     display: none;
3724     margin: .3em;
3725     padding: .3em;
3726 }
3727
3728
3729 .blocks {
3730     margin-bottom: .3em;
3731 }
3732
3733 .remove_rule {
3734     font-size: 80%;
3735     padding-left: .7em;
3736 }
3737
3738 .underline {
3739     text-decoration: underline;
3740 }
3741
3742 .overline {
3743     text-decoration: overline;
3744 }
3745
3746 .order-control {
3747     padding-right: 5px;
3748 }
3749
3750 #borrower_message {
3751     margin-top: 10px;
3752 }
3753
3754 .form-group {
3755     margin-bottom: 10px;
3756
3757     label {
3758         font-weight: bold;
3759     }
3760 }
3761
3762
3763 .form-message {
3764     background-color: #FFF;
3765     border: 1px solid #A4BEDD;
3766     border-radius: 5px;
3767     margin: 1em;
3768     padding: .5em;
3769 }
3770
3771 .modal-textarea {
3772     width: 98%;
3773 }
3774
3775 #pat_member {
3776     #patron_list_dialog,
3777     #searchresults {
3778         display: none;
3779     }
3780 }
3781
3782 #patron_search {
3783     #filters {
3784         display: none;
3785     }
3786 }
3787
3788 #fixedlengthbuilderaction {
3789     border: 3px solid #E6F0F2;
3790     left: 80%;
3791     padding: 5px;
3792     position: relative;
3793     top: -80px;
3794     width: 12%;
3795 }
3796
3797 #interlibraryloans {
3798     #dataPreviewLabel {
3799         margin: .3em 0;
3800     }
3801
3802     .bg-info {
3803         overflow: auto;
3804         position: relative;
3805     }
3806
3807     .format {
3808         h4 {
3809             margin-bottom: 20px;
3810         }
3811
3812         h5 {
3813             margin-top: 20px;
3814         }
3815
3816         input {
3817             margin: 10px 0;
3818         }
3819
3820         li {
3821             list-style: none;
3822         }
3823     }
3824
3825     #add-new-fields {
3826         margin: 1em;
3827     }
3828
3829     #column-toggle,
3830     #reset-toggle {
3831         font-weight: 700;
3832         line-height: 1.5em;
3833         margin: 15px 0;
3834     }
3835
3836     #freeform-fields {
3837         .custom-name {
3838             margin-right: 1em;
3839             text-align: right;
3840             width: 9em;
3841         }
3842
3843         .delete-new-field {
3844             margin-left: 1em;
3845         }
3846     }
3847
3848     #search-summary {
3849         position: absolute;
3850         top: 50%;
3851         transform: translateY(-50%);
3852     }
3853
3854     #generic_confirm_search_count {
3855         margin: 1em 0 1em 10em;
3856     }
3857
3858     #generic_confirm_search {
3859         display: block;
3860         visibility: hidden;
3861         margin: 1em 0 1em 10em;
3862     }
3863
3864     #partnerSearch {
3865         .modal-dialog {
3866             width: 50vw;
3867         }
3868         .modal-body {
3869             max-height: 70vh;
3870         }
3871     }
3872 }
3873
3874 .ill-view-panel {
3875     margin-top: 15px;
3876
3877     .notesopac {
3878         display: inline-block;
3879     }
3880 }
3881
3882 #illfilter_dateplaced_start,
3883 #illfilter_datemodified_start,
3884 #illfilter_dateplaced_end,
3885 #illfilter_datemodified_end {
3886     width: 80%;
3887 }
3888
3889 #requestattributes {
3890     font-family: monospace;
3891     line-height: 1.3em;
3892 }
3893
3894 #ill-requests {
3895     width: 100% !important;
3896 }
3897
3898 .ar-title, .hq-title {
3899     .biblio-title {
3900         font-weight: bold;
3901     }
3902 }
3903
3904 #ill-issue-title {
3905     margin: 20px 0 30px 0;
3906 }
3907
3908 .ill_availability_sourcename {
3909     margin-top: 20px;
3910 }
3911
3912 #stockrotation {
3913     h3 {
3914         margin: 30px 0 10px 0;
3915     }
3916     .dialog {
3917         h3 {
3918             margin: 10px 0;
3919         }
3920         margin-bottom: 20px;
3921     }
3922     .highlight_stage {
3923         font-weight: bold;
3924     }
3925 }
3926
3927 #catalog_stockrotation .highlight_stage {
3928     font-weight: bold;
3929 }
3930
3931 #stockrotation {
3932     #rota_form {
3933         textarea {
3934             width: 300px;
3935             height: 100px;
3936         }
3937         #name {
3938             width: 300px;
3939         }
3940         fieldset {
3941             width: auto;
3942         }
3943     }
3944     #stage_form fieldset, #add_rota_item_form fieldset {
3945         width: auto;
3946     }
3947     .dialog.alert {
3948         ul {
3949             margin: 20px 0;
3950         }
3951         li {
3952             list-style-type: none;
3953         }
3954     }
3955 }
3956
3957 #catalog_stockrotation {
3958     .item_select_rota {
3959         vertical-align: middle;
3960     }
3961     h1 {
3962         margin-bottom: 20px;
3963     }
3964 }
3965
3966 #stockrotation td.actions, #catalog_stockrotation td.actions {
3967     vertical-align: middle;
3968 }
3969
3970 #stockrotation .stage, #catalog_stockrotation .stage {
3971     display: inline-block;
3972     padding: 5px 7px;
3973     margin: 3px 0 3px 0;
3974     border-radius: 5px;
3975     background-color: rgba(0, 0, 0, 0.1);
3976 }
3977
3978 #stage_list_headings {
3979     font-weight: bold;
3980     span {
3981         padding: 3px;
3982     }
3983 }
3984
3985 #manage_stages {
3986     ul {
3987         padding-left: 0;
3988     }
3989     li {
3990         list-style: none;
3991         margin-bottom: 5px;
3992         span {
3993             padding: 6px 3px;
3994         }
3995     }
3996     .stagename {
3997         width: 15em;
3998         display: inline-block;
3999     }
4000     .stageduration {
4001         width: 10em;
4002         display: inline-block;
4003     }
4004     .stageactions {
4005         display: inline-block;
4006     }
4007     li:nth-child(odd) {
4008         background-color: #F3F3F3;
4009     }
4010     .drag_handle {
4011         margin-right: 6px;
4012         cursor: move;
4013     }
4014     .drag_placeholder {
4015         height: 2em;
4016         border: 1px dotted #aaa;
4017     }
4018     h3 {
4019         display: inline-block;
4020     }
4021     #ajax_status {
4022         display: inline-block;
4023         border: 1px solid #bcbcbc;
4024         border-radius: 5px;
4025         padding: 5px;
4026         margin-left: 10px;
4027         background: #f3f3f3;
4028     }
4029     #manage_stages_help {
4030         margin: 20px 0;
4031     }
4032 }
4033
4034 #payForm {
4035     fieldset {
4036         &.rows {
4037             padding-left: 1em;
4038             padding-right: 2em;
4039         }
4040     }
4041 }
4042
4043 #helper {
4044     span {
4045         display: none;
4046     }
4047 }
4048
4049 #logged-in-info-full {
4050     display: none;
4051 }
4052
4053 .loggedin-menu-label {
4054     color: #777;
4055     font-size: 12px;
4056     line-height: 1.42857143;
4057     padding: 4px 12px;
4058     white-space: nowrap;
4059
4060     span {
4061         color: #000;
4062         font-weight: bold;
4063     }
4064
4065     &.divider {
4066         padding: 0;
4067     }
4068 }
4069
4070 .lastborrower {
4071     background-color: #E6F0F2;
4072     border: 1px solid #95C6D0;
4073     box-shadow: 1px 1px 1px 0 #999;
4074     color: #CC0000;
4075     margin: .4em 0;
4076     padding: .3em .5em .3em .5em;
4077 }
4078
4079 #lastborrower-ref {
4080     border-radius: 5px 0px 0px 5px;
4081     float: left;
4082 }
4083
4084 #lastborrower-remove {
4085     border-radius: 0px 5px 5px 0px;
4086     cursor: pointer;
4087     float: right;
4088 }
4089
4090 #lastborrower-window {
4091     display: none;
4092     position: absolute;
4093     right: 5px;
4094     top: 0px;
4095 }
4096
4097 /* ==== MODULE LINKS - Start ==== */
4098 .buttons-list {
4099     // List containing the module links
4100     margin-bottom: 30px;
4101     padding: 0;
4102
4103     li {
4104         // Standard attributes for the list elements
4105         list-style-type: none;
4106
4107         a {
4108             &.circ-button {
4109                 // Class used for each module link
4110                 background-color: #F4F8F9;
4111                 background-position: 5px 3px;
4112                 background-repeat: no-repeat;
4113                 border: 2px solid #B9D8D9;
4114                 border-radius: 6px;
4115                 box-sizing: content-box;
4116                 color: #000000;
4117                 display: block;
4118                 font-size: 110%;
4119                 font-weight: bold;
4120                 margin: .5em 0;
4121                 max-width: 260px;
4122                 padding: 8px;
4123                 text-decoration: none;
4124
4125                 &:hover {
4126                     // Class used for each module link hover state
4127                     border-color: #538200;
4128                     color: #538200;
4129                 }
4130             }
4131         }
4132     }
4133 }
4134
4135 .about h2 {
4136     border-bottom: 1px solid #B9D8D9;
4137     padding: .5em .2em;
4138     margin:  .5em 0;
4139 }
4140
4141 .columns-2 {
4142     columns: 2 auto;
4143     column-gap: 2.5em;
4144 }
4145
4146 .columns-3 {
4147     columns: 3 auto;
4148     column-gap: 2.5em;
4149 }
4150
4151 .columns-4 {
4152     columns: 4 auto;
4153     column-gap: 2em;
4154 }
4155
4156 // ==== MODULE LINKS - End ====
4157
4158 #catalog-search-link {
4159     border-right: 1px solid lighten( #E6F0F2, 15% );
4160     padding-right: .3em;
4161 }
4162
4163 #catalog-search-dropdown {
4164     padding: 0;
4165
4166     & > a {
4167         border-left: 1px solid darken( #B4D2D8, 5% );
4168         margin-right: .6em;
4169         padding: .4em .6em;
4170
4171         &:hover,
4172         &.catalog-search-dropdown-hover {
4173             background-color: darken( #E6F0F2, 5% );
4174             border-left: 1px solid darken( #B4D2D8, 15% );
4175         }
4176     }
4177 }
4178
4179 .adlibris-cover {
4180     max-height: 120px;
4181 }
4182
4183 .adlibris-cover-big {
4184     max-height: 200px;
4185 }
4186
4187 #tools_holidays {
4188     .radio,
4189     .checkbox {
4190         label {
4191             margin-left: 0;
4192         }
4193     }
4194 }
4195
4196 /* Permissions */
4197
4198 #permissionstree {
4199     display: inline-block;
4200
4201     label {
4202         cursor: pointer;
4203
4204         &:hover {
4205             color: #004d99;
4206         }
4207     }
4208 }
4209
4210 .main_permission {
4211     font-size: 110%;
4212     font-weight: bold;
4213 }
4214
4215 .permissioncode {
4216     color: #666;
4217     font-style: italic;
4218 }
4219
4220 .permission-highlight {
4221     background-color: #FFC !important;
4222 }
4223
4224 .togglechildren_on,
4225 .togglechildren_off {
4226     float: right;
4227 }
4228
4229 .togglechildren_off,
4230 .children {
4231     display: none;
4232 }
4233
4234 .open {
4235     .togglechildren_off {
4236         display: inline;
4237     }
4238
4239     .togglechildren_on {
4240         display: none;
4241     }
4242 }
4243
4244 .parent {
4245     border: 1px solid #DDD;
4246     border-bottom-width: 0;
4247     padding: 5px;
4248
4249     &:last-child {
4250         border-bottom-width: 1px;
4251     }
4252
4253     &:nth-child(odd) {
4254         background-color: #F8F8F8;
4255     }
4256 }
4257
4258
4259 .superlibrarian-hint {
4260     color: #000;
4261     padding: .2em 0;
4262     text-indent: 2em;
4263 }
4264
4265 .child-flags {
4266     background-color: #FFF;
4267     border: 1px solid #DDD;
4268     border-bottom-width: 0;
4269     margin: 0 5px 0 20px;
4270     padding: 5px;
4271
4272     &:first-child {
4273         margin-top: 10px;
4274     }
4275
4276     &:last-child {
4277         border-bottom-width: 1px;
4278     }
4279
4280     &:nth-child(odd) {
4281         background-color: #EEE;
4282     }
4283 }
4284
4285 .header-menu-link {
4286     display: none;
4287     font-weight: bold;
4288     padding: .4em .6em;
4289 }
4290
4291 #user-menu {
4292     position: absolute;
4293     right: 5px;
4294     top: 0;
4295 }
4296
4297 div#makechart ol li {
4298     list-style: none;
4299 }
4300
4301 div .suggestion_note {
4302     background: transparent none;
4303     border-style: dotted;
4304     border-width: 1px 0 0 0;
4305     font-size: 90%;
4306     padding: 2px 0 0 0;
4307
4308     i {
4309         color: #CCC;
4310     }
4311 }
4312
4313 @media (min-width: 200px) {
4314
4315 }
4316
4317 @media (max-width: 767px) {
4318     .header-menu-link {
4319         display: inline-block;
4320     }
4321
4322     #catalog-search-link {
4323         display: none;
4324         padding: 0;
4325     }
4326
4327     #cartmenulink {
4328         background: transparent none;
4329         padding-left: 1.5em;
4330     }
4331
4332     #changelanguage {
4333         li {
4334             float: left;
4335
4336             li {
4337                 float: none;
4338             }
4339         }
4340
4341         .open {
4342             .dropdown-menu {
4343                 background-color: #FFF;
4344                 border: 1px solid #ccc;
4345                 position: absolute;
4346             }
4347         }
4348     }
4349
4350     #header {
4351         background-color: #FFF;
4352         border: 1px solid #CCC;
4353         margin-bottom: 1em;
4354
4355         a {
4356             font-weight: normal;
4357             padding-left: 1.5em;
4358
4359             &:hover {
4360                 background-color: #0070A9;
4361                 color: #FFF;
4362             }
4363         }
4364
4365         ul {
4366             border: 0;
4367             box-shadow: unset;
4368             float: none;
4369             left: auto;
4370             position: relative;
4371             right: auto;
4372
4373             &.dropdown-menu {
4374                 display: block;
4375             }
4376         }
4377
4378         .dropdown-menu {
4379             li {
4380                 a {
4381                     color: #004D99;
4382
4383                     &:hover {
4384                         color: #FFF;
4385                     }
4386                 }
4387             }
4388         }
4389
4390         .dropdown-toggle {
4391             display: none;
4392         }
4393     }
4394
4395     h1#logo {
4396         float: none;
4397         margin: auto;
4398     }
4399
4400     #marcPreview {
4401         margin: 0;
4402         width: auto;
4403     }
4404
4405     .navbar-fixed-bottom .nav > li {
4406         border-right: 0;
4407     }
4408
4409     #user-menu {
4410         .open {
4411             .dropdown-menu {
4412                 background-color: #FFF;
4413                 border: 1px solid #ccc;
4414                 position: absolute;
4415             }
4416         }
4417
4418         li {
4419             float: left;
4420
4421             li {
4422                 float: none;
4423             }
4424         }
4425     }
4426 }
4427
4428 @media (max-width: 768px) {
4429     .navbar-nav {
4430         li {
4431
4432             a {
4433                 padding: .4em .6em;
4434             }
4435         }
4436     }
4437 }
4438
4439 @media only screen and ( max-width: 768px ) {
4440     .browse-button {
4441         display: inline-block;
4442         width: 50%;
4443     }
4444
4445     #browse-previous {
4446         border-bottom-left-radius: 5px;
4447         border-bottom-width: 1px;
4448         border-right-width: 0;
4449     }
4450
4451     #browse-next {
4452         border-bottom-left-radius: 0;
4453         border-bottom-right-radius: 5px;
4454     }
4455 }
4456
4457 @media (min-width: 800px) {
4458
4459
4460
4461     #helper {
4462         i {
4463             display: none;
4464         }
4465
4466         span {
4467             display: inline;
4468         }
4469     }
4470
4471     #logged-in-info-full {
4472         display: inline;
4473     }
4474
4475     #logged-in-info-brief {
4476         display: none;
4477     }
4478
4479     .loggedin-menu-label {
4480         display: none;
4481     }
4482 }
4483
4484 @media only screen and ( min-width: 1200px ) {
4485     .browse-button {
4486         display: inline-block;
4487         width: 50%;
4488     }
4489
4490     #browse-previous {
4491         border-bottom-left-radius: 5px;
4492         border-bottom-width: 1px;
4493         border-right-width: 0;
4494     }
4495
4496     #browse-next {
4497         border-bottom-left-radius: 0;
4498         border-bottom-right-radius: 5px;
4499     }
4500 }