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