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