.create-po-table {
    background-color: var(--secondary-bg-color);
    border-collapse: collapse;
}
.create-po-table input {
    width: 40px;
}
.create-po-table td {
    padding: 5px;
    border-bottom: var(--accent-color-1) solid 1px;
    text-align: center;
}
.create-po-table th {
    padding: 5px;
    background-color: var(--button-color);
    color: var(--seconday-text-color);
    border-bottom: var(--accent-color-2) solid 1px;
}
.create-po-table thead {
    position: sticky;
    top: 0
}
.create-po-table thead button {
    width: 75px;
    white-space: normal;
    word-wrap: break-word;
}
.create-po-table a {
    text-decoration: none;
    color: var(--primary-text-color);
}
.create-po-table .selected-row a {
    text-decoration: none;
    color: var(--primary-text-color);
}
.create-po-table .selected-row {
    background-color: var(--selected-row-color);
    color: var(--primary-text-color);
}
.create-po-table input[type='checkbox'] {
    cursor: pointer;
    margin: 0;
    font: inherit;
    width: 1.25em;
    height: 1.25em;
    vertical-align: middle;
}

.suggest-po-form {
    display: flex;
    flex-direction: row;
    align-items: last baseline;
    width: 80%;
    background-color: var(--lighten-bg-color);
    border-radius: 10px;
    color: var(--primary-text-color);
    border: var(--border-color) solid 1px;
    padding: 10px;
    margin: 10px;
}
.suggest-po-form div {
    display: flex;
    flex-direction: column;
    width: auto;
    margin: 10px;
}
.suggest-po-form select {
    padding: 5px;
    border-radius: 4px;
    background-color: var(--accent-color-1);
    color: var(--primary-text-color);
}
.suggest-po-form button {
    height: 40px;
    background-color: var(--button-color);

}
.suggest-po-form button:hover {
    cursor: pointer;
    background-color: var(--button-hover);
}
.po_items {
    margin-bottom: 50px;
}
.po-item-td-right-border {
    border-right: 1px solid var(--accent-color-1);
    cursor: pointer;
}