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