.section-forgot .forgot-bottom span, .section-forgot .reset-password-bottom span {
  font-size: 14px;
  color: yellow;
  margin-top: 5px;
  display: block; }

html, body {
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale  !important;
  text-rendering: optimizeLegibility !important; }

button, a {
  cursor: pointer; }

div img, div svg {
  cursor: pointer; }

#__nex {
  min-height: 100vh; }

body {
  margin: 0;
  background: #F6F7F9;
  padding: 0 !important;
  font-family: 'Source Sans Pro', sans-serif; }
  body .App {
    background: #F6F7F9;
    min-height: calc(100vh - 112px);
    padding: 55px 15px 56px;
    -webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.75); }

.MuiButton-root span, .MuiButtonBase-root span {
  font-family: inherit; }

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: unset;
  -webkit-text-fill-color: #FFF;
  -webkit-box-shadow: 0 0 0px 1000px rgba(255, 255, 255, 0) inset;
  transition: background-color 5000s ease-in-out 0s; }

p {
  margin: 0; }

.MuiButton-label {
  text-transform: initial; }

.background-white {
  background: #FFFFFF !important; }

.p0 {
  padding: 0 !important; }

.m0 {
  margin: 0 !important; }

.p16 {
  padding: 16px !important; }

.pl15 {
  padding-left: 15px !important; }

.mt0 {
  margin-top: 0 !important; }

.mt2 {
  margin-top: 2px !important; }

.mb-5 {
  margin-bottom: -5px !important; }

.ml-40 {
  margin-left: -40px !important; }

.mb2 {
  margin-bottom: 2px !important; }

.mb4 {
  margin-bottom: 4px !important; }

.mb5 {
  margin-bottom: 5px !important; }

.mb8 {
  margin-bottom: 8px !important; }

.mb9 {
  margin-bottom: 9px !important; }

.mb10 {
  margin-bottom: 10px !important; }

.mb12 {
  margin-bottom: 12px !important; }

.mb14 {
  margin-bottom: 14px !important; }

.mb16 {
  margin-bottom: 16px !important; }

.mb20 {
  margin-bottom: 20px !important; }

.mb25 {
  margin-bottom: 25px !important; }

.mb40 {
  margin-bottom: 40px !important; }

.mb50 {
  margin-bottom: 50px !important; }

.mb22 {
  margin-bottom: 22px !important; }

.ml20 {
  margin-left: 20px !important; }

.mb85 {
  margin-bottom: 85px !important; }

.mt8 {
  margin-top: 8px !important; }

.mt10 {
  margin-top: 10px !important; }

.mt12 {
  margin-top: 12px !important; }

.mt14 {
  margin-top: 14px !important; }

.mt16 {
  margin-top: 16px !important; }

.mt20 {
  margin-top: 20px !important; }

.mt24 {
  margin-top: 24px !important; }

.mt28 {
  margin-top: 28px !important; }

.mt32 {
  margin-top: 32px !important; }

.mt40 {
  margin-top: 40px !important; }

.mt65 {
  margin-top: 55px !important; }

.mt70 {
  margin-top: 70px !important; }

.mt75 {
  margin-top: 75px !important; }

.mt80 {
  margin-top: 80px !important; }

.mt110 {
  margin-top: 110px !important; }

.mt-10 {
  margin-top: -10px !important; }

.mt-16 {
  margin-top: -16px !important; }

.mt-25 {
  margin-top: -25px !important; }

.mt-40 {
  margin-top: -40px !important; }

.mt-8 {
  margin-top: -8px !important; }

.ml10 {
  margin-left: 10px !important; }

.ml15 {
  margin-left: 15px !important; }

.ml16 {
  margin-left: 16px !important; }

.ml30 {
  margin-left: 30px !important; }

.ml-16 {
  margin-left: -16px !important; }

.mr10 {
  margin-right: 10px !important; }

.mr16 {
  margin-right: 16px !important; }

.mr8 {
  margin-right: 8px !important; }

.bottom-90 {
  bottom: -90px !important; }

.w40 {
  width: 40px !important; }

.h85 {
  height: 85px !important; }

.pt20 {
  padding-top: 20px !important; }

.bold {
  font-weight: 600 !important; }

.color-title {
  color: #17345F !important; }

.color-desc {
  color: #4A6080 !important; }

.color-desc-light {
  color: #8B99AF !important; }

.color-placeholder {
  color: #C5CCD7 !important; }

.color-red-info {
  color: #FF5959 !important;
  cursor: pointer; }

.txt-underline {
  text-decoration: underline; }

.color-white {
  color: #FFFFFF !important; }

.p16 {
  padding: 16px !important; }

.pt8 {
  padding-top: 8px !important; }

.pt25 {
  padding-top: 25px !important; }

.pb15 {
  padding-bottom: 15px !important; }

.pb10 {
  padding-bottom: 10px !important; }

.pb24 {
  padding-bottom: 24px !important; }

.fz16 {
  font-size: 16px !important; }

.fz12 {
  font-size: 12px !important; }

.fz10 {
  font-size: 10px !important; }

.flex-center {
  display: flex !important;
  justify-content: center !important; }

.border1 {
  border: solid 1px #EFEFEF; }

.pointer {
  cursor: pointer; }

.fw500 {
  font-weight: 500 !important; }

.fw600 {
  font-weight: 600 !important; }

.fz14 {
  font-size: 14px !important; }

.MuiButton-root.Mui-disabled {
  background-color: rgba(255, 255, 255, 0.12); }

.swipper-wrapper {
  min-width: 0; }

.headerNav {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 2;
  border-bottom: solid 1px #E33D3D; }
  .headerNav .headerNav-bg {
    background: #FF4D4D; }
    .headerNav .headerNav-bg .MuiIconButton-root .MuiIconButton-label {
      pointer-events: none; }
  .headerNav .header-chat {
    padding: 0px; }
  .headerNav button {
    color: #FFF;
    margin: 0; }
    .headerNav button .header-badge span {
      background: #35357D;
      font-size: 11px;
      height: 18px;
      width: 18px;
      min-width: unset;
      font-weight: 300;
      top: 7px;
      left: 3px; }

.bottomBar {
  justify-content: space-around !important;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 2;
  max-width: 480px;
  left: 50%;
  right: 50%;
  transform: translate(-50%, 0px);
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.16); }
  .bottomBar button {
    padding: 8px 12px 8px;
    font-family: inherit; }
  .bottomBar span {
    font-size: 10px !important;
    line-height: 1em;
    margin-top: 5px; }
  .bottomBar .MuiBottomNavigationAction-selected-186 {
    color: #FF5959; }

.section {
  position: relative;
  z-index: 1;
  margin-top: 20px;
  border-radius: 4px; }
  .section h2 {
    color: #707070;
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 10px; }

.section-instruction-list {
  margin: 55px -15px 0px 0px;
  padding: 0px 0px 20px 25px;
  background: #FFFFFF; }
  .section-instruction-list link {
    text-decoration: none; }
  .section-instruction-list img {
    width: calc(100% - 40px);
    margin: 15px 0px 0px 0px; }

.section-instruction {
  margin: 55px 0px 0px 0px;
  background: #FFFFFF; }
  .section-instruction img {
    width: 100%;
    height: auto; }
  .section-instruction p {
    margin: 0px 22px 0px 22px;
    padding-top: 3px; }
  .section-instruction button {
    background: #FF5959;
    color: #FFF;
    border: unset;
    margin: 10px 0px 25px 45px;
    width: calc(100% - 90px);
    padding: 15px 0;
    text-transform: capitalize;
    font-size: 14px;
    font-weight: 500; }
  .section-instruction button:hover {
    background: #ef5350; }

.section-promo-list {
  margin: 0px 0px 0px 0px;
  padding: 55px 0px 20px 0px;
  background: #FFFFFF; }
  .section-promo-list img {
    border-radius: 5px;
    width: calc(100%);
    display: flex; }
  .section-promo-list .items {
    margin: 20px 20px 20px 20px;
    box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, 0.05);
    border-radius: 5px; }

.section-alert {
  background-image: linear-gradient(to bottom, #64BD68 55%, #7BC958);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  margin: 0px 0px 0px 0px;
  width: 100%;
  height: 55px;
  line-height: 55px;
  color: white;
  font-size: 14px;
  font-weight: 700; }

.section-promo {
  margin: 55px 0px 0px 0px;
  background: #F6F7F9; }
  .section-promo table {
    margin: 10px 0px 20px 0px;
    width: 100%;
    border-width: 1px;
    border-style: solid;
    border-color: #B0B0B0;
    border-radius: 5px;
    border-spacing: 0px;
    padding: 0px 0px 10px 0px; }
    .section-promo table tr {
      height: 30px;
      vertical-align: middle;
      font-weight: 600; }
    .section-promo table td {
      padding: 10px 15px 10px 20px;
      border: none;
      width: calc(100% / 3);
      color: #4A6080;
      font-size: 14px; }
    .section-promo table .denomColor {
      color: #333; }
    .section-promo table .promoColor {
      color: #FF5959; }
    .section-promo table .tableheader {
      background-color: #F0F0F0; }
  .section-promo button {
    background: #FF5959;
    color: #FFF;
    border: unset;
    width: 100%;
    margin: 10px 0px 20px 0px;
    padding: 15px 0;
    text-transform: capitalize;
    font-size: 14px;
    font-weight: 500; }
  .section-promo button:hover {
    background: #ef5350; }
  .section-promo ol {
    margin: 10px 15px 15px -10px;
    font-size: 14px;
    color: #4A6080;
    font-weight: 500; }
  .section-promo .promo-alert {
    background-image: linear-gradient(to bottom, #64BD68 55%, #7BC958);
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 100;
    margin: -55px 0px 0px 0px;
    height: 55px;
    line-height: 55px;
    color: white;
    font-size: 14px;
    font-weight: 700; }
  .section-promo .promo-image {
    position: relative;
    z-index: 1;
    margin: 0px 0px 0px 0px;
    background: #000000; }
    .section-promo .promo-image img {
      width: 100%;
      height: auto;
      display: flex; }
  .section-promo .promo-detail {
    position: relative;
    z-index: 1;
    margin: -35px 0px 0px 0px;
    padding: 20px 20px 20px 20px;
    border-radius: 15px 15px 0px 0px;
    background: #FFFFFF; }
    .section-promo .promo-detail__code-container {
      padding: 20px 20px 20px 20px;
      margin: 0px 0px 25px 0px;
      border: solid 1px #EFEFEF;
      border-radius: 5px; }
    .section-promo .promo-detail__code-container-inner {
      width: 70%;
      height: 55px;
      background-image: url(data:image/png;base64,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);
      background-size: cover;
      padding: 15px 15px 15px 15px;
      margin: 5px 0px 10px 0px; }
      .section-promo .promo-detail__code-container-inner__left, .section-promo .promo-detail__code-container-inner__right {
        height: 55px;
        line-height: 55px;
        display: inline-block;
        vertical-align: middle;
        text-align: center; }
      .section-promo .promo-detail__code-container-inner__left {
        width: 75%;
        font-size: 20px;
        font-weight: 700;
        color: #FFF; }
      .section-promo .promo-detail__code-container-inner__right {
        width: 25%;
        font-size: 13px;
        font-weight: 400;
        text-decoration: underline;
        color: #FF5959; }
    .section-promo .promo-detail__code-container-title {
      width: 50%;
      font-size: 18px;
      color: #FF5959;
      font-weight: 600; }
    .section-promo .promo-detail__code-container-sub-title {
      width: 50%;
      font-size: 12px;
      color: #7B7B7B;
      font-weight: 400; }
    .section-promo .promo-detail__title {
      font-size: 20px;
      color: #17345F;
      font-weight: 700; }
    .section-promo .promo-detail__period {
      font-size: 12px;
      color: #7B7B7B;
      font-weight: 400; }
    .section-promo .promo-detail__desc {
      font-size: 14px;
      color: #7B7B7B;
      font-weight: 500; }
  .section-promo .promo-tnc__title {
    font-size: 16px;
    color: #7B7B7B;
    font-weight: 700; }
  .section-promo .promo-tnc__desc {
    font-size: 12px;
    color: #7B7B7B;
    font-weight: 500; }

.section-promo-tnc {
  background-color: #F6F7F9;
  height: 100vh; }

.section-product h2 {
  margin: 0 0 15px; }

.section-product .product-base {
  padding: 24px 15px 24px; }

.section-product .border-card {
  border: solid 1px #EFEFEF; }

.section-product .title-section {
  color: #17345F;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 20px; }

.section-product .padding-paytv {
  padding: 15px 15px 15px;
  border-radius: 4px; }

.section-product .product-category {
  padding: 5px 15px; }

.section-product .product-grid {
  margin: -15px;
  flex-wrap: wrap !important; }
  .section-product .product-grid .product-icon {
    height: 45px !important;
    width: 45px !important;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center; }
    .section-product .product-grid .product-icon img {
      max-height: 40px  !important;
      max-width: 40px  !important; }
    .section-product .product-grid .product-icon .MuiBadge-root .MuiBadge-badge {
      padding: 0px 3px !important; }
    .section-product .product-grid .product-icon .MuiBadge-root span {
      font-family: inherit;
      font-size: 10px; }
  .section-product .product-grid .icon-three-column {
    height: 45px !important;
    width: 85px !important;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center; }
    .section-product .product-grid .icon-three-column img {
      max-height: 40px  !important;
      max-width: 80px  !important; }
  .section-product .product-grid .icon-internal-link svg {
    height: 30px !important;
    width: 40px !important; }
  .section-product .product-grid .product-pay-tv {
    border-radius: 50%;
    border-style: solid;
    border-width: 1px;
    border-color: #E3E3E3;
    height: 40px !important;
    width: 40px !important;
    margin-bottom: 9px; }
    .section-product .product-grid .product-pay-tv .product-icon-tv {
      max-width: 36px !important; }
  .section-product .product-grid .product-voucher-game {
    width: 38px !important;
    max-height: 38px !important; }
  .section-product .product-grid .product-name {
    color: #4A6080;
    font-size: 12px;
    margin-top: 8px;
    text-overflow: ellipsis;
    overflow: hidden; }
  .section-product .product-grid .product-item {
    margin-top: 6px;
    margin-bottom: 6px; }

.section-product .category-product {
  margin-bottom: 25px; }
  .section-product .category-product .text {
    margin-bottom: 28px; }

.section-product .product-menu h2 {
  margin: 0; }

.section-product .product-menu .text-bold {
  margin-bottom: 16px;
  margin-top: -5px;
  font-weight: 600;
  font-size: 16px;
  color: #17345F; }

.section-credit img {
  cursor: unset; }

.section-credit .kredit-top {
  color: #4A6080;
  font-size: 12px; }

.section-credit .kredit-bot {
  color: #FF5959;
  font-size: 15px;
  font-weight: 600;
  border: unset;
  background: #FFF;
  max-width: 110px; }

.section-credit .credit-base {
  padding: 15px; }

.section-credit .credit-button {
  background: #FF5959;
  font-size: 12px;
  font-weight: 700;
  text-transform: capitalize;
  min-width: 95px;
  box-shadow: 0px 1px 5px 0px rgba(236, 65, 65, 0.2), 0px 2px 2px 0px rgba(236, 65, 65, 0.2), 0px 3px 1px -2px rgba(236, 65, 65, 0.2); }

.section-slider {
  margin: 23px -15px 25px; }
  .section-slider a {
    text-decoration: none;
    color: white; }
  .section-slider h2 {
    margin-left: 15px;
    font-size: 16px;
    color: #17345F; }
  .section-slider img {
    border-radius: 5px;
    width: 100%;
    height: auto; }
  .section-slider .swiper-slide {
    max-width: 304px;
    max-height: 171px; }
  .section-slider .swiper-box {
    padding: 0 15px;
    display: flex;
    justify-content: space-between;
    margin: 5px 0 0; }
    .section-slider .swiper-box p {
      font-size: 12px;
      font-weight: 500;
      color: #FF5959; }
    .section-slider .swiper-box .swiper-pagination, .section-slider .swiper-box .article-pagination {
      position: relative; }
      .section-slider .swiper-box .swiper-pagination .swiper-pagination-bullet, .section-slider .swiper-box .article-pagination .swiper-pagination-bullet {
        margin: 0 3px;
        border: solid 1px black;
        background: none; }
      .section-slider .swiper-box .swiper-pagination .swiper-pagination-bullet-active, .section-slider .swiper-box .article-pagination .swiper-pagination-bullet-active {
        background: #FF5959;
        border: solid 1px #FF5959; }

.section-banner a {
  text-decoration: none;
  color: white; }

.section-banner .banner-item {
  margin-bottom: 10px;
  border: solid 1px #EFEFEF;
  border-radius: 4px; }
  .section-banner .banner-item__wrapper {
    display: flex;
    padding: 15px;
    align-items: center; }
  .section-banner .banner-item__left {
    display: flex;
    max-width: 40px;
    max-height: 40px; }
    .section-banner .banner-item__left img {
      width: 100%;
      height: 100%; }
  .section-banner .banner-item__right {
    margin-left: 15px; }
  .section-banner .banner-item__title {
    font-size: 14px;
    color: #17345F;
    font-weight: 600;
    text-decoration: none;
    margin-bottom: 4px; }
  .section-banner .banner-item__desc {
    font-size: 12px;
    color: #4A6080;
    font-weight: 500; }

.section-banner h2 {
  font-size: 16px;
  color: #17345F; }

.section-banner .banner-all {
  display: flex;
  justify-content: flex-end; }
  .section-banner .banner-all p {
    font-size: 12px;
    font-weight: 500;
    color: #FF5959; }

.section-pros .pros-base {
  padding: 30px 10px;
  border: solid 1px #F3F3F3; }

.section-pros .bordered {
  border-right: solid 1px #F0F1F2; }

.section-article {
  margin: 15px -15px 0px; }
  .section-article h2 {
    margin: 0 15px 10px;
    color: #17345F;
    font-size: 16px; }
  .section-article .image-article {
    max-height: 95px;
    overflow: hidden; }
    .section-article .image-article img {
      width: 100%;
      height: auto; }
    @media screen and (max-width: 360px) {
      .section-article .image-article img {
        height: 70px;
        width: 100%; } }
  .section-article .desc-article {
    background: #FFF;
    color: #707070;
    padding: 6px 10px; }
    .section-article .desc-article .title {
      display: flex;
      align-items: center;
      height: 55px;
      font-size: 12px;
      font-weight: 600;
      color: #17345F;
      text-overflow: ellipsis;
      overflow: hidden; }
    .section-article .desc-article .desc {
      font-size: 12px;
      font-weight: 500;
      display: -webkit-box;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-bottom: 15px;
      color: #4A6080; }
    .section-article .desc-article button {
      border-radius: 30px;
      border-color: #4A6080;
      font-size: 10px;
      color: #17345F;
      text-transform: capitalize;
      margin-bottom: 10px;
      font-weight: 600; }
  .section-article .swiper-slide {
    max-width: 200px;
    border-radius: 5px;
    overflow: hidden; }

.section-signup, .section-signin {
  position: relative;
  color: #FFF;
  margin-top: 0; }
  .section-signup .MuiButton-contained.Mui-disabled, .section-signin .MuiButton-contained.Mui-disabled {
    background-color: rgba(255, 255, 255, 0.12) !important; }
  .section-signup .signup-top .signup-register, .section-signin .signup-top .signup-register {
    display: flex;
    flex-wrap: wrap; }
    .section-signup .signup-top .signup-register p, .section-signin .signup-top .signup-register p {
      position: absolute;
      font-size: 12px;
      right: 0;
      top: 5px; }
  .section-signup .dont-have-account, .section-signin .dont-have-account {
    justify-content: center;
    display: grid;
    padding: 20px 0px 20px 0px;
    margin: 0px -15px 0px -15px; }
  .section-signup .login-with, .section-signin .login-with {
    justify-content: center;
    display: grid;
    padding: 10px 0px 0px 0px; }
  .section-signup .signup-background, .section-signin .signup-background {
    background-image: linear-gradient(to bottom right, #FF5959 55%, #FF7E53);
    height: calc(100vh + 83px);
    width: 480px;
    left: 50%;
    right: 50%;
    position: fixed;
    z-index: 0;
    top: -75px;
    transform: translate(-50%, 0); }
  .section-signup form, .section-signup .signup-top, .section-signup div, .section-signin form, .section-signin .signup-top, .section-signin div {
    z-index: 2;
    position: relative; }
  .section-signup h2, .section-signin h2 {
    color: inherit;
    font-family: inherit;
    font-weight: 400;
    font-size: 24px;
    margin: 16px 0 0; }
  .section-signup h3, .section-signin h3 {
    color: inherit;
    font-weight: 400;
    font-size: 14px;
    margin: 0px 0 10px;
    line-height: 23px;
    padding-right: 20%; }
  .section-signup .signup-back, .section-signin .signup-back {
    position: absolute;
    top: -50px;
    left: -5px;
    z-index: 2;
    width: 32px;
    height: 30px;
    padding: 0;
    color: #FFF; }
    .section-signup .signup-back img, .section-signin .signup-back img {
      width: 100%; }
  .section-signup .signup-toplink, .section-signin .signup-toplink {
    color: white;
    cursor: default;
    text-decoration: none;
    position: initial;
    font-size: 14px;
    right: 0px;
    top: -40px;
    font-weight: 400; }
    .section-signup .signup-toplink span, .section-signin .signup-toplink span {
      color: #FFEE24;
      border-bottom: solid 1px;
      margin-left: 5px;
      font-weight: 700;
      cursor: pointer; }
  .section-signup .signin-input p, .section-signin .signin-input p {
    color: yellow; }
  .section-signup .signup-text, .section-signin .signup-text {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px; }
    .section-signup .signup-text p, .section-signin .signup-text p {
      width: 150px; }
    .section-signup .signup-text div, .section-signin .signup-text div {
      flex: 1 1 auto; }
    .section-signup .signup-text div::before, .section-signin .signup-text div::before {
      border-bottom: solid 1px;
      position: absolute;
      width: 100%;
      left: 0;
      top: 12px;
      content: " "; }
  .section-signup .signup-bot .signup-icon, .section-signin .signup-bot .signup-icon {
    margin-top: 20px; }
    .section-signup .signup-bot .signup-icon img, .section-signin .signup-bot .signup-icon img {
      margin: 0 15px; }
    .section-signup .signup-bot .signup-icon span, .section-signin .signup-bot .signup-icon span {
      color: #FFF;
      display: block;
      font-size: 12px;
      font-weight: 300;
      margin-bottom: 20px; }
  .section-signup .signup-bot span, .section-signin .signup-bot span {
    font-weight: 300;
    font-size: 12px;
    position: relative;
    margin-top: 15px;
    display: block; }
  .section-signup .signup-bot .signup-line, .section-signin .signup-bot .signup-line {
    width: 100%;
    font-size: 12px;
    padding-top: 3px; }
  .section-signup .signup-bar, .section-signin .signup-bar {
    display: flex;
    cursor: default;
    background: rgba(255, 255, 255, 0.2);
    color: #FFF;
    justify-content: space-between;
    padding: 20px 15px;
    margin: 20px 0 0;
    font-size: 12px;
    border-top: 1px solid;
    font-weight: 400;
    position: fixed;
    bottom: 0;
    width: calc(100% - 30px);
    max-width: calc(480px - 30px);
    transform: translate(-50%, 0);
    left: 50%;
    right: 50%; }
    .section-signup .signup-bar p span, .section-signin .signup-bar p span {
      font-weight: 700;
      color: yellow;
      margin-left: 5px;
      cursor: pointer; }
  .section-signup .signup-form, .section-signin .signup-form {
    margin-top: 48px; }
    .section-signup .signup-form .signup-formcheck, .section-signin .signup-form .signup-formcheck {
      margin: 10px 0 30px;
      display: flex; }
      .section-signup .signup-form .signup-formcheck p, .section-signin .signup-form .signup-formcheck p {
        font-size: 12px;
        font-weight: 400; }
      .section-signup .signup-form .signup-formcheck .signup-div-check, .section-signin .signup-form .signup-formcheck .signup-div-check {
        background: #000;
        position: absolute;
        width: 16px;
        height: 18px;
        margin-left: 4px;
        margin-top: 4px;
        z-index: -50; }
      .section-signup .signup-form .signup-formcheck .signup-check, .section-signin .signup-form .signup-formcheck .signup-check {
        padding: 1px 0px; }
      .section-signup .signup-form .signup-formcheck .color-link, .section-signin .signup-form .signup-formcheck .color-link {
        color: yellow; }
    .section-signup .signup-form div, .section-signin .signup-form div {
      position: relative; }
      .section-signup .signup-form div div div, .section-signin .signup-form div div div {
        margin-bottom: 20px; }
      .section-signup .signup-form div input, .section-signin .signup-form div input {
        padding-left: 30px;
        padding-bottom: 10px;
        color: #FFF;
        padding-top: 20px; }
      .section-signup .signup-form div img, .section-signin .signup-form div img {
        top: 15px;
        position: absolute; }
      .section-signup .signup-form div .img-warning, .section-signin .signup-form div .img-warning {
        right: 8px; }
      .section-signup .signup-form div .input-warning, .section-signin .signup-form div .input-warning {
        padding-right: 35px;
        margin-bottom: 10px; }
      .section-signup .signup-form div .p-warning, .section-signin .signup-form div .p-warning {
        color: #FFEE24;
        font-family: inherit;
        font-size: 12px;
        font-weight: 400;
        bottom: -10px; }
      .section-signup .signup-form div .signup-pass, .section-signin .signup-form div .signup-pass {
        top: 10px; }
        .section-signup .signup-form div .signup-pass img, .section-signin .signup-form div .signup-pass img {
          position: relative;
          top: unset; }
      .section-signup .signup-form div p, .section-signin .signup-form div p {
        font-size: 12px;
        font-weight: 400;
        position: absolute;
        left: 30px; }
      .section-signup .signup-form div div div::before, .section-signin .signup-form div div div::before {
        border-bottom: 1px solid #FFF; }
      .section-signup .signup-form div div div p, .section-signin .signup-form div div div p {
        bottom: -5px; }
      .section-signup .signup-form div button, .section-signin .signup-form div button {
        color: #FFF; }
    .section-signup .signup-form .recaptcha-signup, .section-signin .signup-form .recaptcha-signup {
      display: flex;
      justify-content: center; }
    .section-signup .signup-form .signup-button, .section-signin .signup-form .signup-button {
      position: relative;
      margin-top: 0px; }
      .section-signup .signup-form .signup-button div, .section-signin .signup-form .signup-button div {
        width: 100%;
        height: 100%;
        background: #F3F3F3;
        position: absolute;
        z-index: 0;
        opacity: .3;
        border-radius: 7px; }
      .section-signup .signup-form .signup-button button, .section-signin .signup-form .signup-button button {
        text-transform: capitalize;
        width: 100%;
        padding: 13px 0;
        box-shadow: unset;
        font-weight: 400;
        color: #FF5959;
        margin-top: 10px; }
      .section-signup .signup-form .signup-button .MuiButtonBase-root .MuiButton-label, .section-signin .signup-form .signup-button .MuiButtonBase-root .MuiButton-label {
        pointer-events: none; }
    .section-signup .signup-form .signup-button2, .section-signin .signup-form .signup-button2 {
      position: relative;
      margin-top: 0px; }
      .section-signup .signup-form .signup-button2 div, .section-signin .signup-form .signup-button2 div {
        width: 100%;
        height: 100%;
        background: #F3F3F3;
        position: absolute;
        z-index: 0;
        opacity: .3;
        border-radius: 7px; }
      .section-signup .signup-form .signup-button2 button, .section-signin .signup-form .signup-button2 button {
        text-transform: capitalize;
        width: 100%;
        padding: 13px 0;
        box-shadow: unset;
        font-weight: 300;
        margin-top: 10px;
        color: red; }
        .section-signup .signup-form .signup-button2 button span, .section-signin .signup-form .signup-button2 button span {
          color: inherit; }
      .section-signup .signup-form .signup-button2 .MuiButton-disabled-337, .section-signup .signup-form .signup-button2 .MuiButton-disabled-523, .section-signup .signup-form .signup-button2 .MuiButton-disabled-709, .section-signup .signup-form .signup-button2 .MuiButton-disabled-729,
      .section-signup .signup-form .signup-button2 .MuiButton-disabled-895, .section-signup .signup-form .signup-button2 .MuiButton-disabled-925, .section-signup .signup-form .signup-button2 .MuiButton-disabled-1081, .section-signin .signup-form .signup-button2 .MuiButton-disabled-337, .section-signin .signup-form .signup-button2 .MuiButton-disabled-523, .section-signin .signup-form .signup-button2 .MuiButton-disabled-709, .section-signin .signup-form .signup-button2 .MuiButton-disabled-729,
      .section-signin .signup-form .signup-button2 .MuiButton-disabled-895, .section-signin .signup-form .signup-button2 .MuiButton-disabled-925, .section-signin .signup-form .signup-button2 .MuiButton-disabled-1081 {
        color: white !important; }
  .section-signup .mt-min-15px, .section-signin .mt-min-15px {
    margin-top: 33px; }
  .section-signup .forgot-form div p, .section-signin .forgot-form div p {
    left: 0; }
  .section-signup .forgot-form div input, .section-signin .forgot-form div input {
    padding-left: 0; }
  .section-signup .signup-guest, .section-signin .signup-guest {
    border-top: solid 1px #FFF;
    margin-top: 10px;
    padding-top: 10px; }
    .section-signup .signup-guest span, .section-signin .signup-guest span {
      margin-left: 5px;
      color: yellow;
      display: inline-block; }
  .section-signup .verification-form, .section-signin .verification-form {
    margin-top: 20px;
    position: relative; }
    .section-signup .verification-form input, .section-signin .verification-form input {
      padding-left: 30px;
      padding-bottom: 10px;
      color: white;
      padding-top: 20px;
      background: none;
      border: none;
      border-bottom: solid 1px white;
      position: relative; }
    .section-signup .verification-form .verification-bottom p, .section-signin .verification-form .verification-bottom p {
      position: relative;
      left: 0;
      font-size: 13px;
      font-weight: 300; }
    .section-signup .verification-form .verification-bottom span, .section-signin .verification-form .verification-bottom span {
      color: yellow;
      font-size: 13px;
      font-weight: 300;
      display: inline-block;
      margin-bottom: 10px; }
    .section-signup .verification-form .verification-bottom .verification-link, .section-signin .verification-form .verification-bottom .verification-link {
      border-bottom: solid 1px; }
    .section-signup .verification-form .verification-bottom .verification-error, .section-signin .verification-form .verification-bottom .verification-error {
      color: #FFEE24; }
    .section-signup .verification-form .verification-bottom .verification-error-link:hover, .section-signin .verification-form .verification-bottom .verification-error-link:hover {
      cursor: pointer; }
    .section-signup .verification-form .verification-error-icon, .section-signin .verification-form .verification-error-icon {
      position: absolute;
      left: 90%;
      top: 23%;
      color: #FFEE24; }
    .section-signup .verification-form .verification-otp, .section-signin .verification-form .verification-otp {
      width: 95%;
      margin: 10px auto 0; }
      .section-signup .verification-form .verification-otp div, .section-signin .verification-form .verification-otp div {
        width: 25%;
        justify-content: center; }
        .section-signup .verification-form .verification-otp div input, .section-signin .verification-form .verification-otp div input {
          background: rgba(255, 255, 255, 0.3);
          border-radius: 5px;
          border-bottom: unset;
          padding: 0;
          height: 50px;
          width: 50px !important;
          font-size: 18px; }

.section-half {
  background-color: rgba(0, 0, 0, 0.7); }
  .section-half div {
    background: unset;
    overflow: hidden;
    max-height: 544px; }
    .section-half div div {
      overflow: unset; }
  .section-half .half-curve {
    padding: 15px 15px 0; }
  .section-half .signup-background {
    border-radius: 15px 15px 0 0; }

.section-profile {
  margin-bottom: 0px; }
  .section-profile h2 {
    margin: 20px 0 10px;
    color: #17345F;
    font-weight: 600;
    font-size: 16px; }
  .section-profile .credit-base {
    margin-bottom: 0px; }
  .section-profile .disable {
    opacity: 50%; }
  .section-profile ul li {
    color: #707070;
    display: flex;
    justify-content: space-between;
    position: relative;
    font-size: 14px; }
    .section-profile ul li img {
      margin-right: 10px; }
    .section-profile ul li p {
      flex-grow: 1; }
  .section-profile ul li::after {
    border-bottom: solid 1px #F3F3F3;
    position: absolute;
    content: " ";
    width: 90%;
    bottom: 0;
    left: 5%; }
  .section-profile ul::after {
    border-bottom: solid 2px #FFF;
    position: absolute;
    content: " ";
    width: 90%;
    bottom: 8px;
    left: 5%; }
  .section-profile .profile-background {
    position: absolute;
    width: 100%;
    max-width: 480px;
    min-height: 200px;
    max-height: 200px;
    transform: translate(-50%, -50%);
    left: 50%;
    right: 50%;
    top: 75px; }
  .section-profile .profile-base {
    padding: 15px;
    position: relative;
    margin-top: 40px; }
  .section-profile .profile-basep {
    padding: 0px 25px 25px;
    position: relative;
    margin-top: 40px; }
    .section-profile .profile-basep .empty__title {
      font-weight: 700;
      font-size: 12px;
      color: #17345F;
      margin-bottom: 8px;
      margin-top: 0px;
      padding: 0px 10%; }
    .section-profile .profile-basep .empty__title-profile {
      font-weight: 700;
      font-size: 14px;
      color: #17345F;
      margin-bottom: 8px;
      margin-top: -35px;
      padding: 0px 10%; }
    .section-profile .profile-basep .empty__desc {
      font-size: 12px;
      font-weight: 400;
      color: #4A6080;
      margin-bottom: 16px;
      padding: 0px 10%; }
    .section-profile .profile-basep .empty__animation {
      text-align: center;
      width: 100%; }
      .section-profile .profile-basep .empty__animation svg {
        max-width: 290px; }
      .section-profile .profile-basep .empty__animation button {
        background: #FF5959;
        color: #FFF;
        border: unset;
        margin: 0 auto;
        width: calc(50% - 20px);
        height: 44px;
        padding: 15px 0;
        text-transform: capitalize;
        font-size: 14px;
        font-weight: 500; }
      .section-profile .profile-basep .empty__animation .register {
        background: #FFF;
        color: #FF5959;
        border: 1.5px solid #FF5959;
        right: 10px;
        box-shadow: 0px 1px 5px 0px rgba(236, 65, 65, 0.2), 0px 2px 2px 0px rgba(236, 65, 65, 0.2), 0px 3px 1px -2px rgba(236, 65, 65, 0.2); }
      .section-profile .profile-basep .empty__animation .register:hover {
        background: #f3eded; }
      .section-profile .profile-basep .empty__animation .signin {
        left: 10px;
        box-shadow: 0px 1px 5px 0px rgba(236, 65, 65, 0.2), 0px 2px 2px 0px rgba(236, 65, 65, 0.2), 0px 3px 1px -2px rgba(236, 65, 65, 0.2); }
      .section-profile .profile-basep .empty__animation .signin:hover {
        background: #ef5350; }
  .section-profile .profile-name {
    color: #17345F;
    margin: 0;
    font-size: 26px; }
  .section-profile .profile-name-p {
    padding-top: 25px; }
  .section-profile .profile-desc {
    color: #3986E0;
    font-size: 12px;
    cursor: pointer; }
  .section-profile .profile-image {
    transform: translate(-50%, -50%);
    top: 0px;
    width: 110px;
    position: absolute; }
  .section-profile .profile-back {
    position: absolute;
    z-index: 2;
    color: #fff;
    top: 20px;
    cursor: pointer; }
  .section-profile .profile-version {
    margin-top: 31px;
    margin-bottom: 20px; }
    .section-profile .profile-version p {
      color: #B1B1B1;
      font-size: 10px; }
  .section-profile .profile-version-bottom {
    position: absolute;
    width: 300px;
    bottom: 0px;
    right: 25%;
    left: 50%;
    margin-left: -150px;
    margin-bottom: 8px; }
  .section-profile .section-iso-kominfo {
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
    margin-top: -8px;
    pointer: cursor; }
    .section-profile .section-iso-kominfo .icon-iso {
      margin-right: 10px; }
    .section-profile .section-iso-kominfo .border-line {
      border-right: 1px solid #B7B7B7;
      height: 16px;
      margin-top: 3px; }
    .section-profile .section-iso-kominfo .icon-kominfo {
      margin-left: 10px; }
  .section-profile .icon-pencil {
    margin-top: -32px;
    margin-left: 16px;
    position: absolute; }
  .section-profile .profile-menu {
    margin-top: 12px;
    margin-bottom: 12px;
    cursor: pointer;
    color: #4A6080; }
  .section-profile .title-detail-help {
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    cursor: text; }
  .section-profile .detail-content-help {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    cursor: text; }
    .section-profile .detail-content-help ol {
      list-style-type: decimal; }
      .section-profile .detail-content-help ol li {
        display: list-item;
        margin-bottom: 12px;
        color: #4A6080;
        padding-left: 10px; }
      .section-profile .detail-content-help ol li::after {
        border: none; }
  .section-profile .icon-new {
    padding: 2px 5px;
    margin: 2px 4px;
    background: yellow;
    border-radius: 27px;
    font-size: 8px;
    font-weight: 400;
    color: #17345F;
    max-height: 14px;
    max-width: 27px; }
  .section-profile .profile-chevron-right {
    color: #17345F; }
  .section-profile .section-reward-title {
    font-weight: 600;
    font-size: 14px;
    color: #17345F;
    margin-left: 10px; }
  .section-profile .section-reward-desc {
    font-weight: 400;
    font-size: 12px;
    color: #4A6080; }

.section-forgot .forgot-top h2 {
  margin-bottom: 10px;
  font-size: 19px; }

.section-forgot .forgot-top p {
  font-weight: 300;
  font-size: 12px;
  width: 80%; }

.section-forgot .forgot-bottom {
  margin-top: 15px;
  cursor: default; }
  .section-forgot .forgot-bottom p {
    font-size: 14px;
    text-align: center; }

.section-forgot .reset-password-bottom {
  margin-top: 15px; }
  .section-forgot .reset-password-bottom p {
    display: inline;
    font-size: 14px;
    text-align: center; }
  .section-forgot .reset-password-bottom span {
    cursor: pointer;
    display: inline;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    margin-left: 15px;
    text-decoration: underline; }

.section-category {
  font-family: inherit;
  margin: 0px -15px; }
  .section-category ::-webkit-scrollbar {
    width: 0px; }
  .section-category .category-active {
    color: #FFF;
    font-weight: 700; }
  .section-category .category-base {
    overflow: auto;
    white-space: nowrap;
    padding: 15px 10px 5px; }
    .section-category .category-base div {
      border-radius: 20px;
      border: solid 1px;
      font-size: 10px;
      width: 95px;
      margin: 0 5px;
      text-align: center;
      padding: 10px 0;
      display: inline-block; }
    .section-category .category-base div:nth-child(1) {
      border-color: #69DE6F; }
    .section-category .category-base div:nth-child(2) {
      border-color: #69B1DE; }
    .section-category .category-base div:nth-child(3) {
      border-color: #AC69DE; }
    .section-category .category-base div:nth-child(4) {
      border-color: #FF3444; }
    .section-category .category-base .category-active:nth-child(1) {
      background: #69DE6F; }
    .section-category .category-base .category-active:nth-child(2) {
      background: #69B1DE; }
    .section-category .category-base .category-active:nth-child(3) {
      background: #AC69DE; }
    .section-category .category-base .category-active:nth-child(4) {
      background: #FF3444; }

.section-snackbar .snackbar-body {
  top: 0;
  bottom: unset;
  left: 0;
  right: 0;
  transform: unset; }
  .section-snackbar .snackbar-body .MuiSnackbarContent-root {
    color: #FFF;
    background: linear-gradient(180deg, #64BD68, #7BC958);
    justify-content: center;
    box-shadow: unset;
    border-radius: 0;
    padding: 9.5px 0;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    width: 100%;
    text-align: center; }

.section-snackbar .error-snackbar .MuiSnackbarContent-root {
  background: linear-gradient(180deg, #FF514D 0%, #FF7355 100%);
  opacity: 100%; }

.section-loading {
  position: fixed;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.75);
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  z-index: 10000; }
  .section-loading svg {
    max-width: 130px; }
  .section-loading div p {
    font-size: 16px;
    color: #FFF;
    margin-top: 10px;
    font-family: inherit; }

.section-highlight-background {
  position: fixed;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.75);
  opacity: 70%;
  height: 100vh;
  width: 100vw;
  flex-wrap: wrap;
  z-index: 16; }

.close-popup-banner {
  float: right; }

.count-down-register {
  position: relative;
  float: right; }
  .count-down-register .time-section {
    display: flex;
    margin: -14px 20px 0px 0px; }

.section-empty {
  height: 100vh;
  align-items: center;
  display: flex;
  justify-content: center;
  position: fixed;
  top: 50%;
  left: 50%;
  right: 50%;
  width: 100%;
  max-width: 480px;
  transform: translate(-50%, -50%); }
  .section-empty .empty__animation {
    text-align: center;
    margin-top: -70px;
    width: 100%; }
    .section-empty .empty__animation svg {
      max-width: 290px; }
  .section-empty .empty__title {
    font-weight: 600;
    font-size: 16px;
    color: #17345F;
    margin-bottom: 10px;
    margin-top: -39px;
    padding: 0px 10%; }
  .section-empty .empty__title-trans {
    font-weight: 600;
    font-size: 16px;
    color: #17345F;
    margin-bottom: 10px;
    margin-top: -5px;
    padding: 0px 10%; }
  .section-empty .empty__desc {
    font-size: 14px;
    font-weight: 400;
    color: #4A6080;
    margin-bottom: 20px;
    padding: 0px 10%; }
  .section-empty button {
    background: #FF5959;
    color: #FFF;
    border: unset;
    margin: 0 auto;
    width: calc(100% - 40px);
    padding: 15px 0;
    text-transform: capitalize;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit; }
  .section-empty button:hover {
    background: #ef5350; }

.section-google-play-desc {
  margin-top: 16px; }
  .section-google-play-desc .paper {
    padding: 16px; }
  .section-google-play-desc .img {
    margin-bottom: 18px; }
  .section-google-play-desc .div {
    margin-bottom: 16px; }
  .section-google-play-desc .title {
    color: #707070;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px; }
  .section-google-play-desc .desc {
    color: #707070;
    font-size: 12px; }
  .section-google-play-desc u {
    color: #3CADFF; }
  .section-google-play-desc .tnc-text-header {
    margin-top: -8px; }
  .section-google-play-desc .expansion-summary {
    height: 56px;
    min-height: 56px;
    padding-left: 16px;
    padding-right: 16px; }
  .section-google-play-desc .expansion-details {
    padding-left: 16px;
    padding-right: 16px; }
  .section-google-play-desc ol {
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 1em;
    padding-right: 1em;
    margin-block-start: 0px;
    margin-block-end: 0px; }
  .section-google-play-desc li {
    margin-bottom: 12px; }
  .section-google-play-desc .MuiButton-contained:hover {
    background-color: #F6F7F9;
    color: #FF4D4D; }
  .section-google-play-desc .back-button {
    background: #F6F7F9;
    box-shadow: unset;
    border-radius: 0;
    text-transform: capitalize;
    padding: 13px 0;
    color: #FF4D4D;
    font-size: 12px;
    border: solid 1px; }
  .section-google-play-desc .link-detail {
    cursor: pointer; }
  .section-google-play-desc .chevron-down {
    color: #333333; }

.section-empty2 .empty__base {
  text-align: center;
  padding: 10px 10%; }

.section-empty2 .empty__image {
  margin: auto;
  display: block;
  margin-top: 30px; }

.section-empty2 .empty__img-refund {
  margin-top: 30px; }

.section-empty2 .empty__title {
  font-weight: 600;
  font-size: 14px;
  color: #17345F;
  margin-bottom: 10px;
  margin-top: -39px; }

.section-empty2 .empty__title-trans {
  font-weight: 600 !important;
  font-size: 16px !important;
  color: #17345F !important;
  margin-bottom: 6px;
  margin-top: 28px; }

.section-empty2 .empty__desc {
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #4A6080 !important;
  margin-bottom: 12px; }
  .section-empty2 .empty__desc .txt-bold {
    font-weight: 600 !important; }

.section-empty2 .empty__descsb {
  font-size: 14px;
  font-weight: 600;
  color: #4A6080; }

.section-empty2 .empty__label-nominal {
  display: flex;
  border-bottom: 1px solid #E8EBEF;
  width: 100%;
  margin: 0px 0px 0px -26px;
  padding: 10px 48px 10px 0px; }
  .section-empty2 .empty__label-nominal h2 {
    margin: 3px 0px 0px 0px; }
  .section-empty2 .empty__label-nominal img {
    max-height: 40px;
    max-width: 60px; }

.section-empty2 .empty__img-center {
  display: flex;
  justify-content: center;
  margin-top: 30px; }

.section-empty2 .img-maintenance {
  max-height: 180px;
  width: auto; }

.section-empty2 button {
  background: #FF5959;
  color: #FFF;
  border: unset;
  margin: 0 auto;
  width: 100%;
  padding: 15px 0;
  text-transform: capitalize;
  font-size: 16px;
  font-weight: 600;
  font-family: inherit; }

.section-empty2 button:hover {
  background: #FF5959; }

.section-help {
  margin-bottom: 8px; }
  .section-help .title {
    color: #4A6080;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px; }
  .section-help .div-wrapper-content {
    border-top: solid 0.5px rgba(51, 51, 51, 0.15);
    padding-top: 8px; }
  .section-help .div-content {
    margin-bottom: 24px; }
  .section-help .title-content {
    color: #4A6080;
    font-size: 13px;
    font-weight: 600; }
  .section-help .content {
    color: #4A6080;
    font-size: 13px; }
  .section-help u {
    color: #3CADFF; }
    .section-help u a {
      color: #3CADFF; }
  .section-help .expansion-summary {
    padding-left: 16px;
    padding-right: 16px; }
  .section-help .expansion-details {
    padding-left: 16px;
    padding-right: 16px; }
  .section-help li {
    margin-bottom: 12px; }
  .section-help .chevron-down {
    color: #17345F; }
  .section-help .MuiExpansionPanelDetails-root {
    padding: 0px 16px 16px; }
  .section-help .MuiExpansionPanelSummary-content {
    margin: 20px 0px; }
  .section-help .section-privacy {
    padding: 16px;
    border: 1px solid #EFEFEF;
    box-shadow: none; }

.section-pengaduan-layanan {
  background: #ffff;
  margin-top: 24px;
  Padding: 16px 14px 16px 14px;
  font-size: 14px;
  color: #4A6080;
  border-radius: 4px;
  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  border: 1px solid #EFEFEF; }
  .section-pengaduan-layanan p, .section-pengaduan-layanan a {
    line-height: 18px;
    margin: 5px 0px; }
  .section-pengaduan-layanan .line-bottom {
    border-bottom: 1px solid #EBEBEB;
    padding-bottom: 16px;
    margin-bottom: 16px; }
  .section-pengaduan-layanan .text-icon {
    display: flex;
    column-gap: 5px;
    align-items: center; }
  .section-pengaduan-layanan .text-red {
    color: #FF5959 !important; }

.section-customer-care {
  font-family: inherit; }
  .section-customer-care .section-paper {
    display: flex;
    margin-top: 5px;
    cursor: pointer; }
  .section-customer-care .section-title {
    justify-content: center;
    display: flex;
    font-size: 14px;
    margin: 21px 0px 11px 0px;
    color: #4A6080; }
  .section-customer-care .section-logo {
    background-color: #F14545;
    width: 16%;
    justify-content: center;
    display: flex;
    padding: 8px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px; }
  .section-customer-care .section-wording {
    background: #FF5959;
    justify-content: center;
    align-items: center;
    display: flex;
    padding: 8px;
    width: 84%;
    color: white;
    font-size: 16px;
    font-weight: 600;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px; }

.section-internal-link {
  color: #17345F;
  font-weight: 600; }
  .section-internal-link .intro {
    font-size: 14px;
    margin-bottom: 15px;
    margin-top: 15px;
    font-weight: 700; }
  .section-internal-link .section-main-content {
    padding-left: 16px;
    padding-right: 16px;
    display: inline-block;
    border: none !important; }
    .section-internal-link .section-main-content .main-content {
      height: 77px;
      overflow: hidden;
      color: #4A6080;
      font-size: 14px;
      font-weight: 400;
      margin-bottom: 20px; }
    .section-internal-link .section-main-content .read-more-link {
      position: absolute;
      bottom: 0;
      right: 0;
      display: block;
      width: 100%;
      height: 35px;
      text-align: center;
      font-size: 16px;
      padding-top: 80px;
      background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), white);
      cursor: pointer; }
  .section-internal-link .title-main {
    height: 30px;
    margin-bottom: 7px !important;
    display: flex;
    align-items: center; }
  .section-internal-link .title {
    font-size: 14px;
    margin-bottom: 4px;
    color: #4A6080; }
  .section-internal-link .div-wrapper-content {
    border-top: solid 0.5px rgba(51, 51, 51, 0.15);
    padding-top: 8px; }
  .section-internal-link .div-content {
    margin-bottom: 24px; }
  .section-internal-link .content {
    color: #4A6080;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px; }
    .section-internal-link .content ol {
      margin-left: -25px; }
  .section-internal-link .bullet {
    list-style-type: disc; }
  .section-internal-link .font-bold {
    font-weight: 700 !important; }
  .section-internal-link .expand-less {
    justify-content: center;
    display: flex;
    margin-bottom: 0px;
    margin-top: 7px; }
  .section-internal-link u {
    color: #3CADFF; }
  .section-internal-link .expansion-summary {
    height: 60px;
    min-height: 60px;
    padding-left: 16px;
    padding-right: 16px; }
  .section-internal-link .border-section {
    border-top: solid 0.5px rgba(51, 51, 51, 0.15); }
  .section-internal-link .expansion-details {
    padding-left: 0px !important;
    padding-right: 0px !important;
    margin-left: 16px;
    margin-right: 16px; }
  .section-internal-link li {
    margin-bottom: 12px; }
  .section-internal-link .chevron-down {
    color: #4A6080; }
  .section-internal-link .MuiExpansionPanelDetails-root {
    padding: 0px 16px 16px; }
  .section-internal-link .MuiExpansionPanel-root:before {
    background-color: white; }

.homepage {
  position: relative; }

.background {
  position: absolute;
  z-index: 0;
  left: -15px;
  top: -20px;
  width: calc(100% + 30px); }

.section-trx-history-status {
  font-family: inherit;
  margin: 0px -15px;
  height: 54px;
  max-height: 54px;
  background: #ffffff; }
  .section-trx-history-status ::-webkit-scrollbar {
    width: 0px; }
  .section-trx-history-status .status-active {
    color: #FFF;
    font-weight: 700; }
  .section-trx-history-status .status-base {
    overflow: auto;
    white-space: nowrap;
    padding: 13px 16px 11px; }
    .section-trx-history-status .status-base div {
      border-radius: 20px;
      border: solid 1px #8B99AF;
      color: #4A6080;
      font-size: 10px;
      margin-right: 6px;
      padding: 8px 16px !important;
      text-align: center;
      padding: 7px 0;
      display: inline-block;
      cursor: pointer; }
    .section-trx-history-status .status-base .category-active {
      background: #FF5959;
      border-color: #FF5959;
      color: #FFF; }
    .section-trx-history-status .status-base .status-order {
      color: #4A6080;
      font-size: 10px;
      margin-right: 8px; }
      .section-trx-history-status .status-base .status-order u {
        color: #FF5959;
        cursor: pointer; }

.section-splash {
  background: #FFF;
  height: 100vh;
  position: fixed;
  width: 100%;
  left: 0;
  z-index: 12;
  -webkit-animation: fadeout 0.1s forwards;
  -moz-animation: fadeout 0.1s forwards;
  -ms-animation: fadeout 0.1s forwards;
  -o-animation: fadeout 0.1s forwards;
  animation: fadeout 0.1s forwards;
  -webkit-animation-delay: 0.3s;
  -moz-animation-delay: 0.3s;
  animation-delay: 0.3s; }
  .section-splash .img {
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    height: 110px;
    bottom: 50%;
    top: 50%; }

.section-empty-anon {
  height: 100vh;
  align-items: center;
  display: flex;
  justify-content: center;
  position: fixed;
  top: 50%;
  left: 50%;
  right: 50%;
  width: 100%;
  max-width: 480px;
  transform: translate(-50%, -50%); }
  .section-empty-anon .empty__animation {
    text-align: center;
    margin-top: -70px;
    width: 100%; }
    .section-empty-anon .empty__animation svg {
      max-width: 290px; }
  .section-empty-anon .empty__title {
    font-weight: 700;
    font-size: 14px;
    color: #17345F;
    margin-bottom: 8px;
    margin-top: 0px;
    padding: 0px 10%; }
  .section-empty-anon .empty__title-profile {
    font-weight: 700;
    font-size: 14px;
    color: #17345F;
    margin-bottom: 8px;
    margin-top: -35px;
    padding: 0px 10%; }
  .section-empty-anon .empty__desc {
    font-size: 12px;
    font-weight: 400;
    color: #4A6080;
    margin-bottom: 16px;
    padding: 0px 10%; }
  .section-empty-anon button {
    background: #FF5959;
    color: #FFF;
    border: unset;
    margin: 0 auto;
    width: calc(100% - 40px);
    padding: 15px 0;
    text-transform: capitalize;
    font-size: 14px;
    font-weight: 500; }
  .section-empty-anon button:hover {
    background: #ef5350; }

.section-sepulsa-berkah .grid-calculator {
  padding: 16px; }
  .section-sepulsa-berkah .grid-calculator .txt-info {
    color: #707070;
    font-size: 12px; }
  .section-sepulsa-berkah .grid-calculator .grid-button-calculator {
    text-align: right; }
    .section-sepulsa-berkah .grid-calculator .grid-button-calculator .MuiButton-root span, .section-sepulsa-berkah .grid-calculator .grid-button-calculator .MuiButtonBase-root span {
      font-family: inherit; }
    .section-sepulsa-berkah .grid-calculator .grid-button-calculator .MuiButton-contained:hover {
      background-color: #FFF;
      color: #FF4D4D; }
    .section-sepulsa-berkah .grid-calculator .grid-button-calculator .calculator-button {
      background: #FFF;
      box-shadow: unset;
      border-radius: 5px;
      color: #FF5959;
      font-size: 10px;
      font-weight: 500;
      border: solid 1px; }

.section-sepulsa-berkah .total-calculation {
  background: #FFF0F0;
  padding: 8px 16px; }
  .section-sepulsa-berkah .total-calculation .txt-total {
    color: #17345F;
    font-size: 10px;
    font-weight: 600; }
  .section-sepulsa-berkah .total-calculation .txt-total-value {
    color: #FF5959;
    font-size: 14px;
    font-weight: 600;
    margin-top: 4px; }

.section-zakat-profesi-confirmation {
  height: 100vh;
  align-items: center;
  display: flex;
  justify-content: center;
  position: fixed;
  top: 40%;
  left: 50%;
  right: 50%;
  width: 100%;
  max-width: 480px;
  transform: translate(-50%, -50%); }
  .section-zakat-profesi-confirmation .confirmation {
    text-align: center; }
    .section-zakat-profesi-confirmation .confirmation .title {
      font-weight: 600;
      font-size: 14px;
      color: #262626;
      margin-bottom: 20px;
      margin-top: 25px;
      padding: 0px 10%; }
    .section-zakat-profesi-confirmation .confirmation .desc {
      font-size: 14px;
      color: #707070;
      padding: 0px 10%; }

.section-zakat-profesi-confirmation-chb .div-checkbox {
  align-items: center;
  display: flex;
  position: absolute;
  bottom: 138px; }
  .section-zakat-profesi-confirmation-chb .div-checkbox .chb {
    padding: 1px 0px; }
  .section-zakat-profesi-confirmation-chb .div-checkbox .txt {
    color: #333333;
    font-size: 12px;
    margin-left: 7px; }

.section-reset-password-info {
  height: 100vh;
  align-items: center;
  display: flex;
  justify-content: center;
  position: fixed;
  top: 50%;
  left: 50%;
  right: 50%;
  width: 100%;
  max-width: 480px;
  transform: translate(-50%, -50%); }
  .section-reset-password-info .info {
    text-align: center; }
    .section-reset-password-info .info .title {
      font-weight: 600;
      font-size: 16px;
      color: #4A6080;
      margin-bottom: 6px;
      margin-top: 16px;
      padding: 0px 10%; }
    .section-reset-password-info .info .desc {
      font-size: 14px;
      color: #707070;
      padding: 0px 10%;
      margin-bottom: 16px; }
    .section-reset-password-info .info .btn-back {
      font-size: 14px;
      color: #FFF;
      background: #FF5959;
      width: 70%;
      padding: 13px 0;
      box-shadow: unset;
      font-weight: 500; }

.section-change-password {
  margin: 15px; }
  .section-change-password .img-change-password {
    display: block;
    margin-left: auto;
    margin-right: auto; }
  .section-change-password .text-contents {
    margin-top: 34px;
    margin-bottom: 5px;
    text-align: center; }
    .section-change-password .text-contents .text-content_title {
      font-size: 16px;
      font-weight: 600;
      line-height: 20px;
      color: #4A6080; }
    .section-change-password .text-contents .text-content__subtitle {
      font-size: 14px;
      font-weight: 400;
      line-height: 18px;
      margin-top: 10px; }

.list-verify-password {
  font-size: 10px;
  color: #B0B0B0;
  line-height: 18px;
  padding-left: 15px; }
  .list-verify-password .verify-active {
    color: #64BD68; }

.list-link-password {
  padding-left: 18px !important; }
  .list-link-password .ico-password-change {
    padding-right: 6px; }

.section-use-promo {
  background: #FFF0F0;
  color: #5F5F5F !important;
  font-size: 12px;
  padding: 4px 12px;
  width: 100%;
  border-radius: 5px;
  margin-top: -15px; }
  .section-use-promo .use-promo-link {
    color: #FF5959 !important;
    font-weight: 700;
    cursor: pointer; }

.drawer-signin {
  z-index: 9 !important; }
  .drawer-signin div:focus {
    outline: unset; }
  .drawer-signin .MuiDrawer-paper {
    max-width: calc(480px - 40px);
    margin: auto;
    padding: 40px 20px 30px;
    border-radius: 15px 15px 0px 0px;
    top: 70px;
    background-image: linear-gradient(to bottom right, #FF5959 55%, #FF7E53); }

.section-reset-password-info {
  height: 100vh;
  align-items: center;
  display: flex;
  justify-content: center;
  position: fixed;
  top: 50%;
  left: 50%;
  right: 50%;
  width: 100%;
  max-width: 480px;
  transform: translate(-50%, -50%); }
  .section-reset-password-info .info {
    text-align: center; }
    .section-reset-password-info .info .title {
      font-weight: 600;
      font-size: 16px;
      color: #4A6080;
      margin-bottom: 6px;
      margin-top: 16px;
      padding: 0px 10%; }
    .section-reset-password-info .info .desc {
      font-size: 14px;
      color: #707070;
      padding: 0px 10%;
      margin-bottom: 16px; }
    .section-reset-password-info .info .btn-back {
      font-size: 14px;
      color: #FFF;
      background: #FF5959;
      width: 70%;
      padding: 13px 0;
      box-shadow: unset;
      font-weight: 500; }

.extend-height-menu {
  height: calc(100vh + 750px); }

@keyframes fadeout {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }

/* Firefox < 16 */
@-moz-keyframes fadeout {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadeout {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }

/* Internet Explorer */
@-ms-keyframes fadeout {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }

/* Opera < 12.1 */
@-o-keyframes fadeout {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@media screen and (min-width: 480px) {
  body {
    max-width: 480px;
    margin: auto;
    background: #cecece;
    background-image: url("/static/homepage/background2.svg");
    background-size: auto;
    background-repeat: repeat; }
    body .headerNav .headerNav-bg {
      padding: 0; }
      body .headerNav .headerNav-bg div {
        padding: 0;
        margin: auto; }
    body .headerNav .header-chat {
      padding: 12px; }
    body .section-credit {
      margin-top: 40px;
      margin-top: 15px; }
  .background {
    left: -15px;
    top: -20px;
    width: calc(100% + 30px); }
  .MuiToolbar-regular {
    width: 480px;
    min-height: 54px !important;
    margin: auto; }
  .MuiBottomNavigationAction-root {
    padding: 5px 10px;
    max-width: 115px !important; } }

@media screen and (max-height: 590px) {
  .section-signup .signup-bar, .section-signin .signup-bar {
    position: absolute !important;
    width: 100%;
    bottom: auto; } }

@supports (-webkit-overflow-scrolling: touch) {
  .section-signup .signup-bar, .section-signin .signup-bar {
    margin-top: 50px; } }

.MuiInput-underline:before {
  border-bottom: 1px solid #8B99AF !important; }

.MuiInputBase-input ::placeholder {
  color: red; }

.MuiInputBase-root {
  font-family: inherit !important; }

.headertrans {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 15;
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.16);
  color: #17345F; }
  .headertrans .headertrans-bg {
    background: #FFF; }
    .headertrans .headertrans-bg .MuiIconButton-root .MuiIconButton-label {
      pointer-events: none; }
  .headertrans .headertrans-disable {
    opacity: 0;
    pointer-events: none; }
  .headertrans button {
    color: #FFF;
    margin: 0;
    font-family: inherit; }
    .headertrans button .header-badge span {
      background: #35357D;
      font-size: 11px;
      height: 18px;
      width: 18px;
      min-width: unset;
      font-weight: 300;
      top: 7px;
      left: 3px; }
  .headertrans h1 {
    color: #17345F;
    font-size: 16px;
    text-align: center;
    font-weight: 600; }

.header-card {
  max-width: 480px;
  left: 50%;
  right: 50%;
  transform: translate(-50%, 0px);
  min-height: 54px;
  background: #FFF; }

.header-card-content {
  display: flex;
  justify-content: space-between;
  min-height: 54px;
  align-items: center; }

.section-inputnum {
  margin-top: 16px; }
  .section-inputnum input:-webkit-autofill,
  .section-inputnum input:-webkit-autofill:hover,
  .section-inputnum input:-webkit-autofill:focus,
  .section-inputnum textarea:-webkit-autofill,
  .section-inputnum textarea:-webkit-autofill:hover,
  .section-inputnum textarea:-webkit-autofill:focus,
  .section-inputnum select:-webkit-autofill,
  .section-inputnum select:-webkit-autofill:hover,
  .section-inputnum select:-webkit-autofill:focus {
    border: unset;
    -webkit-text-fill-color: #17345F;
    -webkit-box-shadow: 0 0 0px 1000px rgba(255, 255, 255, 0) inset;
    transition: background-color 5000s ease-in-out 0s; }
  .section-inputnum .MuiSelect-select:focus {
    background: unset; }
  .section-inputnum .inputnum-base {
    padding: 15px 15px 20px; }
    .section-inputnum .inputnum-base p {
      color: #17345F;
      font-size: 10px; }
    .section-inputnum .inputnum-base input {
      font-size: 14px;
      font-family: inherit;
      font-weight: 600;
      color: #17345F; }
    .section-inputnum .inputnum-base .pb10 {
      padding-bottom: 10px !important; }
    .section-inputnum .inputnum-base .inputnum-title2 {
      font-size: 14px;
      font-weight: 700;
      margin-bottom: 5px; }
    .section-inputnum .inputnum-base .inputnum-clear {
      margin-right: -12px; }
    .section-inputnum .inputnum-base .icon-provider-field svg {
      max-height: 21px; }
    .section-inputnum .inputnum-base .denom ul {
      margin: 0;
      padding: 0; }
    .section-inputnum .inputnum-base .MuiInputBase-root {
      margin-bottom: 5px;
      font-family: inherit; }
    .section-inputnum .inputnum-base .MuiInputBase-input.Mui-disabled {
      color: #17345F;
      opacity: 50%; }
    .section-inputnum .inputnum-base .input-train .MuiInputBase-input.Mui-disabled {
      color: #17345F;
      opacity: 100%;
      -webkit-text-fill-color: #17345F; }
    .section-inputnum .inputnum-base .inputnum-alert {
      position: absolute;
      top: 19px;
      right: 20px; }
  .section-inputnum .flex-center-item {
    display: flex;
    align-items: center; }
  .section-inputnum .label-input-bus {
    display: flex;
    align-items: center;
    margin-left: 24px; }
  .section-inputnum .delete-reward {
    width: max-content;
    color: #FF5959 !important;
    margin-top: -31px; }
  .section-inputnum .inputnum-select {
    width: 100%;
    font-family: inherit; }
    .section-inputnum .inputnum-select div {
      padding: 1px 0;
      color: #4A6080 !important;
      font-size: 14px;
      font-weight: 600 !important;
      font-family: inherit; }
    .section-inputnum .inputnum-select div div:nth-child(3) div div {
      width: 95%;
      margin: auto;
      padding: 12px 10px 12px 40px; }
    .section-inputnum .inputnum-select div div:nth-child(3) div div:nth-last-child(1) {
      border-bottom: unset; }
    .section-inputnum .inputnum-select .inputnum-placeholder {
      color: #4A6080;
      opacity: 50%; }
    .section-inputnum .inputnum-select .css-1okebmr-indicatorSeparator {
      display: none; }
    .section-inputnum .inputnum-select .css-tj5bde-Svg {
      color: #17345F; }
  .section-inputnum .inputnum-menu .Mui-selected {
    background-color: #FFF; }
  .section-inputnum .inputnum-menu .MuiListItem-button {
    margin: 0;
    min-height: unset;
    font-family: inherit; }
  .section-inputnum .inputnum-menu .none:before {
    content: "";
    background: #EFEFEF;
    width: 18px;
    height: 18px;
    background-size: cover;
    position: absolute;
    left: 10px;
    border-radius: 50%; }
  .section-inputnum .inputnum-menu .inputnum-active:before {
    content: "";
    background: url("/static/transaction/icon-check-green.svg");
    width: 18px;
    height: 18px;
    background-size: cover;
    position: absolute;
    left: 10px; }
  .section-inputnum .inputnum-menu .inputnum-non-active:before {
    content: "";
    width: 16px;
    height: 16px;
    position: absolute;
    left: 10px;
    border: solid 1px #B0B0B0;
    border-radius: 50%; }
  .section-inputnum .inputnum-menu .inputnum-right {
    position: absolute;
    right: 15px; }
  .section-inputnum .inputnum-menu .inputnum-image {
    margin-right: 8px;
    width: 30px; }
  .section-inputnum .MuiInputBase-input p {
    font-size: 14px;
    font-family: inherit;
    font-weight: 600; }
  .section-inputnum .input-date .MuiGrid-container {
    display: grid; }
  .section-inputnum .input-date .MuiFormControl-root {
    width: 100%; }
  .section-inputnum .input-date .MuiInput-underline:after {
    border-bottom: 1px solid #8B99AF; }
  .section-inputnum button {
    display: contents;
    font-family: inherit; }
  .section-inputnum .txt-optional {
    color: #2196F3; }

.MuiPopover-paper ul li {
  font-size: 14px;
  padding-left: 50px;
  color: #919191;
  font-family: inherit;
  font-weight: 600; }

.MuiPopover-paper ul .MuiListItem-root.Mui-selected {
  background-color: unset;
  color: #17345F; }

.MuiPopover-paper ul .MuiListItem-root.Mui-selected::before {
  content: "";
  background: url("/static/transaction/icon-check-green.svg");
  width: 18px;
  height: 18px;
  background-size: cover;
  position: absolute;
  left: 20px; }

.MuiPopover-paper ul .MuiListItem-button:hover {
  text-decoration: none;
  background-color: rgba(76, 175, 80, 0.34); }

.section-post h2 {
  margin: 0 0 10px;
  font-weight: 700;
  color: #17345F; }

.section-post .post-base {
  padding: 10px 15px;
  margin: 10px 0; }

.section-post .max-image {
  max-height: 45px;
  max-width: 45px; }

.section-post p {
  font-size: 10px;
  color: #4A6080;
  margin: 3px 0; }

.section-post .post-number {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #17345F; }

.section-post .post-nominal {
  font-size: 12px !important; }

.section-post .post-date::after {
  content: " ";
  width: 6px;
  height: 6px;
  background: linear-gradient(to right, #64BD68, #7BC958);
  display: inline-block;
  border-radius: 50%;
  position: relative;
  top: -1px;
  margin-left: 4px; }

.section-post .post-image {
  border-radius: 50%;
  border-style: solid;
  border-width: 1px;
  border-color: #E3E3E3;
  height: 40px !important;
  width: 40px !important;
  margin-bottom: 9px;
  display: flex;
  justify-content: center; }

.section-post .pl16 {
  padding-left: 20px !important; }

.section-post .timer-booking {
  display: flex;
  justify-content: space-between;
  margin: 0px -12px 12px -12px !important;
  border-bottom: 1px solid #E8EBEF;
  padding: 0px 12px 12px 12px; }
  .section-post .timer-booking .text-price {
    font-size: 14px !important;
    color: #FF5959 !important; }
  .section-post .timer-booking .time-left {
    background: linear-gradient(295.02deg, #FFA64D -32.08%, #FF5959 77.69%);
    padding: 1px 8px;
    border-radius: 4px; }
    .section-post .timer-booking .time-left p {
      color: #ffffff !important;
      font-size: 12px; }

.section-nominal {
  font-family: inherit; }
  .section-nominal h2 {
    margin-bottom: 0px;
    padding: 0 0 10px;
    display: inline-block;
    font-weight: 700 !important; }
  .section-nominal .nominal-baselogo {
    border-bottom: solid 1px rgba(0, 0, 0, 0.15);
    width: 100%;
    margin-bottom: 5px;
    padding-bottom: 10px;
    display: flex;
    align-items: center; }
    .section-nominal .nominal-baselogo h2 {
      margin: 0px;
      padding: 0px;
      display: inline-block;
      color: #17345F; }
  .section-nominal .nominal-loader {
    border-bottom: solid 1px rgba(0, 0, 0, 0.15);
    padding: 6px 0px 10px 4px;
    margin-bottom: 20px; }
  .section-nominal .nominal-base {
    padding: 15px;
    color: #17345F;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px; }
    .section-nominal .nominal-base .nominal-logo {
      position: relative;
      margin-left: 5px;
      max-width: 70px;
      max-height: 35px;
      min-height: 22px; }
    .section-nominal .nominal-base .nominal-logo-voucher-game {
      position: relative;
      margin-left: 5px;
      max-width: 20px;
      max-height: 20px; }
    .section-nominal .nominal-base .nominal-qtitle {
      border-bottom: solid 1px rgba(0, 0, 0, 0.15);
      margin-bottom: 10px;
      padding-bottom: 10px;
      width: 100%; }
    .section-nominal .nominal-base .nominal-desc {
      font-size: 12px;
      font-weight: 600;
      margin-bottom: 5px; }
    .section-nominal .nominal-base .nominal-grid {
      flex-wrap: wrap !important;
      width: 104%;
      margin: 0px -2%; }
      .section-nominal .nominal-base .nominal-grid .nominal-item {
        border: solid 1px #EFEFEF;
        border-radius: 7px;
        padding: 30px 15px 30px;
        max-width: 46%;
        margin: 8px 2%;
        position: relative;
        min-height: 160px;
        display: flex;
        flex-wrap: wrap;
        justify-content: left;
        align-content: space-evenly;
        text-align: left;
        cursor: pointer; }
        .section-nominal .nominal-base .nominal-grid .nominal-item__discount {
          position: absolute;
          top: 10px;
          font-size: 10px;
          left: -43px;
          overflow: visible; }
          .section-nominal .nominal-base .nominal-grid .nominal-item__discount p {
            position: relative;
            padding: 5px 10px 6px 10px;
            z-index: 2;
            top: 2px;
            color: #FFF;
            font-size: 9px;
            background: #FF5959;
            overflow: visible;
            left: 35px; }
          .section-nominal .nominal-base .nominal-grid .nominal-item__discount p::before {
            content: "";
            height: 0;
            width: 0;
            display: block;
            position: absolute;
            top: 0;
            right: -11px;
            border-top: 11px solid #FF5959;
            border-bottom: 11px solid #FF5959;
            border-right: 11px solid transparent;
            border-left: 11px solid transparent; }
          .section-nominal .nominal-base .nominal-grid .nominal-item__discount p::after {
            content: "";
            height: 0;
            width: 0;
            display: block;
            position: absolute;
            bottom: -7px;
            left: 0;
            border-top: 7px solid #D12424;
            border-left: 7px solid transparent; }
        .section-nominal .nominal-base .nominal-grid .nominal-item .discount-umma p {
          background: #7DBF37 !important; }
        .section-nominal .nominal-base .nominal-grid .nominal-item .discount-umma p::before {
          border-top: 11px solid #7DBF37 !important;
          border-bottom: 11px solid #7DBF37 !important; }
        .section-nominal .nominal-base .nominal-grid .nominal-item .discount-umma p::after {
          border-top: 7px solid #7DBF37 !important; }
        .section-nominal .nominal-base .nominal-grid .nominal-item__sold {
          font-size: 10px;
          position: absolute;
          color: red;
          transform: translate(-50%, -50%);
          top: 25px;
          left: 50%;
          right: 50%;
          width: calc(100% - 15px); }
          .section-nominal .nominal-base .nominal-grid .nominal-item__sold img {
            position: relative;
            top: 2px;
            margin-right: 2px; }
        .section-nominal .nominal-base .nominal-grid .nominal-item__name {
          font-size: 12px;
          position: relative;
          color: #4A6080;
          font-weight: 600;
          border-bottom: solid 1px #EFEFEF;
          width: 100%;
          padding: 0 0 7px;
          margin-bottom: 5px; }
        .section-nominal .nominal-base .nominal-grid .nominal-item__qname {
          font-size: 12px;
          position: relative;
          color: #4A6080;
          font-weight: 600;
          width: 100%;
          margin-bottom: -5px; }
        .section-nominal .nominal-base .nominal-grid .nominal-item__quota {
          font-size: 12px;
          position: relative;
          color: #4A6080;
          font-weight: 600;
          border-bottom: solid 1px rgba(0, 0, 0, 0.15);
          width: 100%;
          padding: 0 0 7px; }
        .section-nominal .nominal-base .nominal-grid .nominal-item__false {
          font-size: 12px;
          position: relative;
          margin-bottom: -7px; }
        .section-nominal .nominal-base .nominal-grid .nominal-item__false::before {
          border-bottom: solid 2px #17345F;
          width: 100%;
          content: "";
          height: 2px;
          position: absolute;
          bottom: 6px;
          left: 0;
          transform: rotate(-6deg); }
        .section-nominal .nominal-base .nominal-grid .nominal-item__name2 {
          color: #4A6080 !important;
          font-size: 12px;
          width: 100%;
          margin-bottom: -10px; }
        .section-nominal .nominal-base .nominal-grid .nominal-item__price {
          font-size: 21px;
          color: #FF5959;
          margin-top: 10px;
          background: unset;
          width: 100%;
          border: unset;
          text-align: left;
          margin: 0;
          font-weight: 600; }
        .section-nominal .nominal-base .nominal-grid .nominal-item__more {
          font-size: 10px;
          color: #FF5959;
          margin-top: 0px;
          background: unset;
          font-weight: 400;
          border: unset;
          text-align: left;
          border-bottom: solid 1px #FF5959; }
      .section-nominal .nominal-base .nominal-grid .disable-denom {
        color: #8B99AF !important; }
      .section-nominal .nominal-base .nominal-grid .nominal-item-discount {
        padding-bottom: 20px;
        padding-top: 40px; }
      .section-nominal .nominal-base .nominal-grid .nominal-item-disabled {
        background: #E8EBEF;
        padding-bottom: 20px;
        padding-top: 40px; }
        .section-nominal .nominal-base .nominal-grid .nominal-item-disabled .nominal-item__name {
          border-bottom: solid 1px rgba(0, 0, 0, 0.15) !important; }
        .section-nominal .nominal-base .nominal-grid .nominal-item-disabled .nominal-item__price {
          color: #4A6080; }
      .section-nominal .nominal-base .nominal-grid .nominal-paketdata {
        min-height: 180px; }
      .section-nominal .nominal-base .nominal-grid .nominal-group {
        min-height: 140px;
        text-align: center;
        justify-content: center;
        padding: 30px 15px 30px; }
        .section-nominal .nominal-base .nominal-grid .nominal-group .nominal-item__quota {
          font-size: 12px; }
        .section-nominal .nominal-base .nominal-grid .nominal-group p {
          font-size: 16px; }
        .section-nominal .nominal-base .nominal-grid .nominal-group p, .section-nominal .nominal-base .nominal-grid .nominal-group span {
          text-align: center;
          border-bottom: unset; }
        .section-nominal .nominal-base .nominal-grid .nominal-group span {
          border: solid 1px #FF5959;
          border-radius: 4px;
          padding: 4px 8px;
          color: #FF5959;
          font-weight: 600;
          font-size: 10px; }
      .section-nominal .nominal-base .nominal-grid .nominal-pln {
        height: 160px;
        position: relative;
        display: flex;
        align-content: center;
        flex-wrap: wrap;
        justify-content: center;
        text-align: center; }
        .section-nominal .nominal-base .nominal-grid .nominal-pln input {
          text-align: center !important; }
        .section-nominal .nominal-base .nominal-grid .nominal-pln .nominal-item__name {
          padding: 0 0 5px;
          margin-bottom: 5px; }
        .section-nominal .nominal-base .nominal-grid .nominal-pln .nominal-item__name2 {
          margin-bottom: 7px; }
        .section-nominal .nominal-base .nominal-grid .nominal-pln p {
          text-align: center; }
      .section-nominal .nominal-base .nominal-grid .nominal-sepulsa {
        height: 110px;
        min-height: 110px;
        justify-content: center;
        text-align: center; }
        .section-nominal .nominal-base .nominal-grid .nominal-sepulsa p {
          text-align: center; }
      .section-nominal .nominal-base .nominal-grid .nominal-money {
        justify-content: center;
        text-align: center;
        height: 160px;
        padding: 40px 15px 20px; }
        .section-nominal .nominal-base .nominal-grid .nominal-money p {
          text-align: center; }
      .section-nominal .nominal-base .nominal-grid .nominal-pln-sold {
        background: #EFEFEF;
        height: 160px;
        position: relative;
        display: flex;
        align-content: center; }
        .section-nominal .nominal-base .nominal-grid .nominal-pln-sold .nominal-item__price {
          text-align: center;
          color: #17345F; }
      .section-nominal .nominal-base .nominal-grid .text-center {
        text-align: center; }

.section-stepper {
  width: 100%; }
  .section-stepper .stepper-base {
    background: unset;
    padding: 24px 0; }
    .section-stepper .stepper-base .stepper-button {
      margin: 0;
      padding: 0; }
      .section-stepper .stepper-base .stepper-button span {
        font-size: 10px;
        font-family: inherit !important; }
  .section-stepper .stepper-hide {
    display: none; }
  .section-stepper .stepper-static ul {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0px 5px 15px;
    margin-bottom: 30px; }
    .section-stepper .stepper-static ul .active::after {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      background: #67d379;
      border-radius: 50%; }
    .section-stepper .stepper-static ul .active::before {
      background: url("/static/transaction/icon-check.svg");
      position: absolute;
      top: 0;
      content: "";
      width: 100%;
      background-size: 50%;
      height: 100%;
      z-index: 1;
      background-repeat: no-repeat;
      background-position: 50%; }
    .section-stepper .stepper-static ul li {
      flex-grow: 1;
      position: relative; }
      .section-stepper .stepper-static ul li p {
        color: #17345F;
        width: 24px;
        height: 24px;
        font-size: 12px;
        background: unset;
        align-items: center;
        display: flex;
        justify-content: center;
        border-radius: 50%;
        font-weight: 500;
        border: solid 2px #17345F; }
    .section-stepper .stepper-static ul .left, .section-stepper .stepper-static ul .mid, .section-stepper .stepper-static ul .right {
      display: flex;
      position: relative;
      flex-wrap: wrap; }
      .section-stepper .stepper-static ul .left span, .section-stepper .stepper-static ul .mid span, .section-stepper .stepper-static ul .right span {
        position: absolute;
        font-size: 8px;
        color: #17345F;
        top: 35px;
        width: max-content; }
    .section-stepper .stepper-static ul .left {
      justify-content: left; }
    .section-stepper .stepper-static ul .mid {
      justify-content: center; }
    .section-stepper .stepper-static ul .line {
      width: 100%;
      height: 1px;
      border-bottom: solid 1px #D9D9D9;
      position: relative;
      top: 12px; }
    .section-stepper .stepper-static ul .right {
      justify-content: flex-end; }
    .section-stepper .stepper-static ul .text-active p {
      border: solid 2px #75C55C;
      color: #75C55C; }

.section-detailtrans h2 {
  margin: 0;
  color: #17345F;
  font-weight: 600;
  margin: 0; }

.section-detailtrans .detailtrans-expand {
  margin: 0 !important; }

.section-detailtrans .detailtrans-bot {
  background: #FFF0F0;
  padding: 20px 24px; }
  .section-detailtrans .detailtrans-bot .detailtrans-left {
    flex-grow: 1;
    font-size: 14px;
    color: #17345F;
    font-weight: 600; }
  .section-detailtrans .detailtrans-bot .detailtrans-right {
    color: #FF5959;
    font-size: 14px;
    font-weight: 600; }

.section-detailtrans .panel-login-promo {
  padding: 20px 24px;
  background: #ffffff;
  color: #FF5959;
  font-weight: 700;
  font-size: 10px;
  margin-bottom: 10px; }
  .section-detailtrans .panel-login-promo .detail-left {
    flex-grow: 1; }
  .section-detailtrans .panel-login-promo .detail-right {
    float: right; }

.section-detailtrans .detailtrans-desc {
  flex-wrap: wrap;
  padding: 0px 24px 15px; }
  .section-detailtrans .detailtrans-desc .detailtrans-item {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    width: 100%;
    margin: 4px 0; }
    .section-detailtrans .detailtrans-desc .detailtrans-item p {
      font-size: 14px;
      color: #4A6080;
      p: nth-child(2);
      font-weight: 500; }
    .section-detailtrans .detailtrans-desc .detailtrans-item .detailtrans-left {
      width: 45%;
      color: #17345F; }
    .section-detailtrans .detailtrans-desc .detailtrans-item .right-semibold {
      font-weight: 600;
      width: 55%;
      text-align: right;
      color: #17345F; }
      .section-detailtrans .detailtrans-desc .detailtrans-item .right-semibold .payment_detail_discount {
        color: #6FC35F; }

.section-detailtrans .detailtrans-promo {
  flex-wrap: wrap;
  padding: 15px 24px 20px;
  background: #fff;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px; }
  .section-detailtrans .detailtrans-promo p {
    font-size: 12px;
    color: #FF5959;
    margin-bottom: 10px; }
  .section-detailtrans .detailtrans-promo .detailtrans-input {
    width: 100%;
    position: relative;
    display: flex; }
    .section-detailtrans .detailtrans-promo .detailtrans-input .detailtrans-input2 {
      flex-grow: 1; }
      .section-detailtrans .detailtrans-promo .detailtrans-input .detailtrans-input2 .MuiOutlinedInput-root fieldset {
        border-color: #8B99AF; }
      .section-detailtrans .detailtrans-promo .detailtrans-input .detailtrans-input2 .MuiOutlinedInput-root.Mui-focused fieldset {
        border-color: #68BF64; }
      .section-detailtrans .detailtrans-promo .detailtrans-input .detailtrans-input2 fieldset {
        border-radius: 5px 0 0 5px; }
      .section-detailtrans .detailtrans-promo .detailtrans-input .detailtrans-input2 input {
        padding: 15px 14px;
        font-size: 10px;
        font-family: inherit; }
      .section-detailtrans .detailtrans-promo .detailtrans-input .detailtrans-input2 input::placeholder {
        color: #17345F;
        opacity: 50%; }
      .section-detailtrans .detailtrans-promo .detailtrans-input .detailtrans-input2 input:-webkit-autofill,
      .section-detailtrans .detailtrans-promo .detailtrans-input .detailtrans-input2 input:-webkit-autofill:hover,
      .section-detailtrans .detailtrans-promo .detailtrans-input .detailtrans-input2 input:-webkit-autofill:focus {
        border: unset;
        -webkit-text-fill-color: #17345F;
        -webkit-box-shadow: 0 0 0px 1000px rgba(255, 255, 255, 0) inset;
        transition: background-color 5000s ease-in-out 0s; }
    .section-detailtrans .detailtrans-promo .detailtrans-input .disable-point {
      background: #EFEFEF;
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px; }
      .section-detailtrans .detailtrans-promo .detailtrans-input .disable-point fieldset {
        border: unset; }
  .section-detailtrans .detailtrans-promo .detailtrans-button {
    box-shadow: unset;
    text-transform: capitalize;
    background: #FF5959;
    border-radius: 0 5px 5px 0;
    padding: 10px 20px;
    font-family: inherit;
    font-size: 10px;
    color: #FFF; }
  .section-detailtrans .detailtrans-promo .text-error {
    margin: 4px 0px 0px 0px;
    font-size: 10px; }

.section-email .inputnum-base {
  padding: 20px 30px 25px; }
  .section-email .inputnum-base .label-form-email {
    font-size: 14px;
    font-weight: 700;
    color: #17345F; }
  .section-email .inputnum-base .detail-label {
    font-size: 10px;
    font-weight: 400;
    color: #4A6080;
    margin-bottom: 10px; }
  .section-email .inputnum-base p {
    color: #17345F;
    font-size: 10px; }
  .section-email .inputnum-base input {
    font-size: 14px;
    border: unset;
    -webkit-text-fill-color: #17345F;
    -webkit-box-shadow: 0 0 0px 1000px rgba(255, 255, 255, 0) inset;
    transition: background-color 5000s ease-in-out 0s; }
  .section-email .inputnum-base .clear-input {
    max-height: 18px;
    color: #17345F;
    float: right !important;
    margin-right: -15px; }
  .section-email .inputnum-base .email-desc {
    color: #4A6080;
    font-size: 10px;
    margin-top: 10px; }
  .section-email .inputnum-base .registered-user {
    background: #FFF0F0;
    color: #4A6080 !important;
    font-size: 12px;
    border-radius: 8px;
    justify-content: center;
    margin-top: 11px;
    padding: 11px;
    display: flex;
    flex-wrap: wrap;
    text-align: center; }
    .section-email .inputnum-base .registered-user .use-promo-link {
      color: #FF5959 !important;
      font-weight: 700;
      cursor: pointer;
      margin-left: 3px; }

.section-recommend h2 {
  margin: 0 0 10px;
  color: #17345F; }

.section-recommend .MuiButton-contained.Mui-disabled {
  color: #FFF;
  background-color: #B0B0B0 !important;
  font-family: inherit; }

.section-recommend .MuiButton-containedSecondary {
  background-color: #FF5959;
  font-family: inherit; }

.section-recommend .MuiButton-containedSecondary:hover {
  background-color: #FF5959; }

.section-recommend .credit-base {
  margin-bottom: 0px; }
  .section-recommend .credit-base .base-image {
    max-height: 43px; }
  .section-recommend .credit-base .wording-anonymous {
    font-size: 10px;
    color: #FF5959; }
  .section-recommend .credit-base .wording-mobile-only {
    font-size: 10px;
    color: #17345F; }
  .section-recommend .credit-base .base-checkbox {
    color: blue; }
  .section-recommend .credit-base .base-checkbox:checked {
    color: red; }
  .section-recommend .credit-base .credit-showmore {
    background: #FFF0F0; }

.section-recommend ul {
  padding-top: 0;
  padding-bottom: 0; }
  .section-recommend ul li {
    color: #17345F;
    display: flex;
    justify-content: space-between;
    position: relative;
    font-size: 14px; }
    .section-recommend ul li label {
      color: #17345F;
      display: flex;
      justify-content: space-between;
      position: relative;
      font-size: 14px;
      width: 100%;
      align-items: center; }
      .section-recommend ul li label figure {
        width: 90px;
        text-align: left;
        margin: 0; }
      .section-recommend ul li label img {
        max-width: 100%; }
      .section-recommend ul li label div {
        flex-grow: 1;
        text-align: left; }
        .section-recommend ul li label div li::after {
          border-bottom: solid 1px #F3F3F3;
          position: absolute;
          content: " ";
          width: 90%;
          bottom: 0;
          left: 5%; }
  .section-recommend ul .recommend-more {
    padding: 0; }
  .section-recommend ul .recommend-more::after {
    border-bottom: unset; }
  .section-recommend ul .recommend-button {
    background: #FFF;
    box-shadow: unset;
    border-radius: 0;
    text-transform: capitalize;
    padding: 13px 0;
    color: #FF5959;
    font-size: 12px;
    border: solid 1px;
    font-family: inherit; }
  .section-recommend ul .show-more-payment {
    background: #FFF0F0;
    color: #FF5959;
    height: 48px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    display: flex;
    align-items: center; }
    .section-recommend ul .show-more-payment .icon-size {
      width: 20px; }
  .section-recommend ul .border-bottom-payment {
    border-bottom: solid 1px rgba(0, 0, 0, 0.15); }
  .section-recommend ul .last-border {
    background: #fff;
    height: 2px;
    position: absolute;
    left: 0;
    width: 100%;
    bottom: 8px; }

.section-recommend .category-payment {
  padding: 16px 0 0 16px;
  font-size: 14px;
  font-weight: bold;
  color: #17345F;
  font-family: inherit; }

.section-recommend .label-payment {
  font-size: 14px;
  font-weight: 700;
  color: #17345F;
  font-family: inherit; }

.section-recommend .error-select-payment {
  font-size: 10px;
  font-weight: 400;
  color: #FF5959;
  margin-left: 16px; }

.section-recommend .submit-button {
  margin-top: 20px;
  box-shadow: unset;
  border-radius: 5px;
  text-transform: capitalize;
  padding: 13px 0;
  color: #FFF;
  font-family: inherit; }

.section-new-payment {
  margin-bottom: 90px; }

.section-method .MuiButtonBase-root .MuiSwitch-track {
  background-color: #b0b0b0 !important; }

.section-method .method-top {
  color: #17345F;
  font-size: 14px;
  font-weight: 600; }

.section-method .method-bot {
  color: #17345F;
  font-size: 10px;
  margin-top: 4px; }

.section-method .error-sepulsa-credit {
  color: #FF5959; }

.section-method .method-base {
  padding: 15px; }

.section-method .error-base {
  padding: 15px;
  border: solid 1px red;
  border-radius: 7px; }

.section-method .method-button {
  background: #FF5959;
  text-transform: capitalize;
  font-family: inherit; }

.section-method .method-left {
  margin-right: 20px;
  margin-left: 20px; }

.section-method .method-center {
  margin-right: 10px; }

.section-method .method-right {
  flex-grow: 1;
  text-align: right; }

.section-list .MuiButton-contained.Mui-disabled {
  color: #FFF;
  background-color: #B0B0B0 !important;
  font-family: inherit; }

.section-list .MuiButton-containedSecondary {
  background-color: #FF5959;
  font-family: inherit; }

.section-list h2 {
  margin: 0 0 10px;
  color: #17345F; }

.section-list .list-item {
  margin-bottom: 20px; }
  .section-list .list-item .list-base {
    margin-bottom: 0px; }
    .section-list .list-item .list-base .base-image {
      max-height: 43px; }
  .section-list .list-item ul {
    padding-top: 0;
    padding-bottom: 0; }
    .section-list .list-item ul li {
      color: #17345F;
      display: flex;
      justify-content: space-between;
      position: relative;
      font-size: 14px;
      max-height: 59px; }
      .section-list .list-item ul li label {
        color: #17345F;
        display: flex;
        justify-content: space-between;
        position: relative;
        font-size: 14px;
        width: 100%;
        align-items: center; }
        .section-list .list-item ul li label figure {
          width: 90px;
          text-align: left;
          margin: 0; }
        .section-list .list-item ul li label img {
          max-width: 100%; }
        .section-list .list-item ul li label div {
          flex-grow: 1;
          text-align: left; }
          .section-list .list-item ul li label div li::after {
            border-bottom: solid 1px #F3F3F3;
            position: absolute;
            content: " ";
            width: 90%;
            bottom: 0;
            left: 5%; }
    .section-list .list-item ul .recommend-more {
      padding: 0; }
    .section-list .list-item ul .recommend-more::after {
      border-bottom: unset; }
    .section-list .list-item ul .recommend-button {
      background: #EAEAEA;
      box-shadow: unset;
      border-radius: 0 0 5px 5px;
      text-transform: capitalize;
      padding: 13px 0;
      color: #FF5959;
      border-bottom: solid 2px #FFF;
      position: absolute;
      content: " ";
      width: 90%;
      bottom: 0px;
      left: 5%;
      font-family: inherit; }

.section-list .next-payment {
  position: fixed;
  left: 50%;
  right: 0;
  bottom: 0;
  background: #FFF;
  width: 100%;
  text-align: center;
  padding: 12px 0;
  max-width: 480px;
  transform: translate(-50%, 0); }
  .section-list .next-payment .checkout-button {
    border: unset;
    margin: 0 auto;
    width: calc(100% - 30px);
    padding: 12px 0;
    text-transform: capitalize;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit; }

.section-success {
  background: #FFF;
  margin-bottom: 40px; }
  .section-success .MuiButton-contained:hover {
    background-color: #FF5959;
    color: #FFF; }
  .section-success .detailtrans-bot {
    background: #FFF0F0;
    padding: 20px 24px; }
    .section-success .detailtrans-bot .detailtrans-left {
      flex-grow: 1;
      font-size: 14px;
      color: #17345F;
      font-weight: 600; }
    .section-success .detailtrans-bot .detailtrans-right {
      color: #FF5959;
      font-size: 14px;
      font-weight: 600; }
  .section-success .success-pay {
    margin: 0 !important; }
    .section-success .success-pay .success-expand {
      min-height: 64px !important; }
  .section-success .success-pay::before {
    content: unset; }
  .section-success h2 {
    margin: 0;
    color: #17345F;
    font-weight: 600; }
  .section-success .success-animation {
    width: 200px;
    margin: auto;
    overflow: hidden;
    height: 180px; }
    .section-success .success-animation div {
      position: relative;
      top: -67px;
      height: auto !important; }
  .section-success .success-text {
    font-size: 14px;
    text-align: center;
    margin: 0 12.5%; }
    .section-success .success-text .success-text1 {
      color: #17345F;
      margin-bottom: 15px;
      padding-bottom: 15px;
      border-bottom: solid 1px rgba(0, 0, 0, 0.15); }
    .section-success .success-text .success-text2 {
      color: #17345F;
      font-weight: 600; }
    .section-success .success-text .success-text3 {
      color: #17345F;
      margin: 10px 5px; }
  .section-success .success-button {
    border: solid 1px #FF5959;
    color: #FF5959;
    background: #FFF;
    margin: 15px auto 0;
    width: 88%;
    display: block;
    padding: 12px 0;
    text-transform: capitalize;
    box-shadow: unset;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit; }
  .section-success .success-bot {
    background: #FFF0F0;
    padding: 20px 24px; }
    .section-success .success-bot .success-left {
      flex-grow: 1;
      font-size: 14px;
      color: #4A6080; }
    .section-success .success-bot .success-right {
      color: #FF5959;
      font-size: 14px; }
  .section-success .success-desc {
    flex-wrap: wrap;
    padding: 0px 24px 15px; }
    .section-success .success-desc .success-item {
      display: flex;
      flex-wrap: wrap;
      position: relative;
      width: 100%;
      margin: 4px 0; }
      .section-success .success-desc .success-item p {
        font-size: 14px;
        color: #1F2144;
        font-weight: 600; }
      .section-success .success-desc .success-item .success-left {
        flex-grow: 1;
        color: #4A6080;
        font-weight: 500; }
      .section-success .success-desc .success-item .success-right {
        color: #17345F; }
      .section-success .success-desc .success-item .payment_detail_discount {
        color: #6FC35F !important; }
    .section-success .success-desc .success-flex {
      display: flex;
      justify-content: space-between;
      width: 100%;
      margin: 4px 0; }
      .section-success .success-desc .success-flex p {
        font-size: 14px;
        color: #1F2144;
        font-weight: 600; }
      .section-success .success-desc .success-flex .left {
        width: 50%;
        color: #4A6080;
        font-weight: 500; }
      .section-success .success-desc .success-flex .right {
        color: #17345F;
        width: 50%;
        text-align: end; }
  .section-success .success-back {
    position: relative;
    background: #f7f7f7;
    width: calc(100% + 30px);
    text-align: center;
    padding: 12px 0;
    max-width: 480px;
    margin-left: -15px;
    margin-bottom: -50px; }
    .section-success .success-back .success-button2 {
      background: #ef5350;
      color: #fafafa;
      border: unset;
      margin: 0 auto;
      width: calc(100% - 30px);
      padding: 12px 0;
      text-transform: capitalize;
      font-size: 14px;
      font-weight: 700;
      font-family: inherit; }
  .section-success .warning-ematerai {
    background: #D47B140D;
    padding: 12px;
    text-align: center;
    border: 1px solid #D47B140D;
    margin: 12px 20px 0px 20px;
    border-radius: 6px; }
    .section-success .warning-ematerai p {
      font-size: 12px;
      color: #D47B14;
      font-weight: 600; }

.section-plnwarning {
  font-family: inherit;
  background: #FFF0F0;
  padding: 10px 10% 10px 20px;
  position: relative;
  top: 0;
  margin: -20px -20px 16px; }
  .section-plnwarning ol {
    margin-block-start: 0;
    padding-inline-start: 15px;
    font-weight: 400;
    font-size: 12px !important;
    color: #4A6080; }
  .section-plnwarning p {
    font-weight: 400;
    font-size: 12px !important;
    color: #4A6080; }
    .section-plnwarning p span {
      font-weight: 700; }
    .section-plnwarning p a {
      color: #FF5959;
      font-weight: 700; }
  .section-plnwarning img {
    position: absolute;
    right: 20px;
    top: 15px; }
  .section-plnwarning .alert-icon {
    position: absolute;
    right: 20px;
    top: 6px; }
  .section-plnwarning .plnwarning-title {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 10px; }
  .section-plnwarning .bullet-list {
    list-style: disc;
    margin: 4px 0px 0px 10px; }

.p-bullet {
  font-weight: 500 !important;
  line-height: 20px; }

.p-bullet::before {
  content: "\2022";
  margin: 0px 6px 0px 15px;
  font-weight: 700; }

.section-plntab {
  font-family: inherit;
  margin: 0px -15px 0; }
  .section-plntab header {
    box-shadow: unset; }
  .section-plntab .MuiTab-textColorInherit {
    opacity: 0.4; }
  .section-plntab .plntab-tab {
    background: #FFF;
    margin-bottom: -20px; }
    .section-plntab .plntab-tab .MuiTabs-fixed {
      border-bottom: solid 1px #FFF; }
    .section-plntab .plntab-tab button {
      background: #FFF;
      color: #17345F;
      padding: 25px 0px;
      font-family: inherit; }
    .section-plntab .plntab-tab span {
      height: 4px;
      color: #17345F;
      font-weight: 600;
      font-family: inherit;
      text-transform: capitalize; }
    .section-plntab .plntab-tab .badge-inactive {
      font-weight: 400 !important; }
    .section-plntab .plntab-tab .badge {
      display: inline-flex;
      height: 18px;
      text-align: center;
      vertical-align: middle;
      line-height: 18px;
      color: #17345F;
      font-weight: 600; }
      .section-plntab .plntab-tab .badge .badge-number {
        background: #FF5959;
        border-radius: 50%;
        color: #FFF;
        width: 18px;
        height: 18px;
        text-align: center;
        vertical-align: middle;
        line-height: 18px;
        margin-left: 8px;
        font-size: 10px; }
      .section-plntab .plntab-tab .badge .badge-number-inactive {
        background: #b0b0b0; }
  .section-plntab .pln-tab-scrollable button {
    width: 170px; }
  .section-plntab .pln-tab-scrollable span {
    width: 170px; }
  .section-plntab .pln-tab-scrollable .MuiTabs-scrollButtonsDesktop {
    width: 0px; }
  .section-plntab .plntab-content-seingat {
    margin-top: 70px !important; }
  .section-plntab .plntab-content {
    margin: 0px 15px 15px; }
    .section-plntab .plntab-content .MuiTypography-root {
      padding: 0 !important; }
    .section-plntab .plntab-content .plntab-clear button {
      margin: 0;
      font-family: inherit; }
    .section-plntab .plntab-content .plntab-box {
      padding: 15px;
      box-shadow: unset;
      padding: 15px 15px 25px;
      p: nth-child(3);
      margin-top: 15px; }
    .section-plntab .plntab-content .pln-notif-handphone {
      padding: 0 15px 20px;
      margin-top: -22px;
      z-index: 2;
      position: relative; }
    .section-plntab .plntab-content button {
      text-transform: capitalize;
      width: 100%;
      padding: 13px 0;
      box-shadow: unset;
      font-weight: 500;
      color: #FFF;
      margin-top: 15px;
      background: #B0B0B0;
      font-weight: 600;
      font-size: 16px;
      font-family: inherit; }
    .section-plntab .plntab-content .button-red {
      background: #FF5959;
      font-family: inherit; }
    .section-plntab .plntab-content .img-alert {
      position: absolute;
      top: -4px; }
    .section-plntab .plntab-content .plntab-alert {
      margin-top: 10px;
      font-size: 10px;
      margin-left: 13px;
      color: #4A6080; }
      .section-plntab .plntab-content .plntab-alert img {
        position: relative;
        top: 2px; }
    .section-plntab .plntab-content .plntab-image {
      text-align: center; }
      .section-plntab .plntab-content .plntab-image img {
        width: 80%; }
      .section-plntab .plntab-content .plntab-image p {
        color: #17345F;
        font-size: 14px;
        font-weight: 600;
        margin: 40px 0 20px; }

.section-grid {
  display: grid; }

.section-info {
  font-family: inherit; }
  .section-info .MuiPaper-elevation1 {
    box-shadow: none !important; }
  .section-info .title-sub-bill {
    color: #17345F;
    font-weight: 600;
    font-size: 14px; }
  .section-info .info-content {
    padding: 15px; }
    .section-info .info-content h2 {
      margin: 0 0 10px;
      color: #17345F;
      font-weight: 700; }
    .section-info .info-content button {
      width: 22px;
      min-width: unset;
      font-size: 10px;
      padding: 0.5px 3px;
      background: white;
      color: #FF5959;
      position: absolute;
      right: 15px;
      top: 3px;
      border-radius: 0;
      font-family: inherit; }
    .section-info .info-content button::after {
      border-bottom: solid 1px;
      content: " ";
      width: 100%;
      bottom: 2px;
      position: absolute; }
    .section-info .info-content div {
      display: flex;
      flex-wrap: wrap; }
      .section-info .info-content div p {
        width: 40%;
        font-size: 14px;
        margin: 3px 0;
        color: #17345F; }
      .section-info .info-content div p:nth-child(2) {
        text-align: right;
        font-weight: 600;
        color: #1F2144;
        width: 60%;
        word-wrap: break-word; }
  .section-info .with-expand {
    padding: 15px 15px 0px 15px !important; }
  .section-info .info-admin-fee {
    padding: 0px 15px 15px 15px !important; }
  .section-info .section-expansion {
    display: flex; }
    .section-info .section-expansion .MuiExpansionPanel-root:before {
      height: 0px; }
    .section-info .section-expansion .MuiExpansionPanel-root.Mui-expanded {
      margin: 9px 0px; }
    .section-info .section-expansion .MuiIconButton-edgeEnd {
      margin-right: -27px; }
    .section-info .section-expansion .expansion {
      width: 100%; }
    .section-info .section-expansion .radio-btn {
      display: flex;
      align-items: baseline;
      margin-top: 7px;
      padding-left: 6px; }
    .section-info .section-expansion .expansion-title {
      height: 40px;
      padding-left: 0px; }
    .section-info .section-expansion .text-title {
      color: #17345F;
      font-size: 14px;
      align-items: center;
      font-weight: 600;
      display: flex; }
    .section-info .section-expansion .expansion-desc {
      display: block;
      padding: 0px 12px 0px 0px;
      margin-left: -26px; }
    .section-info .section-expansion .detail-expand {
      display: flex;
      flex-wrap: wrap;
      width: 100%; }
      .section-info .section-expansion .detail-expand p {
        width: 40%;
        font-size: 14px;
        margin: 3px 0;
        color: #17345F; }
      .section-info .section-expansion .detail-expand p:nth-child(2) {
        text-align: right;
        font-weight: 600;
        color: #1F2144;
        width: 60%; }
  .section-info .info-darker {
    padding: 0; }
    .section-info .info-darker h2 {
      color: #17345F;
      font-weight: 600; }
    .section-info .info-darker div p:nth-child(2) {
      color: #17345F; }
    .section-info .info-darker .payment_detail_discount {
      color: #6FC35F; }
    .section-info .info-darker .info-total {
      position: relative;
      width: 100%;
      background: #FFF0F0;
      padding: 16px 20px;
      left: -20px;
      margin-top: 22px; }
      .section-info .info-darker .info-total p {
        color: #17345F;
        font-size: 14px;
        font-weight: 600; }
      .section-info .info-darker .info-total p:nth-child(2) {
        color: #FF5959; }

.popup-bottom {
  margin-bottom: -30px !important; }

.info-insurance {
  margin-top: -15px;
  padding: 15px;
  background-color: #FFF0F0; }
  .info-insurance .wording-info {
    color: #4A6080;
    font-size: 12px; }

.select-all-education {
  padding: 7px 0px 7px 7px;
  background-color: #FFF0F0;
  display: flex;
  align-items: center;
  justify-content: space-between; }
  .select-all-education .select-left {
    display: flex;
    align-items: center; }
  .select-all-education .select-right {
    margin-right: 15px; }
  .select-all-education .wording-select {
    color: #17345F;
    font-size: 14px;
    font-weight: 600; }
  .select-all-education .wording-total-price {
    color: #FF5959 !important; }

.va-checkout {
  padding: 0px !important;
  margin-top: 16px !important; }

.section-va {
  background: #FFF;
  padding: 16px; }
  .section-va .va-status {
    font-size: 10px;
    font-weight: 500;
    color: #FFB959; }
  .section-va .va-status::after {
    content: " ";
    width: 8px;
    height: 8px;
    background: #FFB959;
    display: inline-block;
    border-radius: 50%;
    position: relative;
    top: -1px;
    margin-left: 4px; }
  .section-va .va-detail {
    font-size: 10px;
    font-weight: 500;
    border-bottom: solid 1px rgba(0, 0, 0, 0.15);
    margin-bottom: 15px;
    padding-bottom: 10px;
    margin-top: 6px; }
    .section-va .va-detail div {
      margin-bottom: 6px; }
      .section-va .va-detail div p {
        display: inline-block;
        color: #17345F; }
      .section-va .va-detail div p:nth-child(2) {
        padding-left: 5px;
        color: #333333; }
  .section-va .va-desccard {
    font-size: 10px;
    color: #989898;
    font-weight: 500px; }
    .section-va .va-desccard p {
      margin-bottom: 6px; }
    .section-va .va-desccard p:nth-child(2) {
      color: #17345F; }
  .section-va .va-card {
    display: flex;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.15);
    width: 100%;
    justify-content: center;
    text-align: center;
    height: 115px;
    align-content: center;
    flex-wrap: wrap;
    color: #FFF;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    background-image: linear-gradient(to right, #FF5959, #FFA64D);
    margin-bottom: 12px; }
    .section-va .va-card .va-circle {
      height: 115px;
      width: 115px;
      background-image: linear-gradient(to bottom, #FF5959, #FFA64D);
      position: absolute;
      top: 0px;
      right: -45px;
      z-index: 0;
      border-radius: 50%; }
    .section-va .va-card p {
      width: 100%;
      font-size: 12px;
      z-index: 2; }
    .section-va .va-card span {
      padding: 0 15px;
      font-size: 21px; }
    .section-va .va-card .span-time {
      font-family: inherit;
      font-size: 21px;
      font-weight: bold; }
    .section-va .va-card .va-time {
      position: relative;
      padding: 10px 0 0px; }
      .section-va .va-card .va-time div {
        display: inline-block;
        position: relative;
        padding: 0px 0 10px; }
      .section-va .va-card .va-time p {
        font-family: inherit;
        font-size: 21px;
        z-index: 2;
        font-weight: bold; }
      .section-va .va-card .va-time .va-desctime {
        font-size: 10px;
        position: absolute;
        transform: translate(-50%, -50%);
        left: 50%;
        right: 50%;
        bottom: -5px;
        width: 25px;
        font-weight: 500; }
    .section-va .va-card .va-icon {
      position: absolute;
      right: 16px;
      z-index: 1;
      top: 16px; }
    .section-va .va-card .va-profile {
      margin-left: 24px;
      position: relative; }
      .section-va .va-card .va-profile__wrapper {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 16px; }
      .section-va .va-card .va-profile__image {
        width: 40px; }
      .section-va .va-card .va-profile h1 {
        font-size: 14px;
        font-family: inherit;
        margin-left: 8px;
        font-weight: 500; }
      .section-va .va-card .va-profile p {
        font-size: 14px;
        font-family: inherit;
        font-weight: 500; }
      .section-va .va-card .va-profile__number {
        font-size: 30px !important;
        font-weight: 600 !important;
        text-align: left;
        line-height: 38px;
        margin-top: 4px; }
  .section-va .va-card2 {
    height: calc(160px - 44px);
    padding: 24px 0px 20px;
    justify-content: left;
    position: relative; }
    .section-va .va-card2 .va-circle {
      height: 180px;
      width: 180px;
      top: -10px;
      right: -70px; }
  .section-va .va-desc-bot {
    font-size: 14px;
    color: #818181;
    line-height: 20px;
    text-align: center; }
  .section-va .va-desccard p {
    font-size: 10px;
    font-weight: 500; }
  .section-va .va-desccard .va-transaksi {
    color: #989898; }
  .section-va .va-desccard .va-an {
    color: #17345F; }
  .section-va .va-desccard .va-guide {
    display: block;
    padding: 15px 10px 10px 10px; }
    .section-va .va-desccard .va-guide .guide-regular {
      font-size: 14px;
      color: #333;
      cursor: pointer;
      text-align: center;
      font-weight: 400; }
    .section-va .va-desccard .va-guide .guide-bold {
      font-size: 14px;
      color: #333;
      cursor: pointer;
      text-align: center;
      font-weight: 700; }
  .section-va .va-desccard .va-info {
    margin-top: 12px;
    display: flex; }
    .section-va .va-desccard .va-info p {
      font-size: 18px;
      color: #333;
      cursor: pointer; }
    .section-va .va-desccard .va-info .info-left {
      flex-grow: 1; }
      .section-va .va-desccard .va-info .info-left img {
        margin-bottom: 10px; }
      .section-va .va-desccard .va-info .info-left p {
        margin-bottom: 0; }
    .section-va .va-desccard .va-info .info-right {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-end;
      padding-bottom: 0px; }
      .section-va .va-desccard .va-info .info-right p {
        color: #FF5959;
        font-size: 10px;
        border-bottom: solid 1px #FF5959;
        padding-bottom: 2px;
        margin-bottom: 0;
        font-weight: 500;
        cursor: pointer; }

.section-va2 {
  background: none; }

.section-vacard {
  font-family: inherit;
  color: #4A6080; }
  .section-vacard .MuiExpansionPanelSummary-root {
    padding: 0 16px 0 16px; }
  .section-vacard .MuiExpansionPanel-root.Mui-expanded {
    margin: 0; }
  .section-vacard .MuiExpansionPanelDetails-root {
    padding: 16px !important; }
  .section-vacard .MuiButton-contained:hover {
    background-color: rgba(238, 83, 80, 0.1); }
  .section-vacard h2 {
    margin: 0;
    color: #4A6080;
    font-size: 14px;
    color: #17345F;
    font-weight: 500;
    font-family: inherit; }
    .section-vacard h2 span {
      color: #FF5959; }
  .section-vacard svg {
    color: #000; }
  .section-vacard .va-expand {
    min-height: 55px !important;
    max-height: 55px !important; }
  .section-vacard .va-pink {
    background: #FFF0F0;
    min-height: 64px !important;
    max-height: 64px !important; }
    .section-vacard .va-pink h2 {
      color: #4A6080;
      font-weight: 600; }
  .section-vacard .va-header h2 {
    color: #4A6080;
    font-weight: 600; }
  .section-vacard .va-notes {
    font-size: 12px;
    text-align: center;
    padding: 22px 16px 12px;
    background: #FFE0E0;
    position: relative; }
    .section-vacard .va-notes p:nth-child(1) {
      margin-bottom: 6px; }
    .section-vacard .va-notes:after {
      content: '';
      position: absolute;
      display: block;
      top: -20px;
      left: 65px;
      width: 0;
      height: 0;
      border-top: 7px solid transparent;
      border-bottom: 16px solid #ffe0e0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent; }
  .section-vacard .va-pay::before {
    content: unset; }
  .section-vacard .va-animation {
    width: 200px;
    margin: auto;
    overflow: hidden;
    height: 180px; }
    .section-vacard .va-animation div {
      position: relative;
      top: -67px;
      height: auto !important; }
  .section-vacard .va-back {
    position: relative;
    background: #f7f7f7;
    width: calc(100% + 30px);
    text-align: center;
    padding: 12px 0;
    max-width: 480px;
    margin-left: -15px;
    margin-bottom: -50px; }
    .section-vacard .va-back .success-button2 {
      background: #ef5350;
      color: #fafafa;
      border: unset;
      margin: 0 auto;
      width: calc(100% - 30px);
      padding: 12px 0;
      text-transform: capitalize;
      font-size: 14px;
      font-weight: 700;
      font-family: inherit; }
  .section-vacard .va-desc {
    background: #FFF;
    display: flex;
    flex-wrap: wrap; }
    .section-vacard .va-desc .va-item {
      display: flex;
      flex-wrap: wrap;
      position: relative;
      width: 100%;
      margin: 0px 0 8px; }
      .section-vacard .va-desc .va-item p {
        font-size: 14px;
        color: #333333;
        font-weight: 600; }
      .section-vacard .va-desc .va-item .va-left {
        flex-grow: 1;
        color: #4A6080;
        font-weight: 500; }
    .section-vacard .va-desc .va-left {
      flex-grow: 1; }
      .section-vacard .va-desc .va-left .va-sisa {
        font-size: 10px;
        font-weight: 600;
        color: #4A6080; }
      .section-vacard .va-desc .va-left .va-denom {
        font-size: 18px;
        font-weight: 700;
        color: #4A6080; }
        .section-vacard .va-desc .va-left .va-denom span {
          border: solid 1px #FF5959;
          padding: 0 1px;
          display: inline-block;
          line-height: 18px; }
    .section-vacard .va-desc .va-right {
      display: flex;
      align-items: flex-end;
      padding-bottom: 3px; }
      .section-vacard .va-desc .va-right p {
        color: #FF5959;
        font-size: 10px;
        border-bottom: solid 1px #FF5959;
        padding-bottom: 2px;
        font-weight: 500;
        cursor: pointer; }
  .section-vacard .va-desc2 {
    background: #FFF0F0; }
  .section-vacard .va-desc-top {
    border-bottom: solid 1px #efefef;
    padding-bottom: 6px !important; }

.prod-info div:focus {
  outline: unset; }

.prod-info .MuiDrawer-paper {
  max-width: calc(480px - 40px);
  margin: auto;
  padding: 40px 20px 30px;
  border-radius: 15px 15px 0px 0px; }

.prod-info p {
  font-family: inherit;
  color: #17345F; }

.prod-info__header {
  display: flex;
  flex-wrap: wrap;
  border-bottom: solid 1px rgba(0, 0, 0, 0.15);
  padding: 0 25px 15px;
  margin-bottom: 15px; }
  .prod-info__header-left {
    flex-grow: 1;
    align-self: flex-end; }
    .prod-info__header-left p {
      font-size: 16px;
      font-weight: 400; }
    .prod-info__header-left span {
      font-weight: 600; }
  .prod-info__header-right p {
    font-size: 12px;
    font-weight: 400; }
  .prod-info__header-right p:nth-child(1) {
    position: relative;
    bottom: -4px; }
  .prod-info__header-right span {
    color: #FF5959;
    font-size: 21px;
    font-weight: 600; }

.prod-info__content {
  text-align: center;
    text-align-font-family: inherit; }
  .prod-info__content-title {
    font-size: 16px;
    font-weight: 600;
    color: #17345F;
    margin: 10px 0; }
  .prod-info__content-middle {
    font-size: 14px;
    font-weight: 400;
    color: #17345F !important;
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15); }
  .prod-info__content-bottom {
    font-size: 14px;
    font-weight: 400;
    color: #FF5959 !important; }

.prod-info__bottom {
  padding: 0 20px; }

.prod-info__number {
  font-size: 12px;
  color: #6F6F71; }
  .prod-info__number div.div-denom {
    font-size: 21px;
    color: #FF5959;
    line-height: 21px;
    margin-bottom: 16px;
    font-weight: 600; }

.prod-info__loader-title-umma {
  margin-bottom: -10px; }

.prod-info__loader-content-umma {
  margin-top: -4px;
  margin-bottom: -19px; }

.prod-info button {
  background: #FF5959;
  border-radius: 5px;
  height: 53px;
  align-items: center;
  color: #FFF;
  margin-top: 30px;
  text-transform: capitalize;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit; }

.prod-info button:hover {
  background: #FF5959; }

.prod-info .button2 {
  font-size: 16px; }

.prod-info .button-no {
  border: solid 1px #FF5959;
  border-radius: 5px;
  color: #FF5959;
  background: #FFF;
  height: 53px;
  align-items: center;
  margin-top: 30px;
  text-transform: capitalize;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit; }

.prod-info .button-no:hover {
  background: #FFF; }

.prod-info__close {
  position: absolute;
  top: 20px;
  left: 15px; }

.prod-info .btn-reward {
  font-size: 16px !important;
  font-weight: 600;
  margin-top: -10px; }

.prod-info .btn-popup {
  font-size: 16px !important;
  font-weight: 600; }

.prod-info .MuiButton-contained.Mui-disabled {
  color: #FFF;
  background-color: #B0B0B0 !important;
  font-family: inherit; }

.padding .MuiDrawer-paper {
  padding: 20px 20px 30px !important; }

.drawer-popup .MuiDrawer-paper {
  max-width: calc(480px - 40px);
  margin: auto;
  padding: 25px 20px 30px;
  border-radius: 15px 15px 0px 0px; }

.section-inputprofile input:-webkit-autofill,
.section-inputprofile input:-webkit-autofill:hover,
.section-inputprofile input:-webkit-autofill:focus,
.section-inputprofile textarea:-webkit-autofill,
.section-inputprofile textarea:-webkit-autofill:hover,
.section-inputprofile textarea:-webkit-autofill:focus,
.section-inputprofile select:-webkit-autofill,
.section-inputprofile select:-webkit-autofill:hover,
.section-inputprofile select:-webkit-autofill:focus {
  border: unset;
  -webkit-text-fill-color: #17345F;
  -webkit-box-shadow: 0 0 0px 1000px rgba(255, 255, 255, 0) inset;
  transition: background-color 5000s ease-in-out 0s; }

.section-inputprofile .MuiSelect-select:focus {
  background: unset; }

.section-inputprofile .inputnum-base {
  padding: 24px 15px 0px; }
  .section-inputprofile .inputnum-base p {
    color: #17345F;
    font-size: 10px; }
  .section-inputprofile .inputnum-base input {
    font-size: 14px;
    font-family: inherit;
    font-weight: 600;
    color: #17345F; }
  .section-inputprofile .inputnum-base .input {
    color: #17345F; }
  .section-inputprofile .inputnum-base .input-disabled {
    font-size: 14px;
    font-family: inherit;
    font-weight: 600;
    color: #B0B0B0; }
  .section-inputprofile .inputnum-base .inputnum-title2 {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 5px; }
  .section-inputprofile .inputnum-base .inputnum-clear {
    margin-right: -12px; }
  .section-inputprofile .inputnum-base .denom ul {
    margin: 0;
    padding: 0; }
  .section-inputprofile .inputnum-base .MuiInputBase-root {
    margin-bottom: 5px;
    font-family: inherit; }
  .section-inputprofile .inputnum-base .inputnum-alert {
    position: absolute;
    top: 19px;
    right: 20px; }

.section-inputprofile .inputnum-select {
  font-family: inherit;
  width: 100%; }
  .section-inputprofile .inputnum-select div {
    padding: 1px 0;
    color: #4A6080 !important;
    font-size: 14px;
    font-weight: 600 !important;
    font-family: inherit; }
  .section-inputprofile .inputnum-select div div:nth-child(3) div div {
    border-bottom: solid 1px #EFEFEF;
    width: 95%;
    margin: auto;
    padding: 12px 10px 12px 40px; }
  .section-inputprofile .inputnum-select div div:nth-child(3) div div:nth-last-child(1) {
    border-bottom: unset; }
  .section-inputprofile .inputnum-select .inputnum-placeholder {
    color: #4A6080;
    opacity: 50%; }
  .section-inputprofile .inputnum-select .css-1okebmr-indicatorSeparator {
    display: none; }
  .section-inputprofile .inputnum-select .css-tj5bde-Svg {
    color: #4A6080; }

.section-inputprofile .inputnum-menu .Mui-selected {
  background-color: #FFF; }

.section-inputprofile .inputnum-menu .MuiListItem-button {
  margin: 0;
  min-height: unset; }

.section-inputprofile .inputnum-menu .none:before {
  content: "";
  background: #EFEFEF;
  width: 18px;
  height: 18px;
  background-size: cover;
  position: absolute;
  left: 10px;
  border-radius: 50%; }

.section-inputprofile .inputnum-menu .inputnum-active:before {
  content: "";
  background: url("/static/transaction/icon-check-green.svg");
  width: 18px;
  height: 18px;
  background-size: cover;
  position: absolute;
  left: 10px; }

.section-inputprofile .inputnum-menu .inputnum-right {
  position: absolute;
  right: 15px; }

.section-inputprofile .MuiInputBase-input p {
  font-size: 14px;
  font-family: inherit;
  font-weight: 600; }

.section-inputprofile button {
  display: contents; }

.section-inputprofile .profile-name-edit {
  color: #FF5959;
  font-family: inherit;
  font-size: 14px; }

.search-box {
  position: relative;
  max-width: 480px;
  height: 60px; }
  .search-box .search-input {
    position: fixed;
    z-index: 10;
    width: 92%;
    max-width: 450px;
    position: fixed;
    top: 41px;
    padding: 32px 0px;
    backdrop-filter: blur(1px); }
  .search-box input {
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: !important; }

.search-no-header {
  top: 0px !important;
  padding: 20px 0px !important; }

.section-profileeditbtn .profileeditbtn-content .MuiTypography-root {
  padding: 0 !important; }

.section-profileeditbtn .profileeditbtn-content button {
  text-transform: capitalize;
  width: 100%;
  padding: 13px 0;
  box-shadow: unset;
  font-weight: 500;
  color: #FFF;
  margin-top: 12px;
  background: #B0B0B0;
  font-family: inherit; }

.section-profileeditbtn .profileeditbtn-content .button-red {
  background: #FF5959;
  display: inline-block;
  font-family: inherit; }

.section-profileeditbtn .profileeditbtn-content p {
  font-size: 10px;
  font-weight: 500; }

.section-profileeditbtn .profileeditbtn-content .plntab-alert {
  margin-top: 10px;
  font-size: 10px;
  color: #4A6080; }
  .section-profileeditbtn .profileeditbtn-content .plntab-alert img {
    position: relative;
    top: 2px; }

.section-profileeditbtn .profileeditbtn-content .plntab-image {
  text-align: center; }
  .section-profileeditbtn .profileeditbtn-content .plntab-image img {
    width: 80%; }
  .section-profileeditbtn .profileeditbtn-content .plntab-image p {
    color: #17345F;
    font-size: 14px;
    font-weight: 600;
    margin: 40px 0 20px; }

.section-profileeditbtn .button-red {
  background: #FF5959;
  font-family: inherit; }

.section-totalpay {
  position: fixed;
  bottom: -60px;
  width: 100%;
  transform: translate(-50%, -50%);
  left: 50%;
  max-width: 480px; }
  .section-totalpay .totalpay-base {
    padding: 16px;
    border-radius: 10px 10px 0 0;
    -webkit-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16); }
    .section-totalpay .totalpay-base-amount {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: solid 1px #EFEFEF;
      padding-bottom: 6px;
      margin-bottom: 1px; }
      .section-totalpay .totalpay-base-amount p {
        font-size: 12px;
        font-weight: 500;
        color: #17345F; }
      .section-totalpay .totalpay-base-amount div {
        display: flex;
        align-items: center; }
        .section-totalpay .totalpay-base-amount div p {
          color: #FF5959;
          font-weight: 600;
          font-size: 14px;
          margin-right: 4px; }
        .section-totalpay .totalpay-base-amount div svg {
          width: 15px; }
    .section-totalpay .totalpay-base .submit-button {
      margin-top: 12px;
      color: white;
      background: #FF5959;
      font-family: inherit; }
    .section-totalpay .totalpay-base .button-select-seat {
      margin-top: 12px;
      color: #FF5959;
      background: white;
      font-family: inherit;
      border: 1px solid #FF5959;
      box-shadow: none;
      padding: 12px; }
    .section-totalpay .totalpay-base .section-choice {
      display: flex;
      margin-top: 10px; }
      .section-totalpay .totalpay-base .section-choice .line {
        transform: translateY(-50%);
        border-bottom: 1px solid #E8EBEF;
        width: 44%; }
      .section-totalpay .totalpay-base .section-choice .txt {
        width: 12%;
        text-align: center; }
    .section-totalpay .totalpay-base .section-line {
      border-bottom: 1px solid #E8EBEF;
      margin-top: 10px; }
  .section-totalpay .info-train {
    text-align: start;
    font-size: 12px;
    margin: 12px 0px 2px 0px; }
  .section-totalpay .prod-info {
    background: red; }
    .section-totalpay .prod-info h2 {
      color: #333; }

.bottom-train {
  bottom: -130px !important; }

.separate-section {
  margin-bottom: 250px !important; }

.empty-history-filter {
  text-align: center;
  margin-top: 32px; }

.section-history-trx-list .post-base {
  border: solid 1px #EFEFEF;
  border-radius: 5px;
  margin: 16px 0; }
  .section-history-trx-list .post-base .p-detail-transaction {
    color: #17345F;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 10px; }
  .section-history-trx-list .post-base .p-detail-transaction-item {
    margin: 0 0 8px; }
    .section-history-trx-list .post-base .p-detail-transaction-item .p-detail-transaction-item-content {
      color: #17345F;
      flex: 1;
      justify-content: flex-end;
      padding-bottom: 0px;
      text-align: end; }
      .section-history-trx-list .post-base .p-detail-transaction-item .p-detail-transaction-item-content .payment_detail_discount {
        color: #6FC35F; }
  .section-history-trx-list .post-base .p-detail-transaction-item-last {
    margin: 0 0 0px; }
  .section-history-trx-list .post-base .p-detail-transaction-item-title {
    flex: 1; }

.section-history-trx-list .div-number {
  padding: 6px 14px 13px; }

.section-history-trx-list .txt {
  font-size: 10px;
  color: #4A6080; }

.section-history-trx-list .wording-refund {
  color: #4A6080;
  font-size: 14px;
  padding: 16px 16px 0px 16px;
  text-align: center; }

.section-history-trx-list .font-nominal {
  font-size: 12px !important; }

.section-history-trx-list .post-number {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #17345F; }

.section-history-trx-list .text-elipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 91%; }

.section-history-trx-list .padding16 {
  padding: 16px !important; }

.section-history-trx-list .post-date-success::after {
  content: " ";
  width: 6px;
  height: 6px;
  background: linear-gradient(to right, #44C64B, #44C64B);
  display: inline-block;
  border-radius: 50%;
  position: relative;
  margin-left: 4px; }

.section-history-trx-list .post-date-pending::after {
  content: " ";
  width: 6px;
  height: 6px;
  background: linear-gradient(to right, #FFB959, #FFB959);
  display: inline-block;
  border-radius: 50%;
  position: relative;
  margin-left: 4px; }

.section-history-trx-list .post-date-failed::after {
  content: " ";
  width: 6px;
  height: 6px;
  background: linear-gradient(to right, #FF5959, #FF5959);
  display: inline-block;
  border-radius: 50%;
  position: relative;
  margin-left: 4px; }

.section-history-trx-list .detail {
  border-top: solid 1px #EFEFEF;
  padding: 8px 16px 11px; }

.section-history-trx-list .txt-detail {
  cursor: pointer;
  color: #FF5959;
  font-size: 10px;
  font-weight: 600; }

.section-history-trx-list .div-detail-first {
  padding: 16px 16px 12px; }
  .section-history-trx-list .div-detail-first .detail {
    margin-top: 8px;
    padding: 8px 0px; }

.section-history-trx-list .section-redeem-voucher p {
  font-size: 14px;
  margin-bottom: 10px; }

.section-history-trx-list .p-detail-first {
  margin: 0 0 6px; }

.section-history-trx-list .p-first {
  font-size: 12px; }

.section-history-trx-list .p-detail-status-success {
  color: #44C64B; }

.section-history-trx-list .p-detail-status-pending {
  color: #FFB959; }

.section-history-trx-list .p-detail-status-failed {
  color: #FF5959; }

.section-history-trx-list .detail-first-title {
  color: #17345F;
  font-weight: 600;
  margin-right: 4px; }

.section-history-trx-list .detail-first-content {
  color: #4A6080;
  font-weight: 500; }

.section-history-trx-list .copy {
  color: #FF5959;
  font-weight: 600;
  cursor: pointer; }

.section-history-trx-list .detail-first-copy {
  margin-left: 4px; }

.section-history-trx-list .trx-va {
  border-top: solid 1px #EFEFEF;
  margin-top: 8px;
  padding: 16px 0 0; }
  .section-history-trx-list .trx-va p {
    padding: 0px; }
  .section-history-trx-list .trx-va .va-rek {
    font-family: inherit;
    font-size: 10px; }
    .section-history-trx-list .trx-va .va-rek .va-number {
      color: #17345F;
      font-weight: 700;
      margin-top: 5px; }
    .section-history-trx-list .trx-va .va-rek .txt-token {
      color: #17345F;
      font-weight: 700; }
    .section-history-trx-list .trx-va .va-rek .txt-total {
      color: #17345F;
      font-size: 10px;
      font-weight: 600; }
    .section-history-trx-list .trx-va .va-rek .total-copy {
      align-items: center;
      padding-bottom: 0px; }
  .section-history-trx-list .trx-va .va-an {
    font-size: 10px;
    font-weight: 600; }
  .section-history-trx-list .trx-va .va-name {
    color: #4A6080 !important;
    font-size: 10px;
    font-weight: 700;
    margin-bottom: 13px; }

.section-history-trx-list .trx-total {
  background: #FFF0F0;
  padding: 4px 16px; }

.section-history-trx-list .trx-virtual-info {
  background: #FFE0E0;
  padding: 4px 16px; }

.section-history-trx-list .trx-token {
  background: #FFF0F0;
  padding: 8px 12px; }

.section-history-trx-list .help .help-button {
  border: solid 1px #FF5959;
  border-radius: 5px;
  color: #FF5959;
  background: #FFF;
  display: block;
  padding: 12px 0;
  text-transform: capitalize;
  box-shadow: unset;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600; }

.section-history-trx-list .help .MuiButton-contained:hover {
  background-color: #FFF;
  color: #FF5959; }

.section-history-trx-list .footer {
  padding: 0 32px 16px; }
  .section-history-trx-list .footer .txt-confirm {
    color: #4A6080;
    font-size: 14px;
    text-align: center; }
  .section-history-trx-list .footer .semi-bold {
    font-weight: 600; }

.section-history-trx-list .div-footer-btn .footer-button {
  border-radius: 5px;
  color: #FFF;
  background: #FF5959;
  display: block;
  padding: 12px 0;
  text-transform: capitalize;
  box-shadow: unset;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600; }

.section-history-trx-list .div-footer-btn .refund-btn {
  margin-top: 8px;
  margin-bottom: 16px; }

.section-history-trx-list .div-footer-btn .MuiButton-contained:hover {
  background-color: #FF5959;
  color: #FFF; }

.section-history-trx-list .div-footer-btn .label-16px {
  font-size: 16px; }

.section-history-trx-list .txt-back-home {
  color: #FF5959;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  margin-top: 16px;
  text-align: center; }

.tab-head {
  height: 54px; }

.fixed-tab {
  position: fixed !important;
  display: flex !important;
  max-width: 480px;
  margin-top: -72px; }

.tab-head-seingat {
  position: fixed !important;
  max-width: 480px;
  margin-top: 54px;
  height: 54px;
  right: unset !important; }

.price-box {
  border: solid 1px #FF5959;
  border-radius: 1px;
  display: inline;
  padding: 0px 0;
  text-transform: capitalize;
  box-shadow: unset; }

.section-emptydraw {
  margin: 0 16px;
  text-align: center; }
  .section-emptydraw .empty__animation svg {
    max-width: 200px; }
  .section-emptydraw .empty__title-trans {
    color: #17345F;
    font-weight: 600;
    font-size: 12px;
    margin-bottom: 8px; }
  .section-emptydraw .empty__desc {
    font-weight: 500;
    font-size: 12px;
    color: #4A6080; }
    .section-emptydraw .empty__desc a {
      color: #FF5959;
      cursor: pointer;
      font-weight: 700;
      text-decoration: none; }
  .section-emptydraw .empty__close {
    top: -25px;
    left: -21px;
    position: absolute; }
  .section-emptydraw .empty__border {
    border: solid 1px #EFEFEF;
    width: 100%; }
  .section-emptydraw .empty__cs {
    margin: 20px 0px 10px 0px; }
  .section-emptydraw .empty__title-reward {
    color: #17345F;
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 20px; }
  .section-emptydraw .empty__desc-reward {
    color: #4A6080;
    font-weight: 400;
    font-size: 14px;
    text-align: left;
    margin-bottom: 5px; }
  .section-emptydraw .empty__title-rate {
    color: #17345F;
    font-weight: 600;
    font-size: 16px;
    margin-top: 26px;
    margin-bottom: 8px; }
  .section-emptydraw .empty__title-esim {
    color: #FF5959;
    margin: 12px 0px;
    font-weight: 600;
    font-size: 14px; }
  .section-emptydraw .empty__category {
    display: flex;
    align-items: center;
    font-size: 14px; }
  .section-emptydraw .empty__input-text {
    display: flex;
    margin-top: 15px; }
  .section-emptydraw .empty__input-category {
    flex-grow: 1; }
    .section-emptydraw .empty__input-category .MuiOutlinedInput-root fieldset {
      border-color: #8B99AF; }
    .section-emptydraw .empty__input-category .MuiOutlinedInput-root.Mui-focused fieldset {
      border-color: #68BF64; }
    .section-emptydraw .empty__input-category fieldset {
      border-radius: 5px; }
    .section-emptydraw .empty__input-category input {
      padding: 15px 14px;
      font-size: 14px;
      font-family: inherit;
      width: 100%; }
    .section-emptydraw .empty__input-category input::placeholder {
      color: #17345F;
      opacity: 50%; }
    .section-emptydraw .empty__input-category input:-webkit-autofill,
    .section-emptydraw .empty__input-category input:-webkit-autofill:hover,
    .section-emptydraw .empty__input-category input:-webkit-autofill:focus {
      border: unset;
      -webkit-text-fill-color: #17345F;
      -webkit-box-shadow: 0 0 0px 1000px rgba(255, 255, 255, 0) inset;
      transition: background-color 5000s ease-in-out 0s; }
  .section-emptydraw .button-confirm-reward {
    width: calc(50% - 20px) !important;
    height: 44px;
    font-size: 16px;
    font-family: inherit; }
  .section-emptydraw .button-rate {
    width: 50%;
    height: 44px;
    font-size: 16px;
    font-family: inherit; }
  .section-emptydraw .btn-cancel {
    font-weight: 400;
    background: #FFF;
    color: #FF5959;
    border: 1.5px solid #FF5959;
    right: 10px;
    box-shadow: 0px 1px 5px 0px rgba(236, 65, 65, 0.2), 0px 2px 2px 0px rgba(236, 65, 65, 0.2), 0px 3px 1px -2px rgba(236, 65, 65, 0.2); }
  .section-emptydraw .btn-cancel:hover {
    background: #f3eded; }
  .section-emptydraw .btn-delete {
    font-weight: 600;
    left: 10px;
    box-shadow: 0px 1px 5px 0px rgba(236, 65, 65, 0.2), 0px 2px 2px 0px rgba(236, 65, 65, 0.2), 0px 3px 1px -2px rgba(236, 65, 65, 0.2); }
  .section-emptydraw .btn-delete:hover {
    background: #ef5350; }

.section-zakatfitrah .detailtrans-bot {
  background: #FFF0F0;
  margin-top: 10px;
  padding: 16px; }
  .section-zakatfitrah .detailtrans-bot .detailtrans-left {
    flex-grow: 1;
    font-size: 14px;
    color: #262626;
    font-weight: 600; }
  .section-zakatfitrah .detailtrans-bot .detailtrans-right {
    color: #FF5959;
    font-size: 14px;
    font-weight: 600; }

.section-total-pay_label {
  width: 44% !important; }

.section-total-pay_nominal {
  width: 56% !important; }

.section-google-play_compl {
  background-color: #FFFFFF !important;
  border-radius: 4px;
  padding: 16px;
  margin-top: 16px; }
  .section-google-play_compl .desc {
    color: #17345F;
    font-size: 14px;
    font-weight: 600; }

.section-seingat {
  display: flex;
  flex-direction: column; }
  .section-seingat .fab {
    align-self: flex-end;
    position: fixed;
    bottom: 20px;
    background: #FF5959;
    z-index: 100; }
  .section-seingat .fab:hover {
    background: #FF5959; }
  .section-seingat .MuiButton-root:hover {
    background: #FF5959; }

.section-seingat-list .post-base {
  border: solid 1px #EFEFEF;
  border-radius: 5px;
  margin: 16px 0; }

.section-seingat-list .div-select {
  padding: 14px;
  border-bottom: solid 1px #EFEFEF; }
  .section-seingat-list .div-select .grid-title {
    height: 40px; }
    .section-seingat-list .div-select .grid-title .txt-select-title {
      font-size: 14px !important;
      font-weight: 600 !important;
      color: #4A6080;
      display: flex;
      align-items: center; }
  .section-seingat-list .div-select .div-txt-select {
    text-align: end; }
    .section-seingat-list .div-select .div-txt-select .txt-select {
      cursor: pointer;
      color: #FF5959;
      font-size: 14px; }

.section-seingat-list .div-list {
  margin-left: 16px;
  margin-right: 16px;
  padding-top: 14px;
  padding-bottom: 14px;
  border-bottom: solid 1px #EFEFEF; }
  .section-seingat-list .div-list .grid-list-last {
    border-bottom: 0px !important; }
  .section-seingat-list .div-list .grid-list .grid-data .div-title {
    display: flex;
    align-items: center; }
    .section-seingat-list .div-list .grid-list .grid-data .div-title svg {
      width: 24px;
      height: 24px; }
    .section-seingat-list .div-list .grid-list .grid-data .div-title .title {
      font-size: 14px !important;
      font-weight: 600 !important;
      color: #4A6080;
      padding: 0px;
      margin-left: 6px; }
  .section-seingat-list .div-list .grid-list .grid-data .period {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #17345F;
    margin-top: 2px; }
  .section-seingat-list .div-list .grid-list .grid-data .date {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #17345F;
    margin-top: 2px; }
  .section-seingat-list .div-list .grid-list .grid-data .amount {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #FF5959;
    margin-top: 2px; }
  .section-seingat-list .div-list .grid-list .grid-chevron .chevron-bullet {
    background: #b0b0b0;
    border-radius: 50%;
    color: #FFF;
    width: 18px;
    height: 18px;
    text-align: center;
    vertical-align: middle;
    line-height: 18px;
    margin-left: 8px;
    font-size: 10px; }
    .section-seingat-list .div-list .grid-list .grid-chevron .chevron-bullet .chevron-right {
      border-style: solid;
      border-width: 0.15em 0.15em 0 0;
      content: '';
      display: inline-block;
      height: 0.45em;
      position: relative;
      transform: rotate(45deg);
      width: 0.45em;
      right: 0.15em; }

.section-container-body {
  min-height: calc(100vh - 180px); }

.section-footer {
  height: 25px;
  padding-top: 25px; }

.section-button-reminder {
  justify-content: center;
  display: flex;
  width: 100%;
  max-width: 480px;
  z-index: 2; }
  .section-button-reminder button {
    text-transform: capitalize;
    width: 100%;
    max-width: 460px;
    padding: 13px 0;
    box-shadow: unset;
    font-weight: 500;
    color: #FFF;
    margin-top: 15px;
    background: #FF5959;
    font-family: inherit; }
  .section-button-reminder button:hover {
    background: #FF5959; }

.section-detail-seingat {
  margin-top: 16px; }
  .section-detail-seingat .title {
    padding: 20px 0px 10px 20px;
    display: flex;
    justify-content: space-between; }
    .section-detail-seingat .title .title-left {
      display: flex; }
      .section-detail-seingat .title .title-left svg {
        height: 24px;
        width: 24px;
        margin-right: 10px; }
      .section-detail-seingat .title .title-left p {
        font-size: 14px;
        padding-top: 5px;
        font-weight: 600; }
    .section-detail-seingat .title .title-right {
      display: flex; }
      .section-detail-seingat .title .title-right svg {
        height: 16px;
        width: 16px;
        padding: 5px 14px 0px 0px; }
  .section-detail-seingat hr {
    border: 1px solid #f0f5f1; }
  .section-detail-seingat .section-edit {
    margin-top: 37px; }

.detail-seingat {
  padding: 10px 0px 0px 15px;
  color: #17345F;
  font-size: 10px; }
  .detail-seingat .value-label {
    font-size: 14px; }
  .detail-seingat hr {
    margin-top: 5px;
    margin-right: 12px; }
  .detail-seingat .border-none {
    border: none;
    padding-bottom: 7px; }

.section-summary {
  margin-top: 16px;
  padding: 10px 0px 10px 20px;
  font-size: 10px;
  font-weight: 500;
  display: flex;
  justify-content: space-between; }
  .section-summary .title-summary {
    font-size: 14px;
    font-weight: 600; }
  .section-summary .section-logo {
    margin-right: 25px; }
    .section-summary .section-logo svg {
      height: 24px;
      width: 24px; }

.line-break {
  margin: 0px 15px;
  border: 1px solid #f0f5f1; }

.detail-summary {
  padding: 15px 0px 15px 20px;
  font-size: 10px;
  font-weight: 500; }

.important-notes {
  background-color: #FFF0F0;
  padding: 15px 0px 15px 20px;
  font-size: 10px;
  font-weight: 500;
  margin-bottom: 10px; }

.section-reward-point {
  font-family: inherit;
  font-weight: 400; }
  .section-reward-point__banner {
    position: relative;
    width: calc(100% + 30px);
    left: -15px;
    max-width: 480px; }
  .section-reward-point__input {
    margin-top: 24px; }
    .section-reward-point__input hr {
      border: 1px solid #EBEBEB; }
  .section-reward-point__box {
    position: sticky; }
  .section-reward-point__member-id {
    margin: 12px 16px 12px 16px; }
  .section-reward-point__title {
    font-size: 12px;
    margin-bottom: 4px;
    color: #4A6080; }
  .section-reward-point__input-id {
    color: #17345F;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 600; }
  .section-reward-point__section-agreement {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    padding-bottom: 10px;
    color: #17345F; }
  .section-reward-point__help-and-agreement {
    color: #FF5959; }
  .section-reward-point__wording-select-merchant {
    font-size: 14px;
    font-weight: 400;
    color: #4A6080;
    margin-top: 16px; }
  .section-reward-point__label-checkbox {
    display: flex;
    justify-content: space-between; }
  .section-reward-point__bg-point {
    background-size: cover;
    background-repeat: no-repeat;
    display: grid;
    min-height: 80px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px; }

.section-point {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 8px 0px 12px 0px;
  text-align: right; }
  .section-point .text {
    margin-right: 10px; }
  .section-point .number {
    font-size: 16px;
    margin-bottom: -11px;
    font-weight: 600; }
  .section-point .wording-point {
    font-size: 10px; }
  .section-point .point-label {
    position: relative;
    padding: 7px 3px 8px 10px;
    z-index: 2;
    top: 2px;
    font-size: 20px;
    background: yellow; }
  .section-point .point-label::before {
    content: "";
    height: 0;
    width: 0;
    display: block;
    position: absolute;
    top: 0;
    border-top: 25px solid yellow;
    border-left: 20px solid rgba(255, 0, 0, 0);
    border-bottom: 24px solid yellow;
    left: -20px; }

.section-slider-reward {
  margin: 23px -15px 25px; }
  .section-slider-reward .swiper-slide {
    max-width: 480px;
    max-height: 172px; }
  .section-slider-reward .instructure {
    font-size: 14px;
    font-weight: 600;
    color: #17345F;
    margin: 13px 0px 18px 0px; }
  .section-slider-reward .swiper-box {
    display: flex;
    justify-content: center;
    margin: 5px 0 0; }
    .section-slider-reward .swiper-box .swiper-pagination {
      position: relative; }
      .section-slider-reward .swiper-box .swiper-pagination .swiper-pagination-bullet {
        margin: 0 3px;
        border: solid 1px black;
        background: #B0B0B0; }
      .section-slider-reward .swiper-box .swiper-pagination .swiper-pagination-bullet-active {
        background: #FF5959;
        border: solid 1px #FF5959; }

.section-popup-input {
  margin: 0 16px; }
  .section-popup-input .title-fp {
    font-size: 24px;
    margin-bottom: 8px; }
  .section-popup-input .forgot-input .inputnum-base {
    padding: 15px 0px !important; }
  .section-popup-input .img-success-pass {
    display: flex;
    justify-content: center;
    margin-top: 15px; }
  .section-popup-input .forgot-pass .inputnum-base {
    padding: 0px 0px 8px 0px !important; }
  .section-popup-input .register-section {
    display: flex;
    justify-content: center;
    font-size: 14px;
    margin-top: 24px; }
  .section-popup-input .popup__title {
    text-align: center;
    color: #17345F;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: -5px; }
  .section-popup-input .popup__close {
    top: -25px;
    left: -21px;
    position: absolute; }
  .section-popup-input .popup__input {
    margin-bottom: -18px; }
  .section-popup-input .popup__title-tnc {
    text-align: center;
    color: #17345F;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: -5px; }
  .section-popup-input .popup__tnc-box {
    height: 312px;
    width: auto;
    text-align: left;
    margin-top: 30px;
    overflow: scroll;
    font-size: 14px;
    padding-right: 14px; }
    .section-popup-input .popup__tnc-box p {
      color: #4A6080 !important; }

.section-forgot-password {
  background: #EC615D;
  display: flex;
  justify-content: center;
  margin-top: -70px;
  z-index: 1; }
  .section-forgot-password svg {
    width: 100%; }

.reset-pass {
  margin-top: -125px; }

.icon-back-forgot {
  margin: 10px 0px 0px 15px;
  z-index: 5;
  position: fixed;
  top: 0; }

.disable-backdrop-popup {
  position: relative !important; }
  .disable-backdrop-popup .MuiBackdrop-root {
    display: none; }

.section-new-help__banner {
  max-width: 480px;
  width: calc(100% + 30px);
  position: relative;
  left: -15px; }
  .section-new-help__banner img {
    width: 100%; }
  .section-new-help__banner .section-search-autosuggest {
    margin-top: -77px; }
  .section-new-help__banner .text-banner {
    position: absolute;
    width: 100%;
    color: white;
    text-align: center;
    margin: -160px auto;
    font-weight: 700;
    font-size: 3vh; }
  .section-new-help__banner .search-box-help {
    position: relative;
    max-width: 480px;
    height: 50px; }
  .section-new-help__banner .search-input-help {
    position: fixed;
    z-index: 10;
    width: 100%;
    max-width: 480px;
    position: fixed;
    top: 54px;
    padding: 24px 0px;
    background: linear-gradient(180deg, rgba(255, 92, 88, 0.9) 46.02%, rgba(255, 92, 88, 0) 100%); }

.section-autofill-vcdeal {
  z-index: 20 !important;
  position: relative;
  width: 100%;
  margin-top: -70px; }
  .section-autofill-vcdeal .search-box-help {
    position: relative;
    max-width: 480px;
    height: 50px; }
  .section-autofill-vcdeal .search-input-help {
    position: fixed;
    z-index: 10;
    width: 100%;
    max-width: 480px;
    position: fixed;
    top: 54px;
    padding: 24px 0px; }

.set-background-scroll {
  background: url(/static/transaction/bg-searchbar-vcdeal.svg);
  height: 90px;
  width: 480px;
  margin: 0px 0px 0px -15px;
  display: flex;
  position: fixed;
  top: 52px;
  z-index: 10; }

.title-search {
  font-family: inherit;
  color: #17345F;
  font-weight: 600;
  font-size: 14px;
  margin: 45px 0px 3px 16px; }

.summary-result {
  background: #FFF0F0;
  padding: 8px 16px;
  margin: -20px -16px 0px -16px; }

.section-categorize-help {
  font-family: inherit;
  margin: 0px -15px;
  height: 54px;
  max-height: 54px; }
  .section-categorize-help .title-categorize {
    color: #17345F;
    font-weight: 600;
    font-size: 14px;
    margin: 25px 0px 3px 16px; }
  .section-categorize-help ::-webkit-scrollbar {
    width: 0px; }
  .section-categorize-help .status-categorize {
    overflow: auto;
    white-space: nowrap;
    padding: 13px 16px 0px;
    scroll-behavior: smooth; }
    .section-categorize-help .status-categorize div {
      border-radius: 20px;
      border: solid 1px #8B99AF;
      font-size: 12px;
      color: #8B99AF;
      min-width: 90px;
      margin-right: 6px;
      text-align: center;
      padding: 7px;
      display: inline-block;
      cursor: pointer; }
    .section-categorize-help .status-categorize .content {
      padding: 7px;
      font-weight: 600; }
    .section-categorize-help .status-categorize .category-active {
      border-color: #FF5959;
      color: #FF5959; }
    .section-categorize-help .status-categorize .menu-active {
      background: #FF5959;
      border-color: #FF5959;
      color: white; }

.pd-category-menu {
  padding: 5px 16px 5px 16px; }

.category-menu {
  width: 100%;
  position: fixed;
  right: 50%;
  left: 50%;
  top: 53px;
  z-index: 10;
  max-width: 480px;
  transform: translate(-50%, 0px);
  box-shadow: 6px 0px 0px rgba(23, 52, 95, 0.161); }

.shadow-info-train {
  box-shadow: 0px 4px 4px rgba(56, 56, 56, 0.05) !important; }

.section-time-bar {
  position: fixed;
  width: 100%;
  max-width: 407px;
  transform: translate(-50%, 0px);
  left: 50%;
  right: 50%;
  z-index: 10; }

.section-info-ticket {
  display: flex;
  justify-content: space-between;
  background: #FFF0F0;
  border-radius: 8px;
  margin: 12px 20px;
  font-size: 12px;
  color: #4A6080;
  align-items: center;
  text-align: center; }
  .section-info-ticket .section-left-info {
    display: flex;
    padding: 8px 12px; }
    .section-info-ticket .section-left-info .text {
      padding: 0px 8px; }
    .section-info-ticket .section-left-info .text-middle {
      border-left: 1px solid #8B99AF;
      border-right: 1px solid #8B99AF; }
    .section-info-ticket .section-left-info .border-right {
      border-right: 1px solid #8B99AF; }
    .section-info-ticket .section-left-info .text-bus {
      padding: 0px 8px 0px 4px; }
  .section-info-ticket .section-right-info {
    display: flex;
    padding: 8px 12px;
    cursor: pointer; }
    .section-info-ticket .section-right-info .text {
      color: #EB5757;
      text-decoration: underline; }

.custom-padding-bus-input {
  padding: 15px 0px 20px !important; }

.section-bottomnav-train .MuiBottomNavigationAction-wrapper {
  display: contents !important; }

.section-bottomnav-train span {
  margin: 0px 0px 0px 5px !important;
  font-size: 12px !important; }

.section-bottomnav-train .nav-middle {
  border-left: 1px solid #8B99AF;
  border-right: 1px solid #8B99AF;
  margin: 10px 0px; }

.section-card-ticket {
  margin-top: 73px;
  font-size: 12px; }
  .section-card-ticket .MuiPaper-elevation1 {
    box-shadow: none; }
  .section-card-ticket .card-ticket {
    padding: 16px;
    border: 1px solid #E3E6EB; }
  .section-card-ticket .title {
    font-size: 14px;
    color: #17345F;
    font-weight: 600; }
  .section-card-ticket .desc {
    color: #8B99AF; }
  .section-card-ticket .section-price {
    text-align: end; }
  .section-card-ticket .width30 {
    width: 30%; }
  .section-card-ticket .noselect {
    user-select: none; }
  .section-card-ticket .text-station {
    font-weight: 400 !important; }
  .section-card-ticket .price {
    color: #FF5959;
    font-size: 16px;
    font-weight: 700; }
  .section-card-ticket .section-detail-card {
    display: flex;
    justify-content: space-between;
    margin-top: 12px; }

.card-inactive {
  color: #8B99AF !important; }

.card-inactive-separator {
  display: flex;
  align-items: center;
  text-align: center;
  font-size: 12px;
  color: #B3BDC9;
  margin-bottom: 16px; }

.card-inactive-separator::before,
.card-inactive-separator::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid #E8EBEF;
  margin: 0 10px; }

.card-section {
  padding-top: 46px; }

.detail-time {
  display: flex; }
  .detail-time .section-line {
    border: 1px dashed #B3BDC9;
    margin: 14px 9px 10px 0px; }
  .detail-time .dot-upper {
    height: 10px;
    width: 10px;
    border: 1px solid #64BD68;
    border-radius: 50%;
    display: inline-block;
    margin: 0px 5px 0px -16px; }
  .detail-time .dot-bottom {
    height: 10px;
    width: 10px;
    background-color: #64BD68;
    border-radius: 50%;
    display: inline-block;
    margin: 0px 5px 0px -16px; }
  .detail-time .dot-inactive-upper {
    border: 1px solid #8B99AF !important; }
  .detail-time .dot-inactive-bottom {
    background-color: #B3BDC9 !important; }
  .detail-time .next-day {
    background: #FFED56;
    border-radius: 100px;
    padding: 3px 6px;
    font-size: 10px;
    color: #17345F;
    margin-left: 5px;
    font-weight: 700; }
  .detail-time .next-day-inactive {
    background: #E8EBEF; }

.section-card-bus-ticket {
  font-size: 12px; }
  .section-card-bus-ticket .MuiPaper-elevation1 {
    box-shadow: none; }
  .section-card-bus-ticket .card-ticket {
    padding: 16px 16px 10px 16px;
    border: 1px solid #E3E6EB; }
  .section-card-bus-ticket .bus-card-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px; }
  .section-card-bus-ticket .title {
    font-size: 16px;
    color: #4A6080;
    font-weight: 600; }
  .section-card-bus-ticket .color-light {
    color: #8B99AF; }
  .section-card-bus-ticket .color-medium {
    color: #4A6080; }
  .section-card-bus-ticket .price-tag {
    color: #FF5959;
    font-size: 16px;
    font-weight: 600;
    text-align: right; }
  .section-card-bus-ticket .bus-card-content {
    display: flex;
    justify-content: space-between;
    margin: 12px 0px; }
  .section-card-bus-ticket .bus-card-content-left {
    width: 80%;
    display: flex;
    align-items: flex-start;
    gap: 12px; }
  .section-card-bus-ticket .bus-card-content-right {
    display: flex;
    justify-content: center;
    align-items: center; }
  .section-card-bus-ticket .column-line {
    display: flex;
    flex-direction: column;
    align-items: center; }
  .section-card-bus-ticket .circle {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid #4CAF50;
    background-color: white; }
  .section-card-bus-ticket .circle.end {
    background-color: #4CAF50; }
  .section-card-bus-ticket .line {
    height: 35px;
    border-left: 1px dashed #ccc;
    margin: 2px 0; }
  .section-card-bus-ticket .bus-card-footer {
    display: flex;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid #E8EBEF; }
  .section-card-bus-ticket .bus-facilities-list {
    display: flex;
    gap: 5px; }

.section-filter-point {
  display: flex;
  gap: 12px;
  margin-top: 65px; }
  .section-filter-point .filter-point {
    width: 45%;
    padding: 10px 14px;
    box-shadow: 0px 1px 7px 0px rgba(0, 0, 0, 0.06);
    border-radius: 6px; }
  .section-filter-point .field-input {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 5px; }
  .section-filter-point .city-input {
    display: flex;
    gap: 6px;
    align-items: center; }

.text-elipsis-point {
  max-width: 120px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis; }

.section-line-filter {
  display: flex;
  height: 100%;
  align-items: center; }
  .section-line-filter .line-filter-separator {
    height: 50%;
    border-left: 1px solid #4A6080; }

.flex-evenly {
  display: flex;
  justify-content: space-evenly !important; }

.section-detail-ticket {
  margin-top: 30px;
  font-size: 14px;
  font-weight: 400; }
  .section-detail-ticket .station-name {
    margin-bottom: 12px; }
    .section-detail-ticket .station-name .title {
      font-size: 16px; }
    .section-detail-ticket .station-name .desc {
      font-size: 12px; }
  .section-detail-ticket .detail-info {
    margin: 16px 0px;
    border-bottom: 1px solid #E8EBEF; }
    .section-detail-ticket .detail-info .section-txt {
      display: flex;
      justify-content: space-between; }
  .section-detail-ticket .section-total {
    display: flex;
    justify-content: space-between; }
    .section-detail-ticket .section-total .left {
      color: #FF5959; }
  .section-detail-ticket .section-snk {
    display: flex;
    justify-content: space-between;
    margin: 16px 0px; }

.section-overflow-y {
  max-height: 400px;
  overflow-y: scroll;
  overflow-x: hidden;
  padding-right: 15px;
  margin-right: -15px; }

.section-button-detail-bus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #E8EBEF; }
  .section-button-detail-bus .button-checkout {
    padding: 0px 40px !important;
    height: 44px !important; }
  .section-button-detail-bus .price {
    color: #FF5959;
    font-size: 17px;
    font-weight: 600; }

.separate-line {
  border: 4px solid #F6F7F9;
  margin: 0px -35px 0px -36px; }

.section-facilities-bus {
  display: flex;
  gap: 12px;
  margin-bottom: 16px; }

.cancel-highlight {
  padding: 12px;
  text-align: center;
  background: rgba(212, 123, 20, 0.04);
  border: 1px solid rgba(212, 123, 20, 0.05);
  border-radius: 6px;
  margin-top: 12px; }
  .cancel-highlight .text-highlight {
    color: #d47b14;
    font-weight: 600; }

.rules-bus {
  margin-top: 12px; }
  .rules-bus .list-icon {
    display: flex;
    column-gap: 6px; }
  .rules-bus .title {
    margin-top: 5px;
    font-size: 14px;
    color: #17345F; }
  .rules-bus .desc {
    margin-top: 3px;
    font-size: 12px;
    color: #4A6080; }

.schedule-bus-detail {
  display: flex;
  flex-direction: column; }
  .schedule-bus-detail .row-content {
    display: grid;
    grid-template-columns: 24px 1fr;
    column-gap: 12px;
    position: relative; }
  .schedule-bus-detail .line-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative; }
  .schedule-bus-detail .circle {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid #4CAF50;
    background-color: white;
    z-index: 1; }
  .schedule-bus-detail .circle.filled {
    background-color: #4CAF50; }
  .schedule-bus-detail .dashed-line {
    flex: 1;
    width: 2px;
    background-image: repeating-linear-gradient(to bottom, #ccc, #ccc 4px, transparent 4px, transparent 8px);
    margin-top: 2px;
    z-index: 0; }
  .schedule-bus-detail .content {
    display: flex;
    flex-direction: column;
    padding-bottom: 12px; }
  .schedule-bus-detail .detail-address {
    display: flex;
    column-gap: 12px; }

.time-section {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 40px; }

.section-detail-order {
  font-size: 14px; }
  .section-detail-order .container-detail {
    padding: 16px 16px 0px 16px; }
  .section-detail-order .section-title {
    display: flex;
    justify-content: space-between;
    align-items: center; }
    .section-detail-order .section-title .right {
      color: #FF5959;
      text-decoration: underline;
      margin-right: -16px; }
  .section-detail-order .detail {
    padding: 0px 0px 6px 0px; }
  .section-detail-order .txt {
    color: #4A6080;
    margin-bottom: 8px; }
  .section-detail-order .toogle {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: -10px; }
  .section-detail-order .section-input {
    margin-top: -24px; }
  .section-detail-order .input-after {
    margin-top: -32px; }
  .section-detail-order .section-passenger-seat {
    background: #FFF0F0;
    border-radius: 8px; }
    .section-detail-order .section-passenger-seat .title {
      display: flex;
      justify-content: space-between;
      margin: 0px 16px;
      padding: 16px 0px 12px 0px;
      border-bottom: 1px solid #B3BDC9; }
    .section-detail-order .section-passenger-seat .change-txt {
      text-decoration: underline; }
    .section-detail-order .section-passenger-seat .passenger-section {
      padding: 0px 16px 16px 16px; }
      .section-detail-order .section-passenger-seat .passenger-section .seat-code {
        background: #4A6080;
        max-width: 86px;
        padding: 8px 0px;
        border-radius: 6px;
        color: white;
        margin: 6px 0px;
        text-align: center;
        font-weight: 700; }

.section-identity {
  display: flex;
  margin-top: -32px; }
  .section-identity .left {
    min-width: 70px;
    margin-top: -4px; }
  .section-identity .right {
    width: 80%; }

.section-list-passenger {
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  padding: 12px 0px;
  border-bottom: 1px solid #E8EBEF; }

.section-ticket-notfound {
  margin-top: 115px; }
  .section-ticket-notfound .image-animation {
    display: flex;
    justify-content: center; }
  .section-ticket-notfound .title {
    display: flex;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    color: #17345F;
    margin: 20px 0px 8px 0px;
    text-align: center; }
  .section-ticket-notfound .content-center {
    display: flex;
    justify-content: center; }
  .section-ticket-notfound .desc {
    font-size: 14px;
    font-weight: 400;
    color: #4A6080;
    margin-bottom: 24px;
    width: 70%;
    text-align: center; }
  .section-ticket-notfound .button {
    border: solid 1px #FF5959;
    border-radius: 6px;
    color: #FFF;
    background: #FF5959;
    margin: 0px auto 0;
    width: 60%;
    display: block;
    padding: 12px 0;
    text-transform: capitalize;
    box-shadow: unset;
    font-size: 16px;
    font-weight: 600;
    font-family: inherit; }
  .section-ticket-notfound .button:hover {
    background: #FF5959; }
  .section-ticket-notfound .change-date {
    font-size: 16px;
    color: #FF5959;
    font-weight: 600; }

.filter-not-found {
  margin-top: 150px !important; }

.react-autosuggest__input {
  width: 86%;
  height: 42px;
  padding: 0px 16px;
  font-weight: 400;
  font-size: 14px;
  border: 1px solid #fff;
  border-radius: 4px;
  color: #17345F;
  margin-left: 16px; }

.react-autosuggest__input::placeholder {
  color: #17345F !important;
  opacity: 50%;
  font-family: inherit;
  font-weight: 400;
  font-size: 14px; }

.react-autosuggest__input:disabled {
  background: white; }

.react-autosuggest__input:focus {
  outline: none; }

.react-autosuggest__container--open .react-autosuggest__suggestions-container {
  display: block;
  top: 60px;
  width: 93%;
  max-height: 250px;
  overflow: scroll;
  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.12);
  background-color: #fff;
  font-family: inherit;
  font-weight: 400;
  font-size: 16px;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  z-index: 100;
  margin: 5px 0px 0px 16px; }

.react-autosuggest__section-container--first {
  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.12);
  background-color: #fff; }

.react-autosuggest__suggestions-list {
  margin: 10px;
  padding: 0px 0px 5px 0px;
  list-style-type: none; }

.react-autosuggest__suggestion {
  padding: 16px 0px; }

.react-autosuggest__suggestion:not(:first-child) {
  border-top: 1px solid #ddd; }

.auto-suggest-highlight {
  font-weight: 700 !important; }

.text-suggestion {
  color: #4A6080;
  font-size: 14px;
  font-family: inherit;
  font-weight: 400; }

.section-autofill-searchbar {
  font-family: inherit; }
  .section-autofill-searchbar .react-autosuggest__input {
    border-radius: 40px !important;
    padding: 0px 0px 0px 40px !important;
    margin-left: -4px !important;
    font-family: inherit; }
  .section-autofill-searchbar .icon-search {
    margin: 0px -40px 0px 16px; }
  .section-autofill-searchbar .icon-search-scroll {
    margin: 0px -49px 0px 12px; }
  .section-autofill-searchbar .react-autosuggest__container--open .react-autosuggest__suggestions-container {
    max-height: 450px !important; }

.scroll-autofill .react-autosuggest__input {
  padding: 0px 0px 0px 53px !important;
  width: 83% !important; }

.scroll-autofill .react-autosuggest__container--open .react-autosuggest__suggestions-container {
  width: 86% !important; }

.list-autofill-img {
  display: flex;
  justify-content: start; }
  .list-autofill-img .container-image {
    width: 40px;
    padding: 0px 32px 0px 0px; }
  .list-autofill-img .img {
    max-width: 40px;
    max-height: 20px;
    padding: 0px 16px; }

.section-loan-detail {
  padding: 16px;
  margin-top: 16px;
  box-shadow: unset !important;
  border: 1px solid #E3E6EB; }
  .section-loan-detail .section-logo {
    display: flex;
    justify-content: center;
    padding: 8px 0px 24px 0px;
    border-bottom: 1px solid #EBEBEB; }
  .section-loan-detail .section-detail {
    margin-top: 16px;
    color: #17345F;
    font-size: 14px; }
  .section-loan-detail .section-button {
    color: #FFF;
    background: #FF5959;
    margin: 24px auto 16px;
    width: 100%;
    display: block;
    padding: 12px 0;
    box-shadow: unset;
    font-size: 16px;
    font-weight: 500;
    font-family: inherit; }
  .section-loan-detail .section-button:hover {
    background: #FF5959; }

.section-train {
  margin-top: 15px; }
  .section-train .first-input {
    display: flex; }
    .section-train .first-input .input-origin {
      width: 92%; }
    .section-train .first-input .img-revert {
      z-index: 2;
      margin: 57px 0px 0px -12px; }
    .section-train .first-input .rotate-img {
      animation: rotate-icon 0.5s; }
    .section-train .first-input .img-revert-popup {
      margin: 35px 0px 0px 0px; }

.autofill-date-bus {
  display: flex;
  gap: 10px;
  margin-left: 16px; }
  .autofill-date-bus .button-autofill-date {
    background: #FFFFFF;
    border-radius: 12px;
    padding: 6px 12px;
    border: 1px solid #8B99AF;
    color: #4A6080;
    font-size: 10px; }
  .autofill-date-bus .button-autofill-date:hover {
    background: #FF5959;
    color: #FFFFFF;
    border: 1px solid #FF5959; }
  .autofill-date-bus .button-autofill-date.filled {
    background: #FF5959;
    color: #FFFFFF;
    border: 1px solid #FF5959; }

@keyframes rotate-icon {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

.section-popup-passenger {
  margin: 0 16px; }
  .section-popup-passenger .popup__close {
    top: -25px;
    left: -21px;
    position: absolute;
    display: flex; }
    .section-popup-passenger .popup__close .title {
      font-size: 16px;
      font-weight: 600;
      color: #17345F;
      margin: 2px 0px 0px 13px; }
  .section-popup-passenger .popup__radio {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #EBEBEB; }
    .section-popup-passenger .popup__radio p {
      font-size: 14px;
      color: #4A6080 !important; }
  .section-popup-passenger .popup__section-select {
    margin: 12px 0px;
    cursor: pointer; }
  .section-popup-passenger .header-popup {
    display: flex; }
  .section-popup-passenger .container-header {
    display: flex; }
  .section-popup-passenger .subtitle-text {
    font-size: 10px; }
  .section-popup-passenger .section-list-busseat {
    font-size: 14px;
    padding: 12px 0px;
    border-bottom: 1px solid #EBEBEB;
    cursor: pointer; }
  .section-popup-passenger .no-border {
    border: none !important; }
  .section-popup-passenger .section-checkbox-area {
    max-height: 500px;
    overflow: scroll;
    padding-right: 15px;
    margin-right: -15px; }
    .section-popup-passenger .section-checkbox-area ::-webkit-scrollbar {
      width: 0px;
      height: 0px; }
  .section-popup-passenger .title-filter {
    margin: 10px 0px; }
  .section-popup-passenger .section-filter {
    padding-bottom: 8px; }
  .section-popup-passenger .text-select {
    font-weight: 600; }
  .section-popup-passenger .width100 {
    width: 100%;
    align-items: center; }
  .section-popup-passenger .title-filter {
    display: flex;
    justify-content: space-between;
    width: 90%;
    align-items: center; }
  .section-popup-passenger .flex-align-center {
    display: flex;
    align-items: center; }
  .section-popup-passenger .text-reset {
    color: #EB5757;
    text-decoration: underline;
    font-size: 14px;
    margin-right: -15px;
    cursor: pointer; }
  .section-popup-passenger .section-counter {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 67px;
    border-bottom: 1px solid #EBEBEB; }
    .section-popup-passenger .section-counter .section-icon-text {
      display: flex; }
      .section-popup-passenger .section-counter .section-icon-text .icon-passenger {
        margin: 5px 10px 0px 0px; }
      .section-popup-passenger .section-counter .section-icon-text .text-title {
        color: #4A6080;
        font-size: 14px;
        font-weight: 400; }
      .section-popup-passenger .section-counter .section-icon-text .text-description {
        color: #8B99AF;
        font-size: 12px;
        font-weight: 400; }
    .section-popup-passenger .section-counter .btn-counter {
      max-width: 75px; }
      .section-popup-passenger .section-counter .btn-counter input {
        text-align: center;
        color: #17345F; }
      .section-popup-passenger .section-counter .btn-counter .icon-min {
        color: #4A6080;
        width: 16px;
        height: 16px; }
      .section-popup-passenger .section-counter .btn-counter .icon-max {
        color: #FF5959;
        width: 16px;
        height: 16px; }
  .section-popup-passenger .section-text-info {
    background: #FEF1F0;
    padding: 8px 16px;
    margin: 24px 0px 34px 0px;
    border-radius: 8px; }
    .section-popup-passenger .section-text-info ul {
      margin: 0px;
      color: #4A6080;
      font-size: 12px;
      padding-left: 18px; }

.section-popup-listtrain {
  margin: 0 16px; }
  .section-popup-listtrain .popup__close {
    top: -25px;
    left: -21px;
    position: absolute;
    display: flex;
    z-index: 2; }
    .section-popup-listtrain .popup__close .title {
      font-size: 16px;
      font-weight: 600;
      color: #17345F;
      margin: 2px 0px 0px 13px; }
  .section-popup-listtrain .header-popup {
    display: flex;
    justify-content: space-between; }
  .section-popup-listtrain .container-header {
    display: flex; }
  .section-popup-listtrain .text-reset {
    color: #FF5959;
    text-decoration: underline;
    cursor: pointer; }
  .section-popup-listtrain .search-container {
    position: relative;
    max-width: 480px;
    height: 60px;
    margin-top: 25px; }
    .section-popup-listtrain .search-container .search-field {
      z-index: 10;
      width: 100%;
      max-width: 450px;
      top: 41px;
      backdrop-filter: blur(1px); }
  .section-popup-listtrain .container-list-train {
    height: 315px;
    overflow: scroll;
    padding-right: 15px;
    margin-right: -15px; }
  .section-popup-listtrain .container-list-train.MuiList-padding {
    padding: 0px !important; }
  .section-popup-listtrain .title-cities {
    font-size: 14px;
    font-weight: 700;
    margin: 14px 0px; }
  .section-popup-listtrain .header-last-search {
    display: flex;
    justify-content: space-between;
    margin-bottom: -10px; }
  .section-popup-listtrain .delete-search {
    font-size: 14px;
    color: #FF5959;
    text-decoration: underline;
    margin-top: 12px; }
  .section-popup-listtrain .list-train {
    font-size: 14px;
    color: #17345F; }
    .section-popup-listtrain .list-train .line-list {
      height: 44px;
      border-bottom: 1px solid #EBEBEB;
      display: flex;
      align-items: center; }
    .section-popup-listtrain .list-train .city-text {
      font-weight: 700; }
    .section-popup-listtrain .list-train .station-text {
      font-weight: 400; }
    .section-popup-listtrain .list-train .line-list-cities {
      height: 44px;
      border-bottom: 1px solid #EBEBEB;
      margin-top: 10px; }
    .section-popup-listtrain .list-train .flex-between {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      padding-bottom: 12px; }
    .section-popup-listtrain .list-train .text-addon {
      font-size: 10px;
      color: #4A6080;
      margin-top: 4px; }
  .section-popup-listtrain .padding0 {
    padding: 0px !important; }
  .section-popup-listtrain .content-tnc {
    height: 520px;
    overflow: scroll;
    margin-left: -25px;
    font-size: 14px;
    margin-top: 20px;
    margin-right: -20px;
    padding-right: 20px; }
    .section-popup-listtrain .content-tnc ol {
      margin-left: -10px; }
    .section-popup-listtrain .content-tnc .bullet {
      list-style-type: disc; }
    .section-popup-listtrain .content-tnc .main {
      margin-left: -12px; }
    .section-popup-listtrain .content-tnc .desc {
      margin: 12px 0px 12px 12px;
      color: #4A6080;
      font-weight: 400; }
    .section-popup-listtrain .content-tnc .paragraph {
      margin-left: 20px; }
    .section-popup-listtrain .content-tnc .paragraph-nested {
      margin-left: 40px; }
    .section-popup-listtrain .content-tnc .numbering {
      margin-left: -16px; }
    .section-popup-listtrain .content-tnc .lower-alpha {
      list-style: lower-alpha; }
    .section-popup-listtrain .content-tnc .order-list li {
      margin-bottom: 12px; }
  .section-popup-listtrain .loader-seat {
    margin: 0px -30px; }

.border-none {
  border: none !important; }

.fix-section {
  display: flex;
  width: 100%;
  max-width: 480px;
  position: fixed; }

.section-passenger-name {
  font-family: inherit;
  margin: 0px -15px;
  height: 75px; }
  .section-passenger-name ::-webkit-scrollbar {
    width: 0px; }
  .section-passenger-name .passenger-section {
    overflow: auto;
    white-space: nowrap;
    padding: 13px 0px 0px;
    scroll-behavior: smooth; }
    .section-passenger-name .passenger-section div {
      border-radius: 12px;
      border: solid 1px #8B99AF;
      color: #8B99AF;
      min-width: 90px;
      margin-right: 6px;
      text-align: start;
      padding: 7px;
      display: inline-block;
      cursor: pointer; }
    .section-passenger-name .passenger-section .section-active {
      border-color: #FF5959;
      background: #FFF0F0; }

.section-timer {
  height: 37px;
  background: linear-gradient(295.02deg, #FFA64D -32.08%, #FF5959 77.69%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0px -37px; }
  .section-timer .countdown {
    position: relative;
    padding: 15px 0px 0px 7px;
    align-items: center; }
    .section-timer .countdown div {
      display: inline-block;
      position: relative;
      padding: 0px 0 10px; }

.section-list-seat {
  background: #F6F7F4; }
  .section-list-seat .train-class {
    display: flex;
    justify-content: center;
    padding: 16px 0px; }
  .section-list-seat .info-select {
    display: flex;
    justify-content: space-evenly; }
    .section-list-seat .info-select .name-info {
      display: flex;
      align-items: center; }
      .section-list-seat .info-select .name-info .square {
        height: 16px;
        width: 16px;
        border: 2px solid #E8EBEF;
        border-radius: 4px;
        margin-right: 8px; }
      .section-list-seat .info-select .name-info .disable-color {
        background: #E8EBEF; }
      .section-list-seat .info-select .name-info .select-color {
        background: #FF5959; }

.section-seat {
  height: 400px;
  overflow: scroll; }
  .section-seat .section-row {
    padding: 12px 32px 0px 32px !important; }
  .section-seat .seat-center {
    display: flex;
    justify-content: center;
    align-items: center; }
  .section-seat .square-seat {
    height: 40px;
    width: 40px;
    border: 2px solid #E8EBEF;
    border-radius: 8px; }
  .section-seat .selected-seat {
    background: #FF5959;
    font-size: 14px;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center; }
  .section-seat .empty-seat {
    height: 40px;
    width: 40px; }

.section-seat-bus {
  justify-content: center;
  display: flex; }
  .section-seat-bus .MuiGrid-container {
    width: 80% !important; }
  .section-seat-bus .section-row {
    padding: 12px 32px 0px 32px !important; }
  .section-seat-bus .seat-center {
    display: flex;
    justify-content: center;
    align-items: center; }
  .section-seat-bus .square-seat {
    height: 40px;
    width: 40px;
    border: 2px solid #E8EBEF;
    border-radius: 8px; }
  .section-seat-bus .selected-seat {
    background: #FF5959;
    font-size: 14px;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center; }
  .section-seat-bus .empty-seat {
    height: 40px;
    width: 40px; }

.paper-seat {
  margin: 0px 16px !important; }

.section-slider-seat {
  margin: 0px -36px; }
  .section-slider-seat .swiper-slide {
    max-width: 480px;
    max-height: 330px;
    overflow: scroll; }
  .section-slider-seat .swiper-box {
    display: flex;
    justify-content: center;
    padding: 16px 0px;
    background: #F6F7F4; }
    .section-slider-seat .swiper-box .swiper-pagination {
      position: relative; }
      .section-slider-seat .swiper-box .swiper-pagination .swiper-pagination-bullet {
        margin: 0 3px;
        border: solid 1px black;
        background: #B0B0B0; }
      .section-slider-seat .swiper-box .swiper-pagination .swiper-pagination-bullet-active {
        background: #17345F;
        border: solid 1px #17345F; }

.popup-confirm-booking {
  font-size: 14px; }
  .popup-confirm-booking .title {
    display: flex;
    justify-content: center;
    text-align: center;
    margin: 0px 30px 20px 30px; }
  .popup-confirm-booking .detail-ticket {
    border-bottom: 1px solid #E8EBEF;
    margin-bottom: 8px; }
    .popup-confirm-booking .detail-ticket .text {
      padding-bottom: 8px; }
  .popup-confirm-booking .section-button {
    display: flex; }
    .popup-confirm-booking .section-button .btn-confirm {
      margin: 30px 10px 0px 0px;
      font-family: inherit; }
  .popup-confirm-booking .desc-confirmation {
    display: flex;
    justify-content: center;
    text-align: center; }
  .popup-confirm-booking .img-animation {
    display: flex;
    justify-content: center;
    margin: 12px 0px 24px 0px; }

.button-white-sepulsa {
  color: #FF5959 !important;
  background: white !important;
  border: 1px solid #FF5959 !important;
  box-shadow: none;
  font-family: inherit; }

.section-card-loan {
  margin-top: 15px;
  border-radius: 8px;
  border: 1px solid #E3E6EB;
  padding: 16px; }
  .section-card-loan .section-img-title {
    display: flex; }
    .section-card-loan .section-img-title img {
      max-height: 40px;
      max-width: 40px; }
  .section-card-loan .title {
    padding: 5px 0px 0px 8px; }
  .section-card-loan .limit-txt {
    padding: 9px 0px;
    border-bottom: 1px solid #E8EBEF;
    margin-bottom: 5px; }
  .section-card-loan .detail-tenor {
    display: flex;
    justify-content: space-between;
    margin: 4px 0px;
    font-size: 14px; }

.section-promo-tsel-banner {
  border-radius: 5px;
  border: 1px solid #FFF;
  margin: 20px 0px;
  padding: 16px;
  background: url("/static/graphic-1-omnichannel.svg"), url("/static/graphic-3-omnichannel.svg"), linear-gradient(98deg, #FFEFEF 2.35%, #FFF7DC 99.79%);
  background-size: 90px 90px, 98px 98px, 100% 100%;
  background-repeat: no-repeat;
  background-position: 100% 0%, -4% 100%;
  box-shadow: 0px 2px 4px 0px rgba(255, 10, 10, 0.05), 0px 8px 8px 0px rgba(255, 10, 10, 0.04), 0px 17px 10px 0px rgba(255, 10, 10, 0.03), 0px 31px 12px 0px rgba(255, 10, 10, 0.01), 0px 48px 13px 0px rgba(255, 10, 10, 0); }
  .section-promo-tsel-banner .p-desc {
    font-size: 14px;
    color: #412727;
    line-height: 20px; }
  .section-promo-tsel-banner .p-title {
    color: #430000;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px; }
  .section-promo-tsel-banner .section-cta-promo {
    display: flex;
    column-gap: 20px;
    margin-top: 16px; }
  .section-promo-tsel-banner .button-cta-tsel {
    border-radius: 6px;
    border: 1px solid #FC4747;
    background: #FF5959;
    color: #FFFF;
    padding: 8px;
    font-weight: 600;
    font-family: inherit; }
  .section-promo-tsel-banner .cta-tsel-text {
    text-decoration: underline;
    font-weight: 600;
    color: #FF5959;
    font-size: 14px;
    padding: 8px;
    cursor: pointer; }

.section-omnichannel {
  background: url("/static/graphic-2-omnichannel.svg"), linear-gradient(180deg, #FFE7E7 0.52%, #FFF 25.52%) !important;
  background-size: 90px 90px, 100% 100% !important;
  background-repeat: no-repeat !important;
  background-position: 100% 7% !important;
  color: #17345F; }
  .section-omnichannel .title-omnichannel {
    text-align: center;
    margin: 40px 0px;
    font-size: 24px; }
  .section-omnichannel .p-bold {
    font-weight: 600; }
  .section-omnichannel .p-desc {
    font-size: 14px; }
  .section-omnichannel .wrapper-content-omnichannel {
    display: flex;
    column-gap: 12px;
    padding: 0px 12px; }
  .section-omnichannel .stepper-omnichannel {
    position: relative; }
  .section-omnichannel .line-omnichannel {
    display: flex;
    justify-content: center;
    margin-top: -15px; }
  .section-omnichannel .mt-10 {
    margin-top: -10px; }
  .section-omnichannel .button-redirect-omni {
    padding: 12px 40px;
    width: 100%;
    border-radius: 6px;
    background: #FF5959;
    border: none;
    font-size: 16px;
    color: #FFFF;
    font-weight: 600;
    font-family: inherit; }
  .section-omnichannel .section-cta-omni {
    padding: 40px 30px;
    text-align: center; }
  .section-omnichannel .tnc-desc {
    color: #4A6080;
    font-size: 14px;
    margin-bottom: 14px; }
  .section-omnichannel .p-underline {
    text-decoration: underline;
    cursor: pointer; }
  .section-omnichannel .cta-back {
    margin-top: 28px;
    color: #FF5959;
    text-decoration: underline;
    font-weight: 600;
    cursor: pointer; }

.container-stepper-esim {
  display: flex;
  z-index: 2;
  flex-wrap: wrap;
  position: fixed;
  max-width: 480px;
  width: 100%;
  left: 50%;
  right: 50%;
  transform: translate(-50%, 0px); }
  .container-stepper-esim .wrapper-stepper-esim {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 480px;
    background: #FFFF;
    padding: 12px; }
    .container-stepper-esim .wrapper-stepper-esim .info-stepper-left {
      color: #8B99AF;
      font-size: 12px; }
      .container-stepper-esim .wrapper-stepper-esim .info-stepper-left .text-bottom {
        color: #17345F;
        font-size: 16px;
        font-weight: 600; }
    .container-stepper-esim .wrapper-stepper-esim .info-stepper-right {
      align-items: end;
      display: flex; }
      .container-stepper-esim .wrapper-stepper-esim .info-stepper-right p {
        font-size: 14px; }
      .container-stepper-esim .wrapper-stepper-esim .info-stepper-right span {
        color: #64BD68;
        font-weight: 600; }
  .container-stepper-esim .wrapper-progress {
    height: 4px;
    display: flex;
    width: 100%; }
    .container-stepper-esim .wrapper-progress .progress-stepper-left {
      border-bottom: 4px solid #64BD68;
      width: 25%; }
    .container-stepper-esim .wrapper-progress .progress-stepper-right {
      border-bottom: 4px solid #E8EBEF;
      width: 75%; }

.wrapper-list-number-esim {
  margin-top: 90px;
  margin-bottom: 120px; }
  .wrapper-list-number-esim .card-number-esim {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 44px;
    background: #FFFF;
    border: 1px solid #EFEFEF;
    border-radius: 5px;
    padding: 8px 12px;
    color: #4A6080;
    font-size: 16px;
    margin-bottom: 6px; }
  .wrapper-list-number-esim .card-number-esim:hover {
    background: #FFF0F0; }

.wrapper-multiple-esim {
  margin-top: 150px; }

.card-esim-package {
  position: fixed;
  margin-top: 63px;
  width: 100%;
  left: 50%;
  right: 50%;
  transform: translate(-50%, 0px);
  max-width: 480px;
  z-index: 2; }
  .card-esim-package .wrapper-package {
    padding: 12px 14px;
    background: #E8EBEF;
    border-radius: 5px;
    border: 12px solid #F6F7F9; }

.wrapper-form-activation {
  margin-top: 90px; }

.email-form-wrapper {
  padding: 12px 14px 20px 14px !important; }

.section-checkbox-esim {
  display: flex;
  flex-gap: 12px;
  align-items: end;
  margin: 10px 0px; }
  .section-checkbox-esim .MuiButtonBase-root {
    margin-left: -10px;
    font-family: inherit; }
  .section-checkbox-esim .txt-desc {
    font-size: 12px;
    color: #4A6080; }

.text-error-checkbox {
  color: #FF5959;
  padding-left: 5px;
  margin: 10px 0px -5px -4px;
  font-size: 11px; }

.wrapper-success-activation {
  margin-top: 90px; }

.text-success-esim {
  border-radius: 0px 0px 4px 4px;
  background: #FFF0F0;
  font-size: 12px;
  color: #4A6080;
  padding: 12px 16px; }
  .text-success-esim p {
    border-left: 2px solid #FF5959;
    padding-left: 10px; }

.separator-desc {
  border-bottom: 1px solid #E8EBEF;
  height: 2px;
  margin: 5px; }

.button-white {
  border: solid 1px #FF5959 !important;
  color: #FF5959 !important;
  background: rgba(255, 0, 0, 0) !important;
  margin: 15px auto 0;
  width: 88%;
  display: block;
  padding: 12px 0;
  text-transform: capitalize;
  box-shadow: unset;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit; }

.red-underline {
  color: #FF5959;
  text-decoration: underline; }

.section-popup-ecommerce .detail-info-ecommerce {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px; }

.wrapper-esim-package {
  margin-top: 80px; }
  .wrapper-esim-package .card-esim-package-active {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 5px;
    border: 1px solid #EFEFEF;
    background: #FFF;
    margin-bottom: 8px;
    padding: 14px; }
  .wrapper-esim-package .card-esim-package-inactive {
    border-radius: 5px;
    border: 1px solid #E1E5EA;
    background: #E8EBEF;
    padding: 14px;
    margin-bottom: 8px; }
    .wrapper-esim-package .card-esim-package-inactive .title-info-package {
      display: flex;
      justify-content: space-between; }
    .wrapper-esim-package .card-esim-package-inactive .submitted-text {
      color: #2BA631; }
    .wrapper-esim-package .card-esim-package-inactive .line-sparator {
      margin-top: 10px;
      border-bottom: 1px solid #CCD8E8; }
    .wrapper-esim-package .card-esim-package-inactive .submitted-info {
      display: flex;
      column-gap: 6px; }

.section-recaptcha-esim {
  display: flex;
  justify-content: center;
  margin: 12px 0px 0px 0px;
  max-width: 480px !important;
  max-height: 300px !important; }

.g-recaptcha {
  transform: scale(0.5) !important; }

.text-red-underline {
  color: #FF5959;
  text-decoration: underline;
  cursor: pointer; }

.section-change-city-text {
  margin: 0px 0px 10px 0px; }

.lower-alpha {
  list-style: lower-alpha; }

.text-center {
  text-align: center; }

.background-white {
  background: #ffff !important; }

.box-shadow-none {
  box-shadow: none !important; }

.text-desc-error-transition {
  padding: 0px 30px; }

.icon-partner-whitelabel {
  padding: 11px 24px !important; }

.icon-partner-whitelabel:hover {
  background: none !important; }

.section-e-materai {
  margin-top: 20px;
  font-type: inherit;
  color: #4A6080; }
  .section-e-materai .section-input-materai {
    border-radius: 4px;
    padding: 12px;
    display: flex;
    justify-content: space-between;
    background: #FFFFFF;
    align-items: center; }
    .section-e-materai .section-input-materai .wrapper-label-ematerai {
      width: 70%; }
      .section-e-materai .section-input-materai .wrapper-label-ematerai .label-ematerai {
        display: flex;
        justify-content: start;
        align-items: center; }
        .section-e-materai .section-input-materai .wrapper-label-ematerai .label-ematerai .logo {
          margin-right: 12px;
          display: flex;
          align-items: center; }
          .section-e-materai .section-input-materai .wrapper-label-ematerai .label-ematerai .logo img {
            max-height: 24px;
            width: auto; }
        .section-e-materai .section-input-materai .wrapper-label-ematerai .label-ematerai .text .title-label {
          font-size: 14px;
          font-type: inherit;
          color: #17345F; }
        .section-e-materai .section-input-materai .wrapper-label-ematerai .label-ematerai .text .desc-label {
          font-size: 12px;
          font-type: inherit;
          color: #4A6080; }
    .section-e-materai .section-input-materai .input-e-materai {
      width: 30%;
      max-width: 96px; }
      .section-e-materai .section-input-materai .input-e-materai .MuiInputBase-input {
        text-align: center;
        padding-bottom: 12px !important; }
      .section-e-materai .section-input-materai .input-e-materai .MuiInputAdornment-positionEnd {
        margin-left: 0px !important; }
      .section-e-materai .section-input-materai .input-e-materai input[type="number"]::-webkit-inner-spin-button,
      .section-e-materai .section-input-materai .input-e-materai input[type="number"]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0; }
      .section-e-materai .section-input-materai .input-e-materai input[type="number"] {
        -moz-appearance: textfield; }
      .section-e-materai .section-input-materai .input-e-materai .icon-counter {
        color: #4A6080;
        width: 16px;
        height: 16px;
        cursor: pointer; }
    .section-e-materai .section-input-materai .text-qty {
      font-size: 14px;
      text-align: end;
      color: #000000;
      margin-right: 12px; }
  .section-e-materai .section-quick-option {
    border-radius: 4px;
    margin-top: 5px;
    padding: 12px;
    display: flex;
    justify-content: start;
    background: #FFFFFF;
    align-items: center; }
    .section-e-materai .section-quick-option .text-option {
      margin-right: 12px;
      font-size: 12px;
      font-type: inherit; }
    .section-e-materai .section-quick-option .option {
      display: flex;
      column-gap: 8px; }
      .section-e-materai .section-quick-option .option .count-autofill {
        border: 1px solid #8B99AF;
        border-radius: 16px;
        font-size: 12px;
        padding: 6px 13px;
        cursor: pointer;
        background: #FFFFFF;
        color: #4A6080; }
      .section-e-materai .section-quick-option .option .count-autofill:hover {
        background: #FF5959;
        color: #FFFFFF;
        border: 1px solid #FF5959; }
  .section-e-materai .section-info-ematerai {
    border-radius: 8px;
    margin-top: 16px;
    padding: 1px 12px;
    background: #FDE7E7;
    font-size: 12px; }
    .section-e-materai .section-info-ematerai ul {
      padding-left: 12px; }
    .section-e-materai .section-info-ematerai p {
      padding: 8px 0px; }
  .section-e-materai .text-error {
    color: #FF5959;
    font-size: 10px; }

.title-form-confirmation {
  width: 72%; }

.section-cancel-booking {
  margin: -70px 0px 90px 0px !important;
  border-top: 1px solid #E8EBEF;
  padding-top: 16px; }
  .section-cancel-booking .card {
    padding: 16px; }
  .section-cancel-booking .text-desc-cancel {
    line-height: 150%;
    margin-bottom: 20px; }
  .section-cancel-booking .text-center {
    text-align: center; }

@media screen and (max-width: 470px) {
  .section-reward-point__bg-point {
    min-height: 70px; }
  .reset-pass {
    margin-top: -125px; }
  .text-elipsis-point {
    max-width: 100px; } }

@media screen and (max-width: 460px) {
  .search-box .search-input {
    max-width: 430px; } }

@media screen and (max-width: 445px) {
  .search-box .search-input {
    max-width: 415px; }
  .react-autosuggest__input {
    width: 82%; }
  .react-autosuggest__container--open .react-autosuggest__suggestions-container {
    width: 91%; }
  .title-form-confirmation {
    width: 80%; } }

@media screen and (max-width: 430px) {
  .search-box .search-input {
    max-width: 400px; }
  .scroll-autofill .react-autosuggest__input {
    width: 80% !important; } }

@media screen and (max-width: 415px) {
  .search-box .search-input {
    max-width: 380px; } }

@media screen and (max-width: 400px) {
  .section-reward-point__bg-point {
    min-height: 60px; }
  .section-point .point-label {
    padding: 1px 3px 3px 10px; }
  .section-point .point-label::before {
    border-top: 19px solid yellow;
    border-left: 15px solid rgba(255, 0, 0, 0);
    border-bottom: 19px solid yellow;
    left: -15px; }
  .search-box .search-input {
    max-width: 370px !important; }
  .section-new-help__banner .text-banner {
    margin: -140px auto; } }

@media screen and (max-width: 370px) {
  .section-plntab .pln-tab-scrollable button {
    width: 120px; }
  .section-plntab .pln-tab-scrollable span {
    width: 120px; }
  .section-plntab .pln-tab-scrollable .MuiTabs-scrollButtonsDesktop {
    width: 0px; }
  .search-box .search-input {
    max-width: 340px !important; }
  .section-new-help__banner .text-banner {
    margin: -127px auto !important; }
  .scroll-autofill .react-autosuggest__input {
    width: 77% !important; }
  .text-elipsis-point {
    max-width: 80px; } }

@media screen and (max-width: 345px) {
  .section-emptydraw .button-rate {
    width: inherit; } }

.jualan.category-menu {
  top: 0px; }

.bg-icon-cs {
  background: #69AB23 !important; }

.bg-icon-cs-espl {
  background: #09244B !important; }

.bg-icon-cs-pdaminfo {
  background: #2C5495 !important; }

.bg-wording-pdaminfo {
  background: #086BB4 !important; }

.bg-wording-cs {
  background: #7DBF37 !important; }

.bg-wording-cs-espl {
  background: #17345F !important; }

.mt-80 {
  margin-top: -80px; }

.fc-umma {
  color: #7DBF37 !important; }

.fc-pdam {
  color: #086BB4 !important; }

.fc-espl {
  color: #FF7A00 !important; }

.fz-16px {
  font-size: 16px !important; }

.btn-success-umma {
  background: #7DBF37 !important;
  font-size: 16px !important;
  font-weight: 600 !important; }

.btn-success-pdam {
  background: #086BB4 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  margin: 10px !important;
  border-radius: 5px;
  border: 1px solid #2C5495; }

.btn-success-espl {
  background: #17345F !important;
  font-size: 16px !important;
  font-weight: 400 !important; }

.section-btn-pdam {
  bottom: 32px;
  position: absolute;
  width: 100%;
  max-width: 460px; }

.bgc-light-umma {
  background: #EBFCD8 !important; }

.bgc-light-pdam {
  background: rgba(8, 107, 180, 0.05) !important; }

.bgc-light-espl {
  background: #FFF6ED !important; }

.success-umma-info {
  font-size: 14px;
  font-family: 'Source Sans Pro';
  font-weight: 400;
  display: flex;
  justify-content: center;
  margin-top: 15px;
  padding: 15px;
  color: #707070;
  background: #EBFCD8; }

.bg-pdam {
  background: rgba(8, 107, 180, 0.05) !important;
  color: #086BB4 !important;
  text-align: center;
  margin-top: 0px !important; }

.success-pdam {
  border: 1px solid #EFEFEF; }

.info-espl {
  background: #FFF6ED !important;
  color: #4A6080 !important; }

.pattern-umma {
  background-image: url("/static/umma/pattern-umma.svg");
  background-size: auto;
  background-repeat: repeat;
  background: #F0F0F0; }

.app-umma {
  padding: 0px 15px 56px !important; }

.header-umma {
  background: #00000000;
  max-width: 480px;
  left: 50%;
  right: 50%;
  transform: translate(-50%, 0px);
  position: fixed;
  border-bottom: solid 1px #00000000; }
  .header-umma .MuiAppBar-colorPrimary {
    background: #00000000; }

.background-umma {
  position: relative; }

.logo-header {
  display: flex;
  justify-content: space-between;
  background: #00000000; }

.header-scrolled {
  background: #7DBF37; }

.product-base-umma {
  padding: 0px;
  cursor: pointer; }
  .product-base-umma .product-umma {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 12px 0px; }
  .product-base-umma .product-divider {
    border-left: solid 1px #EFEFEF; }
  .product-base-umma .product-name-umma {
    color: #606060;
    font-size: 12px;
    margin-left: 5px; }
  .product-base-umma .product-name-espl {
    color: #4A6080;
    font-size: 14px;
    margin-left: 5px; }

.section-splash-umma {
  background: #FFF;
  height: 100vh;
  position: fixed;
  width: 100%;
  left: 0;
  z-index: 12;
  -webkit-animation: animateBottom 1s forwards;
  -moz-animation: animateBottom 1s forwards;
  -ms-animation: animateBottom 1s forwards;
  -o-animation: animateBottom 1s forwards;
  animation: animateBottom 1s forwards;
  -webkit-animation-delay: 2s;
  -moz-animation-delay: 2s;
  animation-delay: 2s; }
  .section-splash-umma .img {
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    height: 110px;
    bottom: 50%;
    top: 50%; }

.btn-checkout-umma {
  background: #7DBF37 !important; }

.btn-checkout-umma:hover {
  box-shadow: 0px 3px 1px -2px #7dbf03, 0px 2px 2px 0px #7dbf04, 0px 1px 5px 0px #7dbf05 !important; }

.btn-checkout-espl {
  background: #17345F !important; }

.btn-checkout-pdaminfo {
  background: #086BB4 !important; }

.icon-reload {
  justify-content: center;
  display: flex; }
  .icon-reload p {
    text-decoration: underline;
    text-decoration-color: #7DBF37;
    color: #7DBF37;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer; }

@keyframes animateBottom {
  from {
    bottom: 0px;
    opacity: 1; }
  to {
    bottom: 500px;
    opacity: 0; } }

/* Firefox < 16 */
@-moz-keyframes animateBottom {
  from {
    bottom: 0px;
    opacity: 1; }
  to {
    bottom: 500px;
    opacity: 0; } }

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes animateBottom {
  from {
    bottom: 0px;
    opacity: 1; }
  to {
    bottom: 500px;
    opacity: 0; } }

/* Internet Explorer */
@-ms-keyframes animateBottom {
  from {
    bottom: 0px;
    opacity: 1; }
  to {
    bottom: 500px;
    opacity: 0; } }

/* Opera < 12.1 */
@-o-keyframes animateBottom {
  from {
    bottom: 0px;
    opacity: 1; }
  to {
    bottom: 500px;
    opacity: 0; } }

@media screen and (min-width: 480px) {
  .pattern-umma {
    background-image: url("/static/umma/pattern-umma.svg") !important;
    background-size: auto;
    background-repeat: repeat; } }