input,select,textarea {width: 100%; font-weight:300; background: #fff;border: 1px solid #000;outline: none;padding: 15px 10px;font-size: 15px;font-family: inherit;box-sizing: border-box;}

form {margin-bottom: 25px;}
form .button-dark {font-size: 15px;}
form .grid {grid-template-columns: 1fr 1fr; display: grid; grid-gap: 20px; margin-bottom: 5px;}
form .grid .form-field {margin-bottom: 15px;}

.flex-row.select {margin: 20px 0 10px;}

.contact-wrapper form {margin: 0;}

.flex-row .form-field, .select-wrapper {width: 100%; margin-bottom: 15px;}
.form-field label {margin-bottom: 10px; display: block; font-weight: 400; font-size: 14px; color:#000}

.text-right {text-align:right}

/* ACCOUNT SECTION */

.table-heading {font-weight: bold; font-size: 14px;}
.table-heading th {padding: 10px}

.table-row td {padding: 10px; font-weight:300; font-size: 15px; line-height:1.4; position:relative; vertical-align: middle;}
.table-row td .order-info, .backorder {background: rgba(128, 145, 167, 0.15); display:inline-block; border-radius: 20px; padding: 5px 12px; font-size: 12px; font-weight:600}
.backorder {background:lightblue; color:#0009}

.table-row {padding: 15px 0; border-bottom: 1px solid #000; background: rgba(128, 145, 167, 0.15);}
.table-row:nth-child(2n+2) {background: #fff;}
.table-row:last-child {margin-bottom: }

form .select .form-field {position: relative;}
form .select .form-field::after {content: ""; display: block; background: url('/img/arrow-down.svg'); position: absolute; top: 50%; transform: translateY(-50%); width: 13px; height: 8px; background-size: contain; background-repeat: no-repeat; right: 10px; transition: 0.3s; opacity: 1; filter: invert(1); left: auto;}

.section-account .button-dark,.account-main-container .button-dark { display: inline-block; width: auto; margin-top: 25px;}

.yes-badge {content: "";display: block;width: 30px;height: 30px;background-image: url("/img/check_circle.svg");position: absolute;background-repeat: no-repeat;top: 50%;left: 20%;transform: translate(-50%,-50%);}

.one {position: relative; width: 10%; padding-left: 10px; box-sizing: border-box;}
.two {width: 10%;}
.three {width: 20%;}
.four {width: 50%;}
.five {width: 10%; text-align: right; padding-right: 10px; box-sizing: border-box;}
.five a {margin: 0 !important;}

.two .backorder {padding: 5px; display: inline-block; box-sizing: border-box; border-radius: 3px; border: 1px solid #0f8eff; background: #d0e7fb; line-height: 1; cursor: default;}
.two .order-info {font-weight: 300; padding: 5px; line-height: 1; display: inline-block; border-radius: 3px; border: 1px solid #00d20d; background: #d0fbdd;}

#savedAddress input {margin: 5px 0;}
#savedAddress .check-label {margin: 0; align-items: center;}
#savedAddress .check-label input {margin-right: 15px;}

.saved-cards {justify-content: flex-start; grid-gap: 6%;}

.card-wrapper {width: 370px; background: rgb(56,0,54);
background: linear-gradient(90deg, rgba(56,0,54,1) 0%, rgba(12,186,186,1) 79%); border-radius: 5px; margin-bottom: 25px; color:#fff; }
.card-details {padding:30px; height: auto}
.card-details p {color:#fff; font-family: 'Inconsolata', monospace; font-size: 17px; letter-spacing:5px;}
.card-details figure {width:70px; margin-bottom: 35px;}

p.cc-number {text-align: center; font-size: 25px;}

.delete-card {width: 20px; height: 20px;}

#claims .flex-row .form-field, #savedAddress .flex-row .form-field {width: 48%;}
#claims .flex-row .form-field:only-child {width: 100%;}

#claims .flex-row .form-field span {font-size: 12px; color: #444;}

/* AUTOFILL STYLING */

.form-field input:-webkit-autofill,
.form-field input:-webkit-autofill:hover,
.form-field input:-webkit-autofill:focus {background: #fff!important;}
.form-field input:-webkit-autofill,
.form-field input:-webkit-autofill:focus {
    transition: background-color 600000s 0s, color 600000s 0s;
}
.form-field input[data-autocompleted] {
    background-color: transparent !important;
}

.form-field-missing input,.form-field-missing textarea, .form-field-missing select {border: 1px solid #f1b7bf}

.highlight_message {color: #61161f!important;text-align: center!important;padding: 15px;background-color: #fdd!important; border: 1px solid #f1b7bf; margin: 0 auto 25px!important;font-size: 19px;}
.success {text-align: center;padding: 20px;margin: 0 auto 25px;background: #2dd284 !important; color: #fff !important;border: 1px solid #2dd284 !important; display: block!important;}

.vmd-hero {
    width: 100%; /* Make image responsive to its parent's width */
    height: auto; /* Allow height to adjust based on aspect-ratio or explicit height */
    aspect-ratio: 4 / 3; /* Force the rendered aspect ratio to 4:3 */
    object-fit: cover; /* Crop if necessary to fill the 4:3 space */
    display: block; /* Important for removing extra space below images */
}