html,
body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  background: #ffffff;
  /* letter-spacing: 0.04em; */
  -webkit-tap-highlight-color: transparent !important;
}

.mainPageWrapper {
  position: relative;
  min-height: 92vh !important;
}

/* fallback */
@font-face {
  font-family: "Material Icons";
  font-style: normal;
  font-weight: 600;
  src: url(https://fonts.gstatic.com/s/materialicons/v29/2fcrYFNaTjcS6g4U3t-Y5UEw0lE80llgEseQY3FEmqw.woff2)
    format("woff2");
  font-display: block;
}

.material-icons {
  font-family: "Material Icons", serif;
  font-weight: normal;
  font-style: normal;
  font-size: 26px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}

.mdc-text-field--disabled {
  background-color: #ffffff !important;
}

.mdc-text-field--outlined input {
  padding: 5px 15px !important;
}

.mdc-button {
  font-family: "Gilroy", sans-serif !important;
}

.mdc-text-field__input {
  font-family: "Gilroy", sans-serif !important;
  font-size: 1.2rem !important;
  font-weight: 600 !important;
}

.mdc-text-field__input::placeholder {
  color: #5b5b5b;
  font-size: 14px !important;
  font-weight: 600 !important;
}

.mdc-text-field__input::placeholder:after {
  color: #5b5b5b;
}

.mdc-text-field--textarea {
  background: #ffffff !important;
  border: unset !important;
}

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

.mdc-text-field--textarea .mdc-text-field__input {
  padding: 10px 15px !important;
  font-size: 15px !important;
  border: 1px solid #e5e5e5 !important;
}

* {
  box-sizing: border-box;
  font-family: "Gilroy", sans-serif;
}

#web-topUp {
  min-height: 100vh;
}

#web-topUp .page {
  padding-top: 64px;
  padding-bottom: 40px;
  margin-bottom: 10em;
}

.pageWrapper {
  margin: 0 auto;
  max-width: 540px;
  padding: 10px 0 15px;
  transition: all 0.5s;
  overflow: hidden !important;
}

.notAvailableWrapper {
  margin: 0 auto;
  max-width: 750px;
  padding: 10px 0 15px;
  transition: all 0.5s;
  overflow: hidden !important;
}

.disableDraggable {
  user-drag: none;
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

.dashboardWrapper {
  margin: 0 auto;
  max-width: 1320px;
  padding: 10px 0 15px;
  min-height: 92vh !important;
  transition: all 0.5s;
  overflow: hidden !important;
}

.pointer {
  cursor: pointer;
}

.h1Css {
  display: block;
  font-size: 2em;
  margin-block-start: 0.67em;
  margin-block-end: 0.67em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: bold;
}

.userSidebarMenu {
  padding-bottom: 0 !important;
}

.userSidebarMenu .mdc-list-item:hover {
  background: rgba(183, 29, 28, 0.1) !important;
  border-radius: 2px !important;
  width: 93%;
}

.userSidebarMenu .pointer:hover svg path,
.userSidebarMenu .pointer:hover .textOnHover {
  fill: #b71d1c;
  color: #b71d1c;
}

#web-topUp.dark #threeDot .threeDotSvg svg path {
  fill: #e8e6e3 !important;
}

#web-topUp.dark .scrollTop .arrow {
  border-color: #fff !important;
}

#web-topUp.dark .backContainer svg path {
  fill: #949494 !important;
}

/* color: #949494; */

#web-topUp.dark .userSidebarMenu .pointer:hover svg path,
#web-topUp.dark .userSidebarMenu .pointer:hover .textOnHover {
  fill: white;
  color: white;
}

#web-topUp.dark .userSidebarMenu .pointer:hover svg path,
#web-topUp.dark .userSidebarMenu .pointer:hover .textOnHover {
  fill: white;
  color: white;
}

.pageIsLoading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

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

.transactionsMenu .menuItem:hover svg path,
.transactionsMenu .menuItem:hover .textOnHover {
  fill: #b71d1c;
  color: #b71d1c;
}

.pointerHovUnderline {
  cursor: pointer;
}

.pointerHovUnderline:hover {
  text-decoration: underline;
}

.lineHeight15 {
  line-height: 1.5;
}

.paddingNone {
  padding: 0 !important;
}

.marginNone {
  margin: 0 !important;
}

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

.fullWidth {
  width: 100%;
}

.inlineFlex {
  display: inline-flex;
}

.alignCenter {
  text-align: center;
}

.alignLeft {
  text-align: left;
}

.alignRight {
  text-align: right;
}

.floatLeft {
  float: left;
}

.floatRight {
  float: right;
}

.clearBoth {
  clear: both;
}

.colorWarn {
  color: #f9b11e !important;
}

.infoText {
  font-size: 13px;
  color: #757575 !important;
}

.colorGreen {
  color: #34a853 !important;
}

.colorGreenBorder {
  border: 1px solid #6dad08;
}

.colorRed {
  color: #ef4537 !important;
}

.colorBlue {
  color: #2196f3 !important;
}

.errText {
  font-size: 13px;
  color: red;
}

@media (max-width: 360px) {
  .errText {
    font-size: 9px;
  }
}

.reqFieldText {
  font-size: 17px;
  color: red;
  font-weight: 600;
}

.errTextWrapper {
  background: #2196f32e;
  font-size: 15px;
  color: #000000;
  padding: 15px;
}

.errMsgWrapper {
  background: #f3212126;
  font-size: 14px;
  color: #000000;
  padding: 10px 15px;
}

.simpleUnderline {
  padding-top: 5px;
  clear: both;
  border-bottom: 1px solid #e5e5e5;
}

.backArrText {
  color: #757575;
}

.backArrText:hover {
  color: #4a4a4a;
}

.clickableIcon:hover {
  cursor: pointer;
  background: #f3f2f2;
  border-radius: 50%;
}

.home {
  padding: 20px;
  min-height: 90vh;
  width: 100%;
}

.divWrapper {
  padding: 15px 0;
  display: inline-flex !important;
}

.centerInlineFlex {
  display: inline-flex;
  align-items: center;
}

.homeHeading {
  padding: 0 8px 0 0;
  font-weight: 600;
  font-size: 16px;
  color: #3b5998;
}

.homeHeadingAfter {
  padding: 0 8px 0 8px;
  font-weight: 600;
  font-size: 16px;
  color: #3b5998;
}

.selectedPage {
  padding: 0;
  font-size: 16px;
}

/*home*/
.operators {
  font-size: 11px;
  background: #f5f5f5;
  border-radius: 11px;
  padding: 6px 11px;
  margin: 5px 2px;
  color: rgb(82, 82, 82);
  display: inline-flex;
}

.AmtWrapper {
  min-width: 85px;
  background: #ffffff;
  padding: 15px 0;
  height: 100px;
  align-items: center;
  text-align: center;
  margin: 5px 5px;
  cursor: pointer;
  border-radius: 6px;
  border: 1px solid #ebebeb;
}

.selectedCard {
  border: 1px solid #c62e2b;
  border-radius: 6px;
  color: #c62e2b !important;
  background: #c62e2b;
}

.AmtWrapper:hover {
  /* color: #ffffff; */
  background: #c62e2b;
}

.AmtWrapper:hover .topUpAmtConversion {
  background: #b71d1c;
  color: #fff;
}

.AmtWrapper:hover .topUpBestAmt {
  color: #ffffff;
}

.topUpAmtConversion {
  position: relative;
  bottom: -1.36em;
  font-size: 12px;
  padding: 9px 0;
  background: #ada5a8;
  color: #ffffff;
  font-weight: 600;
  border-radius: 0 0 5px 5px;
}

.topUpAmtSelected {
  background: #b71d1c;
  color: #fff;
}

.colorText {
  color: #000000de;
}

.hoverColor:hover {
  background: #f5f5f5;
}

.summaryCard {
  background: #f2f2f2;
}

.transDetailPage .summaryCard {
  background: #fff;
}

/*stripe CSS*/
#payment-form {
  padding: 1em 1em 2.2em 1em;
  background: #fff;
}

.errMsgCard {
  padding: 10px 5px 0;
  font-size: 14px;
  color: #ef4537;
  min-height: 27px;
}

/*animations*/
.transitionsSlideUP {
  position: relative;
  animation: move 0.8s 1;
}

.transitionsSlideLeft {
  position: relative;
  animation: moveRL 0.8s 1;
}

/*dialogs*/
.mdc-dialog--open {
  background: #6495ed66;
  border: none;
}

.dialogButton1 {
  color: #757575 !important;
}

.dialogButton2 {
  color: #3b5998 !important;
}

.closeIconWrapper {
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 10;
}

.inviteAndReferPage .closeIconWrapper i {
  font-size: 22px !important;
}

.mdc-dialog__surface {
  max-width: 600px !important;
}

.inviteAndReferPage .reusableDialog .mdc-dialog__surface {
  padding: 20px !important;
}

.referralAdmin .mdc-dialog__surface {
  padding: 0 !important;
  max-height: 70vh;
  overflow-y: auto;
}

.dataPackOptionModal .mdc-dialog__surface {
  max-height: 70vh;
  width: 585px;
  overflow-y: scroll;
}

.reusableDialog .mdc-dialog__surface {
  max-width: fit-content !important;
  min-width: fit-content !important;
  padding: 35px;
  border-radius: 6px;
}

.contactsPage .contactPopup .reusableDialog .mdc-dialog__surface {
  padding: 0px;
}

.contactsPage #mdc-chip-2 img {
  width: 20px !important;
}

.homeContactPopup .mdc-dialog__surface {
  padding: 0;
}

.homeContactPopup .homepageContact::-webkit-scrollbar,
.hideScrollbar::-webkit-scrollbar {
  width: 0.5rem;
  height: 0px;
}

.homeContactPopup .contactHeading {
  background: #fff !important;
}

#web-topUp.dark .homeContactPopup .contactHeading {
  background: #222223 !important;
}

#web-topUp.dark .relationshipSelect,
#web-topUp.dark .contactPopupWrapper input {
  background: unset;
  color: #fff !important;
}

#web-topUp.dark .dropdownText {
  color: #8a8888;
}

.homeContactPopup .contactListWrapper {
  padding-left: 0.5rem;
}

/* .referralAdmin .mdc-dialog__surface::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #f5f5f5;
  border-radius: 10px;
} */

/* .referralAdmin .mdc-dialog__surface::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #f5f5f5;
  border-radius: 10px;
} */

/* .assignedUserIdContainer .mdc-dialog__surface::-webkit-scrollbar,
.referralAdmin .mdc-dialog__surface::-webkit-scrollbar {
  width: 10px;
  background-color: #f5f5f5;
} */

/* .assignedUserIdContainer .mdc-dialog__surface::-webkit-scrollbar-thumb,
.referralAdmin .mdc-dialog__surface::-webkit-scrollbar-thumb {
  background-color: #aaa;
  border-radius: 10px;
  background-image: -webkit-linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(0, 0, 0, 0.2) 50%,
    rgba(0, 0, 0, 0.2) 75%,
    transparent 75%,
    transparent
  );
} */

@keyframes move {
  from {
    bottom: -200px;
  }
  to {
    bottom: 0;
  }
}

@keyframes moveRL {
  from {
    right: -500px;
  }
  to {
    right: 0;
  }
}

@keyframes moveLR {
  from {
    left: -500px;
  }
  to {
    left: 0;
  }
}

@keyframes hide {
  from {
    bottom: 0;
  }
  to {
    bottom: -200px;
  }
}

@keyframes hideRL {
  from {
    left: 0;
  }
  to {
    left: -550px;
  }
}

.selectType {
  color: #757575;
}

.selectType:hover {
  cursor: pointer;
  color: #2196f3;
  font-weight: 600;
}

.selectedSearch {
  color: #2196f3;
  font-weight: 600;
}

.searchField {
  font-size: 12px;
  background: unset;
  min-width: 40%;
  max-width: 380px;
  margin: auto;
}

.searchBox {
  padding: 15px 10px 30px;
  background: #2196f361;
}

.messageWrapper {
  background: #fff;
  border-radius: 6px;
  margin-top: 35px;
}

.errorDiv {
  width: auto;
  height: max-content;
  font-size: 14px;
  display: flex;
  align-items: center;
  padding-right: 15px;
  padding-left: 15px;
  margin-top: 5px;
  padding: 6px;
  padding-left: 20px;
  border-radius: 0 5px 0 5px;
}

.dropdownHeader {
  display: flex;
  width: 100%;
  justify-content: space-between;
  cursor: pointer;
}

.homepage .mdc-text-field {
  height: max-content !important;
}

.mdc-text-field--disabled {
  background: #ffffff !important;
}

.mdc-checkbox__background {
  /*background: #6DAD08 !important;*/
  border: 1px solid #6dad08 !important;
  color: #ffffff;
}

.mdc-checkbox::before,
.mdc-checkbox::after,
.mdc-checkbox__native-control:enabled:checked {
  background: #6dad08 !important;
  background-color: #6dad08 !important;
}

.mdc-checkbox__native-control:enabled:checked ~ .mdc-checkbox__background,
.mdc-checkbox__native-control:enabled:indeterminate
  ~ .mdc-checkbox__background {
  background: #6dad08 !important;
  background-color: #6dad08 !important;
}

.cancelButton {
  margin: 5px 10px 5px 0;
  padding: 15px 24px;
  text-align: center;
  border-radius: 5px;
  color: #757575 !important;
  font-weight: 600 !important;
  border: 1px solid #ffffff;
}

.button {
  width: 42%;
  height: 48px;
  background: #fff;
  border-radius: 6px;
  font-weight: bold;
  font-size: 12px;
  line-height: 8px;
  color: #b71d1c;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 20px 10px 20px 10px;
  border: 0.4px solid #b71d1c;
  cursor: pointer;
}

.buttonWrapper {
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
}

.button:hover {
  background-color: #b71d1c;
  color: #fff;
}

.button:hover svg path {
  fill: #fff;
  color: #fff;
}

.cancelButton:hover {
  border: 1px solid #b71c1c;
  background-color: #ffffff;
  color: #b71c1c !important;
  cursor: pointer;
}

.saveButton {
  width: 160px;
  margin: 5px 0 5px 10px;
  text-align: center;
  border-radius: 5px;
  padding: 15px 24px;
  box-shadow: none;
  background-color: #6dad08;
  border: 1px solid #6dad08;
  color: #ffffff !important;
  font-weight: 600 !important;
}

.saveButton:hover {
  border: 1px solid #6dad08;
  background-color: #6dad08;
  color: #ffffff !important;
  cursor: pointer;
  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2),
    0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
}

.previewChanges {
  max-width: 540px;
  margin: auto;
}

.cardSelected {
  border: 1.5px solid rgb(109, 173, 8) !important;
}

.smsDropdown {
  background-color: #fffde7;
}

#web-topUp.dark .smsDarkTextfield {
  background: none !important;
}

.myCardList .mdc-list-item {
  width: 332px;
}

.mdc-list-item:hover {
  background: none !important;
  box-shadow: none !important;
}

:not(.mdc-list--non-interactive)
  > :not(.mdc-list-item--disabled).mdc-list-item:hover::before {
  opacity: 0 !important;
}

:not(.mdc-list--non-interactive)
  > :not(.mdc-list-item--disabled).mdc-list-item::before,
:not(.mdc-list--non-interactive)
  > :not(.mdc-list-item--disabled).mdc-list-item::after {
  top: calc(50% - 100%);
  left: calc(50% - 100%);
  width: 0% !important;
  height: 0% !important;
}

.logoWrapper {
  width: 42px;
  height: 42px;
  border: 2px solid #ececec;
  border-radius: 4px;
  display: flex;
  align-content: center;
  justify-content: center;
  margin-right: 22px;
  transform: scale(1.2);
  margin-top: 4px;
}

.logoWrapper img {
  width: 38px;
  height: 38px;
  border-radius: 3px;
  object-fit: cover;
}

.flexAlignCenter {
  display: flex;
  align-items: center;
}

/* Style for collapsible dropdown */

.dropdown {
  border: 1px solid #ebebeb;
  border-radius: 6px;
}

.refundPopup .mdc-dialog__header {
  padding: 0;
}

.dropdown .trigger {
  cursor: pointer;
}
.dropdown .dropArrow {
  transform: rotate(180deg);
  transition: transform 0.3s;
}
.dropdown .trigger.active .dropArrow {
  transform: rotate(360deg) !important;
}
.dropdown .content {
  display: none;
}
.dropdown .content.active {
  display: block;
  animation: slide-down 0.5s ease-out;
}

@keyframes slide-down {
  0% {
    opacity: 0;
    transform: translateY(-10%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 570px) {
  .AmtWrapper:hover {
    /* color: #ffffff; */
    background: #fff;
  }

  .selectedCard {
    background: #c62e2b !important;
  }

  .AmtWrapper:hover .topUpAmtConversion {
    background: #ada5a8;
    color: #fff;
  }

  .selectedCard .topUpAmtConversion {
    background: #b71d1c !important;
  }

  #web-topUp.dark .AmtWrapper:hover {
    background: #262829 !important;
    color: #e8e6e3 !important;
  }

  #web-topUp.dark .AmtWrapper.selectedCard {
    background: #9e180d !important;
  }

  #web-topUp.dark .AmtWrapper:hover * {
    color: #e8e6e3 !important;
  }

  #web-topUp.dark .selectedCard:hover .topUpAmtSelected.topUpAmtConversion {
    background: #7b1109 !important;
  }

  #web-topUp.dark .AmtWrapper:hover .topUpAmtConversion {
    background: #323537 !important;
  }
}

/* responsive */
@media (max-width: 470px) {
  .AmtWrapper:hover {
    /* color: #ffffff; */
    background: #fff;
  }

  .selectedCard {
    background: #c62e2b !important;
  }

  .AmtWrapper:hover .topUpAmtConversion {
    background: #ada5a8;
    color: #fff;
  }

  .selectedCard .topUpAmtConversion {
    background: #b71d1c !important;
  }

  .closeIconWrapper {
    top: 3px;
  }

  .myCardList .mdc-list-item {
    width: 300px;
  }

  .reusableDialog .mdc-dialog__surface {
    padding: 25px;
  }
}

@media (max-width: 420px) {
  .button {
    width: 46%;
    padding: 0;
  }
}

@media (max-width: 400px) {
  .inviteAndReferPage #dialogWrapper {
    padding: 10px !important;
  }
  .inviteAndReferPage .reusableDialog .mdc-dialog__surface {
    padding: 18px;
  }
}

@media (max-width: 370px) {
  .myCardList .mdc-list-item {
    width: 250px;
  }

  .CardNumberField-input-wrapper {
    margin-left: 25px !important;
  }
  .button {
    width: 48%;
    font-size: 11px;
  }
}

@media (max-width: 340px) {
  #payment-form {
    padding-right: 0px;
    background: #fff;
  }
  .buttonWrapper {
    margin-top: 25px;
  }
}

.logoutPopup.reusableDialog .mdc-dialog__surface {
  margin-top: 11vh !important;
}

.newCardBtnWrapper {
  padding: 15px;
  text-align: center;
  border-radius: 4px;
  font-weight: 700;
}

.smallFontsLight {
  font-size: 0.85em !important;
  color: gray;
  font-weight: bold;
}

.smallFonts {
  font-size: 0.9em !important;
  font-weight: bold;
}

.paddingRight {
  padding-right: 10px !important;
}

/*dark mode*/

#web-topUp.dark {
  background-color: #1c1e1f;
  border-color: #383838;
}

#web-topUp.dark * {
  border-color: #383838;
}

#web-topUp.dark .borderColor {
  border-color: #bdb8af;
}

#web-topUp.dark .homeHeading,
#web-topUp.dark .homeHeadingAfter {
  color: #90b1d4;
}

#web-topUp.dark h1,
#web-topUp.dark h2,
#web-topUp.dark h3,
#web-topUp.dark h4,
#web-topUp.dark .darkTitle {
  color: #e8e6e3 !important;
}

#web-topUp.dark .landingPage h1,
#web-topUp.dark .landingPage h2,
#web-topUp.dark .landingPage h3,
#web-topUp.dark .landingPage h4 {
  color: #000000 !important;
}

.darkPriceTitle {
  color: rgb(128, 128, 128) !important;
  font-weight: bolder;
}

#web-topUp.dark .darkStatusDisabled {
  background-color: rgb(221 0 0 / 39%) !important;
}

#web-topUp.dark .darkStatusEnabled {
  background-color: rgb(9 187 9 / 39%) !important;
}

#web-topUp.dark .mdc-top-app-bar {
  background-color: #1c1e1f;
  color: #bdb8af;
}

#web-topUp.dark .colorDim,
#web-topUp.dark .infoText,
#web-topUp.dark a,
#web-topUp.dark .colorText,
#web-topUp.dark .backArrText,
#web-topUp.dark .darkContent {
  color: #beb9af !important;
}

#web-topUp.dark .transList .colorText {
  color: #e8e6e3 !important;
}

#web-topUp.dark .messageWrapper .messageBoxWrapper .mdc-text-field__input {
  background: #262829 !important;
}

#web-topUp.dark .mdc-text-field__input,
#web-topUp.dark .mdc-text-field-helper-text {
  color: #e8e6e3 !important;
}

#web-topUp.dark .mdc-text-field__input::placeholder {
  color: #5b5b5b !important;
}

#web-topUp.dark .mdc-text-field__input::placeholder:after {
  color: #5b5b5b !important;
}

#web-topUp.dark .mdc-text-field__icon {
  color: #5b5b5b !important;
}

#web-topUp.dark .dropArrow path {
  color: #fff;
  fill: #fff !important;
}

#web-topUp.dark .searchBox {
  background-color: #1c1e1f;
}

#web-topUp.dark .mdc-card {
  background-color: #1c1e1f;
  color: #e8e6e3 !important;
}

#web-topUp.dark .username {
  color: #e8e6e3 !important;
}

#web-topUp.dark .darkColor {
  color: #e8e6e3 !important;
}

#web-topUp.dark .darkBGColor {
  background-color: #1c1e1f;
}

#web-topUp.dark .darkBtn {
  background-color: #9e180d !important;
  color: #e8e6e3 !important;
}

#web-topUp.dark .darkSocialFb {
  background-color: unset;
  color: #90b1d4 !important;
}

#web-topUp.dark .darkSocialGo {
  background-color: unset;
  color: #e96f6f !important;
}

#web-topUp.dark .darkSocialFb:hover {
  background-color: #3b5998;
  color: #ffffff !important;
}

#web-topUp.dark .darkSocialGo:hover {
  background-color: #b71c1c;
  color: #ffffff !important;
}

#web-topUp.dark .errText {
  color: #b71c1c;
}

#web-topUp.dark .reqFieldText {
  color: #b71c1c;
}

#web-topUp.dark .errTextWrapper {
  color: #90b1d4 !important;
}

#web-topUp.dark .operators {
  color: #e8e6e3 !important;
  background: unset;
}

#web-topUp.dark .AmtWrapper {
  background: #262829;
  color: #e8e6e3 !important;
}

#web-topUp.dark .selectedCard {
  background: #9e180d !important;
  color: #e8e6e3 !important;
}

#web-topUp.dark .AmtWrapper:hover {
  background: #9e180d;
  color: #e8e6e3;
}

#web-topUp.dark .AmtWrapper:hover .topUpAmtConversion {
  background: #323537 !important;
}

#web-topUp.dark .topUpAmtSelected {
  background: #7b1109 !important;
}

#web-topUp.dark .topUpAmtConversion {
  background: #323537;
  color: #e8e6e3;
}

#web-topUp.dark .clickableIcon:hover,
#web-topUp.dark .hoverColor:hover {
  background: #3b3d3e;
}

#web-topUp.dark .summaryCard {
  background: #262829;
  color: #e8e6e3;
}

#web-topUp.dark .messageWrapper,
#web-topUp.dark .dropdown {
  background: #262829;
  color: #e8e6e3;
}

#web-topUp.dark #payment-form {
  background: #262829;
  color: #e8e6e3;
}

#web-topUp.dark form.ElementsApp,
form.ElementsApp form.InputElement {
  color: #e8e6e3 !important;
}

#web-topUp.dark .mdc-dialog--open {
  background: #5f606366;
  border: none;
}

#web-topUp.dark .mdc-dialog__surface {
  background: #222223 !important;
}

#web-topUp.dark .dialogButton1 {
  color: #757575 !important;
}

#web-topUp.dark .dialogButton2 {
  color: #2196f3 !important;
}

#web-topUp.dark .errMsgWrapper {
  background: #f3f3f326;
  font-size: 14px;
  color: #e0dbdb;
  padding: 10px 7px;
}

#web-topUp.dark .mdc-text-field--disabled {
  background: #1c1e1f !important;
}

#web-topUp.dark .wrapperClass .mdc-text-field__input {
  background: #262829 !important;
}

/*#web-topUp.dark .homeImage{*/
/*    background: #222222;*/
/*}*/

#web-topUp.dark .saveButton {
  background-color: #6dad08 !important;
  color: #ffffff !important;
}

#web-topUp.dark .cardSelected {
  background: #262829 !important;
}

#web-topUp.dark .newCardBtnWrapper {
  background: #262829 !important;
}

#web-topUp.dark .newCardBtnWrapper:hover {
  background: #e5e5e5;
}

#web-topUp.dark .dropdownWrapper::after {
  /* content: url('/assets/homePage/downSvgWhite.svg') */
  content: url("../homePage/downSvgWhite.svg");
}

.imageUploadOverlay {
  height: 100%;
  width: 100%;
  background-size: 100% 100%;
  opacity: 1;
  background: url("../editImage.png") !important;
  background-position: center !important;
  z-index: 200;
  cursor: pointer;
}

.imageUploadOverlay.biggerEditIcon {
  background: url("../editImage1.png") !important;
  height: 92px;
  width: 90px;
  background-size: 90px !important;
  border-radius: 50%;
}

.mdc-chip {
  background-color: #f5f5f5 !important;
}

.recentMsgDivLarge {
  bottom: 5%;
  font-size: 18px;
  left: 1%;
  position: fixed;
  /* width: 500px; */
  width: 31%;
}

.recentMsgDivMedium {
  font-size: 18px;
  min-height: 100px;
  position: relative;
  width: 100%;
}

.recentMsgDivSmall {
  font-size: 14px;
  min-height: 70px;
  position: relative;
  width: 100%;
}

.recentMsgWrapper {
  align-items: center;
  border-radius: 10px;
  color: #000000;
  display: inline-flex;
  text-align: justify-all;
  width: 100%;
}

#web-topUp.dark .recentMsgWrapper,
#web-topUp.dark .colorWhite {
  color: #ffffff !important;
}

#web-topUp.dark .offerDescText {
  color: #0eac69;
}

#web-topUp.dark .dashedLineBorder {
  border-color: #ffffff !important;
}

#web-topUp.dark .offerWrapperDiv {
  border: none !important;
}

#web-topUp.dark .ticketCircle {
  background: rgb(28 30 31) !important;
}

.recentMsgSlideInLarge {
  animation: move 1s 1;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 15px 0 rgba(0, 0, 0, 0.19);
  position: relative;
}

.recentMsgSlideInMedium {
  animation: moveLR 1s 1;
  background: #f0f0f0;
  position: relative;
}

#web-topUp.dark .recentMsgSlideInMedium {
  background: #0f0f0f;
}

.recentMsgSlideInSmall {
  animation: moveLR 1s 1;
  background: #f0f0f0;
  position: relative;
}

#web-topUp.dark .recentMsgSlideInSmall {
  background: #0f0f0f;
}

.recentMsgSlideOutLarge {
  animation: hide 1s 1;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 15px 0 rgba(0, 0, 0, 0.19);
  position: relative;
}

.recentMsgSlideOutMedium {
  animation: hideRL 1s 1;
  background: #f0f0f0;
  position: relative;
}

#web-topUp.dark .recentMsgSlideOutMedium {
  background: #0f0f0f;
}

.recentMsgSlideOutSmall {
  animation: hideRL 1s 1;
  background: #f0f0f0;
  position: relative;
}

#web-topUp.dark .recentMsgSlideOutSmall {
  background: #0f0f0f;
}

.carrierImageLarge {
  border-radius: 5px;
  margin: 10px;
  width: 75px;
}

.carrierImageMedium {
  border-radius: 5px;
  margin: 10px;
  width: 75px;
}

.carrierImageSmall {
  border-radius: 5px;
  margin: 10px;
  width: 50px;
}

.closeButton {
  color: darkgray;
  cursor: pointer;
  font-size: 20px;
  position: absolute;
  right: -7px;
  text-align: center;
  top: -7px;
  vertical-align: center;
}

.mdc-text-field__input,
.mdc-line-ripple--active {
  border: none !important;
}

.mdc-line-ripple {
  display: none;
}

.contactName {
  color: #e8e6e3;
  font-size: 12px;
  margin-top: 3px;
}

.paymentBorder {
  border: 1px solid #ebebeb;
  border-radius: 6px;
  padding: 20px 30px;
}

@media (max-width: 400px) {
  .paymentBorder {
    padding: 10px 10px;
  }
}

/* dark mode in imelantation for new designs  */
#web-topUp.dark h1 {
  color: #e8e6e3;
}
#web-topUp.dark .landingPage h1 {
  color: #000000;
}

#web-topUp.dark tbody,
#web-topUp.dark .dropDownContainerDim {
  opacity: 0.9 !important;
}
#web-topUp.dark .dropDownBox {
  display: none;
}

#web-topUp.dark tr {
  -webkit-box-shadow: none;
  box-shadow: none;
}
#web-topUp.dark .transData {
  color: black !important;
}

#web-topUp.dark .editedRow {
  background-color: #c2f1cd;
}

#web-topUp.dark .percent {
  /* color: rgba(184 233 195 1); */
}

#web-topUp.dark .saveNumberPopup .modalFormInput {
  background-color: #222223 !important;
}

#web-topUp.dark .modalFormInput {
  background-color: #262829 !important;
  color: #fff !important;
}

#web-topUp.dark .updatedContactWrapper {
  background-color: #262829 !important;
}

#web-topUp.dark .updatedContactWrapper .modalFormInput {
  background-color: #262829 !important;
}

/* COLORS */
.available {
  color: #34a853 !important;
  border-color: #34a853 !important;
  transition: transform 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.used {
  color: #f9b11e !important;
  border-color: #f9b11e !important;
  transition: transform 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.revoked {
  color: #949494 !important;
  border-color: #949494 !important;
  transition: transform 1s cubic-bezier(0.075, 0.82, 0.165, 1);
  cursor: not-allowed;
}

.available:hover {
  background-color: #34a853 !important ;
  color: #fff !important;
  transform: scale(1.05);
}

.used:hover {
  background-color: unset !important;
  color: #f9b11e !important;
  transform: scale(1.05);
}

.revoked:hover {
  background-color: unset !important;
  color: #949494 !important;
  transform: scale(1.05);
}

.ERROR {
  color: #b62a18 !important;
  background-color: #ffdfdf !important;
}

.SUCCESS {
  color: #fff !important;
  background-color: #34a853 !important;
}

.INFO {
  color: #fff !important;
  background-color: #2bbbad !important;
}

.paddingForDropdownContent {
  padding: 25px;
}

.paddingTopZero {
  padding-top: 0;
}

.paddingBottomZero {
  padding-bottom: 0;
}

.addNumberDialogInTransaction.mdc-dialog__body {
  margin-top: 0 !important;
}

.disable-select {
  user-select: none; /* supported by Chrome and Opera */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
}

/*::-webkit-scrollbar-corner {*/
/*    background-color: #181a1b;*/
/*}*/
/*::-webkit-scrollbar-thumb {*/
/*    background-color: #2b2f31;*/
/*}*/
/*::-webkit-scrollbar {*/
/*    background-color: #181a1b;*/
/*    color: #c5c1b9;*/
/*}*/

/*dark mode ends*/