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