:root {
  --dynamic-height: 58px;
}
.wapper-detail-and-qr {
    display: flex;
    gap: 10px;
    align-items: center;
}
.parent-item-menu-accordion.accordion-item {
  position: relative;
}

.accordion-collapse.collapse,
.accordion-collapse {
  position: absolute;
  left: 0;
  background-color: #fff;
  width: 100%;
  box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.37);
  -webkit-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.37);
  -moz-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.37);
  height: 0 !important;
}

.accordion-collapse.collapse.show {
  height: fit-content !important;
}

.header-list-lang {
  position: relative;
}

.wrapper-header-language-items {
  position: absolute;
  left: 0;
  background: #ffff;
  padding: 10px;
  border-radius: 8px;
  width: 155px;
  box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.37);
  -webkit-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.37);
  -moz-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.37);
  z-index: -1;
  opacity: 0;
  transition: 0.2s;
  visibility: hidden;
  bottom: -100px;
}

.wrapper-header-language-items::before {
    content: ";
    display: block;
    height: 20px;
    width: 100%;
    position: absolute;
    top: -20px;
    left: 0;
}

.header-list-lang:hover .wrapper-header-language-items {
  z-index: 200;
  opacity: 1;
  visibility: visible;
  border-radius: 4px;
  box-shadow: 0px 4px 10px 0px #00000014;
  padding: 16px;
}

.header-language-item {
  cursor: pointer;
}

.header-language-item:not(:last-child) {
  margin-bottom: 18px;
  display: block;
}

.menu-left-wrapper {
  overflow-y: inherit !important;
}

.comfirm-logout-wraper {
  display: none;
}

.comfirm-logout-wraper.active {
  display: block;
}

.btn-like-link {
  background-color: transparent !important;
  border: unset !important;
  padding: 0 !important;
  height: fit-content !important;
}

button.btn-like-link {
  height: fit-content !important;
}
/* css defaul  */
.btn {
  height: 54px !important;
  border-radius: 10px !important;
  font-weight: 500 !important;
}

.btn i.fa-refresh {
  display: none !important;
}
/* Button default*/
.btn-primary {
  background-color: var(--yellow-2, #ffc409) !important;
  color: var(--color-main, #00285a) !important;
  border: unset !important;
  font-size: 1rem !important;
}

.btn-primary:hover,
.btn-primary:focus {
  color: var(--color-main, #00285a) !important;
  border-color: unset !important;
  box-shadow: none !important;
  background-color: var(--yellow-2, #ffc409) !important;
}

.btn-primary:disabled {
  background-color: #f2f4f7 !important;
  color: #98a2b3 !important;
}

.btn-primary:disabled .arrow-right {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2217%22%20height%3D%2212%22%20viewBox%3D%220%200%2017%2012%22%20fill%3D%22none%22%3E%0A%3Cpath%20d%3D%22M16.5303%206.53033C16.8232%206.23744%2016.8232%205.76256%2016.5303%205.46967L11.7574%200.696699C11.4645%200.403806%2010.9896%200.403806%2010.6967%200.696699C10.4038%200.989593%2010.4038%201.46447%2010.6967%201.75736L14.9393%206L10.6967%2010.2426C10.4038%2010.5355%2010.4038%2011.0104%2010.6967%2011.3033C10.9896%2011.5962%2011.4645%2011.5962%2011.7574%2011.3033L16.5303%206.53033ZM0%206.75H16V5.25H0V6.75Z%22%20fill%3D%22%2398A2B3%22%2F%3E%0A%3C%2Fsvg%3E");
}

.btn-back button:hover,
.btn-back button:focus {
  background-color: #fffaeb !important;
  color: #934d0d !important;
  border-color: unset !important;
  box-shadow: none !important;
}
.wrapper-btn-fifter > fieldset > .fieldset-body button {
  font-size: 0.875rem !important;
}
/* Button short btn*/

.btn-popup .btn {
  width: 148px !important;
}

.btn-short .btn {
  width: 168px;
}

.btn-back button {
  color: #934d0d !important;
  background-color: #fffaeb !important;
  border: none !important;
  font-size: 1rem;
}

button .arrow-right,
button .arrow-left,
button .arrow-right-disable {
  display: inline-block;
  height: 12px;
  width: 17px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

button.btn-reset {
  padding: 0 18px;
}
/* logo-success */
.logo-success-agent {
  height: 52px;
  width: 157px;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin-bottom: 57px;
}
.logo-success {
  height: 150px;
  width: 150px;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin-bottom: 42px;
}
.box-sucsses fieldset > .fieldset-body {
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* logo-success */

/* s? d?ng cho vi?c css m?i trên am d? file cu s? tách page */
/* Reports - namnv */
.status-report-active,
.status-report-success {
  color: #517664;
}

.status-report-block,
.status-report-delete {
  color: #d80027;
}

.status-report-pending,
.status-report-pending-for-delete,
.status-report-pending-for-approve {
  color: #8a6e19;
}

.status-report-new {
  color: #2d404a;
}

.status-report-reject {
  color: #d80027;
}
/* end */

/* Notification - namnv */
.ib-bottom-notification-menu {
  position: relative;
}
.ib-bottom-notification-menu .have-mess-unread span {
  position: absolute;
  font-size: 0.5rem;
  top: -8px;
  left: 52%;
  background-color: var(--bs-red);
  color: var(--white-color);
  font-weight: 500;
  border-radius: 50%;
  min-width: 18px;
  min-height: 18px;
  padding: 2px 0.5px 0;
}
.push-toash .push-toast-header .push-toast-title {
  line-height: 22px;
}

.push-toash {
  background: #fff;
  border-radius: 0 0 6px 6px !important;
  position: fixed;
  z-index: 100000000;
  right: 0 !important;
  left: 0;
  bottom: unset !important;
  top: -100%;
  display: flex;
  padding: 15px;
  width: 100vw !important;
  box-shadow: 0px 0px 18px 5px rgba(120, 101, 101, 0.75);
  animation: movetopnoti 0.5s linear forwards !important;
}

@keyframes movetopnoti {
  0% {
    top: -100%; /* Ph?n t? ? bên ph?i */
  }
  100% {
    top: 0px; /* Ph?n t? ? bên trái */
  }
}

.push-toash .push-toast-header .push-toast-title {
  line-height: 22px;
}
/* end */
/* loading */
.custom-csc-loader {
  display: flex;
  justify-content: center;
}
.loader-customer {
  width: 30px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 4px solid lightblue;
  border-right-color: #00285a;
  animation: l2 1s infinite linear;
}
@keyframes l2 {
  to {
    transform: rotate(1turn);
  }
}
/* end loading */

/* select custom in reactjs */

.option-custom {
  position: relative;
}

.select-input {
  display: flex;
  align-items: center;
  cursor: pointer;
  border: 1px solid #ccc;
  padding: 0 10px;
  position: relative;
  height: 42px;
}

.select-input::before {
  position: absolute;
  content: "";
  right: 8px;
  top: 18px;
  border-top: 5px solid #252525;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
}

.select-icon {
  font-size: 20px;
  margin-right: 5px;
  color: #84ce3f;
  flex-basis: 30px;
}

.select-title {
  color: #252525;
}

.select-title.placeholder {
  color: #ccc;
}

.select-list {
  border: 1px solid #ccc;
  border-top: none;
  position: absolute;
  left: 0;
  right: 0;
  z-index: 10;
  background: #fff;
  overflow: auto;
  max-height: 200px;
}

.select-item {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 10px;
}

.select-item:hover {
  background: #eee;
}

.select-input.form-control.active::before {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}

/* Text field*/
.input-custom-placeholder,
input::placeholder {
  color: var(--gray-400, #98a2b3) !important;
}

.col-form-label {
  padding-bottom: 4px !important;
  font-size: 0.8125rem !important;
  line-height: 22px !important;
  color: #444444 !important;
}

.form-control.is-invalid {
  background-image: none !important;
}

.formio-component-time input,
.formio-component-email input,
.form-control.dropdown,
.formio-component-datetime .input,
.formio-component-createdDate .form-control,
.formio-component-number input,
.formio-component-phoneNumber input,
.formio-component-textfield input,
.input-group > .input-group-append > .input-group-text {
  height: 48px !important;
  box-shadow: none !important;
  border-radius: 8px !important;
  margin-bottom: 11px !important;
}
.form-control.dropdown[disabled] {
  background-color: #e9ecef;
  opacity: 1;
}
/* Date field*/
.formio-component-datetime .input {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right: none !important;
}

.input-group > .input-group-append > .input-group-text {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  background-color: #fff;
  border-left: none !important;
}

.has-error .input-group-text {
  border-color: #dc3545;
}

.popup-custom-body
  .formio-component-datetime:not(.has-error)
  .form-control:focus {
  border-color: #ced4da;
}

.date-custom.formio-component-datetime:not(.has-error) .form-control:focus {
  border-color: #ced4da;
}

.wapper-fav-cus .has-error .form-control:focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

/* Select field*/
.choices__item.choices__item--selectable {
  margin-top: 4px;
}

.wrapper-btn-fifter {
  padding: 0 !important;
  margin-bottom: 0 !important;
}
.choices__placeholder {
  opacity: unset !important;
  color: var(--gray-400, #98a2b3);
}
.wrapper-watermark-success {
  position: relative;
}
.wrapper-detail-scroll-ios {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -999;
}
/* end css default  */

.am-not-home-page-header {
  display: flex;
  align-items: center;
  padding: 12px 20px 18px 20px;
  height: var(--dynamic-height);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: var(--color-main);
  /* box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.08); */
}

.am-not-home-page-header-title {
  width: fit-content !important;
  color: var(--white-color, #fff);
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  padding: 6px 20px;
  margin: 0 auto;
}

/* menu left  */
.menu-left {
  position: fixed;
  left: -100%;
  right: unset;
  transition: left 0.5s, opacity 0.5s;
  bottom: 0;
  top: 0;
  z-index: 30000;
  opacity: 0;
}
.menu-left.show {
  left: 0;
  right: 0;
  opacity: 1;
  padding-right: 10% !important;
  background-color: transparent;
}
.menu-left-wrapper {
  height: 100%;
  background-color: var(--white-color);
  /* position: relative; */
  overflow-y: auto;
}

.menu-left-header {
  padding: 23px 16px;
  display: flex;
  align-items: center;
  border-radius: 0px 0px 8px 8px;
  background-color: var(--color-main);
}

.menu-left-user-info {
  padding: 32px 16px;
}
.avatar-menu {
  display: flex;
  align-items: center;
  gap: 18px;
}
.avatar-menu-image {
  width: 50px;
  height: 50px;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}
.menu-left-user-info-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.menu-left-user-info-content_user-name {
  color: #1b1b1b;
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
}
.menu-left-user-info-content_last-login {
  color: #71717a;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
}

.botton-logout-menu {
  text-align: center;
  position: absolute;
  left: 0;
  right: 10%;
  bottom: 0;
  cursor: pointer;
  margin-bottom: 0;
  /* background: var(--Gradient, linear-gradient(152deg, var(--color-main) 7.86%, #112543 93.31%)) !important; */
  background-color: var(--color-main) !important;
  color: var(--white-color) !important;
  padding: 15px;
}

.logo-menu {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
}
.logo-Ib {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 165px;
  height: 50px;
}

.ib-accordion-waper {
  padding: 0 10px;
  height: 100%;
}
.parent-item-menu-accordion {
  border: none !important;
}
.accordion-button {
  border-radius: 10px;
  background-color: #eff8ff !important;
  box-shadow: unset !important;
  position: relative;
  padding: 15px !important;
}

.menu-not-child .accordion-button{
background-color: transparent !important;
}
.accordion-button svg {
  font-size: 1rem;
  font-weight: 100;
  position: absolute;
  right: 16px;
  top: 15px;
}
.accordion-button.collapsed {
  background-color: var(--white-color) !important;
}
.accordion-button::after {
  opacity: 0 !important;
}
.accordion-button.collapsed::after {
  opacity: 0 !important;
}
.accordion-button svg {
  transform: rotate(90deg);
  transition: transform 0.2s ease-in-out;
}

.menu-not-child .wraper-header-title svg,
.accordion-button.collapsed svg {
  transform: rotate(0deg);
}
.ib-accordion-waper .parent-item-menu-accordion .menu-collapse-item--body > ul,
.ib-accordion-waper
  .parent-item-menu-accordion
  > .accordion-collapse
  > .menu-collapse-item--body
  > ul {
  position: relative;
}
.ib-accordion-waper
  .parent-item-menu-accordion
  .menu-collapse-item--body
  > ul:before,
.ib-accordion-waper
  .parent-item-menu-accordion
  > .accordion-collapse
  > .menu-collapse-item--body
  > ul:before {
  content: "";
  position: absolute;
  left: 27px;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: #f2f4f7;
  display: block;
}
.ib-accordion-waper .bg-custom--light-orange .menu-collapse-item--body ul li {
  margin-left: 0 !important;
  list-style: none;
}
.ib-accordion-waper .bg-custom--light-orange .menu-collapse-item--body ul li {
  padding: 5px;
  margin-bottom: 0.8rem;
  margin-left: 47px;
  display: block;
  padding-left: 14px;
}
.ib-accordion-waper .bg-custom--light-orange .menu-collapse-item--body ul li a,
.ib-accordion-waper
  .bg-custom--light-orange
  .menu-collapse-item--header
  .accordion-button
  i,
.ib-accordion-waper
  .bg-custom--light-orange
  .menu-collapse-item--header
  .accordion-button {
  color: #1d2939;
  font-size: 0.8125rem;
  font-style: normal;
  font-weight: 400;
  text-decoration: none;
  display: block;
}

.menu-collapse-item--header .accordion-button .wraper-header-title a,
.menu-collapse-item--header .accordion-button .wraper-header-title {
  display: flex;
  align-items: center;
  gap: 20px;
  color: #101828;
  font-size: 0.875rem;
  font-weight: 400;
  text-decoration: none;
  width:100%;
}
.custom-wraper-menu-links {
    width: 100%;            
    padding: 0 !important;
    background: transparent;
    border: none;
    text-align: left;
}


.wraper-header-title div:first-child {
  width: 24px !important;
  flex-shrink: 0;   
}
.menu-collapse-item--header .accordion-button .wraper-header-title > div {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 20px;
  height: 20px;
}

.custom-input-number input {
  margin-bottom: 6px !important;
  height: 45px !important;
  border-radius: 0.375rem !important;
  padding: 10px;
}

.transactions-wapper {
  padding: 16px;
  background-color: var(--white-color, #fff);
  margin: 16px 16px 0 16px !important;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.menu-left
  > .menu-left-wrapper
  .menu-left-header
  .menu-left-header_icon-close::before {
  content: "";
  position: absolute;
  opacity: 0;
  z-index: -1;
  transition: right 0.5s, opacity 0.5s;
}
.menu-left.show
  > .menu-left-wrapper
  .menu-left-header
  .menu-left-header_icon-close::before {
  content: "";
  position: absolute;
  left: 0;
  right: -100%;
  bottom: 0;
  top: 0;
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: -1;
}

.menu-not-child .wraper-header-title svg,
.accordion-button.collapsed svg {
  transform: rotate(0deg);
}
.accordion-button svg {
  transform: rotate(90deg);
  transition: transform 0.2s ease-in-out;
}
.accordion-button svg {
  font-size: 1rem;
  font-weight: 100;
  position: absolute;
  right: 16px;
  top: 15px;
}
.menu-collapse-item--header .accordion-button .wraper-header-title a,
.menu-collapse-item--header .accordion-button .wraper-header-title {
  display: flex;
  align-items: center;
  gap: 20px;
  color: #101828;
  font-size: 0.875rem;
  font-weight: 400;
  text-decoration: none;
}

/* end menu left  */

.default-body {
  padding: 20px 16px 0 16px;
  background-color: var(--Gray-50, #f9fafb);
  height: calc(100vh - 59px);
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  margin-top: 59px;
  overflow: scroll;
}

.form-group {
  margin-bottom: 0 !important;
}

.am-middle-content,
.main-content > .content,
.main-content {
  min-height: 100vh;
  background-color: white;
}

.page-home .am-middle-content {
  background-color: #f1f2f3 !important;
}

.wapper-maincolor {
  background-color: var(--color-main);
  height: 100vh;
  overflow-y: scroll;
}

.ca-wapper {
  background-color: var(--color-main);
}

.favorit-menu-wrapper {
  padding: 0 16px 0 16px;
  overflow: hidden;
}

.icon-x {
  width: 12px;
  height: 12px;
}

.detail-cash-date {
  display: flex;
  align-items: center;
  border-radius: 12px;
  background: var(--white-color, #fff);
  padding: 12px 0 0px 18px;
}

/* transaction  */
.transaction-cash {
  display: flex;
  justify-content: space-between;
  padding: 10px 16px 12px;
  margin-bottom: 14px;
}

.transaction-cash div:first-child {
  display: flex;
}

.transaction-cash .icon-cash-in,
.transaction-cash .icon-cash-out {
  margin-top: 11px;
  margin-right: 10px;
}

.transaction-cash .transaction-header {
  color: var(--gray-800, #1d2939);
  margin-bottom: 0;
  line-height: 24px;
  font-size: 0.8125rem;
  font-style: normal;
  font-weight: 500;
  text-transform: capitalize;
}

.transaction-cash .transaction-header-info {
  color: var(--gray-500, #667085);
  font-size: 0.6875rem;
  font-weight: 400;
  line-height: 20px;
  margin-top: 4px;
  max-width: calc(100vw - 236px);
}

.transaction-cash .transaction-info {
  text-align: end;
  font-size: 0.8125rem;
  font-style: normal;
  font-weight: 600;
  line-height: 22px;
}

.transaction-info .transaction-time {
  margin-bottom: 0;
  color: var(--gray-500, #667085);
  font-size: 0.6875rem;
  font-weight: 400;
  line-height: 22px;
  margin-top: 4px;
}

.trans-cash-detail-content {
  padding: 5px 16px;
  border-radius: 6px;
  background-color: #f9fafb;
  margin-bottom: 12px;
}

.trans-detail-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 18px;
}

.wrapper-nrc {
  min-height: calc(100vh - var(--dynamic-height) - 23px) !important;
  margin-top: 82px;
  padding-bottom: 100px !important;
}
.custom-csc-loader {
  display: flex;
  justify-content: center;
}
.loader-customer {
  width: 30px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 4px solid lightblue;
  border-right-color: #00285a;
  animation: l2 1s infinite linear;
}
@keyframes l2 {
  to {
    transform: rotate(1turn);
  }
}
/* end transacttion  */
.wapper-btn-notic-exp .btn-signout {
  background-color: var(--warning-100);
  border: unset !important;
}
.wraper-page-middle-content {
  padding: 30px 16px 0 16px;
  background-color: var(--white-color, #fff);
  min-height: calc(100vh - 78px);
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.page-amrequesthistorydetail .child-border-radius-header,
.page-amrequesthistorydetail .wrapper-nrc {
  background-color: #f1f2f3;
}

.page-amrequesthistorydetail
  .wrapper-top-up-amount
  .choos-top-up
  .top-up-amount-radio,
.custom-checkbox .form-check {
  width: auto;
  margin-right: 0 !important;
  margin-bottom: 10px;
  padding-left: 0 !important;
}

.page-amrequesthistorydetail .top-up-amount-radio label,
.custom-checkbox .form-check label {
  padding: 11px 15px;
  width: 100%;
  cursor: pointer;
  text-align: center;
  display: flex;
  justify-content: center;
  color: #475467;
  border: 1px solid #dedede;
  background-color: #ffffff;
  border-radius: 8px;
  font-weight: 500;
  font-size: 0.8rem;
}

.cash-detail-title {
  color: var(--color-main, #00285a);
  font-size: 0.82rem;
  font-style: normal;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.formio-form .list-inline {
  display: none;
}
/* wizard */
.menu-left .header-wizard {
  display: none !important;
}
.header-wizard > fieldset {
  height: 0;
}
.header-wizard {
  height: unset !important;
  position: fixed;
  right: 0;
  left: 0;
  top: 57px;
  background-color: var(--color-main);
  padding-bottom: 23px;
  z-index: 1000;
}
.wizard-item {
  width: 40px;
  height: 4px;
  border-radius: 10px;
  background-color: #fff;
  opacity: 0.4;
}
.wizard-item.active {
  background-color: #ffc409;
  opacity: 1;
}
.wizard-list {
  display: flex;
  list-style: none;
  gap: 10px;
  padding-left: 0px !important;
  justify-content: center;
  align-items: center;
  top: 54px;
  left: 0;
  right: 0;
}
/* end-wizard */

.wrapper-takepic-btn > fieldset > .fieldset-body {
  display: flex;
  justify-content: space-between;
  gap: 17px;
}

.takepic-wrapper {
  display: flex;
}

.takepic-front,
.takepic-back,
.takepic-sef,
.takepic-passport {
  width: calc(100% / 3);
  position: relative;
}

.takepic-wrapper img,
.btn-takepic img {
  max-width: 90%;
  position: absolute;
  top: 0;
}

.btn-takepic {
  background-color: #ffffff !important;
  width: 100%;
  height: 100px;
  display: flex;
  align-items: end;
  position: relative;
  max-width: calc(100vw / 3 - 17px);
}

.btn-takepic-border {
  border: 2px dashed #ddd;
}
.btn-takepic button,
.btn-takepic button:focus,
.btn-takepic button:hover {
  background-color: #ffffff !important;
  height: 100% !important;
  border: none !important;
  background-repeat: no-repeat;
  background-position-y: 30%;
  background-position-x: center;
  font-size: 11px !important;
  padding: 45px 0 0 0;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.btn-takepic .btn-takepic-front {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2224%22%20viewBox%3D%220%200%2032%2024%22%20fill%3D%22none%22%3E%0A%3Cg%20clip-path%3D%22url(%23clip0_3150_1937)%22%3E%0A%3Cpath%20d%3D%22M15.9982%200.75H28.1617C30.3235%200.75%2031.7518%202.17676%2031.7518%204.33533C31.7518%209.44388%2031.7518%2014.5524%2031.7518%2019.661C31.7518%2021.8214%2030.3254%2023.25%2028.1654%2023.25H3.83826C1.68199%2023.25%200.25%2021.8196%200.25%2019.6647V4.33901C0.25%202.18044%201.68014%200.75%203.83641%200.75H15.9982ZM9.89056%2011.9945C9.74128%2012.0258%209.64361%2012.0535%209.54224%2012.0664C8.22823%2012.2648%207.02665%2012.9214%206.14982%2013.9202C5.27299%2014.919%204.77737%2016.1956%204.75053%2017.5245C4.75053%2018.2619%205.21127%2018.7448%205.94477%2018.7448C8.89352%2018.7448%2011.846%2018.7448%2014.8021%2018.7448C15.5393%2018.7448%2016.0018%2018.2656%2015.9982%2017.5245C15.9726%2016.1947%2015.4776%2014.9167%2014.6006%2013.9168C13.7237%2012.9169%2012.5214%2012.2594%2011.2064%2012.0608C11.1069%2012.0479%2011.0111%2012.0184%2010.9116%2011.9982C12.6716%2011.6295%2013.8603%2010.1198%2013.7405%208.37965C13.6788%207.55899%2013.3211%206.78872%2012.7338%206.21224C12.1466%205.63576%2011.37%205.29235%2010.5485%205.24594C8.78294%205.17405%207.327%206.38698%207.03212%208.17504C6.7483%209.9041%207.86146%2011.4157%209.89056%2011.9945ZM22.1518%2010.8774C23.4161%2010.8774%2024.6822%2010.8774%2025.9465%2010.8774C26.1448%2010.8811%2026.3422%2010.8487%2026.5289%2010.7815C26.769%2010.6812%2026.9661%2010.4994%2027.0854%2010.2681C27.2047%2010.0368%2027.2387%209.77087%2027.1813%209.517C27.1246%209.25727%2026.9778%209.02597%2026.767%208.86403C26.5562%208.7021%2026.295%208.61998%2026.0294%208.63219C23.4493%208.63219%2020.8728%208.63219%2018.3%208.63219C18.1474%208.62515%2017.995%208.64936%2017.852%208.70331C17.7091%208.75727%2017.5787%208.83984%2017.4688%208.94598C17.3589%209.05211%2017.2718%209.17957%2017.2129%209.32055C17.1539%209.46153%2017.1244%209.61306%2017.1261%209.76585C17.1261%2010.4018%2017.6347%2010.8719%2018.3221%2010.8719C19.6012%2010.8885%2020.8746%2010.8756%2022.1518%2010.8756V10.8774ZM21.0755%2013.1263C20.1743%2013.1263%2019.2731%2013.1263%2018.3701%2013.1263C17.6329%2013.1263%2017.1187%2013.5927%2017.1242%2014.2581C17.1297%2014.9236%2017.6366%2015.3641%2018.3535%2015.3752H23.7663C24.4832%2015.3752%2024.9918%2014.9088%2024.9955%2014.2581C24.9992%2013.6074%2024.4887%2013.1281%2023.7478%2013.1263C22.8595%2013.1244%2021.9694%2013.1263%2021.0755%2013.1263Z%22%20fill%3D%22%2300285A%22%2F%3E%0A%3Cpath%20d%3D%22M9.89102%2011.9942C7.86375%2011.4173%206.74876%209.90572%207.03258%208.17665C7.32745%206.3886%208.78339%205.1812%2010.5508%205.25678C11.3723%205.30318%2012.1489%205.64659%2012.7361%206.22307C13.3234%206.79955%2013.6811%207.56982%2013.7428%208.39048C13.8589%2010.1232%2012.6739%2011.6256%2010.9139%2011.9942C11.0134%2012.0145%2011.1092%2012.044%2011.2087%2012.0569C12.5239%2012.256%2013.7263%2012.9141%2014.6029%2013.9148C15.4796%2014.9154%2015.974%2016.1941%2015.9986%2017.5243C15.9986%2018.2617%2015.5416%2018.7446%2014.8025%2018.7446C11.8538%2018.7446%208.90134%2018.7446%205.94522%2018.7446C5.20804%2018.7446%204.74914%2018.2617%204.75098%2017.5243C4.77653%2016.1944%205.27158%2014.9165%206.14852%2013.9165C7.02546%2012.9166%208.22777%2012.2592%209.5427%2012.0606C9.64959%2012.0514%209.74174%2012.0237%209.89102%2011.9942Z%22%20fill%3D%22white%22%2F%3E%0A%3Cpath%20d%3D%22M22.1518%2010.8756C20.8746%2010.8756%2019.5993%2010.8756%2018.3221%2010.8756C17.6347%2010.8756%2017.1316%2010.3982%2017.126%209.76962C17.1244%209.61682%2017.1539%209.4653%2017.2128%209.32432C17.2718%209.18334%2017.3589%209.05588%2017.4688%208.94974C17.5787%208.84361%2017.7091%208.76104%2017.852%208.70708C17.995%208.65312%2018.1474%208.62892%2018.3%208.63596C20.8802%208.63596%2023.4566%208.63596%2026.0294%208.63596C26.2949%208.62374%2026.5562%208.70587%2026.767%208.8678C26.9778%209.02973%2027.1246%209.26103%2027.1813%209.52077C27.2387%209.77464%2027.2047%2010.0406%2027.0854%2010.2719C26.9661%2010.5032%2026.769%2010.685%2026.5289%2010.7853C26.3422%2010.8524%2026.1448%2010.8849%2025.9465%2010.8812C24.6822%2010.8885%2023.4161%2010.8756%2022.1518%2010.8756Z%22%20fill%3D%22%235CACE3%22%2F%3E%0A%3Cpath%20d%3D%22M21.0755%2013.1263C21.9675%2013.1263%2022.8576%2013.1263%2023.7478%2013.1263C24.485%2013.1263%2025.001%2013.5945%2024.9955%2014.2581C24.9899%2014.9217%2024.4831%2015.3641%2023.7662%2015.3752H18.3553C17.6383%2015.3752%2017.1297%2014.9088%2017.126%2014.2581C17.1223%2013.6074%2017.6291%2013.1282%2018.3718%2013.1263C19.2749%2013.1245%2020.1761%2013.1263%2021.0755%2013.1263Z%22%20fill%3D%22%235CACE3%22%2F%3E%0A%3C%2Fg%3E%0A%3Cdefs%3E%0A%3CclipPath%20id%3D%22clip0_3150_1937%22%3E%0A%3Crect%20width%3D%2231.5%22%20height%3D%2222.5%22%20fill%3D%22white%22%20transform%3D%22translate(0.25%200.75)%22%2F%3E%0A%3C%2FclipPath%3E%0A%3C%2Fdefs%3E%0A%3C%2Fsvg%3E");
}

.btn-takepic .btn-takepic-back {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2224%22%20viewBox%3D%220%200%2032%2024%22%20fill%3D%22none%22%3E%0A%3Cg%20clip-path%3D%22url(%23clip0_3150_1949)%22%3E%0A%3Cpath%20d%3D%22M0.274131%207.51758H31.75V7.8052C31.75%2011.8126%2031.75%2015.8192%2031.75%2019.825C31.7654%2020.5757%2031.5268%2021.3096%2031.073%2021.9076C30.6192%2022.5057%2029.9768%2022.9327%2029.25%2023.1194C28.9345%2023.2015%2028.6097%2023.2421%2028.2838%2023.2403C20.1099%2023.2403%2011.9368%2023.2403%203.76447%2023.2403C1.7379%2023.2475%200.276546%2021.778%200.274131%2019.7694C0.2693%2015.791%200.2693%2011.8199%200.274131%207.85596V7.51758ZM21.5978%2017.6207C22.6968%2017.6207%2023.7983%2017.6207%2024.8973%2017.6207C25.622%2017.6207%2026.122%2017.1542%2026.1268%2016.5065C26.1275%2016.351%2026.0961%2016.197%2026.0347%2016.0542C25.9733%2015.9114%2025.8831%2015.7828%2025.7697%2015.6764C25.6564%2015.57%2025.5224%2015.4881%2025.376%2015.4359C25.2296%2015.3837%2025.0741%2015.3622%2024.9191%2015.3729C22.7274%2015.3729%2020.5382%2015.3729%2018.3514%2015.3729C17.6268%2015.3729%2017.1437%2015.8563%2017.1437%2016.504C17.1437%2017.1518%2017.6413%2017.6231%2018.3659%2017.6255C19.4432%2017.628%2020.5205%2017.6255%2021.5978%2017.6255V17.6207Z%22%20fill%3D%22%2300285A%22%2F%3E%0A%3Cpath%20d%3D%22M31.7494%205.24565H0.324315C-0.146699%202.42016%201.66248%200.75%203.7905%200.75C11.9435%200.764502%2020.094%200.764502%2028.2422%200.75C30.3026%200.75%2031.7422%202.20021%2031.7494%204.27401V5.24565Z%22%20fill%3D%22%235CACE3%22%2F%3E%0A%3C%2Fg%3E%0A%3Cdefs%3E%0A%3CclipPath%20id%3D%22clip0_3150_1949%22%3E%0A%3Crect%20width%3D%2231.5%22%20height%3D%2222.5%22%20fill%3D%22white%22%20transform%3D%22translate(0.25%200.75)%22%2F%3E%0A%3C%2FclipPath%3E%0A%3C%2Fdefs%3E%0A%3C%2Fsvg%3E");
}

.btn-takepic .btn-takepic-sef {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%20fill%3D%22none%22%3E%0A%3Cg%20clip-path%3D%22url(%23clip0_3150_1923)%22%3E%0A%3Cpath%20d%3D%22M0.400391%2019.8427C0.453454%2019.6473%200.560843%2019.471%200.710099%2019.3342C0.859354%2019.1973%201.04436%2019.1056%201.24364%2019.0697C1.38069%2019.0484%201.52064%2019.0554%201.65488%2019.0902C1.78911%2019.1251%201.91479%2019.187%202.02414%2019.2723C2.1335%2019.3576%202.22422%2019.4644%202.29072%2019.5861C2.35722%2019.7077%202.39807%2019.8418%202.41077%2019.9798C2.46397%2020.6364%202.57231%2021.2872%202.73465%2021.9256C3.37658%2023.8889%204.72461%2025.0908%206.79627%2025.4263C7.22519%2025.4934%207.65703%2025.5342%208.08595%2025.5984C8.34468%2025.6292%208.5811%2025.76%208.74467%2025.9627C8.90824%2026.1655%208.98599%2026.4242%208.9613%2026.6836C8.94772%2026.9395%208.83322%2027.1796%208.64289%2027.3513C8.45257%2027.523%208.20193%2027.6123%207.9459%2027.5996C6.89256%2027.5004%205.8188%2027.4362%204.83841%2026.9899C2.40202%2025.8697%200.919764%2024.0289%200.557953%2021.3393C0.514186%2020.9979%200.452912%2020.6625%200.400391%2020.3211V19.8427Z%22%20fill%3D%22%2300285A%22%2F%3E%0A%3Cpath%20d%3D%22M8.21142%200.399414C8.2406%200.416917%208.26686%200.440255%208.29603%200.454841C8.51385%200.534717%208.69762%200.68696%208.8166%200.886096C8.93558%201.08523%208.98254%201.31918%208.94963%201.54879C8.91324%201.78319%208.79747%201.998%208.62167%202.15729C8.44588%202.31659%208.22071%202.41072%207.98383%202.42395C7.43236%202.49688%206.87505%202.54939%206.33234%202.66316C5.36898%202.89092%204.49636%203.40296%203.82776%204.13281C3.15915%204.86266%202.72544%205.7766%202.58293%206.756C2.52749%207.16733%202.46913%207.57865%202.42245%207.98998C2.40769%208.2251%202.31275%208.44806%202.15345%208.62166C1.99415%208.79525%201.78013%208.90899%201.5471%208.9439C1.31191%208.97449%201.07344%208.9218%200.873045%208.79498C0.67265%208.66817%200.522979%208.47522%200.449994%208.24961C0.435214%208.21759%200.418654%208.18643%200.400391%208.15626L0.400391%207.69242C0.470419%207.2315%200.552118%206.77059%200.613392%206.30675C0.954778%203.65793%203.34156%201.13747%205.95885%200.66488C6.52783%200.565695%207.07055%200.48693%207.62785%200.399414H8.21142Z%22%20fill%3D%22%2300285A%22%2F%3E%0A%3Cpath%20d%3D%22M20.3262%200.399414C20.866%200.484013%2021.4058%200.565695%2021.9456%200.656128C24.6183%201.10829%2027.043%203.62292%2027.3931%206.3155C27.4573%206.79976%2027.5244%207.2811%2027.5886%207.7741C27.6151%207.91012%2027.6133%208.05011%2027.5835%208.18542C27.5536%208.32072%2027.4963%208.44846%2027.415%208.56071C27.3338%208.67297%2027.2303%208.76735%2027.1111%208.83801C26.9919%208.90868%2026.8595%208.95412%2026.722%208.97153C26.5845%208.98894%2026.4449%208.97794%2026.3118%208.93922C26.1787%208.90049%2026.055%208.83487%2025.9484%208.74641C25.8417%208.65794%2025.7543%208.54853%2025.6917%208.42494C25.629%208.30135%2025.5924%208.16621%2025.5841%208.0279C25.4732%207.214%2025.4645%206.37676%2025.1143%205.61537C24.3265%203.90006%2023.0543%202.82944%2021.1577%202.57565L19.9498%202.4152C19.7283%202.39079%2019.5208%202.29462%2019.3591%202.14135C19.1974%201.98808%2019.0902%201.78613%2019.054%201.5663C19.0204%201.34%2019.0641%201.109%2019.1779%200.91053C19.2917%200.712065%2019.469%200.557706%2019.6813%200.472344L19.8476%200.399414H20.3262Z%22%20fill%3D%22%2300285A%22%2F%3E%0A%3Cpath%20d%3D%22M14.0641%2014.644C15.3509%2014.6907%2016.7048%2014.7257%2018.0557%2014.7957C18.6346%2014.8012%2019.1904%2015.0231%2019.6138%2015.4178C20.0372%2015.8125%2020.2974%2016.3513%2020.3433%2016.9282C20.4206%2017.6847%2020.4206%2018.4471%2020.3433%2019.2036C20.1945%2020.6039%2019.1937%2021.5053%2017.7377%2021.7066C15.2448%2022.0464%2012.7172%2022.0464%2010.2243%2021.7066C8.68659%2021.5024%207.70037%2020.4901%207.6245%2018.944C7.57986%2018.2073%207.6033%2017.4681%207.69453%2016.7357C7.78153%2016.2152%208.04457%2015.7403%208.4397%2015.3904C8.83482%2015.0405%209.33808%2014.8368%209.86539%2014.8132C11.2368%2014.7345%2012.6169%2014.6936%2014.0641%2014.644Z%22%20fill%3D%22%235CACE3%22%2F%3E%0A%3Cpath%20d%3D%22M13.9335%2013.74C13.1706%2013.7417%2012.4242%2013.517%2011.7891%2013.0944C11.154%2012.6717%2010.6586%2012.0701%2010.3657%2011.3658C10.0728%2010.6614%209.99553%209.88602%2010.1437%209.13776C10.2919%208.38949%2010.6589%207.70203%2011.1982%207.16245C11.7375%206.62287%2012.4248%206.25544%2013.1732%206.10669C13.9215%205.95795%2014.6971%206.03458%2015.4018%206.32689C16.1065%206.6192%2016.7086%207.11403%2017.1318%207.74871C17.5551%208.38339%2017.7804%209.12937%2017.7792%209.89217C17.78%2010.3974%2017.6811%2010.8979%2017.4881%2011.3649C17.2951%2011.8319%2017.0119%2012.2562%2016.6547%2012.6136C16.2975%2012.9711%2015.8733%2013.2545%2015.4063%2013.4478C14.9394%2013.6411%2014.4389%2013.7403%2013.9335%2013.74Z%22%20fill%3D%22%235CACE3%22%2F%3E%0A%3Cpath%20d%3D%22M20.1801%2027.5994C19.5294%2027.5994%2019.0889%2027.2085%2019.0509%2026.6863C19.0272%2026.4226%2019.1082%2026.1601%2019.2763%2025.9554C19.4444%2025.7508%2019.6862%2025.6204%2019.9496%2025.5924C20.4398%2025.5224%2020.9329%2025.4786%2021.4085%2025.394C22.4354%2025.2128%2023.3781%2024.7099%2024.1003%2023.9579C24.8225%2023.206%2025.2869%2022.2439%2025.4264%2021.2107C25.4818%2020.7877%2025.5343%2020.3677%2025.5898%2019.9476C25.6199%2019.6895%2025.7475%2019.4527%2025.9466%2019.2856C26.1457%2019.1186%2026.4012%2019.0339%2026.6606%2019.0491C26.9168%2019.0597%2027.1586%2019.1706%2027.3338%2019.3578C27.509%2019.5449%2027.6036%2019.7934%2027.5972%2020.0497C27.4776%2021.4149%2027.3346%2022.7831%2026.5877%2023.9908C25.3884%2025.9279%2023.7078%2027.1443%2021.4085%2027.439L20.1801%2027.5994Z%22%20fill%3D%22%2300285A%22%2F%3E%0A%3C%2Fg%3E%0A%3Cdefs%3E%0A%3CclipPath%20id%3D%22clip0_3150_1923%22%3E%0A%3Crect%20width%3D%2227.2%22%20height%3D%2227.2%22%20fill%3D%22white%22%20transform%3D%22translate(0.400391%200.399414)%22%2F%3E%0A%3C%2FclipPath%3E%0A%3C%2Fdefs%3E%0A%3C%2Fsvg%3E");
}

.btn-takepic .btn-takepic-passport {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2230%22%20height%3D%2238%22%20viewBox%3D%220%200%2030%2038%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M18.092%204C18.7325%204.1409%2019.3462%204.33973%2019.8678%204.75616C20.254%205.05567%2020.5742%205.42991%2020.8086%205.85593C21.0431%206.28196%2021.187%206.75078%2021.2314%207.23366C21.2362%207.32309%2021.2362%207.41272%2021.2314%207.50215H4.97124L4.96094%207.46536C5.56267%207.29237%206.1636%207.11703%206.76613%206.9456L16.5754%204.16673C16.7831%204.10802%2016.9916%204.05558%2017.2001%204H18.092Z%22%20fill%3D%22%2300285A%22%3E%3C%2Fpath%3E%0A%3Cpath%20d%3D%22M4%209.27344H4.28699C10.5987%209.27344%2016.9104%209.27344%2023.2221%209.27344C24.6737%209.27344%2025.7471%2010.1697%2025.973%2011.5623C25.9949%2011.7268%2026.0036%2011.8927%2025.9992%2012.0586C25.9992%2018.4445%2025.9992%2024.8301%2025.9992%2031.2155C25.9992%2032.8727%2024.8623%2033.9983%2023.1888%2033.9983C17.1445%2033.9983%2011.1005%2033.9983%205.05679%2033.9983C4.34011%2033.9999%204%2033.6672%204%2032.9627V9.27344ZM8.16216%2019.8637C8.16321%2021.6529%208.88293%2023.3686%2010.1635%2024.6346C11.444%2025.9006%2013.1808%2026.6134%2014.9929%2026.6167C18.7515%2026.6206%2021.8236%2023.6093%2021.8378%2019.9075C21.8412%2018.1179%2021.1251%2016.4001%2019.8467%2015.1315C18.5684%2013.8628%2016.8323%2013.147%2015.0198%2013.1411C11.2493%2013.131%208.1693%2016.1502%208.16216%2019.8637ZM14.9945%2028.3748C13.4501%2028.3748%2011.9026%2028.3693%2010.3622%2028.3819C10.1472%2028.3837%209.93602%2028.4375%209.74695%2028.5384C9.58953%2028.633%209.46861%2028.7768%209.40341%2028.947C9.3382%2029.1171%209.33243%2029.304%209.38703%2029.4777C9.5115%2029.8965%209.83971%2030.1282%2010.3281%2030.1282C13.4263%2030.1282%2016.5245%2030.1282%2019.6228%2030.1282C20.2451%2030.1282%2020.6534%2029.7697%2020.6471%2029.2374C20.6399%2028.7169%2020.2356%2028.3717%2019.6275%2028.3717C18.0832%2028.3727%2016.5388%2028.3738%2014.9945%2028.3748Z%22%20fill%3D%22%2300285A%22%3E%3C%2Fpath%3E%0A%3Cpath%20d%3D%22M8.16211%2019.8636C8.16924%2016.1501%2011.2492%2013.1317%2015.0221%2013.1411C16.8346%2013.1469%2018.5707%2013.8628%2019.849%2015.1314C21.1274%2016.4001%2021.8435%2018.1179%2021.8402%2019.9075C21.8259%2023.6092%2018.7538%2026.6206%2014.9952%2026.6167C13.1827%2026.614%2011.4453%2025.9014%2010.1642%2024.6354C8.8832%2023.3694%208.16316%2021.6533%208.16211%2019.8636ZM16.1693%2018.9838C16.0322%2017.5552%2015.9077%2016.147%2015.0023%2014.8523C14.093%2016.1486%2013.9717%2017.5568%2013.833%2018.9838H16.1693ZM13.8306%2020.7693C13.8655%2021.127%2013.8869%2021.4582%2013.9305%2021.7869C14.0423%2022.6292%2014.2064%2023.4605%2014.5821%2024.2347C14.6852%2024.446%2014.8311%2024.637%2015.0031%2024.9102C15.8982%2023.6014%2016.0337%2022.1979%2016.1622%2020.7701L13.8306%2020.7693ZM19.9351%2018.9893C19.905%2017.7791%2018.4692%2015.8519%2017.4267%2015.5411C17.6209%2016.6652%2017.8231%2017.8198%2018.0237%2018.9893H19.9351ZM18.026%2020.7701C17.8175%2021.9568%2017.6162%2023.1075%2017.4148%2024.2558C18.7752%2023.4871%2019.6425%2022.3396%2019.9716%2020.7701H18.026ZM12.5764%2015.5333C11.4213%2015.9842%2010.0165%2017.8965%2010.0791%2018.9854H11.9746C12.18%2017.8088%2012.3806%2016.6558%2012.5764%2015.5333ZM12.5764%2024.248C12.3766%2023.0965%2012.18%2021.9427%2011.9739%2020.7756H10.0252C10.3629%2022.3443%2011.2263%2023.491%2012.5788%2024.248H12.5764Z%22%20fill%3D%22white%22%3E%3C%2Fpath%3E%0A%3Cpath%20d%3D%22M14.9946%2028.375C16.539%2028.375%2018.0834%2028.375%2019.6277%2028.375C20.2358%2028.375%2020.6401%2028.7202%2020.6473%2029.2407C20.6552%2029.773%2020.2453%2030.1315%2019.623%2030.1315C16.5247%2030.1315%2013.4265%2030.1315%2010.3283%2030.1315C9.8399%2030.1315%209.51169%2029.8967%209.38722%2029.481C9.33262%2029.3072%209.33839%2029.1204%209.4036%2028.9502C9.46881%2028.7801%209.58972%2028.6363%209.74715%2028.5417C9.93621%2028.4407%2010.1474%2028.387%2010.3624%2028.3851C11.9059%2028.3695%2013.4503%2028.375%2014.9946%2028.375Z%22%20fill%3D%22%235CACE3%22%3E%3C%2Fpath%3E%0A%3Cpath%20d%3D%22M16.1677%2018.984H13.8306C13.9693%2017.557%2014.0906%2016.1488%2014.9999%2014.8525C15.9061%2016.1473%2016.0306%2017.5555%2016.1677%2018.984Z%22%20fill%3D%22%235CACE3%22%3E%3C%2Fpath%3E%0A%3Cpath%20d%3D%22M13.8306%2020.7695H16.1622C16.0337%2022.1973%2015.8982%2023.6008%2015.0031%2024.9096C14.8311%2024.6365%2014.686%2024.4455%2014.5821%2024.2341C14.2063%2023.4599%2014.0422%2022.6286%2013.9305%2021.7864C13.8892%2021.456%2013.8678%2021.1273%2013.8306%2020.7695Z%22%20fill%3D%22%235CACE3%22%3E%3C%2Fpath%3E%0A%3Cpath%20d%3D%22M19.9352%2018.9896H18.0237C17.8208%2017.8202%2017.621%2016.6656%2017.4268%2015.5415C18.4693%2015.8523%2019.905%2017.7771%2019.9352%2018.9896Z%22%20fill%3D%22%235CACE3%22%3E%3C%2Fpath%3E%0A%3Cpath%20d%3D%22M18.0263%2020.77H19.9718C19.6428%2022.3356%2018.7755%2023.487%2017.415%2024.2557C17.6164%2023.1074%2017.8178%2021.9567%2018.0263%2020.77Z%22%20fill%3D%22%235CACE3%22%3E%3C%2Fpath%3E%0A%3Cpath%20d%3D%22M12.5765%2015.5337C12.3806%2016.6562%2012.1801%2017.8092%2011.9747%2018.9857H10.0792C10.0165%2017.8969%2011.4214%2015.9846%2012.5765%2015.5337Z%22%20fill%3D%22%235CACE3%22%3E%3C%2Fpath%3E%0A%3Cpath%20d%3D%22M12.579%2024.2483C11.2265%2023.4913%2010.3631%2022.3446%2010.0254%2020.7759H11.9749C12.1794%2021.943%2012.3792%2023.1%2012.579%2024.2483Z%22%20fill%3D%22%235CACE3%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E");
}

.takepic-wrapper .icon-x,
.btn-takepic .icon-x {
  position: absolute;
  top: -8px;
  right: 0px;
}
.formio-hidden {
  display: none !important;
}

/* custom OTP */
.wrapper-popup {
  background: #ffff;
  width: 95%;
  border-radius: 10px;
  margin: auto;
  max-width: 420px;
}

.wrapper-popup .formio-errors .error {
  position: unset !important;
}

.wrapper-transaction-authen {
  position: relative;
}

.wrapper-transaction-authen {
  position: fixed !important;
  visibility: visible;
  transition: 0.2s;
  opacity: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgb(0 0 0 / 26%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: -1;
  margin: 0;
}

.wrapper-transaction-authen.active {
  opacity: 1;
  visibility: visible;
  z-index: 700000;
  margin: 0;
}

.formio-component-authentication {
  border-radius: 10px 10px 0 0;
}

.header-image {
  max-width: 130px;
  margin: 0 auto;
}

.wrapper-popup .fieldset-body .formio-component .account-detail-block-title {
  text-align: center;
  padding-bottom: 16px;
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 !important;
  color: var(--gray-900, #101828);
  line-height: 32px;
}

.number-otp-text {
  color: var(--gray-500, #667085);
  text-align: center;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  margin-bottom: 6px;
}

.otp-text-display-color-bold {
  color: var(--gray-900, #101828);
  font-size: 1rem;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
}

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

.wrapper-popup > fieldset {
  padding: 20px;
}

.wrapper-transaction-authen > fieldset {
  width: 100%;
}
button.btn-cancel {
  border-color: var(--color-main) !important;
  background-color: var(--white-color) !important;
  color: var(--color-main) !important;
}

.wapper-number-otp fieldset .fieldset-body div {
  display: inline;
  font-size: 0.875rem;
}

.wapper-number-otp fieldset .fieldset-body {
  text-align: center;
}

.wapper-button-action-center .fieldset-body {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.wapper-button-action-center button {
  width: 100%;
}
.wapper-button-action-center > fieldset > .fieldset-body > div {
  flex: 1;
}
.wrapper-number {
  color: var(--gray-500, #71717a);
  text-align: center;
  font-size: 0.8125rem !important;
  font-weight: 400;
  margin-bottom: 20px !important;
}
.time-cout-down {
  color: var(--error-500, #f04438) !important;
  font-size: 0.8125rem !important;
  font-weight: 500;
}
.wapper-number-otp {
  margin-bottom: 38px !important;
}
.input-otp {
  margin-bottom: 40px !important;
}

.input-otp > label {
  display: none;
}

.text-display-color-bold {
  color: var(--gray-900, #101828);
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  line-height: 24px;
}

div.button-like-link {
  margin-bottom: 0 !important;
}
button.button-like-link,
button.button-like-link:hover {
  box-shadow: unset !important;
  background-color: transparent !important;
  border: none;
  display: flex;
  align-items: center;
  text-decoration: unset;
  height: fit-content !important;
  margin-bottom: 0 !important;
  font-weight: 500 !important;
  padding: 0 0 20px 0 !important;
  margin-left: auto;
  margin-right: auto;
  color: var(--blue-700, #175cd3) !important;
  font-size: 0.8125rem !important;
}
.button.button-like-link:hover {
  background-color: transparent !important;
}

.wapper-otp-btn > fieldset > .fieldset-body {
  display: flex;
  justify-content: center;
}

.title-otp {
  color: var(--gray-500, #71717a);
  font-size: 0.8125rem !important;
  font-weight: 400;
  margin: 3px 6px;
}

.button-otp button {
  height: 48px !important;
  width: 146px !important;
}

button.button-like-link:focus {
  background-color: unset !important;
}
/* end custom OTP */

/* page-success */
.wavy-shapes,
.wavy-shapes-ios {
  position: relative;
  background-color: white;
  height: 40px;
  width: 100%;
}
.wavy-shapes {
  --mask: radial-gradient(
        3.01px at 50% calc(100% - 3.3px),
        #000 99%,
        #0000 101%
      )
      calc(50% - 6px) 0/12px 100%,
    radial-gradient(3.01px at 50% calc(100% + 0.3px), #0000 99%, #000 101%) 50%
      calc(100% - 3px) / 12px 100% repeat-x;
  -webkit-mask: var(--mask);
  mask: var(--mask);
}

.wrapper-custom-success {
  position: relative;
  margin: auto;
  filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.25));
  z-index: 999;
  margin-top: 82px;
  padding: 0 16px;
  /* padding-bottom: 150px; */
}
.wapper-success-detail {
  min-height: calc(100vh - var(--dynamic-height));
  background-color: var(--white-color);
}

.box-custom-success,
.box-custom-success-ios {
  position: relative;
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
  width: 100%;
  background-color: white;
}
.box-custom-success {
  --circle-gradient: radial-gradient(
        circle at 0% 53%,
        transparent 20px,
        black 20px
      )
      left / 51% 100%,
    radial-gradient(circle at 100% 53%, transparent 20px, black 20px) right /
      51% 100%;
  --line-gradient: radial-gradient(
        11.68px at calc(100% + 10px) 50%,
        #0000 calc(99% - 1px),
        #000 calc(101% - 1px) 99%,
        #0000 101%
      )
      calc(50% - 3px + 0.5px) calc(50% - 10px) / 6px 20px,
    radial-gradient(
        11.68px at -10px 50%,
        #0000 calc(99% - 1px),
        #000 calc(101% - 1px) 99%,
        #0000 101%
      )
      calc(50% + 3px) 50% / 6px 20px;
  -webkit-mask: var(--circle-gradient), var(--line-gradient);
  mask: var(--circle-gradient), var(--line-gradient);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.page-ambillpayment .box-custom-success,
.page-amcashout .box-custom-success,
.page-amcashdeposit .box-custom-success {
  position: relative;
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
  width: 100%;
  background-color: white;
  --circle-gradient: radial-gradient(
        circle at 0% 55%,
        transparent 20px,
        black 20px
      )
      left / 51% 100%,
    radial-gradient(circle at 100% 55%, transparent 20px, black 20px) right /
      51% 100%;
  --line-gradient: radial-gradient(
        11.68px at calc(100% + 10px) 50%,
        #0000 calc(99% - 1px),
        #000 calc(101% - 1px) 99%,
        #0000 101%
      )
      calc(50% - 3px + 0.5px) calc(50% - 10px) / 6px 20px,
    radial-gradient(
        11.68px at -10px 50%,
        #0000 calc(99% - 1px),
        #000 calc(101% - 1px) 99%,
        #0000 101%
      )
      calc(50% + 3px) 50%/6px 20px;
  -webkit-mask: var(--circle-gradient), var(--line-gradient);
  mask: var(--circle-gradient), var(--line-gradient);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.box-custom-success::after,
.wavy-shapes::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  background-repeat: repeat;
}

.wrapper-content-success-header {
  z-index: 10;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.wrapper-content-success-header p {
  margin-bottom: 0.5rem;
}

.wrapper-content-success-body {
  /* position: absolute; */
  z-index: 10;
  /* top: 50%; */
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 24px;
}

.logo-sucsess-swhe {
  height: 2.83rem;
  width: 9.3rem;
  background-repeat: no-repeat;
  background-size: contain;
  /* padding: 1.5rem; */
  margin-top: 40px;
  margin-bottom: 18px;
}
.wrapper-content-success-body div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  width: 100%;
  padding: 0 20px;
  line-height: 24px;
  margin-bottom: 16px !important;
}
.settlement-tittle {
  font-weight: 500;
  font-size: 1rem;
  color: var(--primary-2);
  line-height: 38px;
  text-align: center;
}
.settlement-amout {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--success-600);
  line-height: 38px;
}
.settlement-time {
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 24px;
}
.settlement-content {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-500);
  margin-bottom: 0 !important;
}
.settlement-detail {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-800);
  margin-bottom: 0 !important;
  text-align: right;
  max-width: 50%;
}

.wrapper-mb-share-btn {
  padding: 0 16px;
  z-index: 1000;
  margin-top: 30px;
}

.wrapper-mb-share-btn > fieldset > .fieldset-body {
  display: flex;
  justify-content: space-around;
  align-items: baseline;
}
.wrapper-watermark-success > fieldset > .fieldset-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: calc(100vh - var(--dynamic-height) - 50px);
  margin-bottom: 120px;
}
.wrapper-mb-share-btn > fieldset > .fieldset-body > .custom-btn-save,
.wrapper-mb-share-btn > fieldset > .fieldset-body > .custom-btn-share,
.wrapper-mb-share-btn > fieldset > .fieldset-body > .custom-btn-favorite {
  width: calc(100% / 3);
  position: relative;
}

.wrapper-mb-share-btn > fieldset > .fieldset-body > .custom-btn-save button,
.wrapper-mb-share-btn > fieldset > .fieldset-body > .custom-btn-share button,
.wrapper-mb-share-btn
  > fieldset
  > .fieldset-body
  > .custom-btn-favorite
  button {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.custom-btn-save > button:hover,
.custom-btn-share > button:hover,
.custom-btn-favorite > button:hover {
  background-color: var(--white-color, #fff) !important;
  color: var(--color-main, #00285a);
}

.custom-btn-save > button:active,
.custom-btn-share > button:active,
.custom-btn-favorite > button:active {
  color: var(--color-main, #00285a) !important;
}

.custom-btn-save,
.custom-btn-share,
.custom-btn-favorite {
  font-size: 12px !important;
  font-weight: 400 !important;
  background-color: var(--white-color, #fff) !important;
  border: unset !important;
  box-shadow: unset !important;
  color: var(--color-main, #00285a);
  padding: 9px 2px 2px 2px !important;
}

.wapper-circle {
  background-color: var(--color-main, #00285a);
  height: 91px;
  border-radius: 0 0 30% 30%;
  position: fixed;
  top: var(--dynamic-height);
  left: 0;
  right: 0;
  z-index: 998;
}

.wapper-circle-no-trans {
  margin-top: var(--dynamic-height);
  background-color: var(--color-main, #00285a);
  height: 91px;
  border-radius: 0 0 30% 30%;
}

.icon-btn-save,
.icon-btn-favorite,
.icon-btn-share {
  background-repeat: no-repeat;
  background-size: contain;
  text-align: center;
  margin-bottom: 8px;
}

.wrapper-mb-share-btn > fieldset > .fieldset-body > .icon-btn-save::before,
.wrapper-mb-share-btn > fieldset > .fieldset-body > .icon-btn-share::before,
.wrapper-mb-share-btn > fieldset > .fieldset-body > .icon-btn-favorite::before {
  position: absolute;
  right: 0;
  left: 0;
  top: -5px;
}

.wrapper-mb-share-btn button {
  color: var(--gray-800);
}
/* page-success-end */

/* save temp */
.wrapper-save-template {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: -10;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}

.wrapper-save-template.show {
  z-index: 100000;
  opacity: 1;
  visibility: visible;
}

.wrapper-save-template > fieldset > .fieldset-body {
  position: absolute;
  width: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 50%;
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
}

.wrapper-save-template button {
  height: 48px !important;
}

.wrapper-fav-customer > fieldset > .fieldset-body {
  width: 90%;
}

h3.title-modal {
  font-size: 1.125rem;
  font-weight: bold;
  text-align: center;
  color: var(--color-main, #00285a);
  margin-bottom: 0;
  text-transform: uppercase;
  padding: 22px;
  padding-bottom: 0;
}

.template-wrapper {
  width: 90%;
  margin: 30px auto;
}

.wapper-button-action-center > fieldset {
  margin: 16px;
}

.wapper-fav-customer-block {
  margin: 16px 16px 25px 16px;
}

.wapper-fav-cus > fieldset > .fieldset-body {
  position: relative;
}

/* end save temp  */

/* reports - namnv */

.page-commission-summary-report
  table.dataTable
  > tbody
  > tr.child
  span.dtr-title {
  color: #484848;
  font-weight: 400 !important;
  font-size: 0.8125rem;
}

.page-commission-summary-report .formio-component-datagrid tbody tr td {
  color: var(--gray-800);
  font-size: 0.8125rem;
}

.page-amagentcommissionsummaryreport,
.page-amagentlistreport,
.page-amagentreconciliationreport {
  background-color: var(--color-main);
}

.page-amagentcommissionsummaryreport .am-middle-content,
.page-amagentlistreport .am-middle-content,
.page-amagentreconciliationreport .am-middle-content {
  padding-top: var(--dynamic-height);
}

.page-report {
  padding: 22px 10px 0 10px;
  background-color: #f1f2f3 !important;
  /* min-height: calc(100vh - var(--dynamic-height)); */
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  min-height: 100vh !important;
}

.title-report {
  /* margin-bottom: 16px; */
  font-weight: 500;
  /* font-size: 0.9375rem; */
font-size: 1.2rem;
margin-bottom: 24px;
line-height: 1.2rem;
}

.page-commission-summary-report
  .table.dataTable
  > tbody
  > tr.child
  ul.dtr-details
  > li {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.page-commission-summary-report
  .formio-component-datagrid
  .datagrid-table
  thead
  tr {
  background-color: unset;
}

.page-commission-summary-report
  .formio-component-datagrid
  .datagrid-table
  thead
  tr
  th {
  color: #7e7e7e;
  text-align: center;
  font-weight: 500;
  /* font-size: 0.6875rem; */
  font-size: 0.8875rem;
  text-transform: uppercase;
}

.page-commission-summary-report td.dtr-control {
  position: absolute !important;
  left: 16px;
}

.page-commission-summary-report .dtr-control {
  width: 0 !important;
  padding: 0;
}

.page-commission-summary-report .table-bordered > :not(caption) > * > * {
  border-width: 0 0 1px 0 !important;
}

.page-commission-summary-report .table {
  box-shadow: none !important;
}

.page-commission-summary-report table.dataTable.no-footer {
  border: unset !important;
}

.page-commission-summary-report > fieldset > .fieldset-body {
  background-color: var(--white-color);
  border-radius: 6px;
  box-shadow: 0px 2px 2px 0px #0000000d;
}

.page-commission-summary-report tr:not([class="child"]) {
  position: relative;
}

.page-commission-summary-report tr td:first-child:not([class="child"]) {
  padding-left: 22px;
}

.page-commission-summary-report
  table.dataTable.dtr-column
  > tbody
  > tr
  > td.dtr-control:before {
  content: "\f0da";
  font-size: 1.2rem;
  color: #8d8d8d;
  padding: 10px 100vw 10px 0;
  top: 50% !important;
}

.page-commission-summary-report
  .table.dataTable.dtr-column
  > tbody
  > tr.parent
  td.dtr-control:before {
  content: "\f0d7";
}

.page-commission-summary-report thead tr th:first-child {
  padding-left: 22px;
}

.page-commission-summary-report table tr td:not([class="child"]),
.page-commission-summary-report table tr th {
  padding-top: 14px;
  padding-bottom: 14px;
}

.page-commission-summary-report table tr td.child {
  padding-top: 8px;
  padding-bottom: 8px;
}

.page-commission-summary-report table.dataTable thead th {
  border-bottom: 1px solid #d8dbe0;
}

.page-commission-summary-report table.dataTable {
  width: 100% !important;
}

.page-commission-summary-report
  table.dataTable
  > tbody
  > tr.child
  ul.dtr-details
  > li {
  border-bottom: unset;
  padding: 12px 0;
}

.page-commission-summary-report
  table.dataTable
  > tbody
  > tr.child
  ul.dtr-details
  > li:first-child {
  padding-top: 12px;
}

.page-commission-summary-report .dtr-data {
  color: #000000;
  font-weight: 500;
}

.page-commission-summary-report table.dataTable tbody tr.parent {
  background-color: #f2f3f6;
}

.page-commission-summary-report
  .pagination-hidden
  nav.d-inline-block
  li:first-child
  button,
.page-commission-summary-report
  .pagination-hidden
  nav.d-inline-block
  li:last-child
  button {
  box-shadow: none;
  width: auto;
}

.page-commission-summary-report
  .formio-component-pagination
  > div:first-child
  nav
  ul
  li
  button {
  width: 32px;
  height: 32px !important;
}

.page-commission-summary-report
  .formio-component-pagination
  > div:first-child
  nav {
  padding: 22px 0;
}

.page-commission-summary-report .page-item.active .page-link {
  background-color: #2f80ed;
  border-color: unset;
  opacity: unset;
}

.skeleton-loader {
  width: 340px;
  height: 131px;
  display: none;
}

.skeleton-loader.active {
  width: 340px;
  height: 131px;
  display: block;
}

.skeleton-loader.active:after {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  left: -100px;
  top: 0;
  background: linear-gradient(to right, transparent, #ffffff70, transparent);
  animation: reflect 1000ms ease-out infinite;
}

.skeleton-loader-item {
  border-bottom: 1px solid #d8dbe0;
}

.skeleton-loader-item .item-bg {
  display: inline-block;
  width: calc(100% / 5);
  border-radius: 4px;
  background-color: #eee;
  padding: 10px;
  margin: 11px 6px;
}

.left-zero {
  left: 0 !important;
}

.left-50 {
  left: 50px !important;
}

.page-report > fieldset > .fieldset-body {
  visibility: hidden;
}

.page-report > fieldset > .fieldset-body.active {
  visibility: unset;
  padding-bottom: 88px;
}

.page-amagentreconciliationreport .swiper-slide::after {
  content: unset !important;
}

/* end reports  */

/* animation - namnv */
@keyframes reflect {
  to {
    left: calc(100% + 100px);
  }
}

@keyframes l2 {
  to {
    transform: rotate(1turn);
  }
}

@keyframes slideIn {
  0% {
    left: -100%;
  }
  100% {
    left: 0;
  }
}
/* end animation  */

/* css-body */
.page-amcustomeronboading .wraper-page-middle-content,
.page-amsettlementposting .wraper-page-middle-content {
  margin-top: 78px !important;
  padding-bottom: 85px !important;
}
.cash-deposit-wrapper {
  background-color: white;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  margin-top: 81px;
  min-height: 89vh;
  padding: 26px 20px 90px 20px;
  height: auto;
}

.cash-deposit-wrapper2 {
  margin-top: 81px;
  padding: 0 20px 0 20px;
}
.wraper-button-fixed-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  /* padding-bottom: 16px !important; */
  padding: 12px;
  background-color: white;
  z-index: 99999;
}
.wraper-button-fixed-bottom > fieldset > .fieldset-body {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.wraper-button-fixed-bottom > fieldset > .fieldset-body > div {
  flex: 1;
}
.confirminfo-title {
  margin-top: 26px;
}
.cash-detail-title {
  color: var(--color-main, #00285a);
  font-size: 0.82rem;
  font-style: normal;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.wapper-btn-fixed {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 18px 16px 18px 16px;
  background-color: var(--white-color, #fff);
  z-index: 9999;
}
.wapper-btn-fixed-2 > fieldset > .fieldset-body {
  display: flex;
  gap: 20px;
}

.wapper-btn-fixed-2 > fieldset > .fieldset-body > .btn-back,
.wapper-btn-fixed-2 > fieldset > .fieldset-body > .btn-continue {
  flex: 1;
}

.with-currency {
  position: relative;
}

.with-currency input {
  padding-right: 50px !important;
}

.display-currency {
  position: absolute;
  right: 0;
  top: 53px;
  padding-right: 10px;
  font-weight: 500;
  font-size: 0.95rem;
}

/* css-body-end */
/* css-transhis */

.filter-button {
  position: fixed;
  right: 0;
  z-index: 2000;
  color: var(--white-color, #fff);
  top: 0;
  border: unset;
  font-size: 20px;
  padding-right: 25px;
}

.filter-button:active {
  background-color: unset !important;
}

.filter-close-btn {
  position: absolute;
  right: 0;
  top: 0;
  color: var(--white-color, #fff);
  box-shadow: none;
}

.customer-wrapper-head {
  background-color: var(--color-main);
}

.popup-title {
  color: var(--white-color, #fff);
  font-weight: 600;
  line-height: 24px;
  font-size: 1rem;
}
.page-amtransactionhistory .child-border-radius-header {
  background-color: #f2f2f2;
}

.list-request {
  margin: 24px 16px;
}

.trans-his-wraper-left a, .trans-his-wraper-left a:hover {
  text-decoration: none;
}
.trans-his-wraper-left,
.trans-his-wraper-right {
  flex: 1;
}
.trans-his-account-no span {
  color: var(--Gray-900, #101828);
  font-size: 0.9rem;
  font-weight: 500;
  text-transform: capitalize;
  line-height: 24px;
}

.trans-his-account-no {
  padding-bottom: 8px;
}

.trans-his-item span {
  color: var(--Gray-500, #667085);
  font-size: 0.85rem;
  font-weight: 400;
}

.trans-amount {
  color: var(--Gray-700, #344054);
  text-align: right;
  font-size: 0.9rem;
  font-weight: 600;
  padding-bottom: 8px;
}

.trans-his-wraper {
  border-radius: 12px;
  background: var(--white-color, #fff);
  margin: 12px 0 24px 0;
}

.trans-his-wraper-second {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  border-bottom: 1px solid #dedede;
  padding: 24px 15px;
}

.trans-his-wraper-second:last-child {
  border-bottom: unset;
}

.trans-his-wraper-right {
  text-align: right;
}

.status-custom {
  margin-left: auto;
  text-align: center;
  font-size: 0.58rem;
  font-weight: 600;
  line-height: 14px;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 2px 6px;
  display: inline-block;
}

.transhis-date {
  color: var(--Gray-500, #667085);
  font-size: 0.98rem;
  font-weight: 500;
  line-height: 24px;
}

.filter-close-btn:hover {
  border: unset !important;
}

.filter-customer-wraper
  > fieldset
  > .fieldset-body
  > .wrapper-btn-fifter:not(:first-child) {
  margin-bottom: 0 !important;
}

.filter-customer-wraper
  > fieldset
  > .fieldset-body
  > .wrapper-body:not(:first-child) {
  padding-bottom: 80px;
  padding-top: 80px;
}

h3.ib-detail-page-title {
  color: var(--Common-Secondary, #00285a);
  font-size: 12px;
  font-weight: 600;
  line-height: 22px;
  text-transform: uppercase;
}

.trans-detail-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 18px;
  gap: 12px;
}
.trans-detail-item p {
  flex: 1;
  text-align: end;
}
.trans-detail-item:last-child {
  margin-bottom: 0px;
}
span.trans-detail-item-title {
  color: var(--Gray-500, #667085);
  font-size: 13px;
  font-weight: 500;
  line-height: 24px;
  text-transform: capitalize;
}
span.trans-detail-item-value {
  color: var(--Gray-900, #101828);
  text-align: right;
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
  flex: 1;
}
.trans-detail-item-value-skeleton-40 {
  display: inline-block;
  background-color: #dddbdd;
  width: 40%;
  height: 1.1em;
  margin: auto;
}
.trans-detail-item-value-skeleton-30 {
  display: inline-block;
  background-color: #dddbdd;
  width: 30%;
  height: 1.1em;
  margin: auto;
}
.trans-detail-content {
  border-radius: 8px;
  background-color: var(--white-color);
  padding: 20px 14px;
  margin-bottom: 22px;
}

.wraper-image-item > fieldset > .fieldset-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wraper-button-bottom {
  margin-top: 20px;
}
.wraper-button-bottom > fieldset > .fieldset-body {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.trans-his-wraper {
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: flex-start;
}

.list-transaction {
  margin-top: unset !important;
}
div.filter-button-trans-his {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1000;
}
button.filter-button-trans-his {
  width: fit-content;
  border: none;
  box-shadow: unset;
}
.trans-his-type {
  color: #344054;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 200% */
}

.page-amtransactionhistorydetail .child-border-radius-header {
  background-color: #f2f2f2;
}

.trans-detail-container {
  margin: 20px 16px;
}

.wraper-upload-image {
  margin: 20px 16px;
}

.view-image-button > button {
  color: var(--Blue-600, #1570ef) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  background-color: transparent !important;
  box-shadow: unset !important;
}

.view-image-button > button:hover,
.view-image-button > button:focus,
.view-image-button > button:active {
  color: var(--Blue-600, #1570ef) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  background-color: transparent !important;
  box-shadow: unset !important;
}

.wapper-image {
  padding: 10px 14px;
}

.page-amtransactionhistorydetail .wrapper-trans,
.page-originaltransactiondetail .wrapper-trans {
  padding-bottom: 120px;
}

.wapper-pers-info {
  background: var(--gray-50, #f9fafb);
  min-height: 100vh;
}

.wapper-pers-info-fix {
  background: var(--white-color);
  margin-top: var(--dynamic-height);
}

.filter-customer-wraper.filter-transaction,
.filter-customer-wraper {
  position: fixed !important;
  bottom: 0;
  left: 0;
  right: 0;
  top: 100%;
  background-color: #fff;
  opacity: 0;
  overflow-y: auto;
  z-index: -1;
  height: 0;
  transition: all 0.3s ease-out;
}

.filter-customer-wraper.filter-transaction > fieldset,
.filter-customer-wraper > fieldset {
  transition: all 0.3s ease-in-out, transform 0.3s ease-in-out;
  opacity: 0;
}

.filter-customer-wraper.active.filter-transaction > fieldset,
.filter-customer-wraper > fieldset.active {
  opacity: 1;
}

.filter-customer-wraper.active.filter-transaction,
.filter-customer-wraper.active {
  top: 0;
  opacity: 1;
  z-index: 99999;
  height: 100%;
}
.filter-customer-wraper-header {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 10;
  background-color: var(--white-color);
}
.filter-customer-wraper > fieldset > .fieldset-body > div:not(:first-child) {
  padding: 0 16px;
  margin-bottom: 16px !important;
}
.filter-customer-wraper-header {
  margin-bottom: 16px !important;
}
.filter-customer-wraper-header > fieldset > .fieldset-body > div {
  /* margin-bottom: 22px !important; */
}
.filter-customer-wraper-header > fieldset > .fieldset-body {
  display: flex;
  align-items: center;
  padding: 11px 20px 13px 20px;
  height: var(--dynamic-height);
  box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.08);
}
.filter-customer-wraper-header > fieldset > .fieldset-body > div:first-child {
  width: 100%;
  text-align: center;
}

.popup-filter-title {
  color: var(--gray-900, #101828);
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 22px;
}
.custom-link-redirect {
  text-align: right;
  margin-top: 10px;
  margin-right: 20px;
}
.custom-link-redirect > a {
  color: var(--blue-600) !important;
  text-decoration: none;
  line-height: 22px !important;
  font-weight: 500 !important;
  font-size: 13px !important;
}

.customer-wrapper-head {
  background-color: var(--color-main);
}

.filter-close-btn {
  position: absolute;
  right: 0;
  top: 0;
  color: var(--white-color, #fff);
  box-shadow: none;
}
.filter-close-btn:hover {
  border: unset !important;
}
.filter-close-btn i {
  color: var(--white-color);
  font-size: 20px;
}
.popup-title {
  color: var(--white-color, #fff);
  font-weight: 600;
  line-height: 24px;
  font-size: 1rem;
}
.trans-detail-container {
  margin: 20px 16px;
}
h3.ib-detail-page-title {
  color: var(--Common-Secondary, #00285a);
  font-size: 12px;
  font-weight: 600;
  line-height: 22px;
  text-transform: uppercase;
}
.trans-detail-content {
  border-radius: 8px;
  background-color: var(--white-color);
  padding: 20px 14px;
  margin-bottom: 22px;
}
.trans-detail-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 18px;
  gap: 12px;
}
.trans-detail-item p {
  flex: 1;
  text-align: end;
}
.trans-detail-item:last-child {
  margin-bottom: 0px;
}
span.trans-detail-item-title {
  color: var(--Gray-500, #667085);
  font-size: 13px;
  font-weight: 500;
  line-height: 24px;
  text-transform: capitalize;
}
span.trans-detail-item-value {
  color: var(--Gray-900, #101828);
  text-align: right;
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
  flex: 1;
}
.trans-detail-item-value-skeleton-40 {
  display: inline-block;
  background-color: #dddbdd;
  width: 40%;
  height: 1.1em;
  margin: auto;
}
.trans-detail-item-value-skeleton-30 {
  display: inline-block;
  background-color: #dddbdd;
  width: 30%;
  height: 1.1em;
  margin: auto;
}
.trans-detail-content {
  border-radius: 8px;
  background-color: var(--white-color);
  padding: 20px 14px;
  margin-bottom: 22px;
}
.filter-button .fa.fa-sliders {
  font-size: 20px;
  color: var(--white-color);
}
.wraper-image-popup {
  z-index: 0;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.wraper-image-popup.active {
  position: fixed;
  background-color: rgba(0, 0, 0, 0.5);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 1;
  z-index: 9999999;
}
.modal-image-popup {
  position: unset;
  opacity: 0;
  visibility: hidden;
}
.wraper-image-popup.active .modal-image-popup {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 50%;
  padding: 20px;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 10px;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s linear;
}
.wraper-image-popup.active .modal-image-popup .image-popup {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
  max-width: 319px;
  max-height: 203px;
}
.wraper-image-popup.active .modal-image-popup .close-image-popup {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2252%22%20height%3D%2252%22%20viewBox%3D%220%200%2052%2052%22%20fill%3D%22none%22%3E%0A%3Ccircle%20cx%3D%2226%22%20cy%3D%2226%22%20r%3D%2225%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%2F%3E%0A%3Cpath%20d%3D%22M34%2018L18%2034M18%2018L34%2034%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%2F%3E%0A%3C%2Fsvg%3E");
}

.wraper-image-popup.active .modal-image-popup .close-image-popup {
  width: 52px;
  height: 52px;
}
.wraper-image-popup.active .modal-image-popup .close-image-popup i {
  font-size: 12px;
  display: inline-block;
  padding: 12px;
  background-color: #fff;
  opacity: 0.8;
  border-radius: 50%;
}
.wraper-image-popup.active .modal-image-popup .close-image-popup p {
  font-size: 12px;
  color: #fff;
}
.button-clear-filter > button {
  background-color: var(--warning-100) !important;
  border: unset !important;
}

.content-no-data {
  margin-top: 24px;
  text-align: center;
}

.page-amaccountdetail .content-no-data {
  text-align: center;
  height: calc(100vh - 370px);
  display: flex;
  align-items: center;
}

.icon-no-data {
  width: 138px;
  height: 138px;
}

.content-no-data .icon-no-data {
  margin: 0 auto;
  background-repeat: no-repeat;
}

.content-no-data p {
  font-size: 1.125rem;
  margin-top: 16px;
  color: #667085;
}
/* css-tranhis-end */

/* Cuong DM Css for Agent Home */
.recently-header-title {
  color: var(--Gray-900, #101828);
  /* padding: 15px; */
  display: block;
  margin-bottom: 0px;
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
  text-transform: uppercase;
}
.header-home-style {
  background-color: var(--color-main);
  padding: 23px 16px;
  /* display: flex; */
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
}
.page-home .am-not-home-page-header-title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 50%;
  transform: translateY(-50%);
}
.page-home .am-middle-content {
  padding-top: 64px;
}
.page-home .wraper-card-home {
  background-color: unset;
  padding-bottom: 160px;
  overflow: hidden;
}
.wapper-header-card {
  position: relative;
}
.wraper-card-home .wapper-circle-no-trans {
  margin-top: -1px;
}
.wapper-circle-no-trans {
  margin-top: var(--dynamic-height);
  background-color: var(--color-main, #00285a);
  height: 91px;
  border-radius: 0 0 30% 30%;
}
.wapper-swiper {
  position: absolute;
  top: 10px;
  right: 0;
  left: 0;
}
.swiper {
  overflow: unset;
}
.swiper-slide.currentaccount {
  background: linear-gradient(to bottom, #374b68, #1d2939);
}
.swiper-slide.loanaccount {
  background: linear-gradient(to bottom, #3498db, #005993);
}
.swiper-slide.savingaccount {
  background: linear-gradient(to bottom, #fece25, #d79a24);
}
.swiper-slide.fixeddepositaccount {
  background: linear-gradient(to bottom, #a8c0ff, #3f2b96);
}
.swiper-slide {
  border-radius: 10px;
  padding: 10px 16px;
  color: var(--white-color);
  box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.25);
  width: calc(100vw - 64px) !important;
  position: relative;
  margin: 0 32px !important;
  overflow: hidden;
}
.wapper-carosel-bottom .swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: -20px !important;
}
.swiper-pagination-bullet-active {
  background-color: var(--color-main) !important;
}
.wapper-agent-home {
  background-color: #fff;
  margin: 16px !important;
  border-radius: 10px;
}
.wapper-agent-home > fieldset > .fieldset-body,
.slider-home-bottom > fieldset > .fieldset-body {
  position: relative;
}
.link-cash-home {
  display: block;
  padding: 20px 16px;
  text-decoration: none;
  color: #000;
}
.link-cash-home i {
  font-size: 20px;
}
.wraper-cash-home {
  margin-bottom: 16px;
}
.cash-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cash-balance-content {
  padding-top: 20px;
  background: var(--white-color);
  border-radius: 16px;
}
.wraper-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.cash-process {
  width: 100%;
  height: 10px;
  border-radius: 4px;
  background: var(--Gray-100, #f2f4f7);
  margin-bottom: 10px;
  margin-top: 12px;
}
.wraper-loader-component {
  position: relative;
}
.loader-component {
  width: 30px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 5px solid rgb(223, 212, 212);
  border-right-color: var(--color-main);
  animation: l2 1s infinite linear;
  position: absolute;
  left: 50%;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  z-index: 0;
}

/* Chart */
.recently-header-wraper > fieldset > .fieldset-body {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.wrapper-dashboard {
  margin: 20px 0 !important;
}
.wrapper-dashboard > fieldset > .fieldset-body {
  position: relative;
}
.wrapper-dashboard > fieldset > .fieldset-body .tranparent-input-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.loader-dashboad {
  width: 45px;
  height: 40px;
  --c: linear-gradient(var(--color-main) 0 0);
  background: var(--c) 0% 50%, var(--c) 50% 50%, var(--c) 100% 50%;
  background-size: 9px 100%;
  background-repeat: no-repeat;
  animation: b1 1s infinite linear;
}
@keyframes b1 {
  33% {
    background-size: 9px 10%, 9px 100%, 9px 100%;
  }

  50% {
    background-size: 9px 100%, 9px 10%, 9px 100%;
  }

  66% {
    background-size: 9px 100%, 9px 100%, 9px 10%;
  }
}
/* End Chart */

/* Slide Account Top */
.swiper-slide.walletaccount {
  background: linear-gradient(to bottom, #265996, #11366f);
}
.swiper-slide-item {
  position: relative;
  z-index: 2;
}
.swiper-slide-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}
.swiper-slide-header-title {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.9px;
}
.swiper-slide .btn-view-detail {
  height: 26px !important;
  padding: 4px 10px;
  font-size: 10px;
  border: 1px solid var(--Blue-400, #53b1fd);
  color: var(--white-color);
  border-radius: 22px !important;
}
.swiper-slide-body {
  margin-bottom: 12px;
}
.swiper-slide-footer-balance-name {
  display: flex;
  align-items: center;
}
.swiper-slide-footer-name div:first-child,
.swiper-slide-footer-balance-name {
  font-size: 0.625rem;
  font-weight: 400;
  margin-bottom: 7px;
}
.card-eye-icon {
  margin-left: 8px;
  font-size: 1rem;
  display: flex;
  align-items: center;
}
.wrapper-loading {
  margin-bottom: 0;
}
.custom-loader {
  /* display: none; */
  display: inline-block;
  opacity: 0;
  visibility: hidden;
  width: 25px;
  height: 25px;
  position: relative;
  border: 4px solid rgba(0, 40, 90, 0.1);
  border-radius: 100vw;
  border-top: 4px solid var(--color-main);
  animation: spin 1s linear infinite;
}
.custom-loader::before {
  position: absolute;
  content: "";
  top: -1px;
  left: -1px;
  width: 4px;
  height: 4px;
  border-radius: 100vw;
  background-color: var(--color-main);
  animation: spin 1s linear infinite;
}
.custom-loader::after {
  position: absolute;
  content: "";
  top: -1px;
  right: -1px;
  width: 4px;
  height: 4px;
  border-radius: 100vw;
  background-color: var(--color-main);
  animation: spin 1s linear infinite;
}
.wraper-balance-info {
  display: flex;
  align-items: baseline;
}
.swiper-name,
.swiper-balance {
  font-size: 0.75rem;
  font-weight: 600 !important;
  text-transform: uppercase;
  display: flex;
  align-items: center;
}
.wraper-balance-info > p {
  margin-bottom: 0 !important;
  font-size: 12px;
  font-weight: 600;
}
.swiper-slide-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.swiper-slide::after {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2246%22%20height%3D%2247%22%20viewBox%3D%220%200%2046%2047%22%20fill%3D%22none%22%3E%0A%3Cpath%20d%3D%22M24.5%200.54329C24.5%200.401806%2024.6147%200.287109%2024.7562%200.287109H28.9105C29.052%200.287109%2029.1667%200.401805%2029.1667%200.54329V4.69759C29.1667%204.83908%2029.052%204.95378%2028.9105%204.95378H24.7562C24.6147%204.95378%2024.5%204.83908%2024.5%204.6976V0.54329Z%22%20fill%3D%22white%22%2F%3E%0A%3Cpath%20d%3D%22M38.5%205.50227C38.5%205.36079%2038.6099%205.24609%2038.7455%205.24609H44.9628C45.0984%205.24609%2045.2083%205.36079%2045.2083%205.50227V11.9899C45.2083%2012.1314%2045.0984%2012.2461%2044.9628%2012.2461H38.7455C38.6099%2012.2461%2038.5%2012.1314%2038.5%2011.9899V5.50227Z%22%20fill%3D%22white%22%2F%3E%0A%3Cpath%20d%3D%22M14%2021.8363C14%2021.6948%2014.1111%2021.5801%2014.2482%2021.5801H22.7935C22.9306%2021.5801%2023.0417%2021.6948%2023.0417%2021.8363V30.6572C23.0417%2030.7987%2022.9306%2030.9134%2022.7935%2030.9134H14.2482C14.1111%2030.9134%2014%2030.7987%2014%2030.6572V21.8363Z%22%20fill%3D%22white%22%2F%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M17.284%206.41211H0.0506035C0.022656%206.41211%200%206.43485%200%206.4629V41.0449C0%2041.0901%200.0545071%2041.1128%200.0863856%2041.0808L9.20342%2031.9294C9.21291%2031.9198%209.21824%2031.9069%209.21824%2031.8935V15.7158C9.21824%2015.6877%209.24089%2015.665%209.26884%2015.665H17.2841C19.5705%2015.665%2021.6915%2016.3761%2023.4394%2017.59C23.4563%2017.6018%2023.4792%2017.5997%2023.4937%2017.5852C23.5017%2017.5772%2023.5062%2017.5663%2023.5062%2017.555V7.43694C23.5062%207.41495%2023.4921%207.39546%2023.4713%207.38868C21.5225%206.7547%2019.4431%206.41211%2017.284%206.41211ZM26.7741%2021.2925C26.7554%2021.2585%2026.7798%2021.2167%2026.8185%2021.2167H36.5866C36.6094%2021.2167%2036.6294%2021.232%2036.6354%2021.2541C37.0905%2022.9377%2037.3333%2024.7089%2037.3333%2026.5371C37.3333%2037.6518%2028.3569%2046.6621%2017.284%2046.6621H1.48142C1.43634%2046.6621%201.41376%2046.6074%201.44564%2046.5754L10.5625%2037.4241C10.572%2037.4146%2010.5849%2037.4092%2010.5983%2037.4092H17.2841C23.266%2037.4092%2028.1154%2032.5416%2028.1154%2026.5371C28.1154%2024.6354%2027.6289%2022.8477%2026.7741%2021.2925Z%22%20fill%3D%22white%22%2F%3E%0A%3Cpath%20d%3D%22M26.8334%209.87016C26.8334%209.7326%2026.9449%209.62109%2027.0824%209.62109H34.751C34.8885%209.62109%2035%209.7326%2035%209.87016V17.5387C35%2017.6763%2034.8885%2017.7878%2034.751%2017.7878H27.0824C26.9449%2017.7878%2026.8334%2017.6763%2026.8334%2017.5387V9.87016Z%22%20fill%3D%22white%22%2F%3E%0A%3Cpath%20d%3D%22M27.163%2015.707L29.1449%2017.6863L-nan%20-nanL29.1449%2017.6863C26.5893%2019.4401%2024.3569%2021.6703%2022.6095%2024.2303L-nan%20-nanL22.6095%2024.2303L20.6276%2022.251L-nan%20-nanL20.6276%2022.251C23.2156%2020.5377%2025.4567%2018.2997%2027.163%2015.707L-nan%20-nanL27.163%2015.707Z%22%20fill%3D%22white%22%2F%3E%0A%3C%2Fsvg%3E");
  /* background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22188%22%20height%3D%22172%22%20viewBox%3D%220%200%20188%20172%22%20fill%3D%22none%22%3E%0A%3Cg%20id%3D%22Group%22%3E%0A%3Cpath%20id%3D%22Vector%22%20d%3D%22M77.5636%2044.7965V24.1501C46.9457%2035.2848%2024.2076%2062.8553%2020.0603%2096.214H59.3515C58.522%2099.8024%2058.0893%20103.535%2058.0893%20107.367C58.0893%20123.451%2065.7528%20137.732%2077.6267%20146.793C83.8837%20151.562%2091.3308%20154.88%2099.4271%20156.233V197.67H99.4181V214.701C53.3289%20211.212%2015.354%20178.718%203.6965%20135.415H24.0003C32.5834%20160.831%2052.4003%20181.08%2077.5546%20190.214V169.585C57.5303%20159.884%2042.8434%20140.807%2039.2461%20118.078H0.522922C0.180319%20114.543%200%20110.973%200%20107.358C0%2050.6748%2043.8172%204.21605%2099.4181%200.0146484V15.9367H99.4271V58.4826C91.3128%2059.844%2083.8837%2063.1618%2077.6267%2067.9493C73.5786%2071.0237%2070.0353%2074.7112%2067.1142%2078.8585H44.4573C51.1471%2064.0003%2062.9308%2051.901%2077.5636%2044.7965Z%22%20fill%3D%22white%22%2F%3E%0A%3Cpath%20id%3D%22Vector_2%22%20d%3D%22M156.452%20116.04C152.872%20136.299%20136.995%20152.32%20116.773%20156.071V195.073H116.764V214.629C169.092%20210.238%20210.772%20168.432%20214.956%20116.031H156.452V116.04ZM138.645%20189.97V169.225C152.142%20162.472%20163.15%20151.437%20169.858%20137.913H190.568C181.678%20161.922%20162.627%20181.009%20138.645%20189.97Z%22%20fill%3D%22white%22%2F%3E%0A%3Cpath%20id%3D%22Vector_3%22%20d%3D%22M116.766%200.0957031V19.3085H116.775V58.6448C136.988%2062.4134%20152.874%2078.4166%20156.454%2098.6843H214.958C210.774%2046.3021%20169.094%204.47742%20116.766%200.0957031ZM170.04%2076.8208C163.342%2063.1437%20152.27%2051.964%20138.647%2045.148V24.4205C162.747%2033.4274%20181.851%2052.6492%20190.705%2076.8208H170.04Z%22%20fill%3D%22white%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E); */
  background-size: cover;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
  background-repeat: no-repeat;
  width: 188px;
  height: 172px;
  opacity: 0.1;
}
.swiper-slide-footer-name div:first-child,
.swiper-slide-footer-balance-name {
  font-size: 0.625rem;
  font-weight: 400;
  margin-bottom: 7px;
}
.swiper-name,
.swiper-balance {
  font-size: 0.75rem;
  font-weight: 600 !important;
  text-transform: uppercase;
  display: flex;
  align-items: center;
}
.swiper-slide-body-title {
  font-size: 0.625rem;
  font-weight: 400;
  margin-bottom: 10px;
}
.swiper-slide-body-number {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.84px;
}
/* End Slide Account Top*/

/* Slide Bottom */
.wapper-carosel-bottom {
  background-color: var(--white-color, #fff);
  padding-bottom: 40px;
  margin: 0 16px 40px 16px !important;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  overflow: hidden;
}
.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.carosel-slider-home .swiper-slide::after {
  display: none;
}
.carosel-slider-home .swiper-slide {
  padding: 0;
  background: var(--white-color) !important;
  height: 200px;
  /* width: calc(100vw - 32.1px) !important; */
  margin: 0 16px !important;
}
.wapper-carosel-bottom .swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: -20px !important;
}
.wapper-agent-home > fieldset > .fieldset-body,
.slider-home-bottom > fieldset > .fieldset-body {
  position: relative;
}

/* End */

/* pull to refresh  */
.wrapper-pull-to-refrest-spin {
  position: fixed;
  top: -50px;
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: top 0.3s ease-in-out;
  z-index: 100000;
}

.wrapper-pull-to-refrest-spin.visible {
  top: 0;
}
/* end pull to refresh */

/* choose trans by qr  */

.qr-choose-trans-type > fieldset {
  position: fixed;
  right: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  transition: 0.3s;
  top: 0;
  bottom: 0;
  z-index: 1000000;
  opacity: 1;
}

.qr-choose-trans-type.active {
}
.qr-choose-trans-type > fieldset > .fieldset-body {
  background: #fff;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  padding: 25px 15px;
}

.title-choose-tran-type {
  color: var(--gray-900);
  font-size: 0.9375rem;
  margin-bottom: 30px;
  font-weight: 500;
}

.qr-choose-trans-type .button-choose-tran-type > fieldset > .fieldset-body {
  display: flex;
  justify-content: space-between;
}

.button-choose-tran-type .formio-component-amcashwithdrawal,
.button-choose-tran-type .formio-component-amcashdeposit {
  background-color: #f2f3f6;
  width: calc(100% / 2 - 7.5px);
  border-radius: 8px;
}

.button-choose-tran-type button {
  background-color: var(--Gray-50) !important;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  font-size: 0.85rem !important;
  width: 100%;
  height: 100% !important;
  padding: 15px 30px;
  color: #1d2939 !important;
}
.button-choose-tran-type button::before {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

/* choose trans by qr end */
.comfirm-logout {
  background: rgba(0, 0, 0, 0.7);
  top: 0;
  left: 0;
  position: fixed;
  bottom: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 1;
}
.comfirm-logout-header {
  width: 90%;
  position: absolute;
  top: 43%;
  color: #101828;
  background: var(--White);
  padding: 14px 0;
  text-align: center;
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 22px;
}
.comfirm-logout-body {
  width: 90%;
  padding: 20px;
  background: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
}

.comfirm-logout-body::before {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2256%22%20height%3D%2254%22%20viewBox%3D%220%200%2056%2054%22%20fill%3D%22none%22%3E%0A%3Cg%20clip-path%3D%22url(%23clip0_6846_26588)%22%3E%0A%3Cpath%20d%3D%22M27.3283%206.32147V47.6783C27.4191%2048.9972%2027.1402%2050.3153%2026.5223%2051.4865C26.4872%2051.5851%2026.4872%2051.6926%2026.5223%2051.7911C26.1385%2051.7911%2025.9849%2052.1339%2025.7546%2052.3624C25.1592%2052.9823%2024.4074%2053.4328%2023.5772%2053.6672C22.747%2053.9016%2021.8688%2053.9113%2021.0336%2053.6952L3.83825%2049.5062C2.74545%2049.2422%201.77345%2048.6222%201.07764%2047.7454C0.381833%2046.8687%200.00239795%2045.7858%200%2044.6698L0%209.29185C0.00239795%208.17592%200.381833%207.09302%201.07764%206.21626C1.77345%205.3395%202.74545%204.71953%203.83825%204.45546L21.1871%20-0.000113256C22.0002%20-0.182948%2022.8476%20-0.148889%2023.6431%200.0986021C24.4387%200.346093%2025.1539%200.798187%2025.7162%201.40891C25.9849%201.6374%2026.1385%201.98014%2026.5607%202.0563C26.5255%202.15487%2026.5255%202.2624%2026.5607%202.36096C27.1938%203.58086%2027.4602%204.95559%2027.3283%206.32147Z%22%20fill%3D%22%23B9D6FE%22%2F%3E%0A%3Cpath%20d%3D%22M48.6689%2029.1324H34.2371C32.5867%2029.1324%2031.6271%2028.3326%2031.6271%2026.9998C31.6271%2025.6669%2032.5867%2024.8672%2034.2371%2024.8672H48.5154C48.4392%2024.6372%2048.2914%2024.4372%2048.0932%2024.296C46.6731%2022.887%2045.2145%2021.4779%2043.7944%2020.0308C43.5792%2019.8346%2043.4074%2019.5962%2043.2898%2019.3308C43.1723%2019.0653%2043.1116%2018.7785%2043.1116%2018.4885C43.1116%2018.1985%2043.1723%2017.9117%2043.2898%2017.6462C43.4074%2017.3808%2043.5792%2017.1424%2043.7944%2016.9462C43.9921%2016.7327%2044.2324%2016.5622%2044.5%2016.4456C44.7675%2016.329%2045.0566%2016.2688%2045.3489%2016.2688C45.6411%2016.2688%2045.9302%2016.329%2046.1978%2016.4456C46.4654%2016.5622%2046.7056%2016.7327%2046.9034%2016.9462C49.7437%2019.7262%2052.5456%2022.5442%2055.3475%2025.3623C55.5811%2025.5553%2055.7691%2025.7969%2055.8981%2026.07C56.0271%2026.3431%2056.094%2026.641%2056.094%2026.9427C56.094%2027.2443%2056.0271%2027.5422%2055.8981%2027.8153C55.7691%2028.0885%2055.5811%2028.3301%2055.3475%2028.5231L46.9034%2036.9011C46.707%2037.1192%2046.4676%2037.295%2046.1998%2037.4174C45.9321%2037.5399%2045.6419%2037.6064%2045.3472%2037.6128C45.0525%2037.6192%2044.7596%2037.5654%2044.4867%2037.4548C44.2138%2037.3441%2043.9668%2037.1789%2043.761%2036.9695C43.5552%2036.7601%2043.3951%2036.5109%2043.2904%2036.2375C43.1858%2035.964%2043.1391%2035.6721%2043.153%2035.38C43.1669%2035.0878%2043.2413%2034.8016%2043.3714%2034.5392C43.5016%2034.2768%2043.6847%2034.0437%2043.9095%2033.8545L48.6689%2029.1324Z%22%20fill%3D%22%23549BFE%22%2F%3E%0A%3Cpath%20d%3D%22M27.3283%206.32144C27.4191%205.00255%2027.1402%203.68447%2026.5223%202.51325C26.4871%202.41469%2026.4871%202.30716%2026.5223%202.2086C31.7039%202.2086%2036.8855%202.2086%2042.1055%202.2086C43.3264%202.15556%2044.5245%202.54889%2045.4725%203.31399C46.4205%204.0791%2047.0526%205.16278%2047.2488%206.35952C47.4214%207.69962%2047.4214%209.05608%2047.2488%2010.3962C47.1814%2010.9215%2046.9123%2011.4008%2046.4976%2011.7343C46.0829%2012.0677%2045.5546%2012.2295%2045.0226%2012.186C44.4895%2012.1572%2043.9872%2011.929%2043.6168%2011.5475C43.2465%2011.1659%2043.0356%2010.6593%2043.0267%2010.1296C43.0267%209.29182%2043.0267%208.45402%2043.0267%207.57814C43.0267%206.70225%2042.8348%206.47376%2041.952%206.47376L27.3283%206.32144Z%22%20fill%3D%22%23549BFE%22%2F%3E%0A%3Cpath%20d%3D%22M26.5607%2051.9435C26.5255%2051.845%2026.5255%2051.7374%2026.5607%2051.6389C27.1785%2050.4676%2027.4575%2049.1496%2027.3667%2047.8307H42.0288C42.9116%2047.8307%2043.1035%2047.6022%2043.1035%2046.6882V44.2891C43.1034%2043.7199%2043.3286%2043.1735%2043.7307%2042.7675C44.1327%2042.3615%2044.6794%2042.1284%2045.2529%2042.1184C45.5384%2042.1184%2045.8211%2042.1748%2046.0844%2042.2843C46.3477%2042.3938%2046.5864%2042.5543%2046.7865%2042.7564C46.9866%2042.9585%2047.1441%2043.1981%2047.2499%2043.4613C47.3556%2043.7244%2047.4074%2044.0058%2047.4023%2044.2891C47.4985%2045.455%2047.4985%2046.6267%2047.4023%2047.7926C47.2054%2048.9962%2046.5678%2050.0853%2045.6116%2050.8513C44.6555%2051.6172%2043.448%2052.0062%2042.2207%2051.9435H26.5607Z%22%20fill%3D%22%23549BFE%22%2F%3E%0A%3C%2Fg%3E%0A%3Cdefs%3E%0A%3CclipPath%20id%3D%22clip0_6846_26588%22%3E%0A%3Crect%20width%3D%2256%22%20height%3D%2254%22%20fill%3D%22white%22%2F%3E%0A%3C%2FclipPath%3E%0A%3C%2Fdefs%3E%0A%3C%2Fsvg%3E");
  width: 54px;
  height: 58px;
  margin: 20px 0 64px 0;
  background-repeat: no-repeat;
  background-position: center;
}

.comfirm-logout-body p {
  font-size: 0.9375rem;
  line-height: 24px;
  color: #334054;
  margin-bottom: 40px;
}
.comfirm-logout-body svg {
  display: none;
}
.comfirm-logout-btns {
  display: flex;
  margin-bottom: 20px;
  width: 100%;
  justify-content: space-evenly;
}
.comfirm-logout-btns button {
  /* width: 120px; */
  width: 40%;
}

.comfirm-logout-btns button:nth-child(1) {
 background-color: var(--warning-100, #FEF0C7) !important
}

.comfirm-logout-btns button:nth-child(2) {
  color: var(--gray-800) !important;
}
/* End Css for Agent Home */

/* notifi - namnv */
.ib-bottom-notification-menu {
  position: relative;
}
.ib-bottom-notification-menu .have-mess-unread span {
  position: absolute;
  font-size: 0.5rem;
  top: -8px;
  left: 52%;
  background-color: var(--bs-red);
  color: var(--white-color);
  font-weight: 500;
  border-radius: 50%;
  min-width: 18px;
  min-height: 18px;
  padding: 2px 0.5px 0;
}
.push-toash .push-toast-header .push-toast-title {
  line-height: 22px;
}

.push-toash {
  background: #fff;
  border-radius: 0 0 6px 6px !important;
  position: fixed;
  z-index: 100000000;
  right: 0 !important;
  left: 0;
  bottom: unset !important;
  top: -100%;
  display: flex;
  padding: 15px;
  width: 100vw !important;
  box-shadow: 0px 0px 18px 5px rgba(120, 101, 101, 0.75);
  animation: movetopnoti 0.5s linear forwards !important;
}

@keyframes movetopnoti {
  0% {
    top: -100%; /* Ph?n t? ? bên ph?i */
  }
  100% {
    top: 0px; /* Ph?n t? ? bên trái */
  }
}

.push-toash .push-toast-header .push-toast-title {
  line-height: 22px;
}
/* end notifi - namnv */

/* favorite function start - namnh*/
.wrapper-favorite-menu {
  /* padding-top: 16px; */
  /* border-radius: 20px; */
  /* box-shadow: 0px 4px 12px rgb(206 206 206 / 25%); */
  background-color: white;
  position: relative;
  border-radius: 10px;
}

.heading-favo.active {
  opacity: 0;
  display: none;
}

.heading-favo {
  color: var(--Gray-900, #101828);
  padding: 15px;
  display: block;
  margin-bottom: 0px;
  font-size: 14px;
  font-weight: 600;
  line-height: 22px; /* 157.143% */
  text-transform: uppercase;
}

/* header transfer list */
.detail-content-info {
  line-height: 1.3;
}

.wapper-transfer-button-list {
  display: flex;
  /* margin: 10px 0; */
  transition: 0.3s;
  /* position: absolute; */
  left: 90px;
  z-index: 1000;
  right: 90px;
  top: 0;
}

.wapper-transfer-button-list .wrapper-button-list-active {
  display: flex;
  min-width: 100%;
  width: auto;
  flex-wrap: wrap;
  padding: 10px 20px;
  margin-bottom: 0;
}

.wapper-transfer-button-list .transfer-button {
  width: calc(100% / 3);
  min-width: calc(97% / 3);
  text-decoration: none;
  font-weight: bold;
  cursor: pointer;
  padding: 0 10px;
}

.wapper-transfer-button-list .transfer-button .transfer-icon {
  border-radius: 15px;
  width: 100%;
  height: 91px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.wapper-transfer-button-list .transfer-button p {
  color: var(--Gray-600, #475467);
  text-align: center;
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
  line-height: 14px;
  text-transform: capitalize;
  min-height: 31px;
  margin-bottom: 0;
  display: flex;
  align-items: center;
}

.wapper-transfer-button-list.fixed {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  backdrop-filter: blur(2px);
  z-index: 1000;
  margin-top: 0;
  justify-content: flex-start;
  padding: 17px 35px;
  padding-left: 435px;
  transition: 0.3s;
}

.wapper-transfer-button-list.fixed.active {
  position: static;
  top: unset;
  right: unset;
  left: unset;
  backdrop-filter: unset;
  z-index: 100000;
  margin-top: 0;
  justify-content: flex-start;
  padding: 0;
  padding-left: 0;
}

.header-favorite-function {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background-color: var(--Common-Secondary, #00285a);
}

.header-favorite-function {
  color: var(--Common-White, #fff);
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999999;
}

.wapper-transfer-button-list.fixed .content {
  margin-top: 100px;
}

.wapper-transfer-button-list.fixed .transfer-button {
  width: auto;
  margin-right: 20px;
  cursor: pointer;
}

.wapper-transfer-button-list.fixed .transfer-button .transfer-icon {
  border-radius: 50%;
  width: 50px;
  height: 50px;
  margin-bottom: 0;
  box-shadow: none;
}

.wapper-transfer-button-list.fixed .transfer-button .transfer-icon div {
  background-size: 30px 30px;
}

.wapper-transfer-button-list.fixed .transfer-button-add-new div:nth-child(2),
.wapper-transfer-button-list.fixed .transfer-button p {
  display: none;
}

.formio-component-datagrid tbody tr td {
  color: #fff;
}

.page-commission-summary-report
  table.dataTable
  > tbody
  > tr.child
  span.dtr-title {
  color: #484848;
  font-weight: 400 !important;
  font-size: 0.8125rem;
}

.page-commission-summary-report .formio-component-datagrid tbody tr td {
  color: var(--gray-800);
  font-size: 0.8125rem;
}

.formio-component-radio .form-check-label {
  display: flex;
  align-items: center;
}

.modal-favorite-function {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.7);
  transition: 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  z-index: -1;
}

.modal-favorite-function.active {
  visibility: visible;
  opacity: 1;
  z-index: 1000000000000000;
  height: 100vh;
}

.modal-favorite-function .modal-favorite-function-content {
  /* width: 60%; */
  background-color: var(--Common-Secondary, #00285a);
  overflow: scroll;
  /* border-radius: 30px; */
  height: 100vh;
  width: 100%;
}

.modal-favorite-function-content-items {
  /* height: 500px; */
  /* overflow: scroll; */
  /* width: 96%; */
  /* margin: 0 auto; */
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  background-color: #fff;
  min-height: 93vh;
  margin: 56px auto 0 auto;
}

.other-function-title,
.favorite-function-title {
  color: var(--Gray-800, #1d2939);
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 22px;
  /* 137.5% */
  /* text-transform: capitalize; */
}

.other-function-title {
  text-align: left;
  /* border-top: 1px solid var(--border-color); */
  /* padding-left: 0; */
  background: var(--Gray-50, #f9fafb);
  height: 48px;
  display: flex;
  align-items: center;
  padding-left: 30px;
}

.menu-function-item-actions,
.menu-function-item {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  /* border-top: 1px solid var(--border-color); */
  align-items: center;
}

.menu-function-item-actions {
  border-radius: 30px;
  height: fit-content;
  padding: 5px;
  cursor: pointer;
}

.menu-function-item.disable .menu-function-item-actions {
  color: var(--border-color);
  cursor: no-drop;
}

.menu-function-item-actions {
  position: relative;
  margin-right: 20px;
}

.menu-function-item-action .get-id-menu {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background-color: transparent;
  color: transparent;
  display: block;
}

.menu-function-item-action i {
  margin-top: 2px;
}

.menu-function-item-action,
.menu-function-item-contents {
  display: flex;
  align-items: center;
}

.menu-function-item-contents-img {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 9px;
}

.menu-function-item-contents-img img {
  width: 25px;
  object-fit: contain;
}

.wapper-transfer-button-list .transfer-button .transfer-icon {
  /* background: var(--color-main); */
  background: var(--Gray-50, #f9fafb);
  /* box-shadow: 0px 4px 10px rgba(77, 77, 77, 0.25); */
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 4px;
}

.wapper-transfer-button-list
  .transfer-button
  .transfer-icon.transfer-icon-add-new {
  background: transparent;
  border: 2px dashed var(--color-main);
}

.wapper-transfer-button-list .transfer-button {
  color: var(--black-color-1) !important;
}

.wapper-transfer-button-list .transfer-button:hover,
.wapper-transfer-button-list .transfer-button:hover p {
  color: var(--color-main) !important;
}

.wapper-transfer-button-list.fixed {
  background: rgba(255, 255, 255, 0.427);
}

.name-favorite {
  color: var(--Gray-800, #1d2939);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 22px;
}

.menu-active {
  color: white;
  background-color: var(--Red-Red, #ef4444);
  width: 21px;
  height: 21px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 10px;
}

.menu-inactive {
  color: white;
  background-color: var(--Secondary, #00285a);
  width: 21px;
  height: 21px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 10px;
}

.menu-function-item.disable .menu-inactive,
.menu-function-item.disable .menu-active {
  opacity: 0.2;
}

.icon-favorite-item {
  /* background-size: 60px 60px; */
  width: 30px !important;
  height: 30px !important;
  background-repeat: no-repeat;
  background-position: center;
  font-size: 0 !important;
  background-size: contain;
}

.icon-img-item {
  background-size: 20px 20px !important;
  width: 20px !important;
  height: 20px !important;
}

.wapper-transfer-button-list .transfer-button.favorite-btn-edit {
  position: absolute;
  top: 10px;
  right: 0;
  display: flex;
  gap: 6px;
  width: fit-content;
  min-width: fit-content;
  align-items: center;
}

.btn-edit-my {
  right: 1px !important;
}

.favorite-btn-edit p,
.favorite-btn-edit i {
  color: var(--Gray-800, #252529) !important;
  font-size: 13px !important;
}

/* favorite function end - namnh*/

/* recent transaction - namnv */
.icon-cash-in {
  width: 32px;
  height: 32px;
}

.icon-cash-out {
  width: 32px;
  height: 32px;
}

.commission-cash {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 16px;
  margin-bottom: 14px;
}

.commission-cash div:first-child {
  display: flex;
  align-items: center;
}

.commission-cash .commission-content {
  margin-left: 16px;
  max-width: 77%;
}

.commission-cash .commission-content .commission-header {
  color: var(--gray-800, #1d2939);
  margin-bottom: 0;
  line-height: 24px;
  font-size: 0.8125rem;
  font-style: normal;
  font-weight: 500;
  text-transform: capitalize;
}

.commission-cash .commission-content .commission-time {
  margin-bottom: 0;
  color: var(--gray-500, #667085);
  font-size: 0.6875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
}

.commission-info {
  text-align: right;
  font-size: 0.8125rem;
  font-style: normal;
  font-weight: 600;
  line-height: 22px;
  min-width: 35%;
}

.cash-in {
  color: var(--success-600, #039874);
  margin-bottom: 0;
}

.cash-out {
  color: var(--error-500, #f04438);
  margin-bottom: 0;
}

.tran-no,
.commission-time {
  padding-top: 2px;
  font-size: 0.6875rem;
}

.commission-time {
  text-align: end;
}
/* end recent transaction  namnv */

/* total namnv */
.icon-time-range {
  display: inline-block;
  width: 19px;
  height: 18px;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  top: 3px;
}

.icon-view-history {
  display: inline-block;
  width: 19px;
  height: 18px;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  top: 2px;
}

.total-cash-flow-header-date {
  color: var(--Gray-700, #344054);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.icon-calendar-black {
  width: 15px;
  height: 15px;
  background-position: center;
  background-repeat: no-repeat;
  margin-right: 0.8125rem;
}

.formio-component-htmlcash {
  width: 100%;
}

.total-cash-flow-header-balance {
  display: flex;
  justify-content: center;
  align-items: center;
}

.cash-opening-title {
  color: var(--Gray-500, #667085);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 22px;
  text-align: center;
}

.cash-opening-balance {
  color: var(--Gray-800, #1d2939);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 22px;
  text-align: center;
}

.cash-opening-boder {
  border-right: 1px solid #dedede;
  height: 34px;
  margin: 0 22px;
}

.wapper-header {
  position: absolute;
  top: 68px;
  width: 100%;
}

.wapper-header .fieldset-body {
  display: flex;
  justify-content: center;
}

.wapper-total-cash-flow {
  padding: 20px 16px 0 16px;
  background-color: var(--White, #fff);
  min-height: calc(100vh - 114px);
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  margin-top: 114px;
  padding-bottom: 200px;
}

.wapper-default-item {
  padding: 20px 16px;
  background-color: var(--white-color, #fff);
  border-radius: 16px;
}

.wapper-default-item.with-box-shadow {
  width: 90%;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.05);
}

.wapper-total-cash-flow .today-cash-flow {
  margin-top: 74px;
}

.btn-total-cash-flow {
  position: fixed;
  bottom: 14px;
  width: 100%;
  padding: 0 16px;
}

.btn-total-cash-flow button {
  width: 100%;
}

.default-body {
  padding: 20px 16px 0 16px;
  background-color: var(--Gray-50, #f9fafb);
  height: calc(100vh - 58px);
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  margin-top: 58px;
  overflow: scroll;
}

.detail-cash-date {
  display: flex;
  align-items: center;
  border-radius: 12px;
  background: var(--white-color, #fff);
  padding: 12px 0 0px 18px;
}

.icon-bottom-custom {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #667085;
}

.icon-right-custom {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #667085;
  transform: rotate(270deg);
}

.detail-cash-date-text {
  color: var(--Gray-500, #667085);
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
}

.detail-cash-list .component-commission,
.detail-cash-list .component-transaction {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  background: #fff;
}

.detail-cash-list {
  display: none;
}

.detail-cash-item {
  margin-bottom: 20px;
}

.detail-cash-list .commission-cash {
  padding: 14px 0;
  margin: 0 16px;
  border-bottom: 1px solid #f2f4f7;
}

.detail-cash-list .commission-cash:last-child {
  border-bottom: unset;
}

.detail-cash-list .transaction-cash {
  padding: 14px 0;
  margin: 0 16px;
  border-bottom: 1px solid #f2f4f7;
}

.detail-cash-list .transaction-cash:last-child {
  border-bottom: unset;
}

.detail-cash-item.active .detail-cash-list {
  display: block;
}

.detail-cash-item.active .detail-cash-date {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.detail-cash-item.active .detail-cash-date .icon-right-custom {
  transform: unset;
}
/* end total statement - namnv */

/* btn-export-pdf -namnv */
.btn-export-pdf {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 16px 12px 16px;
  background-color: var(--white-color, #fff);
  border-top: 1px solid #f2f4f7;
  z-index: 5;
}

.btn-export-pdf button {
  width: 100%;
  background-color: #fef0c7 !important;
  color: #1d2939 !important;
}

button .icon-export-pdf {
  display: inline-block;
  width: 15px;
  height: 18px;
  margin-right: 2px;
  margin-bottom: -3px;
}

button .icon-export-excel {
  display: inline-block;
  width: 15px;
  height: 16px;
  margin-right: 2px;
  margin-bottom: -3px;
}

.btn-export:hover,
.btn-export:focus {
  color: #1d2939 !important;
  border-color: unset !important;
  box-shadow: none !important;
  background-color: #fef0c7 !important;
}

.content-no-data {
  margin-top: 24px;
  text-align: center;
}

/* end btn-export-pdf -namnv */

/* Transfer and favorite */
.child-border-radius-header {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  background: var(--white-color);
  height: 12px;
  padding-bottom: 31px;
}

.wrapper-nrc {
  min-height: calc(100vh - var(--dynamic-height) - 23px) !important;
  margin-top: 82px;
  padding-bottom: 100px !important;
}

.customer-info {
  align-items: center;
  margin-bottom: 7px;
}

.icon-title,
.icon-location,
.icon-add-account-1 {
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-size: contain;
}

.title-info-text {
  color: var(--color-main, #00285a);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 22px;
  text-transform: uppercase;
  padding-left: 16px;
}

.wapper-fav-cus input {
  border-right: none;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.custom-nrc .wraper-choose-CustomerType > span {
  padding-bottom: 4px !important;
  font-size: 0.8125rem !important;
  line-height: 22px !important;
  font-weight: 500;
}

.custom-nrc .wraper-choose-CustomerType > .formio-custom-select {
  width: 100%;
  height: 48px !important;
  padding: 0.5rem 0.7rem;
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
}

.wapper-fav-cus .input-group-text {
  padding: 12px;
}

.custom-nrc .wraper-input-license-number > input {
  height: 48px !important;
}

.custom-nrc .wraper-input-license-number > span {
  padding-bottom: 4px !important;
  font-size: 0.8125rem !important;
  line-height: 22px !important;
  font-weight: 500;
}

.wraper-page-middle-content {
  padding: 30px 16px 0 16px;
  background-color: var(--white-color, #fff);
  min-height: calc(100vh - 78px);
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.formio-form > div > nav {
  display: none;
}

.header-wizard > fieldset > div > div:last-child {
  background-color: var(--color-main);
}

.wapper-fav-cus .form-control:focus {
  border-color: #d8dbe0;
}

.icon-receiver {
  width: 17px;
  height: 16px;
}

.customer-info .icon-customer {
  width: 20px;
  height: 20px;
}

.customer-info-text {
  margin-left: 14px;
  color: var(--common-secondary, #00285a);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 22px;
  text-transform: uppercase;
}

.icon-transfer {
  width: 18px;
  height: 18px;
}

.text-display-title-otp {
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: 0em;
  text-align: left;
  margin-bottom: 4px;
}

.dropdown-otp .dropdown {
  font-weight: 500;
  line-height: 22px;
  letter-spacing: 0em;
  text-align: left;
}

button.btn-list-user {
  border: none;
  box-shadow: unset;
  height: 48px !important;
}

button.btn-list-user:hover {
  background-color: unset;
}
.wrapper-trans {
  min-height: calc(100vh - var(--dynamic-height)) !important;
  margin-top: 57px;
  background-color: unset;
  padding: 0;
}
button.btn-list-user:focus {
  background-color: unset;
  box-shadow: unset;
}

div.btn-list-user {
  position: absolute;
  top: 36px;
  right: 0;
}

.page-amtransferfund .icon-list-user {
  width: 17px;
  height: 20px;
}

.search-list-user .formio-component-search {
  height: 44px !important;
}

.search-list-user .formio-component-search .input-group-text {
  background-color: #fff;
  padding-right: 0;
  height: 48px;
}

.search-list-user .formio-component-search .icon-search {
  width: 16px;
  height: 16px;
}

.search-list-user .formio-component-search input {
  border-top-left-radius: unset !important;
  border-bottom-left-radius: unset !important;
  border-left: unset;
}

.search-list-user .formio-component-search input:focus {
  border-color: #ced4da;
}

.search-list-user .customer-info {
  margin-top: 0 !important;
}

.search-list-user {
  width: 100vw;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.4);
  transition: bottom 0.3s ease-in-out;
  min-height: 100vh !important;
  opacity: 0;
  bottom: -100vh;
}

.search-list-user.active {
  opacity: 1;
  z-index: 99999;
  left: 0;
  top: 0;
  bottom: 0;
}

.search-list-user .formio-component-html9 div {
  color: var(--Gray-900, #101828);
  text-align: center;
  font-weight: 600;
  line-height: normal;
  margin-bottom: 20px;
  text-transform: capitalize;
}

.search-list-user .favorite-body {
  position: relative;
  top: calc(var(--dynamic-height) + 20px);
  padding: 20px 16px 0;
  background-color: #fff;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.list-item-user {
  margin-top: 10px;
  height: calc(100vh - 190px);
  overflow-y: scroll;
}

.list-item-user .users-item {
  padding: 16px 0;
  border-bottom: 1px #e9ebec solid;
  color: var(--Gray-500, #667085);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: normal;
}

.list-item-user .users-item .users-name {
  color: var(--Blue-700, #175cd3);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: normal;
}

.list-item-user .users-item .users-fullname {
  margin: 8px 0 6px 0;
}

.customer-fav-address > button {
  background-color: transparent !important;
  color: var(--gray-500, #667085);
  border: unset !important;
  box-shadow: unset !important;
  position: absolute;
  right: 0;
  top: 33px;
  background: transparent;
  padding: 22px;
}

.wraper-page-middle-content.wrapper-nrc-3 {
  padding: 11px 16px 0 16px;
}

.pagination-hidden button {
  padding: 0px 8px !important;
}

.view-detail-report {
  color: var(--Blue-600, #1570ef);
  font-size: 0.6875rem;
  font-weight: 500;
}

.select-time-range {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: end;
  justify-content: center;
  z-index: 9999;
}

.select-time-range-content {
  width: 100vw;
  color: var(--Gray-900, #101828);
  background: var(--White, #fff);
  padding: 18px 0;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.select-time-range-header {
  position: relative;
  padding: 0 20px 17px;
  border-bottom: 1px solid #dedede;
}

.select-time-range-header button {
  height: 32px !important;
  border: unset;
  position: absolute;
  bottom: 12px;
  box-shadow: none;
}

.select-time-range-title {
  color: var(--Gray-900, #101828);
  text-align: center;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 22px;
}

.popup-select-time-range {
  color: var(--Gray-800, #1d2939);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 22px;
  padding: 12px 26px;
}

.popup-select-time-range div {
  padding: 12px 0;
}

.popup-custom {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.popup-custom-content {
  width: 95vw;
  color: var(--Gray-900, #101828);
  background: var(--White, #fff);
  padding: 18px 0;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  border-radius: 12px;
}

.popup-custom-header {
  color: var(--Gray-900, #101828);
  text-align: center;
  font-weight: 500;
  line-height: 22px;
  padding-bottom: 17px;
  border-bottom: 1px solid #dedede;
}

.popup-custom-body {
  padding: 23px 22px 39px;
}

.popup-custom-btn {
  padding: 0 22px 14px;
}

.popup-custom-btn .fieldset-body {
  display: flex;
  justify-content: space-between;
}

.popup-custom-btn .btn-back {
  color: #934d0d;
}

.popup-custom-btn button {
  height: 48px !important;
}

.btn-export button:hover,
.btn-export button:focus {
  background-color: #fef0c7 !important;
  color: #1d2939 !important;
  border-color: unset !important;
  box-shadow: none !important;
}

.content-no-data {
  margin-top: 24px;
  text-align: center;
}

.page-amaccountdetail .content-no-data {
  text-align: center;
  height: calc(100vh - 370px);
  display: flex;
  align-items: center;
}

.icon-no-data {
  width: 138px;
  height: 138px;
}

.content-no-data .icon-no-data {
  margin: 0 auto;
  background-repeat: no-repeat;
}

.content-no-data p {
  font-size: 1.125rem;
  margin-top: 16px;
  color: #667085;
}

.page-amdetailcashstatement,
.page-amaccountstatementdetail {
  background-color: var(--color-main);
}

.btn-check:focus + .btn,
.btn:focus,
.btn:hover {
  color: var(--gray-800) !important;
}

/* end Transfer and favorite */

/*start popup successful-failed */
.swal-button-container {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
}
.swal-button-container span {
  width: 200px !important;
  font-size: 0.75rem !important;
  margin-top: 16px;
  text-align: center;
}
.swal-button {
  background-color: var(--yellow-2, #ffc409) !important;
  color: var(--color-main, #00285a) !important;
  width: 100% !important;
  padding: 17.5px 24px;
}
.swal-title {
  order: 0 !important;
  background: transparent !important;
  color: var(--gray-900) !important;
  font-size: 1.125rem !important;
  font-weight: 600 !important;
}
.swal-text {
  color: var(--gray-600) !important;
  font-size: 1rem !important;
}
.swal-modal {
  border-radius: 13px !important;
}

/*end popup successful-failed */

/* access-denied */
.access-denied-page {
  background-color: var(--white-color);
  min-height: 100vh;
  display: flex;
  align-items: center;
  text-align: center;
}

.access-denied-title .access-denied-img {
  height: 280px;
  background-position: center;
  margin: 0 15px;
  background-size: contain;
  background-repeat: no-repeat;
}

.access-denied-title h2 {
  margin: 32px 0 0;
  font-size: 1.75rem;
  font-weight: 600;
}

.access-denied-title p {
  margin: 16px 0 60px;
  padding: 0 55px;
  line-height: 26px;
}

.access-denied-page button {
  padding-right: 35px;
  padding-left: 35px;
}

.page-accessdenied .am-not-home-page-header {
  display: none !important;
}

.access-denied-page > fieldset {
  display: flex;
  align-items: center;
  text-align: center;
  margin: auto;
}

/* end access-denied */
.aco-approval .logo-yellow-horizontal {
  width: 183px;
  height: 55px;
  background-size: cover;
  background-position: center;
  margin: 50px auto 70px;
}

.aco-approval .icon-pending {
  width: 150px;
  height: 150px;
  padding: 35px;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #eff8ff;
  border-radius: 50%;
  margin: 0 auto 32px;
}

.aco-back-to-login .formio-component-acobacktologin {
  margin-right: 0px !important;
}

.aco-back-to-login .form-group {
  width: 100%;
}

.aco-back-to-login button {
  width: 100%;
}

.aco-approve-header {
  color: var(--gray-900, #101828);
  text-align: center;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 34px;
  margin-bottom: 18px;
}

.aco-approve-content {
  color: var(--gray-500, #667085);
  text-align: center;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 24px;
}

.trans-his-detail-content .formio-component-datagrid .datagrid-table thead tr {
  background-color: var(--color-main) !important;
}
.trans-his-detail-content .formio-component-datagrid tbody tr td {
  color: var(--Gray-900, #101828) !important;
}
/* s?a css ios */
@supports (-webkit-touch-callout: none) {
  :root {
    --dynamic-height: 88px;
  }
.wrapper-trans {
    margin-top: 82px !important;
}

  .push-toash {
  padding-top: 45px !important;
}
  body {
    background-color: var(--color-main) !important;
  }
  .page-home .am-middle-content {
    /* padding-top: var(--dynamic-height) !important; */
    padding-top: 0 !important;
    margin-top: var(--dynamic-height) !important;
    background-color: #eee;
  }
  .wraper-card-home .wapper-circle-no-trans {
    margin-top: -2px;
  }
  .am-not-home-page-header,
  .header-home-style {
    padding-top: env(safe-area-inset-top) !important;
  }
  .page-home .am-not-home-page-header-title {
    /* top: calc(50% env(safe-area-inset-top)) !important; */
  }
  .wapper-default-agent {
    margin-top: var(--dynamic-height);
  }

  .header-wizard {
    top: 88px !important;
  }
  .cashout-wrapper {
    margin-top: 115px !important;
  }

  .am-not-home-page-header .icon-back-home-right {
    top: 50px !important;
  }

  .wrapper-nrc {
    min-height: calc(100vh - var(--dynamic-height) - 0px) !important;
  }

  .filter-customer-wraper-header,
  .menu-left-header {
    padding-top: env(safe-area-inset-top) !important;
  }

  .wraper-page-middle-content {
    /* padding-top: 67px; */
  }

  .header-login {
    padding-top: env(safe-area-inset-top) !important;
  }

  .filter-button {
    top: 34px;
  }

  .filter-close-btn {
    top: env(safe-area-inset-top) !important;
    transform: translateY(-50%);
  }

  .page-amsetting .am-not-home-page-header-title {
    padding-top: env(safe-area-inset-top) !important;
    top: 0px !important;
    height: unset !important;
  }

  .wapper-block-am {
    margin-top: calc(env(safe-area-inset-top) + 35px);
  }

  .default-body {
    margin-top: calc(env(safe-area-inset-top) + 58px);
  }

  .filter-customer-wraper
    > fieldset
    > .fieldset-body
    > .wrapper-body:not(:first-child) {
    padding-top: calc(env(safe-area-inset-top) + 100px);
  }
  .wapper-header {
    top: calc(env(safe-area-inset-top) + 75px);
  }

  .ib-form-payments-comfirm {
    padding-top: 35px;
  }
  .wrapper-custom-success,
  .wrapper-custom-success-ios {
    margin-top: calc(env(safe-area-inset-top) + 85px) !important;
  }

  .wrapper-not-home .am-middle-content {
    /* padding-top: var(--dynamic-height) !important; */
    /* padding-top: calc(env(safe-area-inset-top)) !important; */
  }
  .wapper-circle-no-trans {
    margin-top: 0 !important;
    padding-top: var(--dynamic-height) !important;
    height: unset !important;
  }
  .child-border-radius-header {
    display: none;
  }

  .menu-left-wrapper {
    background-color: var(--color-main);
  }
  .menu-left-user-info,
  .ib-accordion-waper accordion,
  .btn--close-menu-left,
  .ib-accordion-waper {
    background-color: var(--white-color);
  }
  .ib-accordion-waper {
    padding: 0;
  }

  .wrapper-nrc {
    margin-top: calc(var(--dynamic-height) + 35px) !important;
  }
  .header-favorite-function {
    /* top: env(safe-area-inset-top) !important; */
    padding-top: env(safe-area-inset-top) !important;
  }
  .modal-favorite-function-content-items {
    margin-top: calc(var(--dynamic-height) + 20px) !important;
  }
  .wraper-button-fixed-bottom {
    left: 0;
    right: 0;
    padding: 0 16px 30px !important;
  }
  .wrapper-transaction-content {
    padding-top: 16px;
  }
  .page-amnotification .am-not-home-page-header-title {
    padding-top: env(safe-area-inset-top);
  }

  .notify-page {
    margin-top: calc(var(--dynamic-height)) !important;
  }
}
/* end s?a css ios */

.account-detail-icon-qr-wraper {
  padding: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  width: 32px;
  height: 32px;
  position: relative;
}
.account-detail-icon-qr .qr-icon {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 16px;
  height: 16px;
  margin: 0;
}
.wrapper-loading-home-qr {
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.loader-home-qr {
  display: block;
  position: relative;
  border: 4px solid rgba(0, 40, 90, 0.1);
  border-radius: 100vw;
  border-top: 4px solid var(--color-main);
  animation: spin 1s linear infinite;
  background-color: var(--white-color);
  padding: 11px;
}
.wrapper-icon {
  display: flex;
  flex-direction: column;
  align-items: end;
}
.account-detail-icon-qr {
  margin-top: 12px;
}
.image-qr-code-wrapper-ib {
  transition: all ease 0.5s;
}
.image-qr-code-wrapper-ib.active {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 8888;
}
.image-qr-code-wrapper-ib .qr-main {
  background-color: #fff;
  border-radius: 30px;
  border: none;
  width: 90%;
  box-shadow: 0px 4px 12px rgba(206, 206, 206, 0.25);
  max-width: 455px;
}
.image-qr-code-wrapper-ib .qr-main .qr-code-items {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  border-radius: 30px;
  line-height: 34px;
  background-size: 15px 1px;
  background-repeat: repeat-x;
  background-image: linear-gradient(
    to right,
    #acacac 30%,
    rgba(255, 255, 255, 0) 10%
  );
  height: 100%;
}
.image-qr-code-wrapper-ib .qr-main > div {
  background-position: unset;
}
.wrapper-btn-link-qr > a, .wrapper-btn-link-qr > a:hover, .wrapper-btn-link-qr > a:focus {
    height: 40px !important;
    border: none;
    background-color: var(--color-main) !important;
    color: var(--white-color) !important;
    padding: 13px;
    width: 70%;
    border-radius: 8px !important;
    font-weight: 600 !important;
    line-height: 1;
    text-decoration: none;
    text-align: center;
}
.qr-main > div {
  height: 34px;
}
.wrapper-btn-link-qr {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 34px;
}
.image-qr-code .qr-main .qr-code-items {
    background-image: unset !important;
    box-shadow: 0px 4px 12px rgba(206, 206, 206, 0.25);
    border: 1px solid var(--border-color);
    padding: 16px 0;
}
.image-qr-code-wrapper-ib .qr-code-header {
  position: relative;
  width: 100%;
  height: 30px;
  display: flex;
  align-items: center;
  background-color: var(--color-main);
  border-radius: 30px 30px 0 0;
  padding: 24px 12px;
}
.image-qr-code-wrapper-ib .qr-code-close-icon {
  position: absolute;
  color: #fff;
  font-size: 1.375rem;
  padding: 8px;
  cursor: pointer;
  transition: all linear 0.4s;
}
.image-qr-code-wrapper-ib .qr-code-header p {
  text-align: center;
  font-size: 1.125rem;
  height: 100%;
  line-height: 0px;
  color: #fff;
  font-weight: 500;
}
.qr-code-item:last-child {
  width: 70%;
  margin: 5px auto;
  line-height: 1.2;
  font-weight: 600;
  font-size: 0.75rem;
  color: #acacac;
}
.qr-code-wraper-share {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.qr-code-item-bottom {
  display: flex;
  justify-content: space-between;
  width: 70%;
}
.qr-code-item-desc {
  text-align: center;
}
.qr-code-item-bottom div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.image-qr-code-wrapper-ib .qr-code-item-title,
.image-qr-code-wrapper-ib .qr-code-item-name,
.image-qr-code-wrapper-ib .qr-code-item-account-no,
.qr-code-item-bottom div {
  color: var(--color-main) !important;
}
.qr-code-item-name,
.qr-code-item-title,
.qr-code-item-bottom div {
  font-weight: 600;
}
.wrapper-trans {
  background-color: #f1f2f3;
}
button.custom-request-refund,
.custom-request-refund:hover,
.custom-request-refund:focus {
  border-radius: 50% !important;
  width: 60px !important;
  height: 60px !important;
  position: fixed;
  bottom: 10px;
  right: 10px;
  background-color: var(--color-main) !important;
  color: var(--white-color) !important;
  padding: 0px !important;
}
button.custom-request-refund .fa-plus {
  font-size: 30px;
  width: 30px;
  height: 30px;
  display: inline-block;
}
.wrapper-btn-refund fieldset > div {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-bottom: 16px !important;
}
.wrapper-btn-refund fieldset > div > div {
  width: 50%;
}
button.custom-approve-refund {
  border: 1px solid #4b9a87 !important;
  color: #4b9a87 !important;
}
button.custom-reject-refund {
  border: 1px solid #c6544c !important;
  color: #c6544c !important;
}
.page-amrefundcustomerrequest .settlement-tittle {
  line-height: 24px !important;
}
.wraper-button-fixed-bottom-refund > fieldset > div:first-child {
  padding: 16px;
  background-color: white !important;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}
.amout-refund {
  font-weight: 600;
}
.page-amrefundcustomerupdate .management-list-wapper {
  margin-bottom: 150px !important;
}
.page-amrefundcustomerupdate .management-list-wapper .customer-header-wraper {
  display: none;
}
/* .field-otp-cutom > fieldset > div {
      display: flex;
      justify-content: space-between;
      align-items: center;
  }
  .field-otp-custom > fieldset > div > div:first-child {
      width: 40%;
  }
  .field-otp > fieldset > div > div:last-child {
      width: 60%;
  } */
.box-authen-custom > fieldset > div > div,
.box-authen-custom > fieldset > div {
  background-color: var(--white-color) !important;
}
.box-authen-custom > fieldset > div {
  border-radius: 20px;
}
.trans-detail-content-custom > fieldset > div {
  margin: 0 16px 20px 16px;
}
.wraper-button-fixed-bottom-refund button,
.wapper-btn-reason fieldset button {
  height: 46px !important;
}
btn.custom-btn-approve {
  color: var(--white-color) !important;
  background-color: var(--color-main) !important;
}

.popup-select-time-range div:hover, .close-modal-favorite-function:hover, .update-menu-favorite:hover {
  cursor: pointer;
}

.flatpickr-calendar.open {
  z-index: 9999999 !important;
}

.wrapper-header-search-input .btn-remove-menu:focus {
  background-color: unset !important;
}

/* header pp  */

.wrapper-header.wrapper-header-pp {
  background-color: var(--color-main);
  position: fixed;
  left: 0;
  right: 0;
  z-index: 40000;
  padding: 5px 15px;
}

.wrapper-header-search {
  width: 400px;
}

.wrapper-header.wrapper-header-pp > fieldset > .fieldset-body,
.wrapper-header-search-input > fieldset > .fieldset-body {
  display: flex;
  align-items: center;
}

.wrapper-header.wrapper-header-pp > fieldset > .fieldset-body {
  justify-content: space-between;
  max-width: 1200px;
  margin: auto;
}

.wrapper-header-search .input-group input.form-control,
.wrapper-header-search .input-group .input-group-text {
  background: transparent;
  border: none;
}

.wrapper-header-search .input-group .input-group-text {
  padding-right: 0;
}

.wrapper-header-search .input-group .input-group-text i {
  color: var(--white-color);
}
.wrapper-header-avatar {
  position: relative;
}

.wrapper-header-setting {
  display: none;
  position: absolute;
  right: 0;
  background-color: var(--white-color);
  z-index: -1;
  opacity: 0;
  width: 200px;
  padding: 10px;
  border-radius: 7px;
  box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.37);
  -webkit-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.37);
  -moz-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.37);
}

.wrapper-header-setting::before {
    content: "";
    display: block;
    height: 10px;
    width: 100%;
    position: absolute;
    top: -10px;
    left: 0;
}

.wrapper-header-setting fieldset > .fieldset-body > div:not(:last-child) {
  padding-bottom: 18px;
}

.btn--close-menu-left {
  display: none;
}

.wrapper-header-avatar:hover .wrapper-header-setting {
  z-index: 200;
  opacity: 1;
  display: block;
  color: #1b1b1b;
  font-weight: 500;
  padding: 22px;
  border-radius: 4px;
  box-shadow: 0px 4px 10px 0px #00000014;
  bottom: -100px;
}

.wrapper-header-setting a:hover {
  color: unset;
}

.wrapper-header-setting a span {
  padding-left: 16px;
}

.wrapper-header-setting button {
    box-shadow: none;
    font-size: 1rem;
    font-weight: 500 !important;
    line-height: 19.36px;
    text-align: left;
}

.wrapper-header-setting button span {
  padding-right: 12px;
}

.wrapper-header-search .input-group input.form-control {
  margin: 0 !important;
  height: 40px !important;
  color: var(--white-color);
}

.wrapper-header .header-right > fieldset > .fieldset-body {
  display: flex;
  align-items: center;
  gap: 15px;
}

.wrapper-header .header-right .header-user-image{
    width: 42px;
    height: 42px;
    overflow: hidden;
    border-radius: 100%;
}

.wrapper-header .header-right .header-user-image img{
    width: 42px;
    height: 42px;
    object-fit: cover;
}


button.logo-header-pp {
  width: 140px;
  height: 50px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 77px;
  display: block;
}

button.logo-header-pp {
  background-color: transparent !important;
  font-size: 0 !important;
}
button.logo-header-pp:active,
button.logo-header-pp:hover {
  background-color: transparent !important;
}
div.btn-remove-menu {
  display: none;
}
.logo-header-pp > button:focus {
  background-color: unset !important;
}

/* end header pp  */
.action-button-waper:before {
    content: "\f142";
    color: #1B1B1B;
}
/* CSS for status list grid */
    .status-list>p {
        padding: 3px 12px 3px 26px;
        width: fit-content;
        border-radius: 40px;
        position: relative;
    }

    .status-list>p::before {
        content: '';
        width: 8px;
        height: 8px;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 11px;
    }

    .status-tran-active {
        color: #007CD6 !important;
        background-color: #F5FAFF;
    }

    .status-tran-active::before {
        background-color: #007CD6 !important;
    }

    .status-success {
        background-color: var(--success-10) !important;
        color: var(--success-60) !important;
    }

    .status-success::before {
        background-color: var(--success-30) !important;
    }

    button[ref="pagination-arrPrev"],
    button[ref="pagination-arrNext"] {
        pointer-events: none;
        cursor: not-allowed;
        opacity: 0.5;
    }

    .status-tran-rejected {
        background-color: var(--reject-10) !important;
        color: var(--reject-60) !important;
    }

    .status-tran-rejected::before {
        background-color: var(--reject-30) !important;
    }

    .pendingforuserapprove {
        background-color: var(--pdfar-10) !important;
        color: var(--pdfar-60) !important;
    }

    .pendingforuserapprove::before {
        background-color: var(--pdfar-30) !important;
    }

    button.custom-btn-approve {
        color: var(--white-color) !important;
        background-color: var(--color-main) !important;
        height: 40px !important;
    }

    .status-tran-pending {
        color: #FFCC05 !important;
    }

    .status-tran-rejected {
        color: #D8DADB !important;
    }

    .status-tran-block {
        color: #C344EF !important;
    }

    .status-tran-delete {
        color: #EF4444 !important;
    }

    .status-tran-delete::before {
        background-color: #EF4444 !important;
    }

    .status-tran-new::before {
        background-color: #065d9a !important;
    }

    .status-list>p {
        text-align: left;
    }

/* End */
.action-button-waper fieldset .fieldset-body:not(:has(button))::before {
    text-align: center;
}

/* CSS for Submerchant AM */
.pp-title-action::before {
    position: absolute;
    content: '';
    width: 4px;
    height: 22px;
    background-color: #FFCC05;
    left: 14px;
}
/* End */

/* Auto compile select */
#autocomplete-list {
    height: 44px;
    box-shadow: none !important;
    border-radius: 8px !important;
    border: 1px solid #ced4da;;
    cursor: pointer;
    width: 92%;
}
.formio-component-autoCompleteSelect input {
    border-radius: unset !important;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px !important;
    border: none;
}
.auto-complete-list {
    font-size: 14px;
}
.input-search-wrapper.is-active.d-block {
    margin-top: 1px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}
.pp-title-list {
    text-transform: capitalize;
}
.auto-complete-value {
    height: 44px !important;
    cursor: pointer !important;
    border-bottom: 1px solid #ced4da;
}
/* End */

/* hungnq css chart merchant report  */
.merchant-report-general-overview-chart-tatal-trans,
.merchant-report-general-overview-chart{
  width: 100%;
  height: 250px;
}

.compare-branches-chart{
  width: 100%;
  height: 250px;
}

.ct-none-demo {
    display: none !important;
}

@media (min-width: 1025px) {

.push-toash {
  background: #fff;
  border-radius: 6px 6px 6px 6px !important;
  position: fixed;
  z-index: 100000000;
  right: 10px !important;
  left:unset !important;
  bottom: 10px !important;
  top: unset !important;
  display: flex;
  padding: 15px;
  width: 26vw !important;
  box-shadow: unset !important;
  animation: movetopnoti 0.5s linear forwards !important;
}

    .parent-item-menu-accordion:hover .accordion-button.collapsed {
        background-color: #eff8ff !important;
    }
 
    .parent-item-menu-accordion:hover .accordion-collapse.collapse,
    .parent-item-menu-accordion .accordion-collapse.collapse:hover {
        display: block !important;
        height: fit-content !important;
    }
 
    .parent-item-menu-accordion:hover .accordion-button.collapsed svg {
        transform: rotate(88deg);
    }

    .menu-left-wrapper {
        overflow-y: inherit !important;
    }
    .menu-collapse-item--header .accordion-button .wraper-header-title > div {
        width: 15px;
        height: 21px;
    }
     .menu-collapse-item--header .accordion-button .wraper-header-title a, .menu-collapse-item--header .accordion-button .wraper-header-title {
        gap: 5px;
    }
    span.menu-collapse-item--header-title,
    .wraper-header-title > a,
    .custom-wraper-menu-links > a {
        line-height: 20px;
        padding-top: 1px;
        font-size: 0.75rem !important;
    }
/* namnh hover pp header end */
    .wraper-login-page > fieldset > .fieldset-body {
        max-width: 433px;
        margin: 0 auto 100px;
    }
}