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 .cover-slides {
2129     background: #FFF url("[% interface | html %]/[% theme | html %]/img/spinner-small.gif") center center no-repeat;
2130     border: 1px solid #b9d8d9;
2131     border-radius: 3px;
2132     margin: 5px;
2133     padding: 10px 5px 5px 5px;
2134     min-height: 175px;
2135
2136     .hint {
2137         font-size: 90%;
2138         padding: .5em 0;
2139     }
2140
2141     a {
2142         &.nav-active {
2143             &:link,
2144             &:visited {
2145                 color: #85ca11;
2146             }
2147         }
2148     }
2149 }
2150
2151 .cover-image {
2152     display: none;
2153
2154     img {
2155         height: auto;
2156         max-width: 100%;
2157     }
2158 }
2159
2160 .cover-nav {
2161     display: inline-block;
2162     padding: 3px 4px;
2163 }
2164
2165 .searchhighlightblob {
2166     font-size: 75%;
2167     font-style: italic;
2168 }
2169
2170 #irregularity_summary {
2171     vertical-align: top;
2172 }
2173
2174 #CheckAll,
2175 #CheckNone,
2176 #CheckPending {
2177     font-weight: normal;
2178     margin: 0 .5em 0 0;
2179 }
2180
2181 .lost,
2182 .dmg,
2183 .wdn {
2184     color: #990000;
2185     display: block;
2186 }
2187
2188 .datedue {
2189     color: #999;
2190     display: block;
2191     font-style: italic;
2192 }
2193
2194 .waitinghere,
2195 .credit {
2196     color: #669900;
2197 }
2198
2199 #mainuserblock {
2200     border: 1px solid #E8E8E8;
2201     margin-top: .5em;
2202     padding: .5em;
2203 }
2204
2205 .labeledmarc-table {
2206     border: 0;
2207 }
2208
2209 .labeledmarc-label {
2210     border: 0;
2211     color: #000000;
2212     font-size: 11pt;
2213     font-style: italic;
2214     padding: 5;
2215 }
2216
2217 .labeledmarc-value {
2218     border: 0;
2219     color: #000;
2220     font-size: 10pt;
2221     padding: 5;
2222 }
2223
2224 #marcPreview {
2225     table {
2226         border: 0;
2227         font-family: $font-monospace;
2228         font-size: 95%;
2229         margin: .7em 0 0;
2230     }
2231
2232     tbody {
2233         tr {
2234             &:nth-child(2n+1) {
2235                 td {
2236                     background-color: #FFFFFF;
2237                 }
2238             }
2239         }
2240     }
2241
2242     td {
2243         border: 0;
2244         padding: 2px;
2245         vertical-align: top;
2246     }
2247
2248     th {
2249         background-color: #FFFFFF;
2250         border: 0;
2251         padding: 2px;
2252         text-align: left;
2253         vertical-align: top;
2254         white-space: nowrap;
2255     }
2256
2257     &.modal-dialog {
2258         width: 80%;
2259     }
2260 }
2261
2262 .modal-dialog {
2263     .dialog {
2264         border-radius: 0;
2265         border-width: 1px 0 0 0;
2266         margin: 15px -15px -15px -15px;
2267         padding: 15px;
2268         text-align: left;
2269         width: unset;
2270
2271         h3 {
2272             margin: unset;
2273             text-align: left;
2274         }
2275
2276         &.alert {
2277             background: #FFFADE none;
2278             border-color: #E0C726;
2279
2280             .problem {
2281                 background-color: transparent;
2282             }
2283         }
2284
2285         &.message {
2286             background: #E8EDF6 none;
2287             border-color: #A4BEDD;
2288
2289             .problem {
2290                 background-color: transparent;
2291             }
2292         }
2293     }
2294
2295     &.modal-wide {
2296         width: 80%;
2297     }
2298 }
2299
2300 #cartDetails {
2301     background-color: #FFFFFF;
2302     border: 1px solid #739ACF;
2303     box-shadow: 1px 1px 3px 0 #666;
2304     color: #000;
2305     display: none;
2306     margin: 0;
2307     padding: 10px;
2308     text-align: center;
2309     width: 180px;
2310     z-index: 50;
2311 }
2312
2313 #cartmenulink {
2314     padding-left: 15px;
2315
2316     i.fa.fa-shopping-cart {
2317         padding-right: 7px;
2318     }
2319 }
2320
2321 #basketcount {
2322     span {
2323         display: inline;
2324         font-size: 90%;
2325         font-weight: normal;
2326         padding: 0;
2327     }
2328 }
2329
2330 #moremenu {
2331     display: none;
2332 }
2333
2334 .results_summary {
2335     color: #707070;
2336     display: block;
2337     font-size: 85%;
2338     padding: 0 0 .5em;
2339
2340     a {
2341         font-weight: normal;
2342     }
2343
2344     .label {
2345         color: #202020;
2346     }
2347 }
2348
2349 .child_fund_amount {
2350     font-style: italic;
2351 }
2352
2353 .number_box {
2354     font-size: 105%;
2355     line-height: 200%;
2356
2357     a,
2358     span {
2359         background-color: #E4ECF5;
2360         border: 1px solid #A4BEDD;
2361         border-radius: 4px;
2362         font-weight: bold;
2363         padding: .1em .4em;
2364         text-decoration: none;
2365
2366         &:hover {
2367             background-color: #EBEFF7;
2368         }
2369     }
2370 }
2371
2372 .container {
2373     border: 1px solid #EEE;
2374     margin: 1em 0;
2375     padding: 1em;
2376 }
2377
2378 .import_export {
2379     position: relative;
2380
2381     .export_ok {
2382         background: #E3E3E3 none;
2383         border: 0;
2384         cursor: pointer;
2385         margin-left: 20px;
2386         padding: 10px;
2387     }
2388
2389     .import_export_options {
2390         background: #FFFFFF;
2391         border: 1px solid #CDCDCD;
2392         left: 60px;
2393         padding: 10px;
2394         position: absolute;
2395         top: 0;
2396         width: 300px;
2397         z-index: 1;
2398     }
2399 }
2400
2401 .import_export_options {
2402     background: #E3E3E3 none;
2403     border: 0;
2404     cursor: pointer;
2405     margin-left: 20px;
2406     padding: 10px;
2407
2408     fieldset {
2409         &.rows {
2410             li {
2411                 label {
2412                     width: 16em;
2413                 }
2414             }
2415         }
2416     }
2417
2418     .importing {
2419         background: none;
2420         padding: inherit;
2421     }
2422 }
2423
2424 .form_import {
2425     fieldset {
2426         &.rows {
2427             li {
2428                 label {
2429                     width: auto;
2430                 }
2431             }
2432         }
2433     }
2434
2435     .input_import {
2436         border: 1px solid #BCBCBC;
2437     }
2438 }
2439
2440 .importing {
2441     position: relative;
2442
2443     .importing_msg {
2444         padding-bottom: 10px;
2445         padding-left: 10px;
2446     }
2447 }
2448
2449
2450 .field_hint {
2451     color: #808080;
2452     font-style: italic;
2453     padding-left: 1em;
2454 }
2455
2456 .m880 {
2457     display: block;
2458     float: right;
2459     padding-left: 20px;
2460     text-align: right;
2461     width: 50%;
2462 }
2463
2464 .advsearch {
2465     margin: 0;
2466
2467     table {
2468         border-collapse: separate;
2469         border-spacing: 5px;
2470         border-width: 0;
2471     }
2472
2473     td {
2474         border: 1px solid #EEE;
2475         padding: .3em .4em;
2476     }
2477 }
2478
2479 #circ_circulation_issue {
2480     position: relative;
2481 }
2482
2483 #clearscreen {
2484     position: absolute;
2485     right: 0;
2486     top: 0;
2487
2488     a {
2489         background-color: #EEE;
2490         border-radius: 0 0 0 5px;
2491         color: #CCC;
2492         display: block;
2493         font-size: 160%;
2494         font-weight: bold;
2495         padding: 0 .7em .2em;
2496         text-decoration: none;
2497         text-shadow: 0 -1px 0 #666;
2498
2499         &:hover {
2500             color: #CC0000;
2501         }
2502     }
2503 }
2504
2505 #printclearscreen {
2506     position: absolute;
2507     right: 43px;
2508     top: 0;
2509
2510     a {
2511         background-color: #EEE;
2512         border-radius: 0 0 0 5px;
2513         color: #CCC;
2514         display: block;
2515         font-size: 160%;
2516         font-weight: bold;
2517         padding: 0 .7em .2em;
2518         text-decoration: none;
2519         text-shadow: 0 -1px 0 #666;
2520
2521         &:hover {
2522             color: #CC0000;
2523         }
2524     }
2525 }
2526
2527 .no-image {
2528     background-color: #FFFFFF;
2529     border: 1px solid #AAAAAA;
2530     border-radius: 3px;
2531     color: #979797;
2532     display: block;
2533     font-size: 86%;
2534     font-weight: bold;
2535     text-align: center;
2536     width: 75px;
2537 }
2538
2539 #acqui_order_supplierlist {
2540     > div {
2541         &.supplier {
2542             border: 1px solid #EEEEEE;
2543             margin: .5em;
2544             padding: 1em;
2545         }
2546
2547         > div {
2548             > .baskets {
2549                 margin-top: .5em;
2550             }
2551         }
2552
2553         > span {
2554             &.action {
2555                 margin-left: 5em;
2556             }
2557
2558             &.suppliername {
2559                 display: inline;
2560                 font-size: 1.7em;
2561                 margin-bottom: .5em;
2562             }
2563         }
2564     }
2565 }
2566
2567 #ADD-contact {
2568     margin: 0 0 8px 8px;
2569 }
2570
2571 #contact-template {
2572     display: none;
2573 }
2574
2575 // Override core jQueryUI widgets
2576 .ui-widget-content {
2577     background: #FFFFFF none;
2578     border: 1px solid #B9D8D9;
2579     color: #222222;
2580 }
2581
2582 .ui-widget-header {
2583     background: #E6F0F2 none;
2584     border: 1px solid #B9D8D9;
2585     color: #222222;
2586     font-weight: bold;
2587 }
2588
2589 .ui-state-default,
2590 .ui-widget-content .ui-state-default,
2591 .ui-widget-header .ui-state-default {
2592     background: #F4F8F9 none;
2593     border: 1px solid #B9D8D9;
2594     color: #555555;
2595     font-weight: normal;
2596 }
2597
2598 .ui-state-hover,
2599 .ui-widget-content .ui-state-hover,
2600 .ui-widget-header .ui-state-hover,
2601 .ui-state-focus,
2602 .ui-widget-content .ui-state-focus,
2603 .ui-widget-header .ui-state-focus {
2604     background: #E6F0F2 none;
2605     border: 1px solid #B9D8D9;
2606     color: #212121;
2607     font-weight: normal;
2608 }
2609
2610 .ui-state-active,
2611 .ui-widget-content .ui-state-active,
2612 .ui-widget-header .ui-state-active {
2613     background: #FFFFFF none;
2614     border: 1px solid #AAAAAA;
2615     color: #212121;
2616     font-weight: normal;
2617 }
2618
2619 .ui-state-highlight,
2620 .ui-widget-content .ui-state-highlight,
2621 .ui-widget-header .ui-state-highlight {
2622     background: #FFF4C6;
2623     border: 1px solid #FED22F;
2624     color: #363636;
2625 }
2626
2627 .ui-state-error,
2628 .ui-widget-content .ui-state-error,
2629 .ui-widget-header .ui-state-error {
2630     background: #FEF1EC;
2631     border: 1px solid #CD0A0A;
2632     color: #CD0A0A;
2633 }
2634
2635 // Override jQuery Autocomplete
2636 .ui-autocomplete {
2637     box-shadow: 2px 2px 2px rgba(0, 0, 0, .3);
2638     cursor: default;
2639     position: absolute;
2640
2641     &.ui-widget-content {
2642         .ui-state-hover {
2643             background: #E6F0F2 none;
2644             border: 1px solid #B9D8D9;
2645             color: #212121;
2646             font-weight: normal;
2647         }
2648     }
2649 }
2650
2651 .ui-autocomplete-loading {
2652     background: #FFF url("../img/spinner-small.gif") right center no-repeat;
2653 }
2654
2655 // jQuery UI standard tabs
2656 .ui-menu {
2657     li {
2658         list-style: none;
2659     }
2660 }
2661
2662 .ui-tabs-nav {
2663     .ui-tabs-active a,
2664     a:hover,
2665     a:focus,
2666     a:active,
2667     span.a {
2668         background: none repeat scroll 0 0 transparent;
2669         outline: 0 none;
2670     }
2671
2672     &.ui-widget-header {
2673         background: none;
2674         border: 0;
2675     }
2676 }
2677
2678 .ui-tabs {
2679     .ui-tabs-nav {
2680         li {
2681             background: #E6F0F2 none;
2682             border: 1px solid #B9D8D9;
2683             margin-right: .4em;
2684             top: 1px;
2685
2686             &.ui-tabs-active {
2687                 background-color: #FFFFFF;
2688                 border: 1px solid #B9D8D9;
2689                 border-bottom-width: 0;
2690
2691                 a {
2692                     color: #000;
2693                     font-weight: bold;
2694                 }
2695
2696                 &.ui-state-hover {
2697                     background: #FFF none;
2698                 }
2699             }
2700
2701             &.ui-state-default {
2702                 &.ui-state-hover {
2703                     background: #EDF4F5 none;
2704                 }
2705             }
2706         }
2707     }
2708
2709     .ui-tabs-panel {
2710         border: 1px solid #B9D8D9;
2711     }
2712
2713     &.ui-widget-content {
2714         background: transparent none;
2715         border: 0;
2716     }
2717
2718     .ui-state-default {
2719         a {
2720             color: #004D99;
2721
2722             &:link,
2723             &:visited {
2724                 color: #004D99;
2725             }
2726         }
2727     }
2728
2729     .ui-state-hover {
2730         a {
2731             color: #538200;
2732
2733             &:link,
2734             &:visited {
2735                 color: #538200;
2736             }
2737         }
2738     }
2739
2740 }
2741
2742 .ui-widget {
2743     font-family: inherit;
2744     font-size: inherit;
2745
2746     input,
2747     select,
2748     textarea,
2749     button {
2750         font-family: inherit;
2751         font-size: inherit;
2752     }
2753 }
2754
2755 .statictabs {
2756     > ul {
2757         background: none repeat scroll 0 0 transparent;
2758         border: 0 none;
2759         border-bottom-left-radius: 4px;
2760         border-bottom-right-radius: 4px;
2761         border-top-left-radius: 4px;
2762         border-top-right-radius: 4px;
2763         color: #222222;
2764         font-size: 100%;
2765         font-weight: bold;
2766         line-height: 1.3;
2767         list-style: none outside none;
2768         margin: 0;
2769         outline: 0 none;
2770         padding: .2em .2em 0;
2771         text-decoration: none;
2772
2773         &::after {
2774             clear: both;
2775         }
2776
2777         &::before,
2778         &::after {
2779             content: "";
2780             display: table;
2781         }
2782
2783         li {
2784             background: none repeat scroll 0 0 #E6F0F2;
2785             border: 1px solid #B9D8D9;
2786             border-bottom: 0 none;
2787             border-top-left-radius: 4px;
2788             border-top-right-radius: 4px;
2789             color: #555555;
2790             float: left;
2791             font-weight: normal;
2792             list-style: none outside none;
2793             margin-bottom: 0;
2794             margin-right: .4em;
2795             padding: 0;
2796             position: relative;
2797             top: 1px;
2798             white-space: nowrap;
2799
2800             &.active {
2801                 background-color: #FFFFFF;
2802                 color: #212121;
2803                 font-weight: normal;
2804                 padding-bottom: 1px;
2805
2806                 a {
2807                     background: none repeat scroll 0 0 transparent;
2808                     color: #000000;
2809                     cursor: text;
2810                     font-weight: bold;
2811                     outline: 0 none;
2812                     top: 1px;
2813                 }
2814             }
2815
2816             a {
2817                 color: #004D99;
2818                 cursor: pointer;
2819                 float: left;
2820                 padding: .5em 1em;
2821                 text-decoration: none;
2822
2823                 &:hover {
2824                     background-color: #EDF4F5;
2825                     border-top-left-radius: 4px;
2826                     border-top-right-radius: 4px;
2827                     color: #538200;
2828                 }
2829             }
2830         }
2831     }
2832
2833     .tabs-container {
2834         background: none repeat scroll 0 0 transparent;
2835         border: 1px solid #B9D8D9;
2836         border-bottom-left-radius: 4px;
2837         border-bottom-right-radius: 4px;
2838         color: #222222;
2839         display: block;
2840         padding: 1em 1.4em;
2841     }
2842 }
2843
2844 .toptabs {
2845         .ui-tabs-panel {
2846             background: #FFF none;
2847         }
2848 }
2849
2850 .authref {
2851     font-style: normal;
2852     text-indent: 4em;
2853 }
2854
2855 .seefrom,
2856 .seealso {
2857     font-style: italic;
2858     text-indent: 2em;
2859 }
2860
2861 #authfinderops {
2862     float: right;
2863 }
2864
2865 .authorizedheading {
2866     font-weight: bold;
2867 }
2868
2869 .authres_notes,
2870 .authres_seealso,
2871 .authres_otherscript {
2872     padding-top: 3px;
2873 }
2874
2875 .authres_notes {
2876     font-style: italic;
2877 }
2878
2879
2880 .contents {
2881     width: 75%;
2882
2883     .r {
2884         display: inline;
2885     }
2886
2887     .t {
2888         display: inline;
2889         font-weight: bold;
2890
2891         &:first-child {
2892             &::before {
2893                 content: "→ ";
2894             }
2895         }
2896
2897         &::before {
2898             content: "\A→ ";
2899             white-space: pre;
2900         }
2901     }
2902 }
2903
2904 .contentblock {
2905     margin-left: 2em;
2906     position: relative;
2907 }
2908
2909 #hierarchies {
2910     a {
2911         color: #069;
2912         font-weight: normal;
2913         text-decoration: underline;
2914
2915         &:hover {
2916             color: #990033;
2917         }
2918     }
2919 }
2920
2921 #didyoumeanopac,
2922 #didyoumeanintranet {
2923     float: left;
2924     width: 260px;
2925 }
2926
2927 .pluginlist {
2928     padding-bottom: 10px;
2929 }
2930
2931 .plugin {
2932     margin: 0 1em 1em 0;
2933 }
2934
2935 .pluginname {
2936     background-color: #E6F0F2;
2937     cursor: move;
2938     margin: .3em;
2939     padding-bottom: 4px;
2940     padding-left: .2em;
2941
2942     .ui-icon {
2943         float: right;
2944     }
2945 }
2946
2947 .plugindesc {
2948     padding: .4em;
2949 }
2950
2951 .ui-sortable-placeholder {
2952     border: 1px dotted #000;
2953     height: 80px;
2954     visibility: visible;
2955
2956     * {
2957         visibility: hidden;
2958     }
2959 }
2960
2961 // jQuery UI Datepicker
2962 .ui-datepicker {
2963     box-shadow: 1px 1px 3px 0 #666;
2964
2965     table {
2966         border: 0;
2967         border-collapse: collapse;
2968         font-size: .9em;
2969         margin: 0 0 .4em;
2970         width: 100%;
2971     }
2972
2973     th {
2974         background: transparent none;
2975         border: 0;
2976         font-weight: bold;
2977         padding: .7em .3em;
2978         text-align: center;
2979     }
2980 }
2981
2982 .ui-datepicker-trigger {
2983     vertical-align: middle;
2984 }
2985
2986 // css for timepicker
2987 .ui-timepicker-div {
2988     dl {
2989         text-align: left;
2990
2991         dd {
2992             margin: 0 10px 10px 65px;
2993         }
2994
2995         dt {
2996             height: 25px;
2997             margin-bottom: -25px;
2998         }
2999
3000         td {
3001             font-size: 90%;
3002         }
3003     }
3004
3005     .ui-widget-header {
3006         margin-bottom: 8px;
3007     }
3008 }
3009
3010 .ui-tpicker-grid-label {
3011     background: none;
3012     border: 0;
3013     margin: 0;
3014     padding: 0;
3015 }
3016
3017 .ui_tpicker_second,
3018 .ui_tpicker_millisec,
3019 .ui_tpicker_microsec {
3020     display: none;
3021 }
3022
3023 // jQuery UI Accordion
3024 .ui-accordion-header,
3025 .ui-widget-content .ui-accordion-header {
3026     font-size: 110%;
3027     font-weight: bold;
3028 }
3029
3030 video {
3031     width: 480px;
3032 }
3033
3034 // Bootstrap overrides
3035
3036 .dropdown-header {
3037     border-top: 1px solid #EEE;
3038     color: #000;
3039     font-weight: bold;
3040     margin-top: 5px;
3041     padding-left: 10px;
3042
3043     &:first-child {
3044         border-top: 0;
3045     }
3046 }
3047
3048 nav {
3049     background: #E6F0F2 none;
3050     border: 0;
3051 }
3052
3053 .navbar-collapse {
3054     background: #E6F0F2 none;
3055     box-shadow: none;
3056 }
3057
3058 .navbar-nav {
3059     li {
3060         list-style: none;
3061
3062         &.open {
3063             li {
3064                 a {
3065                     font-weight: normal;
3066                 }
3067             }
3068         }
3069
3070         a {
3071             font-weight: bold;
3072             padding-bottom: .4em;
3073             padding-top: .4em;
3074         }
3075     }
3076 }
3077
3078 .nav .open > a,
3079 .nav .open > a:hover,
3080 .nav .open > a:focus {
3081     background-color: transparent;
3082     border: 0;
3083 }
3084
3085 .nav > li > a:hover,
3086 .nav > li > a:focus {
3087     background-color: transparent;
3088     text-decoration: none;
3089 }
3090
3091 .pagination {
3092     margin:.5em .8em;
3093
3094     .active {
3095         a {
3096             background-color: #5A9EAA;
3097             border-color: #5A9EAA;
3098
3099             &:hover,
3100             &:focus {
3101                 background-color: #5A9EAA;
3102                 border-color: #5A9EAA;
3103             }
3104         }
3105
3106         span {
3107             background-color: #5A9EAA;
3108             border-color: #5A9EAA;
3109
3110             &:hover,
3111             &:focus {
3112                 background-color: #5A9EAA;
3113                 border-color: #5A9EAA;
3114             }
3115         }
3116     }
3117 }
3118
3119 button,
3120 .btn {
3121     border-color: #ADADAD #ADADAD #949494;
3122     font-family: $font-main;
3123
3124     &.btn-link {
3125         border: 0;
3126     }
3127 }
3128
3129 .btn-xs,
3130 .btn-group-xs > .btn {
3131     font-size: 10.5px;
3132     padding: 3px 5px;
3133 }
3134
3135 #toolbar {
3136     .dropdown-menu {
3137         border-top-width: 1px;
3138         font-size: 13px;
3139     }
3140
3141     &.floating {
3142         border-radius: 0;
3143         margin-top: 0;
3144     }
3145 }
3146
3147 #changelanguage {
3148     background: #FFF none;
3149     border-top: 1px solid #EEE;
3150     min-height: $language-footer-min-height;
3151
3152     .dropdown-menu {
3153         > li {
3154             > a,
3155             > span {
3156                 padding: 5px 15px;
3157             }
3158         }
3159     }
3160
3161     .navbar-text {
3162         margin: 0;
3163
3164         span {
3165             display: block;
3166             line-height: 20px;
3167         }
3168     }
3169
3170     .navbar-nav {
3171         li {
3172             a {
3173                 line-height: 20px;
3174             }
3175         }
3176     }
3177 }
3178
3179 .loggedout {
3180     color: #004D99;
3181     font-weight: bold;
3182     padding: .4em .2em;
3183 }
3184
3185 .navbar-fixed-bottom {
3186     .navbar-inner {
3187         min-height: 0;
3188         padding: .4em 0;
3189     }
3190
3191     .nav > li {
3192         border-right: 1px solid #CCC;
3193
3194         > a {
3195             font-weight: normal;
3196         }
3197
3198         &:last-child {
3199             border-right: 0;
3200         }
3201
3202         &.navbar-text {
3203             line-height: normal;
3204             padding: .4em .7em;
3205         }
3206     }
3207 }
3208
3209 .tooltip {
3210     &.bottom {
3211         .tooltip-arrow {
3212             border-bottom-color: #EEE;
3213         }
3214
3215         .tooltip-inner {
3216             background-color: #FFFFFF;
3217             border: 1px solid rgba(0, 0, 0, .2);
3218             box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
3219             color: #000;
3220             font-size: 120%;
3221             padding: 1em;
3222         }
3223     }
3224 }
3225
3226 .separator {
3227     color: #666;
3228     padding: 0 .2em;
3229 }
3230
3231 .close {
3232     filter: none;
3233     float: none;
3234     font-size: inherit;
3235     font-weight: normal;
3236     line-height: 1.5;
3237     opacity: inherit;
3238     position: inherit;
3239     right: auto;
3240     text-shadow: none;
3241     top: auto;
3242
3243     &:hover {
3244         color: inherit;
3245         filter: inherit;
3246         font-size: inherit;
3247         opacity: inherit;
3248     }
3249 }
3250
3251
3252 label {
3253     .radio &,
3254     .checkbox & {
3255         margin-left: 20px;
3256         padding-left: 0;
3257     }
3258 }
3259
3260 .radio {
3261     input {
3262         &[type="radio"] {
3263             margin-left: 0;
3264             position: relative;
3265         }
3266     }
3267 }
3268
3269 .checkbox {
3270     input {
3271         &[type="checkbox"] {
3272             margin-left: 0;
3273             position: relative;
3274         }
3275     }
3276 }
3277
3278 .modal-header {
3279     .closebtn {
3280         margin-top: 4px;
3281     }
3282 }
3283
3284 .closebtn {
3285     color: #000;
3286     filter: alpha(opacity = 20);
3287     float: right;
3288     font-size: 21px;
3289     font-weight: bold;
3290     line-height: 1;
3291     opacity: .2;
3292     text-shadow: 0 1px 0 #FFFFFF;
3293
3294     &:hover,
3295     &:focus {
3296         color: #000;
3297         cursor: pointer;
3298         filter: alpha(opacity = 50);
3299         opacity: .5;
3300         text-decoration: none;
3301     }
3302 }
3303
3304 .modal-body {
3305     background-color: #FFF;
3306     overflow-y: auto;
3307
3308     fieldset,
3309     ol {
3310         background-color: transparent;
3311         border: 0;
3312         margin: 0;
3313         padding: 0;
3314     }
3315 }
3316
3317 .modal-content {
3318     background-color: #EDF4F6;
3319 }
3320
3321 .btn-group {
3322     label,
3323     select {
3324         font-size: 13px;
3325     }
3326 }
3327
3328 .tooltip-inner {
3329     white-space: pre-wrap;
3330 }
3331
3332 pre {
3333     background-color: transparent;
3334     border: 0;
3335     border-radius: 0;
3336     color: inherit;
3337     display: block;
3338     font-size: inherit;
3339     line-height: inherit;
3340     margin: 0;
3341     padding: 0;
3342     word-break: break-all;
3343     word-wrap: break-word;
3344 }
3345
3346 code {
3347     background-color: transparent;
3348     border-radius: 0;
3349     color: inherit;
3350     font-size: inherit;
3351     padding: 0;
3352 }
3353
3354 .pagination > li > a,
3355 .pagination > li > span {
3356     font-weight: bold;
3357 }
3358
3359 // End Bootstrap overrides
3360
3361 .waiting {
3362     cursor: wait;
3363 }
3364
3365 #jobpanel,
3366 #jobstatus,
3367 #jobfailed {
3368     display: none;
3369 }
3370
3371 #jobstatus {
3372     margin: .4em;
3373 }
3374
3375 #jobprogress {
3376     background: url("../img/progress.png") -300px 0 no-repeat;
3377     border: 1px solid #666;
3378     display: inline-block;
3379     height: 10px;
3380     width: 200px;
3381  }
3382
3383 .progress_panel {
3384     border: 2px solid #EEE;
3385     border-radius: 5px;
3386     clear: both;
3387     font-size: 120%;
3388     margin: 1em 0;
3389     padding: 1em;
3390 }
3391
3392 progress {
3393     width: 50%;
3394 }
3395
3396 #selections {
3397     white-space: normal;
3398     width: 100%;
3399
3400     input {
3401         margin: 0 2px;
3402         vertical-align: middle;
3403     }
3404
3405     span {
3406         background-color: #EBF3FF;
3407         border-radius: 5px;
3408         font-size: 75%;
3409         line-height: 240%;
3410         margin: 3px;
3411         padding: 3px;
3412         white-space: nowrap;
3413
3414         &.selected {
3415             background-color: #CCE0FC;
3416         }
3417     }
3418 }
3419
3420 #changepasswordf {
3421     input {
3422         &[type="text"],
3423         &[type="password"] {
3424             font-family: $font-monospace;
3425             font-size: 140%;
3426             padding: .3em;
3427         }
3428     }
3429 }
3430
3431 // Class to be added to toolbar when it starts being fixed at the top of the screen
3432
3433 .floating {
3434     box-shadow: 0 3px 2px 0 rgba(0, 0, 0, .5);
3435     z-index: 100;
3436 }
3437
3438 .inline {
3439     display: inline;
3440 }
3441
3442 .nowrap {
3443     white-space: nowrap;
3444 }
3445
3446 .tag_editor {
3447     background: transparent url("../img/edit-tag.png") top left no-repeat;
3448     display: block;
3449     float: left;
3450     height: 16px;
3451     margin: 4px;
3452     overflow: hidden;
3453     text-indent: 100%;
3454     white-space: nowrap;
3455     width: 16px;
3456
3457     &.upload {
3458         background: transparent none;
3459         font-size: 90%;
3460         height: unset;
3461         overflow: unset;
3462         text-indent: unset;
3463         width: unset;
3464     }
3465 }
3466
3467 .browse-controls {
3468     margin-left: 1.1em;
3469     margin-right: .5em;
3470     padding-bottom: 1em;
3471     padding-top: 1em;
3472 }
3473
3474 #browse-return-to-results {
3475     background-color: #E8F0F6;
3476     border: 1px solid #B9D8D9;
3477     border-bottom-width: 0;
3478     border-top-left-radius: 5px;
3479     border-top-right-radius: 5px;
3480     display: block;
3481     padding: .5em;
3482     text-align: center;
3483 }
3484
3485 .browse-button {
3486     background-color: #FFF;
3487     border: 1px solid #B9D8D9;
3488     color: #004D99;
3489     display: block;
3490     overflow: hidden;
3491     padding: .4em .6em;
3492     text-align: center;
3493     white-space: nowrap;
3494     width: 100%;
3495
3496     &:hover {
3497         background: #FAFAFA;
3498     }
3499 }
3500
3501 span {
3502     &.browse-button {
3503         background: #FAFAFA;
3504         color: #222;
3505     }
3506
3507     &.circ-hlt {
3508         color: #CC0000;
3509         font-weight: bold;
3510     }
3511
3512     &.expired {
3513         color: #990000;
3514         font-style: italic;
3515     }
3516
3517     &.name {
3518         font-style: italic;
3519         font-weight: bold;
3520     }
3521
3522     &.required {
3523         color: #C00;
3524         font-style: italic;
3525         margin-left: .5em;
3526     }
3527
3528     &.important {
3529         color: #EAC117;
3530         font-style: italic;
3531         margin-left: .5em;
3532     }
3533
3534     &[class*=" label-"] {
3535         color: #FFF;
3536         display: inline;
3537         font-size: 75%;
3538         font-weight: normal;
3539         padding: .2em .6em .3em;
3540     }
3541 }
3542
3543
3544 .result-biblio-itemtype {
3545     float: right;
3546     font-size: 85%;
3547     margin: .5em;
3548     padding: .5em;
3549     text-align: center;
3550
3551     img {
3552         display: block;
3553         margin: auto;
3554         margin-bottom: 2px;
3555     }
3556 }
3557
3558 #browse-previous {
3559     border-bottom-width: 0;
3560 }
3561
3562 #browse-next {
3563     border-bottom-right-radius: 5px;
3564     border-bottom-left-radius: 5px;
3565 }
3566
3567 .loading-overlay {
3568     background-color: #FFFFFF;
3569     cursor: wait;
3570     height: 100%;
3571     left: 0;
3572     opacity: .7;
3573     position: fixed;
3574     top: 0;
3575     width: 100%;
3576     z-index: 1000;
3577
3578     div {
3579         background: transparent url("../img/loading.gif") top left no-repeat;
3580         font-size: 175%;
3581         font-weight: bold;
3582         height: 2em;
3583         left: 50%;
3584         margin: -1em 0 0 -2.5em;
3585         padding-left: 50px;
3586         position: absolute;
3587         top: 50%;
3588         width: 15em;
3589     }
3590 }
3591
3592 #merge_invoices {
3593     display: none;
3594     margin: 1em auto;
3595 }
3596
3597 #merge {
3598     margin: .5em 0 0;
3599 }
3600
3601 #merge_table {
3602     tr {
3603         &.active {
3604             td {
3605                 background-color: #FFFFCC;
3606             }
3607         }
3608     }
3609 }
3610
3611 input.renew {
3612     margin-right: 1em;
3613 }
3614
3615 .renewals {
3616     display: block;
3617     font-size: .8em;
3618     padding: .5em;
3619 }
3620
3621 .dialog input#renewonholdduedate {
3622     padding: 2px;
3623 }
3624
3625 .date-select {
3626     label {
3627         display: inline-block;
3628         width: 40%;
3629     }
3630 }
3631
3632 #newonholdduedate {
3633     display: none;
3634 }
3635
3636 #transport-types {
3637     padding-top: .5px;
3638 }
3639
3640 #i18nMenu {
3641     .navbar-text {
3642         .currentlanguage {
3643             color: #000;
3644             font-weight: bold;
3645         }
3646     }
3647
3648     a {
3649         &.currentlanguage {
3650             &:link,
3651             &:visited {
3652                 font-weight: bold;
3653             }
3654         }
3655
3656         .sublanguage-selected {
3657             color: #000;
3658             font-weight: bold;
3659         }
3660     }
3661 }
3662
3663 .onsite_checkout-select {
3664     label,
3665     #circ_circulation_issue & {
3666         font-size: inherit;
3667         font-weight: normal;
3668     }
3669 }
3670
3671 .onsite_checkout {
3672     color: #CC0000;
3673 }
3674
3675 .onsite-checkout-only {
3676     background-color: rgba(255, 242, 206, .5);
3677     border: 1px solid #FFF2CE;
3678     border-radius: 4px;
3679 }
3680
3681 .branchgriditem {
3682     background-color: #FFFFFF;
3683     border: 1px solid #B9D8D9;
3684     border-radius: 3px;
3685     display: table-cell;
3686     float: left;
3687     margin: 3px;
3688     padding: .3em;
3689 }
3690
3691 .branchgridrow {
3692     display: table-row;
3693 }
3694
3695 .branchselector {
3696     display: table;
3697 }
3698
3699 .hq-author {
3700     font-weight: bold;
3701 }
3702
3703 #cn_browser_table_wrapper > #cn_browser_table {
3704     margin: auto;
3705     width: 90%;
3706 }
3707
3708 #new_rule {
3709     background-color: #F4F8F9;
3710     border: 2px solid #B9D8D9;
3711     border-radius: 5px;
3712     display: none;
3713     margin: .3em;
3714     padding: .3em;
3715 }
3716
3717
3718 .blocks {
3719     margin-bottom: .3em;
3720 }
3721
3722 .remove_rule {
3723     font-size: 80%;
3724     padding-left: .7em;
3725 }
3726
3727 .underline {
3728     text-decoration: underline;
3729 }
3730
3731 .overline {
3732     text-decoration: overline;
3733 }
3734
3735 .order-control {
3736     padding-right: 5px;
3737 }
3738
3739 #borrower_message {
3740     margin-top: 10px;
3741 }
3742
3743 .form-group {
3744     margin-bottom: 10px;
3745
3746     label {
3747         font-weight: bold;
3748     }
3749 }
3750
3751
3752 .form-message {
3753     background-color: #FFF;
3754     border: 1px solid #A4BEDD;
3755     border-radius: 5px;
3756     margin: 1em;
3757     padding: .5em;
3758 }
3759
3760 .modal-textarea {
3761     width: 98%;
3762 }
3763
3764 #pat_member {
3765     #patron_list_dialog,
3766     #searchresults {
3767         display: none;
3768     }
3769 }
3770
3771 #patron_search {
3772     #filters {
3773         display: none;
3774     }
3775 }
3776
3777 #fixedlengthbuilderaction {
3778     border: 3px solid #E6F0F2;
3779     left: 80%;
3780     padding: 5px;
3781     position: relative;
3782     top: -80px;
3783     width: 12%;
3784 }
3785
3786 #interlibraryloans {
3787     #dataPreviewLabel {
3788         margin: .3em 0;
3789     }
3790
3791     .bg-info {
3792         overflow: auto;
3793         position: relative;
3794     }
3795
3796     .format {
3797         h4 {
3798             margin-bottom: 20px;
3799         }
3800
3801         h5 {
3802             margin-top: 20px;
3803         }
3804
3805         input {
3806             margin: 10px 0;
3807         }
3808
3809         li {
3810             list-style: none;
3811         }
3812     }
3813
3814     #add-new-fields {
3815         margin: 1em;
3816     }
3817
3818     #column-toggle,
3819     #reset-toggle {
3820         font-weight: 700;
3821         line-height: 1.5em;
3822         margin: 15px 0;
3823     }
3824
3825     #freeform-fields {
3826         .custom-name {
3827             margin-right: 1em;
3828             text-align: right;
3829             width: 9em;
3830         }
3831
3832         .delete-new-field {
3833             margin-left: 1em;
3834         }
3835     }
3836
3837     #search-summary {
3838         position: absolute;
3839         top: 50%;
3840         transform: translateY(-50%);
3841     }
3842
3843     #generic_confirm_search_count {
3844         margin: 1em 0 1em 10em;
3845     }
3846
3847     #generic_confirm_search {
3848         display: block;
3849         visibility: hidden;
3850         margin: 1em 0 1em 10em;
3851     }
3852
3853     #partnerSearch {
3854         .modal-dialog {
3855             width: 50vw;
3856         }
3857         .modal-body {
3858             max-height: 70vh;
3859         }
3860     }
3861 }
3862
3863 .ill-view-panel {
3864     margin-top: 15px;
3865
3866     .notesopac {
3867         display: inline-block;
3868     }
3869 }
3870
3871 #illfilter_dateplaced_start,
3872 #illfilter_datemodified_start,
3873 #illfilter_dateplaced_end,
3874 #illfilter_datemodified_end {
3875     width: 80%;
3876 }
3877
3878 #requestattributes {
3879     font-family: monospace;
3880     line-height: 1.3em;
3881 }
3882
3883 #ill-requests {
3884     width: 100% !important;
3885 }
3886
3887 .ar-title, .hq-title {
3888     .biblio-title {
3889         font-weight: bold;
3890     }
3891 }
3892
3893 #ill-issue-title {
3894     margin: 20px 0 30px 0;
3895 }
3896
3897 .ill_availability_sourcename {
3898     margin-top: 20px;
3899 }
3900
3901 #stockrotation {
3902     h3 {
3903         margin: 30px 0 10px 0;
3904     }
3905     .dialog {
3906         h3 {
3907             margin: 10px 0;
3908         }
3909         margin-bottom: 20px;
3910     }
3911     .highlight_stage {
3912         font-weight: bold;
3913     }
3914 }
3915
3916 #catalog_stockrotation .highlight_stage {
3917     font-weight: bold;
3918 }
3919
3920 #stockrotation {
3921     #rota_form {
3922         textarea {
3923             width: 300px;
3924             height: 100px;
3925         }
3926         #name {
3927             width: 300px;
3928         }
3929         fieldset {
3930             width: auto;
3931         }
3932     }
3933     #stage_form fieldset, #add_rota_item_form fieldset {
3934         width: auto;
3935     }
3936     .dialog.alert {
3937         ul {
3938             margin: 20px 0;
3939         }
3940         li {
3941             list-style-type: none;
3942         }
3943     }
3944 }
3945
3946 #catalog_stockrotation {
3947     .item_select_rota {
3948         vertical-align: middle;
3949     }
3950     h1 {
3951         margin-bottom: 20px;
3952     }
3953 }
3954
3955 #stockrotation td.actions, #catalog_stockrotation td.actions {
3956     vertical-align: middle;
3957 }
3958
3959 #stockrotation .stage, #catalog_stockrotation .stage {
3960     display: inline-block;
3961     padding: 5px 7px;
3962     margin: 3px 0 3px 0;
3963     border-radius: 5px;
3964     background-color: rgba(0, 0, 0, 0.1);
3965 }
3966
3967 #stage_list_headings {
3968     font-weight: bold;
3969     span {
3970         padding: 3px;
3971     }
3972 }
3973
3974 #manage_stages {
3975     ul {
3976         padding-left: 0;
3977     }
3978     li {
3979         list-style: none;
3980         margin-bottom: 5px;
3981         span {
3982             padding: 6px 3px;
3983         }
3984     }
3985     .stagename {
3986         width: 15em;
3987         display: inline-block;
3988     }
3989     .stageduration {
3990         width: 10em;
3991         display: inline-block;
3992     }
3993     .stageactions {
3994         display: inline-block;
3995     }
3996     li:nth-child(odd) {
3997         background-color: #F3F3F3;
3998     }
3999     .drag_handle {
4000         margin-right: 6px;
4001         cursor: move;
4002     }
4003     .drag_placeholder {
4004         height: 2em;
4005         border: 1px dotted #aaa;
4006     }
4007     h3 {
4008         display: inline-block;
4009     }
4010     #ajax_status {
4011         display: inline-block;
4012         border: 1px solid #bcbcbc;
4013         border-radius: 5px;
4014         padding: 5px;
4015         margin-left: 10px;
4016         background: #f3f3f3;
4017     }
4018     #manage_stages_help {
4019         margin: 20px 0;
4020     }
4021 }
4022
4023 #payForm {
4024     fieldset {
4025         &.rows {
4026             padding-left: 1em;
4027             padding-right: 2em;
4028         }
4029     }
4030 }
4031
4032 #helper {
4033     span {
4034         display: none;
4035     }
4036 }
4037
4038 #logged-in-info-full {
4039     display: none;
4040 }
4041
4042 .loggedin-menu-label {
4043     color: #777;
4044     font-size: 12px;
4045     line-height: 1.42857143;
4046     padding: 4px 12px;
4047     white-space: nowrap;
4048
4049     span {
4050         color: #000;
4051         font-weight: bold;
4052     }
4053
4054     &.divider {
4055         padding: 0;
4056     }
4057 }
4058
4059 .lastborrower {
4060     background-color: #E6F0F2;
4061     border: 1px solid #95C6D0;
4062     box-shadow: 1px 1px 1px 0 #999;
4063     color: #CC0000;
4064     margin: .4em 0;
4065     padding: .3em .5em .3em .5em;
4066 }
4067
4068 #lastborrower-ref {
4069     border-radius: 5px 0px 0px 5px;
4070     float: left;
4071 }
4072
4073 #lastborrower-remove {
4074     border-radius: 0px 5px 5px 0px;
4075     cursor: pointer;
4076     float: right;
4077 }
4078
4079 #lastborrower-window {
4080     display: none;
4081     position: absolute;
4082     right: 5px;
4083     top: 0px;
4084 }
4085
4086 /* ==== MODULE LINKS - Start ==== */
4087 .buttons-list {
4088     // List containing the module links
4089     margin-bottom: 30px;
4090     padding: 0;
4091
4092     li {
4093         // Standard attributes for the list elements
4094         list-style-type: none;
4095
4096         a {
4097             &.circ-button {
4098                 // Class used for each module link
4099                 background-color: #F4F8F9;
4100                 background-position: 5px 3px;
4101                 background-repeat: no-repeat;
4102                 border: 2px solid #B9D8D9;
4103                 border-radius: 6px;
4104                 box-sizing: content-box;
4105                 color: #000000;
4106                 display: block;
4107                 font-size: 110%;
4108                 font-weight: bold;
4109                 margin: .5em 0;
4110                 max-width: 260px;
4111                 padding: 8px;
4112                 text-decoration: none;
4113
4114                 &:hover {
4115                     // Class used for each module link hover state
4116                     border-color: #538200;
4117                     color: #538200;
4118                 }
4119             }
4120         }
4121     }
4122 }
4123
4124 .about h2 {
4125     border-bottom: 1px solid #B9D8D9;
4126     padding: .5em .2em;
4127     margin:  .5em 0;
4128 }
4129
4130 .columns-2 {
4131     columns: 2 auto;
4132     column-gap: 2.5em;
4133 }
4134
4135 .columns-3 {
4136     columns: 3 auto;
4137     column-gap: 2.5em;
4138 }
4139
4140 .columns-4 {
4141     columns: 4 auto;
4142     column-gap: 2em;
4143 }
4144
4145 // ==== MODULE LINKS - End ====
4146
4147 #catalog-search-link {
4148     border-right: 1px solid lighten( #E6F0F2, 15% );
4149     padding-right: .3em;
4150 }
4151
4152 #catalog-search-dropdown {
4153     padding: 0;
4154
4155     & > a {
4156         border-left: 1px solid darken( #B4D2D8, 5% );
4157         margin-right: .6em;
4158         padding: .4em .6em;
4159
4160         &:hover,
4161         &.catalog-search-dropdown-hover {
4162             background-color: darken( #E6F0F2, 5% );
4163             border-left: 1px solid darken( #B4D2D8, 15% );
4164         }
4165     }
4166 }
4167
4168 .adlibris-cover {
4169     max-height: 120px;
4170 }
4171
4172 .adlibris-cover-big {
4173     max-height: 200px;
4174 }
4175
4176 #tools_holidays {
4177     .radio,
4178     .checkbox {
4179         label {
4180             margin-left: 0;
4181         }
4182     }
4183 }
4184
4185 /* Permissions */
4186
4187 #permissionstree {
4188     display: inline-block;
4189
4190     label {
4191         cursor: pointer;
4192
4193         &:hover {
4194             color: #004d99;
4195         }
4196     }
4197 }
4198
4199 .main_permission {
4200     font-size: 110%;
4201     font-weight: bold;
4202 }
4203
4204 .permissioncode {
4205     color: #666;
4206     font-style: italic;
4207 }
4208
4209 .permission-highlight {
4210     background-color: #FFC !important;
4211 }
4212
4213 .togglechildren_on,
4214 .togglechildren_off {
4215     float: right;
4216 }
4217
4218 .togglechildren_off,
4219 .children {
4220     display: none;
4221 }
4222
4223 .open {
4224     .togglechildren_off {
4225         display: inline;
4226     }
4227
4228     .togglechildren_on {
4229         display: none;
4230     }
4231 }
4232
4233 .parent {
4234     border: 1px solid #DDD;
4235     border-bottom-width: 0;
4236     padding: 5px;
4237
4238     &:last-child {
4239         border-bottom-width: 1px;
4240     }
4241
4242     &:nth-child(odd) {
4243         background-color: #F8F8F8;
4244     }
4245 }
4246
4247
4248 .superlibrarian-hint {
4249     color: #000;
4250     padding: .2em 0;
4251     text-indent: 2em;
4252 }
4253
4254 .child-flags {
4255     background-color: #FFF;
4256     border: 1px solid #DDD;
4257     border-bottom-width: 0;
4258     margin: 0 5px 0 20px;
4259     padding: 5px;
4260
4261     &:first-child {
4262         margin-top: 10px;
4263     }
4264
4265     &:last-child {
4266         border-bottom-width: 1px;
4267     }
4268
4269     &:nth-child(odd) {
4270         background-color: #EEE;
4271     }
4272 }
4273
4274 .header-menu-link {
4275     display: none;
4276     font-weight: bold;
4277     padding: .4em .6em;
4278 }
4279
4280 #user-menu {
4281     position: absolute;
4282     right: 5px;
4283     top: 0;
4284 }
4285
4286 div#makechart ol li {
4287     list-style: none;
4288 }
4289
4290 div .suggestion_note {
4291     background: transparent none;
4292     border-style: dotted;
4293     border-width: 1px 0 0 0;
4294     font-size: 90%;
4295     padding: 2px 0 0 0;
4296
4297     i {
4298         color: #CCC;
4299     }
4300 }
4301
4302 @media (min-width: 200px) {
4303
4304 }
4305
4306 @media (max-width: 767px) {
4307     .header-menu-link {
4308         display: inline-block;
4309     }
4310
4311     #catalog-search-link {
4312         display: none;
4313         padding: 0;
4314     }
4315
4316     #cartmenulink {
4317         background: transparent none;
4318         padding-left: 1.5em;
4319     }
4320
4321     #changelanguage {
4322         li {
4323             float: left;
4324
4325             li {
4326                 float: none;
4327             }
4328         }
4329
4330         .open {
4331             .dropdown-menu {
4332                 background-color: #FFF;
4333                 border: 1px solid #ccc;
4334                 position: absolute;
4335             }
4336         }
4337     }
4338
4339     #header {
4340         background-color: #FFF;
4341         border: 1px solid #CCC;
4342         margin-bottom: 1em;
4343
4344         a {
4345             font-weight: normal;
4346             padding-left: 1.5em;
4347
4348             &:hover {
4349                 background-color: #0070A9;
4350                 color: #FFF;
4351             }
4352         }
4353
4354         ul {
4355             border: 0;
4356             box-shadow: unset;
4357             float: none;
4358             left: auto;
4359             position: relative;
4360             right: auto;
4361
4362             &.dropdown-menu {
4363                 display: block;
4364             }
4365         }
4366
4367         .dropdown-menu {
4368             li {
4369                 a {
4370                     color: #004D99;
4371
4372                     &:hover {
4373                         color: #FFF;
4374                     }
4375                 }
4376             }
4377         }
4378
4379         .dropdown-toggle {
4380             display: none;
4381         }
4382     }
4383
4384     h1#logo {
4385         float: none;
4386         margin: auto;
4387     }
4388
4389     #marcPreview {
4390         margin: 0;
4391         width: auto;
4392     }
4393
4394     .navbar-fixed-bottom .nav > li {
4395         border-right: 0;
4396     }
4397
4398     #user-menu {
4399         .open {
4400             .dropdown-menu {
4401                 background-color: #FFF;
4402                 border: 1px solid #ccc;
4403                 position: absolute;
4404             }
4405         }
4406
4407         li {
4408             float: left;
4409
4410             li {
4411                 float: none;
4412             }
4413         }
4414     }
4415 }
4416
4417 @media (max-width: 768px) {
4418     .navbar-nav {
4419         li {
4420
4421             a {
4422                 padding: .4em .6em;
4423             }
4424         }
4425     }
4426 }
4427
4428 @media only screen and ( max-width: 768px ) {
4429     .browse-button {
4430         display: inline-block;
4431         width: 50%;
4432     }
4433
4434     #browse-previous {
4435         border-bottom-left-radius: 5px;
4436         border-bottom-width: 1px;
4437         border-right-width: 0;
4438     }
4439
4440     #browse-next {
4441         border-bottom-left-radius: 0;
4442         border-bottom-right-radius: 5px;
4443     }
4444 }
4445
4446 @media (min-width: 800px) {
4447
4448
4449
4450     #helper {
4451         i {
4452             display: none;
4453         }
4454
4455         span {
4456             display: inline;
4457         }
4458     }
4459
4460     #logged-in-info-full {
4461         display: inline;
4462     }
4463
4464     #logged-in-info-brief {
4465         display: none;
4466     }
4467
4468     .loggedin-menu-label {
4469         display: none;
4470     }
4471 }
4472
4473 @media only screen and ( min-width: 1200px ) {
4474     .browse-button {
4475         display: inline-block;
4476         width: 50%;
4477     }
4478
4479     #browse-previous {
4480         border-bottom-left-radius: 5px;
4481         border-bottom-width: 1px;
4482         border-right-width: 0;
4483     }
4484
4485     #browse-next {
4486         border-bottom-left-radius: 0;
4487         border-bottom-right-radius: 5px;
4488     }
4489 }