body, button, div, input{
	font-size: 18px;	
}




#spPageLink a{
	margin:12px 0px 12px 0px;
	padding:12px 0px 12px 0px;
	font-size:90% !important; letter-spacing: -2px;
}
.divVid {
   width:100%;
   max-width:1600px;
  

}
.clsVidSpk{ width:96%;
  border: 1px solid #555;
}

body, button{	
	letter-spacing: 0px;
	word-spacing: 1.2px;
	font-weight: normal;
	text-decoration: none;
	font-style: normal;
}
input[type=range]{
	width:50% !important;max-width:300px;
}

.spSpkTrans{
	margin:0px 0px 12px 3px;
	font-size: 18px;	
	color:#aaa;
}

#displayTextTitle a{
	cursor: pointer;
}
.optDiv{
   margin:15px 0px;
}
.voc-ol{
   margin:0px 0px;
   list-style-type: decimal;
   line-height:160%;
    margin-block-start: 0px;
    margin-block-end: 0px;
    padding-inline-start: 12px !important;
}
.voc-spk{
	cursor: pointer;
	padding:2px 1px;
}
.img-h-1{
   margin:12px;
}
.iFooter{
   font-size:15px;color:#ccc; float: right !important;width:100%;
}
.btnClose{
	background-color:#b4ffb4;
}
.flex
{
	margin:20px 0px;
}

.flex{
	display:flex;
}


.bg-green-500, .bg-green-700
{
	background-color:#15a715;
	border-color:#24e147;
}
#spImgSpeak button{
	color: #005900;
	text-shadow: #147a1d 2px 2px 0px, #9C9C9C 2px 3px 1px;
	background: #53be86;
}
.shadowed
{
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

select{
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
	border-color:#e3dede;
}
.relative{
	position:relative;
}

/*
img{
	    overflow-clip-margin: content-box;
}
canvas{
	    overflow-clip-margin: content-box;
	
}*/


.bg-white {
    background-color: rgb(255 255 255);
	opacity: 1;
}

.bg-black {
    background-color: rgb(0 0 0);
	opacity: 1;
}


.bg-opacity-50 {
    margin:0px;
	opacity: 0.8;
}
.text-xl {
    
    line-height: 1.75rem;
}

div {
    display: block;
    unicode-bidi: isolate;
}

a {
    color: inherit;
    text-decoration: inherit;
}
.inset-0 {
    inset: 0px;
}
.fixed {
    position: fixed;
}
.items-center {
    align-items: center;
}

.justify-center {
    justify-content: center;
}
button {
    cursor: pointer;
}

.mb-2{
	margin:8px 0px;
}
.voc-list{
	margin:8px 0px;
}

.voc-list{
	margin:8px 0px;
}
.border {
    border-width: 1px;
}
.mt-4 {
    margin-top: 1rem;
}
.cursor-pointer {
    cursor: pointer;
}

.shadow, .shadow-md  {
    box-shadow: 0px 3px 5px 3px rgb(7 14 61 / 20%), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}
.chkBox{
	width:29px;	
   -ms-transform: scale(2); /* IE */
 -moz-transform: scale(2); /* FF */
 -webkit-transform: scale(2); /* Safari and Chrome */
 -o-transform: scale(2); /* Opera */
 cursor: pointer;
 border-color:#e3dede;
}




.txtbox
{
 border-color:#e3dede;border-top-color:#eee;border-width:1px;width:75%;max-width:400px;
}


.top-0 {
    top: 0px; 
}


.p-4 {
    padding: 8px;
}
.img-h-1 {
    margin: 12px;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

img,canvas{
height:auto;max-width:100%;display:block;vertical-align:middle;
 cursor: default !important;
}
.absolute
{
	position:absolute;
}
.bg-red-500 
{
	background-color:#bf0000;
}

.w-full{
	width:95%;
}

img.w-full{
	width:100%;
}

.underline{
text-decoration:underline;	
}

.bg-yellow-500 
{
	background-color:#baa51d;
	border-color:#e1d062;
}
.KQ{
	margin-bottom:15px;
	color:#008120;
}
.bg-yellow-300
{
	background-color:#ced721;
	padding:2px 3px;
}

.bg-blue-400, .bg-blue-500,  .bg-blue-600, .bg-blue   {
	background-color:#33e;box-shadow: rgba(99, 99, 99, 0.4) 0px 2px 5px 0px;
}
.bg-blue-hover  {
	background-color:#330;
}


.text-white{
	color:#fff !important;
}
.quesVN{
	line-height:170%;
}

textarea{
	border-radius: 5px;
	width:100%;
	padding:10px;margin:2px;box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
	resize: vertical;
	height:100px;
	font-family: "Times New Roman", Times, serif;
	font-size: 18px;	
}

.rounded {
	border-radius: 5px;
	padding:6px;margin:3px 3px 3px 0px;
}


.hidden{
	display:none;
}
#tooltip{
	background-color:#e3fc9b;
}
.max-w-xs {
    max-width: 1024px;
	min-width: 35%;
}
.text-sm {   
    line-height: 1.25rem;
}
.float-right {
    float: right;
}
.top-0 {
    top: 0px;
}
.left-0 {
    left: 0px;
}

.top-6 {
	top: 6px;
}

.right-6{
	right: 6px;
}

.pointer-events-none{
	pointer-events: none !important;
}


.mt-4{
	margin:18px 0px;
	padding:12px;
}

.mb-4{
	margin-bottom:22px;
}
.bg-gray-700{
	background-color:#675555;
}
.bg-purple-500{
	background-color:#616f19;
}
#parkImage{
	box-shadow: 0px 4px 2px 4px rgb(7 14 61 / 20%), 0 1px 2px 0px rgb(0 0 0 / 0.1);
	margin-bottom:15px;
}
.m-14 {
    margin: 14px 0px;
}
.p-6 {
    padding: 12px 50px;
}
.space-y-2{
	margin-bottom:18px;
}
.p-1{
	padding: 10px 6px;
}
#readingDisplay{
	margin:16px 0px;
}
.page-selected{
	color:#1a1ec1 !important;
	text-decoration:none !important;	
text-shadow: 1px 1px 0px #969696, 1px 4px 2px #aba8a8;

}

.btn-unit{
	background-color:#c7c8ce;padding:5px; margin:5px;
	border:0px;color:#222;
}
.btn-unit-hover{
	background-color:#c2a907;
}
.btnPage{
	background-color:#c2a907;border:2px;
}
.btnPageSelected{
	background-color:#33e;
}
.text-title{
	text-decoration:bold; 
}
.pTitle{
	margin:8px 0px;
}
.a-link{
	color:#1a1ec1;	text-decoration:bold; padding:7px;
}

h2{
	display:inline !important;
}
#displayTextTitle {
margin-top:15px;	
color: #333333;
background: #FFFFFF;
text-shadow: 2px 2px 0px #c2d2d3, 2px 2px 3px rgba(0, 0, 0, 0.15);
}
.word-write{
	text-decoration:bold; padding:5px;
	display:inline-block;
	text-shadow: 0 1px 0 #CCCCCC, 0 2px 0 #c9c9c9, 0 3px 0 #bbb;
}
.smallTextSize{
	font-size:18px;
	line-height:110%;
}

.largeTextSize{
	font-size:26px;
	line-height:160%;
}
.clsToolTipMobile{
	width:95% !important;
}
.word-write-list{
	display:inline-block;
}
h1{
	margin-top:3px; line-height:135% !important;
}
#qaContainer{
	font-size:18px;
	line-height:160%;
}

.btn-lyric{
  background-color: #e3dede;opacity: 0.6;
margin: 2px 2px;
padding:5px 5px;
}