#cssTable td 
{
	vertical-align: middle;
	color: #1F2424
}

#toneExamplesTable th
{
	padding: 5px;
	text-align: center;
}

#toneExamplesTable td
{
	text-align: center;
}

.image-left {
	width: 113px;
	height:64px;
	padding-top: 5px;
	float: left;
	margin-right: 15px;
	margin-top: 2px;
	margin-bottom: 5px;	
}
.image-example {
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	margin-bottom: 10px;
}

.edit-thai {
	font-size: 22px;
	padding: 10px;	
}

.study-progress {
	width: 60px;
	height: 24px;
	background-color: #c9c9c9;
	position: relative;
	top: 3px;
}
.study-progress:before {
	content: attr(data-label);
	font-size: 0.8em;
	color: black;
	position: absolute;
	text-align: center;
	top: 3px;
	left: 0;
	right: 0;
}
.study-progress .value {
	background-color: #48c774;
	display: inline-block;
	height: 100%;
}

.study-progress-thin {
	width: 72px;
	height: 14px;
	background-color: #c9c9c9;
	position: relative;
	top: 5px;
}
.study-progress-thin:before {
	content: attr(data-label);
	font-size: 0.5em;
	color: black;
	position: absolute;
	text-align: center;
	top: 2px;
	left: 0;
	right: 0;
}
.study-progress-thin .value {
	background-color: salmon;
	display: block;
	height: 100%;
}


.is-clickable {
	cursor: pointer;
}

.bm--card-equal-height {
	display: flex;
	flex-direction: column;
	height: 100%;
 }
 .bm--card-equal-height .card-footer {
	margin-top: auto;
 }
 
@keyframes blinker {
	50% {
		opacity: 0;
	}
}
.play-icon {
	cursor: pointer;
	margin: 5px 0px;
	width: 16px;
	height: 16px;
	min-width: 16px;
	min-height: 16px;
}

.selector-card-hover:hover,
.selectable-card-hover:hover {
	background: #343c3d;
}

html, body {
	overflow-x: hidden;
}

.bg-wrapper {
	background: no-repeat center center #13181e;
	display: block;
	width: 100%;
	background-size: cover;
	overflow: hidden;
}
.bg-container {
	position: relative;
	width: 100%;
	height: 140px;
    margin: 0 auto;
	padding: 0;
}
.card-hover:hover {
	-webkit-transform: scale(1.03);
	-moz-transform: scale(1.03);
	-ms-transform: scale(1.03);
	-o-transform: scale(1.03);
	transform: scale(1.03);
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}
.bottom-bar {
    display: block;
    background: #1e1e1e;
    text-align: center;
    padding: 10px 20px;
    margin: 0;
    border: none;	
}
.index-panel {
	position: relative;
	top: -40px;	
}
@media screen and (min-width: 1024px) and (max-width: 1215px) {
	.index-panel.container {
		max-width: 1080px;
	}
}

/* Level Statistics Typography scaling for mobile and tablet */
@media screen and (max-width: 768px) {
	.level-item {
		margin-bottom: 0.6rem !important;
	}
	.level-item .title {
		font-size: 1.4rem !important;
	}
	.level-item .heading {
		font-size: 0.72rem !important;
		letter-spacing: 0.5px;
	}
}
@media screen and (min-width: 769px) and (max-width: 1023px) {
	.level-item .title {
		font-size: 1.3rem !important;
	}
	.level-item .heading {
		font-size: 0.68rem !important;
	}
}

/* Ensure navbar and its dropdowns / drawer are layered above page content (z-index 10) but below modals (z-index 40) */
.navbar {
	position: relative;
	z-index: 35 !important;
}

/* ==========================================================================
   Responsive Navigation Breakpoint: 1200px
   Switches from desktop horizontal menu to 3-lined burger menu at <= 1199px
   ========================================================================== */
@media screen and (max-width: 1199px) {
	.navbar > .container {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
	}
	.navbar-brand {
		display: flex !important;
		width: 100%;
		align-items: stretch;
		justify-content: space-between;
	}
	.navbar-brand .navbar-item {
		align-items: center;
		display: flex;
	}
	.navbar-brand .navbar-item:first-child img,
	.navbar-brand img {
		max-width: calc(100vw - 80px) !important;
		height: auto;
	}
	.navbar-burger {
		display: block !important;
		margin-left: auto;
		cursor: pointer;
		height: 3.25rem;
		width: 3.25rem;
	}
	.navbar-menu {
		display: none !important;
		position: absolute;
		width: 100%;
		left: 0;
		top: 100%;
		box-shadow: 0 8px 16px rgba(10, 10, 10, 0.25);
		padding: 0.5rem 0;
		background-color: #375a7f !important;
		border-radius: 0 0 0.4em 0.4em;
		z-index: 100;
	}
	.navbar-menu.is-active {
		display: block !important;
	}
	.navbar, .navbar-start, .navbar-end {
		display: block !important;
	}
	.navbar-item.has-dropdown {
		display: block !important;
		padding: 0 !important;
	}
	.navbar-item:not(.has-dropdown),
	.navbar-link {
		display: block !important;
		color: #ffffff !important;
		padding: 0.5rem 0.75rem !important;
		background-color: transparent !important;
	}
	.navbar-item:not(.has-dropdown):hover,
	.navbar-link:hover,
	.navbar-item:not(.has-dropdown):focus,
	.navbar-link:focus {
		background-color: rgba(255, 255, 255, 0.08) !important;
		color: #1abc9c !important;
	}
	.navbar-dropdown {
		display: block !important;
		position: static !important;
		box-shadow: none !important;
		border: none !important;
		font-size: 0.875rem !important;
		padding: 0.25rem 0 0.5rem 0 !important;
		background-color: #375a7f !important;
		border-radius: 0 !important;
	}
	.navbar-dropdown .navbar-item,
	.navbar-dropdown a.navbar-item {
		display: block !important;
		background-color: transparent !important;
		color: #ffffff !important;
		padding: 0.5rem 1.5rem !important;
	}
	.navbar-dropdown .navbar-item:hover,
	.navbar-dropdown a.navbar-item:hover,
	.navbar-dropdown .navbar-item:focus,
	.navbar-dropdown a.navbar-item:focus {
		background-color: rgba(255, 255, 255, 0.08) !important;
		color: #1abc9c !important;
	}
	.navbar-dropdown .navbar-item.is-active,
	.navbar-dropdown a.navbar-item.is-active {
		background-color: rgba(255, 255, 255, 0.15) !important;
		color: #ffffff !important;
	}
	.navbar-dropdown .navbar-divider,
	.navbar-divider {
		display: block !important;
		background-color: rgba(255, 255, 255, 0.15) !important;
		border: none !important;
		height: 1px !important;
		margin: 0.5rem 0 !important;
	}
	.navbar-link::after {
		display: none !important;
	}

	/* Index Page Override (Light Theme for index.php) */
	body.page-index .navbar-menu,
	html.page-index .navbar-menu {
		background-color: #ffffff !important;
		box-shadow: 0 8px 16px rgba(10, 10, 10, 0.1);
	}
	body.page-index .navbar-item:not(.has-dropdown),
	html.page-index .navbar-item:not(.has-dropdown),
	body.page-index .navbar-link,
	html.page-index .navbar-link {
		color: #4a4a4a !important;
		background-color: transparent !important;
	}
	body.page-index .navbar-item:not(.has-dropdown):hover,
	html.page-index .navbar-item:not(.has-dropdown):hover,
	body.page-index .navbar-link:hover,
	html.page-index .navbar-link:hover,
	body.page-index .navbar-item:not(.has-dropdown):focus,
	html.page-index .navbar-item:not(.has-dropdown):focus,
	body.page-index .navbar-link:focus,
	html.page-index .navbar-link:focus {
		background-color: #fafafa !important;
		color: #3273dc !important;
	}
	body.page-index .navbar-dropdown,
	html.page-index .navbar-dropdown {
		background-color: #ffffff !important;
	}
	body.page-index .navbar-dropdown .navbar-item,
	html.page-index .navbar-dropdown .navbar-item,
	body.page-index .navbar-dropdown a.navbar-item,
	html.page-index .navbar-dropdown a.navbar-item {
		background-color: #ffffff !important;
		color: #4a4a4a !important;
	}
	body.page-index .navbar-dropdown .navbar-item:hover,
	html.page-index .navbar-dropdown .navbar-item:hover,
	body.page-index .navbar-dropdown a.navbar-item:hover,
	html.page-index .navbar-dropdown a.navbar-item:hover,
	body.page-index .navbar-dropdown .navbar-item:focus,
	html.page-index .navbar-dropdown .navbar-item:focus,
	body.page-index .navbar-dropdown a.navbar-item:focus,
	html.page-index .navbar-dropdown a.navbar-item:focus {
		background-color: #fafafa !important;
		color: #3273dc !important;
	}
	body.page-index .navbar-dropdown .navbar-item.is-active,
	html.page-index .navbar-dropdown .navbar-item.is-active,
	body.page-index .navbar-dropdown a.navbar-item.is-active,
	html.page-index .navbar-dropdown a.navbar-item.is-active {
		background-color: #3273dc !important;
		color: #ffffff !important;
	}
	body.page-index .navbar-dropdown .navbar-divider,
	html.page-index .navbar-dropdown .navbar-divider,
	body.page-index .navbar-divider,
	html.page-index .navbar-divider {
		background-color: #f5f5f5 !important;
	}
}

/* Desktop navbar formatting for >= 1200px */
@media screen and (min-width: 1200px) {
	.navbar, .navbar-menu, .navbar-start, .navbar-end {
		display: flex !important;
		align-items: stretch;
	}
	.navbar-brand {
		display: flex !important;
		width: auto;
	}
	.navbar-burger {
		display: none !important;
	}
	.navbar-menu {
		display: flex !important;
		flex-grow: 1;
		flex-shrink: 0;
		position: static !important;
		box-shadow: none !important;
		background-color: transparent !important;
		padding: 0 !important;
	}
	.navbar-dropdown {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
	}
	.navbar-item.has-dropdown.is-hoverable:hover .navbar-dropdown,
	.navbar-item.has-dropdown.is-active .navbar-dropdown {
		display: block;
	}
}

/* Density scaling for 1200px to 1340px to ensure comfortable spacing */
@media screen and (min-width: 1200px) and (max-width: 1340px) {
	.navbar-brand img {
		max-width: 250px;
		height: auto;
		max-height: 52px;
	}
	.navbar-item:not(.has-dropdown) {
		padding-left: 0.6rem !important;
		padding-right: 0.6rem !important;
		font-size: 0.95rem;
	}
	.navbar-link:not(.is-arrowless) {
		padding-left: 0.6rem !important;
		padding-right: 2.25rem !important;
		font-size: 0.95rem;
	}
}

.field-label {
	flex-grow: 2; /* overwrites previous value of 1 */
}
.field-label-help {
	font-size: 0.75rem;
}

.card { overflow: visible; }
.card-content { overflow: visible; } 

.dropdown-content a:hover {
	background-color: #ddd;
}
.dropdown:hover .dropdown-menu {
	display: block;
}
.dropdown:hover .dropbtn {
	background-color: #3e8e41;
}
.custom-dropdown {
	text-align: left;
	border-style: solid;
	border-width: 1px;
	border-color: #6c7b7d;	
}

.antispam { 
	display:none;
}