@import url(https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap);

.btn {
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
  border: none;
  transition: all 0.2s ease-in-out;
  align-items: center;
  padding-top: 12px;
  padding-bottom: 12px;
  display: inline-flex;
  justify-content: center;
  text-align: center
}

.btn-primary {
  background: #FC786D;
  color: #fff
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background: #fb4a3b !important;
  border: none
}

.btn-success {
  background: #6db99f;
  color: #fff
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
  background: #57947f !important;
  border: none
}

.btn-yellow {
  background: #FFD144;
  color: #3E3E3E
}

.btn-yellow:hover,
.btn-yellow:focus,
.btn-yellow:active {
  background: #ffc411 !important;
  border: none
}

.btn-secondary {
  background: #F2F8FF;
  color: #3E3E3E
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
  background: #bfddff !important;
  border: none
}

.btn-logout {
  background: #fff7f6;
  color: #FC786D
}

.btn-logout:focus,
.btn-logout:active {
  background: #FC786D;
  color: #fff
}

.btn-purple {
  background: #F63669;
  color: #fff
}

.btn-purple:hover {
  background: #ee0b47
}

.btn-white {
  background: #fff;
  color: #3E3E3E
}

.btn-white:hover {
  background: #e6e6e6;
  color: #3E3E3E
}

.btn-outline-white {
  background: #fff;
  border: 1px solid #fff;
  color: #fff
}

.btn-outline-white:hover {
  background: #e6e6e6
}

.btn .disabled {
  opacity: .7
}

.button-genre {
  background-color: #fff;
  line-height: normal;
  color: #C6C6C6 !important;
  font-size: 12px;
  font-weight: 400;
  border-radius: 8px;
  border: 1px solid #C6C6C6
}

.button-genre.active {
  background-color: #FC786D !important;
  border: 1px solid #FC786D;
  color: #fff !important;
  border-radius: 8px !important;
  font-size: 14px;
  font-weight: 400
}

.button-genre i.purple {
  color: #ff2ed9
}

.button-genre i.blue {
  color: #5ce4ff
}

.button-genre i.green {
  color: #39ffc9
}

.button-genre i.yellow {
  color: #ffd400
}

.credit .btn-check:checked+label {
  background: #FC786D;
  color: #fff
}

.credit .btn-check:disabled+.btn,
.credit .btn-check[disabled]+.btn {
  background: #ebebeb
}

.floating-bottom {
  position: fixed;
  background: #F2F8FF;
  bottom: 0;
  width: 100%;
  padding: 14px 0
}

.form-control,
.form-select {
  background-color: #fff;
  color: #3E3E3E;
  border-radius: 10px;
  border: 1px solid #ddd;
  font-size: 14px;
  padding-top: 12px;
  padding-bottom: 12px;
  padding-left: 12px
}

.form-control::placeholder,
.form-select::placeholder {
  color: #C6C6C6
}

.form-control:focus,
.form-select:focus {
  background: #fff;
  border: 0;
  outline: 1px solid #FC786D;
  box-shadow: none;
  color: #3E3E3E
}

.form-control.otp__digit,
.form-select.otp__digit {
  border-radius: 8px !important;
  font-size: 24px;
  text-align: center
}

.form-control.otp__digit::-webkit-outer-spin-button,
.form-control.otp__digit::-webkit-inner-spin-button,
.form-select.otp__digit::-webkit-outer-spin-button,
.form-select.otp__digit::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0
}

.form-control.otp__digit[type="number"],
.form-select.otp__digit[type="number"] {
  -moz-appearance: textfield
}

.form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e")
}

.form-label {
  font-size: 14px;
  color: #3E3E3E;
  font-weight: 600
}

.form-search:focus-within {
  border-radius: 10px;
  outline: 1px solid #FC786D
}

.form-search span {
  border-radius: 10px;
  background: #fff;
  color: #3E3E3E;
  border: 1px solid #ddd
}

.form-search .form-control {
  outline: none;
  border-left: 0;
  color: #3E3E3E
}

.form__field {
  margin-bottom: 1rem;
  position: relative
}

.form__field .field-icon {
  position: absolute;
  width: 52px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  color: #FC786D
}

.form__field--with-icon input {
  padding-left: 48px;
  border-radius: 8px;
  background: #f8f8f8;
  color: #3E3E3E;
  outline: 1px solid #d6d6d6;
  padding-block: 14px;
  text-transform: uppercase
}

.form__field--with-icon input::placeholder {
  color: #C6C6C6 !important;
  opacity: 1
}

.form__field--with-icon input:focus {
  color: #3E3E3E;
  outline: 1px solid #dcdbff;
  border: 1px solid #7772ff
}

.label-form {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 8px
}

.login-form {
  text-align: left;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1;
  padding-top: 32px;
  background: #fff;
  margin-top: -100px;
  border-radius: 30px 30px 0 0
}

.login-form input {
  box-shadow: 0 3px 6px rgb(62 62 62 / .05)
}

.login-form__title {
  font-weight: 700;
  font-size: 1.3125rem;
  margin-bottom: 1.3125rem
}

.login-form__logo {
  width: 281px;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.5rem
}

.login-form__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center
}

.form-control.form-question {
  font-size: 26px;
  border: 0;
  border-bottom: 1px solid #3e3e3e;
  border-radius: 0;
  text-align: center
}

.form-control.form-question::placeholder {
  color: #C6C6C6 !important;
  opacity: 1;
  font-size: 26px;
  font-weight: 100
}

.form-control.form-question:focus {
  color: #3E3E3E;
  outline: none;
  border-bottom: 1px solid #FC786D
}

body {
  background: #F2F8FF;
  font-family: "Plus Jakarta Sans", sans-serif;
  color: #3E3E3E;
  font-size: 12px
}

.content {
  max-width: 480px;
  min-height: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 0;
  min-height: 100vh;
  background: #fff;
  padding-bottom: 100px
}

.content .content-body {
  padding-top: 70px
}

.content .content-menu {
  padding-top: 30px
}

.logo {
  width: 150px
}

h1.title {
  font-size: 24px;
  font-weight: 700
}

a {
  text-decoration: none
}

.fs-10 {
  font-size: 10px
}

.fs-12 {
  font-size: 12px
}

.fs-14 {
  font-size: 14px
}

.fs-16 {
  font-size: 16px
}

.fs-18 {
  font-size: 18px
}

.fs-20 {
  font-size: 20px
}

.fs-24 {
  font-size: 24px
}

.fs-26 {
  font-size: 26px
}

.fs-32 {
  font-size: 32px
}

.fs-40 {
  font-size: 40px
}

.text-dark {
  color: #3E3E3E !important
}

.text-muted {
  color: #C6C6C6 !important
}

.text-primary {
  color: #FC786D !important
}

.img-ava-50 {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 50%
}

i[class^="fi-rr-"]:before,
i[class*=" fi-rr-"]:before,
span[class^="fi-rr-"]:before,
span[class*="fi-rr-"]:before {
  line-height: inherit
}

.icon-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #F2F8FF;
  display: flex;
  align-items: center;
  justify-content: center
}

.icon-circle i {
  color: #FC786D;
  font-size: 18px;
  margin-top: 1px
}

.icon-circle-big {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #F2F8FF;
  display: flex;
  align-items: center;
  justify-content: center
}

.icon-circle-big i {
  color: #FC786D;
  font-size: 20px;
  margin-top: 1px
}

.icon-circle-big.category {
  background: #E3F0FF
}

.col-category {
  display: flex;
  flex-direction: column;
  align-items: center
}

.col-category h5 {
  font-size: 12px;
  margin-top: 4px;
  text-align: center;
  font-weight: 500;
  color: #3E3E3E
}

.rbt-item {
  margin-bottom: 8px
}

.top-homepage {
  background: #fff;
  color: #3E3E3E;
  padding-top: 14px;
  padding-bottom: 0
}

.top-homepage .name {
  margin-left: 14px
}

.top-homepage .name h5 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 0
}

.top-homepage .name span {
  font-size: 12px
}

.top-homepage .tagline {
  font-size: 28px;
  color: #3E3E3E;
  margin-top: 20px
}

.credit-box {
  background: #0464cf;
  border-radius: 10px;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  margin-top: 24px
}

.credit-box .value {
  margin-right: auto
}

.credit-box .value span {
  font-size: 10px
}

.credit-box .value h3 {
  font-weight: 700;
  font-size: 18px
}

.link-internet {
  color: #3E3E3E
}

.name-package {
  margin-bottom: 18px
}

.name-package h4 {
  font-size: 16px;
  margin-bottom: 0;
  margin-left: 8px;
  font-weight: 600
}

.name-package i {
  font-size: 16px;
  color: #FC786D
}

.card-count {
  background: #d8eaff;
  color: #FC786D;
  text-align: center;
  font-size: 32px;
  padding: 14px;
  border-radius: 10px;
  font-weight: 600
}

.card-custom {
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 4px 20px 1px rgb(161 161 161 / .25);
  padding: 14px
}

.card-custom.border-primary {
  border: 1px solid #fff !important
}

.card-custom.detail-internet {
  margin-top: -50px
}

.card-custom.detail-internet.my-package {
  margin-top: 0;
  margin-bottom: 24px
}

.card-custom.detail-internet.my-package.offcanvas-body {
  box-shadow: none;
  background: #fff0;
  margin-bottom: 0
}

.card-custom.detail-internet.my-package .name-package {
  margin-bottom: 18px
}

.card-custom.detail-internet.my-package .name-package h4 {
  font-size: 16px;
  margin-bottom: 0;
  margin-left: 8px;
  font-weight: 600
}

.card-custom.detail-internet.my-package .name-package i {
  font-size: 16px;
  color: #FC786D
}

.card-custom.detail-internet .progress-custom {
  height: 8px;
  border-radius: 100px;
  background: #e7e7e7;
  margin-top: 14px
}

.card-custom.detail-internet .progress-custom .progress-bar {
  background: #FC786D;
  border-radius: 100px
}

.card-custom.card-recently .title {
  font-size: 12px;
  font-weight: 700
}

.card-custom.card-recently .detail .kuota {
  font-size: 24px;
  color: #FC786D;
  font-weight: bolder;
  margin-bottom: 0
}

.card-custom.card-recently .detail .date {
  font-size: 12px;
  color: #C6C6C6
}

.card-custom.card-recently .detail .point {
  font-size: 12px;
  color: #C6C6C6;
  margin-left: 2px
}

.card-custom.card-recently .detail .img-coin {
  width: 18px;
  height: 18px
}

.min-10 {
  margin-top: -50px;
  z-index: 100;
  position: relative
}

section {
  margin-top: 24px
}

section .title-section {
  display: flex;
  align-items: center;
  margin-bottom: 12px
}

section .title-section h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 0
}

section .title-section .see-more {
  color: #3E3E3E;
  margin-left: auto;
  font-weight: 400;
  font-size: 16px
}

section .title-section .count {
  font-size: 12px;
  font-weight: 700;
  border-radius: 100px;
  padding: 4px 10px;
  background: #fc7f51;
  color: #fff;
  margin-left: 8px
}

section.audio {
  margin-top: -4px
}

section.lucky {
  margin-top: -4px
}

.journal .cover-vision {
  width: 100%;
  aspect-ratio: 219/128
}

.journal .cover-journal {
  width: 100%;
  aspect-ratio: 102/128
}

#journal-popup .modal-dialog {
  max-width: 320px;
  margin-left: auto;
  margin-right: auto
}

.items-category .card-category {
  width: 100%;
  height: 178px;
  padding: 14px;
  border-radius: 10px;
  position: relative
}

.items-category .card-category.h-long {
  height: 262px
}

.items-category .card-category .name {
  font-size: 16px;
  font-weight: 700;
  color: #3E3E3E
}

.items-category .card-category .img-cover {
  position: absolute;
  bottom: 0;
  right: 8px;
  height: 90px;
  width: auto
}

.items-category .card-category.bg-soft-brown {
  background: #f6ebe7
}

.items-category .card-category.bg-soft-green {
  background: #e7f6f1
}

.items-category .card-category.bg-soft-orange {
  background: #ffeedb
}

.items-category .card-category.bg-soft-pink {
  background: #ffdfdf !important
}

.items-category .card-category.bg-soft-purple {
  background: #dcdbff
}

.bg-soft-pink {
  background: #ffdfdf !important
}

.swiper.swiper-promotion .swiper-slide .img-promotion img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 10px
}

.swiper.swiper-promotion .swiper-slide .img-readings img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 8px
}

.swiper.swiper-recently {
  padding-bottom: 32px
}

.swiper.swiper-onboard {
  height: 100dvh
}

.swiper.swiper-onboard .swiper-slide {
  padding: 0;
  text-align: center;
  height: 100dvh
}

.swiper.swiper-onboard .swiper-slide h5 {
  font-size: 24px;
  font-weight: 700;
  margin-top: 32px;
  color: #3E3E3E
}

.swiper.swiper-onboard .swiper-slide p {
  font-size: 14px;
  color: #3E3E3E
}

.swiper.swiper-onboard .onboard-full {
  position: relative
}

.swiper.swiper-onboard .onboard-full .bg-onboard {
  width: 100%;
  height: 100dvh;
  object-fit: cover
}

.swiper.swiper-onboard .onboard-full .text {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(0deg, rgb(0 0 0 / .6) 0%, rgb(0 0 0 / .6) 100%);
  padding: 36px;
  padding-bottom: 170px;
  color: #fff;
  display: flex;
  align-items: end
}

.swiper.swiper-onboard .onboard-full .text h5 {
  color: #fff;
  text-align: start;
  font-weight: 400;
  font-size: 38px;
  margin-bottom: 24px
}

.swiper.swiper-onboard .onboard-full .text p {
  color: #fff;
  text-align: start;
  font-weight: 400;
  font-size: 14px
}

.swiper.swiper-onboard .img-onboard {
  width: 100%;
  height: auto
}

.swiper.swiper-onboard .swiper-pagination-bullets {
  position: relative;
  margin-top: -140px;
  z-index: 99
}

.swiper.swiper-onboard .btn {
  margin-top: 82px
}

.swiper.swiper-onboard .swiper-pagination-bullet {
  background: #fff !important;
  width: 30px;
  height: 3px;
  border-radius: 100px;
  transition: all 0.3s ease-in-out;
  opacity: 1
}

.swiper.swiper-onboard .swiper-pagination-bullet-active {
  background: #c6c6c6 !important;
  width: 138px;
  border-radius: 100px;
  transition: all 0.3s ease-in-out;
  opacity: 1
}

.swiper.swiper-onboard.memories .swiper-pagination-bullets {
  position: relative;
  margin-top: -50px
}

.swiper.swiper-onboard.memories .swiper-pagination-bullet {
  width: 10px
}

.swiper.swiper-onboard.memories .swiper-pagination-bullet-active {
  width: 100px
}

.swiper.swiper-onboard.memories .onboard-full .text {
  padding-bottom: 80px
}

.song-list {
  display: block;
  position: relative;
  margin: 0;
  padding: 0
}

.song-list li {
  list-style: none;
  margin-bottom: 1rem
}

.song-list li:last-child {
  margin-bottom: 0
}

.song-list .dropdown-menu li {
  margin-bottom: 0
}

.offcanvas {
  max-width: 480px;
  margin-left: auto;
  margin-right: auto
}

.offcanvas.custom {
  background: #F2F8FF;
  color: #3E3E3E;
  height: auto !important;
  border-radius: 20px 20px 0 0
}

.offcanvas-body {
  padding-bottom: 30px
}

.offcanvas .btn-close {
  display: contents
}

.offcanvas .img-gameBottom {
  width: 141px;
  height: 141px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 14px
}

.song {
  display: flex;
  text-decoration: none;
  color: #3E3E3E;
  align-items: center
}

.song.active {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 8px
}

.song.active .song-cover {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 10px
}

.song .total-point {
  font-size: 12px;
  color: #C6C6C6;
  margin-bottom: 0;
  margin-left: 4px
}

.song .img-coin {
  width: 18px;
  height: 18px
}

.song .song-cover {
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  border-radius: 10px
}

.song .song-cover.video {
  position: relative !important;
  width: 136px;
  height: 94px
}

.song .song-cover.video .box-video-play {
  display: inline-block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  right: 0;
  margin: 0 auto;
  background: linear-gradient(0deg, rgb(0 0 0 / .2) 0%, rgb(0 0 0 / .2) 100%)
}

.song .song-cover.video .box-video-play img {
  width: 45px;
  height: 45px
}

.song .song-cover.video img {
  max-width: 100%;
  border-radius: 10px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center
}

.song .song-cover img {
  max-width: 100%;
  border-radius: 10px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center
}

.song .song-title {
  font-weight: 700;
  margin-bottom: .15rem;
  font-size: 14px
}

.song .song-singer {
  font-size: 12px;
  color: #C6C6C6;
  margin-bottom: 0
}

.song .small {
  font-size: 14px
}

#sliderHotPlaylist .swiper-slide {
  max-width: 135px;
  overflow-x: hidden
}

.box-item {
  position: relative;
  display: block;
  border-radius: 10px;
  text-decoration: none
}

.box-item .box-item-pict {
  width: 135px;
  height: 135px;
  border-radius: 10px
}

.box-item .box-item-pict img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  max-width: 100%;
  object-fit: cover;
  object-position: top center
}

.box-item .box-item-pict.merchant {
  height: 159px;
  background: #F2F8FF
}

.box-item .box-item-pict.merchant img {
  width: 135px
}

.box-item .box-item-name {
  display: block;
  margin-top: 4px;
  margin-bottom: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
  color: #3E3E3E
}

.box-item .box-item-name.game {
  line-height: normal;
  white-space: inherit;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden
}

.box-item .text-secondary {
  color: #C6C6C6;
  font-size: 12px;
  font-weight: 600
}

.bottom-nav {
  position: fixed;
  width: 100%;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  bottom: 0;
  background-color: #fff;
  z-index: 999
}

.bottom-nav .col {
  min-width: 20%
}

.bottom-nav .nav-box {
  text-align: center;
  padding-left: 2px;
  padding-right: 2px;
  padding-top: 1rem;
  padding-bottom: 1rem;
  border-radius: 10px;
  font-size: 24px;
  line-height: normal;
  display: block;
  text-decoration: none;
  color: #C6C6C6;
  position: relative
}

.bottom-nav .nav-box .nav-box-title {
  font-size: .75rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-top: 0;
  display: block;
  width: 100%;
  font-weight: 600
}

.bottom-nav .nav-box .nav-box-ico span:before {
  width: auto
}

.bottom-nav .active .nav-box {
  color: #3E3E3E
}

.top-pages {
  background: #FC786D;
  color: #fff;
  position: relative;
  height: 140px;
  display: flex;
  align-items: center
}

.top-pages.profile {
  height: auto;
  margin-top: 50px;
  padding: 24px 0
}

.top-pages .title-pages {
  font-size: 20px;
  width: 180px
}

.top-pages .title-pages h3 {
  font-weight: bolder
}

.top-pages .title-pages .title {
  font-size: 16px;
  font-weight: 600;
  margin-top: 14px
}

.top-pages .title-pages .detail .kuota h6 {
  font-size: 32px;
  color: #fff;
  font-weight: bolder;
  margin-bottom: 0
}

.top-pages .title-pages .detail .kuota h6 span {
  font-size: 12px;
  color: #fff;
  font-weight: 400
}

.top-pages .image-pages {
  position: absolute;
  bottom: 0;
  right: 20px
}

.top-pages .name {
  margin-left: 14px
}

.top-pages .name h5 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 0
}

.top-pages .name span {
  font-size: 12px
}

.top-content {
  background-color: #FC786D;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  padding-bottom: 24px;
  aspect-ratio: 375/149
}

.top-content.bg-pink {
  background-image: url(../img/background/bg-page-pink.svg)
}

.top-content.bg-soft-brown {
  background-image: url(../img/background/bg-page-soft-brown.svg)
}

.top-content.bg-purple {
  background-image: url(../img/background/bg-page-purple.svg)
}

.top-content.bg-green {
  background-image: url(../img/background/bg-page-green.svg)
}

.top-content .card-title-page {
  padding: 20px;
  border-radius: 10px;
  background-color: #fff;
  margin-top: 10px
}

.top-content .card-title-page h3 {
  font-size: 20px;
  font-weight: 700;
  color: #3E3E3E
}

.top-content .card-title-page span {
  font-size: 14px
}

.page-category .desc-page {
  font-size: 14px
}

.page-category .animate-music {
  width: 100%
}

.page-category .title-music {
  text-align: center;
  color: #3E3E3E
}

.page-category .title-music h3 {
  font-size: 20px;
  font-weight: 700
}

.page-category .title-music span {
  font-size: 14px
}

.page-category .time-music {
  margin-top: 24px
}

.page-category .time-music h1 {
  font-size: 48px;
  font-weight: 700;
  text-align: center
}

.tabs-package .nav-item .nav-link {
  border-radius: 0;
  padding: 0
}

.tabs-package .nav-item .nav-link .icon-circle-big {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #eaeaea !important;
  display: flex;
  align-items: center;
  justify-content: center
}

.tabs-package .nav-item .nav-link .icon-circle-big i {
  color: #C6C6C6;
  font-size: 20px;
  margin-top: 1px
}

.tabs-package .nav-item .nav-link h5 {
  color: #C6C6C6 !important
}

.tabs-package .nav-item .nav-link.active {
  background: #fff0;
  border-bottom: 1px solid #FC786D
}

.tabs-package .nav-item .nav-link.active .icon-circle-big {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #E3F0FF !important;
  display: flex;
  align-items: center;
  justify-content: center
}

.tabs-package .nav-item .nav-link.active .icon-circle-big i {
  color: #FC786D;
  font-size: 20px;
  margin-top: 1px
}

.tabs-package .nav-item .nav-link.active h5 {
  color: #FC786D !important
}

.nav-daily {
  background: #fff
}

.nav-daily .nav-item .nav-link {
  padding: 12px 0;
  color: #3E3E3E
}

.nav-daily .nav-item .nav-link.active {
  background: #FC786D;
  color: #fff
}

.item-package {
  margin-bottom: 14px
}

.item-package .title {
  font-size: 14px;
  font-weight: 700
}

.item-package .detail .kuota h6 {
  font-size: 24px;
  color: #FC786D;
  font-weight: bolder;
  margin-bottom: 0
}

.item-package .detail .kuota h6 span {
  font-size: 10px;
  color: #C6C6C6;
  font-weight: 400
}

.item-package .detail .price {
  font-size: 14px;
  font-weight: 700;
  margin-left: auto
}

.card-point {
  background: #0464ce;
  color: #fff;
  border-radius: 8px;
  padding: 12px
}

.card-point p {
  font-size: 12px;
  margin-bottom: 2px
}

.card-point .img-coin {
  width: 28px;
  height: 28px
}

.card-point .total-point {
  margin-bottom: 0;
  margin-left: 4px
}

.menu-profile {
  list-style: none;
  padding-left: 0
}

.menu-profile .items-menu {
  padding: 8px 0;
  border-bottom: 1px solid #e2e2e2
}

.menu-profile .items-menu a {
  text-decoration: none;
  color: #C6C6C6
}

.menu-profile .items-menu a i {
  font-size: 24px;
  color: #C6C6C6;
  margin-right: 14px
}

.menu-profile .items-menu a .flag {
  width: 32px;
  margin-right: 14px
}

.menu-profile .items-menu a .name-menu {
  font-size: 14px;
  color: #3E3E3E;
  font-weight: 600
}

.nav-pills-no-wrap {
  width: 100%;
  white-space: nowrap;
  overflow-x: auto;
  padding: 0;
  display: block
}

.nav-pills-no-wrap::-webkit-scrollbar {
  width: 10px
}

.nav-pills-no-wrap li {
  display: inline-block;
  margin-right: .15rem
}

.nav-pills-no-wrap li:last-child {
  margin-right: 0
}

.nav-top {
  padding: 10px 0
}

.nav-top.fixed-top {
  width: 100%;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  background-color: #FC786D
}

.setting-profile {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%
}

.setting-profile .img-ava {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover
}

.setting-profile .name {
  margin-left: 0;
  font-size: 16px;
  font-family: 600
}

.empty {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  align-items: center;
  margin-top: 32px
}

.empty .img-empty {
  width: 100px
}

.empty h5 {
  font-size: 18px;
  font-weight: 600;
  margin-top: 14px
}

.list-notification {
  list-style: none;
  padding-left: 0
}

.list-notification .items-notification {
  margin-bottom: 20px
}

.list-notification .items-notification .notif {
  text-decoration: none;
  color: #3E3E3E;
  display: flex;
  justify-content: space-between;
  align-items: flex-start
}

.list-notification .items-notification .notif .cover {
  height: 64px;
  width: 64px;
  overflow: hidden;
  border-radius: 10px;
  margin-right: 14px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff
}

.list-notification .items-notification .notif .cover.primary {
  background-color: #FC786D
}

.list-notification .items-notification .notif .cover.purple {
  background-color: #F63669
}

.list-notification .items-notification .notif .cover img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.list-notification .items-notification .notif .cover i {
  font-size: 32px
}

.list-notification .items-notification .notif .title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px
}

.list-notification .items-notification .notif .body {
  font-size: 14px;
  color: #C6C6C6;
  width: 190px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.list-notification .items-notification .notif .time {
  font-size: 14px;
  color: #C6C6C6
}

.bottom-buy {
  position: fixed;
  width: 100%;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  bottom: 0;
  background-color: #fff;
  z-index: 999;
  padding: 14px 0
}

.bottom-buy h5 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 0
}

.bottom-buy .img-coin {
  width: 28px;
  height: 28px
}

.bottom-buy .total-point {
  margin-bottom: 0;
  margin-left: 4px
}

.mood {
  background: #FFD144;
  border-radius: 10px;
  padding: 16px;
  position: relative;
  overflow: hidden
}

.mood .img-mood {
  position: absolute;
  left: 0;
  top: 0
}

.mood .text {
  margin-left: 140px
}

.mood .text h3 {
  font-size: 18px;
  font-weight: 700
}

.card-video {
  width: 100%
}

.card-video .cover {
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  aspect-ratio: 209/130
}

.card-video .cover .img-cover {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  aspect-ratio: 209/130;
  object-fit: cover;
  border-radius: 10px
}

.card-video .cover .play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3
}

.card-video .name {
  font-size: 16px;
  color: #3E3E3E;
  margin-top: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-bottom: 0
}

.listing-video .card-video {
  width: 100%
}

.listing-video .card-video .cover {
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  aspect-ratio: 294/139
}

.listing-video .card-video .cover .img-cover {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  aspect-ratio: 294/139;
  object-fit: cover;
  border-radius: 10px
}

.listing-video .card-video .cover .play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3
}

.listing-video .card-video .name {
  font-size: 16px;
  color: #5e5d5d;
  margin-top: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-bottom: 0
}

.list-song .items-song {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 14px;
  border-bottom: 1px solid #C6C6C6
}

.list-song .items-song .detail {
  display: flex;
  gap: 14px;
  align-items: center
}

.list-song .items-song .detail .img-cover {
  border-radius: 10px;
  width: 82px;
  aspect-ratio: 1/1;
  object-fit: cover
}

.list-song .items-song .title h5 {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 4px;
  color: #3E3E3E
}

.list-song .items-song .title span {
  font-size: 12px;
  color: #C6C6C6
}

.thumbnail-video {
  position: relative;
  width: 100%;
  aspect-ratio: 375/247
}

.thumbnail-video .cover-video {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1
}

.thumbnail-video .icon-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2
}

.thumbnail-video .badge-newvideo {
  padding: 8px 14px;
  border-radius: 10px;
  color: #3E3E3E;
  background: #dcdbff;
  position: absolute;
  right: 14px;
  top: 14px;
  z-index: 2;
  font-size: 12px
}

.title-detail {
  margin-block: 14px
}

.title-detail h3 {
  font-size: 20px;
  font-weight: 700
}

.title-detail span {
  font-size: 14px
}

.title-detail .img-vision {
  width: 100%;
  aspect-ratio: 200/150;
  object-fit: cover;
  border-radius: 10px
}

.card-detail {
  background: #f6ebe7;
  border-radius: 10px;
  padding: 22px;
  text-align: center
}

.card-detail i {
  font-size: 20px
}

.card-detail h3 {
  font-size: 32px;
  font-weight: 700
}

.card-detail p {
  margin-bottom: 0
}

.desc-detail {
  font-size: 16px;
  margin-block: 24px;
  color: #3E3E3E
}

.card-category {
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 10px;
  position: relative;
  overflow: hidden
}

.card-category.sub-journal {
  aspect-ratio: 330/157
}

.card-category .cover {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px
}

.card-category .overlay {
  background: linear-gradient(180deg, #fff0 0%, rgb(0 0 0 / .5) 100%);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: end;
  padding: 14px
}

.card-category .overlay h5 {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 0
}

.card-cooking .cover {
  width: 100%;
  aspect-ratio: 161/129;
  border-radius: 10px;
  object-fit: cover;
  margin-bottom: 8px
}

.card-cooking .text {
  width: 100%
}

.card-cooking .text h5 {
  font-size: 14px;
  color: #3E3E3E;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-weight: 400
}

.card-detail-cooking {
  padding-block: 14px;
  margin-top: 24px;
  border-radius: 4px
}

.card-detail-cooking p {
  font-size: 14px;
  margin-bottom: 8px
}

.card-detail-cooking.carbo {
  border-top: 4px solid #FC786D
}

.card-detail-cooking.protein {
  border-top: 4px solid #70a9ff
}

.card-detail-cooking.fat {
  border-top: 4px solid #ffbd83
}

.detail-magazine {
  margin-bottom: 24px
}

.detail-magazine .cover {
  width: 136px;
  aspect-ratio: 136/191;
  object-fit: cover;
  border-radius: 8px
}

.list-journal .item-journal {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 4px 20px 0 rgb(184 184 184 / .25);
  border-left: 8px solid #FC786D
}

.list-journal .item-journal h5 {
  font-weight: 700;
  font-size: 16px;
  font-style: italic;
  color: #3E3E3E
}

.list-journal .item-journal p {
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14px;
  color: #3E3E3E;
  font-weight: 400
}

.list-journal .item-journal .date {
  color: #3E3E3E
}

.list-journal .item-journal .cover-vision {
  width: 90px;
  align-self: stretch;
  border-radius: 12px;
  object-fit: cover
}

.card-detail-journal {
  border-radius: 22px;
  background: #f6ebe7;
  padding: 24px
}

.card-detail-journal .img-journal {
  width: 100%;
  border-radius: 10px;
  aspect-ratio: 292/159;
  object-fit: cover;
  margin-bottom: 24px
}

.card-detail-journal h3 {
  font-weight: 700;
  font-size: 24px;
  margin-bottom: 14px
}

.card-detail-journal p {
  font-size: 14px
}

.button-floating {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  text-wrap: nowrap;
  z-index: 200
}

.button-floating.onboard-btn {
  bottom: 50px;
  max-width: 480px;
  min-width: 320px
}

.button-floating.onboard-btn .btn-primary {
  width: 100%;
  border-radius: 10px;
  box-shadow: none !important
}

.button-floating .btn-primary {
  box-shadow: rgb(252 120 109 / .55) 0 4px 10px;
  border-radius: 100px;
  padding-inline: 32px
}

.button-floating.question {
  width: 100%;
  background: #fff;
  padding: 20px;
  bottom: 0;
  height: auto;
  box-shadow: rgb(0 0 0 / .1) 0 0 10px
}

.button-floating.question .btn-primary {
  border-radius: 8px
}

.close-button-memories {
  position: fixed;
  top: 20px;
  z-index: 300;
  max-width: 480px;
  position: fixed;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: right;
  padding-right: 32px
}

.close-button-memories .button {
  font-size: 24px
}

.nav-index {
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 2
}

.background-motivation {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.text-motivation {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgb(255 255 255 / .7);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center
}

.text-motivation h3 {
  font-size: 32px;
  font-weight: 500;
  color: #3E3E3E;
  text-align: center;
  font-family: "Plus Jakarta Sans", sans-serif
}

.text-motivation .icon {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 32px
}

.text-motivation .icon .circle-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  background: #fff
}

.select-custom {
  display: flex
}

.select-custom.quiz {
  display: inline-flex;
  flex-direction: column;
  gap: 16px;
  width: 100%
}

.select-custom.quiz .select {
  margin-right: 0;
  width: 100%
}

.select-custom.quiz .select .btn {
  display: block !important
}

.select-custom.quiz .select .btn-check {
  display: none
}

.select-custom.quiz .select .btn-check:checked+.btn {
  border: 1px solid #7772ff;
  background: #dcdbff !important;
  border-radius: 8px;
  color: #7772ff
}

.select-custom.quiz .select .btn-check:checked+.btn h4 {
  color: #7772ff
}

.select-custom.quiz .select .btn-primary {
  width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid #7772ff;
  color: #C6C6C6;
  background: #f4f3ff;
  margin-right: 10px;
  white-space: nowrap;
  text-decoration: none;
  padding: 10px 14px;
  text-align: left
}

.select-custom.quiz .select .btn-primary:hover,
.select-custom.quiz .select .btn-primary:focus,
.select-custom.quiz .select .btn-primary:active {
  border: 1px solid #7772ff;
  background: #dcdbff !important;
  color: #3E3E3E;
  border-radius: 8px
}

.select-custom.quiz .select .btn-primary:hover h4,
.select-custom.quiz .select .btn-primary:focus h4,
.select-custom.quiz .select .btn-primary:active h4 {
  color: #3E3E3E
}

.select-custom.quiz .select .btn-primary h4 {
  font-weight: 700;
  color: #3E3E3E
}

.select-custom.plan-question {
  display: inline-flex;
  flex-direction: column;
  gap: 16px;
  width: 100%
}

.select-custom.plan-question .select {
  margin-right: 0;
  width: 100%
}

.select-custom.plan-question .select .btn {
  display: block !important
}

.select-custom.plan-question .select .btn-check {
  display: none
}

.select-custom.plan-question .select .btn-check:checked+.btn {
  border: 1px solid #FC786D;
  background: #FC786D !important;
  border-radius: 8px;
  color: #fff
}

.select-custom.plan-question .select .btn-check:checked+.btn h4 {
  color: #fff
}

.select-custom.plan-question .select .btn-check:checked+.btn p {
  color: #fff
}

.select-custom.plan-question .select .btn-primary {
  width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid #FC786D;
  color: #C6C6C6;
  background: #fff;
  margin-right: 10px;
  text-decoration: none;
  padding: 10px 14px;
  text-align: left
}

.select-custom.plan-question .select .btn-primary:hover,
.select-custom.plan-question .select .btn-primary:focus,
.select-custom.plan-question .select .btn-primary:active {
  border: 1px solid #FC786D;
  background: #ffe2db !important;
  color: #3E3E3E;
  border-radius: 8px
}

.select-custom.plan-question .select .btn-primary:hover h4,
.select-custom.plan-question .select .btn-primary:focus h4,
.select-custom.plan-question .select .btn-primary:active h4 {
  color: #3E3E3E
}

.select-custom.plan-question .select .btn-primary h4 {
  font-weight: 700;
  color: #3E3E3E;
  font-size: 16px
}

.select-custom.plan-question .select .btn-primary p {
  font-size: 14px;
  color: #3E3E3E;
  font-weight: 400
}

.select-custom.plan-question.gender {
  flex-direction: row
}

.select-custom.plan-question.gender .select {
  margin-right: 0;
  width: 100%
}

.select-custom.plan-question.gender .select .btn {
  display: block !important
}

.select-custom.plan-question.gender .select .btn-check {
  display: none
}

.select-custom.plan-question.gender .select .btn-check:checked+.btn {
  border: 1px solid #FC786D;
  background: #FC786D !important;
  border-radius: 8px;
  color: #fff
}

.select-custom.plan-question.gender .select .btn-check:checked+.btn h4 {
  color: #fff
}

.select-custom.plan-question.gender .select .btn-check:checked+.btn p {
  color: #fff
}

.select-custom.plan-question.gender .select .btn-check:checked+.btn .circle {
  width: 34px;
  height: 34px;
  background: #fff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 16px;
  color: #FC786D;
  margin-left: auto
}

.select-custom.plan-question.gender .select .btn-primary {
  width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid #FC786D;
  color: #C6C6C6;
  background: #fff;
  margin-right: 10px;
  text-decoration: none;
  padding: 10px 14px;
  text-align: left
}

.select-custom.plan-question.gender .select .btn-primary:hover,
.select-custom.plan-question.gender .select .btn-primary:focus,
.select-custom.plan-question.gender .select .btn-primary:active {
  border: 1px solid #FC786D;
  background: #ffe2db !important;
  color: #3E3E3E;
  border-radius: 8px
}

.select-custom.plan-question.gender .select .btn-primary:hover h4,
.select-custom.plan-question.gender .select .btn-primary:focus h4,
.select-custom.plan-question.gender .select .btn-primary:active h4 {
  color: #3E3E3E
}

.select-custom.plan-question.gender .select .btn-primary .circle {
  width: 34px;
  height: 34px;
  background: #FC786D;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 16px;
  color: #fff;
  margin-left: auto
}

.select-custom.plan-question.gender .select .btn-primary h4 {
  font-weight: 700;
  color: #3E3E3E;
  font-size: 16px
}

.select-custom.plan-question.gender .select .btn-primary p {
  font-size: 14px;
  color: #3E3E3E;
  font-weight: 400
}

.select-custom.picture .select {
  margin-right: 0;
  width: 100%
}

.select-custom.picture .select .btn {
  display: block !important
}

.select-custom.picture .select .btn-check {
  display: none
}

.select-custom.picture .select .btn-check:checked+.btn {
  border: 5px solid #FC786D;
  background: #FC786D !important;
  border-radius: 10px;
  color: #fff
}

.select-custom.picture .select .btn-check:checked+.btn h4 {
  color: #fff
}

.select-custom.picture .select .btn-check:checked+.btn p {
  color: #fff
}

.select-custom.picture .select .btn-primary {
  width: 100%;
  height: auto;
  border-radius: 10px;
  color: #C6C6C6;
  background: #fff;
  margin-right: 10px;
  text-decoration: none;
  padding: 0;
  text-align: left
}

.select-custom.picture .select .btn-primary:hover,
.select-custom.picture .select .btn-primary:focus,
.select-custom.picture .select .btn-primary:active {
  border: 5px solid #FC786D;
  background: #ffe2db !important;
  color: #3E3E3E;
  border-radius: 10px
}

.select-custom.picture .select .btn-primary:hover h4,
.select-custom.picture .select .btn-primary:focus h4,
.select-custom.picture .select .btn-primary:active h4 {
  color: #3E3E3E
}

.select-custom.picture .select .btn-primary .img-picture {
  width: 100%;
  aspect-ratio: 117/159;
  object-fit: cover;
  border-radius: 10px
}

.select-picture {
  border: 1px solid #d6d6d6;
  border-radius: 10px;
  padding: 14px
}

.img-magazines img {
  width: 100%;
  aspect-ratio: 136/192;
  object-fit: cover;
  border-radius: 10px
}

.progres-step {
  gap: 8px;
  width: 100%
}

.progres-step .step {
  width: 20px;
  height: 2px;
  background: #3e3e3e;
  border-radius: 100px;
  border-radius: 100px;
  flex-grow: 1;
  transition: width 0.3s ease
}

.progres-step .step.active {
  width: 80px;
  background: #FC786D
}

.question {
  width: 100%;
  display: grid;
  place-items: center;
  margin-top: 32px
}

.question h3 {
  text-align: center;
  font-size: 32px;
  font-weight: 400;
  width: 60%
}

.question .desc {
  text-align: center;
  font-weight: 400;
  font-size: 14px;
  width: 80%;
  margin-top: 16px
}

.custom-question {
  display: grid;
  place-items: center
}

.kg-text,
.cm-text {
  font-size: .8rem;
  position: absolute;
  top: 55%;
  right: 38%;
  transform: translateY(-50%);
  pointer-events: none
}

.kg-text.bmi,
.cm-text.bmi {
  right: 16%
}

.select-label {
  display: flex;
  justify-content: center;
  gap: 8px
}

.select-label .btn-check {
  display: none
}

.select-label .btn-check:checked+.btn {
  border: 1px solid #FC786D;
  background: #FC786D !important;
  border-radius: 8px;
  color: #fff
}

.select-label .btn-primary {
  background: #fff !important;
  border: 1px solid #FC786D;
  color: #FC786D
}

.select-label .btn-primary:hover,
.select-label .btn-primary:focus,
.select-label .btn-primary:active {
  border: 1px solid #FC786D;
  background: #ffe2db !important;
  color: #3E3E3E;
  border-radius: 8px
}

.select-label .btn-primary:hover h4,
.select-label .btn-primary:focus h4,
.select-label .btn-primary:active h4 {
  color: #3E3E3E
}

.alert-question {
  background: #ffe3e1;
  border-radius: 10px;
  padding: 20px
}

.alert-question p {
  text-align: center;
  margin-bottom: 0
}

.range-custom {
  margin-block: 14px
}

.range-custom .custom-range::-webkit-slider-thumb {
  background: #e1e12f !important;
  border: 1px solid #3E3E3E;
  border-radius: 4px;
  rotate: 45deg
}

.range-custom .custom-range::-moz-range-thumb {
  background: #e1e12f !important;
  border: 1px solid #3E3E3E;
  border-radius: 4px;
  rotate: 45deg
}

.range-custom .custom-range::-ms-thumb {
  background: #e1e12f !important;
  border: 1px solid #3E3E3E;
  border-radius: 4px;
  rotate: 45deg
}

.range-custom .form-range::-webkit-slider-runnable-track {
  width: 100%;
  height: .5rem;
  color: #fff0;
  cursor: pointer;
  background: linear-gradient(90deg, #60f516 0%, #ffe357 50%, #ff3030 100%);
  border-color: #fff0;
  border-radius: 1rem
}

.range-custom .calculator::-webkit-slider-runnable-track {
  width: 100%;
  height: .5rem;
  color: #fff0;
  cursor: pointer;
  background: linear-gradient(90deg, #52734f 0%, #44c439 33.5%, #ffd144 67%, #c82424 100%);
  border-color: #fff0;
  border-radius: 1rem
}

.summary-list {
  padding: 24px
}

.card-exercise {
  width: 100%;
  aspect-ratio: 294/340;
  border-radius: 10px;
  overflow: hidden;
  position: relative
}

.card-exercise .img-highlight {
  width: 100%;
  aspect-ratio: 294/340;
  object-fit: cover
}

.card-exercise .overlay {
  width: 100%;
  height: 100%;
  background: rgb(24 24 24 / .5);
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  padding: 32px;
  display: grid;
  align-content: space-between
}

.card-exercise .overlay h3 {
  font-size: 32px;
  font-weight: 700;
  color: #fefefe;
  width: 50%
}

.minutes-circle {
  height: 54px;
  width: 54px;
  display: grid;
  place-items: center;
  border-radius: 100px;
  background: #ffd144;
  color: #3E3E3E
}

.list-highlight {
  margin-top: 24px
}

.list-highlight .items-highlight {
  margin-bottom: 14px;
  border-radius: 15px;
  background: #ffeedb;
  padding: 12px 22px
}

.days {
  gap: 8px;
  display: flex;
  width: 100%;
  padding-block: 14px;
  padding-inline: 24px
}

.days .item-day {
  width: 20px;
  aspect-ratio: 1/1;
  background: rgb(57 57 57 / .5);
  border-radius: 6px;
  flex-grow: 1;
  transition: width 0.3s ease;
  display: grid;
  place-items: center;
  color: #fff
}

.days .item-day.active {
  border: 1.5px solid #FC786D;
  color: #FC786D;
  background: #ffe2c9
}

.days .item-day.done {
  background: #FC786D
}

.playing-plan {
  width: 38px;
  aspect-ratio: 1/1;
  background: #FC786D;
  border-radius: 6px;
  display: grid;
  place-items: center;
  color: #fff
}

.playing-plan.stop {
  background: #ffd144;
  color: #3E3E3E
}

.timer-play {
  margin-block: 24px
}

.base-timer {
  position: relative;
  width: 177px;
  height: 177px;
  margin: auto
}

.base-timer__svg {
  transform: scaleX(-1)
}

.base-timer__circle {
  fill: none;
  stroke: none
}

.base-timer__path-elapsed {
  stroke-width: 4px;
  stroke: #efefef
}

.base-timer__path-remaining {
  stroke-width: 2px;
  stroke-linecap: round;
  transform: rotate(90deg);
  transform-origin: center;
  transition: 1s linear all;
  fill-rule: nonzero;
  stroke: currentColor
}

.base-timer__path-remaining.green {
  color: #ffd144
}

.base-timer__path-remaining.orange {
  color: red
}

.base-timer__path-remaining.red {
  color: red
}

.base-timer__label {
  position: absolute;
  width: 120px;
  height: 120px;
  background: #FC786D;
  color: #fff;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: .3px
}

.line-title {
  border-top: 1px dashed #3E3E3E;
  opacity: 1;
  width: 50%
}

.alert-finish {
  background: #3caa86;
  padding: 14px 24px;
  border-radius: 10px
}

.text-welcome {
  display: grid;
  place-items: center
}

.floating-fit {
  position: fixed;
  bottom: 80px;
  right: 8px;
  z-index: 900
}

.floating-fit img {
  width: 110px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  filter: drop-shadow(0 0 12.1px rgb(0 0 0 / .25))
}

.card-form {
  border-radius: 10px;
  border: 1px solid #FC786D;
  background: #fefefe;
  padding: 26px
}

.card-result-bmi {
  border-radius: 12px;
  background: rgb(255 238 219 / .7);
  padding: 24px
}

.card-result-bmi .detail {
  display: grid;
  justify-content: center
}

.card-result-bmi .detail .result {
  font-size: 54px;
  color: #FC786D;
  font-weight: 700;
  text-align: center
}

.card-result-bmi .detail .category {
  padding: 6px 10px;
  border-radius: 100px;
  color: #fff;
  text-align: center
}

.card-result-bmi .detail .category.underweight {
  background: #52734f
}

.card-result-bmi .detail .category.normal {
  background: #44c439
}

.card-result-bmi .detail .category.overweight {
  background: #ffd144
}

.card-result-bmi .detail .category.obese {
  background: #c82424
}

.tabs-custom .nav-link {
  border: 1px solid #FC786D;
  border-radius: 100px;
  color: #FC786D;
  margin-right: 8px
}

.tabs-custom .nav-link.active {
  background: #FC786D
}

.dropdown-custom {
  width: 38px;
  height: 38px;
  font-size: 16px
}

.dropdown-menu-custom .dropdown-item:hover,
.dropdown-menu-custom .dropdown-item:focus,
.dropdown-menu-custom .dropdown-item:active {
  background-color: #6db99f !important
}

.swiper-journal .swiper-wrapper {
  align-items: center !important
}

.swiper-journal .slider-journal .cover {
  position: relative;
  width: 100%;
  aspect-ratio: 307/425
}

.swiper-journal .slider-journal .cover .img-cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 307/425;
  object-fit: cover;
  border-radius: 16px
}

.swiper-journal .slider-journal .cover .content-text {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  aspect-ratio: 307/425;
  border-radius: 20px;
  background: linear-gradient(0deg, rgb(0 0 0 / .4) 0%, rgb(0 0 0 / .4) 100%);
  padding: 24px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  z-index: 5;
  color: #fff
}

.swiper-journal .slider-journal .cover .content-text h2 {
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase
}

.swiper-journal .slider-journal .cover .content-text p {
  font-size: 12px;
  margin-bottom: 0
}

.swiper-journal .swiper-slide {
  scale: .9;
  transition: transform 0.3s ease
}

.swiper-journal .swiper-slide-active {
  scale: 1;
  transition: scale 0.3s ease;
  position: relative;
  z-index: 3;
  width: 100%;
  aspect-ratio: 307/425
}

.cat-journal .card-journal {
  margin-bottom: 24px
}

.cat-journal .card-journal .cover {
  position: relative;
  width: 100%;
  aspect-ratio: 307/340
}

.cat-journal .card-journal .cover .img-cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 307/340;
  object-fit: cover;
  border-radius: 16px
}

.cat-journal .card-journal .cover .content-text {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  aspect-ratio: 307/340;
  border-radius: 20px;
  background: linear-gradient(0deg, rgb(0 0 0 / .4) 0%, rgb(0 0 0 / .4) 100%);
  padding: 24px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  z-index: 5;
  color: #fff
}

.cat-journal .card-journal .cover .content-text h2 {
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase
}

.cat-journal .card-journal .cover .content-text p {
  font-size: 12px;
  margin-bottom: 0
}

.song-add {
  display: inline-block;
  position: relative;
  font-size: 1.25rem;
  cursor: pointer;
  color: #fff
}

.song-added {
  display: inline-block;
  position: relative;
  font-size: 1.25rem;
  cursor: pointer;
  color: #FC786D
}

.music-bg {
  background-size: cover;
  background-position: center;
  display: block;
  height: 100%;
  left: 0;
  right: 0;
  position: absolute;
  top: 0;
  width: 100%;
  margin: auto;
  z-index: 1
}

.music-bg::before {
  content: '';
  display: block;
  height: 100dvh;
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  -webkit-backdrop-filter: blur(1rem);
  backdrop-filter: blur(1rem);
  background: rgb(62 62 62 / .25);
  background: linear-gradient(180deg, rgb(255 255 255 / .25) 0%, #3E3E3E 70%);
  z-index: 11
}

.music-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.music-back {
  background-color: rgb(62 62 62 / .15);
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: auto;
  border-radius: 50%;
  font-size: .875rem;
  color: #fff;
  position: relative;
  z-index: 9
}

.music-back:hover {
  color: #fff
}

.music-back:focus {
  color: #fff;
  background-color: rgb(62 62 62 / .25)
}

.music-content {
  z-index: 9;
  position: absolute;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  right: 0
}

.music-content .music-cover {
  border-radius: 10px;
  width: 185px;
  height: 185px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1rem
}

.music-content .music-cover img {
  border-radius: 10px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  box-shadow: 0 .5rem 1rem rgb(62 62 62 / .15)
}

.music-content .music-name {
  font-size: 1rem;
  margin-bottom: 0
}

.music-content .music-info {
  margin: 0;
  padding: 0
}

.music-content .music-info li {
  list-style: none;
  display: inline-block;
  font-size: .75rem;
  color: #fff;
  opacity: .7;
  margin-right: .25rem
}

.music-content .music-info li::after {
  content: '•';
  padding-left: .25rem
}

.music-content .music-info li a {
  color: #fff
}

.music-content .music-info li:last-child {
  margin-right: 0
}

.music-content .music-info li:last-child::after {
  content: none
}

.music-action {
  position: fixed;
  z-index: 9;
  left: 0;
  right: 0;
  background-color: #3E3E3E;
  bottom: 0;
  padding-top: 1rem;
  padding-bottom: 1rem
}

.music-action-top {
  position: relative;
  margin-bottom: .75rem
}

.music-timeline {
  display: block;
  opacity: .7;
  margin-bottom: 5px
}

.music-timeline::after {
  content: '';
  clear: both;
  display: block
}

.music-timeline #musicTimeCurrent {
  float: left
}

.music-timeline #musicTimeDuration {
  float: right
}

.music-action-bottom {
  position: relative;
  margin-top: 1.5rem
}

.music-act-link {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  border-radius: 50%;
  font-size: 1rem;
  color: #fff;
  text-decoration: none
}

.music-act-link:hover {
  color: #fff
}

.music-act-link:focus {
  color: #fff;
  background-color: rgb(255 255 255 / .15)
}

.music-control-link {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  border-radius: 50%;
  font-size: 1.125rem;
  color: #fff;
  text-decoration: none
}

.music-control-link:hover {
  color: #fff
}

.music-control-link:focus {
  color: #fff;
  background-color: rgb(255 255 255 / .15)
}

.music-control-play {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  border-radius: 50%;
  font-size: 1.25rem;
  background-color: #FC786D;
  color: #fff;
  text-decoration: none
}

.music-control-play:hover {
  color: #fff
}

.music-control-play:focus {
  color: #fff;
  background-color: #FC786D
}

.slider.music-progress {
  background-color: gray;
  border-radius: 2px;
  cursor: pointer;
  height: 2px;
  position: relative;
  width: 100%
}

.slider.music-progress .progress {
  background-color: #FC786D;
  height: 100%;
  pointer-events: none;
  position: absolute;
  width: 0
}

.no-spinner::-webkit-outer-spin-button,
.no-spinner::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0
}

.no-spinner[type=number] {
  -moz-appearance: textfield
}

.floating-fit {
  position: fixed;
  bottom: 80px;
  right: 20px;
  z-index: 99;
  max-width: 120px;
  width: 25%
}

.floating-fit img {
  width: 100%;
  height: auto
}

@media (min-width:992px) {
  .floating-fit {
    right: calc((100% - 992px) / 2 + 270px);
    bottom: 80px
  }
}

@media (max-width:767px) {
  .floating-fit {
    bottom: 80px
  }
}