/*CSS for page specific modifications of either global.css or sections.css rules*/
.Overlay{
	width: 100%;
	display: grid;
	grid-template-columns: auto auto auto auto;	
}
.Overlay-section > h2{
	color: #fff;
	font-family: 'Roboto Condensed', sans serif;
	font-size: 1.5em;
	font-weight: bold;
	margin-top: 1.5em;
	text-align:center;
	}
#Subject-Category{background-color: #195e55; opacity:0.8;}
#Subject-Category:hover{background-color: #155149;cursor:pointer;}
#Origin-Category{background-color:#228176; opacity:0.8;}
#Origin-Category:hover {background-color:#1e7167; cursor:pointer;}
#Usage-Category{background-color:#53bdb1; cursor:pointer;opacity:0.8;}
#Usage-Category:hover{background-color:#4ca99d;cursor:pointer;}
#Pos-Category{background-color: #2da093;opacity:0.8;}
#Pos-Category:hover{background-color: #288f83;cursor:pointer;}
div.Overlay-text{
	font-family:'Roboto-Regular', sans-serif; 
	color:#fff; 
	font-size:15px;
	margin-left:1.5em; 
	margin-right:1.5em;
	margin-top:1.5em;
	line-height:2;
	height:250px;
}
img.mobile-img {
	display:none;
	}
div.Overlay-img {
	width:228px; 
	height:105px; 
	margin-left:auto; 
	margin-right:auto;
	background-color:#fff;
	border:2px solid #fff;
	}
div.Overlay-img > video {
	width:inherit; 
	height:inherit;
	}
div.info-block > h3 {
	color:#55828b;
	line-height:1.3;
	text-align:center;
	}
/*CSS for the treechart*/
#chart{
}
#treemap-container {
	position: relative;
	background-color:#fff;
	padding-right:20px;
	padding-bottom:20px;
	padding-left:20px;
	padding-top:10px;
	box-shadow: 0 4px 12px  rgba(64,60,67,.16);
	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
	}
#treemap-container:hover {
	box-shadow: 0 3px 6px rgba(0,0,0,0.12), 0 2px 10px rgba(0,0,0,0.24);
	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
	}
.highcharts-internal-node-interactive{
    opacity: 1;  
	}
ul.bread-crumb-container{
	grid-template-columns:auto auto;
	list-style: none;
	margin-bottom: 0%;
	margin-top:0%;
	margin-left: -2em;
	padding-bottom:0.5%;
	}
.Top-chart{
	margin-bottom: 0%;
	display: grid;
	grid-template-columns:auto auto;
	}
#Back button{
	position: relative;
	margin-bottom: 5px;
	margin-top: 0px;
	margin-right: 10px;
	/*left: 75%;*/
	float: right;
	bottom: 0px;
	background-color:#fff;
	font-size:15px;
	color:#5c5c5c;
	border-radius:3px;
	border:0.5px solid #c5c5c5;
	padding:3px 40px;
	}
#Back button:hover{
	cursor:pointer;
	color: #333;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 5px rgba(0,0,0,0.24);
	transition: all 0.3s cubic-bezier(.25,.8,.25,1)
	}
ul.bread-crumb-container li {
	display: inline;
	}
ul.bread-crumb-container li+li:before{
	padding: 3px;
	color: black;
	content: "/";
	}
#breadcrum a {
	font-size:16px;
	font-family:'Roboto condensed', sans-serif;
	color:#5c5c5c;
	margin-bottom: 0%;
	text-decoration: none;
	}
#breadcrum a:hover{
	cursor: pointer;
    color:#333;
    text-decoration: underline;
	}
#Label-name{
    font-size:15px;
    font-family:'Roboto condensed', sans-serif;
    color:#fefefe; 
    padding-left:0.313em;
	}
#Label-count{
    font-size:12px;
    color:#fefefe;
    font-family:'Roboto condensed', sans-serif;
    font-weight:normal;
     padding-left:0.313em;
	}
#HeadWords {
	width: 100%;
	font-family:'Roboto-Regular', sans-serif;
	font-size:14px;
	line-height:2.2;
	font-weight:normal;
	padding-left:0.313em;
	padding-top:0.313em;
	
	}
.information{
	
}	

.placeholder{
	visibility: hidden;
}
.headword-list-next:hover{
	cursor: pointer;
	}
g .highcharts-treemap-series .highcharts-internal-node-interactive {
  fill-opacity: 1;
  cursor: pointer;
	}
.grid-container {
	display: grid;
	grid-row-gap: 7%;
	grid-template-columns: 20% 20% 20% 20% 20%;	
	grid-template-rows: 11% 11% 11% 11% 11% 11% 11% 11% 11% ;
	grid-auto-flow: column;
  }
.grid-container-oneCol {
	display: grid;
	grid-row-gap: 8%;
	grid-template-columns: 100%;	
	grid-template-rows: 11% 11% 11% 11% 11% 11% 11% 11% 11% ;
	grid-auto-flow: column;
  }
.grid-container-fourCol {
	display: grid;
	grid-row-gap: 7%;
	grid-template-columns:  25% 25% 25% 25%;	
	grid-template-rows: 11% 11% 11% 11% 11% 11% 11% 11% 11% ;
	grid-auto-flow: column;
  }
.grid-container-twoCol {
	display: grid;
	grid-row-gap: 7%;
	grid-template-columns: 50% 50% ;	
	grid-template-rows: 11% 11% 11% 11% 11% 11% 11% 11% 11% ;
	grid-auto-flow: column;
  }
.grid-container-threeCol {
	display: grid;
	grid-row-gap: 7%;
	grid-template-columns: 33.3% 33.3% 33.3%;	
	grid-template-rows: 11% 11% 11% 11% 11% 11% 11% 11% 11% ;
	grid-auto-flow: column;
  }

.grid-item{
	margin-bottom: 0px;
  }
.tooltip{
	
	position: relative;
	display: inline-block;
	}

.tooltip .tooltiptext-down,
.tooltip .tooltiptext-top {
	visibility: hidden;
	width:fit-content !important;
	word-wrap: break-word !important;
	padding:5px;
	/*max-width: 100% !important;*/
	left: 50%;
	background-color: #f5f5f5;
	color: #0a0a0a;
	border:2px solid #525252;
	font-family: 'Roboto light', sans-serif;
	text-align: left;
	border-radius: 4px;
	position: absolute;
	z-index: 4;
	}
.tooltip .tooltiptext-down{
	position: absolute;
	word-wrap: normal !important;
	white-space: normal;
	display: block;
	left: -2%;
	z-index: 1000;
	max-width: 200px !important;
	font-size: 12px;	
}
.tooltip .tooltiptext-down::after{
	content: " ";
	position: absolute;
	bottom: 100%;
	left: 5%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: transparent transparent #525252 transparent;
}
.tooltip .tooltiptext-top::after{
	content: " ";
	position: absolute;
	top: 100%;
	left: 10%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: #525252 transparent transparent transparent;
}
.tooltip .tooltiptext-top{
	position: absolute;
	word-wrap: normal !important;
	white-space: normal;
	display: block;
	bottom: 100%;
	left: -2%;
	z-index: 1000;
	max-width: 200px !important;
	font-size: 12px;
}
.information>span .tooltiptext-down,
.information>span .tooltiptext-top{
	opacity: 0;
	font-size: 12px;
	transition: opacity 0.6s;
	}
.information>span:hover .tooltiptext-down,
.information>span:hover .tooltiptext-top {
	visibility: visible;
}
.tooltiptext-down > div ,
.tooltiptext-top> div {
	font-size:12px;
	word-wrap: normal !important;
	white-space: normal;
	display: block;
	height: auto;
	/*margin: 3px auto;*/
	line-height: 1.8;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	max-width: 100%;
	/*margin-top: -8px;*/
	z-index: 99;
	padding:5px;
	}
.information>span:hover .tooltiptext-down,
.information>span:hover .tooltiptext-top {
	opacity: 1;
	}
.HeadWord > span.ps-abbrev {
	display: inline-block;
	font-style:italic;
	font-size:0.9em;
	}
#\ head-word > div > span > span.ps-abbrev {
	display: inline-block; 
	font-style:italic; 
	font-size:0.9em;
	}

.HeadWord > span.homonym {
	margin-left:0em;
	font-size: 12px !important;
	vertical-align:	super;
	font-style: normal;
	}
.indentMe> span.ps-abbrev {
	/*margin-right: 10px;*/
	display: inline-block;
	font-style:italic;
	font-size:0.9em;
	}
.HeadWord >.indentMe> span.homonym {
	margin-left:0em;
	font-size: 12px !important;
	vertical-align:	super;
	font-style: normal;
	}
.headword-list-next:hover {cursor:pointer;}
/* Used for calculating the px of the largest word in the headword list*/
#px-calculations{
	position: absolute;
    visibility: hidden;
    height: auto;
    width: auto;
    white-space: nowrap;
	}
@media only screen and (max-width:1200px){
img.mobile-img {
	display:inline-block;
	width:inherit; 
	height:inherit;
	}
.desktop-video {
	display:none;
	}
}
@media only screen and (min-width:968px) and (max-width:1200px){
.Overlay {
	grid-template-columns: auto auto;
	}
div.Overlay-text{
	height:170px; 
	font-size:1em;
	}
div.Overlay-img {
	width:400px; 
	height:186px; 
	} 
ul.bread-crumb-container {
	margin-left:-2em;
	}
#Label-name {
	font-size:15px;
	}
}
@media only screen and (min-width: 767px)and (max-width:967px){
.Overlay {
	grid-template-columns: auto auto;
	}
div.Overlay-text{
	height:215px; 
	font-size:1em;
	}
div.Overlay-img {
	width:298px; 
	height:140px; 
	} 
#Back {
	grid-column:1 / span 2;
	grid-row-start:2;
	margin-left:auto;
	margin-right:auto;
	}
#Back > button {font-size:14px;}
ul.bread-crumb-container {
	margin-left:-2em;
	}
#breadcrum a {
	font-size:15px;
	}
#Label-name {
	font-size:15px;
	}
}
.Overlay.Hidden{
	display: none;
}
@media only screen and (min-width:537px) and (max-width: 766px){
div.Overlay {
	grid-template-columns: auto;
	}
div.Overlay-text{
	height:160px; 
	font-size:1em;
	}
div.Overlay-img {
	width:400px; 
	height:186px; 
	} 
#Back {
	grid-column:1 / span 2;
	grid-row-start:2;
	margin-left:auto;
	margin-right:auto;
	}
#Back > button {font-size:14px;}
ul.bread-crumb-container {
	margin-left:-2em;
	}
#breadcrum a {
	font-size:15px;
	}
#Label-name {
	font-size:15px;
	}
}
@media only screen and (min-width:440px)and (max-width: 536px){
div.Overlay {
	grid-template-columns: auto;
	}
div.Overlay-text{
	height:195px; 
	font-size:1em;
	line-height:1.8;
	}
div.Overlay-img {
	width:320px; 
	height:150px; 
	} 
#Back {
	grid-column:1 / span 2;
	grid-row-start:2;
	margin-left:auto;
	margin-right:auto;
	}
#Back > button {font-size:14px;}
ul.bread-crumb-container {
	margin-left:-2em;
	}
#breadcrum a {
	font-size:15px;
	}
#Label-name {
	font-size:15px;
	}
}
@media only screen and (min-width:372px)and (max-width: 439px){
div.Overlay {
	grid-template-columns: auto;
	}
#Back {
	grid-column:1 / span 2;
	grid-row-start:2;
	margin-left:auto;
	margin-right:auto;
	}
#Back > button {font-size:12px;}
ul.bread-crumb-container {
	margin-left:-2em;
	}
#breadcrum a {
	font-size:14px;
	}
#Label-name {
	font-size:14px;
	}
}
@media only screen and (max-width:371px){
div.Overlay {
	grid-template-columns: auto;
	}
div.Overlay-text{
	height:255px; 
	font-size:0.875em; /*14px*/
	line-height:2;
	}
#Back {
	grid-column:1 / span 2;
	grid-row:2;
	margin-left:auto;
	margin-right:auto;
	}
#Back > button {font-size:12px;}
#Label-name {
	font-size:14px;
	}
ul.bread-crumb-container {
	margin-left:-2em;
	}
#breadcrum a {
	font-size:12px;
	}
}