/* Apply the CSS styles to the element container */
.element-container {
  display: flex;
  justify-content: space-between; /* Space elements evenly in the container */
  align-items: center; /* Center elements vertically */
  margin: 10px; /* Adjust the margin as needed for spacing */
}

/* Style the select element if needed */
.element-container select {
  /* Add styling as needed */
}

/* Style the button if needed */
.element-container button {
  /* Add styling as needed */
}
    /* Style for a responsive table */
  .accountTable {
    width: 100%;
    overflow-x: auto;
  }

  .accountTable th, .accountTable td {
    white-space: nowrap;
  }
  
  /* Style for table headings (th) */
  .accountTable th {
    background-color: #54616F; /* Header background color */
    color: white; /* Header text color */
    padding: 10px; /* Header cell padding */
    border: 1px solid #ccc;
  }

  /* Style for even rows (tr) */
  .accountTable tr:nth-child(even) {
    background-color: #f2f2f2; /* Background color for even rows */
  }

  /* Style for odd rows (tr) */
  .accountTable tr:nth-child(odd) {
    background-color: #e1e1e1; /* Background color for odd rows */
  }

  /* Style for table cells (td) */
  .accountTable td {
    padding: 8px; /* Cell padding */
  }


  /* Customize table widths for specific columns */
  .accountTable .prev {
    width: 10px;
    text-align: right; /* Align text to the right */
  }

  .accountTable .desc {
    width: 500px
  }

  .accountTable .cedit {
    width: 120px;
  }

  

  /* Style for a button that looks like btn btn-secondary dropdown-toggle */
.custom-button {
  background-color: #54616F; /* Background color similar to btn-secondary */
  color: #fff; /* Text color */
  border: 1px solid #54616F; /* Border color matching background color */
  padding: 0.5rem 1rem; /* Increase padding for a bigger button */
  border-radius: 0.25rem; /* Add rounded corners if necessary */
  cursor: pointer; /* Add a pointer cursor to indicate interactivity */
  position: relative; /* Position the pseudo-element */
  display: flex; /* Make the button a flex container */
  justify-content: space-between; /* Center the arrow horizontally */
  align-items: center; /* Center the arrow vertically */
}

/* Style when the button is hovered */
.custom-button:hover {
  background-color: #5a6268; /* Adjust hover background color */
  border: 1px solid #5a6268; /* Adjust hover border color */
  color: #fff; /* Text color on hover */
}

/* Style when the button is active or focused */
.custom-button:focus, .custom-button:active {
  background-color: #545b62; /* Adjust active/focused background color */
  border: 1px solid #545b62; /* Adjust active/focused border color */
  color: #fff; /* Text color when active/focused */
}

/* Style for the dropdown arrow */
.custom-button::after {
  content: "\25BC"; /* Unicode character for a downward-pointing arrow */
  font-size: 10px; /* Increase the font size of the arrow */
  display: none; /* Hide the arrow by default */
}

/* Show the arrow only when there's no text in the button */
.custom-button:empty::after {
  display: inline; /* Show the arrow when the button is empty */
}

.custom-value {
  color: #54616F; /* Text color similar to button background */
  font-size: 14px; /* Adjust font size to fit the design */
  font-weight: bold; /* Adjust font weight if necessary */
  border: 1px solid #54616F; /* Border color matching background color */
  padding: 0.5rem 1rem; /* Increase padding for a bigger button */
  border-radius: 0.25rem; /* Add rounded corners if necessary */
  cursor: pointer; /* Add a pointer cursor to indicate interactivity */
  position: relative; /* Position the pseudo-element */
  display: flex; /* Make the button a flex container */
  justify-content: space-between; /* Center the arrow horizontally */
  align-items: center; /* Center the arrow vertically */
}

body {
  background-color: #EAEBEB;
    /*background-image: url("backgroud.jpg");*/

}