:root{--primary-color: #01c5af;--secondary-color: #00dbd8;--text-color: #000000;--button-icon-size: 35px;--button-shadow: 0 2px 5px rgba(0, 0, 0, .2);--button-shadow-hover: 0 4px 8px rgba(0, 0, 0, .3);--font-size-caption: 36px}body{background-color:#fff;margin:0;padding:0;font-family:Arial,sans-serif}.app-container{position:relative;width:100%;height:100vh;overflow:hidden}.media-container{width:100%;height:100%;position:relative;display:flex;flex-direction:column}#gif-container{width:100%;display:flex;z-index:1}.gif-element{max-width:100%;-o-object-fit:contain;object-fit:contain}#video-player{width:100%;max-height:100%;flex:1;z-index:2}.video-element{width:100%;-o-object-fit:cover;object-fit:cover}#qr-scanner{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;max-width:400px;z-index:0;transition:z-index .3s ease}#qr-scanner.active{z-index:1000}video::-webkit-media-controls,video::-webkit-media-controls-enclosure,video::-webkit-media-controls-panel,video::-webkit-media-controls-play-button{display:none!important}audio{display:none!important}.shared-button{position:fixed!important;z-index:1002!important;min-width:unset!important;padding:12px!important;border-radius:50%!important;background-color:var(--primary-color)!important;box-shadow:var(--button-shadow)!important;transition:all .3s ease!important}.shared-button:hover{background-color:var(--secondary-color)!important;box-shadow:var(--button-shadow-hover)!important;transform:translateY(-2px)!important}.shared-button .MuiSvgIcon-root{font-size:var(--button-icon-size);color:#fff}.MuiButton-root.qr-code-button{position:fixed!important;z-index:1002!important;min-width:unset!important;padding:12px!important;border-radius:50%!important;background-color:var(--primary-color)!important;box-shadow:var(--button-shadow)!important;transition:all .3s ease!important;bottom:80px!important;right:20px!important}.MuiButton-root.qr-code-button:hover{background-color:var(--secondary-color)!important;box-shadow:var(--button-shadow-hover)!important;transform:translateY(-2px)!important}.qr-code-button .MuiSvgIcon-root{font-size:var(--button-icon-size);color:#fff}.MuiButton-root.fullscreen-button{position:fixed!important;z-index:1002!important;min-width:unset!important;padding:12px!important;border-radius:50%!important;background-color:var(--primary-color)!important;box-shadow:var(--button-shadow)!important;transition:all .3s ease!important;bottom:20px!important;right:20px!important}.MuiButton-root.fullscreen-button:hover{background-color:var(--secondary-color)!important;box-shadow:var(--button-shadow-hover)!important;transform:translateY(-2px)!important}.fullscreen-button .MuiSvgIcon-root{font-size:var(--button-icon-size);color:#fff}.MuiButton-root.tahfid-button{position:fixed!important;z-index:1002!important;min-width:unset!important;padding:12px!important;border-radius:50%!important;background-color:var(--primary-color)!important;box-shadow:var(--button-shadow)!important;transition:background-color .3s ease!important;bottom:140px!important;right:20px!important}.MuiButton-root.tahfid-button.activated{background-color:var(--secondary-color)!important}.tahfid-button:active{background-color:var(--primary-color)!important}.MuiButton-root.tahfid-button:hover{background-color:var(--secondary-color)!important;box-shadow:var(--button-shadow-hover)!important;transform:translateY(-2px)!important}.tahfid-button .MuiSvgIcon-root{font-size:var(--button-icon-size);color:#fff}.menu-button{position:fixed!important;top:20px!important;left:20px!important;z-index:1003!important;padding:12px!important;border-radius:50%!important;background-color:var(--primary-color)!important;box-shadow:var(--button-shadow)!important;transition:all .3s ease!important;color:#fff!important}.menu-button:hover{background-color:var(--secondary-color)!important;box-shadow:var(--button-shadow-hover)!important;transform:translateY(-2px)!important}.sura-select,.aya-select{position:fixed!important;top:20px!important;z-index:1003!important;width:150px!important;background-color:#fff!important;border:1px solid var(--primary-color)!important;border-radius:4px!important;box-shadow:0 2px 4px #0000001a;padding:2px}.sura-select{right:60px!important}.aya-select{right:190px!important}.MuiSelect-select{padding:10px 14px!important}.MuiInputLabel-root,.MuiSelect-select,.MuiMenuItem-root,.caption-text,.translation-text,.qr-instruction{text-align:center!important}.MuiInputLabel-root{color:var(--text-color)!important}.MuiOutlinedInput-notchedOutline{border-color:var(--primary-color)!important}.MuiSelect-icon{color:var(--primary-color)!important}.caption-container{position:fixed;top:70px;left:0;right:0;padding:10px;text-align:center;z-index:1003}.caption-text{color:var(--text-color);font-size:var(--font-size-caption)!important;margin:0}.translation-container{position:fixed;top:110px;left:0;right:0;background-color:transparent;padding:10px;text-align:center;z-index:1003}.translation-text{color:var(--text-color);font-size:var(--font-size-caption)!important;margin:0;font-style:italic}.tahfid-ui{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1003;background-color:#ebfffd;opacity:.8;border:2px solid #01c5af;border-radius:8px;padding:10px;box-shadow:var(--button-shadow-hover);display:flex;flex-direction:column;align-items:center;width:80%;max-width:500px;aspect-ratio:2;direction:rtl}.tahfid-ui>*{margin-bottom:10px}.tahfid-section{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:10px;margin:10px 0}.tahfid-section p{margin:0;padding:4px;text-align:center;min-width:60px;font-size:24px}.tahfid-sura-select{min-width:200px;padding:8px;font-size:24px}.tahfid-aya-select{min-width:100px!important;padding:8px;font-size:24px}.tahfid-sura-select select,.tahfid-aya-select select{font-size:24px!important;padding:8px!important}.tahfid-ui .MuiInputLabel-root,.tahfid-ui .MuiSelect-select{font-size:24px!important;line-height:1.2!important}.tahfid-from-to-aya-label,.tahfid-from-to-sura-label{font-size:24px!important;padding:4px 8px}.start-tahfid-button{padding:10px 20px!important;font-size:22px!important;border-radius:4px!important;background-color:var(--primary-color)!important;color:#fff!important;box-shadow:var(--button-shadow)!important;transition:background-color .3s ease!important;align-self:center;margin-top:10px}.start-tahfid-button:hover{background-color:var(--secondary-color)!important}.MuiDrawer-paper{width:250px;background-color:#1a1a1a!important;color:#fff!important}.MuiListItem-root{padding:16px!important}.MuiFormControlLabel-root{margin:0!important}.MuiSwitch-root{margin-right:16px!important}.MuiSwitch-track{background-color:#555!important}.MuiSwitch-thumb{background-color:var(--primary-color)!important}.Mui-checked+.MuiSwitch-track{background-color:var(--primary-color)!important}.pen-icon{position:fixed;top:20px;right:20px;width:60px;height:60px;z-index:1003}.pen-icon.flickering{animation:flicker .5s infinite alternate}.pen-icon svg{width:100%;height:100%;fill:#2bff00}@keyframes flicker{0%{opacity:1}to{opacity:.5}}.white-svg-background{position:absolute;top:0;left:0;width:100%;height:60px;z-index:1001}@media (max-width: 600px){.MuiButton-root.qr-code-button{bottom:70px!important;right:10px!important;padding:8px!important}.MuiButton-root.fullscreen-button{bottom:10px!important;right:10px!important;padding:8px!important}.MuiButton-root.tahfid-button{bottom:130px!important;right:10px!important;padding:8px!important}.qr-code-button .MuiSvgIcon-root,.fullscreen-button .MuiSvgIcon-root,.tahfid-button .MuiSvgIcon-root{font-size:28px}.menu-button{top:10px!important;left:10px!important;padding:8px!important}.sura-select,.aya-select{top:15px!important;width:120px!important}.sura-select{right:60px!important}.aya-select{right:190px!important}.MuiSelect-select{padding:8px 12px!important}.caption-container{top:60px}.translation-container{top:100px}.caption-text,.translation-text{font-size:var(--font-size-caption)!important}.pen-icon{top:10px;right:10px;width:45px;height:45px}.MuiDrawer-paper{width:200px}.MuiListItem-root{padding:12px!important}.white-svg-background{height:45px}}@media only screen and (min-width: 601px) and (max-width: 1024px){:root{--button-icon-size: 45px;--font-size-caption: 42px}.MuiButton-root.qr-code-button{padding:16px!important;bottom:140px!important;right:30px!important}.MuiButton-root.fullscreen-button{padding:16px!important;bottom:40px!important;right:30px!important}.MuiButton-root.tahfid-button{padding:16px!important;bottom:240px!important;right:30px!important}.menu-button{top:20px!important;left:20px!important;padding:16px!important}.sura-select,.aya-select{top:25px!important;width:160px!important}.sura-select{right:80px!important}.aya-select{right:260px!important}.MuiSelect-select{padding:12px 16px!important}.caption-container{top:80px!important}.translation-container{top:120px!important}.caption-text,.translation-text{font-size:var(--font-size-caption)!important}.pen-icon{top:20px!important;right:20px!important;width:70px!important;height:70px!important}.tahfid-ui{width:90%!important;max-width:500px!important}.white-svg-background{height:60px}}