.api-box .input-field,.api-box .post-param-id {
    width: 90%; /* Adjust the width as needed, or set to 100% to fill the container */
    padding: 8px 10px; /* Add some padding for better text visibility and field interaction */
    margin: 5px 0 10px 0; /* Add some margin for spacing */
    border: 1px solid #ccc; /* A light border by default */
    border-radius: 4px; /* Rounded corners */
    background-color: #f9f9f9; /* A light background */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); /* An inner shadow for a subtle depth effect */
    transition: border-color 0.3s ease-in-out; /* Transition for the border color */
    color: #333; /* Text color */
    font-size: 0.9rem; /* Font size */
  }
  #main-content .api-box .title {
    white-space: nowrap; /* Keeps text on a single line */
    overflow: hidden; /* Ensures overflow text is hidden */
    text-overflow: ellipsis; /* Adds an ellipsis to signify that there is more text */
    display: block; /* Ensures the element behaves as a block-level element */
    max-width: 100%; /* Ensures the title does not exceed the box's width */
  }
  
  .api-box .title, .api-box .input span, .api-box .output span {
    white-space: nowrap; /* Keeps text on a single line */
    overflow: hidden; /* Ensures overflow text is hidden */
    text-overflow: ellipsis; /* Adds an ellipsis to signify that there is more text */
    padding-right: 10px; /* Adds padding to prevent text from touching the box's edge */
  }
  
  .input .input-type, .input .input-description {
    display: block; /* Ensures each span is on a new line */
    margin-bottom: 2px; /* Adds a little space below each span */
}

.animate-out {
    animation: slideOut 1s forwards;
  }
  
  @keyframes slideOut {
    100% {
      transform: translateX(-100vw);
      opacity: 0;
    }
  }
  
.input .input-type {
    font-weight: bold; /* Optional: makes the type stand out */
}

.input .input-description {
    font-size: 0.8rem; /* Slightly smaller font size for the description */
    color: #666; /* A lighter color for the description */
}

  .post-param-id:disabled {
    background-color: #222121; /* A light gray background for disabled state */
    color: #080808; /* Darker gray text to indicate it's disabled */
    /* Add other styles as necessary */
}
  
  .api-box .input-field:focus {
    border-color: #7b4b94; /* Border color on focus, using the primary color variable */
    outline: none; /* Remove the default focus outline */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2); /* More pronounced shadow on focus for depth */
  }
  
  .api-box .input-field::placeholder {
    color: #888; /* Placeholder text color */
    opacity: 1; /* Full opacity for placeholder */
  }
  
  /* Responsive adjustments for input fields on smaller screens */
  @media (max-width: 768px) {
    .api-box .input-field {
      width: 100%; /* Full width on smaller screens */
      /* Other responsive adjustments as needed */
    }
  }
  
.api-box .title {
    color: white; /* Or any other color that stands out against the background */
    font-size: 1rem; /* Adjust the size as needed */
    font-weight: bold; /* Make it bold to stand out */
    text-align: center; /* Center the title */
    margin: 10px 0; /* Add some margin around the title */
    overflow: visible; /* Make sure it's not hidden by overflow rules */
    white-space: nowrap; /* Prevent it from wrapping and becoming invisible */
    z-index: 1; /* Place it above other elements if needed */
    position: relative; /* Needed for z-index to work */
  }
  
 .api-box .input, .api-box .output {
    color: white; /* Ensure the text color is white (or any contrasting color) */
    margin: 4px 0; /* Ensure there's some margin between elements */
    padding: 4px; /* Add padding to make the text more legible */
  }
  .api-box .input span, .api-box .output span {
    display: block; /* Ensure they are block-level elements */
    margin-bottom: 4px; /* Add margin for spacing */
  }
  .api-box .title {
    font-weight: bold; /* Make title bold */
    font-size: 1.2rem; /* Increase font size for visibility */
    text-align: center; /* Center the title */
    margin-bottom: 8px; /* Space below the title */
  }
.api-box-icon {
    width: 60px; /* Resize icons */
    height: auto;
    margin-bottom: 5px; /* Space between the icon and the text below */
  }
  
  /* Text within the api-box for better readability */
  .api-box-text {
    font-size: 0.9rem; /* Adjust the font size as needed */
    text-align: center;
    color: white;
    margin: 5px 0;
  }
  
  .api-box {
    background-color: var(--form-background);
    color: white;
    border: 1px solid var(--border-color);
    box-shadow: var(--box-shadow);
    border-radius: 8px;
    padding: 15px;
    margin: 10px 0;
    width: 9%; /* One third of the parent's width */
    height: auto; /* Auto height to wrap content */
    transition: all 0.3s ease;
    resize: both; /* Allow both vertical and horizontal resizing */
  }
  
  .api-box:hover {
    transform: translateY(-5px); /* Slight upward lift on hover */
    border-color: var(--accent-color); /* Highlight border color on hover */
  }
  
  /* Styling for titles within the .api-box */
  .api-box .title {
    font-size: 1rem; /* Adjust the size as needed */
    font-weight: bold; /* Make the title stand out */
    margin-bottom: 8px; /* Space below the title */
  }
  .api-box .output {
    right: 100px; 
  }
  .api-box .endpoint {
    right: -100px; /* This positions the endpoint 100px to the left of the right edge */
  }
  /* Styling for input and output elements within .api-box */
  .api-box .input {
    background: var(--background-gradient-end); /* Darker background for contrast */
    color: white; /* For readability */
    border: none; /* No border, or set a specific style as needed */
    padding: 8px 12px; /* Padding inside input/output elements */
    margin: 4px 0; /* Space between input/output elements */
    border-radius: 4px; /* Rounded corners for inputs/outputs */
  }
  
  /* If using <textarea>, make it match the theme */
 
  .api-box textarea.output-textarea, 
  .api-box textarea.output-value {
    background: var(--background-gradient-end); /* Darker background for contrast */
    color: white; /* For readability */
    border: 1px solid var(--border-color); /* A light border for definition */
    border-radius: 4px; /* Rounded corners */
    padding: 8px; /* Inner spacing */
    width: 100%; /* Full width within the .api-box */
    box-sizing: border-box; /* Make sure padding and border don't affect width */
    resize: both; /* Allow resizing */
    overflow: auto; /* Scrollbars if content overflows */
    min-height: 50px; /* Minimum height */
    max-height: 150px; /* Maximum height if you want to limit it */
    width: 100%; /* Start with full width */
    box-sizing: border-box; /* Include padding and borders in the width */
  }
  
  .api-box .output
  {
    right: 100px; 
  }
  /* Adjustments for the endpoint if it's a custom element */
  .api-box .endpoint {
    /* Styles to make the endpoint visible */
    position: relative;
    top: 50%;
    right: -100px; /* Adjust as needed to position it outside the box */
    transform: translateY(-50%);
    width: 10px; /* Example width */
    height: 10px; /* Example height */
    background: var(--accent-color); /* Visible color */
    border-radius: 50%; /* Round shape */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); /* Optional: shadow for depth */
  }