#listitems {
clear: both;
width: 100%;
height: auto;
margin: 0 0 80px 0;
padding: 0;
border-collapse: collapse;
}
#listitems tr {
margin: 0;
padding: 0;
width: 100%;
height: auto;
}
#listitems td,
#listitems th {
width: auto;
height: auto;
border: 4px solid #fff;
padding: 8px 10px;
text-align: center !important;
vertical-align: middle !important;
background: #f1f1f1;
}
#listitems td a {
background: url(//howza.net/wp-content/plugins/tooba-web/download.png);
display: inline-block;
height: 20px;
width: 20px;
padding: 0;
margin: 0 3px;
text-decoration: none;
border: 0;
box-shadow: 0 0 0 0 currentColor;
vertical-align: middle;
}
#listitems td img {
padding: 0;
margin: 0 3px;
cursor: pointer;
vertical-align: middle;
display: inline-block;
}
#listitems tr:nth-child(odd) td {
padding: 8px 10px;
background: #fff;
}
#listitems tr th {
color: #fff;
background: #26b6c9;
text-align: center !important;
}
.dimage {
opacity: 1;
}
.pdf {
background: url(//howza.net/wp-content/plugins/tooba-web/text.png) !important;
display: inline-block !important;
margin: 0 auto !important;
}   #pagination {
clear: both;
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
padding-top: 20px !important;
padding-bottom: 100px !important;
direction: rtl !important;
}
.pagination-info {
width: 100% !important;
text-align: center !important;
font-size: 14px !important;
color: #555 !important;
margin-bottom: 8px !important;
font-weight: bold !important;
}
#pagination .paginate {
display: inline-block !important;
padding: 6px 14px !important;
background: #de841a !important;
border-radius: 5px !important;
color: #fff !important;
text-decoration: none !important;
border: 1px solid #b66709 !important;
font-size: 13px !important;
transition: all 0.2s ease !important;
cursor: pointer !important;
}
#pagination .paginate:hover {
background: #c07518 !important;
transform: scale(1.05) !important;
}
#pagination .page-num {
background: #f0f0f0 !important;
color: #333 !important;
border: 1px solid #ddd !important;
min-width: 36px !important;
text-align: center !important;
}
#pagination .page-num:hover {
background: #de841a !important;
color: #fff !important;
border-color: #b66709 !important;
}
#pagination .paginate-current {
display: inline-block !important;
padding: 6px 14px !important;
background: #26b6c9 !important;
border-radius: 5px !important;
color: #fff !important;
border: 1px solid #1a8a9e !important;
font-size: 13px !important;
font-weight: bold !important;
min-width: 36px !important;
text-align: center !important;
}
#pagination .paginate-disabled {
display: inline-block !important;
padding: 6px 14px !important;
background: #e0e0e0 !important;
border-radius: 5px !important;
color: #999 !important;
border: 1px solid #ccc !important;
font-size: 13px !important;
cursor: not-allowed !important;
}
#pagination .paginate-dots {
display: inline-block !important;
padding: 6px 6px !important;
color: #777 !important;
font-size: 16px !important;
}   #lesson-quick-search {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin: 35px auto 35px auto;
padding: 20px 25px;
background: linear-gradient(135deg, #0a1628 0%, #0d2847 100%);
border-radius: 14px;
border: 3px solid #00b4d8;
direction: rtl;
flex-wrap: wrap;
max-width: 700px;
box-shadow: 0 6px 30px rgba(0, 180, 216, 0.3);
position: relative;
}
#lesson-quick-search::before {
content: '';
display: block;
width: 100px;
height: 3px;
background: linear-gradient(90deg, transparent, #00b4d8, transparent);
position: absolute;
top: -22px;
left: 50%;
transform: translateX(-50%);
border-radius: 3px;
}
#lesson-quick-search::after {
content: '';
display: block;
width: 100px;
height: 3px;
background: linear-gradient(90deg, transparent, #00b4d8, transparent);
position: absolute;
bottom: -22px;
left: 50%;
transform: translateX(-50%);
border-radius: 3px;
}
#lesson-quick-search label {
color: #00d4ff;
font-size: 16px;
font-weight: bold;
white-space: nowrap;
}
#lesson-search-input {
flex: 1;
min-width: 200px;
max-width: 280px;
padding: 12px 18px;
border: 2px solid #00b4d8;
border-radius: 10px;
font-size: 18px;
direction: ltr !important;
text-align: center;
outline: none;
background: #ffffff;
color: #1a1a2e;
font-weight: bold;
transition: all 0.3s ease;
-moz-appearance: textfield;
font-family: Arial, sans-serif !important;
}
#lesson-search-input::-webkit-outer-spin-button,
#lesson-search-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
#lesson-search-input:focus {
border-color: #ffd700;
box-shadow: 0 0 25px rgba(255, 215, 0, 0.5);
background: #fffef0;
transform: scale(1.02);
}
#lesson-search-input::placeholder {
color: #94a3b8;
font-size: 14px;
font-weight: normal;
direction: rtl !important;
}
#lesson-search-btn {
padding: 12px 28px;
background: linear-gradient(135deg, #00b4d8, #0077b6);
color: #ffffff;
border: none;
border-radius: 10px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
white-space: nowrap;
box-shadow: 0 4px 15px rgba(0, 180, 216, 0.4);
}
#lesson-search-btn:hover {
background: linear-gradient(135deg, #00d4ff, #0098b8);
transform: scale(1.05);
box-shadow: 0 6px 25px rgba(0, 180, 216, 0.6);
}
#lesson-search-btn:active {
transform: scale(0.95);
}   @keyframes highlightRow {
0% { background-color: #fff3cd; }
50% { background-color: #ffe8a1; }
100% { background-color: transparent; }
}
#listitems tbody tr.highlight {
animation: highlightRow 2s ease;
}   #custom-player-top {
position: fixed !important;
bottom: 0 !important;
top: auto !important;
left: 0 !important;
right: 0 !important;
z-index: 999999999 !important;
background-color: #0a1628 !important;
background: #0a1628 !important;
color: #ffffff !important;
padding: 8px 15px 10px 15px !important;
box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.9) !important;
border-top: 4px solid #00b4d8 !important;
font-family: Arial, sans-serif !important;
direction: ltr !important;
box-sizing: border-box !important;
width: 100% !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
}
#custom-player-top,
#custom-player-top * {
background-color: #0a1628 !important;
background: #0a1628 !important;
background-image: none !important;
opacity: 1 !important;
z-index: 999999999 !important;
position: relative !important;
}
#custom-player-top::before {
content: "" !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background: #0a1628 !important;
z-index: -1 !important;
display: block !important;
} #custom-player-top input,
#custom-player-top textarea,
#custom-player-top select {
direction: ltr !important;
}
#player-content {
max-width: 1200px !important;
margin: 0 auto !important;
display: flex !important;
flex-direction: column !important;
gap: 4px !important;
background: transparent !important;
pointer-events: auto !important;
}
#player-title {
font-size: 13px !important;
font-weight: bold !important;
color: #00d4ff !important;
text-align: center !important;
padding: 2px 0 !important;
min-height: 20px !important;
overflow: hidden !important;
white-space: nowrap !important;
text-overflow: ellipsis !important;
border-bottom: 1px solid rgba(0, 180, 216, 0.15) !important;
pointer-events: none !important;
direction: rtl !important;
font-family: inherit !important;
}
#player-title span {
background: rgba(0, 180, 216, 0.12) !important;
padding: 2px 15px !important;
border-radius: 20px !important;
color: #00d4ff !important;
}
#player-controls-row1 {
display: flex !important;
align-items: center !important;
gap: 8px !important;
justify-content: center !important;
padding: 2px 0 !important;
pointer-events: auto !important;
}
#player-controls-row1 button {
background: rgba(255, 255, 255, 0.15) !important;
border: 1px solid rgba(255, 255, 255, 0.25) !important;
color: #ffffff !important;
font-size: 16px !important;
padding: 5px 12px !important;
border-radius: 8px !important;
cursor: pointer !important;
min-width: 38px !important;
min-height: 38px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
transition: all 0.3s ease !important;
pointer-events: auto !important;
position: relative !important;
z-index: 999999999 !important;
}
#player-controls-row1 button:hover {
background: rgba(0, 180, 216, 0.5) !important;
transform: scale(1.08) !important;
border-color: #00b4d8 !important;
}
#player-controls-row1 button:active {
transform: scale(0.92) !important;
}
#play-btn {
background: rgba(0, 180, 216, 0.4) !important;
font-size: 18px !important;
font-weight: bold !important;
color: #ffffff !important;
border-color: #00b4d8 !important;
min-width: 45px !important;
min-height: 45px !important;
}
#play-btn:hover {
background: rgba(0, 180, 216, 0.7) !important;
}
#stop-btn {
background: rgba(255, 80, 80, 0.3) !important;
border-color: rgba(255, 80, 80, 0.35) !important;
}
#stop-btn:hover {
background: rgba(255, 80, 80, 0.6) !important;
border-color: #ff5555 !important;
}
#progress-container {
display: flex !important;
align-items: center !important;
gap: 8px !important;
flex: 1 !important;
min-width: 140px !important;
pointer-events: auto !important;
}
#progress-container span {
font-size: 11px !important;
font-family: monospace !important;
color: #88ccff !important;
min-width: 38px !important;
pointer-events: none !important;
}
#progress-bar {
flex: 1 !important;
height: 5px !important;
-webkit-appearance: none !important;
appearance: none !important;
background: #1a3a5c !important;
border-radius: 4px !important;
outline: none !important;
cursor: pointer !important;
min-width: 60px !important;
pointer-events: auto !important;
position: relative !important;
z-index: 99999999 !important;
}
#progress-bar::-webkit-slider-thumb {
-webkit-appearance: none !important;
appearance: none !important;
width: 14px !important;
height: 14px !important;
border-radius: 50% !important;
background: #00d4ff !important;
cursor: pointer !important;
box-shadow: 0 0 20px rgba(0, 212, 255, 0.5) !important;
}
#progress-bar::-moz-range-thumb {
width: 14px !important;
height: 14px !important;
border-radius: 50% !important;
background: #00d4ff !important;
cursor: pointer !important;
border: none !important;
}
#player-controls-row2 {
display: flex !important;
align-items: center !important;
gap: 10px !important;
justify-content: center !important;
padding: 2px 0 !important;
pointer-events: auto !important;
}
#volume-label {
font-size: 14px !important;
color: #88ccff !important;
pointer-events: none !important;
}
#volume-bar {
width: 100px !important;
height: 5px !important;
-webkit-appearance: none !important;
appearance: none !important;
background: #1a3a5c !important;
border-radius: 3px !important;
outline: none !important;
cursor: pointer !important;
pointer-events: auto !important;
position: relative !important;
z-index: 99999999 !important;
}
#volume-bar::-webkit-slider-thumb {
-webkit-appearance: none !important;
appearance: none !important;
width: 14px !important;
height: 14px !important;
border-radius: 50% !important;
background: #ffffff !important;
cursor: pointer !important;
}
#volume-bar::-moz-range-thumb {
width: 14px !important;
height: 14px !important;
border-radius: 50% !important;
background: #ffffff !important;
cursor: pointer !important;
border: none !important;
}
#speed-select {
background: rgba(0, 180, 216, 0.15) !important;
color: #ffffff !important;
border: 1px solid rgba(0, 180, 216, 0.3) !important;
padding: 4px 10px !important;
border-radius: 6px !important;
font-size: 12px !important;
font-weight: bold !important;
cursor: pointer !important;
outline: none !important;
min-width: 50px !important;
pointer-events: auto !important;
position: relative !important;
z-index: 99999999 !important;
direction: ltr !important;
}
#speed-select option {
background: #0a1628 !important;
color: #ffffff !important;
}
#fullscreen-btn {
background: rgba(100, 200, 255, 0.15) !important;
border: 1px solid rgba(100, 200, 255, 0.2) !important;
color: #ffffff !important;
font-size: 15px !important;
padding: 5px 12px !important;
border-radius: 8px !important;
cursor: pointer !important;
min-width: 38px !important;
min-height: 38px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
pointer-events: auto !important;
position: relative !important;
z-index: 999999999 !important;
}
#fullscreen-btn:hover {
background: rgba(100, 200, 255, 0.45) !important;
border-color: #64c8ff !important;
transform: scale(1.08) !important;
}
#player-status {
text-align: center !important;
font-size: 10px !important;
color: #88aacc !important;
min-height: 16px !important;
padding-top: 1px !important;
pointer-events: none !important;
direction: rtl !important;
}
#player-status #status-text {
background: rgba(0, 180, 216, 0.08) !important;
padding: 1px 16px !important;
border-radius: 12px !important;
color: #88ccff !important;
}   @media (max-width: 600px) {
#custom-player-top {
padding: 4px 8px 6px 8px !important;
}
body {
padding-bottom: 85px !important;
}
#player-controls-row1 {
gap: 4px !important;
}
#player-controls-row1 button {
font-size: 13px !important;
padding: 3px 8px !important;
min-width: 32px !important;
min-height: 32px !important;
}
#play-btn {
font-size: 15px !important;
min-width: 38px !important;
min-height: 38px !important;
}
#progress-container span {
font-size: 9px !important;
min-width: 30px !important;
}
#player-controls-row2 {
gap: 6px !important;
}
#volume-bar {
width: 70px !important;
}
#volume-label {
font-size: 12px !important;
}
#speed-select {
font-size: 10px !important;
padding: 3px 6px !important;
min-width: 42px !important;
}
#fullscreen-btn {
font-size: 13px !important;
min-width: 32px !important;
min-height: 32px !important;
padding: 3px 8px !important;
}
#player-title {
font-size: 11px !important;
min-height: 16px !important;
}
#player-title span {
font-size: 10px !important;
padding: 1px 10px !important;
}
#player-status {
font-size: 9px !important;
min-height: 14px !important;
}
#listitems td,
#listitems th {
padding: 6px 5px !important;
text-align: center !important;
}
#pagination {
gap: 5px !important;
padding-bottom: 85px !important;
}
#pagination .paginate,
#pagination .paginate-current,
#pagination .paginate-disabled {
font-size: 11px !important;
padding: 4px 8px !important;
min-width: 30px !important;
}
.pagination-info {
font-size: 12px !important;
}
#lesson-quick-search {
padding: 15px 18px;
gap: 10px;
margin: 30px auto 30px auto;
}
#lesson-quick-search label {
font-size: 14px;
width: 100%;
text-align: center;
}
#lesson-search-input {
flex: 1;
min-width: 120px;
padding: 10px 14px;
font-size: 16px;
}
#lesson-search-btn {
padding: 10px 22px;
font-size: 14px;
}
}
@media (max-width: 400px) {
#volume-bar {
width: 50px !important;
}
#player-controls-row1 button {
font-size: 11px !important;
padding: 2px 5px !important;
min-width: 28px !important;
min-height: 28px !important;
}
#play-btn {
font-size: 13px !important;
min-width: 34px !important;
min-height: 34px !important;
}
#speed-select {
font-size: 9px !important;
padding: 2px 4px !important;
min-width: 35px !important;
}
#fullscreen-btn {
font-size: 11px !important;
min-width: 28px !important;
min-height: 28px !important;
padding: 2px 6px !important;
}
#pagination .paginate,
#pagination .paginate-current,
#pagination .paginate-disabled {
font-size: 10px !important;
padding: 3px 6px !important;
min-width: 26px !important;
}
.pagination-info {
font-size: 10px !important;
}
}   #custom-player-top:fullscreen {
background: #050a1a !important;
padding: 40px 60px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
position: fixed !important;
top: 0 !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
z-index: 99999999 !important;
border-top: none !important;
}
#custom-player-top:fullscreen #player-content {
max-width: 90% !important;
}
#custom-player-top:fullscreen #player-title {
font-size: 28px !important;
color: #00d4ff !important;
}
#custom-player-top:fullscreen #player-title span {
font-size: 24px !important;
padding: 6px 35px !important;
}
#custom-player-top:fullscreen #player-controls-row1 button {
font-size: 32px !important;
padding: 15px 25px !important;
min-width: 60px !important;
min-height: 60px !important;
}
#custom-player-top:fullscreen #play-btn {
font-size: 38px !important;
min-width: 70px !important;
min-height: 70px !important;
}
#custom-player-top:fullscreen #progress-bar {
height: 10px !important;
}
#custom-player-top:fullscreen #progress-bar::-webkit-slider-thumb {
width: 24px !important;
height: 24px !important;
}
#custom-player-top:fullscreen #progress-container span {
font-size: 18px !important;
min-width: 60px !important;
color: #ffffff !important;
}
#custom-player-top:fullscreen #volume-bar {
width: 180px !important;
height: 8px !important;
}
#custom-player-top:fullscreen #volume-bar::-webkit-slider-thumb {
width: 24px !important;
height: 24px !important;
}
#custom-player-top:fullscreen #speed-select {
font-size: 22px !important;
padding: 8px 18px !important;
}
#custom-player-top:fullscreen #fullscreen-btn {
font-size: 28px !important;
min-width: 60px !important;
min-height: 60px !important;
padding: 15px 25px !important;
}
#custom-player-top:fullscreen #player-status {
font-size: 16px !important;
color: #88ccff !important;
}
#custom-player-top:fullscreen #volume-label {
font-size: 24px !important;
}
#custom-player-top:-webkit-full-screen {
background: #050a1a !important;
padding: 40px 60px !important;
position: fixed !important;
top: 0 !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
z-index: 99999999 !important;
}
#custom-player-top:-moz-full-screen {
background: #050a1a !important;
padding: 40px 60px !important;
position: fixed !important;
top: 0 !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
z-index: 99999999 !important;
}
#custom-player-top:-ms-fullscreen {
background: #050a1a !important;
padding: 40px 60px !important;
position: fixed !important;
top: 0 !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
z-index: 99999999 !important;
}   input:not(#lesson-search-input):not(#custom-player-top input),
textarea:not(#custom-player-top textarea),
select:not(#custom-player-top select) {
direction: rtl !important;
text-align: right !important;
font-family: inherit !important;
} body:not(#custom-player-top) input,
body:not(#custom-player-top) textarea,
body:not(#custom-player-top) select {
direction: rtl !important;
text-align: right !important;
}