/* Or using !important */

h1.document {
    font-size: 1.4em;/* Adjust the size as needed */
}

h1 {
    font-size: 1.4em !important;/* Adjust the size as needed */
}

h2.document {
    font-size: 1.2em;/* Adjust the size as needed */
}

h2 {
    font-size: 1.2em !important;/* Adjust the size as needed */
}

h3.document {
    font-size: 1.1em;/* Adjust the size as needed */
}

h3 {
    font-size: 1.1em !important;/* Adjust the size as needed */
}


p {
line-height: 1.6em !important;
}


audio.reibun {
display:none;
}

span.g {
/*font-family: 'Noto Sans JP', sans-serif;*/
font-weight: bold;
background: linear-gradient(transparent 70%, #c5edff 60%);
}
span.g2 {
font-weight: bold;
background: linear-gradient(transparent 70%, #ffa8a8 60%);
}

.r {
font-weight: bold;
background: linear-gradient(transparent 70%, #c5edff 60%);
}

.r2 {
font-weight: bold;
background: linear-gradient(transparent 70%, #ffa8a8 60%);
}

/*.r::before, .r2::before {
content: "〈";
}

.r::after, .r2::after {
content: "〉";
}*/

.exampleContainer {
	margin-bottom: 25px;
}


.example {/* all align units and free translation */
	/*margin-bottom: 30px; /* <-- Increase spacing between examples */
    margin-left: 1.5rem;
	line-height: 1.65;
	cursor: pointer;
	display: inline-block; /* shrink to fit content */
	transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
}

.example:hover {
	background-color: #f0f8ff;
}

.playing {
	transform: scale(1.02); /* Slightly enlarge */
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* Soft light shadow */
	transition: transform 0.3s, box-shadow 0.3s;
}

.no-audio {
	opacity: 0.6; /* slightly faded to show it's not clickable */
	cursor: default; /* not pointer */
}

.all-align-units {/* all align-units (w/o free translation) */
}

/*.all-align-units .align-unit:not(:first-child){/* give non-initial align-units left margin for readability 
    padding-left: 0.15em;
    padding-right: 0.15em;	
}*/


.all-align-units .align-unit{/* give non-initial align-units left margin for readability */
    padding-left: 0.3em;
    padding-right: 0.3em;	
}


.all-align-units .align-unit:not(:last-child){/*  */
	border-right: 1px solid lightgrey;
}

.align-unit {/* word and gloss to be vertically left-aligned */
    display: inline-block;
}

.word {/* words only */
font-weight: bold;
text-align: center;
}
.gloss {/* glosses only */
font-size: 80%;
text-align: center;
}
.gloss span {/* make spans small-caps (for features) */
    font-variant: small-caps;
}
.free-transl {/* free translation only */
}

.free-transl span:first-child {/* free translation only */
background: #ECFAF1;
margin-bottom: 5px;
border-bottom: 1px solid #D5F9E3;
}


.dialect-tag {
	display: inline-block;
	background: linear-gradient(to bottom, #f8f8f8, #e0e0e0);
	color: black; /* darker metallic grey text */
	padding: 2px 6px;
	margin-left: 5px;
	border-radius: 3px; /* less round than before */
	font-size: 0.85em; /* slightly smaller font */
	white-space: nowrap;
}

.region-group {
	/*display: inline-flex;
	flex-wrap: wrap;*/
	
	margin-bottom: 6px;
	/*padding-bottom: 10px;*/
	/*border-bottom: 1px dotted #ccc; /* soft dotted separator */
}

.region-header {
	display: inline-block;
	white-space: nowrap;
	width: 3.5em; /* fixed width for alignment */
	font-weight: bold;
	color: black;
}

.region-checkboxes {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.5em;
}

.region-checkboxes label {
	white-space: nowrap;
}

/* PAGINATION STYLE */
/* Pagination Container */
.pagination-container {
    display: flex;
    flex-direction: column; /* Stack the buttons vertically */
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    padding: 10px;
}

/* Page Numbers */
#page-numbers {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping of page numbers */
    justify-content: center;
}

#page-numbers button {
    background-color: #f1f1f1;
    border: 1px solid #ddd;
    margin: 5px;
    padding: 10px 15px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s, transform 0.3s;
}

/* Highlight the current page */
#page-numbers button.active {
    background-color: #4CAF50;
    color: white;
    font-weight: bold;
}

/* Pagination Buttons (First, Previous, Next, Last) */
#page-navigators {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}

#page-navigators button {
    background-color: #f1f1f1;
    border: 1px solid #ddd;
    margin: 5px;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s, transform 0.3s;
}

/* Highlight and disable button styles */
#page-navigators button.active {
    background-color: #3498db;
    color: white;
}

#page-navigators button:disabled {
    background-color: #e0e0e0;
    cursor: not-allowed;
}

/* Hover effects */
#page-numbers button:hover,
#page-navigators button:hover {
    background-color: #ddd;
    transform: scale(1.1);
}

/* OTHERS */

table.tb {
    border-collapse: collapse; /* Ensures that the borders are collapsed into a single border */
    width: 100%; /* Optional: makes the table take up the full width */
	overflow: auto;
	border-spacing: 0;
	border-bottom: 1em;
	margin-bottom: 1em;
	display: block;
}

table.tb th, table.tb td {
    border: 1px solid black; /* Adds a border to each cell */
    padding: 8px; /* Adds padding inside each cell */
    text-align: center; /* Optional: aligns text to the left */
}

table.tb th {
    background-color: #f2f2f2; /* Optional: Adds a background color to the header cells */
}


.free-transl span.highlight {
	background-color: rgba(255, 248, 179, 0.5) !important;
}

.highlight {
	/*background-color: #fff8b3;:? /* Soft yellow */
	background-color: rgba(255, 248, 179, 0.5); /* 35% opacity */
	padding: 0 2px;
	border-radius: 2px;
	box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.1);  /* soft inner shadow for definition */
}

.tooltip-container {
	position: relative;
	display: inline-block;
	cursor: pointer;
}

.tooltip-icon {
	display: inline-block;
	background-color: black;
	color: white;
	border-radius: 50%;
	width: 1.2em;
	height: 1.2em;
	text-align: center;
	line-height: 1.2em;
	font-size: 0.9em;
	user-select: none;
}

.tooltip-box {
	display: none;
	position: absolute;
	top: 2.1em;
	left: -140px;
	background-color: #f0f0f0;  /* light grey like dialect badge */
	color: #333;                /* dark text */
	padding: 6px 6px;
	border-radius: 8px;
	font-size: 0.8em;
	line-height: 1.5;
	width: 149px; /* Wider box */
	text-align: left; /* Better for Japanese sentences */
	white-space: normal; /* Allow line breaks, but don't crush it */
	box-shadow: 0 2px 5px rgba(0,0,0,0.2);
	z-index: 999;
}

/* Responsive design for small screens */
@media (max-width: 768px) {
    /* Adjust the example sentences layout */
    .example {
        /*font-size: 14px;*/
        margin-left: 0;
		margin-right: 0;
    }

    .all-align-units {
        flex-direction: column;  /* Stack the words vertically on smaller screens */
    }

    .word {
        /*font-size: 12px; */ /* Smaller font size for mobile */
        /*padding: 4px;*/
    }

    /* Adjust pagination buttons */
    #page-numbers button {
        font-size: 12px;
        padding: 8px;
        margin: 3px;
    }

    .pagination-container {
        flex-direction: column; /* Stack buttons vertically on small screens */
    }

    .pagination-container button {
        font-size: 12px;
        padding: 8px;
        margin: 5px;
    }
}

/* Extra Small screens (phones in portrait mode) */
@media (max-width: 480px) {
    .word {
       /* font-size: 10px; */ /* Smaller text for very small screens */
        /*padding: 3px;*/
    }

    #page-numbers button {
        padding: 6px;
        font-size: 12px;
    }

    .pagination-container button {
        padding: 6px;
        font-size: 12px;
    }
}


.page-wrapper {
	max-width: 900px;
	margin: 0;
	padding: 0 1em;
}

.regex-container {
	display:inline-block;
}

.lexeme-row {
	display: grid;
	grid-template-columns: 1.5fr 1.5fr 2.5fr 0.8fr 0.8fr 1.2fr 1.2fr;
	gap: 0.5em;
	padding: 0.6em 0.4em;
	border-bottom: 1px solid #ccc;
	align-items: left;
	font-size: 1rem;
}
.lexeme-row > div {
	text-align: left;
}

.lexeme-header {
	font-weight: bold;
	background-color: #f0f0f0;
}

.lx-form2 {
	font-family: Calibri;
	font-weight:bold;
	font-size:1.1rem;
}

.lx-meaning {
	font-size: 0.9em;
	line-height: 1.4em;
	color: #222;
}

.tag-pos, .tag-accent, .tag-rui {
	display: inline-block;
	padding: 2px 6px;
	border-radius: 3px;
	font-size: 0.85em;
	font-weight: 500;
	color: black;
	white-space: nowrap;
	background: linear-gradient(145deg, #e7e7e7, #d4d4d4);
	box-shadow: inset 0 -1px 0 rgba(255,255,255,0.4), 0 1px 2px rgba(0,0,0,0.05);
	text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}

.lx-expl {
	font-size: 0.9em;
	color: #666;
	margin-top: 0.2em;
}

/* Cognate Results */

.cognate-block {
	margin-bottom: 0.4em;
	padding: 0.2em 0em;
	border-top: 1px solid black;
}


.cognate-block .lexeme-row {
	border-bottom:0px;
	padding: 0.3em 0.4em;
	display:flex;
	font-size:0.9em;
}

.cognate-block .dialect-tag {
	margin-left:0px;
}

.rk-form, .jp-form {
	font-weight:bold;
}

.cognate-heading {
	display: flex;
	gap: 1em;
	margin-bottom: 0.6em;
	margin-top:0.1em;
	font-weight: normal;
}

.cog-label {
}

.rk-form {
	/*font-style: italic;*/
}

.cognate-meaning {
	margin: 0 0 0.6em 0.4em;
	color: #222;
	font-size: 0.95em;
}

@media (max-width: 700px) {
	
	.cognate-block .lexeme-row {
		display:block;
	}

	.cognate-block .lexeme-row > div {
		display:inline-block;
	}

	.cognate-block  .dialect-tag {
		margin-left:4px;
	}

	.cognate-block  .lx-form1 {
		margin:0;
	}
	
	.cognate-block  .lx-form2 {
		margin:0 0 0 10px;
	}
	.cognate-block  .lx-meaning {
		margin:0 0 0 10px;
	}
	
	.cognate-block  .lx-accent {
		margin:0 0 0 5px;
		font-size:0.8em;
	}
	
	.cognate-block  .lx-dialect {
		margin:0 0 0 0;
		font-size:0.8em;
	}
}


@media (max-width: 700px) {

	.page-wrapper{
		padding: 0 0.5em;
	}

	.lexeme-row {
		font-size: 0.95em;
		display: block;
		align-items: flex-start;
		flex-direction: column;
		padding: 0.2em;
		border-bottom: 1px solid #ccc;
	}

	.lexeme-row > div{
		margin-top:6px;
		margin-bottom:6px;
	}

	.lx-form1 {
		display:inline-block;
	}
	.lx-form2 {
		display:inline-block;
		margin-left:6px;
	}
	
	
	.lx-pos {
		display: inline-block;
		margin-right: 0;
		margin-top: 0;
		margin-left:0px;
	}
	.lx-accent {
		display: inline-block;
		margin-right: 0;
		margin-top: 0;
		margin-left:4px;
	}
	.lx-dialect {
		display: inline-block;
		margin-right: 0;
		margin-top: 0;
		margin-left:4px;
	}
	
	.dialect-tag{
		margin-left:0;
		font-size:0.9em;
	}
	.tag-pos, .tag-accent {
		font-size:0.9em;
	}

	.lexeme-header {
		display: none; /* hide column headers on mobile */
	}
	.wrap-gloss{
		display:none;
	}
	
	.lx-form1 a {
		color: #0033cc;
		text-decoration: underline;
	}

	.lx-form2 {
		font-weight: bold;
	}

	.lx-meaning {
		font-size: 1em;
		color: #333;
		margin-left:0.4em;
	}

}



.play-button {
	cursor: pointer;
}


a.stripped {
	text-decoration: none; /* removes the underline */
	color: inherit;         /* inherits color from parent, or set your own */
	cursor: pointer;
}