.index-main {
    flex: 1;
    overflow-y: auto;
}

.data-main {
    flex: 1;
    overflow-y: scroll;
}

.search-form {
    background-color: RGB(25, 135, 84);
    padding: 1rem;
    color: white;
    min-height: 90px;
}

.search-wtf {
    width: 100%;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
}

.row-wtf {
    display: flex;
    flex-wrap: wrap;
}

.row-wtf > * {
    padding: 0 0.25rem 0; 
}

.row-wtf > [class^="col-"] > label {
    margin-bottom: 0px;
}

.col-category {
    width: 25%;
}
.col-datetime {
    width: 15%;
}
.col-button {
    width: 10%;
}

.message {
    background-color: red;
    margin: 4px 8px;
    padding: 0px 5px;
    display: inline-block;
    border-radius: 0.25rem;
}

.graph-duration {
    height: 400px;
}
.graph-duration > div {
    height: 100%;
}

.task-form {
    margin: 0.25rem 0;
    padding: 0.5rem;
    border: 1px solid rgb(182, 182, 182);
}
.table-result {
    min-height: 30px;
}
.table-scroll {
    overflow-y: auto;
}

/* .table-form {
    max-height: 55vh;
    overflow-y: auto;
} */

[class^="table"] table {
    border: 1px;
    padding: 0.5rem;
    background-color: white;
    width: auto;
    vertical-align: top;
    text-align: left;
}

tbody {
    border-top: 2px solid black;
    vertical-align: inherit;
    overflow-y: auto;
}

table th,
table td {
    padding: 0.5rem;
}

tr {
    border-bottom: 1px solid gray;
}

table > tbody > tr:hover {
    background-color: rgba(0, 0, 0, 0.075);
}

.rec-row {
    border-top: 1px dashed gray;
    padding: 10px 0;
    margin-left: 10px;
}
.rec-user {
    margin-left: 5px;
}
.rec-category {
    padding-left: 10px;
    border-left: 5px solid green;
}
.rec-category h2 {
    font-size: 1.55rem;
}

.rec-confirm-remark {
    margin-bottom: 10px;
}
.rec-confirm {
    white-space: pre-wrap;
    margin: 10px 0 0 30px;
}
.rec-remark {
    margin: 10px 0 0 30px;
    color: gray;
    white-space: pre-wrap;
}

.rec-delete {
    display: inline;
}
.rec-delete button{
    border: none;
    text-decoration: underline;
    background-color: inherit;
    color: rgb(0, 102, 204);
}

.td-text {
    white-space: pre-wrap;
    word-break: break-all;
}