.addCard-submitButton {
  padding: 20px;
  width: 150px;
  background-color: #0c6fff;
  font-family: inherit;
  border: none;
  color: #ffffff;
  border-radius: 30px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.addCard-container {
  display: flex;
  margin-top: 10px;
  margin-bottom: 60px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
  border: 1px solid #e4e4e4;
  padding: 60px;
  border-radius: 40px;
  max-width: 900px;
  width: 100%;
  position: relative;
  z-index: 200;
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.03),
    0 12px 24px rgba(0, 0, 0, 0.06),
    0 32px 64px rgba(0, 0, 0, 0.1);
}

.addCard-buttonsDiv {
  display: flex;
  margin-top: 30px;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.addCard-div {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 20px;
}

.addCard-title {
  margin-top: 0px;
}

.addCard-line {
  width: 100%;
  margin-top: 30px;
  border: 1px solid #00000014;
}

.addCard-inputsContainer {
  margin-top: 10px;
  padding: 30px;
  border-radius: 30px;
  border: 1px solid #e4e4e4;
  display: grid;
  width: 100%;
  max-width: 400px;
  margin-bottom: 20px;
  height: auto;
  grid-template-areas:
    'holder holder'
    'number number'
    'expdate cvc';
  grid-gap: 5px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto;
}

.addCard-holderInputDiv {
  grid-area: holder;
}

.addCard-holderInput {
  font-family: inherit;
  background-color: #f8f8f8;
  border: none;
  border-radius: 30px;
  padding: 20px;
  border: 2px solid;
  border-color: #ffffff;
  text-align: center;
  transition: all 0.3s ease;
  width: 100%;
  font-size: 15px;
  box-sizing: border-box;
}

.addCard-numberInputDiv {
  grid-area: number;
}

.addCard-skipButton {
  padding: 20px;
  width: 80px;
  background-color: #ffffff;
  border: 1px solid #e4e4e4;
  color: #000000;
  border-radius: 40px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: inherit;
  transition: all 0.2s ease;
}

.addCard-skipButton:hover {
  background-color: #f6f6f6;
}

.addCard-numberInput {
  font-family: inherit;
  background-color: #f8f8f8;
  border: none;
  border-radius: 30px;
  padding: 20px;
  border: 2px solid;
  border-color: #ffffff;
  text-align: center;
  transition: all 0.3s ease;
  width: 100%;
  font-size: 15px;
  box-sizing: border-box;
}

.addCard-expdateInputDiv {
  grid-area: expdate;
}

.addCard-expdateInput {
  font-family: inherit;
  background-color: #f8f8f8;
  border: none;
  border-radius: 30px;
  padding: 20px;
  border: 2px solid;
  border-color: #ffffff;
  text-align: center;
  transition: all 0.3s ease;
  width: 100%;
  font-size: 15px;
  box-sizing: border-box;
}

.addCard-cvcInputDiv {
  grid-area: cvc;
}

.addCard-cvcInput {
  font-family: inherit;
  background-color: #f8f8f8;
  border: none;
  border-radius: 30px;
  padding: 20px;
  border: 2px solid;
  border-color: #ffffff;
  text-align: center;
  transition: all 0.3s ease;
  width: 100%;
  font-size: 15px;
  box-sizing: border-box;
}

.addCard-otherDetailDiv {
  padding: 40px;
  margin-left: 10px;
  background-color: #ffffff;
}

.cardTypes-buttons {
  display: flex;
  gap: 10px;
}

.cardTypes-button {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  background-color: #f8f8f8;
  color: #787878;
  font-weight: 600;
  width: 80px;

  gap: 10px;
  padding: 15px;
  border-radius: 30px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.cardTypes-text {
  color: #787878;
  font-weight: 500;
}

.addCard-guestCardButton {
  padding: 20px;
  max-width: fit-content;
  width: 100%;
  background-color: #ffffff;
  font-family: inherit;
  border: none;
  color: #000000;
  border: 1px solid #e4e4e4;
  border-radius: 30px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 600;
}

.addCard-guestCardButton:hover {
  background-color: #f6f6f6;
}