.modalLayout .modal-dialog[data-v-27a70104]{max-width:unset !important}.modal-header-select-template[data-v-27a70104]{background-color:#1d2327 !important}@media(min-width: 1200px){.modal[data-v-27a70104]{position:fixed;top:0;left:300px;z-index:1055;display:none;width:calc(100% - 300px);height:100%;overflow-x:hidden;overflow-y:auto;outline:0}}

.cercle[data-v-369652c0] {
  display: flex;
  width: 44px;
  height: 44px;
  padding: 10.082px;
  justify-content: center;
  align-items: center;
  gap: 5.041px;
  border-radius: 151.225px;
  background: var(--Surface-L1, #f7f9fa);
}


.cercle[data-v-09978f8f] {
  display: flex;
  width: 44px;
  height: 44px;
  padding: 10.082px;
  justify-content: center;
  align-items: center;
  gap: 5.041px;
  border-radius: 151.225px;
  background: var(--Surface-L1, #f7f9fa);
}

.card-container[data-v-13c0e141]{display:flex;flex-direction:column;align-items:center}.card-payment[data-v-13c0e141]{width:400px;height:212px;border-radius:8px 8px 0 0;padding:20px;display:flex;flex-direction:column;box-shadow:0px 4px 10px rgba(0,0,0,.1);position:relative}.expired-card[data-v-13c0e141]{border-top:2px solid #c6004a;border-left:2px solid #c6004a;border-right:2px solid #c6004a;border-bottom:none}.expired-label[data-v-13c0e141]{position:absolute;top:7px;left:15px;background:#f3f4f6;border:1.5px solid #b70000;border-radius:12px;padding:2.5px 15px;display:inline-block;z-index:1;width:auto}.expired-label span[data-v-13c0e141]{font-size:14px;font-weight:600;color:#000}.header-card[data-v-13c0e141]{display:flex;justify-content:space-between;align-items:center}.title-card[data-v-13c0e141]{display:flex;align-items:center;gap:8px;background:#f3f4f6;border:1px solid #18c5bd;border-radius:12px;padding:4px 10px}.star-icon[data-v-13c0e141]{width:18px;height:18px}.primary-text[data-v-13c0e141]{font-size:14px;font-weight:600;color:#333}.body-card[data-v-13c0e141]{font-size:20px;font-weight:bold;margin-top:27px}.footer-card[data-v-13c0e141]{margin-top:12px;margin-bottom:0}.footer-info[data-v-13c0e141]{display:flex;justify-content:space-between}.info-section[data-v-13c0e141]{display:flex;flex-direction:column}.label[data-v-13c0e141]{font-size:12px;color:#777}.value[data-v-13c0e141]{font-size:14px;font-weight:bold}.edit-button[data-v-13c0e141]{display:flex;align-items:center;justify-content:end;background:#242424;color:#fff;padding:8px 12px;border-radius:0 0 8px 8px;width:400px;height:36px}.edit-button-expired[data-v-13c0e141]{background:#c6004a;color:#fff}.text-white[data-v-13c0e141]{color:#fff !important}.mobile-card[data-v-13c0e141]{width:340px !important;height:225px !important}.edit-button-mobile[data-v-13c0e141]{width:340px !important}.card-method[data-v-13c0e141]{background-image:url(../img/card-bg.d15d32d9.svg);background-size:cover}.card-bank[data-v-13c0e141]{background-color:#141414;color:#fff !important}

.payment-wrapper[data-v-503ca0e0] {
  position: relative;
  width: 100%;
  padding: 0 50px;
}
.slider-button[data-v-503ca0e0] {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
  background-color: transparent;
}
.slider-button.disabled[data-v-503ca0e0] {
  cursor: default;
  opacity: 0.5;
  pointer-events: none;
}
.slider-button.left[data-v-503ca0e0] {
  left: 0;
}
.slider-button.right[data-v-503ca0e0] {
  right: 0;
}
.payment-container[data-v-503ca0e0] {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-behavior: smooth;
  width: 100%;
  padding: 10px;
}
.new-card[data-v-503ca0e0] {
  width: 400px;
  height: 245px;
  border-radius: 8px;
  border: 1px dashed #18c5bd;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px;
  flex-shrink: 0;
}
.new-card-mobile[data-v-503ca0e0] {
  width: 340px !important;
  height: 262px !important;
}
.button-customize-add[data-v-503ca0e0] {
  border-radius: 8px;
  border: 1px solid #34bdb7 !important;
  background: #fff;
  color: #34bdb7;
  padding: 8px 12px !important;
}

/* Skeleton loading styles */
.parent[data-v-503ca0e0] {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  width: 400px;
  height: 245px;
  border-radius: 8px;
  background: #f5f8fa;
  flex-shrink: 0;
  padding: 15px;
}
.div1[data-v-503ca0e0] {
  grid-area: 1 / 1 / 2 / 2;
}
.div2[data-v-503ca0e0] {
  grid-area: 3 / 1 / 5 / 4;
}
.div3[data-v-503ca0e0] {
  grid-area: 5 / 1 / 6 / 3;
}
.div4[data-v-503ca0e0] {
  grid-area: 5 / 5 / 6 / 6;
}
.loading-options[data-v-503ca0e0] {
  background: #e1e5eb;
  animation: pulse-503ca0e0 1.5s infinite;
}
.circle[data-v-503ca0e0] {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.numbers[data-v-503ca0e0] {
  width: 200px;
  height: 20px;
  border-radius: 4px;
  margin-bottom: 10px;
}
.exp[data-v-503ca0e0] {
  width: 120px;
  height: 15px;
  border-radius: 4px;
}
.select[data-v-503ca0e0] {
  width: 100px;
  height: 30px;
  border-radius: 4px;
}
.deleteIc[data-v-503ca0e0] {
  width: 30px;
  height: 30px;
  border-radius: 4px;
}
@keyframes pulse-503ca0e0 {
0% {
    opacity: 0.6;
}
50% {
    opacity: 1;
}
100% {
    opacity: 0.6;
}
}

/* Make skeleton cards responsive */
@media (max-width: 768px) {
.parent[data-v-503ca0e0] {
    width: 340px;
}
}


.cercle[data-v-79e81ad8] {
  display: flex;
  width: 44px;
  height: 44px;
  padding: 10.082px;
  justify-content: center;
  align-items: center;
  gap: 5.041px;
  border-radius: 151.225px;
  background: var(--Surface-L1, #f7f9fa);
}
.maximize-social[data-v-79e81ad8] {
  border-radius: 8px;
  border-top: 1px solid var(--primary-base, #18c5bd);
  border-right: 1px solid var(--primary-base, #18c5bd);
  border-bottom: 1px solid var(--primary-base, #18c5bd);
  border-left: 8px solid var(--primary-base, #18c5bd);
  background: #fbffff;
}
.btn-disabled[data-v-79e81ad8] {
  background: var(--Background-Disabled, #edeff1);
  color: #a6b5be;
}


.cercle[data-v-61060001] {
  display: flex;
  width: 44px;
  height: 44px;
  padding: 10.082px;
  justify-content: center;
  align-items: center;
  gap: 5.041px;
  border-radius: 151.225px;
  background: var(--Surface-L1, #f7f9fa);
}


.cercle[data-v-1c72a520] {
  display: flex;
  width: 44px;
  height: 44px;
  padding: 10.082px;
  justify-content: center;
  align-items: center;
  gap: 5.041px;
  border-radius: 151.225px;
  background: var(--Surface-L1, #f7f9fa);
}