/*
* tupay.css
* File include item tupay only specific css only
******************************************************************************/

.light-style .menu .app-brand.tupay {
 height: 64px;
}

.dark-style .menu .app-brand.tupay {
 height: 64px;
}

.app-brand-logo.tupay {
 -ms-flex-align: center;
 align-items: center;
 -ms-flex-pack: center;
 justify-content: center;
 display: -ms-flexbox;
 display: flex;
 width: 34px;
 height: 24px;
}

.app-brand-logo.tupay svg {
 width: 35px;
 height: 24px;
}

.app-brand-text.tupay {
 font-size: 1.375rem;
}

/* ! For .layout-navbar-fixed added fix padding top tpo .layout-page */
.layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page {
 padding-top: 64px !important;
}
.layout-navbar-fixed
 .layout-wrapper:not(.layout-horizontal):not(.layout-without-menu)
 .layout-page {
 padding-top: 78px !important;
}
/* Navbar page z-index issue solution */
.content-wrapper .navbar {
 z-index: auto;
}

/*
* Content
******************************************************************************/

.tupay-blocks > * {
 display: block !important;
}

.tupay-inline-spacing > * {
 margin: 1rem 0.375rem 0 0 !important;
}

/* ? .tupay-vertical-spacing class is used to have vertical margins between elements. To remove margin-top from the first-child, use .tupay-only-element class with .tupay-vertical-spacing class. For example, we have used this class in forms-input-groups.html file. */
.tupay-vertical-spacing > * {
 margin-top: 1rem !important;
 margin-bottom: 0 !important;
}
.tupay-vertical-spacing.tupay-only-element > :first-child {
 margin-top: 0 !important;
}

.tupay-vertical-spacing-lg > * {
 margin-top: 1.875rem !important;
 margin-bottom: 0 !important;
}
.tupay-vertical-spacing-lg.tupay-only-element > :first-child {
 margin-top: 0 !important;
}

.tupay-vertical-spacing-xl > * {
 margin-top: 5rem !important;
 margin-bottom: 0 !important;
}
.tupay-vertical-spacing-xl.tupay-only-element > :first-child {
 margin-top: 0 !important;
}

.rtl-only {
 display: none !important;
 text-align: left !important;
 direction: ltr !important;
}

[dir="rtl"] .rtl-only {
 display: block !important;
}

/* Dropdown buttons going out of small screens */
@media (max-width: 576px) {
 #dropdown-variation-tupay .btn-group .text-truncate {
  width: 254px;
  position: relative;
 }
 #dropdown-variation-tupay .btn-group .text-truncate::after {
  position: absolute;
  top: 45%;
  right: 0.65rem;
 }
}

/*
* Layout tupay
******************************************************************************/

.layout-tupay-wrapper {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-align: center;
 -ms-flex-align: center;
 align-items: center;
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
 -ms-flex-direction: column;
 flex-direction: column;
 margin-top: 1rem;
}
.layout-tupay-placeholder img {
 width: 900px;
}
.layout-tupay-info {
 text-align: center;
 margin-top: 1rem;
}

/*START menu */

._1ekcz {
 -ms-flex-pack: justify;
 justify-content: space-between;
 -ms-flex-wrap: wrap;
 flex-wrap: wrap;
 /*max-width: 450px;*/
}

._1ekcz,
._1gnKW .WX4qm {
 display: -ms-flexbox;
 display: flex;
}

.tupaymenu {
 display: inline-block;
 width: 33%;
 text-align: center;
 padding: 10px 0 5px;
 border-bottom: 2px solid transparent;
 vertical-align: top;
 -webkit-transition: background-color 0.1s;
 -o-transition: background-color 0.1s;
 transition: background-color 0.1s;
}

.tupaymenu img {
 width: 100%;
 height: 35px;
 /*display: block;*/
 margin: auto;
 margin-bottom: 8px;
 vertical-align: middle;
}

.tupaymenu {
 text-align: center;
}

.tupaymenu span {
 font-size: 11px;
 font-weight: 400;
 /*color: rgba(0,0,0,.54);*/
 color: #000000;
 display: block;
 margin-top: 8px;
 line-height: 1.35em;
 -webkit-transition: color 0.1s;
 -o-transition: color 0.1s;
 transition: color 0.1s;
 overflow: hidden;
 white-space: nowrap;
 -o-text-overflow: ellipsis;
 text-overflow: ellipsis;
}

/*select group radio start*/
.selectgroup {
 display: -ms-inline-flexbox;
 display: inline-flex;
}

.w-100 {
 width: 100% !important;
}

.selectgroup-item {
 -ms-flex-positive: 1;
 flex-grow: 1;
 position: relative;
 font-weight: 400 !important;
}

.selectgroup-input {
 opacity: 0;
 position: absolute;
 z-index: -1;
 top: 0;
 left: 0;
}

.selectgroup-input:checked + .selectgroup-button {
 border-color: #1572e8;
 z-index: 1;
 color: #1572e8;
 background: rgba(21, 114, 232, 0.15);
}

.selectgroup-item:not(:last-child) .selectgroup-button {
 border-top-right-radius: 0;
 border-bottom-right-radius: 0;
}

.selectgroup-button-icon {
 padding-left: 0.5rem;
 padding-right: 0.5rem;
 font-size: 1rem;
}

.selectgroup-button {
 display: block;
 border: 1px solid rgba(0, 40, 100, 0.12);
 text-align: center;
 padding: 0.375rem 1rem;
 position: relative;
 cursor: pointer;
 border-radius: 3px;
 color: #9aa0ac;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
 font-size: 14px;
 line-height: 1.5rem;
 min-width: 2.375rem;
}

/*select group radio end*/

/*image operator pulsa*/
.sc-axis {
 background-image: url("../img/sc/axis.png");
 background-color: white;
 background-repeat: no-repeat;
 background-size: auto 26px;
 background-position: 98% 50%;
}
.sc-byu {
 background-image: url("../img/sc/byu.png");
 background-color: white;
 background-repeat: no-repeat;
 background-size: auto 26px;
 background-position: 98% 50%;
}
.sc-indosat {
 background-image: url("../img/sc/indosat.png");
 background-color: white;
 background-repeat: no-repeat;
 background-size: auto 26px;
 background-position: 98% 50%;
}
.sc-smartfren {
 background-image: url("../img/sc/smartfren.png");
 background-color: white;
 background-repeat: no-repeat;
 background-size: auto 26px;
 background-position: 98% 50%;
}
.sc-telkomsel {
 background-image: url("../img/sc/telkomsel.png");
 background-color: white;
 background-repeat: no-repeat;
 background-size: auto 26px;
 background-position: 98% 50%;
}
.sc-three {
 background-image: url("../img/sc/three.png");
 background-color: white;
 background-repeat: no-repeat;
 background-size: auto 26px;
 background-position: 98% 50%;
}
.sc-axiata {
 background-image: url("../img/sc/axiata.png");
 background-color: white;
 background-repeat: no-repeat;
 background-size: auto 26px;
 background-position: 98% 50%;
}
.copy {
 cursor: pointer;
}
/*img operator pulsa end*/

/*pilihan deposit*/
.list-group1 input[type="radio"] {
 display: none;
}

.list-group-item {
 position: relative;
 display: block;
 color: var(--bs-body-color); /* */
 text-decoration: none;
 background: #f8f9fa;
 border-radius: 1rem !important;
 user-select: none;
}

.list-group1 input[type="radio"] + .list-group-item {
 text-align: center;
 cursor: pointer;
 padding: 0.5rem 1rem;
 font-size: 12px;
 background: #f8f9fa;
 border-radius: 1rem !important;
 border: 2px solid rgba(237, 237, 237, 1);
 width: 100%;
}

.list-group1 input[type="radio"]:checked + .list-group-item {
 background-color: rgba(233, 231, 253, 1);
 border: 2px solid #7367f0;
 color: #7367f0;
 font-size: 12px !important;
 display: block;
}

.list-group1 input[type="radio"]:hover:not(:checked) + .list-group-item {
 border: 2px solid #7367f0;
}

.info-top {
 margin-top: 7px;
}

.info-bottom {
 margin-top: 7px;
 margin-bottom: 3px;
}
/*end pilihan deposit*/