body {
    background-color: white;
    font-size: 16px;
    margin: 20px;
}

.deleting-row td {
    opacity: 0.5;
}

.deleted-row td {
    text-decoration: line-through;
    opacity: 0.5;
}

.tag-editor {
    position: absolute;
    z-index: 1000;
    background: white;
    width: 250px;
}
/* For small devices (width less than 768px, e.g., phones) */
@media (max-width: 1200px) {
  body {
    font-size: 14px;
    margin: 10px;
  }
}

/* For very small devices (width less than 480px, e.g., smaller phones) */
@media (max-width: 601px) {
  body {
    font-size: 12px;
    margin: 5px;
  }
}

.parent {
    display: flex;
    flex-direction: row;

  /* other styles */
}

.diy-label {
    width: 100px;
    text-align: right;
}
.diy_very_long {
    width: 300px;
}

button.diy-button-auto {
    background-color: transparent; /* no background color */
    border: 1px solid lightgrey; /* thin  border */
    border-radius: 5px; /* optional, for rounded corners */
    height: 30px;
}

input.right {
        text-align-last: right;
}
button.diy-button {
    background-color: transparent; /* no background color */
    border: 1px solid lightgrey; /* thin  border */
    border-radius: 5px; /* optional, for rounded corners */
    height: 30px;
    width: 75px;
}

a {
    color: blue;
    text-decoration: none;
}

button.diy-long {
    width: 200px;
}

button.diy-green:hover {
    background-color: green; /* change background to transparent on hover */
    color: white; /* change text color to green on hover */
}

button.diy-orange:hover {
    background-color: orange; /* change background to transparent on hover */
}

button.diy-red:hover {
    background-color: red; /* change background to transparent on hover */
    color: white; /* change text color to green on hover */
}

button.diy-yellow:hover {
    background-color: yellow; /* change background to transparent on hover */
}


button.diy-blue:hover {
    background-color: blue; /* change background to transparent on hover */
    color: white; /* change text color to green on hover */
}

.indent {
    padding-left: 20px
}

.m-action-btn {
  width: 200px;
  }

.rounded, .input {
  border-radius: 10px;
  padding-top: 5px;
  padding-right: 10px;
  padding-left: 10px;
  padding-bottom: 5px;
}

.spaced {
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 5px;
    margin-right: 5px;
}

td.right {
  display: inline-block;
  width: 155px;
  text-align: right;
  padding: 5px;
}

.diyrow {
  height: 100px;
}


tr.show {
  display: inline-block
  }

tr.hide {
  display: none
  }

.tableFixHead          { overflow: auto; height: 200px; }
.tableFixHead thead th { position: sticky; top: 0; z-index: 1; }

.table-container {
    max-height: 700px; /* Set the desired height for the scrollable area */
    overflow-y: auto; /* Enable vertical scrolling */
    border: 1px solid #ccc; /* Optional: Add a border around the table */
}

table {
    width: 100%; /* Ensure the table takes up the full width */
    border-collapse: collapse; /* Optional: Remove gaps between table cells */
}

thead {
    position: sticky; /* Keeps the header in place */
    top: 0; /* Aligns the header to the top */
    background-color: #fff; /* Set background color to prevent overlap effects */
    z-index: 1; /* Ensure the header stays above the body content */
}

/*
th, td {
    padding: 10px; /* Add padding for better readability
    border: 1px solid #ccc; /* Add borders for cell separation
    text-align: left; /* Align text to the left
}
*/