/* css naming conventions https://www.freecodecamp.org/news/css-naming-conventions-that-will-save-you-hours-of-debugging-35cea737d849/ */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Anatolian+Hieroglyphs&family=Noto+Sans+Duployan&family=Noto+Sans+Pahawh+Hmong&display=swap');

.sentence-builder{
	display: block;
	margin:50px;
}

.sentence-builder__symbol-picker{
	display: block;
	overflow: hidden; /*works with float: left*/
}

.sentence-builder__sentence{
	display: block;
	border: 2px solid black;
	overflow: hidden; /*works with float: left*/
}
.sentence-builder__sentence-picture-saving{
	display: inline-block;
	border: 2px solid black;
	overflow: hidden; /*works with float: left*/
}

.captured-sentences__base{
	display: inline-block;
	overflow: hidden; /*works with float: left*/
}

.captured-sentences__capture{
	float:left;
	
}
.captured-sentences__controls{
	float:left;
}


.symbol-recent__display{
	display: block;
	border: 2px solid black;
	overflow: hidden; /*works with float: left*/
}

.sentence-builder__symbol-picker__quick-picker{
	overflow: hidden; /*works with float: left*/
	margin-bottom: 50px;
}

.sentence-builder__symbol-picker__noun-picker{
	overflow: hidden; /*works with float: left*/
	margin-bottom: 50px;
}
.sentence-builder__symbol-picker__word-picker{
	overflow: hidden; /*works with float: left*/
	margin-bottom: 50px;
}
.sentence-builder__symbol-picker__punctuation-picker{
	overflow: hidden; /*works with float: left*/
	margin-bottom: 50px;
}
.sentence-builder__symbol-picker__diacritics-picker{
	overflow: hidden; /*works with float: left*/
}
.sentence-builder__symbol-picker__proper-nouns-picker{
	overflow: hidden; /*works with float: left*/
}
.word{
	float:left;
	border: 0px solid red;
	height:80px;
	overflow:hidden; 
	transition:0.2s;
}
.word:hover {
	/* opacity: 1 */
	/* border: 3px solid red; */
	background-color: rgb(214, 214, 214);
}

.sentence-builder__newline{
	float:none;
	clear:both;
	min-height: 1px; /*needed to enforce width if empty*/
	width:30px;
}

.punctuation{
	min-height: 1px; /*needed to enforce width if empty*/
	width:30px;
	float:left;
	border: 0px solid red;
	height:80px;
	
	overflow:hidden; /* */
}

.diacritic-independent{
	overflow:hidden; /* */
	width:60px;
	float:left;
	height:30px;
	
}

.diacritic_image{
	border: 0px solid blue;	
	float:left;
	height: 10px;
	width:60px;
}

.punctuation_image{
	border: 0px solid black;	
	height: 60px;
	width: 30px;
	float:left;
}

.noun{
	float:left;
	border: 0px solid red;
	height:80px;
	width:60px;
	overflow:hidden; /* */
	transition:0.2s;
}
.noun:hover {
	background-color: rgb(214, 214, 214);
}

.noun_image{
	border: 0px solid black;	
	height: 60px;
	width: 60px;
	float:left;
}

.noun_character{
    font-size: 250%;
    text-align:center;
	height: 60px;
	width: 60px;
	float:left;
	border: 0px solid black;	
    margin:0px;
    padding:0px;
    cursor: pointer;
    /* font-family: 'Noto Sans Anatolian Hieroglyphs', sans-serif; */
    /* font-family: 'OpenMoji Black', sans-serif; */
}

.unusual_fonts{
    font-family: 'Noto Sans Anatolian Hieroglyphs','Noto Sans Duployan','OpenMoji Black','Noto Sans Pahawh Hmong', sans-serif;

}

.noun_diacritic_top, .noun_diacritic_bottom{
	height: 10px;
	width:60px;
	border: 0px solid blue;	
	float:left;
}

.symbol-selected{
	/* border: 2px solid red;	 */
	background-color: rgb(236, 204, 204);
}
 
.show-shortcut[data-shortcut]:after {
    /* needed - do not touch */
    content: attr(data-shortcut);
    position: absolute;
    opacity: 1;
    
    /* customizable */
    /* transition: all 0.15s ease; */
    /* padding: 10px; */
    /* color: #333; */
    border-radius: 2px;
    box-shadow: 2px 2px 1px silver;  
	border:2px solid black;
	
	/* customizable */
	background: rgb(255, 255, 255);
	margin-top: 36px;
	margin-left: -20px;    
}

.sentence-builder__symbol-picker__diacritics-picker .show-shortcut[data-shortcut]:after {
	margin-top: 0px;
}

.hide-shortcut[data-shortcut]:after {
    /* needed - do not touch */
    opacity: 0;
   
}

[data-tooltip]:before {
    /* needed - do not touch */
    content: attr(data-tooltip);
    position: absolute;
    opacity: 0;
    
    /* customizable */
    transition: all 0.15s ease;
    padding: 10px;
    color: #333;
    border-radius: 10px;
    box-shadow: 2px 2px 1px silver;    
}

[data-tooltip]:hover:before {
    /* needed - do not touch */
    opacity: 1;
	z-index:666;  /* highest is on top*/
    
    /* customizable */
    background: yellow;
    margin-top: -40px;
    margin-left: 60px;    
}

[data-tooltip]:not([data-tooltip-persistent]):before {
    pointer-events: none;
}