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