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