xref: /webtrees/resources/css/minimal.css (revision 69100c6d2f376ba137a90d02f7e41a8ae5929352)
1/**
2 * webtrees: online genealogy
3 * Copyright (C) 2019 webtrees development team
4 * This program is free software: you can redistribute it and/or modify
5 * it under the terms of the GNU General Public License as published by
6 * the Free Software Foundation, either version 3 of the License, or
7 * (at your option) any later version.
8 * This program is distributed in the hope that it will be useful,
9 * but WITHOUT ANY WARRANTY; without even the implied warranty of
10 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
11 * GNU General Public License for more details.
12 * You should have received a copy of the GNU General Public License
13 * along with this program. If not, see <http://www.gnu.org/licenses/>.
14 */
15
16/* The minimal theme */
17@import "_base.css";
18@import "_block-charts.css";
19@import "_charts.css";
20@import "_colorbox.css";
21@import "_lists.css";
22@import "_mime-type-icons.css";
23@import "_on-screen-keyboard.css";
24@import "_tab-relatives.css";
25
26/* Colors for chart boxes, etc. */
27:root {
28  --sex-f-fg: #888888;
29  --sex-m-fg: #888888;
30  --sex-u-fg: #888888;
31  --sex-f-bg: #ffffff;
32  --sex-m-bg: #ffffff;
33  --sex-u-bg: #ffffff;
34	--chart-line: solid gray thin;
35	--chart-line-radius: 1rem;
36}
37
38/* Override Bootstrap formatting */
39.btn-link {
40	padding-left: 0.25rem;
41	padding-right: 0.25rem;
42}
43
44.table-given-name {
45    overflow-x: hidden;
46}
47
48.container-fluid {
49    padding-left: 5px;
50    padding-right: 5px;
51}
52
53table {
54	border-collapse: separate;
55}
56
57/*
58 * Pages have the following high-level structure:
59 *
60 * wt-global wt-theme-<THEME> wt-route-<ROUTE>
61 * +---wt-header-wrapper
62 * |   +---wt-header-container
63 * |       +---wt-header-content
64 * |           +---wt-accessibility-links
65 * |           +---wt-site-logo
66 * |           +---wt-site-title
67 * |           +---wt-header-search
68 * |           |   +---wt-header-search-form
69 * |           |       +---wt-header-search-field
70 * |           |       +---wt-header-search-button
71 * |           +---wt-secondary-navigation
72 * |           |   +---wt-user-menu
73 * |           +---wt-primary-navigation
74 * |               +---wt-genealogy-menu
75 * +---wt-main-wrapper
76 * |   +---wt-main-container
77 * |       +---wt-main-content
78 * |           +---wt-messages
79 * |           +---wt-page-title
80 * |           +---wt-page-options wt-page-options-xxxxx
81 * |           +---wt-page-content
82 * +---wt-footers
83 *     +---wt-footer wt-footer-xxxxx
84 */
85
86.wt-global {
87	/* Avoid extremes of black and white.  It is better for users with dyslexia. */
88	color: #0a0a0a;
89	background-color: #f9f9f9;
90}
91
92.wt-header-wrapper {
93}
94
95.wt-header-container {
96	margin-top: 1rem;
97}
98
99.wt-header-content {
100}
101
102.wt-accessibility-links {
103}
104
105.wt-site-logo {
106	display: none;
107}
108
109.wt-site-title {
110	order: 1;
111	flex: 1 1 0;
112	font-size: 1.75rem;
113}
114
115.wt-header-search {
116	order: 3;
117	flex: 0 0 15rem;
118}
119
120.wt-header-search-form {
121}
122
123.wt-header-search-field {
124}
125
126.wt-header-search-button {
127}
128
129.wt-secondary-navigation {
130	order: 2;
131	flex: 0 0 0;
132	white-space: nowrap;
133}
134
135.wt-user-menu {
136	flex-wrap: nowrap;
137}
138
139.wt-user-menu .nav-link {
140	padding: 0.5rem;
141}
142
143.wt-primary-navigation {
144	order: 4;
145	/* Extend to full page width */
146	flex: 0 1 100vw;
147	max-width: 100vw;
148	/* Recalculate margins for content */
149	margin: 0 calc(50% - 50vw);
150	padding: 0 calc(50vw - 50%);
151	border-bottom: 2px solid #aaa;
152}
153
154.wt-genealogy-menu {
155	justify-content: center;
156}
157
158.wt-genealogy-menu .nav-link {
159	padding: 0.5rem;
160}
161
162.wt-main-container {
163	/* Space between the header/footer and the main content. */
164	padding-top: 1rem;
165	padding-bottom: 1rem;
166}
167
168.wt-main {
169}
170
171.wt-messages {
172}
173
174.wt-page-title {
175	text-align: center;
176}
177
178.wt-page-content {
179	margin-top: 1rem;
180}
181
182.wt-footers {
183}
184
185.wt-footer {
186}
187
188.wt-footer-contact {
189}
190
191.wt-footer-cookies {
192	background: #aaa;
193	color: #fff;
194	transition: height 0.5s;
195}
196
197.wt-footer-page-views {
198}
199
200.wt-footer-powered-by {
201}
202
203.wt-footer-powered-by-webtrees {
204}
205
206/*
207 * The tree/user home pages
208 *
209 * wt-home-page / wt-user-page
210 * +---wt-main-blocks
211 * |   +---wt-block, wt-block-AAA
212 * |   +---wt-block, wt-block-BBB
213 * |   +---wt-block, wt-block-CCC
214 * +---wt-side-blocks
215 *     +---wt-block, wt-block-XXX
216 *     +---wt-block, wt-block-YYY
217 *     +---wt-block, wt-block-ZZZ
218 *
219 * Each block as the structure
220 * wt-block, wt-block-XXX
221 * +---wt-block-header, wt-block-header-XXX
222 * +---wt-block-content, wt-block-content-XXX
223 */
224
225.wt-block {
226	border: solid #000 1px;
227}
228
229.wt-block-header {
230	background-color: #fff;
231}
232
233.wt-block-content {
234}
235
236.wt-block-content .list_table {
237	border-spacing: 1px;
238	border: solid #000 1px;
239	border-right: 0;
240}
241
242.wt-block-content .list_value,
243.wt-block-content .list_value_wrap {
244	border: 0;
245	border-top: solid #000 1px;
246	border-right: solid #000 1px;
247}
248
249/*
250 * The individual page.
251 *
252 * wt-route-individual
253 * +---wt-header-wrapper
254 */
255
256.wt-individual-silhouette {
257	content: url(images/individual-silhouette-unknown.png);
258}
259
260.wt-individual-silhouette-f {
261	content: url(images/individual-silhouette-female.png);
262}
263
264.wt-individual-silhouette-m {
265	content: url(images/individual-silhouette-male.png);
266}
267
268/*
269 * Chart-boxes are used to build the various charts.
270 * Each type of chart will set its own size and hide/show content.
271 *
272 * wt-chart-box
273 * +--- wt-chart-box-thumbnail
274 * +--- wt-chart-box-extra
275 *      +--- wt-chart-box-zoom
276 *           +--- wt-chart-box-icon
277 *           +--- wt-chart-box-dropdown wt-chart-box-zoom-dropdown
278 *      +--- wt-chart-box-links
279 *           +--- wt-chart-box-icon
280 *           +--- wt-chart-box-dropdown wt-chart-box-links-dropdown
281 * +--- wt-chart-box-name
282 * +--- wt-chart-box-lifespan
283 * +--- wt-chart-box-facts
284 *     +--- wt-chart-box-fact
285 */
286.wt-chart-box,
287.wt-chart-box-menu {
288	background: var(--sex-u-bg);
289	border: dashed var(--sex-u-fg) thin;
290}
291
292.wt-chart-box {
293	height: 5rem;
294	padding: 2px;
295	line-height: 1.1;
296}
297
298.wt-chart-box-f,
299.wt-chart-box-f .wt-chart-box-dropdown {
300	background: var(--sex-f-bg);
301	border: solid var(--sex-f-fg) thin;
302}
303
304.wt-chart-box-m,
305.wt-chart-box-m .wt-chart-box-dropdown {
306	background: var(--sex-m-bg);
307	border: solid var(--sex-m-fg) thin;
308}
309
310/* ---Pending edits--- */
311.wt-new {
312	outline: solid thin blue;
313}
314
315.wt-old {
316	outline: solid thin red;
317}
318
319.list_value,
320.list_value_wrap {
321	border: solid #000 1px;
322	vertical-align: top;
323	padding: 4px;
324}
325
326.list_table {
327	margin: 0 auto;
328}
329
330.filtersH,
331.filtersF {
332	margin: 4px;
333}
334
335.filtersH img {
336	margin-bottom: 2px;
337}
338
339.list-charts {
340	text-align: center;
341}
342
343#place-hierarchy h2,
344#place-hierarchy h4 {
345	text-align: center;
346}
347
348/* ======== Block styles ===== */
349#index_main_blocks {
350	clear: none;
351	width: 60%;
352	float: left;
353}
354
355#index_small_blocks {
356	clear: none;
357	width: 40%;
358	float: right;
359}
360
361#index_full_blocks {
362	clear: none;
363	width: 100%;
364}
365
366.block {
367	background-color: #fff;
368	color: #555;
369	border: solid #ccc 1px;
370	padding: 3px;
371	vertical-align: top;
372}
373
374.blockcontent {
375	margin: 5px;
376	overflow: auto;
377}
378
379.blockcontent .list_table {
380	border-spacing: 0;
381	border: solid #555 1px;
382	border-right: 0;
383}
384
385.blockcontent .list_value,
386.blockcontent .list_value_wrap {
387	border: 0;
388	border-top: solid #555 1px;
389	border-right: solid #555 1px;
390}
391
392.blockheader {
393	font-weight: bold;
394}
395
396/* end Block styles */
397
398.user_welcome_block table,
399.gedcom_block_block table {
400	margin: auto;
401}
402
403.user_welcome_block td,
404.gedcom_block_block td {
405	width: 33%;
406	text-align: center;
407	vertical-align: top;
408}
409
410.user_welcome_block i,
411.gedcom_block_block i {
412	background-image: none;
413	height: 0;
414	width: 0;
415}
416
417/* Table of genealogical facts */
418.wt-facts-table caption {
419	caption-side: top;
420}
421
422.wt-facts-table th {
423	border: 1px solid #000;
424	font-weight: normal;
425	min-width: 20%;
426}
427
428.wt-facts-table td {
429	border: solid #000 1px;
430}
431
432a {
433	color: #333;
434	text-decoration: none;
435}
436
437a:hover {
438	color: #333;
439	text-decoration: underline;
440}
441
442a:hover {
443    text-decoration: underline!important;
444}
445
446/* ==== FAQ table styles ===== */
447table.faq {
448	background-color: #ddd;
449	margin: 5px 0 50px 5px;
450	width: 98%;
451}
452
453table.faq tr:nth-child(odd) td {
454	background-color: #fff;
455}
456
457div.faq_title {
458	background-color: #ddd;
459	margin: 1em 0;
460	padding: .25em;
461	font-weight: bold;
462	width: 98%;
463}
464
465div.faq_body {
466	clear: both;
467	padding: 0 1em;
468}
469
470.faq_top {
471	float: right;
472}
473
474/* === Positioning edit, copy, delete links === */
475/* General use */
476.editfacts {
477	clear: left;
478	padding-top: 15px;
479}
480
481#indi_note {
482	margin: 0 0 5px;
483}
484
485.indi_table {
486	clear: left;
487}
488
489#sex {
490	float: right;
491}
492
493#dates {
494	color: #666;
495	float: right;
496}
497
498.label {
499	font-weight: bold;
500}
501
502#individual-names .wt-icon-edit,
503#individual-names .wt-icon-delete {
504	float: right;
505}
506
507#indi_note .fact_NOTE {
508	float: left;
509	margin: 0 5px 0 0;
510}
511
512#indi_note .fact_SOUR {
513	margin: 3px 0;
514}
515
516#indi_note .fact_SOUR a {
517	font-size: 100%;
518}
519
520#indi_note .fact_NOTE,
521#indi_note .fact_SOUR {
522	clear: both;
523}
524
525/* markdown formatting */
526
527.markdown {
528	/* Tables and pre-formatted text can break the layout. */
529	overflow-x: auto;
530}
531
532.markdown p {
533	margin: 0 0 0.5em;
534	white-space: pre-wrap;
535}
536
537.markdown table {
538	border-collapse: collapse;
539	font-size: 10px;
540	margin-bottom: 5px;
541}
542
543.markdown th {
544	font-weight: bold;
545}
546
547.markdown td,
548.markdown th {
549	border: solid thin #000;
550	padding: 3px;
551}
552
553.odometer {
554	font-family: courier, monospace;
555	font-weight: bold;
556	background: #000;
557	color: #fff;
558}
559
560/* ======== Indi tabs ======== */
561/* Facts & Events tab */
562.media-display-image {
563	float: left;
564}
565
566.media-display-title {
567	float: left;
568	font-style: italic;
569	margin: 10px;
570}
571
572.upcoming_events_block button,
573.todays_events_block button {
574	margin: 0 20px;
575}
576
577/* Sidebar - Family navigator */
578
579/* Sidebar - Descendants */
580#sb_content_descendancy {
581	margin-top: 5px;
582}
583
584#sb_desc_content {
585	margin-left: 3px;
586	font-size: 0.8em;
587}
588
589#sb_desc_content ul {
590	padding: 0;
591	margin: 0;
592}
593
594.sb_desc_indi_li {
595	list-style-type: none;
596}
597
598/* Individuals and Families */
599#sidebar-content-individuals,
600#sidebar-content-families {
601	margin-top: 5px;
602}
603
604.sb_indi_surname_li,
605.sb_fam_surname_li {
606	list-style-image: url(icons/plus.png);
607}
608
609.name_tree_div ul {
610	padding: 0;
611	margin: 0;
612}
613
614.name_tree_div li {
615	list-style: none;
616	margin: 0;
617	padding: 0;
618}
619
620/* Clippings */
621#sb_clippings_content ul {
622	padding: 0;
623	margin: 0;
624}
625
626#sb_clippings_content li {
627	list-style: none;
628	margin: 0;
629	padding: 0;
630	white-space: nowrap;
631}
632
633/* Extra info */
634#sb_content_extra_info {
635	font-size: 80%;
636	font-weight: bold;
637	margin-top: 1px;
638	overflow: hidden;
639	padding: 5px;
640}
641
642#sb_content_extra_info .editfacts {
643	float: right;
644	margin-top: -10px;
645}
646
647#sb_content_extra_info a {
648	display: block;
649}
650
651#sb_content_extra_info span {
652	font-weight: normal;
653}
654
655#sb_content_extra_info span a {
656	display: inline;
657}
658
659#sb_content_extra_info #hitcounter {
660	border-top: 1px solid #b2c7d7;
661	font-weight: bold;
662	padding-top: 5px;
663}
664
665/* Stories module */
666.story_title {
667	padding-top: 12px;
668	font-size: 13px;
669	height: 32px;
670	font-weight: bold;
671}
672
673.story_body {
674	padding: 20px;
675	white-space: normal;
676}
677
678.story_edit {
679	padding: 12px;
680}
681
682/* Stories module */
683.story_title {
684	padding-top: 12px;
685	font-size: 13px;
686	height: 32px;
687	font-weight: bold;
688}
689
690.story_body {
691	padding: 20px;
692	white-space: normal;
693}
694
695.story_edit {
696	padding: 12px;
697}
698
699/* ====== Charts Styles ======== */
700
701#people label {
702	display: block;
703}
704
705/*-- Fan chart ---- */
706.fan_chart_menu {
707	background: #fff;
708	position: absolute;
709	display: none;
710	z-index: 100;
711}
712
713#fan_chart ul {
714	list-style-type: none;
715	margin: 0;
716}
717
718/* Lifespans chart */
719.wt-lifespans-subtitle {
720	text-align: center;
721}
722
723.wt-lifespans-scale {
724	white-space: nowrap;
725}
726
727.wt-lifespans-decade {
728	width: 70px;
729	height: 60px;
730	display: inline-block;
731	background-image: url(images/lifespan-decade.png);
732	background-position-y: bottom;
733	background-repeat: no-repeat;
734	background-size: 70px 37px;
735}
736
737.wt-lifespans-individuals {
738	background: #fafafa;
739}
740
741.wt-lifespans-individual {
742
743}
744
745.wt-lifespans-summary {
746	background: #ffffff;
747	border: thin solid #000;
748	z-index: 1;
749}
750
751.wt-lifespans-summary-link {
752	font-weight: bold;
753}
754
755/*-- Pedigree ---- */
756.tvertline {
757	vertical-align: bottom;
758}
759
760.optionbox, .descriptionbox {
761	border: solid #000 1px;
762	vertical-align: top;
763	padding: 3px;
764}
765
766#childbox {
767	padding: 5px;
768	position: absolute;
769	display: none;
770	text-align: start;
771	white-space: nowrap;
772	top: 20px;
773	left: 0;
774}
775
776.layout3 #childbox {
777	top: auto;
778	bottom: 20px;
779}
780
781#childbox a.name1 {
782	display: block;
783	margin-left: 5px;
784}
785
786.person0, .person1, .person2, .person3, .person4, .person5 {
787	border:outset #555 1px;
788	vertical-align:top;
789}
790.person0{
791	background-color:#eee;
792}
793
794.person1{
795	background-color:#bfbfbf;
796}
797
798.person2{
799	background-color:#999;
800}
801
802.person3{
803	background-color:#dfdfdf;
804}
805
806.person4{
807	background-color:#eee;
808}
809
810.person5{
811	background-color:#fefefe;
812}
813
814/*-- timeline  --*/
815#timeline_chart {
816	position: relative;
817	top: 0;
818	left: 0;
819}
820
821/*
822 * Any element that is loaded dynamically has the class wt-ajax-load.
823 * We can provide a "loading" placeholder for empty elements with this class.
824 */
825.wt-ajax-load:empty {
826	height: 32px;
827	background: url(images/loading-32x32.gif) no-repeat 50% 50%;
828}
829
830/*
831 * Default icons are provided by FontAwesome.
832 */
833.wt-icon-anniversary {
834}
835
836.wt-icon-arrow-down {
837}
838
839a > .wt-icon-arrow-down:hover {
840}
841
842.wt-icon-arrow-left {
843}
844
845a > .wt-icon-arrow-left:hover {
846}
847
848.wt-icon-arrow-right {
849}
850
851a > .wt-icon-arrow-right:hover {
852}
853
854.wt-icon-arrow-up {
855}
856
857a > .wt-icon-arrow-up:hover {
858}
859
860.wt-icon-bing-maps {
861}
862
863.wt-icon-calendar {
864}
865
866.wt-icon-collapse {
867}
868
869.wt-icon-coordinates {
870}
871
872.wt-icon-copy {
873}
874
875.wt-icon-delete {
876}
877
878.wt-icon-edit {
879}
880
881.wt-icon-expand {
882}
883
884.wt-icon-family {
885}
886
887.wt-icon-google-maps {
888}
889
890.wt-icon-help {
891}
892
893.wt-icon-individual {
894}
895
896.wt-icon-keyboard {
897}
898
899.wt-icon-media {
900}
901
902.wt-icon-note {
903}
904
905.wt-icon-openstreetmap {
906}
907
908.wt-icon-preferences {
909}
910
911.wt-icon-reorder {
912}
913
914.wt-icon-repository {
915}
916
917.wt-icon-sex-f {
918	color: var(--sex-m-fg);
919}
920
921.wt-icon-sex-m {
922	color: var(--sex-m-fg);
923}
924
925.wt-icon-sex-u {
926	color: var(--sex-u-fg);
927}
928
929.wt-icon-sex-x {
930	color: var(--sex-u-fg);
931}
932
933.wt-icon-source {
934}
935
936.wt-icon-submitter {
937}
938
939.wt-icon-warning {
940}
941
942.wt-icon-zoom-in {
943}
944
945.wt-icon-zoom-out {
946}
947
948/* Miscellaneous images */
949.icon-cfamily {
950}
951
952.icon-childless {
953	content: url(images/childless.png);
954}
955
956.icon-children {
957	content: url(images/children.png);
958}
959
960.icon-edit_indi {
961	content: url(minimal/images/edit_indi.png);
962}
963
964.icon-fam-list {
965	content: url(minimal/images/sfamily.png);
966}
967
968.icon-indi-list {
969	content: url(minimal/images/indis.png);
970}
971
972.icon-loading-small {
973	content: url(images/indicator.gif);
974}
975
976.icon-loading-large {
977	content: url(images/loading-32x32.gif);
978}
979
980.icon-minus {
981	content: url(icons/minus.png);
982}
983
984.icon-mypage {
985	content: url(minimal/images/mypage.png);
986}
987
988.icon-plus {
989	content: url(icons/plus.png);
990}
991
992.icon-resn-confidential {
993	content: none;
994}
995
996.icon-resn-locked {
997	content: none;
998}
999
1000.icon-resn-none {
1001	content: none;
1002}
1003
1004.icon-resn-privacy {
1005	content: none;
1006}
1007
1008.icon-rings {
1009	content: url(images/rings.png);
1010}
1011
1012.icon-selected {
1013	content: url(minimal/images/selected.png);
1014}
1015
1016.icon-sfamily {
1017	content: url(minimal/images/sfamily.png);
1018}
1019
1020/* Silhouettes on charts */
1021.icon-silhouette-F {
1022	content: url(minimal/images/silhouette_female_small.png);
1023}
1024
1025.icon-silhouette-M {
1026	content: url(minimal/images/silhouette_male_small.png);
1027}
1028
1029.icon-silhouette-U {
1030	content: url(minimal/images/silhouette_unknown_small.png);
1031}
1032
1033.icon-indis {
1034	content: url(minimal/images/indis.png);
1035}
1036
1037.icon-pedigree {
1038	content: url(minimal/images/pedigree.png);
1039}
1040
1041/* Census assistant */
1042.wt-census-assistant-form-control:focus {
1043	min-width: 12rem;
1044}
1045
1046/*
1047 * Drag and drop sortable lists
1048 */
1049.wt-sortable-list {
1050}
1051
1052.wt-sortable-item {
1053	cursor: move;
1054}
1055
1056/* Some blocks show a reduced version on the right-hand side. */
1057.wt-side-blocks .wt-side-block-optional {
1058	display: none !important;
1059}
1060
1061/* my page chart enhancements */
1062.wt-block-content-charts {
1063	overflow: auto;
1064}
1065
1066/* Some charts are wider than the page. */
1067.wt-chart {
1068	overflow-x: auto;
1069	overflow-y: hidden;
1070}
1071
1072/* Fit thumbnail into parent on charts */
1073.select2-selection.select2-selection--single {
1074	min-height: 36px;
1075	height: auto;
1076	padding: 2px 0;
1077}
1078
1079.select2-container .select2-selection--single .select2-selection__rendered {
1080	padding-left: 2px;
1081}
1082
1083.select2-selection--single .NAME {
1084	padding-left: 4px;
1085}
1086
1087/*
1088 *  These selectors control how the short horizontal lines are positioned in the Charts
1089 *  Optimized for Win10 and FF, Chrome and Edge browsers
1090 *  	Ancestors
1091 *  	Descendants
1092 *  	amily book
1093 *
1094 */
1095
1096/* Ascentors */
1097.wt-chart-ancestors .linea1 {
1098	margin-bottom: 4px;
1099}
1100
1101.wt-chart-ancestors .linea2 {
1102	margin-bottom: 7px;
1103}
1104
1105.wt-chart-ancestors .linea3 {
1106	margin-bottom: 4px;
1107}
1108
1109.wt-chart-ancestors .linea4 {
1110	margin-bottom: 7px;
1111}
1112
1113.wt-chart-ancestors .linea5 {
1114	vertical-align: top;
1115}
1116
1117/* Descendants */
1118.wt-chart-descendants .lined1 {
1119	margin-bottom: 4px;
1120}
1121
1122.wt-chart-descendants .lined2 {
1123	margin-bottom: 7px;
1124}
1125
1126.wt-chart-descendants .lined3 {
1127	margin-bottom: 4px;
1128}
1129
1130.wt-chart-descendants .lined4 {
1131	margin-bottom: 7px;
1132}
1133
1134.wt-chart-descendants .linea5 {
1135	vertical-align: top;
1136}
1137
1138/*
1139 * Place hierarchy
1140 *
1141 * wt-place-hierarchy-page
1142 */
1143
1144#place-hierarchy ul {
1145	list-style-type: none;
1146}
1147
1148.d-table-cell {
1149	padding-right: 5px;
1150}
1151
1152/* Some menus (e.g. languages) can be longer than a page */
1153.dropdown-menu {
1154	max-height: 30rem;
1155	overflow-x: hidden;
1156}
1157
1158/* Forms */
1159.col-form-label {
1160	font-weight: bold;
1161}
1162