.read-article-controls {
display: flex !important;
flex-flow: row wrap !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 8px !important;
width: 100%;
margin: 0 0 12px !important;
}
.read-article-controls > * {
flex: 0 0 auto !important;
box-sizing: border-box;
width: auto !important;
max-width: 100%;
margin: 0 !important;
}
.read-article-btn,
.pause-article-btn {
padding: 8px 14px !important;
border: 0 !important;
border-radius: 4px;
background-color: #2d6a2d;
color: #fff;
cursor: pointer;
font-size: 13px !important;
line-height: 1.3 !important;
white-space: nowrap;
}
.read-article-btn:disabled,
.pause-article-btn:disabled,
#guru-voice-select:disabled,
#guru-speed-select:disabled {
opacity: .5;
cursor: not-allowed;
}
#guru-voice-select,
#guru-speed-select {
box-sizing: border-box;
min-height: 35px;
max-width: 260px;
padding: 8px 10px !important;
border: 0;
border-radius: 4px;
background: #2d6a2d;
color: #fff;
cursor: pointer;
font-size: 13px !important;
line-height: 1.3 !important;
}
#guru-progress-wrap {
width: 100%;
height: 6px;
margin: 0 0 16px;
overflow: hidden;
border-radius: 3px;
background: #ddd;
}
#guru-progress-bar {
width: 0;
height: 100%;
border-radius: 3px;
background: #2d6a2d;
transition: width .2s linear;
}
@media (max-width: 600px) {
.read-article-controls { gap: 6px !important; }
.read-article-controls > button { padding: 8px 10px !important; }
#guru-voice-select { max-width: 190px; }
}