html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

#example {
    width: 1000px;
    height: 100px;
}

.customer-info-container {
    display: flex; /* Makes the container a flex container */
    align-items: center; /* Vertically aligns items in the center */
    gap: 15px; /* Adds some space between the button and the textarea */
    /* You can also use justify-content if you want to control horizontal distribution: */
    /* justify-content: flex-start;  (default) - aligns to the start (left) */
    /* justify-content: space-between; (pushes items to ends, with space in between) */
}

.textarea-container {
    display: flex; /* Makes the container a flex container */
    gap: 20px; /* Adds space between the two textarea-item divs */
    justify-content: center; /* Optional: Centers the entire set of textareas horizontally */
}

.textarea-item {
    display: flex; /* Makes each item a flex container for its label and textarea */
    flex-direction: column; /* Stacks the label and textarea vertically */
    align-items: flex-start; /* Aligns the label and textarea to the left within their item */
    /* You might want to set a max-width or specific width here if you don't want them to expand */
    /* width: 48%; */
}

    .textarea-item label {
        margin-bottom: 5px; /* Adds a small space between the label and the textarea */
        font-weight: bold; /* Optional: Make labels stand out */
    }

    .textarea-item textarea {
        width: 100%; /* Make textarea fill the width of its parent .textarea-item */
        box-sizing: border-box; /* Include padding and border in the element's total width and height */
        resize: vertical; /* Allow only vertical resizing by the user */
    }

/* Container for the elements that should be on the same line */
.form-row-container {
    display: flex; /* Makes it a flex container */
    align-items: flex-end; /* Aligns items to the bottom (useful if input and button have different heights) */
    /* Alternatively, align-items: center; if you want them vertically centered */
    gap: 15px; /* Adds space between the input group and the button */
    /* You might want to remove the <br /> if you're using this */
}

/* Adjustments for the form group containing the label and input */
.form-group-inline {
    display: flex; /* Makes this a flex container */
    flex-direction: column; /* Stacks label above input */
    align-items: flex-start; /* Aligns label and input to the left within this group */
}

    /* Optional: Add some styling for your labels and inputs if not already defined globally */
    .form-group-inline label {
        margin-bottom: 5px; /* Space between label and input */
        font-weight: bold;
    }

    .form-group-inline input[type="text"] {
        padding: 8px 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
        /* You might want to set a specific width for the input if needed */
        /* width: 250px; */
    }

/* Styling for your button (assuming btn btn-primary exists) */
.btn-primary {
    /* Ensure default button styles are appropriate, or add more here */
    padding: 10px 15px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.textarea-container {
    display: flex;
    gap: 1rem;
}

.textarea-item {
    flex: 1;
}

    /* Optional: Some basic styling for the textareas themselves */
    .textarea-item textarea {
        width: 100%;
        box-sizing: border-box; /* Ensures padding and border don't expand the width */
        height: 200px; /* Or whatever height you prefer */
    }

.forms-container {
    display: flex;
    justify-content: space-between; /* Optional: distributes space between forms */
    gap: 20px; /* Optional: adds space between the forms */
}

    .forms-container form {
        flex: 1; /* Makes each form take up equal space */
    }