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