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