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