﻿
.update-payment {
    display: flex;
    flex-direction: column;
    width: 40%;
    margin-top: auto;
    margin-bottom: auto;
}

.update-payment-container {
    display: flex;
    flex-direction: row;
    margin-top: auto;
    margin-bottom: auto;
    width: fit-content;
}

.update-billing-address-dropdown {
    display: flex;
    flex-direction: column;
    font-weight: bold;
    padding: 0.5vh;
}

.update-billing-address-dropdown label {
    padding-bottom: 0.5vh;
}

.update-billing-address-dropdown select {
    width: fit-content;
    padding: 0.15vh 0 0.15vh 0;
}

.update-payment-header {
    font-size: 24px;
    font-weight: bold;
    width: 100%;
    margin-bottom: 0;
}

.update-payment {
    display: flex;
    flex-direction: column;
    margin-right: 1vw;
}

.payment-method {
    font-weight: bold;
    display: flex;
    flex-direction: column;
    padding: 0.5vh;
}

.payment-method-list {
    width: 100%;
}

.cardholder-name {
    font-weight: bold;
    display: flex;
    flex-direction: column;
    padding: 0.5vh;
}

.cardholder-name input {
    width: 100%;
}

.cc-number {
    font-weight: bold;
    display: flex;
    flex-direction: column;
    padding: 5px;
}

.cc-number input {
    width: 100%;
}

.exp-date-cvv {
    display: flex;
    flex-direction: row;
    font-weight: bold;
}

.exp-date {
    display: flex;
    flex-direction: column;
    padding: 0.5vh;
    width: 70%;

}

.exp-date input {
    height: 105%;
    padding: 0.5rem;
}

.cvv {
    display: flex;
    flex-direction: column;
    padding: 0.5vh;
    width: 30%;
}

.cvv input {
    display:flex;
    width: 100%;
}

.submit-payment-button {
    object-fit: contain;
}

.update-billing-address {
    font-weight: bold;
    display: flex;
    flex-direction: column;
}

.billing-address-country-region {
    padding: 0.5vh;
    display: flex;
    flex-direction: column;
}

.billing-address-country-region label {
    padding-bottom: 0.5vh;
}


.billing-country-text {
    width: 75%;
    padding: 0.15vh 0 0.15vh 0;
}

.billing-address-name {
    display: flex;
    flex-direction: column;
    padding: 0.5vh;
}

.billing-address-name label {
    padding-bottom: 0.5vh;
}

.billing-address-text {
    font-size: 16px;
    width: 60%;
    margin-bottom: 0.5vh;
}

.billing-address-address {
    display: flex;
    flex-direction: column;
    padding: 0.5vh;
}

.billing-address-address label {
    padding-bottom: 0.5vh;
}

.billing-city-state-zip {
    display: flex;
    flex-direction: row;
    padding: 0.5vh;
}

.billing-address-city, .billing-address-state, .billing-address-zip {
    display: flex;
    flex-direction: column;
}

.billing-address-city label, .billing-address-state label, .billing-address-zip label {
    padding-bottom: 0.5vh;
}

.billing-city-text {
    width: 80%;
}

.billing-state-text {
    width: 80%;
    padding: 0.15vh 0 0.15vh 0;
}

.billing-zip-text {
    width: 80%;
}
