body{font-family:Arial,sans-serif;text-align:center;margin:0;padding:20px;background-color:#f5f5f5;padding-top:150px}.container{display:inline-block;padding:20px;border:1px solid #ccc;background-color:#fff;border-radius:8px;padding-top:100px;max-width:600px;margin:0 auto}.controls{margin-bottom:10px;text-align:center;width:100%}.controls label{margin-right:15px;display:inline-block}.search-container{margin-bottom:10px;display:flex;justify-content:center}#searchInput{width:200px;margin-right:5px}#searchButton{padding:5px 10px;background-color:#4caf50;color:white;border:0;cursor:pointer}.navigation{display:flex;justify-content:center;align-items:center;width:100%;max-width:600px}.navigation button{padding:5px 10px;background-color:#4caf50;color:white;border:0;border-radius:4px;cursor:pointer}.navigation button:disabled{background-color:#ccc;cursor:not-allowed}#currentChapterIndicator{font-weight:bold;margin:0 20px}.floating-controls{position:fixed;top:0;left:0;right:0;background-color:rgba(255,255,255,0.9);padding:10px;box-shadow:0 2px 5px rgba(0,0,0,0.1);z-index:1000;display:flex;flex-direction:column;align-items:center;-webkit-transform:translateZ(0);transform:translateZ(0)}.hebrew-text{font-size:1.2em;line-height:1.6;margin-bottom:10px}.verse-container{margin-bottom:20px;padding:10px;background-color:#f9f9f9;border-radius:5px;box-shadow:0 1px 3px rgba(0,0,0,0.1)}.verse-number{font-size:.8em;color:#888;margin-right:10px}.verse-notes{font-size:.9em;background-color:#f0f0f0;border-radius:3px;padding:8px;margin-top:10px}.note{background-color:#f9f9f9;border:1px solid #ddd;border-radius:4px;padding:10px;margin-bottom:10px}.note h3{margin-top:0;color:#333}.note p{margin-bottom:0}.note h4{margin:0 0 5px 0;color:#444}.note p{margin:0;color:#666}.word{cursor:pointer;padding:0 5px;position:relative;display:inline-block;transition:background-color .3s ease}.word:hover{background-color:#e0e0e0;border-radius:5px}.translation,.pronunciation{font-size:14px;color:#333;margin-top:5px;display:none}.translation{color:#4a90e2}.pronunciation{color:#28a745}.word.show-translation .translation,.word.show-pronunciation .pronunciation{display:block}.word.active .popup{display:block;opacity:1;top:100%}.popup{font-size:16px;position:absolute;top:110%;left:50%;transform:translateX(-50%);white-space:nowrap;background-color:#fff;padding:8px 12px;border-radius:8px;box-shadow:0 4px 10px rgba(0,0,0,0.15);z-index:10;display:none;color:#333;opacity:0;transition:opacity .3s ease,top .3s ease}.popup div{margin-bottom:5px}#pronunciation{font-size:18px;font-weight:bold;color:#28a745}#arabic{font-size:16px;color:#4a90e2}.search-container{margin-bottom:10px;display:flex;justify-content:center}#searchInput{width:200px;margin-right:5px}#searchButton{padding:5px 10px;background-color:#4caf50;color:white;border:0;cursor:pointer}#searchResults{margin-top:20px;text-align:right}#searchResults ul{list-style-type:none;padding:0}#searchResults li{margin-bottom:10px;padding:10px;background-color:#f0f0f0;border-radius:5px;cursor:pointer}#searchResults li:hover{background-color:#e0e0e0}.highlighted-verse{background-color:#ffffd0;transition:background-color .3s ease}mark{background-color:yellow;padding:2px}.verse-navigation{display:flex;justify-content:center;align-items:center;margin-bottom:10px}.verse-navigation select{margin:0 5px;padding:5px;font-size:14px}.verse-navigation button{padding:5px 10px;background-color:#4caf50;color:white;border:0;cursor:pointer;font-size:14px}.floating-controls{padding:10px 10px 20px}@media(max-width:600px){.floating-controls{display:flex;flex-direction:column;align-items:center;padding:10px}.search-container{width:100%;display:flex;justify-content:center;margin-bottom:10px}#searchInput{width:calc(100% - 70px);max-width:200px}#searchButton{width:60px}.controls{width:100%;display:flex;justify-content:center;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:10px}.controls label{white-space:nowrap;margin-right:10px;font-size:12px}.navigation{width:100%;display:flex;justify-content:space-between;align-items:center}#currentChapterIndicator{text-align:center;margin:0 5px}.verse-navigation{flex-wrap:wrap}.verse-navigation select,.verse-navigation button{margin:5px}}