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