#map{
    height: 30vh;
    width: 90%;
    margin:30px;
    border : solid #bba992;
    border-width : 4px;
}
#Columns {
    display: block; 
    flex-direction: column;
	gap: 1em;
    margin: 20px;
}
#MapReflexes {
	display: block; 
}
#MapLegend {
	background-color: rgba(255, 255, 255, 0.4);
    border-radius: 8px;
    padding: 1px 6px; 
}
table > thead > tr > th > span {
	padding: 0 5px 0 3px;
	background-color: #ffeaa7;
	color: black;
	font-weight: 600;
}
table > thead > tr > th > span:hover {
	color: #ffeaa7;
	background-color: rgb(50 38 38 / 70%);
}
div.legend {
	font-family: "Noto Sans", "Segoe UI", Ubuntu, "Calibri", sans-serif;  /* fix for ie9 */
	font-size: 130%;
}

tr.highlighted {
    background-color: #ffeaa7;
    transition: background-color 0.3s ease;
}
div.leaflet-popup-content-wrapper:hover {
	color: #ffeaa7;
	background-color: #794906;
}

i.marker-icon {
	display: inline-block;
	width: 10px;
    height: 16px;
	background-size: cover;
	margin-right: 8px;"
}

i#icon_green {
	background-image: url(/img/marker-icon-green.png); 
}

i#icon_orange {
	background-image: url(/img/marker-icon-orange.png); 
}


#Etytable, #Langtable, #formtable {
    margin:10px;
}
#Etytable > tbody > tr, #Langtable > tbody > tr {
	padding-right:7px;
}
#etyheader, #langheader, #formheader {
    margin:10px;
}
#Etytable {
    width: 96%;
}
#Etytable > tbody > tr > td:nth-child(1) {
    font-weight: 600;
	background-color: #d2b19263;
	width: 17%;
	font-size: 12.5pt;
	color:#333;
	min-width: 90px;
	max-width: 130px;
	padding-left: 11px;
    padding-top: 7px;
}
#Etytable > tbody > tr > td:nth-child(1) > a {
	color: #780f5a;
    font-weight: 650;
	font-size: 13pt;
	padding: 3px 5px 3px 2px;
}
#Etytable > tbody > tr > td:nth-child(1) > a:hover {
	background-color: #780f5a;
    color: #fffafa;
	border-radius: 4px;
}

#Etytable > tbody > tr > td:nth-child(2) {
    width: 4%;
    max-width: 6%;
    text-align: center;
    padding: 6pt 3pt 1pt 3pt !important;
}
#Etytable > tbody > tr > td:nth-child(3) {
	width: 40px;
    text-align: center;
    /* padding: 8px 15px 0 0; */
	padding-top: 8px;
    font-size: 13pt;
    font-weight: 500;
}
/* details sub-table */
#Etytable > tbody > tr > td:nth-child(4) > details > table {
	width: 88%;
}
/* details sub-table */
#Etytable > tbody > tr > td:nth-child(4) > details > table > tr > td:nth-child(1) {
    width: 22%;
	font-size: 12pt;
}
/* details sub-table */
#Etytable > tbody > tr > td:nth-child(4) > details > table > tr > td:nth-child(2) {
    font-weight: 640;
	font-size: 12pt;
	background-color: #cbfac5;
	color: #353b35;
	white-space: normal;
    width: 23%;
    max-width: 130px;
	padding: 3px 6px 2px 8px !important;
}
#Etytable > tbody > tr > td:nth-child(4) > details > table > tr > td:nth-child(3) {
	/* max-width:150px; */
    width: 6%;
	padding: 6px 0 0 5px !important;
}
#Etytable > tbody > tr > td:nth-child(4) > details > table > tr > td:nth-child(4) {
	white-space: normal;
	font-size: 12pt;
	padding-left: 14px;
    min-width: 70pt;
	/* max-width: 90pt; */
}
#Etytable > tbody > tr > td:nth-child(4) {
	min-width:350px;
	max-width:390px;
	padding-top: 8px;
}
div#proto_table {
    margin: 30px 5px 10px 10px;
    display: block;
    max-height: 100vh;
}
div#lang_table {
    margin: 30px 5px 10px 10px;
    display: block;
    max-height: 60vh;
}
table#Langtable {
    width: 97%;
}
/* lg of etymon */
#Langtable > tbody > tr > td:nth-child(1) {
    width: 95px;
    max-width: 90px;
    font-weight: 600;
	white-space: normal;
	font-size: 12pt;
}
#Langtable > tbody > tr > td:nth-child(2) {
	width: 24px;
    text-align: center;
    /* padding: 8px 15px 0 0; */
    font-size: 13pt;
    font-weight: 500;
}
#Langtable > tbody > tr > td:nth-child(3) {
	min-width: 220pt;
}
#Langtable > tbody > tr > td:nth-child(3) > details > table {
	width: 90%;
}
#Langtable > tbody > tr > td:nth-child(3) > details > table > tr > td:nth-child(1) {
    font-size: 12pt;
    font-weight: 640;
	white-space: normal;
	background-color: #cbfac5;
	width: 94px;
	max-width: 28%;
	padding: 3px 6px 2px 8px !important;
	color: #353b35;
}
#Langtable > tbody > tr > td:nth-child(3) > details > table > tr > td:nth-child(2) {
	width: 6%;
    min-width: 16px;
    padding: 3px 6px;
}
#Langtable > tbody > tr > td:nth-child(3) > details > table > tr > td:nth-child(3) {
	white-space: normal;
	font-size: 12pt;
    min-width: 80px;
    /* max-width: 160px; */
	/* width: 28%; */
}

#Langtable > tbody > tr > td:nth-child(3) > details > table > tr > td:nth-child(4) {
	background-color: #d2b19263;
    width: 94px;
}
#Langtable > tbody > tr > td:nth-child(3) > details > table > tr > td:nth-child(4) > a {
	color: #780f5a;
    font-weight: 650;
	font-size: 12pt;
	padding: 3px 5px 3px 2px;
}
#Langtable > tbody > tr > td:nth-child(3) > details > table > tr > td:nth-child(4) > a:hover {
	background-color: #780f5a;
    color: #fffafa;
	border-radius: 4px;
}


@media screen and (max-width: 1200px) {
	#Info {
		padding: 20px 25px;
	}
	.col-container {
		padding: 10px 40px;
	}
	#proto_table {
		margin: 10px 40px;
		max-height: 70vh;
		width: 90%;
	}
	#lang_table {
		margin: 10px 40px;
		max-height: 70vh;
		width: 90%;
	}
	
	#Langtable > tbody > tr > td:nth-child(3) > details > table > tr > td:nth-child(1) {
		width: 120px;
		max-width: 28%;
	}
	#Langtable > tbody > tr > td:nth-child(3) > details > table > tr > td:nth-child(2) {
		width: 6%;
		min-width: 16px;
	}
	#Langtable > tbody > tr > td:nth-child(3) > details > table > tr > td:nth-child(3) {
		min-width: 80px;
		/* max-width: 160px; */
		/* width: 28%; */
	}
	#Langtable > tbody > tr > td:nth-child(3) > details > table > tr > td:nth-child(4) {
		width: 120px;
	}
}


@media screen and (max-width: 967px) {
	#Info {
		padding: 20px 25px;
	}
	
	#Columns {
    padding: 0px;
	margin: 20px 12px 30px 12px;
	}
	#proto_table {
		margin: 10px 40px;
		max-height: 70vh;
		width: 98%;
	}
	#lang_table {
		margin: 10px 40px;
		max-height: 70vh;
		width: 96%;
	}
	
	#Langtable > tbody > tr > td:nth-child(3) > details > table > tr > td:nth-child(1) {
		width: 120px;
		max-width: 28%;
	}
	#Langtable > tbody > tr > td:nth-child(3) > details > table > tr > td:nth-child(2) {
		width: 6%;
		min-width: 16px;
	}
	#Langtable > tbody > tr > td:nth-child(3) > details > table > tr > td:nth-child(3) {
		min-width: 80px;
		/* max-width: 160px; */
		/* width: 28%; */
	}
	#Langtable > tbody > tr > td:nth-child(3) > details > table > tr > td:nth-child(4) {
		width: 120px;
	}
}