koha-dev.rot13.org Git - srvgit/blob - koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss

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