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

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