/*# sourceMappingURL=custom.min.css.map */
.text-succes {
    --vz-text-opacity: 1;
    color: #15645e !important
}
.bg-succes {
    background-color: #15645e !important
}
.my-button {
    border-color: rgba(255, 255, 255, 0.34);
    color:white;
    /* background-color: rgba(0, 0, 0, 0); */
    background-color: transparent;
}
.text-white {
    color: white;
}

.whatsapp-float {
    position: fixed;
    width: 50px;
    height: 50px;
    bottom: 40px;
    right: 40px;
    background-color: #15645e;
    color: #fff;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 3px orange;
    z-index: 100;
}

.minipay-whatsapp-container {
  position: fixed;
  bottom: 40px;
  right: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 100;
}

.minipay-whatsapp-label {
  margin-bottom: 3px; /* Space between text and button */
  font-size: 12px; /* Adjust as needed */
  color: #15645e;
  font-weight: bold; /* Optional: make the text bold */
}

.minipay-whatsapp-float {
  width: 50px;
  height: 50px;
  background-color: #25D366;
  color: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
}

.minipay-whatsapp-float:hover {
  background-color: #25D366; /* Keep the same background color */
  color: white;
}

.send-button {
  position: fixed;
  bottom: 40px;
  right: 40px;
  z-index: 1000;
  /* background-color: #15645e; */
}

/* .whatsapp-float img {
    width: 50px;
    margin-top: 5px;
} */

.whatsapp-float:hover {
    /* No hover effect styles */
    background-color: #15645e; /* Set the same background color as normal */
    color: white;
}

.vertical-table {
    display: flex;
    flex-direction: column;
  }
  .vertical-table .table-heading {
    display: none;
  }
  @media (min-width: 768px) {
    .vertical-table .table-heading {
      display: block;
    }
    .vertical-table .table-heading th {
      position: sticky;
      top: 0;
      background-color: #fff;
      z-index: 1;
    }
  }
  #clickable-table {
    cursor: pointer;
  }
  
  /* #clickable-table tr:hover {
    background-color: orange; 
  } */

/* HTML: <div class="loader"></div> */
.minipay-loader-container {
  display: grid;
  place-items: center;
}
.minipay-loader {
  width: 30px;
  padding: 4px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #15645e;
  --_m: 
    conic-gradient(#0000 10%,#000),
    linear-gradient(#000 0 0) content-box;
  -webkit-mask: var(--_m);
          mask: var(--_m);
  -webkit-mask-composite: source-out;
          mask-composite: subtract;
  animation: l3 1s infinite linear;
}
@keyframes l3 {to{transform: rotate(1turn)}}
/*
 * Loading Dots
 * Can we use pseudo elements here instead :after?
 */
 .loading span {
  display: inline-block;
  vertical-align: middle;
  width: .6em;
  height: .6em;
  margin: .19em;
  background: #007DB6;
  border-radius: .6em;
  animation: loading 1s infinite alternate;
}

/*
 * Dots Colors
 * Smarter targeting vs nth-of-type?
 */
.loading span:nth-of-type(2) {
  background: #008FB2;
  animation-delay: 0.2s;
}
.loading span:nth-of-type(3) {
  background: #009B9E;
  animation-delay: 0.4s;
}
.loading span:nth-of-type(4) {
  background: #00A77D;
  animation-delay: 0.6s;
}
.loading span:nth-of-type(5) {
  background: #00B247;
  animation-delay: 0.8s;
}
.loading span:nth-of-type(6) {
  background: #5AB027;
  animation-delay: 1.0s;
}
.loading span:nth-of-type(7) {
  background: #A0B61E;
  animation-delay: 1.2s;
}

/*
 * Animation keyframes
 * Use transition opacity instead of keyframes?
 */
@keyframes loading {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.minipay-telegram-container {
  position: fixed;
  bottom: 40px;
  right: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 100;
}

.minipay-telegram-label {
  margin-bottom: 3px; /* Space between text and button */
  font-size: 12px; /* Adjust as needed */
  color: #15645e;
  font-weight: bold; /* Optional: make the text bold */
}

.minipay-telegram-float {
  width: 45px;
  height: 45px;
  background-color: #24A1DE;
  color: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
}

.minipay-telegram-float:hover {
  background-color: #24A1DE; /* Keep the same background color */
  color: white;
}

.checkmark {
  position: absolute;
  top: 0;
  right: 0;
  background-color: orange;
  color:white;
  border-radius: 50%;
  padding: 1px;
  height: 15px;
  width: 15px;
  font-size: 9px;
}

.home-button-image {
  height: 25px;
  width:25px;
}
.nowrap {
  white-space: nowrap;
}
.always-visible-tooltip .tooltip {
  opacity: 1 !important;
  visibility: visible !important;
}
.divider-container {
  display: flex;
  align-items: center;
  margin: 20px 0;
}

/* Divider styles */
.divider {
  flex-grow: 1;
  height: 1px;
  background-color: #ccc;
}

/* Divider text styles */
.divider-text {
  padding: 0 10px;
  color: #999;
  font-size: 14px;
}

.color-black {
  color: #000;
}