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

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