.etjpAudioPlayer{
    float: right;
    position: relative;
    left: -50%;
    text-align: left;
    margin-top: 15px;
	color: #777;
}
.etjpAudioPlayer > .audioControls{
    position: relative;
    left: 50%;
}
.answerAudio{ 
    display: none; 
} 
.audioControls .playBtnCont,
.audioControls .audSettingsCont,
.audioControls .inlineControls{
    float: left; 
}
.audioControls .inlineControls>div{
    float: left; 
    margin-right: 6px;
}
.inlineControls{
    padding: 5px;
    border: 1px solid #d6d6d6;
    border-radius: 5px;
    margin: 10px 0px;
}
.inlineControls .volumeSlider{
    padding: 5px 0px;
}
.inlineControls .volIcon,
.inlineControls .volTextDiv{
    padding-top: 4px;
}
.audioPlayBtn{ 
    height: 80px; 
    width: 80px; 
    border-radius: 40px;
    margin-right: 20px; 
}
.audioPlayBtn, .playAllBtn{
	background-color: #094b7f; 
    border: 1px solid #aaa; 
    color: #ffffff; 
    font-weight: bold;
}
.playAllBtn{
	width: 80px;
	padding: 8px 12px;
	border-radius: 4px;
	font-family: Nunito;
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.playAllBtn .playIcon {
	margin-left: 0px;
}
.playAllInTableBtn {
	float: right;
    margin-left: 12px;
    margin-bottom: 4px;
}
.playAllRestartBtn {
    width: 42px;
	margin-left: 8px;
	background-color: #ffffff; 
    border: 1px solid #094b7f; 
    color: #094b7f; 
    font-weight: bold;
}
/* Master button wrapper to keep buttons together */
.playAllMasterBtnWrapper {
    display: flex;
    align-items: center;
}

.audioPlayBtn:hover, .playAllBtn:hover{
    background-color: #00a2e8; 
    transition: background 0.1s linear; 
}
.audioPlayBtn:focus, .playAllBtn:focus{
    background-color: #094b7f; 
}
.audioPlayBtn.isPlaying, .playAllBtn.isPlaying{ 
    background-color: #00aa00; 
}
.audioPlayBtn .dashicons{ 
    height: 40px; 
    width: 40px; 
    font-size: 40px; 
}
.playAllRestartBtn .dashicons {
    margin: 0;
}
.vocabTableTitle{
    line-height: 1.4;
    font-size: 18px;
    padding: 4px 0px;
    overflow: auto; /* Clear the float */
    min-height: 42px; /* Minimum height to accommodate button */
}
.vocabTableTitle strong {
    display: inline-block;
    padding-top: 8px;
}
.vocabTable tr.playingRow{
	background-color: #f0f7fc;
	font-weight: bold;
}


.playIcon{
    margin-left: 3px;
}
.isPlaying .playIcon{ 
    display: none; 
} 
.pauseIcon{ 
    display: none; 
} 
.isPlaying .pauseIcon{ 
    display: inline-block; 
} 
.voiceSelector label, 
.speedSelector label,
.pauseDurationSelector label { 
    float: left; 
    border-radius: 3px; 
    border: 1px solid #e8eae9; 
    overflow: auto;
    margin: 0;
} 
.voiceSelector label,
.speedSelector label {
    width: 70px;
}
.pauseDurationSelector label {
    min-width: 50px;
}



.etjpAudioClear,
.audioControls:after,
.audioControls > div:after,
.voiceSelector:after,
.speedSelector:after,
.volumeSliderCont:after,
.volumeControlCont:after,
.timeSliderCont:after,
.playAllControls:after{
    clear: both;
    content: "";
    display: block;
}
.voiceSelector label:hover, 
.speedSelector label:hover,
.pauseDurationSelector label:hover { 
    cursor: pointer; 
} 
.voiceSelector label span, 
.speedSelector label span,
.pauseDurationSelector label span { 
    text-align: center; 
    font-weight: bold; 
    padding: 2px; 
    display: block; 
    color: #555; 
    background-color: #e6e6e6; 
    transition: background 0.1s linear; 
}
.voiceSelector label span,
.speedSelector label span {
    font-size: 14px;
}
.pauseDurationSelector label span {
    font-size: 13px;
    padding: 4px 8px;
    white-space: nowrap;
    font-weight: 600;
}

.voiceSelector label span:hover, 
.speedSelector label span:hover,
.pauseDurationSelector label span:hover {
    background-color: #d6d6d6;
}
.voiceSelector label input, 
.speedSelector label input,
.pauseDurationSelector label input { 
    display: none; 
    
} 
.voiceSelector input:checked + span, 
.speedSelector input:checked + span,
.pauseDurationSelector input:checked + span { 
    background-color:#094b7f;
    color: #fff;
}
.speedSelector.isLocked label span,
.speedSelector.isLocked label span:hover {
    background-color: #e6e6e6;
    color: #a5a5a5;
}
.speedSelector.isLocked input:checked + span,
.speedSelector.isLocked input:checked + span:hover {
    background-color: #498bbf;
    color: #eee;
}
.speedSelector.isLocked label:hover{
    cursor: not-allowed;
}
.volumeControlCont > div{
    float: left;
    font-size: 24px;
    line-height: 16px;
}

.volIcon, .volTextDiv{
    width: 20px;
    padding-top: 2px;
}
.volTextDiv{
    text-align: right;
}
.volumeText{
    font-size: 14px;
    font-weight: bold;
}

.etjpAudioPlayer .timeSlider,
.etjpAudioPlayer .volumeSlider,
.playAllProgress .playAllSlider {
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	cursor: pointer;
	width: 100%;
	border: none;
	
}
.etjpAudioPlayer .timeSlider {
	width: 160px;
	padding: 10px 0px;
	margin: 0px 5px;
}
.etjpAudioPlayer .volumeSlider {
	margin: 1px 2px 3px 1px;
	width: 97px;
	padding: 8px 0px;
}


.timeSliderCont>div{
	float: left;	
}
.timeElapsedText, .timeTotalText {
	width: 35px;
	text-align: center;
}
.timeElapsedText .timeText, .timeTotalText .timeText {
	font-size: 14px;
	line-height: 16px;
	font-weight: 700;
}

/***** Chrome, Safari, Opera, and Edge Chromium *****/
.etjpAudioPlayer .timeSlider::-webkit-slider-runnable-track, 
.etjpAudioPlayer .volumeSlider::-webkit-slider-runnable-track,
.playAllProgress .playAllSlider::-webkit-slider-runnable-track {
	background-color: #094b7f;
	height: 6px;
	border-radius: 3px;
}

.etjpAudioPlayer .timeSlider::-webkit-slider-thumb,
.etjpAudioPlayer .volumeSlider::-webkit-slider-thumb,
.playAllProgress .playAllSlider::-webkit-slider-thumb {
	-webkit-appearance: none; /* Override default look */
	appearance: none;
	margin-top: -7px; /* Centers thumb on the track */
	background-color: #fff;
	height: 20px;
	width: 10px;
	border: 1px solid #094b7f;
	border-radius: 10px;
}

/******** Firefox ********/
.etjpAudioPlayer .timeSlider::-moz-range-track,
.etjpAudioPlayer .volumeSlider::-moz-range-track,
.playAllProgress .playAllSlider::-moz-range-track {
	background-color: #094b7f;
	height: 6px;
	border-radius: 3px;
}

.etjpAudioPlayer .timeSlider::-moz-range-thumb,
.etjpAudioPlayer .volumeSlider::-moz-range-thumb,
.playAllProgress .playAllSlider::-moz-range-thumb {
	background-color: #fff;
	height: 20px;
	width: 10px;
	border: 1px solid #094b7f;
	border-radius: 10px;
}


.playAllControls{
	padding: 10px;
    border: 1px solid #d6d6d6;
    border-radius: 5px;
    margin: 10px 0px;
}
.playAllMainControls{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
.playAllTopRow {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
}
.playAllProgress {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1; /* Allow it to grow and take remaining space */
    min-width: 200px; /* Minimum width before wrapping */
}
.playAllSliderCont{
    flex: 1;
    padding-top: 0;
	align-items: center;
}
.playAllProgress .playAllSlider {
    width: 100%;
    padding: 10px 0px;
    margin: 0;
	display: block;
}
.playAllSliderText {
    min-width: 52px;
    text-align: right;
    font-size: 14px;
    font-weight: 700;
    color: #555;
    white-space: nowrap;
}

/* Pause duration */
.pauseDurationSelector {
    display: inline-flex;
    gap: 0;
}
.pauseDurationSelector label {
    border-radius: 0;
    border-right: none;
}
.pauseDurationSelector label:first-child {
    border-radius: 3px 0 0 3px;
}
.pauseDurationSelector label:last-child {
    border-radius: 0 3px 3px 0;
    border-right: 1px solid #e8eae9;
}
/* Pause duration controls layout */
.pauseDurationControls {
    display: flex;
    align-items: center;
    gap: 8px;
}
.pauseLabel {
    font-size: 14px;
    color: #555;
    font-weight: 600;
    white-space: nowrap;
}

/* Shared styles for all screens 768px and below */
@media (max-width: 768px) {
    .playAllMainControls {
        gap: 10px;
    }
    
    .playAllTopRow {
        width: 100%;
        gap: 8px;
    }
    
    .playAllMasterBtnWrapper {
        flex: 0 0 auto;
    }
    
    .pauseDurationSelector {
        display: flex;
        width: 100%;
    }
    
    .pauseDurationSelector label {
        flex: 1 1 0;
        min-width: 0;
    }
    
    .pauseDurationSelector label span {
        font-size: 12px;
        padding: 4px 4px;
    }
    
    .playAllProgress {
        width: 100%;
    }
}

/* Fine-tune for medium screens (like tablets) */
@media (min-width: 769px) and (max-width: 850px) {
    .pauseDurationSelector label {
        min-width: 45px; /* Slightly smaller to fit better */
    }
    
    .pauseDurationSelector label span {
        font-size: 12px;
        padding: 4px 6px;
    }
    
    .pauseLabel {
        font-size: 13px;
    }
}
/* Medium screens - pause controls inline with text beside buttons */
@media (min-width: 501px) and (max-width: 768px) {
    .playAllTopRow {
        flex-wrap: wrap;
    }
    
    .pauseDurationControls {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        flex: 1 1 auto;
        min-width: 0;
    }
    
    .pauseLabel {
        font-size: 13px;
        white-space: nowrap;
        flex-shrink: 0;
    }
    
    .pauseDurationSelector {
        flex: 1 1 auto;
        min-width: 0;
    }
    
    .pauseDurationSelector label {
        min-width: 45px;
    }
    
    .pauseDurationSelector label span {
        padding: 4px 6px;
    }
}

/* Shared styles for screens 500px and below - text above buttons */
@media (max-width: 500px) {
    .pauseDurationControls {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }
    
    .pauseLabel {
        text-align: left;
    }
}

/* Small-medium screens - pause controls same row as play buttons */
@media (min-width: 381px) and (max-width: 500px) {
    .playAllTopRow {
        flex-wrap: wrap;
    }
    
    .pauseDurationControls {
        flex: 1 1 auto;
        min-width: 0;
    }
    
    .pauseLabel {
        font-size: 12px;
    }
    
    .playAllMasterBtn {
        height: 52px;
    }
}

/* Small screens - everything stacks vertically */
@media (max-width: 380px) {
    .playAllTopRow {
        flex-direction: column;
    }
    
    .playAllMasterBtnWrapper {
        width: 100%;
        display: flex;
        gap: 8px;
    }
    
    .playAllMasterBtn {
        flex: 1;
        height: 46px;
    }
    
    .playAllRestartBtn {
        height: 46px;
    }
    
    .pauseDurationControls {
        width: 100%;
        gap: 6px;
    }
    
    .pauseLabel {
        font-size: 13px;
    }
}



/*
 * Current word when play all is looping
 */

.playAllCurrentTextCont {
    width: 100%;
    padding: 8px 12px;
    background-color: #f0f7fc;
    border-radius: 4px;
    border-left: 4px solid #094b7f;
    margin-top: 10px;
	display: none; /* Hidden by default */
}
/* Desktop/Tablet: Horizontal table-like layout */
.playAllCurrentTextCont:not([style*="display: none"]) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
/* Base styles for all child divs */
.playAllCurrentTextCont > div {
    flex: 1 1 0;
    min-width: 0;
	min-height: 40px;
    padding: 8px 8px 4px;
    text-align: left;
    font-size: 16px;
    font-weight: 600;
    color: #555;
}
/* Override any table cell styles that might conflict */
.playAllCurrentTextCont > div {
    display: block; /* Override any table-cell display */
    border: none; /* Remove any table borders */
    background: none; /* Remove any table cell backgrounds */
    vertical-align: baseline; /* Reset vertical alignment */
}
/* First Japanese div gets emphasis */
.playAllCurrentTextCont > div:first-child {
    font-weight: bold;
    font-size: 18px;
    color: #094b7f;
}
/* English div styling */
.playAllCurrentTextCont > div.english {
    flex: 1.5 1 0; /* 50% more space than Japanese divs */
    font-size: 15px;
    color: #666;
    font-style: italic;
    font-weight: normal;
}

/* Mobile: Stack vertically */
@media (max-width: 768px) {
    .playAllCurrentTextCont:not([style*="display: none"]) {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 10px 12px;
    }
    
    .playAllCurrentTextCont > div {
        text-align: left;
		min-height: 42px;
        padding: 6px 8px 4px;
        border-radius: 3px;
    }
    
    .playAllCurrentTextCont > div:first-child {
        font-size: 20px;
    }
    
    .playAllCurrentTextCont > div:not(:first-child):not(.english) {
        font-size: 17px;
    }
    
    .playAllCurrentTextCont > div.english {
        font-size: 16px;
    }
}