header form {
    /* display: inline-block; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    gap: 1rem;
    /* margin-left: 1rem;
    margin-right: 1rem; */
    /* width: 100%; */
    /* max-width: 20rem; */
    /* min-width: 10rem; */
    /* margin-bottom: 0.5rem; */
    /* background-color: #15273262; */
    

    
    /* width: max-content; */
}
.locale-form{
    padding: .5rem;
}
.vin-report-form{
    padding: 2rem;
    border-radius: 0.5rem;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    margin-top: 2rem;
    width: clamp(10rem, 30rem, 90vw);
    background-color: #15273262;
}

header form input {
    /* width: clamp(min(10rem, 100vw), 40vw, 100vw); */
    width: 100%;
    height: 2rem;
    border-radius: 0.5rem;
    /* border-radius: 4px; */
    border: none;
    padding: 0.5rem;
    font-size: 1rem;
    /* text-align: center; */
    outline: none;
}
header form button {
    /* width: clamp(min(10rem, 100vw), 40vw, 100vw); */
    min-height: 2rem;
    /* border-radius: 0.5rem; */
    /* border: 2px solid #383838;
    border-radius: 4px;
    padding: 0.5rem;
    font-size: 1rem;
    text-align: center;
    outline: none;
    transition: all 0.3s ease-in-out;
    color: #1f3644;*/
    background-color: #d7edfc;
    width: 100%;
    border: 2px solid #ccc; /* outer border */
    /* border-radius: 4px; */
    border-radius: 0.5rem;

    padding: 10px 20px;
    /* background-color: #fff; */
    color: #333;
    cursor: pointer;
}
header form button:hover {
    cursor: pointer;
    background-color: #152732;
    color: #fff;
    transition: all 0.3s ease-in-out;
    /* transform: scale(1.1); */
    box-shadow: 0 0 10px #152732;
}

.section-top-padding {
    padding: 1.9rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.checkoutPage {
    /* padding: 7rem 1.25rem 0 1.25rem; */
    padding-top: 80px;
    margin-left: 20px;
    margin-right: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.checkoutPage .customform{
    width: clamp(280px, 984px, 100%);
}
.payment-panel {
    width: 100%;
    border-top: 3px solid #31d2ee;
    padding: 20px;
    border-radius: 10px 50px;
    box-shadow: 0 0 13px 0 rgba(222, 222, 222, 1);
    /* width: clamp(10rem, 30rem, 100%); */
}
.payment-panel .item{
    display: flex;
}

.checkoutform {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    /* width: ; */
}

@media (max-width: 768px) {
    .checkoutform {
        flex-direction: column;
        gap: 0.5rem;
    }
}

@media (max-width: 480px) {
    .checkoutform {
        padding: 0.5rem;
        gap: 0.25rem;
    }
}
/*   */
.input{
    display: flex;
    flex-direction: column;
    
}
.vin-inputs{
    display: flex;
    flex-direction: column;

}

#editformbutton,
#paypal-button-container,
#checkout_button_stripe
{
    display: none;
}


dialog {
    /* width: 100%;
    height: 100%; */
    position: fixed;
    padding: 0;
    /* top: 50%; */
    left: 50%;
    transform: translate(-50%, 10%);
    /* translate: trans; */
    /* transform: translateX(50%); */
    /* transform: translate(50% 50%); */
    width: clamp(400px, 40%, 200px);

    border: none;
    border-radius: 8px;
    /* overflow: hidden; */
}

dialog .modalhead {
    display: flex;
    justify-content: space-between;
    background: linear-gradient(160deg, #152732, #31d2ee);
    color: #fff;
    font-family: var(--font-primary);
    /* font-family: var(--font-primary); */
    align-items: center;
    padding: 1rem;
}

dialog .modalhead p {
    /* display: flex;
    justify-content: space-between;
    background: linear-gradient(160deg, var(--rich-black), var(--skobeloff));
    color: #fff; */
    font-family: var(--font-primary);
    /* font-family: var(--font-primary); */

}

dialog .modalbody {
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: space-between;
    padding: 20px;
    /* background: linear-gradient(160deg, var(--rich-black), var(--skobeloff)); */
    /* color: ; */
    /* padding: 1rem; */
    overflow-y: auto;
}

dialog .modalbody ul {
    padding: 1rem;
}

dialog .modalbody li {
    font-size: var(--font-size-md);
}

dialog .modalfooter {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    /* background: linear-gradient(160deg, var(--rich-black), var(--skobeloff)); */
    color: #fff;
    font-family: var(--font-primary);
    padding: 1rem;
}

dialog .modalfooter .closedialog {
    background: #d92f2f;
    color: #fff;
    border: none;
    font-family: var(--font-primary);
    font-size: var(--font-size-md);
    padding: .4rem 1rem;
    border-radius: 3px;
}

dialog .modalfooter .submitdialog {
    /* background: var(--skobeloff); */
    color: #fff;
    border: none;
    font-family: var(--font-primary);
    font-size: var(--font-size-md);
    padding: .4rem 1rem;
    border-radius: 3px;
}

dialog .modalhead button {
    color: #fff;
    border: none;
    /* background: none; */
    background: #d92f2f;
    width: 40px;
}

dialog::backdrop {
    /* background: ; */
    backdrop-filter: blur(10px);
    width: 100%;
    height: 100%;
    opacity: 0.75;
}
dialog#vinConfirmation {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 1000;
    transform: translate(-50%, -50%);
    width: clamp(400px, 40%, 200px);
    border: none;
    border-radius: 8px;
}
dialog#vinConfirmation .modalhead{
    font-size: var(--font-size-md);
}
#vinConfirmation input{
    width: 100%;
    padding: 0.5rem;
    border-radius: 8px;
    border: 1px solid #a3a2a288;
    font-size: var(--font-size-md);
    font-family: var(--font-primary);
    text-transform: uppercase;
}
#vinConfirmation input:focus-visible{
    outline: none;
    border: 1px solid #a3a2a2;
}
#vinConfirmation input::placeholder{
    color: #a3a2a2;
}
/* #vinConfirmation button{
    background: var(--skobeloff);
    color: #fff;
    border: none;
    font-size: var(--font-size-md);
    padding: 0.5rem 1rem;
    border-radius: 8px;
} */
#vinConfirmation #closeDialog{
    background: #ff0000;
    color: #fff;
    border: none;
    font-size: var(--font-size-md);
    padding: 0.5rem 1rem;
    border-radius: 8px;
}
/* #vinConfirmation form{
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: space-between;
    padding: 1rem;
    overflow-y: auto;

} */

select[readonly] option,
select[readonly] optgroup {
    display: none;
}
