@font-face {
  font-family: "San Francisco";
  font-weight: 400;
  font-style: normal;
  src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff");
}

@font-face {
  font-family: "San Francisco bold";
  font-weight: 400;
  font-style: bold;
  src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-bold-webfont.woff");
}

html {
  /* IMPORTANT; */
  text-align: center; 
  height: 100%;
  font-family: SF Pro Display, SF Pro, -apple-system, "San Francisco", "Helvetica", "Roboto", "Arial"; 
  width: 100%;
}
.checkout_body {
  background-color: #020418 !important;
  animation: pulseAnimation 3s infinite; /* Adjust the duration (3s) to control the speed of pulsation */
  background-position-x: initial;
  background-position-y: initial;
  background-size: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: initial;
  width: 100%;
  height: 100%;  
  justify-content: center;
  font-family:  SF Pro Display, SF Pro, -apple-system, system-ui, BlinkMacSystemFont, Helvetica, "Roboto", sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.main_card {
  background-color: #e8dede55;
  width: 95vw;
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  border-radius: 80px;

}

#backbutton{
  padding: 20px;
  font-size: 32px !important;
}

@keyframes pulseAnimation {
  0% {
    background-image: radial-gradient(78.6% 34.5% at 22.9% 34.8%, rgb(94 102 255)  0%, rgb(17, 17, 30) 100%);
    /* background-position: 22.9% 34.8%; */
  }
  50% {
    background-image: radial-gradient(78.6% 34.5% at 22.9% 34.8%, rgb(94 102 255)  0%, rgb(17, 17, 30) 100%);
    /* background-image: radial-gradient(78.6% 34.5% at 50% 50%, rgb(77 81 159) 0%, rgb(17, 17, 30) 100%); */
    /* background-position: 50% 50%; */
  }
  100% {
    background-image: radial-gradient(78.6% 34.5% at 22.9% 34.8%, rgb(94 102 255)  0%, rgb(17, 17, 30) 100%);

    /* background-image: radial-gradient(78.6% 34.5% at 77.1% 65.2%, rgb(77 81 159) 0%, rgb(17, 17, 30) 100%); */
    /* background-position: 77.1% 65.2%; */
  }
}
a {
  color: inherit !important;
  text-decoration: none !important;
}

.ocean {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;

}

.wave {
  background: url(https://cdn.kcak11.com/codepen_assets/wave_animation/wave.svg) repeat-x;
  position: absolute;
  top: -198px;
  width: 6400px;
  height: 198px;
  animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
  transform: translate3d(0, 0, 0);
}

.wave2 {
  top: -175px;
  animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) -0.125s infinite, swell 7s ease -1.25s infinite;
  opacity: 1;

  background: url(https://cdn.kcak11.com/codepen_assets/wave_animation/wave.svg) repeat-x;
  position: absolute;

  width: 6400px;
  height: 198px;

  transform: translate3d(0, 0, 0);
}

.login_screen {
  /* background: radial-gradient(ellipse at center, #b6b9ee 0%, #7c82ff 35%, #5d61ba 100%); */
  background: radial-gradient(ellipse at center, #696969 0%, #515151 35%, #000000 100%);
  overflow: hidden;
}
@keyframes wave {
  0% {
    margin-left: 0;
  }
  100% {
    margin-left: -1600px;
  }
}
@keyframes swell {
  0%,
  100% {
    transform: translate3d(0, -25px, 0);
  }
  50% {
    transform: translate3d(0, 5px, 0);
  }
}

.endWave{
  display:none;
}

.dont_show {
display: none !important;
}
.row-colleciton {
  background-color: #11111e;
}
.subtitle {
  font-size: 24px;
}

/* MOBILE CSS */
@media only screen and (max-width: 850px) {
  .card_save {
    width: 80%;
  }
  .save_card_button {
    width: 30vw;
    background-color: #c6c4ff;
    border-radius:   5px;
    margin-top:   10px;
    left: 31% !important;
  }
  .main_title {
    min-width: 40vw;
  }
  .subtitle {
    font-size: 20px;
  }
  .savedPaymentMethods {
    width: 100%;
  }
  .card-number{
    min-width: 100%;
  }
  .numDate{
    flex-direction: column;
  }
}

.creditCard {
  display: flex;
  flex-direction: column;
  width:   300px; /* Adjust as needed */
  height:   150px; /* Adjust as needed */
  background-color: #fff;
  border-radius:   15px;
  box-shadow:   0   4px   6px rgba(0,   0,   0,   0.1),   0   1px   3px rgba(0,   0,   0,   0.08);
  padding:   20px;
  margin:   10px;
  text-align: center;
  position: relative;
}

.card-brand {
  position: absolute;
  top:   10px;
  left:   10px;
  font-size:   14px;
  color: #999;
}

.card-number {
  font-size:   18px;
  color: #333;
  margin-top:   10px;
}
.card-expiry {
  font-size:   14px;
  color: #333;
  margin-top:   10px;
  margin-left:   10px;
}
.save_card_button {
  width: 10vw;
  background-color: #c6c4ff;
  border-radius:   5px;
  margin-top:   10px;
  border: none;
  color: #3a36ae;
  font-weight: 800;
  position: relative;
    left: 42% !important;
}
.numDate {
  display: flex;
  margin-top: 14px;
  padding: 4px;
}
.pick_saved_card_button {
  background-color: #dfdeff;
  color: #3a36ae;
  border: 2px solid #3a36ae;
  border-radius:   5px;
  padding:   10px   20px;
  cursor: pointer;
  font-size:   14px;
  font-weight: 700;
  margin-top:   10px;
}
.default-payment-method {
  background-color: #3a36ae !important;
  color: white !important;
  border: none !important; 
}
.card_save {
  padding: 20px !important;
  background-color: #ffffff47;
  border-radius: 10px;
  width: 70vw;
}
.main_title{
  min-width: 380px;
  font-weight: 900;
}
.main_title_info{
  display: flex;
  font-weight: 900;
}
.savedPaymentMethods {
  display: flex !important;
  overflow: scroll;
}
.sel_saved_title{
  font-size: 28px;
  font-weight: 800;
}
.info-icon-container {
  position: relative;
  display: inline-block;
}

/* Hide the tooltip text by default */
.tooltip-text {
  visibility: hidden;
  width:  256px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius:  6px;
  padding:  5px;
  position: absolute;
  z-index:  1;
  /* bottom:  125%; */
  left:  50%;
  margin-left: -60px;
  opacity:  0;
  transition: opacity  0.3s;
}

/* Show the tooltip text when hovering over the info icon container */
.info-icon-container:hover .tooltip-text {
  visibility: visible;
  opacity:  1;
}
/* .rc-slider-tooltip {
  transform: translateX(-50%);
}

.rc-slider-ticks {
  position: relative;
  margin-top: 10px;
}

.rc-slider-tick {
  position: absolute;
  width: 1px;
  height: 8px;
  background-color: #888;
}

.rc-slider-mark {
  position: absolute;
  width: 1px;
  height: 8px;
  background-color: #888;
}

.rc-slider-mark-text {
  position: absolute;
  top: 20px;
  transform: translateX(-50%);
} */

.tooltip-text.right{
  top: -25px !important; /* Adjust the positioning as needed */
  left: 80px !important; /* Adjust the positioning as needed */
}
.tooltip-text.bottom{
  top: 30px !important; /* Adjust the positioning as needed */
  left: -120px !important; /* Adjust the positioning as needed */
}
.tooltip-text.top{
  top: -56px !important; /* Adjust the positioning as needed */
  left: -140px !important; /* Adjust the positioning as needed */
}

#loading-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-family: Arial, sans-serif;
  color: #333;
}

.spinner {
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-top: 4px solid #333; /* Spinner color */
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin-right: 8px; /* Space between spinner and text */
  animation: spin 1s linear infinite;
}

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