.screen-container{width:100%;margin:auto;display:flex;flex-direction:column;position:relative;overflow-x:hidden}.screen-container-height{height:100%}.dynamic-name-container{display:block;width:350px;margin:auto}.dynamic-name{fill:var(--primary-color);stroke:#fff;stroke-width:10px;stroke-linejoin:round;paint-order:stroke}svg{font-size:25px;fill:#fff}.app-wrapper{margin:0 auto;flex-direction:column;display:flex;max-width:450px;padding-top:30px}.app-wrapper.home-screen{min-height:calc(100dvh - 208px)}.background-dent{position:absolute;top:390px;left:50%;height:500px;max-height:600px;z-index:-1;transform:translate(-50%,-50%)}.position-dent{top:400px}.elmex-logo{width:180px;height:auto;margin:0 auto;padding-top:15px;display:block}.btn{font-family:var(--primary-font);font-weight:700;width:100%;border:none;height:55px;text-transform:uppercase;border-radius:var(--btn-radius);display:flex;justify-content:center;align-items:center;position:relative;gap:10px;padding:15px;z-index:1}.btn.primary{background-color:var(--primary-color);color:#fff}.btn.secondary{background-color:#fff;color:var(--primary-color);border:2px solid orangered}.btn-container{display:flex;justify-content:center;flex-direction:column}.btn-container.icon-only{align-items:center}.btn-wrapper{position:relative;display:inline-block}.btn-shadow{position:absolute;top:6px;left:-6px;width:100%;height:100%;background-color:var(--btn-shadow-color);border-radius:20px;z-index:1}.btn-shadow .btn-border{position:absolute;top:0;left:0;border:2px solid var(--primary-color);width:100%;height:100%;border-radius:20px;pointer-events:none}.btn.primary.btn-disabled{background-color:#f06c4b}.btn-shadow.primary.btn-disabled,.btn-shadow.secondary.btn-disabled{opacity:.6}.btn.secondary.btn-disabled>img{opacity:.6}.play{width:300px}.btn-container.error{align-items:center}.elmex-illu{width:300px;margin:50px auto 20px}.main-paragraph{text-align:center;font-weight:700;color:var(--secondary-color)}.main-paragraph.home-page{margin-bottom:30px}.credit-text{font-size:11px;text-align:center;margin:20px auto 10px;font-weight:400;line-height:13px}.footer{height:50px;display:flex;flex-direction:column;justify-content:center}.button-tabs-main-container{width:100%;height:56px;border-radius:15px;margin-bottom:15px}.tab-1-button,.tab-2-button{width:50%;height:100%;border:none;background-color:#fff;color:#000;font-family:Congenial,sans-serif}.tab-1-button{border-top-left-radius:12px;border-bottom-left-radius:12px;border-top:3px solid #054997;border-bottom:3px solid #054997;border-left:3px solid #054997}.tab-2-button{border-top-right-radius:12px;border-bottom-right-radius:12px;border-top:3px solid #054997;border-bottom:3px solid #054997;border-right:3px solid #054997}.active-tab{background-color:var(--secondary-color);color:#fff;border:none}@media screen and not (max-width:992px){.tab-1-button:hover,.tab-2-button:hover{cursor:pointer}}.main-paragraph.label-input{margin-bottom:30px}.main-paragraph.label-input:after{content:"*";color:red}.kid-name-input-container{margin:30px 0 15px}.elmy-and-mexy-img{width:100%;height:auto;max-width:200px;margin:30px auto 10px}.div-elmy-and-mexy{height:100%;width:100%;display:flex;align-items:flex-end}.error-message{display:flex;justify-content:center;font-weight:700;margin:20px;text-align:center}.error-container{display:flex;flex-direction:column;align-items:center}.gallery{display:flex;flex-wrap:wrap;justify-content:center;gap:15px;height:370px;padding:15px 0;overflow-Y:scroll;overflow-X:hidden}.story-img{width:165px;height:auto;border-radius:10px}.disabled{opacity:.4;pointer-events:none}.hidden{display:none}.gallery.error{align-content:flex-start}@media screen and not (max-width:992px){.story-img:hover{cursor:pointer}}.spinning-loader{position:relative;width:120px;height:120px;display:flex;align-items:center;justify-content:center;margin:0 auto}.loader-ring{position:absolute;top:0;left:0;width:120px;height:120px;border:8px solid rgba(229,57,53,.2);border-top-color:#e53935;border-radius:50%;animation:spin 1s linear infinite}.loader-img{position:relative;width:103px;object-fit:contain;z-index:1}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.audio-player{width:100%;padding:20px 0}.progress{width:95%;height:15px;background:#eee;margin:40px auto 0;position:relative;border-radius:20px}.progress-filled{height:100%;background:var(--primary-color);border-radius:20px;transition:width .2s ease}.progress-thumb{position:absolute;top:50%;transform:translateY(-50%);width:25px;height:25px;border-radius:50%;background:var(--primary-color);border:1px white solid;pointer-events:auto;transition:left .2s ease}.time-display{display:flex;justify-content:space-between;font-size:12px;color:var(--primary-color);margin-top:8px}@media screen and not (max-width:992px){.progress:hover{cursor:pointer}}.thumbnail-vizualiser-container{width:100%;height:300px}.chosen-story-thumbnail{width:100%;max-width:260px;height:auto;margin:30px auto;border-radius:20px;display:flex}.card{background-color:#fff;border:2px solid var(--primary-color);width:100%;height:80px;text-align:left;padding:0 10px;border-radius:var(--btn-radius);display:flex;align-items:center;justify-content:space-between}.card p{color:var(--primary-color)}.card>div>:nth-child(1){color:var(--primary-color);text-transform:uppercase;font-weight:700}.card>div>:nth-child(2){font-size:16px}.card-wrapper{position:relative;display:inline-block;width:100%}.card-shadow{position:absolute;top:6px;left:-6px;width:100%;height:100%;background-color:var(--btn-shadow-color);border-radius:20px;z-index:-1}.card-shadow .card-border{position:absolute;top:0;left:0;border:2px solid var(--primary-color);width:100%;height:100%;border-radius:20px;pointer-events:none}.card-container{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:60px;width:300px;height:370px;padding:10px;margin-top:40px;overflow-Y:scroll;overflow-X:hidden}.not-found-container{text-align:center;margin:125px 25px;display:flex;flex-direction:column;gap:25px}:root{--primary-color: #F24618;--secondary-color: #054997;--background-color: #E4F2F6;--btn-shadow-color: #FACBBF;--btn-radius: 20px;--primary-font: "Congenial", sans-serif}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%}body{font-family:Congenial,sans-serif;font-weight:700;background-color:var(--background-color)}header{width:100%;display:flex;flex-direction:column}h1{font-size:20px;line-height:24px;font-weight:500;color:var(--primary-color);text-align:center;margin:0 10px}input{width:100%;height:56px;border:3px solid var(--primary-color);border-radius:20px;font-size:24px;padding:12px;color:var(--primary-color);font-family:Congenial,sans-serif;outline:none}h1.title-margin{margin-top:20px}p{font-size:19px;line-height:22px}
