.page { width: 100%; min-height: 100vh; position: relative; box-sizing: border-box; text-align: center; margin: auto; position: relative; display: flex; flex-direction: column; background-color: var(--color-white); overflow: scroll; }
.page:not(.visible) { display: none !important; }
.container { width: 100%; max-width: 30rem; margin: 0 auto; width: calc(100% - 3rem) }
.bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0 }
.bg img, .bg video { height: 100%; width: 100%; object-fit: cover; opacity: .8; }
.bg.blur img { opacity: .2; filter: blur(.5rem) }
.deco { height: 24rem; aspect-ratio: 1/1; position: fixed; transform: translate(-50%, 50%); margin: auto; top: 0; left: 0; right: 0; bottom: 0; }
.deco img { opacity: .05; }
/**/
.player-bar-container { display: flex; gap: .5rem; min-width: 60%; }
.player-bar { background-color: var(--color-gray-300); height: .5rem; border-radius: 1rem; position: relative; overflow: hidden; width: 100%; }
.player-bar>span { background-color: var(--color-black); position: absolute; left: 0; top: 0; height: 100%; }
.player-bar>span.transition { transition: width .3s linear; }
/**/
.page .header { min-height: 6rem; display: flex; align-items: center; padding: 1rem 0; position: relative }
.page .header .logo { height: 1.5rem }
.page .header+.tabs-container { margin-top: -1rem; position: relative }
.page .header .container { display: flex; flex-direction: row; justify-content: space-between }
.page .header .container i.bi-circle, .page .header .container i.bi-circle-fill { font-size: .6rem }
.page .content { flex-grow: 1; overflow: scroll; position: relative }
.page .content.center { align-items: center; justify-content: center; display: flex; flex-direction: column; }
.bi.bi-volume-down:before { transform: scale(1.4) }
/**/
.page-login { background-color: var(--color-black); justify-content: center; }
.page-login .top { display: flex; align-items: center; flex-direction: column; justify-content: center; position: relative; background-color: transparent; padding: 2rem 0; }
.page-login .top .container { display: flex; align-items: center; flex-direction: column; justify-content: center; gap: 1rem }
.page-login .top .logo { height: 2.5rem }
.page-login .bottom { padding-bottom: 2rem; position: relative; }
.page-login .bottom .container { background-color: var(--color-white); padding: 2rem; border-radius: var(--border-radius); display: flex; flex-direction: column; align-items: stretch; margin: 0 auto }
/**/
.list-signup-data { border-radius: var(--border-radius); border: 1px solid var(--border-color); overflow: hidden }
.list-signup-data li { color: var(--color-gray-900); border-bottom: 1px solid var(--border-color); padding: 1rem; display: flex; align-items: center; justify-content: center; gap: .5rem }
.list-signup-data li:last-child { border-bottom: none }
/**/
.page-start-settings .content { display: flex; align-items: center; padding-bottom: 10vh; }
.page-start-settings .content ul { display: flex; gap: 1rem; flex-direction: column; margin: 1rem 0 }
.page-start-settings .content .container { animation: fade-in-up .6s linear; }
.page-start-settings .deco img { animation: rotate 60s linear; }
.page-start-lesson .content { display: flex; align-items: center }
.page-start-lesson .content .container { display: flex; flex-direction: column; gap: 1rem; align-items: center }
.page-start-lesson:not([progress="100"]) .content .btn { visibility: hidden !important; }
.page-start-lesson .deco img { animation: move-up-down 40s linear infinite; }
/**/
.page-audio .content { display: flex; align-items: center }
.page-audio .content .container { display: flex; flex-direction: column; gap: 1.5rem; align-items: center }
.page-audio .content .btn { padding-left: 2rem; padding-right: 2rem }
.page-audio .content figure img { height: 12rem; width: 12rem; border-radius: 1rem; overflow: hidden; object-fit: cover; }
.page-audio[state_audio="play"] [state]:not([state="play"]) { display: none !important }
.page-audio[state_audio="pause"] [state]:not([state="pause"]) { display: none !important }
.page-audio[state_audio="stop"] [state]:not([state="stop"]) { display: none !important }
/**/
.page-home { background-color: var(--color-black) }
.page-home .content { display: flex; align-items: center; color: #fff }
.page-home .content .logo { height: 2.5rem }
.page-home .content .btn { padding-left: 2rem; padding-right: 2rem }
.page-home nav ul { background-color: var(--color-white) }
.page-home .content .container { animation: fade-in-up .6s linear; }
/**/
.page-settings .content ul li { display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: .5rem 0; border-top: 1px solid var(--border-color) }
.page-settings .content ul li:last-child { border-bottom: 1px solid var(--border-color) }
.page-settings .content ul li select { text-align: right }
/**/
.page-account .content ul li { display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 1rem 0; border-top: 1px solid var(--border-color) }
.page-account .content ul li[onclick] { cursor: pointer }
.page-account .content ul li>div { display: flex; gap: .5rem }
.page-account .content ul li:last-child { border-bottom: 1px solid var(--border-color) }
/**/
.page-password .content { text-align: left }
/**/
.page-unsubscribe .content { text-align: left }
/**/
.page-recover .content { text-align: left }
/**/
.page-legal .content { text-align: left }
/**/
.page-lessons .content { text-align: left }
.page-lessons .content ul { display: flex; flex-direction: column; gap: 1rem }
.page-lessons .content ul li { display: flex; flex-direction: row; gap: 1rem; align-items: center; background-color: var(--color-gray-100); border-radius: var(--border-radius); padding: 1rem }
.page-lessons .content ul li figure { width: 6rem; aspect-ratio: 1/1; border-radius: var(--border-radius); overflow: hidden }
.page-lessons .content ul li figure img { width: 100%; height: 100%; object-fit: cover }
.page-lessons .content ul li>div { display: flex; flex-direction: column; gap: .5rem }
.page-lessons .content ul li .btn { margin-right: 1rem }
.page-lessons .content ul li .btn:last-child { margin-right: 0 }
/**/
.page-lesson .content { text-align: left }
.page-lesson .content .container { display: flex; flex-direction: column; gap: 1rem; padding-top: 2rem }
.page-lesson .content figure { width: 100%; aspect-ratio: 4/3; border-radius: var(--border-radius); overflow: hidden }
.page-lesson .content figure img { width: 100%; height: 100%; object-fit: cover }
/**/
.page-prev-meditation .content { display: flex; align-items: center }
.page-prev-meditation .content .container { display: flex; flex-direction: column; gap: 1.5rem; align-items: center }
.page-prev-meditation .content figure img { height: 12rem; border-radius: 1rem; overflow: hidden; animation: fade-in-zoom .6s linear; }
/**/
.page-meditation .content { display: flex; align-items: center }
.page-meditation .content .container { display: flex; flex-direction: column; gap: 1.5rem; align-items: center }
.page-meditation .bottom { position: relative; height: 10rem; display: flex; align-items: center }
.page-meditation .bottom ul { display: flex; flex-direction: row; gap: 1rem; width: 100% }
.page-meditation .bottom ul li { display: flex; flex-direction: column; background-color: rgba(0, 0, 0, .2); width: 100%; padding: 1rem; border-radius: var(--border-radius); cursor: pointer; }
.page-meditation .bottom ul li:hover { background-color: rgba(0, 0, 0, .4); }
.page-meditation .bottom ul li i { font-size: 2rem }
.page-meditation .anim-breathing { height: 1.5rem; width: 6rem; position: relative; }
.page-meditation .anim-breathing .curve { background-image: url(../img/breathing.svg); filter: invert(1); background-size: cover; background-position: 0% center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; animation: anim_curve 12s linear infinite; }
@keyframes anim_curve { 0% { background-position: 0% center; transform: scaleY(1) } 20% { transform: scaleY(1) } 50% { transform: scaleY(.8) } 80% { transform: scaleY(1) } 100% { background-position: 100% center; transform: scaleY(1) } }
.page-meditation .anim-breathing .line { height: 1px; width: 100%; top: 0; bottom: 0; background-color: #fff; display: block; margin: auto; position: absolute; display: none; }
.page-meditation[state_audio="play"] [state]:not([state="play"]) { display: none !important }
.page-meditation[state_audio="pause"] [state]:not([state="pause"]) { display: none !important }
.page-meditation[state_audio="pause"] .anim-breathing .curve { animation-play-state: paused; }
.page-meditation[state_timer="off"] [timer] { visibility: hidden; }
.page-meditation[state_timer="play"] [timer] { visibility: visible; }
.page-meditation[state_video="play"][state_options="off"] [options] { visibility: hidden; }
.page-meditation[state_video="play"][state_options="on"] [options] { visibility: visible; }
.page-meditation[state_video="play"][state_options="on"][state_timer="off"] [options][timer] { visibility: hidden; }
/**/
.popup-options { align-items: end }
.popup-options .popup-box h5 { display: flex; align-items: center; justify-content: center; gap: .5rem; position: relative; }
.popup-options .popup-box ul { gap: 1rem; display: flex; flex-direction: column; margin-top: 1rem }
.popup-options .popup-box ul.rows { flex-direction: column }
.popup-options .popup-box ul.cols { flex-direction: row; flex-wrap: wrap; margin-top: 1.5rem; }
.popup-options .popup-box ul.rows li .btn { width: 100% }
.popup-options .popup-box ul.cols li { width: calc(33.33% - .6666rem); border-radius: var(--border-radius); overflow: hidden; aspect-ratio: 1/1; padding: 0; position: relative; }
.popup-options .popup-box ul.cols li img { width: 100%; height: 100%; object-fit: cover }
/**/
.animated-text span { visibility: hidden; }
.animated-text span.show { visibility: visible; animation: fade-in .3s linear; }
[page_state="1"] .player-bar:nth-child(n+2)>span, [page_state="2"] .player-bar:nth-child(n+3)>span, [page_state="3"] .player-bar:nth-child(n+4)>span { width: 0 !important; }
[page_state="2"] .player-bar:nth-child(-n+1)>span, [page_state="3"] .player-bar:nth-child(-n+2)>span, [page_state="4"] .player-bar:nth-child(-n+3)>span { width: 100% !important; }
[page_state="1"][progress="100"] .player-bar:nth-child(1)>span, [page_state="2"][progress="100"] .player-bar:nth-child(2)>span, [page_state="3"][progress="100"] .player-bar:nth-child(3)>span, [page_state="4"][progress="100"] .player-bar:nth-child(4)>span { width: 100% !important; }
/**/
.page-history {}
.page-history .content.center .container { position: relative }
.page-history .calendar-month { margin-bottom: 1rem; }
.page-history .calendar-month h5 { text-transform: capitalize; }
.page-history .calendar-table { width: 100%; border-collapse: collapse; }
.page-history .calendar-table tr { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-bottom: .5rem; }
.page-history .calendar-table th { font-weight: bold; font-family: var(--font-2); }
.page-history .calendar-table td, .page-history .calendar-table th { text-align: center; height: 2.5rem; width: 2.5rem; line-height: 2.5rem; padding: 0; }
.page-history .calendar-session { font-weight: bold; background: var(--color-gray-300); border-radius: 50%; }
.page-history .num-sessions { margin-top: .5rem; margin-bottom: .5rem; }
.page-history .history-message { background-color: var(--color-gray-100); position: relative; padding: 1.5rem; border-radius: var(--border-radius); display: flex; text-align: left; gap: 1rem; align-items: center; justify-content: start; margin-bottom: 1rem; }
.page-history .history-message figure { font-size: 2rem; }
.page-history .history-week { border: 1px solid var(--border-color); background-color: var(--color-white); border-radius: var(--border-radius); padding: 1.5rem; display: flex; flex-direction: column; gap: 2rem; margin-bottom: 1rem; }
.page-history .history-week .title { display: flex; flex-direction: row; justify-content: space-between; align-items: center; }
.page-history .history-week .list-days { display: flex; flex-direction: row; justify-content: center; }
.page-history .history-week .list-days li { flex-direction: column-reverse; display: flex; gap: .5rem; align-items: center; min-width: 3rem; }
.page-history .history-week .list-days li .bar { height: 10rem; background-color: var(--color-gray-100); border-radius: .5rem; display: flex; flex-direction: column-reverse; width: 1.25rem; }
.page-history .history-week .list-days li .bar span { background-color: var(--color-black); width: 100%; border-radius: .5rem; }
.page-history .history-week .bottom { display: flex; align-items: center; justify-content: space-between; }
.page-history .history-months { border: 1px solid var(--border-color); background-color: var(--color-white); border-radius: var(--border-radius); padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.page-history .history-months .title { display: flex; justify-content: space-between; align-items: center; }
.page-history .history-months .list-months { display: flex; flex-direction: column; gap: 1rem; text-align: left; }
.page-history .history-months .list-months li { display: flex; flex-direction: column; gap: .5rem; }
.page-history .history-months .list-months li div { display: flex; flex-direction: row; justify-content: space-between; }
.page-history .history-months .list-months li .bar { height: 1rem; background-color: var(--color-gray-100); border-radius: .5rem; }
.page-history .history-months .list-months li .bar span { background-color: var(--color-black); border-radius: .5rem; }